cantonjs-react 0.0.1

package/dist/context.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Canton React context and provider.
+ *
+ * CantonProvider wraps a TanStack QueryClientProvider and supplies the
+ * LedgerClient to all child hooks via React context.
+ */
+import { QueryClient } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import type { LedgerClient } from './types.js';
+/** Context value holding the LedgerClient. */
+type CantonContextValue = {
+    readonly client: LedgerClient;
+};
+/** Props for CantonProvider. */
+export type CantonProviderProps = {
+    /** The LedgerClient instance to provide to hooks. */
+    readonly client: LedgerClient;
+    /** Optional TanStack QueryClient. A default one is created if not provided. */
+    readonly queryClient?: QueryClient;
+    readonly children?: ReactNode;
+};
+/**
+ * Provider component that supplies a LedgerClient to all cantonjs-react hooks.
+ *
+ * Must wrap any component tree that uses cantonjs-react hooks.
+ *
+ * @example
+ * ```tsx
+ * import { CantonProvider } from 'cantonjs-react'
+ * import { createLedgerClient, jsonApi } from 'cantonjs'
+ *
+ * const client = createLedgerClient({
+ *   transport: jsonApi({ url: 'http://localhost:7575', token: jwt }),
+ *   actAs: 'Alice::1234',
+ * })
+ *
+ * function App() {
+ *   return (
+ *     <CantonProvider client={client}>
+ *       <MyDApp />
+ *     </CantonProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare function CantonProvider({ client, queryClient, children }: CantonProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<CantonContextValue | null>>;
+/**
+ * Access the LedgerClient from context.
+ *
+ * @throws If called outside a CantonProvider.
+ */
+export declare function useCantonClient(): LedgerClient;
+/**
+ * Access the current party identity.
+ *
+ * @returns The `actAs` party from the LedgerClient.
+ */
+export declare function useParty(): string;
+export {};

package/dist/context.js

@@ -0,0 +1,65 @@
+/**
+ * Canton React context and provider.
+ *
+ * CantonProvider wraps a TanStack QueryClientProvider and supplies the
+ * LedgerClient to all child hooks via React context.
+ */
+import { createContext, useContext, createElement } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+const CantonContext = createContext(null);
+const defaultQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 5_000,
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+/**
+ * Provider component that supplies a LedgerClient to all cantonjs-react hooks.
+ *
+ * Must wrap any component tree that uses cantonjs-react hooks.
+ *
+ * @example
+ * ```tsx
+ * import { CantonProvider } from 'cantonjs-react'
+ * import { createLedgerClient, jsonApi } from 'cantonjs'
+ *
+ * const client = createLedgerClient({
+ *   transport: jsonApi({ url: 'http://localhost:7575', token: jwt }),
+ *   actAs: 'Alice::1234',
+ * })
+ *
+ * function App() {
+ *   return (
+ *     <CantonProvider client={client}>
+ *       <MyDApp />
+ *     </CantonProvider>
+ *   )
+ * }
+ * ```
+ */
+export function CantonProvider({ client, queryClient, children }) {
+    return createElement(CantonContext.Provider, { value: { client } }, createElement(QueryClientProvider, { client: queryClient ?? defaultQueryClient }, children));
+}
+/**
+ * Access the LedgerClient from context.
+ *
+ * @throws If called outside a CantonProvider.
+ */
+export function useCantonClient() {
+    const ctx = useContext(CantonContext);
+    if (!ctx) {
+        throw new Error('useCantonClient must be used within a CantonProvider');
+    }
+    return ctx.client;
+}
+/**
+ * Access the current party identity.
+ *
+ * @returns The `actAs` party from the LedgerClient.
+ */
+export function useParty() {
+    return useCantonClient().actAs;
+}
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AASxE,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAA;AAWpE,MAAM,kBAAkB,GAAG,IAAI,WAAW,CAAC;IACzC,cAAc,EAAE;QACd,OAAO,EAAE;YACP,SAAS,EAAE,KAAK;YAChB,oBAAoB,EAAE,KAAK;SAC5B;KACF;CACF,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAuB;IACnF,OAAO,aAAa,CAClB,aAAa,CAAC,QAAQ,EACtB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EACrB,aAAa,CACX,mBAAmB,EACnB,EAAE,MAAM,EAAE,WAAW,IAAI,kBAAkB,EAAE,EAC7C,QAAQ,CACT,CACF,CAAA;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,GAAG,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IACrC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;IACD,OAAO,GAAG,CAAC,MAAM,CAAA;AACnB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,eAAe,EAAE,CAAC,KAAK,CAAA;AAChC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * cantonjs-react — React hooks for Canton Network dApps.
+ *
+ * @packageDocumentation
+ */
+export { CantonProvider, useCantonClient, useParty } from './context.js';
+export type { CantonProviderProps } from './context.js';
+export { useContracts } from './useContracts.js';
+export type { UseContractsOptions } from './useContracts.js';
+export { useCreateContract } from './useCreateContract.js';
+export type { UseCreateContractOptions, CreateContractVariables } from './useCreateContract.js';
+export { useExercise } from './useExercise.js';
+export type { UseExerciseOptions, ExerciseVariables } from './useExercise.js';
+export { useStreamContracts } from './useStreamContracts.js';
+export type { UseStreamContractsOptions, UseStreamContractsResult } from './useStreamContracts.js';
+export type { LedgerClient, ActiveContract, CreatedEvent, JsTransaction } from './types.js';

