@spicenet-io/spiceflow-ui 1.8.4 → 1.8.6

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { IntentStatus } from "../../types/status";
+import { Theme } from "../../types/theme";
+interface DepositStatusPanelProps {
+    intentStatus: IntentStatus;
+    onClose: () => void;
+    onRetry?: () => void;
+    onNewDeposit?: () => void;
+    theme?: Theme;
+}
+export declare const DepositStatusPanel: React.FC<DepositStatusPanelProps>;
+export {};

package/dist/hooks/useSpiceAssets/index.d.ts

@@ -3,11 +3,11 @@ import { Asset } from "../../types/assets";
 export interface SpiceBalanceApiResponse {
     success: boolean;
     data?: {
-        tokens: {
-            [chainId: string]: {
-                [tokenAddress: string]: string;
-            };
-        };
+        tokens: Array<{
+            chainId: number;
+            tokenAddress: string;
+            amount: string;
+        }>;
     };
 }
 export interface UseSpiceAssetsConfig {

package/dist/hooks/useSpiceBalance/index.d.ts

@@ -3,11 +3,11 @@ import { BalanceData } from "../../types/balance";
 export interface SpiceBalanceApiResponse {
     success: boolean;
     data?: {
-        tokens: {
-            [chainId: string]: {
-                [tokenAddress: string]: string;
-            };
-        };
+        tokens: Array<{
+            chainId: number;
+            tokenAddress: string;
+            amount: string;
+        }>;
     };
 }
 export interface UseSpiceBalanceConfig {

package/dist/index.cjs.js

@@ -3988,61 +3988,55 @@ const useSpiceAssets = ({
         throw new Error(`Failed to fetch balance: ${response.status}`);
       }
       const result = await response.json();
-      if (result.success && result.data?.tokens) {
-        const tokens = result.data.tokens;
+      if (result.success && result.data?.tokens && Array.isArray(result.data.tokens)) {
         const parsedAssets = [];
-        Object.keys(tokens).forEach((chainIdStr) => {
-          const chainId = parseInt(chainIdStr);
+        result.data.tokens.forEach((token) => {
+          const chainId = token.chainId;
+          const tokenAddress = token.tokenAddress;
+          const rawBalanceStr = token.amount;
           if (supportedChains && !supportedChains.includes(chainId)) {
             return;
           }
-          const chainTokens = tokens[chainIdStr];
-          const chainConfig = getChainConfig(chainId);
-          if (chainTokens && typeof chainTokens === "object") {
-            Object.keys(chainTokens).forEach((tokenAddress) => {
-              const rawBalanceStr = chainTokens[tokenAddress];
-              const rawBalance = BigInt(rawBalanceStr || "0");
-              if (rawBalance > BigInt(0)) {
-                const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
-                let decimals = 18;
-                let symbol = "TOKEN";
-                let name = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
-                let logoURI;
-                if (isNative) {
-                  decimals = chainConfig?.nativeCurrency?.decimals || 18;
-                  symbol = chainConfig?.nativeCurrency?.symbol || "ETH";
-                  name = chainConfig?.nativeCurrency?.name || "Native Token";
-                } else {
-                  const tokenConfig = chainConfig?.supportedTokens?.find(
-                    (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
-                  );
-                  if (tokenConfig) {
-                    decimals = tokenConfig.decimals;
-                    symbol = tokenConfig.symbol;
-                    name = tokenConfig.name;
-                    logoURI = tokenConfig.logoURI;
-                  }
-                }
-                const balanceFormatted = parseFloat(
-                  (Number(rawBalance) / Math.pow(10, decimals)).toFixed(6)
-                );
-                if (balanceFormatted > 0) {
-                  parsedAssets.push({
-                    address: isNative ? "0x0000000000000000000000000000000000000000" : tokenAddress,
-                    symbol,
-                    name,
-                    decimals,
-                    chainId,
-                    balance: rawBalance,
-                    balanceFormatted,
-                    balanceUsd: 0,
-                    // API doesn't provide USD value
-                    isNative,
-                    logoURI
-                  });
-                }
+          const rawBalance = BigInt(rawBalanceStr || "0");
+          if (rawBalance > BigInt(0)) {
+            const chainConfig = getChainConfig(chainId);
+            const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+            let decimals = 18;
+            let symbol = "TOKEN";
+            let name = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
+            let logoURI;
+            if (isNative) {
+              decimals = chainConfig?.nativeCurrency?.decimals || 18;
+              symbol = chainConfig?.nativeCurrency?.symbol || "ETH";
+              name = chainConfig?.nativeCurrency?.name || "Native Token";
+            } else {
+              const tokenConfig = chainConfig?.supportedTokens?.find(
+                (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
+              );
+              if (tokenConfig) {
+                decimals = tokenConfig.decimals;
+                symbol = tokenConfig.symbol;
+                name = tokenConfig.name;
+                logoURI = tokenConfig.logoURI;
               }
-            });
+            }
+            const balanceFormatted = parseFloat(
+              (Number(rawBalance) / Math.pow(10, decimals)).toFixed(6)
+            );
+            if (balanceFormatted > 0) {
+              parsedAssets.push({
+                address: isNative ? "0x0000000000000000000000000000000000000000" : tokenAddress,
+                symbol,
+                name,
+                decimals,
+                chainId,
+                balance: rawBalance,
+                balanceFormatted,
+                balanceUsd: 0,
+                isNative,
+                logoURI
+              });
+            }
           }
         });
         setAssets(parsedAssets);
@@ -4089,6 +4083,211 @@ const useSpiceAssets = ({
   };
 };
 
+const DepositStatusPanel = ({
+  intentStatus,
+  onClose,
+  onRetry,
+  onNewDeposit,
+  theme: providedTheme
+}) => {
+  const theme = providedTheme || Button.createTheme("dark");
+  const containerStyles = {
+    width: "100%",
+    maxWidth: "28rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.background,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing.lg,
+    color: theme.colors.text
+  };
+  const headerStyles = {
+    textAlign: "center",
+    marginBottom: theme.spacing.lg
+  };
+  const iconContainerStyles = {
+    width: "5rem",
+    height: "5rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.surface,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: `2px solid ${theme.colors.border}`,
+    marginBottom: theme.spacing.md
+  };
+  const titleStyles = {
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.semibold,
+    color: theme.colors.text,
+    marginBottom: theme.spacing.sm
+  };
+  const descriptionStyles = {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textMuted
+  };
+  const buttonContainerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.lg
+  };
+  const getStatusContent = () => {
+    switch (intentStatus.overallStatus) {
+      case "success":
+        return {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.success,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          ),
+          title: "Deposit Completed!",
+          description: "Your tokens have been successfully deposited.",
+          borderColor: theme.colors.success
+        };
+      case "failed":
+        return {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.error,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          ),
+          title: "Deposit Failed",
+          description: "Something went wrong. Please try again.",
+          borderColor: theme.colors.error
+        };
+      default:
+        return {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: "2rem",
+                height: "2rem",
+                border: `3px solid ${theme.colors.primary}`,
+                borderTop: "3px solid transparent",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          ),
+          title: "Processing Deposit",
+          description: "Please wait while your deposit is being processed...",
+          borderColor: theme.colors.primary
+        };
+    }
+  };
+  const statusContent = getStatusContent();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            ...iconContainerStyles,
+            borderColor: statusContent.borderColor
+          },
+          children: statusContent.icon
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyles, children: statusContent.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: descriptionStyles, children: statusContent.description })
+    ] }),
+    intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: theme.colors.surface,
+          borderRadius: theme.borderRadius.md,
+          padding: theme.spacing.md,
+          marginBottom: theme.spacing.md
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                height: "4px",
+                backgroundColor: `${theme.colors.primary}30`,
+                borderRadius: "2px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: "30%",
+                    height: "100%",
+                    backgroundColor: theme.colors.primary,
+                    borderRadius: "2px",
+                    animation: "progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              @keyframes progress {
+                0% { transform: translateX(-100%); width: 30%; }
+                50% { width: 60%; }
+                100% { transform: translateX(400%); width: 30%; }
+              }
+            ` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: buttonContainerStyles, children: [
+      intentStatus.overallStatus === "success" && onNewDeposit && /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          variant: "success",
+          fullWidth: true,
+          onClick: onNewDeposit,
+          theme,
+          children: "New Deposit"
+        }
+      ),
+      intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "error", fullWidth: true, onClick: onRetry, theme, children: "Try Again" }),
+      intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "ghost", fullWidth: true, onClick: onClose, theme, children: "Cancel" })
+    ] })
+  ] });
+};
+
 const DepositWidget = ({
   depositBatches,
   tokenAddress,
@@ -4192,62 +4391,7 @@ const DepositWidget = ({
     setIsExecuting(true);
     setError(null);
     try {
-      const depositClient = getClientForChain(
-        selectedDepositAsset.asset.chainId
-      );
-      const depositRecentBlock = await depositClient.getBlockNumber();
-      let depositAssetBatch;
-      if (selectedDepositAsset.asset.isNative) {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-              value: viem.parseEther(selectedDepositAsset.amount),
-              data: "0x"
-            }
-          ]
-        };
-      } else {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: viem.encodeFunctionData({
-                abi: viem.erc20Abi,
-                functionName: "approve",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  viem.parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            },
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: viem.encodeFunctionData({
-                abi: viem.erc20Abi,
-                functionName: "transfer",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  viem.parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            }
-          ]
-        };
-      }
-      const allChainBatches = [depositAssetBatch, ...depositBatches];
+      const allChainBatches = [...depositBatches];
       const uniqueChainIds = [
         ...new Set(allChainBatches.map((batch) => batch.chainId))
       ];
@@ -4294,6 +4438,19 @@ const DepositWidget = ({
       };
       const result = await relayerService.submitTransaction(submitRequest);
       if (result) {
+        const withdrawalAmount = viem.parseUnits(
+          selectedDepositAsset.amount,
+          selectedDepositAsset.asset.decimals
+        );
+        await relayerService.submitSpiceDeposit({
+          user: address,
+          txHash: result.hash,
+          sender: address,
+          tokenAddress: selectedDepositAsset.asset.address,
+          chainId: selectedDepositAsset.asset.chainId,
+          amount: withdrawalAmount.toString(),
+          isDeposit: false
+        });
         const getChainName = (chainId) => {
           return `Chain ${chainId}`;
         };
@@ -4336,7 +4493,7 @@ const DepositWidget = ({
   };
   if (intentStatus) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
-      StatusDisplay,
+      DepositStatusPanel,
       {
         intentStatus,
         onClose: clearStatus,
@@ -4344,13 +4501,11 @@ const DepositWidget = ({
           clearStatus();
           handleDeposit();
         },
-        txType: "deposit",
-        onNewTx: () => {
+        onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
           refreshSpiceAssets();
         },
-        explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
         theme
       }
     ) });
@@ -9049,51 +9204,45 @@ const useSpiceBalance = ({
         throw new Error(`Failed to fetch balance: ${response.status}`);
       }
       const result = await response.json();
-      if (result.success && result.data && result.data.tokens) {
-        const tokens = result.data.tokens;
+      if (result.success && result.data?.tokens && Array.isArray(result.data.tokens)) {
         const freeCollateralItems = [];
         let totalBalance = 0;
-        Object.keys(tokens).forEach((chainIdStr) => {
-          const chainId = parseInt(chainIdStr);
-          const chainTokens = tokens[chainIdStr];
-          if (chainTokens && typeof chainTokens === "object") {
-            Object.keys(chainTokens).forEach((tokenAddress) => {
-              const balanceStr = chainTokens[tokenAddress];
-              const rawBalance = parseFloat(balanceStr || "0");
-              if (rawBalance > 0) {
-                const chainConfig = getChainConfig(chainId);
-                const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
-                let decimals = 18;
-                let tokenSymbol = "TOKEN";
-                let tokenName = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
-                if (isNative) {
-                  decimals = chainConfig?.nativeCurrency?.decimals || 18;
-                  tokenSymbol = chainConfig?.nativeCurrency?.symbol || "ETH";
-                  tokenName = chainConfig?.nativeCurrency?.name || "Native Token";
-                } else {
-                  const tokenConfig = chainConfig?.supportedTokens?.find(
-                    (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
-                  );
-                  if (tokenConfig) {
-                    decimals = tokenConfig.decimals;
-                    tokenSymbol = tokenConfig.symbol;
-                    tokenName = tokenConfig.name;
-                  }
-                }
-                const balance = rawBalance / Math.pow(10, decimals);
-                if (balance > 0) {
-                  freeCollateralItems.push({
-                    id: `${tokenSymbol.toLowerCase()}-${chainId}`,
-                    name: tokenSymbol,
-                    balance,
-                    subtitle: tokenName,
-                    iconColor: "#2775CA",
-                    networks: [chainId]
-                  });
-                  totalBalance += balance;
-                }
+        result.data.tokens.forEach((token) => {
+          const chainId = token.chainId;
+          const tokenAddress = token.tokenAddress;
+          const rawBalance = parseFloat(token.amount || "0");
+          if (rawBalance > 0) {
+            const chainConfig = getChainConfig(chainId);
+            const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+            let decimals = 18;
+            let tokenSymbol = "TOKEN";
+            let tokenName = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
+            if (isNative) {
+              decimals = chainConfig?.nativeCurrency?.decimals || 18;
+              tokenSymbol = chainConfig?.nativeCurrency?.symbol || "ETH";
+              tokenName = chainConfig?.nativeCurrency?.name || "Native Token";
+            } else {
+              const tokenConfig = chainConfig?.supportedTokens?.find(
+                (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
+              );
+              if (tokenConfig) {
+                decimals = tokenConfig.decimals;
+                tokenSymbol = tokenConfig.symbol;
+                tokenName = tokenConfig.name;
               }
-            });
+            }
+            const balance = rawBalance / Math.pow(10, decimals);
+            if (balance > 0) {
+              freeCollateralItems.push({
+                id: `${tokenSymbol.toLowerCase()}-${chainId}`,
+                name: tokenSymbol,
+                balance,
+                subtitle: tokenName,
+                iconColor: "#2775CA",
+                networks: [chainId]
+              });
+              totalBalance += balance;
+            }
           }
         });
         if (totalBalance > 0 && freeCollateralItems.length > 0) {

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, encodeFunctionData, parseUnits, erc20Abi } from 'viem';
+import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, parseUnits, 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';
@@ -3986,61 +3986,55 @@ const useSpiceAssets = ({
         throw new Error(`Failed to fetch balance: ${response.status}`);
       }
       const result = await response.json();
-      if (result.success && result.data?.tokens) {
-        const tokens = result.data.tokens;
+      if (result.success && result.data?.tokens && Array.isArray(result.data.tokens)) {
         const parsedAssets = [];
-        Object.keys(tokens).forEach((chainIdStr) => {
-          const chainId = parseInt(chainIdStr);
+        result.data.tokens.forEach((token) => {
+          const chainId = token.chainId;
+          const tokenAddress = token.tokenAddress;
+          const rawBalanceStr = token.amount;
           if (supportedChains && !supportedChains.includes(chainId)) {
             return;
           }
-          const chainTokens = tokens[chainIdStr];
-          const chainConfig = getChainConfig(chainId);
-          if (chainTokens && typeof chainTokens === "object") {
-            Object.keys(chainTokens).forEach((tokenAddress) => {
-              const rawBalanceStr = chainTokens[tokenAddress];
-              const rawBalance = BigInt(rawBalanceStr || "0");
-              if (rawBalance > BigInt(0)) {
-                const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
-                let decimals = 18;
-                let symbol = "TOKEN";
-                let name = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
-                let logoURI;
-                if (isNative) {
-                  decimals = chainConfig?.nativeCurrency?.decimals || 18;
-                  symbol = chainConfig?.nativeCurrency?.symbol || "ETH";
-                  name = chainConfig?.nativeCurrency?.name || "Native Token";
-                } else {
-                  const tokenConfig = chainConfig?.supportedTokens?.find(
-                    (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
-                  );
-                  if (tokenConfig) {
-                    decimals = tokenConfig.decimals;
-                    symbol = tokenConfig.symbol;
-                    name = tokenConfig.name;
-                    logoURI = tokenConfig.logoURI;
-                  }
-                }
-                const balanceFormatted = parseFloat(
-                  (Number(rawBalance) / Math.pow(10, decimals)).toFixed(6)
-                );
-                if (balanceFormatted > 0) {
-                  parsedAssets.push({
-                    address: isNative ? "0x0000000000000000000000000000000000000000" : tokenAddress,
-                    symbol,
-                    name,
-                    decimals,
-                    chainId,
-                    balance: rawBalance,
-                    balanceFormatted,
-                    balanceUsd: 0,
-                    // API doesn't provide USD value
-                    isNative,
-                    logoURI
-                  });
-                }
+          const rawBalance = BigInt(rawBalanceStr || "0");
+          if (rawBalance > BigInt(0)) {
+            const chainConfig = getChainConfig(chainId);
+            const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+            let decimals = 18;
+            let symbol = "TOKEN";
+            let name = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
+            let logoURI;
+            if (isNative) {
+              decimals = chainConfig?.nativeCurrency?.decimals || 18;
+              symbol = chainConfig?.nativeCurrency?.symbol || "ETH";
+              name = chainConfig?.nativeCurrency?.name || "Native Token";
+            } else {
+              const tokenConfig = chainConfig?.supportedTokens?.find(
+                (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
+              );
+              if (tokenConfig) {
+                decimals = tokenConfig.decimals;
+                symbol = tokenConfig.symbol;
+                name = tokenConfig.name;
+                logoURI = tokenConfig.logoURI;
               }
-            });
+            }
+            const balanceFormatted = parseFloat(
+              (Number(rawBalance) / Math.pow(10, decimals)).toFixed(6)
+            );
+            if (balanceFormatted > 0) {
+              parsedAssets.push({
+                address: isNative ? "0x0000000000000000000000000000000000000000" : tokenAddress,
+                symbol,
+                name,
+                decimals,
+                chainId,
+                balance: rawBalance,
+                balanceFormatted,
+                balanceUsd: 0,
+                isNative,
+                logoURI
+              });
+            }
           }
         });
         setAssets(parsedAssets);
@@ -4087,6 +4081,211 @@ const useSpiceAssets = ({
   };
 };
 
+const DepositStatusPanel = ({
+  intentStatus,
+  onClose,
+  onRetry,
+  onNewDeposit,
+  theme: providedTheme
+}) => {
+  const theme = providedTheme || createTheme("dark");
+  const containerStyles = {
+    width: "100%",
+    maxWidth: "28rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.background,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing.lg,
+    color: theme.colors.text
+  };
+  const headerStyles = {
+    textAlign: "center",
+    marginBottom: theme.spacing.lg
+  };
+  const iconContainerStyles = {
+    width: "5rem",
+    height: "5rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.surface,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: `2px solid ${theme.colors.border}`,
+    marginBottom: theme.spacing.md
+  };
+  const titleStyles = {
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.semibold,
+    color: theme.colors.text,
+    marginBottom: theme.spacing.sm
+  };
+  const descriptionStyles = {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textMuted
+  };
+  const buttonContainerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.lg
+  };
+  const getStatusContent = () => {
+    switch (intentStatus.overallStatus) {
+      case "success":
+        return {
+          icon: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.success,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          ),
+          title: "Deposit Completed!",
+          description: "Your tokens have been successfully deposited.",
+          borderColor: theme.colors.success
+        };
+      case "failed":
+        return {
+          icon: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.error,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          ),
+          title: "Deposit Failed",
+          description: "Something went wrong. Please try again.",
+          borderColor: theme.colors.error
+        };
+      default:
+        return {
+          icon: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "2rem",
+                height: "2rem",
+                border: `3px solid ${theme.colors.primary}`,
+                borderTop: "3px solid transparent",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          ),
+          title: "Processing Deposit",
+          description: "Please wait while your deposit is being processed...",
+          borderColor: theme.colors.primary
+        };
+    }
+  };
+  const statusContent = getStatusContent();
+  return /* @__PURE__ */ jsxs("div", { style: containerStyles, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` }),
+    /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...iconContainerStyles,
+            borderColor: statusContent.borderColor
+          },
+          children: statusContent.icon
+        }
+      ),
+      /* @__PURE__ */ jsx("h3", { style: titleStyles, children: statusContent.title }),
+      /* @__PURE__ */ jsx("p", { style: descriptionStyles, children: statusContent.description })
+    ] }),
+    intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: theme.colors.surface,
+          borderRadius: theme.borderRadius.md,
+          padding: theme.spacing.md,
+          marginBottom: theme.spacing.md
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: "4px",
+                backgroundColor: `${theme.colors.primary}30`,
+                borderRadius: "2px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "30%",
+                    height: "100%",
+                    backgroundColor: theme.colors.primary,
+                    borderRadius: "2px",
+                    animation: "progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("style", { children: `
+              @keyframes progress {
+                0% { transform: translateX(-100%); width: 30%; }
+                50% { width: 60%; }
+                100% { transform: translateX(400%); width: 30%; }
+              }
+            ` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: buttonContainerStyles, children: [
+      intentStatus.overallStatus === "success" && onNewDeposit && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "success",
+          fullWidth: true,
+          onClick: onNewDeposit,
+          theme,
+          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" })
+    ] })
+  ] });
+};
+
 const DepositWidget = ({
   depositBatches,
   tokenAddress,
@@ -4190,62 +4389,7 @@ const DepositWidget = ({
     setIsExecuting(true);
     setError(null);
     try {
-      const depositClient = getClientForChain(
-        selectedDepositAsset.asset.chainId
-      );
-      const depositRecentBlock = await depositClient.getBlockNumber();
-      let depositAssetBatch;
-      if (selectedDepositAsset.asset.isNative) {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-              value: parseEther(selectedDepositAsset.amount),
-              data: "0x"
-            }
-          ]
-        };
-      } else {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: encodeFunctionData({
-                abi: erc20Abi,
-                functionName: "approve",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            },
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: encodeFunctionData({
-                abi: erc20Abi,
-                functionName: "transfer",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            }
-          ]
-        };
-      }
-      const allChainBatches = [depositAssetBatch, ...depositBatches];
+      const allChainBatches = [...depositBatches];
       const uniqueChainIds = [
         ...new Set(allChainBatches.map((batch) => batch.chainId))
       ];
@@ -4292,6 +4436,19 @@ const DepositWidget = ({
       };
       const result = await relayerService.submitTransaction(submitRequest);
       if (result) {
+        const withdrawalAmount = parseUnits(
+          selectedDepositAsset.amount,
+          selectedDepositAsset.asset.decimals
+        );
+        await relayerService.submitSpiceDeposit({
+          user: address,
+          txHash: result.hash,
+          sender: address,
+          tokenAddress: selectedDepositAsset.asset.address,
+          chainId: selectedDepositAsset.asset.chainId,
+          amount: withdrawalAmount.toString(),
+          isDeposit: false
+        });
         const getChainName = (chainId) => {
           return `Chain ${chainId}`;
         };
@@ -4334,7 +4491,7 @@ const DepositWidget = ({
   };
   if (intentStatus) {
     return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-      StatusDisplay,
+      DepositStatusPanel,
       {
         intentStatus,
         onClose: clearStatus,
@@ -4342,13 +4499,11 @@ const DepositWidget = ({
           clearStatus();
           handleDeposit();
         },
-        txType: "deposit",
-        onNewTx: () => {
+        onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
           refreshSpiceAssets();
         },
-        explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
         theme
       }
     ) });
@@ -9047,51 +9202,45 @@ const useSpiceBalance = ({
         throw new Error(`Failed to fetch balance: ${response.status}`);
       }
       const result = await response.json();
-      if (result.success && result.data && result.data.tokens) {
-        const tokens = result.data.tokens;
+      if (result.success && result.data?.tokens && Array.isArray(result.data.tokens)) {
         const freeCollateralItems = [];
         let totalBalance = 0;
-        Object.keys(tokens).forEach((chainIdStr) => {
-          const chainId = parseInt(chainIdStr);
-          const chainTokens = tokens[chainIdStr];
-          if (chainTokens && typeof chainTokens === "object") {
-            Object.keys(chainTokens).forEach((tokenAddress) => {
-              const balanceStr = chainTokens[tokenAddress];
-              const rawBalance = parseFloat(balanceStr || "0");
-              if (rawBalance > 0) {
-                const chainConfig = getChainConfig(chainId);
-                const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
-                let decimals = 18;
-                let tokenSymbol = "TOKEN";
-                let tokenName = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
-                if (isNative) {
-                  decimals = chainConfig?.nativeCurrency?.decimals || 18;
-                  tokenSymbol = chainConfig?.nativeCurrency?.symbol || "ETH";
-                  tokenName = chainConfig?.nativeCurrency?.name || "Native Token";
-                } else {
-                  const tokenConfig = chainConfig?.supportedTokens?.find(
-                    (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
-                  );
-                  if (tokenConfig) {
-                    decimals = tokenConfig.decimals;
-                    tokenSymbol = tokenConfig.symbol;
-                    tokenName = tokenConfig.name;
-                  }
-                }
-                const balance = rawBalance / Math.pow(10, decimals);
-                if (balance > 0) {
-                  freeCollateralItems.push({
-                    id: `${tokenSymbol.toLowerCase()}-${chainId}`,
-                    name: tokenSymbol,
-                    balance,
-                    subtitle: tokenName,
-                    iconColor: "#2775CA",
-                    networks: [chainId]
-                  });
-                  totalBalance += balance;
-                }
+        result.data.tokens.forEach((token) => {
+          const chainId = token.chainId;
+          const tokenAddress = token.tokenAddress;
+          const rawBalance = parseFloat(token.amount || "0");
+          if (rawBalance > 0) {
+            const chainConfig = getChainConfig(chainId);
+            const isNative = tokenAddress.toLowerCase() === "0x0" || tokenAddress.toLowerCase() === "0x0000000000000000000000000000000000000000" || tokenAddress.toLowerCase() === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+            let decimals = 18;
+            let tokenSymbol = "TOKEN";
+            let tokenName = tokenAddress.slice(0, 6) + "..." + tokenAddress.slice(-4);
+            if (isNative) {
+              decimals = chainConfig?.nativeCurrency?.decimals || 18;
+              tokenSymbol = chainConfig?.nativeCurrency?.symbol || "ETH";
+              tokenName = chainConfig?.nativeCurrency?.name || "Native Token";
+            } else {
+              const tokenConfig = chainConfig?.supportedTokens?.find(
+                (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
+              );
+              if (tokenConfig) {
+                decimals = tokenConfig.decimals;
+                tokenSymbol = tokenConfig.symbol;
+                tokenName = tokenConfig.name;
               }
-            });
+            }
+            const balance = rawBalance / Math.pow(10, decimals);
+            if (balance > 0) {
+              freeCollateralItems.push({
+                id: `${tokenSymbol.toLowerCase()}-${chainId}`,
+                name: tokenSymbol,
+                balance,
+                subtitle: tokenName,
+                iconColor: "#2775CA",
+                networks: [chainId]
+              });
+              totalBalance += balance;
+            }
           }
         });
         if (totalBalance > 0 && freeCollateralItems.length > 0) {

package/package.json

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