​
ConnectKit Integration

ConnectKit is a modern wallet connection component that provides a clean, customizable interface for connecting wallets. This guide shows you how to integrate Sei Global Wallet with ConnectKit.

​
Prerequisites

  • React application
  • Node.js and npm/yarn
  • Basic understanding of React hooks

​
Step 1: Create React Application

Create a new React application with TypeScript:

npx create-react-app my-sei-dapp --template typescript
cd my-sei-dapp

​
Step 2: Install Dependencies

Install the required packages:

npm install connectkit wagmi viem @tanstack/react-query @sei-js/sei-global-wallet

​
Step 3: Configure Your Application

Update your App.tsx file with the complete ConnectKit configuration:

App.tsx
import '@sei-js/sei-global-wallet/eip6963';
import { ConnectKitButton, ConnectKitProvider, getDefaultConfig } from 'connectkit';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { sei, seiTestnet } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useAccount, useBalance } from 'wagmi';

const config = createConfig(
  getDefaultConfig({
    chains: [sei, seiTestnet],
    transports: {
      [sei.id]: http(),
      [seiTestnet.id]: http()
    },
    walletConnectProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
    appName: 'My Sei dApp'
  })
);

const queryClient = new QueryClient();

function AccountInfo() {
  const { address, isConnected, chain } = useAccount();
  const { data: balance } = useBalance({ address });

  if (!isConnected) {
    return <p>Connect your wallet to see account details</p>;
  }

  return (
    <div className="account-info">
      <h3>Account Information</h3>
      <p>
        <strong>Address:</strong> {address}
      </p>
      <p>
        <strong>Network:</strong> {chain?.name}
      </p>
      <p>
        <strong>Balance:</strong> {balance?.formatted} {balance?.symbol}
      </p>
    </div>
  );
}

export default function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>
          <div className="app-container">
            <h1>My Sei dApp</h1>
            <ConnectKitButton />
            <AccountInfo />
          </div>
        </ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

​
Step 4: Get WalletConnect Project ID

1

Visit WalletConnect

Go to cloud.walletconnect.com and sign up for a free account

2

Create a new project

Click “Create” and fill in your project details

3

Copy your Project ID

Copy the Project ID from your dashboard

4

Replace in your code

Replace 'YOUR_WALLETCONNECT_PROJECT_ID' with your actual Project ID

​
Step 5: Run Your Application

Start your development server:

npm run dev

Your application will be available at http://localhost:3000.

​
Expected Behavior

Once configured correctly, your application will:

  1. Display Connect Button: ConnectKit’s styled connect button appears
  2. Show Sei Global Wallet: Sei Global Wallet appears in the wallet selection modal
  3. Handle Authentication: Users can authenticate via social login methods
  4. Display Account Info: Connected wallet address, network, and balance are shown
  5. Persist Connection: Wallet connection persists across page refreshes

​
ConnectKit Features

ConnectKit provides several built-in features:

Responsive Design

Works seamlessly on desktop and mobile devices

Theme Support

Built-in light and dark theme support

Custom Styling

Extensive customization options available

Accessibility

WCAG compliant with keyboard navigation

​
Customization Options

​
Custom Theme

ConnectKit supports custom themes:

import { ConnectKitProvider, getDefaultConfig } from 'connectkit';

const config = createConfig(
  getDefaultConfig({
    // ... other config options
    appearance: 'dark', // or 'light'
    theme: 'auto', // 'auto', 'light', 'dark'
    mode: 'light', // 'light', 'dark'
  })
);

​
Custom Button

Create a custom connect button:

import { useModal } from 'connectkit';

function CustomConnectButton() {
  const { setOpen } = useModal();
  
  return (
    <button onClick={() => setOpen(true)}>
      Custom Connect Button
    </button>
  );
}

​
Custom RPC Endpoints

Configure custom RPC endpoints for better performance:

const config = createConfig(
  getDefaultConfig({
    chains: [sei, seiTestnet],
    transports: {
      [sei.id]: http('https://evm-rpc.sei-apis.com'),
      [seiTestnet.id]: http('https://evm-rpc-testnet.sei-apis.com')
    },
    walletConnectProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
    appName: 'My Sei dApp'
  })
);

​
Troubleshooting

​
Advanced Usage

​
Multiple Chain Support

Add support for additional chains:

import { mainnet, polygon, arbitrum } from 'wagmi/chains';

const config = createConfig(
  getDefaultConfig({
    chains: [sei, seiTestnet, mainnet, polygon, arbitrum],
    transports: {
      [sei.id]: http(),
      [seiTestnet.id]: http(),
      [mainnet.id]: http(),
      [polygon.id]: http(),
      [arbitrum.id]: http()
    },
    walletConnectProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
    appName: 'My Sei dApp'
  })
);

​
Error Handling

Implement proper error handling:

function AccountInfo() {
  const { address, isConnected, chain } = useAccount();
  const { data: balance, error, isLoading } = useBalance({ address });

  if (!isConnected) {
    return <p>Connect your wallet to see account details</p>;
  }

  if (isLoading) {
    return <p>Loading balance...</p>;
  }

  if (error) {
    return <p>Error loading balance: {error.message}</p>;
  }

  return (
    <div className="account-info">
      <h3>Account Information</h3>
      <p><strong>Address:</strong> {address}</p>
      <p><strong>Network:</strong> {chain?.name}</p>
      <p><strong>Balance:</strong> {balance?.formatted} {balance?.symbol}</p>
    </div>
  );
}

​
Next Steps

Web3-React Integration

Try Web3-React for more flexibility

Wagmi + Dynamic

Explore advanced features with Dynamic

​
Additional Resources