package/dist/index.js

@@ -0,0 +1,11 @@
+/**
+ * cantonjs-react — React hooks for Canton Network dApps.
+ *
+ * @packageDocumentation
+ */
+export { CantonProvider, useCantonClient, useParty } from './context.js';
+export { useContracts } from './useContracts.js';
+export { useCreateContract } from './useCreateContract.js';
+export { useExercise } from './useExercise.js';
+export { useStreamContracts } from './useStreamContracts.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAGxE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/types.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Minimal type interfaces matching cantonjs exports.
+ *
+ * These are defined locally so cantonjs-react can be developed and tested
+ * without requiring the cantonjs package to be published. At runtime,
+ * users pass their actual cantonjs client instances.
+ */
+/** Minimal Transport interface matching cantonjs Transport. */
+export type Transport = {
+    readonly type: string;
+    readonly url: string;
+    request: <TResponse = unknown>(args: TransportRequest) => Promise<TResponse>;
+};
+/** Minimal TransportRequest. */
+export type TransportRequest = {
+    method: 'GET' | 'POST' | 'PATCH' | 'DELETE';
+    path: string;
+    body?: unknown;
+    headers?: Record<string, string>;
+    signal?: AbortSignal;
+    timeout?: number;
+};
+/** Minimal LedgerClient interface. */
+export type LedgerClient = {
+    readonly actAs: string;
+    readonly readAs: readonly string[];
+    createContract: (templateId: string, createArguments: Record<string, unknown>, options?: {
+        commandId?: string;
+        workflowId?: string;
+        signal?: AbortSignal;
+    }) => Promise<CreatedEvent>;
+    exerciseChoice: (templateId: string, contractId: string, choice: string, choiceArgument: Record<string, unknown>, options?: {
+        commandId?: string;
+        workflowId?: string;
+        signal?: AbortSignal;
+    }) => Promise<JsTransaction>;
+    queryContracts: (templateId: string, options?: {
+        signal?: AbortSignal;
+    }) => Promise<readonly ActiveContract[]>;
+};
+/** Minimal CreatedEvent. */
+export type CreatedEvent = {
+    readonly contractId: string;
+    readonly templateId: string;
+    readonly createArgument: Record<string, unknown>;
+    readonly [key: string]: unknown;
+};
+/** Minimal JsTransaction. */
+export type JsTransaction = {
+    readonly updateId: string;
+    readonly events: readonly Record<string, unknown>[];
+    readonly [key: string]: unknown;
+};
+/** Minimal ActiveContract. */
+export type ActiveContract = {
+    readonly createdEvent: CreatedEvent;
+    readonly synchronizerId: string;
+    readonly reassignmentCounter: number;
+};

package/dist/types.js

