@spicenet-io/spiceflow-ui 1.7.1 → 1.7.3

package/dist/auth-dynamic.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useEffect, useState, useCallback } from 'react';
-import { c as createTheme, B as Button } from './Button-aWXByNBC.js';
+import { c as createTheme, B as Button } from './Button-RifBkofT.js';
 import { useDynamicContext, useConnectWithOtp } from '@dynamic-labs/sdk-react-core';
 
 const Input = ({

package/dist/auth-privy.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { B as Button, c as createTheme } from './Button-aWXByNBC.js';
+import { B as Button, c as createTheme } from './Button-RifBkofT.js';
 import { usePrivy, useLogin, useLogout } from '@privy-io/react-auth';
 
 const PrivyLogin = ({

package/dist/index.cjs.js

@@ -86,10 +86,10 @@ const CHAIN_CONFIGS = {
     moralisName: "",
     supportedTokens: [
       {
-        address: "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d",
+        address: "0xBeB51deb2018b67b35d5695Fd15bb30D452c7868",
         name: "USD Coin",
         symbol: "USDC",
-        decimals: 6
+        decimals: 18
       }
     ]
   },
@@ -120,10 +120,10 @@ const CHAIN_CONFIGS = {
     moralisName: "0x14a34",
     supportedTokens: [
       {
-        address: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
+        address: "0xf370dC3765f81aC9dD2FEBd59Fb4e710330B0BC8",
         name: "USD Coin",
         symbol: "USDC",
-        decimals: 6
+        decimals: 18
       },
       {
         address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
@@ -3166,6 +3166,39 @@ class RelayerService {
       throw error;
     }
   }
+  async requestSpiceUsdAirdrop(params) {
+    try {
+      const response = await fetch(
+        `${this.baseUrl}/airdrop/${params.chainId}/spiceUsd`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ wallet: params.address })
+        }
+      );
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        const msg = data && (data.error || data.message) || "Failed to request airdrop";
+        return { success: false, errorMessage: String(msg) };
+      }
+      if (data && typeof data.error === "string") {
+        return { success: false, errorMessage: data.error };
+      }
+      if (data && (data.txHash || data.amount)) {
+        return {
+          success: true,
+          txHash: data.txHash,
+          amount: data.amount
+        };
+      }
+      return { success: true };
+    } catch (error) {
+      const msg = error?.message && typeof error.message === "string" ? error.message : "Failed to request airdrop";
+      return { success: false, errorMessage: msg };
+    }
+  }
 }
 const relayerService = new RelayerService();
 const createInitialSteps = (chainBatches, customGetChainName) => {
@@ -6980,6 +7013,9 @@ const DepositModal = React.memo(
       null
     );
     const [showAirdropTooltip, setShowAirdropTooltip] = React.useState(false);
+    const [airdropLoading, setAirdropLoading] = React.useState(false);
+    const [airdropMessage, setAirdropMessage] = React.useState(null);
+    const [airdropError, setAirdropError] = React.useState(null);
     const {
       intentStatus,
       startStatusPolling,
@@ -7016,13 +7052,6 @@ const DepositModal = React.memo(
                   "Submitting deposit data to backend after bridging completes:",
                   depositData
                 );
-                for (const data of depositData) {
-                  console.log("Calling submitSpiceDeposit with:", data);
-                  await relayerService.submitSpiceDeposit(data);
-                  console.log(
-                    `Successfully submitted deposit for txHash: ${data.txHash} on chainId: ${data.chainId}`
-                  );
-                }
               }
               setPostDepositStatus("success");
               setPostDepositAmount(bridgedAmount);
@@ -7055,6 +7084,44 @@ const DepositModal = React.memo(
     }, [isOpen]);
     React.useMemo(() => {
     }, [depositAmount]);
+    const handleAirdropClick = React.useCallback(async () => {
+      const targetAddress = sourceAddress || address;
+      setAirdropMessage(null);
+      setAirdropError(null);
+      if (!targetAddress) {
+        setAirdropError("Connect your wallet before requesting an airdrop");
+        return;
+      }
+      const selectedChainId = selectedDepositAssets[0]?.asset?.chainId ?? supportedChains[0];
+      if (!selectedChainId) {
+        setAirdropError("No chain selected for airdrop");
+        return;
+      }
+      setAirdropLoading(true);
+      try {
+        const result = await relayerService.requestSpiceUsdAirdrop({
+          chainId: selectedChainId,
+          address: targetAddress
+        });
+        if (!result.success) {
+          setAirdropError(result.errorMessage || "Failed to request airdrop");
+          return;
+        }
+        if (result.txHash || result.amount) {
+          const amountText = result.amount ? ` ${result.amount}` : "";
+          setAirdropMessage(
+            `Airdrop${amountText} requested successfully. Transaction will appear shortly.`
+          );
+          return;
+        }
+        setAirdropMessage("Airdrop requested successfully.");
+      } catch (e) {
+        const msg = e?.message && typeof e.message === "string" ? e.message : "Failed to request airdrop";
+        setAirdropError(msg);
+      } finally {
+        setAirdropLoading(false);
+      }
+    }, [address, sourceAddress, selectedDepositAssets, supportedChains]);
     const handleDepositAssetSelect = (asset, index) => {
       setSelectedDepositAssets((prev) => {
         const updated = [...prev];
@@ -7330,7 +7397,7 @@ const DepositModal = React.memo(
               );
             }
             if (sponsorGas && nativeChainId) {
-              const gasAmount = viem.parseUnits("0.0003", 18);
+              const gasAmount = viem.parseUnits("0.05", 18);
               tokenTransfers.push({
                 tokenAddress: "0x0",
                 tokenAmount: gasAmount.toString(),
@@ -7470,7 +7537,7 @@ const DepositModal = React.memo(
             });
           }
           if (sponsorGas && nativeChainId) {
-            const gasAmount = viem.parseUnits("0.0003", 18);
+            const gasAmount = viem.parseUnits("0.05", 18);
             tokenTransfers.push({
               tokenAddress: "0x0",
               tokenAmount: gasAmount.toString(),
@@ -7669,94 +7736,107 @@ const DepositModal = React.memo(
                       style: {
                         display: "flex",
                         justifyContent: "flex-end",
-                        alignItems: "center",
+                        alignItems: "flex-start",
+                        flexDirection: "column",
                         gap: "4px",
                         marginBottom: "8px"
                       },
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "button",
-                          {
-                            onClick: () => {
-                            },
-                            style: {
-                              padding: "4px 8px",
-                              borderRadius: "4px",
-                              border: "1px solid #D1D5DB",
-                              background: "#E5E7EB",
-                              color: "#4B5563",
-                              fontSize: "11px",
-                              fontWeight: 500,
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "4px",
-                              transition: "all 0.2s",
-                              whiteSpace: "nowrap"
-                            },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.color = "#1F2937";
-                              e.currentTarget.style.background = "#D1D5DB";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.color = "#4B5563";
-                              e.currentTarget.style.background = "#E5E7EB";
-                            },
-                            children: "Airdrop"
-                          }
-                        ),
                         /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
-                            onMouseEnter: () => setShowAirdropTooltip(true),
-                            onMouseLeave: () => setShowAirdropTooltip(false),
                             style: {
-                              position: "relative",
-                              width: "14px",
-                              height: "14px",
-                              borderRadius: "50%",
-                              backgroundColor: "#9CA3AF",
-                              color: "white",
                               display: "flex",
+                              justifyContent: "flex-end",
                               alignItems: "center",
-                              justifyContent: "center",
-                              fontSize: "9px",
-                              fontWeight: "bold",
-                              cursor: "help"
+                              gap: "4px"
                             },
                             children: [
-                              "i",
-                              showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  onClick: handleAirdropClick,
+                                  style: {
+                                    padding: "4px 8px",
+                                    borderRadius: "4px",
+                                    border: "1px solid #D1D5DB",
+                                    background: "#E5E7EB",
+                                    color: "#4B5563",
+                                    fontSize: "11px",
+                                    fontWeight: 500,
+                                    cursor: airdropLoading ? "default" : "pointer",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "4px",
+                                    transition: "all 0.2s",
+                                    whiteSpace: "nowrap"
+                                  },
+                                  onMouseEnter: (e) => {
+                                    e.currentTarget.style.color = "#1F2937";
+                                    e.currentTarget.style.background = "#D1D5DB";
+                                  },
+                                  onMouseLeave: (e) => {
+                                    e.currentTarget.style.color = "#4B5563";
+                                    e.currentTarget.style.background = "#E5E7EB";
+                                  },
+                                  children: airdropLoading ? "Requesting..." : "Airdrop"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsxs(
                                 "div",
                                 {
+                                  onMouseEnter: () => setShowAirdropTooltip(true),
+                                  onMouseLeave: () => setShowAirdropTooltip(false),
                                   style: {
-                                    position: "absolute",
-                                    bottom: "calc(100% + 8px)",
-                                    right: 0,
-                                    backgroundColor: "#1F2937",
+                                    position: "relative",
+                                    width: "14px",
+                                    height: "14px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#9CA3AF",
                                     color: "white",
-                                    padding: "8px 12px",
-                                    borderRadius: "6px",
-                                    fontSize: "12px",
-                                    whiteSpace: "nowrap",
-                                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-                                    zIndex: 100
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontSize: "9px",
+                                    fontWeight: "bold",
+                                    cursor: "help"
                                   },
                                   children: [
-                                    "This is testnet USDC, and it won't be available on mainnet",
-                                    /* @__PURE__ */ jsxRuntime.jsx(
+                                    "i",
+                                    showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
                                       "div",
                                       {
                                         style: {
                                           position: "absolute",
-                                          top: "100%",
-                                          right: "10px",
-                                          width: 0,
-                                          height: 0,
-                                          borderLeft: "6px solid transparent",
-                                          borderRight: "6px solid transparent",
-                                          borderTop: "6px solid #1F2937"
-                                        }
+                                          bottom: "calc(100% + 8px)",
+                                          right: 0,
+                                          backgroundColor: "#1F2937",
+                                          color: "white",
+                                          padding: "8px 12px",
+                                          borderRadius: "6px",
+                                          fontSize: "12px",
+                                          whiteSpace: "nowrap",
+                                          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                                          zIndex: 100
+                                        },
+                                        children: [
+                                          "This is testnet USDC, and it won't be available on mainnet",
+                                          /* @__PURE__ */ jsxRuntime.jsx(
+                                            "div",
+                                            {
+                                              style: {
+                                                position: "absolute",
+                                                top: "100%",
+                                                right: "10px",
+                                                width: 0,
+                                                height: 0,
+                                                borderLeft: "6px solid transparent",
+                                                borderRight: "6px solid transparent",
+                                                borderTop: "6px solid #1F2937"
+                                              }
+                                            }
+                                          )
+                                        ]
                                       }
                                     )
                                   ]
@@ -7764,6 +7844,18 @@ const DepositModal = React.memo(
                               )
                             ]
                           }
+                        ),
+                        (airdropMessage || airdropError) && /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            style: {
+                              marginTop: "6px",
+                              fontSize: "11px",
+                              color: airdropError ? "#b91c1c" : "#047857",
+                              fontFamily: styles?.fontFamily || theme.typography.fontFamily
+                            },
+                            children: airdropError || airdropMessage
+                          }
                         )
                       ]
                     }
@@ -7842,8 +7934,7 @@ const DepositModal = React.memo(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
-                      onClick: () => {
-                      },
+                      onClick: handleAirdropClick,
                       style: {
                         padding: "4px 8px",
                         borderRadius: "4px",
@@ -7852,7 +7943,7 @@ const DepositModal = React.memo(
                         color: "#4B5563",
                         fontSize: "11px",
                         fontWeight: 500,
-                        cursor: "pointer",
+                        cursor: airdropLoading ? "default" : "pointer",
                         display: "flex",
                         alignItems: "center",
                         gap: "4px",
@@ -7867,7 +7958,7 @@ const DepositModal = React.memo(
                         e.currentTarget.style.color = "#4B5563";
                         e.currentTarget.style.background = "#E5E7EB";
                       },
-                      children: "Airdrop"
+                      children: airdropLoading ? "Requesting..." : "Airdrop"
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7929,6 +8020,18 @@ const DepositModal = React.memo(
                         )
                       ]
                     }
+                  ),
+                  (airdropMessage || airdropError) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        marginTop: "6px",
+                        fontSize: "11px",
+                        color: airdropError ? "#b91c1c" : "#047857",
+                        fontFamily: styles?.fontFamily || theme.typography.fontFamily
+                      },
+                      children: airdropError || airdropMessage
+                    }
                   )
                 ]
               }
