@hongming-wang/usdc-bridge-widget 0.1.0

package/src/chains.ts

@@ -0,0 +1,209 @@
+import { defineChain } from "viem";
+import {
+  mainnet,
+  arbitrum,
+  avalanche,
+  base,
+  optimism,
+  polygon,
+  linea,
+  sei,
+  worldchain,
+  ink,
+  sonic,
+  xdc,
+  // Testnets
+  sepolia,
+  arbitrumSepolia,
+  avalancheFuji,
+  baseSepolia,
+  optimismSepolia,
+  polygonAmoy,
+} from "viem/chains";
+import type { BridgeChainConfig } from "./types";
+import {
+  USDC_ADDRESSES,
+  TOKEN_MESSENGER_ADDRESSES,
+  CHAIN_ICONS,
+} from "./constants";
+
+// Custom chain definitions for chains not yet in viem/chains
+export const unichain = defineChain({
+  id: 130,
+  name: "Unichain",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://mainnet.unichain.org"] },
+  },
+  blockExplorers: {
+    default: { name: "Uniscan", url: "https://uniscan.xyz" },
+  },
+});
+
+export const hyperEvm = defineChain({
+  id: 999,
+  name: "HyperEVM",
+  nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.hyperliquid.xyz/evm"] },
+  },
+  blockExplorers: {
+    default: { name: "Hyperscan", url: "https://hyperscan.xyz" },
+  },
+});
+
+export const plume = defineChain({
+  id: 98866,
+  name: "Plume",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.plume.org"] },
+  },
+  blockExplorers: {
+    default: { name: "Plume Explorer", url: "https://explorer.plume.org" },
+  },
+});
+
+export const monad = defineChain({
+  id: 10200,
+  name: "Monad",
+  nativeCurrency: { name: "MON", symbol: "MON", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.monad.xyz"] },
+  },
+  blockExplorers: {
+    default: { name: "Monad Explorer", url: "https://explorer.monad.xyz" },
+  },
+});
+
+export const codex = defineChain({
+  id: 81224,
+  name: "Codex",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://rpc.codex.storage"] },
+  },
+  blockExplorers: {
+    default: { name: "Codex Explorer", url: "https://explorer.codex.storage" },
+  },
+});
+
+// Helper to create chain configs
+export function createChainConfig(
+  chain: import("viem").Chain,
+  options?: {
+    usdcAddress?: `0x${string}`;
+    tokenMessengerAddress?: `0x${string}`;
+    iconUrl?: string;
+  }
+): BridgeChainConfig {
+  return {
+    chain,
+    usdcAddress: options?.usdcAddress || USDC_ADDRESSES[chain.id],
+    tokenMessengerAddress:
+      options?.tokenMessengerAddress || TOKEN_MESSENGER_ADDRESSES[chain.id],
+    iconUrl: options?.iconUrl || CHAIN_ICONS[chain.id],
+  };
+}
+
+// All supported CCTP chains
+// Note: Monad is defined but not included in defaults as Circle Bridge Kit doesn't support it yet
+export const DEFAULT_CHAIN_CONFIGS: BridgeChainConfig[] = [
+  createChainConfig(mainnet),
+  createChainConfig(arbitrum),
+  createChainConfig(base),
+  createChainConfig(optimism),
+  createChainConfig(polygon),
+  createChainConfig(avalanche),
+  createChainConfig(linea),
+  createChainConfig(sonic),
+  createChainConfig(worldchain),
+  createChainConfig(sei),
+  createChainConfig(xdc),
+  createChainConfig(ink),
+  createChainConfig(unichain),
+  createChainConfig(hyperEvm),
+  createChainConfig(plume),
+  createChainConfig(codex),
+];
+
+// Re-export viem chains for convenience
+export {
+  mainnet,
+  arbitrum,
+  avalanche,
+  base,
+  optimism,
+  polygon,
+  linea,
+  sei,
+  worldchain,
+  ink,
+  sonic,
+  xdc,
+};
+
+// =============================================================================
+// TESTNET CHAINS
+// =============================================================================
+
+// Testnet USDC addresses (Circle's testnet USDC)
+const TESTNET_USDC_ADDRESSES: Record<number, `0x${string}`> = {
+  11155111: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238", // Sepolia
+  421614: "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d", // Arbitrum Sepolia
+  43113: "0x5425890298aed601595a70AB815c96711a31Bc65", // Avalanche Fuji
+  84532: "0x036CbD53842c5426634e7929541eC2318f3dCF7e", // Base Sepolia
+  11155420: "0x5fd84259d66Cd46123540766Be93DFE6D43130D7", // Optimism Sepolia
+  80002: "0x41E94Eb019C0762f9Bfcf9Fb1E58725BfB0e7582", // Polygon Amoy
+};
+
+// Testnet TokenMessenger V2 address (same across testnets)
+const TESTNET_TOKEN_MESSENGER_V2_ADDRESS: `0x${string}` =
+  "0x9f3B8679c73C2Fef8b59B4f3444d4e156fb70AA5";
+
+/**
+ * Create a testnet chain configuration
+ */
+export function createTestnetChainConfig(
+  chain: import("viem").Chain,
+  options?: {
+    usdcAddress?: `0x${string}`;
+    tokenMessengerAddress?: `0x${string}`;
+    iconUrl?: string;
+  }
+): BridgeChainConfig {
+  return {
+    chain,
+    usdcAddress: options?.usdcAddress || TESTNET_USDC_ADDRESSES[chain.id],
+    tokenMessengerAddress:
+      options?.tokenMessengerAddress || TESTNET_TOKEN_MESSENGER_V2_ADDRESS,
+    iconUrl: options?.iconUrl || CHAIN_ICONS[chain.id],
+  };
+}
+
+/**
+ * Testnet chain configurations for development and testing.
+ * These use Circle's testnet USDC and TokenMessenger contracts.
+ *
+ * @example
+ * import { TESTNET_CHAIN_CONFIGS } from './chains';
+ * <BridgeWidget chains={TESTNET_CHAIN_CONFIGS} />
+ */
+export const TESTNET_CHAIN_CONFIGS: BridgeChainConfig[] = [
+  createTestnetChainConfig(sepolia),
+  createTestnetChainConfig(arbitrumSepolia),
+  createTestnetChainConfig(avalancheFuji),
+  createTestnetChainConfig(baseSepolia),
+  createTestnetChainConfig(optimismSepolia),
+  createTestnetChainConfig(polygonAmoy),
+];
+
+// Re-export testnet chains
+export {
+  sepolia,
+  arbitrumSepolia,
+  avalancheFuji,
+  baseSepolia,
+  optimismSepolia,
+  polygonAmoy,
+};

