Web SDK

The Kryptos Connect Web SDK provides React components that handle the complete authentication and wallet connection flow. It supports 5000+ DeFi protocols, 100+ exchanges/wallets, and 200+ blockchains.

Before you begin

Make sure you have completed the prerequisites outlined in the overview and set up your server-side integration following the backend guide.

Installation

npm
yarn

npm install @kryptos_connect/web-sdk

yarn add @kryptos_connect/web-sdk

Prerequisites

Client ID from the Kryptos Developer Portal
WalletConnect Project ID from WalletConnect Cloud

Quick Start

// 1. Import styles (required)
import "@kryptos_connect/web-sdk/dist/styles/index.css";

import {
  KryptosConnectProvider,
  KryptosConnectButton,
} from "@kryptos_connect/web-sdk";

// 2. Wrap your app with the provider
function App() {
  return (
    <KryptosConnectProvider
      config={{
        appName: "My DeFi App",
        appLogo: "https://yourapp.com/logo.png",
        clientId: "your-kryptos-client-id",
        theme: "light",
        walletConnectProjectId: "your-walletconnect-project-id",
      }}
    >
      <ConnectButton />
    </KryptosConnectProvider>
  );
}

// 3. Use the connect button
function ConnectButton() {
  return (
    <KryptosConnectButton
      generateLinkToken={async () => {
        // Call your backend to create a link token
        const response = await fetch("/api/kryptos/create-link-token", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
        });
        const data = await response.json();
        return {
          link_token: data.link_token,
          isAuthorized: data.isAuthorized,
        };
      }}
      onConnectSuccess={(userConsent) => {
        if (userConsent?.public_token) {
          // New user - exchange public token for access token
          fetch("/api/kryptos/exchange-token", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ public_token: userConsent.public_token }),
          });
        }
        // If userConsent is null, user was already authenticated
      }}
      onConnectError={(error) => {
        console.error("Connection failed:", error);
      }}
    >
      Connect to Kryptos
    </KryptosConnectButton>
  );
}

User Flow Variations

The SDK automatically handles two different user flows based on the isAuthorized flag returned from generateLinkToken:

Flow 1: New User (`isAuthorized: false` or undefined)

INIT → CONNECT → INTEGRATION → STATUS

User goes through authentication
Account is created on the backend
User selects integrations to connect
Returns public_token in onConnectSuccess callback

When to use: First-time users or users without an existing access token.

Flow 2: Authenticated User (`isAuthorized: true`)

INIT → INTEGRATION → STATUS

Skips authentication (account already exists on the backend)
User directly selects integrations
Returns null in onConnectSuccess callback (no new token needed)

When to use: Returning users with a stored access token who want to add more integrations.

Implementation Example:

generateLinkToken={async () => {
  const user = getCurrentUser(); // Your auth logic

  const response = await fetch("/api/kryptos/create-link-token", {
    method: "POST",
    body: JSON.stringify({
      // Include access_token if user is logged in
      access_token: user?.kryptosAccessToken || undefined,
    }),
  });

  const data = await response.json();

  return {
    link_token: data.link_token,
    // isAuthorized will be true if access_token was valid
    isAuthorized: !!user?.kryptosAccessToken,
  };
}}

Provider Configuration

Wrap your application with KryptosConnectProvider:

Option	Type	Required	Description
`appName`	string	Yes	Your application name
`appLogo`	string \| React.ReactNode	No	Logo URL or React component
`clientId`	string	Yes	Kryptos client ID from Developer Portal
`theme`	`"light"` \| `"dark"`	No	Visual theme (default: `"light"`)
`walletConnectProjectId`	string	Yes	WalletConnect project ID

Button Configuration

The KryptosConnectButton component triggers the connection flow:

Option	Type	Required	Description
`generateLinkToken`	`() => Promise<{ link_token: string; isAuthorized?: boolean }>`	Yes	Function that returns link token from your backend
`onConnectSuccess`	`(userConsent: UserConsent \| null) => void`	No	Callback on successful connection
`onConnectError`	`(error: Error) => void`	No	Callback on connection failure
`integrationName`	string	No	Direct integration ID to bypass selection page
`children`	React.ReactNode	No	Button text (default: "Connect to Kryptos")
`className`	string	No	Custom CSS class
`style`	React.CSSProperties	No	Inline styles

Direct Integration Flow

The integrationName prop allows you to direct users to a specific integration, bypassing the general integration selection page. This is useful when you want to provide dedicated buttons for specific exchanges or wallets.

Getting Supported Integration IDs:

