Using Reown (WalletConnect) with ZKsync

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;

<script lang="ts" setup>
import { createAppKit } from '@reown/appkit/vue';
import { zksync, type AppKitNetwork } from '@reown/appkit/networks';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';

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

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

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

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

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

<template>
  <appkit-button />
</template>

import { createAppKit } from '@reown/appkit';
import { zksync } from '@reown/appkit/networks';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';

export function setupReown() {
  // 1. Get a project ID at https://dashboard.reown.com
  const projectId = 'YOUR_PROJECT_ID';

  const networks = [zksync];

  // 2. Set up Wagmi adapter
  const wagmiAdapter = new WagmiAdapter({
    projectId,
    networks,
  });

  // 3. Configure the metadata
  const metadata = {
    name: 'AppKit',
    description: 'AppKit Example',
    url: 'https://example.com', // origin must match your domain & subdomain
    icons: ['https://avatars.githubusercontent.com/u/179229932'],
  };

  // 3. Create the modal
  const modal = createAppKit({
    adapters: [wagmiAdapter],
    networks: [zksync],
    metadata,
    projectId,
    features: {
      analytics: true, // Optional - defaults to your Cloud configuration
    },
  });

  // 4. Trigger modal programaticaly
  const openConnectModalBtn = document.getElementById('open-connect-modal');
  const openNetworkModalBtn = document.getElementById('open-network-modal');

  openConnectModalBtn?.addEventListener('click', () => modal.open());
  openNetworkModalBtn?.addEventListener('click', () => modal.open({ view: 'Networks' }));
}

import { setupReown } from './reown.ts';

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <appkit-button />
  </div>
`;

setupReown();