create-partylayer-app 0.4.1 → 0.5.0

package/templates/react-tokenization/src/lib/fixtures.ts

@@ -0,0 +1,134 @@
+/**
+ * Typed seed data for the demo backend, built from the REAL exported CIP-0056
+ * types. Three demo parties, one instrument (`DEMO`), holdings per party (one
+ * carrying a lock), a pending incoming transfer instruction for alice, a static
+ * allocation for the allocations card, and a fee estimate for CostPreview.
+ *
+ * The cost constructor and its types now come from `@partylayer/react` (re-exported
+ * from core), so the app no longer imports `@partylayer/core` directly.
+ */
+import { toTrafficCost, type CostEstimation } from '@partylayer/react';
+import type {
+  TokenHolding,
+  TokenHoldingRef,
+  TokenTransferInstructionRef,
+  TokenAllocationRef,
+} from '@partylayer/react/query';
+import type { DemoParty, DemoPartyKey, InstrumentConfig } from './types';
+
+export const PARTIES: Record<DemoPartyKey, DemoParty> = {
+  issuer: { key: 'issuer', label: 'Issuer', partyId: 'issuer::12208a3f9b' },
+  alice: { key: 'alice', label: 'Alice', partyId: 'alice::1220b7c142' },
+  bob: { key: 'bob', label: 'Bob', partyId: 'bob::1220e4d9a0' },
+};
+
+export const PARTY_ORDER: DemoPartyKey[] = ['issuer', 'alice', 'bob'];
+
+export const INSTRUMENT: InstrumentConfig = {
+  admin: PARTIES.issuer.partyId,
+  id: 'DEMO',
+  name: 'Demo Token',
+  description: 'A demo instrument administered by the issuer party for this example.',
+};
+
+/** A far-future ISO timestamp for the lock and allocation deadlines (stable, not time-based). */
+const FUTURE = '2027-01-01T00:00:00Z';
+
+function holding(owner: string, amount: string, lock?: TokenHolding['lock']): TokenHolding {
+  return {
+    owner,
+    instrumentId: { admin: INSTRUMENT.admin, id: INSTRUMENT.id },
+    amount,
+    lock,
+    meta: {},
+  };
+}
+
+/** The seed holdings, as `{ cid, holding }` refs (the cid is the ACS contract id). */
+export function seedHoldings(): Record<DemoPartyKey, TokenHoldingRef[]> {
+  return {
+    issuer: [{ cid: 'h-issuer-treasury', holding: holding(PARTIES.issuer.partyId, '1000000.00') }],
+    alice: [
+      { cid: 'h-alice-1', holding: holding(PARTIES.alice.partyId, '150.00') },
+      {
+        cid: 'h-alice-2',
+        holding: holding(PARTIES.alice.partyId, '50.00', {
+          holders: [PARTIES.issuer.partyId],
+          expiresAt: FUTURE,
+          context: 'frozen by issuer',
+        }),
+      },
+    ],
+    bob: [{ cid: 'h-bob-1', holding: holding(PARTIES.bob.partyId, '75.00') }],
+  };
+}
+
+/**
+ * The seed incoming transfer instructions, keyed by receiver party. Alice has one
+ * pending, in the `pendingReceiverAcceptance` state (so Accept and Reject apply).
+ */
+export function seedIncoming(): Record<DemoPartyKey, TokenTransferInstructionRef[]> {
+  return {
+    issuer: [],
+    alice: [
+      {
+        cid: 'ti-bob-alice-1',
+        instruction: {
+          transfer: {
+            sender: PARTIES.bob.partyId,
+            receiver: PARTIES.alice.partyId,
+            amount: '25.00',
+            instrumentId: { admin: INSTRUMENT.admin, id: INSTRUMENT.id },
+            requestedAt: '2026-07-22T09:00:00Z',
+            executeBefore: FUTURE,
+            inputHoldingCids: ['h-bob-1'],
+            meta: { memo: 'lunch split' },
+          },
+          status: { kind: 'pendingReceiverAcceptance' },
+        },
+      },
+    ],
+    bob: [],
+  };
+}
+
+/** A static allocation for the read-only allocations card (alice funds a settlement leg). */
+export function seedAllocations(): TokenAllocationRef[] {
+  return [
+    {
+      cid: 'alloc-cid-1',
+      allocation: {
+        allocation: {
+          settlement: {
+            executor: PARTIES.issuer.partyId,
+            settlementRef: { id: 'settlement-demo-1', cid: 'settle-cid-1' },
+            requestedAt: '2026-07-22T09:00:00Z',
+            allocateBefore: FUTURE,
+            settleBefore: FUTURE,
+          },
+          transferLegId: 'leg-1',
+          transferLeg: {
+            sender: PARTIES.alice.partyId,
+            receiver: PARTIES.bob.partyId,
+            amount: '10.00',
+            instrumentId: { admin: INSTRUMENT.admin, id: INSTRUMENT.id },
+          },
+        },
+        holdingCids: ['h-alice-1'],
+        meta: { settlement: 'demo' },
+      },
+    },
+  ];
+}
+
+/**
+ * A fixed fee estimate for CostPreview. The three fields are int64-as-string
+ * (`TrafficCost`); built with the `toTrafficCost` constructor now re-exported from
+ * `@partylayer/react`, so no direct core dependency is needed.
+ */
+export const FEE_ESTIMATE: CostEstimation = {
+  estimationTimestamp: '2026-07-22T09:00:00Z',
+  confirmationRequestTrafficCostEstimation: toTrafficCost('1200'),
+  confirmationResponseTrafficCostEstimation: toTrafficCost('800'),
+  totalTrafficCostEstimation: toTrafficCost('2000'),
+};

