Compare commits
6 Commits
feat/explo
...
feat/block
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
39d2f2482b | ||
|
|
06070e479e | ||
|
|
c01e7c2c4a | ||
|
|
945864af7a | ||
|
|
2e59b9d19c | ||
|
|
b6e74eb5bd |
@@ -1,49 +0,0 @@
|
||||
'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
|
||||
}
|
||||
@@ -2,28 +2,25 @@ 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>
|
||||
<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 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>
|
||||
</DisplayCurrencyProvider>
|
||||
<ExplorerAgentTool />
|
||||
<Footer />
|
||||
</div>
|
||||
</UiModeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
77
frontend/src/hooks/useBlockTransactions.ts
Normal file
77
frontend/src/hooks/useBlockTransactions.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
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,
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,15 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { blocksApi, Block } from '@/services/api/blocks'
|
||||
import { Card, Address } from '@/libs/frontend-ui-primitives'
|
||||
import { Card, Address, Table } from '@/libs/frontend-ui-primitives'
|
||||
import Link from 'next/link'
|
||||
import { DetailRow } from '@/components/common/DetailRow'
|
||||
import PageIntro from '@/components/common/PageIntro'
|
||||
import { formatTimestamp } from '@/utils/format'
|
||||
import { formatTimestamp, formatWeiAsEth } from '@/utils/format'
|
||||
import { type Transaction } from '@/services/api/transactions'
|
||||
import { useBlockTransactions } from '@/hooks/useBlockTransactions'
|
||||
|
||||
export default function BlockDetailPage() {
|
||||
const router = useRouter()
|
||||
@@ -19,17 +21,18 @@ export default function BlockDetailPage() {
|
||||
const [block, setBlock] = useState<Block | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
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])
|
||||
const {
|
||||
transactions: blockTransactions,
|
||||
loading: transactionsLoading,
|
||||
error: transactionsError,
|
||||
hasNextPage: hasNextTransactionsPage,
|
||||
page: transactionPage,
|
||||
setPage: setTransactionPage,
|
||||
} = useBlockTransactions({
|
||||
blockNumber,
|
||||
chainId,
|
||||
enabled: router.isReady && isValidBlock,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!router.isReady) {
|
||||
@@ -40,12 +43,85 @@ export default function BlockDetailPage() {
|
||||
setBlock(null)
|
||||
return
|
||||
}
|
||||
loadBlock()
|
||||
}, [isValidBlock, loadBlock, router.isReady])
|
||||
|
||||
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])
|
||||
|
||||
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">
|
||||
@@ -74,6 +150,11 @@ 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 ? (
|
||||
@@ -119,9 +200,9 @@ export default function BlockDetailPage() {
|
||||
</Link>
|
||||
</DetailRow>
|
||||
<DetailRow label="Transactions">
|
||||
<Link href={`/search?q=${block.number}`} className="text-primary-600 hover:underline">
|
||||
<a href="#block-transactions" className="text-primary-600 hover:underline">
|
||||
{block.transaction_count}
|
||||
</Link>
|
||||
</a>
|
||||
</DetailRow>
|
||||
<DetailRow label="Gas Used">
|
||||
{block.gas_used.toLocaleString()} / {block.gas_limit.toLocaleString()}
|
||||
@@ -134,6 +215,53 @@ 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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -12,10 +12,8 @@ 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)
|
||||
@@ -33,12 +31,15 @@ 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 formatUsdValue(numeric)
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
maximumFractionDigits: numeric >= 100 ? 0 : 2,
|
||||
}).format(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)
|
||||
|
||||
@@ -176,28 +177,6 @@ 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',
|
||||
@@ -209,7 +188,7 @@ export default function TokenDetailPage() {
|
||||
},
|
||||
{
|
||||
header: 'Balance',
|
||||
accessor: (holder: TokenHolder) => renderAmountWithDisplayCurrency(holder.value, token?.decimals || holder.token_decimals, token?.symbol),
|
||||
accessor: (holder: TokenHolder) => formatTokenAmount(holder.value, token?.decimals || holder.token_decimals, token?.symbol),
|
||||
},
|
||||
]
|
||||
|
||||
@@ -259,7 +238,7 @@ export default function TokenDetailPage() {
|
||||
},
|
||||
{
|
||||
header: 'Amount',
|
||||
accessor: (transfer: AddressTokenTransfer) => renderAmountWithDisplayCurrency(transfer.value, transfer.token_decimals, transfer.token_symbol),
|
||||
accessor: (transfer: AddressTokenTransfer) => formatTokenAmount(transfer.value, transfer.token_decimals, transfer.token_symbol),
|
||||
},
|
||||
{
|
||||
header: 'When',
|
||||
@@ -337,27 +316,9 @@ 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's current indicative token price and appear as a secondary line when available.
|
||||
</div>
|
||||
</div>
|
||||
</DetailRow>
|
||||
{token.total_supply && (
|
||||
<DetailRow label="Total Supply">
|
||||
{renderAmountWithDisplayCurrency(token.total_supply, token.decimals, token.symbol)}
|
||||
{formatTokenAmount(token.total_supply, token.decimals, token.symbol)}
|
||||
</DetailRow>
|
||||
)}
|
||||
{token.holders != null && (
|
||||
|
||||
@@ -2,6 +2,62 @@ 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()
|
||||
|
||||
@@ -76,6 +76,17 @@ 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 {
|
||||
@@ -227,4 +238,37 @@ 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 }
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import type { Block } from '@/services/api/blocks'
|
||||
import type { ExplorerStats, ExplorerTransactionTrendPoint } from '@/services/api/stats'
|
||||
import type { ExplorerStats } from '@/services/api/stats'
|
||||
import { loadDashboardData } from './dashboard'
|
||||
|
||||
const sampleStats: ExplorerStats = {
|
||||
@@ -23,17 +23,6 @@ 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({
|
||||
@@ -44,7 +33,6 @@ describe('loadDashboardData', () => {
|
||||
expect(result).toEqual({
|
||||
stats: sampleStats,
|
||||
recentBlocks: sampleBlocks,
|
||||
recentTransactionTrend: [],
|
||||
})
|
||||
})
|
||||
|
||||
@@ -62,7 +50,6 @@ describe('loadDashboardData', () => {
|
||||
expect(result).toEqual({
|
||||
stats: null,
|
||||
recentBlocks: sampleBlocks,
|
||||
recentTransactionTrend: [],
|
||||
})
|
||||
expect(onError).toHaveBeenCalledTimes(1)
|
||||
expect(onError).toHaveBeenCalledWith('stats', expect.any(Error))
|
||||
@@ -82,44 +69,8 @@ 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))
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
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()
|
||||
})
|
||||
})
|
||||
@@ -1,35 +0,0 @@
|
||||
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)
|
||||
}
|
||||
Reference in New Issue
Block a user