@openreceive/react 0.3.1 → 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";
@@ -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,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,
@@ -567,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.
@@ -576,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, {
@@ -593,7 +505,7 @@ function useLocalTheme(options = {}) {
     },
     [storage, storageKey]
   );
-  const toggleTheme = React5.useCallback(() => {
+  const toggleTheme = React4.useCallback(() => {
     setTheme(themeModel.nextTheme);
   }, [setTheme, themeModel.nextTheme]);
   return {
@@ -610,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) {
@@ -637,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]: "",
@@ -648,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 {
@@ -669,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,
@@ -697,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 {
@@ -935,8 +936,10 @@ import {
   createMethodGridDisplay,
   createPaymentWizardController,
   createPaymentWizardModel,
+  createSwapDisplayModel as createSwapDisplayModel2,
   createWizardRouteAssetDisplays,
   createWizardRouteDisplays,
+  formatMethodNetworkDetail,
   formatNetworkSummary,
   getNetworkIcon,
   getPaymentMethodIcon,
@@ -1199,16 +1202,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 +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,
@@ -1443,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(display)
+      renderSwapSupportDetails(display, options)
     );
   }
   if (display.state === "refund_pending" || display.state === "refunded") {
@@ -1471,8 +1488,9 @@ function renderSwapDepositPanel(options) {
       {
         className: orClasses5.swapPanel
       },
-      heading,
-      renderSwapRefundFacts(display, options),
+      refundHeading,
+      renderSwapRefundReturnWarning(display, options),
+      renderSwapAmountFacts(display),
       React8.createElement(
         "dl",
         {
@@ -1489,8 +1507,7 @@ function renderSwapDepositPanel(options) {
           payInAsset: display.payInAsset
         })
       ),
-      renderSwapSupportDetails(display, options),
-      renderSwapRefundReturnWarning(display)
+      renderSwapSupportDetails(display, options)
     );
   }
   if (display.state === "deposit") {
@@ -1514,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",
           {
@@ -1554,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
   );
 }
@@ -1610,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;
@@ -1728,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),
@@ -1740,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(
@@ -1750,13 +1792,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 +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)
     ),
@@ -2007,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;
@@ -2018,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",
@@ -2027,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
         ),
@@ -2055,7 +2185,8 @@ function PaymentWizard(props) {
               void props.onRequestLightning?.();
             }
           }) : selectedSwapQuote !== void 0 && !selectedSwapQuote.available ? renderSwapUnavailable(selectedSwapQuote, checkout) : renderSwapPreparing(selectedSwapLabel)
-        )
+        ),
+        refundStage ? null : keepOrderNote
       )
     );
   }
@@ -2118,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 },
@@ -2246,7 +2384,8 @@ function PaymentWizard(props) {
             ) : null
           );
         })
-      )
+      ),
+      keepOrderNote
     ),
     activeTutorialProvider === void 0 || activeTutorial === null ? null : React9.createElement(ProviderTutorialModal, {
       key: "provider-tutorial",
@@ -2482,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
+                )
               )
             );
           }
@@ -2492,7 +2639,6 @@ function renderCompactPaymentMethodSelector(options) {
             selected,
             multiNetwork,
             displayOption,
-            selectedOption,
             starting,
             disabled,
             accent,
@@ -2542,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,
@@ -2726,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) {
@@ -2769,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);
@@ -2810,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;
@@ -2823,7 +2979,7 @@ function CheckoutCreate(props) {
     return () => {
       cancelled = true;
     };
-  }, [reference, resolvedPrefix, attempt]);
+  }, [reference, resolvedPrefix, resumePaymentHash, attempt]);
   const onSwapStarted = React10.useCallback(
     (invoice) => {
       setCreated((current) => {
@@ -2908,6 +3064,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,