package/templates/react-tokenization/src/lib/format.ts

@@ -0,0 +1,59 @@
+/**
+ * Minimal fixed-point decimal helpers for the demo.
+ *
+ * Amounts are decimal strings END TO END (never JS numbers), matching the
+ * CIP-0056 `Decimal` convention where precision must survive. This demo SIMPLIFIES
+ * to two decimal places using bigint cents, which is enough for the two-decimal
+ * fixtures; a real dApp handling arbitrary-precision decimals should use a decimal
+ * library rather than this two-place shortcut. Documented in the README.
+ */
+const SCALE = 100n;
+
+/** Parse a two-decimal amount string into integer cents (bigint). */
+export function toCents(amount: string): bigint {
+  const trimmed = amount.trim();
+  const negative = trimmed.startsWith('-');
+  const body = negative ? trimmed.slice(1) : trimmed;
+  const [whole, frac = ''] = body.split('.');
+  const cents = BigInt(whole || '0') * SCALE + BigInt(((frac + '00').slice(0, 2)) || '0');
+  return negative ? -cents : cents;
+}
+
+/** Render integer cents back to a two-decimal amount string. */
+export function fromCents(cents: bigint): string {
+  const negative = cents < 0n;
+  const abs = negative ? -cents : cents;
+  const whole = abs / SCALE;
+  const frac = abs % SCALE;
+  const s = whole.toString() + '.' + frac.toString().padStart(2, '0');
+  return negative ? '-' + s : s;
+}
+
+export function addAmount(a: string, b: string): string {
+  return fromCents(toCents(a) + toCents(b));
+}
+
+export function subAmount(a: string, b: string): string {
+  return fromCents(toCents(a) - toCents(b));
+}
+
+/** Returns 1 / 0 / -1 for a > b / a === b / a < b. */
+export function cmpAmount(a: string, b: string): number {
+  const d = toCents(a) - toCents(b);
+  return d > 0n ? 1 : d < 0n ? -1 : 0;
+}
+
+/** Group the integer part with thousands separators; keep two decimals. */
+export function formatAmount(amount: string): string {
+  const [whole, frac = '00'] = amount.split('.');
+  const negative = whole.startsWith('-');
+  const digits = negative ? whole.slice(1) : whole;
+  const grouped = digits.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return (negative ? '-' : '') + grouped + '.' + frac.padEnd(2, '0').slice(0, 2);
+}
+
+/** Whether an amount is a valid non-negative two-decimal number greater than zero. */
+export function isPositiveAmount(amount: string): boolean {
+  if (!/^\d+(\.\d{1,2})?$/.test(amount.trim())) return false;
+  return toCents(amount) > 0n;
+}

package/templates/react-tokenization/src/lib/invalidate.ts

