Using WalletConnect with ZKsync

Learn how to use WalletConnect to create React apps that interact with contracts on ZKsync.

This guide outlines how to use WalletConnect and Web3Modal to create React apps that interact with contracts on ZKsync

What you'll learn:

  • How to use WalletConnect
  • How to use Web3Modal


  • - walletconnect
Last Updated: May 09, 2024

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

WalletConnect's Web3Modal React 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 Cloud and create a new project now! This is a requirement for using WalletConnect.


npm install @web3modal/wagmi wagmi viem

You can find more details about the installation in the WalletConnect documentation.


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

Default mode will implement WalletConnect, Browser Wallets (injected), Wagmi's public provider and WalletConnect's provider.

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 documentation.

Made with ❤️ by the ZKsync Community