@@ -0,0 +1,9 @@
+/**
+ * Minimal type interfaces matching cantonjs exports.
+ *
+ * These are defined locally so cantonjs-react can be developed and tested
+ * without requiring the cantonjs package to be published. At runtime,
+ * users pass their actual cantonjs client instances.
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG"}

package/dist/useContracts.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Query hook for active contracts.
+ *
+ * Wraps LedgerClient.queryContracts with TanStack Query for caching,
+ * deduplication, and automatic refetching.
+ */
+import type { UseQueryResult } from '@tanstack/react-query';
+import type { ActiveContract } from './types.js';
+/** Options for the useContracts hook. */
+export type UseContractsOptions = {
+    /** Template ID to query. */
+    readonly templateId: string;
+    /** Whether to enable the query. Defaults to true. */
+    readonly enabled?: boolean;
+    /** Refetch interval in milliseconds. */
+    readonly refetchInterval?: number;
+};
+/**
+ * Query active contracts matching a template.
+ *
+ * @example
+ * ```tsx
+ * function AssetList() {
+ *   const { data: contracts, isLoading } = useContracts({
+ *     templateId: '#my-pkg:Main:Asset',
+ *   })
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *   return <ul>{contracts?.map(c => <li key={c.createdEvent.contractId}>...</li>)}</ul>
+ * }
+ * ```
+ */
+export declare function useContracts(options: UseContractsOptions): UseQueryResult<readonly ActiveContract[]>;

package/dist/useContracts.js

@@ -0,0 +1,33 @@
+/**
+ * Query hook for active contracts.
+ *
+ * Wraps LedgerClient.queryContracts with TanStack Query for caching,
+ * deduplication, and automatic refetching.
+ */
+import { useQuery } from '@tanstack/react-query';
+import { useCantonClient } from './context.js';
+/**
+ * Query active contracts matching a template.
+ *
+ * @example
+ * ```tsx
+ * function AssetList() {
+ *   const { data: contracts, isLoading } = useContracts({
+ *     templateId: '#my-pkg:Main:Asset',
+ *   })
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *   return <ul>{contracts?.map(c => <li key={c.createdEvent.contractId}>...</li>)}</ul>
+ * }
+ * ```
+ */
+export function useContracts(options) {
+    const client = useCantonClient();
+    return useQuery({
+        queryKey: ['canton', 'contracts', options.templateId, client.actAs],
+        queryFn: ({ signal }) => client.queryContracts(options.templateId, { signal }),
+        enabled: options.enabled,
+        refetchInterval: options.refetchInterval,
+    });
+}
+//# sourceMappingURL=useContracts.js.map

package/dist/useContracts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContracts.js","sourceRoot":"","sources":["../src/useContracts.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAa9C;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,YAAY,CAC1B,OAA4B;IAE5B,MAAM,MAAM,GAAG,eAAe,EAAE,CAAA;IAEhC,OAAO,QAAQ,CAAC;QACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC;QACnE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC;QAC9E,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,eAAe,EAAE,OAAO,CAAC,eAAe;KACzC,CAAC,CAAA;AACJ,CAAC"}

