@spicenet-io/spiceflow-ui 1.9.1 → 1.9.3

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';
@@ -4129,11 +4129,13 @@ const DepositStatusPanel = ({
     border: `1px solid ${theme.colors.border}`,
     borderRadius: theme.borderRadius.lg,
     padding: theme.spacing.lg,
-    color: theme.colors.text
+    color: theme.colors.text,
+    overflow: "visible"
   };
   const headerStyles = {
     textAlign: "center",
-    marginBottom: theme.spacing.lg
+    marginBottom: theme.spacing.lg,
+    overflow: "visible"
   };
   const iconContainerStyles = {
     width: "5rem",
@@ -4155,7 +4157,10 @@ const DepositStatusPanel = ({
   };
   const descriptionStyles = {
     fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.textMuted
+    color: theme.colors.textMuted,
+    wordWrap: "break-word",
+    overflowWrap: "break-word",
+    whiteSpace: "normal"
   };
   const buttonContainerStyles = {
     display: "flex",
@@ -4309,11 +4314,80 @@ const DepositStatusPanel = ({
           fullWidth: true,
           onClick: onNewDeposit,
           theme,
+          style: {
+            width: "100%",
+            padding: "16px",
+            backgroundColor: "#ea4b4b",
+            color: "#0e0d0b",
+            border: "1px solid #0e0d0b",
+            fontWeight: 500,
+            fontSize: "18px",
+            textTransform: "uppercase",
+            cursor: "pointer",
+            marginTop: "20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "8px",
+            transition: "all 150ms ease"
+          },
           children: "New Deposit"
         }
       ),
-      intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsx(Button, { variant: "error", fullWidth: true, onClick: onRetry, theme, children: "Try Again" }),
-      intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsx(Button, { variant: "ghost", fullWidth: true, onClick: onClose, theme, children: "Cancel" })
+      intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "error",
+          fullWidth: true,
+          onClick: onRetry,
+          theme,
+          style: {
+            width: "100%",
+            padding: "16px",
+            backgroundColor: "#ea4b4b",
+            color: "#0e0d0b",
+            border: "1px solid #0e0d0b",
+            fontWeight: 500,
+            fontSize: "18px",
+            textTransform: "uppercase",
+            cursor: "pointer",
+            marginTop: "20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "8px",
+            transition: "all 150ms ease"
+          },
+          children: "Try Again"
+        }
+      ),
+      intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          fullWidth: true,
+          onClick: onClose,
+          theme,
+          style: {
+            width: "100%",
+            padding: "16px",
+            backgroundColor: "#ea4b4b",
+            color: "#0e0d0b",
+            border: "1px solid #0e0d0b",
+            fontWeight: 500,
+            fontSize: "18px",
+            textTransform: "uppercase",
+            cursor: "pointer",
+            marginTop: "20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "8px",
+            transition: "all 150ms ease"
+          },
+          children: "Cancel"
+        }
+      )
     ] })
   ] });
 };
@@ -5082,6 +5156,825 @@ const DepositWidgetModal = ({
   );
 };
 
