Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@metamask/onboarding
Advanced tools
@metamask/onboarding is an npm package designed to facilitate the onboarding process for MetaMask users. It provides a streamlined way to guide users through the installation and setup of MetaMask, a popular Ethereum wallet and decentralized application (dApp) browser extension.
Check if MetaMask is installed
This feature allows you to check if MetaMask is already installed in the user's browser. If MetaMask is not installed, you can prompt the user to install it.
const onboarding = new MetaMaskOnboarding();
if (!MetaMaskOnboarding.isMetaMaskInstalled()) {
console.log('MetaMask is not installed');
}
Start MetaMask onboarding
This feature initiates the MetaMask onboarding process, guiding the user through the steps to install and set up MetaMask.
const onboarding = new MetaMaskOnboarding();
onboarding.startOnboarding();
Stop MetaMask onboarding
This feature stops the MetaMask onboarding process, which can be useful if the user decides to cancel the installation or if the installation is completed.
const onboarding = new MetaMaskOnboarding();
onboarding.stopOnboarding();
Web3Modal is a library that allows developers to easily integrate multiple web3 wallet providers into their dApps. It provides a modal for users to select their preferred wallet, including MetaMask, WalletConnect, and others. Compared to @metamask/onboarding, Web3Modal offers a broader range of wallet options but does not focus specifically on the MetaMask onboarding process.
Web3-react is a library for connecting React applications to Ethereum wallets. It supports multiple wallet providers and offers hooks for managing wallet connections. While it provides more flexibility in terms of wallet support, it does not offer the same dedicated onboarding experience for MetaMask as @metamask/onboarding.
Use-wallet is a React hook for managing Ethereum wallet connections. It supports multiple wallet providers and offers a simple API for integrating wallet functionality into React applications. Like web3modal and web3-react, it provides broader wallet support but lacks the specific onboarding features for MetaMask found in @metamask/onboarding.
This library is used to help onboard new MetaMask users. It allows you to ask the MetaMask extension to redirect users back to your page after onboarding has finished.
This library will register the current page as having initiated onboarding, so that MetaMask knows where to redirect the user after onboarding. Note that the page will be automatically reloaded a single time once a MetaMask installation is detected, in order to facilitate this registration.
@metamask/onboarding
is made available as either a CommonJS module, and ES6 module, or an ES5 bundle.
import MetaMaskOnboarding from '@metamask/onboarding'
const MetaMaskOnboarding = require('@metamask/onboarding')
dist/metamask-onboarding.bundle.js
(this can be included directly in a page)See § Onboarding Library on the MetaMask Docs website for examples.
Assuming import MetaMaskOnboarding from '@metamask/onboarding'
, the following API is available.
MetaMaskOnboarding.isMetaMaskInstalled()
Returns true
if a MetaMask-like provider is detected, or false
otherwise. Note that we don't provide any guarantee that this is correct, as non-MetaMask wallets can disguise themselves as MetaMask.
MetaMaskOnboarding.FORWARDER_MODE
A set of constants for each of the available forwarder modes.
Constant | Description |
---|---|
INJECT | Inject a iframe to that will refresh until MetaMask has installed |
OPEN_TAB | Open a tab to a new page that will refresh until MetaMask has installed—this is only useful if the client app has disallowed iframes |
new MetaMaskOnboarding()
The constructor accepts an optional options bag with the following:
Option | Description |
---|---|
forwarderOrigin | Override the forwarder URL, useful for testing. Optional, defaults to 'https://fwd.metamask.io' . |
forwarderMode | One of the available forwarder modes. Optional, defaults to MetaMaskOnboarding.FORWARDER_MODE.INJECT . |
startOnboarding()
Starts onboarding by opening the MetaMask download page and waiting for MetaMask to be installed. Once the MetaMask extension installation is detected, a message will be sent to MetaMask to register the current site as the onboarding initiator.
stopOnboarding()
Stops onboarding registration, including removing the injected iframe
(if any).
nvm use
will automatically choose the right node version for you.yarn setup
to install dependencies and run any requried post-install scripts
yarn
/ yarn install
command directly. Use yarn setup
instead. The normal install command will skip required post-install scripts, leaving your development environment in an invalid state.Run yarn lint
to run the linter.
The project follows the same release process as the other libraries in the MetaMask organization:
main
1.x
)yarn version --minor --no-git-tag-version
)main
or 1.x
)This project is available under the MIT license.
FAQs
Assists with onboarding new MetaMask users
The npm package @metamask/onboarding receives a total of 145,924 weekly downloads. As such, @metamask/onboarding popularity was classified as popular.
We found that @metamask/onboarding demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.