Fix dashboard trend test expectations

frontend/src/components/common/DisplayCurrencyContext.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from 'react'
+
+export type DisplayCurrency = 'native' | 'usd'
+
+const DISPLAY_CURRENCY_STORAGE_KEY = 'explorer_display_currency'
+
+const DisplayCurrencyContext = createContext<{
+  currency: DisplayCurrency
+  setCurrency: (currency: DisplayCurrency) => void
+} | null>(null)
+
+export function DisplayCurrencyProvider({ children }: { children: ReactNode }) {
+  const [currency, setCurrencyState] = useState<DisplayCurrency>('native')
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const stored = window.localStorage.getItem(DISPLAY_CURRENCY_STORAGE_KEY)
+    if (stored === 'native' || stored === 'usd') {
+      setCurrencyState(stored)
+    }
+  }, [])
+
+  const setCurrency = (nextCurrency: DisplayCurrency) => {
+    setCurrencyState(nextCurrency)
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(DISPLAY_CURRENCY_STORAGE_KEY, nextCurrency)
+    }
+  }
+
+  const value = useMemo(
+    () => ({
+      currency,
+      setCurrency,
+    }),
+    [currency],
+  )
+
+  return <DisplayCurrencyContext.Provider value={value}>{children}</DisplayCurrencyContext.Provider>
+}
+
+export function useDisplayCurrency() {
+  const context = useContext(DisplayCurrencyContext)
+  if (!context) {
+    throw new Error('useDisplayCurrency must be used within a DisplayCurrencyProvider')
+  }
+  return context
+}

frontend/src/components/common/ExplorerChrome.tsx

@@ -2,25 +2,28 @@ import type { ReactNode } from 'react'
 import Navbar from './Navbar'
 import Footer from './Footer'
 import ExplorerAgentTool from './ExplorerAgentTool'
+import { DisplayCurrencyProvider } from './DisplayCurrencyContext'
 import { UiModeProvider } from './UiModeContext'
 
 export default function ExplorerChrome({ children }: { children: ReactNode }) {
   return (
     <UiModeProvider>
-      <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
-        <a
-          href="#main-content"
-          className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white"
-        >
-          Skip to content
-        </a>
-        <Navbar />
-        <div id="main-content" className="flex-1">
-          {children}
+      <DisplayCurrencyProvider>
+        <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+          <a
+            href="#main-content"
+            className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white"
+          >
+            Skip to content
+          </a>
+          <Navbar />
+          <div id="main-content" className="flex-1">
+            {children}
+          </div>
+          <ExplorerAgentTool />
+          <Footer />
         </div>
-        <ExplorerAgentTool />
-        <Footer />
-      </div>
+      </DisplayCurrencyProvider>
     </UiModeProvider>
   )
 }

frontend/src/hooks/useBlockTransactions.ts

