Skip to main content

Connect to MetaMask using Web3-Onboard

Web3-Onboard is a JavaScript library that simplifies the process of onboarding users into dapps. It provides a smooth user interface, a variety of wallet integrations, and is highly customizable to meet the needs of your dapp.

You can integrate MetaMask SDK into your dapp alongside Web3-Onboard, using the Web3-Onboard MetaMask module, to enable your users to seamlessly and securely connect to the MetaMask browser extension and MetaMask Mobile.

Prerequisites

Set up a project with Web3-Onboard.

Steps

1. Install the module

Install the Web3-Onboard MetaMask module into your dapp:

npm i @web3-onboard/metamask

2. Import the module

In your project script, add the following to import the module:

import metamaskSDK from "@web3-onboard/metamask"

3. Instantiate the module

Instantiate the module using any JavaScript SDK options, for example, dappMetadata:

const metamaskSDKWallet = metamaskSDK({
options: {
extensionOnly: false,
dappMetadata: {
name: "Example Web3-Onboard Dapp",
},
},
})

4. Use the module

Use the module as follows:

const onboard = Onboard({
// Other Onboard options.
wallets: [
metamaskSDKWallet,
// Other wallets.
],
})

const connectedWallets = await onboard.connectWallet()
console.log(connectedWallets)

Example

For an example of using Web3-Onboard with MetaMask SDK, see the example dapp in the JavaScript SDK GitHub repository. See the App.tsx file for more details on implementing the integration in a React dapp.