Hooks Reference

Complete reference for all React hooks in @tenzro/platform-ui. All hooks follow a consistent pattern with loading, error, and refresh states.

AI Hooks

useAIModels

List available AI models.

import { useAIModels } from '@tenzro/platform-ui';

function ModelList() {
  const { models, loading, error, refresh } = useAIModels();

  if (loading) return <div>Loading models...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {models.map(model => (
        <li key={model.id}>{model.name} - {model.provider}</li>
      ))}
    </ul>
  );
}

useInfer

Run AI inference with TEE attestation.

import { useInfer } from '@tenzro/platform-ui';

function InferenceDemo() {
  const { infer, loading, result, error } = useInfer();

  const handleInfer = async () => {
    await infer({
      modelId: 'llama-3.1-70b',
      prompt: 'Analyze this transaction for risk',
      maxTokens: 1024,
      temperature: 0.7,
    });
  };

  return (
    <div>
      <button onClick={handleInfer} disabled={loading}>
        {loading ? 'Running...' : 'Run Inference'}
      </button>
      {result && (
        <div>
          <p>{result.content}</p>
          <small>TEE: {result.teeAttestation?.type}</small>
        </div>
      )}
    </div>
  );
}

useInferStream

Streaming AI inference.

import { useInferStream } from '@tenzro/platform-ui';

function StreamingInference() {
  const { stream, loading, chunks, error } = useInferStream();

  const handleStream = async () => {
    await stream({
      modelId: 'llama-3.1-70b',
      prompt: 'Write a story about...',
      maxTokens: 2048,
    });
  };

  return (
    <div>
      <button onClick={handleStream} disabled={loading}>Stream</button>
      <div>{chunks.join('')}</div>
    </div>
  );
}

useChat

Multi-turn chat conversations.

import { useChat } from '@tenzro/platform-ui';

function ChatDemo() {
  const { chat, loading, messages, error } = useChat();

  const sendMessage = async (content: string) => {
    await chat({
      modelId: 'llama-3.1-70b',
      messages: [
        ...messages,
        { role: 'user', content }
      ],
    });
  };

  return (
    <div>
      {messages.map((msg, i) => (
        <div key={i}><b>{msg.role}:</b> {msg.content}</div>
      ))}
    </div>
  );
}

useMultiPartySessions

Manage multi-party secure inference sessions.

import { useMultiPartySessions, useCreateMultiPartySession } from '@tenzro/platform-ui';

function MultiPartyDemo() {
  const { sessions, loading, refresh } = useMultiPartySessions();
  const { createSession, loading: creating } = useCreateMultiPartySession();

  const handleCreate = async () => {
    await createSession({
      name: 'Portfolio Analysis',
      modelId: 'llama-3.1-70b',
      participants: ['party-a', 'party-b'],
      dataPolicy: {
        minParticipants: 2,
        aggregationMethod: 'federated',
        encryptionRequired: true,
      },
    });
    refresh();
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={creating}>Create Session</button>
      <ul>
        {sessions.map(s => <li key={s.id}>{s.name} - {s.status}</li>)}
      </ul>
    </div>
  );
}

useTEEAttestation

Get TEE attestation for secure inference.

import { useTEEAttestation, useVerifyTEEAttestation } from '@tenzro/platform-ui';

function TEEDemo() {
  const { attestation, loading, refresh } = useTEEAttestation('model-id');
  const { verify, loading: verifying, result } = useVerifyTEEAttestation();

  const handleVerify = async () => {
    if (attestation) {
      await verify({
        attestation: attestation.rawAttestation,
        type: attestation.type,
      });
    }
  };

  return (
    <div>
      <p>TEE Type: {attestation?.type}</p>
      <p>Enclave: {attestation?.enclaveMeasurement}</p>
      <button onClick={handleVerify}>Verify</button>
      {result && <p>Valid: {result.valid ? 'Yes' : 'No'}</p>}
    </div>
  );
}

useRAGQuery

Retrieval-Augmented Generation queries.

import { useRAGQuery, useRAGDataSources } from '@tenzro/platform-ui';

