Intallation

Installation

Obtain Project ID

Head over to WalletConnect Cloud to sign in or sign up. Create (or use an existing) project and copy its associated project id. We will need this in a later step.

npm install @web3modal/wagmi wagmi viem

npm install @web3modal/ethers5 ethers@5.7.2

Implementation

Start by importing Web3Modal and wagmi packages, then create wagmi config using your own settings or our default presets as shown below. Finally, pass wagmi config to Web3Modal as ethereumClient.

import {
  EthereumClient,
  w3mConnectors,
  w3mProvider,
} from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { arbitrum, mainnet, polygon } from "viem/chains";

import Home from "./Home";

const chains = [arbitrum, mainnet, polygon];
const projectId = "6a636e819171c7539534c1087d8b6137"; // Your Project ID here

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, chains }),
  publicClient,
});
const ethereumClient = new EthereumClient(wagmiConfig, chains);

function App() {
  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <Home />
      </WagmiConfig>

      <Web3Modal
        projectId={projectId}
        ethereumClient={ethereumClient}
        explorerRecommendedWalletIds={[
          "14e5d957c6eb62d3ee8fc6239703ac2d537d7e3552154836ca0beef775f630bc",
        ]}
        explorerExcludedWalletIds="ALL"
        termsOfServiceUrl="https://support.pitaka.io/terms-of-use"
        privacyPolicyUrl="https://support.pitaka.io/privacy-policy"
        themeMode="dark"
        themeVariables={{
          "--w3m-font-family": "Roboto, sans-serif",
          "--w3m-accent-color": "#613CB0",
          "--w3m-background-color": "#1A1A1A",
          "--w3m-logo-image-url": "/pitaka.png",
          "--w3m-overlay-backdrop-filter": "blur(10px)",
        }}
      />
    </>
  );
}

export default App;

Trigger the modal

Use pre-build Web3Button component

import { Web3Button } from '@web3modal/react'

function HomePage() {
  return <Web3Button />
}

Alternatively, use your own button with useWeb3Modal hook

import { useWeb3Modal } from '@web3modal/react'

function HomePage() {
  const { open, close } = useWeb3Modal()

  return <button onClick={() => open()}>Connect</button>
}

Additionally, you can use our sample

import { Web3Button } from "@web3modal/react";
import "./App.css";

function Home() {
  return (
    <>
      <h1>Pitaka Wallet Connect Example</h1>
      <div className="card">
        <Web3Button />
        <p>
          Click me to test.
        </p>
      </div>
      <p className="read-the-docs">
        Go to our support page for more information.
        <a href="https://support.pitaka.io" target="_blank">
          <p>Pitaka Documentation</p>
        </a>
      </p>
    </>
  );
}

export default Home;

Use wagmi hooks

wagmi provides everything you'll need to start working with accounts, contracts, chains and much more.

import { useAccount, useContract } from 'wagmi'