Web3Modal

Web3Modal is a user-friendly SDK that simplifies the process of connecting Web3 applications with various wallets. It offers a seamless login experience through an integrable UI that automatically recognizes and supports different wallet types, including mobile, browser extensions, desktop, and web apps.

Installation

npm

npm i @web3modal/wagmi@3.5.7 wagmi@1.4.13 viem@1.21.4

yarn

yarn add @web3modal/wagmi@3.5.7 wagmi@1.4.13 viem@1.21.4

pnpm

pnpm add @web3modal/wagmi@3.5.7 wagmi@1.4.13 viem@1.21.4

info

Web3Modal also supports wagmi v1, ethers, ethers v5, if you want to use other sdk, please refer to their documentation here.

Create a Web3Modal Instance

Here, we will use createWeb3Modal to create a Web3Modal instance.

import {createWeb3Modal} from '@web3modal/wagmi/react';
import {defaultWagmiConfig} from '@web3modal/wagmi/react/config';

import {WagmiProvider} from 'wagmi';
import {mantle, mantleSepoliaTestnet} from 'wagmi/chains';
import './App.css';

// 1. Your WalletConnect Cloud project ID
// You can get this from https://cloud.walletconnect.com/
const projectId = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx';

// 2. Create wagmiConfig
const metadata = {
  name: 'mantle-test',
  description: 'Web3Modal Example',
  url: 'https://web3modal.com', // origin must match your domain & subdomain
  icons: ['https://avatars.githubusercontent.com/u/37784886'],
};

const chains = [mantle, mantleSepoliaTestnet] as const;
const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
});

// 3. Create modal
createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
  enableOnramp: true, // Optional - false as default
});

Connect Wallets

We will create buttons to choose networks and connect wallets.

export default function App() {
  return (
    <WagmiProvider config={config}>
      <div className="container">
        <div className="button-container">
          <w3m-button />
          <w3m-network-button />
        </div>
      </div>
    </WagmiProvider>
  );
}

CodeSandbox Example

Here is a example, you can use this to quickly get started.