KryptogoKit

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

Table of Contents

• Manual setup
• Basic import
• Configure providers
• Customize
  • Theme
  • Localization
  • Chains
  • Wallets
  • Modal Hooks

Manual setup

npm install @kryptogo/kryptogokit-sdk-react wagmi [email protected] @tanstack/react-query
# or
pnpm add @kryptogo/kryptogokit-sdk-react wagmi [email protected] @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 and connectors
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 = 'YOUR_CLIENT_ID';

// Configure connectors
const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [walletConnectWallet, coinbaseWallet, rainbowWallet, okxWallet, kryptogoWallet],
    },
    {
      groupName: 'More',
      wallets: [bitgetWallet, binanceWallet, subWallet, argentWallet],
    },
  ],
  {
    appName: 'KryptogoKit Demo', // Change this to your app name
    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}>
          {/* You can place Connect Button anywhere in your app */}
          <ConnectButton />
          {/* Your Dapp here */}
        </KryptogoKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );

Note: You need to create a projectId from Reown Cloud to use WalletConnect. The projectId is required for setting up WalletConnect functionality in your dApp.

Note: The clientId is for OAuth Authentication, you could ask KryptoGO team to get one.

Customize

You could customize the theme, locale, border radius, etc. These are the options you can customize below:

Theme

You can customize the KryptogoKit UI for your brand. You can pick from pre-defined accent colors and border radius configurations.

There are 2 built-in theme functions:

• lightTheme (default)
• darkTheme

A theme function returns a theme object. You can pass the object to the KryptogoKitProvider's theme prop.

import { KryptogoKitProvider, darkTheme } from '@kryptogo/kryptogokit-sdk-react';

const App = () => (
  <KryptogoKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </KryptogoKitProvider>
);

You can customize the theme by passing options to the theme function:

import { KryptogoKitProvider, darkTheme } from '@kryptogo/kryptogokit-sdk-react';

const App = () => (
  <KryptogoKitProvider
    theme={darkTheme({
      accentColor: '#5F5AFA',
      accentColorForeground: 'white',
      borderRadius: 'small',
      fontStack: 'system',
    })}
    {...etc}
  >
    {/* Your App */}
  </KryptogoKitProvider>
);

Dark Mode Support

If your app uses the standard prefers-color-scheme: dark media query to swap between light and dark modes, you can provide a dynamic theme object:

import { KryptogoKitProvider, lightTheme, darkTheme } from '@kryptogo/kryptogokit-sdk-react';

const App = () => (
  <KryptogoKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </KryptogoKitProvider>
);

Theme Options

You can customize the theme by passing options to the theme function:

| Property | Type | Default | Description | | --------------------- | ---------------------------------------- | --------- | --------------------------------------------- | | accentColor | string | '#FFC211' | Primary brand color | | accentColorForeground | string | 'white' | Text color that appears on top of accentColor | | borderRadius | 'none' | 'small' | 'medium' | 'large' | 'large' | Global border radius scale | | fontStack | 'system' | 'rounded' | 'rounded' | Global font style | | overlayBlur | 'none' | 'small' | 'large' | 'none' | Overlay blur radius scale |

import { KryptogoKitProvider, darkTheme } from '@kryptogo/kryptogokit-sdk-react';

const App = () => (
  <KryptogoKitProvider
    theme={darkTheme({
      accentColor: '#5F5AFA',
      accentColorForeground: 'white',
      borderRadius: 'medium',
      fontStack: 'system',
    })}
    {...etc}
  >
    {/* Your App */}
  </KryptogoKitProvider>
);

Localization

KryptogoKit supports multiple languages out of the box. By default, KryptogoKit supports the en-US locale.

If available, KryptogoKit will detect the user's preferred language and choose the appropriate translations. You can set the language by passing the locale prop to KryptogoKitProvider:

import { KryptogoKitProvider } from '@kryptogo/kryptogokit-sdk-react';

const App = () => (
  <KryptogoKitProvider locale="zh-TW" {...etc}>
    {/* Your App */}
  </KryptogoKitProvider>
);

Currently supported languages:

| Language | Region | Locale | | ---------------- | ----------------- | ------ | | English | United States 🇺🇸 | en-US | | 中文 | Mainland China 🇨🇳 | zh-CN | | 繁體中文 | Hong Kong 🇭🇰 | zh-HK | | 繁體中文 | Taiwan 🇹🇼 | zh-TW | | हिंदी | India 🇮🇳 | hi-IN | | Español | Latin America 🌎 | es-419 | | Français | France 🇫🇷 | fr-FR | | العربية | Middle East 🌍 | ar-AR | | Português | Brazil 🇧🇷 | pt-BR | | Русский | Russia 🇷🇺 | ru-RU | | Bahasa Indonesia | Indonesia 🇮🇩 | id-ID | | 日本語 | Japan 🇯🇵 | ja-JP | | Türkçe | Turkey 🇹🇷 | tr-TR | | 한국어 | South Korea 🇰🇷 | ko-KR | | ภาษาไทย | Thailand 🇹🇭 | th-TH | | українська | Ukraine 🇺🇦 | uk-UA | | Tiếng Việt | Vietnam 🇻🇳 | vi-VN | | Deutsch | Germany 🇩🇪 | de-DE |

