Skip to Content
DocsGet Started

Get Started

Quick Start

KryptogoKit makes it simple to add wallet connection and crypto payment capabilities to your React application. Let’s get started with a basic setup.

Installation

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

Basic Setup

Import required packages

import { createClient, http } from 'viem';
import { WagmiProvider, createConfig } from 'wagmi';
// Import chains
import { mainnet, arbitrum, polygon, bsc } from 'wagmi/chains';
 
import { KryptogoKitProvider, connectorsForWallets, kryptogoConnector } from '@kryptogo/kryptogokit-sdk-react';
// Import pre-built styles
import '@kryptogo/kryptogokit-sdk-react/styles.css';
// Import wallets
import {
  walletConnectWallet,
  coinbaseWallet,
  okxWallet,
  kryptogoWallet,
  injectedWallet,
} from '@kryptogo/kryptogokit-sdk-react/wallets';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

Request a WalletConnect projectId

Note

Before you get started, you need to get a projectId from WalletConnect to setup the WalletConnect connector. See WalletConnect documentation  for more information.

Request a KryptoGO clientId

Note

You need to contact KryptoGO to get a clientId to setup your app. Please Visit KryptoGO Studio  to get one.

Configure providers

const queryClient = new QueryClient();
 
// Your organization's KryptoGO clientId
const clientId = 'YOUR_CLIENT_ID';
 
// projectId for WalletConnect setup
const projectId = 'YOUR_PROJECT_ID';
 
// Configure connectors
const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [walletConnectWallet, coinbaseWallet, kryptogoWallet],
    },
    {
      groupName: 'More',
      wallets: [okxWallet, injectedWallet],
    },
  ],
  {
    appName: 'KryptogoKit Demo', // Configure your app name
    projectId: projectId,
  },
);
 
// 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() });
  },
});

Wrap providers

Make sure to wrap your app with the KryptogoKitProvider, QueryClientProvider, and WagmiProvider.

<WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
    <KryptogoKitProvider clientId={clientId} appInfo={{ appName: 'KryptogoKit Demo' }}>
      {/* Your App */}
    </KryptogoKitProvider>
  </QueryClientProvider>
</WagmiProvider>

Logging in

KryptoGO Authentication is a social login solution that allows users to sign in to your app using their phone number, email, or Google account.

Alternatively, users may sign in using their wallets via WalletConnect or scanning a wallet-specific QR code.

Next Steps

KryptogoKit SDK provides Crypto Payment and Dapp Integration features for your application. You can continue with the following guides:

IntroductionOverview