@rhinestone/deposit-modal 0.6.0 → 0.7.0

package/dist/{chunk-GQDVHMOT.mjs → chunk-OYPFPEIT.mjs}

@@ -13,7 +13,7 @@ import {
   getTokenSymbol,
   isSolanaCaip2,
   parseEvmChainId
-} from "./chunk-WJX3TJFK.mjs";
+} from "./chunk-CPMHRMPH.mjs";
 
 // src/components/ui/Modal.tsx
 import {
@@ -538,6 +538,7 @@ function createDepositService(baseUrl, options) {
   }
   const PORTFOLIO_CACHE_TTL_MS = 3e4;
   const portfolioCache = /* @__PURE__ */ new Map();
+  let topTokensPromise = null;
   function cachedPortfolio(key, fetcher, forceRefresh = false) {
     const now = Date.now();
     const entry = portfolioCache.get(key);
@@ -642,7 +643,7 @@ function createDepositService(baseUrl, options) {
     },
     async fetchPortfolio(address, options2) {
       return cachedPortfolio(`evm:${address.toLowerCase()}`, async () => {
-        const url = apiUrl(`/portfolio/${address}`);
+        const url = apiUrl(`/portfolio/${address}?includeUnsupported=true`);
         debugLog(debug, scope, "fetchPortfolio:request", { url, address });
         const response = await fetch(url, {
           method: "GET",
@@ -1178,6 +1179,60 @@ function createDepositService(baseUrl, options) {
         stale: body.stale === true ? true : void 0
       };
     },
+    getTopTokens() {
+      if (!topTokensPromise) {
+        topTokensPromise = (async () => {
+          try {
+            const response = await fetch(apiUrl("/tokens"), {
+              method: "GET",
+              headers: { "Content-Type": "application/json" }
+            });
+            if (!response.ok) {
+              debugLog(debug, scope, "getTopTokens:unavailable", {
+                status: response.status
+              });
+              return null;
+            }
+            const data = await response.json();
+            const tokens = data.tokens ?? null;
+            debugLog(debug, scope, "getTopTokens:success", {
+              chains: tokens ? Object.keys(tokens).length : 0
+            });
+            return tokens;
+          } catch (error) {
+            debugError(debug, scope, "getTopTokens:error", error);
+            return null;
+          }
+        })();
+      }
+      return topTokensPromise;
+    },
+    async getSetup() {
+      const url = apiUrl("/setup");
+      try {
+        const response = await fetch(url, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store"
+        });
+        if (!response.ok) {
+          debugLog(debug, scope, "getSetup:unavailable", {
+            status: response.status
+          });
+          return null;
+        }
+        const data = await response.json();
+        debugLog(debug, scope, "getSetup:success", {
+          hasWhitelist: Boolean(data.depositWhitelist),
+          whitelistChains: data.depositWhitelist ? Object.keys(data.depositWhitelist).length : 0,
+          minDepositUsd: data.minDepositUsd
+        });
+        return data;
+      } catch (error) {
+        debugError(debug, scope, "getSetup:error", error);
+        return null;
+      }
+    },
     async fetchSwappedOrderStatus(smartAccount) {
       const url = apiUrl(
         `/onramp/swapped/status/${encodeURIComponent(smartAccount)}`
@@ -1198,7 +1253,16 @@ function createDepositService(baseUrl, options) {
       const status = typeof body.status === "string" ? body.status : null;
       const orderId = typeof body.orderId === "string" ? body.orderId : null;
       if (!status || !orderId) return null;
-      const numericOrNull = (v) => typeof v === "number" && Number.isFinite(v) ? v : null;
+      const numericOrNull = (v) => {
+        if (typeof v === "number") {
+          return Number.isFinite(v) ? v : null;
+        }
+        if (typeof v === "string" && v.trim().length > 0) {
+          const parsed = Number(v);
+          return Number.isFinite(parsed) ? parsed : null;
+        }
+        return null;
+      };
       return {
         orderId,
         status,
@@ -2231,7 +2295,7 @@ function VisaMark() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx17("rect", { width: "37.2537", height: "24", rx: "4.2985", fill: "white" }),
+        /* @__PURE__ */ jsx17("rect", { width: "38", height: "24", rx: "4.2985", fill: "white" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
@@ -2254,7 +2318,7 @@ function MastercardMark() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx17("rect", { width: "37.2537", height: "24", rx: "4.2985", fill: "white" }),
+        /* @__PURE__ */ jsx17("rect", { width: "38", height: "24", rx: "4.2985", fill: "white" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
@@ -2298,7 +2362,7 @@ function AmexMark() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx17("rect", { width: "37.2537", height: "24", rx: "4.2985", fill: "#006FCF" }),
+        /* @__PURE__ */ jsx17("rect", { width: "38", height: "24", rx: "4.2985", fill: "#006FCF" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
@@ -2346,12 +2410,12 @@ function rankCryptoRows(descriptors) {
   return descriptors.map((descriptor, index) => ({ descriptor, index })).sort((a, b) => {
     const first = a.descriptor;
     const second = b.descriptor;
-    if (first.isBalanceSource !== second.isBalanceSource) {
-      return first.isBalanceSource ? -1 : 1;
-    }
-    if (!first.isBalanceSource) return a.index - b.index;
-    if (first.resolved !== second.resolved) return first.resolved ? -1 : 1;
-    if (first.resolved && first.balanceUsd !== second.balanceUsd) {
+    const firstHasFunds = first.isBalanceSource && first.resolved && first.balanceUsd > 0;
+    const secondHasFunds = second.isBalanceSource && second.resolved && second.balanceUsd > 0;
+    const firstTier = firstHasFunds ? 0 : first.isBalanceSource ? 2 : 1;
+    const secondTier = secondHasFunds ? 0 : second.isBalanceSource ? 2 : 1;
+    if (firstTier !== secondTier) return firstTier - secondTier;
+    if (firstTier === 0 && first.balanceUsd !== second.balanceUsd) {
       return second.balanceUsd - first.balanceUsd;
     }
     return a.index - b.index;
@@ -2826,21 +2890,25 @@ Tooltip.displayName = "Tooltip";
 // src/components/ui/FeesAccordion.tsx
 import { useState as useState3 } from "react";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-function FeesAccordion({ total, rows }) {
+function FeesAccordion({ total, rows, tooltip }) {
   const [open, setOpen] = useState3(false);
   const expandable = rows.length > 0;
   return /* @__PURE__ */ jsxs19("div", { className: "rs-fees-accordion", children: [
-    /* @__PURE__ */ jsxs19(
-      "button",
-      {
-        type: "button",
-        className: "rs-fees-accordion-summary",
-        "aria-expanded": expandable ? open : void 0,
-        disabled: !expandable,
-        onClick: () => expandable && setOpen((o) => !o),
-        children: [
-          /* @__PURE__ */ jsx21("span", { children: "Fees" }),
-          /* @__PURE__ */ jsxs19("span", { className: "rs-review-detail-value", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "rs-fees-accordion-summary", children: [
+      /* @__PURE__ */ jsxs19("span", { className: "rs-fees-accordion-label", children: [
+        /* @__PURE__ */ jsx21("span", { children: "Fees" }),
+        tooltip && /* @__PURE__ */ jsx21(Tooltip, { content: tooltip, children: /* @__PURE__ */ jsx21("span", { className: "rs-review-detail-info", "aria-label": "Fees info", children: /* @__PURE__ */ jsx21(InfoIcon, {}) }) })
+      ] }),
+      /* @__PURE__ */ jsxs19(
+        "button",
+        {
+          type: "button",
+          className: "rs-fees-accordion-toggle",
+          "aria-label": "Fees",
+          "aria-expanded": expandable ? open : void 0,
+          disabled: !expandable,
+          onClick: () => expandable && setOpen((o) => !o),
+          children: [
             /* @__PURE__ */ jsx21("span", { children: total }),
             expandable && /* @__PURE__ */ jsx21(
               "span",
@@ -2850,13 +2918,29 @@ function FeesAccordion({ total, rows }) {
                 children: /* @__PURE__ */ jsx21(ChevronDownIcon, {})
               }
             )
-          ] })
-        ]
-      }
-    ),
+          ]
+        }
+      )
+    ] }),
     expandable && open && /* @__PURE__ */ jsx21("div", { className: "rs-fees-accordion-rows", children: rows.map((row, i) => /* @__PURE__ */ jsxs19("div", { className: "rs-fees-accordion-row", children: [
       /* @__PURE__ */ jsx21("span", { children: row.label }),
-      /* @__PURE__ */ jsx21("span", { className: "rs-review-detail-value", children: row.value })
+      /* @__PURE__ */ jsxs19("span", { className: "rs-review-detail-value", children: [
+        /* @__PURE__ */ jsx21(
+          "span",
+          {
+            className: row.strike ? "rs-review-detail-value--strike" : void 0,
+            children: row.value
+          }
+        ),
+        row.tooltip && /* @__PURE__ */ jsx21(Tooltip, { content: row.tooltip, children: /* @__PURE__ */ jsx21(
+          "span",
+          {
+            className: "rs-review-detail-info",
+            "aria-label": `${row.label} info`,
+            children: /* @__PURE__ */ jsx21(InfoIcon, {})
+          }
+        ) })
+      ] })
     ] }, `${row.label}-${i}`)) })
   ] });
 }
@@ -2872,6 +2956,7 @@ function SwappedReceipt({
   depositedIcon,
   feesTotal,
   feeRows,
+  feesTooltip,
   newLabel,
   onNewDeposit,
   onClose
@@ -2892,13 +2977,20 @@ function SwappedReceipt({
           /* @__PURE__ */ jsx22("span", { className: "rs-review-detail-value", children: amountPaid })
         ] }),
         /* @__PURE__ */ jsxs20("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx22("span", { children: "Receive" }),
+          /* @__PURE__ */ jsx22("span", { children: "Deposited amount" }),
           /* @__PURE__ */ jsxs20("span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ jsx22("span", { children: depositedAmount }),
             depositedIcon && /* @__PURE__ */ jsx22("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx22("img", { src: depositedIcon, alt: "" }) })
           ] })
         ] }),
-        feesTotal != null && /* @__PURE__ */ jsx22(FeesAccordion, { total: feesTotal, rows: feeRows ?? [] })
+        feesTotal != null && /* @__PURE__ */ jsx22(
+          FeesAccordion,
+          {
+            total: feesTotal,
+            rows: feeRows ?? [],
+            tooltip: feesTooltip ?? void 0
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs20("div", { className: "rs-screen-button-row", children: [
         onNewDeposit && /* @__PURE__ */ jsx22(Button, { variant: "outline", onClick: onNewDeposit, fullWidth: true, children: newLabel }),
@@ -3252,6 +3344,8 @@ function FailedBadge() {
 var INITIAL_POLL_INTERVAL = 3e3;
 var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
+var SWAPPED_RECEIPT_STATUS_RETRY_INTERVAL_MS = 1e3;
+var SWAPPED_FIAT_STATUS_MAX_ATTEMPTS = 12;
 var ESCALATED_DELAY_MS = 10 * 60 * 1e3;
 var SOFT_DELAY_MS = {
   confirming: 90 * 1e3,
@@ -3282,6 +3376,36 @@ function formatPaymentMethod(method) {
   if (PAYMENT_METHOD_LABELS[key]) return PAYMENT_METHOD_LABELS[key];
   return key.replace(/[-_]+/g, " ").split(" ").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
+function normalizeFeeUsd(value) {
+  return Number.isFinite(value) ? Math.max(0, value) : null;
+}
+function formatUsdFee(value) {
+  return `$${normalizeFeeUsd(value)?.toFixed(2) ?? "0.00"}`;
+}
+function getMarketNetworkFees(breakdown) {
+  if (!breakdown) return null;
+  const gasUsd = normalizeFeeUsd(breakdown.gasUsd);
+  const bridgeUsd = normalizeFeeUsd(breakdown.bridgeUsd);
+  const swapUsd = normalizeFeeUsd(breakdown.swapUsd);
+  if (gasUsd === null || bridgeUsd === null || swapUsd === null) return null;
+  return {
+    marketUsd: bridgeUsd + swapUsd,
+    networkUsd: gasUsd
+  };
+}
+function toSwappedFiatContext(status) {
+  return {
+    orderCrypto: status.orderCrypto,
+    orderCryptoAmount: status.orderCryptoAmount,
+    paidAmountUsd: status.paidAmountUsd,
+    paidAmountEur: status.paidAmountEur,
+    onrampFeeUsd: status.onrampFeeUsd,
+    paymentMethod: status.paymentMethod
+  };
+}
+function hasFiatReceiptPricing(status) {
+  return status.paidAmountUsd != null && status.onrampFeeUsd != null;
+}
 function loadPhaseTimings(txHash) {
   if (typeof window === "undefined") return null;
   try {
@@ -3382,6 +3506,59 @@ function getCurrentPhaseId(state, phaseTimings) {
   if (state.lastEvent?.type === "deposit-received") return "received";
   return "confirming";
 }
+function getCompletionDestinationTxHash(event) {
+  const eventData = event?.data;
+  const swapTxHash = eventData?.swap?.transactionHash;
+  const destinationTxHash = eventData?.destination?.transactionHash;
+  return swapTxHash ?? destinationTxHash;
+}
+function getTerminalProcessingOutcome(event) {
+  if (event?.type === "post-bridge-swap-complete") {
+    return {
+      type: "complete",
+      destinationTxHash: getCompletionDestinationTxHash(event)
+    };
+  }
+  if (event?.type === "post-bridge-swap-failed") {
+    return {
+      type: "failed",
+      message: formatBridgeFailedMessage(event).message
+    };
+  }
+  if (event?.type === "bridge-complete") {
+    return {
+      type: "complete",
+      destinationTxHash: getCompletionDestinationTxHash(event)
+    };
+  }
+  if (event?.type === "bridge-failed") {
+    return {
+      type: "failed",
+      message: formatBridgeFailedMessage(event).message
+    };
+  }
+  if (event?.type === "error") {
+    return {
+      type: "failed",
+      message: event.data?.message ?? "Unknown error"
+    };
+  }
+  return null;
+}
+function getInitialProcessingState(event, txHash) {
+  if (!event || !isEventForTx(event, txHash)) return null;
+  const terminal = getTerminalProcessingOutcome(event);
+  if (terminal?.type === "complete") {
+    return { type: "complete", lastEvent: event };
+  }
+  if (terminal?.type === "failed") {
+    return { type: "failed", message: terminal.message, lastEvent: event };
+  }
+  if (isDepositEvent(event)) {
+    return { type: "processing", lastEvent: event };
+  }
+  return null;
+}
 function ProcessingStep({
   smartAccount,
   solanaDepositAddress,
@@ -3395,12 +3572,14 @@ function ProcessingStep({
   amountUsd,
   service,
   directTransfer,
+  initialEvent,
   flowLabel = "deposit",
   debug,
   targetToken,
   uiConfig,
   quotedFeeAmount,
   quotedFeeSymbol,
+  quoteFeeBreakdown,
   balanceAfterUsd,
   isSwappedOrder,
   swappedContext,
@@ -3427,9 +3606,21 @@ function ProcessingStep({
   const onDepositCompleteRef = useLatestRef(onDepositComplete);
   const onDepositFailedRef = useLatestRef(onDepositFailed);
   const onErrorRef = useLatestRef(onError);
-  const [state, setState] = useState5(
-    directTransfer ? { type: "complete" } : { type: "processing" }
-  );
+  const initialTerminalEventRef = useRef4(null);
+  const [state, setState] = useState5(() => {
+    if (directTransfer) return { type: "complete" };
+    const initial = getInitialProcessingState(
+      initialEvent,
+      txHash
+    );
+    if (initial) {
+      if (initial.type !== "processing") {
+        initialTerminalEventRef.current = initial.lastEvent ?? null;
+      }
+      return initial;
+    }
+    return { type: "processing" };
+  });
   const [elapsedSeconds, setElapsedSeconds] = useState5(0);
   const [phaseTimings, setPhaseTimings] = useState5(() => {
     const saved = loadPhaseTimings(txHash);
@@ -3481,6 +3672,43 @@ function ProcessingStep({
     txHash,
     updatePhaseTimings
   ]);
+  useEffect6(() => {
+    const event = initialTerminalEventRef.current;
+    if (!event) return;
+    initialTerminalEventRef.current = null;
+    const outcome = getTerminalProcessingOutcome(event);
+    if (!outcome) return;
+    if (outcome.type === "complete") {
+      const context = processingContextRef.current;
+      debugLog(debug, "processing", "initial-event:complete", {
+        txHash,
+        destinationTxHash: outcome.destinationTxHash,
+        event: event.type
+      });
+      onDepositCompleteRef.current?.(txHash, outcome.destinationTxHash, {
+        amount: context.amount,
+        sourceChain: context.sourceChain,
+        sourceToken: context.sourceToken,
+        sourceDecimals: context.sourceDecimals,
+        amountUsd: context.amountUsd,
+        targetChain: context.targetChain,
+        targetToken: context.targetToken
+      });
+      return;
+    }
+    debugLog(debug, "processing", "initial-event:failed", {
+      txHash,
+      message: outcome.message,
+      event: event.type
+    });
+    onDepositFailedRef.current?.(txHash, outcome.message);
+  }, [
+    debug,
+    onDepositCompleteRef,
+    onDepositFailedRef,
+    processingContextRef,
+    txHash
+  ]);
   useEffect6(() => {
     if (directTransfer || state.type !== "processing") return;
     const updateElapsed = () => {
@@ -3509,27 +3737,61 @@ function ProcessingStep({
   const [swappedFiatContext, setSwappedFiatContext] = useState5(null);
   useEffect6(() => {
     let cancelled = false;
-    service.fetchSwappedOrderStatus(smartAccount).then((res) => {
-      if (cancelled || !res) return;
-      if (res.transactionId != null) {
-        if (res.transactionId.toLowerCase() !== txHash.toLowerCase()) return;
-      } else if (!isSwappedOrder || swappedContext?.variant === "connect") {
+    let timeoutId;
+    const isFiatSwappedOrder = isSwappedOrder && swappedContext?.variant === "fiat";
+    const expectedOrderUuid = swappedContext?.expectedOrderUuid ?? null;
+    setSwappedFiatContext(null);
+    if (isFiatSwappedOrder && !expectedOrderUuid) {
+      return () => {
+        cancelled = true;
+      };
+    }
+    let attempts = 0;
+    const matchesCurrentDeposit = (res) => {
+      if (isFiatSwappedOrder) {
+        return res.orderId === expectedOrderUuid;
+      }
+      return res.transactionId != null && res.transactionId.toLowerCase() === txHash.toLowerCase();
+    };
+    const scheduleRetry = () => {
+      if (cancelled || !isFiatSwappedOrder || attempts >= SWAPPED_FIAT_STATUS_MAX_ATTEMPTS) {
         return;
       }
-      setSwappedFiatContext({
-        orderCrypto: res.orderCrypto,
-        orderCryptoAmount: res.orderCryptoAmount,
-        paidAmountUsd: res.paidAmountUsd,
-        paidAmountEur: res.paidAmountEur,
-        onrampFeeUsd: res.onrampFeeUsd,
-        paymentMethod: res.paymentMethod
-      });
-    }).catch(() => {
-    });
+      timeoutId = setTimeout(
+        fetchContext,
+        SWAPPED_RECEIPT_STATUS_RETRY_INTERVAL_MS
+      );
+    };
+    async function fetchContext() {
+      attempts += 1;
+      try {
+        const res = await service.fetchSwappedOrderStatus(smartAccount);
+        if (cancelled) return;
+        if (!res || !matchesCurrentDeposit(res)) {
+          scheduleRetry();
+          return;
+        }
+        setSwappedFiatContext(toSwappedFiatContext(res));
+        if (isFiatSwappedOrder && !hasFiatReceiptPricing(res)) {
+          scheduleRetry();
+        }
+      } catch {
+        scheduleRetry();
+      }
+    }
+    fetchContext();
     return () => {
       cancelled = true;
+      if (timeoutId !== void 0) clearTimeout(timeoutId);
     };
-  }, [service, smartAccount, txHash, isSwappedOrder, swappedContext?.variant]);
+  }, [
+    service,
+    smartAccount,
+    txHash,
+    isSwappedOrder,
+    swappedContext?.variant,
+    swappedContext?.expectedOrderUuid
+  ]);
   useEffect6(() => {
     if (directTransfer) return;
     if (state.type !== "processing") {
@@ -3777,21 +4039,37 @@ function ProcessingStep({
     const amountPaid = connectPaidAmount ?? (swappedFiatContext?.paidAmountUsd != null ? `$${swappedFiatContext.paidAmountUsd.toFixed(2)}` : null);
     const depositedAmount = receiveDisplay;
     const onrampFeeUsd = swappedFiatContext?.onrampFeeUsd ?? null;
-    const networkFeeUsd = quotedFeeAmount !== void 0 && Number.isFinite(Number(quotedFeeAmount)) ? Number(quotedFeeAmount) : null;
+    const quoteFees = getMarketNetworkFees(quoteFeeBreakdown);
+    const fallbackNetworkFeeUsd = quoteFees === null && quotedFeeAmount !== void 0 && Number.isFinite(Number(quotedFeeAmount)) ? Number(quotedFeeAmount) : null;
+    const marketFeeUsd = quoteFees?.marketUsd ?? null;
+    const networkFeeUsd = quoteFees?.networkUsd ?? fallbackNetworkFeeUsd;
+    const sponsoredFeeTooltip = "This fee is sponsored for this deposit.";
+    const feesTooltip = feeSponsored ? "On-ramp fees are charged by the payment provider. Market and network fees are sponsored for this deposit." : "Fees include on-ramp, market, and network costs for this deposit.";
     const feeRows = [];
     if (onrampFeeUsd != null) {
       feeRows.push({
         label: "On-ramp fee",
-        value: `$${onrampFeeUsd.toFixed(2)}`
+        value: formatUsdFee(onrampFeeUsd)
+      });
+    }
+    if (marketFeeUsd != null) {
+      feeRows.push({
+        label: "Market fee",
+        value: formatUsdFee(marketFeeUsd),
+        strike: feeSponsored,
+        tooltip: feeSponsored ? sponsoredFeeTooltip : void 0
       });
     }
     if (networkFeeUsd != null) {
       feeRows.push({
         label: "Network fee",
-        value: `$${networkFeeUsd.toFixed(2)}`
+        value: formatUsdFee(networkFeeUsd),
+        strike: feeSponsored,
+        tooltip: feeSponsored ? sponsoredFeeTooltip : void 0
       });
     }
-    const feesTotal = feeRows.length > 0 ? `$${((onrampFeeUsd ?? 0) + (networkFeeUsd ?? 0)).toFixed(2)}` : null;
+    const chargeableQuoteFeeUsd = feeSponsored ? 0 : (marketFeeUsd ?? 0) + (networkFeeUsd ?? 0);
+    const feesTotal = feeRows.length > 0 ? formatUsdFee((onrampFeeUsd ?? 0) + chargeableQuoteFeeUsd) : null;
     return /* @__PURE__ */ jsx23(
       SwappedReceipt,
       {
@@ -3802,6 +4080,7 @@ function ProcessingStep({
         depositedIcon: targetTokenIcon,
         feesTotal,
         feeRows,
+        feesTooltip,
         newLabel: `New ${flowNoun}`,
         onNewDeposit,
         onClose