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 { 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
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
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';
const config = getDefaultConfig();
// or
const config = getDefaultConfig({
ssr: true, // If your dApp uses server side rendering (SSR)
});
Wrap providers
Make sure to wrap your app with the KryptogoKitProvider
, QueryClientProvider
, and WagmiProvider
.
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<KryptogoKitProvider clientId={clientId}>
{/* 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: