import { WebLoginProvider, init, useConnectWallet } from '@aelf-web-login/wallet-adapter-react'; const App = () => { const bridgeAPI = init(config); // upper config return ( <WebLoginProvider bridgeAPI={bridgeAPI}> <Demo /> </WebLoginProvider> ); }; const Demo = () => { const { connectWallet, disConnectWallet, walletInfo, lock, isLocking, isConnected, loginError, walletType, getAccountByChainId, getWalletSyncIsCompleted, getSignature, callSendMethod, callViewMethod, } = useConnectWallet(); };

import { Button } from 'aelf-design'; const Demo = () => { const { connectWallet } = useConnectWallet(); const onConnectBtnClickHandler = async () => { try { const rs = await connectWallet(); } catch (e: any) { console.log(e.message); } }; return <Button onClick={onConnectBtnClickHandler}>connect</Button>; };

import { Button } from 'aelf-design'; const Demo = () => { const { disConnectWallet } = useConnectWallet(); const onDisConnectBtnClickHandler = () => { disConnectWallet(); }; return <Button onClick={onDisConnectBtnClickHandler}>disConnect</Button>; };

import { Button } from 'aelf-design'; const Demo = () => { const { lock } = useConnectWallet(); return <Button onClick={lock}>lock</Button>; };

import { Button } from 'aelf-design'; const Demo = () => { const { getAccountByChainId } = useConnectWallet(); const getAelfAccountHandler = async() => { const address = await getAccountByChainId('AELF') console.log(address) } const getTdvwAccountHandler = async() => { const address = await getAccountByChainId('tDVW') console.log(address) } return ( <Button onClick={getAelfAccountHandler}>account-AELF</Button> <Button onClick={getTdvwAccountHandler}>account-tDVW</Button> ) }

import { Button } from 'aelf-design'; const Demo = () => { const { getWalletSyncIsCompleted } = useConnectWallet(); const getAelfSyncIsCompletedHandler = async() => { const address = await getWalletSyncIsCompleted('AELF') console.log(address) } const getTdvwSyncIsCompletedHandler = async() => { const address = await getWalletSyncIsCompleted('tDVW') console.log(address) } return ( <Button onClick={getAelfSyncIsCompletedHandler}>sync-AELF</Button> <Button onClick={getTdvwSyncIsCompletedHandler}>sync-tDVW</Button> ) }

import { Button, Input } from 'aelf-design'; type TSignatureParams = { appName: string; address: string; signInfo: string; hexToBeSign?: string; }; const Demo = () => { const { getSignature } = useConnectWallet(); const [signInfo, setSignInfo] = useState(''); const [signedMessage, setSignedMessage] = useState(''); const signHandler = async () => { const sign = await getSignature({ signInfo, appName: '', address: '', }); setSignedMessage(sign.signature); }; return ( div> <div> <Button onClick={signHandler}> Sign </Button> <Input value={signInfo} onChange={(e) => setSignInfo(e.target.value)} /> <div>{signedMessage}</div> </div> </div> ) }

import { Button } from 'aelf-design'; interface ICallContractParams<T> { contractAddress: string; methodName: string; args: T; chainId?: TChainId; sendOptions?: SendOptions; } const Demo = () => { const { callSendMethod } = useConnectWallet(); const [result, setResult] = useState({}); const onApproveHandler = async () => { const res = await callSendMethod({ chainId: 'tDVW', contractAddress: 'JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE', methodName: 'Approve', args: { symbol: 'ELF', spender: 'JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE', amount: '100000000', }, }); setResult(res); }; return ( <div> <Button onClick={onApproveHandler}>Approve in tDVW</Button> <div> <h4>Result</h4> <pre className="result">{JSON.stringify(result, null, ' ')}</pre> </div> </div> ); };

import { Button } from 'aelf-design'; interface ICallContractParams<T> { contractAddress: string; methodName: string; args: T; chainId?: TChainId; sendOptions?: SendOptions; // only send method use, ignore in view method } const Demo = () => { const { callViewMethod, getAccountByChainId } = useConnectWallet(); const [result, setResult] = useState({}); const onGetBalanceHandler = async () => { const res = await callViewMethod({ chainId: 'tDVW', contractAddress: 'ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx', methodName: 'GetBalance', args: { symbol: 'ELF', owner: await getAccountByChainId('tDVW'), }, }); setResult(res); }; return ( <div> <Button onClick={onGetBalanceHandler}>GetBalance in tDVW</Button> <div> <h4>Result</h4> <pre className="result">{JSON.stringify(result, null, ' ')}</pre> </div> </div> ); };

type TWalletInfo = | { name?: string; address: string; extraInfo?: { [key: string]: any; }; } | undefined; // walletInfo returned by nightElf { name, address, extraInfo: { publicKey, nightElfInfo: { name, appPermission, defaultAElfBridge: bridge, aelfBridges: bridges, nodes, }, }, } // walletInfo returned by portkeyAA import { DIDWalletInfo } from '@portkey/did-ui-react'; { name, address, extraInfo: { publicKey, portkeyInfo: { ...DIDWalletInfo accounts: { [chainId]: didWalletInfo.caInfo?.caAddress, }, nickName, }, }, } // walletInfo returned by portkeyDiscover import type { Accounts, IPortkeyProvider } from '@portkey/provider-types'; { address, extraInfo: { accounts: Accounts, nickName, provider: IPortkeyProvider, }, } const Demo = () => { const { walletInfo } = useConnectWallet(); console.log(walletInfo) return null }

enum WalletTypeEnum { unknown = 'Unknown', elf = 'NightElf', aa = 'PortkeyAA', discover = 'PortkeyDiscover', } const Demo = () => { const { walletType } = useConnectWallet(); console.log(walletType); return null; };

import { Button } from 'aelf-design'; const Demo = () => { const { isLocking } = useConnectWallet(); return <Button>{isLocking ? 'unlock' : 'connect'}</Button>; };

import { Button } from 'aelf-design'; const Demo = () => { const { isConnected } = useConnectWallet(); return ( <div> <Button disabled={isConnected}>connect</Button> <Button disabled={!isConnected}>disConnect</Button> </div> ); };

type TWalletError = { name: string; code: number; message: string; nativeError?: any; }; const Demo = () => { const { loginError } = useConnectWallet(); useEffect(() => { if (!loginError) { return; } console.log(loginError.message); }, [loginError]); return null; };