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:

npm install bitriel/wallet-sdk-react

Usage

Here's an example of how to use the AccountProvider and useAccount hook in your React application:

importReactfrom"react";import{AccountProvider,useAccount}from"wallet-sdk-react";constApp=()=>{return(<AccountProvider><MyComponent/></AccountProvider>);};constMyComponent=()=>{const{ account, switchChain, switchWallet, addContract }=useAccount();return(<div><buttononClick={()=>switchChain("https://another.chain.rpc")}>
Switch Chain
</button><buttononClick={()=>switchWallet("new mnemonic phrase")}>
Switch Wallet
</button><buttononClick={()=>addContract({abi: yourContractAbi,address: "0xYourContractAddress",name: "YourContractName",symbol: "YCN",type: "ERC20",chain: "mainnet",})}>
Add Contract
</button><div>Account Address: {account?.wallet?.address}</div></div>);};

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:

typeContractInfo={abi: ethers$1.Interface|ethers$1.InterfaceAbi;address: string;decimal?: number;name: string;symbol: string;type: string;chain: string;};interfaceChain{name: string;url: string;symbol: string;logo: string;}declareconstWalletSDK: (mnemonic: string,chain: string,contracts?: ContractInfo[])=>{balance: ()=>Promise<bigint>;balanceOf: (address: AddressLike)=>Promise<bigint>;transfer: (to: AddressLike,amount: ethers$1.BigNumberish)=>Promise<ethers$1.TransactionReceipt|null>;provider: ethers$1.JsonRpcProvider;wallet: ethers$1.HDNodeWallet;contracts: Map<string,Contract>;};interfaceiAccountContext{account: ReturnType<typeofWalletSDK>|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

importReactfrom"react";import{AccountProvider,WalletDevTool}from"wallet-sdk-react";constApp=()=>{return(<AccountProvider><MyComponent/>{/* Just insert WalletDevTool anywhere inside AccountProvider */}<WalletDevTool/></AccountProvider>);};