@openreceive/react 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -244,6 +244,14 @@ interface PaymentWizardProps {
      * back to posting the refund itself and carrying the staging locally.
      */
     readonly swapRefund?: SwapRefundStaging;
+    /**
+     * Whether this checkout has a URL the payer can come BACK to — `<Checkout
+     * syncUrl>`, or a host route of its own that carries the order. It decides
+     * which of the two refund-return warnings the deposit panel shows; see
+     * `SwapDisplayModel.refundReturnLabel`. Defaults to false, so a payer is
+     * never told to bookmark a page that will not bring them back.
+     */
+    readonly resumable?: boolean;
     readonly onError?: (error: unknown) => void;
     /**
      * Called when the payer enters or leaves the focused swap flow (a pay-in coin is
@@ -322,6 +330,8 @@ declare function renderSwapDepositPanel(options: {
     readonly onError?: (error: unknown) => void;
     readonly onRefund: (attemptId: string, refundAddress: string, confirm: boolean) => Promise<void>;
     readonly onBackToLightning: () => void;
+    /** Does this checkout have a URL to return to? See `refundReturnLabel`. */
+    readonly resumable?: boolean;
 }): React.ReactElement | null;
 
 declare function useTheme(options?: UseThemeOptions): UseThemeResult;

package/dist/index.js

