Improve utils/lib code organization

frontend/components/block-state-tracker/block-card.tsx

@@ -5,9 +5,9 @@ import { Check } from 'lucide-react'
 import { ExternalLink } from '@/components/ui/external-link'
 import { BLOCK_STATE_CONFIG } from '@/constants/block-state'
 import { formatTimeDisplay } from '@/lib/timestamp'
+import { formatBlockNumber } from '@/lib/ui'
 import { cn } from '@/lib/utils'
 import type { Block, BlockState } from '@/types/block'
-import { formatBlockNumber } from '@/utils/ui'
 
 interface BlockCardProps {
   block: Block

frontend/components/block-time-tracker/block-time.tsx

@@ -7,9 +7,9 @@ import {
 } from '@/components/ui/tooltip'
 import { EXPLORER_URL } from '@/constants/common'
 import { calculateBarMetrics, fromNsToMsPrecise } from '@/lib/block-metrics'
+import { formatBlockNumber } from '@/lib/ui'
 import { cn } from '@/lib/utils'
 import type { Block } from '@/types/block'
-import { formatBlockNumber } from '@/utils/ui'
 import { ExternalLink } from '../ui/external-link'
 
 interface BlockTimeProps {

frontend/components/hot-accounts-bubble-map.tsx

@@ -5,8 +5,8 @@ import { BubbleMap } from '@/components/ui/bubble-map'
 import { ExplorerLink } from '@/components/ui/bubble-map/explorer-link'
 import { useContractLabels } from '@/hooks/use-contract-labels'
 import { useEvents } from '@/hooks/use-events'
+import { formatIntNumber } from '@/lib/ui'
 import { shortenHex } from '@/lib/utils'
-import { formatIntNumber } from '@/utils/ui'
 
 interface HotAccount {
   id: string

frontend/components/hot-slots-bubble-map.tsx

@@ -5,8 +5,8 @@ import { BubbleMap } from '@/components/ui/bubble-map'
 import { ExplorerLink } from '@/components/ui/bubble-map/explorer-link'
 import { useContractLabels } from '@/hooks/use-contract-labels'
 import { useEvents } from '@/hooks/use-events'
+import { formatIntNumber } from '@/lib/ui'
 import { shortenHex } from '@/lib/utils'
-import { formatIntNumber } from '@/utils/ui'
 
 interface HotSlot {
   id: string

frontend/components/swap-transfer-tracker/cumulative-transfer-counter.tsx

@@ -3,7 +3,7 @@
 import { TrendingUp } from 'lucide-react'
 import { formatUnits } from 'viem'
 import { StatCard } from '@/components/ui/stat-card'
-import { formatAmount } from '@/utils/ui'
+import { formatAmount } from '@/lib/ui'
 
 interface CumulativeTransferCounterProps {
   cumulativeTransferred: bigint

frontend/components/swap-transfer-tracker/swap-row.tsx

@@ -4,8 +4,8 @@ import { motion } from 'framer-motion'
 import { ExternalLink } from '@/components/ui/external-link'
 import { EXPLORER_URL } from '@/constants/common'
 import { getSwapProviderConfig } from '@/constants/swap-provider-config'
-import { formatTokenAmount } from '@/lib/amount'
 import { formatTimeDisplay } from '@/lib/timestamp'
+import { formatTokenAmount } from '@/lib/ui'
 import { cn, shortenHex } from '@/lib/utils'
 import type { SwapData } from '@/types/swap'
 import { TokenBadge } from './token-badge'

frontend/components/swap-transfer-tracker/transfer-row.tsx

@@ -3,8 +3,8 @@
 import { motion } from 'framer-motion'
 import { ExternalLink } from '@/components/ui/external-link'
 import { EXPLORER_URL } from '@/constants/common'
-import { formatTokenAmount } from '@/lib/amount'
 import { formatTimeDisplay } from '@/lib/timestamp'
+import { formatTokenAmount } from '@/lib/ui'
 import { cn, shortenHex } from '@/lib/utils'
 import type { TransferData } from '@/types/transfer'
 import { TokenBadge } from './token-badge'

frontend/components/tps-tracker/tps-chart.tsx

@@ -15,8 +15,8 @@ import {
 } from '@/components/ui/tooltip'
 import { useTps } from '@/hooks/use-tps'
 import { formatRelativeTime, formatTimeHMS } from '@/lib/timestamp'
+import { formatIntNumber } from '@/lib/ui'
 import { cn } from '@/lib/utils'
-import { formatIntNumber } from '@/utils/ui'
 
 const chartConfig = {
   tps: {

frontend/hooks/use-swap-events.ts

@@ -9,9 +9,9 @@ import {
   type SwapProvider,
 } from '@/constants/swap-provider-config'
 import { useEvents } from '@/hooks/use-events'
+import { parseTopicsString } from '@/lib/abi-decode'
 import type { SerializableEventData } from '@/types/events'
 import type { SwapData } from '@/types/swap'
-import { parseTopicsString } from '@/utils/abi-decode'
 
 const MAX_SWAPS = 50
 

frontend/hooks/use-transfer-events.ts

@@ -8,9 +8,9 @@ import {
   WMON_ADDRESS,
 } from '@/constants/transfer-config'
 import { useEvents } from '@/hooks/use-events'
+import { parseTopicsString } from '@/lib/abi-decode'
 import type { SerializableEventData } from '@/types/events'
 import type { TransferData } from '@/types/transfer'
-import { parseTopicsString } from '@/utils/abi-decode'
 
 const MAX_TRANSFERS = 50
 

frontend/utils/ui.ts → frontend/lib/ui.ts

@@ -1,3 +1,6 @@
+import { formatUnits } from 'viem'
+import { getTokenDecimals } from '@/constants/swap-provider-config'
+
 export function formatBlockNumber(num: number): string {
   const str = num.toString()
   if (str.length <= 9) {
@@ -25,3 +28,17 @@ export function formatAmount(amount: number) {
   if (amount < 1_000_000_000) return `${(amount / 1_000_000).toFixed(2)}M`
   return `${(amount / 1_000_000_000).toFixed(2)}B`
 }
+
+export function formatTokenAmount(
+  amount: string,
+  tokenSymbol: string,
+  tokenAddress?: string,
+): string {
+  // Use address for decimals lookup if available, fallback to symbol
+  const decimals = getTokenDecimals(tokenAddress ?? tokenSymbol)
+  const absAmount = amount.startsWith('-') ? amount.slice(1) : amount
+  const formatted = formatUnits(BigInt(absAmount), decimals)
+  const num = Number(formatted)
+
+  return formatAmount(num)
+}