@openreceive/react 0.2.3 → 0.3.0

package/dist/index.js

@@ -56,7 +56,6 @@ import {
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
   copyInvoice as copyInvoiceHelper,
   createCheckoutStatusModel,
-  createPaymentDataEntries,
   createQrSvg,
   formatAmountCaption,
   checkoutLabels,
@@ -320,31 +319,6 @@ function SettledCheckIcon() {
     })
   );
 }
-function PaymentData(props) {
-  const entries = createPaymentDataEntries(props.source);
-  if (entries.length === 0) return null;
-  return React3.createElement(
-    "details",
-    { className: joinClassNames(orClasses.paymentData, props.className) },
-    React3.createElement(
-      "summary",
-      { className: orClasses.paymentDataTitle },
-      checkoutLabels.viewPaymentData
-    ),
-    React3.createElement(
-      "div",
-      { className: orClasses.paymentDataBody },
-      entries.map(
-        (entry) => React3.createElement(
-          "div",
-          { key: entry.label, className: orClasses.paymentDataRow },
-          React3.createElement("span", { className: orClasses.paymentDataKey }, entry.label),
-          React3.createElement("p", { className: orClasses.paymentDataValue }, entry.value)
-        )
-      )
-    )
-  );
-}
 function WaitingState(props) {
   const status = props.status ?? createCheckoutStatusModel({
     phase: props.phase,
@@ -447,17 +421,106 @@ function SatsDetail(props) {
   );
 }
 
-// src/theme.ts
+// src/transaction-details.ts
+import {
+  checkoutLabels as checkoutLabels2,
+  orClasses as orClasses2,
+  resolveTransactionDetailRows
+} from "@openreceive/browser/headless";
 import * as React4 from "react";
+function TransactionDetails(props) {
+  const rows = resolveTransactionDetailRows(props.state);
+  if (rows.length === 0) return null;
+  return React4.createElement(
+    "details",
+    {
+      className: joinClassNames(orClasses2.transactionDetails, props.className),
+      open: props.open === true ? true : void 0
+    },
+    React4.createElement(
+      "summary",
+      { className: orClasses2.transactionDetailsTitle },
+      checkoutLabels2.transactionDetails
+    ),
+    React4.createElement(
+      "div",
+      { className: orClasses2.transactionDetailsContent },
+      React4.createElement(
+        "dl",
+        { className: orClasses2.swapDetails },
+        rows.flatMap(
+          (row) => renderTransactionDetailRow(row, {
+            clipboard: props.clipboard,
+            onError: props.onError
+          })
+        )
+      )
+    )
+  );
+}
+function renderTransactionDetailRow(row, options) {
+  const copyValue = row.copyValue ?? row.value;
+  return [
+    React4.createElement(
+      "dt",
+      { key: `${row.label}-label`, className: orClasses2.swapDetailsDt },
+      row.label
+    ),
+    React4.createElement(
+      "dd",
+      { key: `${row.label}-value`, className: orClasses2.swapDetailsDd },
+      React4.createElement("code", { className: orClasses2.swapDetailsCode }, row.value),
+      React4.createElement(
+        "div",
+        { className: orClasses2.swapDetailsActions },
+        React4.createElement(TransactionDetailCopyButton, {
+          value: copyValue,
+          clipboard: options.clipboard,
+          onError: options.onError
+        }),
+        row.href === void 0 ? null : React4.createElement(
+          "a",
+          {
+            className: orClasses2.swapDetailsLink,
+            href: row.href,
+            rel: "noreferrer",
+            target: "_blank"
+          },
+          row.hrefLabel ?? checkoutLabels2.viewOnExplorer
+        )
+      )
+    )
+  ];
+}
+function TransactionDetailCopyButton(props) {
+  const [copied, setCopied] = useTransientValue(false);
+  const label = copied ? checkoutLabels2.copied : "Copy";
+  return React4.createElement(
+    "button",
+    {
+      className: orClasses2.detailCopy,
+      type: "button",
+      "aria-label": label,
+      title: label,
+      onClick: () => {
+        void copyText(props.value, props.clipboard).then(() => setCopied(true)).catch((error) => props.onError?.(error));
+      }
+    },
+    React4.createElement(ClipboardIcon)
+  );
+}
+
+// src/theme.ts
+import * as React5 from "react";
 import {
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES as OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2,
   OPENRECEIVE_THEME_STORAGE_KEY,
   createThemeModel,
-  orClasses as orClasses2,
+  orClasses as orClasses3,
   readThemePreference,
   writeThemePreference
 } from "@openreceive/browser/headless";
-var ThemeContext = React4.createContext(null);
+var ThemeContext = React5.createContext(null);
 var storedThemeListeners = /* @__PURE__ */ new Set();
 var lastSetTheme = /* @__PURE__ */ new Map();
 function notifyStoredThemeChange() {
@@ -486,9 +549,9 @@ function useLocalTheme(options = {}) {
   const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
   const storage = options.storage;
   const defaultTheme = options.defaultTheme;
-  const theme = React4.useSyncExternalStore(
+  const theme = React5.useSyncExternalStore(
     subscribeStoredTheme,
-    React4.useCallback(
+    React5.useCallback(
       () => readThemePreference({
         storage,
         storageKey,
@@ -496,7 +559,7 @@ function useLocalTheme(options = {}) {
       }),
       [storage, storageKey, defaultTheme]
     ),
-    React4.useCallback(
+    React5.useCallback(
       () => (
         // A host-supplied storage is readable on the server (that is how SSR theming is
         // wired); the implicit browser localStorage is not, so fall back to the default.
@@ -505,13 +568,13 @@ function useLocalTheme(options = {}) {
       [storage, storageKey, defaultTheme]
     )
   );
-  const systemDark = React4.useSyncExternalStore(
+  const systemDark = React5.useSyncExternalStore(
     subscribeSystemDark,
     getSystemDark,
     getServerSystemDark
   );
   const themeModel = createThemeModel(theme, { systemDark });
-  const setTheme = React4.useCallback(
+  const setTheme = React5.useCallback(
     (nextTheme) => {
       lastSetTheme.set(storageKey, nextTheme);
       writeThemePreference(nextTheme, {
@@ -522,7 +585,7 @@ function useLocalTheme(options = {}) {
     },
     [storage, storageKey]
   );
-  const toggleTheme = React4.useCallback(() => {
+  const toggleTheme = React5.useCallback(() => {
     setTheme(themeModel.nextTheme);
   }, [setTheme, themeModel.nextTheme]);
   return {
@@ -539,7 +602,7 @@ function useLocalTheme(options = {}) {
   };
 }
 function useTheme(options = {}) {
-  const scoped = React4.useContext(ThemeContext);
+  const scoped = React5.useContext(ThemeContext);
   const local = useLocalTheme(options);
   const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
   if (scoped !== null && options.storage === void 0 && (options.storageKey === void 0 || options.storageKey === storageKey) && options.defaultTheme === void 0) {
@@ -566,7 +629,7 @@ function ThemeToggle(props) {
   const componentProps = {
     ...buttonProps,
     "aria-label": themeModel.toggleLabel,
-    className: joinClassNames(orClasses2.themeToggle, buttonProps.className),
+    className: joinClassNames(orClasses3.themeToggle, buttonProps.className),
     title: themeModel.toggleLabel,
     type,
     [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2.themeToggle]: "",
@@ -577,7 +640,7 @@ function ThemeToggle(props) {
       if (onThemeChange === void 0) fallback.setTheme(themeModel.nextTheme);
     }
   };
-  return React4.createElement(ButtonComponent, componentProps, children ?? themeModel.toggleLabel);
+  return React5.createElement(ButtonComponent, componentProps, children ?? themeModel.toggleLabel);
 }
 function ThemeScope(props) {
   const {
@@ -598,22 +661,22 @@ function ThemeScope(props) {
     storage
   });
   const scopedChildren = typeof children === "function" ? children(theme) : children;
-  return React4.createElement(
+  return React5.createElement(
     ThemeContext.Provider,
     { value: theme },
     // Variadic children, not an array: an array child needs a key on every entry.
-    React4.createElement(
+    React5.createElement(
       Element,
       {
         ...elementProps,
         ...theme.attributes
       },
-      themeToggle ? React4.createElement(
+      themeToggle ? React5.createElement(
         "div",
         {
           className: topbarClassName
         },
-        React4.createElement(ThemeToggle, {
+        React5.createElement(ThemeToggle, {
           className: themeToggleClassName,
           theme: theme.theme,
           resolvedTheme: theme.resolvedTheme,
@@ -627,7 +690,7 @@ function ThemeScope(props) {
 }
 
 // src/use-checkout.ts
-import * as React5 from "react";
+import * as React6 from "react";
 import {
   copyInvoice as copyInvoiceHelper2,
   createCheckoutController,
@@ -639,46 +702,46 @@ import {
 function useCheckout(options) {
   const checkout = options.checkout;
   const [copied, showCopied] = useTransientValue(false);
-  const [latestSnapshot, setLatestSnapshot] = React5.useState(checkout);
+  const [latestSnapshot, setLatestSnapshot] = React6.useState(checkout);
   const incomingIdentity = `${checkout.checkout_id} ${checkout.reference}`;
-  const checkoutRef = React5.useRef(checkout);
+  const checkoutRef = React6.useRef(checkout);
   checkoutRef.current = checkout;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setLatestSnapshot(checkoutRef.current);
   }, [incomingIdentity]);
   const snapshot = latestSnapshot;
-  const [state, setState] = React5.useState(
+  const [state, setState] = React6.useState(
     () => createCheckoutState(snapshot, {
       logger: options.logger
     })
   );
-  const controllerRef = React5.useRef(null);
-  const onStateRef = React5.useRef(options.onState);
+  const controllerRef = React6.useRef(null);
+  const onStateRef = React6.useRef(options.onState);
   onStateRef.current = options.onState;
-  const onSettledRef = React5.useRef(options.onSettled);
+  const onSettledRef = React6.useRef(options.onSettled);
   onSettledRef.current = options.onSettled;
-  const loggerRef = React5.useRef(options.logger);
+  const loggerRef = React6.useRef(options.logger);
   loggerRef.current = options.logger;
-  const onErrorRef = React5.useRef(options.onError);
+  const onErrorRef = React6.useRef(options.onError);
   onErrorRef.current = options.onError;
-  const onCopyRef = React5.useRef(options.onCopy);
+  const onCopyRef = React6.useRef(options.onCopy);
   onCopyRef.current = options.onCopy;
-  const onOpenWalletRef = React5.useRef(options.onOpenWallet);
+  const onOpenWalletRef = React6.useRef(options.onOpenWallet);
   onOpenWalletRef.current = options.onOpenWallet;
-  const settledAnnouncementRef = React5.useRef({
+  const settledAnnouncementRef = React6.useRef({
     reference: snapshot.reference,
     fired: false
   });
-  const logContext = React5.useMemo(() => getCheckoutLogContext(state), [state]);
+  const logContext = React6.useMemo(() => getCheckoutLogContext(state), [state]);
   const refreshStatus = options.polling === false ? void 0 : options.refreshStatus;
-  const refreshStatusRef = React5.useRef(refreshStatus);
+  const refreshStatusRef = React6.useRef(refreshStatus);
   refreshStatusRef.current = refreshStatus;
   const polls = refreshStatus !== void 0;
   const prefix = options.polling === false ? void 0 : options.prefix;
-  const snapshotRef = React5.useRef(snapshot);
+  const snapshotRef = React6.useRef(snapshot);
   snapshotRef.current = snapshot;
   const checkoutIdentity = `${snapshot.checkout_id} ${snapshot.reference}`;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const controller = createCheckoutController({
       snapshot: snapshotRef.current,
       ...polls ? {
@@ -715,7 +778,7 @@ function useCheckout(options) {
   }, [checkoutIdentity, polls, prefix, options.pollIntervalMs]);
   const publicStatus = deriveStatus(state);
   const richStatus = createCheckoutStatusModel2(state);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const announced = settledAnnouncementRef.current;
     if (announced.reference !== snapshot.reference) {
       settledAnnouncementRef.current = {
@@ -724,7 +787,7 @@ function useCheckout(options) {
       };
     }
   }, [snapshot.reference]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const announced = settledAnnouncementRef.current;
     if (publicStatus !== "settled" || announced.fired) return;
     settledAnnouncementRef.current = {
@@ -733,7 +796,7 @@ function useCheckout(options) {
     };
     onSettledRef.current?.();
   }, [publicStatus, snapshot.reference]);
-  const copyInvoice = React5.useCallback(async () => {
+  const copyInvoice = React6.useCallback(async () => {
     try {
       const controller = controllerRef.current;
       if (controller === null) {
@@ -753,7 +816,7 @@ function useCheckout(options) {
       throw error;
     }
   }, [logContext, state.invoice, options.clipboard, options.logger, showCopied]);
-  const openWallet = React5.useCallback(() => {
+  const openWallet = React6.useCallback(() => {
     try {
       const controller = controllerRef.current;
       const uri = controller === null ? openWalletHelper2({
@@ -769,7 +832,7 @@ function useCheckout(options) {
       throw error;
     }
   }, [logContext, state.invoice, options.open, options.logger]);
-  const reloadState = React5.useCallback(async () => {
+  const reloadState = React6.useCallback(async () => {
     try {
       const next = await controllerRef.current?.reloadState();
       if (next !== void 0) setState(next);
@@ -779,10 +842,42 @@ function useCheckout(options) {
     }
   }, []);
   const retry = reloadState;
-  const cancel = React5.useCallback(() => {
+  const cancel = React6.useCallback(() => {
     const next = controllerRef.current?.cancel();
     if (next !== void 0) setState(next);
   }, []);
+  const swapRefundController = React6.useCallback(() => {
+    const controller = controllerRef.current;
+    if (controller === null) {
+      throw new Error("Swap refunds need a started checkout controller.");
+    }
+    return controller;
+  }, []);
+  const stageSwapRefund = React6.useCallback(
+    async (refund) => {
+      try {
+        return await swapRefundController().stageSwapRefund(refund);
+      } catch (error) {
+        onErrorRef.current?.(error);
+        throw error;
+      }
+    },
+    [swapRefundController]
+  );
+  const confirmSwapRefund = React6.useCallback(
+    async (refund) => {
+      try {
+        return await swapRefundController().confirmSwapRefund(refund);
+      } catch (error) {
+        onErrorRef.current?.(error);
+        throw error;
+      }
+    },
+    [swapRefundController]
+  );
+  const clearSwapRefundStaging = React6.useCallback(() => {
+    controllerRef.current?.clearSwapRefundStaging();
+  }, []);
   return {
     // The state IS the view model now: one derivation, one set of display
     // fields. `status` stays on top of it because the component's terminal
@@ -801,12 +896,15 @@ function useCheckout(options) {
     retry,
     cancel,
     copyInvoice,
-    openWallet
+    openWallet,
+    stageSwapRefund,
+    confirmSwapRefund,
+    clearSwapRefundStaging
   };
 }
-var CheckoutContext = React5.createContext(null);
+var CheckoutContext = React6.createContext(null);
 function useCheckoutContext() {
-  const checkout = React5.useContext(CheckoutContext);
+  const checkout = React6.useContext(CheckoutContext);
   if (checkout === null) {
     throw new Error("useCheckoutContext must be used within CheckoutProvider.");
   }
@@ -816,7 +914,7 @@ function CheckoutProvider(props) {
   const { children, ...options } = props;
   const checkout = useCheckout(options);
   const content = typeof children === "function" ? children(checkout) : children;
-  return React5.createElement(CheckoutContext.Provider, { value: checkout }, content);
+  return React6.createElement(CheckoutContext.Provider, { value: checkout }, content);
 }
 
 // src/wizard.ts
@@ -825,12 +923,12 @@ import {
   buildMethodGridEntries,
   checkoutLabels as checkoutLabels5,
   copyInvoice as copyInvoiceHelper3,
+  createAssetBaseUrlResolver,
+  createMethodGridDisplay,
   createPaymentWizardController,
   createPaymentWizardModel,
   createWizardRouteAssetDisplays,
   createWizardRouteDisplays,
-  findSwapGridGroup,
-  formatChooseNetworkHeading,
   formatNetworkSummary,
   getNetworkIcon,
   getPaymentMethodIcon,
@@ -841,32 +939,28 @@ import {
   networkMobileRevealClasses,
   networkSummaryIconClasses,
   orClasses as orClasses6,
-  overlaySwapRefundStaging,
-  paymentAccentId,
   paymentMethods,
+  resolveWizardSelection,
   requestSwapRefund,
+  selectCurrentSwapInvoice,
   swapAssetMatchesRoute,
-  swapGroupLimitOption,
-  swapOptionLimitMessage as swapOptionLimitMessage2,
-  swapPickerKey,
-  updateSelectedSwapNetworks,
-  wizardNetworkGroupIds
+  swapOptionLimitMessage as swapOptionLimitMessage2
 } from "@openreceive/browser/headless";
 import * as React9 from "react";
 
 // src/provider-tutorial.ts
 import {
   createLightningInvoiceDecodeUrl,
-  checkoutLabels as checkoutLabels2,
-  orClasses as orClasses3
+  checkoutLabels as checkoutLabels3,
+  orClasses as orClasses4
 } from "@openreceive/browser/headless";
-import * as React6 from "react";
+import * as React7 from "react";
 function renderProviderOpenAction(provider, onOpenTutorial) {
   if (provider.tutorials.length === 0) {
-    return React6.createElement(
+    return React7.createElement(
       "a",
       {
-        className: orClasses3.providerOpen,
+        className: orClasses4.providerOpen,
         href: provider.url,
         rel: "noreferrer",
         target: "_blank"
@@ -874,10 +968,10 @@ function renderProviderOpenAction(provider, onOpenTutorial) {
       provider.openLabel
     );
   }
-  return React6.createElement(
+  return React7.createElement(
     "button",
     {
-      className: orClasses3.providerOpen,
+      className: orClasses4.providerOpen,
       onClick: onOpenTutorial,
       type: "button"
     },
@@ -886,8 +980,8 @@ function renderProviderOpenAction(provider, onOpenTutorial) {
 }
 function ProviderTutorialModal(options) {
   const { provider } = options;
-  const dialogRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const dialogRef = React7.useRef(null);
+  React7.useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog === null) return;
     const opener = dialog.ownerDocument.activeElement instanceof HTMLElement ? dialog.ownerDocument.activeElement : null;
@@ -925,13 +1019,13 @@ function ProviderTutorialModal(options) {
   const nextIndex = Math.min(provider.tutorials.length, stepIndex + 1);
   const isFinalStep = stepIndex === provider.tutorials.length;
   const decodeHref = createLightningInvoiceDecodeUrl(options.invoice, options.decodeLinkUrl);
-  return React6.createElement(
+  return React7.createElement(
     "div",
     {
       ref: dialogRef,
-      "aria-label": `${checkoutLabels2.tutorialTitlePrefix} ${provider.name}`,
+      "aria-label": `${checkoutLabels3.tutorialTitlePrefix} ${provider.name}`,
       "aria-modal": true,
-      className: orClasses3.tutorialModal,
+      className: orClasses4.tutorialModal,
       onClick: (event) => {
         if (event.target === event.currentTarget) options.onClose();
       },
@@ -942,143 +1036,143 @@ function ProviderTutorialModal(options) {
       role: "dialog",
       tabIndex: -1
     },
-    React6.createElement(
+    React7.createElement(
       "div",
       {
-        className: orClasses3.tutorialBox
+        className: orClasses4.tutorialBox
       },
-      React6.createElement(
+      React7.createElement(
         "div",
         {
-          className: orClasses3.tutorialHeader
+          className: orClasses4.tutorialHeader
         },
-        React6.createElement(
+        React7.createElement(
           "div",
           {
-            className: orClasses3.tutorialTitle
+            className: orClasses4.tutorialTitle
           },
-          React6.createElement("img", {
+          React7.createElement("img", {
             alt: "",
-            className: orClasses3.tutorialHeaderLogo,
+            className: orClasses4.tutorialHeaderLogo,
             src: provider.icon
           }),
-          React6.createElement("h3", null, `${checkoutLabels2.tutorialTitlePrefix} ${provider.name}`)
+          React7.createElement("h3", null, `${checkoutLabels3.tutorialTitlePrefix} ${provider.name}`)
         ),
-        React6.createElement(
+        React7.createElement(
           "button",
           {
-            "aria-label": checkoutLabels2.tutorialClose,
-            className: orClasses3.tutorialClose,
+            "aria-label": checkoutLabels3.tutorialClose,
+            className: orClasses4.tutorialClose,
             onClick: options.onClose,
             type: "button"
           },
           "X"
         )
       ),
-      stepIndex === 0 ? React6.createElement(
+      stepIndex === 0 ? React7.createElement(
         "div",
         {
-          className: orClasses3.tutorialIntro
+          className: orClasses4.tutorialIntro
         },
-        React6.createElement("img", {
+        React7.createElement("img", {
           alt: "",
-          className: orClasses3.tutorialProviderLogo,
+          className: orClasses4.tutorialProviderLogo,
           src: provider.icon
         }),
-        React6.createElement(
+        React7.createElement(
           "p",
           null,
-          `${checkoutLabels2.tutorialIntroPrefix} ${provider.name}.`
+          `${checkoutLabels3.tutorialIntroPrefix} ${provider.name}.`
         ),
-        React6.createElement("p", null, checkoutLabels2.tutorialIntroCopy),
-        React6.createElement(
+        React7.createElement("p", null, checkoutLabels3.tutorialIntroCopy),
+        React7.createElement(
           "button",
           {
-            className: orClasses3.tutorialCopy,
+            className: orClasses4.tutorialCopy,
             onClick: () => void options.onCopy(),
             type: "button"
           },
-          checkoutLabels2.copyInvoice
+          checkoutLabels3.copyInvoice
         ),
-        decodeHref === void 0 ? null : React6.createElement(
+        decodeHref === void 0 ? null : React7.createElement(
           "a",
           {
-            className: orClasses3.tutorialCopy,
+            className: orClasses4.tutorialCopy,
             href: decodeHref,
             rel: "noreferrer",
             target: "_blank"
           },
-          checkoutLabels2.decodeInvoice
+          checkoutLabels3.decodeInvoice
         ),
-        options.copied ? React6.createElement(
+        options.copied ? React7.createElement(
           "p",
           {
-            className: orClasses3.tutorialCopyMessage
+            className: orClasses4.tutorialCopyMessage
           },
-          checkoutLabels2.tutorialCopiedContinue
+          checkoutLabels3.tutorialCopiedContinue
         ) : null
-      ) : React6.createElement(
-        React6.Fragment,
+      ) : React7.createElement(
+        React7.Fragment,
         null,
-        React6.createElement(
+        React7.createElement(
           "div",
           {
-            className: orClasses3.tutorialFrame
+            className: orClasses4.tutorialFrame
           },
-          React6.createElement("img", {
+          React7.createElement("img", {
             alt: tutorial?.caption ?? "",
-            className: orClasses3.tutorialImage,
+            className: orClasses4.tutorialImage,
             src: tutorial?.image ?? ""
           })
         ),
-        React6.createElement(
+        React7.createElement(
           "p",
           {
-            className: orClasses3.tutorialCaption
+            className: orClasses4.tutorialCaption
           },
           tutorial?.caption ?? ""
         )
       ),
-      React6.createElement(
+      React7.createElement(
         "div",
         {
           "aria-hidden": "true",
-          className: orClasses3.tutorialSteps
+          className: orClasses4.tutorialSteps
         },
         Array.from(
           { length: totalSteps },
-          (_, index) => React6.createElement("span", {
-            className: index === stepIndex ? orClasses3.tutorialStepActive : orClasses3.tutorialStep,
+          (_, index) => React7.createElement("span", {
+            className: index === stepIndex ? orClasses4.tutorialStepActive : orClasses4.tutorialStep,
             key: index
           })
         )
       ),
-      React6.createElement(
+      React7.createElement(
         "p",
         {
-          className: orClasses3.tutorialProgress
+          className: orClasses4.tutorialProgress
         },
         `Step ${stepIndex + 1} of ${totalSteps}`
       ),
-      React6.createElement(
+      React7.createElement(
         "div",
         {
-          className: orClasses3.tutorialControls
+          className: orClasses4.tutorialControls
         },
-        React6.createElement(
+        React7.createElement(
           "button",
           {
-            className: orClasses3.btn,
+            className: orClasses4.btn,
             disabled: stepIndex === 0,
             onClick: () => options.onStep(previousIndex),
             type: "button"
           },
-          checkoutLabels2.tutorialBack
+          checkoutLabels3.tutorialBack
         ),
-        React6.createElement(
+        React7.createElement(
           "button",
           {
-            className: orClasses3.btn,
+            className: orClasses4.btn,
             onClick: () => {
               if (isFinalStep) {
                 options.onClose();
@@ -1088,7 +1182,7 @@ function ProviderTutorialModal(options) {
             },
             type: "button"
           },
-          isFinalStep ? checkoutLabels2.tutorialExit : checkoutLabels2.tutorialNext
+          isFinalStep ? checkoutLabels3.tutorialExit : checkoutLabels3.tutorialNext
         )
       )
     )
@@ -1109,97 +1203,6 @@ import {
   selectCheckoutDisplayInvoice
 } from "@openreceive/browser/headless";
 import * as React8 from "react";
-
-// src/transaction-details.ts
-import {
-  checkoutLabels as checkoutLabels3,
-  orClasses as orClasses4,
-  resolveTransactionDetailRows
-} from "@openreceive/browser/headless";
-import * as React7 from "react";
-function TransactionDetails(props) {
-  const rows = resolveTransactionDetailRows(props.state);
-  if (rows.length === 0) return null;
-  return React7.createElement(
-    "details",
-    {
-      className: joinClassNames(orClasses4.transactionDetails, props.className),
-      open: props.open === true ? true : void 0
-    },
-    React7.createElement(
-      "summary",
-      { className: orClasses4.transactionDetailsTitle },
-      checkoutLabels3.transactionDetails
-    ),
-    React7.createElement(
-      "div",
-      { className: orClasses4.transactionDetailsContent },
-      React7.createElement(
-        "dl",
-        { className: orClasses4.swapDetails },
-        rows.flatMap(
-          (row) => renderTransactionDetailRow(row, {
-            clipboard: props.clipboard,
-            onError: props.onError
-          })
-        )
-      )
-    )
-  );
-}
-function renderTransactionDetailRow(row, options) {
-  const copyValue = row.copyValue ?? row.value;
-  return [
-    React7.createElement(
-      "dt",
-      { key: `${row.label}-label`, className: orClasses4.swapDetailsDt },
-      row.label
-    ),
-    React7.createElement(
-      "dd",
-      { key: `${row.label}-value`, className: orClasses4.swapDetailsDd },
-      React7.createElement("code", { className: orClasses4.swapDetailsCode }, row.value),
-      React7.createElement(
-        "div",
-        { className: orClasses4.swapDetailsActions },
-        React7.createElement(TransactionDetailCopyButton, {
-          value: copyValue,
-          clipboard: options.clipboard,
-          onError: options.onError
-        }),
-        row.href === void 0 ? null : React7.createElement(
-          "a",
-          {
-            className: orClasses4.swapDetailsLink,
-            href: row.href,
-            rel: "noreferrer",
-            target: "_blank"
-          },
-          row.hrefLabel ?? checkoutLabels3.viewOnExplorer
-        )
-      )
-    )
-  ];
-}
-function TransactionDetailCopyButton(props) {
-  const [copied, setCopied] = useTransientValue(false);
-  const label = copied ? checkoutLabels3.copied : "Copy";
-  return React7.createElement(
-    "button",
-    {
-      className: orClasses4.detailCopy,
-      type: "button",
-      "aria-label": label,
-      title: label,
-      onClick: () => {
-        void copyText(props.value, props.clipboard).then(() => setCopied(true)).catch((error) => props.onError?.(error));
-      }
-    },
-    React7.createElement(ClipboardIcon)
-  );
-}
-
-// src/swap.ts
 function renderSwapActions(options) {
   const shown = options.options.filter((option) => option.provider.length > 0);
   if (!options.enabled || shown.length === 0) return null;
@@ -1303,7 +1306,6 @@ function renderSwapDepositPanel(options) {
     options.now === void 0 ? {} : { now: options.now }
   );
   if (display === void 0) return null;
-  const memo = display.depositMemo;
   const backButton = React8.createElement(
     "button",
     {
@@ -1519,16 +1521,14 @@ function renderSwapDepositPanel(options) {
             {
               className: orClasses5.swapDetails
             },
-            // Explorer stays hidden until payment completes (tx ids / settled details).
-            // No explorer link on the LIVE deposit row: the address has nothing on
-            // chain yet, and sending the payer to a third-party explorer mid-payment
-            // is not something this pane does. The settled/refund panes link theirs.
-            renderSwapCopyRow("Address", display.depositAddress, {
-              ...options,
-              selectable: true
-            }),
-            memo === void 0 ? null : renderSwapCopyRow("Memo", memo, options),
-            renderSwapCopyRow("Amount", display.depositAmount, { ...options, selectable: true })
+            ...display.copyRows.flatMap(
+              (row) => renderSwapCopyRow(
+                row.label,
+                row.copyValue ?? row.value,
+                { ...options, selectable: row.selectable },
+                row.value
+              )
+            )
           ),
           waitingCard(display.countdownLabel),
           renderSwapFeeBreakdown(display.feeBreakdown)
@@ -1553,16 +1553,18 @@ function renderSwapDepositPanel(options) {
   );
 }
 function renderSwapNetworkWarning(display) {
+  const alarm = display.depositRisk !== "pinned";
   const emphasisStart = display.networkWarning.indexOf(display.networkWarningEmphasis);
   const before = emphasisStart === -1 ? display.networkWarning : display.networkWarning.slice(0, emphasisStart);
   const after = emphasisStart === -1 ? "" : display.networkWarning.slice(emphasisStart + display.networkWarningEmphasis.length);
   return React8.createElement(
     "div",
     {
-      role: "alert",
-      className: orClasses5.swapNetworkWarning
+      ...alarm ? { role: "alert" } : {},
+      "data-or-deposit-risk": display.depositRisk,
+      className: alarm ? orClasses5.swapNetworkWarning : orClasses5.swapNetworkNotice
     },
-    React8.createElement(
+    alarm ? React8.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1577,7 +1579,7 @@ function renderSwapNetworkWarning(display) {
         strokeWidth: 2,
         d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
       })
-    ),
+    ) : null,
     React8.createElement(
       "div",
       { className: orClasses5.swapNetworkWarningContent },
@@ -1901,7 +1903,8 @@ function PaymentWizard(props) {
     setSelectedPickerKey(null);
     setSelectedSwapNetworks({});
     session.clearSwapStartError();
-  }, [session]);
+    props.swapRefund?.clearSwapRefundStaging();
+  }, [session, props.swapRefund]);
   const onSwapFocusChange = props.onSwapFocusChange;
   React9.useEffect(() => {
     onSwapFocusChange?.(selectedSwapAsset !== null);
@@ -1912,7 +1915,10 @@ function PaymentWizard(props) {
     return { enabled: methods.length > 0, options: methods };
   }, [checkout]);
   const currentSwapInvoice = React9.useMemo(
-    () => selectCurrentSwapInvoice(checkout, startedSwapInvoice, dismissedSwapInvoiceId),
+    () => selectCurrentSwapInvoice(checkout, {
+      started: startedSwapInvoice,
+      dismissedInvoiceId: dismissedSwapInvoiceId
+    }),
     [checkout, startedSwapInvoice, dismissedSwapInvoiceId]
   );
   const now = useTickingUnixSeconds(currentSwapInvoice !== void 0);
@@ -1925,6 +1931,7 @@ function PaymentWizard(props) {
     },
     [props.prefix, session]
   );
+  const swapRefund = props.swapRefund;
   const refundSwap = React9.useCallback(
     async (attemptId, refundAddress, confirm) => {
       const prefix = props.prefix;
@@ -1932,12 +1939,17 @@ function PaymentWizard(props) {
         return;
       }
       try {
-        const invoice = await requestSwapRefund({
+        const invoice = swapRefund !== void 0 ? await (confirm ? swapRefund.confirmSwapRefund : swapRefund.stageSwapRefund).call(
+          swapRefund,
+          { attemptId, refundAddress }
+        ) : await requestSwapRefund({
           fetch: fetcher,
           prefix,
           reference,
-          invoices: [startedSwapInvoice, ...checkout?.invoices ?? []],
-          attemptId,
+          paymentHash: resolveAttemptPaymentHash(
+            [startedSwapInvoice, ...checkout?.invoices ?? []],
+            attemptId
+          ),
           refundAddress,
           confirm,
           ...props.logger === void 0 ? {} : { logger: props.logger }
@@ -1954,6 +1966,7 @@ function PaymentWizard(props) {
       fetcher,
       props.onError,
       props.logger,
+      swapRefund,
       startedSwapInvoice,
       checkout?.invoices
     ]
@@ -1966,10 +1979,14 @@ function PaymentWizard(props) {
   );
   const model = createPaymentWizardModel(selection);
   const { wizard } = model;
+  const resolveAssetUrl = props.resolveAssetUrl ?? (props.assetBaseUrl === void 0 || props.assetBaseUrl.trim() === "" ? void 0 : createAssetBaseUrlResolver(props.assetBaseUrl));
   const routeAssetDisplays = createWizardRouteAssetDisplays(model.routeAssets, {
-    selectedRoute: model.selectedRoute
+    selectedRoute: model.selectedRoute,
+    ...resolveAssetUrl === void 0 ? {} : { resolveAssetUrl }
+  });
+  const routeDisplays = createWizardRouteDisplays(wizard.routes, {
+    ...resolveAssetUrl === void 0 ? {} : { resolveAssetUrl }
   });
-  const routeDisplays = createWizardRouteDisplays(wizard.routes);
   const showRoutePicker = routeAssetDisplays.length > 0 && (model.selectedRoute === null || routeDisplays.length === 0);
   const activeTutorialProvider = activeTutorial === null ? void 0 : routeDisplays.flatMap((route) => route.providers).find((provider) => provider.id === activeTutorial.providerId);
   const swapAssetOptions = swapOptions.enabled ? swapOptions.options.filter((option) => option.provider.length > 0) : [];
@@ -2045,17 +2062,33 @@ function PaymentWizard(props) {
       selectedPickerKey,
       startingAsset: swapStartingAsset,
       selectedSwapNetworks,
+      // One resolver decides what a tile click MEANS, so the "ask the
+      // network question only when it is a real question" rule is not
+      // re-derived here: a single-network group comes back as start_swap
+      // and the wizard starts it instead of opening a one-answer step.
       onSelectPicker: (key, previousKey) => {
+        const resolved = resolveWizardSelection({
+          pickerKey: key,
+          previousKey,
+          entries: buildMethodGridEntries(paymentMethods, swapAssetOptions),
+          selectedNetworks: selectedSwapNetworks
+        });
+        if (resolved.kind === "none") return;
+        if (resolved.kind === "select_method") {
+          setSelectedPickerKey(null);
+          updateWizardSelection(
+            (controller) => controller.selectMethod(resolved.methodId)
+          );
+          if (resolved.methodId === "bitcoin") void props.onRequestLightning?.();
+          return;
+        }
+        if (resolved.kind === "start_swap") {
+          setSelectedPickerKey(null);
+          selectSwapAsset(resolved.payInAsset);
+          return;
+        }
         setSelectedPickerKey(key);
-        const entries = buildMethodGridEntries(paymentMethods, swapAssetOptions);
-        setSelectedSwapNetworks(
-          (current) => updateSelectedSwapNetworks({
-            entries,
-            nextKey: key,
-            previousKey,
-            selectedNetworks: current
-          })
-        );
+        setSelectedSwapNetworks(resolved.selectedNetworks);
       },
       onSelectNetwork: (groupKey, payInAsset) => {
         setSelectedSwapNetworks((current) => ({
@@ -2071,7 +2104,8 @@ function PaymentWizard(props) {
           void props.onRequestLightning?.();
         }
       },
-      onContinueSwap: selectSwapAsset
+      onContinueSwap: selectSwapAsset,
+      ...resolveAssetUrl === void 0 ? {} : { resolveAssetUrl }
     }) : null,
     selection.selectedMethod === null ? null : React9.createElement(
       "div",
@@ -2238,23 +2272,16 @@ function PaymentWizard(props) {
   );
 }
 function renderCompactPaymentMethodSelector(options) {
-  const entries = buildMethodGridEntries(paymentMethods, options.swapAssetOptions);
+  const display = createMethodGridDisplay({
+    entries: buildMethodGridEntries(paymentMethods, options.swapAssetOptions),
+    selectedPickerKey: options.selectedPickerKey,
+    selectedNetworks: options.selectedSwapNetworks,
+    startingAsset: options.startingAsset,
+    ...options.checkout === void 0 ? {} : { checkout: options.checkout }
+  });
   const currenciesLoading = options.currenciesLoading === true && options.swapAssetOptions.length === 0;
-  const selectedKey = options.selectedPickerKey;
-  const selectedGroup = findSwapGridGroup(entries, selectedKey);
-  const networkRequired = selectedGroup !== void 0 && selectedGroup.options.length > 1;
-  const selectedGroupKey = selectedGroup?.label.trim().toUpperCase();
-  const selectedNetworkAsset = selectedGroupKey === void 0 ? void 0 : options.selectedSwapNetworks[selectedGroupKey];
-  const selectedNetworkOption = selectedGroup === void 0 || selectedNetworkAsset === void 0 ? void 0 : selectedGroup.options.find((option) => option.pay_in_asset === selectedNetworkAsset);
-  const continueTarget = selectedNetworkOption !== void 0 ? {
-    payInAsset: selectedNetworkOption.pay_in_asset,
-    disabled: selectedNetworkOption.available === false,
-    limitMessage: swapOptionLimitMessage2(selectedNetworkOption, options.checkout)
-  } : null;
-  const startingAsset = options.startingAsset;
-  const gridBusy = startingAsset !== null;
-  const continueStarting = continueTarget !== null && continueTarget.payInAsset === startingAsset;
-  const canContinue = continueTarget !== null && !continueTarget.disabled && selectedNetworkOption !== void 0 && !gridBusy;
+  const { gridBusy, networkRequired, selectedGroup, continueTarget, canContinue } = display;
+  const continueStarting = continueTarget?.starting === true;
   const continueButton = (className) => React9.createElement(
     "button",
     {
@@ -2264,7 +2291,7 @@ function renderCompactPaymentMethodSelector(options) {
       "aria-disabled": canContinue ? void 0 : "true",
       "aria-busy": continueStarting ? "true" : void 0,
       onClick: !canContinue ? void 0 : () => {
-        if (continueTarget === null) return;
+        if (continueTarget === void 0) return;
         options.onContinueSwap(continueTarget.payInAsset);
       }
     },
@@ -2276,14 +2303,10 @@ function renderCompactPaymentMethodSelector(options) {
         "aria-hidden": "true"
       }),
       checkoutLabels5.preparingPayment
-    ) : continueTarget?.disabled && continueTarget.limitMessage !== void 0 ? continueTarget.limitMessage : checkoutLabels5.continue
+    ) : continueTarget?.label ?? checkoutLabels5.continue
   );
   const renderNetworkSelector = (group, mobile) => {
-    const accent = paymentAccentId(group.label);
-    const groupKey = group.label.trim().toUpperCase();
-    const selectedAsset = options.selectedSwapNetworks[groupKey];
-    const selectedOption = selectedAsset === void 0 ? void 0 : group.options.find((option) => option.pay_in_asset === selectedAsset);
-    const { panelId, headingId } = wizardNetworkGroupIds(groupKey);
+    const { accent, groupKey, panelId, headingId, selectedOption } = group;
     return React9.createElement(
       "div",
       {
@@ -2304,7 +2327,7 @@ function renderCompactPaymentMethodSelector(options) {
               id: headingId,
               className: orClasses6.methodNetworkHeading
             },
-            formatChooseNetworkHeading(group.label)
+            group.heading
           ),
           React9.createElement(
             "p",
@@ -2346,7 +2369,7 @@ function renderCompactPaymentMethodSelector(options) {
                   React9.createElement("img", {
                     alt: "",
                     className: orClasses6.methodNetworkIcon,
-                    src: getNetworkIcon(option.network_label)
+                    src: getNetworkIcon(option.network_label, options.resolveAssetUrl)
                   })
                 ),
                 React9.createElement("span", { className: "truncate" }, option.network_label),
@@ -2418,23 +2441,22 @@ function renderCompactPaymentMethodSelector(options) {
           "aria-label": checkoutLabels5.paymentMethod,
           className: orClasses6.methodGrid
         },
-        ...entries.map((entry) => {
+        ...display.entries.map((entry) => {
           if (entry.kind === "method") {
             const method = entry.method;
-            const accent2 = paymentAccentId(method.id);
             return React9.createElement(
               "button",
               {
                 key: method.id,
                 type: "button",
                 className: assetButtonClasses({
-                  accent: accent2,
+                  accent: entry.accent,
                   selected: false,
-                  disabled: gridBusy
+                  disabled: entry.disabled
                 }),
-                disabled: gridBusy,
-                "aria-disabled": gridBusy ? "true" : void 0,
-                onClick: gridBusy ? void 0 : () => options.onContinueMethod(method.id)
+                disabled: entry.disabled,
+                "aria-disabled": entry.disabled ? "true" : void 0,
+                onClick: entry.disabled ? void 0 : () => options.onContinueMethod(method.id)
               },
               React9.createElement(
                 "span",
@@ -2442,7 +2464,7 @@ function renderCompactPaymentMethodSelector(options) {
                 React9.createElement("img", {
                   alt: "",
                   className: orClasses6.methodIcon,
-                  src: getPaymentMethodIcon(method.id)
+                  src: getPaymentMethodIcon(method.id, options.resolveAssetUrl)
                 })
               ),
               React9.createElement(
@@ -2453,21 +2475,18 @@ function renderCompactPaymentMethodSelector(options) {
             );
           }
           const group = entry.group;
-          const groupKey = group.label.trim().toUpperCase();
-          const pickerKey = swapPickerKey(group.label);
-          const selected = selectedKey === pickerKey;
-          const multiNetwork = group.options.length > 1;
-          const displayOption = group.options.find((option) => option.available !== false) ?? group.options[0];
-          if (displayOption === void 0) return null;
-          const selectedAsset = options.selectedSwapNetworks[groupKey];
-          const selectedOption = selectedAsset === void 0 ? void 0 : group.options.find((option) => option.pay_in_asset === selectedAsset);
-          const activeOption = selectedOption ?? displayOption;
-          const starting = group.options.some((option) => option.pay_in_asset === startingAsset);
-          const disabled = group.options.every((option) => option.available === false);
-          const accent = paymentAccentId(group.label);
-          const limitOption = disabled ? swapGroupLimitOption(group.options) ?? activeOption : activeOption;
-          const limitMessage = swapOptionLimitMessage2(limitOption, options.checkout);
-          const { panelId } = wizardNetworkGroupIds(groupKey);
+          const {
+            pickerKey,
+            selected,
+            multiNetwork,
+            displayOption,
+            selectedOption,
+            starting,
+            disabled,
+            accent,
+            limitMessage,
+            panelId
+          } = group;
           return React9.createElement(
             "div",
             { key: pickerKey, className: orClasses6.methodTile },
@@ -2486,7 +2505,14 @@ function renderCompactPaymentMethodSelector(options) {
                   selected: starting || multiNetwork && selected,
                   disabled: disabled || gridBusy && !starting
                 }),
-                onClick: disabled || gridBusy ? void 0 : multiNetwork ? () => options.onSelectPicker(pickerKey, selectedKey) : () => options.onContinueSwap(displayOption.pay_in_asset)
+                onClick: disabled || gridBusy ? void 0 : (
+                  // `needsNetworkStep` / `startPayInAsset` are the
+                  // options.length > 1 rule as DATA, so neither renderer
+                  // re-derives which of the two a tile click means.
+                  group.needsNetworkStep ? () => options.onSelectPicker(pickerKey, options.selectedPickerKey) : () => options.onContinueSwap(
+                    group.startPayInAsset ?? displayOption.pay_in_asset
+                  )
+                )
               },
               React9.createElement(
                 "span",
@@ -2497,7 +2523,7 @@ function renderCompactPaymentMethodSelector(options) {
                 }) : React9.createElement("img", {
                   alt: "",
                   className: orClasses6.methodIcon,
-                  src: getSwapOptionIcon(displayOption)
+                  src: getSwapOptionIcon(displayOption, options.resolveAssetUrl)
                 })
               ),
               React9.createElement(
@@ -2643,13 +2669,13 @@ function renderWizardBreadcrumbs(options) {
 function swapOptionsForRoute(routeKey, options) {
   return options.filter((option) => swapAssetMatchesRoute(routeKey, option.pay_in_asset));
 }
-function selectCurrentSwapInvoice(checkout, local, dismissedInvoiceId) {
-  const fromCheckout = checkout?.invoices.find(
-    (invoice) => invoice.rail === "swap" && invoice.swap !== void 0 && invoice.invoice_id !== dismissedInvoiceId
-  );
-  if (local === null || local.invoice_id === dismissedInvoiceId) return fromCheckout;
-  const matched = checkout?.invoices.find((invoice) => invoice.invoice_id === local.invoice_id) ?? local;
-  return overlaySwapRefundStaging(matched, local);
+function resolveAttemptPaymentHash(invoices, attemptId) {
+  for (const invoice of invoices) {
+    if (invoice == null) continue;
+    if ((invoice.swap?.attempt_id ?? invoice.invoice_id) !== attemptId) continue;
+    if (invoice.payment_hash !== void 0) return invoice.payment_hash;
+  }
+  throw new Error(`No swap attempt ${attemptId} in this checkout.`);
 }
 function renderRoutePicker(options) {
   return React9.createElement(
@@ -2890,6 +2916,8 @@ function CheckoutView(props) {
     components,
     classNames,
     children,
+    resolveAssetUrl,
+    assetBaseUrl,
     className,
     ...sectionProps
   } = props;
@@ -2960,6 +2988,21 @@ function CheckoutView(props) {
       ...ownsTheme ? theme.attributes : {}
     },
     customChildren === void 0 ? [
+      // Above the amount and OUTSIDE the Lightning pane, which drops out on
+      // the swap deposit panel, on expiry and on the receipt — the payer
+      // needs to know what they are buying on all four screens.
+      checkoutModel.checkout.description === void 0 || checkoutModel.checkout.description === "" ? null : React10.createElement(
+        "p",
+        {
+          key: "order-description",
+          className: joinClassNames(
+            orClasses7.orderDescription,
+            classNames?.orderDescription
+          ),
+          [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.orderDescription]: ""
+        },
+        checkoutModel.checkout.description
+      ),
       ownsTheme ? React10.createElement(ThemeToggle, {
         key: "theme",
         className: classNames?.themeToggle,
@@ -3033,16 +3076,25 @@ function CheckoutView(props) {
             className: classNames?.summary,
             classNames
           }) : null,
-          settled ? React10.createElement(PaymentData, {
-            key: "payment-data",
-            // The model IS the checkout state, so the payment-data
-            // panel reads the same derivation the rest of the screen
-            // does. It used to re-flatten the snapshot separately,
-            // which reported the displayed ATTEMPT's transaction /
+          settled ? React10.createElement(TransactionDetails, {
+            key: "transaction-details",
+            // The model IS the checkout state, so the panel reads
+            // the same derivation the rest of the screen does. It
+            // used to re-flatten the snapshot separately, which
+            // reported the displayed ATTEMPT's transaction /
             // workflow state on a checkout the state already knows
             // is paid.
-            source: checkoutModel,
-            className: classNames?.details
+            //
+            // The SAME panel the swap flow renders one screen
+            // earlier. A payer's whole evidence that they paid is a
+            // payment hash and, on a swap, a deposit txid — so the
+            // most keep-worthy screen gets copy buttons and
+            // explorer links, not un-copyable text. No
+            // `decodeLinkUrl` is passed, so the bolt11 never
+            // reaches a third party.
+            state: checkoutModel,
+            className: classNames?.details,
+            onError
           }) : expired ? React10.createElement(
             "div",
             {
@@ -3120,7 +3172,12 @@ function CheckoutView(props) {
         onProviderCopy,
         onCopy,
         onRequestLightning,
-        onSwapStarted
+        onSwapStarted,
+        resolveAssetUrl,
+        assetBaseUrl,
+        // The engine's staged refund address rides the controller this
+        // model owns, so a poll cannot wipe a review in progress.
+        swapRefund: checkoutModel
       }) : null
     ] : customChildren
   );
@@ -3153,7 +3210,6 @@ export {
   CopyInvoiceButton,
   InvoiceSummary,
   OpenWalletButton,
-  PaymentData,
   PaymentState,
   PaymentWizard,
   QRCode,