@rhinestone/deposit-modal 0.3.0-alpha.11 → 0.3.0-alpha.13

package/dist/{chunk-2TWQGPPB.cjs → chunk-DZNXG5JK.cjs}

@@ -62,14 +62,14 @@ function Modal({
     }
   }, [isOpen]);
   _react.useEffect.call(void 0, () => {
-    if (isOpen) {
+    if (isOpen && !inline) {
       const originalOverflow = document.body.style.overflow;
       document.body.style.overflow = "hidden";
       return () => {
         document.body.style.overflow = originalOverflow;
       };
     }
-  }, [isOpen]);
+  }, [isOpen, inline]);
   const handleKeyDown = _react.useCallback.call(void 0, 
     (event) => {
       if (event.key === "Escape") {
@@ -162,6 +162,9 @@ Modal.displayName = "Modal";
 
 
 
+
+
+
 
 
 
@@ -207,6 +210,9 @@ var PercentIcon = _lucidereact.Percent;
 var ClockIcon = _lucidereact.Clock;
 var PlusCircleIcon = _lucidereact.CirclePlus;
 var CircleArrowOutUpLeftIcon = _lucidereact.CircleArrowOutUpLeft;
+var CardIcon = _lucidereact.CreditCard;
+var BankIcon = _lucidereact.Landmark;
+var AppleIcon = _lucidereact.Apple;
 
 // src/core/useLatestRef.ts
 
@@ -972,6 +978,150 @@ function createDepositService(baseUrl, options) {
         debugError(debug, scope, "fetchPrices:error", err);
         return {};
       }
+    },
+    async getSwappedWidgetUrl(params) {
+      const url = apiUrl("/onramp/swapped/widget-url");
+      debugLog(debug, scope, "getSwappedWidgetUrl:request", {
+        smartAccount: shortRef(params.smartAccount),
+        method: params.method
+      });
+      const response = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(params)
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Unknown error" }));
+        debugError(debug, scope, "getSwappedWidgetUrl:failed", error, {
+          status: response.status
+        });
+        throw new Error(
+          error.error || `Swapped widget URL failed: ${response.status}`
+        );
+      }
+      const body = await response.json();
+      if (typeof body.url !== "string" || typeof body.currencyCode !== "string" || typeof body.externalCustomerId !== "string") {
+        throw new Error("Swapped widget URL: malformed response");
+      }
+      return {
+        url: body.url,
+        currencyCode: body.currencyCode,
+        sandbox: body.sandbox === true,
+        externalCustomerId: body.externalCustomerId,
+        expiresAt: body.expiresAt
+      };
+    },
+    async getSwappedConnectUrl(params) {
+      const url = apiUrl("/onramp/swapped/connect-url");
+      debugLog(debug, scope, "getSwappedConnectUrl:request", {
+        smartAccount: shortRef(params.smartAccount),
+        connection: params.connection
+      });
+      const response = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(params)
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Unknown error" }));
+        debugError(debug, scope, "getSwappedConnectUrl:failed", error, {
+          status: response.status
+        });
+        throw new Error(
+          error.error || `Swapped Connect URL failed: ${response.status}`
+        );
+      }
+      const body = await response.json();
+      if (typeof body.url !== "string" || typeof body.currencyCode !== "string" || typeof body.externalCustomerId !== "string") {
+        throw new Error("Swapped Connect URL: malformed response");
+      }
+      return {
+        url: body.url,
+        currencyCode: body.currencyCode,
+        sandbox: body.sandbox === true,
+        externalCustomerId: body.externalCustomerId,
+        expiresAt: body.expiresAt
+      };
+    },
+    async getSwappedConnectExchanges() {
+      const url = apiUrl("/onramp/swapped/connect-exchanges");
+      debugLog(debug, scope, "getSwappedConnectExchanges:request");
+      const response = await fetch(url, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+        cache: "no-store"
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Unknown error" }));
+        debugError(debug, scope, "getSwappedConnectExchanges:failed", error, {
+          status: response.status
+        });
+        throw new Error(
+          error.error || `Swapped Connect exchanges failed: ${response.status}`
+        );
+      }
+      const body = await response.json();
+      const rawExchanges = Array.isArray(body.exchanges) ? body.exchanges : null;
+      const exchanges = [];
+      let hasMalformedExchange = rawExchanges === null;
+      for (const exchange of _nullishCoalesce(rawExchanges, () => ( []))) {
+        if (!exchange || typeof exchange !== "object") {
+          hasMalformedExchange = true;
+          continue;
+        }
+        const raw = exchange;
+        const connection = typeof raw.connection === "string" ? raw.connection : "";
+        const name = typeof raw.name === "string" ? raw.name : "";
+        const logoUrl = typeof raw.logoUrl === "string" || raw.logoUrl === null ? raw.logoUrl : null;
+        if (!connection || !name) {
+          hasMalformedExchange = true;
+          continue;
+        }
+        exchanges.push({ connection, name, logoUrl });
+      }
+      if (hasMalformedExchange || typeof body.fetchedAt !== "string" || typeof body.expiresAt !== "string") {
+        throw new Error("Swapped Connect exchanges: malformed response");
+      }
+      return {
+        exchanges,
+        fetchedAt: body.fetchedAt,
+        expiresAt: body.expiresAt,
+        stale: body.stale === true ? true : void 0
+      };
+    },
+    async fetchSwappedOrderStatus(smartAccount) {
+      const url = apiUrl(
+        `/onramp/swapped/status/${encodeURIComponent(smartAccount)}`
+      );
+      const response = await fetch(url, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+        cache: "no-store"
+      });
+      if (!response.ok) return null;
+      let body = null;
+      try {
+        body = await response.json();
+      } catch (e3) {
+        return null;
+      }
+      if (!body || body.ok !== true) return null;
+      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;
+      return {
+        orderId,
+        status,
+        orderCrypto: typeof body.orderCrypto === "string" ? body.orderCrypto : null,
+        orderCryptoAmount: typeof body.orderCryptoAmount === "string" ? body.orderCryptoAmount : null,
+        transactionId: typeof body.transactionId === "string" ? body.transactionId : null,
+        receivedAt: typeof body.receivedAt === "string" ? body.receivedAt : null,
+        paidAmountUsd: numericOrNull(body.paidAmountUsd),
+        paidAmountEur: numericOrNull(body.paidAmountEur),
+        onrampFeeUsd: numericOrNull(body.onrampFeeUsd),
+        paymentMethod: typeof body.paymentMethod === "string" ? body.paymentMethod : null
+      };
     }
   };
 }