function RAGDemo() {
  const { dataSources } = useRAGDataSources();
  const { query, loading, result } = useRAGQuery();

  const handleQuery = async () => {
    await query({
      query: 'What are the compliance requirements?',
      dataSourceIds: dataSources.map(ds => ds.id),
      maxResults: 5,
    });
  };

  return (
    <div>
      <button onClick={handleQuery}>Query</button>
      {result && (
        <div>
          <p>{result.answer}</p>
          <h4>Sources:</h4>
          {result.sources.map(s => <p key={s.id}>{s.title}</p>)}
        </div>
      )}
    </div>
  );
}

Verifiable AI Hooks

Record and verify AI inference on the Canton ledger.

import {
  useRecordInference,
  useVerifyInference,
  useInferenceHistory
} from '@tenzro/platform-ui';

function VerifiableAIDemo() {
  const { history, loading: loadingHistory } = useInferenceHistory();
  const { record, loading: recording } = useRecordInference();
  const { verify, loading: verifying, result } = useVerifyInference();

  const handleRecord = async (inferenceResult: any) => {
    await record({
      modelId: inferenceResult.modelId,
      inputHash: inferenceResult.inputHash,
      outputHash: inferenceResult.outputHash,
      attestation: inferenceResult.teeAttestation,
    });
  };

  return (
    <div>
      <h3>Inference History</h3>
      {history.map(h => (
        <div key={h.id}>
          <p>Model: {h.modelId}</p>
          <button onClick={() => verify({ proofId: h.proofId })}>
            Verify
          </button>
        </div>
      ))}
    </div>
  );
}

Bridge Hooks

useBridgeRoutes

Get available bridge routes between chains.

import { useBridgeRoutes } from '@tenzro/platform-ui';

function BridgeRoutes() {
  const { routes, loading, error, refresh } = useBridgeRoutes({
    fromChain: 'ethereum',
    toChain: 'canton',
  });

  return (
    <ul>
      {routes.map(route => (
        <li key={route.id}>
          {route.asset}: {route.fromChain} → {route.toChain}
        </li>
      ))}
    </ul>
  );
}

useBridgeQuote

Get a quote for a bridge transfer.

import { useBridgeQuote } from '@tenzro/platform-ui';

function BridgeQuoteDemo() {
  const { getQuote, loading, quote, error } = useBridgeQuote();

  const handleQuote = async () => {
    await getQuote({
      fromChain: 'ethereum',
      toChain: 'canton',
      asset: 'USDC',
      amount: '1000000000', // 1000 USDC
    });
  };

  return (
    <div>
      <button onClick={handleQuote}>Get Quote</button>
      {quote && (
        <div>
          <p>Fee: {quote.fee} {quote.feeAsset}</p>
          <p>Estimated time: {quote.estimatedTime}s</p>
        </div>
      )}
    </div>
  );
}

Ledger Hooks

useParties

List Canton Network parties.

import { useParties, useAllocateParty } from '@tenzro/platform-ui';

function PartiesDemo() {
  const { parties, loading, refresh } = useParties();
  const { allocate, loading: allocating } = useAllocateParty();

  const handleAllocate = async () => {
    await allocate({
      displayName: 'Treasury',
      namespace: 'myapp',
      hint: 'treasury',
    });
    refresh();
  };

  return (
    <div>
      <button onClick={handleAllocate}>Allocate Party</button>
      <ul>
        {parties.map(p => <li key={p.identifier}>{p.displayName}</li>)}
      </ul>
    </div>
  );
}

useLedgerTransfer

Transfer tokens between parties.

import { useLedgerTransfer } from '@tenzro/platform-ui';

function TransferDemo() {
  const { transfer, loading, result, error } = useLedgerTransfer();

  const handleTransfer = async () => {
    await transfer({
      fromParty: 'party::myapp::alice',
      toParty: 'party::myapp::bob',
      asset: 'CC',
      amount: '100.00',
    });
  };

  return (
    <button onClick={handleTransfer} disabled={loading}>
      Transfer
    </button>
  );
}

useContract & useExerciseChoice

Work with Daml contracts.

import { useContract, useCreateContract, useExerciseChoice } from '@tenzro/platform-ui';