Fetch available integration IDs from the public Kryptos API endpoint (see Public Endpoints - Integrations documentation).

Usage Example:

// Direct connection to a specific integration (e.g., Binance)
<KryptosConnectButton
  generateLinkToken={generateLinkToken}
  integrationName="binance"
  onConnectSuccess={(userConsent) => {
    console.log("Binance connected:", userConsent);
  }}
>
  Connect Binance Account
</KryptosConnectButton>

// Without children - uses default button text
<KryptosConnectButton
  generateLinkToken={generateLinkToken}
  integrationName="metamask"
  onConnectSuccess={(userConsent) => {
    console.log("MetaMask connected:", userConsent);
  }}
  // Button will display: "Connect using Metamask"
/>

Use Cases:

Dedicated Integration Buttons: Create separate buttons for popular integrations

<KryptosConnectButton integrationName="binance">
  Connect Binance
</KryptosConnectButton>
<KryptosConnectButton integrationName="coinbase">
  Connect Coinbase
</KryptosConnectButton>
<KryptosConnectButton integrationName="metamask">
  Connect MetaMask
</KryptosConnectButton>

Contextual Integration: Direct users to relevant integrations based on their context

// In an exchange-focused feature
<KryptosConnectButton integrationName="kraken">
  Add Kraken Account
</KryptosConnectButton>

Onboarding Flows: Guide users to connect specific integrations during onboarding

// Step 1: Connect wallet
<KryptosConnectButton integrationName="metamask">
  Connect Your Wallet
</KryptosConnectButton>

// Step 2: Connect exchange
<KryptosConnectButton integrationName="binance">
  Connect Your Exchange
</KryptosConnectButton>

info

The integrationName value must match an integration ID from the supported providers list. An invalid ID will result in an error.

TypeScript Support

import type {
  KryptosConnectButtonProps,
  KryptosConnectProviderProps,
  UserConsent,
} from "@kryptos_connect/web-sdk";

interface UserConsent {
  public_token: string;
}

Customization

CSS Variables

:root {
  --kc-primary: #8b5cf6;
  --kc-primary-hover: #7c3aed;
  --kc-bg-primary: #ffffff;
  --kc-text-primary: #000000;
  --kc-border: #e5e7eb;
  --kc-border-radius: 8px;
}

[data-kc-theme="dark"] {
  --kc-bg-primary: #1a1a1a;
  --kc-text-primary: #ffffff;
  --kc-border: #404040;
}

Custom Button Styling

<KryptosConnectButton
  className="my-custom-button"
  style={{
    background: "linear-gradient(to right, #667eea, #764ba2)",
    borderRadius: "12px",
  }}
>
  Connect Wallet
</KryptosConnectButton>

Framework Integration

Next.js (App Router)

// app/layout.tsx
import { KryptosConnectProvider } from "@kryptos_connect/web-sdk";
import "@kryptos_connect/web-sdk/dist/styles/index.css";

const config = {
  appName: "My Next.js App",
  clientId: process.env.NEXT_PUBLIC_KRYPTOS_CLIENT_ID!,
  walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
  theme: "light" as const,
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <KryptosConnectProvider config={config}>
          {children}
        </KryptosConnectProvider>
      </body>
    </html>
  );
}

React (Vite/CRA)

// main.tsx
import ReactDOM from "react-dom/client";
import { KryptosConnectProvider } from "@kryptos_connect/web-sdk";
import "@kryptos_connect/web-sdk/dist/styles/index.css";
import App from "./App";

const config = {
  appName: "My React App",
  clientId: import.meta.env.VITE_KRYPTOS_CLIENT_ID,
  walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
  theme: "light" as const,
};

ReactDOM.createRoot(document.getElementById("root")!).render(
  <KryptosConnectProvider config={config}>
    <App />
  </KryptosConnectProvider>,
);

Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Peer Dependencies

React >= 16.8.0
React DOM >= 16.8.0

Next steps

Backend Implementation -- set up the server-side token exchange and API integration
Examples -- complete integration examples for common use cases
Mobile SDK -- integrate Kryptos Connect in React Native applications

Installation​

Prerequisites​

Quick Start​

User Flow Variations​

Flow 1: New User (isAuthorized: false or undefined)​

Flow 2: Authenticated User (isAuthorized: true)​

Provider Configuration​

Button Configuration​

Direct Integration Flow​

TypeScript Support​

Customization​

CSS Variables​

Custom Button Styling​

Framework Integration​

Next.js (App Router)​

React (Vite/CRA)​

Browser Support​

Peer Dependencies​

Next steps​