Injected Wallets

Search…
Injected Wallets
This is the injected wallets module you will most likely want to add. With this module, Injected Wallets such as Metamask or Coinbase Wallet are automatically detected by web3-onboard.
@web3-onboard/injected-wallets
Quickstart
To allow all injected wallets that are supported, don't pass in any options:
1
import Onboard from '@web3-onboard/core'
2
import injectedModule from '@web3-onboard/injected-wallets'
3
​
4
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
5
​
6
const injected = injectedModule()
7
​
8
const 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
  appMetadata: {
19
    name: 'My App',
20
    icon: '<SVG_ICON_STRING>',
21
    description: 'My app using Onboard'
22
  }
23
})
24
​
25
const connectedWallets = await onboard.connectWallet()
26
​
27
console.log(connectedWallets)
Copied!
*Note: If you do not see an injected wallet you are expecting to see you or your clients may need to disable other injected wallets that may be added to the browser. This is because many wallets inject into the window.ethereum namespace and will override eachother. Some wallets such as Coinbase wallet do pass up the wallet providers injected before them but others do not. We are working with wallet providers to make this passing of previously injected providers upward a standard.
Excluding 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:
1
import Onboard from '@web3-onboard/core'
2
import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets'
3
​
4
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
5
​
6
const injected = injectedModule({
7
  filter: {
8
    [ProviderLabel.Detected]: false
9
  }
10
})
11
​
12
const onboard = Onboard({
13
  wallets: [injected]
14
  //... other options
15
})
Copied!
Or you may want to only filter the 'Detected Wallet' on a select few platforms:
1
import Onboard from '@web3-onboard/core'
2
import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets'
3
​
4
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
5
​
6
const injected = injectedModule({
7
  filter: {
8
    // allow only on non android mobile
9
    [ProviderLabel.Detected]: ['Android', 'desktop']
10
  }
11
})
12
​
13
const onboard = Onboard({
14
  wallets: [injected]
15
  //... other options
16
})
Copied!
The following platforms can be used to filter wallets:
1
type 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'
Copied!
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:
1
const 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['isMetaMask'],
15
  // A method that returns a string of the wallet icon which will be displayed
16
  getIcon: async () => (await import('<PATH_TO_ICON>')).default,
17
  // Returns a valid EIP1193 provider. In some cases the provider will need to be patched to satisfy the EIP1193 Provider interface
18
  getInterface: () => ({
19
    provider: window.ethereum
20
  }),
21
  // A list of platforms that this wallet supports
22
  platforms: ['desktop']
23
}
24
​
25
const injected = injectedModule({
26
  custom: [equal]
27
})
28
​
29
const onboard = Onboard({
30
  wallets: [injected]
31
  //... other options
32
})jav
Copied!
Injected Wallets Supported Natively
Metamask - Desktop & Mobile
Binance - Desktop
Coinbase - Desktop & Mobile
Tally - 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
OneInch - Mobile
Tokenary - Mobile
​
Core
Magic Wallet
Last modified 18d ago
Copy link
Contents
@web3-onboard/injected-wallets
Quickstart
Excluding Wallets
Adding Custom Injected Wallets