@@ -1833,6 +1983,11 @@ function formatBalanceUsd(value) {
   if (!Number.isFinite(value) || value <= 0) return "$0.00";
   return `$${value.toFixed(2)}`;
 }
+function fiatIcon(name) {
+  if (name === "apple") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppleIcon, {});
+  if (name === "bank") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BankIcon, {});
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardIcon, {});
+}
 function shorten(addr) {
   return addr.length > 12 ? `${addr.slice(0, 6)}...${addr.slice(-4)}` : addr;
 }
@@ -1873,6 +2028,10 @@ function ConnectStep({
   onSelectTransferCrypto,
   transferCryptoState,
   transferCryptoErrorReason,
+  onSelectPayWithCard,
+  fiatPaymentMethods,
+  onSelectFiatMethod,
+  onSelectFundFromExchange,
   onRequestConnect,
   onConnect,
   onDisconnect,
@@ -1911,6 +2070,33 @@ function ConnectStep({
             trailing: transferCryptoState === "loading" ? SMALL_SPINNER : void 0
           }
         ),
+        fiatPaymentMethods && fiatPaymentMethods.length > 0 && onSelectFiatMethod ? fiatPaymentMethods.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ListRow,
+          {
+            leading: fiatIcon(opt.icon),
+            title: opt.label,
+            subtitle: opt.sublabel,
+            onClick: () => onSelectFiatMethod(opt.method)
+          },
+          opt.method
+        )) : onSelectPayWithCard && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ListRow,
+          {
+            leading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardIcon, {}),
+            title: "Pay with Card",
+            subtitle: "Buy crypto with card or bank",
+            onClick: onSelectPayWithCard
+          }
+        ),
+        onSelectFundFromExchange && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ListRow,
+          {
+            leading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BankIcon, {}),
+            title: "Fund from Exchange",
+            subtitle: "Use Coinbase, Binance, MetaMask\u2026",
+            onClick: onSelectFundFromExchange
+          }
+        ),
         rows.map((row) => {
           const collapseToExternal = Boolean(onSelectTransferCrypto) && row.kind !== "solana";
           const subtitleText = row.state === "loading" ? "Preparing\u2026" : row.state === "error" ? _nullishCoalesce(row.errorReason, () => ( "Couldn't prepare wallet \u2014 tap to retry")) : shorten(row.address);
@@ -2271,6 +2457,9 @@ function getEventSourceDetails(event) {
 function isDepositEvent(event) {
   return _optionalChain([event, 'optionalAccess', _101 => _101.type]) === "deposit-received" || _optionalChain([event, 'optionalAccess', _102 => _102.type]) === "bridge-started" || _optionalChain([event, 'optionalAccess', _103 => _103.type]) === "bridge-complete" || _optionalChain([event, 'optionalAccess', _104 => _104.type]) === "bridge-failed" || _optionalChain([event, 'optionalAccess', _105 => _105.type]) === "post-bridge-swap-complete" || _optionalChain([event, 'optionalAccess', _106 => _106.type]) === "post-bridge-swap-failed" || _optionalChain([event, 'optionalAccess', _107 => _107.type]) === "error";
 }
+function isFailedEvent(event) {
+  return _optionalChain([event, 'optionalAccess', _108 => _108.type]) === "bridge-failed" || _optionalChain([event, 'optionalAccess', _109 => _109.type]) === "post-bridge-swap-failed" || _optionalChain([event, 'optionalAccess', _110 => _110.type]) === "error";
+}
 function isHexString(value) {
   return value.startsWith("0x") || value.startsWith("0X");
 }
@@ -2280,6 +2469,41 @@ function txRefsMatch(a, b) {
   }
   return a === b;
 }
+function formatBridgeFailedMessage(event) {
+  const eventData = _nullishCoalesce(_optionalChain([event, 'optionalAccess', _111 => _111.data]), () => ( {}));
+  const code = typeof eventData.errorCode === "string" ? eventData.errorCode : void 0;
+  const backendMessage = typeof eventData.message === "string" ? eventData.message.trim() : "";
+  function toUserFacingFailure(raw) {
+    const lower = raw.toLowerCase();
+    if (lower.includes("insufficient funds")) {
+      return "Deposit was received, but processing could not continue due to insufficient funds. Please retry.";
+    }
+    if (lower.includes("no valid quote available")) {
+      return "No bridge route is currently available for this transfer. Please try again shortly.";
+    }
+    if (lower.includes("simulation failed")) {
+      return "Transfer processing failed during simulation. Please retry.";
+    }
+    if (raw.length > 220) {
+      return "Transfer processing failed. Please retry.";
+    }
+    return raw;
+  }
+  if (backendMessage.length > 0) {
+    return { message: toUserFacingFailure(backendMessage), code };
+  }
+  if (code) {
+    return { message: `Bridge failed (${code})`, code };
+  }
+  return { message: "Bridge failed" };
+}
+function failureMessageForEvent(event) {
+  if (_optionalChain([event, 'optionalAccess', _112 => _112.type]) === "error") {
+    const message = isRecord(event.data) ? asString(event.data.message) : void 0;
+    return _nullishCoalesce(message, () => ( "Unknown error"));
+  }
+  return formatBridgeFailedMessage(event).message;
+}
 
 // src/components/steps/ProcessingStep.tsx
 
@@ -2353,6 +2577,24 @@ var SOFT_DELAY_MS = {
   bridging: 4 * 60 * 1e3
 };
 var PHASE_TIMINGS_PREFIX = "rhinestone:phase-timings";
+var STABLECOIN_SYMBOLS = /* @__PURE__ */ new Set([
+  "USDC",
+  "USDT",
+  "DAI",
+  "FRAX",
+  "PYUSD",
+  "USDP",
+  "TUSD",
+  "GUSD",
+  "USDS",
+  "LUSD",
+  "BUSD",
+  "USDE"
+]);
+function maxFractionDigitsFor(symbol) {
+  if (!symbol) return 6;
+  return STABLECOIN_SYMBOLS.has(symbol.toUpperCase()) ? 3 : 6;
+}
 function loadPhaseTimings(txHash) {
   if (typeof window === "undefined") return null;
   try {
@@ -2361,7 +2603,7 @@ function loadPhaseTimings(txHash) {
     const parsed = JSON.parse(raw);
     if (typeof parsed.startedAt !== "number") return null;
     return parsed;
-  } catch (e3) {
+  } catch (e4) {
     return null;
   }
 }
@@ -2372,7 +2614,7 @@ function savePhaseTimings(txHash, timings) {
       `${PHASE_TIMINGS_PREFIX}:${txHash}`,
       JSON.stringify(timings)
     );
-  } catch (e4) {
+  } catch (e5) {
   }
 }
 function isEventForTx(event, txHash) {
@@ -2380,45 +2622,13 @@ function isEventForTx(event, txHash) {
   if (!eventTxHash) return false;
   return txRefsMatch(eventTxHash, txHash);
 }
-function formatBridgeFailedMessage(event) {
-  const eventData = _nullishCoalesce(_optionalChain([event, 'optionalAccess', _108 => _108.data]), () => ( {}));
-  const code = typeof eventData.errorCode === "string" ? eventData.errorCode : void 0;
-  const backendMessage = typeof eventData.message === "string" ? eventData.message.trim() : "";
-  function toUserFacingFailure(raw) {
-    const lower = raw.toLowerCase();
-    if (lower.includes("insufficient funds")) {
-      return "Deposit was received, but processing could not continue due to insufficient funds. Please retry.";
-    }
-    if (lower.includes("no valid quote available")) {
-      return "No bridge route is currently available for this transfer. Please try again shortly.";
-    }
-    if (lower.includes("simulation failed")) {
-      return "Transfer processing failed during simulation. Please retry.";
-    }
-    if (raw.length > 220) {
-      return "Transfer processing failed. Please retry.";
-    }
-    return raw;
-  }
-  if (backendMessage.length > 0) {
-    const userMessage = toUserFacingFailure(backendMessage);
-    return {
-      message: userMessage,
-      code
-    };
-  }
-  if (code) {
-    return { message: `Bridge failed (${code})`, code };
-  }
-  return { message: "Bridge failed" };
-}
 function parseWebhookTimestamp(event) {
-  if (typeof _optionalChain([event, 'optionalAccess', _109 => _109.time]) !== "string") return void 0;
+  if (typeof _optionalChain([event, 'optionalAccess', _113 => _113.time]) !== "string") return void 0;
   const timestamp = Date.parse(event.time);
   return Number.isFinite(timestamp) ? timestamp : void 0;
 }
 function syncPhaseTimings(previous, event) {
-  if (!_optionalChain([event, 'optionalAccess', _110 => _110.type])) return previous;
+  if (!_optionalChain([event, 'optionalAccess', _114 => _114.type])) return previous;
   const timestamp = _nullishCoalesce(parseWebhookTimestamp(event), () => ( Date.now()));
   const setReceived = (event.type === "deposit-received" || event.type === "bridge-started" || event.type === "bridge-complete" || event.type === "bridge-failed" || event.type === "post-bridge-swap-complete" || event.type === "post-bridge-swap-failed" || event.type === "error") && previous.receivedAt === void 0;
   const setBridging = (event.type === "bridge-started" || event.type === "bridge-complete" || event.type === "post-bridge-swap-complete") && previous.bridgingAt === void 0;
@@ -2480,9 +2690,9 @@ function getCurrentPhaseId(state, phaseTimings) {
   if (state.type === "complete") {
     return void 0;
   }
-  if (_optionalChain([state, 'access', _111 => _111.lastEvent, 'optionalAccess', _112 => _112.type]) === "bridge-started" || _optionalChain([state, 'access', _113 => _113.lastEvent, 'optionalAccess', _114 => _114.type]) === "bridge-complete")
+  if (_optionalChain([state, 'access', _115 => _115.lastEvent, 'optionalAccess', _116 => _116.type]) === "bridge-started" || _optionalChain([state, 'access', _117 => _117.lastEvent, 'optionalAccess', _118 => _118.type]) === "bridge-complete")
     return "bridging";
-  if (_optionalChain([state, 'access', _115 => _115.lastEvent, 'optionalAccess', _116 => _116.type]) === "deposit-received") return "received";
+  if (_optionalChain([state, 'access', _119 => _119.lastEvent, 'optionalAccess', _120 => _120.type]) === "deposit-received") return "received";
   return "confirming";
 }
 function ProcessingStep({
@@ -2502,7 +2712,7 @@ function ProcessingStep({
   debug,
   targetToken,
   uiConfig,
-  quotedFeeAmount = "0.1",
+  quotedFeeAmount,
   quotedFeeSymbol,
   balanceAfterUsd,
   onClose,
@@ -2563,7 +2773,7 @@ function ProcessingStep({
       flowLabel
     });
     const context = processingContextRef.current;
-    _optionalChain([onDepositCompleteRef, 'access', _117 => _117.current, 'optionalCall', _118 => _118(txHash, void 0, {
+    _optionalChain([onDepositCompleteRef, 'access', _121 => _121.current, 'optionalCall', _122 => _122(txHash, void 0, {
       amount: context.amount,
       sourceChain: context.sourceChain,
       sourceToken: context.sourceToken,
@@ -2603,7 +2813,26 @@ function ProcessingStep({
     updatePhaseTimings(
       (previous) => syncPhaseTimings(previous, state.lastEvent)
     );
-  }, [_optionalChain([state, 'access', _119 => _119.lastEvent, 'optionalAccess', _120 => _120.time]), _optionalChain([state, 'access', _121 => _121.lastEvent, 'optionalAccess', _122 => _122.type]), updatePhaseTimings]);
+  }, [_optionalChain([state, 'access', _123 => _123.lastEvent, 'optionalAccess', _124 => _124.time]), _optionalChain([state, 'access', _125 => _125.lastEvent, 'optionalAccess', _126 => _126.type]), updatePhaseTimings]);
+  const [swappedFiatContext, setSwappedFiatContext] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    let cancelled = false;
+    service.fetchSwappedOrderStatus(smartAccount).then((res) => {
+      if (cancelled || !res) return;
+      if (!res.transactionId) return;
+      if (res.transactionId.toLowerCase() !== txHash.toLowerCase()) return;
+      setSwappedFiatContext({
+        paidAmountUsd: res.paidAmountUsd,
+        paidAmountEur: res.paidAmountEur,
+        onrampFeeUsd: res.onrampFeeUsd,
+        paymentMethod: res.paymentMethod
+      });
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [service, smartAccount, txHash]);
   _react.useEffect.call(void 0, () => {
     if (directTransfer) return;
     if (state.type !== "processing") {
@@ -2628,21 +2857,21 @@ function ProcessingStep({
           debugLog(debug, "processing", "poll:event", {
             type: lastEvent2.type,
             matchesTx: eventMatchesTx,
-            intentId: _optionalChain([eventData, 'optionalAccess', _123 => _123.intentId])
+            intentId: _optionalChain([eventData, 'optionalAccess', _127 => _127.intentId])
           });
         }
         if (!isMounted) return;
         const awaitingPostBridgeSwap = processingContextRef.current.hasPostBridgeActions;
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _124 => _124.type]) === "post-bridge-swap-complete") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _128 => _128.type]) === "post-bridge-swap-complete") {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
-          const swapTxHash = _optionalChain([eventForCurrentTx, 'access', _125 => _125.data, 'optionalAccess', _126 => _126.swap, 'optionalAccess', _127 => _127.transactionHash]);
+          const swapTxHash = _optionalChain([eventForCurrentTx, 'access', _129 => _129.data, 'optionalAccess', _130 => _130.swap, 'optionalAccess', _131 => _131.transactionHash]);
           debugLog(debug, "processing", "state:complete", {
             txHash,
             destinationTxHash: swapTxHash,
             event: eventForCurrentTx.type
           });
           const context = processingContextRef.current;
-          _optionalChain([onDepositCompleteRef, 'access', _128 => _128.current, 'optionalCall', _129 => _129(txHash, swapTxHash, {
+          _optionalChain([onDepositCompleteRef, 'access', _132 => _132.current, 'optionalCall', _133 => _133(txHash, swapTxHash, {
             amount: context.amount,
             sourceChain: context.sourceChain,
             sourceToken: context.sourceToken,
@@ -2651,7 +2880,7 @@ function ProcessingStep({
           })]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _130 => _130.type]) === "post-bridge-swap-failed") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _134 => _134.type]) === "post-bridge-swap-failed") {
           const formatted = formatBridgeFailedMessage(eventForCurrentTx);
           setState({
             type: "failed",
@@ -2663,19 +2892,19 @@ function ProcessingStep({
             message: formatted.message,
             code: formatted.code
           });
-          _optionalChain([onDepositFailedRef, 'access', _131 => _131.current, 'optionalCall', _132 => _132(txHash, formatted.message)]);
+          _optionalChain([onDepositFailedRef, 'access', _135 => _135.current, 'optionalCall', _136 => _136(txHash, formatted.message)]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _133 => _133.type]) === "bridge-complete" && !awaitingPostBridgeSwap) {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _137 => _137.type]) === "bridge-complete" && !awaitingPostBridgeSwap) {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
-          const destinationTxHash2 = _optionalChain([eventForCurrentTx, 'access', _134 => _134.data, 'optionalAccess', _135 => _135.destination, 'optionalAccess', _136 => _136.transactionHash]);
+          const destinationTxHash2 = _optionalChain([eventForCurrentTx, 'access', _138 => _138.data, 'optionalAccess', _139 => _139.destination, 'optionalAccess', _140 => _140.transactionHash]);
           debugLog(debug, "processing", "state:complete", {
             txHash,
             destinationTxHash: destinationTxHash2,
             event: eventForCurrentTx.type
           });
           const context = processingContextRef.current;
-          _optionalChain([onDepositCompleteRef, 'access', _137 => _137.current, 'optionalCall', _138 => _138(txHash, destinationTxHash2, {
+          _optionalChain([onDepositCompleteRef, 'access', _141 => _141.current, 'optionalCall', _142 => _142(txHash, destinationTxHash2, {
             amount: context.amount,
             sourceChain: context.sourceChain,
             sourceToken: context.sourceToken,
@@ -2684,7 +2913,7 @@ function ProcessingStep({
           })]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _139 => _139.type]) === "bridge-failed") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _143 => _143.type]) === "bridge-failed") {
           const formatted = formatBridgeFailedMessage(eventForCurrentTx);
           setState({
             type: "failed",
@@ -2696,11 +2925,11 @@ function ProcessingStep({
             message: formatted.message,
             code: formatted.code
           });
-          _optionalChain([onDepositFailedRef, 'access', _140 => _140.current, 'optionalCall', _141 => _141(txHash, formatted.message)]);
+          _optionalChain([onDepositFailedRef, 'access', _144 => _144.current, 'optionalCall', _145 => _145(txHash, formatted.message)]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _142 => _142.type]) === "error") {
-          const errorMessage = _nullishCoalesce(_optionalChain([eventForCurrentTx, 'access', _143 => _143.data, 'optionalAccess', _144 => _144.message]), () => ( "Unknown error"));
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _146 => _146.type]) === "error") {
+          const errorMessage = _nullishCoalesce(_optionalChain([eventForCurrentTx, 'access', _147 => _147.data, 'optionalAccess', _148 => _148.message]), () => ( "Unknown error"));
           setState({
             type: "failed",
             message: errorMessage,
@@ -2710,7 +2939,7 @@ function ProcessingStep({
             txHash,
             message: errorMessage
           });
-          _optionalChain([onDepositFailedRef, 'access', _145 => _145.current, 'optionalCall', _146 => _146(txHash, errorMessage)]);
+          _optionalChain([onDepositFailedRef, 'access', _149 => _149.current, 'optionalCall', _150 => _150(txHash, errorMessage)]);
           return;
         }
         setState((previous) => ({
@@ -2771,7 +3000,7 @@ function ProcessingStep({
         txHash,
         timeoutMs: ESCALATED_DELAY_MS
       });
-      _optionalChain([onErrorRef, 'access', _147 => _147.current, 'optionalCall', _148 => _148(message, "PROCESS_TIMEOUT")]);
+      _optionalChain([onErrorRef, 'access', _151 => _151.current, 'optionalCall', _152 => _152(message, "PROCESS_TIMEOUT")]);
     }, ESCALATED_DELAY_MS);
     return () => clearTimeout(timeoutId);
   }, [debug, directTransfer, onErrorRef, state.type, txHash]);
@@ -2783,8 +3012,8 @@ function ProcessingStep({
   const timelineNowMs = _nullishCoalesce(phaseTimings.endedAt, () => ( Date.now()));
   const flowNoun = flowLabel === "withdraw" ? "withdrawal" : "deposit";
   const flowCapitalized = flowLabel === "withdraw" ? "Withdrawal" : "Deposit";
-  const isPostBridgeSwapEvent = _optionalChain([lastEvent, 'optionalAccess', _149 => _149.type]) === "post-bridge-swap-complete" || _optionalChain([lastEvent, 'optionalAccess', _150 => _150.type]) === "post-bridge-swap-failed";
-  const destinationTxHash = isPostBridgeSwapEvent ? _optionalChain([lastEvent, 'optionalAccess', _151 => _151.data, 'optionalAccess', _152 => _152.swap, 'optionalAccess', _153 => _153.transactionHash]) || null : _optionalChain([lastEvent, 'optionalAccess', _154 => _154.data, 'optionalAccess', _155 => _155.destination, 'optionalAccess', _156 => _156.transactionHash]) || null;
+  const isPostBridgeSwapEvent = _optionalChain([lastEvent, 'optionalAccess', _153 => _153.type]) === "post-bridge-swap-complete" || _optionalChain([lastEvent, 'optionalAccess', _154 => _154.type]) === "post-bridge-swap-failed";
+  const destinationTxHash = isPostBridgeSwapEvent ? _optionalChain([lastEvent, 'optionalAccess', _155 => _155.data, 'optionalAccess', _156 => _156.swap, 'optionalAccess', _157 => _157.transactionHash]) || null : _optionalChain([lastEvent, 'optionalAccess', _158 => _158.data, 'optionalAccess', _159 => _159.destination, 'optionalAccess', _160 => _160.transactionHash]) || null;
   const sourceDetails = getEventSourceDetails(lastEvent);
   const displaySourceChain = _nullishCoalesce(sourceDetails.chainId, () => ( sourceChain));
   const displaySourceToken = _nullishCoalesce(sourceDetails.token, () => ( sourceToken));
@@ -2797,6 +3026,7 @@ function ProcessingStep({
     displaySourceToken,
     displaySourceChain
   ) : _nullishCoalesce(providedSourceDecimals, () => ( 18));
+  const amountMaxDigits = maxFractionDigitsFor(sourceSymbol);
   const formattedReceivedAmount = (() => {
     try {
       const raw = _viem.formatUnits.call(void 0, BigInt(displayAmount), sourceDecimals);
@@ -2804,15 +3034,56 @@ function ProcessingStep({
       if (!Number.isFinite(numeric)) return raw;
       return numeric.toLocaleString("en-US", {
         minimumFractionDigits: 2,
-        maximumFractionDigits: 6
+        maximumFractionDigits: amountMaxDigits
       });
-    } catch (e5) {
+    } catch (e6) {
       return Number(displayAmount).toLocaleString("en-US", {
         minimumFractionDigits: 2,
-        maximumFractionDigits: 6
+        maximumFractionDigits: amountMaxDigits
       });
     }
   })();
+  const destinationAmountRaw = (() => {
+    const dest = _optionalChain([lastEvent, 'optionalAccess', _161 => _161.data, 'optionalAccess', _162 => _162.destination]);
+    if (!dest || dest.amount === void 0) return void 0;
+    try {
+      return BigInt(dest.amount);
+    } catch (e7) {
+      return void 0;
+    }
+  })();
+  const sourceAmountRaw = (() => {
+    try {
+      return BigInt(displayAmount);
+    } catch (e8) {
+      return void 0;
+    }
+  })();
+  const bridgingCostRaw = sourceAmountRaw !== void 0 && destinationAmountRaw !== void 0 && sourceAmountRaw > destinationAmountRaw ? sourceAmountRaw - destinationAmountRaw : void 0;
+  const formattedDestinationAmount = destinationAmountRaw !== void 0 ? (() => {
+    try {
+      const raw = _viem.formatUnits.call(void 0, destinationAmountRaw, sourceDecimals);
+      const numeric = Number(raw);
+      if (!Number.isFinite(numeric)) return raw;
+      return numeric.toLocaleString("en-US", {
+        maximumFractionDigits: amountMaxDigits
+      });
+    } catch (e9) {
+      return void 0;
+    }
+  })() : void 0;
+  const formattedBridgingCost = bridgingCostRaw !== void 0 ? (() => {
+    try {
+      const raw = _viem.formatUnits.call(void 0, bridgingCostRaw, sourceDecimals);
+      const numeric = Number(raw);
+      if (!Number.isFinite(numeric)) return raw;
+      return numeric.toLocaleString("en-US", {
+        maximumFractionDigits: amountMaxDigits
+      });
+    } catch (e10) {
+      return void 0;
+    }
+  })() : void 0;
   const currentPhaseId = getCurrentPhaseId(state, phaseTimings);
   const activePhaseStartedAt = currentPhaseId ? getPhaseStartTime(currentPhaseId, phaseTimings) : void 0;
   const activePhaseElapsedMs = isProcessing && activePhaseStartedAt !== void 0 ? timelineNowMs - activePhaseStartedAt : 0;
@@ -2830,8 +3101,8 @@ function ProcessingStep({
   const sourceChainName = _chunk7JIDIX27cjs.getChainName.call(void 0, displaySourceChain);
   const targetChainName = _chunk7JIDIX27cjs.getChainName.call(void 0, targetChain);
   const timerText = formatTimer(elapsedSeconds);
-  const feeSponsored = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _157 => _157.feeSponsored]), () => ( false));
-  const feeTooltip = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _158 => _158.feeTooltip]), () => ( (feeSponsored ? "Network fees are sponsored for this deposit." : "Network fees apply.")));
+  const feeSponsored = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _163 => _163.feeSponsored]), () => ( false));
+  const feeTooltip = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _164 => _164.feeTooltip]), () => ( (feeSponsored ? "Network fees are sponsored for this deposit." : "Network fees apply.")));
   const stateTitle = isComplete ? `${flowCapitalized} successful` : isFailed ? `${flowCapitalized} failed` : "Processing...";
   const handleRetry = _nullishCoalesce(onRetry, () => ( onNewDeposit));
   const headerContent = isComplete ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-body-header", children: [
@@ -2885,11 +3156,29 @@ function ProcessingStep({
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: isProcessing ? "Time elapsed" : "Total time" }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-value", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Ticker, { value: timerText }) })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "You send" }),
+        _optionalChain([swappedFiatContext, 'optionalAccess', _165 => _165.paidAmountUsd]) != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Paid" }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
+            "$",
+            swappedFiatContext.paidAmountUsd.toFixed(2),
+            swappedFiatContext.paymentMethod && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { color: "#71717b", marginLeft: 6 }, children: [
+              "via ",
+              swappedFiatContext.paymentMethod
+            ] })
+          ] })
+        ] }),
+        _optionalChain([swappedFiatContext, 'optionalAccess', _166 => _166.onrampFeeUsd]) != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "On-ramp fee" }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
+            "$",
+            swappedFiatContext.onrampFeeUsd.toFixed(2)
+          ] })
+        ] }),
+        formattedBridgingCost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Bridging cost" }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
-              formattedReceivedAmount,
+              formattedBridgingCost,
               " ",
               sourceSymbol
             ] }),