@@ -0,0 +1,23 @@
+/**
+ * Cache invalidation helpers.
+ *
+ * The CIP-0056 read hooks namespace the consumer's `key` under their own key
+ * factory, so the real TanStack queryKey is `partyLayerKeys.tokenHoldings({ key })`,
+ * NOT the raw `key`. Invalidation therefore goes through the exported
+ * `partyLayerKeys` factories (an empty-args call prefix-matches every party's
+ * entry), as the hooks' `key` JSDoc and the `partyLayerKeys` doc now spell out.
+ */
+import type { QueryClient } from '@tanstack/react-query';
+import { partyLayerKeys } from '@partylayer/react/query';
+
+/** Refresh every party's holdings, instructions, and the generic reads (supply, refs). */
+export function invalidateHoldingsAndReads(queryClient: QueryClient): void {
+  queryClient.invalidateQueries({ queryKey: partyLayerKeys.tokenHoldings() });
+  queryClient.invalidateQueries({ queryKey: partyLayerKeys.transferInstructions() });
+  queryClient.invalidateQueries({ queryKey: partyLayerKeys.damlContract() });
+}
+
+/** Refresh the allocations list. */
+export function invalidateAllocations(queryClient: QueryClient): void {
+  queryClient.invalidateQueries({ queryKey: partyLayerKeys.tokenAllocations() });
+}

package/templates/react-tokenization/src/lib/mutation.ts

@@ -0,0 +1,17 @@
+import type { TransactionToastStatus } from '@partylayer/react';
+
+/**
+ * Map a TanStack mutation's flags to the `TransactionToast` status prop. This is
+ * the documented mapping the toast's JSDoc describes: pending, success, error, else
+ * idle. Presentational: the toast renders whatever status the dApp derives here.
+ */
+export function toastStatus(m: {
+  isPending: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+}): TransactionToastStatus {
+  if (m.isPending) return 'pending';
+  if (m.isSuccess) return 'success';
+  if (m.isError) return 'error';
+  return 'idle';
+}

package/templates/react-tokenization/src/lib/store.ts

