Add Wallet Onboard to your app

1const onSuccess = useCallback<PlaidWeb3OnSuccess>(
2  // provider is an EIP-1193 compatible JavaScript object https://eips.ethereum.org/EIPS/eip-1193
3  // provider can be used by other libraries to request more data
4  async (provider, metadata) => {
5    // metadata contains the connected wallet name
6    const walletName = metadata.wallet.name;
7    // provider is an EIP-1193 compatible JavaScript object https://eips.ethereum.org/EIPS/eip-1193
8    // provider can be used by other libraries to request more data
9    const accounts = await provider.request({
10      method: 'eth_accounts',
11    });
12  },
13  [],
14);
15
16const onExit = useCallback<PlaidLinkOnExit>((error, metadata) => {
17  // Optional callback, called if the user exits without connecting a wallet
18  // See https://plaid.com/docs/link/web/#onexit for details
19}, []);
20
21const { open, ready } = useEthereumProvider({
22  // retrieve from https://dashboard.plaid.com/team/wallet-onboard
23  token: '',
24  chain: {
25    // RPC gateway URL to use for non-wallet methods
26    rpcUrl: '',
27    // EVM chain ID in hexadecimal format as described in https://eips.ethereum.org/EIPS/eip-695
28    // See https://chainlist.org/ for a list of common chains
29    chainId: '0x1',
30  },
31  onSuccess,
32  onExit,
33});
34
35return (
36  <button onClick={() => open()} disabled={!ready}>
37    Connect wallet
38  </button>
39);

1// Getting the connected accounts
2const accounts: string[] = await provider.request({ method: 'eth_accounts' });
3
4// Request a signed message
5const account = accounts[0];
6const message = Web3.utils.toHex('Hello!');
7const signature: string = await provider.request({
8  method: 'personal_sign',
9  params: [message, accounts],
10});
11// The signature can be used to verify the signer using another library
12// For example, using Web3.js:
13const recoveredAccount: string = web3.eth.accounts.recover(message, signature);
14const validSignature = recoveredAccount === account;
15
16// Send network currency (e.g. ETH)
17const to: string = '0x...';
18const from: string = account;
19// value is denominated in e.g. wei for ETH
20// Usually a library should be used to convert
21// between the denominations
22const value: string = Web3.utils.toWei('1', 'ether');
23const txHash: string = await provider.request({
24  method: 'eth_sendTransaction',
25  params: [
26    {
27      to,
28      from,
29      value,
30    },
31  ],
32});

1// Example: Web3.js https://web3js.readthedocs.io/en/v1.7.3/
2const web3 = new Web3(provider);
3const address = (await web3.eth.getAccounts())[0];
4const balance = await web3.eth.getBalance(address);
5
6// Example: Ethers.js https://docs.ethers.io/v5/
7const web3Provider = new providers.Web3Provider(provider);
8const signer = web3Provider.getSigner();
9const address = await signer.getAddress();
10const balance = await web3Provider.getBalance(address);

1const handleChainChanged = (chainId) => {
2  if (isCompatibleChain(chainId)) {
3    // update UI
4  } else {
5    // alert the user
6  }
7};
8provider.on('chainChanged', handleChainChanged);
9
10const handleAccountsChanged = (accounts) => {
11  if (accounts.length > 0) {
12    // update UI
13  } else {
14    // alert the user
15  }
16};
17provider.on('accountsChanged', accountsChanged);

1const config = { token: '', chain: { chainId, rpcUrl } };
2const {
3  open,
4  ready,
5  getCurrentEthereumProvider,
6  isProviderActive,
7} = useEthereumProvider(config);
8
9useEffect(() => {
10  if (!ready || !getCurrentEthereumProvider || !isProviderActive) {
11    return;
12  }
13  (async () => {
14    const provider = await getCurrentEthereumProvider(config.chain);
15    if (!provider) {
16      // UX to handle no existing connection
17      return;
18    }
19    const isActive = await isProviderActive(provider);
20    if (isActive) {
21      // use provider
22    } else {
23      // UX to handle no existing connection
24    }
25  })();
26}, [ready, getCurrentEthereumProvider, isProviderActive]);

1const { open, ready, disconnectEthereumProvider } = useEthereumProvider(config);
2
3const disconnect = useCallback(() => {
4  if (!disconnectEthereumProvider || !provider) {
5    return;
6  }
7
8  async () => {
9    await disconnectEthereumProvider(provider);
10  };
11}, [disconnectEthereumProvider, provider]);
12
13if (provider) {
14  return <button onClick={disconnect}>Disconnect</button>;
15}
16
17return (
18  <button onClick={() => open()} disabled={!ready}>
19    Connect wallet
20  </button>
21);