+const AssetInput = ({
+  asset,
+  amount,
+  onAmountChange,
+  onPercentageClick,
+  usdValue,
+  disabled,
+  styles,
+  theme
+}) => {
+  const balance = asset.balanceFormatted ?? 0;
+  const numericAmount = parseFloat(amount) || 0;
+  const currentPercentage = balance > 0 ? numericAmount / balance * 100 : 0;
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+    if (value === "" || /^\d*\.?\d*$/.test(value)) {
+      onAmountChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        backgroundColor: "#e9e9e9",
+        border: "0.5px solid #a8a8a7",
+        borderRadius: "6px",
+        padding: "16px",
+        height: "144px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  height: "100%"
+                },
+                children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: styles?.fontFamily || theme.typography.fontFamily,
+                        fontSize: "16px",
+                        fontWeight: 500,
+                        color: "#7d7c7b",
+                        lineHeight: "24px"
+                      },
+                      children: "Amount"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: amount,
+                      onChange: handleInputChange,
+                      placeholder: "0.00",
+                      disabled,
+                      style: {
+                        fontFamily: styles?.fontFamily || theme.typography.fontFamily,
+                        fontSize: "40px",
+                        fontWeight: 700,
+                        color: disabled ? "rgba(14, 13, 11, 0.16)" : amount ? "#0e0d0b" : "#d1d5db",
+                        lineHeight: "1.08",
+                        letterSpacing: "-1.2px",
+                        backgroundColor: "transparent",
+                        border: "none",
+                        outline: "none",
+                        padding: 0,
+                        width: "100%",
+                        maxWidth: "200px"
+                      }
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-end",
+                  justifyContent: "space-between",
+                  height: "100%",
+                  gap: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "8px",
+                        alignItems: "flex-end"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: styles?.fontFamily || theme.typography.fontFamily,
+                              fontSize: "12px",
+                              fontWeight: 500,
+                              color: "#71757a",
+                              lineHeight: "16px"
+                            },
+                            children: [
+                              "Balance: ",
+                              balance.toFixed(4)
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { style: { width: "128px" }, children: /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              border: "1px solid #CDCFD1",
+                              borderRadius: "6px 6px 6px 6px",
+                              backgroundColor: "#ffffff",
+                              padding: "8px 12px 8px 8px",
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                TokenIcon,
+                                {
+                                  symbol: asset.symbol,
+                                  logoURI: asset.logoURI,
+                                  size: 30,
+                                  theme
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  style: {
+                                    fontFamily: styles?.fontFamily || theme.typography.fontFamily,
+                                    fontSize: "16px",
+                                    fontWeight: 500,
+                                    color: "#3c3e42",
+                                    lineHeight: "1.5"
+                                  },
+                                  children: asset.symbol
+                                }
+                              )
+                            ]
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: "10px",
+                        height: "14px",
+                        alignItems: "center",
+                        justifyContent: "flex-end"
+                      },
+                      children: [0, 25, 50, 75, 100].map((pct, index) => {
+                        const isActive = Math.abs(currentPercentage - pct) < 1;
+                        const isLast = index === 4;
+                        const fillPercent = pct / 100;
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => onPercentageClick(pct),
+                            disabled,
+                            title: `${pct}%`,
+                            style: {
+                              width: "14px",
+                              height: "14px",
+                              padding: 0,
+                              border: "none",
+                              backgroundColor: "transparent",
+                              cursor: disabled ? "not-allowed" : "pointer",
+                              opacity: isActive ? 1 : 0.5
+                            },
+                            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+                              /* @__PURE__ */ jsx(
+                                "circle",
+                                {
+                                  cx: "7",
+                                  cy: "7",
+                                  r: "6.84375",
+                                  fill: isLast ? "#ea4b4b" : "none",
+                                  stroke: isLast ? "#ea4b4b" : "#3C3E42",
+                                  strokeWidth: "0.3125"
+                                }
+                              ),
+                              !isLast && fillPercent > 0 && /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  d: `M 7 7 L 7 0.15625 A 6.84375 6.84375 0 ${fillPercent > 0.5 ? 1 : 0} 1 ${7 + 6.84375 * Math.sin(fillPercent * 2 * Math.PI)} ${7 - 6.84375 * Math.cos(fillPercent * 2 * Math.PI)} Z`,
+                                  fill: "#3C3E42"
+                                }
+                              )
+                            ] })
+                          },
+                          pct
+                        );
+                      })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+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: "5px",
+        backgroundColor: "#f9fafb",
+        border: "1px solid #ed6969",
+        borderRadius: "8px",
+        padding: "10px",
+        margin: "0 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: "flex-start",
+        gap: "16px",
+        overflowY: "auto",
+        paddingTop: "40px"
+      },
+      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",
+                  overflow: "visible"
+                },
+                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",
+                        wordWrap: "break-word",
+                        overflowWrap: "break-word",
+                        whiteSpace: "normal"
+                      },
+                      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;
+  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 }) => /* @__PURE__ */ jsx(
+              AssetInput,
+              {
+                asset,
+                amount,
+                onAmountChange: (value) => handleAmountChange(asset.address, value),
+                onPercentageClick: (pct) => handlePercentageClick(asset.address, pct),
+                theme,
+                disabled: isExecuting
+              },
+              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,
+          {
+            variant: "outline",
+            fullWidth: true,
+            onClick: executeDeposit,
+            loading: isExecuting,
+            disabled: !canDeposit,
+            theme,
+            style: {
+              width: "100%",
+              padding: "16px",
+              backgroundColor: "#ea4b4b",
+              color: "#0e0d0b",
+              border: "1px solid #0e0d0b",
+              fontWeight: 500,
+              fontSize: "18px",
+              textTransform: "uppercase",
+              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 +13544,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 };