@oasisprotocol/privana-sdk 0.4.0 → 0.4.2

package/dist/on-ramp.js

@@ -1,8 +1,9 @@
 "use client";
-import { usePrivanaContext, usePrivateReadRequest, useDepositVerification, getTransactionReceipt, Button } from './chunk-ZVNC4FTJ.js';
+import { usePrivanaContext, usePrivateReadRequest, useDepositVerification, waitForTransactionReceipt, Skeleton, Button } from './chunk-ZXFQJ5MG.js';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { parseAbiItem, zeroAddress, parseUnits, decodeEventLog, formatUnits } from 'viem';
 import { useConfig, useAccount } from 'wagmi';
+import { Loader2 } from 'lucide-react';
 import { MoonPayBuyWidget } from '@moonpay/moonpay-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -28,6 +29,7 @@ function useFiatOnRamp(options) {
   const [depositAddress, setDepositAddress] = useState();
   const [minDepositBaseUnits, setMinDepositBaseUnits] = useState();
   const [activeIntentId, setActiveIntentId] = useState(null);
+  const [finalityProgress, setFinalityProgress] = useState({});
   const onCreditedRef = useRef(onCredited);
   const onErrorRef = useRef(onError);
   const onDebugEventRef = useRef(onDebugEvent);
@@ -37,6 +39,7 @@ function useFiatOnRamp(options) {
   const activeVerificationKeyRef = useRef(null);
   const triggeredVerificationKeysRef = useRef(/* @__PURE__ */ new Set());
   const closeReconcilePromiseRef = useRef(null);
+  const purchaseInitiatedRef = useRef(false);
   useEffect(() => {
     onCreditedRef.current = onCredited;
     onErrorRef.current = onError;
@@ -132,13 +135,32 @@ function useFiatOnRamp(options) {
     pollTimeout: verificationTimeout,
     pollInterval: options.verificationPollInterval,
     finalityRetryInterval,
+    onCheckRetry: (message) => {
+      const record = activeVerificationRecordRef.current;
+      if (!record) return;
+      emitDebug("verification:check-retry", {
+        message,
+        record: summariseOnRampRecord(record)
+      });
+      setFinalityProgress((prev) => ({ ...prev, [record.transaction_id]: message }));
+    },
     onCredited: (depositTxHash) => {
       const record = activeVerificationRecordRef.current;
       emitDebug("verification:credited", {
         depositTxHash,
         record: record ? summariseOnRampRecord(record) : null
       });
-      setStatus("credited");
+      if (record && activeIntentIdRef.current === record.transaction_id) {
+        setStatus("credited");
+      }
+      if (record) {
+        setFinalityProgress((prev) => {
+          if (!(record.transaction_id in prev)) return prev;
+          const next = { ...prev };
+          delete next[record.transaction_id];
+          return next;
+        });
+      }
       void (async () => {
         try {
           if (record && depositTxHash.startsWith("0x")) {
@@ -170,21 +192,27 @@ function useFiatOnRamp(options) {
       onCreditedRef.current?.(depositTxHash);
     },
     onCheckTimeout: (depositTxHash) => {
+      const record = activeVerificationRecordRef.current;
       const err = new Error(
         "Privana verification is still pending. Retry from the pending on-ramp list if it does not complete."
       );
       emitDebug("verification:timeout", { depositTxHash, message: err.message });
       clearActiveVerification();
-      setStatus("failed");
-      setError(err);
+      if (!record || activeIntentIdRef.current === record.transaction_id) {
+        setStatus("failed");
+        setError(err);
+      }
       void refreshPending();
       onErrorRef.current?.(err);
     },
     onError: (err) => {
+      const record = activeVerificationRecordRef.current;
       emitDebug("verification:error", errorPayload(err));
       clearActiveVerification();
-      setStatus("failed");
-      setError(err);
+      if (!record || activeIntentIdRef.current === record.transaction_id) {
+        setStatus("failed");
+        setError(err);
+      }
       onErrorRef.current?.(err);
     }
   });
@@ -196,6 +224,7 @@ function useFiatOnRamp(options) {
     }) => {
       try {
         setError(null);
+        purchaseInitiatedRef.current = false;
         const token = enabledTokens.find((t) => t.id.toLowerCase() === tokenId.toLowerCase());
         if (!token) throw new Error(`Unknown token: ${tokenId}`);
         if (!depositAddress) throw new Error("Privana deposit address is not ready");
@@ -278,6 +307,7 @@ function useFiatOnRamp(options) {
   const handleTransactionCreated = useCallback(
     async (props) => {
       emitDebug("moonpay:onTransactionCreated", summariseMoonPayEventProps(props));
+      purchaseInitiatedRef.current = true;
       await registerOnRampTokenMapping(props.id);
     },
     [emitDebug, registerOnRampTokenMapping]
@@ -356,6 +386,12 @@ function useFiatOnRamp(options) {
       triggeredVerificationKeysRef.current.add(verificationKey);
       activeVerificationKeyRef.current = verificationKey;
       activeVerificationRecordRef.current = record;
+      setFinalityProgress((prev) => {
+        if (!(record.transaction_id in prev)) return prev;
+        const next = { ...prev };
+        delete next[record.transaction_id];
+        return next;
+      });
       emitDebug("verification:start", {
         verificationKey,
         record: summariseOnRampRecord(record)
@@ -396,7 +432,9 @@ function useFiatOnRamp(options) {
             `Delivered amount (${record.quote_currency_amount}) is below the minimum deposit.`
           );
         }
-        setStatus("verifying");
+        if (activeIntentIdRef.current === record.transaction_id) {
+          setStatus("verifying");
+        }
         emitDebug("verification:check-deposit-request", {
           hash: record.on_chain_tx_hash,
           chainId: record.chain_id,
@@ -464,6 +502,17 @@ function useFiatOnRamp(options) {
         await refreshPending();
         return;
       }
+      if (!purchaseInitiatedRef.current) {
+        emitDebug("moonpay:widget-closed-without-purchase", {
+          previousStatus,
+          transactionId
+        });
+        await refreshPending();
+        if (previousStatus === "awaiting-purchase" || previousStatus === "awaiting-delivery") {
+          setStatus("idle");
+        }
+        return;
+      }
       try {
         setStatus("awaiting-delivery");
         const record = await waitForOnChainHash(transactionId);
@@ -502,15 +551,39 @@ function useFiatOnRamp(options) {
         setStatus("failed");
         setError(e);
         onErrorRef.current?.(e);
+        throw e;
       }
     },
     [emitDebug, triggerVerification]
   );
+  const triggerVerificationRef = useRef(triggerVerification);
+  useEffect(() => {
+    triggerVerificationRef.current = triggerVerification;
+  }, [triggerVerification]);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      for (const record of pending) {
+        if (cancelled) break;
+        if (!record.on_chain_tx_hash || !record.quote_currency_amount) continue;
+        const key = getOnRampVerificationKey(record);
+        if (triggeredVerificationKeysRef.current.has(key)) continue;
+        try {
+          await triggerVerificationRef.current(record);
+        } catch {
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [pending]);
   return {
     status,
     activeIntentId,
     pending,
     error,
+    finalityProgress,
     depositAddress,
     minDepositBaseUnits,
     selectedToken,
@@ -562,9 +635,11 @@ async function resolveDeliveredAmount({
   }
   let receiptError;
   try {
-    const receipt = await getTransactionReceipt(wagmiConfig, {
+    const receipt = await waitForTransactionReceipt(wagmiConfig, {
       hash: onChainTxHash,
-      chainId
+      chainId,
+      timeout: 6e4,
+      pollingInterval: 4e3
     });
     let delivered = 0n;
     for (const log of receipt.logs) {
@@ -662,6 +737,12 @@ function FiatOnRampForm({
   baseCurrencyCode = "usd",
   defaultBaseCurrencyAmount = "100",
   tokenSymbol,
+  theme,
+  themeId,
+  colorCode,
+  variant = "overlay",
+  lockAmount,
+  paymentMethod,
   onCredited,
   onError,
   onDebugEvent
@@ -669,11 +750,13 @@ function FiatOnRampForm({
   const { address } = useAccount();
   const [visible, setVisible] = useState(false);
   const [isPreparing, setIsPreparing] = useState(false);
+  const [rowError, setRowError] = useState(null);
   const {
     status,
     activeIntentId,
     pending,
     error,
+    finalityProgress,
     depositAddress,
     minDepositBaseUnits,
     selectedToken,
@@ -686,6 +769,10 @@ function FiatOnRampForm({
   } = useFiatOnRamp({ tokenId, onCredited, onError, onDebugEvent });
   const decimals = selectedToken?.decimals;
   const displaySymbol = tokenSymbol ?? selectedToken?.symbol ?? currencyCode.toUpperCase();
+  const overlayNode = useMemo(
+    () => variant === "overlay" ? buildOverlayNode() : void 0,
+    [variant]
+  );
   const emitFormDebug = useCallback(
     (event, payload) => {
       onDebugEvent?.({
@@ -700,15 +787,17 @@ function FiatOnRampForm({
   );
   const minFiatGate = minDepositBaseUnits !== void 0 && decimals !== void 0 ? Number(formatUnits(minDepositBaseUnits, decimals)) * 1.05 : void 0;
   const isBelowMin = minFiatGate !== void 0 && Number(defaultBaseCurrencyAmount) < minFiatGate;
-  const isBusy = isPreparing || status === "awaiting-purchase" || status === "awaiting-delivery" || status === "verifying";
+  const isBusy = isPreparing || status === "awaiting-purchase";
+  const isInitializing = !!address && !depositAddress;
   const blockReasons = useMemo(
     () => [
       !address ? "wallet-not-connected" : null,
       !depositAddress ? "deposit-address-not-loaded" : null,
       isBusy ? `busy:${isPreparing ? "preparing" : status}` : null,
+      visible ? "widget-open" : null,
       isBelowMin ? "below-minimum" : null
     ].filter((reason) => Boolean(reason)),
-    [address, depositAddress, isBelowMin, isBusy, isPreparing, status]
+    [address, depositAddress, isBelowMin, isBusy, isPreparing, status, visible]
   );
   const canBuy = blockReasons.length === 0;
   const handleOpen = useCallback(async () => {
@@ -783,11 +872,10 @@ function FiatOnRampForm({
   const handleReady = useCallback(async () => {
     emitFormDebug("moonpay:onReady");
   }, [emitFormDebug]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleOpen, children: isPreparing ? "Preparing MoonPay\u2026" : isBusy ? statusLabel(status) : `Buy ${displaySymbol}` }),
-    !canBuy && !isBusy && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
-      "Button blocked: ",
-      blockReasons.join(", ")
+  return /* @__PURE__ */ jsxs("div", { "data-privana": true, className: "flex flex-col gap-4", children: [
+    isInitializing ? /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full rounded-md" }) : /* @__PURE__ */ jsxs(Button, { type: "button", onClick: handleOpen, disabled: !canBuy, children: [
+      (isBusy || visible) && /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", "aria-hidden": true }),
+      "Buy"
     ] }),
     error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", role: "alert", children: error.message }),
     isBelowMin && minFiatGate !== void 0 && /* @__PURE__ */ jsxs("p", { className: "text-destructive text-sm", role: "alert", children: [
@@ -796,32 +884,68 @@ function FiatOnRampForm({
       "."
     ] }),
     pending.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Finish verification" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "MoonPay delivered your purchase, but Privana hasn't verified it yet. Resume verification now to credit your balance." }),
-      pending.map((record) => /* @__PURE__ */ jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          disabled: isBusy,
-          onClick: () => finishPendingVerification(record),
-          children: [
-            record.quote_currency_amount ?? "?",
-            " ",
-            displaySymbol
-          ]
-        },
-        record.transaction_id
-      ))
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Pending payments" }),
+      pending.map((record) => {
+        const progress = parseFinalityProgress(finalityProgress[record.transaction_id]);
+        const hasProgress = !!finalityProgress[record.transaction_id];
+        const isStalled = !hasProgress && Date.now() / 1e3 - (record.updated_at ?? 0) > 60;
+        const showRetry = rowError?.id === record.transaction_id || isStalled;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "border-border flex flex-col gap-1 rounded-md border p-2",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground flex items-center gap-1 text-xs", children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin", "aria-hidden": true }),
+                  progress ?? "Verifying\u2026"
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
+                  record.quote_currency_amount ?? "?",
+                  " ",
+                  displaySymbol
+                ] })
+              ] }),
+              rowError?.id === record.transaction_id && /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: rowError.message }),
+              showRetry && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  onClick: async () => {
+                    setRowError(null);
+                    try {
+                      await finishPendingVerification(record);
+                    } catch (err) {
+                      setRowError({
+                        id: record.transaction_id,
+                        message: err instanceof Error ? err.message : "Verification failed"
+                      });
+                    }
+                  },
+                  children: "Retry"
+                }
+              )
+            ]
+          },
+          record.transaction_id
+        );
+      })
     ] }),
     visible && depositAddress && activeIntentId && /* @__PURE__ */ jsx(
       MoonPayBuyWidget,
       {
-        variant: "overlay",
+        variant,
         visible: true,
+        theme,
+        themeId,
+        colorCode,
+        overlayNode,
         baseCurrencyCode,
         baseCurrencyAmount: defaultBaseCurrencyAmount,
+        lockAmount: lockAmount ? "true" : void 0,
+        paymentMethod,
         currencyCode,
         walletAddress: depositAddress,
         externalCustomerId: address?.toLowerCase(),
@@ -836,21 +960,17 @@ function FiatOnRampForm({
     )
   ] });
 }
-function statusLabel(status) {
-  switch (status) {
-    case "awaiting-purchase":
-      return "Complete your purchase\u2026";
-    case "awaiting-delivery":
-      return "Waiting for on-chain delivery\u2026";
-    case "verifying":
-      return "Verifying with Privana\u2026";
-    case "credited":
-      return "Credited";
-    case "failed":
-      return "Failed";
-    default:
-      return "";
-  }
+function parseFinalityProgress(message) {
+  if (!message) return null;
+  const match = message.match(/(\d+\/\d+)\s+confirmations/i);
+  return match ? `${match[1]} confirmations` : null;
+}
+function buildOverlayNode() {
+  if (typeof document === "undefined") return void 0;
+  const wrap = document.createElement("div");
+  wrap.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:12px";
+  wrap.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="139" height="20.61" viewBox="0 0 139 20.61"><path d="M15.08,20.61L10.49,20.61L10.49,0.00L17.96,0.00L18.81,0.02L19.62,0.10L20.38,0.22L21.11,0.39L21.79,0.60L22.43,0.87L23.03,1.18L23.58,1.53L24.08,1.92L24.53,2.35L24.93,2.82L25.29,3.33L25.59,3.88L25.84,4.47L26.03,5.09L26.17,5.75L26.25,6.44L26.28,7.17L26.28,7.17L26.28,7.62L26.25,8.33L26.17,9.01L26.03,9.66L25.84,10.27L25.59,10.86L25.29,11.41L24.93,11.93L24.53,12.40L24.08,12.83L23.58,13.23L23.03,13.58L22.43,13.89L21.79,14.15L21.11,14.37L20.38,14.54L19.62,14.66L18.81,14.73L17.96,14.76L17.96,14.76L15.08,14.76L15.08,20.61ZM18.19,3.98L15.08,3.98L15.08,10.78L18.19,10.78L18.53,10.77L18.87,10.73L19.18,10.68L19.48,10.59L19.76,10.49L20.02,10.36L20.27,10.21L20.50,10.04L20.70,9.85L20.89,9.64L21.06,9.42L21.21,9.17L21.34,8.91L21.45,8.63L21.53,8.34L21.59,8.04L21.62,7.72L21.63,7.39L21.63,7.39L21.62,7.05L21.59,6.72L21.53,6.40L21.45,6.10L21.34,5.82L21.21,5.56L21.06,5.31L20.89,5.09L20.70,4.88L20.50,4.69L20.27,4.53L20.02,4.38L19.76,4.26L19.48,4.16L19.18,4.08L18.87,4.02L18.53,3.99L18.19,3.98L18.19,3.98ZM31.76,20.61L27.16,20.61L27.16,0.00L35.20,0.00L36.03,0.02L36.82,0.09L37.58,0.19L38.30,0.34L38.98,0.53L39.62,0.77L40.23,1.05L40.78,1.37L41.28,1.73L41.74,2.13L42.15,2.57L42.51,3.05L42.82,3.58L43.07,4.15L43.26,4.76L43.40,5.42L43.49,6.12L43.52,6.86L43.52,6.86L43.52,7.31L43.49,8.04L43.40,8.73L43.26,9.38L43.07,9.98L42.82,10.54L42.51,11.06L42.51,11.06L42.15,11.53L41.75,11.97L41.30,12.36L40.80,12.72L40.26,13.03L39.68,13.30L39.68,13.30L44.89,20.61L39.57,20.61L35.12,14.06L31.76,14.06L31.76,20.61ZM35.56,3.89L31.76,3.89L31.76,10.44L35.56,10.44L35.89,10.43L36.21,10.40L36.51,10.34L36.79,10.26L37.06,10.16L37.31,10.04L37.55,9.89L37.77,9.73L37.97,9.55L38.15,9.35L38.32,9.13L38.46,8.89L38.59,8.64L38.69,8.37L38.77,8.09L38.82,7.79L38.86,7.49L38.87,7.17L38.86,6.85L38.82,6.54L38.77,6.25L38.69,5.97L38.59,5.70L38.46,5.45L38.32,5.21L38.15,4.99L37.97,4.79L37.77,4.61L37.55,4.44L37.31,4.30L37.06,4.17L36.79,4.07L36.51,3.99L36.21,3.94L35.89,3.90L35.56,3.89L35.56,3.89ZM50.25,20.61L45.66,20.61L45.66,0.17L50.25,0.17L50.25,20.61ZM64.88,20.61L57.41,20.61L51.19,0.17L55.92,0.17L60.71,16.88L61.66,16.88L66.09,0.17L70.68,0.17L64.88,20.61ZM71.44,20.61L66.85,20.61L73.60,0.17L81.02,0.17L88.02,20.61L83.26,20.61L81.61,15.54L73.07,15.54L71.44,20.61ZM74.27,11.73L80.35,11.73L77.80,3.92L76.76,3.92L74.27,11.73ZM92.94,20.61L88.68,20.61L88.68,0.17L96.21,0.17L103.91,16.88L104.30,16.88L104.30,0.17L108.62,0.17L108.62,20.61L101.03,20.61L93.33,3.89L92.94,3.89L92.94,20.61ZM113.87,20.61L109.28,20.61L116.02,0.17L123.44,0.17L130.44,20.61L125.68,20.61L124.03,15.54L115.49,15.54L113.87,20.61ZM116.70,11.73L122.77,11.73L120.22,3.92L119.19,3.92L116.70,11.73Z" fill="#ffffff"/></svg><span>Your secure checkout is loading</span>`;
+  return wrap;
 }
 
 export { FiatOnRampForm, useFiatOnRamp };