@openreceive/react 0.3.1 → 0.3.3

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";
@@ -429,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() {
@@ -557,9 +469,10 @@ function useLocalTheme(options = {}) {
   const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
   const storage = options.storage;
   const defaultTheme = options.defaultTheme;
-  const theme = React5.useSyncExternalStore(
+  const lockedTheme = options.theme;
+  const theme = React4.useSyncExternalStore(
     subscribeStoredTheme,
-    React5.useCallback(
+    React4.useCallback(
       () => readThemePreference({
         storage,
         storageKey,
@@ -567,7 +480,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.
@@ -576,14 +489,15 @@ 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 themeModel = createThemeModel(lockedTheme ?? theme, { systemDark });
+  const setTheme = React4.useCallback(
     (nextTheme) => {
+      if (lockedTheme !== void 0) return;
       lastSetTheme.set(storageKey, nextTheme);
       writeThemePreference(nextTheme, {
         storage,
@@ -591,13 +505,13 @@ function useLocalTheme(options = {}) {
       });
       notifyStoredThemeChange();
     },
-    [storage, storageKey]
+    [storage, storageKey, lockedTheme]
   );
-  const toggleTheme = React5.useCallback(() => {
+  const toggleTheme = React4.useCallback(() => {
     setTheme(themeModel.nextTheme);
   }, [setTheme, themeModel.nextTheme]);
   return {
-    theme,
+    theme: lockedTheme ?? theme,
     resolvedTheme: themeModel.resolvedTheme,
     model: themeModel,
     nextTheme: themeModel.nextTheme,
@@ -610,10 +524,10 @@ 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) {
+  if (scoped !== null && options.theme === void 0 && options.storage === void 0 && (options.storageKey === void 0 || options.storageKey === storageKey) && options.defaultTheme === void 0) {
     return { ...scoped, fromScope: true };
   }
   return local;
@@ -637,7 +551,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]: "",
@@ -648,7 +562,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 {
@@ -656,6 +570,7 @@ function ThemeScope(props) {
     defaultTheme,
     storageKey,
     storage,
+    theme: lockedTheme,
     themeToggle = false,
     topbarClassName,
     themeToggleClassName,
@@ -666,25 +581,27 @@ function ThemeScope(props) {
   const theme = useLocalTheme({
     defaultTheme,
     storageKey,
-    storage
+    storage,
+    theme: lockedTheme
   });
   const scopedChildren = typeof children === "function" ? children(theme) : children;
-  return React5.createElement(
+  const showsToggle = themeToggle && lockedTheme === void 0;
+  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(
+      showsToggle ? React4.createElement(
         "div",
         {
           className: topbarClassName
         },
-        React5.createElement(ThemeToggle, {
+        React4.createElement(ThemeToggle, {
           className: themeToggleClassName,
           theme: theme.theme,
           resolvedTheme: theme.resolvedTheme,
@@ -697,6 +614,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 {
@@ -935,8 +941,10 @@ import {
   createMethodGridDisplay,
   createPaymentWizardController,
   createPaymentWizardModel,
+  createSwapDisplayModel as createSwapDisplayModel2,
   createWizardRouteAssetDisplays,
   createWizardRouteDisplays,
+  formatMethodNetworkDetail,
   formatNetworkSummary,
   getNetworkIcon,
   getPaymentMethodIcon,
@@ -1199,16 +1207,17 @@ function ProviderTutorialModal(options) {
 
 // src/swap.ts
 import {
+  checkoutLabels as checkoutLabels4,
   createDetailExternalLink,
+  createQrSvgController as createQrSvgController2,
   createSwapDisplayModel,
+  createSwapUnavailableModel,
   createTransactionDetails,
-  createQrSvgController as createQrSvgController2,
+  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) {
@@ -1339,6 +1348,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,
@@ -1443,26 +1471,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(display)
+      renderSwapSupportDetails(display, options)
     );
   }
   if (display.state === "refund_pending" || display.state === "refunded") {
@@ -1471,8 +1493,9 @@ function renderSwapDepositPanel(options) {
       {
         className: orClasses5.swapPanel
       },
-      heading,
-      renderSwapRefundFacts(display, options),
+      refundHeading,
+      renderSwapRefundReturnWarning(display, options),
+      renderSwapAmountFacts(display),
       React8.createElement(
         "dl",
         {
@@ -1489,8 +1512,7 @@ function renderSwapDepositPanel(options) {
           payInAsset: display.payInAsset
         })
       ),
-      renderSwapSupportDetails(display, options),
-      renderSwapRefundReturnWarning(display)
+      renderSwapSupportDetails(display, options)
     );
   }
   if (display.state === "deposit") {
@@ -1514,11 +1536,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",
           {
@@ -1554,9 +1580,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
   );
 }
@@ -1610,26 +1637,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;
@@ -1728,7 +1774,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),
@@ -1740,7 +1786,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(
@@ -1750,13 +1797,57 @@ function renderSwapSupportDetails(display, options) {
     )
   );
 }
-function renderSwapRefundReturnWarning(display) {
+function renderSwapRefundReturnWarning(display, options) {
+  const url = display.resumable ? currentCheckoutUrl() : void 0;
   return React8.createElement(
-    "p",
-    {
-      className: orClasses5.swapWarning
-    },
-    display.refundReturnLabel
+    "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;
@@ -1799,10 +1890,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)
     ),
@@ -2007,6 +2118,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;
@@ -2018,6 +2141,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",
@@ -2027,7 +2162,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
         ),
@@ -2055,7 +2190,8 @@ function PaymentWizard(props) {
               void props.onRequestLightning?.();
             }
           }) : selectedSwapQuote !== void 0 && !selectedSwapQuote.available ? renderSwapUnavailable(selectedSwapQuote, checkout) : renderSwapPreparing(selectedSwapLabel)
-        )
+        ),
+        refundStage ? null : keepOrderNote
       )
     );
   }
@@ -2118,6 +2254,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 },
@@ -2246,7 +2389,8 @@ function PaymentWizard(props) {
             ) : null
           );
         })
-      )
+      ),
+      keepOrderNote
     ),
     activeTutorialProvider === void 0 || activeTutorial === null ? null : React9.createElement(ProviderTutorialModal, {
       key: "provider-tutorial",
@@ -2482,7 +2626,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
+                )
               )
             );
           }
@@ -2492,7 +2644,6 @@ function renderCompactPaymentMethodSelector(options) {
             selected,
             multiNetwork,
             displayOption,
-            selectedOption,
             starting,
             disabled,
             accent,
@@ -2542,11 +2693,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,
@@ -2726,7 +2877,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) {
@@ -2769,7 +2921,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);
@@ -2810,7 +2963,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;
@@ -2823,7 +2984,7 @@ function CheckoutCreate(props) {
     return () => {
       cancelled = true;
     };
-  }, [reference, resolvedPrefix, attempt]);
+  }, [reference, resolvedPrefix, resumePaymentHash, attempt]);
   const onSwapStarted = React10.useCallback(
     (invoice) => {
       setCreated((current) => {
@@ -2908,6 +3069,9 @@ function CheckoutView(props) {
     syncUrl,
     resumePathPrefix: _resumePathPrefix,
     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,
@@ -2927,6 +3091,7 @@ function CheckoutView(props) {
     pollIntervalMs,
     paymentWizard = true,
     themeToggle = true,
+    theme: lockedTheme,
     defaultTheme,
     storageKey,
     components,
@@ -2952,9 +3117,11 @@ function CheckoutView(props) {
   });
   const theme = useTheme({
     defaultTheme,
-    storageKey
+    storageKey,
+    theme: lockedTheme
   });
-  const ownsTheme = themeToggle && !theme.fromScope;
+  const stampsTheme = !theme.fromScope;
+  const ownsTheme = themeToggle && !theme.fromScope && lockedTheme === void 0;
   const [swapFocused, setSwapFocused] = React10.useState(false);
   const QRCodeComponent = components?.QRCode ?? QRCode;
   const InvoiceSummaryComponent = components?.InvoiceSummary ?? InvoiceSummary;
@@ -3001,206 +3168,207 @@ function CheckoutView(props) {
       className: joinClassNames(className, orClasses7.root, classNames?.root),
       [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.root]: "",
       // Under ThemeScope, inherit data-theme from the page. Standalone Checkout owns it.
-      ...ownsTheme ? theme.attributes : {}
+      ...stampsTheme ? 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,
-        theme: theme.theme,
-        resolvedTheme: theme.resolvedTheme,
-        onThemeChange: theme.setTheme,
-        ButtonComponent
-      }) : null,
-      mintingLightning ? React10.createElement(
-        "div",
-        {
-          key: "minting-lightning",
-          className: orClasses7.creating
-        },
-        React10.createElement("span", {
-          className: orClasses7.spinner,
-          "aria-hidden": "true"
-        }),
-        React10.createElement("p", null, checkoutLabels6.preparingPayment)
-      ) : null,
-      hideLightning ? null : React10.createElement(
-        "div",
-        {
-          key: "payment-layout",
-          className: expired || settled ? orClasses7.paymentLayoutExpired : orClasses7.paymentLayout
-        },
-        lightningPane,
-        React10.createElement(
+    [
+      // Order context from the host, composed ABOVE the shipped payment UI —
+      // the same position as the custom element's `order` slot. Children never
+      // replace the payment UI; a host that wants its own checkout builds on
+      // useCheckout / @openreceive/browser/headless instead.
+      customChildren === void 0 ? null : React10.createElement(React10.Fragment, { key: "order-children" }, customChildren),
+      ...[
+        // 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,
+          theme: theme.theme,
+          resolvedTheme: theme.resolvedTheme,
+          onThemeChange: theme.setTheme,
+          ButtonComponent
+        }) : null,
+        mintingLightning ? React10.createElement(
           "div",
           {
-            key: "payment-info",
-            className: orClasses7.paymentInfo
+            key: "minting-lightning",
+            className: orClasses7.creating
           },
-          expired || settled ? null : React10.createElement(
-            "p",
-            {
-              key: "invoice-title",
-              className: joinClassNames(
-                orClasses7.invoiceTitle,
-                classNames?.invoiceTitle
-              )
-            },
-            checkoutLabels6.bitcoinLightningInvoice
-          ),
-          React10.createElement(WaitingState, {
-            key: "waiting",
-            waiting: checkoutModel.waiting,
-            statusTitle: checkoutModel.statusTitle,
-            statusDetail: checkoutModel.statusDetail,
-            settled,
-            className: classNames?.waiting
+          React10.createElement("span", {
+            className: orClasses7.spinner,
+            "aria-hidden": "true"
           }),
-          checkoutModel.countdownLabel === void 0 ? null : React10.createElement(
-            "div",
-            {
-              key: "countdown",
-              className: joinClassNames(orClasses7.countdown, classNames?.countdown)
-            },
-            checkoutModel.countdownPrefix,
-            " ",
-            React10.createElement(
-              "strong",
-              { className: orClasses7.countdownStrong },
-              checkoutModel.countdownLabel
-            )
-          ),
-          showSummaryMeta ? React10.createElement(InvoiceSummaryComponent, {
-            key: "summary",
-            status: checkoutModel.status,
-            PaymentStateComponent,
-            className: classNames?.summary,
-            classNames
-          }) : null,
-          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.
-            //
-            // 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(
+          React10.createElement("p", null, checkoutLabels6.preparingPayment)
+        ) : null,
+        hideLightning ? null : React10.createElement(
+          "div",
+          {
+            key: "payment-layout",
+            className: expired || settled ? orClasses7.paymentLayoutExpired : orClasses7.paymentLayout
+          },
+          lightningPane,
+          React10.createElement(
             "div",
             {
-              key: "expired-actions",
-              className: joinClassNames(orClasses7.actions, classNames?.actions),
-              [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.actions]: ""
+              key: "payment-info",
+              className: orClasses7.paymentInfo
             },
-            React10.createElement(
-              ButtonComponent ?? "button",
+            expired || settled ? null : React10.createElement(
+              "p",
               {
-                type: "button",
-                className: orClasses7.btn,
-                onClick: startOver
+                key: "invoice-title",
+                className: joinClassNames(orClasses7.invoiceTitle, classNames?.invoiceTitle)
               },
-              checkoutLabels6.startOver
-            )
-          ) : React10.createElement(
-            "div",
-            {
-              key: "actions",
-              className: joinClassNames(orClasses7.actions, classNames?.actions),
-              [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.actions]: ""
-            },
-            React10.createElement(CopyButton, {
-              key: "copy-invoice",
-              invoice: checkoutModel.invoice,
-              copyInvoice: checkoutModel.copyInvoice,
-              onError,
-              logger,
-              ButtonComponent,
-              className: classNames?.copyButton
-            }),
-            // Opt-in slot: the default checkout ships no wallet button, so a
-            // desktop payer is never sent to a handler that does not exist.
-            OpenWalletButtonComponent === void 0 ? null : React10.createElement(OpenWalletButtonComponent, {
-              key: "open-wallet",
-              invoice: checkoutModel.invoice,
-              openWallet: checkoutModel.openWallet,
-              onError,
-              logger,
-              ButtonComponent,
-              className: classNames?.openWalletButton
+              checkoutLabels6.bitcoinLightningInvoice
+            ),
+            React10.createElement(WaitingState, {
+              key: "waiting",
+              waiting: checkoutModel.waiting,
+              statusTitle: checkoutModel.statusTitle,
+              statusDetail: checkoutModel.statusDetail,
+              settled,
+              className: classNames?.waiting
             }),
-            decodeInvoiceHref === void 0 ? null : React10.createElement(
-              "a",
+            checkoutModel.countdownLabel === void 0 ? null : React10.createElement(
+              "div",
+              {
+                key: "countdown",
+                className: joinClassNames(orClasses7.countdown, classNames?.countdown)
+              },
+              checkoutModel.countdownPrefix,
+              " ",
+              React10.createElement(
+                "strong",
+                { className: orClasses7.countdownStrong },
+                checkoutModel.countdownLabel
+              )
+            ),
+            showSummaryMeta ? React10.createElement(InvoiceSummaryComponent, {
+              key: "summary",
+              status: checkoutModel.status,
+              PaymentStateComponent,
+              className: classNames?.summary,
+              classNames
+            }) : null,
+            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.
+              //
+              // 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",
+              {
+                key: "expired-actions",
+                className: joinClassNames(orClasses7.actions, classNames?.actions),
+                [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.actions]: ""
+              },
+              React10.createElement(
+                ButtonComponent ?? "button",
+                {
+                  type: "button",
+                  className: orClasses7.btn,
+                  onClick: startOver
+                },
+                checkoutLabels6.startOver
+              )
+            ) : React10.createElement(
+              "div",
               {
-                key: "decode-invoice",
-                className: orClasses7.btn,
-                href: decodeInvoiceHref,
-                rel: "noreferrer",
-                target: "_blank"
+                key: "actions",
+                className: joinClassNames(orClasses7.actions, classNames?.actions),
+                [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.actions]: ""
               },
-              checkoutLabels6.decodeInvoice
+              React10.createElement(CopyButton, {
+                key: "copy-invoice",
+                invoice: checkoutModel.invoice,
+                copyInvoice: checkoutModel.copyInvoice,
+                onError,
+                logger,
+                ButtonComponent,
+                className: classNames?.copyButton
+              }),
+              // Opt-in slot: the default checkout ships no wallet button, so a
+              // desktop payer is never sent to a handler that does not exist.
+              OpenWalletButtonComponent === void 0 ? null : React10.createElement(OpenWalletButtonComponent, {
+                key: "open-wallet",
+                invoice: checkoutModel.invoice,
+                openWallet: checkoutModel.openWallet,
+                onError,
+                logger,
+                ButtonComponent,
+                className: classNames?.openWalletButton
+              }),
+              decodeInvoiceHref === void 0 ? null : React10.createElement(
+                "a",
+                {
+                  key: "decode-invoice",
+                  className: orClasses7.btn,
+                  href: decodeInvoiceHref,
+                  rel: "noreferrer",
+                  target: "_blank"
+                },
+                checkoutLabels6.decodeInvoice
+              )
             )
           )
-        )
-      ),
-      paymentWizard && !settled && (!expired || swapFocused) ? React10.createElement(PaymentWizard, {
-        key: "wizard",
-        // Only pass invoice when it's a real bolt11 (non-empty, non-deferred).
-        invoice: checkoutModel.invoice || void 0,
-        checkout: checkoutModel.checkout,
-        className: classNames?.wizard,
-        logger,
-        onError,
-        onSwapFocusChange: setSwapFocused,
-        prefix,
-        qrEncoder,
-        decodeLinkUrl,
-        logContext: getCheckoutLogContext({
-          invoice_id: checkoutModel.invoice_id,
-          payment_hash: checkoutModel.payment_hash,
-          amount_msats: checkoutModel.amount_msats
-        }),
-        onProviderCopy,
-        onCopy,
-        onRequestLightning,
-        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
-      }) : null
-    ] : customChildren
+        ),
+        paymentWizard && !settled && (!expired || swapFocused) ? React10.createElement(PaymentWizard, {
+          key: "wizard",
+          // Only pass invoice when it's a real bolt11 (non-empty, non-deferred).
+          invoice: checkoutModel.invoice || void 0,
+          checkout: checkoutModel.checkout,
+          className: classNames?.wizard,
+          logger,
+          onError,
+          onSwapFocusChange: setSwapFocused,
+          prefix,
+          qrEncoder,
+          decodeLinkUrl,
+          logContext: getCheckoutLogContext({
+            invoice_id: checkoutModel.invoice_id,
+            payment_hash: checkoutModel.payment_hash,
+            amount_msats: checkoutModel.amount_msats
+          }),
+          onProviderCopy,
+          onCopy,
+          onRequestLightning,
+          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
+        }) : null
+      ]
+    ]
   );
 }