@rhinestone/deposit-modal 0.1.29 → 0.1.31

package/dist/{chunk-XTTTHW3W.mjs → chunk-AWFJFSPH.mjs}

@@ -21,7 +21,7 @@ import {
   portfolioToAssets,
   saveSessionOwnerToStorage,
   tokenFormatter
-} from "./chunk-N6T4TKXI.mjs";
+} from "./chunk-EVU7M7A6.mjs";
 import {
   DEFAULT_BACKEND_URL,
   DEFAULT_SIGNER_ADDRESS,
@@ -32,11 +32,11 @@ import {
   getChainId,
   getChainName,
   getSupportedChainIds,
-  getSupportedTokenSymbolsForChain,
+  getTargetTokenSymbolsForChain,
   getTokenAddress,
   getTokenIcon,
   getTokenSymbol
-} from "./chunk-CSQRKM4Y.mjs";
+} from "./chunk-3ICS43XC.mjs";
 
 // src/DepositModal.tsx
 import {
@@ -446,7 +446,7 @@ function AssetSelectStep({
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx2("div", { className: "rs-asset-balance", children: asset.balanceUsd !== void 0 ? currencyFormatter.format(asset.balanceUsd) : tokenAmount !== "--" ? `${tokenAmount} ${asset.symbol}` : "--" })
+                  /* @__PURE__ */ jsx2("div", { className: "rs-asset-balance", children: asset.balanceUsd !== void 0 && asset.balanceUsd > 0 ? currencyFormatter.format(asset.balanceUsd) : tokenAmount !== "--" ? `${tokenAmount} ${asset.symbol}` : "--" })
                 ]
               },
               asset.id
@@ -509,7 +509,7 @@ function mergeAssets(existing, incoming) {
 // src/components/steps/AmountStep.tsx
 import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3, useRef as useRef2 } from "react";
 import { erc20Abi, formatUnits as formatUnits2, parseUnits } from "viem";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AmountStep({
   walletClient,
   publicClient,
@@ -525,7 +525,7 @@ function AmountStep({
   onBalanceUsdChange,
   onContinue
 }) {
-  const [amountUsd, setAmountUsd] = useState3("");
+  const [amount, setAmount] = useState3("");
   const [balance, setBalance] = useState3(null);
   const [error, setError] = useState3(null);
   const [isSwitching, setIsSwitching] = useState3(false);
@@ -534,18 +534,22 @@ function AmountStep({
     walletClient?.chain?.id && walletClient.chain.id !== asset.chainId
   );
   const tokenPriceUsd = useMemo2(() => {
-    if (tokenPriceUsdOverride !== void 0) return tokenPriceUsdOverride;
-    if (asset.balanceUsd === void 0 || !asset.balance) return null;
+    if (tokenPriceUsdOverride !== void 0 && tokenPriceUsdOverride > 0)
+      return tokenPriceUsdOverride;
+    if (asset.balanceUsd === void 0 || !asset.balanceUsd || !asset.balance)
+      return null;
     try {
       const balanceUnits = Number(
         formatUnits2(BigInt(asset.balance), asset.decimals)
       );
       if (!Number.isFinite(balanceUnits) || balanceUnits <= 0) return null;
-      return asset.balanceUsd / balanceUnits;
+      const price = asset.balanceUsd / balanceUnits;
+      return price > 0 ? price : null;
     } catch {
       return null;
     }
   }, [tokenPriceUsdOverride, asset.balanceUsd, asset.balance, asset.decimals]);
+  const hasPricing = tokenPriceUsd !== null;
   useEffect3(() => {
     let active = true;
     async function fetchBalance() {
@@ -585,14 +589,18 @@ function AmountStep({
     }
   }, [chainMismatch, switchChain, asset.chainId]);
   useEffect3(() => {
-    if (defaultAmount && tokenPriceUsd !== null && !amountUsd) {
+    if (defaultAmount && !amount) {
       const parsed = Number(defaultAmount);
       if (Number.isFinite(parsed) && parsed > 0) {
-        const usdValue = parsed * tokenPriceUsd;
-        setAmountUsd(usdValue.toFixed(2));
+        if (hasPricing) {
+          const usdValue = parsed * tokenPriceUsd;
+          setAmount(usdValue.toFixed(2));
+        } else {
+          setAmount(parsed.toString());
+        }
       }
     }
-  }, [defaultAmount, tokenPriceUsd, amountUsd]);
+  }, [defaultAmount, tokenPriceUsd, hasPricing, amount]);
   const balanceUsd = useMemo2(() => {
     if (balance === null || tokenPriceUsd === null) return null;
     try {
@@ -604,8 +612,7 @@ function AmountStep({
     }
   }, [balance, tokenPriceUsd, asset.decimals]);
   useEffect3(() => {
-    if (balanceUsd === null) return;
-    onBalanceUsdChange?.(balanceUsd);
+    onBalanceUsdChange?.(balanceUsd ?? 0);
   }, [balanceUsd, onBalanceUsdChange]);
   const formattedBalance = useMemo2(() => {
     if (balance === null) return "...";
@@ -619,47 +626,62 @@ function AmountStep({
     }
   }, [balance, asset.decimals]);
   const tokenAmount = useMemo2(() => {
-    if (!amountUsd || tokenPriceUsd === null || tokenPriceUsd === 0)
-      return null;
-    const usd = Number(amountUsd);
-    if (!Number.isFinite(usd) || usd <= 0) return null;
-    return usd / tokenPriceUsd;
-  }, [amountUsd, tokenPriceUsd]);
+    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 (balanceUsd === null) return;
-    const value = balanceUsd * percentage / 100;
-    setAmountUsd(value.toFixed(2));
+    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;
+      }
+    }
     if (error) setError(null);
   };
   const handleContinue = () => {
-    const usdValue = parseFloat(amountUsd);
-    if (isNaN(usdValue) || usdValue <= 0) {
+    const numericAmount = parseFloat(amount);
+    if (isNaN(numericAmount) || numericAmount <= 0) {
       setError("Please enter a valid amount");
       return;
     }
-    if (uiConfig?.maxDepositUsd && usdValue > uiConfig.maxDepositUsd) {
-      setError(
-        `Maximum deposit is ${currencyFormatter.format(uiConfig.maxDepositUsd)}`
-      );
-      return;
-    }
-    if (uiConfig?.minDepositUsd && usdValue < uiConfig.minDepositUsd) {
-      setError(
-        `Minimum deposit is ${currencyFormatter.format(uiConfig.minDepositUsd)}`
-      );
-      return;
-    }
-    if (tokenPriceUsd === null || tokenPriceUsd === 0) {
-      setError("Unable to determine token price");
-      return;
+    let tokenAmountStr;
+    if (hasPricing) {
+      if (uiConfig?.maxDepositUsd && numericAmount > uiConfig.maxDepositUsd) {
+        setError(
+          `Maximum deposit is ${currencyFormatter.format(uiConfig.maxDepositUsd)}`
+        );
+        return;
+      }
+      if (uiConfig?.minDepositUsd && numericAmount < uiConfig.minDepositUsd) {
+        setError(
+          `Minimum deposit is ${currencyFormatter.format(uiConfig.minDepositUsd)}`
+        );
+        return;
+      }
+      tokenAmountStr = (numericAmount / tokenPriceUsd).toString();
+    } else {
+      tokenAmountStr = numericAmount.toString();
     }
-    const tokenAmountValue = usdValue / tokenPriceUsd;
-    let tokenAmountStr = tokenAmountValue.toString();
     let amountInUnits;
     try {
       amountInUnits = parseUnits(tokenAmountStr, asset.decimals);
@@ -668,8 +690,8 @@ 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);
@@ -689,41 +711,67 @@ 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: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx3("div", { className: "rs-amount-input-wrapper", children: hasPricing ? /* @__PURE__ */ jsx3(
           "input",
           {
             type: "text",
             inputMode: "decimal",
             className: "rs-amount-input-large",
             placeholder: "$0.00",
-            value: amountUsd ? `$${amountUsd}` : "",
+            value: amount ? `$${amount}` : "",
             onChange: (e) => {
               const raw = e.target.value.replace(/[^0-9.]/g, "");
               const parts = raw.split(".");
               if (parts.length > 2) return;
-              setAmountUsd(raw);
+              setAmount(raw);
+              if (error) setError(null);
+            },
+            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
           }
         ) }),
-        /* @__PURE__ */ jsxs3("div", { className: "rs-amount-token-value", children: [
-          formattedTokenAmount,
-          " ",
-          asset.symbol
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "rs-amount-available", children: /* @__PURE__ */ jsxs3("span", { className: "rs-amount-available-value", children: [
-          formattedBalance,
-          " ",
-          asset.symbol,
-          " available",
-          balanceUsd !== null && /* @__PURE__ */ jsxs3("span", { style: { color: "var(--rs-muted-foreground)" }, children: [
+        (uiConfig?.showTokenBalance ?? false) && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          hasPricing ? /* @__PURE__ */ jsxs3("div", { className: "rs-amount-token-value", children: [
+            formattedTokenAmount,
             " ",
-            "(",
-            currencyFormatter.format(balanceUsd),
-            ")"
-          ] })
-        ] }) })
+            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: [
+            formattedBalance,
+            " ",
+            asset.symbol,
+            " available",
+            hasPricing && balanceUsd !== null && /* @__PURE__ */ jsxs3("span", { style: { color: "var(--rs-muted-foreground)" }, children: [
+              " ",
+              "(",
+              currencyFormatter.format(balanceUsd),
+              ")"
+            ] })
+          ] }) })
+        ] })
       ] }),
       /* @__PURE__ */ jsx3(
         "div",
@@ -837,7 +885,7 @@ function AmountStep({
             type: "button",
             className: "rs-amount-preset-btn",
             onClick: () => handlePresetClick(pct),
-            disabled: balanceUsd === null,
+            disabled: balance === null,
             children: [
               pct,
               "%"
@@ -851,7 +899,7 @@ function AmountStep({
             type: "button",
             className: "rs-amount-preset-btn",
             onClick: () => handlePresetClick(100),
-            disabled: balanceUsd === null,
+            disabled: balance === null,
             children: "Max"
           }
         )
@@ -900,7 +948,7 @@ function AmountStep({
       {
         onClick: handleContinue,
         fullWidth: true,
-        disabled: !amountUsd || chainMismatch,
+        disabled: !amount || chainMismatch,
         children: "Continue"
       }
     ) }),
@@ -974,7 +1022,7 @@ function ConfirmStep({
     return receiveAmountUsd / targetTokenPriceUsd;
   }, [sameRoute, amount, receiveAmountUsd, targetTokenPriceUsd]);
   const formattedReceiveAmount = useMemo3(() => {
-    if (receiveTokenAmount === null) return `~ ${formattedAmount}`;
+    if (receiveTokenAmount === null) return formattedAmount;
     return receiveTokenAmount.toLocaleString("en-US", {
       maximumFractionDigits: 6
     });
@@ -1067,7 +1115,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)
@@ -1088,7 +1136,7 @@ function ConfirmStep({
                   {
                     src: getChainIcon(targetChain),
                     alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
+                    style: { width: 16, height: 16, borderRadius: 3 }
                   }
                 ),
                 getChainName(targetChain)
@@ -1211,7 +1259,7 @@ import { useState as useState6, useEffect as useEffect5, useCallback as useCallb
 
 // src/components/ui/QRCode.tsx
 import { useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function QRCode({ value, size = 200, iconSrc, className }) {
   const [createQrCode, setCreateQrCode] = useState5(null);
   useEffect4(() => {
@@ -1269,7 +1317,7 @@ function QRCode({ value, size = 200, iconSrc, className }) {
       children: [
         /* @__PURE__ */ jsx5("rect", { width: size, height: size, fill: "white", rx: 4 }),
         svgContent ? /* @__PURE__ */ jsx5("path", { d: svgContent.paths, fill: "black" }) : /* @__PURE__ */ jsx5("rect", { x: 8, y: 8, width: size - 16, height: size - 16, fill: "#f1f5f9" }),
-        iconSrc && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        iconSrc && /* @__PURE__ */ jsxs5(Fragment3, { children: [
           /* @__PURE__ */ jsx5(
             "rect",
             {
@@ -1352,7 +1400,7 @@ function DepositAddressStep({
   const defaultChainId = supportedChainIds.includes(BASE_CHAIN_ID) ? BASE_CHAIN_ID : supportedChainIds[0];
   const [sourceChainId, setSourceChainId] = useState6(defaultChainId);
   const tokensForChain = useMemo5(
-    () => getSupportedTokenSymbolsForChain(sourceChainId),
+    () => getTargetTokenSymbolsForChain(sourceChainId),
     [sourceChainId]
   );
   const defaultToken = tokensForChain.includes("USDC") ? "USDC" : tokensForChain[0] ?? "USDC";
@@ -1445,7 +1493,7 @@ function DepositAddressStep({
     /* @__PURE__ */ jsx6("div", { className: "rs-step-body", children: /* @__PURE__ */ jsxs6("div", { className: "rs-deposit-address", children: [
       /* @__PURE__ */ jsxs6("div", { className: "rs-deposit-address-selectors", children: [
         /* @__PURE__ */ jsxs6("div", { className: "rs-deposit-address-dropdown", children: [
-          /* @__PURE__ */ jsx6("div", { className: "rs-deposit-address-dropdown-label", children: "Supported token" }),
+          /* @__PURE__ */ jsx6("div", { className: "rs-deposit-address-dropdown-label", children: "Fallback token" }),
           /* @__PURE__ */ jsxs6(
             "button",
             {
@@ -1511,7 +1559,7 @@ function DepositAddressStep({
           )) })
         ] }),
         /* @__PURE__ */ jsxs6("div", { className: "rs-deposit-address-dropdown", children: [
-          /* @__PURE__ */ jsx6("div", { className: "rs-deposit-address-dropdown-label", children: "Supported chain" }),
+          /* @__PURE__ */ jsx6("div", { className: "rs-deposit-address-dropdown-label", children: "Fallback chain" }),
           /* @__PURE__ */ jsxs6(
             "button",
             {
@@ -1686,7 +1734,8 @@ function DepositFlow({
       options.push({
         address: reownWallet.address,
         label: "External Wallet",
-        kind: "external"
+        kind: "external",
+        icon: reownWallet.icon
       });
     }
     return options;
@@ -1694,7 +1743,8 @@ function DepositFlow({
     dappWalletClient,
     dappAddress,
     reownWallet?.address,
-    reownWallet?.isConnected
+    reownWallet?.isConnected,
+    reownWallet?.icon
   ]);
   const canAutoLock = dappWalletClient?.account && dappAddress && !reownWallet;
   const hasWalletOptions = walletOptions.length > 0;
@@ -1768,6 +1818,7 @@ function DepositFlow({
   }, []);
   const handleBackFromSelectAsset = useCallback3(() => {
     if (hasWalletOptions || reownWallet) {
+      hasNavigatedBackRef.current = true;
       setIsConnectSelectionConfirmed(false);
     }
   }, [hasWalletOptions, reownWallet]);
@@ -1775,6 +1826,7 @@ function DepositFlow({
     setFlowMode(null);
     setStep({ type: "setup" });
     if (hasWalletOptions || reownWallet) {
+      hasNavigatedBackRef.current = true;
       setIsConnectSelectionConfirmed(false);
     }
   }, [hasWalletOptions, reownWallet]);
@@ -1927,9 +1979,36 @@ function DepositFlow({
     () => 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,
@@ -2105,7 +2184,7 @@ function DepositFlow({
 // src/DepositModal.tsx
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ReownDepositInner = lazy(
-  () => import("./DepositModalReown-BVHWFWIG.mjs").then((m) => ({ default: m.DepositModalReown }))
+  () => import("./DepositModalReown-S7HER5HU.mjs").then((m) => ({ default: m.DepositModalReown }))
 );
 function DepositModal(props) {
   const needsReown = !!props.reownAppId;
@@ -2180,8 +2259,8 @@ function DepositModalInner({
     },
     []
   );
-  const handleTotalBalanceChange = useCallback4((balance) => {
-    setTotalBalanceUsd(balance);
+  const handleTotalBalanceChange = useCallback4((balance2) => {
+    setTotalBalanceUsd(balance2);
   }, []);
   const handleBack = useCallback4(() => {
     backHandlerRef.current?.();
@@ -2189,7 +2268,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;
@@ -2250,12 +2329,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(

package/dist/{chunk-LBEP3A2Z.mjs → chunk-CS6UIMCF.mjs}

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { WagmiProvider } from "wagmi";
-import { createAppKit, useAppKit, useAppKitAccount } from "@reown/appkit/react";
+import { createAppKit, useAppKit, useAppKitAccount, useWalletInfo } from "@reown/appkit/react";
 import {
   mainnet,
   base,
@@ -67,6 +67,7 @@ function ReownWalletProvider({
 function useReownWallet() {
   const { open } = useAppKit();
   const { address, isConnected } = useAppKitAccount();
+  const { walletInfo } = useWalletInfo();
   const { data: walletClient } = useWalletClient();
   const publicClient = usePublicClient();
   const { switchChainAsync } = useSwitchChain();
@@ -75,6 +76,7 @@ function useReownWallet() {
     publicClient: publicClient ?? void 0,
     address,
     isConnected,
+    icon: walletInfo?.icon,
     openConnect: () => {
       void open({ view: isConnected ? "Account" : "Connect" });
     },