@openreceive/react 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,15 +1,16 @@
 // src/checkout.ts
 import {
+  checkoutLabels as checkoutLabels6,
   createLightningInvoiceDecodeUrl as createLightningInvoiceDecodeUrl2,
   enterCheckoutResumePath,
   mergeAttemptIntoCheckout,
   mergeAttemptIntoSnapshot,
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES as OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3,
   OPENRECEIVE_DEFAULT_PREFIX,
-  checkoutLabels as checkoutLabels6,
   orClasses as orClasses7,
   prepareCheckout,
   requestCheckout,
+  resumeSwapAttempt,
   validateCheckoutProps
 } from "@openreceive/browser/headless";
 import * as React10 from "react";
@@ -30,16 +31,23 @@ function useCheckoutSession(options) {
       reference: () => optionsRef.current.reference(),
       requestCheckout: (reference) => optionsRef.current.requestCheckout?.(reference),
       onSnapshot: (snapshot) => optionsRef.current.onSnapshot?.(snapshot),
-      swapPrefix: () => optionsRef.current.swapPrefix?.(),
-      fetch: () => optionsRef.current.fetch?.(),
-      swapSelection: {
-        started: () => optionsRef.current.swapSelection?.started(),
-        setStarted: (invoice) => optionsRef.current.swapSelection?.setStarted(invoice),
-        dismissedInvoiceId: () => optionsRef.current.swapSelection?.dismissedInvoiceId() ?? null,
-        setDismissedInvoiceId: (invoiceId) => optionsRef.current.swapSelection?.setDismissedInvoiceId(invoiceId),
-        setSelectedAsset: (payInAsset) => optionsRef.current.swapSelection?.setSelectedAsset(payInAsset)
+      // The inner `swap` is always present because the session is built once,
+      // on the first render, and the host may only gain swap options later.
+      // Every accessor reads through `optionsRef`, so a host with no `swap`
+      // makes `prefix()` answer undefined and the session reports the missing
+      // wiring instead of silently doing nothing.
+      swap: {
+        selection: {
+          started: () => optionsRef.current.swap?.selection.started(),
+          setStarted: (invoice) => optionsRef.current.swap?.selection.setStarted(invoice),
+          dismissedInvoiceId: () => optionsRef.current.swap?.selection.dismissedInvoiceId() ?? null,
+          setDismissedInvoiceId: (invoiceId) => optionsRef.current.swap?.selection.setDismissedInvoiceId(invoiceId),
+          setSelectedAsset: (payInAsset) => optionsRef.current.swap?.selection.setSelectedAsset(payInAsset)
+        },
+        prefix: () => optionsRef.current.swap?.prefix(),
+        fetch: () => optionsRef.current.swap?.fetch(),
+        onStarted: (invoice) => optionsRef.current.swap?.onStarted?.(invoice)
       },
-      onSwapStarted: (invoice) => optionsRef.current.onSwapStarted?.(invoice),
       get logger() {
         return optionsRef.current.logger;
       },
@@ -56,7 +64,7 @@ import {
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
   copyInvoice as copyInvoiceHelper,
   createCheckoutStatusModel,
-  createQrSvg,
+  createQrSvgController,
   formatAmountCaption,
   checkoutLabels,
   openWallet as openWalletHelper,
@@ -185,14 +193,15 @@ function QRCode(props) {
   const onErrorRef = React3.useRef(onError);
   onErrorRef.current = onError;
   React3.useEffect(() => {
-    let cancelled = false;
-    createQrSvg(invoice, { encoder, width }).then((nextSvg) => {
-      if (!cancelled) setSvg(nextSvg);
-    }).catch((error) => {
-      if (!cancelled) onErrorRef.current?.(error);
+    const controller = createQrSvgController({
+      onValue: setSvg,
+      onError: (error) => onErrorRef.current?.(error),
+      ...encoder === void 0 ? {} : { encoder },
+      width
     });
+    controller.show(invoice);
     return () => {
-      cancelled = true;
+      controller.stop();
     };
   }, [invoice, encoder, width]);
   return React3.createElement("div", {
@@ -421,106 +430,17 @@ function SatsDetail(props) {
   );
 }
 
-// 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 * as React4 from "react";
 import {
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES as OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2,
   OPENRECEIVE_THEME_STORAGE_KEY,
   createThemeModel,
-  orClasses as orClasses3,
+  orClasses as orClasses2,
   readThemePreference,
   writeThemePreference
 } from "@openreceive/browser/headless";
-var ThemeContext = React5.createContext(null);
+var ThemeContext = React4.createContext(null);
 var storedThemeListeners = /* @__PURE__ */ new Set();
 var lastSetTheme = /* @__PURE__ */ new Map();
 function notifyStoredThemeChange() {
@@ -549,9 +469,9 @@ function useLocalTheme(options = {}) {
   const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
   const storage = options.storage;
   const defaultTheme = options.defaultTheme;
-  const theme = React5.useSyncExternalStore(
+  const theme = React4.useSyncExternalStore(
     subscribeStoredTheme,
-    React5.useCallback(
+    React4.useCallback(
       () => readThemePreference({
         storage,
         storageKey,
@@ -559,7 +479,7 @@ function useLocalTheme(options = {}) {
       }),
       [storage, storageKey, defaultTheme]
     ),
-    React5.useCallback(
+    React4.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.
@@ -568,13 +488,13 @@ function useLocalTheme(options = {}) {
       [storage, storageKey, defaultTheme]
     )
   );
-  const systemDark = React5.useSyncExternalStore(
+  const systemDark = React4.useSyncExternalStore(
     subscribeSystemDark,
     getSystemDark,
     getServerSystemDark
   );
   const themeModel = createThemeModel(theme, { systemDark });
-  const setTheme = React5.useCallback(
+  const setTheme = React4.useCallback(
     (nextTheme) => {
       lastSetTheme.set(storageKey, nextTheme);
       writeThemePreference(nextTheme, {
@@ -585,7 +505,7 @@ function useLocalTheme(options = {}) {
     },
     [storage, storageKey]
   );
-  const toggleTheme = React5.useCallback(() => {
+  const toggleTheme = React4.useCallback(() => {
     setTheme(themeModel.nextTheme);
   }, [setTheme, themeModel.nextTheme]);
   return {
@@ -602,7 +522,7 @@ function useLocalTheme(options = {}) {
   };
 }
 function useTheme(options = {}) {
-  const scoped = React5.useContext(ThemeContext);
+  const scoped = React4.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) {
@@ -629,7 +549,7 @@ function ThemeToggle(props) {
   const componentProps = {
     ...buttonProps,
     "aria-label": themeModel.toggleLabel,
-    className: joinClassNames(orClasses3.themeToggle, buttonProps.className),
+    className: joinClassNames(orClasses2.themeToggle, buttonProps.className),
     title: themeModel.toggleLabel,
     type,
     [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2.themeToggle]: "",
@@ -640,7 +560,7 @@ function ThemeToggle(props) {
       if (onThemeChange === void 0) fallback.setTheme(themeModel.nextTheme);
     }
   };
-  return React5.createElement(ButtonComponent, componentProps, children ?? themeModel.toggleLabel);
+  return React4.createElement(ButtonComponent, componentProps, children ?? themeModel.toggleLabel);
 }
 function ThemeScope(props) {
   const {
@@ -661,22 +581,22 @@ function ThemeScope(props) {
     storage
   });
   const scopedChildren = typeof children === "function" ? children(theme) : children;
-  return React5.createElement(
+  return React4.createElement(
     ThemeContext.Provider,
     { value: theme },
     // Variadic children, not an array: an array child needs a key on every entry.
-    React5.createElement(
+    React4.createElement(
       Element,
       {
         ...elementProps,
         ...theme.attributes
       },
-      themeToggle ? React5.createElement(
+      themeToggle ? React4.createElement(
         "div",
         {
           className: topbarClassName
         },
-        React5.createElement(ThemeToggle, {
+        React4.createElement(ThemeToggle, {
           className: themeToggleClassName,
           theme: theme.theme,
           resolvedTheme: theme.resolvedTheme,
@@ -689,6 +609,95 @@ function ThemeScope(props) {
   );
 }
 
+// src/transaction-details.ts
+import {
+  checkoutLabels as checkoutLabels2,
+  orClasses as orClasses3,
+  resolveTransactionDetailRows
+} from "@openreceive/browser/headless";
+import * as React5 from "react";
+function TransactionDetails(props) {
+  const rows = resolveTransactionDetailRows(props.state);
+  if (rows.length === 0) return null;
+  return React5.createElement(
+    "details",
+    {
+      className: joinClassNames(orClasses3.transactionDetails, props.className),
+      open: props.open === true ? true : void 0
+    },
+    React5.createElement(
+      "summary",
+      { className: orClasses3.transactionDetailsTitle },
+      checkoutLabels2.transactionDetails
+    ),
+    React5.createElement(
+      "div",
+      { className: orClasses3.transactionDetailsContent },
+      React5.createElement(
+        "dl",
+        { className: orClasses3.swapDetails },
+        rows.flatMap(
+          (row) => renderTransactionDetailRow(row, {
+            clipboard: props.clipboard,
+            onError: props.onError
+          })
+        )
+      )
+    )
+  );
+}
+function renderTransactionDetailRow(row, options) {
+  const copyValue = row.copyValue ?? row.value;
+  return [
+    React5.createElement(
+      "dt",
+      { key: `${row.label}-label`, className: orClasses3.swapDetailsDt },
+      row.label
+    ),
+    React5.createElement(
+      "dd",
+      { key: `${row.label}-value`, className: orClasses3.swapDetailsDd },
+      React5.createElement("code", { className: orClasses3.swapDetailsCode }, row.value),
+      React5.createElement(
+        "div",
+        { className: orClasses3.swapDetailsActions },
+        React5.createElement(TransactionDetailCopyButton, {
+          value: copyValue,
+          clipboard: options.clipboard,
+          onError: options.onError
+        }),
+        row.href === void 0 ? null : React5.createElement(
+          "a",
+          {
+            className: orClasses3.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 React5.createElement(
+    "button",
+    {
+      className: orClasses3.detailCopy,
+      type: "button",
+      "aria-label": label,
+      title: label,
+      onClick: () => {
+        void copyText(props.value, props.clipboard).then(() => setCopied(true)).catch((error) => props.onError?.(error));
+      }
+    },
+    React5.createElement(ClipboardIcon)
+  );
+}
+
 // src/use-checkout.ts
 import * as React6 from "react";
 import {
@@ -927,8 +936,10 @@ import {
   createMethodGridDisplay,
   createPaymentWizardController,
   createPaymentWizardModel,
+  createSwapDisplayModel as createSwapDisplayModel2,
   createWizardRouteAssetDisplays,
   createWizardRouteDisplays,
+  formatMethodNetworkDetail,
   formatNetworkSummary,
   getNetworkIcon,
   getPaymentMethodIcon,
@@ -1191,16 +1202,17 @@ function ProviderTutorialModal(options) {
 
 // src/swap.ts
 import {
+  checkoutLabels as checkoutLabels4,
   createDetailExternalLink,
+  createQrSvgController as createQrSvgController2,
   createSwapDisplayModel,
+  createSwapUnavailableModel,
   createTransactionDetails,
-  createQrPayloadSvg,
+  currentCheckoutUrl,
   getSwapRefundFormError,
-  checkoutLabels as checkoutLabels4,
-  createSwapUnavailableModel,
-  swapOptionLimitMessage,
   orClasses as orClasses5,
-  selectCheckoutDisplayInvoice
+  selectCheckoutDisplayInvoice,
+  swapOptionLimitMessage
 } from "@openreceive/browser/headless";
 import * as React8 from "react";
 function renderSwapActions(options) {
@@ -1301,10 +1313,10 @@ function renderSwapUnavailable(quote, checkout) {
   );
 }
 function renderSwapDepositPanel(options) {
-  const display = createSwapDisplayModel(
-    options.invoice,
-    options.now === void 0 ? {} : { now: options.now }
-  );
+  const display = createSwapDisplayModel(options.invoice, {
+    ...options.now === void 0 ? {} : { now: options.now },
+    ...options.resumable === void 0 ? {} : { resumable: options.resumable }
+  });
   if (display === void 0) return null;
   const backButton = React8.createElement(
     "button",
@@ -1331,6 +1343,25 @@ function renderSwapDepositPanel(options) {
       display.providerStateDetail
     )
   );
+  const refundHeading = React8.createElement(
+    "div",
+    { className: orClasses5.swapRefundHeading, role: "alert" },
+    renderAlertIcon("warning"),
+    React8.createElement(
+      "div",
+      { className: orClasses5.swapNetworkWarningContent },
+      React8.createElement(
+        "strong",
+        { className: orClasses5.swapHeadingTitle },
+        display.providerStateLabel
+      ),
+      React8.createElement(
+        "span",
+        { className: orClasses5.swapHeadingDetail },
+        display.providerStateDetail
+      )
+    )
+  );
   const waitingCard = (countdownLabel) => React8.createElement(WaitingState, {
     waiting: true,
     statusTitle: display.providerStateLabel,
@@ -1435,26 +1466,20 @@ function renderSwapDepositPanel(options) {
       {
         className: orClasses5.swapPanel
       },
-      heading,
-      renderSwapRefundFacts(display, options),
-      React8.createElement(
-        "p",
-        {
-          className: orClasses5.swapWarning
-        },
-        `Use a ${display.networkLabel} address you control. Do not paste the deposit address.`
-      ),
+      refundHeading,
+      renderSwapRefundReturnWarning(display, options),
+      renderSwapAmountFacts(display),
       React8.createElement(SwapRefundForm, {
         attemptId: display.attemptId,
         payInAsset: display.payInAsset,
         networkLabel: display.networkLabel,
+        ...display.refundReason === void 0 ? {} : { refundReason: display.refundReason },
         submittedRefundAddress: display.refundAddress,
         refundAllowed: display.refundAllowed,
         onRefund: options.onRefund,
         onError: options.onError
       }),
-      renderSwapSupportDetails(display, options),
-      renderSwapRefundReturnWarning()
+      renderSwapSupportDetails(display, options)
     );
   }
   if (display.state === "refund_pending" || display.state === "refunded") {
@@ -1463,8 +1488,9 @@ function renderSwapDepositPanel(options) {
       {
         className: orClasses5.swapPanel
       },
-      heading,
-      renderSwapRefundFacts(display, options),
+      refundHeading,
+      renderSwapRefundReturnWarning(display, options),
+      renderSwapAmountFacts(display),
       React8.createElement(
         "dl",
         {
@@ -1481,8 +1507,7 @@ function renderSwapDepositPanel(options) {
           payInAsset: display.payInAsset
         })
       ),
-      renderSwapSupportDetails(display, options),
-      renderSwapRefundReturnWarning()
+      renderSwapSupportDetails(display, options)
     );
   }
   if (display.state === "deposit") {
@@ -1506,11 +1531,15 @@ function renderSwapDepositPanel(options) {
         {
           className: orClasses5.swapDepositLayout
         },
-        React8.createElement(SwapPayloadQRCode, {
-          payload: display.qrPayload,
-          encoder: options.encoder,
-          onError: options.onError
-        }),
+        React8.createElement(
+          "div",
+          { className: orClasses5.swapQrFrame },
+          React8.createElement(SwapPayloadQRCode, {
+            payload: display.qrPayload,
+            encoder: options.encoder,
+            onError: options.onError
+          })
+        ),
         React8.createElement(
           "div",
           {
@@ -1546,9 +1575,10 @@ function renderSwapDepositPanel(options) {
     React8.createElement(
       "p",
       { className: orClasses5.swapWarning },
-      checkoutLabels4.supportReviewNeeded
+      checkoutLabels4.supportReviewFacts
     ),
-    renderSwapSupportDetails(display, options),
+    renderSwapAmountFacts(display),
+    renderSwapSupportDetails(display, options, { open: true }),
     backButton
   );
 }
@@ -1602,26 +1632,45 @@ function renderSwapNetworkWarning(display) {
     )
   );
 }
-function renderSwapRefundFacts(display, options) {
+function renderSwapAmountFacts(display) {
   const rows = [
-    ...display.depositReceivedAmount === void 0 ? [] : renderSwapCopyRow(
-      "Amount received",
-      `${display.depositReceivedAmount} ${display.assetLabel}`,
-      options
-    ),
-    ...display.depositReceivedAmount === void 0 ? [] : renderSwapCopyRow(
-      "Amount required",
-      `${display.depositAmount} ${display.assetLabel}`,
-      options
-    ),
-    ...display.refundAmount === void 0 ? [] : renderSwapCopyRow(
-      "Estimated refund",
-      `${display.refundAmount} ${display.assetLabel}`,
-      options
-    )
+    ...display.depositReceivedAmount === void 0 ? [] : [
+      ["Amount received", `${display.depositReceivedAmount} ${display.assetLabel}`],
+      ["Amount required", `${display.depositAmount} ${display.assetLabel}`]
+    ],
+    ...display.refundAmount === void 0 ? [] : [["Estimated refund", `${display.refundAmount} ${display.assetLabel}`]]
   ];
   if (rows.length === 0) return null;
-  return React8.createElement("dl", { className: orClasses5.swapDetails }, rows);
+  return React8.createElement(
+    "dl",
+    { className: orClasses5.swapFacts },
+    rows.map(
+      ([label, value]) => React8.createElement(
+        "div",
+        { key: label, className: orClasses5.swapFactsRow },
+        React8.createElement("dt", { className: orClasses5.swapFactsLabel }, label),
+        React8.createElement("dd", { className: orClasses5.swapFactsValue }, value)
+      )
+    )
+  );
+}
+function renderAlertIcon(kind) {
+  return React8.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      className: orClasses5.swapNetworkWarningIcon,
+      "aria-hidden": "true"
+    },
+    React8.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: kind === "warning" ? "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" : "M17 3H7a2 2 0 00-2 2v16l7-3.5L19 21V5a2 2 0 00-2-2z"
+    })
+  );
 }
 function renderSwapFeeBreakdown(breakdown) {
   if (breakdown === void 0) return null;
@@ -1720,7 +1769,7 @@ function SwapCopyButton(props) {
     React8.createElement(ClipboardIcon)
   );
 }
-function renderSwapSupportDetails(display, options) {
+function renderSwapSupportDetails(display, options, view = {}) {
   const rowOptions = { ...options, payInAsset: display.payInAsset };
   const rows = [
     ...display.depositTxId === void 0 ? [] : renderSwapCopyRow("Deposit transaction", display.depositTxId, rowOptions),
@@ -1732,7 +1781,8 @@ function renderSwapSupportDetails(display, options) {
   return React8.createElement(
     "details",
     {
-      className: orClasses5.swapSupport
+      className: orClasses5.swapSupport,
+      ...view.open === true ? { open: true } : {}
     },
     React8.createElement("summary", { className: orClasses5.swapSupportTitle }, "Payment details"),
     React8.createElement(
@@ -1742,13 +1792,57 @@ function renderSwapSupportDetails(display, options) {
     )
   );
 }
-function renderSwapRefundReturnWarning() {
+function renderSwapRefundReturnWarning(display, options) {
+  const url = display.resumable ? currentCheckoutUrl() : void 0;
   return React8.createElement(
-    "p",
-    {
-      className: orClasses5.swapWarning
-    },
-    checkoutLabels4.refundReturnWarning
+    "div",
+    { className: orClasses5.swapRefundReturn },
+    renderAlertIcon("bookmark"),
+    React8.createElement(
+      "div",
+      { className: orClasses5.swapNetworkWarningContent },
+      React8.createElement(
+        "p",
+        { className: orClasses5.swapRefundReturnTitle },
+        checkoutLabels4.refundReturnTitle
+      ),
+      React8.createElement(
+        "p",
+        { className: orClasses5.swapRefundReturnBody },
+        display.refundReturnLabel
+      ),
+      url === void 0 ? null : React8.createElement(
+        "dl",
+        { className: orClasses5.swapDetails },
+        ...renderSwapCopyRow(checkoutLabels4.refundReturnUrlLabel, url, {
+          ...options,
+          selectable: true
+        })
+      )
+    )
+  );
+}
+function renderKeepOrderNote(options) {
+  if (options.resumable !== true) return null;
+  const reference = options.reference ?? "";
+  const url = currentCheckoutUrl();
+  if (reference.length === 0 && url === void 0) return null;
+  const rowOptions = { ...options, selectable: true };
+  return React8.createElement(
+    "div",
+    { className: orClasses5.keepOrder },
+    React8.createElement(
+      "p",
+      { className: orClasses5.swapSectionTitle },
+      checkoutLabels4.keepOrderTitle
+    ),
+    React8.createElement("p", { className: orClasses5.keepOrderBody }, checkoutLabels4.keepOrderBody),
+    React8.createElement(
+      "dl",
+      { className: orClasses5.swapDetails },
+      ...reference.length === 0 ? [] : renderSwapCopyRow(checkoutLabels4.keepOrderIdLabel, reference, rowOptions),
+      ...url === void 0 ? [] : renderSwapCopyRow(checkoutLabels4.keepOrderUrlLabel, url, rowOptions)
+    )
   );
 }
 var REFUND_ADDRESS_DRAFT_LIMIT = 8;
@@ -1791,10 +1885,30 @@ function SwapRefundForm(props) {
         void props.onRefund(props.attemptId, address, confirm).catch(props.onError).finally(() => setSubmitting(false));
       }
     },
+    // The form says what it is and why it is here before it asks for anything:
+    // a bare input under a red banner is a payer guessing what to type.
+    React8.createElement(
+      "p",
+      { className: orClasses5.swapSectionTitle },
+      checkoutLabels4.refundSectionTitle
+    ),
+    props.refundReason === void 0 ? null : React8.createElement(
+      "p",
+      { className: orClasses5.swapRefundReason },
+      checkoutLabels4.refundReasonLabel.replace(
+        "{reason}",
+        props.refundReason.replace(/_/g, " ")
+      )
+    ),
+    React8.createElement(
+      "p",
+      { className: orClasses5.swapRefundInstruction },
+      checkoutLabels4.refundAddressOwnership.replace("{network}", props.networkLabel)
+    ),
     props.submittedRefundAddress === void 0 ? null : React8.createElement(
       "p",
       {
-        className: orClasses5.swapWarning
+        className: orClasses5.swapRefundInstruction
       },
       checkoutLabels4.confirmRefundTo.replace("{address}", props.submittedRefundAddress)
     ),
@@ -1845,17 +1959,19 @@ function SwapPayloadQRCode(props) {
   const [svg, setSvg] = React8.useState("");
   const onErrorRef = React8.useRef(props.onError);
   onErrorRef.current = props.onError;
+  const { payload, encoder } = props;
   React8.useEffect(() => {
-    let cancelled = false;
-    createQrPayloadSvg(props.payload, { encoder: props.encoder, width: 220 }).then((nextSvg) => {
-      if (!cancelled) setSvg(nextSvg);
-    }).catch((error) => {
-      if (!cancelled) onErrorRef.current?.(error);
+    const controller = createQrSvgController2({
+      onValue: setSvg,
+      onError: (error) => onErrorRef.current?.(error),
+      ...encoder === void 0 ? {} : { encoder },
+      width: 220
     });
+    controller.showPayload(payload);
     return () => {
-      cancelled = true;
+      controller.stop();
     };
-  }, [props.payload, props.encoder]);
+  }, [payload, encoder]);
   const imageSource = svg.length === 0 ? void 0 : `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
   return React8.createElement("img", {
     alt: "",
@@ -1873,9 +1989,7 @@ function PaymentWizard(props) {
   const [startedSwapInvoice, setStartedSwapInvoice] = React9.useState(null);
   const [dismissedSwapInvoiceId, setDismissedSwapInvoiceId] = React9.useState(null);
   const [selectedSwapAsset, setSelectedSwapAsset] = React9.useState(null);
-  const [selectedSwapNetworks, setSelectedSwapNetworks] = React9.useState(
-    {}
-  );
+  const [selectedSwapAssetByGroup, setSelectedSwapAssetByGroup] = React9.useState({});
   const [selectedPickerKey, setSelectedPickerKey] = React9.useState(null);
   const autoSwapAttemptedRef = React9.useRef(/* @__PURE__ */ new Set());
   const fetcher = props.fetch ?? globalThis.fetch;
@@ -1884,16 +1998,18 @@ function PaymentWizard(props) {
   const session = useCheckoutSession({
     snapshot: () => checkout,
     reference: () => reference,
-    swapPrefix: () => props.prefix,
-    fetch: () => fetcher,
-    swapSelection: {
-      started: () => startedSwapInvoice ?? void 0,
-      setStarted: setStartedSwapInvoice,
-      dismissedInvoiceId: () => dismissedSwapInvoiceId,
-      setDismissedInvoiceId: setDismissedSwapInvoiceId,
-      setSelectedAsset: setSelectedSwapAsset
+    swap: {
+      selection: {
+        started: () => startedSwapInvoice ?? void 0,
+        setStarted: setStartedSwapInvoice,
+        dismissedInvoiceId: () => dismissedSwapInvoiceId,
+        setDismissedInvoiceId: setDismissedSwapInvoiceId,
+        setSelectedAsset: setSelectedSwapAsset
+      },
+      prefix: () => props.prefix,
+      fetch: () => fetcher,
+      onStarted: (invoice) => props.onSwapStarted?.(invoice)
     },
-    onSwapStarted: (invoice) => props.onSwapStarted?.(invoice),
     ...props.logger === void 0 ? {} : { logger: props.logger },
     onError: (error) => props.onError?.(error)
   });
@@ -1901,7 +2017,7 @@ function PaymentWizard(props) {
   const clearSwapFocus = React9.useCallback(() => {
     setSelectedSwapAsset(null);
     setSelectedPickerKey(null);
-    setSelectedSwapNetworks({});
+    setSelectedSwapAssetByGroup({});
     session.clearSwapStartError();
     props.swapRefund?.clearSwapRefundStaging();
   }, [session, props.swapRefund]);
@@ -1997,6 +2113,18 @@ function PaymentWizard(props) {
     stickySwapInvoiceRef.current = void 0;
   }
   const activeSwapForAsset = selectedSwapAsset === null ? void 0 : currentSwapInvoice !== void 0 && currentSwapInvoice.swap?.pay_in_asset === selectedSwapAsset ? currentSwapInvoice : stickySwapInvoiceRef.current?.swap?.pay_in_asset === selectedSwapAsset ? stickySwapInvoiceRef.current : void 0;
+  const resumeAdoptedRef = React9.useRef(false);
+  React9.useEffect(() => {
+    if (resumeAdoptedRef.current) return;
+    if (selectedSwapAsset !== null) {
+      resumeAdoptedRef.current = true;
+      return;
+    }
+    const payInAsset = currentSwapInvoice?.swap?.pay_in_asset;
+    if (payInAsset === void 0) return;
+    resumeAdoptedRef.current = true;
+    setSelectedSwapAsset(payInAsset);
+  }, [currentSwapInvoice, selectedSwapAsset]);
   React9.useEffect(() => {
     if (selectedSwapAsset === null) return;
     if (props.prefix === void 0) return;
@@ -2008,6 +2136,18 @@ function PaymentWizard(props) {
   const selectedSwapOption = selectedSwapAsset === null ? void 0 : swapAssetOptions.find((option) => option.pay_in_asset === selectedSwapAsset) ?? session.swapQuotes[selectedSwapAsset];
   const selectedSwapQuote = selectedSwapAsset === null ? void 0 : session.swapQuotes[selectedSwapAsset];
   const selectedSwapLabel = selectedSwapOption?.label ?? "this coin";
+  const activeSwapState = activeSwapForAsset === void 0 ? void 0 : createSwapDisplayModel2(activeSwapForAsset, {
+    ...now === void 0 ? {} : { now },
+    ...props.resumable === void 0 ? {} : { resumable: props.resumable }
+  })?.state;
+  const refundOwed = activeSwapState === "refund_required";
+  const refundStage = activeSwapState?.startsWith("refund") ?? false;
+  const keepOrderNote = renderKeepOrderNote({
+    ...checkout?.reference === void 0 ? {} : { reference: checkout.reference },
+    ...props.resumable === void 0 ? {} : { resumable: props.resumable },
+    ...props.clipboard === void 0 ? {} : { clipboard: props.clipboard },
+    ...props.onError === void 0 ? {} : { onError: props.onError }
+  });
   if (selectedSwapAsset !== null) {
     return React9.createElement(
       "div",
@@ -2017,7 +2157,7 @@ function PaymentWizard(props) {
       React9.createElement(
         "div",
         { className: orClasses6.wizardBody },
-        renderWizardBackBreadcrumb(
+        refundOwed ? null : renderWizardBackBreadcrumb(
           selectedSwapOption === void 0 ? selectedSwapLabel : `${selectedSwapOption.label} \xB7 ${selectedSwapOption.network_label}`,
           clearSwapFocus
         ),
@@ -2038,13 +2178,15 @@ function PaymentWizard(props) {
             logger: props.logger,
             onError: props.onError,
             onRefund: refundSwap,
+            ...props.resumable === void 0 ? {} : { resumable: props.resumable },
             onBackToLightning: () => {
               setDismissedSwapInvoiceId(activeSwapForAsset.invoice_id);
               clearSwapFocus();
               void props.onRequestLightning?.();
             }
           }) : selectedSwapQuote !== void 0 && !selectedSwapQuote.available ? renderSwapUnavailable(selectedSwapQuote, checkout) : renderSwapPreparing(selectedSwapLabel)
-        )
+        ),
+        refundStage ? null : keepOrderNote
       )
     );
   }
@@ -2061,7 +2203,7 @@ function PaymentWizard(props) {
       checkout: checkout ?? void 0,
       selectedPickerKey,
       startingAsset: swapStartingAsset,
-      selectedSwapNetworks,
+      selectedSwapAssetByGroup,
       // 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
@@ -2071,7 +2213,7 @@ function PaymentWizard(props) {
           pickerKey: key,
           previousKey,
           entries: buildMethodGridEntries(paymentMethods, swapAssetOptions),
-          selectedNetworks: selectedSwapNetworks
+          selectedAssetByGroup: selectedSwapAssetByGroup
         });
         if (resolved.kind === "none") return;
         if (resolved.kind === "select_method") {
@@ -2088,10 +2230,10 @@ function PaymentWizard(props) {
           return;
         }
         setSelectedPickerKey(key);
-        setSelectedSwapNetworks(resolved.selectedNetworks);
+        setSelectedSwapAssetByGroup(resolved.selectedAssetByGroup);
       },
       onSelectNetwork: (groupKey, payInAsset) => {
-        setSelectedSwapNetworks((current) => ({
+        setSelectedSwapAssetByGroup((current) => ({
           ...current,
           [groupKey]: payInAsset
         }));
@@ -2107,6 +2249,13 @@ function PaymentWizard(props) {
       onContinueSwap: selectSwapAsset,
       ...resolveAssetUrl === void 0 ? {} : { resolveAssetUrl }
     }) : null,
+    // On the grid the note is a section of its own, under the tiles: there is no
+    // body to put it in until a method is chosen.
+    selection.selectedMethod === null && keepOrderNote !== null ? React9.createElement(
+      "div",
+      { key: "keep-order", className: orClasses6.wizardBody },
+      keepOrderNote
+    ) : null,
     selection.selectedMethod === null ? null : React9.createElement(
       "div",
       { className: orClasses6.wizardBody },
@@ -2174,6 +2323,7 @@ function PaymentWizard(props) {
               logger: props.logger,
               onError: props.onError,
               onRefund: refundSwap,
+              ...props.resumable === void 0 ? {} : { resumable: props.resumable },
               onBackToLightning: () => {
                 setDismissedSwapInvoiceId(activeSwapForRoute.invoice_id);
                 clearSwapFocus();
@@ -2234,7 +2384,8 @@ function PaymentWizard(props) {
             ) : null
           );
         })
-      )
+      ),
+      keepOrderNote
     ),
     activeTutorialProvider === void 0 || activeTutorial === null ? null : React9.createElement(ProviderTutorialModal, {
       key: "provider-tutorial",
@@ -2275,7 +2426,7 @@ function renderCompactPaymentMethodSelector(options) {
   const display = createMethodGridDisplay({
     entries: buildMethodGridEntries(paymentMethods, options.swapAssetOptions),
     selectedPickerKey: options.selectedPickerKey,
-    selectedNetworks: options.selectedSwapNetworks,
+    selectedAssetByGroup: options.selectedSwapAssetByGroup,
     startingAsset: options.startingAsset,
     ...options.checkout === void 0 ? {} : { checkout: options.checkout }
   });
@@ -2470,7 +2621,15 @@ function renderCompactPaymentMethodSelector(options) {
               React9.createElement(
                 "span",
                 { className: orClasses6.methodTitleWrap },
-                React9.createElement("span", { className: orClasses6.methodTitle }, method.title)
+                React9.createElement("span", { className: orClasses6.methodTitle }, method.title),
+                // The tile's own description. A grid of five names is a grid of
+                // five questions; `paymentMethods` has carried the answer all
+                // along and only the mobile layout was printing it.
+                React9.createElement(
+                  "span",
+                  { className: orClasses6.methodTileDetail },
+                  method.detail
+                )
               )
             );
           }
@@ -2480,7 +2639,6 @@ function renderCompactPaymentMethodSelector(options) {
             selected,
             multiNetwork,
             displayOption,
-            selectedOption,
             starting,
             disabled,
             accent,
@@ -2530,11 +2688,11 @@ function renderCompactPaymentMethodSelector(options) {
                 "span",
                 { className: orClasses6.methodTitleWrap },
                 React9.createElement("span", { className: orClasses6.methodTitle }, group.label),
-                !disabled && multiNetwork ? React9.createElement(
+                React9.createElement(
                   "span",
-                  { className: orClasses6.methodDetailMobile },
-                  selected && selectedOption !== void 0 ? `${selectedOption.network_label} network` : checkoutLabels5.selectNetwork
-                ) : null
+                  { className: orClasses6.methodTileDetail },
+                  formatMethodNetworkDetail(group.options)
+                )
               )
             ),
             disabled && limitMessage !== void 0 ? React9.createElement("span", { className: orClasses6.methodLimitHint }, limitMessage) : null,
@@ -2714,7 +2872,8 @@ function Checkout(props) {
     metadata: props.metadata,
     syncUrl: props.syncUrl,
     resumePathPrefix: props.resumePathPrefix,
-    routeReference: props.routeReference
+    routeReference: props.routeReference,
+    resumePaymentHash: props.resumePaymentHash
   });
   const { checkout } = props;
   if (checkout !== void 0) {
@@ -2757,7 +2916,8 @@ function CheckoutCreate(props) {
     classNames,
     syncUrl = false,
     resumePathPrefix = "/checkout",
-    routeReference
+    routeReference,
+    resumePaymentHash
   } = props;
   const [created, setCreated] = React10.useState({ status: "pending" });
   const [attempt, setAttempt] = React10.useState(0);
@@ -2798,7 +2958,15 @@ function CheckoutCreate(props) {
       prefix: resolvedPrefix,
       reference,
       ...createFetchRef.current === void 0 ? {} : { fetch: createFetchRef.current }
-    }).then((checkout) => {
+    }).then(
+      (checkout) => resumePaymentHash === void 0 ? checkout : resumeSwapAttempt({
+        fetch: createFetchRef.current ?? globalThis.fetch,
+        prefix: resolvedPrefix,
+        reference,
+        paymentHash: resumePaymentHash,
+        snapshot: checkout
+      })
+    ).then((checkout) => {
       if (!cancelled) setCreated({ status: "ready", checkout });
     }).catch((error) => {
       if (cancelled) return;
@@ -2811,7 +2979,7 @@ function CheckoutCreate(props) {
     return () => {
       cancelled = true;
     };
-  }, [reference, resolvedPrefix, attempt]);
+  }, [reference, resolvedPrefix, resumePaymentHash, attempt]);
   const onSwapStarted = React10.useCallback(
     (invoice) => {
       setCreated((current) => {
@@ -2890,9 +3058,16 @@ function CheckoutView(props) {
     prefix = OPENRECEIVE_DEFAULT_PREFIX,
     metadata: _metadata,
     createFetch: _createFetch,
-    syncUrl: _syncUrl,
+    // Not `_`-prefixed like its neighbours: the view reads it, to infer
+    // `resumable` for the refund screen. Still destructured out so it never
+    // reaches the rendered <section>.
+    syncUrl,
     resumePathPrefix: _resumePathPrefix,
-    routeReference: _routeReference,
+    routeReference,
+    // Consumed by CheckoutCreate before the view exists; destructured out here
+    // so it never reaches the rendered <section> as an attribute.
+    resumePaymentHash: _resumePaymentHash,
+    resumable,
     onRequestLightning,
     onSwapStarted,
     mintingLightning = false,
@@ -3175,6 +3350,11 @@ function CheckoutView(props) {
         onSwapStarted,
         resolveAssetUrl,
         assetBaseUrl,
+        // Whether a payer who closes the tab has a URL to come back
+        // to. Explicit wins — only the host knows about a per-order
+        // route of its own; otherwise infer it from the two props that
+        // put the reference in the URL.
+        resumable: resumable ?? (syncUrl === true || routeReference !== void 0),
         // The engine's staged refund address rides the controller this
         // model owns, so a poll cannot wipe a review in progress.
         swapRefund: checkoutModel