Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@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)Minimal example:
const onboarding = new MetamaskOnboarding()
onboarding.startOnboarding()
Here is an example of an onboarding button that uses this library:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sample Dapp</h1>
<button id='onboard'>Loading...</button>
<script type="text/javascript" src="./metamask-onboarding.bundle.js"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', () => {
const onboarding = new MetamaskOnboarding()
const onboardButton = document.getElementById('onboard')
let accounts
const updateButton = () => {
if (!MetamaskOnboarding.isMetaMaskInstalled()) {
onboardButton.innerText = 'Click here to install MetaMask!'
onboardButton.onclick = () => {
onboardButton.innerText = 'Onboarding in progress'
onboardButton.disabled = true
onboarding.startOnboarding()
}
} else if (accounts && accounts.length > 0) {
onboardButton.innerText = 'Connected'
onboardButton.disabled = true
onboarding.stopOnboarding()
} else {
onboardButton.innerText = 'Connect'
onboardButton.onclick = async () => {
await window.ethereum.enable()
}
}
}
updateButton()
if (MetamaskOnboarding.isMetaMaskInstalled()) {
window.ethereum.on('accountsChanged', (newAccounts) => {
accounts = newAccounts
updateButton()
})
}
})
</script>
</body>
</html>
FAQs
Assists with onboarding new MetaMask users
The npm package @metamask/onboarding receives a total of 141,300 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.