package/src/constants.ts

@@ -0,0 +1,97 @@
+// USDC token decimals
+export const USDC_DECIMALS = 6;
+
+// USDC brand color for icon
+export const USDC_BRAND_COLOR = "#2775ca";
+
+// Maximum USDC amount (100 billion - more than total supply)
+export const MAX_USDC_AMOUNT = "100000000000";
+
+// Minimum USDC amount for bridging
+export const MIN_USDC_AMOUNT = "0.000001";
+
+// Default locale for number formatting (consistent display in financial apps)
+export const DEFAULT_LOCALE = "en-US";
+
+// Default USDC addresses per chain
+// Note: Not all chains listed here are supported by Circle Bridge Kit yet.
+// Check DEFAULT_CHAIN_CONFIGS in chains.ts for currently supported chains.
+export const USDC_ADDRESSES: Record<number, `0x${string}`> = {
+  // Original chains
+  1: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // Ethereum
+  42161: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // Arbitrum
+  43114: "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E", // Avalanche
+  8453: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // Base
+  10: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // Optimism
+  137: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359", // Polygon
+  59144: "0x176211869cA2b568f2A7D4EE941E073a821EE1ff", // Linea
+  // New CCTP V2 chains
+  130: "0x078D782b760474a361dDA0AF3839290b0EF57AD6", // Unichain
+  146: "0x29219dd400f2Bf60E5a23d13Be72B486D4038894", // Sonic
+  480: "0x79A02482A880bCE3F13e09Da970dC34db4CD24d1", // World Chain
+  10200: "0x754704Bc059F8C67012fEd69BC8A327a5aafb603", // Monad
+  1329: "0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392", // Sei
+  50: "0xfA2958CB79b0491CC627c1557F441eF849Ca8eb1", // XDC
+  999: "0xb88339CB7199b77E23DB6E890353E22632Ba630f", // HyperEVM
+  57073: "0x2D270e6886d130D724215A266106e6832161EAEd", // Ink
+  98866: "0x222365EF19F7947e5484218551B56bb3965Aa7aF", // Plume
+  81224: "0xd996633a415985DBd7D6D12f4A4343E31f5037cf", // Codex
+};
+
+// Circle TokenMessenger V1 addresses (CCTP Legacy)
+export const TOKEN_MESSENGER_V1_ADDRESSES: Record<number, `0x${string}`> = {
+  1: "0xBd3fa81B58Ba92a82136038B25aDec7066af3155", // Ethereum
+  42161: "0x19330d10D9Cc8751218eaf51E8885D058642E08A", // Arbitrum
+  43114: "0x6B25532e1060CE10cc3B0A99e5683b91BFDe6982", // Avalanche
+  8453: "0x1682Ae6375C4E4A97e4B583BC394c861A46D8962", // Base
+  10: "0x2B4069517957735bE00ceE0fadAE88a26365528f", // Optimism
+  137: "0x9daF8c91AEFAE50b9c0E69629D3F6Ca40cA3B3FE", // Polygon
+};
+
+// Circle TokenMessengerV2 address (CCTP V2 - same address on all supported chains)
+export const TOKEN_MESSENGER_V2_ADDRESS: `0x${string}` =
+  "0x28b5a0e9C621a5BadaA536219b3a228C8168cf5d";
+
+// Combined TokenMessenger addresses (prefers V2)
+export const TOKEN_MESSENGER_ADDRESSES: Record<number, `0x${string}`> = {
+  // All CCTP V2 supported chains use the same address
+  1: TOKEN_MESSENGER_V2_ADDRESS, // Ethereum
+  42161: TOKEN_MESSENGER_V2_ADDRESS, // Arbitrum
+  43114: TOKEN_MESSENGER_V2_ADDRESS, // Avalanche
+  8453: TOKEN_MESSENGER_V2_ADDRESS, // Base
+  10: TOKEN_MESSENGER_V2_ADDRESS, // Optimism
+  137: TOKEN_MESSENGER_V2_ADDRESS, // Polygon
+  59144: TOKEN_MESSENGER_V2_ADDRESS, // Linea
+  130: TOKEN_MESSENGER_V2_ADDRESS, // Unichain
+  146: TOKEN_MESSENGER_V2_ADDRESS, // Sonic
+  480: TOKEN_MESSENGER_V2_ADDRESS, // World Chain
+  10200: TOKEN_MESSENGER_V2_ADDRESS, // Monad
+  1329: TOKEN_MESSENGER_V2_ADDRESS, // Sei
+  50: TOKEN_MESSENGER_V2_ADDRESS, // XDC
+  999: TOKEN_MESSENGER_V2_ADDRESS, // HyperEVM
+  57073: TOKEN_MESSENGER_V2_ADDRESS, // Ink
+  98866: TOKEN_MESSENGER_V2_ADDRESS, // Plume
+  81224: TOKEN_MESSENGER_V2_ADDRESS, // Codex
+};
+
+// Chain icon URLs (using DefiLlama's reliable CDN)
+export const CHAIN_ICONS: Record<number, string> = {
+  1: "https://icons.llamao.fi/icons/chains/rsz_ethereum.jpg", // Ethereum
+  42161: "https://icons.llamao.fi/icons/chains/rsz_arbitrum.jpg", // Arbitrum
+  43114: "https://icons.llamao.fi/icons/chains/rsz_avalanche.jpg", // Avalanche
+  8453: "https://icons.llamao.fi/icons/chains/rsz_base.jpg", // Base
+  10: "https://icons.llamao.fi/icons/chains/rsz_optimism.jpg", // Optimism
+  137: "https://icons.llamao.fi/icons/chains/rsz_polygon.jpg", // Polygon
+  59144: "https://icons.llamao.fi/icons/chains/rsz_linea.jpg", // Linea
+  130: "https://icons.llamao.fi/icons/chains/rsz_unichain.jpg", // Unichain
+  146: "https://icons.llamao.fi/icons/chains/rsz_sonic.jpg", // Sonic
+  480: "https://icons.llamao.fi/icons/chains/rsz_world-chain.jpg", // World Chain
+  10200: "https://icons.llamao.fi/icons/chains/rsz_monad.jpg", // Monad
+  1329: "https://icons.llamao.fi/icons/chains/rsz_sei.jpg", // Sei
+  50: "https://icons.llamao.fi/icons/chains/rsz_xdc.jpg", // XDC
+  999: "https://icons.llamao.fi/icons/chains/rsz_hyperevm.jpg", // HyperEVM
+  57073: "https://icons.llamao.fi/icons/chains/rsz_ink.jpg", // Ink
+  98866: "https://icons.llamao.fi/icons/chains/rsz_plume.jpg", // Plume
+  81224:
+    "https://raw.githubusercontent.com/0xa3k5/web3icons/main/packages/core/src/svgs/networks/branded/codex.svg", // Codex
+};

