@web3-onboard/injected-wallets

Quickstart

To allow all injected wallets that are supported natively by web3-onboard or wallets that have implemented EIP-6963 support - don't pass in any options:

1import Onboard from '@web3-onboard/core'
2import injectedModule from '@web3-onboard/injected-wallets'
3
4const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
5
6const injected = injectedModule()
7
8const onboard = Onboard({
9  wallets: [injected],
10  chains: [
11    {
12      id: '0x1',
13      token: 'ETH',
14      label: 'Ethereum Mainnet',
15      rpcUrl: MAINNET_RPC_URL
16    },
17    {
18      id: '0x2105',
19      token: 'ETH',
20      label: 'Base',
21      rpcUrl: 'https://mainnet.base.org'
22    }
23  ],
24  appMetadata: {
25    name: 'My App',
26    icon: '<SVG_ICON_STRING>',
27    description: 'My app using Onboard'
28  }
29})
30
31const connectedWallets = await onboard.connectWallet()
32
33console.log(connectedWallets)

This module supports any injected wallet that has implemented support for EIP-6963

This can be disabled by passing in disable6963Support as true within the injected module init object.

1const injected = injectedModule({ disable6963Support: true })
2
3const onboard = Onboard({
4  wallets: [injected],
5  ...
6})

Injected Wallets Supported Natively

• Metamask - Desktop & Mobile
• Binance - Desktop
• Coinbase - Desktop & Mobile
• Phantom - Desktop & Mobile
• SafePal - Desktop & Mobile
• Zerion - Desktop & Mobile
• OKX Wallet - Desktop & Mobile
• Taho (Previously named Tally Ho wallet) - Desktop
• Trust - Mobile
• Opera - Desktop & Mobile
• Status - Mobile
• Alphawallet - Mobile
• Atoken - Mobile
• Bitpie - Mobile
• Blockwallet - Desktop
• Brave - Desktop & Mobile
• D'Cent - Mobile
• Frame - Desktop
• Huobiwallet - Mobile
• Hyperpay - Mobile
• IMtoken - Mobile
• Liquality - Desktop
• Meetone - Mobile
• Mykey - Mobile
• Ownbit - Mobile
• Tokenpocket - Desktop & Mobile
• TP - Mobile
• xDefi - Desktop & Mobile
• 1inch - Mobile
• Tokenary - Mobile
• Rabby - Desktop & Mobile
• MathWallet - Desktop & Mobile
• Bitget - Desktop & Mobile
• Sequence - Desktop & Mobile
• Core - Desktop
• Bitski - Desktop & Mobile
• Enkrypt - Desktop & Mobile
• Zeal - Desktop
• Exodus - Desktop & Mobile
• Frontier - Desktop & Mobile
• Rainbow - Desktop & Mobile
• DeFiWallet - Desktop & Mobile
• ApexWallet - Desktop
• BifrostWallet - Desktop & Mobile
• Safeheron - Desktop
• Talisman - Desktop
• Ronin Wallet - Desktop & Mobile
• Coin98 Wallet - Desktop & Mobile
• SubWallet - Desktop & Mobile
• Kayros - Desktop
• Lif3Wallet - Mobile
• Zodiac Pilot - Desktop
• Echooo - Desktop & Mobile

Filtering Wallets

Injected wallets that you do not want to support can be filtered based on the Platform the user is on. For example you may not want to support the 'Detected Wallet' that is detected automatically and filter it via all platforms by passing false:

1import Onboard from '@web3-onboard/core'
2import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets'
3
4const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
5
6const injected = injectedModule({
7  filter: {
8    [ProviderLabel.Detected]: false
9  }
10})
11
12const onboard = Onboard({
13  wallets: [injected]
14  //... other options
15})

Or you may want to only filter the 'Detected Wallet' on a select few platforms:

1import Onboard from '@web3-onboard/core'
2import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets'
3
4const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
5
6const injected = injectedModule({
7  filter: {
8    // allow only on non android mobile
9    [ProviderLabel.Detected]: ['Android', 'desktop']
10  }
11})
12
13const onboard = Onboard({
14  wallets: [injected]
15  //... other options
16})

The following platforms can be used to filter wallets:

1type Platform =
2  | 'Windows Phone'
3  | 'Windows'
4  | 'macOS'
5  | 'iOS'
6  | 'Android'
7  | 'Linux'
8  | 'Chrome OS'
9  | 'Android Browser'
10  | 'Chrome'
11  | 'Chromium'
12  | 'Firefox'
13  | 'Microsoft Edge'
14  | 'Opera'
15  | 'Safari'
16  | 'desktop'
17  | 'mobile'
18  | 'tablet'

Adding Custom Injected Wallets

If there is an injected wallet that you would like to support in your app, but is not yet included in this repo, you can add a custom wallet module in the custom field:

1const equal = {
2  // The label that will be displayed in the wallet selection modal
3  label: 'Equal',
4  // The property on the window where the injected provider is defined
5  // Example: window.ethereum
6  injectedNamespace: 'ethereum',
7  // A function that returns a bool indicating whether or not the provider is
8  // of a certain identity. In this case, a unique property on the provider
9  // is used to identify the provider.
10  // In most cases this is in the format: `is<provider-name>`.
11  // You may also include custom logic here if checking for the property
12  // isn't sufficient.
13  checkProviderIdentity: ({ provider }) =>
14    !!provider && !!provider[ProviderIdentityFlag.MetaMask],
15
16  // A method that returns a string of the wallet icon which will be displayed
17  getIcon: async () => (await import('<PATH_TO_ICON>')).default,
18  // Returns a valid EIP1193 provider. In some cases the provider will need to be patched to satisfy the EIP1193 Provider interface
19  getInterface: () => ({
20    provider: window.ethereum
21  }),
22  // A list of platforms that this wallet supports
23  platforms: ['desktop'],
24  /**
25   * A Url to link users to a download page for the wallet
26   * to be shown if not installed or available on the browser
27   */
28  externalUrl: 'http://www.CoolEqualWalletDownload.com'
29}
30
31const injected = injectedModule({
32  custom: [equal]
33})
34
35const onboard = Onboard({
36  wallets: [injected]
37  //... other options
38})

Display Unavailable Wallets

You may want to display injected wallets that are not currently available to the user and you can use the displayUnavailable option to do that:

1const injected = injectedModule({
2  // display all unavailable injected wallets
3  displayUnavailable: true,
4  ||
5  // display specific unavailable wallets
6  displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust]
7})

This can be set to an array top specify which unavailable injected wallets to show or set to true to display all unavailable injected wallets regardless of whether it has been detected in the window, happy days. Then the issue of the order of wallets displayed becomes apparent when you have 21 injected wallets at the top of the wallets list. To solve this, all injected wallets are sorted alphabetically by default and there is an additional sort parameter which receives the final list of wallets and then returns the list to be rendered. This allows for example setting MetaMask and Coinbase first and then just the rest alphabetically:

1const injected = injectedModule({
2  // display specific injected wallets even if they are unavailable
3  // can also be set to `true` to display all unavailable injected wallets
4  displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
5  // do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
6  sort: wallets => {
7    const metaMask = wallets.find(
8      ({ label }) => label === ProviderLabel.MetaMask
9    )
10    const coinbase = wallets.find(
11      ({ label }) => label === ProviderLabel.Coinbase
12    )
13
14    return (
15      [
16        metaMask,
17        coinbase,
18        ...wallets.filter(
19          ({ label }) =>
20            label !== ProviderLabel.MetaMask && label !== ProviderLabel.Coinbase
21        )
22      ]
23        // remove undefined values
24        .filter(wallet => wallet)
25    )
26  }
27})

You may want to display all unavailable injected wallets, but filter out specific wallets based on their availability. For example I may want to display all unavailable wallets except when Binance and Bitski wallet is unavailable, then don't show them, but if they are available, then do show them. To do this, the filters value has been extended to have a new value: 'unavailable', as in; remove this wallet if it is unavailable, even though displayUnavailable wallets is set:

1const injected = injectedModule({
2  // display specific injected wallets even if they are unavailable
3  // can also be set to `true` to display all unavailable injected wallets
4  displayUnavailable: true,
5  // but only show Binance and Bitski wallet if they are available
6  filter: {
7    [ProviderLabel.Binance]: 'unavailable',
8    [ProviderLabel.Bitski]: 'unavailable'
9  },
10  // do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
11  sort: wallets => {
12    const metaMask = wallets.find(
13      ({ label }) => label === ProviderLabel.MetaMask
14    )
15    const coinbase = wallets.find(
16      ({ label }) => label === ProviderLabel.Coinbase
17    )
18
19    return (
20      [
21        metaMask,
22        coinbase,
23        ...wallets.filter(
24          ({ label }) =>
25            label !== ProviderLabel.MetaMask && label !== ProviderLabel.Coinbase
26        )
27      ]
28        // remove undefined values
29        .filter(wallet => wallet)
30    )
31  }
32})

If a wallet is selected, but is not available the default error message is: Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a> if a download link is available for that wallet. If there isn't a download link for that wallet the default is: Please install or enable ${walletName} to continue. You may want to customize that message, so there is the walletUnavailableMessage parameter which is a function that takes the wallet object that is unavailable and returns a string which is the message to display:

1const injected = injectedModule({
2  custom: [
3    // include custom (not natively supported) injected wallet modules here
4  ],
5  // display specific injected wallets even if they are unavailable
6  // can also be set to `true` to display all unavailable injected wallets
7  displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
8
9  // but only show Binance and Bitski wallet if they are available
10  filter: {
11    [ProviderLabel.Binance]: 'unavailable',
12    [ProviderLabel.Bitski]: 'unavailable'
13  },
14  // do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
15  sort: wallets => {
16    const metaMask = wallets.find(
17      ({ label }) => label === ProviderLabel.MetaMask
18    )
19    const coinbase = wallets.find(
20      ({ label }) => label === ProviderLabel.Coinbase
21    )
22
23    return (
24      [
25        metaMask,
26        coinbase,
27        ...wallets.filter(
28          ({ label }) =>
29            label !== ProviderLabel.MetaMask && label !== ProviderLabel.Coinbase
30        )
31      ]
32        // remove undefined values
33        .filter(wallet => wallet)
34    )
35  },
36  walletUnavailableMessage: wallet =>
37    wallet.externalUrl
38      ? `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>`
39      : `Oops ${wallet.label} is unavailable!`
40})