Using WalletConnect with ZKsync

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.

Installation

npm install @web3modal/wagmi wagmi viem

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

Implementation

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({
  chains,
  projectId,
  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 />
      </div>
      <p>
        {address && (
          <>
            <b>Address:</b> {address}
          </>
        )}
      </p>
    </>
  );
};

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

You can find more information about how to integrate Web3Modal in the WalletConnect documentation.

Using wagmi with ZKsync

Using WalletConnect with ZKsync

What you'll learn:

Tools:

Installation

Implementation