@nomyx/canton-react

React hooks and context provider for Canton ledger interactions.

Installation

npm install @nomyx/canton-react @nomyx/canton-sdk

Quick Start

Wrap your application in the CantonProvider, then use hooks in any child component.

import { CantonProvider } from '@nomyx/canton-react';
import { SandboxAuth } from '@nomyx/canton-sdk';

function App() {
  return (
    <CantonProvider
      ledgerUrl="http://localhost:7575"
      auth={new SandboxAuth('Alice')}
    >
      <AssetList />
    </CantonProvider>
  );
}

import { useQuery, useExercise } from '@nomyx/canton-react';

function AssetList() {
  const { contracts, loading } = useQuery({
    templateId: 'Main:Asset',
    query: { owner: 'Alice' },
  });

  const [exercise] = useExercise();

  const transfer = (contractId: string) =>
    exercise({
      templateId: 'Main:Asset',
      contractId,
      choice: 'Transfer',
      argument: { newOwner: 'Bob' },
    });

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {contracts.map((c) => (
        <li key={c.contractId}>
          {c.payload.name}
          <button onClick={() => transfer(c.contractId)}>Transfer</button>
        </li>
      ))}
    </ul>
  );
}

Hooks

| Hook | Description | |------|-------------| | useCantonClient | Access the underlying CantonClient instance | | useQuery | Reactive contract query with automatic refresh | | useExercise | Execute a choice on an active contract | | useParties | Retrieve known parties from the ledger | | useStreamStatus | Monitor the WebSocket transaction stream status |

License

Apache-2.0 -- see LICENSE for details.