@spicenet-io/spiceflow-ui 1.9.0 → 1.9.2

package/dist/index.js

@@ -1,15 +1,15 @@
 "use client";
-import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, parseUnits, encodeFunctionData } from 'viem';
+import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, parseUnits, erc20Abi, encodeFunctionData } from 'viem';
 import { basecampTestnet, citreaTestnet, baseSepolia, arbitrumSepolia, sepolia } from 'viem/chains';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, useMemo, forwardRef, createElement } from 'react';
-import { c as createTheme, B as Button, d as defaultTheme } from './Button-aWXByNBC.js';
+import { c as createTheme, B as Button, d as defaultTheme } from './Button-CWjGZdAM.js';
 import { getBalance, readContract } from 'viem/actions';
 import { createPortal } from 'react-dom';
 import { useWallets, usePrivy, useSign7702Authorization, useSignMessage } from '@privy-io/react-auth';
 import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
 import { getAccountNonce, hashChainBatches, getAuthorizationHash } from 'spiceflow-core-test';
-import { useAccount, useConnect, useDisconnect, useSwitchChain, useWalletClient, http as http$1, createConfig, WagmiProvider } from 'wagmi';
+import { useAccount, useWalletClient, useSwitchChain, useReadContracts, useConnect, useDisconnect, http as http$1, createConfig, WagmiProvider } from 'wagmi';
 import { DynamicLogin } from './auth-dynamic.js';
 import { PrivyLogin } from './auth-privy.js';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -5082,6 +5082,777 @@ const DepositWidgetModal = ({
   );
 };
 