package/dist/useCreateContract.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Mutation hook for creating contracts.
+ *
+ * Wraps LedgerClient.createContract with TanStack Query's useMutation
+ * for loading state, error handling, and cache invalidation.
+ */
+import type { UseMutationResult } from '@tanstack/react-query';
+import type { CreatedEvent } from './types.js';
+/** Variables for creating a contract. */
+export type CreateContractVariables = {
+    readonly createArguments: Record<string, unknown>;
+    readonly commandId?: string;
+    readonly workflowId?: string;
+};
+/** Options for the useCreateContract hook. */
+export type UseCreateContractOptions = {
+    /** Template ID for the contract to create. */
+    readonly templateId: string;
+    /** Callback after successful creation. */
+    readonly onSuccess?: (event: CreatedEvent) => void;
+};
+/**
+ * Mutation hook for creating a contract.
+ *
+ * @example
+ * ```tsx
+ * function CreateAsset() {
+ *   const { mutate: create, isPending } = useCreateContract({
+ *     templateId: '#my-pkg:Main:Asset',
+ *   })
+ *
+ *   return (
+ *     <button
+ *       disabled={isPending}
+ *       onClick={() => create({ createArguments: { owner: 'Alice', value: 100 } })}
+ *     >
+ *       Create Asset
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export declare function useCreateContract(options: UseCreateContractOptions): UseMutationResult<CreatedEvent, Error, CreateContractVariables>;

package/dist/useCreateContract.js

@@ -0,0 +1,47 @@
+/**
+ * Mutation hook for creating contracts.
+ *
+ * Wraps LedgerClient.createContract with TanStack Query's useMutation
+ * for loading state, error handling, and cache invalidation.
+ */
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCantonClient } from './context.js';
+/**
+ * Mutation hook for creating a contract.
+ *
+ * @example
+ * ```tsx
+ * function CreateAsset() {
+ *   const { mutate: create, isPending } = useCreateContract({
+ *     templateId: '#my-pkg:Main:Asset',
+ *   })
+ *
+ *   return (
+ *     <button
+ *       disabled={isPending}
+ *       onClick={() => create({ createArguments: { owner: 'Alice', value: 100 } })}
+ *     >
+ *       Create Asset
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useCreateContract(options) {
+    const client = useCantonClient();
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: (variables) => client.createContract(options.templateId, variables.createArguments, {
+            commandId: variables.commandId,
+            workflowId: variables.workflowId,
+        }),
+        onSuccess: (event) => {
+            // Invalidate contract queries for this template
+            void queryClient.invalidateQueries({
+                queryKey: ['canton', 'contracts', options.templateId],
+            });
+            options.onSuccess?.(event);
+        },
+    });
+}
+//# sourceMappingURL=useCreateContract.js.map

package/dist/useCreateContract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateContract.js","sourceRoot":"","sources":["../src/useCreateContract.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAkB9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAiC;IAEjC,MAAM,MAAM,GAAG,eAAe,EAAE,CAAA;IAChC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,CAAC,SAAkC,EAAE,EAAE,CACjD,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,eAAe,EAAE;YACnE,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,UAAU,EAAE,SAAS,CAAC,UAAU;SACjC,CAAC;QACJ,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,gDAAgD;YAChD,KAAK,WAAW,CAAC,iBAAiB,CAAC;gBACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,CAAC,UAAU,CAAC;aACtD,CAAC,CAAA;YACF,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;QAC5B,CAAC;KACF,CAAC,CAAA;AACJ,CAAC"}

package/dist/useExercise.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Mutation hook for exercising choices on contracts.
+ *
+ * Wraps LedgerClient.exerciseChoice with TanStack Query's useMutation.
+ */
+import type { UseMutationResult } from '@tanstack/react-query';
+import type { JsTransaction } from './types.js';
+/** Variables for exercising a choice. */
+export type ExerciseVariables = {
+    readonly contractId: string;
+    readonly choiceArgument: Record<string, unknown>;
+    readonly commandId?: string;
+    readonly workflowId?: string;
+};
+/** Options for the useExercise hook. */
+export type UseExerciseOptions = {
+    /** Template ID of the contract. */
+    readonly templateId: string;
+    /** Choice name to exercise. */
+    readonly choice: string;
+    /** Callback after successful exercise. */
+    readonly onSuccess?: (tx: JsTransaction) => void;
+};
+/**
+ * Mutation hook for exercising a choice on a contract.
+ *
+ * @example
+ * ```tsx
+ * function TransferButton({ contractId }: { contractId: string }) {
+ *   const { mutate: exercise, isPending } = useExercise({
+ *     templateId: '#my-pkg:Main:Asset',
+ *     choice: 'Transfer',
+ *   })
+ *
+ *   return (
+ *     <button
+ *       disabled={isPending}
+ *       onClick={() => exercise({
+ *         contractId,
+ *         choiceArgument: { newOwner: 'Bob' },
+ *       })}
+ *     >
+ *       Transfer
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export declare function useExercise(options: UseExerciseOptions): UseMutationResult<JsTransaction, Error, ExerciseVariables>;

package/dist/useExercise.js

@@ -0,0 +1,50 @@
+/**
+ * Mutation hook for exercising choices on contracts.
+ *
+ * Wraps LedgerClient.exerciseChoice with TanStack Query's useMutation.
+ */
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCantonClient } from './context.js';
+/**
+ * Mutation hook for exercising a choice on a contract.
+ *
+ * @example
+ * ```tsx
+ * function TransferButton({ contractId }: { contractId: string }) {
+ *   const { mutate: exercise, isPending } = useExercise({
+ *     templateId: '#my-pkg:Main:Asset',
+ *     choice: 'Transfer',
+ *   })
+ *
+ *   return (
+ *     <button
+ *       disabled={isPending}
+ *       onClick={() => exercise({
+ *         contractId,
+ *         choiceArgument: { newOwner: 'Bob' },
+ *       })}
+ *     >
+ *       Transfer
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useExercise(options) {
+    const client = useCantonClient();
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: (variables) => client.exerciseChoice(options.templateId, variables.contractId, options.choice, variables.choiceArgument, {
+            commandId: variables.commandId,
+            workflowId: variables.workflowId,
+        }),
+        onSuccess: (tx) => {
+            // Invalidate all contract queries for this template
+            void queryClient.invalidateQueries({
+                queryKey: ['canton', 'contracts', options.templateId],
+            });
+            options.onSuccess?.(tx);
+        },
+    });
+}
+//# sourceMappingURL=useExercise.js.map

package/dist/useExercise.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExercise.js","sourceRoot":"","sources":["../src/useExercise.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAqB9C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,WAAW,CACzB,OAA2B;IAE3B,MAAM,MAAM,GAAG,eAAe,EAAE,CAAA;IAChC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,CAAC,SAA4B,EAAE,EAAE,CAC3C,MAAM,CAAC,cAAc,CACnB,OAAO,CAAC,UAAU,EAClB,SAAS,CAAC,UAAU,EACpB,OAAO,CAAC,MAAM,EACd,SAAS,CAAC,cAAc,EACxB;YACE,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,UAAU,EAAE,SAAS,CAAC,UAAU;SACjC,CACF;QACH,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE;YAChB,oDAAoD;YACpD,KAAK,WAAW,CAAC,iBAAiB,CAAC;gBACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,CAAC,UAAU,CAAC;aACtD,CAAC,CAAA;YACF,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAA;QACzB,CAAC;KACF,CAAC,CAAA;AACJ,CAAC"}

package/dist/useStreamContracts.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Streaming hook for live contract updates.
+ *
+ * Uses useEffect + AsyncIterator to subscribe to contract changes
+ * and update React state in real-time.
+ */
+import type { ActiveContract } from './types.js';
+/** Options for the useStreamContracts hook. */
+export type UseStreamContractsOptions = {
+    /** Template ID to stream. */
+    readonly templateId: string;
+    /** Whether to enable the stream. Defaults to true. */
+    readonly enabled?: boolean;
+};
+/** Result of the useStreamContracts hook. */
+export type UseStreamContractsResult = {
+    /** Current list of active contracts. */
+    readonly contracts: readonly ActiveContract[];
+    /** Whether the initial query is loading. */
+    readonly isLoading: boolean;
+    /** Any error from the query or stream. */
+    readonly error: Error | null;
+};
+/**
+ * Stream active contracts with live updates.
+ *
+ * Performs an initial query for active contracts, then polls at a regular
+ * interval to pick up changes. For true real-time updates, integrate with
+ * cantonjs's streamUpdates WebSocket API.
+ *
+ * @example
+ * ```tsx
+ * function LiveAssets() {
+ *   const { contracts, isLoading, error } = useStreamContracts({
+ *     templateId: '#my-pkg:Main:Asset',
+ *   })
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *   if (error) return <div>Error: {error.message}</div>
+ *   return <ul>{contracts.map(c => <li key={c.createdEvent.contractId}>...</li>)}</ul>
+ * }
+ * ```
+ */
+export declare function useStreamContracts(options: UseStreamContractsOptions): UseStreamContractsResult;

