@openreceive/react 0.4.10 → 0.4.12

package/dist/index.js

@@ -6,8 +6,8 @@ import {
   mergeAttemptIntoCheckout,
   mergeAttemptIntoSnapshot,
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES as OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3,
-  OPENRECEIVE_STYLE_ROOT_ATTRIBUTE as OPENRECEIVE_STYLE_ROOT_ATTRIBUTE2,
   OPENRECEIVE_DEFAULT_PREFIX,
+  OPENRECEIVE_STYLE_ROOT_ATTRIBUTE as OPENRECEIVE_STYLE_ROOT_ATTRIBUTE2,
   orClasses as orClasses7,
   prepareCheckout,
   requestCheckout,
@@ -30,7 +30,8 @@ function useCheckoutSession(options) {
     sessionRef.current = createCheckoutSession({
       snapshot: () => optionsRef.current.snapshot(),
       reference: () => optionsRef.current.reference(),
-      requestCheckout: (reference) => optionsRef.current.requestCheckout?.(reference),
+      prefix: () => optionsRef.current.prefix?.(),
+      requestCheckout: (reference, signal) => optionsRef.current.requestCheckout?.(reference, signal),
       onSnapshot: (snapshot) => optionsRef.current.onSnapshot?.(snapshot),
       // 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.
@@ -57,7 +58,10 @@ function useCheckoutSession(options) {
       onChange: rerender
     });
   }
-  return sessionRef.current;
+  const session = sessionRef.current;
+  session.syncIdentity();
+  React.useEffect(() => () => session.dispose(), [session]);
+  return session;
 }
 
 // src/components.ts
@@ -712,15 +716,15 @@ function TransactionDetailCopyButton(props) {
 }
 
 // src/use-checkout.ts
-import * as React6 from "react";
 import {
   copyInvoice as copyInvoiceHelper2,
   createCheckoutController,
   createCheckoutState,
   createCheckoutStatusModel as createCheckoutStatusModel2,
-  openWallet as openWalletHelper2,
-  deriveStatus
+  deriveStatus,
+  openWallet as openWalletHelper2
 } from "@openreceive/browser/headless";
+import * as React6 from "react";
 function useCheckout(options) {
   const checkout = options.checkout;
   const [copied, showCopied] = useTransientValue(false);
@@ -857,8 +861,9 @@ function useCheckout(options) {
   }, [logContext, state.invoice, options.open, options.logger]);
   const reloadState = React6.useCallback(async () => {
     try {
-      const next = await controllerRef.current?.reloadState();
-      if (next !== void 0) setState(next);
+      const controller = controllerRef.current;
+      const next = await controller?.reloadState();
+      if (controllerRef.current === controller && next !== void 0) setState(next);
     } catch (error) {
       onErrorRef.current?.(error);
       throw error;
@@ -878,10 +883,11 @@ function useCheckout(options) {
   }, []);
   const stageSwapRefund = React6.useCallback(
     async (refund) => {
+      const controller = swapRefundController();
       try {
-        return await swapRefundController().stageSwapRefund(refund);
+        return await controller.stageSwapRefund(refund);
       } catch (error) {
-        onErrorRef.current?.(error);
+        if (controllerRef.current === controller) onErrorRef.current?.(error);
         throw error;
       }
     },
@@ -889,10 +895,11 @@ function useCheckout(options) {
   );
   const confirmSwapRefund = React6.useCallback(
     async (refund) => {
+      const controller = swapRefundController();
       try {
-        return await swapRefundController().confirmSwapRefund(refund);
+        return await controller.confirmSwapRefund(refund);
       } catch (error) {
-        onErrorRef.current?.(error);
+        if (controllerRef.current === controller) onErrorRef.current?.(error);
         throw error;
       }
     },
@@ -1861,24 +1868,20 @@ function renderKeepOrderNote(options) {
     )
   );
 }
-var REFUND_ADDRESS_DRAFT_LIMIT = 8;
-var refundAddressDraftByAttempt = /* @__PURE__ */ new Map();
-function setRefundAddressDraft(attemptId, value) {
-  refundAddressDraftByAttempt.delete(attemptId);
-  refundAddressDraftByAttempt.set(attemptId, value);
-  while (refundAddressDraftByAttempt.size > REFUND_ADDRESS_DRAFT_LIMIT) {
-    const oldest = refundAddressDraftByAttempt.keys().next().value;
-    if (oldest === void 0) break;
-    refundAddressDraftByAttempt.delete(oldest);
-  }
-}
 function SwapRefundForm(props) {
-  const [refundAddress, setRefundAddress] = React8.useState(
-    () => refundAddressDraftByAttempt.get(props.attemptId) ?? ""
+  const [refundAddress, setRefundAddress] = React8.useState("");
+  const [draftAttemptId, setDraftAttemptId] = React8.useState(props.attemptId);
+  if (draftAttemptId !== props.attemptId) {
+    setDraftAttemptId(props.attemptId);
+    setRefundAddress("");
+  }
+  const generation = React8.useRef(0);
+  React8.useEffect(
+    () => () => {
+      generation.current += 1;
+    },
+    [props.attemptId]
   );
-  React8.useEffect(() => {
-    setRefundAddress(refundAddressDraftByAttempt.get(props.attemptId) ?? "");
-  }, [props.attemptId]);
   const [submitting, setSubmitting] = React8.useState(false);
   const [showAddressError, setShowAddressError] = React8.useState(false);
   const address = refundAddress.trim();
@@ -1898,7 +1901,12 @@ function SwapRefundForm(props) {
           return;
         }
         setSubmitting(true);
-        void props.onRefund(props.attemptId, address, confirm).catch(props.onError).finally(() => setSubmitting(false));
+        const captured = generation.current;
+        void props.onRefund(props.attemptId, address, confirm).catch((error) => {
+          if (captured === generation.current) props.onError?.(error);
+        }).finally(() => {
+          if (captured === generation.current) setSubmitting(false);
+        });
       }
     },
     // The form says what it is and why it is here before it asks for anything:
@@ -1934,7 +1942,6 @@ function SwapRefundForm(props) {
       className: showError ? orClasses5.swapRefundInputInvalid : orClasses5.swapRefundInput,
       onChange: (event) => {
         const value = event.currentTarget.value;
-        setRefundAddressDraft(props.attemptId, value);
         setRefundAddress(value);
       },
       onBlur: () => {
@@ -1998,13 +2005,21 @@ function SwapPayloadQRCode(props) {
 
 // src/wizard.ts
 function PaymentWizard(props) {
+  return React9.createElement(PaymentWizardSession, {
+    ...props,
+    key: JSON.stringify([props.checkout?.reference, props.prefix?.replace(/\/+$/, "")])
+  });
+}
+function PaymentWizardSession(props) {
   const [selection, setSelection] = React9.useState(
     () => createPaymentWizardController().getSelection()
   );
   const [activeTutorial, setActiveTutorial] = React9.useState(null);
   const [startedSwapInvoice, setStartedSwapInvoice] = React9.useState(null);
   const [dismissedSwapInvoiceId, setDismissedSwapInvoiceId] = React9.useState(null);
-  const [selectedSwapAsset, setSelectedSwapAsset] = React9.useState(null);
+  const [selectedSwapAsset, setSelectedSwapAsset] = React9.useState(
+    () => selectCurrentSwapInvoice(props.checkout)?.swap?.pay_in_asset ?? null
+  );
   const [selectedSwapAssetByGroup, setSelectedSwapAssetByGroup] = React9.useState({});
   const [selectedPickerKey, setSelectedPickerKey] = React9.useState(null);
   const autoSwapAttemptedRef = React9.useRef(/* @__PURE__ */ new Set());
@@ -2014,6 +2029,7 @@ function PaymentWizard(props) {
   const session = useCheckoutSession({
     snapshot: () => checkout,
     reference: () => reference,
+    prefix: () => props.prefix,
     swap: {
       selection: {
         started: () => startedSwapInvoice ?? void 0,
@@ -2076,6 +2092,7 @@ function PaymentWizard(props) {
       if (prefix === void 0 || reference === void 0 || fetcher === void 0) {
         return;
       }
+      const action = session.capture();
       try {
         const invoice = swapRefund !== void 0 ? await (confirm ? swapRefund.confirmSwapRefund : swapRefund.stageSwapRefund).call(
           swapRefund,
@@ -2093,10 +2110,11 @@ function PaymentWizard(props) {
           confirm,
           ...props.logger === void 0 ? {} : { logger: props.logger }
         });
+        if (!action.isCurrent()) return;
         setStartedSwapInvoice(invoice);
         setDismissedSwapInvoiceId(null);
       } catch (error) {
-        props.onError?.(error);
+        if (action.isCurrent()) props.onError?.(error);
       }
     },
     [
@@ -2108,7 +2126,8 @@ function PaymentWizard(props) {
       props.logger,
       swapRefund,
       startedSwapInvoice,
-      checkout?.invoices
+      checkout?.invoices,
+      session
     ]
   );
   const updateWizardSelection = React9.useCallback(
@@ -2148,7 +2167,7 @@ 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);
+  const resumeAdoptedRef = React9.useRef(selectedSwapAsset !== null);
   React9.useEffect(() => {
     if (resumeAdoptedRef.current) return;
     if (selectedSwapAsset !== null) {
@@ -2917,11 +2936,21 @@ function Checkout(props) {
   if (checkout !== void 0) {
     return React10.createElement(CheckoutSnapshotMode, {
       ...props,
+      key: JSON.stringify([
+        checkout.reference,
+        (props.prefix ?? OPENRECEIVE_DEFAULT_PREFIX).replace(/\/+$/, "")
+      ]),
       checkout,
       prefix: props.prefix ?? OPENRECEIVE_DEFAULT_PREFIX
     });
   }
-  return React10.createElement(CheckoutCreate, props);
+  return React10.createElement(CheckoutCreate, {
+    ...props,
+    key: JSON.stringify([
+      props.reference,
+      (props.prefix ?? OPENRECEIVE_DEFAULT_PREFIX).replace(/\/+$/, "")
+    ])
+  });
 }
 function CheckoutSnapshotMode(props) {
   const { checkout } = props;
@@ -2976,8 +3005,10 @@ function CheckoutCreate(props) {
   const session = useCheckoutSession({
     snapshot: () => createdCheckoutRef.current,
     reference: () => reference,
-    requestCheckout: (id) => requestCheckout({
+    prefix: () => resolvedPrefix,
+    requestCheckout: (id, signal) => requestCheckout({
       prefix: resolvedPrefix,
+      signal,
       reference: id,
       ...csrfHeader === void 0 ? {} : { csrfHeader },
       ...metadataRef.current === void 0 ? {} : { metadata: metadataRef.current },
@@ -2998,14 +3029,17 @@ function CheckoutCreate(props) {
   }, [syncUrl, reference, resumePathPrefix, routeReference]);
   React10.useEffect(() => {
     let cancelled = false;
+    const action = session.capture();
     setCreated({ status: "pending" });
     prepareCheckout({
       prefix: resolvedPrefix,
+      signal: action.signal,
       reference,
       ...csrfHeader === void 0 ? {} : { csrfHeader },
       ...createFetchRef.current === void 0 ? {} : { fetch: createFetchRef.current }
     }).then(
-      (checkout) => resumePaymentHash === void 0 ? checkout : resumeSwapAttempt({
+      (checkout) => cancelled || !action.isCurrent() || resumePaymentHash === void 0 ? checkout : resumeSwapAttempt({
+        signal: action.signal,
         fetch: createFetchRef.current ?? globalThis.fetch,
         prefix: resolvedPrefix,
         ...csrfHeader === void 0 ? {} : { csrfHeader },
@@ -3014,9 +3048,9 @@ function CheckoutCreate(props) {
         snapshot: checkout
       })
     ).then((checkout) => {
-      if (!cancelled) setCreated({ status: "ready", checkout });
+      if (!cancelled && action.isCurrent()) setCreated({ status: "ready", checkout });
     }).catch((error) => {
-      if (cancelled) return;
+      if (cancelled || !action.isCurrent()) return;
       onErrorRef.current?.(error);
       setCreated({
         status: "error",
@@ -3025,6 +3059,7 @@ function CheckoutCreate(props) {
     });
     return () => {
       cancelled = true;
+      session.reset();
     };
   }, [reference, resolvedPrefix, csrfHeader, resumePaymentHash, attempt]);
   const onSwapStarted = React10.useCallback(
@@ -3176,7 +3211,9 @@ function CheckoutView(props) {
   });
   const stampsTheme = !theme.fromScope;
   const ownsTheme = themeToggle && !theme.fromScope && lockedTheme === void 0;
-  const [swapFocused, setSwapFocused] = React10.useState(false);
+  const [swapFocused, setSwapFocused] = React10.useState(
+    () => checkout.invoices.some((invoice) => invoice.rail === "swap" && invoice.swap !== void 0)
+  );
   const [lightningFocused, setLightningFocused] = React10.useState(false);
   const QRCodeComponent = components?.QRCode ?? QRCode;
   const InvoiceSummaryComponent = components?.InvoiceSummary ?? InvoiceSummary;
@@ -3188,7 +3225,7 @@ function CheckoutView(props) {
   const expired = checkoutModel.status === "expired";
   const settled = checkoutModel.status === "settled";
   const showLightning = !!checkoutModel.invoice && (!paymentWizard || lightningFocused) && !swapFocused && !expired;
-  const hideLightning = !showLightning && !expired && !settled;
+  const hideLightning = !settled && (swapFocused || !showLightning && !expired);
   const showSummaryMeta = checkoutModel.status === "settled" || checkoutModel.status === "expired";
   const fiatCurrency = checkoutModel.fiat_quote?.fiat?.currency;
   const decodeInvoiceHref = createLightningInvoiceDecodeUrl2(checkoutModel.invoice, decodeLinkUrl);
@@ -3397,7 +3434,7 @@ function CheckoutView(props) {
             )
           )
         ),
-        paymentWizard && !settled && (!expired || swapFocused) ? React10.createElement(PaymentWizard, {
+        paymentWizard && !settled && (!expired || swapFocused || checkoutModel.checkout?.invoices.some((invoice) => invoice.swap !== void 0)) ? React10.createElement(PaymentWizard, {
           key: "wizard",
           // Only pass invoice when it's a real bolt11 (non-empty, non-deferred).
           invoice: checkoutModel.invoice || void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openreceive/react",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "React components and hooks for Bitcoin Lightning checkout and optional USDT, USDC, SOL and ETH swaps.",
   "keywords": [
     "bitcoin",
@@ -19,8 +19,8 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@openreceive/browser": "0.4.10",
-    "@openreceive/core": "0.4.10"
+    "@openreceive/browser": "0.4.12",
+    "@openreceive/core": "0.4.12"
   },
   "peerDependencies": {
     "react": ">=18.0.0"

package/skills/integrate-openreceive/SKILL.md

@@ -34,9 +34,10 @@ code** (`NWC_URI`).
    - BTCPay Server: [references/btcpay.md](references/btcpay.md) — a plugin,
      configured in BTCPay's store UI or Greenfield API; no application code,
      no npm packages, no gem. The rest of this file is about the library.
-3. Follow its **Step 0** first: confirm `NWC_URI` is set in the server
-   environment before writing code. Never print the value; never invent a
-   placeholder.
+3. Follow its **Step 0** first: before writing code or searching the machine,
+   ask the user for the receive-only NWC code (then the swap URI), one question
+   per message, and store each pasted code in the project's env file yourself.
+   Never print the value; never invent a placeholder.
 
 Install, per adapter — Express: `npm install @openreceive/express @openreceive/react`;
 Fastify: `npm install @openreceive/fastify @openreceive/react`; Next.js:

package/skills/integrate-openreceive/references/btcpay.md

@@ -1,6 +1,6 @@
 # OpenReceive agent directions (BTCPay Server)
 
-These directions describe OpenReceive 0.4.10.
+These directions describe OpenReceive 0.4.12.
 
 Connect a BTCPay Server store to a receive-only NWC wallet with the OpenReceive
 plugin, and optionally let payers pay BTCPay invoices with USDT, USDC, ETH or
@@ -35,10 +35,12 @@ refund path on the same checkout screen.
 1. Confirm the BTCPay Server version is 2.4.4 or later (Server Settings →
    About, or `GET /api/v1/server/info`). The plugin declares that minimum and
    BTCPay refuses to load it below.
-2. Check whether the plugin is installed (Server Settings → Plugins, or the
-   store navigation shows an "OpenReceive" entry). If not, install it from the
-   BTCPay plugin directory (Server Settings → Plugins, search "OpenReceive"),
-   as the quickstart says; do not invent an installer command.
+2. Check whether the plugin is installed (the Plugins menu — the plug icon in
+   the top-right corner — under Installed Plugins, or the store navigation
+   shows an "OpenReceive" entry). If not, install it from the BTCPay plugin
+   directory (the same Plugins menu → Plugin Directory, search "openreceive",
+   then Install and Restart now), as the quickstart says; do not invent an
+   installer command.
 3. Check whether the store already has an OpenReceive connection:
    `GET /api/v1/stores/{storeId}/openreceive/settings` returns
    `lightningNodeIsOpenReceive`. If true, the wallet step is done — go to
@@ -119,6 +121,8 @@ enough; drop the `.md` for the same page a person would read.
 Questions, or a problem with the plugin itself:
 https://openreceive.org/contact
 
+- https://openreceive.org/guides/payment-safety-upgrade.md — coordinated upgrades and reviewed repair of existing attempts
+
 ---
 
 ## The quickstart, in full
@@ -131,15 +135,15 @@ passes. The page it comes from is https://openreceive.org/guides/quickstart-btcp
 Requires BTCPay Server ≥ 2.4.4.
 
 The OpenReceive plugin makes a receive-only NWC wallet the Lightning node of a
-BTCPay store. BTCPay mints every Lightning invoice in that wallet and records
-payments through its own settlement machinery. Optionally, payers can pay a
-BTCPay invoice with USDT, USDC, ETH or SOL through a Lightning Swap Connect
-provider; the swap settles into the same wallet. The store's internal node is
+BTCPay store. BTCPay creates every Lightning invoice in that wallet. It records
+payments the same way it records any other payment. You can also let payers pay
+a BTCPay invoice with USDT, USDC, ETH or SOL through a Lightning Swap Connect
+provider. The swap pays into the same wallet. The store's internal node is
 never used.
 
 This is not the Node or Rails library. There are no hooks, no
-`openreceive_payments` table and no OpenReceive HTTP routes: BTCPay's
-invoices, checkout, webhooks and Greenfield API are the host.
+`openreceive_payments` table and no OpenReceive HTTP routes. BTCPay's own
+invoices, checkout, webhooks and Greenfield API do that work.
 
 ### 1. Prerequisites
 
@@ -155,39 +159,66 @@ invoices, checkout, webhooks and Greenfield API are the host.
 
 ### 2. Install the plugin
 
-In BTCPay, open **Server Settings → Plugins**, search the plugin directory
-for **OpenReceive**, click **Install**, and restart BTCPay when prompted.
-BTCPay creates the plugin's one table (`openreceive_swaps`, schema
-`BTCPayServer.Plugins.OpenReceive`) in its own Postgres at startup; nothing
-else is created.
+Sign in as a **server administrator**. If someone else hosts your server, ask
+them to install the plugin for you.
+
+**1. Open the Plugins menu.** It is the plug icon in the top-right corner.
+
+**2. Click Plugin Directory.**
+
+**3. Search for `openreceive`** and click the **OpenReceive** result.
+
+**4. Click Install in BTCPay Server.** Confirm when prompted, then click
+**Restart now** and wait for BTCPay to come back.
+
+At startup, BTCPay creates the plugin's two tables in its own Postgres
+database: `openreceive_invoices` and `openreceive_swaps`, in the schema
+`BTCPayServer.Plugins.OpenReceive`. Nothing else is created.
 
 To build the plugin from source instead, follow
 [the .NET workspace README](https://github.com/OpenReceive/openreceive/blob/master/packages/dotnet/README.md).
 
 ### 3. Connect the wallet
 
-Follow the plugin README's illustrated walkthrough:
-[OpenReceive for BTCPay Server](https://github.com/OpenReceive/openreceive/blob/master/packages/dotnet/BTCPayServer.Plugins.OpenReceive/README.md).
-It opens the **OpenReceive** page in the store's sidebar, saves the
-receive-only NWC code, optionally saves the LSC code to turn swaps on, and
-creates a first test invoice. There is nothing else to configure: you never
-open BTCPay's Lightning node screen, and the plugin never reads the internal
-node.
+1. Select your store and open **OpenReceive** in its sidebar, under Wallets.
+2. Paste your receive-only NWC code. To see what the wallet supports first,
+   click **Test connection**.
+3. Click **Save NWC Code**.
+4. To turn swaps on, paste a Lightning Swap Connect code and click **Save swap
+   settings**.
 
-Saving fails closed if the wallet advertises a spend method such as
-`pay_invoice`. Mint a receive-only code instead; the override for a wallet
-that cannot is a deliberate, logged choice. Swaps raise the store's invoice
-expiration to 60 minutes when it is shorter, because a swap needs at least 45
-minutes of invoice life.
+The page then shows **Wallet connected**. If you set up a provider, it also
+shows **Swaps on**. There is nothing else to configure. You never open BTCPay's
+Lightning node screen, and the plugin never reads the internal node.
+
+Screenshots for each of those steps, and for creating a first test invoice,
+are in the plugin's
+[README](https://github.com/OpenReceive/openreceive/blob/master/packages/dotnet/BTCPayServer.Plugins.OpenReceive/README.md).
+
+The plugin refuses to save a code whose wallet advertises a spend method such
+as `pay_invoice`. Create a receive-only code instead. If your wallet cannot
+make one, there is an override, but using it is a deliberate choice and the
+plugin logs it.
+
+Turning swaps on raises the store's invoice expiration to 60 minutes if it is
+shorter. A swap needs the invoice to stay open for at least 45 minutes.
 
 ### 4. Check it
 
-**Run a health check** on the OpenReceive page runs every probe in place:
-the connection, the wallet preflight, payment notifications, the last wallet
-scan, the swap provider and its assets, the invoice expiration, and swaps
-that need a human. Each failing probe carries a fix link.
+Click **Run a health check** on the OpenReceive page. It runs every check
+right there:
+
+- the connection
+- the wallet preflight
+- payment notifications
+- the last wallet scan
+- the swap provider and its assets
+- the invoice expiration
+- swaps that need a human
+
+Each failing check comes with a link to the fix.
 
-Every setting, Greenfield route, swap state, log event and probe is in the
-[BTCPay plugin reference](https://openreceive.org/guides/btcpay-reference.md), including what is
-unsupported by design: every send-side feature, top-up invoices, and a bare
-`nostr+walletconnect://` string in BTCPay's Lightning node screen.
+The [BTCPay plugin reference](https://openreceive.org/guides/btcpay-reference.md) lists every setting,
+Greenfield route, swap state, log event and check. It also lists what the
+plugin does not support by design: every send-side feature, top-up invoices,
+and a bare `nostr+walletconnect://` string in BTCPay's Lightning node screen.