API Reference

useUntracedModal

Returns:

interface UseUntracedModalReturn {
  // Open modal for specific module
  open: (module: VerificationModule, config?: Record<string, unknown>) => void;

  // Close modal
  close: () => void;

  // Programmatic verification (no modal UI)
  verify: (module: VerificationModule, options?: Record<string, unknown>) => Promise<VerificationResult>;

  // Reset verification state
  reset: () => void;

  // Modal open state
  isOpen: boolean;

  // Wallet connection state
  isConnected: boolean;

  // Connected wallet address
  userAddress: Hex | null;

  // Current verification status
  status: VerificationStatus;

  // Currently selected module
  currentModule: VerificationModule | null;

  // Last verification result
  verificationResult: VerificationResult | null;

  // Last error
  error: Error | null;
}

Example:

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

  const handleVerify = async () => {
    try {
      const result = await verify('zk-email');
      console.log('Success!', result);
    } catch (err) {
      console.error('Failed:', err);
    }
  };

  return (
    <div>
      <button onClick={() => open('zk-email')}>Open Modal</button>
      <button onClick={handleVerify}>Verify Programmatically</button>
      <p>Status: {status}</p>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

useUntracedContext

Access full context (advanced usage).

function useUntracedContext(): UntracedContextValue

Returns: Same as useUntracedModal plus:

• config: The merged configuration object

Example:

function MyComponent() {
  const context = useUntracedContext();
  console.log('Config:', context.config);
  console.log('Theme:', context.config.theme);
}

UntracedProvider

Context provider component.

Props:

interface UntracedProviderProps {
  children: ReactNode;
  config: UntracedConfig;
}

Config Type:

interface UntracedConfig {
  clientId: string;
  apiUrl?: string;
  chainId?: number;
  registryAddress?: Hex;
  theme?: "light" | "dark" | "auto";
  accentColor?: string;
  modules?: VerificationModule[];
  onSuccess?: (result: VerificationResult) => void;
  onError?: (error: Error) => void;
  onClose?: () => void;
}

UntracedModal

Modal component (renders as portal).

Props: None (controlled via context)

Usage: Place at root level

<UntracedProvider config={config}>
  <App />
  <UntracedModal />
</UntracedProvider>

UntracedButton

Pre-styled verification button.

Props:

interface UntracedButtonProps {
  module: VerificationModule;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
  fullWidth?: boolean;
  disabled?: boolean;
  children: ReactNode;
}

Example:

<UntracedButton
  module="zk-github"
  variant="primary"
  size="lg"
  fullWidth
>
  Verify GitHub Account
</UntracedButton>