Using Reown with ZKsync - ZKsync Community Code

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

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

Installation

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

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

Implementation

You can find an example implementation below for a React app:

src/App.tsx

import { createAppKit } from '@reown/appkit/react';
import { useAccount, WagmiProvider } from 'wagmi';
import {
  zksync,
  zksyncSepoliaTestnet,
  zksyncInMemoryNode,
  zksyncLocalNode,
  type AppKitNetwork,
} from '@reown/appkit/networks';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';

// 0. Setup queryClient
const queryClient = new QueryClient();

// 1. Get projectId from https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID';

// 2. Create a metadata object - optional
const metadata = {
  name: 'AppKit',
  description: 'AppKit Example',
  url: 'http://localhost:5173', // origin must match your domain & subdomain
  icons: ['https://avatars.githubusercontent.com/u/179229932'],
};

// 3. Set the networks
const networks: [AppKitNetwork, ...AppKitNetwork[]] = [
  zksync,
  zksyncSepoliaTestnet,
  zksyncInMemoryNode,
  zksyncLocalNode,
];

// 4. Create Wagmi Adapter
const wagmiAdapter = new WagmiAdapter({
  networks,
  projectId,
  ssr: true,
});

// 5. Create Apptkit
createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
});

export function AppKitProvider({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

const Connect = () => {
  const { address } = useAccount();
  return (
    <>
      <div style={{ width: '100vw', display: 'grid', placeItems: 'center' }}>
        <appkit-button />
      </div>
      <p>
        {address && (
          <>
            <b>Address:</b> {address}
          </>
        )}
      </p>
    </>
  );
};

const App = () => {
  return (
    <AppKitProvider>
      <Connect />
    </AppKitProvider>
  );
};

export default App;

You can find more information about how to integrate the Reown Appkit in the Reown documentation.

Using wagmi with ZKsync

Using Reown with ZKsync

Using Reown (WalletConnect) with ZKsync

What you'll learn:

Tools:

Installation

Implementation