Chains

Customizing chains

KryptogoKit is designed to integrate with wagmi's chain object. You can customize the chains that your app supports and their appearance.

Customizing the initial chain

By default, KryptogoKit will connect to the first chain supplied to Wagmi. This behavior can be customized via the initialChain prop.

The initial chain can be configured using a chain ID:

<KryptogoKitProvider initialChain={1}>{/* Your App */}</KryptogoKitProvider>

As a convenience, you can also pass a chain object:

<KryptogoKitProvider initialChain={mainnet}>{/* Your App */}</KryptogoKitProvider>

Custom chain metadata

Several chain icons and backgrounds are provided by default, but you can customize the icon and background for each chain using the iconUrl and iconBackground properties.

Example with createConfig:

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

import { Chain } from '@kryptogo/kryptogokit-sdk-react';

const chains: readonly [Chain, ...Chain[]] = [
  {
    ...mainnet,
    iconBackground: '#000000',
    iconUrl: 'https://example.com/icons/ethereum.png',
  },
  {
    ...polygon,
    iconBackground: '#8247e5',
    iconUrl: 'https://example.com/icons/polygon.png',
  },
  {
    ...bsc,
    iconBackground: '#f0b90b',
    iconUrl: 'https://example.com/icons/bnb.png',
  },
];

const config = createConfig({
  chains,
  // ... rest of your config
});

Wallets

KryptogoKit supports a variety of wallets. You can customize the wallets that your app supports by passing the connectors prop to KryptogoKitProvider.

Each wallet can be imported individually from the wallets module:

import {
  kryptogoWallet,
  metaMaskWallet,
  walletConnectWallet,
  coinbaseWallet, // ... other wallets
} from '@kryptogo/kryptogokit-sdk-react/wallets';

Generic Wallets

The following wallets are scoped to generic connection methods rather than specific apps. As a result, it’s recommended that these wallets are always included.

WalletConnect

This is a fallback wallet option designed for WalletConnect-based wallets that haven’t been provided by another wallet in the list.

It's recommended that you always include this wallet in the list to ensure all WalletConnect-based wallets are supported.

import { walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';

Injected Wallet

This is a fallback wallet option designed for scenarios where window.ethereum exists but hasn’t been provided by another wallet in the list. This wallet will automatically hide itself from the list when the fallback is not necessary or if there is no injected wallet available.

It's recommended that you always include this wallet in the list to ensure all injected wallets are supported.

import { injectedWallet } from '@rainbow-me/rainbowkit/wallets';

Supported wallets

KryptogoKit supports the following wallets:

Popular Wallets

• KryptoGO Wallet - Official wallet
• MetaMask
• WalletConnect
• Coinbase Wallet
• Rainbow Wallet
• OKX Wallet
• Binance Wallet
• Trust Wallet
• Uniswap Wallet

Exchange Wallets

• Bitget Wallet
• Bybit Wallet
• Gate Wallet
• Kraken Wallet

Regional Wallets

• imToken
• TokenPocket
• Kaikas Wallet
• OneKey Wallet

Other Supported Wallets

• Argent
• Bifrost
• Bitski
• Bitverse
• Bloom
• Brave
• CLV
• Coin98
• Compass
• Core
• Dawn
• Desig
• Enkrypt
• Fox
• Frame
• Frontier
• Injected
• ioPay
• Kaia
• Kresus
• Ledger
• Magic Eden
• MEW
• Nest
• Okto
• Omni
• 1inch
• Phantom
• Rabby
• Ramper
• Ronin
• Safe
• Safeheron
• SafePal
• Seif
• SubWallet
• Taho
• Talisman
• Tokenary
• Valora
• xDefi
• Zeal
• Zerion

Modal Hooks

KryptogoKit provides hooks for programmatically controlling the connect modal and account modal.

• useConnectModal
• useAccountModal
• useChainModal

Each of these Hooks returns an object with a function for opening its respective modal. Note that the returned functions will be undefined if your application is not in the required state for the modal to be open.

Return Value Types

Each modal hook returns an object with the following properties:

| Property | Type | Description | | --------- | ------------------------- | ----------------------------------------------------------------- | | open | boolean | Whether the modal is currently open | | openModal | (() => void) | undefined | Function to open the modal. Undefined when modal cannot be opened |

import { useConnectModal, useAccountModal, useChainModal } from '@rainbow-me/rainbowkit';

export const App = () => {
  const { openConnectModal, connectModalOpen } = useConnectModal();
  const { openAccountModal, accountModalOpen } = useAccountModal();
  const { openChainModal, chainModalOpen } = useChainModal();

  return (
    <>
      {openConnectModal && (
        <button onClick={openConnectModal} type="button">
          Open Connect Modal
        </button>
      )}

      {openAccountModal && (
        <button onClick={openAccountModal} type="button">
          Open Account Modal
        </button>
      )}

      {openChainModal && (
        <button onClick={openChainModal} type="button">
          Open Chain Modal
        </button>
      )}
    </>
  );
};