Using WalletConnect with zkSync Era is fast and easy. Below is a quick example to get you started.

WalletConnect's Web3Modal Reactopen in new window integrates with the Wagmi library, offering a suite of React Hooks to streamline your dapp development. This enables effortless message signing, smart contract interactions, and additional functionalities.

Don't have a project ID?

Head over to WalletConnect Cloudopen in new window and create a new project now! This is a requirement for using WalletConnect.


yarn add @web3modal/wagmi wagmi viem

You can find more details about the installation in the WalletConnect documentationopen in new window.


You can start Web3Modal configuration using either default or custom mode.

Default mode will implement WalletConnect, Browser Wallets (injected) and Wagmi's public provideropen in new window and WalletConnect's provideropen in new window.

Start by importing createWeb3Modal, defaultWagmiConfig and wagmi packages, then create wagmiConfig using defaultWagmiConfig function as shown below. Finally, pass wagmiConfig to createWeb3Modal.

Find an example below:

import React from "react";
import ReactDOM from "react-dom/client";
import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
import { WagmiConfig, useAccount } from "wagmi";
import { zkSync } from "wagmi/chains";
import "./index.css";

// 1. Get projectId
const projectId = <PROJECT_ID>;

// 2. Create wagmiConfig
const chains = [zkSync];
const wagmiConfig = defaultWagmiConfig({
  metadata: { name: "Web3Modal v3" },

// 3. Create modal
createWeb3Modal({ wagmiConfig, projectId, chains, defaultChain: zkSync });

// 4. Create modal
const App = () => {
  const { address } = useAccount();
  return (
      <div className="container">
        <w3m-button />
        <w3m-network-button />
        {address && (
            <b>Address:</b> {address}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <WagmiConfig config={wagmiConfig}>
      <App />

You can find more information about how to integrate Web3Modal in the WalletConnect documentationopen in new window.