@spicenet-io/spiceflow-ui 1.2.6 → 1.3.0-1

package/dist/components/DepositWidget/DepositWidget.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DepositWidgetProps } from "../../types/deposit";
+export declare const DepositWidget: React.FC<DepositWidgetProps>;

package/dist/components/DepositWidget/index.d.ts

@@ -0,0 +1,2 @@
+export { DepositWidget } from "./DepositWidget";
+export type { DepositWidgetProps } from "../../types/deposit";

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from "./DebugWidget";
 export * from "./SpiceBalance";
 export * from "./ui";
 export * from "./LpModal";
+export * from "./DepositWidget";

package/dist/index.cjs.js

@@ -3669,6 +3669,441 @@ const DebugWidget = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(DebugWidgetErrorBoundary, { fallback: fallbackComponent, children: /* @__PURE__ */ jsxRuntime.jsx(DebugWidgetInternal, { ...props }) });
 };
 
+const DepositWidget = ({
+  depositBatches,
+  tokenAddress = "0x0",
+  supportedChains,
+  theme: themeMode = "light",
+  styles,
+  className = "",
+  depositInputHook,
+  onDepositSuccess,
+  onDepositError
+}) => {
+  const baseTheme = Button.createTheme(themeMode);
+  const theme = {
+    ...baseTheme,
+    typography: {
+      ...baseTheme.typography,
+      fontFamily: styles?.fontFamily || baseTheme.typography.fontFamily
+    },
+    colors: {
+      ...baseTheme.colors,
+      primary: styles?.primaryColor || baseTheme.colors.primary,
+      primaryHover: styles?.primaryColor ? `${styles.primaryColor}dd` : baseTheme.colors.primaryHover
+    }
+  };
+  const wallet = useWallet();
+  const {
+    isReady: ready,
+    isAuthenticated: authenticated,
+    isConnected,
+    address,
+    provider,
+    actions
+  } = wallet;
+  const spiceFlowContext = React.useContext(SpiceFlowProviderContext);
+  const [selectedDepositAsset, setSelectedDepositAsset] = React.useState(null);
+  const [isPending, startTransition] = React.useTransition();
+  const {
+    assets,
+    loading: loadingAssets,
+    error: assetsError,
+    refreshAssets
+  } = useAssets({
+    address,
+    supportedChains,
+    fetchBalances
+  });
+  const [isExecuting, setIsExecuting] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const { intentStatus, startStatusPolling, clearStatus } = useStatus({
+    checkStepStatus: (intentId, stepId) => relayerService.checkStepStatus(intentId, stepId)
+  });
+  React.useEffect(() => {
+    if (depositInputHook && depositInputHook.depositAmount !== selectedDepositAsset?.amount) {
+      if (selectedDepositAsset) {
+        setSelectedDepositAsset({
+          ...selectedDepositAsset,
+          amount: depositInputHook.depositAmount
+        });
+      }
+    }
+  }, [depositInputHook?.depositAmount, selectedDepositAsset]);
+  const clearError = React.useCallback(() => {
+    setError(null);
+  }, []);
+  const handleDepositAssetSelect = (asset) => {
+    setSelectedDepositAsset({
+      asset,
+      amount: selectedDepositAsset?.amount || ""
+    });
+    clearError();
+  };
+  const handleDepositAmountChange = React.useCallback(
+    (amount) => {
+      if (selectedDepositAsset) {
+        startTransition(() => {
+          setSelectedDepositAsset({
+            ...selectedDepositAsset,
+            amount
+          });
+          clearError();
+        });
+        if (depositInputHook) {
+          depositInputHook.setDepositAmount(amount);
+        }
+      }
+    },
+    [selectedDepositAsset, depositInputHook, clearError]
+  );
+  const handleDeposit = async () => {
+    if (!selectedDepositAsset || !address || depositBatches.length === 0)
+      return;
+    if (!ready || !authenticated) {
+      setError(
+        `Please authenticate with ${provider || "wallet provider"} to continue`
+      );
+      return;
+    }
+    setIsExecuting(true);
+    setError(null);
+    try {
+      const depositClient = getClientForChain(
+        selectedDepositAsset.asset.chainId
+      );
+      const depositRecentBlock = await depositClient.getBlockNumber();
+      const depositAssetBatch = {
+        chainId: selectedDepositAsset.asset.chainId,
+        recentBlock: depositRecentBlock,
+        calls: [
+          {
+            to: "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
+            // Escrow contract address
+            value: viem.parseEther(selectedDepositAsset.amount),
+            data: "0x"
+          }
+        ]
+      };
+      const allChainBatches = [depositAssetBatch, ...depositBatches];
+      const uniqueChainIds = [
+        ...new Set(allChainBatches.map((batch) => batch.chainId))
+      ];
+      const authorizations = [];
+      for (const chainId of uniqueChainIds) {
+        const client = getClientForChain(chainId);
+        const delegateContract = getDelegateContractAddress(chainId);
+        const nonce = await spiceflowCoreTest.getAccountNonce(
+          address,
+          client
+        );
+        const auth = await actions.signAuthorization({
+          contractAddress: delegateContract,
+          chainId,
+          nonce: Number(nonce)
+        });
+        authorizations.push(auth);
+        console.log("auth for chain", chainId, auth);
+      }
+      const hashedChainBatches = spiceflowCoreTest.hashChainBatches(allChainBatches);
+      const digest = spiceflowCoreTest.getAuthorizationHash(hashedChainBatches);
+      const intentSignature = await actions.signMessage(digest);
+      if (!intentSignature)
+        throw new Error("Failed to sign intent authorization");
+      const submitRequest = {
+        tokenAddress,
+        tokenAmount: viem.parseEther(selectedDepositAsset.amount),
+        address,
+        authorization: authorizations,
+        intentAuthorization: {
+          signature: intentSignature.signature,
+          chainBatches: hashedChainBatches
+        }
+      };
+      const result = await relayerService.submitTransaction(submitRequest);
+      if (result) {
+        const getChainName = (chainId) => {
+          return `Chain ${chainId}`;
+        };
+        const initialSteps = createInitialSteps(allChainBatches, getChainName);
+        startStatusPolling(result.intentId, initialSteps);
+        onDepositSuccess?.(result.intentId);
+        refreshAssets();
+      }
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
+      setError(errorMessage);
+      onDepositError?.(errorMessage);
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+  const depositAssets = supportedChains.flatMap(
+    (chainId) => getAllAssetsForChain(chainId, assets)
+  );
+  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
+  const displayError = assetsError || error;
+  const containerStyles = {
+    backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
+    border: `1px solid ${styles?.container?.borderColor || theme.colors.border}`,
+    borderRadius: styles?.container?.borderRadius || theme.borderRadius.lg,
+    padding: styles?.container?.padding || theme.spacing.md,
+    width: styles?.container?.width || "100%",
+    maxWidth: "28rem",
+    margin: "0 auto",
+    color: theme.colors.text,
+    fontFamily: theme.typography.fontFamily,
+    boxShadow: styles?.container?.boxShadow || (theme.mode === "light" ? "0 4px 6px -1px rgb(0 0 0 / 0.1)" : "0 4px 6px -1px rgb(0 0 0 / 0.3)")
+  };
+  if (intentStatus) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+      StatusDisplay,
+      {
+        intentStatus,
+        onClose: clearStatus,
+        onRetry: () => {
+          clearStatus();
+          handleDeposit();
+        },
+        onNewSwap: () => {
+          clearStatus();
+          setSelectedDepositAsset(null);
+          refreshAssets();
+        },
+        explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
+        theme
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          padding: styles?.statusDisplay?.padding || "8px",
+          backgroundColor: styles?.statusDisplay?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
+          border: `1px solid ${styles?.statusDisplay?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
+          borderRadius: styles?.statusDisplay?.borderRadius || theme.borderRadius.md
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
+                      fontWeight: styles?.statusDisplay?.text?.fontWeight || theme.typography.fontWeight.medium,
+                      color: styles?.statusDisplay?.text?.color || theme.colors.text,
+                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
+                    },
+                    children: [
+                      spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
+                      " ",
+                      "Status"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
+                      padding: `2px ${theme.spacing.xs}`,
+                      borderRadius: theme.borderRadius.sm,
+                      border: `1px solid ${isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning}`,
+                      backgroundColor: isConnected ? theme.mode === "light" ? "#dcfce7" : `${styles?.statusDisplay?.successColor || theme.colors.success}20` : theme.mode === "light" ? "#fef3c7" : `${styles?.statusDisplay?.warningColor || theme.colors.warning}20`,
+                      color: isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning,
+                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
+                    },
+                    children: isConnected ? "Connected" : "Disconnected"
+                  }
+                )
+              ]
+            }
+          ),
+          isConnected && address && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "ibm-plex-mono",
+              style: {
+                marginTop: "6px",
+                backgroundColor: styles?.addressDisplay?.backgroundColor || (theme.mode === "light" ? "#f3f4f6" : theme.colors.secondary),
+                border: `1px solid ${styles?.addressDisplay?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.borderHover)}`,
+                borderRadius: styles?.addressDisplay?.borderRadius || theme.borderRadius.sm,
+                padding: styles?.addressDisplay?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
+                fontSize: styles?.addressDisplay?.fontSize || theme.typography.fontSize.xs,
+                fontFamily: styles?.addressDisplay?.fontFamily || (styles?.fontFamily ? `${styles.fontFamily}, IBM Plex Mono` : "IBM Plex Mono"),
+                color: styles?.addressDisplay?.color || theme.colors.text,
+                display: "flex",
+                alignItems: "center",
+                gap: theme.spacing.sm
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1 }, children: [
+                  address.slice(0, 6),
+                  "...",
+                  address.slice(-4)
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    style: {
+                      fontSize: styles?.addressDisplay?.copyButton?.fontSize || theme.typography.fontSize.xs,
+                      padding: styles?.addressDisplay?.copyButton?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
+                      backgroundColor: styles?.addressDisplay?.copyButton?.backgroundColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.surfaceHover),
+                      border: `1px solid ${styles?.addressDisplay?.copyButton?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.border)}`,
+                      borderRadius: styles?.addressDisplay?.copyButton?.borderRadius || theme.borderRadius.sm,
+                      color: styles?.addressDisplay?.copyButton?.color || theme.colors.text,
+                      fontFamily: styles?.addressDisplay?.copyButton?.fontFamily || theme.typography.fontFamily,
+                      cursor: "pointer",
+                      transition: `background-color ${theme.animation.normal}`
+                    },
+                    onClick: () => copyToClipboard(address),
+                    title: "Copy address",
+                    children: "Copy"
+                  }
+                )
+              ]
+            }
+          ),
+          !ready && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                marginTop: "6px",
+                fontSize: theme.typography.fontSize.xs,
+                color: theme.colors.textSecondary,
+                fontFamily: theme.typography.fontFamily
+              },
+              children: [
+                "Loading",
+                " ",
+                spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
+                "..."
+              ]
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      AssetSelector,
+      {
+        assets: depositAssets,
+        selectedAsset: selectedDepositAsset || void 0,
+        onAssetSelect: handleDepositAssetSelect,
+        onAmountChange: handleDepositAmountChange,
+        loading: loadingAssets,
+        label: "Deposit",
+        showBalance: true,
+        showMaxButton: true,
+        theme,
+        styles
+      }
+    ) }),
+    depositBatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: styles?.infoCard?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
+          border: `1px solid ${styles?.infoCard?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
+          borderRadius: styles?.infoCard?.borderRadius || theme.borderRadius.md,
+          padding: styles?.infoCard?.padding || theme.spacing.sm
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                fontSize: styles?.infoCard?.title?.fontSize || theme.typography.fontSize.xs,
+                fontWeight: styles?.infoCard?.title?.fontWeight || theme.typography.fontWeight.medium,
+                color: styles?.infoCard?.title?.color || theme.colors.text,
+                fontFamily: styles?.infoCard?.title?.fontFamily || theme.typography.fontFamily,
+                marginBottom: "4px"
+              },
+              children: "Deposit Batches Ready"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                fontSize: styles?.infoCard?.description?.fontSize || theme.typography.fontSize.xs,
+                color: styles?.infoCard?.description?.color || theme.colors.textSecondary,
+                fontFamily: styles?.infoCard?.description?.fontFamily || theme.typography.fontFamily
+              },
+              children: [
+                depositBatches.length,
+                " deposit batch",
+                depositBatches.length > 1 ? "es" : "",
+                " across chains:",
+                " ",
+                [...new Set(depositBatches.map((b) => b.chainId))].join(", ")
+              ]
+            }
+          )
+        ]
+      }
+    ) }),
+    displayError && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          backgroundColor: styles?.errorMessage?.backgroundColor || (theme.mode === "light" ? "#fef2f2" : `${styles?.statusDisplay?.errorColor || theme.colors.error}20`),
+          border: `1px solid ${styles?.errorMessage?.borderColor || (theme.mode === "light" ? "#fecaca" : styles?.statusDisplay?.errorColor || theme.colors.error)}`,
+          borderRadius: styles?.errorMessage?.borderRadius || theme.borderRadius.md,
+          padding: styles?.errorMessage?.padding || theme.spacing.md,
+          marginBottom: theme.spacing.sm
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              color: styles?.errorMessage?.color || styles?.statusDisplay?.errorColor || theme.colors.error,
+              fontSize: styles?.errorMessage?.fontSize || theme.typography.fontSize.sm,
+              fontWeight: styles?.errorMessage?.fontWeight,
+              fontFamily: styles?.errorMessage?.fontFamily || theme.typography.fontFamily,
+              margin: 0
+            },
+            children: displayError
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing.sm
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            variant: "primary",
+            fullWidth: true,
+            onClick: handleDeposit,
+            loading: isExecuting,
+            disabled: !canDeposit || !isConnected,
+            theme,
+            styles,
+            children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
+          }
+        )
+      }
+    )
+  ] });
+};
+
 /**
  * @license lucide-react v0.383.0 - ISC
  *
@@ -9397,6 +9832,7 @@ const useToInputUpdate = () => {
 exports.ConnectWalletModal = ConnectWalletModal;
 exports.DebugWidget = DebugWidget;
 exports.DepositModal = DepositModal;
+exports.DepositWidget = DepositWidget;
 exports.LpModal = LpModal;
 exports.ProviderLogin = ProviderLogin;
 exports.SelectChainModal = SelectChainModal;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import "./globals.css";
 export { SwapWidget } from "./components/SwapWidget";
 export { DebugWidget } from "./components/DebugWidget";
+export { DepositWidget } from "./components/DepositWidget";
 export { SpiceDeposit, SelectChainModal, ConnectWalletModal, DepositModal, } from "./components/SpiceDeposit";
 export { SpiceBalance } from "./components/SpiceBalance";
 export { LpModal } from "./components/LpModal";
@@ -9,6 +10,7 @@ export type { SpiceFlowProviderProps } from "./providers";
 export { ProviderLogin } from "./components/ProviderLogins";
 export type { ProviderLoginProps } from "./components/ProviderLogins";
 export type { SwapWidgetProps, SwapConfig } from "./types/swap";
+export type { DepositWidgetProps } from "./types/deposit";
 export type { RelayerSubmitRequest, RelayerSubmitResponse, } from "./types/relayer";
 export type { DebugWidgetProps } from "./components/DebugWidget";
 export type { SpiceDepositProps } from "./components/SpiceDeposit/SpiceDeposit";

package/dist/index.js

@@ -3667,6 +3667,441 @@ const DebugWidget = (props) => {
   return /* @__PURE__ */ jsx(DebugWidgetErrorBoundary, { fallback: fallbackComponent, children: /* @__PURE__ */ jsx(DebugWidgetInternal, { ...props }) });
 };
 
