Integration Guide

This is a comprehensive integration guide for Untraced SDK

Provider Setup

The UntracedProvider component must wrap your application to provide verification context:

import { UntracedProvider, UntracedModal } from '@untraced/sdk';

function App() {
  return (
    <UntracedProvider
      config={{
        // Required: Your project client ID from dashboard
        clientId: "your-client-id",

        // Optional: API endpoint (default: "/api")
        apiUrl: "/api",

        // Optional: Chain ID (default: 5003 - Mantle Sepolia)
        chainId: 5003,

        // Optional: Theme (default: "dark")
        theme: "dark",

        // Optional: Accent color (default: "#a855f7")
        accentColor: "#a855f7",

        // Optional: Limit available modules
        modules: ['zk-email', 'zk-github'],

        // Optional: Success callback
        onSuccess: (result) => {
          console.log('Verification successful!', result);
        },

        // Optional: Error callback
        onError: (error) => {
          console.error('Verification failed:', error);
        },

        // Optional: Close callback
        onClose: () => {
          console.log('Modal closed');
        },
      }}
    >
      <YourApp />
      <UntracedModal />
    </UntracedProvider>
  );
}

Important: Place <UntracedModal /> at the root level, outside your main app components, so it can render as a portal.

Modal Integration

The modal is controlled through the useUntracedModal hook:

import { useUntracedModal } from '@untraced/sdk';

function MyComponent() {
  const { open, close, status } = useUntracedModal();

  return (
    <div>
      <button onClick={() => open('zk-email')}>
        Verify Email
      </button>
      <button onClick={() => open('zk-github')}>
        Verify GitHub
      </button>
      <p>Status: {status}</p>
    </div>
  );
}

The modal opens automatically when you call open() with a module ID. OAuth flows (for GitHub/Twitter) are handled transparently.

Button Components

Use the pre-styled UntracedButton component for quick integration:

import { UntracedButton } from '@untraced/sdk';

function MyComponent() {
  return (
    <div>
      <UntracedButton
        module="zk-email"
        variant="primary"
        size="lg"
      >
        Verify Email
      </UntracedButton>

      <UntracedButton
        module="zk-github"
        variant="secondary"
      >
        Verify GitHub
      </UntracedButton>
    </div>
  );
}

Available variants: primary, secondary, outline, ghost Available sizes: sm, md, lg