Skip to main content

Web3-Onboard

This tutorial is a step-by-step guide on how to integrate multiple wallets such as 3S Wallet, Metamask, and Wallet Connect into your dapp using the web3-onboard library.

To test a running version click here.

web3-onboard

Image 1: Example of a custom modal built with the web3-onboard library

info

A working React application, set up using npx create-react-app app-name or similar

Setup Web3-onboard and Wallet Connectors

Step 1: Install Web3-onboard core

npm install @web3-onboard/core

Step 2: Import and Instantiate Wallet Connectors

npm install @web3-onboard/walletconnect # Wallet Connect
npm install @web3-onboard/injected-wallets # Injected (e.g. Metamask)
npm install @3swallet.js/web3-onboard-connector # 3S Wallet Connect

In your App.js file, instantiate the modules to integrate into your dapp. Each connector has its own set of required parameters to pass in, such as a fallback JSON RPC URL or default chain ID.

import wallet3sConnector  from "@3swallet.js/web3-onboard-connector";
import walletConnector from "@web3-onboard/walletconnect";
import injectedConnector from "@web3-onboard/injected-wallets";

const wallet3s = wallet3sConnector({
rpc: {
1: `https://mainnet.infura.io/v3/${process.env.infuraKey}`,
56: "https://bscrpc.com"
},
chainId: 56
});
const walletConnect = walletConnector();
const injected = injectedConnector();

const connectors = [wallet3s, walletConnect, injected];

Step 2: Import and Setup Web3ReactProvider

Again, in App.js, instantiate Onboard with the created modules and a list of chains to be compatible with the library.

import Onboard from "@web3-onboard/core";

const ETH_RPC_URL = `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`;
const BNB_RPC_URL = `https://bscrpc.com`;

const onboard = Onboard({
wallets: connectors, // created in previous step
chains: [
{
id: toHex(56),
token: "BNB",
namespace: "evm",
label: "BNB Chain",
rpcUrl: BNB_RPC_URL
},
{
id: toHex(1), // chain ID must be in hexadecimel
token: "ETH", // main chain token
namespace: "evm",
label: "Ethereum Mainnet",
rpcUrl: ETH_RPC_URL
}
],
appMetadata: {
name: "My App",
icon: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
logo: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
description: "My app using Onboard",
recommendedInjectedWallets: [
{ name: "MetaMask", url: "https://metamask.io" }
]
}
});

Connect and Disconnect from Wallet

Inside your App function, call the connectWallet method in the onboard instance to initiate the onboard popup modal.

function App() {
const connectWallet = async () => {
try {
const wallets = await onboard.connectWallet();
} catch (error) {
console.error(error);
}
};

return (
<div className="App">
<button onClick={connectWallet}>Connect Wallet</button>
</div>
);
}

Bind the methods onto your UI components. You should now be able to seamlessly connect to 3S Wallet and other wallets from your dapp.

To disconnect from the wallet, use the disconnectWallet method from the onboard instance along with the label of the user's primary wallet. You should refresh the state to clear any previously stored connection data.

function App() {
const connectWallet = async () => {
try {
const wallets = await onboard.connectWallet();
} catch (error) {
console.error(error);
}
};

const disconnect = async () => {
const [primaryWallet] = await onboard.state.get().wallets;
if (primaryWallet) await onboard.disconnectWallet({ label: primaryWallet.label });
refreshState();
};

const refreshState = () => {
setAccount("");
setChainId("");
setProvider();
};

return (
<div className="App">
<button onClick={connectWallet}>Connect Wallet</button>
<button onClick={disconnect}>Disconnect</button>
</div>
);
}

For more details, read the example source code