@@ -1,77 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-import { transactionsApi, type Transaction } from '@/services/api/transactions'
-
-const DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE = 25
-
-interface UseBlockTransactionsOptions {
-  blockNumber: number
-  chainId: number
-  enabled: boolean
-}
-
-export function useBlockTransactions({ blockNumber, chainId, enabled }: UseBlockTransactionsOptions) {
-  const [transactions, setTransactions] = useState<Transaction[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(false)
-  const [hasNextPage, setHasNextPage] = useState(false)
-  const [page, setPage] = useState(1)
-  const previousBlockNumberRef = useRef(blockNumber)
-
-  useEffect(() => {
-    if (!enabled) {
-      previousBlockNumberRef.current = blockNumber
-      if (page !== 1) {
-        setPage(1)
-      }
-      setTransactions([])
-      setLoading(false)
-      setError(false)
-      setHasNextPage(false)
-      return
-    }
-
-    if (previousBlockNumberRef.current !== blockNumber) {
-      previousBlockNumberRef.current = blockNumber
-      if (page !== 1) {
-        setPage(1)
-        return
-      }
-    }
-
-    let cancelled = false
-    setLoading(true)
-    setError(false)
-
-    void (async () => {
-      const result = await transactionsApi.listByBlockSafe(
-        chainId,
-        blockNumber,
-        page,
-        DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE,
-      )
-
-      if (cancelled) {
-        return
-      }
-
-      setTransactions(result.items)
-      setHasNextPage(result.hasNextPage)
-      setError(!result.ok)
-      setLoading(false)
-    })()
-
-    return () => {
-      cancelled = true
-    }
-  }, [blockNumber, chainId, enabled, page])
-
-  return {
-    transactions,
-    loading,
-    error,
-    hasNextPage,
-    page,
-    setPage,
-  }
-}

frontend/src/pages/blocks/[number].tsx

@@ -1,15 +1,13 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { blocksApi, Block } from '@/services/api/blocks'
-import { Card, Address, Table } from '@/libs/frontend-ui-primitives'
+import { Card, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 import { DetailRow } from '@/components/common/DetailRow'
 import PageIntro from '@/components/common/PageIntro'
-import { formatTimestamp, formatWeiAsEth } from '@/utils/format'
-import { type Transaction } from '@/services/api/transactions'
-import { useBlockTransactions } from '@/hooks/useBlockTransactions'
+import { formatTimestamp } from '@/utils/format'
 
 export default function BlockDetailPage() {
   const router = useRouter()
@@ -21,18 +19,17 @@ export default function BlockDetailPage() {
   const [block, setBlock] = useState<Block | null>(null)
   const [loading, setLoading] = useState(true)
 
-  const {
-    transactions: blockTransactions,
-    loading: transactionsLoading,
-    error: transactionsError,
-    hasNextPage: hasNextTransactionsPage,
-    page: transactionPage,
-    setPage: setTransactionPage,
-  } = useBlockTransactions({
-    blockNumber,
-    chainId,
-    enabled: router.isReady && isValidBlock,
-  })
+  const loadBlock = useCallback(async () => {
+    setLoading(true)
+    try {
+      const response = await blocksApi.getByNumber(chainId, blockNumber)
+      setBlock(response.data)
+    } catch (error) {
+      console.error('Failed to load block:', error)
+    } finally {
+      setLoading(false)
+    }
+  }, [chainId, blockNumber])
 
   useEffect(() => {
     if (!router.isReady) {
@@ -43,85 +40,12 @@ export default function BlockDetailPage() {
       setBlock(null)
       return
     }
-
-    let cancelled = false
-    setLoading(true)
-
-    void (async () => {
-      try {
-        const response = await blocksApi.getByNumber(chainId, blockNumber)
-        if (cancelled) {
-          return
-        }
-        setBlock(response.data)
-      } catch (error) {
-        console.error('Failed to load block:', error)
-        if (cancelled) {
-          return
-        }
-        setBlock(null)
-      } finally {
-        if (!cancelled) {
-          setLoading(false)
-        }
-      }
-    })()
-
-    return () => {
-      cancelled = true
-    }
-  }, [blockNumber, chainId, isValidBlock, router.isReady])
+    loadBlock()
+  }, [isValidBlock, loadBlock, router.isReady])
 
   const gasUtilization = block && block.gas_limit > 0
     ? Math.round((block.gas_used / block.gas_limit) * 100)
     : null
-  const transactionColumns = useMemo(() => [
-    {
-      header: 'Hash',
-      accessor: (transaction: Transaction) => (
-        <Link href={`/transactions/${transaction.hash}`} className="text-primary-600 hover:underline">
-          <Address address={transaction.hash} truncate showCopy={false} />
-        </Link>
-      ),
-    },
-    {
-      header: 'From',
-      accessor: (transaction: Transaction) => (
-        <Link href={`/addresses/${transaction.from_address}`} className="text-primary-600 hover:underline">
-          <Address address={transaction.from_address} truncate showCopy={false} />
-        </Link>
-      ),
-    },
-    {
-      header: 'To',
-      accessor: (transaction: Transaction) =>
-        transaction.to_address ? (
-          <Link href={`/addresses/${transaction.to_address}`} className="text-primary-600 hover:underline">
-            <Address address={transaction.to_address} truncate showCopy={false} />
-          </Link>
-        ) : (
-          <span className="text-gray-500 dark:text-gray-400">Contract creation</span>
-        ),
-    },
-    {
-      header: 'Value',
-      accessor: (transaction: Transaction) => formatWeiAsEth(transaction.value),
-    },
-    {
-      header: 'Status',
-      accessor: (transaction: Transaction) => (
-        <span className={transaction.status === 1 ? 'text-green-600' : 'text-red-600'}>
-          {transaction.status === 1 ? 'Success' : 'Failed'}
-        </span>
-      ),
-    },
-  ], [])
-
-  const transactionsEmptyMessage = transactionsError
-    ? 'Unable to load indexed block transactions right now. Please retry from this page in a moment.'
-    : (block?.transaction_count ?? 0) > 0
-    ? 'No indexed block transactions were returned for this page yet.'
-    : 'This block does not contain any indexed transactions.'
 
   return (
     <div className="container mx-auto px-4 py-6 sm:py-8">
@@ -150,11 +74,6 @@ export default function BlockDetailPage() {
             Next block
           </Link>
         )}
-        {block?.transaction_count ? (
-          <a href="#block-transactions" className="text-primary-600 hover:underline">
-            Open block transactions
-          </a>
-        ) : null}
       </div>
 
       {!router.isReady || loading ? (
@@ -200,9 +119,9 @@ export default function BlockDetailPage() {
               </Link>
             </DetailRow>
             <DetailRow label="Transactions">
-              <a href="#block-transactions" className="text-primary-600 hover:underline">
+              <Link href={`/search?q=${block.number}`} className="text-primary-600 hover:underline">
                 {block.transaction_count}
-              </a>
+              </Link>
             </DetailRow>
             <DetailRow label="Gas Used">
               {block.gas_used.toLocaleString()} / {block.gas_limit.toLocaleString()}
@@ -215,53 +134,6 @@ export default function BlockDetailPage() {
           </dl>
         </Card>
       )}
-
-      {block && (
-        <Card title="Block Transactions" className="mt-6">
-          <div id="block-transactions" className="space-y-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              This section shows the exact indexed transaction set for block #{block.number.toLocaleString()}, independent of generic explorer search.
-            </p>
-            {transactionsLoading ? (
-              <p className="text-sm text-gray-600 dark:text-gray-400">Loading block transactions...</p>
-            ) : (
-              <>
-                <Table
-                  columns={transactionColumns}
-                  data={blockTransactions}
-                  emptyMessage={transactionsEmptyMessage}
-                  keyExtractor={(transaction) => transaction.hash}
-                />
-                {block.transaction_count > 0 ? (
-                  <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-600 dark:text-gray-400">
-                    <span>
-                      Showing page {transactionPage} of the indexed transactions for this block.
-                    </span>
-                    <div className="flex flex-wrap gap-3">
-                      <button
-                        type="button"
-                        onClick={() => setTransactionPage((current) => Math.max(1, current - 1))}
-                        disabled={transactionsLoading || transactionPage === 1}
-                        className="rounded bg-gray-200 px-4 py-2 text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-100"
-                      >
-                        Previous tx page
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setTransactionPage((current) => current + 1)}
-                        disabled={transactionsLoading || !hasNextTransactionsPage}
-                        className="rounded bg-gray-200 px-4 py-2 text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-100"
-                      >
-                        Next tx page
-                      </button>
-                    </div>
-                  </div>
-                ) : null}
-              </>
-            )}
-          </div>
-        </Card>
-      )}
     </div>
   )
 }

frontend/src/pages/tokens/[address].tsx

@@ -12,8 +12,10 @@ import { DetailRow } from '@/components/common/DetailRow'
 import EntityBadge from '@/components/common/EntityBadge'
 import GruStandardsCard from '@/components/common/GruStandardsCard'
 import { formatTokenAmount, formatTimestamp } from '@/utils/format'
+import { useDisplayCurrency } from '@/components/common/DisplayCurrencyContext'
 import { getGruStandardsProfileSafe, type GruStandardsProfile } from '@/services/api/gru'
 import { getGruExplorerMetadata } from '@/services/api/gruExplorerData'
+import { formatUsdValue, getSecondaryDisplayValue } from '@/utils/displayCurrency'
 
 function isValidAddress(value: string) {
   return /^0x[a-fA-F0-9]{40}$/.test(value)
@@ -31,15 +33,12 @@ function toNumeric(value: string | number | null | undefined): number | null {
 function formatUsd(value: string | number | null | undefined): string {
   const numeric = toNumeric(value)
   if (numeric == null) return 'Unavailable'
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    maximumFractionDigits: numeric >= 100 ? 0 : 2,
-  }).format(numeric)
+  return formatUsdValue(numeric)
 }
 
 export default function TokenDetailPage() {
   const router = useRouter()
+  const { currency, setCurrency } = useDisplayCurrency()
   const address = typeof router.query.address === 'string' ? router.query.address : ''
   const isValidTokenAddress = address !== '' && isValidAddress(address)
 
@@ -177,6 +176,28 @@ export default function TokenDetailPage() {
     [address, token?.address, token?.symbol],
   )
 
+  const renderAmountWithDisplayCurrency = useCallback(
+    (rawAmount: string | number | null | undefined, decimals: number, symbol?: string | null) => {
+      const primaryAmount = formatTokenAmount(rawAmount, decimals, symbol)
+      const secondaryAmount = getSecondaryDisplayValue({
+        rawAmount,
+        decimals,
+        exchangeRate: token?.exchange_rate,
+        displayCurrency: currency,
+      })
+
+      if (!secondaryAmount) return primaryAmount
+
+      return (
+        <div className="space-y-1">
+          <div>{primaryAmount}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Approx. {secondaryAmount}</div>
+        </div>
+      )
+    },
+    [currency, token?.exchange_rate],
+  )
+
   const holderColumns = [
     {
       header: 'Holder',
@@ -188,7 +209,7 @@ export default function TokenDetailPage() {
     },
     {
       header: 'Balance',
-      accessor: (holder: TokenHolder) => formatTokenAmount(holder.value, token?.decimals || holder.token_decimals, token?.symbol),
+      accessor: (holder: TokenHolder) => renderAmountWithDisplayCurrency(holder.value, token?.decimals || holder.token_decimals, token?.symbol),
     },
   ]
 
@@ -238,7 +259,7 @@ export default function TokenDetailPage() {
     },
     {
       header: 'Amount',
-      accessor: (transfer: AddressTokenTransfer) => formatTokenAmount(transfer.value, transfer.token_decimals, transfer.token_symbol),
+      accessor: (transfer: AddressTokenTransfer) => renderAmountWithDisplayCurrency(transfer.value, transfer.token_decimals, transfer.token_symbol),
     },
     {
       header: 'When',
@@ -316,9 +337,27 @@ export default function TokenDetailPage() {
               </DetailRow>
               <DetailRow label="Type">{token.type || 'Unknown'}</DetailRow>
               <DetailRow label="Decimals">{token.decimals}</DetailRow>
+              <DetailRow label="Display Currency">
+                <div className="space-y-2">
+                  <label className="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+                    <span className="sr-only">Display currency</span>
+                    <select
+                      value={currency}
+                      onChange={(event) => setCurrency(event.target.value === 'usd' ? 'usd' : 'native')}
+                      className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-primary-900"
+                    >
+                      <option value="native">Native token amounts</option>
+                      <option value="usd">USD estimate</option>
+                    </select>
+                  </label>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">
+                    USD estimates use the explorer&apos;s current indicative token price and appear as a secondary line when available.
+                  </div>
+                </div>
+              </DetailRow>
               {token.total_supply && (
                 <DetailRow label="Total Supply">
-                  {formatTokenAmount(token.total_supply, token.decimals, token.symbol)}
+                  {renderAmountWithDisplayCurrency(token.total_supply, token.decimals, token.symbol)}
                 </DetailRow>
               )}
               {token.holders != null && (

frontend/src/services/api/transactions.test.ts

@@ -2,62 +2,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { transactionsApi } from './transactions'
 
-describe('transactionsApi.listByBlockSafe', () => {
-  beforeEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('returns normalized transactions for a specific block', async () => {
-    const fetchMock = vi.fn().mockResolvedValue({
-      ok: true,
-      json: async () => ({
-        items: [
-          {
-            hash: '0xabc',
-            block_number: 123,
-            block_hash: '0xdef',
-            transaction_index: 0,
-            from: { hash: '0x0000000000000000000000000000000000000001' },
-            to: { hash: '0x0000000000000000000000000000000000000002' },
-            value: '0',
-            gas_price: '1',
-            gas: '21000',
-            gas_used: '21000',
-            status: 'ok',
-            timestamp: '2026-04-16T09:40:12.000000Z',
-          },
-        ],
-        next_page_params: { page: 2, page_size: 10 },
-      }),
-    })
-
-    vi.stubGlobal('fetch', fetchMock)
-
-    const result = await transactionsApi.listByBlockSafe(138, 123, 1, 10)
-
-    expect(result.ok).toBe(true)
-    expect(result.items).toHaveLength(1)
-    expect(result.hasNextPage).toBe(true)
-    expect(result.items[0]?.hash).toBe('0xabc')
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-    expect(fetchMock.mock.calls[0]?.[0]).toEqual(
-      expect.stringContaining('/api/v2/blocks/123/transactions?page=1&page_size=10'),
-    )
-  })
-
-  it('returns a non-throwing failure result when the block transaction request fails', async () => {
-    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network down')))
-
-    const result = await transactionsApi.listByBlockSafe(138, 123, 1, 10)
-
-    expect(result).toEqual({
-      ok: false,
-      items: [],
-      hasNextPage: false,
-    })
-  })
-})
-
 describe('transactionsApi.diagnoseMissing', () => {
   beforeEach(() => {
     vi.restoreAllMocks()

frontend/src/services/api/transactions.ts

@@ -76,17 +76,6 @@ export interface TransactionLookupDiagnostic {
   rpc_url?: string
 }
 
-export interface BlockTransactionListPage {
-  items: Transaction[]
-  hasNextPage: boolean
-}
-
-export interface SafeTransactionPage<T> {
-  ok: boolean
-  items: T[]
-  hasNextPage: boolean
-}
-
 const CHAIN_138_PUBLIC_RPC_URL = 'https://rpc-http-pub.d-bis.org'
 
 function resolvePublicRpcUrl(chainId: number): string | null {
@@ -238,37 +227,4 @@ export const transactionsApi = {
       return { ok: false, data: [] }
     }
   },
-  listByBlock: async (chainId: number, blockNumber: number, page = 1, pageSize = 25): Promise<ApiResponse<BlockTransactionListPage>> => {
-    const params = new URLSearchParams({
-      page: page.toString(),
-      page_size: pageSize.toString(),
-    })
-    const raw = await fetchBlockscoutJson<{ items?: unknown[]; next_page_params?: Record<string, unknown> | null }>(
-      `/api/v2/blocks/${blockNumber}/transactions?${params.toString()}`
-    )
-    const data = Array.isArray(raw?.items) ? raw.items.map((item) => normalizeTransaction(item as never, chainId)) : []
-    return {
-      data: {
-        items: data,
-        hasNextPage: raw?.next_page_params != null,
-      },
-    }
-  },
-  listByBlockSafe: async (
-    chainId: number,
-    blockNumber: number,
-    page = 1,
-    pageSize = 25,
-  ): Promise<SafeTransactionPage<Transaction>> => {
-    try {
-      const { data } = await transactionsApi.listByBlock(chainId, blockNumber, page, pageSize)
-      return {
-        ok: true,
-        items: data.items,
-        hasNextPage: data.hasNextPage,
-      }
-    } catch {
-      return { ok: false, items: [], hasNextPage: false }
-    }
-  },
 }

frontend/src/utils/dashboard.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import type { Block } from '@/services/api/blocks'
-import type { ExplorerStats } from '@/services/api/stats'
+import type { ExplorerStats, ExplorerTransactionTrendPoint } from '@/services/api/stats'
 import { loadDashboardData } from './dashboard'
 
 const sampleStats: ExplorerStats = {
@@ -23,6 +23,17 @@ const sampleBlocks: Block[] = [
   },
 ]
 
+const sampleTrend: ExplorerTransactionTrendPoint[] = [
+  {
+    date: '2026-04-03',
+    count: 11,
+  },
+  {
+    date: '2026-04-04',
+    count: 17,
+  },
+]
+
 describe('loadDashboardData', () => {
   it('returns both stats and recent blocks when both loaders succeed', async () => {
     const result = await loadDashboardData({
@@ -33,6 +44,7 @@ describe('loadDashboardData', () => {
     expect(result).toEqual({
       stats: sampleStats,
       recentBlocks: sampleBlocks,
+      recentTransactionTrend: [],
     })
   })
 
@@ -50,6 +62,7 @@ describe('loadDashboardData', () => {
     expect(result).toEqual({
       stats: null,
       recentBlocks: sampleBlocks,
+      recentTransactionTrend: [],
     })
     expect(onError).toHaveBeenCalledTimes(1)
     expect(onError).toHaveBeenCalledWith('stats', expect.any(Error))
@@ -69,8 +82,44 @@ describe('loadDashboardData', () => {
     expect(result).toEqual({
       stats: sampleStats,
       recentBlocks: [],
+      recentTransactionTrend: [],
     })
     expect(onError).toHaveBeenCalledTimes(1)
     expect(onError).toHaveBeenCalledWith('blocks', expect.any(Error))
   })
+
+  it('returns the recent transaction trend when the optional loader succeeds', async () => {
+    const result = await loadDashboardData({
+      loadStats: async () => sampleStats,
+      loadRecentBlocks: async () => sampleBlocks,
+      loadRecentTransactionTrend: async () => sampleTrend,
+    })
+
+    expect(result).toEqual({
+      stats: sampleStats,
+      recentBlocks: sampleBlocks,
+      recentTransactionTrend: sampleTrend,
+    })
+  })
+
+  it('falls back to an empty recent transaction trend when the optional loader fails', async () => {
+    const onError = vi.fn()
+
+    const result = await loadDashboardData({
+      loadStats: async () => sampleStats,
+      loadRecentBlocks: async () => sampleBlocks,
+      loadRecentTransactionTrend: async () => {
+        throw new Error('trend unavailable')
+      },
+      onError,
+    })
+
+    expect(result).toEqual({
+      stats: sampleStats,
+      recentBlocks: sampleBlocks,
+      recentTransactionTrend: [],
+    })
+    expect(onError).toHaveBeenCalledTimes(1)
+    expect(onError).toHaveBeenCalledWith('trend', expect.any(Error))
+  })
 })

frontend/src/utils/displayCurrency.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import { formatUsdValue, getSecondaryDisplayValue } from './displayCurrency'
+
+describe('formatUsdValue', () => {
+  it('keeps cents for smaller values', () => {
+    expect(formatUsdValue(4.5)).toBe('$4.50')
+  })
+
+  it('drops cents for larger rounded values', () => {
+    expect(formatUsdValue(1250)).toBe('$1,250')
+  })
+})
+
+describe('getSecondaryDisplayValue', () => {
+  it('returns null when the user prefers native display', () => {
+    expect(
+      getSecondaryDisplayValue({
+        rawAmount: '4500000',
+        decimals: 6,
+        exchangeRate: 1,
+        displayCurrency: 'native',
+      }),
+    ).toBeNull()
+  })
+
+  it('formats a USD secondary value from token units and exchange rate', () => {
+    expect(
+      getSecondaryDisplayValue({
+        rawAmount: '4500000',
+        decimals: 6,
+        exchangeRate: 1,
+        displayCurrency: 'usd',
+      }),
+    ).toBe('$4.50')
+  })
+
+  it('returns null when no usable exchange rate is available', () => {
+    expect(
+      getSecondaryDisplayValue({
+        rawAmount: '4500000',
+        decimals: 6,
+        exchangeRate: null,
+        displayCurrency: 'usd',
+      }),
+    ).toBeNull()
+  })
+})

frontend/src/utils/displayCurrency.ts

@@ -0,0 +1,35 @@
+import { formatUnits } from './format'
+
+function toFiniteNumber(value: string | number | null | undefined): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return null
+}
+
+export function formatUsdValue(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: Math.abs(value) >= 100 ? 0 : 2,
+  }).format(value)
+}
+
+export function getSecondaryDisplayValue(input: {
+  rawAmount: string | number | null | undefined
+  decimals?: number
+  exchangeRate?: string | number | null
+  displayCurrency: 'native' | 'usd'
+}): string | null {
+  if (input.displayCurrency !== 'usd') return null
+
+  const exchangeRate = toFiniteNumber(input.exchangeRate)
+  if (exchangeRate == null || exchangeRate < 0) return null
+
+  const normalizedAmount = Number(formatUnits(input.rawAmount, input.decimals ?? 18, 8))
+  if (!Number.isFinite(normalizedAmount)) return null
+
+  return formatUsdValue(normalizedAmount * exchangeRate)
+}