@@ -2899,12 +3188,7 @@ function ProcessingStep({
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Receive" }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
-              "~",
-              formattedReceivedAmount,
-              " ",
-              targetSymbol
-            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: formattedDestinationAmount ? `${formattedDestinationAmount} ${targetSymbol}` : `~${formattedReceivedAmount} ${targetSymbol}` }),
             targetTokenIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: targetTokenIcon, alt: "" }) })
           ] })
         ] }),
@@ -2915,14 +3199,18 @@ function ProcessingStep({
             balanceAfterUsd.toFixed(2)
           ] })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
+        quotedFeeAmount !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Fees" }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
               "span",
               {
                 style: feeSponsored ? { textDecoration: "line-through" } : void 0,
-                children: "$0.04"
+                children: [
+                  quotedFeeAmount,
+                  " ",
+                  _nullishCoalesce(quotedFeeSymbol, () => ( sourceSymbol))
+                ]
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tooltip, { content: feeTooltip, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-info", "aria-label": "Fee info", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoIcon, {}) }) })
@@ -3279,7 +3567,7 @@ function loadSessionOwnerFromStorage(eoaAddress) {
       privateKey: parsed.privateKey,
       address: account.address
     };
-  } catch (e6) {
+  } catch (e11) {
     return null;
   }
 }
