@spicenet-io/spiceflow-ui 1.7.2 → 1.7.4

package/dist/index.js

@@ -84,10 +84,10 @@ const CHAIN_CONFIGS = {
     moralisName: "",
     supportedTokens: [
       {
-        address: "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d",
+        address: "0xBeB51deb2018b67b35d5695Fd15bb30D452c7868",
         name: "USD Coin",
         symbol: "USDC",
-        decimals: 6
+        decimals: 18
       }
     ]
   },
@@ -118,10 +118,10 @@ const CHAIN_CONFIGS = {
     moralisName: "0x14a34",
     supportedTokens: [
       {
-        address: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
+        address: "0xf370dC3765f81aC9dD2FEBd59Fb4e710330B0BC8",
         name: "USD Coin",
         symbol: "USDC",
-        decimals: 6
+        decimals: 18
       },
       {
         address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
@@ -911,7 +911,7 @@ const useAssets = ({
   address,
   supportedChains,
   fetchBalances: fetchBalances2,
-  refreshInterval = 3e4
+  refreshInterval = 1e4
   // 30 seconds default
 }) => {
   const [assets, setAssets] = useState([]);
@@ -3164,6 +3164,39 @@ class RelayerService {
       throw error;
     }
   }
+  async requestSpiceUsdAirdrop(params) {
+    try {
+      const response = await fetch(
+        `${this.baseUrl}/airdrop/${params.chainId}/spiceUsd`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ wallet: params.address })
+        }
+      );
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        const msg = data && (data.error || data.message) || "Failed to request airdrop";
+        return { success: false, errorMessage: String(msg) };
+      }
+      if (data && typeof data.error === "string") {
+        return { success: false, errorMessage: data.error };
+      }
+      if (data && (data.txHash || data.amount)) {
+        return {
+          success: true,
+          txHash: data.txHash,
+          amount: data.amount
+        };
+      }
+      return { success: true };
+    } catch (error) {
+      const msg = error?.message && typeof error.message === "string" ? error.message : "Failed to request airdrop";
+      return { success: false, errorMessage: msg };
+    }
+  }
 }
 const relayerService = new RelayerService();
 const createInitialSteps = (chainBatches, customGetChainName) => {
@@ -3912,7 +3945,8 @@ const SwapWidget = ({
 
 const DepositWidget = ({
   depositBatches,
-  tokenAddress = "0x0",
+  tokenAddress,
+  tokenDecimals,
   supportedChains,
   theme: themeMode = "light",
   styles,
@@ -4102,7 +4136,10 @@ const DepositWidget = ({
           [
             {
               tokenAddress,
-              tokenAmount: parseEther(selectedDepositAsset.amount)
+              tokenAmount: parseUnits(
+                selectedDepositAsset.amount,
+                tokenDecimals
+              )
             }
           ]
         ]
@@ -4613,6 +4650,7 @@ const DepositWidgetModal = ({
   // Pass through all DepositWidget props
   depositBatches,
   tokenAddress,
+  tokenDecimals,
   supportedChains,
   theme: themeMode = "light",
   styles,
@@ -4678,6 +4716,7 @@ const DepositWidgetModal = ({
         {
           depositBatches,
           tokenAddress,
+          tokenDecimals,
           supportedChains,
           theme: themeMode,
           styles: {
@@ -6238,45 +6277,93 @@ const DepositConfirmationModal = ({
                     style: {
                       display: "flex",
                       alignItems: "center",
-                      gap: "8px",
-                      marginBottom: theme.spacing.md,
-                      cursor: "pointer"
+                      justifyContent: "space-between",
+                      marginBottom: theme.spacing.md
                     },
-                    onClick: toggleDetails,
                     children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
+                      /* @__PURE__ */ jsxs(
+                        "div",
                         {
                           style: {
-                            fontSize: "13px",
-                            fontWeight: theme.typography.fontWeight.medium,
-                            color: "#6b7280",
-                            fontFamily: styles?.fontFamily || theme.typography.fontFamily
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            cursor: "pointer"
                           },
-                          children: "Transaction Details"
+                          onClick: toggleDetails,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "13px",
+                                  fontWeight: theme.typography.fontWeight.medium,
+                                  color: "#6b7280",
+                                  fontFamily: styles?.fontFamily || theme.typography.fontFamily
+                                },
+                                children: "Transaction Details"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                width: "16",
+                                height: "16",
+                                viewBox: "0 0 16 16",
+                                fill: "none",
+                                style: {
+                                  transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                                  transition: "transform 0.3s ease"
+                                },
+                                children: /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d: "M4 6L8 10L12 6",
+                                    stroke: "#6b7280",
+                                    strokeWidth: "2",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round"
+                                  }
+                                )
+                              }
+                            )
+                          ]
                         }
                       ),
                       /* @__PURE__ */ jsx(
-                        "svg",
+                        "button",
                         {
-                          width: "16",
-                          height: "16",
-                          viewBox: "0 0 16 16",
-                          fill: "none",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onClose();
+                          },
                           style: {
-                            transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
-                            transition: "transform 0.3s ease"
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: "4px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: "#6b7280",
+                            transition: "color 0.2s ease"
                           },
-                          children: /* @__PURE__ */ jsx(
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.color = "#1f2937";
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.color = "#6b7280";
+                          },
+                          children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
                             "path",
                             {
-                              d: "M4 6L8 10L12 6",
-                              stroke: "#6b7280",
+                              d: "M12 4L4 12M4 4L12 12",
+                              stroke: "currentColor",
                               strokeWidth: "2",
                               strokeLinecap: "round",
                               strokeLinejoin: "round"
                             }
-                          )
+                          ) })
                         }
                       )
                     ]
@@ -6972,6 +7059,9 @@ const DepositModal = React.memo(
       null
     );
     const [showAirdropTooltip, setShowAirdropTooltip] = useState(false);
+    const [airdropLoading, setAirdropLoading] = useState(false);
+    const [airdropMessage, setAirdropMessage] = useState(null);
+    const [airdropError, setAirdropError] = useState(null);
     const {
       intentStatus,
       startStatusPolling,
@@ -7008,13 +7098,6 @@ const DepositModal = React.memo(
                   "Submitting deposit data to backend after bridging completes:",
                   depositData
                 );
-                for (const data of depositData) {
-                  console.log("Calling submitSpiceDeposit with:", data);
-                  await relayerService.submitSpiceDeposit(data);
-                  console.log(
-                    `Successfully submitted deposit for txHash: ${data.txHash} on chainId: ${data.chainId}`
-                  );
-                }
               }
               setPostDepositStatus("success");
               setPostDepositAmount(bridgedAmount);
@@ -7047,6 +7130,116 @@ const DepositModal = React.memo(
     }, [isOpen]);
     useMemo(() => {
     }, [depositAmount]);
+    const handleRpcError = useCallback((error2) => {
+      const errorMessage = error2?.message || String(error2 || "");
+      const errorDetails = error2?.details || "";
+      const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
+      if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
+        return "Network error occurred. Please try again.";
+      }
+      return errorMessage || "Transaction failed";
+    }, []);
+    const handleAirdropClick = useCallback(async () => {
+      const targetAddress = sourceAddress || address;
+      const SOLVER_ADDRESS = "0x111115763723b53395308ec4c9ab9d5fb0844cae";
+      setAirdropMessage(null);
+      setAirdropError(null);
+      if (!targetAddress) {
+        setAirdropError("Connect your wallet before requesting an airdrop");
+        return;
+      }
+      const selectedChainId = selectedDepositAssets[0]?.asset?.chainId ?? supportedChains[0];
+      if (!selectedChainId) {
+        setAirdropError("No chain selected for airdrop");
+        return;
+      }
+      if (!externalWalletClient) {
+        setAirdropError("External wallet not connected");
+        return;
+      }
+      setAirdropLoading(true);
+      try {
+        if (currentChain?.id !== selectedChainId) {
+          setAirdropMessage("Switching network...");
+          try {
+            await switchChainAsync({ chainId: selectedChainId });
+            let attempts = 0;
+            const maxAttempts = 20;
+            while (attempts < maxAttempts) {
+              await new Promise((resolve) => setTimeout(resolve, 100));
+              if (currentChainRef.current?.id === selectedChainId) {
+                break;
+              }
+              attempts++;
+            }
+            if (currentChainRef.current?.id !== selectedChainId) {
+              throw new Error(
+                `Failed to switch to chain ${selectedChainId}. Please switch manually in your wallet.`
+              );
+            }
+          } catch (switchError) {
+            if (switchError.code === 4902 || switchError.name === "ChainNotConfiguredError") {
+              throw new Error(
+                `Chain ${selectedChainId} is not configured in your wallet. Please add it manually.`
+              );
+            }
+            throw switchError;
+          }
+        }
+        setAirdropMessage("Estimating required gas amount...");
+        const client = getClientForChain(selectedChainId);
+        const gasPrice = await client.getGasPrice();
+        const estimatedGasLimit = BigInt(65e3);
+        const gasCost = estimatedGasLimit * gasPrice;
+        const bufferMultiplier = BigInt(120);
+        const gasDepositAmount = gasCost * bufferMultiplier / BigInt(100);
+        console.log("GAS: ", gasDepositAmount);
+        setAirdropMessage("Sending gas deposit to solver...");
+        const gasDepositTx = await externalWalletClient.sendTransaction({
+          to: SOLVER_ADDRESS,
+          value: gasDepositAmount
+        });
+        setAirdropMessage("Waiting for transaction confirmation...");
+        const receipt = await client.waitForTransactionReceipt({
+          hash: gasDepositTx,
+          timeout: 12e4,
+          pollingInterval: 2e3,
+          confirmations: 2
+        });
+        if (receipt.status !== "success") {
+          throw new Error("Gas deposit transaction failed");
+        }
+        setAirdropMessage("Requesting airdrop...");
+        const result = await relayerService.requestSpiceUsdAirdrop({
+          chainId: selectedChainId,
+          address: targetAddress
+        });
+        if (!result.success) {
+          setAirdropError(result.errorMessage || "Failed to request airdrop");
+          return;
+        }
+        if (result.txHash || result.amount) {
+          const amountText = result.amount ? ` ${result.amount}` : "";
+          setAirdropMessage(`Airdrop${amountText} requested successfully.`);
+          return;
+        }
+        setAirdropMessage("Airdrop requested successfully.");
+      } catch (e) {
+        const msg = handleRpcError(e);
+        setAirdropError(msg);
+      } finally {
+        setAirdropLoading(false);
+      }
+    }, [
+      address,
+      sourceAddress,
+      selectedDepositAssets,
+      supportedChains,
+      externalWalletClient,
+      currentChain,
+      switchChainAsync,
+      handleRpcError
+    ]);
     const handleDepositAssetSelect = (asset, index) => {
       setSelectedDepositAssets((prev) => {
         const updated = [...prev];
@@ -7549,10 +7742,8 @@ const DepositModal = React.memo(
           errorMessage = "Transaction rejected by user";
         } else if (error2?.message?.includes("does not match the target chain") || error2?.message?.includes("Current Chain ID")) {
           errorMessage = "Network mismatch detected. Please click the button again to proceed.";
-        } else if (error2 instanceof Error) {
-          errorMessage = error2.message;
-        } else if (typeof error2 === "string") {
-          errorMessage = error2;
+        } else {
+          errorMessage = handleRpcError(error2);
         }
         setError(errorMessage);
       } finally {
@@ -7569,12 +7760,15 @@ const DepositModal = React.memo(
       const allAvailable = supportedChains.flatMap(
         (chainId) => getAllAssetsForChain(chainId, assets)
       );
+      const withBalance = allAvailable.filter(
+        (asset) => asset.balance > BigInt(0)
+      );
       if (allowedTokens && allowedTokens.length > 0) {
-        return allAvailable.filter(
+        return withBalance.filter(
           (asset) => allowedTokens.includes(asset.symbol.toLowerCase()) || asset.isNative && allowedTokens.includes("native")
         );
       }
-      return allAvailable;
+      return withBalance;
     }, [supportedChains, assets, allowedTokens]);
     const secondAssetOptions = useMemo(() => {
       if (!selectedDepositAssets[0]?.asset) {
@@ -7660,95 +7854,121 @@ const DepositModal = React.memo(
                     {
                       style: {
                         display: "flex",
-                        justifyContent: "flex-end",
+                        justifyContent: "space-between",
                         alignItems: "center",
-                        gap: "4px",
                         marginBottom: "8px"
                       },
                       children: [
                         /* @__PURE__ */ jsx(
-                          "button",
+                          "div",
                           {
-                            onClick: () => {
-                            },
                             style: {
-                              padding: "4px 8px",
-                              borderRadius: "4px",
-                              border: "1px solid #D1D5DB",
-                              background: "#E5E7EB",
-                              color: "#4B5563",
                               fontSize: "11px",
-                              fontWeight: 500,
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "4px",
-                              transition: "all 0.2s",
-                              whiteSpace: "nowrap"
-                            },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.color = "#1F2937";
-                              e.currentTarget.style.background = "#D1D5DB";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.color = "#4B5563";
-                              e.currentTarget.style.background = "#E5E7EB";
+                              color: airdropError ? "#b91c1c" : "#047857",
+                              fontFamily: styles?.fontFamily || theme.typography.fontFamily,
+                              flex: 1,
+                              minWidth: 0
                             },
-                            children: "Airdrop"
+                            children: airdropError || airdropMessage || ""
                           }
                         ),
                         /* @__PURE__ */ jsxs(
                           "div",
                           {
-                            onMouseEnter: () => setShowAirdropTooltip(true),
-                            onMouseLeave: () => setShowAirdropTooltip(false),
                             style: {
-                              position: "relative",
-                              width: "14px",
-                              height: "14px",
-                              borderRadius: "50%",
-                              backgroundColor: "#9CA3AF",
-                              color: "white",
                               display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              fontSize: "9px",
-                              fontWeight: "bold",
-                              cursor: "help"
+                              gap: "4px",
+                              flexShrink: 0,
+                              alignItems: "center"
                             },
                             children: [
-                              "i",
-                              showAirdropTooltip && /* @__PURE__ */ jsxs(
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: handleAirdropClick,
+                                  disabled: airdropLoading,
+                                  style: {
+                                    padding: "4px 8px",
+                                    borderRadius: "4px",
+                                    border: "1px solid #D1D5DB",
+                                    background: "#E5E7EB",
+                                    color: "#4B5563",
+                                    fontSize: "11px",
+                                    fontWeight: 500,
+                                    cursor: airdropLoading ? "default" : "pointer",
+                                    transition: "all 0.2s",
+                                    display: "flex",
+                                    alignItems: "center"
+                                  },
+                                  onMouseEnter: (e) => {
+                                    if (!airdropLoading) {
+                                      e.currentTarget.style.color = "#1F2937";
+                                      e.currentTarget.style.background = "#D1D5DB";
+                                    }
+                                  },
+                                  onMouseLeave: (e) => {
+                                    e.currentTarget.style.color = "#4B5563";
+                                    e.currentTarget.style.background = "#E5E7EB";
+                                  },
+                                  children: airdropLoading ? "Requesting..." : "Airdrop"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(
                                 "div",
                                 {
+                                  onMouseEnter: () => setShowAirdropTooltip(true),
+                                  onMouseLeave: () => setShowAirdropTooltip(false),
                                   style: {
-                                    position: "absolute",
-                                    bottom: "calc(100% + 8px)",
-                                    right: 0,
-                                    backgroundColor: "#1F2937",
+                                    position: "relative",
+                                    width: "14px",
+                                    height: "14px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#9CA3AF",
                                     color: "white",
-                                    padding: "8px 12px",
-                                    borderRadius: "6px",
-                                    fontSize: "12px",
-                                    whiteSpace: "nowrap",
-                                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-                                    zIndex: 100
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontSize: "9px",
+                                    fontWeight: "bold",
+                                    cursor: "help",
+                                    flexShrink: 0
                                   },
                                   children: [
-                                    "This is testnet USDC, and it won't be available on mainnet",
-                                    /* @__PURE__ */ jsx(
+                                    "i",
+                                    showAirdropTooltip && /* @__PURE__ */ jsxs(
                                       "div",
                                       {
                                         style: {
                                           position: "absolute",
-                                          top: "100%",
-                                          right: "10px",
-                                          width: 0,
-                                          height: 0,
-                                          borderLeft: "6px solid transparent",
-                                          borderRight: "6px solid transparent",
-                                          borderTop: "6px solid #1F2937"
-                                        }
+                                          bottom: "calc(100% + 8px)",
+                                          right: 0,
+                                          backgroundColor: "#1F2937",
+                                          color: "white",
+                                          padding: "8px 12px",
+                                          borderRadius: "6px",
+                                          fontSize: "12px",
+                                          whiteSpace: "nowrap",
+                                          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                                          zIndex: 100
+                                        },
+                                        children: [
+                                          "This is testnet USDC, and it won't be available on mainnet",
+                                          /* @__PURE__ */ jsx(
+                                            "div",
+                                            {
+                                              style: {
+                                                position: "absolute",
+                                                top: "100%",
+                                                right: "10px",
+                                                width: 0,
+                                                height: 0,
+                                                borderLeft: "6px solid transparent",
+                                                borderRight: "6px solid transparent",
+                                                borderTop: "6px solid #1F2937"
+                                              }
+                                            }
+                                          )
+                                        ]
                                       }
                                     )
                                   ]
@@ -7825,95 +8045,121 @@ const DepositModal = React.memo(
               {
                 style: {
                   display: "flex",
-                  justifyContent: "flex-end",
+                  justifyContent: "space-between",
                   alignItems: "center",
-                  gap: "4px",
                   marginBottom: "8px"
                 },
                 children: [
                   /* @__PURE__ */ jsx(
-                    "button",
+                    "div",
                     {
-                      onClick: () => {
-                      },
                       style: {
-                        padding: "4px 8px",
-                        borderRadius: "4px",
-                        border: "1px solid #D1D5DB",
-                        background: "#E5E7EB",
-                        color: "#4B5563",
                         fontSize: "11px",
-                        fontWeight: 500,
-                        cursor: "pointer",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "4px",
-                        transition: "all 0.2s",
-                        whiteSpace: "nowrap"
-                      },
-                      onMouseEnter: (e) => {
-                        e.currentTarget.style.color = "#1F2937";
-                        e.currentTarget.style.background = "#D1D5DB";
-                      },
-                      onMouseLeave: (e) => {
-                        e.currentTarget.style.color = "#4B5563";
-                        e.currentTarget.style.background = "#E5E7EB";
+                        color: airdropError ? "#b91c1c" : "#047857",
+                        fontFamily: styles?.fontFamily || theme.typography.fontFamily,
+                        flex: 1,
+                        minWidth: 0
                       },
-                      children: "Airdrop"
+                      children: airdropError || airdropMessage || ""
                     }
                   ),
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      onMouseEnter: () => setShowAirdropTooltip(true),
-                      onMouseLeave: () => setShowAirdropTooltip(false),
                       style: {
-                        position: "relative",
-                        width: "14px",
-                        height: "14px",
-                        borderRadius: "50%",
-                        backgroundColor: "#9CA3AF",
-                        color: "white",
                         display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontSize: "9px",
-                        fontWeight: "bold",
-                        cursor: "help"
+                        gap: "4px",
+                        flexShrink: 0,
+                        alignItems: "center"
                       },
                       children: [
-                        "i",
-                        showAirdropTooltip && /* @__PURE__ */ jsxs(
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: handleAirdropClick,
+                            disabled: airdropLoading,
+                            style: {
+                              padding: "4px 8px",
+                              borderRadius: "4px",
+                              border: "1px solid #D1D5DB",
+                              background: "#E5E7EB",
+                              color: "#4B5563",
+                              fontSize: "11px",
+                              fontWeight: 500,
+                              cursor: airdropLoading ? "default" : "pointer",
+                              transition: "all 0.2s",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            onMouseEnter: (e) => {
+                              if (!airdropLoading) {
+                                e.currentTarget.style.color = "#1F2937";
+                                e.currentTarget.style.background = "#D1D5DB";
+                              }
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.color = "#4B5563";
+                              e.currentTarget.style.background = "#E5E7EB";
+                            },
+                            children: airdropLoading ? "Requesting..." : "Airdrop"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
                           "div",
                           {
+                            onMouseEnter: () => setShowAirdropTooltip(true),
+                            onMouseLeave: () => setShowAirdropTooltip(false),
                             style: {
-                              position: "absolute",
-                              bottom: "calc(100% + 8px)",
-                              right: 0,
-                              backgroundColor: "#1F2937",
+                              position: "relative",
+                              width: "14px",
+                              height: "14px",
+                              borderRadius: "50%",
+                              backgroundColor: "#9CA3AF",
                               color: "white",
-                              padding: "8px 12px",
-                              borderRadius: "6px",
-                              fontSize: "12px",
-                              whiteSpace: "nowrap",
-                              boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-                              zIndex: 100
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontSize: "9px",
+                              fontWeight: "bold",
+                              cursor: "help",
+                              flexShrink: 0
                             },
                             children: [
-                              "This is testnet USDC, and it won't be available on mainnet",
-                              /* @__PURE__ */ jsx(
+                              "i",
+                              showAirdropTooltip && /* @__PURE__ */ jsxs(
                                 "div",
                                 {
                                   style: {
                                     position: "absolute",
-                                    top: "100%",
-                                    right: "10px",
-                                    width: 0,
-                                    height: 0,
-                                    borderLeft: "6px solid transparent",
-                                    borderRight: "6px solid transparent",
-                                    borderTop: "6px solid #1F2937"
-                                  }
+                                    bottom: "calc(100% + 8px)",
+                                    right: 0,
+                                    backgroundColor: "#1F2937",
+                                    color: "white",
+                                    padding: "8px 12px",
+                                    borderRadius: "6px",
+                                    fontSize: "12px",
+                                    whiteSpace: "nowrap",
+                                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                                    zIndex: 100
+                                  },
+                                  children: [
+                                    "This is testnet USDC, and it won't be available on mainnet",
+                                    /* @__PURE__ */ jsx(
+                                      "div",
+                                      {
+                                        style: {
+                                          position: "absolute",
+                                          top: "100%",
+                                          right: "10px",
+                                          width: 0,
+                                          height: 0,
+                                          borderLeft: "6px solid transparent",
+                                          borderRight: "6px solid transparent",
+                                          borderTop: "6px solid #1F2937"
+                                        }
+                                      }
+                                    )
+                                  ]
                                 }
                               )
                             ]
@@ -10010,105 +10256,8 @@ const formatCurrencyWithDecimals = (amount) => {
     maximumFractionDigits: 5
   }).format(rounded);
 };
-const defaultBalanceData = {
-  totalBalance: 10333,
-  percentageChange: 2.15,
-  tradingAccounts: [
-    { id: "hyperliquid", name: "HYPERLIQUID", balance: 800 },
-    { id: "lighter", name: "LIGHTER", balance: 1200 }
-  ],
-  freeCollateral: 8e3,
-  freeCollateralItems: [
-    {
-      id: "usdc-eth",
-      name: "USDC",
-      balance: 3e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [11155111]
-    },
-    // Ethereum Sepolia
-    {
-      id: "usdc-arb",
-      name: "USDC",
-      balance: 2e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [42161]
-    },
-    // Arbitrum
-    {
-      id: "usdc-base",
-      name: "USDC",
-      balance: 1500,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [84532]
-    },
-    // Base Sepolia
-    {
-      id: "weth",
-      name: "WETH",
-      balance: 500,
-      subtitle: "WRAPPED ETH",
-      iconColor: "#627EEA",
-      networks: [11155111]
-    },
-    {
-      id: "uniswap-pt",
-      name: "UNISWAP PT",
-      balance: 500,
-      iconColor: "#FF007A",
-      networks: [11155111]
-    },
-    {
-      id: "pendle-pt",
-      name: "PENDLE PT",
-      balance: 500,
-      iconColor: "#6366F1",
-      networks: [11155111]
-    }
-  ],
-  defiPositions: 2333,
-  defiPositionsItems: [
-    {
-      id: "uniswap-v4",
-      name: "UNISWAP V4",
-      balance: 1166.5,
-      iconColor: "#FF007A"
-    },
-    {
-      id: "pendle-pt-defi",
-      name: "PENDLE PT",
-      balance: 1166.5,
-      iconColor: "#6366F1"
-    }
-  ],
-  credit: 2333,
-  creditItems: [
-    {
-      id: "usdc-credit",
-      name: "USDC",
-      balance: 1e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA"
-    },
-    {
-      id: "uniswap-lp",
-      name: "UNISWAP LP",
-      balance: 666.5,
-      iconColor: "#FF007A"
-    },
-    {
-      id: "pendle-pt-credit",
-      name: "PENDLE PT",
-      balance: 666.5,
-      iconColor: "#6366F1"
-    }
-  ]
-};
 const SpiceBalance = ({
-  balanceData = defaultBalanceData,
+  balanceData,
   isLoading = false,
   styles,
   className = "",
@@ -10204,24 +10353,6 @@ const SpiceBalance = ({
     balanceData.freeCollateralItems,
     balanceData.freeCollateral
   ]);
-  useMemo(() => {
-    if (balanceData.defiPositionsItems) {
-      return balanceData.defiPositionsItems.reduce(
-        (sum, item) => sum + item.balance,
-        0
-      );
-    }
-    return balanceData.defiPositions;
-  }, [balanceData.defiPositionsItems, balanceData.defiPositions]);
-  useMemo(() => {
-    if (balanceData.creditItems) {
-      return balanceData.creditItems.reduce(
-        (sum, item) => sum + item.balance,
-        0
-      );
-    }
-    return balanceData.credit;
-  }, [balanceData.creditItems, balanceData.credit]);
   const maskBalance = (value) => {
     return isBalanceVisible ? value : "******";
   };
@@ -11956,7 +12087,7 @@ const LpModal = ({
 };
 
 const useFromInput = () => {
-  const [fromAmount, setFromAmount] = useState("");
+  const [fromAmount, setFromAmount] = useState("0");
   return {
     fromAmount,
     setFromAmount
@@ -11964,7 +12095,7 @@ const useFromInput = () => {
 };
 
 const useToInputUpdate = () => {
-  const [toAmount, setToAmount] = useState("");
+  const [toAmount, setToAmount] = useState("0");
   const updateToAmount = useCallback((amount) => {
     setToAmount(amount);
   }, []);
@@ -11976,7 +12107,7 @@ const useToInputUpdate = () => {
 };
 
 const useDepositInput = () => {
-  const [depositAmount, setDepositAmount] = useState("");
+  const [depositAmount, setDepositAmount] = useState("0");
   return {
     depositAmount,
     setDepositAmount