@@ -10018,105 +10121,8 @@ const formatCurrencyWithDecimals = (amount) => {
     maximumFractionDigits: 5
   }).format(rounded);
 };
-const defaultBalanceData = {
-  totalBalance: 10333,
-  percentageChange: 2.15,
-  tradingAccounts: [
-    { id: "hyperliquid", name: "HYPERLIQUID", balance: 800 },
-    { id: "lighter", name: "LIGHTER", balance: 1200 }
-  ],
-  freeCollateral: 8e3,
-  freeCollateralItems: [
-    {
-      id: "usdc-eth",
-      name: "USDC",
-      balance: 3e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [11155111]
-    },
-    // Ethereum Sepolia
-    {
-      id: "usdc-arb",
-      name: "USDC",
-      balance: 2e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [42161]
-    },
-    // Arbitrum
-    {
-      id: "usdc-base",
-      name: "USDC",
-      balance: 1500,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [84532]
-    },
-    // Base Sepolia
-    {
-      id: "weth",
-      name: "WETH",
-      balance: 500,
-      subtitle: "WRAPPED ETH",
-      iconColor: "#627EEA",
-      networks: [11155111]
-    },
-    {
-      id: "uniswap-pt",
-      name: "UNISWAP PT",
-      balance: 500,
-      iconColor: "#FF007A",
-      networks: [11155111]
-    },
-    {
-      id: "pendle-pt",
-      name: "PENDLE PT",
-      balance: 500,
-      iconColor: "#6366F1",
-      networks: [11155111]
-    }
-  ],
-  defiPositions: 2333,
-  defiPositionsItems: [
-    {
-      id: "uniswap-v4",
-      name: "UNISWAP V4",
-      balance: 1166.5,
-      iconColor: "#FF007A"
-    },
-    {
-      id: "pendle-pt-defi",
-      name: "PENDLE PT",
-      balance: 1166.5,
-      iconColor: "#6366F1"
-    }
-  ],
-  credit: 2333,
-  creditItems: [
-    {
-      id: "usdc-credit",
-      name: "USDC",
-      balance: 1e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA"
-    },
-    {
-      id: "uniswap-lp",
-      name: "UNISWAP LP",
-      balance: 666.5,
-      iconColor: "#FF007A"
-    },
-    {
-      id: "pendle-pt-credit",
-      name: "PENDLE PT",
-      balance: 666.5,
-      iconColor: "#6366F1"
-    }
-  ]
-};
 const SpiceBalance = ({
-  balanceData = defaultBalanceData,
+  balanceData,
   isLoading = false,
   styles,
   className = "",
@@ -10212,24 +10218,6 @@ const SpiceBalance = ({
     balanceData.freeCollateralItems,
     balanceData.freeCollateral
   ]);
-  React.useMemo(() => {
-    if (balanceData.defiPositionsItems) {
-      return balanceData.defiPositionsItems.reduce(
-        (sum, item) => sum + item.balance,
-        0
-      );
-    }
-    return balanceData.defiPositions;
-  }, [balanceData.defiPositionsItems, balanceData.defiPositions]);
-  React.useMemo(() => {
-    if (balanceData.creditItems) {
-      return balanceData.creditItems.reduce(
-        (sum, item) => sum + item.balance,
-        0
-      );
-    }
-    return balanceData.credit;
-  }, [balanceData.creditItems, balanceData.credit]);
   const maskBalance = (value) => {
     return isBalanceVisible ? value : "******";
   };

package/dist/index.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, forwardRef, createElement, useMemo } from 'react';
 import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, encodeFunctionData, parseUnits, erc20Abi } from 'viem';
