Advanced Usage

Programmatic Verification

Trigger verification without opening the modal UI:

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

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

  const handleVerify = async () => {
    try {
      const result = await verify('zk-age', {
        minAge: 21
      });

      console.log('Verification ID:', result.verificationId);
      console.log('User Address:', result.userAddress);
      console.log('TX Hash:', result.transactionHash);
      console.log('Attestation:', result.attestation);
    } catch (error) {
      console.error('Verification failed:', error);
    }
  };

  return (
    <div>
      <button
        onClick={handleVerify}
        disabled={status === 'verifying'}
      >
        {status === 'verifying' ? 'Verifying...' : 'Verify Age 21+'}
      </button>

      {verificationResult && (
        <div>
          Success! TX: {verificationResult.transactionHash}
        </div>
      )}
    </div>
  );
}

Note: OAuth modules (GitHub, Twitter) will still open popups even when using programmatic verification.

Custom Module Configuration

Dynamically configure modules based on user input:

function DynamicVerification() {
  const { open } = useUntracedModal();
  const [minAge, setMinAge] = useState(18);
  const [minCommits, setMinCommits] = useState(10);

  return (
    <div>
      {/* Age verification */}
      <input
        type="number"
        value={minAge}
        onChange={(e) => setMinAge(Number(e.target.value))}
        min={13}
        max={100}
      />
      <button onClick={() => open('zk-age', { minAge })}>
        Verify Age {minAge}+
      </button>

      {/* GitHub verification */}
      <input
        type="number"
        value={minCommits}
        onChange={(e) => setMinCommits(Number(e.target.value))}
        min={0}
        max={10000}
      />
      <button onClick={() => open('zk-github', { minCommits })}>
        Verify {minCommits}+ Commits
      </button>
    </div>
  );
}

State Management

Access and manage verification state:

function StateExample() {
  const {
    status,
    isConnected,
    userAddress,
    currentModule,
    verificationResult,
    error,
    reset,
  } = useUntracedModal();

  return (
    <div>
      {/* Status indicator */}
      <p>Status: {status}</p>

      {/* Wallet info */}
      {isConnected && (
        <p>Wallet: {userAddress}</p>
      )}

      {/* Module info */}
      {currentModule && (
        <p>Module: {currentModule}</p>
      )}

      {/* Success state */}
      {verificationResult && (
        <div>
          <p>Verified: {verificationResult.moduleId}</p>
          <p>TX: {verificationResult.transactionHash}</p>
        </div>
      )}

      {/* Error state */}
      {error && (
        <p>Error: {error.message}</p>
      )}

      {/* Reset button */}
      <button onClick={reset}>
        Reset State
      </button>
    </div>
  );
}

Error Handling

Implement custom error handling:

function ErrorHandlingExample() {
  const { verify } = useUntracedModal();
  const [error, setError] = useState<string | null>(null);

  const handleVerify = async () => {
    setError(null);

    try {
      await verify('zk-github', { minCommits: 100 });
    } catch (err: any) {
      // Handle specific error types
      if (err.message.includes('OAuth')) {
        setError('GitHub authorization failed. Please try again.');
      } else if (err.message.includes('wallet')) {
        setError('Please connect your wallet to continue.');
      } else if (err.message.includes('requirement')) {
        setError('You do not meet the verification requirements.');
      } else {
        setError('Verification failed. Please try again later.');
      }
    }
  };

  return (
    <div>
      <button onClick={handleVerify}>Verify</button>
      {error && (
        <div style={{ color: 'red' }}>
          {error}
        </div>
      )}
    </div>
  );
}