function ContractDemo() {
  const { contract } = useContract('contract-id');
  const { create } = useCreateContract();
  const { exercise } = useExerciseChoice();

  const handleCreate = async () => {
    await create({
      templateId: 'Tenzro.Token:Asset',
      payload: { owner: 'party::myapp::alice', amount: '1000.00' },
      signatories: ['party::myapp::alice'],
    });
  };

  const handleExercise = async () => {
    await exercise({
      contractId: contract.contractId,
      choice: 'Transfer',
      argument: { newOwner: 'party::myapp::bob' },
      actingParties: ['party::myapp::alice'],
    });
  };

  return <div>...</div>;
}

Custody Hooks

useCustodyKeys

List MPC custody keys.

import { useCustodyKeys, useCreateKey, useSign } from '@tenzro/platform-ui';

function CustodyDemo() {
  const { keys, loading, refresh } = useCustodyKeys();
  const { createKey, loading: creating } = useCreateKey();
  const { sign, loading: signing, signature } = useSign();

  const handleCreate = async () => {
    await createKey({
      name: 'Treasury Signing Key',
      algorithm: 'ECDSA_SECP256K1',
      purpose: 'signing',
    });
    refresh();
  };

  const handleSign = async (keyId: string, message: string) => {
    await sign({
      keyId,
      message,
      encoding: 'hex',
    });
  };

  return (
    <div>
      <button onClick={handleCreate}>Create Key</button>
      {keys.map(key => (
        <div key={key.id}>
          {key.name} - {key.algorithm}
          <button onClick={() => handleSign(key.id, '0xabc...')}>Sign</button>
        </div>
      ))}
    </div>
  );
}

Provision Hooks

useAllocations

Manage Canton Network allocations.

import { useAllocations, useCreateAllocation, useAllocationActions } from '@tenzro/platform-ui';

function ProvisionDemo() {
  const { allocations, loading, refresh } = useAllocations({ network: 'devnet' });
  const { createAllocation } = useCreateAllocation();
  const { suspend, resume, revoke } = useAllocationActions();

  const handleCreate = async () => {
    await createAllocation({
      name: 'Production',
      network: 'mainnet',
      tier: 'enterprise',
      quotas: {
        maxParties: 100,
        maxContracts: 10000,
        maxTransactionsPerDay: 100000,
      },
    });
    refresh();
  };

  return (
    <div>
      {allocations.map(a => (
        <div key={a.id}>
          {a.name} - {a.status}
          <button onClick={() => suspend(a.id)}>Suspend</button>
          <button onClick={() => resume(a.id)}>Resume</button>
        </div>
      ))}
    </div>
  );
}

Events Hooks

useEventSubscription

Subscribe to real-time events.

import { useEventSubscription } from '@tenzro/platform-ui';

function EventsDemo() {
  const { events, connected, error } = useEventSubscription({
    topics: ['wallet:*', 'bridge:completed', 'ledger:transfer'],
  });

  return (
    <div>
      <p>Connected: {connected ? 'Yes' : 'No'}</p>
      <h3>Recent Events</h3>
      {events.map((event, i) => (
        <div key={i}>
          <b>{event.topic}</b>: {JSON.stringify(event.data)}
        </div>
      ))}
    </div>
  );
}

API Keys Hooks

useApiKeys

Manage API keys.

import { useApiKeys, useCreateApiKey, useRevokeApiKey } from '@tenzro/platform-ui';

function ApiKeysDemo() {
  const { keys, loading, refresh } = useApiKeys();
  const { createApiKey } = useCreateApiKey();
  const { revokeApiKey } = useRevokeApiKey();

  const handleCreate = async () => {
    const key = await createApiKey({
      name: 'CI/CD Pipeline',
      scopes: ['read:wallet', 'write:token'],
      expiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30 days
    });
    console.log('New key:', key.key); // Only shown once!
    refresh();
  };

  return (
    <div>
      {keys.map(k => (
        <div key={k.id}>
          {k.name} - {k.status}
          <button onClick={() => revokeApiKey(k.id)}>Revoke</button>
        </div>
      ))}
    </div>
  );
}