-import { c as createTheme, B as Button, d as defaultTheme } from './Button-aWXByNBC.js';
+import { c as createTheme, B as Button, d as defaultTheme } from './Button-RifBkofT.js';
 import { getBalance, readContract } from 'viem/actions';
 import { basecampTestnet, citreaTestnet, baseSepolia, arbitrumSepolia, sepolia } from 'viem/chains';
 import { createPortal } from 'react-dom';
@@ -84,10 +84,10 @@ const CHAIN_CONFIGS = {
     moralisName: "",
     supportedTokens: [
       {
-        address: "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d",
+        address: "0xBeB51deb2018b67b35d5695Fd15bb30D452c7868",
         name: "USD Coin",
         symbol: "USDC",
-        decimals: 6
+        decimals: 18
       }
     ]
   },
@@ -118,10 +118,10 @@ const CHAIN_CONFIGS = {
     moralisName: "0x14a34",
     supportedTokens: [
       {
-        address: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
+        address: "0xf370dC3765f81aC9dD2FEBd59Fb4e710330B0BC8",
         name: "USD Coin",
         symbol: "USDC",
-        decimals: 6
+        decimals: 18
       },
       {
         address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
@@ -3164,6 +3164,39 @@ class RelayerService {
       throw error;
     }
   }
+  async requestSpiceUsdAirdrop(params) {
+    try {
+      const response = await fetch(
+        `${this.baseUrl}/airdrop/${params.chainId}/spiceUsd`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ wallet: params.address })
+        }
+      );
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        const msg = data && (data.error || data.message) || "Failed to request airdrop";
+        return { success: false, errorMessage: String(msg) };
+      }
+      if (data && typeof data.error === "string") {
+        return { success: false, errorMessage: data.error };
+      }
+      if (data && (data.txHash || data.amount)) {
+        return {
+          success: true,
+          txHash: data.txHash,
+          amount: data.amount
+        };
+      }
+      return { success: true };
+    } catch (error) {
+      const msg = error?.message && typeof error.message === "string" ? error.message : "Failed to request airdrop";
+      return { success: false, errorMessage: msg };
+    }
+  }
 }
 const relayerService = new RelayerService();
 const createInitialSteps = (chainBatches, customGetChainName) => {
@@ -6978,6 +7011,9 @@ const DepositModal = React.memo(
       null
     );
     const [showAirdropTooltip, setShowAirdropTooltip] = useState(false);
+    const [airdropLoading, setAirdropLoading] = useState(false);
+    const [airdropMessage, setAirdropMessage] = useState(null);
+    const [airdropError, setAirdropError] = useState(null);
     const {
       intentStatus,
       startStatusPolling,
@@ -7014,13 +7050,6 @@ const DepositModal = React.memo(
                   "Submitting deposit data to backend after bridging completes:",
                   depositData
                 );
-                for (const data of depositData) {
-                  console.log("Calling submitSpiceDeposit with:", data);
-                  await relayerService.submitSpiceDeposit(data);
-                  console.log(
-                    `Successfully submitted deposit for txHash: ${data.txHash} on chainId: ${data.chainId}`
-                  );
-                }
               }
               setPostDepositStatus("success");
               setPostDepositAmount(bridgedAmount);
@@ -7053,6 +7082,44 @@ const DepositModal = React.memo(
     }, [isOpen]);
     useMemo(() => {
     }, [depositAmount]);
