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'