​
ConnectKit

ConnectKit is a wallet connector for React that allows users to connect to a wallet and sign transactions.

Sophon Account + ConnectKit example repository

ConnectKit Example

​
Installation

npm install @sophon-labs/account-eip6963 wagmi viem connectkit @tanstack/react-query

​
Live demo

​
Sample configuration

Make sure to get your project ID from Reown and set it in your environment variables.
"use client";

import React, { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createConfig, http, State, WagmiProvider } from "wagmi";

import "@sophon-labs/account-eip6963/testnet";
import { ConnectKitProvider, getDefaultConfig } from "connectkit";
import { sophonTestnet } from "viem/chains";

// Get your project ID from https://cloud.reown.com
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

const queryClient = new QueryClient();

if (!projectId) throw new Error("Project ID is not defined");

const config = createConfig(
  getDefaultConfig({
    chains: [sophonTestnet],
    transports: {
      [sophonTestnet.id]: http(),
    },

    walletConnectProjectId: process.env.NEXT_PUBLIC_PROJECT_ID || "",

    appName: "Sophon Account",
    appDescription: "Sophon Account",
    appUrl: "https://sophon.xyz",
    appIcon: "https://family.co/logo.png",
  })
);

export default function Web3ModalProvider({
  children,
  initialState,
}: {
  children: ReactNode;
  initialState?: State;
}) {
  return (
    <WagmiProvider config={config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}