Skip to Content
DocumentationGet 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 { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { KryptogoKitProvider, connectorsForWallets, kryptogoConnector } from '@kryptogo/kryptogokit-sdk-react';
 
// Import chains
import { mainnet, arbitrum, polygon, bsc } from 'wagmi/chains';
 
// Import wallets
import {
  walletConnectWallet,
  coinbaseWallet,
  okxWallet,
  kryptogoWallet,
  injectedWallet,
} from '@kryptogo/kryptogokit-sdk-react/wallets';
 
// Import pre-built styles
import '@kryptogo/kryptogokit-sdk-react/styles.css';

Request a KryptoGO clientId

Note

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

Configure providers

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

Last updated on
IntroductionOverview