@@ -3361,4 +3649,9 @@ function accountFromPrivateKey(privateKey) {
 
 
 
-exports.Modal = Modal; exports.WalletIcon = WalletIcon; exports.ExternalLinkIcon = ExternalLinkIcon; exports.CheckIcon = CheckIcon; exports.TransferCryptoIcon = TransferCryptoIcon; exports.ChevronLeftIcon = ChevronLeftIcon; exports.ChevronDownIcon = ChevronDownIcon; exports.CloseIcon = CloseIcon; exports.HistoryIcon = HistoryIcon; exports.InfoIcon = InfoIcon; exports.CopyIcon = CopyIcon; exports.ArrowUpRightIcon = ArrowUpRightIcon; exports.AlertTriangleIcon = AlertTriangleIcon; exports.PercentIcon = PercentIcon; exports.ClockIcon = ClockIcon; exports.PlusCircleIcon = PlusCircleIcon; exports.CircleArrowOutUpLeftIcon = CircleArrowOutUpLeftIcon; exports.BodyHeader = BodyHeader; exports.PoweredBy = PoweredBy; exports.Spinner = Spinner; exports.ConnectStep = ConnectStep; exports.useLatestRef = useLatestRef; exports.Button = Button; exports.Callout = Callout; exports.debugLog = debugLog; exports.debugError = debugError; exports.toEvmCaip2 = toEvmCaip2; exports.targetChainToCaip2 = targetChainToCaip2; exports.parseEvmChainId = parseEvmChainId; exports.isSolanaCaip2 = isSolanaCaip2; exports.getAssetId = getAssetId; exports.portfolioToAssets = portfolioToAssets; exports.isNativeAsset = isNativeAsset; exports.buildSessionDetails = buildSessionDetails; exports.createDepositService = createDepositService; exports.currencyFormatter = currencyFormatter; exports.tokenFormatter = tokenFormatter; exports.isUnsupportedChainSwitchError = isUnsupportedChainSwitchError; exports.formatUserError = formatUserError; exports.Tooltip = Tooltip; exports.getEventTxHash = getEventTxHash; exports.isDepositEvent = isDepositEvent; exports.txRefsMatch = txRefsMatch; exports.ProcessingStep = ProcessingStep; exports.SAFE_ABI = SAFE_ABI; exports.executeSafeEthTransfer = executeSafeEthTransfer; exports.executeSafeErc20Transfer = executeSafeErc20Transfer; exports.buildSafeTransaction = buildSafeTransaction; exports.getPublicClient = getPublicClient; exports.loadSessionOwnerFromStorage = loadSessionOwnerFromStorage; exports.saveSessionOwnerToStorage = saveSessionOwnerToStorage; exports.createSessionOwnerKey = createSessionOwnerKey; exports.accountFromPrivateKey = accountFromPrivateKey; exports.applyTheme = applyTheme;
+
+
+
+
+
+exports.Modal = Modal; exports.WalletIcon = WalletIcon; exports.ExternalLinkIcon = ExternalLinkIcon; exports.CheckIcon = CheckIcon; exports.TransferCryptoIcon = TransferCryptoIcon; exports.ChevronLeftIcon = ChevronLeftIcon; exports.ChevronDownIcon = ChevronDownIcon; exports.CloseIcon = CloseIcon; exports.HandCoinsIcon = HandCoinsIcon; exports.HistoryIcon = HistoryIcon; exports.InfoIcon = InfoIcon; exports.CopyIcon = CopyIcon; exports.ArrowUpRightIcon = ArrowUpRightIcon; exports.AlertTriangleIcon = AlertTriangleIcon; exports.PercentIcon = PercentIcon; exports.ClockIcon = ClockIcon; exports.PlusCircleIcon = PlusCircleIcon; exports.CircleArrowOutUpLeftIcon = CircleArrowOutUpLeftIcon; exports.BankIcon = BankIcon; exports.BodyHeader = BodyHeader; exports.PoweredBy = PoweredBy; exports.Spinner = Spinner; exports.ConnectStep = ConnectStep; exports.useLatestRef = useLatestRef; exports.Button = Button; exports.Callout = Callout; exports.debugLog = debugLog; exports.debugError = debugError; exports.toEvmCaip2 = toEvmCaip2; exports.targetChainToCaip2 = targetChainToCaip2; exports.parseEvmChainId = parseEvmChainId; exports.isSolanaCaip2 = isSolanaCaip2; exports.getAssetId = getAssetId; exports.portfolioToAssets = portfolioToAssets; exports.isNativeAsset = isNativeAsset; exports.buildSessionDetails = buildSessionDetails; exports.createDepositService = createDepositService; exports.currencyFormatter = currencyFormatter; exports.tokenFormatter = tokenFormatter; exports.isUnsupportedChainSwitchError = isUnsupportedChainSwitchError; exports.formatUserError = formatUserError; exports.Tooltip = Tooltip; exports.getEventTxHash = getEventTxHash; exports.getEventSourceDetails = getEventSourceDetails; exports.isDepositEvent = isDepositEvent; exports.isFailedEvent = isFailedEvent; exports.txRefsMatch = txRefsMatch; exports.failureMessageForEvent = failureMessageForEvent; exports.ProcessingStep = ProcessingStep; exports.SAFE_ABI = SAFE_ABI; exports.executeSafeEthTransfer = executeSafeEthTransfer; exports.executeSafeErc20Transfer = executeSafeErc20Transfer; exports.buildSafeTransaction = buildSafeTransaction; exports.getPublicClient = getPublicClient; exports.loadSessionOwnerFromStorage = loadSessionOwnerFromStorage; exports.saveSessionOwnerToStorage = saveSessionOwnerToStorage; exports.createSessionOwnerKey = createSessionOwnerKey; exports.accountFromPrivateKey = accountFromPrivateKey; exports.applyTheme = applyTheme;