@@ -30,16 +30,23 @@ function useCheckoutSession(options) {
       reference: () => optionsRef.current.reference(),
       requestCheckout: (reference) => optionsRef.current.requestCheckout?.(reference),
       onSnapshot: (snapshot) => optionsRef.current.onSnapshot?.(snapshot),
-      swapPrefix: () => optionsRef.current.swapPrefix?.(),
-      fetch: () => optionsRef.current.fetch?.(),
-      swapSelection: {
-        started: () => optionsRef.current.swapSelection?.started(),
-        setStarted: (invoice) => optionsRef.current.swapSelection?.setStarted(invoice),
-        dismissedInvoiceId: () => optionsRef.current.swapSelection?.dismissedInvoiceId() ?? null,
-        setDismissedInvoiceId: (invoiceId) => optionsRef.current.swapSelection?.setDismissedInvoiceId(invoiceId),
-        setSelectedAsset: (payInAsset) => optionsRef.current.swapSelection?.setSelectedAsset(payInAsset)
+      // The inner `swap` is always present because the session is built once,
+      // on the first render, and the host may only gain swap options later.
+      // Every accessor reads through `optionsRef`, so a host with no `swap`
+      // makes `prefix()` answer undefined and the session reports the missing
+      // wiring instead of silently doing nothing.
+      swap: {
+        selection: {
+          started: () => optionsRef.current.swap?.selection.started(),
+          setStarted: (invoice) => optionsRef.current.swap?.selection.setStarted(invoice),
+          dismissedInvoiceId: () => optionsRef.current.swap?.selection.dismissedInvoiceId() ?? null,
+          setDismissedInvoiceId: (invoiceId) => optionsRef.current.swap?.selection.setDismissedInvoiceId(invoiceId),
+          setSelectedAsset: (payInAsset) => optionsRef.current.swap?.selection.setSelectedAsset(payInAsset)
+        },
+        prefix: () => optionsRef.current.swap?.prefix(),
+        fetch: () => optionsRef.current.swap?.fetch(),
+        onStarted: (invoice) => optionsRef.current.swap?.onStarted?.(invoice)
       },
-      onSwapStarted: (invoice) => optionsRef.current.onSwapStarted?.(invoice),
       get logger() {
         return optionsRef.current.logger;
       },
@@ -56,7 +63,7 @@ import {
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
   copyInvoice as copyInvoiceHelper,
   createCheckoutStatusModel,
-  createQrSvg,
+  createQrSvgController,
   formatAmountCaption,
   checkoutLabels,
   openWallet as openWalletHelper,
@@ -185,14 +192,15 @@ function QRCode(props) {
   const onErrorRef = React3.useRef(onError);
   onErrorRef.current = onError;
   React3.useEffect(() => {
-    let cancelled = false;
-    createQrSvg(invoice, { encoder, width }).then((nextSvg) => {
-      if (!cancelled) setSvg(nextSvg);
-    }).catch((error) => {
-      if (!cancelled) onErrorRef.current?.(error);
+    const controller = createQrSvgController({
+      onValue: setSvg,
+      onError: (error) => onErrorRef.current?.(error),
+      ...encoder === void 0 ? {} : { encoder },
+      width
     });
+    controller.show(invoice);
     return () => {
-      cancelled = true;
+      controller.stop();
     };
   }, [invoice, encoder, width]);
   return React3.createElement("div", {
@@ -1194,7 +1202,7 @@ import {
   createDetailExternalLink,
   createSwapDisplayModel,
   createTransactionDetails,
-  createQrPayloadSvg,
+  createQrSvgController as createQrSvgController2,
   getSwapRefundFormError,
   checkoutLabels as checkoutLabels4,
   createSwapUnavailableModel,
@@ -1301,10 +1309,10 @@ function renderSwapUnavailable(quote, checkout) {
   );
 }
 function renderSwapDepositPanel(options) {
-  const display = createSwapDisplayModel(
-    options.invoice,
-    options.now === void 0 ? {} : { now: options.now }
-  );
+  const display = createSwapDisplayModel(options.invoice, {
+    ...options.now === void 0 ? {} : { now: options.now },
+    ...options.resumable === void 0 ? {} : { resumable: options.resumable }
+  });
   if (display === void 0) return null;
   const backButton = React8.createElement(
     "button",
@@ -1454,7 +1462,7 @@ function renderSwapDepositPanel(options) {
         onError: options.onError
       }),
       renderSwapSupportDetails(display, options),
-      renderSwapRefundReturnWarning()
+      renderSwapRefundReturnWarning(display)
     );
   }
   if (display.state === "refund_pending" || display.state === "refunded") {
@@ -1482,7 +1490,7 @@ function renderSwapDepositPanel(options) {
         })
       ),
       renderSwapSupportDetails(display, options),
-      renderSwapRefundReturnWarning()
+      renderSwapRefundReturnWarning(display)
     );
   }
   if (display.state === "deposit") {
@@ -1742,13 +1750,13 @@ function renderSwapSupportDetails(display, options) {
     )
   );
 }
-function renderSwapRefundReturnWarning() {
+function renderSwapRefundReturnWarning(display) {
   return React8.createElement(
     "p",
     {
       className: orClasses5.swapWarning
     },
-    checkoutLabels4.refundReturnWarning
+    display.refundReturnLabel
   );
 }
 var REFUND_ADDRESS_DRAFT_LIMIT = 8;
@@ -1845,17 +1853,19 @@ function SwapPayloadQRCode(props) {
   const [svg, setSvg] = React8.useState("");
   const onErrorRef = React8.useRef(props.onError);
   onErrorRef.current = props.onError;
+  const { payload, encoder } = props;
   React8.useEffect(() => {
-    let cancelled = false;
-    createQrPayloadSvg(props.payload, { encoder: props.encoder, width: 220 }).then((nextSvg) => {
-      if (!cancelled) setSvg(nextSvg);
-    }).catch((error) => {
-      if (!cancelled) onErrorRef.current?.(error);
+    const controller = createQrSvgController2({
+      onValue: setSvg,
+      onError: (error) => onErrorRef.current?.(error),
+      ...encoder === void 0 ? {} : { encoder },
+      width: 220
     });
+    controller.showPayload(payload);
     return () => {
-      cancelled = true;
+      controller.stop();
     };
-  }, [props.payload, props.encoder]);
+  }, [payload, encoder]);
   const imageSource = svg.length === 0 ? void 0 : `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
   return React8.createElement("img", {
     alt: "",
@@ -1873,9 +1883,7 @@ function PaymentWizard(props) {
   const [startedSwapInvoice, setStartedSwapInvoice] = React9.useState(null);
   const [dismissedSwapInvoiceId, setDismissedSwapInvoiceId] = React9.useState(null);
   const [selectedSwapAsset, setSelectedSwapAsset] = React9.useState(null);
-  const [selectedSwapNetworks, setSelectedSwapNetworks] = React9.useState(
-    {}
-  );
+  const [selectedSwapAssetByGroup, setSelectedSwapAssetByGroup] = React9.useState({});
   const [selectedPickerKey, setSelectedPickerKey] = React9.useState(null);
   const autoSwapAttemptedRef = React9.useRef(/* @__PURE__ */ new Set());
   const fetcher = props.fetch ?? globalThis.fetch;
@@ -1884,16 +1892,18 @@ function PaymentWizard(props) {
   const session = useCheckoutSession({
     snapshot: () => checkout,
     reference: () => reference,
-    swapPrefix: () => props.prefix,
-    fetch: () => fetcher,
-    swapSelection: {
-      started: () => startedSwapInvoice ?? void 0,
-      setStarted: setStartedSwapInvoice,
-      dismissedInvoiceId: () => dismissedSwapInvoiceId,
-      setDismissedInvoiceId: setDismissedSwapInvoiceId,
-      setSelectedAsset: setSelectedSwapAsset
+    swap: {
+      selection: {
+        started: () => startedSwapInvoice ?? void 0,
+        setStarted: setStartedSwapInvoice,
+        dismissedInvoiceId: () => dismissedSwapInvoiceId,
+        setDismissedInvoiceId: setDismissedSwapInvoiceId,
+        setSelectedAsset: setSelectedSwapAsset
+      },
+      prefix: () => props.prefix,
+      fetch: () => fetcher,
+      onStarted: (invoice) => props.onSwapStarted?.(invoice)
     },
-    onSwapStarted: (invoice) => props.onSwapStarted?.(invoice),
     ...props.logger === void 0 ? {} : { logger: props.logger },
     onError: (error) => props.onError?.(error)
   });
@@ -1901,7 +1911,7 @@ function PaymentWizard(props) {
   const clearSwapFocus = React9.useCallback(() => {
     setSelectedSwapAsset(null);
     setSelectedPickerKey(null);
-    setSelectedSwapNetworks({});
+    setSelectedSwapAssetByGroup({});
     session.clearSwapStartError();
     props.swapRefund?.clearSwapRefundStaging();
   }, [session, props.swapRefund]);
@@ -2038,6 +2048,7 @@ function PaymentWizard(props) {
             logger: props.logger,
             onError: props.onError,
             onRefund: refundSwap,
+            ...props.resumable === void 0 ? {} : { resumable: props.resumable },
             onBackToLightning: () => {
               setDismissedSwapInvoiceId(activeSwapForAsset.invoice_id);
               clearSwapFocus();
@@ -2061,7 +2072,7 @@ function PaymentWizard(props) {
       checkout: checkout ?? void 0,
       selectedPickerKey,
       startingAsset: swapStartingAsset,
-      selectedSwapNetworks,
+      selectedSwapAssetByGroup,
       // One resolver decides what a tile click MEANS, so the "ask the
       // network question only when it is a real question" rule is not
       // re-derived here: a single-network group comes back as start_swap
@@ -2071,7 +2082,7 @@ function PaymentWizard(props) {
           pickerKey: key,
           previousKey,
           entries: buildMethodGridEntries(paymentMethods, swapAssetOptions),
-          selectedNetworks: selectedSwapNetworks
+          selectedAssetByGroup: selectedSwapAssetByGroup
         });
         if (resolved.kind === "none") return;
         if (resolved.kind === "select_method") {
@@ -2088,10 +2099,10 @@ function PaymentWizard(props) {
           return;
         }
         setSelectedPickerKey(key);
-        setSelectedSwapNetworks(resolved.selectedNetworks);
+        setSelectedSwapAssetByGroup(resolved.selectedAssetByGroup);
       },
       onSelectNetwork: (groupKey, payInAsset) => {
-        setSelectedSwapNetworks((current) => ({
+        setSelectedSwapAssetByGroup((current) => ({
           ...current,
           [groupKey]: payInAsset
         }));
@@ -2174,6 +2185,7 @@ function PaymentWizard(props) {
               logger: props.logger,
               onError: props.onError,
               onRefund: refundSwap,
+              ...props.resumable === void 0 ? {} : { resumable: props.resumable },
               onBackToLightning: () => {
                 setDismissedSwapInvoiceId(activeSwapForRoute.invoice_id);
                 clearSwapFocus();
@@ -2275,7 +2287,7 @@ function renderCompactPaymentMethodSelector(options) {
   const display = createMethodGridDisplay({
     entries: buildMethodGridEntries(paymentMethods, options.swapAssetOptions),
     selectedPickerKey: options.selectedPickerKey,
-    selectedNetworks: options.selectedSwapNetworks,
+    selectedAssetByGroup: options.selectedSwapAssetByGroup,
     startingAsset: options.startingAsset,
     ...options.checkout === void 0 ? {} : { checkout: options.checkout }
   });
@@ -2890,9 +2902,13 @@ function CheckoutView(props) {
     prefix = OPENRECEIVE_DEFAULT_PREFIX,
     metadata: _metadata,
     createFetch: _createFetch,
-    syncUrl: _syncUrl,
+    // Not `_`-prefixed like its neighbours: the view reads it, to infer
+    // `resumable` for the refund screen. Still destructured out so it never
+    // reaches the rendered <section>.
+    syncUrl,
     resumePathPrefix: _resumePathPrefix,
-    routeReference: _routeReference,
+    routeReference,
+    resumable,
     onRequestLightning,
     onSwapStarted,
     mintingLightning = false,
@@ -3175,6 +3191,11 @@ function CheckoutView(props) {
         onSwapStarted,
         resolveAssetUrl,
         assetBaseUrl,
+        // Whether a payer who closes the tab has a URL to come back
+        // to. Explicit wins — only the host knows about a per-order
+        // route of its own; otherwise infer it from the two props that
+        // put the reference in the URL.
+        resumable: resumable ?? (syncUrl === true || routeReference !== void 0),
         // The engine's staged refund address rides the controller this
         // model owns, so a poll cannot wipe a review in progress.
         swapRefund: checkoutModel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openreceive/react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "React checkout components and hooks for OpenReceive (<Checkout>, useCheckout, PaymentWizard).",
   "keywords": [
     "bitcoin",
@@ -19,8 +19,8 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@openreceive/browser": "0.3.0",
-    "@openreceive/core": "0.3.0"
+    "@openreceive/browser": "0.3.1",
+    "@openreceive/core": "0.3.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0"