https://github.com/bitriel/wallet-sdk-react
https://github.com/bitriel/wallet-sdk-react
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bitriel/wallet-sdk-react
- Owner: bitriel
- License: mit
- Created: 2024-06-27T02:03:27.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-06-27T03:00:11.000Z (12 months ago)
- Last Synced: 2024-06-28T04:59:48.413Z (12 months ago)
- Language: TypeScript
- Size: 866 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WalletSDK for React
## Overview
This library provides a React context and provider to easily manage blockchain wallets, contracts, and chain information using the WalletSDK core library. It simplifies the integration of blockchain functionality into React applications.
## Features
- Wallet Management: Manage wallet state and mnemonic phrases.
- Chain Management: Easily switch between different blockchain networks.
- Contract Management: Load, add, remove, and edit contracts.
- Context Integration: Utilize React context for state management and easy access across components.
## Installation
To use the WalletSDK for React, install the necessary dependencies:
```bash
npm install bitriel/wallet-sdk-react
```
## Usage
Here's an example of how to use the AccountProvider and useAccount hook in your React application:
```javascript
import React from "react";
import { AccountProvider, useAccount } from "wallet-sdk-react";
const App = () => {
return (
);
};
const MyComponent = () => {
const { account, switchChain, switchWallet, addContract } = useAccount();
return (
switchChain("https://another.chain.rpc")}>
Switch Chain
switchWallet("new mnemonic phrase")}>
Switch Wallet
addContract({
abi: yourContractAbi,
address: "0xYourContractAddress",
name: "YourContractName",
symbol: "YCN",
type: "ERC20",
chain: "mainnet",
})
}
>
Add Contract
Account Address: {account?.wallet?.address}
);
};
```
## AccountContext Interfaces
The AccountContext and AccountProvider are used to manage and provide wallet-related state and functions throughout your React application.
This context expose the following features and interfaces:
```typescript
type ContractInfo = {
abi: ethers$1.Interface | ethers$1.InterfaceAbi;
address: string;
decimal?: number;
name: string;
symbol: string;
type: string;
chain: string;
};
interface Chain {
name: string;
url: string;
symbol: string;
logo: string;
}
declare const WalletSDK: (
mnemonic: string,
chain: string,
contracts?: ContractInfo[]
) => {
balance: () => Promise;
balanceOf: (address: AddressLike) => Promise;
transfer: (
to: AddressLike,
amount: ethers$1.BigNumberish
) => Promise;
provider: ethers$1.JsonRpcProvider;
wallet: ethers$1.HDNodeWallet;
contracts: Map;
};
interface iAccountContext {
account: ReturnType | null;
switchChain?: Function;
switchWallet?: Function;
loadContract?: Function;
addContract?: Function;
removeContract: (address: string) => void;
editContract: (address: string, update: ContractInfo) => void;
chains?: Chain[];
chain: string | null;
chainInfo?: Chain;
contractsByChain: ContractInfo[];
}
```
## DevTools
To ease up development, we also provide a development widget which can serve as
- Wallet
- Contract Management and interaction similar to Remix
- Code generation
- Resizable, collapsable, dark and light mode
```javascript
import React from "react";
import { AccountProvider, WalletDevTool } from "wallet-sdk-react";
const App = () => {
return (
{/* Just insert WalletDevTool anywhere inside AccountProvider */}
);
};
```
