Skip to main content

Wagmi

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 wagmi library.

To test a running version click here.

wagmi

Image 1: Example of a custom modal built with the wagmi library

info

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

Setup Wagmi and Wallet Connectors

Step 1: Install ethers, 3swallet.js and wagmi

Install ethers.js as a required dependency for wagmi.

npm install wagmi
npm install ethers
npm install 3swallet.js/wagmi-connector

Step 2: Import and Instantiate Wallet Connectors

In your index.js file, instantiate the connectors to integrate into your dapp. Here we setup connectors for 3S Wallet, WalletConnect, and Metamask.

Each connector has its own set of required parameters to pass in, such as a fallback JSON RPC URL or the chains to support.

import { configureChains, defaultChains } from "wagmi";
import { infuraProvider } from "wagmi/providers/infura";
import { publicProvider } from "wagmi/providers/public";

import Wallet3SConnector from "@3swallet.js/wagmi-connector";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";

// API key for Ethereum node
// Two popular services are Infura (infura.io) and Alchemy (alchemy.com)
const infuraId = process.env.INFURA_ID;

// Configure chains for connectors to support
const { chains } = configureChains(defaultChains, [
publicProvider(),
]);

// Set up connectors
export const connectors = [
new Wallet3SConnector({
chains,
options: {},
}),
new WalletConnectConnector({
chains,
options: {
infuraId,
qrcode: true,
},
}),
new MetaMaskConnector({
chains,
}),
];

Step 3: Create Client

In your index.js file, create a wagmi client using createClient from wagmi. Configure the client with the wallet connectors we defined above.

import { createClient } from "wagmi";

...

const client = createClient({
autoConnect: true,
connectors,
});

Step 4: Import and Setup WagmiConfig

In your index.js file, import the WagmiConfig component from wagmi and wrap it around your app root component, passing it the client we defined above.

import { WagmiConfig, createClient } from "wagmi";

...

ReactDOM.render(
<React.StrictMode>
<WagmiConfig client={client}>
<App />
</WagmiConfig>
</React.StrictMode>,
document.getElementById('root')
);

Connect and Disconnect from Wallet

Wagmi offers a convenient set of React hooks to interact with Ethereum. To connect your dapp to a user's wallet in your App.js file, import the useConnect React hook, which provides a method to establish a connection to the wallet connector of your choice and a boolean indicating the connection status.

import { useConnect } from "wagmi";

function App() {
const { connect, connectors } = useConnect();

return (
<div className="App">
<button onClick={() => { connect({ connector: connectors[0] }) }}>3S Wallet</button>
<button onClick={() => { connect({ connector: connectors[1] }) }}>Wallet Connect</button>
<button onClick={() => { connect({ connector: connectors[2] }) }}>Metamask</button>
</div>
);
}

To disconnect from the current wallet, import the useDisconnect hook and call the disconnect method.

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

import { useConnect, useDisconnect } from "wagmi";

function App() {
const { connect, connectors } = useConnect();
const { disconnect } = useDisconnect();

return (
<div className="App">
<button onClick={() => { connect({ connector: connectors[0] }) }}>3S Wallet</button>
<button onClick={() => { connect({ connector: connectors[1] }) }}>Wallet Connect</button>
<button onClick={() => { connect({ connector: connectors[2] }) }}>Metamask</button>

<button onClick={disconnect}>Disconnect</button>
</div>
);
}

For more details, read the example source code