+const CrossChainDepositModal = ({
+  isOpen,
+  onClose,
+  onComplete,
+  chainId,
+  externalWalletAddress,
+  escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
+  getChainConfig,
+  getSupportedTokens
+}) => {
+  const theme = createTheme("light");
+  const [selectedAssets, setSelectedAssets] = useState(/* @__PURE__ */ new Map());
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [error, setError] = useState(null);
+  const [depositResults, setDepositResults] = useState([]);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const { chain: currentChain } = useAccount();
+  const { data: walletClient, isLoading: isWalletClientLoading } = useWalletClient();
+  const { switchChainAsync } = useSwitchChain();
+  const supportedTokens = useMemo(
+    () => getSupportedTokens(chainId),
+    [chainId, getSupportedTokens]
+  );
+  const { data: tokenBalances } = useReadContracts({
+    contracts: supportedTokens.map((token) => ({
+      address: token.address,
+      abi: erc20Abi,
+      functionName: "balanceOf",
+      args: [externalWalletAddress],
+      chainId
+    }))
+  });
+  const assets = useMemo(() => {
+    const chainConfig2 = getChainConfig(chainId);
+    if (!chainConfig2) return [];
+    const assetList = [];
+    supportedTokens.forEach((token, index) => {
+      const balanceResult = tokenBalances?.[index];
+      const balance = balanceResult?.status === "success" ? balanceResult.result : BigInt(0);
+      const balanceFormatted = Number(balance) / Math.pow(10, token.decimals);
+      assetList.push({
+        address: token.address,
+        symbol: token.symbol,
+        name: token.name,
+        decimals: token.decimals,
+        isNative: false,
+        chainId,
+        balance,
+        balanceFormatted
+      });
+    });
+    return assetList;
+  }, [chainId, tokenBalances, supportedTokens, getChainConfig]);
+  useEffect(() => {
+    if (assets.length > 0 && selectedAssets.size > 0) {
+      const updatedSelections = new Map(selectedAssets);
+      let hasChanges = false;
+      selectedAssets.forEach((selection, address) => {
+        const updatedAsset = assets.find((a) => a.address === address);
+        if (updatedAsset && updatedAsset.balanceFormatted !== selection.asset.balanceFormatted) {
+          updatedSelections.set(address, { ...selection, asset: updatedAsset });
+          hasChanges = true;
+        }
+      });
+      if (hasChanges) {
+        setSelectedAssets(updatedSelections);
+      }
+    }
+  }, [assets, selectedAssets]);
+  const chainConfig = getChainConfig(chainId);
+  const toggleAssetSelection = (asset) => {
+    const newSelections = new Map(selectedAssets);
+    if (newSelections.has(asset.address)) {
+      newSelections.delete(asset.address);
+    } else {
+      newSelections.set(asset.address, { asset, amount: "" });
+    }
+    setSelectedAssets(newSelections);
+    setError(null);
+  };
+  const handleAmountChange = (address, value) => {
+    if (value === "" || /^\d*\.?\d*$/.test(value)) {
+      const newSelections = new Map(selectedAssets);
+      const selection = newSelections.get(address);
+      if (selection) {
+        newSelections.set(address, { ...selection, amount: value });
+        setSelectedAssets(newSelections);
+        setError(null);
+      }
+    }
+  };
+  const handlePercentageClick = (address, percentage) => {
+    const selection = selectedAssets.get(address);
+    if (selection?.asset.balanceFormatted !== void 0) {
+      const amount = selection.asset.balanceFormatted * percentage / 100;
+      handleAmountChange(address, amount.toString());
+    }
+  };
+  const executeDeposit = useCallback(async () => {
+    if (selectedAssets.size === 0) {
+      setError("Please select at least one asset");
+      return;
+    }
+    for (const [address, selection] of Array.from(selectedAssets.entries())) {
+      if (!selection.amount) {
+        setError(`Please enter an amount for ${selection.asset.symbol}`);
+        return;
+      }
+      const amount = parseFloat(selection.amount);
+      if (isNaN(amount) || amount <= 0) {
+        setError(`Please enter a valid amount for ${selection.asset.symbol}`);
+        return;
+      }
+      const currentAsset = assets.find((a) => a.address === address);
+      const currentBalance = currentAsset?.balanceFormatted ?? selection.asset.balanceFormatted;
+      if (currentBalance !== void 0 && amount > currentBalance) {
+        setError(`Insufficient ${selection.asset.symbol} balance`);
+        return;
+      }
+    }
+    if (!walletClient) {
+      setError("Wallet not connected. Please reconnect your external wallet.");
+      return;
+    }
+    setIsExecuting(true);
+    setError(null);
+    const results = [];
+    try {
+      if (currentChain?.id !== chainId) {
+        await switchChainAsync({
+          chainId
+        });
+      }
+      for (const [, selection] of Array.from(selectedAssets.entries())) {
+        const { asset, amount } = selection;
+        try {
+          const amountWei = parseUnits(amount, asset.decimals);
+          let hash;
+          if (asset.isNative) {
+            hash = await walletClient.sendTransaction({
+              to: escrowAddress,
+              value: amountWei
+            });
+          } else {
+            const data = encodeFunctionData({
+              abi: erc20Abi,
+              functionName: "transfer",
+              args: [escrowAddress, amountWei]
+            });
+            hash = await walletClient.sendTransaction({
+              to: asset.address,
+              data
+            });
+          }
+          await relayerService.submitSpiceDeposit({
+            txHash: hash,
+            sender: externalWalletAddress,
+            tokenAddress: asset.address,
+            chainId,
+            amount: amount.toString(),
+            user: escrowAddress,
+            isDeposit: true
+          });
+          results.push({ asset, txHash: hash, success: true });
+        } catch (err) {
+          console.error(`Deposit error for ${asset.symbol}:`, err);
+          const error2 = err;
+          let errorMsg = error2?.message || "Deposit failed";
+          if (error2?.code === 4001 || error2?.message?.includes("rejected")) {
+            errorMsg = "Transaction rejected by user";
+          } else if (error2?.message?.includes("insufficient funds")) {
+            errorMsg = "Insufficient funds for transaction";
+          }
+          results.push({ asset, txHash: "", success: false, error: errorMsg });
+        }
+      }
+      setDepositResults(results);
+      setIsSuccess(true);
+    } catch (err) {
+      console.error("Deposit error:", err);
+      const error2 = err;
+      setError(error2?.message || "Deposit failed");
+    } finally {
+      setIsExecuting(false);
+    }
+  }, [
+    selectedAssets,
+    walletClient,
+    currentChain,
+    chainId,
+    switchChainAsync,
+    escrowAddress,
+    assets,
+    externalWalletAddress
+  ]);
+  useEffect(() => {
+    if (!isOpen) {
+      setSelectedAssets(/* @__PURE__ */ new Map());
+      setError(null);
+      setDepositResults([]);
+      setIsSuccess(false);
+      setIsExecuting(false);
+    }
+  }, [isOpen]);
+  const canDeposit = selectedAssets.size > 0 && Array.from(selectedAssets.values()).every(
+    (s) => s.amount && parseFloat(s.amount) > 0
+  ) && !isExecuting && !isSuccess && walletClient;
+  const subtitle = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "8px",
+        backgroundColor: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        padding: "12px",
+        margin: "-16px 0 0 0"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: img$c,
+            alt: "Info",
+            style: {
+              width: "14px",
+              height: "14px",
+              marginTop: "2px",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            style: {
+              fontSize: "13px",
+              color: "#374151",
+              margin: 0,
+              lineHeight: "1.5"
+            },
+            children: [
+              "Select tokens and enter amounts to deposit to your Spicenet Account on",
+              " ",
+              chainConfig?.displayName || `Chain ${chainId}`,
+              "."
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const successOverlay = isSuccess && depositResults.length > 0 ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        backgroundColor: "white",
+        zIndex: 10,
+        borderRadius: "12px",
+        padding: "24px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "16px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "64px",
+              height: "64px",
+              borderRadius: "50%",
+              backgroundColor: "#dcfce7",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx("span", { style: { fontSize: "28px", color: "#16a34a" }, children: "\u2713" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              fontWeight: 600,
+              fontSize: "18px",
+              color: "#166534",
+              margin: 0
+            },
+            children: "Deposits Complete!"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxHeight: "200px",
+              overflowY: "auto",
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px"
+            },
+            children: depositResults.map((result, idx) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: "12px",
+                  borderRadius: "8px",
+                  border: `1px solid ${result.success ? "#bbf7d0" : "#fecaca"}`,
+                  backgroundColor: result.success ? "#f0fdf4" : "#fef2f2"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: result.asset.symbol }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              color: result.success ? "#16a34a" : "#dc2626",
+                              fontSize: "14px"
+                            },
+                            children: result.success ? "\u2713 Success" : "\u2717 Failed"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  result.success && result.txHash && /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `${chainConfig?.blockExplorers?.default?.url}/tx/${result.txHash}`,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      style: {
+                        fontSize: "12px",
+                        color: theme.colors.primary,
+                        textDecoration: "none"
+                      },
+                      children: "View on Explorer \u2192"
+                    }
+                  ),
+                  result.error && /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        color: "#dc2626",
+                        margin: "4px 0 0 0"
+                      },
+                      children: result.error
+                    }
+                  )
+                ]
+              },
+              idx
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onComplete,
+            style: {
+              width: "100%",
+              padding: "14px",
+              borderRadius: "8px",
+              backgroundColor: theme.colors.primary,
+              color: "white",
+              border: "none",
+              fontWeight: 600,
+              fontSize: "16px",
+              cursor: "pointer",
+              marginTop: "8px"
+            },
+            children: "Done"
+          }
+        )
+      ]
+    }
+  ) : null;
+  const PercentageButton = ({ percentage, isSelected, onClick }) => {
+    const getFillLevel = () => {
+      if (percentage === 0) return "empty";
+      if (percentage === 25) return "quarter";
+      if (percentage === 50) return "half";
+      if (percentage === 75) return "three-quarter";
+      return "full";
+    };
+    const fillLevel = getFillLevel();
+    const size = 20;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick,
+        style: {
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          border: `2px solid ${isSelected ? theme.colors.primary : "#d1d5db"}`,
+          backgroundColor: "transparent",
+          cursor: "pointer",
+          padding: 0,
+          position: "relative",
+          overflow: "hidden"
+        },
+        title: `${percentage}%`,
+        children: fillLevel === "full" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: theme.colors.primary,
+              borderRadius: "50%"
+            }
+          }
+        ) : fillLevel !== "empty" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: fillLevel === "quarter" ? "25%" : fillLevel === "half" ? "50%" : "75%",
+              backgroundColor: "#9ca3af"
+            }
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    SpiceModalShell,
+    {
+      isOpen,
+      onClose,
+      title: "Deposit to Spicenet",
+      subtitle,
+      theme,
+      maxWidth: "480px",
+      children: /* @__PURE__ */ jsxs("div", { style: { padding: "0 24px 24px 24px", position: "relative" }, children: [
+        successOverlay,
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                marginBottom: "12px"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", color: "#6b7280" }, children: "\u25CE" }),
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      fontWeight: 500,
+                      color: "#374151"
+                    },
+                    children: "Select Assets to Deposit"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: assets.map((asset) => {
+            const isSelected = selectedAssets.has(asset.address);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => toggleAssetSelection(asset),
+                style: {
+                  padding: "8px 16px",
+                  borderRadius: "8px",
+                  border: `2px solid ${isSelected ? theme.colors.primary : "#e5e7eb"}`,
+                  backgroundColor: isSelected ? "#FEF2F2" : "white",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  transition: "all 150ms ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: "24px",
+                        height: "24px",
+                        borderRadius: "50%",
+                        backgroundColor: asset.symbol === "USDC" ? "#2775CA" : asset.symbol === "USDT" ? "#26A17B" : "#F7931A",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: "white",
+                        fontSize: "10px",
+                        fontWeight: 700
+                      },
+                      children: asset.symbol === "USDC" ? "$" : asset.symbol === "USDT" ? "\u20AE" : "\u20BF"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#111827" }, children: asset.symbol }),
+                  asset.balanceFormatted !== void 0 && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "13px",
+                        color: "#9ca3af",
+                        fontFamily: "monospace"
+                      },
+                      children: [
+                        "(",
+                        asset.balanceFormatted.toFixed(4),
+                        ")"
+                      ]
+                    }
+                  )
+                ]
+              },
+              asset.address
+            );
+          }) })
+        ] }),
+        selectedAssets.size > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { display: "flex", flexDirection: "column", gap: "16px" },
+            children: Array.from(selectedAssets.values()).map(({ asset, amount }) => {
+              const numericAmount = parseFloat(amount) || 0;
+              const balance = asset.balanceFormatted || 0;
+              const percentage = balance > 0 ? numericAmount / balance * 100 : 0;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    backgroundColor: "#f9fafb",
+                    borderRadius: "12px",
+                    padding: "16px",
+                    border: "1px solid #e5e7eb"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          marginBottom: "12px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "14px",
+                                fontWeight: 500,
+                                color: "#374151"
+                              },
+                              children: [
+                                asset.symbol,
+                                " Amount"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "8px"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxs("span", { style: { fontSize: "13px", color: "#6b7280" }, children: [
+                                  "Balance: ",
+                                  (asset.balanceFormatted || 0).toFixed(4)
+                                ] }),
+                                /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "6px",
+                                      padding: "4px 10px",
+                                      backgroundColor: "white",
+                                      borderRadius: "20px",
+                                      border: "1px solid #e5e7eb"
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx(
+                                        "div",
+                                        {
+                                          style: {
+                                            width: "20px",
+                                            height: "20px",
+                                            borderRadius: "50%",
+                                            backgroundColor: asset.symbol === "USDC" ? "#2775CA" : asset.symbol === "USDT" ? "#26A17B" : "#F7931A",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            color: "white",
+                                            fontSize: "9px",
+                                            fontWeight: 700
+                                          },
+                                          children: asset.symbol === "USDC" ? "$" : asset.symbol === "USDT" ? "\u20AE" : "\u20BF"
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        "span",
+                                        {
+                                          style: {
+                                            fontSize: "13px",
+                                            fontWeight: 500,
+                                            color: "#111827"
+                                          },
+                                          children: asset.symbol
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "12px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "text",
+                              value: amount,
+                              onChange: (e) => handleAmountChange(asset.address, e.target.value),
+                              placeholder: "0.00",
+                              style: {
+                                flex: 1,
+                                fontSize: "32px",
+                                fontWeight: 600,
+                                color: amount ? "#111827" : "#d1d5db",
+                                backgroundColor: "transparent",
+                                border: "none",
+                                outline: "none",
+                                padding: 0,
+                                fontFamily: "system-ui, -apple-system, sans-serif"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                gap: "6px",
+                                alignItems: "center"
+                              },
+                              children: [0, 25, 50, 75, 100].map((pct) => /* @__PURE__ */ jsx(
+                                PercentageButton,
+                                {
+                                  percentage: pct,
+                                  isSelected: Math.abs(percentage - pct) < 1,
+                                  onClick: () => handlePercentageClick(asset.address, pct)
+                                },
+                                pct
+                              ))
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                asset.address
+              );
+            })
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              backgroundColor: "#fef2f2",
+              border: "1px solid #fecaca",
+              borderRadius: "8px",
+              marginTop: "16px"
+            },
+            children: /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#dc2626", margin: 0 }, children: error })
+          }
+        ),
+        !isSuccess && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: executeDeposit,
+            disabled: !canDeposit,
+            style: {
+              width: "100%",
+              padding: "16px",
+              borderRadius: "8px",
+              backgroundColor: canDeposit ? theme.colors.primary : "#e5e7eb",
+              color: canDeposit ? "white" : "#9ca3af",
+              border: "none",
+              fontWeight: 600,
+              fontSize: "15px",
+              letterSpacing: "0.5px",
+              cursor: canDeposit ? "pointer" : "not-allowed",
+              marginTop: "20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+              transition: "all 150ms ease"
+            },
+            children: isExecuting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "18px",
+                    height: "18px",
+                    border: "2px solid white",
+                    borderTopColor: "transparent",
+                    borderRadius: "50%",
+                    animation: "spin 1s linear infinite"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: "PROCESSING..." })
+            ] }) : isWalletClientLoading ? "CONNECTING WALLET..." : !walletClient ? "WALLET NOT CONNECTED" : selectedAssets.size === 0 ? "SELECT ASSETS" : !Array.from(selectedAssets.values()).every((s) => s.amount) ? "ENTER AMOUNTS" : "DEPOSIT"
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ] })
+    }
+  );
+};
+
 /**
  * @license lucide-react v0.383.0 - ISC
  *
@@ -12651,4 +13422,4 @@ const useDepositInput = () => {
   };
 };
 
-export { ConnectWalletModal, DepositModal, DepositWidget, DepositWidgetModal, LpModal, ProviderLogin, SelectChainModal, SpiceBalance, SpiceDeposit, SpiceFlowProvider, SpiceFlowProviderContext, SpiceWithdraw, SwapWidget, WithdrawModal, fetchBalances, relayerService, useAssets, useDepositInput, useFromInput, useSpiceBalance, useStatus, useToInputUpdate, useWallet };
+export { ConnectWalletModal, CrossChainDepositModal, DepositModal, DepositWidget, DepositWidgetModal, LpModal, ProviderLogin, SelectChainModal, SpiceBalance, SpiceDeposit, SpiceFlowProvider, SpiceFlowProviderContext, SpiceWithdraw, SwapWidget, WithdrawModal, fetchBalances, relayerService, useAssets, useDepositInput, useFromInput, useSpiceBalance, useStatus, useToInputUpdate, useWallet };