@openreceive/react 0.1.0 → 0.2.1

package/README.md

@@ -0,0 +1,40 @@
+# @openreceive/react
+
+React checkout components for OpenReceive (`<Checkout>`, `useCheckout`, `PaymentWizard`).
+
+## Mount
+
+Render `<Checkout>` and import the checkout styles once — without them the
+components render unstyled.
+
+```tsx
+import { Checkout } from "@openreceive/react";
+import "@openreceive/react/styles.css";
+
+export function Pay() {
+  return <Checkout reference="order-123" onSettled={() => console.log("paid")} />;
+}
+```
+
+Pass `reference` to let the component create the checkout (create mode), or pass
+a `checkout` snapshot to render one your server already created. Prop names,
+defaults, and the full surface are shared across the wrappers — see
+`docs/internal/wrapper-parity.md` in the repository.
+
+Event handlers (`onCopy`, `onOpenWallet`, `onState`, `onSettled`,
+`onProviderCopy`, `onStartOver`, `onError`) are ordinary props. React receives
+framework values rather than DOM `CustomEvent`s — `onState` gets the
+`CheckoutState`, `onError` the thrown value.
+
+`useCheckout({ checkout })` is the headless half: it drives a concrete snapshot
+and returns the view model plus the copy/open actions. Create mode belongs to
+`<Checkout>`, so the hook takes no create options.
+
+## Icon assets
+
+The checkout loads its payment-method icons by URL at runtime; your app must
+serve them where the resolution lands. See
+[Icon assets in `@openreceive/browser`](https://github.com/openreceive/openreceive/blob/master/packages/js/browser/README.md#icon-assets)
+for the per-bundler recipes.
+
+Part of [OpenReceive](https://openreceive.org). Start with the [Node quickstart](https://github.com/openreceive/openreceive/blob/master/docs/guides/quickstart-node.md); the full API is in the [API reference](https://github.com/openreceive/openreceive/blob/master/docs/guides/api-reference.md).

package/dist/index.d.ts

@@ -1,42 +1,57 @@
-import * as React from "react";
-import { type OpenReceiveQrEncoder, type OpenReceiveBrowserLogContext, type OpenReceiveBrowserLogger, type CheckoutPhase, type CheckoutSnapshot, type CheckoutState, type CheckoutStatusModel, type OpenReceiveRefreshInvoiceResult, type OpenReceiveResolvedTheme, type OpenReceiveThemeModel, type OpenReceiveThemePreference, type Status } from "@openreceive/browser/internal";
-export interface CheckoutData {
-    readonly invoice: CheckoutSnapshot;
+import * as React from 'react';
+import { CheckoutComponentProps, CheckoutState, QrEncoder, BrowserLoggerOption, CheckoutStatusRefresh, Status, CheckoutSnapshot, BrowserLogContext, CheckoutInvoiceSnapshot, ThemePreference, ResolvedTheme, ThemeModel, PaymentDataSource, CheckoutPhase, CheckoutStatusModel, BrowserLogger, TransactionDetailsSource } from '@openreceive/browser/headless';
+export { TransactionDetailsSource, resolveTransactionDetailRows } from '@openreceive/browser/headless';
+
+interface CheckoutData {
+    readonly checkout: CheckoutSnapshot;
 }
-export interface CheckoutViewModel {
-    readonly invoice_id?: string;
-    readonly invoice: string;
-    readonly payment_hash?: string;
-    readonly amount_msats?: number;
-    readonly fiat_quote?: CheckoutSnapshot["fiat_quote"];
-    readonly expires_at?: number;
-    readonly settled_at?: number;
-    readonly lightningUri: string;
-    readonly amountLabel?: string;
-    readonly fiatLabel?: string;
-    readonly paymentHashLabel?: string;
+/**
+ * What React renders a checkout from: the shared {@link CheckoutState} plus the
+ * coarse public {@link Status} the component's four terminal branches read.
+ *
+ * It used to restate eleven of CheckoutState's fields — the same flattening
+ * rule, written a second time in a second package. It now extends the state, so
+ * there is exactly one derivation and one place a display field can come from.
+ */
+interface CheckoutViewModel extends CheckoutState {
     readonly status: Status;
 }
-export interface UseCheckoutOptions extends CheckoutData {
+/**
+ * Event handlers every OpenReceive wrapper exposes (docs/internal/wrapper-parity.md).
+ * React hands each one its framework-native payload; the element wrappers hand the
+ * matching DOM CustomEvent.
+ */
+interface CheckoutEventHandlers {
+    readonly onCopy?: () => void;
+    readonly onOpenWallet?: (uri: string) => void;
+    readonly onState?: (state: CheckoutState) => void;
+    readonly onSettled?: () => void;
+    readonly onProviderCopy?: (providerId: string) => void;
+    readonly onStartOver?: () => void;
+    readonly onError?: (error: unknown) => void;
+}
+/**
+ * Hook inputs. The hook drives a concrete snapshot, so `checkout` is REQUIRED:
+ * create mode belongs to `<Checkout>`, and both `useCheckout({ reference })`
+ * and `useCheckout({})` used to type-check and then always throw.
+ */
+interface UseCheckoutOptions extends CheckoutData, Omit<CheckoutEventHandlers, "onProviderCopy" | "onStartOver"> {
     readonly clipboard?: Pick<Clipboard, "writeText">;
     readonly open?: (uri: string) => void;
-    readonly logger?: OpenReceiveBrowserLogger;
-    readonly onError?: (error: unknown) => void;
-    readonly lookupInvoice?: (state: CheckoutState) => Promise<Partial<CheckoutSnapshot>>;
-    readonly lookupUrl?: string | false;
-    readonly refreshInvoice?: (state: CheckoutState) => Promise<CheckoutSnapshot | OpenReceiveRefreshInvoiceResult>;
-    readonly refreshUrl?: string | ((state: CheckoutState) => string);
-    readonly refreshHeaders?: Readonly<Record<string, string>>;
-    readonly refreshIdempotencyKey?: string | ((state: CheckoutState) => string);
-    readonly refreshReason?: string | ((state: CheckoutState) => string);
-    readonly onState?: (state: CheckoutState) => void;
-    readonly onPaid?: () => void;
+    readonly logger?: BrowserLoggerOption;
+    readonly refreshStatus?: CheckoutStatusRefresh;
+    /**
+     * Base path the shipped router is mounted at; the hook polls
+     * `${prefix}/payments/check`. Omitted, the hook renders the snapshot without
+     * polling — there is nowhere to poll.
+     */
+    readonly prefix?: string;
     readonly polling?: boolean;
     readonly pollIntervalMs?: number;
 }
-export interface UseCheckoutResult extends CheckoutViewModel {
+interface UseCheckoutResult extends CheckoutViewModel {
+    readonly checkout: CheckoutSnapshot;
     readonly copied: boolean;
-    readonly expiresInSeconds?: number;
     readonly countdownLabel?: string;
     readonly countdownPrefix?: string;
     readonly statusTitle: string;
@@ -44,50 +59,49 @@ export interface UseCheckoutResult extends CheckoutViewModel {
     readonly waiting: boolean;
     reloadState(): Promise<void>;
     retry(): Promise<void>;
-    refreshExpiredInvoice(): Promise<void>;
     cancel(): void;
     copyInvoice(): Promise<void>;
     openWallet(): string;
 }
-export interface CheckoutProviderProps extends UseCheckoutOptions {
+interface CheckoutProviderProps extends UseCheckoutOptions {
     readonly children?: React.ReactNode | ((checkout: UseCheckoutResult) => React.ReactNode);
 }
-export interface QRCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+interface QRCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     readonly invoice: string;
-    readonly encoder?: OpenReceiveQrEncoder;
+    readonly encoder?: QrEncoder;
     readonly width?: number;
     readonly onError?: (error: unknown) => void;
 }
-export type ButtonComponent = React.ElementType<React.ButtonHTMLAttributes<HTMLButtonElement>>;
-export interface CopyInvoiceButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type ButtonComponent = React.ElementType<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+interface CopyInvoiceButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     readonly invoice: string;
     readonly copyInvoice?: () => Promise<void>;
     readonly clipboard?: Pick<Clipboard, "writeText">;
-    readonly logger?: OpenReceiveBrowserLogger;
+    readonly logger?: BrowserLoggerOption;
     readonly onCopied?: () => void;
     readonly onError?: (error: unknown) => void;
     readonly copiedLabel?: React.ReactNode;
     readonly ButtonComponent?: ButtonComponent;
 }
-export interface OpenWalletButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface OpenWalletButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     readonly invoice: string;
     readonly openWallet?: () => string;
     readonly open?: (uri: string) => void;
-    readonly logger?: OpenReceiveBrowserLogger;
+    readonly logger?: BrowserLoggerOption;
     readonly onOpened?: (uri: string) => void;
     readonly onError?: (error: unknown) => void;
     readonly ButtonComponent?: ButtonComponent;
 }
-export interface PaymentStateProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface PaymentStateProps extends React.HTMLAttributes<HTMLSpanElement> {
     readonly state?: string;
 }
-export interface InvoiceSummaryClassNames {
+interface InvoiceSummaryClassNames {
     readonly amount?: string;
     readonly fiat?: string;
     readonly paymentHash?: string;
     readonly paymentState?: string;
 }
-export interface InvoiceSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
+interface InvoiceSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly amountLabel?: string;
     readonly fiatLabel?: string;
     readonly paymentHashLabel?: string;
@@ -95,21 +109,25 @@ export interface InvoiceSummaryProps extends React.HTMLAttributes<HTMLDivElement
     readonly PaymentStateComponent?: React.ComponentType<PaymentStateProps>;
     readonly classNames?: InvoiceSummaryClassNames;
 }
-export interface CheckoutClassNames extends InvoiceSummaryClassNames {
+interface CheckoutClassNames extends InvoiceSummaryClassNames {
     readonly root?: string;
     readonly qr?: string;
+    readonly satsDetail?: string;
+    readonly lightningPane?: string;
+    readonly invoiceTitle?: string;
+    /** Applied to the settled payment-data disclosure. */
     readonly details?: string;
     readonly waiting?: string;
     readonly countdown?: string;
     readonly summary?: string;
-    readonly invoice?: string;
     readonly actions?: string;
     readonly copyButton?: string;
+    /** Applied to the `components.OpenWalletButton` slot, which renders only when supplied. */
     readonly openWalletButton?: string;
     readonly wizard?: string;
     readonly themeToggle?: string;
 }
-export interface CheckoutComponents {
+interface CheckoutComponents {
     readonly Button?: ButtonComponent;
     readonly QRCode?: React.ComponentType<QRCodeProps>;
     readonly InvoiceSummary?: React.ComponentType<InvoiceSummaryProps>;
@@ -117,58 +135,54 @@ export interface CheckoutComponents {
     readonly OpenWalletButton?: React.ComponentType<OpenWalletButtonProps>;
     readonly PaymentState?: React.ComponentType<PaymentStateProps>;
 }
-export type CheckoutChildren = React.ReactNode | ((model: UseCheckoutResult) => React.ReactNode);
-export interface CheckoutProps extends CheckoutData, Omit<React.HTMLAttributes<HTMLElement>, "children"> {
-    readonly qrEncoder?: OpenReceiveQrEncoder;
-    readonly logger?: OpenReceiveBrowserLogger;
-    readonly onError?: (error: unknown) => void;
-    readonly lookupInvoice?: (state: CheckoutState) => Promise<Partial<CheckoutSnapshot>>;
-    readonly lookupUrl?: string | false;
-    readonly refreshInvoice?: (state: CheckoutState) => Promise<CheckoutSnapshot | OpenReceiveRefreshInvoiceResult>;
-    readonly refreshUrl?: string | ((state: CheckoutState) => string);
-    readonly refreshHeaders?: Readonly<Record<string, string>>;
-    readonly refreshIdempotencyKey?: string | ((state: CheckoutState) => string);
-    readonly refreshReason?: string | ((state: CheckoutState) => string);
-    readonly onState?: (state: CheckoutState) => void;
-    readonly onPaid?: () => void;
-    readonly onStartOver?: () => void;
+type CheckoutChildren = React.ReactNode | ((model: UseCheckoutResult) => React.ReactNode);
+interface CheckoutProps extends CheckoutComponentProps, CheckoutEventHandlers, Omit<React.HTMLAttributes<HTMLElement>, "children" | "prefix" | "onCopy" | "onError"> {
+    /**
+     * Create mode (`reference`, no `checkout`): the component creates the checkout against
+     * `${prefix}/checkouts`, then polls `${prefix}/payments/check`. Later requests carry
+     * `reference` and the displayed `payment_hash`; the host remains responsible for
+     * authorization, order display, and routing. This fetch makes those create calls.
+     */
+    readonly createFetch?: typeof globalThis.fetch;
+    /** `false` turns status polling off entirely. */
     readonly polling?: boolean;
-    readonly paymentWizard?: boolean;
-    readonly themeSwitcher?: boolean;
-    readonly defaultTheme?: OpenReceiveThemePreference;
-    readonly themeStorageKey?: string;
-    readonly countryStorageKey?: string;
+    readonly pollIntervalMs?: number;
+    readonly qrEncoder?: QrEncoder;
+    readonly logger?: BrowserLoggerOption;
+    readonly refreshStatus?: CheckoutStatusRefresh;
     readonly components?: CheckoutComponents;
     readonly classNames?: CheckoutClassNames;
     readonly children?: CheckoutChildren;
 }
-export interface UseThemeOptions {
-    readonly defaultTheme?: OpenReceiveThemePreference;
+interface UseThemeOptions {
+    readonly defaultTheme?: ThemePreference;
     readonly storageKey?: string;
     readonly storage?: Storage;
 }
-export interface UseThemeResult {
-    readonly theme: OpenReceiveThemePreference;
-    readonly resolvedTheme: OpenReceiveResolvedTheme;
-    readonly model: OpenReceiveThemeModel;
-    readonly nextTheme: OpenReceiveThemePreference;
+interface UseThemeResult {
+    readonly theme: ThemePreference;
+    readonly resolvedTheme: ResolvedTheme;
+    readonly model: ThemeModel;
+    readonly nextTheme: ThemePreference;
     readonly toggleLabel: string;
-    readonly attributes: OpenReceiveThemeModel["attributes"];
-    readonly checkoutElementAttributes: OpenReceiveThemeModel["checkoutElementAttributes"];
-    setTheme(theme: OpenReceiveThemePreference): void;
+    readonly attributes: ThemeModel["attributes"];
+    readonly checkoutElementAttributes: ThemeModel["checkoutElementAttributes"];
+    /** True when this result comes from an ancestor ThemeScope (inherit, don't re-stamp). */
+    readonly fromScope: boolean;
+    setTheme(theme: ThemePreference): void;
     toggleTheme(): void;
 }
-export interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    readonly theme?: OpenReceiveThemePreference;
-    readonly resolvedTheme?: OpenReceiveResolvedTheme;
-    readonly onThemeChange?: (theme: OpenReceiveThemePreference) => void;
+interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly theme?: ThemePreference;
+    readonly resolvedTheme?: ResolvedTheme;
+    readonly onThemeChange?: (theme: ThemePreference) => void;
     readonly ButtonComponent?: ButtonComponent;
 }
-export type ThemeScopeChildren = React.ReactNode | ((theme: UseThemeResult) => React.ReactNode);
-export interface ThemeScopeProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+type ThemeScopeChildren = React.ReactNode | ((theme: UseThemeResult) => React.ReactNode);
+interface ThemeScopeProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
     readonly as?: keyof React.JSX.IntrinsicElements;
-    readonly defaultTheme?: OpenReceiveThemePreference;
-    readonly themeStorageKey?: string;
+    readonly defaultTheme?: ThemePreference;
+    readonly storageKey?: string;
     readonly storage?: Storage;
     readonly themeToggle?: boolean;
     readonly topbarClassName?: string;
@@ -176,33 +190,145 @@ export interface ThemeScopeProps extends Omit<React.HTMLAttributes<HTMLElement>,
     readonly ButtonComponent?: ButtonComponent;
     readonly children?: ThemeScopeChildren;
 }
-export interface PaymentWizardProps {
-    readonly invoice: string;
+interface PaymentWizardProps {
+    /**
+     * The active Lightning bolt11 invoice. Optional: omit (or pass `undefined`) in
+     * create-mode deferred flows where the Lightning invoice has not been minted yet.
+     * The wizard will disable invoice-copy actions until a non-empty invoice is provided.
+     */
+    readonly invoice?: string;
+    readonly checkout?: CheckoutSnapshot;
     readonly className?: string;
-    readonly logger?: OpenReceiveBrowserLogger;
-    readonly logContext?: OpenReceiveBrowserLogContext;
-    readonly countryStorageKey?: string;
+    readonly logger?: BrowserLoggerOption;
+    readonly logContext?: BrowserLogContext;
+    /**
+     * Base path the shipped router is mounted at; the swap quote, start and refund
+     * routes are derived from it. Omitted, the wizard has no swap backend and
+     * shows the method grid only — which is what a standalone wizard wants.
+     */
+    readonly prefix?: string;
+    readonly fetch?: typeof globalThis.fetch;
+    readonly clipboard?: Pick<Clipboard, "writeText">;
+    readonly qrEncoder?: QrEncoder;
+    /** Base URL of an external bolt11 decoder; omitted, no "Decode" link is rendered. */
+    readonly decodeLinkUrl?: string;
     readonly onError?: (error: unknown) => void;
+    /**
+     * Called when the payer enters or leaves the focused swap flow (a pay-in coin is
+     * selected). The default `Checkout` uses this to hide its Lightning payment section
+     * so the swap deposit panel fully replaces it.
+     */
+    readonly onSwapFocusChange?: (focused: boolean) => void;
+    /**
+     * Called when the wizard needs a Lightning invoice to be ready — e.g. when the payer
+     * selects Bitcoin from the method grid or navigates back from a swap to the Lightning
+     * pane. The host should mint (or reuse) a bolt11 and update the checkout snapshot.
+     * Used by the create-mode deferred flow; safe to omit in snapshot mode.
+     */
+    readonly onRequestLightning?: () => void | Promise<void>;
+    /**
+     * Called after a swap deposit attempt is created or reused so create-mode can poll
+     * the shadow Lightning payment_hash for settlement.
+     */
+    readonly onSwapStarted?: (invoice: CheckoutInvoiceSnapshot) => void;
+    /** Called with the provider id after the payer copies the invoice from a provider tutorial. */
+    readonly onProviderCopy?: (providerId: string) => void;
+    /**
+     * Called for the same tutorial copy, without the provider id — the plain
+     * "the invoice was copied" signal. Both fire, matching the element, which
+     * dispatches `openreceive-provider-copy` and `openreceive-copy` together.
+     */
+    readonly onCopy?: () => void;
 }
-export declare function createCheckoutViewModel(data: CheckoutData): CheckoutViewModel;
-export declare function useCheckout(options: UseCheckoutOptions): UseCheckoutResult;
-export declare function useCheckoutContext(): UseCheckoutResult;
-export declare function CheckoutProvider(props: CheckoutProviderProps): React.ReactElement;
-export declare function QRCode(props: QRCodeProps): React.ReactElement;
-export declare function CopyInvoiceButton(props: CopyInvoiceButtonProps): React.ReactElement;
-export declare function OpenWalletButton(props: OpenWalletButtonProps): React.ReactElement;
-export declare function PaymentState(props: PaymentStateProps): React.ReactElement;
-export declare function useTheme(options?: UseThemeOptions): UseThemeResult;
-export declare function ThemeToggle(props: ThemeToggleProps): React.ReactElement;
-export declare function ThemeScope(props: ThemeScopeProps): React.ReactElement;
-export declare function WaitingState(props: {
+interface SatsDetailProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly amountLabel?: string;
+    readonly fiatLabel?: string;
+    readonly fiatCurrency?: string;
+}
+
+/**
+ * Self-contained checkout. Two modes:
+ *
+ * - Snapshot mode (`checkout` prop): renders that snapshot directly. `prefix` (default
+ *   `/openreceive`) is the mount every route is derived from, so status polling works
+ *   with just a prefix — or with nothing at all.
+ * - Create mode (`reference` prop, no `checkout`): the component owns the whole lifecycle — on
+ *   mount it prepares amount + payment methods against `${prefix}/checkouts/prepare` (no
+ *   Lightning mint). Bitcoin selection mints via `${prefix}/checkouts`. Poll/swap send
+ *   `reference` and are authorized by the host.
+ * - Opt into `/checkout/:reference` History API sync with `syncUrl` (skipped when
+ *   `routeReference` is set — e.g. Next.js already owns the route). Order resume data
+ *   remains owned by the host application.
+ */
+declare function Checkout(props: CheckoutProps): React.ReactElement;
+
+declare function QRCode(props: QRCodeProps): React.ReactElement;
+declare function CopyInvoiceButton(props: CopyInvoiceButtonProps): React.ReactElement;
+declare function OpenWalletButton(props: OpenWalletButtonProps): React.ReactElement;
+declare function PaymentState(props: PaymentStateProps): React.ReactElement;
+/** Collapsible "everything the client knows about this payment" panel, shown once settled. */
+declare function PaymentData(props: {
+    readonly source: PaymentDataSource;
+    readonly className?: string;
+}): React.ReactElement | null;
+declare function WaitingState(props: {
     readonly waiting?: boolean;
     readonly phase?: CheckoutPhase;
     readonly status?: CheckoutStatusModel;
     readonly statusTitle?: string;
     readonly statusDetail?: string;
+    readonly countdownLabel?: string;
+    readonly settled?: boolean;
     readonly className?: string;
 }): React.ReactElement;
-export declare function PaymentWizard(props: PaymentWizardProps): React.ReactElement;
-export declare function InvoiceSummary(props: InvoiceSummaryProps): React.ReactElement;
-export declare function Checkout(props: CheckoutProps): React.ReactElement;
+declare function InvoiceSummary(props: InvoiceSummaryProps): React.ReactElement;
+declare function SatsDetail(props: SatsDetailProps): React.ReactElement | null;
+
+declare function renderSwapDepositPanel(options: {
+    readonly invoice: CheckoutInvoiceSnapshot;
+    readonly checkout?: CheckoutSnapshot;
+    readonly now?: number;
+    readonly encoder?: QrEncoder;
+    readonly clipboard?: Pick<Clipboard, "writeText">;
+    readonly logger?: BrowserLogger | false;
+    readonly onError?: (error: unknown) => void;
+    readonly onRefund: (attemptId: string, refundAddress: string, confirm: boolean) => Promise<void>;
+    readonly onBackToLightning: () => void;
+}): React.ReactElement | null;
+
+declare function useTheme(options?: UseThemeOptions): UseThemeResult;
+declare function ThemeToggle(props: ThemeToggleProps): React.ReactElement;
+declare function ThemeScope(props: ThemeScopeProps): React.ReactElement;
+
+interface TransactionDetailsProps {
+    readonly state?: TransactionDetailsSource;
+    readonly open?: boolean;
+    readonly className?: string;
+    readonly clipboard?: Pick<Clipboard, "writeText">;
+    readonly onError?: (error: unknown) => void;
+}
+/**
+ * Collapsible post-settlement transaction details panel with copy (and optional
+ * explorer) buttons. Builds rows from {@link CheckoutState} / detail input, or
+ * accepts pre-built rows from `createTransactionDetails*`.
+ */
+declare function TransactionDetails(props: TransactionDetailsProps): React.ReactElement | null;
+
+declare function useCheckout(options: UseCheckoutOptions): UseCheckoutResult;
+declare function useCheckoutContext(): UseCheckoutResult;
+declare function CheckoutProvider(props: CheckoutProviderProps): React.ReactElement;
+
+/**
+ * Snapshot -> everything React needs to render it, in one hop.
+ *
+ * This used to be three: toCheckoutDisplayData -> createCheckoutDisplayModel ->
+ * toCheckoutViewModel, a second copy of the flattening rule that
+ * `createCheckoutState` already owned. Logging is off because this is a pure
+ * projection a host may call as often as it renders; `useCheckout` builds its
+ * state through the controller, which does the logging exactly once.
+ */
+declare function createCheckoutViewModel(data: CheckoutData): CheckoutViewModel;
+
+declare function PaymentWizard(props: PaymentWizardProps): React.ReactElement;
+
+export { type ButtonComponent, Checkout, type CheckoutChildren, type CheckoutClassNames, type CheckoutComponents, type CheckoutData, type CheckoutProps, CheckoutProvider, type CheckoutProviderProps, type CheckoutViewModel, CopyInvoiceButton, type CopyInvoiceButtonProps, InvoiceSummary, type InvoiceSummaryClassNames, type InvoiceSummaryProps, OpenWalletButton, type OpenWalletButtonProps, PaymentData, PaymentState, type PaymentStateProps, PaymentWizard, type PaymentWizardProps, QRCode, type QRCodeProps, SatsDetail, type SatsDetailProps, ThemeScope, type ThemeScopeChildren, type ThemeScopeProps, ThemeToggle, type ThemeToggleProps, TransactionDetails, type TransactionDetailsProps, type UseCheckoutOptions, type UseCheckoutResult, type UseThemeOptions, type UseThemeResult, WaitingState, createCheckoutViewModel, renderSwapDepositPanel, useCheckout, useCheckoutContext, useTheme };