+    const handleAirdropClick = useCallback(async () => {
+      const targetAddress = sourceAddress || address;
+      setAirdropMessage(null);
+      setAirdropError(null);
+      if (!targetAddress) {
+        setAirdropError("Connect your wallet before requesting an airdrop");
+        return;
+      }
+      const selectedChainId = selectedDepositAssets[0]?.asset?.chainId ?? supportedChains[0];
+      if (!selectedChainId) {
+        setAirdropError("No chain selected for airdrop");
+        return;
+      }
+      setAirdropLoading(true);
+      try {
+        const result = await relayerService.requestSpiceUsdAirdrop({
+          chainId: selectedChainId,
+          address: targetAddress
+        });
+        if (!result.success) {
+          setAirdropError(result.errorMessage || "Failed to request airdrop");
+          return;
+        }
+        if (result.txHash || result.amount) {
+          const amountText = result.amount ? ` ${result.amount}` : "";
+          setAirdropMessage(
+            `Airdrop${amountText} requested successfully. Transaction will appear shortly.`
+          );
+          return;
+        }
+        setAirdropMessage("Airdrop requested successfully.");
+      } catch (e) {
+        const msg = e?.message && typeof e.message === "string" ? e.message : "Failed to request airdrop";
+        setAirdropError(msg);
+      } finally {
+        setAirdropLoading(false);
+      }
+    }, [address, sourceAddress, selectedDepositAssets, supportedChains]);
     const handleDepositAssetSelect = (asset, index) => {
       setSelectedDepositAssets((prev) => {
         const updated = [...prev];
@@ -7328,7 +7395,7 @@ const DepositModal = React.memo(
               );
             }
             if (sponsorGas && nativeChainId) {
-              const gasAmount = parseUnits("0.0003", 18);
+              const gasAmount = parseUnits("0.05", 18);
               tokenTransfers.push({
                 tokenAddress: "0x0",
                 tokenAmount: gasAmount.toString(),
@@ -7468,7 +7535,7 @@ const DepositModal = React.memo(
             });
           }
           if (sponsorGas && nativeChainId) {
-            const gasAmount = parseUnits("0.0003", 18);
+            const gasAmount = parseUnits("0.05", 18);
             tokenTransfers.push({
               tokenAddress: "0x0",
               tokenAmount: gasAmount.toString(),
@@ -7667,94 +7734,107 @@ const DepositModal = React.memo(
                       style: {
                         display: "flex",
                         justifyContent: "flex-end",
-                        alignItems: "center",
+                        alignItems: "flex-start",
+                        flexDirection: "column",
                         gap: "4px",
                         marginBottom: "8px"
                       },
                       children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: () => {
-                            },
-                            style: {
-                              padding: "4px 8px",
-                              borderRadius: "4px",
-                              border: "1px solid #D1D5DB",
-                              background: "#E5E7EB",
-                              color: "#4B5563",
-                              fontSize: "11px",
-                              fontWeight: 500,
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "4px",
-                              transition: "all 0.2s",
-                              whiteSpace: "nowrap"
-                            },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.color = "#1F2937";
-                              e.currentTarget.style.background = "#D1D5DB";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.color = "#4B5563";
-                              e.currentTarget.style.background = "#E5E7EB";
-                            },
-                            children: "Airdrop"
-                          }
-                        ),
                         /* @__PURE__ */ jsxs(
                           "div",
                           {
-                            onMouseEnter: () => setShowAirdropTooltip(true),
-                            onMouseLeave: () => setShowAirdropTooltip(false),
                             style: {
-                              position: "relative",
-                              width: "14px",
-                              height: "14px",
-                              borderRadius: "50%",
-                              backgroundColor: "#9CA3AF",
-                              color: "white",
                               display: "flex",
+                              justifyContent: "flex-end",
                               alignItems: "center",
-                              justifyContent: "center",
-                              fontSize: "9px",
-                              fontWeight: "bold",
-                              cursor: "help"
+                              gap: "4px"
                             },
                             children: [
-                              "i",
-                              showAirdropTooltip && /* @__PURE__ */ jsxs(
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: handleAirdropClick,
+                                  style: {
+                                    padding: "4px 8px",
+                                    borderRadius: "4px",
+                                    border: "1px solid #D1D5DB",
+                                    background: "#E5E7EB",
+                                    color: "#4B5563",
+                                    fontSize: "11px",
+                                    fontWeight: 500,
+                                    cursor: airdropLoading ? "default" : "pointer",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "4px",
+                                    transition: "all 0.2s",
+                                    whiteSpace: "nowrap"
+                                  },
+                                  onMouseEnter: (e) => {
+                                    e.currentTarget.style.color = "#1F2937";
+                                    e.currentTarget.style.background = "#D1D5DB";
+                                  },
+                                  onMouseLeave: (e) => {
+                                    e.currentTarget.style.color = "#4B5563";
+                                    e.currentTarget.style.background = "#E5E7EB";
+                                  },
+                                  children: airdropLoading ? "Requesting..." : "Airdrop"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(
                                 "div",
                                 {
+                                  onMouseEnter: () => setShowAirdropTooltip(true),
+                                  onMouseLeave: () => setShowAirdropTooltip(false),
                                   style: {
-                                    position: "absolute",
-                                    bottom: "calc(100% + 8px)",
-                                    right: 0,
-                                    backgroundColor: "#1F2937",
+                                    position: "relative",
+                                    width: "14px",
+                                    height: "14px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#9CA3AF",
                                     color: "white",
-                                    padding: "8px 12px",
-                                    borderRadius: "6px",
-                                    fontSize: "12px",
-                                    whiteSpace: "nowrap",
-                                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-                                    zIndex: 100
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontSize: "9px",
+                                    fontWeight: "bold",
+                                    cursor: "help"
                                   },
                                   children: [
-                                    "This is testnet USDC, and it won't be available on mainnet",
-                                    /* @__PURE__ */ jsx(
+                                    "i",
+                                    showAirdropTooltip && /* @__PURE__ */ jsxs(
                                       "div",
                                       {
                                         style: {
                                           position: "absolute",
-                                          top: "100%",
-                                          right: "10px",
-                                          width: 0,
-                                          height: 0,
-                                          borderLeft: "6px solid transparent",
-                                          borderRight: "6px solid transparent",
-                                          borderTop: "6px solid #1F2937"
-                                        }
+                                          bottom: "calc(100% + 8px)",
+                                          right: 0,
+                                          backgroundColor: "#1F2937",
+                                          color: "white",
+                                          padding: "8px 12px",
+                                          borderRadius: "6px",
+                                          fontSize: "12px",
+                                          whiteSpace: "nowrap",
+                                          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                                          zIndex: 100
+                                        },
+                                        children: [
+                                          "This is testnet USDC, and it won't be available on mainnet",
+                                          /* @__PURE__ */ jsx(
+                                            "div",
+                                            {
+                                              style: {
+                                                position: "absolute",
+                                                top: "100%",
+                                                right: "10px",
+                                                width: 0,
+                                                height: 0,
+                                                borderLeft: "6px solid transparent",
+                                                borderRight: "6px solid transparent",
+                                                borderTop: "6px solid #1F2937"
+                                              }
+                                            }
+                                          )
+                                        ]
                                       }
                                     )
                                   ]
@@ -7762,6 +7842,18 @@ const DepositModal = React.memo(
                               )
                             ]
                           }
+                        ),
+                        (airdropMessage || airdropError) && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              marginTop: "6px",
+                              fontSize: "11px",
+                              color: airdropError ? "#b91c1c" : "#047857",
+                              fontFamily: styles?.fontFamily || theme.typography.fontFamily
+                            },
+                            children: airdropError || airdropMessage
+                          }
                         )
                       ]
                     }
@@ -7840,8 +7932,7 @@ const DepositModal = React.memo(
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: () => {
-                      },
+                      onClick: handleAirdropClick,
                       style: {
                         padding: "4px 8px",
                         borderRadius: "4px",
@@ -7850,7 +7941,7 @@ const DepositModal = React.memo(
                         color: "#4B5563",
                         fontSize: "11px",
                         fontWeight: 500,
-                        cursor: "pointer",
+                        cursor: airdropLoading ? "default" : "pointer",
                         display: "flex",
                         alignItems: "center",
                         gap: "4px",
@@ -7865,7 +7956,7 @@ const DepositModal = React.memo(
                         e.currentTarget.style.color = "#4B5563";
                         e.currentTarget.style.background = "#E5E7EB";
                       },
-                      children: "Airdrop"
+                      children: airdropLoading ? "Requesting..." : "Airdrop"
                     }
                   ),
                   /* @__PURE__ */ jsxs(
@@ -7927,6 +8018,18 @@ const DepositModal = React.memo(
                         )
                       ]
                     }
+                  ),
+                  (airdropMessage || airdropError) && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        marginTop: "6px",
+                        fontSize: "11px",
+                        color: airdropError ? "#b91c1c" : "#047857",
+                        fontFamily: styles?.fontFamily || theme.typography.fontFamily
+                      },
+                      children: airdropError || airdropMessage
+                    }
                   )
                 ]
               }
