@web3-onboard/injected-wallets
Advanced tools
Injected wallet module for connecting browser extension and mobile wallets to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported
To allow all injected wallets that are supported, don't pass in any options:
import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
const injected = injectedModule()
const onboard = Onboard({
wallets: [injected],
chains: [
{
id: '0x1',
token: 'ETH',
label: 'Ethereum Mainnet',
rpcUrl: MAINNET_RPC_URL
},
{
id: '0x2105',
token: 'ETH',
label: 'Base',
rpcUrl: 'https://mainnet.base.org'
}
],
appMetadata: {
name: 'My App',
icon: '<SVG_ICON_STRING>',
description: 'My app using Onboard'
}
})
const connectedWallets = await onboard.connectWallet()
console.log(connectedWallets)
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:
import Onboard from '@web3-onboard/core'
import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets'
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
const injected = injectedModule({
filter: {
[ProviderLabel.Detected]: false
}
})
const onboard = Onboard({
wallets: [injected]
//... other options
})
Or you may want to only filter the 'Detected Wallet' on a select few platforms:
import Onboard from '@web3-onboard/core'
import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets'
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
const injected = injectedModule({
filter: {
// allow only on non android mobile
[ProviderLabel.Detected]: ['Android', 'desktop']
}
})
const onboard = Onboard({
wallets: [injected]
//... other options
})
The following platforms can be used to filter wallets:
type Platform =
| 'Windows Phone'
| 'Windows'
| 'macOS'
| 'iOS'
| 'Android'
| 'Linux'
| 'Chrome OS'
| 'Android Browser'
| 'Chrome'
| 'Chromium'
| 'Firefox'
| 'Microsoft Edge'
| 'Opera'
| 'Safari'
| 'desktop'
| 'mobile'
| 'tablet'
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:
const equal = {
// The label that will be displayed in the wallet selection modal
label: 'Equal',
// The property on the window where the injected provider is defined
// Example: window.ethereum
injectedNamespace: 'ethereum',
// A function that returns a bool indicating whether or not the provider is
// of a certain identity. In this case, a unique property on the provider
// is used to identify the provider.
// In most cases this is in the format: `is<provider-name>`.
// You may also include custom logic here if checking for the property
// isn't sufficient.
checkProviderIdentity: ({ provider }) =>
!!provider && !!provider[ProviderIdentityFlag.MetaMask],
// A method that returns a string of the wallet icon which will be displayed
getIcon: async () => (await import('<PATH_TO_ICON>')).default,
// Returns a valid EIP1193 provider. In some cases the provider will need to be patched to satisfy the EIP1193 Provider interface
getInterface: () => ({
provider: window.ethereum
}),
// A list of platforms that this wallet supports
platforms: ['desktop'],
/**
* A Url to link users to a download page for the wallet
* to be shown if not installed or available on the browser
*/
externalUrl: 'http://www.CoolEqualWalletDownload.com'
}
const injected = injectedModule({
custom: [equal]
})
const onboard = Onboard({
wallets: [injected]
//... other options
})
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:
const injected = injectedModule({
// display all unavailable injected wallets
displayUnavailable: true,
||
// display specific unavailable wallets
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust]
})
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:
const injected = injectedModule({
// display specific injected wallets even if they are unavailable
// can also be set to `true` to display all unavailable injected wallets
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
// do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
sort: wallets => {
const metaMask = wallets.find(
({ label }) => label === ProviderLabel.MetaMask
)
const coinbase = wallets.find(
({ label }) => label === ProviderLabel.Coinbase
)
return (
[
metaMask,
coinbase,
...wallets.filter(
({ label }) =>
label !== ProviderLabel.MetaMask && label !== ProviderLabel.Coinbase
)
]
// remove undefined values
.filter(wallet => wallet)
)
}
})
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:
const injected = injectedModule({
// display specific injected wallets even if they are unavailable
// can also be set to `true` to display all unavailable injected wallets
displayUnavailable: true,
// but only show Binance and Bitski wallet if they are available
filter: {
[ProviderLabel.Binance]: 'unavailable',
[ProviderLabel.Bitski]: 'unavailable'
},
// do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
sort: wallets => {
const metaMask = wallets.find(
({ label }) => label === ProviderLabel.MetaMask
)
const coinbase = wallets.find(
({ label }) => label === ProviderLabel.Coinbase
)
return (
[
metaMask,
coinbase,
...wallets.filter(
({ label }) =>
label !== ProviderLabel.MetaMask && label !== ProviderLabel.Coinbase
)
]
// remove undefined values
.filter(wallet => wallet)
)
}
})
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:
const injected = injectedModule({
custom: [
// include custom (not natively supported) injected wallet modules here
],
// display specific injected wallets even if they are unavailable
// can also be set to `true` to display all unavailable injected wallets
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
// but only show Binance and Bitski wallet if they are available
filter: {
[ProviderLabel.Binance]: 'unavailable',
[ProviderLabel.Bitski]: 'unavailable'
},
// do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
sort: wallets => {
const metaMask = wallets.find(
({ label }) => label === ProviderLabel.MetaMask
)
const coinbase = wallets.find(
({ label }) => label === ProviderLabel.Coinbase
)
return (
[
metaMask,
coinbase,
...wallets.filter(
({ label }) =>
label !== ProviderLabel.MetaMask && label !== ProviderLabel.Coinbase
)
]
// remove undefined values
.filter(wallet => wallet)
)
},
walletUnavailableMessage: wallet =>
wallet.externalUrl
? `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>`
: `Oops ${wallet.label} is unavailable!`
})
FAQs
Injected wallet module for connecting browser extension and mobile wallets to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported
The npm package @web3-onboard/injected-wallets receives a total of 6,765 weekly downloads. As such, @web3-onboard/injected-wallets popularity was classified as popular.
We found that @web3-onboard/injected-wallets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.