create-partylayer-app 0.4.1 → 0.5.1

package/templates/react-tokenization/src/App.css

@@ -0,0 +1,361 @@
+/* App chrome. Two token sets follow the light/dark toggle; the PartyLayer
+   primitives retint from the teal theme independently. */
+.app {
+  --bg: #ffffff;
+  --surface: #f0fdfa;
+  --card: #ffffff;
+  --text: #0f1e1c;
+  --muted: #5f6b6a;
+  --border: rgba(19, 78, 74, 0.14);
+  --accent: #0d9488;
+  --accent-contrast: #ffffff;
+  --error-bg: #fef2f2;
+  --error-text: #b00020;
+  --lock-bg: #fff7ed;
+  --lock-text: #9a3412;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+  transition: background 200ms, color 200ms;
+}
+
+.app-dark {
+  --bg: #0a1414;
+  --surface: #0f1d1d;
+  --card: #122423;
+  --text: #e6fbf6;
+  --muted: #8fa8a6;
+  --border: rgba(255, 255, 255, 0.1);
+  --accent: #2dd4bf;
+  --accent-contrast: #0a1414;
+  --error-bg: #2a0f10;
+  --error-text: #fca5a5;
+  --lock-bg: #2a1c0f;
+  --lock-text: #fbbf24;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.brand-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--accent);
+  display: inline-block;
+}
+.brand-title {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.brand-sub {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.topbar-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.party-switch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.party-switch-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  margin-right: 2px;
+}
+.party-chip {
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  padding: 4px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+.party-chip-on {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.acting-line {
+  max-width: 1100px;
+  margin: 16px auto 0;
+  padding: 0 24px;
+  color: var(--muted);
+  font-size: 14px;
+}
+.acting-line code {
+  font-size: 12px;
+}
+
+.grid {
+  max-width: 1100px;
+  margin: 16px auto 0;
+  padding: 0 24px 40px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.card-head h2 {
+  margin: 0;
+  font-size: 16px;
+}
+.card-hint {
+  font-size: 11px;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+.card-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.row-block {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+}
+.row-block .row-actions {
+  justify-content: flex-start;
+}
+.row-main {
+  flex: 1;
+  min-width: 0;
+}
+.row-title {
+  font-weight: 600;
+}
+.row-sub {
+  font-size: 12px;
+  word-break: break-all;
+}
+.row-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.badge-neutral {
+  background: var(--surface);
+  color: var(--muted);
+}
+.badge-lock {
+  background: var(--lock-bg);
+  color: var(--lock-text);
+}
+.badge-ok {
+  background: var(--surface);
+  color: var(--accent);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  align-items: end;
+}
+.field-action .btn {
+  width: 100%;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.field-label {
+  font-size: 12px;
+  color: var(--muted);
+}
+.field-action {
+  justify-content: flex-end;
+}
+.field input,
+.field select,
+.topbar-controls select {
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+}
+
+.btn {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 8px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.btn-primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+.btn-ghost {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border);
+}
+.btn-small {
+  padding: 5px 10px;
+  font-size: 13px;
+}
+
+.review {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 4px;
+}
+.review-line,
+.balance-line,
+.hint-line {
+  font-size: 14px;
+}
+
+.state {
+  padding: 16px;
+  border-radius: 10px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.state-empty {
+  background: var(--surface);
+  color: var(--muted);
+}
+.state-error {
+  background: var(--error-bg);
+  color: var(--error-text);
+}
+
+.skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.skeleton-row {
+  height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(90deg, var(--surface), var(--border), var(--surface));
+  background-size: 200% 100%;
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.issuer-summary {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.supply {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+.freeze {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.alloc-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.footer {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px;
+  color: var(--muted);
+  font-size: 13px;
+  border-top: 1px solid var(--border);
+}

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

@@ -0,0 +1,111 @@
+/**
+ * The Tokenization vertical example shell.
+ *
+ * PartyLayerKit provides the session + theme context (mirroring the react-vite
+ * template's setup), themed with the `teal` trading family and a light/dark toggle.
+ * The header carries the connect UI and a DEMO-PARTY switcher: switching the demo
+ * party changes whose data every section reads and who acts. It is app state,
+ * separate from the wallet session.
+ */
+import { useState } from 'react';
+import {
+  PartyLayerKit,
+  ConnectButton,
+  SynchronizerSwitcher,
+  themes,
+  type SynchronizerOption,
+} from '@partylayer/react';
+import { ConsoleAdapter } from '@partylayer/adapter-console';
+import { DemoProvider } from './context/DemoContext';
+import { demoBackend } from './lib/backend';
+import { PARTIES, PARTY_ORDER } from './lib/fixtures';
+import type { DemoPartyKey } from './lib/types';
+import { Holdings } from './sections/Holdings';
+import { Transfer } from './sections/Transfer';
+import { Incoming } from './sections/Incoming';
+import { Issuer } from './sections/Issuer';
+import { Allocations } from './sections/Allocations';
+import './App.css';
+
+// The dev wallet adapter apps/demo uses, so the connect surface works in a demo
+// context. The demo-party switcher, not this connection, drives the section data.
+const ADAPTERS = [new ConsoleAdapter()];
+
+const SYNCHRONIZERS: SynchronizerOption[] = [
+  { networkId: 'canton:da-devnet', label: 'DevNet' },
+  { networkId: 'canton:da-testnet', label: 'TestNet' },
+];
+
+export default function App() {
+  const [mode, setMode] = useState<'light' | 'dark'>('light');
+  const [party, setParty] = useState<DemoPartyKey>('alice');
+  const [synchronizer, setSynchronizer] = useState('canton:da-devnet');
+
+  const theme = mode === 'dark' ? themes.teal.dark : themes.teal.light;
+
+  return (
+    <PartyLayerKit network="devnet" appName="PartyLayer Tokenization" theme={theme} adapters={ADAPTERS}>
+      <DemoProvider value={{ party, setParty, backend: demoBackend, mode }}>
+        <div className={'app app-' + mode}>
+          <header className="topbar">
+            <div className="brand">
+              <span className="brand-mark" aria-hidden="true" />
+              <div>
+                <div className="brand-title">Tokenization</div>
+                <div className="brand-sub">CIP-0056 vertical example</div>
+              </div>
+            </div>
+
+            <div className="topbar-controls">
+              <div className="party-switch" role="group" aria-label="demo party">
+                <span className="party-switch-label">demo party</span>
+                {PARTY_ORDER.map((p) => (
+                  <button
+                    key={p}
+                    className={'party-chip' + (party === p ? ' party-chip-on' : '')}
+                    onClick={() => setParty(p)}
+                  >
+                    {PARTIES[p].label}
+                  </button>
+                ))}
+              </div>
+
+              <SynchronizerSwitcher
+                networkId={synchronizer}
+                options={SYNCHRONIZERS}
+                onSwitch={setSynchronizer}
+              />
+
+              <button
+                className="btn btn-ghost"
+                onClick={() => setMode((m) => (m === 'dark' ? 'light' : 'dark'))}
+              >
+                {mode === 'dark' ? 'Light' : 'Dark'}
+              </button>
+
+              <ConnectButton />
+            </div>
+          </header>
+
+          <p className="acting-line">
+            Acting as <strong>{PARTIES[party].label}</strong>{' '}
+            <code>{PARTIES[party].partyId}</code>. Every section below reads and acts as this party.
+          </p>
+
+          <main className="grid">
+            <Holdings />
+            <Transfer />
+            <Incoming />
+            <Issuer />
+            <Allocations />
+          </main>
+
+          <footer className="footer">
+            Demo backend, in-memory fixtures. Model 2: the dApp supplies every read and submit.
+            See the README for real-mode wiring against a live validator and registry.
+          </footer>
+        </div>
+      </DemoProvider>
+    </PartyLayerKit>
+  );
+}

package/templates/react-tokenization/src/context/DemoContext.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext } from 'react';
+import type { DemoPartyKey } from '../lib/types';
+import type { TokenizationBackend } from '../lib/backend';
+
+/**
+ * The demo context threads the current demo party, the backend, and the theme mode
+ * to every section. The current party is app state (a demo-party switcher), SEPARATE
+ * from the wallet session: it selects whose data the sections read and who acts.
+ */
+export interface DemoContextValue {
+  party: DemoPartyKey;
+  setParty: (party: DemoPartyKey) => void;
+  backend: TokenizationBackend;
+  mode: 'light' | 'dark';
+}
+
+const DemoContext = createContext<DemoContextValue | null>(null);
+
+export const DemoProvider = DemoContext.Provider;
+
+export function useDemo(): DemoContextValue {
+  const ctx = useContext(DemoContext);
+  if (!ctx) throw new Error('useDemo must be used within a DemoProvider.');
+  return ctx;
+}
+
+/**
+ * Party-scoped query key. Every hook folds the current party into its cache key so
+ * switching parties never shows another party's cached data. The `scope` names the
+ * section (holdings, incoming, ...).
+ */
+export function partyKey(scope: string, party: DemoPartyKey): [string, string, DemoPartyKey] {
+  return ['tokenization', scope, party];
+}

package/templates/react-tokenization/src/index.css

@@ -0,0 +1,23 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.5;
+}
+
+button {
+  font-family: inherit;
+}

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

@@ -0,0 +1,171 @@
+/**
+ * The backend interface the hooks read/submit through, plus a demo implementation
+ * against the in-memory store. Model 2: PartyLayer owns none of this; the dApp
+ * supplies these fetchers. In real mode each method becomes an ACS query or a
+ * registry-mediated command submission (see the README "Real mode" section).
+ */
+import type {
+  TokenHoldingRef,
+  TokenTransfer,
+  TokenAllocationRef,
+  TokenTransferInstructionRef,
+  TransferInstructionActionRequest,
+  AllocationInstructionRequest,
+  AllocationActionRequest,
+} from '@partylayer/react/query';
+import type { DemoPartyKey, InstrumentConfig } from './types';
+import { demoStore, latency } from './store';
+import { INSTRUMENT, PARTIES } from './fixtures';
+
+/** Issuer-only admin operations, exercised through the generic `useChoice`. */
+export type IssuerChoice =
+  | { kind: 'mint'; toParty: DemoPartyKey; amount: string }
+  | { kind: 'setFrozen'; party: DemoPartyKey; cid: string; frozen: boolean };
+
+export interface TokenizationBackend {
+  /** ACS read: a party's holdings as `{ cid, holding }` refs. `null` means none yet. */
+  readHoldings(party: DemoPartyKey, signal?: AbortSignal): Promise<TokenHoldingRef[] | null>;
+  /** ACS read: a party's pending incoming transfer instructions. `null` means none yet. */
+  readIncoming(party: DemoPartyKey, signal?: AbortSignal): Promise<TokenTransferInstructionRef[] | null>;
+  /**
+   * ACS read: a party's holdings refs for the issuer freeze panel, read through the
+   * generic `useDamlContract` (so that hook stays exercised alongside the typed ones).
+   */
+  readHoldingRefs(party: DemoPartyKey, signal?: AbortSignal): Promise<TokenHoldingRef[] | null>;
+  /** Read: the instrument configuration (generic contract read). */
+  readInstrument(signal?: AbortSignal): Promise<InstrumentConfig | null>;
+  /** Read: the total supply across parties (issuer summary). */
+  readSupply(signal?: AbortSignal): Promise<string | null>;
+  /** ACS read: the static allocations list as `{ cid, allocation }` refs. */
+  readAllocations(signal?: AbortSignal): Promise<TokenAllocationRef[] | null>;
+
+  /** Submit: initiate a transfer (creates a pending instruction for the receiver). */
+  submitTransfer(transfer: TokenTransfer, signal?: AbortSignal): Promise<{ ok: true }>;
+  /** Submit: a completion choice (accept/reject/withdraw) on a transfer instruction. */
+  submitTransferAction(
+    request: TransferInstructionActionRequest,
+    signal?: AbortSignal,
+  ): Promise<{ ok: true }>;
+  /** Submit: an issuer admin choice (mint/freeze), the registry-specific escape hatch. */
+  submitIssuerChoice(choice: IssuerChoice, signal?: AbortSignal): Promise<{ ok: true }>;
+  /** Submit: create an allocation via the factory (wired, fixture result). */
+  submitAllocation(request: AllocationInstructionRequest, signal?: AbortSignal): Promise<{ ok: true }>;
+  /** Submit: act on a funded allocation (executeTransfer/cancel/withdraw; fixture result). */
+  submitAllocationAction(request: AllocationActionRequest, signal?: AbortSignal): Promise<{ ok: true }>;
+}
+
+/** Reject if the caller aborted while we were "in flight". */
+function throwIfAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+}
+
+function partyIdToKey(partyId: string): DemoPartyKey {
+  for (const key of Object.keys(PARTIES) as DemoPartyKey[]) {
+    if (PARTIES[key].partyId === partyId) return key;
+  }
+  throw new Error('Unknown party id: ' + partyId);
+}
+
+export const demoBackend: TokenizationBackend = {
+  async readHoldings(party, signal) {
+    await latency();
+    throwIfAborted(signal);
+    return demoStore.holdingsOf(party);
+  },
+
+  async readIncoming(party, signal) {
+    await latency();
+    throwIfAborted(signal);
+    return demoStore.incomingOf(party);
+  },
+
+  async readHoldingRefs(party, signal) {
+    await latency();
+    throwIfAborted(signal);
+    return demoStore.holdingsOf(party);
+  },
+
+  async readInstrument(signal) {
+    await latency();
+    throwIfAborted(signal);
+    return INSTRUMENT;
+  },
+
+  async readSupply(signal) {
+    await latency();
+    throwIfAborted(signal);
+    return demoStore.totalSupply();
+  },
+
+  async readAllocations(signal) {
+    await latency();
+    throwIfAborted(signal);
+    return demoStore.allocations();
+  },
+
+  async submitTransfer(transfer, signal) {
+    await latency();
+    throwIfAborted(signal);
+    const memo = transfer.meta?.memo;
+    demoStore.initiateTransfer(transfer.sender, transfer.receiver, transfer.amount, memo);
+    return { ok: true };
+  },
+
+  async submitTransferAction(request, signal) {
+    await latency();
+    throwIfAborted(signal);
+    // The demo tracks the instruction on the receiver's list; find who holds it.
+    const receiverKey = findIncomingReceiver(request.instructionCid);
+    if (!receiverKey) throw new Error('Instruction not found: ' + request.instructionCid);
+    if (request.action === 'accept') {
+      demoStore.resolveIncoming(PARTIES[receiverKey].partyId, request.instructionCid, true);
+    } else {
+      // reject and withdraw both release the instruction; the demo refunds the sender.
+      demoStore.resolveIncoming(PARTIES[receiverKey].partyId, request.instructionCid, false);
+    }
+    return { ok: true };
+  },
+
+  // Mint and freeze are registry-specific admin operations. Real registries
+  // typically expose issuance through the standard's BurnMintV1
+  // (BurnMintFactory_BurnMint, which returns outputCids) or a custom admin choice;
+  // the exact choice fields are registry-defined and not asserted here. This demo
+  // shows the generic `useChoice` escape hatch for registry-specific writes
+  // alongside the typed CIP-0056 hooks.
+  async submitIssuerChoice(choice, signal) {
+    await latency();
+    throwIfAborted(signal);
+    if (choice.kind === 'mint') {
+      demoStore.mint(PARTIES[choice.toParty].partyId, choice.amount);
+    } else {
+      demoStore.setFrozen(choice.party, choice.cid, choice.frozen);
+    }
+    return { ok: true };
+  },
+
+  async submitAllocation(request, signal) {
+    await latency();
+    throwIfAborted(signal);
+    // Registry-specific in real mode; the demo just validates the sender is known.
+    partyIdToKey(request.allocation.transferLeg.sender);
+    return { ok: true };
+  },
+
+  async submitAllocationAction(request, signal) {
+    await latency();
+    throwIfAborted(signal);
+    // Registry-specific in real mode; the demo accepts any of the three actions.
+    if (!['executeTransfer', 'cancel', 'withdraw'].includes(request.action)) {
+      throw new Error('Unknown allocation action: ' + request.action);
+    }
+    return { ok: true };
+  },
+};
+
+/** Which demo party currently holds a pending instruction, by cid. */
+function findIncomingReceiver(instructionCid: string): DemoPartyKey | null {
+  for (const key of Object.keys(PARTIES) as DemoPartyKey[]) {
+    if (demoStore.incomingOf(key).some((it) => it.cid === instructionCid)) return key;
+  }
+  return null;
+}