@spicenet-io/spiceflow-ui 1.7.7 → 1.8.0

package/dist/auth-dynamic.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useEffect, useState, useCallback } from 'react';
-import { c as createTheme, B as Button } from './Button-RifBkofT.js';
+import { c as createTheme, B as Button } from './Button-aWXByNBC.js';
 import { useDynamicContext, useConnectWithOtp } from '@dynamic-labs/sdk-react-core';
 
 const Input = ({

package/dist/auth-privy.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { B as Button, c as createTheme } from './Button-RifBkofT.js';
+import { B as Button, c as createTheme } from './Button-aWXByNBC.js';
 import { usePrivy, useLogin, useLogout } from '@privy-io/react-auth';
 
 const PrivyLogin = ({

package/dist/index.cjs.js

@@ -103,7 +103,7 @@ const CHAIN_CONFIGS = {
       symbol: "ETH",
       decimals: 18
     },
-    rpc: "https://site1.moralis-nodes.com/base-sepolia/0563a61e273c428f906716cd4befa362",
+    rpc: "https://sepolia.base.org",
     blockExplorers: {
       default: {
         name: "Basescan",
@@ -916,13 +916,12 @@ const useAssets = ({
   address,
   supportedChains,
   fetchBalances: fetchBalances2,
-  refreshInterval = 8e3
-  // 8 seconds default
+  refreshInterval = 1e4
+  // 30 seconds default
 }) => {
   const [assets, setAssets] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState(null);
-  const isInitialLoadRef = React.useRef(true);
   const addressRef = React.useRef(address);
   const supportedChainsRef = React.useRef(supportedChains);
   const fetchBalancesRef = React.useRef(fetchBalances2);
@@ -939,9 +938,7 @@ const useAssets = ({
       setAssets([]);
       return;
     }
-    if (isInitialLoadRef.current) {
-      setLoading(true);
-    }
+    setLoading(true);
     setError(null);
     try {
       const balances = await currentFetchBalances(currentAddress);
@@ -960,10 +957,7 @@ const useAssets = ({
       setError(errorMessage);
       console.error("Error fetching assets:", err);
     } finally {
-      if (isInitialLoadRef.current) {
-        setLoading(false);
-        isInitialLoadRef.current = false;
-      }
+      setLoading(false);
     }
   }, []);
   const getAssetsByChain = React.useCallback(
@@ -977,7 +971,6 @@ const useAssets = ({
   }, [assets]);
   React.useEffect(() => {
     if (address) {
-      isInitialLoadRef.current = true;
       refreshAssets();
     }
   }, [address, refreshAssets]);
@@ -1668,31 +1661,6 @@ const AssetSelectorComponent = ({
   ]);
   const handleAmountChange = (value) => {
     const cleanValue = parseNumericInput(value);
-    if (!cleanValue) {
-      setLocalAmount(cleanValue);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      debounceTimerRef.current = setTimeout(() => {
-        onAmountChange(cleanValue);
-      }, 300);
-      return;
-    }
-    if (selectedAsset?.asset) {
-      const numAmount = parseFloat(cleanValue);
-      const maxBalance = selectedAsset.asset.balanceFormatted;
-      if (!isNaN(numAmount) && numAmount > maxBalance) {
-        const clampedAmount = maxBalance.toString();
-        setLocalAmount(clampedAmount);
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current);
-        }
-        debounceTimerRef.current = setTimeout(() => {
-          onAmountChange(clampedAmount);
-        }, 300);
-        return;
-      }
-    }
     setLocalAmount(cleanValue);
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -3989,6 +3957,7 @@ const DepositWidget = ({
   tokenAddress,
   tokenDecimals,
   supportedChains,
+  supportedTokens,
   theme: themeMode = "light",
   styles,
   className = "",
@@ -4203,9 +4172,19 @@ const DepositWidget = ({
       setIsExecuting(false);
     }
   };
-  const depositAssets = supportedChains.flatMap(
-    (chainId) => getAllAssetsForChain(chainId, assets)
-  );
+  const depositAssets = React.useMemo(() => {
+    const allAssets = supportedChains.flatMap(
+      (chainId) => getAllAssetsForChain(chainId, assets)
+    );
+    if (supportedTokens && supportedTokens.length > 0) {
+      return allAssets.filter(
+        (asset) => supportedTokens.some(
+          (symbol) => symbol.toLowerCase() === asset.symbol.toLowerCase()
+        )
+      );
+    }
+    return allAssets;
+  }, [supportedChains, assets, supportedTokens]);
   const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
   const displayError = assetsError || error;
   const containerStyles = {
@@ -4693,6 +4672,7 @@ const DepositWidgetModal = ({
   tokenAddress,
   tokenDecimals,
   supportedChains,
+  supportedTokens,
   theme: themeMode = "light",
   styles,
   className,
@@ -4759,6 +4739,7 @@ const DepositWidgetModal = ({
           tokenAddress,
           tokenDecimals,
           supportedChains,
+          supportedTokens,
           theme: themeMode,
           styles: {
             ...styles,
@@ -5566,84 +5547,6 @@ const ConnectWalletModal = ({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { title: "Connect Wallet", onClose }),
-            requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  padding: "0 32px",
-                  marginTop: "20px"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    style: {
-                      padding: "12px 16px",
-                      backgroundColor: "#EFF6FF",
-                      borderRadius: "8px",
-                      border: "1px solid #BFDBFE",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: {
-                            width: "32px",
-                            height: "32px",
-                            borderRadius: "50%",
-                            backgroundColor: "#DBEAFE",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            flexShrink: 0
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "img",
-                            {
-                              src: img$3,
-                              alt: "Rabby",
-                              style: {
-                                width: "20px",
-                                height: "20px",
-                                objectFit: "contain"
-                              }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "p",
-                          {
-                            style: {
-                              margin: "0 0 4px 0",
-                              color: "#1E40AF",
-                              fontSize: "13px",
-                              fontWeight: 600
-                            },
-                            children: "Recommended Wallet"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "p",
-                          {
-                            style: {
-                              margin: 0,
-                              color: "#1E3A8A",
-                              fontSize: "12px",
-                              lineHeight: "1.4"
-                            },
-                            children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
-                          }
-                        )
-                      ] })
-                    ]
-                  }
-                )
-              }
-            ),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -5775,75 +5678,6 @@ const ConnectWalletModal = ({
                       ]
                     }
                   ),
-                  isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      style: {
-                        padding: "12px 16px",
-                        backgroundColor: "#EFF6FF",
-                        borderRadius: "8px",
-                        border: "1px solid #BFDBFE",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "10px"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "div",
-                          {
-                            style: {
-                              width: "32px",
-                              height: "32px",
-                              borderRadius: "50%",
-                              backgroundColor: "#DBEAFE",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              flexShrink: 0
-                            },
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              "img",
-                              {
-                                src: img$3,
-                                alt: "Rabby",
-                                style: {
-                                  width: "20px",
-                                  height: "20px",
-                                  objectFit: "contain"
-                                }
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "p",
-                            {
-                              style: {
-                                margin: "0 0 4px 0",
-                                color: "#1E40AF",
-                                fontSize: "13px",
-                                fontWeight: 600
-                              },
-                              children: "Recommended Wallet"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "p",
-                            {
-                              style: {
-                                margin: 0,
-                                color: "#1E3A8A",
-                                fontSize: "12px",
-                                lineHeight: "1.4"
-                              },
-                              children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
-                            }
-                          )
-                        ] })
-                      ]
-                    }
-                  ),
                   isConnected && address ? /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
@@ -7234,7 +7068,7 @@ const DepositModal = React.memo(
       address: sourceAddress || address,
       supportedChains,
       fetchBalances,
-      refreshInterval: 8e3
+      refreshInterval: 3e4
     });
     const [isExecuting, setIsExecuting] = React.useState(false);
     const [error, setError] = React.useState(null);
@@ -7272,26 +7106,6 @@ const DepositModal = React.memo(
         });
       }
     }, [depositAmount]);
-    React.useEffect(() => {
-      if (selectedDepositAssets.length === 0) return;
-      setSelectedDepositAssets((prev) => {
-        return prev.map((selectedItem) => {
-          if (!selectedItem.asset) return selectedItem;
-          const freshAsset = depositAssets.find(
-            (a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
-          );
-          if (freshAsset) {
-            return {
-              ...selectedItem,
-              asset: freshAsset,
-              // Preserve the user's entered amount
-              amount: selectedItem.amount
-            };
-          }
-          return selectedItem;
-        });
-      });
-    }, [assets]);
     React.useEffect(() => {
       if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
         const bridgedAmount = bridgedAmountRef.current;
@@ -7342,16 +7156,8 @@ const DepositModal = React.memo(
       const errorMessage = error2?.message || String(error2 || "");
       const errorDetails = error2?.details || "";
       const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
-      console.error("RPC Error Details:", {
-        code: error2?.code,
-        message: errorMessage,
-        details: errorDetails,
-        data: error2?.data,
-        stack: error2?.stack,
-        fullError: error2
-      });
       if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
-        return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
+        return "Network error occurred. Please try again.";
       }
       return errorMessage || "Transaction failed";
     }, []);
@@ -7441,7 +7247,6 @@ const DepositModal = React.memo(
         }
         setAirdropMessage("Airdrop requested successfully.");
       } catch (e) {
-        console.log(e);
         const msg = handleRpcError(e);
         setAirdropError(msg);
       } finally {
@@ -7565,11 +7370,6 @@ const DepositModal = React.memo(
         }
         if (currentChain?.id !== chainId) {
           setError("Wrong chain selected. Switching network...");
-          console.log("Attempting to switch to chain:", {
-            chainId,
-            currentChainId: currentChain?.id,
-            chainName: getChainName$1(chainId)
-          });
           try {
             await switchChainAsync({ chainId });
             let attempts = 0;
@@ -7656,14 +7456,6 @@ const DepositModal = React.memo(
                 tokenAddress = "0x0";
               }
               const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
-              console.log("Sending transaction via MetaMask:", {
-                chainId,
-                isNative,
-                tokenAddress,
-                delegateContract,
-                amount: amount.toString(),
-                walletChainId: externalWalletClient.chain?.id
-              });
               const txHash = isNative ? await externalWalletClient.sendTransaction({
                 to: delegateContract,
                 value: amount
@@ -7804,14 +7596,6 @@ const DepositModal = React.memo(
               tokenAddress = "0x0";
             }
             const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
-            console.log("Sending EIP-7702 transaction via MetaMask:", {
-              chainId,
-              isNative,
-              tokenAddress,
-              amount: amount.toString(),
-              recipient: address,
-              walletChainId: externalWalletClient.chain?.id
-            });
             const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
               to: address,
               value: amount
@@ -10439,7 +10223,7 @@ const SpiceWithdraw = (props) => {
     }
     const transports = {};
     chains.forEach((chain) => {
-      transports[chain.id] = wagmi.http(chain.rpc);
+      transports[chain.id] = wagmi.http();
     });
     const connectorsList = [connectors.metaMask()];
     if (walletConnectProjectId) {

package/dist/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, forwardRef, createElement, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, useMemo, forwardRef, createElement } from 'react';
 import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, encodeFunctionData, parseUnits, erc20Abi } from 'viem';
-import { c as createTheme, B as Button, d as defaultTheme } from './Button-RifBkofT.js';
+import { c as createTheme, B as Button, d as defaultTheme } from './Button-aWXByNBC.js';
 import { getBalance, readContract } from 'viem/actions';
 import { basecampTestnet, citreaTestnet, baseSepolia, arbitrumSepolia, sepolia } from 'viem/chains';
 import { createPortal } from 'react-dom';
@@ -101,7 +101,7 @@ const CHAIN_CONFIGS = {
       symbol: "ETH",
       decimals: 18
     },
-    rpc: "https://site1.moralis-nodes.com/base-sepolia/0563a61e273c428f906716cd4befa362",
+    rpc: "https://sepolia.base.org",
     blockExplorers: {
       default: {
         name: "Basescan",
@@ -914,13 +914,12 @@ const useAssets = ({
   address,
   supportedChains,
   fetchBalances: fetchBalances2,
-  refreshInterval = 8e3
-  // 8 seconds default
+  refreshInterval = 1e4
+  // 30 seconds default
 }) => {
   const [assets, setAssets] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const isInitialLoadRef = useRef(true);
   const addressRef = useRef(address);
   const supportedChainsRef = useRef(supportedChains);
   const fetchBalancesRef = useRef(fetchBalances2);
@@ -937,9 +936,7 @@ const useAssets = ({
       setAssets([]);
       return;
     }
-    if (isInitialLoadRef.current) {
-      setLoading(true);
-    }
+    setLoading(true);
     setError(null);
     try {
       const balances = await currentFetchBalances(currentAddress);
@@ -958,10 +955,7 @@ const useAssets = ({
       setError(errorMessage);
       console.error("Error fetching assets:", err);
     } finally {
-      if (isInitialLoadRef.current) {
-        setLoading(false);
-        isInitialLoadRef.current = false;
-      }
+      setLoading(false);
     }
   }, []);
   const getAssetsByChain = useCallback(
@@ -975,7 +969,6 @@ const useAssets = ({
   }, [assets]);
   useEffect(() => {
     if (address) {
-      isInitialLoadRef.current = true;
       refreshAssets();
     }
   }, [address, refreshAssets]);
@@ -1666,31 +1659,6 @@ const AssetSelectorComponent = ({
   ]);
   const handleAmountChange = (value) => {
     const cleanValue = parseNumericInput(value);
-    if (!cleanValue) {
-      setLocalAmount(cleanValue);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      debounceTimerRef.current = setTimeout(() => {
-        onAmountChange(cleanValue);
-      }, 300);
-      return;
-    }
-    if (selectedAsset?.asset) {
-      const numAmount = parseFloat(cleanValue);
-      const maxBalance = selectedAsset.asset.balanceFormatted;
-      if (!isNaN(numAmount) && numAmount > maxBalance) {
-        const clampedAmount = maxBalance.toString();
-        setLocalAmount(clampedAmount);
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current);
-        }
-        debounceTimerRef.current = setTimeout(() => {
-          onAmountChange(clampedAmount);
-        }, 300);
-        return;
-      }
-    }
     setLocalAmount(cleanValue);
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -3987,6 +3955,7 @@ const DepositWidget = ({
   tokenAddress,
   tokenDecimals,
   supportedChains,
+  supportedTokens,
   theme: themeMode = "light",
   styles,
   className = "",
@@ -4201,9 +4170,19 @@ const DepositWidget = ({
       setIsExecuting(false);
     }
   };
-  const depositAssets = supportedChains.flatMap(
-    (chainId) => getAllAssetsForChain(chainId, assets)
-  );
+  const depositAssets = useMemo(() => {
+    const allAssets = supportedChains.flatMap(
+      (chainId) => getAllAssetsForChain(chainId, assets)
+    );
+    if (supportedTokens && supportedTokens.length > 0) {
+      return allAssets.filter(
+        (asset) => supportedTokens.some(
+          (symbol) => symbol.toLowerCase() === asset.symbol.toLowerCase()
+        )
+      );
+    }
+    return allAssets;
+  }, [supportedChains, assets, supportedTokens]);
   const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
   const displayError = assetsError || error;
   const containerStyles = {
@@ -4691,6 +4670,7 @@ const DepositWidgetModal = ({
   tokenAddress,
   tokenDecimals,
   supportedChains,
+  supportedTokens,
   theme: themeMode = "light",
   styles,
   className,
@@ -4757,6 +4737,7 @@ const DepositWidgetModal = ({
           tokenAddress,
           tokenDecimals,
           supportedChains,
+          supportedTokens,
           theme: themeMode,
           styles: {
             ...styles,
@@ -5564,84 +5545,6 @@ const ConnectWalletModal = ({
           },
           children: [
             /* @__PURE__ */ jsx(ModalHeader, { title: "Connect Wallet", onClose }),
-            requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  padding: "0 32px",
-                  marginTop: "20px"
-                },
-                children: /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      padding: "12px 16px",
-                      backgroundColor: "#EFF6FF",
-                      borderRadius: "8px",
-                      border: "1px solid #BFDBFE",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            width: "32px",
-                            height: "32px",
-                            borderRadius: "50%",
-                            backgroundColor: "#DBEAFE",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            flexShrink: 0
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            "img",
-                            {
-                              src: img$3,
-                              alt: "Rabby",
-                              style: {
-                                width: "20px",
-                                height: "20px",
-                                objectFit: "contain"
-                              }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                        /* @__PURE__ */ jsx(
-                          "p",
-                          {
-                            style: {
-                              margin: "0 0 4px 0",
-                              color: "#1E40AF",
-                              fontSize: "13px",
-                              fontWeight: 600
-                            },
-                            children: "Recommended Wallet"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "p",
-                          {
-                            style: {
-                              margin: 0,
-                              color: "#1E3A8A",
-                              fontSize: "12px",
-                              lineHeight: "1.4"
-                            },
-                            children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
-                          }
-                        )
-                      ] })
-                    ]
-                  }
-                )
-              }
-            ),
             /* @__PURE__ */ jsxs(
               "div",
               {
@@ -5773,75 +5676,6 @@ const ConnectWalletModal = ({
                       ]
                     }
                   ),
-                  isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        padding: "12px 16px",
-                        backgroundColor: "#EFF6FF",
-                        borderRadius: "8px",
-                        border: "1px solid #BFDBFE",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "10px"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            style: {
-                              width: "32px",
-                              height: "32px",
-                              borderRadius: "50%",
-                              backgroundColor: "#DBEAFE",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              flexShrink: 0
-                            },
-                            children: /* @__PURE__ */ jsx(
-                              "img",
-                              {
-                                src: img$3,
-                                alt: "Rabby",
-                                style: {
-                                  width: "20px",
-                                  height: "20px",
-                                  objectFit: "contain"
-                                }
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                          /* @__PURE__ */ jsx(
-                            "p",
-                            {
-                              style: {
-                                margin: "0 0 4px 0",
-                                color: "#1E40AF",
-                                fontSize: "13px",
-                                fontWeight: 600
-                              },
-                              children: "Recommended Wallet"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "p",
-                            {
-                              style: {
-                                margin: 0,
-                                color: "#1E3A8A",
-                                fontSize: "12px",
-                                lineHeight: "1.4"
-                              },
-                              children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
-                            }
-                          )
-                        ] })
-                      ]
-                    }
-                  ),
                   isConnected && address ? /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -7232,7 +7066,7 @@ const DepositModal = React.memo(
       address: sourceAddress || address,
       supportedChains,
       fetchBalances,
-      refreshInterval: 8e3
+      refreshInterval: 3e4
     });
     const [isExecuting, setIsExecuting] = useState(false);
     const [error, setError] = useState(null);
@@ -7270,26 +7104,6 @@ const DepositModal = React.memo(
         });
       }
     }, [depositAmount]);
-    useEffect(() => {
-      if (selectedDepositAssets.length === 0) return;
-      setSelectedDepositAssets((prev) => {
-        return prev.map((selectedItem) => {
-          if (!selectedItem.asset) return selectedItem;
-          const freshAsset = depositAssets.find(
-            (a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
-          );
-          if (freshAsset) {
-            return {
-              ...selectedItem,
-              asset: freshAsset,
-              // Preserve the user's entered amount
-              amount: selectedItem.amount
-            };
-          }
-          return selectedItem;
-        });
-      });
-    }, [assets]);
     useEffect(() => {
       if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
         const bridgedAmount = bridgedAmountRef.current;
@@ -7340,16 +7154,8 @@ const DepositModal = React.memo(
       const errorMessage = error2?.message || String(error2 || "");
       const errorDetails = error2?.details || "";
       const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
-      console.error("RPC Error Details:", {
-        code: error2?.code,
-        message: errorMessage,
-        details: errorDetails,
-        data: error2?.data,
-        stack: error2?.stack,
-        fullError: error2
-      });
       if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
-        return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
+        return "Network error occurred. Please try again.";
       }
       return errorMessage || "Transaction failed";
     }, []);
@@ -7439,7 +7245,6 @@ const DepositModal = React.memo(
         }
         setAirdropMessage("Airdrop requested successfully.");
       } catch (e) {
-        console.log(e);
         const msg = handleRpcError(e);
         setAirdropError(msg);
       } finally {
@@ -7563,11 +7368,6 @@ const DepositModal = React.memo(
         }
         if (currentChain?.id !== chainId) {
           setError("Wrong chain selected. Switching network...");
-          console.log("Attempting to switch to chain:", {
-            chainId,
-            currentChainId: currentChain?.id,
-            chainName: getChainName$1(chainId)
-          });
           try {
             await switchChainAsync({ chainId });
             let attempts = 0;
@@ -7654,14 +7454,6 @@ const DepositModal = React.memo(
                 tokenAddress = "0x0";
               }
               const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
-              console.log("Sending transaction via MetaMask:", {
-                chainId,
-                isNative,
-                tokenAddress,
-                delegateContract,
-                amount: amount.toString(),
-                walletChainId: externalWalletClient.chain?.id
-              });
               const txHash = isNative ? await externalWalletClient.sendTransaction({
                 to: delegateContract,
                 value: amount
@@ -7802,14 +7594,6 @@ const DepositModal = React.memo(
               tokenAddress = "0x0";
             }
             const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
-            console.log("Sending EIP-7702 transaction via MetaMask:", {
-              chainId,
-              isNative,
-              tokenAddress,
-              amount: amount.toString(),
-              recipient: address,
-              walletChainId: externalWalletClient.chain?.id
-            });
             const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
               to: address,
               value: amount
@@ -10437,7 +10221,7 @@ const SpiceWithdraw = (props) => {
     }
     const transports = {};
     chains.forEach((chain) => {
-      transports[chain.id] = http$1(chain.rpc);
+      transports[chain.id] = http$1();
     });
     const connectorsList = [metaMask()];
     if (walletConnectProjectId) {

package/dist/types/deposit.d.ts

@@ -22,6 +22,7 @@ export interface DepositWidgetProps {
     tokenAddress: Address;
     tokenDecimals: number;
     supportedChains: number[];
+    supportedTokens?: string[];
     theme?: ThemeMode;
     styles?: CustomStyles;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicenet-io/spiceflow-ui",
-  "version": "1.7.7",
+  "version": "1.8.0",
   "description": "Spiceflow UI SDK",
   "type": "module",
   "main": "dist/index.cjs.js",