Skip to Content
DocsFor DevelopersInstallation

Installation

KryptogoKit makes it simple to add wallet connection and crypto payment capabilities to your React application. This guide walks through a quick install for new projects, then a deeper setup that covers chain configuration and React provider wiring.

Quick start

To scaffold a new KryptoGO Kit + wagmi  + Next.js app , use one of the following commands with your preferred package manager:

npm init @kryptogo/kryptogokit@latest
# or
yarn create @kryptogo/kryptogokit@latest
# or
pnpm create @kryptogo/kryptogokit@latest

This will prompt you for a project name, generate a new directory containing a boilerplate project, and install all required dependencies.

To add KryptogoKit to an existing React app instead, install the SDK and its peer dependencies:

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

Then continue to Detailed setup below.

Detailed setup

Import required packages

import { WagmiProvider } from 'wagmi';
import { getDefaultConfig } from '@kryptogo/kryptogokit-sdk-react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
// Import pre-built styles
import '@kryptogo/kryptogokit-sdk-react/styles.css';

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 chains and providers

Configure your desired chains and generate the required connectors. If you’re using the legacy @kryptogo/kryptogokit package with wagmi v1, you’ll set up a wagmi client with configureChains:

import {
  getDefaultWallets,
  KryptogoKitProvider,
} from '@kryptogo/kryptogokit';
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
 
const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider(),
  ]
);
 
const { connectors } = getDefaultWallets({
  appName: 'My KryptoGO Kit App',
  chains,
});
 
const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

Read more about configuring chains & providers with wagmi .

On the current @kryptogo/kryptogokit-sdk-react package (wagmi v2), the equivalent is a single call to getDefaultConfig:

const queryClient = new QueryClient();
 
// Your organization's KryptoGO clientId
const clientId = 'YOUR_CLIENT_ID';
 
// projectId for WalletConnect setup
const projectId = 'YOUR_PROJECT_ID';
 
const config = getDefaultConfig();
// or
const config = getDefaultConfig({
  ssr: true, // If your dApp uses server side rendering (SSR)
});

Wrap providers

Wrap your application with KryptogoKitProvider and the wagmi provider. On wagmi v1:

const App = () => {
  return (
    <WagmiConfig client={wagmiClient}>
      <KryptogoKitProvider chains={chains}>
        {/* Your App */}
      </KryptogoKitProvider>
    </WagmiConfig>
  );
};

On the current SDK (wagmi v2), wrap with WagmiProvider, QueryClientProvider, and KryptogoKitProvider:

<WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
    <KryptogoKitProvider clientId={clientId}>
      {/* Your App */}
    </KryptogoKitProvider>
  </QueryClientProvider>
</WagmiProvider>

Add the connect button

Then, in your app, import and render the ConnectButton component.

import { ConnectButton } from '@kryptogo/kryptogokit';
 
export const YourApp = () => {
  return <ConnectButton />;
};

KryptoGO Kit will now manage your user’s wallet selection, display wallet and transaction information, and handle network and wallet switching.

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.

Remix

When using Remix , KryptoGO Kit must be added to your list of server dependencies  since it’s published as an ESM package.

Add your own functionality

Now that your users can connect their wallets, you can start building out the rest of your app using wagmi .

Send transactions, interact with contracts, resolve ENS details and much more with wagmi’s comprehensive suite of React Hooks.

For more detail, view the wagmi documentation .

Further examples

To see some running examples of KryptoGO Kit, or even use them to automatically scaffold a new project, check out the official examples .

Where to go next

Last updated on
OverviewSupported Chains