@openreceive/react 0.2.2 → 0.2.4

package/dist/index.js

@@ -447,17 +447,106 @@ function SatsDetail(props) {
   );
 }
 
-// src/theme.ts
+// src/transaction-details.ts
+import {
+  checkoutLabels as checkoutLabels2,
+  orClasses as orClasses2,
+  resolveTransactionDetailRows
+} from "@openreceive/browser/headless";
 import * as React4 from "react";
+function TransactionDetails(props) {
+  const rows = resolveTransactionDetailRows(props.state);
+  if (rows.length === 0) return null;
+  return React4.createElement(
+    "details",
+    {
+      className: joinClassNames(orClasses2.transactionDetails, props.className),
+      open: props.open === true ? true : void 0
+    },
+    React4.createElement(
+      "summary",
+      { className: orClasses2.transactionDetailsTitle },
+      checkoutLabels2.transactionDetails
+    ),
+    React4.createElement(
+      "div",
+      { className: orClasses2.transactionDetailsContent },
+      React4.createElement(
+        "dl",
+        { className: orClasses2.swapDetails },
+        rows.flatMap(
+          (row) => renderTransactionDetailRow(row, {
+            clipboard: props.clipboard,
+            onError: props.onError
+          })
+        )
+      )
+    )
+  );
+}
+function renderTransactionDetailRow(row, options) {
+  const copyValue = row.copyValue ?? row.value;
+  return [
+    React4.createElement(
+      "dt",
+      { key: `${row.label}-label`, className: orClasses2.swapDetailsDt },
+      row.label
+    ),
+    React4.createElement(
+      "dd",
+      { key: `${row.label}-value`, className: orClasses2.swapDetailsDd },
+      React4.createElement("code", { className: orClasses2.swapDetailsCode }, row.value),
+      React4.createElement(
+        "div",
+        { className: orClasses2.swapDetailsActions },
+        React4.createElement(TransactionDetailCopyButton, {
+          value: copyValue,
+          clipboard: options.clipboard,
+          onError: options.onError
+        }),
+        row.href === void 0 ? null : React4.createElement(
+          "a",
+          {
+            className: orClasses2.swapDetailsLink,
+            href: row.href,
+            rel: "noreferrer",
+            target: "_blank"
+          },
+          row.hrefLabel ?? checkoutLabels2.viewOnExplorer
+        )
+      )
+    )
+  ];
+}
+function TransactionDetailCopyButton(props) {
+  const [copied, setCopied] = useTransientValue(false);
+  const label = copied ? checkoutLabels2.copied : "Copy";
+  return React4.createElement(
+    "button",
+    {
+      className: orClasses2.detailCopy,
+      type: "button",
+      "aria-label": label,
+      title: label,
+      onClick: () => {
+        void copyText(props.value, props.clipboard).then(() => setCopied(true)).catch((error) => props.onError?.(error));
+      }
+    },
+    React4.createElement(ClipboardIcon)
+  );
+}
+
+// src/theme.ts
+import * as React5 from "react";
 import {
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES as OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2,
   OPENRECEIVE_THEME_STORAGE_KEY,
   createThemeModel,
-  orClasses as orClasses2,
+  orClasses as orClasses3,
   readThemePreference,
   writeThemePreference
 } from "@openreceive/browser/headless";