+const DepositWidget = ({
+  depositBatches,
+  tokenAddress = "0x0",
+  supportedChains,
+  theme: themeMode = "light",
+  styles,
+  className = "",
+  depositInputHook,
+  onDepositSuccess,
+  onDepositError
+}) => {
+  const baseTheme = createTheme(themeMode);
+  const theme = {
+    ...baseTheme,
+    typography: {
+      ...baseTheme.typography,
+      fontFamily: styles?.fontFamily || baseTheme.typography.fontFamily
+    },
+    colors: {
+      ...baseTheme.colors,
+      primary: styles?.primaryColor || baseTheme.colors.primary,
+      primaryHover: styles?.primaryColor ? `${styles.primaryColor}dd` : baseTheme.colors.primaryHover
+    }
+  };
+  const wallet = useWallet();
+  const {
+    isReady: ready,
+    isAuthenticated: authenticated,
+    isConnected,
+    address,
+    provider,
+    actions
+  } = wallet;
+  const spiceFlowContext = useContext(SpiceFlowProviderContext);
+  const [selectedDepositAsset, setSelectedDepositAsset] = useState(null);
+  const [isPending, startTransition] = useTransition();
+  const {
+    assets,
+    loading: loadingAssets,
+    error: assetsError,
+    refreshAssets
+  } = useAssets({
+    address,
+    supportedChains,
+    fetchBalances
+  });
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [error, setError] = useState(null);
+  const { intentStatus, startStatusPolling, clearStatus } = useStatus({
+    checkStepStatus: (intentId, stepId) => relayerService.checkStepStatus(intentId, stepId)
+  });
+  useEffect(() => {
+    if (depositInputHook && depositInputHook.depositAmount !== selectedDepositAsset?.amount) {
+      if (selectedDepositAsset) {
+        setSelectedDepositAsset({
+          ...selectedDepositAsset,
+          amount: depositInputHook.depositAmount
+        });
+      }
+    }
+  }, [depositInputHook?.depositAmount, selectedDepositAsset]);
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+  const handleDepositAssetSelect = (asset) => {
+    setSelectedDepositAsset({
+      asset,
+      amount: selectedDepositAsset?.amount || ""
+    });
+    clearError();
+  };
+  const handleDepositAmountChange = useCallback(
+    (amount) => {
+      if (selectedDepositAsset) {
+        startTransition(() => {
+          setSelectedDepositAsset({
+            ...selectedDepositAsset,
+            amount
+          });
+          clearError();
+        });
+        if (depositInputHook) {
+          depositInputHook.setDepositAmount(amount);
+        }
+      }
+    },
+    [selectedDepositAsset, depositInputHook, clearError]
+  );
+  const handleDeposit = async () => {
+    if (!selectedDepositAsset || !address || depositBatches.length === 0)
+      return;
+    if (!ready || !authenticated) {
+      setError(
+        `Please authenticate with ${provider || "wallet provider"} to continue`
+      );
+      return;
+    }
+    setIsExecuting(true);
+    setError(null);
+    try {
+      const depositClient = getClientForChain(
+        selectedDepositAsset.asset.chainId
+      );
+      const depositRecentBlock = await depositClient.getBlockNumber();
+      const depositAssetBatch = {
+        chainId: selectedDepositAsset.asset.chainId,
+        recentBlock: depositRecentBlock,
+        calls: [
+          {
+            to: "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
+            // Escrow contract address
+            value: parseEther(selectedDepositAsset.amount),
+            data: "0x"
+          }
+        ]
+      };
+      const allChainBatches = [depositAssetBatch, ...depositBatches];
+      const uniqueChainIds = [
+        ...new Set(allChainBatches.map((batch) => batch.chainId))
+      ];
+      const authorizations = [];
+      for (const chainId of uniqueChainIds) {
+        const client = getClientForChain(chainId);
+        const delegateContract = getDelegateContractAddress(chainId);
+        const nonce = await getAccountNonce(
+          address,
+          client
+        );
+        const auth = await actions.signAuthorization({
+          contractAddress: delegateContract,
+          chainId,
+          nonce: Number(nonce)
+        });
+        authorizations.push(auth);
+        console.log("auth for chain", chainId, auth);
+      }
+      const hashedChainBatches = hashChainBatches(allChainBatches);
+      const digest = getAuthorizationHash(hashedChainBatches);
+      const intentSignature = await actions.signMessage(digest);
+      if (!intentSignature)
+        throw new Error("Failed to sign intent authorization");
+      const submitRequest = {
+        tokenAddress,
+        tokenAmount: parseEther(selectedDepositAsset.amount),
+        address,
+        authorization: authorizations,
+        intentAuthorization: {
+          signature: intentSignature.signature,
+          chainBatches: hashedChainBatches
+        }
+      };
+      const result = await relayerService.submitTransaction(submitRequest);
+      if (result) {
+        const getChainName = (chainId) => {
+          return `Chain ${chainId}`;
+        };
+        const initialSteps = createInitialSteps(allChainBatches, getChainName);
+        startStatusPolling(result.intentId, initialSteps);
+        onDepositSuccess?.(result.intentId);
+        refreshAssets();
+      }
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
+      setError(errorMessage);
+      onDepositError?.(errorMessage);
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+  const depositAssets = supportedChains.flatMap(
+    (chainId) => getAllAssetsForChain(chainId, assets)
+  );
+  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
+  const displayError = assetsError || error;
+  const containerStyles = {
+    backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
+    border: `1px solid ${styles?.container?.borderColor || theme.colors.border}`,
+    borderRadius: styles?.container?.borderRadius || theme.borderRadius.lg,
+    padding: styles?.container?.padding || theme.spacing.md,
+    width: styles?.container?.width || "100%",
+    maxWidth: "28rem",
+    margin: "0 auto",
+    color: theme.colors.text,
+    fontFamily: theme.typography.fontFamily,
+    boxShadow: styles?.container?.boxShadow || (theme.mode === "light" ? "0 4px 6px -1px rgb(0 0 0 / 0.1)" : "0 4px 6px -1px rgb(0 0 0 / 0.3)")
+  };
+  if (intentStatus) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+      StatusDisplay,
+      {
+        intentStatus,
+        onClose: clearStatus,
+        onRetry: () => {
+          clearStatus();
+          handleDeposit();
+        },
+        onNewSwap: () => {
+          clearStatus();
+          setSelectedDepositAsset(null);
+          refreshAssets();
+        },
+        explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
+        theme
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: containerStyles, className, children: [
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: styles?.statusDisplay?.padding || "8px",
+          backgroundColor: styles?.statusDisplay?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
+          border: `1px solid ${styles?.statusDisplay?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
+          borderRadius: styles?.statusDisplay?.borderRadius || theme.borderRadius.md
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
+                      fontWeight: styles?.statusDisplay?.text?.fontWeight || theme.typography.fontWeight.medium,
+                      color: styles?.statusDisplay?.text?.color || theme.colors.text,
+                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
+                    },
+                    children: [
+                      spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
+                      " ",
+                      "Status"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
+                      padding: `2px ${theme.spacing.xs}`,
+                      borderRadius: theme.borderRadius.sm,
+                      border: `1px solid ${isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning}`,
+                      backgroundColor: isConnected ? theme.mode === "light" ? "#dcfce7" : `${styles?.statusDisplay?.successColor || theme.colors.success}20` : theme.mode === "light" ? "#fef3c7" : `${styles?.statusDisplay?.warningColor || theme.colors.warning}20`,
+                      color: isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning,
+                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
+                    },
+                    children: isConnected ? "Connected" : "Disconnected"
+                  }
+                )
+              ]
+            }
+          ),
+          isConnected && address && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ibm-plex-mono",
+              style: {
+                marginTop: "6px",
+                backgroundColor: styles?.addressDisplay?.backgroundColor || (theme.mode === "light" ? "#f3f4f6" : theme.colors.secondary),
+                border: `1px solid ${styles?.addressDisplay?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.borderHover)}`,
+                borderRadius: styles?.addressDisplay?.borderRadius || theme.borderRadius.sm,
+                padding: styles?.addressDisplay?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
+                fontSize: styles?.addressDisplay?.fontSize || theme.typography.fontSize.xs,
+                fontFamily: styles?.addressDisplay?.fontFamily || (styles?.fontFamily ? `${styles.fontFamily}, IBM Plex Mono` : "IBM Plex Mono"),
+                color: styles?.addressDisplay?.color || theme.colors.text,
+                display: "flex",
+                alignItems: "center",
+                gap: theme.spacing.sm
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { flex: 1 }, children: [
+                  address.slice(0, 6),
+                  "...",
+                  address.slice(-4)
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: {
+                      fontSize: styles?.addressDisplay?.copyButton?.fontSize || theme.typography.fontSize.xs,
+                      padding: styles?.addressDisplay?.copyButton?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
+                      backgroundColor: styles?.addressDisplay?.copyButton?.backgroundColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.surfaceHover),
+                      border: `1px solid ${styles?.addressDisplay?.copyButton?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.border)}`,
+                      borderRadius: styles?.addressDisplay?.copyButton?.borderRadius || theme.borderRadius.sm,
+                      color: styles?.addressDisplay?.copyButton?.color || theme.colors.text,
+                      fontFamily: styles?.addressDisplay?.copyButton?.fontFamily || theme.typography.fontFamily,
+                      cursor: "pointer",
+                      transition: `background-color ${theme.animation.normal}`
+                    },
+                    onClick: () => copyToClipboard(address),
+                    title: "Copy address",
+                    children: "Copy"
+                  }
+                )
+              ]
+            }
+          ),
+          !ready && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                marginTop: "6px",
+                fontSize: theme.typography.fontSize.xs,
+                color: theme.colors.textSecondary,
+                fontFamily: theme.typography.fontFamily
+              },
+              children: [
+                "Loading",
+                " ",
+                spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
+                "..."
+              ]
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx(
+      AssetSelector,
+      {
+        assets: depositAssets,
+        selectedAsset: selectedDepositAsset || void 0,
+        onAssetSelect: handleDepositAssetSelect,
+        onAmountChange: handleDepositAmountChange,
+        loading: loadingAssets,
+        label: "Deposit",
+        showBalance: true,
+        showMaxButton: true,
+        theme,
+        styles
+      }
+    ) }),
+    depositBatches.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: styles?.infoCard?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
+          border: `1px solid ${styles?.infoCard?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
+          borderRadius: styles?.infoCard?.borderRadius || theme.borderRadius.md,
+          padding: styles?.infoCard?.padding || theme.spacing.sm
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: styles?.infoCard?.title?.fontSize || theme.typography.fontSize.xs,
+                fontWeight: styles?.infoCard?.title?.fontWeight || theme.typography.fontWeight.medium,
+                color: styles?.infoCard?.title?.color || theme.colors.text,
+                fontFamily: styles?.infoCard?.title?.fontFamily || theme.typography.fontFamily,
+                marginBottom: "4px"
+              },
+              children: "Deposit Batches Ready"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                fontSize: styles?.infoCard?.description?.fontSize || theme.typography.fontSize.xs,
+                color: styles?.infoCard?.description?.color || theme.colors.textSecondary,
+                fontFamily: styles?.infoCard?.description?.fontFamily || theme.typography.fontFamily
+              },
+              children: [
+                depositBatches.length,
+                " deposit batch",
+                depositBatches.length > 1 ? "es" : "",
+                " across chains:",
+                " ",
+                [...new Set(depositBatches.map((b) => b.chainId))].join(", ")
+              ]
+            }
+          )
+        ]
+      }
+    ) }),
+    displayError && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          backgroundColor: styles?.errorMessage?.backgroundColor || (theme.mode === "light" ? "#fef2f2" : `${styles?.statusDisplay?.errorColor || theme.colors.error}20`),
+          border: `1px solid ${styles?.errorMessage?.borderColor || (theme.mode === "light" ? "#fecaca" : styles?.statusDisplay?.errorColor || theme.colors.error)}`,
+          borderRadius: styles?.errorMessage?.borderRadius || theme.borderRadius.md,
+          padding: styles?.errorMessage?.padding || theme.spacing.md,
+          marginBottom: theme.spacing.sm
+        },
+        children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              color: styles?.errorMessage?.color || styles?.statusDisplay?.errorColor || theme.colors.error,
+              fontSize: styles?.errorMessage?.fontSize || theme.typography.fontSize.sm,
+              fontWeight: styles?.errorMessage?.fontWeight,
+              fontFamily: styles?.errorMessage?.fontFamily || theme.typography.fontFamily,
+              margin: 0
+            },
+            children: displayError
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing.sm
+        },
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            fullWidth: true,
+            onClick: handleDeposit,
+            loading: isExecuting,
+            disabled: !canDeposit || !isConnected,
+            theme,
+            styles,
+            children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
+          }
+        )
+      }
+    )
+  ] });
+};
+
 /**
  * @license lucide-react v0.383.0 - ISC
  *
@@ -9392,4 +9827,4 @@ const useToInputUpdate = () => {
   };
 };
 
-export { ConnectWalletModal, DebugWidget, DepositModal, LpModal, ProviderLogin, SelectChainModal, SpiceBalance, SpiceDeposit, SpiceFlowProvider, SpiceFlowProviderContext, SwapWidget, fetchBalances, useAssets, useFromInput, useStatus, useToInputUpdate, useWallet };
+export { ConnectWalletModal, DebugWidget, DepositModal, DepositWidget, LpModal, ProviderLogin, SelectChainModal, SpiceBalance, SpiceDeposit, SpiceFlowProvider, SpiceFlowProviderContext, SwapWidget, fetchBalances, useAssets, useFromInput, useStatus, useToInputUpdate, useWallet };

package/dist/types/deposit.d.ts

@@ -1,5 +1,5 @@
 import { Asset } from "./assets";
-import { CustomStyles } from "./theme";
+import { CustomStyles, ThemeMode } from "./theme";
 import { UseDepositInputReturn } from "../hooks/useDepositInput";
 import { Address } from "viem";
 import { ChainBatch } from ".";
@@ -17,6 +17,17 @@ export interface SpiceDepositResponse {
         message: string;
     };
 }
+export interface DepositWidgetProps {
+    depositBatches: ChainBatch[];
+    tokenAddress?: Address;
+    supportedChains: number[];
+    theme?: ThemeMode;
+    styles?: CustomStyles;
+    className?: string;
+    depositInputHook?: UseDepositInputReturn;
+    onDepositSuccess?: (intentId: string) => void;
+    onDepositError?: (error: string) => void;
+}
 export interface DepositModalProps {
     isOpen: boolean;
     onClose: () => void;

package/package.json

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