package/dist/useStreamContracts.js

@@ -0,0 +1,70 @@
+/**
+ * Streaming hook for live contract updates.
+ *
+ * Uses useEffect + AsyncIterator to subscribe to contract changes
+ * and update React state in real-time.
+ */
+import { useState, useEffect, useRef } from 'react';
+import { useCantonClient } from './context.js';
+/**
+ * Stream active contracts with live updates.
+ *
+ * Performs an initial query for active contracts, then polls at a regular
+ * interval to pick up changes. For true real-time updates, integrate with
+ * cantonjs's streamUpdates WebSocket API.
+ *
+ * @example
+ * ```tsx
+ * function LiveAssets() {
+ *   const { contracts, isLoading, error } = useStreamContracts({
+ *     templateId: '#my-pkg:Main:Asset',
+ *   })
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *   if (error) return <div>Error: {error.message}</div>
+ *   return <ul>{contracts.map(c => <li key={c.createdEvent.contractId}>...</li>)}</ul>
+ * }
+ * ```
+ */
+export function useStreamContracts(options) {
+    const client = useCantonClient();
+    const [contracts, setContracts] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const enabled = options.enabled ?? true;
+    const templateIdRef = useRef(options.templateId);
+    templateIdRef.current = options.templateId;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        let cancelled = false;
+        const controller = new AbortController();
+        async function poll() {
+            try {
+                const result = await client.queryContracts(templateIdRef.current, {
+                    signal: controller.signal,
+                });
+                if (!cancelled) {
+                    setContracts(result);
+                    setIsLoading(false);
+                    setError(null);
+                }
+            }
+            catch (err) {
+                if (!cancelled && !controller.signal.aborted) {
+                    setError(err instanceof Error ? err : new Error(String(err)));
+                    setIsLoading(false);
+                }
+            }
+        }
+        void poll();
+        const interval = setInterval(() => void poll(), 5_000);
+        return () => {
+            cancelled = true;
+            controller.abort();
+            clearInterval(interval);
+        };
+    }, [client, enabled]);
+    return { contracts, isLoading, error };
+}
+//# sourceMappingURL=useStreamContracts.js.map

