@rhinestone/deposit-modal 0.1.30 → 0.1.32

package/dist/{chunk-BOKLFGNS.mjs → chunk-MKKJ7ZE2.mjs}

@@ -21,7 +21,7 @@ import {
   portfolioToAssets,
   saveSessionOwnerToStorage,
   tokenFormatter
-} from "./chunk-CIAKCO7G.mjs";
+} from "./chunk-DLFUXLAM.mjs";
 import {
   DEFAULT_BACKEND_URL,
   DEFAULT_SIGNER_ADDRESS,
@@ -35,12 +35,13 @@ import {
   getTargetTokenSymbolsForChain,
   getTokenAddress,
   getTokenIcon,
-  getTokenSymbol
-} from "./chunk-VL47TLTE.mjs";
+  getTokenSymbol,
+  isStablecoinSymbol
+} from "./chunk-C6I5TFSL.mjs";
 
 // src/DepositModal.tsx
 import {
-  useMemo as useMemo7,
+  useMemo as useMemo6,
   useEffect as useEffect7,
   useRef as useRef5,
   useState as useState8,
@@ -50,7 +51,7 @@ import {
 } from "react";
 
 // src/DepositFlow.tsx
-import { useState as useState7, useCallback as useCallback3, useMemo as useMemo6, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useState as useState7, useCallback as useCallback3, useMemo as useMemo5, useEffect as useEffect6, useRef as useRef4 } from "react";
 
 // src/components/steps/SetupStep.tsx
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -249,7 +250,8 @@ function AssetSelectStep({
   defaultSourceToken,
   service,
   onContinue,
-  onTotalBalanceComputed
+  onTotalBalanceComputed,
+  onAssetsLoaded
 }) {
   const [assets, setAssets] = useState2([]);
   const [selectedAssetId, setSelectedAssetId] = useState2(null);
@@ -316,7 +318,8 @@ function AssetSelectStep({
       0
     );
     onTotalBalanceComputed?.(total);
-  }, [assets, onTotalBalanceComputed]);
+    if (assets.length > 0) onAssetsLoaded?.(assets);
+  }, [assets, onTotalBalanceComputed, onAssetsLoaded]);
   const rows = useMemo(() => {
     return assets.filter((a) => {
       try {
@@ -533,6 +536,8 @@ function AmountStep({
   const chainMismatch = Boolean(
     walletClient?.chain?.id && walletClient.chain.id !== asset.chainId
   );
+  const targetSymbol = getTokenSymbol(targetToken, targetChain);
+  const isSourceStablecoin = isStablecoinSymbol(asset.symbol);
   const tokenPriceUsd = useMemo2(() => {
     if (tokenPriceUsdOverride !== void 0 && tokenPriceUsdOverride > 0)
       return tokenPriceUsdOverride;
@@ -592,15 +597,10 @@ function AmountStep({
     if (defaultAmount && !amount) {
       const parsed = Number(defaultAmount);
       if (Number.isFinite(parsed) && parsed > 0) {
-        if (hasPricing) {
-          const usdValue = parsed * tokenPriceUsd;
-          setAmount(usdValue.toFixed(2));
-        } else {
-          setAmount(parsed.toString());
-        }
+        setAmount(parsed.toString());
       }
     }
-  }, [defaultAmount, tokenPriceUsd, hasPricing, amount]);
+  }, [defaultAmount, amount]);
   const balanceUsd = useMemo2(() => {
     if (balance === null || tokenPriceUsd === null) return null;
     try {
@@ -625,36 +625,24 @@ function AmountStep({
       return "...";
     }
   }, [balance, asset.decimals]);
-  const tokenAmount = useMemo2(() => {
-    if (!amount) return null;
-    if (hasPricing) {
-      const usd = Number(amount);
-      if (!Number.isFinite(usd) || usd <= 0) return null;
-      return usd / tokenPriceUsd;
-    }
-    const val = Number(amount);
-    return Number.isFinite(val) && val > 0 ? val : null;
-  }, [amount, tokenPriceUsd, hasPricing]);
-  const formattedTokenAmount = useMemo2(() => {
-    if (tokenAmount === null) return "0.00";
-    return tokenFormatter.format(tokenAmount);
-  }, [tokenAmount]);
-  const targetSymbol = getTokenSymbol(targetToken, targetChain);
   const handlePresetClick = (percentage) => {
     if (balance === null) return;
-    if (hasPricing && balanceUsd !== null) {
-      const value = balanceUsd * percentage / 100;
-      setAmount(value.toFixed(2));
-    } else {
-      try {
-        const balanceUnits = Number(formatUnits2(balance, asset.decimals));
-        if (Number.isFinite(balanceUnits)) {
-          const value = balanceUnits * percentage / 100;
-          setAmount(value.toString());
-        }
-      } catch {
-        return;
+    try {
+      const balanceUnits = Number(formatUnits2(balance, asset.decimals));
+      if (!Number.isFinite(balanceUnits)) return;
+      let value;
+      if (isSourceStablecoin || !hasPricing) {
+        value = balanceUnits * percentage / 100;
+      } else {
+        value = (balanceUsd ?? 0) * percentage / 100;
       }
+      const maxDecimals = 3;
+      const factor = 10 ** maxDecimals;
+      const truncated = Math.floor(value * factor) / factor;
+      const formatted = truncated.toFixed(maxDecimals).replace(/\.?0+$/, "");
+      setAmount(formatted);
+    } catch {
+      return;
     }
     if (error) setError(null);
   };
@@ -664,24 +652,28 @@ function AmountStep({
       setError("Please enter a valid amount");
       return;
     }
-    let tokenAmountStr;
+    let sourceAmount;
+    if (isSourceStablecoin || !hasPricing) {
+      sourceAmount = numericAmount;
+    } else {
+      sourceAmount = numericAmount / tokenPriceUsd;
+    }
     if (hasPricing) {
-      if (uiConfig?.maxDepositUsd && numericAmount > uiConfig.maxDepositUsd) {
+      const usdValue = numericAmount;
+      if (uiConfig?.maxDepositUsd && usdValue > uiConfig.maxDepositUsd) {
         setError(
           `Maximum deposit is ${currencyFormatter.format(uiConfig.maxDepositUsd)}`
         );
         return;
       }
-      if (uiConfig?.minDepositUsd && numericAmount < uiConfig.minDepositUsd) {
+      if (uiConfig?.minDepositUsd && usdValue < uiConfig.minDepositUsd) {
         setError(
           `Minimum deposit is ${currencyFormatter.format(uiConfig.minDepositUsd)}`
         );
         return;
       }
-      tokenAmountStr = (numericAmount / tokenPriceUsd).toString();
-    } else {
-      tokenAmountStr = numericAmount.toString();
     }
+    const tokenAmountStr = sourceAmount.toString();
     let amountInUnits;
     try {
       amountInUnits = parseUnits(tokenAmountStr, asset.decimals);
@@ -690,11 +682,11 @@ function AmountStep({
       return;
     }
     if (balance !== null && amountInUnits > balance) {
-      amountInUnits = balance;
-      tokenAmountStr = formatUnits2(balance, asset.decimals);
+      setError("Insufficient balance");
+      return;
     }
     setError(null);
-    onContinue(tokenAmountStr, balance ?? void 0);
+    onContinue(tokenAmountStr, amount, balance ?? void 0);
   };
   const handleSwitch = async () => {
     if (!asset.chainId || !switchChain) return;
@@ -711,7 +703,7 @@ function AmountStep({
   return /* @__PURE__ */ jsxs3("div", { className: "rs-step", children: [
     /* @__PURE__ */ jsxs3("div", { className: "rs-step-body", style: { paddingTop: 0 }, children: [
       /* @__PURE__ */ jsxs3("div", { className: "rs-amount-display", children: [
-        /* @__PURE__ */ jsx3("div", { className: "rs-amount-input-wrapper", children: hasPricing ? /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx3("div", { className: "rs-amount-input-wrapper", children: /* @__PURE__ */ jsx3(
           "input",
           {
             type: "text",
@@ -728,30 +720,8 @@ function AmountStep({
             },
             autoFocus: true
           }
-        ) : /* @__PURE__ */ jsx3(
-          "input",
-          {
-            type: "text",
-            inputMode: "decimal",
-            className: "rs-amount-input-large",
-            placeholder: `0.00 ${asset.symbol}`,
-            value: amount,
-            onChange: (e) => {
-              const raw = e.target.value.replace(/[^0-9.]/g, "");
-              const parts = raw.split(".");
-              if (parts.length > 2) return;
-              setAmount(raw);
-              if (error) setError(null);
-            },
-            autoFocus: true
-          }
         ) }),
-        hasPricing ? /* @__PURE__ */ jsxs3("div", { className: "rs-amount-token-value", children: [
-          formattedTokenAmount,
-          " ",
-          asset.symbol
-        ] }) : /* @__PURE__ */ jsx3("div", { className: "rs-amount-token-value", style: { color: "var(--rs-muted-foreground)" }, children: "Price unavailable" }),
-        /* @__PURE__ */ jsx3("div", { className: "rs-amount-available", children: /* @__PURE__ */ jsxs3("span", { className: "rs-amount-available-value", children: [
+        !isSourceStablecoin && /* @__PURE__ */ jsx3("div", { className: "rs-amount-available", children: /* @__PURE__ */ jsxs3("span", { className: "rs-amount-available-value", children: [
           formattedBalance,
           " ",
           asset.symbol,
@@ -895,22 +865,13 @@ function AmountStep({
           }
         )
       ] }),
-      chainMismatch && /* @__PURE__ */ jsxs3("div", { className: "rs-chain-switch", style: { marginTop: 16 }, children: [
+      chainMismatch && !isSwitching && /* @__PURE__ */ jsxs3("div", { className: "rs-chain-switch", style: { marginTop: 16 }, children: [
         /* @__PURE__ */ jsxs3("div", { className: "rs-chain-switch-text", children: [
           "Switch your wallet to ",
           getChainName(asset.chainId),
           " to continue."
         ] }),
-        switchChain && /* @__PURE__ */ jsx3(
-          Button,
-          {
-            variant: "outline",
-            size: "small",
-            loading: isSwitching,
-            onClick: handleSwitch,
-            children: "Switch"
-          }
-        )
+        switchChain && /* @__PURE__ */ jsx3(Button, { variant: "outline", size: "small", onClick: handleSwitch, children: "Switch" })
       ] }),
       error && /* @__PURE__ */ jsxs3("div", { className: "rs-amount-error", children: [
         /* @__PURE__ */ jsx3(
@@ -948,10 +909,9 @@ function AmountStep({
 }
 
 // src/components/steps/ConfirmStep.tsx
-import { useMemo as useMemo3, useState as useState4 } from "react";
-import { erc20Abi as erc20Abi2, formatUnits as formatUnits3, parseUnits as parseUnits2 } from "viem";
+import { useState as useState4 } from "react";
+import { erc20Abi as erc20Abi2, parseUnits as parseUnits2 } from "viem";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var STABLECOIN_SYMBOLS = /* @__PURE__ */ new Set(["USDC", "USDT", "DAI"]);
 function ConfirmStep({
   walletClient,
   address,
@@ -959,6 +919,8 @@ function ConfirmStep({
   recipient,
   asset,
   amount,
+  targetAmount,
+  targetTokenPriceUsd,
   balance,
   targetChain,
   targetToken,
@@ -973,51 +935,17 @@ function ConfirmStep({
   const chainMismatch = walletClient?.chain?.id && walletClient.chain.id !== asset.chainId;
   const sameRoute = targetChain === asset.chainId && targetToken.toLowerCase() === asset.token.toLowerCase();
   const targetSymbol = sameRoute ? asset.symbol : getTokenSymbol(targetToken, targetChain);
-  const formattedAmount = amount && !Number.isNaN(Number(amount)) ? Number(amount).toLocaleString("en-US", { maximumFractionDigits: 6 }) : "0";
-  const tokenPriceUsd = useMemo3(() => {
-    if (asset.balanceUsd === void 0 || !asset.balance) return null;
-    try {
-      const balanceUnits = Number(
-        formatUnits3(BigInt(asset.balance), asset.decimals)
-      );
-      if (!Number.isFinite(balanceUnits) || balanceUnits <= 0) return null;
-      return asset.balanceUsd / balanceUnits;
-    } catch {
-      return null;
-    }
-  }, [asset.balanceUsd, asset.balance, asset.decimals]);
-  const amountUsd = useMemo3(() => {
-    if (!amount || tokenPriceUsd === null) return null;
-    const parsed = Number(amount);
-    if (!Number.isFinite(parsed) || parsed <= 0) return null;
-    return parsed * tokenPriceUsd;
-  }, [amount, tokenPriceUsd]);
-  const targetTokenPriceUsd = useMemo3(() => {
-    const targetSym = targetSymbol.toUpperCase();
-    const sourceSym = asset.symbol.toUpperCase();
-    if (STABLECOIN_SYMBOLS.has(targetSym)) return 1;
-    if (targetSym === sourceSym && tokenPriceUsd !== null) return tokenPriceUsd;
-    return null;
-  }, [targetSymbol, asset.symbol, tokenPriceUsd]);
-  const receiveAmountUsd = useMemo3(() => {
-    if (amountUsd === null) return null;
-    return sameRoute ? amountUsd : amountUsd * 0.99;
-  }, [amountUsd, sameRoute]);
-  const receiveTokenAmount = useMemo3(() => {
-    if (sameRoute) {
-      const parsed = Number(amount);
-      return Number.isFinite(parsed) ? parsed : null;
+  const formattedSendAmount = amount && !Number.isNaN(Number(amount)) ? Number(amount).toLocaleString("en-US", { maximumFractionDigits: 6 }) : "0";
+  const formattedReceiveAmount = (() => {
+    if (sameRoute) return formattedSendAmount;
+    const dollarValue = Number(targetAmount);
+    if (!Number.isFinite(dollarValue) || dollarValue <= 0) return formattedSendAmount;
+    if (targetTokenPriceUsd !== null && targetTokenPriceUsd > 0) {
+      const tokenAmount = dollarValue / targetTokenPriceUsd;
+      return tokenAmount.toLocaleString("en-US", { maximumFractionDigits: 6 });
     }
-    if (receiveAmountUsd === null || targetTokenPriceUsd === null || targetTokenPriceUsd === 0)
-      return null;
-    return receiveAmountUsd / targetTokenPriceUsd;
-  }, [sameRoute, amount, receiveAmountUsd, targetTokenPriceUsd]);
-  const formattedReceiveAmount = useMemo3(() => {
-    if (receiveTokenAmount === null) return `~ ${formattedAmount}`;
-    return receiveTokenAmount.toLocaleString("en-US", {
-      maximumFractionDigits: 6
-    });
-  }, [receiveTokenAmount, formattedAmount]);
+    return formattedSendAmount;
+  })();
   const receiveAmount = sameRoute ? formattedReceiveAmount : `~ ${formattedReceiveAmount}`;
   const handleConfirm = async () => {
     if (!address || !walletClient) {
@@ -1106,7 +1034,7 @@ function ConfirmStep({
                   {
                     src: getChainIcon(asset.chainId),
                     alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
+                    style: { width: 16, height: 16, borderRadius: 3 }
                   }
                 ),
                 getChainName(asset.chainId)
@@ -1127,7 +1055,7 @@ function ConfirmStep({
                   {
                     src: getChainIcon(targetChain),
                     alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
+                    style: { width: 16, height: 16, borderRadius: 3 }
                   }
                 ),
                 getChainName(targetChain)
@@ -1157,7 +1085,7 @@ function ConfirmStep({
                     style: { width: 16, height: 16, borderRadius: "50%" }
                   }
                 ),
-                formattedAmount,
+                formattedSendAmount,
                 " ",
                 asset.symbol
               ]
@@ -1186,10 +1114,6 @@ function ConfirmStep({
               ]
             }
           )
-        ] }),
-        receiveAmountUsd !== null && /* @__PURE__ */ jsxs4("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx4("span", { className: "rs-card-label", children: "Value" }),
-          /* @__PURE__ */ jsx4("span", { className: "rs-card-value", children: currencyFormatter.format(receiveAmountUsd) })
         ] })
       ] }),
       chainMismatch && /* @__PURE__ */ jsxs4("div", { className: "rs-chain-switch", children: [
@@ -1246,10 +1170,10 @@ function ConfirmStep({
 }
 
 // src/components/steps/DepositAddressStep.tsx
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback2, useRef as useRef3, useMemo as useMemo5 } from "react";
+import { useState as useState6, useEffect as useEffect5, useCallback as useCallback2, useRef as useRef3, useMemo as useMemo4 } from "react";
 
 // src/components/ui/QRCode.tsx
-import { useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function QRCode({ value, size = 200, iconSrc, className }) {
   const [createQrCode, setCreateQrCode] = useState5(null);
@@ -1268,7 +1192,7 @@ function QRCode({ value, size = 200, iconSrc, className }) {
       mounted = false;
     };
   }, []);
-  const svgContent = useMemo4(() => {
+  const svgContent = useMemo3(() => {
     if (!createQrCode) {
       return null;
     }
@@ -1386,11 +1310,11 @@ function DepositAddressStep({
   onDepositDetected,
   onError
 }) {
-  const supportedChainIds = useMemo5(() => getSupportedChainIds(), []);
+  const supportedChainIds = useMemo4(() => getSupportedChainIds(), []);
   const BASE_CHAIN_ID = 8453;
   const defaultChainId = supportedChainIds.includes(BASE_CHAIN_ID) ? BASE_CHAIN_ID : supportedChainIds[0];
   const [sourceChainId, setSourceChainId] = useState6(defaultChainId);
-  const tokensForChain = useMemo5(
+  const tokensForChain = useMemo4(
     () => getTargetTokenSymbolsForChain(sourceChainId),
     [sourceChainId]
   );
@@ -1686,6 +1610,7 @@ function DepositFlow({
   waitForFinalTx = true,
   reownWallet,
   onConnect,
+  onDisconnect,
   onRequestConnect,
   connectButtonLabel,
   uiConfig,
@@ -1704,13 +1629,30 @@ function DepositFlow({
   const [totalBalanceUsd, setTotalBalanceUsd] = useState7(0);
   const [isConnectSelectionConfirmed, setIsConnectSelectionConfirmed] = useState7(false);
   const [selectedConnectAddress, setSelectedConnectAddress] = useState7(null);
-  const dappSwitchChain = useMemo6(() => {
+  const portfolioAssetsRef = useRef4([]);
+  const handleAssetsLoaded = useCallback3((assets) => {
+    portfolioAssetsRef.current = assets;
+  }, []);
+  const getTokenPriceUsd = useCallback3((symbol) => {
+    const sym = symbol.toLowerCase();
+    for (const asset of portfolioAssetsRef.current) {
+      if (asset.symbol.toLowerCase() === sym && asset.balanceUsd && asset.balance) {
+        try {
+          const balanceUnits = Number(asset.balance) / 10 ** asset.decimals;
+          if (balanceUnits > 0) return asset.balanceUsd / balanceUnits;
+        } catch {
+        }
+      }
+    }
+    return null;
+  }, []);
+  const dappSwitchChain = useMemo5(() => {
     if (!dappWalletClient?.switchChain) return void 0;
     return async (chainId) => {
       await dappWalletClient.switchChain?.({ id: chainId });
     };
   }, [dappWalletClient]);
-  const walletOptions = useMemo6(() => {
+  const walletOptions = useMemo5(() => {
     const options = [];
     const seen = /* @__PURE__ */ new Set();
     if (dappWalletClient?.account && dappAddress) {
@@ -1725,7 +1667,8 @@ function DepositFlow({
       options.push({
         address: reownWallet.address,
         label: "External Wallet",
-        kind: "external"
+        kind: "external",
+        icon: reownWallet.icon
       });
     }
     return options;
@@ -1733,12 +1676,13 @@ function DepositFlow({
     dappWalletClient,
     dappAddress,
     reownWallet?.address,
-    reownWallet?.isConnected
+    reownWallet?.isConnected,
+    reownWallet?.icon
   ]);
   const canAutoLock = dappWalletClient?.account && dappAddress && !reownWallet;
   const hasWalletOptions = walletOptions.length > 0;
   const showConnectStep = !canAutoLock && !isConnectSelectionConfirmed;
-  const signerContext = useMemo6(() => {
+  const signerContext = useMemo5(() => {
     if (flowMode === "deposit-address") {
       if (!dappAddress) return null;
       return {
@@ -1807,6 +1751,7 @@ function DepositFlow({
   }, []);
   const handleBackFromSelectAsset = useCallback3(() => {
     if (hasWalletOptions || reownWallet) {
+      hasNavigatedBackRef.current = true;
       setIsConnectSelectionConfirmed(false);
     }
   }, [hasWalletOptions, reownWallet]);
@@ -1814,6 +1759,7 @@ function DepositFlow({
     setFlowMode(null);
     setStep({ type: "setup" });
     if (hasWalletOptions || reownWallet) {
+      hasNavigatedBackRef.current = true;
       setIsConnectSelectionConfirmed(false);
     }
   }, [hasWalletOptions, reownWallet]);
@@ -1823,8 +1769,7 @@ function DepositFlow({
       return {
         type: "amount",
         smartAccount: prev.smartAccount,
-        asset: prev.asset,
-        amount: prev.amount
+        asset: prev.asset
       };
     });
   }, []);
@@ -1897,7 +1842,10 @@ function DepositFlow({
     [defaultAmount]
   );
   const handleAmountContinue = useCallback3(
-    (amount, balance) => {
+    (amount, targetAmount, balance) => {
+      const targetSym = getTokenSymbol(targetToken, targetChain);
+      const isTargetStable = isStablecoinSymbol(targetSym);
+      const targetTokenPriceUsd = isTargetStable ? 1 : getTokenPriceUsd(targetSym);
       setStep((prev) => {
         if (prev.type !== "amount") return prev;
         return {
@@ -1905,11 +1853,13 @@ function DepositFlow({
           smartAccount: prev.smartAccount,
           asset: prev.asset,
           amount,
+          targetAmount,
+          targetTokenPriceUsd,
           balance
         };
       });
     },
-    []
+    [targetToken, targetChain, getTokenPriceUsd]
   );
   const handleDepositSubmitted = useCallback3(
     (txHash, chainId, amount, token) => {
@@ -1955,20 +1905,47 @@ function DepositFlow({
   const handleTotalBalanceComputed = useCallback3((total) => {
     setTotalBalanceUsd(total);
   }, []);
-  const selectedConnectAddressEffective = useMemo6(() => {
+  const selectedConnectAddressEffective = useMemo5(() => {
     if (selectedConnectAddress) return selectedConnectAddress;
     if (walletOptions.length === 1) {
       return walletOptions[0].address;
     }
     return null;
   }, [selectedConnectAddress, walletOptions]);
-  const walletOptionsKey = useMemo6(
+  const walletOptionsKey = useMemo5(
     () => walletOptions.map((option) => option.address.toLowerCase()).join(","),
     [walletOptions]
   );
+  const hasNavigatedBackRef = useRef4(false);
   useEffect6(() => {
     setIsConnectSelectionConfirmed(false);
-  }, [walletOptionsKey, selectedConnectAddressEffective]);
+  }, [walletOptionsKey]);
+  useEffect6(() => {
+    if (hasNavigatedBackRef.current || isConnectSelectionConfirmed || flowMode) {
+      return;
+    }
+    if (hasWalletOptions) {
+      const address = selectedConnectAddressEffective;
+      if (address) {
+        setSelectedConnectAddress(address);
+        handleSelectProvider();
+        setIsConnectSelectionConfirmed(true);
+        return;
+      }
+    }
+    if (!hasWalletOptions && dappAddress) {
+      handleSelectTransferCrypto();
+      setIsConnectSelectionConfirmed(true);
+    }
+  }, [
+    hasWalletOptions,
+    isConnectSelectionConfirmed,
+    flowMode,
+    selectedConnectAddressEffective,
+    dappAddress,
+    handleSelectProvider,
+    handleSelectTransferCrypto
+  ]);
   if (showConnectStep) {
     return /* @__PURE__ */ jsx7("div", { className: "rs-modal-body", children: /* @__PURE__ */ jsx7(
       ConnectStep,
@@ -1982,6 +1959,7 @@ function DepositFlow({
         } : void 0,
         onRequestConnect,
         onConnect,
+        onDisconnect,
         onContinue: () => {
           if (selectedConnectAddressEffective) {
             setSelectedConnectAddress(selectedConnectAddressEffective);
@@ -2029,7 +2007,6 @@ function DepositFlow({
           sourceChain: step.sourceChain,
           sourceToken: step.sourceToken,
           targetChain,
-          targetToken,
           amount: step.amount,
           waitForFinalTx,
           service,
@@ -2082,7 +2059,8 @@ function DepositFlow({
         defaultSourceToken,
         service,
         onContinue: handleAssetContinue,
-        onTotalBalanceComputed: handleTotalBalanceComputed
+        onTotalBalanceComputed: handleTotalBalanceComputed,
+        onAssetsLoaded: handleAssetsLoaded
       }
     ),
     step.type === "amount" && /* @__PURE__ */ jsx7(
@@ -2109,6 +2087,8 @@ function DepositFlow({
         recipient,
         asset: step.asset,
         amount: step.amount,
+        targetAmount: step.targetAmount,
+        targetTokenPriceUsd: step.targetTokenPriceUsd,
         balance: step.balance,
         targetChain,
         targetToken,
@@ -2126,7 +2106,6 @@ function DepositFlow({
         sourceChain: step.sourceChain,
         sourceToken: step.sourceToken,
         targetChain,
-        targetToken,
         amount: step.amount,
         waitForFinalTx,
         service,
@@ -2144,7 +2123,7 @@ function DepositFlow({
 // src/DepositModal.tsx
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ReownDepositInner = lazy(
-  () => import("./DepositModalReown-OHTRNISJ.mjs").then((m) => ({ default: m.DepositModalReown }))
+  () => import("./DepositModalReown-SZPCCNPH.mjs").then((m) => ({ default: m.DepositModalReown }))
 );
 function DepositModal(props) {
   const needsReown = !!props.reownAppId;
@@ -2174,6 +2153,7 @@ function DepositModalInner({
   waitForFinalTx = true,
   reownWallet,
   onConnect,
+  onDisconnect,
   onRequestConnect,
   connectButtonLabel,
   theme,
@@ -2194,7 +2174,7 @@ function DepositModalInner({
   const backHandlerRef = useRef5(void 0);
   const targetChain = getChainId(targetChainProp);
   const sourceChain = sourceChainProp ? getChainId(sourceChainProp) : void 0;
-  const service = useMemo7(() => createDepositService(backendUrl), [backendUrl]);
+  const service = useMemo6(() => createDepositService(backendUrl), [backendUrl]);
   useEffect7(() => {
     if (isOpen && modalRef.current) {
       applyTheme(modalRef.current, theme);
@@ -2219,8 +2199,8 @@ function DepositModalInner({
     },
     []
   );
-  const handleTotalBalanceChange = useCallback4((balance) => {
-    setTotalBalanceUsd(balance);
+  const handleTotalBalanceChange = useCallback4((balance2) => {
+    setTotalBalanceUsd(balance2);
   }, []);
   const handleBack = useCallback4(() => {
     backHandlerRef.current?.();
@@ -2228,7 +2208,7 @@ function DepositModalInner({
   const showLogo = uiConfig?.showLogo ?? false;
   const showStepper = uiConfig?.showStepper ?? false;
   const showBackButton = uiConfig?.showBackButton ?? true;
-  const balanceTitle = uiConfig?.balanceTitle;
+  const balance = uiConfig?.balance;
   const logoUrl = branding?.logoUrl ?? "https://github.com/rhinestonewtf.png";
   const title = branding?.title ?? "Deposit";
   const canGoBack = currentStepIndex > 0 && currentStepIndex < 4 && backHandlerRef.current !== void 0;
@@ -2289,12 +2269,12 @@ function DepositModalInner({
                 i
               )) })
             ] }),
-            balanceTitle && totalBalanceUsd !== null && /* @__PURE__ */ jsxs8("div", { className: "rs-modal-header-balance", children: [
+            balance && /* @__PURE__ */ jsxs8("div", { className: "rs-modal-header-balance", children: [
               /* @__PURE__ */ jsxs8("span", { children: [
-                balanceTitle,
+                balance.title,
                 ":"
               ] }),
-              /* @__PURE__ */ jsx8("span", { className: "rs-modal-header-balance-value", children: currencyFormatter.format(totalBalanceUsd) })
+              /* @__PURE__ */ jsx8("span", { className: "rs-modal-header-balance-value", children: balance.amount ?? (totalBalanceUsd !== null ? currencyFormatter.format(totalBalanceUsd) : null) })
             ] })
           ] }),
           /* @__PURE__ */ jsx8("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx8(
@@ -2343,6 +2323,7 @@ function DepositModalInner({
             waitForFinalTx,
             reownWallet,
             onConnect,
+            onDisconnect,
             onRequestConnect,
             connectButtonLabel,
             uiConfig,