@@ -0,0 +1,219 @@
+/**
+ * A tiny in-memory mutable store initialized from the fixtures. It stands in for a
+ * validator's active-contract set so every hook exercises real loading, success,
+ * error, and invalidation without a live ledger. Small artificial latency makes
+ * loading states visible.
+ *
+ * Decimal amounts stay strings throughout; arithmetic goes through the two-decimal
+ * helpers in `./format` (documented simplification).
+ */
+import type {
+  TokenHoldingRef,
+  TokenTransferInstructionRef,
+  TokenAllocationRef,
+} from '@partylayer/react/query';
+import type { DemoPartyKey } from './types';
+import { PARTIES, seedHoldings, seedIncoming, seedAllocations, INSTRUMENT } from './fixtures';
+import { addAmount, subAmount, cmpAmount } from './format';
+
+interface StoreState {
+  holdings: Record<DemoPartyKey, TokenHoldingRef[]>;
+  incoming: Record<DemoPartyKey, TokenTransferInstructionRef[]>;
+  allocations: TokenAllocationRef[];
+}
+
+let state: StoreState = freshState();
+let cidCounter = 0;
+
+function freshState(): StoreState {
+  return {
+    holdings: seedHoldings(),
+    incoming: seedIncoming(),
+    allocations: seedAllocations(),
+  };
+}
+
+function nextCid(prefix: string): string {
+  cidCounter += 1;
+  // The 'gen' namespace keeps generated cids from colliding with the fixed seed
+  // cids (e.g. 'h-alice-1'), so a change output is never filtered out with a
+  // spent input that happens to share a numeric suffix.
+  return prefix + '-gen' + cidCounter.toString();
+}
+
+/** Map a party id string back to its demo key (fixtures use fixed ids). */
+function keyOf(partyId: string): DemoPartyKey | null {
+  for (const key of Object.keys(PARTIES) as DemoPartyKey[]) {
+    if (PARTIES[key].partyId === partyId) return key;
+  }
+  return null;
+}
+
+/** Artificial latency so loading skeletons are visible (200 to 400 ms). */
+export function latency(): Promise<void> {
+  const ms = 200 + ((cidCounter * 37) % 200);
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const demoStore = {
+  reset(): void {
+    state = freshState();
+    cidCounter = 0;
+  },
+
+  holdingsOf(party: DemoPartyKey): TokenHoldingRef[] {
+    return state.holdings[party].map((ref) => ({ cid: ref.cid, holding: { ...ref.holding } }));
+  },
+
+  incomingOf(party: DemoPartyKey): TokenTransferInstructionRef[] {
+    return state.incoming[party].map((it) => ({ ...it }));
+  },
+
+  allocations(): TokenAllocationRef[] {
+    return state.allocations.map((a) => ({ cid: a.cid, allocation: a.allocation }));
+  },
+
+  /** Contract ids of a party's UNLOCKED holdings, for building `inputHoldingCids`. */
+  unlockedCids(party: DemoPartyKey): string[] {
+    return state.holdings[party].filter((ref) => !ref.holding.lock).map((ref) => ref.cid);
+  },
+
+  /** Total held per party, summed across holdings (string arithmetic). */
+  balanceOf(party: DemoPartyKey): string {
+    return state.holdings[party].reduce((sum, ref) => addAmount(sum, ref.holding.amount), '0.00');
+  },
+
+  /** Total supply across all parties for the instrument. */
+  totalSupply(): string {
+    return (Object.keys(state.holdings) as DemoPartyKey[]).reduce(
+      (sum, party) => addAmount(sum, this.balanceOf(party)),
+      '0.00',
+    );
+  },
+
+  /** Consume `amount` from a party's unlocked holdings (archives inputs, writes change). */
+  debit(party: DemoPartyKey, amount: string): void {
+    const unlocked = state.holdings[party].filter((ref) => !ref.holding.lock);
+    const available = unlocked.reduce((sum, ref) => addAmount(sum, ref.holding.amount), '0.00');
+    if (cmpAmount(available, amount) < 0) {
+      throw new Error(
+        'Insufficient unlocked balance: need ' + amount + ' but only ' + available + ' is available.',
+      );
+    }
+    let remaining = amount;
+    const spentCids = new Set<string>();
+    for (const ref of unlocked) {
+      if (cmpAmount(remaining, '0.00') <= 0) break;
+      spentCids.add(ref.cid);
+      if (cmpAmount(ref.holding.amount, remaining) >= 0) {
+        const change = subAmount(ref.holding.amount, remaining);
+        remaining = '0.00';
+        if (cmpAmount(change, '0.00') > 0) {
+          state.holdings[party].push({
+            cid: nextCid('h-' + party),
+            holding: { ...ref.holding, amount: change, lock: undefined },
+          });
+        }
+      } else {
+        remaining = subAmount(remaining, ref.holding.amount);
+      }
+    }
+    state.holdings[party] = state.holdings[party].filter((ref) => !spentCids.has(ref.cid));
+  },
+
+  /** Credit a party with a new unlocked holding. */
+  credit(partyId: string, amount: string, meta?: Record<string, string>): void {
+    const party = keyOf(partyId);
+    if (!party) throw new Error('Unknown party to credit.');
+    state.holdings[party].push({
+      cid: nextCid('h-' + party),
+      holding: {
+        owner: partyId,
+        instrumentId: { admin: INSTRUMENT.admin, id: INSTRUMENT.id },
+        amount,
+        lock: undefined,
+        meta: meta ?? {},
+      },
+    });
+  },
+
+  /**
+   * Initiate a transfer (two-step model): debit the sender now and create a pending
+   * incoming instruction for the receiver to accept. Throws on insufficient unlocked
+   * balance (drives the error path). Returns the new instruction cid.
+   */
+  initiateTransfer(senderId: string, receiverId: string, amount: string, memo?: string): string {
+    const sender = keyOf(senderId);
+    const receiver = keyOf(receiverId);
+    if (!sender || !receiver) throw new Error('Unknown party in transfer.');
+
+    const inputCids = this.unlockedCids(sender);
+    this.debit(sender, amount);
+
+    const instructionCid = nextCid('ti-' + sender + '-' + receiver);
+    state.incoming[receiver].push({
+      cid: instructionCid,
+      instruction: {
+        transfer: {
+          sender: senderId,
+          receiver: receiverId,
+          amount,
+          instrumentId: { admin: INSTRUMENT.admin, id: INSTRUMENT.id },
+          requestedAt: '2026-07-22T09:00:00Z',
+          executeBefore: '2027-01-01T00:00:00Z',
+          inputHoldingCids: inputCids,
+          meta: memo ? { memo } : {},
+        },
+        status: { kind: 'pendingReceiverAcceptance' },
+      },
+    });
+    return instructionCid;
+  },
+
+  /**
+   * Resolve a pending incoming instruction. Accept credits the receiver; reject
+   * refunds the amount back to the sender (the debit is reversed).
+   */
+  resolveIncoming(receiverId: string, instructionCid: string, accept: boolean): void {
+    const receiver = keyOf(receiverId);
+    if (!receiver) throw new Error('Unknown receiver party.');
+    const item = state.incoming[receiver].find((it) => it.cid === instructionCid);
+    if (!item) throw new Error('Instruction not found: ' + instructionCid);
+
+    state.incoming[receiver] = state.incoming[receiver].filter((it) => it.cid !== instructionCid);
+    const transfer = item.instruction.transfer;
+    if (accept) {
+      this.credit(receiverId, transfer.amount, transfer.meta);
+    } else {
+      this.credit(transfer.sender, transfer.amount, { refunded: 'true' });
+    }
+  },
+
+  /** Issuer mint: create a new holding for a party. */
+  mint(toPartyId: string, amount: string): void {
+    const to = keyOf(toPartyId);
+    if (!to) throw new Error('Unknown mint target party.');
+    state.holdings[to].push({
+      cid: nextCid('h-' + to),
+      holding: {
+        owner: toPartyId,
+        instrumentId: { admin: INSTRUMENT.admin, id: INSTRUMENT.id },
+        amount,
+        lock: undefined,
+        meta: { minted: 'true' },
+      },
+    });
+  },
+
+  /** Issuer freeze toggle: add or remove the lock on a holding by cid. */
+  setFrozen(party: DemoPartyKey, cid: string, frozen: boolean): void {
+    const ref = state.holdings[party].find((h) => h.cid === cid);
+    if (!ref) throw new Error('Holding not found: ' + cid);
+    ref.holding = {
+      ...ref.holding,
+      lock: frozen
+        ? { holders: [INSTRUMENT.admin], expiresAt: '2027-01-01T00:00:00Z', context: 'frozen by issuer' }
+        : undefined,
+    };
+  },
+};

package/templates/react-tokenization/src/lib/types.ts

@@ -0,0 +1,27 @@
+/**
+ * App-level view models for the Tokenization example.
+ *
+ * The holding, allocation, and pending-instruction shapes now come straight from
+ * `@partylayer/react/query` as the corrected contract-ref types
+ * (`TokenHoldingRef`, `TokenAllocationRef`, `TokenTransferInstructionRef`), so the
+ * app no longer defines its own ref or instruction models. Only the demo-specific
+ * types remain here.
+ */
+
+/** The three demo parties this example switches between. */
+export type DemoPartyKey = 'issuer' | 'alice' | 'bob';
+
+export interface DemoParty {
+  key: DemoPartyKey;
+  label: string;
+  /** The party id string (Daml `Party`). */
+  partyId: string;
+}
+
+/** A small instrument-config view read through the generic `useDamlContract`. */
+export interface InstrumentConfig {
+  admin: string;
+  id: string;
+  name: string;
+  description: string;
+}

package/templates/react-tokenization/src/main.tsx

@@ -0,0 +1,18 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import App from './App';
+import './index.css';
+
+// The CIP-0056 hooks (the `@partylayer/react/query` entrypoint) are built on
+// TanStack Query, so they need a QueryClient in context. Create one here and wrap
+// the app, exactly as the react-vite scaffold template does.
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);