package/dist/useStreamContracts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStreamContracts.js","sourceRoot":"","sources":["../src/useStreamContracts.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAqB9C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAkC;IAElC,MAAM,MAAM,GAAG,eAAe,EAAE,CAAA;IAChC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAA4B,EAAE,CAAC,CAAA;IACzE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAA;IACtD,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,IAAI,CAAA;IACvC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;IAChD,aAAa,CAAC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAA;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,IAAI,SAAS,GAAG,KAAK,CAAA;QACrB,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAA;QAExC,KAAK,UAAU,IAAI;YACjB,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,OAAO,EAAE;oBAChE,MAAM,EAAE,UAAU,CAAC,MAAM;iBAC1B,CAAC,CAAA;gBACF,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,YAAY,CAAC,MAAM,CAAC,CAAA;oBACpB,YAAY,CAAC,KAAK,CAAC,CAAA;oBACnB,QAAQ,CAAC,IAAI,CAAC,CAAA;gBAChB,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBAC7C,QAAQ,CAAC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;oBAC7D,YAAY,CAAC,KAAK,CAAC,CAAA;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAED,KAAK,IAAI,EAAE,CAAA;QACX,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,EAAE,EAAE,KAAK,CAAC,CAAA;QAEtD,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAA;YAChB,UAAU,CAAC,KAAK,EAAE,CAAA;YAClB,aAAa,CAAC,QAAQ,CAAC,CAAA;QACzB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAErB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAA;AACxC,CAAC"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "cantonjs-react",
+  "version": "0.0.1",
+  "description": "React hooks for Canton Network dApps — built on cantonjs",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "canton",
+    "daml",
+    "react",
+    "hooks",
+    "blockchain",
+    "ledger"
+  ],
+  "author": "Charles Dusek",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/merged-one/cantonjs.git",
+    "directory": "packages/cantonjs-react"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "cantonjs": "^0.0.1",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "cantonjs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.0.0",
+    "jsdom": "^29.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.5.0",
+    "vitest": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}