-var ThemeContext = React4.createContext(null);
+var ThemeContext = React5.createContext(null);
 var storedThemeListeners = /* @__PURE__ */ new Set();
 var lastSetTheme = /* @__PURE__ */ new Map();
 function notifyStoredThemeChange() {
@@ -486,9 +575,9 @@ function useLocalTheme(options = {}) {
   const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
   const storage = options.storage;
   const defaultTheme = options.defaultTheme;
-  const theme = React4.useSyncExternalStore(
+  const theme = React5.useSyncExternalStore(
     subscribeStoredTheme,
-    React4.useCallback(
+    React5.useCallback(
       () => readThemePreference({
         storage,
         storageKey,
@@ -496,7 +585,7 @@ function useLocalTheme(options = {}) {
       }),
       [storage, storageKey, defaultTheme]
     ),
-    React4.useCallback(
+    React5.useCallback(
       () => (
         // A host-supplied storage is readable on the server (that is how SSR theming is
         // wired); the implicit browser localStorage is not, so fall back to the default.
@@ -505,13 +594,13 @@ function useLocalTheme(options = {}) {
       [storage, storageKey, defaultTheme]
     )
   );
-  const systemDark = React4.useSyncExternalStore(
+  const systemDark = React5.useSyncExternalStore(
     subscribeSystemDark,
     getSystemDark,
     getServerSystemDark
   );
   const themeModel = createThemeModel(theme, { systemDark });
-  const setTheme = React4.useCallback(
+  const setTheme = React5.useCallback(
     (nextTheme) => {
       lastSetTheme.set(storageKey, nextTheme);
       writeThemePreference(nextTheme, {
@@ -522,7 +611,7 @@ function useLocalTheme(options = {}) {
     },
     [storage, storageKey]
   );
-  const toggleTheme = React4.useCallback(() => {
+  const toggleTheme = React5.useCallback(() => {
     setTheme(themeModel.nextTheme);
   }, [setTheme, themeModel.nextTheme]);
   return {
@@ -539,7 +628,7 @@ function useLocalTheme(options = {}) {
   };
 }
 function useTheme(options = {}) {
-  const scoped = React4.useContext(ThemeContext);
+  const scoped = React5.useContext(ThemeContext);
   const local = useLocalTheme(options);
   const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
   if (scoped !== null && options.storage === void 0 && (options.storageKey === void 0 || options.storageKey === storageKey) && options.defaultTheme === void 0) {
@@ -566,7 +655,7 @@ function ThemeToggle(props) {
   const componentProps = {
     ...buttonProps,
     "aria-label": themeModel.toggleLabel,
-    className: joinClassNames(orClasses2.themeToggle, buttonProps.className),
+    className: joinClassNames(orClasses3.themeToggle, buttonProps.className),
     title: themeModel.toggleLabel,
     type,
     [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2.themeToggle]: "",
@@ -577,7 +666,7 @@ function ThemeToggle(props) {
       if (onThemeChange === void 0) fallback.setTheme(themeModel.nextTheme);
     }
   };
-  return React4.createElement(ButtonComponent, componentProps, children ?? themeModel.toggleLabel);
+  return React5.createElement(ButtonComponent, componentProps, children ?? themeModel.toggleLabel);
 }
 function ThemeScope(props) {
   const {
@@ -598,22 +687,22 @@ function ThemeScope(props) {
     storage
   });
   const scopedChildren = typeof children === "function" ? children(theme) : children;
-  return React4.createElement(
+  return React5.createElement(
     ThemeContext.Provider,
     { value: theme },
     // Variadic children, not an array: an array child needs a key on every entry.
-    React4.createElement(
+    React5.createElement(
       Element,
       {
         ...elementProps,
         ...theme.attributes
       },
-      themeToggle ? React4.createElement(
+      themeToggle ? React5.createElement(
         "div",
         {
           className: topbarClassName
         },
-        React4.createElement(ThemeToggle, {
+        React5.createElement(ThemeToggle, {
           className: themeToggleClassName,
           theme: theme.theme,
           resolvedTheme: theme.resolvedTheme,
@@ -627,7 +716,7 @@ function ThemeScope(props) {
 }
 
 // src/use-checkout.ts
-import * as React5 from "react";
+import * as React6 from "react";
 import {
   copyInvoice as copyInvoiceHelper2,
   createCheckoutController,
@@ -639,46 +728,46 @@ import {
 function useCheckout(options) {
   const checkout = options.checkout;
   const [copied, showCopied] = useTransientValue(false);
-  const [latestSnapshot, setLatestSnapshot] = React5.useState(checkout);
+  const [latestSnapshot, setLatestSnapshot] = React6.useState(checkout);
   const incomingIdentity = `${checkout.checkout_id} ${checkout.reference}`;
-  const checkoutRef = React5.useRef(checkout);
+  const checkoutRef = React6.useRef(checkout);
   checkoutRef.current = checkout;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setLatestSnapshot(checkoutRef.current);
   }, [incomingIdentity]);
   const snapshot = latestSnapshot;
-  const [state, setState] = React5.useState(
+  const [state, setState] = React6.useState(
     () => createCheckoutState(snapshot, {
       logger: options.logger
     })
   );
-  const controllerRef = React5.useRef(null);
-  const onStateRef = React5.useRef(options.onState);
+  const controllerRef = React6.useRef(null);
+  const onStateRef = React6.useRef(options.onState);
   onStateRef.current = options.onState;
-  const onSettledRef = React5.useRef(options.onSettled);
+  const onSettledRef = React6.useRef(options.onSettled);
   onSettledRef.current = options.onSettled;
-  const loggerRef = React5.useRef(options.logger);
+  const loggerRef = React6.useRef(options.logger);
   loggerRef.current = options.logger;
-  const onErrorRef = React5.useRef(options.onError);
+  const onErrorRef = React6.useRef(options.onError);
   onErrorRef.current = options.onError;
-  const onCopyRef = React5.useRef(options.onCopy);
+  const onCopyRef = React6.useRef(options.onCopy);
   onCopyRef.current = options.onCopy;
-  const onOpenWalletRef = React5.useRef(options.onOpenWallet);
+  const onOpenWalletRef = React6.useRef(options.onOpenWallet);
   onOpenWalletRef.current = options.onOpenWallet;
-  const settledAnnouncementRef = React5.useRef({
+  const settledAnnouncementRef = React6.useRef({
     reference: snapshot.reference,
     fired: false
   });
-  const logContext = React5.useMemo(() => getCheckoutLogContext(state), [state]);
+  const logContext = React6.useMemo(() => getCheckoutLogContext(state), [state]);
   const refreshStatus = options.polling === false ? void 0 : options.refreshStatus;
-  const refreshStatusRef = React5.useRef(refreshStatus);
+  const refreshStatusRef = React6.useRef(refreshStatus);
   refreshStatusRef.current = refreshStatus;
   const polls = refreshStatus !== void 0;
   const prefix = options.polling === false ? void 0 : options.prefix;
-  const snapshotRef = React5.useRef(snapshot);
+  const snapshotRef = React6.useRef(snapshot);
   snapshotRef.current = snapshot;
   const checkoutIdentity = `${snapshot.checkout_id} ${snapshot.reference}`;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const controller = createCheckoutController({
       snapshot: snapshotRef.current,
       ...polls ? {
@@ -715,7 +804,7 @@ function useCheckout(options) {
   }, [checkoutIdentity, polls, prefix, options.pollIntervalMs]);
   const publicStatus = deriveStatus(state);
   const richStatus = createCheckoutStatusModel2(state);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const announced = settledAnnouncementRef.current;
     if (announced.reference !== snapshot.reference) {
       settledAnnouncementRef.current = {
@@ -724,7 +813,7 @@ function useCheckout(options) {
       };
     }
   }, [snapshot.reference]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const announced = settledAnnouncementRef.current;
     if (publicStatus !== "settled" || announced.fired) return;
     settledAnnouncementRef.current = {
@@ -733,7 +822,7 @@ function useCheckout(options) {
     };
     onSettledRef.current?.();
   }, [publicStatus, snapshot.reference]);
-  const copyInvoice = React5.useCallback(async () => {
+  const copyInvoice = React6.useCallback(async () => {
     try {
       const controller = controllerRef.current;
       if (controller === null) {
@@ -753,7 +842,7 @@ function useCheckout(options) {
       throw error;
     }
   }, [logContext, state.invoice, options.clipboard, options.logger, showCopied]);
-  const openWallet = React5.useCallback(() => {
+  const openWallet = React6.useCallback(() => {
     try {
       const controller = controllerRef.current;
       const uri = controller === null ? openWalletHelper2({
@@ -769,7 +858,7 @@ function useCheckout(options) {
       throw error;
     }
   }, [logContext, state.invoice, options.open, options.logger]);
-  const reloadState = React5.useCallback(async () => {
+  const reloadState = React6.useCallback(async () => {
     try {
       const next = await controllerRef.current?.reloadState();
       if (next !== void 0) setState(next);
@@ -779,7 +868,7 @@ function useCheckout(options) {
     }
   }, []);
   const retry = reloadState;
-  const cancel = React5.useCallback(() => {
+  const cancel = React6.useCallback(() => {
     const next = controllerRef.current?.cancel();
     if (next !== void 0) setState(next);
   }, []);
@@ -804,9 +893,9 @@ function useCheckout(options) {
     openWallet
   };
 }
-var CheckoutContext = React5.createContext(null);
+var CheckoutContext = React6.createContext(null);
 function useCheckoutContext() {
-  const checkout = React5.useContext(CheckoutContext);
+  const checkout = React6.useContext(CheckoutContext);
   if (checkout === null) {
     throw new Error("useCheckoutContext must be used within CheckoutProvider.");
   }
@@ -816,7 +905,7 @@ function CheckoutProvider(props) {
   const { children, ...options } = props;
   const checkout = useCheckout(options);
   const content = typeof children === "function" ? children(checkout) : children;
-  return React5.createElement(CheckoutContext.Provider, { value: checkout }, content);
+  return React6.createElement(CheckoutContext.Provider, { value: checkout }, content);
 }
 
 // src/wizard.ts
@@ -857,16 +946,16 @@ import * as React9 from "react";
 // src/provider-tutorial.ts
 import {
   createLightningInvoiceDecodeUrl,
-  checkoutLabels as checkoutLabels2,
-  orClasses as orClasses3
+  checkoutLabels as checkoutLabels3,
+  orClasses as orClasses4
 } from "@openreceive/browser/headless";
-import * as React6 from "react";
+import * as React7 from "react";
 function renderProviderOpenAction(provider, onOpenTutorial) {
   if (provider.tutorials.length === 0) {
-    return React6.createElement(
+    return React7.createElement(
       "a",
       {
-        className: orClasses3.providerOpen,
+        className: orClasses4.providerOpen,
         href: provider.url,
         rel: "noreferrer",
         target: "_blank"
@@ -874,10 +963,10 @@ function renderProviderOpenAction(provider, onOpenTutorial) {
       provider.openLabel
     );
   }
-  return React6.createElement(
+  return React7.createElement(
     "button",
     {
-      className: orClasses3.providerOpen,
+      className: orClasses4.providerOpen,
       onClick: onOpenTutorial,
       type: "button"
     },
@@ -886,8 +975,8 @@ function renderProviderOpenAction(provider, onOpenTutorial) {
 }
 function ProviderTutorialModal(options) {
   const { provider } = options;
-  const dialogRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const dialogRef = React7.useRef(null);
+  React7.useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog === null) return;
     const opener = dialog.ownerDocument.activeElement instanceof HTMLElement ? dialog.ownerDocument.activeElement : null;
@@ -925,13 +1014,13 @@ function ProviderTutorialModal(options) {
   const nextIndex = Math.min(provider.tutorials.length, stepIndex + 1);
   const isFinalStep = stepIndex === provider.tutorials.length;
   const decodeHref = createLightningInvoiceDecodeUrl(options.invoice, options.decodeLinkUrl);
-  return React6.createElement(
+  return React7.createElement(
     "div",
     {
       ref: dialogRef,
-      "aria-label": `${checkoutLabels2.tutorialTitlePrefix} ${provider.name}`,
+      "aria-label": `${checkoutLabels3.tutorialTitlePrefix} ${provider.name}`,
       "aria-modal": true,
-      className: orClasses3.tutorialModal,
+      className: orClasses4.tutorialModal,
       onClick: (event) => {
         if (event.target === event.currentTarget) options.onClose();
       },
@@ -942,143 +1031,143 @@ function ProviderTutorialModal(options) {
       role: "dialog",
       tabIndex: -1
     },
-    React6.createElement(
+    React7.createElement(
       "div",
       {
-        className: orClasses3.tutorialBox
+        className: orClasses4.tutorialBox
       },
-      React6.createElement(
+      React7.createElement(
         "div",
         {
-          className: orClasses3.tutorialHeader
+          className: orClasses4.tutorialHeader
         },
-        React6.createElement(
+        React7.createElement(
           "div",
           {
-            className: orClasses3.tutorialTitle
+            className: orClasses4.tutorialTitle
           },
-          React6.createElement("img", {
+          React7.createElement("img", {
             alt: "",
-            className: orClasses3.tutorialHeaderLogo,
+            className: orClasses4.tutorialHeaderLogo,
             src: provider.icon
           }),
-          React6.createElement("h3", null, `${checkoutLabels2.tutorialTitlePrefix} ${provider.name}`)
+          React7.createElement("h3", null, `${checkoutLabels3.tutorialTitlePrefix} ${provider.name}`)
         ),
-        React6.createElement(
+        React7.createElement(
           "button",
           {
-            "aria-label": checkoutLabels2.tutorialClose,
-            className: orClasses3.tutorialClose,
+            "aria-label": checkoutLabels3.tutorialClose,
+            className: orClasses4.tutorialClose,
             onClick: options.onClose,
             type: "button"
           },
           "X"
         )
       ),
-      stepIndex === 0 ? React6.createElement(
+      stepIndex === 0 ? React7.createElement(
         "div",
         {
-          className: orClasses3.tutorialIntro
+          className: orClasses4.tutorialIntro
         },
-        React6.createElement("img", {
+        React7.createElement("img", {
           alt: "",
-          className: orClasses3.tutorialProviderLogo,
+          className: orClasses4.tutorialProviderLogo,
           src: provider.icon
         }),
-        React6.createElement(
+        React7.createElement(
           "p",
           null,
-          `${checkoutLabels2.tutorialIntroPrefix} ${provider.name}.`
+          `${checkoutLabels3.tutorialIntroPrefix} ${provider.name}.`
         ),
-        React6.createElement("p", null, checkoutLabels2.tutorialIntroCopy),
-        React6.createElement(
+        React7.createElement("p", null, checkoutLabels3.tutorialIntroCopy),
+        React7.createElement(
           "button",
           {
-            className: orClasses3.tutorialCopy,
+            className: orClasses4.tutorialCopy,
             onClick: () => void options.onCopy(),
             type: "button"
           },
-          checkoutLabels2.copyInvoice
+          checkoutLabels3.copyInvoice
         ),
-        decodeHref === void 0 ? null : React6.createElement(
+        decodeHref === void 0 ? null : React7.createElement(
           "a",
           {
-            className: orClasses3.tutorialCopy,
+            className: orClasses4.tutorialCopy,
             href: decodeHref,
             rel: "noreferrer",
             target: "_blank"
           },
-          checkoutLabels2.decodeInvoice
+          checkoutLabels3.decodeInvoice
         ),
-        options.copied ? React6.createElement(
+        options.copied ? React7.createElement(
           "p",
           {
-            className: orClasses3.tutorialCopyMessage
+            className: orClasses4.tutorialCopyMessage
           },
-          checkoutLabels2.tutorialCopiedContinue
+          checkoutLabels3.tutorialCopiedContinue
         ) : null
-      ) : React6.createElement(
-        React6.Fragment,
+      ) : React7.createElement(
+        React7.Fragment,
         null,
-        React6.createElement(
+        React7.createElement(
           "div",
           {
-            className: orClasses3.tutorialFrame
+            className: orClasses4.tutorialFrame
           },
-          React6.createElement("img", {
+          React7.createElement("img", {
             alt: tutorial?.caption ?? "",
-            className: orClasses3.tutorialImage,
+            className: orClasses4.tutorialImage,
             src: tutorial?.image ?? ""
           })
         ),
-        React6.createElement(
+        React7.createElement(
           "p",
           {
-            className: orClasses3.tutorialCaption
+            className: orClasses4.tutorialCaption
           },
           tutorial?.caption ?? ""
         )
       ),
-      React6.createElement(
+      React7.createElement(
         "div",
         {
           "aria-hidden": "true",
-          className: orClasses3.tutorialSteps
+          className: orClasses4.tutorialSteps
         },
         Array.from(
           { length: totalSteps },
-          (_, index) => React6.createElement("span", {
-            className: index === stepIndex ? orClasses3.tutorialStepActive : orClasses3.tutorialStep,
+          (_, index) => React7.createElement("span", {
+            className: index === stepIndex ? orClasses4.tutorialStepActive : orClasses4.tutorialStep,
             key: index
           })
         )
       ),
-      React6.createElement(
+      React7.createElement(
         "p",
         {
-          className: orClasses3.tutorialProgress
+          className: orClasses4.tutorialProgress
         },
         `Step ${stepIndex + 1} of ${totalSteps}`
       ),
-      React6.createElement(
+      React7.createElement(
         "div",
         {
-          className: orClasses3.tutorialControls
+          className: orClasses4.tutorialControls
         },
-        React6.createElement(
+        React7.createElement(
           "button",
           {
-            className: orClasses3.btn,
+            className: orClasses4.btn,
             disabled: stepIndex === 0,
             onClick: () => options.onStep(previousIndex),
             type: "button"
           },
-          checkoutLabels2.tutorialBack
+          checkoutLabels3.tutorialBack
         ),
-        React6.createElement(
+        React7.createElement(
           "button",
           {
-            className: orClasses3.btn,
+            className: orClasses4.btn,
             onClick: () => {
               if (isFinalStep) {
                 options.onClose();
@@ -1088,7 +1177,7 @@ function ProviderTutorialModal(options) {
             },
             type: "button"
           },
-          isFinalStep ? checkoutLabels2.tutorialExit : checkoutLabels2.tutorialNext
+          isFinalStep ? checkoutLabels3.tutorialExit : checkoutLabels3.tutorialNext
         )
       )
     )
@@ -1109,97 +1198,6 @@ import {
   selectCheckoutDisplayInvoice
 } from "@openreceive/browser/headless";
 import * as React8 from "react";
-
-// src/transaction-details.ts
-import {
-  checkoutLabels as checkoutLabels3,
-  orClasses as orClasses4,
-  resolveTransactionDetailRows
-} from "@openreceive/browser/headless";
-import * as React7 from "react";
-function TransactionDetails(props) {
-  const rows = resolveTransactionDetailRows(props.state);
-  if (rows.length === 0) return null;
-  return React7.createElement(
-    "details",
-    {
-      className: joinClassNames(orClasses4.transactionDetails, props.className),
-      open: props.open === true ? true : void 0
-    },
-    React7.createElement(
-      "summary",
-      { className: orClasses4.transactionDetailsTitle },
-      checkoutLabels3.transactionDetails
-    ),
-    React7.createElement(
-      "div",
-      { className: orClasses4.transactionDetailsContent },
-      React7.createElement(
-        "dl",
-        { className: orClasses4.swapDetails },
-        rows.flatMap(
-          (row) => renderTransactionDetailRow(row, {
-            clipboard: props.clipboard,
-            onError: props.onError
-          })
-        )
-      )
-    )
-  );
-}
-function renderTransactionDetailRow(row, options) {
-  const copyValue = row.copyValue ?? row.value;
-  return [
-    React7.createElement(
-      "dt",
-      { key: `${row.label}-label`, className: orClasses4.swapDetailsDt },
-      row.label
-    ),
-    React7.createElement(
-      "dd",
-      { key: `${row.label}-value`, className: orClasses4.swapDetailsDd },
-      React7.createElement("code", { className: orClasses4.swapDetailsCode }, row.value),
-      React7.createElement(
-        "div",
-        { className: orClasses4.swapDetailsActions },
-        React7.createElement(TransactionDetailCopyButton, {
-          value: copyValue,
-          clipboard: options.clipboard,
-          onError: options.onError
-        }),
-        row.href === void 0 ? null : React7.createElement(
-          "a",
-          {
-            className: orClasses4.swapDetailsLink,
-            href: row.href,
-            rel: "noreferrer",
-            target: "_blank"
-          },
-          row.hrefLabel ?? checkoutLabels3.viewOnExplorer
-        )
-      )
-    )
-  ];
-}
-function TransactionDetailCopyButton(props) {
-  const [copied, setCopied] = useTransientValue(false);
-  const label = copied ? checkoutLabels3.copied : "Copy";
-  return React7.createElement(
-    "button",
-    {
-      className: orClasses4.detailCopy,
-      type: "button",
-      "aria-label": label,
-      title: label,
-      onClick: () => {
-        void copyText(props.value, props.clipboard).then(() => setCopied(true)).catch((error) => props.onError?.(error));
-      }
-    },
-    React7.createElement(ClipboardIcon)
-  );
-}
-
-// src/swap.ts
 function renderSwapActions(options) {
   const shown = options.options.filter((option) => option.provider.length > 0);
   if (!options.enabled || shown.length === 0) return null;
@@ -1553,16 +1551,18 @@ function renderSwapDepositPanel(options) {
   );
 }
 function renderSwapNetworkWarning(display) {
+  const alarm = display.depositRisk !== "pinned";
   const emphasisStart = display.networkWarning.indexOf(display.networkWarningEmphasis);
   const before = emphasisStart === -1 ? display.networkWarning : display.networkWarning.slice(0, emphasisStart);
   const after = emphasisStart === -1 ? "" : display.networkWarning.slice(emphasisStart + display.networkWarningEmphasis.length);
   return React8.createElement(
     "div",
     {
-      role: "alert",
-      className: orClasses5.swapNetworkWarning
+      ...alarm ? { role: "alert" } : {},
+      "data-or-deposit-risk": display.depositRisk,
+      className: alarm ? orClasses5.swapNetworkWarning : orClasses5.swapNetworkNotice
     },
-    React8.createElement(
+    alarm ? React8.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1577,7 +1577,7 @@ function renderSwapNetworkWarning(display) {
         strokeWidth: 2,
         d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
       })
-    ),
+    ) : null,
     React8.createElement(
       "div",
       { className: orClasses5.swapNetworkWarningContent },
@@ -1967,9 +1967,12 @@ function PaymentWizard(props) {
   const model = createPaymentWizardModel(selection);
   const { wizard } = model;
   const routeAssetDisplays = createWizardRouteAssetDisplays(model.routeAssets, {
-    selectedRoute: model.selectedRoute
+    selectedRoute: model.selectedRoute,
+    ...props.resolveAssetUrl === void 0 ? {} : { resolveAssetUrl: props.resolveAssetUrl }
+  });
+  const routeDisplays = createWizardRouteDisplays(wizard.routes, {
+    ...props.resolveAssetUrl === void 0 ? {} : { resolveAssetUrl: props.resolveAssetUrl }
   });
-  const routeDisplays = createWizardRouteDisplays(wizard.routes);
   const showRoutePicker = routeAssetDisplays.length > 0 && (model.selectedRoute === null || routeDisplays.length === 0);
   const activeTutorialProvider = activeTutorial === null ? void 0 : routeDisplays.flatMap((route) => route.providers).find((provider) => provider.id === activeTutorial.providerId);
   const swapAssetOptions = swapOptions.enabled ? swapOptions.options.filter((option) => option.provider.length > 0) : [];
@@ -2071,7 +2074,8 @@ function PaymentWizard(props) {
           void props.onRequestLightning?.();
         }
       },
-      onContinueSwap: selectSwapAsset
+      onContinueSwap: selectSwapAsset,
+      ...props.resolveAssetUrl === void 0 ? {} : { resolveAssetUrl: props.resolveAssetUrl }
     }) : null,
     selection.selectedMethod === null ? null : React9.createElement(
       "div",
@@ -2346,7 +2350,7 @@ function renderCompactPaymentMethodSelector(options) {
                   React9.createElement("img", {
                     alt: "",
                     className: orClasses6.methodNetworkIcon,
-                    src: getNetworkIcon(option.network_label)
+                    src: getNetworkIcon(option.network_label, options.resolveAssetUrl)
                   })
                 ),
                 React9.createElement("span", { className: "truncate" }, option.network_label),
@@ -2442,7 +2446,7 @@ function renderCompactPaymentMethodSelector(options) {
                 React9.createElement("img", {
                   alt: "",
                   className: orClasses6.methodIcon,
-                  src: getPaymentMethodIcon(method.id)
+                  src: getPaymentMethodIcon(method.id, options.resolveAssetUrl)
                 })
               ),
               React9.createElement(
@@ -2497,7 +2501,7 @@ function renderCompactPaymentMethodSelector(options) {
                 }) : React9.createElement("img", {
                   alt: "",
                   className: orClasses6.methodIcon,
-                  src: getSwapOptionIcon(displayOption)
+                  src: getSwapOptionIcon(displayOption, options.resolveAssetUrl)
                 })
               ),
               React9.createElement(
@@ -2890,6 +2894,7 @@ function CheckoutView(props) {
     components,
     classNames,
     children,
+    resolveAssetUrl,
     className,
     ...sectionProps
   } = props;
@@ -3033,16 +3038,25 @@ function CheckoutView(props) {
             className: classNames?.summary,
             classNames
           }) : null,
-          settled ? React10.createElement(PaymentData, {
-            key: "payment-data",
-            // The model IS the checkout state, so the payment-data
-            // panel reads the same derivation the rest of the screen
-            // does. It used to re-flatten the snapshot separately,
-            // which reported the displayed ATTEMPT's transaction /
+          settled ? React10.createElement(TransactionDetails, {
+            key: "transaction-details",
+            // The model IS the checkout state, so the panel reads
+            // the same derivation the rest of the screen does. It
+            // used to re-flatten the snapshot separately, which
+            // reported the displayed ATTEMPT's transaction /
             // workflow state on a checkout the state already knows
             // is paid.
-            source: checkoutModel,
-            className: classNames?.details
+            //
+            // The SAME panel the swap flow renders one screen
+            // earlier. A payer's whole evidence that they paid is a
+            // payment hash and, on a swap, a deposit txid — so the
+            // most keep-worthy screen gets copy buttons and
+            // explorer links, not un-copyable text. No
+            // `decodeLinkUrl` is passed, so the bolt11 never
+            // reaches a third party.
+            state: checkoutModel,
+            className: classNames?.details,
+            onError
           }) : expired ? React10.createElement(
             "div",
             {
@@ -3120,7 +3134,8 @@ function CheckoutView(props) {
         onProviderCopy,
         onCopy,
         onRequestLightning,
-        onSwapStarted
+        onSwapStarted,
+        resolveAssetUrl
       }) : null
     ] : customChildren
   );