@@ -10016,105 +10119,8 @@ const formatCurrencyWithDecimals = (amount) => {
     maximumFractionDigits: 5
   }).format(rounded);
 };
-const defaultBalanceData = {
-  totalBalance: 10333,
-  percentageChange: 2.15,
-  tradingAccounts: [
-    { id: "hyperliquid", name: "HYPERLIQUID", balance: 800 },
-    { id: "lighter", name: "LIGHTER", balance: 1200 }
-  ],
-  freeCollateral: 8e3,
-  freeCollateralItems: [
-    {
-      id: "usdc-eth",
-      name: "USDC",
-      balance: 3e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [11155111]
-    },
-    // Ethereum Sepolia
-    {
-      id: "usdc-arb",
-      name: "USDC",
-      balance: 2e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [42161]
-    },
-    // Arbitrum
-    {
-      id: "usdc-base",
-      name: "USDC",
-      balance: 1500,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA",
-      networks: [84532]
-    },
-    // Base Sepolia
-    {
-      id: "weth",
-      name: "WETH",
-      balance: 500,
-      subtitle: "WRAPPED ETH",
-      iconColor: "#627EEA",
-      networks: [11155111]
-    },
-    {
-      id: "uniswap-pt",
-      name: "UNISWAP PT",
-      balance: 500,
-      iconColor: "#FF007A",
-      networks: [11155111]
-    },
-    {
-      id: "pendle-pt",
-      name: "PENDLE PT",
-      balance: 500,
-      iconColor: "#6366F1",
-      networks: [11155111]
-    }
-  ],
-  defiPositions: 2333,
-  defiPositionsItems: [
-    {
-      id: "uniswap-v4",
-      name: "UNISWAP V4",
-      balance: 1166.5,
-      iconColor: "#FF007A"
-    },
-    {
-      id: "pendle-pt-defi",
-      name: "PENDLE PT",
-      balance: 1166.5,
-      iconColor: "#6366F1"
-    }
-  ],
-  credit: 2333,
-  creditItems: [
-    {
-      id: "usdc-credit",
-      name: "USDC",
-      balance: 1e3,
-      subtitle: "USD COIN",
-      iconColor: "#2775CA"
-    },
-    {
-      id: "uniswap-lp",
-      name: "UNISWAP LP",
-      balance: 666.5,
-      iconColor: "#FF007A"
-    },
-    {
-      id: "pendle-pt-credit",
-      name: "PENDLE PT",
-      balance: 666.5,
-      iconColor: "#6366F1"
-    }
-  ]
-};
 const SpiceBalance = ({
-  balanceData = defaultBalanceData,
+  balanceData,
   isLoading = false,
   styles,
   className = "",
@@ -10210,24 +10216,6 @@ const SpiceBalance = ({
     balanceData.freeCollateralItems,
     balanceData.freeCollateral
   ]);
-  useMemo(() => {
-    if (balanceData.defiPositionsItems) {
-      return balanceData.defiPositionsItems.reduce(
-        (sum, item) => sum + item.balance,
-        0
-      );
-    }
-    return balanceData.defiPositions;
-  }, [balanceData.defiPositionsItems, balanceData.defiPositions]);
-  useMemo(() => {
-    if (balanceData.creditItems) {
-      return balanceData.creditItems.reduce(
-        (sum, item) => sum + item.balance,
-        0
-      );
-    }
-    return balanceData.credit;
-  }, [balanceData.creditItems, balanceData.credit]);
   const maskBalance = (value) => {
     return isBalanceVisible ? value : "******";
   };

package/dist/types/balance.d.ts

@@ -34,7 +34,7 @@ export interface BalanceData {
     creditItems?: AccountItem[];
 }
 export interface SpiceBalanceProps {
-    balanceData?: BalanceData;
+    balanceData: BalanceData;
     isLoading?: boolean;
     onRefresh?: () => void;
     styles?: any;

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

@@ -54,6 +54,15 @@ export declare class RelayerService {
             status: "pending" | "processing" | "success" | "failed";
         };
     }>;
+    requestSpiceUsdAirdrop(params: {
+        chainId: number;
+        address: string;
+    }): Promise<{
+        success: boolean;
+        txHash?: string;
+        amount?: string;
+        errorMessage?: string;
+    }>;
 }
 export declare const relayerService: RelayerService;
 export declare const createInitialSteps: (chainBatches: ChainBatch[], customGetChainName?: (chainId: number) => string) => SwapStep[];

package/package.json

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