Configuration

Wagmi Configuration

Sophon Account uses Wagmi for wallet connection and chain management. This guide shows how to configure Wagmi in your application.

Basic Configuration

Create a wagmi.ts file in your project:

import { http, createConfig } from "wagmi";
import { sophon, sophonTestnet } from "@sophon-labs/account-react";

export const config = createConfig({
  chains: [sophon, sophonTestnet],
  multiInjectedProviderDiscovery: false,
  ssr: true,
  transports: {
    [sophon.id]: http(),
    [sophonTestnet.id]: http(),
  },
});

declare module "wagmi" {
  interface Register {
    config: typeof config;
  }
}

Provider Setup

Wrap your application with the necessary providers:

"use client";

import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "@/lib/wagmi";
import { SophonContextProvider } from "@sophon-labs/account-react";
import { SophonWagmiConnector } from "@sophon-labs/account-wagmi";

export default function Providers({ children }: { children: React.ReactNode }) {
  const queryClient = new QueryClient();

  return (
    <SophonContextProvider partnerId="YOUR_PARTNER_ID">
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <SophonWagmiConnector>{children}</SophonWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </SophonContextProvider>
  );
}

Using Wagmi Hooks

Once configured, you can use Wagmi hooks in your components:

import { useAccount, useChainId } from "wagmi";

export default function WalletInfo() {
  const { address, isConnected } = useAccount();
  const chainId = useChainId();

  return (
    <div>
      {isConnected ? (
        <div>
          <p>Address: {address}</p>
          <p>Chain ID: {chainId}</p>
        </div>
      ) : (
        <p>Not connected</p>
      )}
    </div>
  );
}

Chain Configuration

Adding Custom Chains

To add custom chains to the configuration:

import { http, createConfig } from "wagmi";
import { sophon, sophonTestnet } from "@sophon-labs/account-react";
import { mainnet } from "wagmi/chains";

export const config = createConfig({
  chains: [sophon, sophonTestnet, mainnet],
  multiInjectedProviderDiscovery: false,
  ssr: true,
  transports: {
    [sophon.id]: http(),
    [sophonTestnet.id]: http(),
    [mainnet.id]: http(),
  },
});

Switching Chains

Use the useSwitchChain hook to switch between chains:

import { useSwitchChain } from "wagmi";

export default function ChainSwitcher() {
  const { switchChain } = useSwitchChain();

  return (
    <button onClick={() => switchChain({ chainId: sophon.id })}>
      Switch to Sophon
    </button>
  );
}

Common Issues

WagmiProviderNotFoundError

This error occurs when the Wagmi provider is not properly set up. Ensure:

  1. The providers are in the correct order:

    <SophonContextProvider>
  <WagmiProvider>
    <QueryClientProvider>
      <SophonWagmiConnector>{children}</SophonWagmiConnector>
    </QueryClientProvider>
  </WagmiProvider>
</SophonContextProvider>

  2. All required dependencies are installed:

    pnpm add wagmi viem @tanstack/react-query

  3. The configuration is properly exported and imported

Next Steps