@web3-onboard/walletconnect

Wallet module for connecting Wallet Connect to web3-onboard

Install

npm i @web3-onboard/core @web3-onboard/walletconnect

Options

1type WalletConnectOptions = {
2  /**
3   * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
4   */
5  projectId: string
6  /**
7   * Defaults to `appMetadata.explore` that is supplied to the web3-onboard init
8   * Strongly recommended to provide atleast one URL as it is required by some wallets (i.e. MetaMask)
9   * To connect with walletconnect
10   */
11  dappUrl?: string
12  /**
13   * List of Required Chain(s) ID for wallets to support in number format (integer or hex)
14   * Defaults to [1] - Ethereum
15   */
16  requiredChains?: number[] | undefined
17  /**
18   * List of Optional Chain(s) ID for wallets to support in number format (integer or hex)
19   * Defaults to the chains provided within the web3-onboard init chain property
20   */
21  optionalChains?: number[] | undefined
22  /**
23   * `undefined` by default, see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
24   */
25  qrModalOptions?: EthereumProviderOptions['qrModalOptions']
26  /**
27   * Additional required methods to be added to the default list of ['eth_sendTransaction', 'personal_sign']
28   * Passed methods to be included along with the defaults methods - see https://docs.walletconnect.com/2.0/advanced/providers/ethereum#required-and-optional-methods
29   */
30  additionalRequiredMethods?: string[] | undefined
31  /**
32   * Additional methods to be added to the default list of ['eth_sendTransaction',  'eth_signTransaction',  'personal_sign',  'eth_sign',  'eth_signTypedData',  'eth_signTypedData_v4']
33   * Passed methods to be included along with the defaults methods - see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
34   */
35  additionalOptionalMethods?: string[] | undefined
36  /**
37   * Optional function to handle WalletConnect URI when it becomes available
38   */
39  handleUri?: (uri: string) => Promise<unknown>
40)

Usage

1import Onboard from '@web3-onboard/core'
2import walletConnectModule from '@web3-onboard/walletconnect'
3
4const wcInitOptions = {
5  /**
6   * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
7   */
8  projectId: 'abc123...',
9  /**
10   * Chains required to be supported by all wallets connecting to your DApp
11   */
12  requiredChains: [1],
13  /**
14   * Chains required to be supported by all wallets connecting to your DApp
15   */
16  optionalChains: [42161, 8453, 10, 137, 56],
17  /**
18   * Defaults to `appMetadata.explore` that is supplied to the web3-onboard init
19   * Strongly recommended to provide atleast one URL as it is required by some wallets (i.e. MetaMask)
20   * To connect with WalletConnect
21   */
22  dappUrl: 'http://YourAwesomeDapp.com'
23}
24
25// initialize the module with options
26const walletConnect = walletConnectModule(wcInitOptions)
27
28// can also initialize with no options...
29
30const onboard = Onboard({
31  // ... other Onboard options
32  wallets: [
33    walletConnect
34    //... other wallets
35  ]
36})
37
38const connectedWallets = await onboard.connectWallet()
39
40// Assuming only wallet connect is connected, index 0
41// `instance` will give insight into the WalletConnect info
42// such as namespaces, methods, chains, etc per wallet connected
43const { instance } = connectedWallets[0]
44
45console.log(connectedWallets)