> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sophon.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# ConnectKit

> Integrate the Sophon Account with ConnectKit

## ConnectKit

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

<CardGroup cols={1}>
  <Card title="Sophon Account + ConnectKit example repository" icon="code" href="https://github.com/sophon-org/sophon-account/tree/main/examples/eip-6963-connectkit">
    ConnectKit Example
  </Card>
</CardGroup>

### Installation

<CodeGroup>
  ```npm yarn pnpm bun theme={null}
  npm install @sophon-labs/account-eip6963 wagmi viem connectkit @tanstack/react-query
  ```
</CodeGroup>

### Live demo

<div
  style={{
position: "relative",
width: "100%",
paddingBottom: "75%", // 4:3 aspect ratio, adjust as needed
height: 0,
overflow: "hidden",
borderRadius: "16px",
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
}}
>
  <iframe
    src="https://sophon-account-eip-6963-connectkit.vercel.app/"
    style={{
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  border: "none",
}}
    allowFullScreen
  />
</div>

### Sample configuration

<Warning>
  Make sure to get your project ID from [Reown](https://cloud.reown.com) and set it in your
  environment variables.
</Warning>

```typescript {7, 16-32} theme={null}
"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>
  );
}
```