@kryptogo/kryptogokit-sdk-react v1.0.2

KryptogoKit

The KryptogoKit SDK is a library that allows you to integrate Web3 wallets into your React application.

Manual setup

npm install @kryptogo/kryptogokit-sdk-react wagmi viem@2.x @tanstack/react-query
# or
pnpm add @kryptogo/kryptogokit-sdk-react wagmi viem@2.x @tanstack/react-query

Basic import

Import KryptogoKit, Wagmi and TanStack Query.

import { createClient, http } from 'viem';
import { WagmiProvider, createConfig } from 'wagmi';
// Import chains
import { mainnet, arbitrum, polygon, bsc } from 'wagmi/chains';

// Import kryptogokit
import {
  KryptogoKitProvider,
  ConnectButton,
  connectorsForWallets,
  kryptogoConnector,
} from '@kryptogo/kryptogokit-sdk-react';
// Import styles
import '@kryptogo/kryptogokit-sdk-react/styles.css';
// Import wallets
import { walletConnectWallet, binanceWallet, okxWallet, kryptogoWallet } from '@kryptogo/kryptogokit-sdk-react/wallets';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

Configure providers

const queryClient = new QueryClient();

// Configure your clientId
const clientId = '9c5a79fc1117310f976b53752659b61d';

// Configure connectors
const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [walletConnectWallet, coinbaseWallet, rainbowWallet, okxWallet, kryptogoWallet],
    },
    {
      groupName: 'More',
      wallets: [bitgetWallet, binanceWallet, subWallet, argentWallet],
    },
  ],
  {
    appName: 'KryptogoKit Demo',
    projectId: 'YOUR_PROJECT_ID', // The projectId is required for walletConnect setup
  },
);

// Create Kryptogo connector (for social logins)
const KryptogoConnector = kryptogoConnector();

const config = createConfig({
  connectors: [...connectors, KryptogoConnector],
  chains: [mainnet, arbitrum, polygon, bsc],
  client({ chain }) {
    return createClient({ chain, transport: http() });
  },
});

return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <KryptogoKitProvider clientId={clientId}>
          <ConnectButton />
          {/* Your Dapp here */}
        </KryptogoKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );