@spicenet-io/spiceflow-ui 1.8.2 → 1.8.4

package/dist/hooks/index.d.ts

@@ -13,3 +13,5 @@ export type { UseWalletReturn, WalletState, WalletActions } from "./useWallet";
 export { useEmbeddedWalletAddress } from "./useEmbeddedWalletAddress";
 export { useSpiceBalance } from "./useSpiceBalance";
 export type { UseSpiceBalanceConfig, UseSpiceBalanceReturn, SpiceBalanceApiResponse, } from "./useSpiceBalance";
+export { useSpiceAssets } from "./useSpiceAssets";
+export type { UseSpiceAssetsConfig, UseSpiceAssetsReturn, } from "./useSpiceAssets";

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

@@ -0,0 +1,27 @@
+import { Address } from "viem";
+import { Asset } from "../../types/assets";
+export interface SpiceBalanceApiResponse {
+    success: boolean;
+    data?: {
+        tokens: {
+            [chainId: string]: {
+                [tokenAddress: string]: string;
+            };
+        };
+    };
+}
+export interface UseSpiceAssetsConfig {
+    address?: Address | string;
+    supportedChains?: number[];
+    enabled?: boolean;
+    refetchInterval?: number;
+}
+export interface UseSpiceAssetsReturn {
+    assets: Asset[];
+    loading: boolean;
+    error: string | null;
+    hasBalance: boolean;
+    refetch: () => Promise<void>;
+    getAssetsByChain: (chainId: number) => Asset[];
+}
+export declare const useSpiceAssets: ({ address, supportedChains, enabled, refetchInterval, }: UseSpiceAssetsConfig) => UseSpiceAssetsReturn;

package/dist/index.cjs.js

@@ -51,6 +51,12 @@ const CHAIN_CONFIGS = {
         symbol: "USDC",
         decimals: 6
       },