package/src/hooks.ts

@@ -0,0 +1,349 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import {
+  useAccount,
+  useReadContract,
+  useReadContracts,
+  useWriteContract,
+  useWaitForTransactionReceipt,
+} from "wagmi";
+import { formatUnits, parseUnits, erc20Abi } from "viem";
+import type { BridgeChainConfig, BridgeEstimate } from "./types";
+import { USDC_DECIMALS } from "./constants";
+import { formatNumber } from "./utils";
+import { getBridgeChain } from "./useBridge";
+
+/**
+ * Hook to get USDC balance for a specific chain
+ */
+export function useUSDCBalance(chainConfig: BridgeChainConfig | undefined) {
+  const { address } = useAccount();
+
+  const {
+    data: balance,
+    isLoading,
+    refetch,
+  } = useReadContract({
+    address: chainConfig?.usdcAddress,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: address ? [address] : undefined,
+    query: {
+      enabled: !!address && !!chainConfig?.usdcAddress,
+    },
+  });
+
+  return {
+    balance: balance ?? 0n,
+    balanceFormatted: balance ? formatUnits(balance, USDC_DECIMALS) : "0",
+    isLoading,
+    refetch,
+  };
+}
+
+/**
+ * Hook to get USDC balances for all configured chains at once.
+ * Uses multicall for efficient batch fetching.
+ *
+ * @param chainConfigs - Array of chain configurations to fetch balances for
+ * @returns Object with balances mapped by chain ID, loading state, and refetch function
+ *
+ * @example
+ * const { balances, isLoading, refetch } = useAllUSDCBalances(chains);
+ * // balances[1] -> { balance: 1000000n, formatted: "1.00" }
+ */
+export function useAllUSDCBalances(chainConfigs: BridgeChainConfig[]): {
+  balances: Record<number, { balance: bigint; formatted: string }>;
+  isLoading: boolean;
+  refetch: () => void;
+} {
+  const { address } = useAccount();
+
+  // Build contract read configs for all chains
+  const contracts = useMemo(() => {
+    if (!address) return [];
+    return chainConfigs
+      .filter((config) => config.usdcAddress)
+      .map((config) => ({
+        address: config.usdcAddress,
+        abi: erc20Abi,
+        functionName: "balanceOf" as const,
+        args: [address] as const,
+        chainId: config.chain.id,
+      }));
+  }, [address, chainConfigs]);
+
+  const {
+    data: results,
+    isLoading,
+    refetch,
+  } = useReadContracts({
+    contracts,
+    query: {
+      enabled: !!address && contracts.length > 0,
+    },
+  });
+
+  // Map results to chain IDs
+  const balances = useMemo(() => {
+    const balanceMap: Record<
+      number,
+      { balance: bigint; formatted: string }
+    > = {};
+
+    if (!results) return balanceMap;
+
+    chainConfigs.forEach((config, index) => {
+      const result = results[index];
+      if (result?.status === "success" && typeof result.result === "bigint") {
+        balanceMap[config.chain.id] = {
+          balance: result.result,
+          formatted: formatUnits(result.result, USDC_DECIMALS),
+        };
+      } else {
+        balanceMap[config.chain.id] = {
+          balance: 0n,
+          formatted: "0",
+        };
+      }
+    });
+
+    return balanceMap;
+  }, [results, chainConfigs]);
+
+  return {
+    balances,
+    isLoading,
+    refetch: refetch as () => void,
+  };
+}
+
+/**
+ * Hook to check and handle USDC allowance
+ */
+export function useUSDCAllowance(
+  chainConfig: BridgeChainConfig | undefined,
+  spenderAddress?: `0x${string}`
+) {
+  const { address } = useAccount();
+  const effectiveSpender =
+    spenderAddress || chainConfig?.tokenMessengerAddress;
+
+  const {
+    data: allowance,
+    isLoading,
+    refetch,
+  } = useReadContract({
+    address: chainConfig?.usdcAddress,
+    abi: erc20Abi,
+    functionName: "allowance",
+    args:
+      address && effectiveSpender ? [address, effectiveSpender] : undefined,
+    query: {
+      enabled: !!address && !!chainConfig?.usdcAddress && !!effectiveSpender,
+    },
+  });
+
+  const { writeContractAsync, isPending: isApproving } = useWriteContract();
+  const [approvalTxHash, setApprovalTxHash] = useState<
+    `0x${string}` | undefined
+  >();
+  const [approvalError, setApprovalError] = useState<Error | null>(null);
+
+  const { isLoading: isConfirming, isSuccess: isApprovalConfirmed } =
+    useWaitForTransactionReceipt({
+      hash: approvalTxHash,
+    });
+
+  const approve = useCallback(
+    async (amount: string): Promise<`0x${string}`> => {
+      if (!chainConfig?.usdcAddress || !effectiveSpender) {
+        throw new Error("Missing chain config or spender address");
+      }
+
+      setApprovalError(null);
+      try {
+        const amountBigInt = parseUnits(amount, USDC_DECIMALS);
+        const hash = await writeContractAsync({
+          address: chainConfig.usdcAddress,
+          abi: erc20Abi,
+          functionName: "approve",
+          args: [effectiveSpender, amountBigInt],
+        });
+        setApprovalTxHash(hash);
+        return hash;
+      } catch (error) {
+        const err =
+          error instanceof Error ? error : new Error("Approval failed");
+        setApprovalError(err);
+        throw err;
+      }
+    },
+    [chainConfig?.usdcAddress, effectiveSpender, writeContractAsync]
+  );
+
+  useEffect(() => {
+    if (isApprovalConfirmed) {
+      refetch();
+    }
+  }, [isApprovalConfirmed, refetch]);
+
+  const needsApproval = useCallback(
+    (amount: string) => {
+      // Early return for invalid inputs
+      if (!amount || !allowance) return false;
+
+      const parsedAmount = parseFloat(amount);
+      if (isNaN(parsedAmount) || parsedAmount <= 0) return false;
+
+      try {
+        const amountBigInt = parseUnits(amount, USDC_DECIMALS);
+        return allowance < amountBigInt;
+      } catch {
+        // Parsing failed - amount is invalid, return false
+        return false;
+      }
+    },
+    [allowance]
+  );
+
+  return {
+    allowance: allowance ?? 0n,
+    allowanceFormatted: allowance ? formatUnits(allowance, USDC_DECIMALS) : "0",
+    isLoading,
+    isApproving: isApproving || isConfirming,
+    approve,
+    needsApproval,
+    refetch,
+    approvalError,
+  };
+}
+
+/**
+ * Hook to estimate bridge costs using Circle Bridge Kit SDK
+ *
+ * @deprecated This hook is deprecated and will be removed in a future version.
+ * Use `useBridgeQuote` from `useBridge.ts` instead for SDK-based estimates.
+ *
+ * Note: kit.estimate() requires an adapter with wallet connection.
+ * For pre-bridge quotes without wallet, we return CCTP standard estimates.
+ *
+ * @example
+ * // Before (deprecated):
+ * const { estimate } = useBridgeEstimate(sourceChainId, destChainId, amount);
+ *
+ * // After (recommended):
+ * import { useBridgeQuote } from './useBridge';
+ * const { quote } = useBridgeQuote(sourceChainId, destChainId, amount);
+ */
+export function useBridgeEstimate(
+  sourceChainId: number | undefined,
+  destChainId: number | undefined,
+  amount: string
+) {
+  // Emit deprecation warning once
+  useEffect(() => {
+    console.warn(
+      "[DEPRECATED] useBridgeEstimate is deprecated and will be removed in a future version. " +
+      "Use useBridgeQuote from './useBridge' instead."
+    );
+  }, []);
+
+  const [estimate, setEstimate] = useState<BridgeEstimate | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchEstimate = useCallback(async () => {
+    if (!amount || parseFloat(amount) <= 0 || !sourceChainId || !destChainId) {
+      setEstimate(null);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const sourceBridgeChain = getBridgeChain(sourceChainId);
+      const destBridgeChain = getBridgeChain(destChainId);
+
+      // If chains are not supported, return basic estimate
+      if (!sourceBridgeChain || !destBridgeChain) {
+        setEstimate({
+          gasFee: "Estimated by wallet",
+          bridgeFee: "0.00",
+          totalFee: "Gas only",
+          estimatedTime: "~15-20 minutes",
+        });
+        setIsLoading(false);
+        return;
+      }
+
+      // Note: kit.estimate() requires an adapter with wallet connection
+      // For pre-bridge quotes without wallet, we return CCTP standard estimates
+      // CCTP V2 FAST transfers: 1-14 bps fee, SLOW transfers: 0 bps
+      setEstimate({
+        gasFee: "Estimated by wallet",
+        bridgeFee: "0-14 bps (FAST) / 0 (SLOW)",
+        totalFee: "Gas + protocol fee",
+        estimatedTime: "~15-20 minutes",
+      });
+    } catch (err) {
+      const error =
+        err instanceof Error ? err : new Error("Failed to estimate bridge cost");
+      setError(error);
+      setEstimate(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sourceChainId, destChainId, amount]);
+
+  useEffect(() => {
+    // Track if this effect is still active
+    let isActive = true;
+
+    const debounceTimer = setTimeout(() => {
+      if (isActive) {
+        fetchEstimate();
+      }
+    }, 500);
+
+    return () => {
+      isActive = false;
+      clearTimeout(debounceTimer);
+    };
+  }, [fetchEstimate]);
+
+  return { estimate, isLoading, error };
+}
+
+/**
+ * Hook to format numbers for display
+ *
+ * @deprecated This hook is deprecated and will be removed in a future version.
+ * Use the `formatNumber` utility function directly from `utils.ts` instead.
+ * The hook adds unnecessary overhead with useCallback for a pure function.
+ *
+ * @example
+ * // Before (deprecated):
+ * const format = useFormatNumber();
+ * const formatted = format(1234.56, 2);
+ *
+ * // After (recommended):
+ * import { formatNumber } from './utils';
+ * const formatted = formatNumber(1234.56, 2);
+ */
+export function useFormatNumber() {
+  // Emit deprecation warning once
+  useEffect(() => {
+    console.warn(
+      "[DEPRECATED] useFormatNumber is deprecated and will be removed in a future version. " +
+      "Use the formatNumber utility function from './utils' directly instead."
+    );
+  }, []);
+
+  return useCallback(
+    (value: string | number, decimals: number = 2): string => {
+      return formatNumber(value, decimals);
+    },
+    []
+  );
+}