Swisstronik Digital Identity React SDK

The SDI React SDK allows you to easily integrate Swisstronik's decentralized identity verification into your React applications.

Installation

npm install @swisstronik/sdi-react-sdk
# or
yarn add @swisstronik/sdi-react-sdk

Quick Start

Wrap your application with the SwisstronikDigitalIdentity provider:

import {SDIConfig, SDIContextProvider} from "@swisstronik/sdi-react-sdk";
const config: SDIConfig = {
  requiredVerifications: [
    {
      id: 1,
      requiredType: "VT_HUMANITY",
      // Worldcoin v2 adapter
      issuerAddresses: ["0x32d024ab006564371648A1c3860524D24E3d7AE1"],
      expirationTimestamp: Math.floor(Date.now() / 1000)
    },
    {
      id: 2,
      requiredType: "VT_KYC",
      // Compilot adapter
      issuerAddresses: ["0xeF083cD5A653aB7B7FD746979676bc683b5f9012"],
      expirationTimestamp: Math.floor(Date.now() / 1000)
    },

  ],
  swtrProxyContractAddress: "0xBF896E5616d12fE6Bd7a376D2DBb924ff531CFDF",
  cosmosRPCAddress: "https://rpc.testnet.swisstronik.com",
  privyAppId: "your-privy-app-id",
  buttonStyle: "dark" // optional, defaults to "accent"
};

function App() {
  return (
    <SDIContextProvider config={config}>
      {/* Your app content */}
    </SDIContextProvider>
  );
}

2. Use the SwisstronikDigitalIdentity button where needed:

import { SwisstronikDigitalIdentity } from '@swisstronik/sdi-react-sdk';


function App() {
  return (
    <SwisstronikDigitalIdentity config={config}/>
  );
}

You can get valid issuer addresses via SWTRProxy or via SDI Registry

Configuration Options

The SDK accepts the following configuration options:

Required Configuration

• requiredVerifications: Array of verification requirements
  • id: Unique identifier for the verification
  • requiredType: Type of verification (e.g., "VT_HUMANITY", "VT_KYC")
  • issuerAddresses: Array of authorized issuer addresses
  • expirationTimestamp: Timestamp when the verification expires
• swtrProxyContractAddress: Swisstronik proxy contract address
• cosmosRPCAddress: Cosmos RPC endpoint address
• privyAppId: Your Privy application ID

Optional Configuration

• backendUrl: Custom backend URL
• walletConnectProjectId: WalletConnect project ID
• worldCoinAppId: WorldCoin application ID (format: app_...)
• worldCoinAction: WorldCoin action string
• buttonStyle: Button styling option ("accent" | "light" | "dark")

Button Styles

The SDK supports three button styles:

• accent: Red background with white text (default)
• light: White background with black text and border
• dark: Dark background with white text and border

Using the Hook

The SDK provides a useSDI hook for accessing verification state and functionality:

import { useSDI } from '@swisstronik/sdi-react-sdk';

function YourComponent() {
  const {
    eip1193Provider,
    isMainModalOpen,
    setIsMainModalOpen,
    verificationsList,
    userAddress,
    // ... other properties
  } = useSDI();

  // Your component logic
}

Verification Types

The SDK supports various verification types including:

• VT_UNSPECIFIED / UNRECOGNIZED: Undefined verification type
• VT_KYC: Know Your Customer
• VT_KYB: Know Your Business
• VT_KYW: Know Your Wallet
• VT_HUMANITY: Humanity check
• VT_AML: Anti Money Laundering
• VT_ADDRESS: Proof of Address
• VT_CUSTOM: Custom verification
• VT_CREDIT_SCORE: Credit Score verification
• VT_BIOMETRIC: Biometric verification

Example Implementation

Here's a complete example showing how to integrate SDI verification into your app:

TODO: example

Best Practices

1. Always handle the verification state appropriately using the useSDI hook
2. Provide clear feedback to users during the verification process
3. Implement proper error handling for failed verifications
4. Keep your configuration values secure and don't expose sensitive data
5. Test thoroughly with different verification types and scenarios

Support

For support and more information, visit the Swisstronik documentation or join our Discord community.