+      {
+        address: "0x76f983E0F5a4B72C4bac99Fc9399845a58078787",
+        name: "Mock Tether USD",
+        symbol: "USDT",
+        decimals: 6
+      },
       {
         address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
         name: "Mock Wrapped BTC",
@@ -3074,6 +3080,7 @@ class RelayerService {
     }
   }
   async submitSpiceDeposit(request) {
+    const depositType = request.isDeposit ? "deposit" : "withdrawal";
     try {
       const response = await fetch(`${this.baseUrl}/spicedeposit`, {
         method: "POST",
@@ -3084,13 +3091,16 @@ class RelayerService {
       });
       const data = await response.json();
       if (!response.ok || !data.success) {
-        console.error("Failed to submit deposit to API:", data.error?.message);
+        console.error(
+          `Failed to submit ${depositType} request to API:`,
+          data.error?.message
+        );
         return { success: false, error: data.error };
       }
-      console.log("Deposit successfully submitted to API");
+      console.log(`${depositType} request successfully submitted to API`);
       return data;
     } catch (error) {
-      console.error("Error submitting deposit to API:", error);
+      console.error(`Error submitting ${depositType} request to API:`, error);
       return {
         success: false,
         error: {
@@ -3952,6 +3962,133 @@ const SwapWidget = ({
   ] });
 };
 
+const useSpiceAssets = ({
+  address,
+  supportedChains,
+  enabled = true,
+  refetchInterval
+}) => {
+  const [assets, setAssets] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [hasBalance, setHasBalance] = React.useState(false);
+  const fetchAssets = React.useCallback(async () => {
+    if (!address || !enabled) {
+      setAssets([]);
+      setHasBalance(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `${RELAYER_API_URL}/spicedeposit/${address}`
+      );
+      if (!response.ok) {
+        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;
+        const parsedAssets = [];
+        Object.keys(tokens).forEach((chainIdStr) => {
+          const chainId = parseInt(chainIdStr);
+          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
+                  });
+                }
+              }
+            });
+          }
+        });
+        setAssets(parsedAssets);
+        setHasBalance(parsedAssets.length > 0);
+      } else {
+        setAssets([]);
+        setHasBalance(false);
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to fetch balance";
+      setError(errorMessage);
+      console.error("Error fetching Spice assets:", err);
+      setAssets([]);
+      setHasBalance(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [address, enabled, supportedChains]);
+  React.useEffect(() => {
+    if (enabled && address) {
+      fetchAssets();
+    }
+  }, [address, enabled, fetchAssets]);
+  React.useEffect(() => {
+    if (!enabled || !address || !refetchInterval) return;
+    const interval = setInterval(() => {
+      fetchAssets();
+    }, refetchInterval);
+    return () => clearInterval(interval);
+  }, [address, enabled, refetchInterval, fetchAssets]);
+  const getAssetsByChain = React.useCallback(
+    (chainId) => {
+      return assets.filter((asset) => asset.chainId === chainId);
+    },
+    [assets]
+  );
+  return {
+    assets,
+    loading,
+    error,
+    hasBalance,
+    refetch: fetchAssets,
+    getAssetsByChain
+  };
+};
+
 const DepositWidget = ({
   depositBatches,
   tokenAddress,
@@ -3991,14 +4128,15 @@ const DepositWidget = ({
   const [selectedDepositAsset, setSelectedDepositAsset] = React.useState(null);
   const [isPending, startTransition] = React.useTransition();
   const {
-    assets,
-    loading: loadingAssets,
-    error: assetsError,
-    refreshAssets
-  } = useAssets({
+    assets: spiceAssets,
+    loading: loadingSpiceAssets,
+    error: spiceAssetsError,
+    refetch: refreshSpiceAssets
+  } = useSpiceAssets({
     address,
     supportedChains,
-    fetchBalances
+    enabled: isConnected,
+    refetchInterval: 3e4
   });
   const [isExecuting, setIsExecuting] = React.useState(false);
   const [error, setError] = React.useState(null);
@@ -4162,7 +4300,7 @@ const DepositWidget = ({
         const initialSteps = createInitialSteps(allChainBatches, getChainName);
         startStatusPolling(result.intentId, initialSteps);
         onDepositSuccess?.(result.intentId);
-        refreshAssets();
+        refreshSpiceAssets();
       }
     } catch (error2) {
       const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
@@ -4172,23 +4310,18 @@ const DepositWidget = ({
       setIsExecuting(false);
     }
   };
-  const depositAssets = React.useMemo(() => {
-    const allAssets = supportedChains.flatMap(
-      (chainId) => getAllAssetsForChain(chainId, assets)
-    );
-    console.log("allAssets", allAssets);
-    console.log("supportedTokens", supportedTokens);
+  const spiceDepositAssets = React.useMemo(() => {
     if (supportedTokens && supportedTokens.length > 0) {
-      return allAssets.filter(
+      return spiceAssets.filter(
         (asset) => supportedTokens.some(
           (symbol) => symbol.toLowerCase() === asset.symbol.toLowerCase()
         )
       );
     }
-    return allAssets;
-  }, [supportedChains, assets, supportedTokens]);
+    return spiceAssets;
+  }, [spiceAssets, supportedTokens]);
   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 displayError = spiceAssetsError || error;
   const containerStyles = {
     backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
     border: `1px solid ${styles?.container?.borderColor || theme.colors.border}`,
@@ -4215,7 +4348,7 @@ const DepositWidget = ({
         onNewTx: () => {
           clearStatus();
           setSelectedDepositAsset(null);
-          refreshAssets();
+          refreshSpiceAssets();
         },
         explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
         theme
@@ -4344,11 +4477,11 @@ const DepositWidget = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsx(
       AssetSelector,
       {
-        assets: depositAssets,
+        assets: spiceDepositAssets,
         selectedAsset: selectedDepositAsset || void 0,
         onAssetSelect: handleDepositAssetSelect,
         onAmountChange: handleDepositAmountChange,
-        loading: loadingAssets,
+        loading: loadingSpiceAssets,
         label: "Deposit",
         showBalance: true,
         showMaxButton: true,
@@ -7643,7 +7776,8 @@ const DepositModal = React.memo(
               tokenAddress,
               chainId,
               amount: amount.toString(),
-              user: address
+              user: address,
+              isDeposit: true
             });
             await relayerService.submitSpiceDeposit({
               txHash: transferToEmbeddedTx,
@@ -7651,7 +7785,8 @@ const DepositModal = React.memo(
               tokenAddress,
               chainId,
               amount: amount.toString(),
-              user: address
+              user: address,
+              isDeposit: true
             });
             console.log(
               `Successfully submitted deposit for txHash: ${transferToEmbeddedTx}`
@@ -9253,7 +9388,8 @@ const WithdrawModal = React.memo(
               sender: externalWalletAddress,
               tokenAddress: apiTokenAddress,
               chainId: destinationChainId,
-              amount: amount2.toString()
+              amount: amount2.toString(),
+              isDeposit: false
             });
             const depositResult = await relayerService.submitSpiceDeposit({
               user: externalWalletAddress,
@@ -9261,7 +9397,8 @@ const WithdrawModal = React.memo(
               sender: externalWalletAddress,
               tokenAddress: apiTokenAddress,
               chainId: destinationChainId,
-              amount: amount2.toString()
+              amount: amount2.toString(),
+              isDeposit: false
             });
             if (!depositResult.success) {
               console.error(

package/dist/index.js

@@ -49,6 +49,12 @@ const CHAIN_CONFIGS = {
         symbol: "USDC",
         decimals: 6
       },
+      {
+        address: "0x76f983E0F5a4B72C4bac99Fc9399845a58078787",
+        name: "Mock Tether USD",
+        symbol: "USDT",
+        decimals: 6
+      },
       {
         address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
         name: "Mock Wrapped BTC",
@@ -3072,6 +3078,7 @@ class RelayerService {
     }
   }
   async submitSpiceDeposit(request) {
+    const depositType = request.isDeposit ? "deposit" : "withdrawal";
     try {
       const response = await fetch(`${this.baseUrl}/spicedeposit`, {
         method: "POST",
@@ -3082,13 +3089,16 @@ class RelayerService {
       });
       const data = await response.json();
       if (!response.ok || !data.success) {
-        console.error("Failed to submit deposit to API:", data.error?.message);
+        console.error(
+          `Failed to submit ${depositType} request to API:`,
+          data.error?.message
+        );
         return { success: false, error: data.error };
       }
-      console.log("Deposit successfully submitted to API");
+      console.log(`${depositType} request successfully submitted to API`);
       return data;
     } catch (error) {
-      console.error("Error submitting deposit to API:", error);
+      console.error(`Error submitting ${depositType} request to API:`, error);
       return {
         success: false,
         error: {
@@ -3950,6 +3960,133 @@ const SwapWidget = ({
   ] });
 };
 
+const useSpiceAssets = ({
+  address,
+  supportedChains,
+  enabled = true,
+  refetchInterval
+}) => {
+  const [assets, setAssets] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasBalance, setHasBalance] = useState(false);
+  const fetchAssets = useCallback(async () => {
+    if (!address || !enabled) {
+      setAssets([]);
+      setHasBalance(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `${RELAYER_API_URL}/spicedeposit/${address}`
+      );
+      if (!response.ok) {
+        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;
+        const parsedAssets = [];
+        Object.keys(tokens).forEach((chainIdStr) => {
+          const chainId = parseInt(chainIdStr);
+          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
+                  });
+                }
+              }
+            });
+          }
+        });
+        setAssets(parsedAssets);
+        setHasBalance(parsedAssets.length > 0);
+      } else {
+        setAssets([]);
+        setHasBalance(false);
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to fetch balance";
+      setError(errorMessage);
+      console.error("Error fetching Spice assets:", err);
+      setAssets([]);
+      setHasBalance(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [address, enabled, supportedChains]);
+  useEffect(() => {
+    if (enabled && address) {
+      fetchAssets();
+    }
+  }, [address, enabled, fetchAssets]);
+  useEffect(() => {
+    if (!enabled || !address || !refetchInterval) return;
+    const interval = setInterval(() => {
+      fetchAssets();
+    }, refetchInterval);
+    return () => clearInterval(interval);
+  }, [address, enabled, refetchInterval, fetchAssets]);
+  const getAssetsByChain = useCallback(
+    (chainId) => {
+      return assets.filter((asset) => asset.chainId === chainId);
+    },
+    [assets]
+  );
+  return {
+    assets,
+    loading,
+    error,
+    hasBalance,
+    refetch: fetchAssets,
+    getAssetsByChain
+  };
+};
+
 const DepositWidget = ({
   depositBatches,
   tokenAddress,
@@ -3989,14 +4126,15 @@ const DepositWidget = ({
   const [selectedDepositAsset, setSelectedDepositAsset] = useState(null);
   const [isPending, startTransition] = useTransition();
   const {
-    assets,
-    loading: loadingAssets,
-    error: assetsError,
-    refreshAssets
-  } = useAssets({
+    assets: spiceAssets,
+    loading: loadingSpiceAssets,
+    error: spiceAssetsError,
+    refetch: refreshSpiceAssets
+  } = useSpiceAssets({
     address,
     supportedChains,
-    fetchBalances
+    enabled: isConnected,
+    refetchInterval: 3e4
   });
   const [isExecuting, setIsExecuting] = useState(false);
   const [error, setError] = useState(null);
@@ -4160,7 +4298,7 @@ const DepositWidget = ({
         const initialSteps = createInitialSteps(allChainBatches, getChainName);
         startStatusPolling(result.intentId, initialSteps);
         onDepositSuccess?.(result.intentId);
-        refreshAssets();
+        refreshSpiceAssets();
       }
     } catch (error2) {
       const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
@@ -4170,23 +4308,18 @@ const DepositWidget = ({
       setIsExecuting(false);
     }
   };
-  const depositAssets = useMemo(() => {
-    const allAssets = supportedChains.flatMap(
-      (chainId) => getAllAssetsForChain(chainId, assets)
-    );
-    console.log("allAssets", allAssets);
-    console.log("supportedTokens", supportedTokens);
+  const spiceDepositAssets = useMemo(() => {
     if (supportedTokens && supportedTokens.length > 0) {
-      return allAssets.filter(
+      return spiceAssets.filter(
         (asset) => supportedTokens.some(
           (symbol) => symbol.toLowerCase() === asset.symbol.toLowerCase()
         )
       );
     }
-    return allAssets;
-  }, [supportedChains, assets, supportedTokens]);
+    return spiceAssets;
+  }, [spiceAssets, supportedTokens]);
   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 displayError = spiceAssetsError || error;
   const containerStyles = {
     backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
     border: `1px solid ${styles?.container?.borderColor || theme.colors.border}`,
@@ -4213,7 +4346,7 @@ const DepositWidget = ({
         onNewTx: () => {
           clearStatus();
           setSelectedDepositAsset(null);
-          refreshAssets();
+          refreshSpiceAssets();
         },
         explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
         theme
@@ -4342,11 +4475,11 @@ const DepositWidget = ({
     /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx(
       AssetSelector,
       {
-        assets: depositAssets,
+        assets: spiceDepositAssets,
         selectedAsset: selectedDepositAsset || void 0,
         onAssetSelect: handleDepositAssetSelect,
         onAmountChange: handleDepositAmountChange,
-        loading: loadingAssets,
+        loading: loadingSpiceAssets,
         label: "Deposit",
         showBalance: true,
         showMaxButton: true,
@@ -7641,7 +7774,8 @@ const DepositModal = React.memo(
               tokenAddress,
               chainId,
               amount: amount.toString(),
-              user: address
+              user: address,
+              isDeposit: true
             });
             await relayerService.submitSpiceDeposit({
               txHash: transferToEmbeddedTx,
@@ -7649,7 +7783,8 @@ const DepositModal = React.memo(
               tokenAddress,
               chainId,
               amount: amount.toString(),
-              user: address
+              user: address,
+              isDeposit: true
             });
             console.log(
               `Successfully submitted deposit for txHash: ${transferToEmbeddedTx}`
@@ -9251,7 +9386,8 @@ const WithdrawModal = React.memo(
               sender: externalWalletAddress,
               tokenAddress: apiTokenAddress,
               chainId: destinationChainId,
-              amount: amount2.toString()
+              amount: amount2.toString(),
+              isDeposit: false
             });
             const depositResult = await relayerService.submitSpiceDeposit({
               user: externalWalletAddress,
@@ -9259,7 +9395,8 @@ const WithdrawModal = React.memo(
               sender: externalWalletAddress,
               tokenAddress: apiTokenAddress,
               chainId: destinationChainId,
-              amount: amount2.toString()
+              amount: amount2.toString(),
+              isDeposit: false
             });
             if (!depositResult.success) {
               console.error(

package/dist/utils/relayer/index.d.ts

@@ -13,6 +13,7 @@ export declare class RelayerService {
         tokenAddress: string;
         chainId: number;
         amount: string;
+        isDeposit?: boolean;
     }): Promise<{
         success: boolean;
         error?: {

package/package.json

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