package/templates/react-tokenization/src/sections/Allocations.tsx

@@ -0,0 +1,150 @@
+/**
+ * Allocations section. Exercises the remaining three CIP-0056 hooks:
+ *  - useTokenAllocations reads the funded-allocation list (typed view),
+ *  - useAllocationInstruction creates an allocation via the factory,
+ *  - useAllocationAction acts on a funded allocation (executeTransfer/cancel/withdraw).
+ * The demo backend returns fixture results for the writes; a real dApp performs the
+ * registry-specific factory/context flow inside these fetchers (see the README).
+ */
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  useTokenAllocations,
+  useAllocationInstruction,
+  useAllocationAction,
+  type AllocationActionKind,
+} from '@partylayer/react/query';
+import { TransactionToast } from '@partylayer/react';
+import { useDemo, partyKey } from '../context/DemoContext';
+import { Card, AsyncView, Badge } from '../ui/primitives';
+import { toastStatus } from '../lib/mutation';
+import { invalidateAllocations } from '../lib/invalidate';
+import { formatAmount } from '../lib/format';
+import { PARTIES } from '../lib/fixtures';
+
+const ACTIONS: { kind: AllocationActionKind; label: string }[] = [
+  { kind: 'executeTransfer', label: 'Execute' },
+  { kind: 'cancel', label: 'Cancel' },
+  { kind: 'withdraw', label: 'Withdraw' },
+];
+
+export function Allocations() {
+  const { party, backend } = useDemo();
+  const queryClient = useQueryClient();
+
+  const q = useTokenAllocations({
+    read: (signal) => backend.readAllocations(signal),
+    key: partyKey('allocations', party),
+  });
+
+  const create = useAllocationInstruction<{ ok: true }>({
+    submit: (request, signal) => backend.submitAllocation(request, signal),
+    mutation: {
+      onSuccess: () => invalidateAllocations(queryClient),
+    },
+  });
+
+  const act = useAllocationAction<{ ok: true }>({
+    submit: (request, signal) => backend.submitAllocationAction(request, signal),
+    mutation: {
+      onSuccess: () => invalidateAllocations(queryClient),
+    },
+  });
+
+  const createDemoAllocation = () => {
+    // Build the standard AllocationFactory_Allocate request from the issuer as admin.
+    create.submitAllocation({
+      expectedAdmin: PARTIES.issuer.partyId,
+      allocation: {
+        settlement: {
+          executor: PARTIES.issuer.partyId,
+          settlementRef: { id: 'settlement-demo-new' },
+          requestedAt: new Date().toISOString(),
+          allocateBefore: '2027-01-01T00:00:00Z',
+          settleBefore: '2027-01-01T00:00:00Z',
+        },
+        transferLegId: 'leg-new',
+        transferLeg: {
+          sender: PARTIES[party].partyId,
+          receiver: PARTIES.bob.partyId,
+          amount: '5.00',
+          instrumentId: { admin: PARTIES.issuer.partyId, id: 'DEMO' },
+        },
+      },
+      requestedAt: new Date().toISOString(),
+      inputHoldingCids: [],
+      meta: { demo: 'true' },
+    });
+  };
+
+  const busy = create.isPending || act.isPending;
+
+  return (
+    <Card title="Allocations" hint="useTokenAllocations + useAllocationInstruction + useAllocationAction">
+      <div className="alloc-head">
+        <span className="muted">Funded allocations for a settlement leg.</span>
+        <button className="btn btn-ghost" onClick={createDemoAllocation} disabled={busy}>
+          Create demo allocation
+        </button>
+      </div>
+
+      <AsyncView
+        isPending={q.isPending}
+        error={q.error}
+        data={q.allocations}
+        isEmpty={(a) => a.length === 0}
+        empty="No allocations."
+      >
+        {(refs) => (
+          <ul className="list">
+            {refs.map(({ cid, allocation: a }) => {
+              const leg = a.allocation.transferLeg;
+              const settle = a.allocation.settlement;
+              return (
+                <li key={cid} className="row row-block">
+                  <div className="row-main">
+                    <div className="row-title">
+                      {formatAmount(leg.amount)} <span className="muted">{leg.instrumentId.id}</span>{' '}
+                      <Badge tone="neutral">leg {a.allocation.transferLegId}</Badge>
+                    </div>
+                    <div className="row-sub muted">
+                      {leg.sender} to {leg.receiver}
+                    </div>
+                    <div className="row-sub muted">
+                      executor {settle.executor} · settle before {settle.settleBefore.slice(0, 10)} ·{' '}
+                      {a.holdingCids.length} holding{a.holdingCids.length === 1 ? '' : 's'}
+                    </div>
+                  </div>
+                  <div className="row-actions">
+                    {ACTIONS.map((action) => (
+                      <button
+                        key={action.kind}
+                        className="btn btn-ghost btn-small"
+                        disabled={busy}
+                        // The ref carries the ACS contract id, which feeds allocationCid.
+                        onClick={() => act.submitAction({ allocationCid: cid, action: action.kind })}
+                      >
+                        {action.label}
+                      </button>
+                    ))}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </AsyncView>
+
+      <TransactionToast
+        status={toastStatus(create.isPending || create.isSuccess || create.isError ? create : act)}
+        error={create.error ?? act.error}
+        message={
+          create.isSuccess
+            ? 'Allocation created.'
+            : act.isSuccess
+              ? 'Allocation action submitted.'
+              : undefined
+        }
+      />
+    </Card>
+  );
+}