d-bis/explorer-monorepo
5
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/fix/address-detail-loading-state'

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>

# Conflicts:
#	frontend/src/pages/addresses/[address].tsx
This commit is contained in:
defiQUG
2026-06-19 19:32:23 -07:00
parent 0abccf8e38 74b175c2ce
commit 4990fc1d34
1 changed files with 110 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
frontend/src/pages/addresses/[address].tsx
View File

@@ -89,18 +89,21 @@ export default function AddressDetailPage() {
const [nativeAssetPriceUsd, setNativeAssetPriceUsd] = useState<number | undefined>()
const [curatedTokens, setCuratedTokens] = useState<TokenListToken[]>([])
const [transferHistoricalUsd, setTransferHistoricalUsd] = useState<Record<string, number>>({})
const [loading, setLoading] = useState(true)
const [addressInfoLoading, setAddressInfoLoading] = useState(true)
const [activityLoading, setActivityLoading] = useState(true)
const [balancePage, setBalancePage] = useState(1)
const [transferPage, setTransferPage] = useState(1)
const [transactionPage, setTransactionPage] = useState(1)
const pageSize = 8
const loadAddressInfo = useCallback(async () => {
setAddressInfoLoading(true)
try {
const { ok, data } = await addressesApi.getSafe(chainId, address)
if (!ok) {
setAddressInfo(null)
setContractProfile(null)
setGruProfile(null)
return
}
setAddressInfo(data ?? null)
@@ -124,10 +127,13 @@ export default function AddressDetailPage() {
setAddressInfo(null)
setContractProfile(null)
setGruProfile(null)
} finally {
setAddressInfoLoading(false)
}
}, [chainId, address])
const loadTransactions = useCallback(async () => {
setActivityLoading(true)
try {
const [transactionsResult, balancesResult, transfersResult] = await Promise.all([
addressesApi.getTransactionsSafe(chainId, address, 1, 20),
@@ -144,7 +150,7 @@ export default function AddressDetailPage() {
setTokenBalances([])
setTokenTransfers([])
} finally {
setLoading(false)
setActivityLoading(false)
}
}, [chainId, address])
@@ -163,21 +169,31 @@ export default function AddressDetailPage() {
useEffect(() => {
if (!router.isReady || !address) {
setLoading(router.isReady ? false : true)
setAddressInfoLoading(!router.isReady)
setActivityLoading(!router.isReady)
if (router.isReady && !address) {
setAddressInfo(null)
setTransactions([])
setTokenBalances([])
setTokenTransfers([])
}
return
}
if (!isValidAddressParam) {
setLoading(false)
setAddressInfoLoading(false)
setActivityLoading(false)
setAddressInfo(null)
setTransactions([])
setTokenBalances([])
setTokenTransfers([])
return
}
loadAddressInfo()
loadTransactions()
setAddressInfo(null)
setTransactions([])
setTokenBalances([])
setTokenTransfers([])
void loadAddressInfo()
void loadTransactions()
}, [address, isValidAddressParam, loadAddressInfo, loadTransactions, router.isReady])
useEffect(() => {
@@ -677,6 +693,8 @@ export default function AddressDetailPage() {
setTransferPage(1)
setTransactionPage(1)
}, [address, addressInfo?.is_contract])
const showPrimaryLoadingState = !router.isReady || (addressInfoLoading && !addressInfo)
const resolvedAddressInfo = addressInfo as AddressInfo
return (
<div className="container mx-auto px-4 py-6 sm:py-8">
@@ -700,7 +718,7 @@ export default function AddressDetailPage() {
Search this address
</Link>
)}
{watchlistAddress && router.isReady && !loading && (
{watchlistAddress && router.isReady && !addressInfoLoading && (
<button
type="button"
onClick={handleWatchlistToggle}
@@ -711,7 +729,7 @@ export default function AddressDetailPage() {
)}
</div>
{!router.isReady || loading ? (
{showPrimaryLoadingState ? (
<Card className="mb-6">
<p className="text-sm text-gray-600 dark:text-gray-400">Loading address...</p>
</Card>
@@ -727,7 +745,7 @@ export default function AddressDetailPage() {
</Link>
</div>
</Card>
) : !addressInfo ? (
) : !addressInfoLoading && !addressInfo ? (
<Card className="mb-6">
<p className="text-sm text-gray-600 dark:text-gray-400">Address not found.</p>
<div className="mt-4 flex flex-wrap gap-3 text-sm">
@@ -744,11 +762,11 @@ export default function AddressDetailPage() {
<Card title="Address Information" className="mb-6">
<dl className="space-y-4">
<DetailRow label="Address">
<Address address={addressInfo.address} label={addressInfo.label} showENS />
<Address address={resolvedAddressInfo.address} label={resolvedAddressInfo.label} showENS />
</DetailRow>
{addressInfo.balance && (
{resolvedAddressInfo.balance && (
<DetailRow label="Coin Balance">
{formatWeiAsEth(addressInfo.balance)}
{formatWeiAsEth(resolvedAddressInfo.balance)}
{nativeBalanceUsd != null ? ` (${formatUsd(nativeBalanceUsd)})` : ''}
</DetailRow>
)}
@@ -760,59 +778,60 @@ export default function AddressDetailPage() {
</DetailRow>
<DetailRow label="Verification">
<div className="flex flex-wrap gap-2">
<EntityBadge label={addressInfo.is_contract ? (addressInfo.is_verified ? 'verified' : 'contract') : 'eoa'} />
<EntityBadge label={resolvedAddressInfo.is_contract ? (resolvedAddressInfo.is_verified ? 'verified' : 'contract') : 'eoa'} />
{contractProfile?.source_verified ? <EntityBadge label="source available" tone="success" /> : null}
{contractProfile?.abi_available ? <EntityBadge label="abi available" tone="info" /> : null}
{addressInfo.token_contract ? <EntityBadge label={addressInfo.token_contract.type || 'token'} tone="info" /> : null}
{resolvedAddressInfo.token_contract ? <EntityBadge label={resolvedAddressInfo.token_contract.type || 'token'} tone="info" /> : null}
</div>
</DetailRow>
{addressInfo.token_contract && (
{resolvedAddressInfo.token_contract && (
<DetailRow label="Token Contract">
<div className="space-y-2">
<div>
{addressInfo.token_contract.symbol || addressInfo.token_contract.name || 'Token contract'} · {addressInfo.token_contract.type || 'Token'}
{resolvedAddressInfo.token_contract.symbol || resolvedAddressInfo.token_contract.name || 'Token contract'} · {resolvedAddressInfo.token_contract.type || 'Token'}
</div>
<Link href={`/tokens/${addressInfo.token_contract.address}`} className="text-primary-600 hover:underline">
<Link href={`/tokens/${resolvedAddressInfo.token_contract.address}`} className="text-primary-600 hover:underline">
Open token detail →
</Link>
</div>
</DetailRow>
)}
{addressInfo.tags.length > 0 && (
{resolvedAddressInfo.tags.length > 0 && (
<DetailRow label="Tags" valueClassName="flex flex-wrap gap-2">
{addressInfo.tags.map((tag, i) => (
{resolvedAddressInfo.tags.map((tag, i) => (
<EntityBadge key={i} label={tag} className="px-2 py-1 text-[11px]" />
))}
</DetailRow>
)}
<DetailRow label="Transactions">{addressInfo.transaction_count}</DetailRow>
<DetailRow label="Tokens">{addressInfo.token_count}</DetailRow>
<DetailRow label="Type">{addressInfo.is_contract ? 'Contract' : 'EOA'}</DetailRow>
<DetailRow label="Transactions">{resolvedAddressInfo.transaction_count}</DetailRow>
<DetailRow label="Tokens">{resolvedAddressInfo.token_count}</DetailRow>
<DetailRow label="Type">{resolvedAddressInfo.is_contract ? 'Contract' : 'EOA'}</DetailRow>
<DetailRow label="Recent Activity">
{incomingTransactions} incoming / {outgoingTransactions} outgoing txs
{activityLoading ? 'Loading recent activity...' : `${incomingTransactions} incoming / ${outgoingTransactions} outgoing txs`}
</DetailRow>
{addressInfo.internal_transaction_count != null && (
<DetailRow label="Internal Calls">{addressInfo.internal_transaction_count}</DetailRow>
{resolvedAddressInfo.internal_transaction_count != null && (
<DetailRow label="Internal Calls">{resolvedAddressInfo.internal_transaction_count}</DetailRow>
)}
{addressInfo.logs_count != null && (
<DetailRow label="Indexed Logs">{addressInfo.logs_count}</DetailRow>
{resolvedAddressInfo.logs_count != null && (
<DetailRow label="Indexed Logs">{resolvedAddressInfo.logs_count}</DetailRow>
)}
<DetailRow label="Token Flow">
{incomingTokenTransfers} incoming / {outgoingTokenTransfers} outgoing token transfers
{addressInfo.token_transfer_count != null ? ` · ${addressInfo.token_transfer_count} total indexed` : ''}
{activityLoading
? 'Loading token transfer activity...'
: `${incomingTokenTransfers} incoming / ${outgoingTokenTransfers} outgoing token transfers${resolvedAddressInfo.token_transfer_count != null ? ` · ${resolvedAddressInfo.token_transfer_count} total indexed` : ''}`}
</DetailRow>
{addressInfo.creation_transaction_hash && (
{resolvedAddressInfo.creation_transaction_hash && (
<DetailRow label="Created In">
<Link href={`/transactions/${addressInfo.creation_transaction_hash}`} className="text-primary-600 hover:underline">
<Address address={addressInfo.creation_transaction_hash} truncate showCopy={false} />
<Link href={`/transactions/${resolvedAddressInfo.creation_transaction_hash}`} className="text-primary-600 hover:underline">
<Address address={resolvedAddressInfo.creation_transaction_hash} truncate showCopy={false} />
</Link>
</DetailRow>
)}
</dl>
</Card>
{addressInfo.is_contract ? (
<ContractVerificationCallout address={addressInfo.address} verified={Boolean(addressInfo.is_verified)} />
{resolvedAddressInfo.is_contract ? (
<ContractVerificationCallout address={resolvedAddressInfo.address} verified={Boolean(resolvedAddressInfo.is_verified)} />
) : null}
<SectionTabs
@@ -826,9 +845,9 @@ export default function AddressDetailPage() {
<div
{...sectionTabPanelProps(ADDRESS_DETAIL_TABS_ID, 'contract', activeTab)}
className={addressInfo.is_contract ? undefined : 'hidden'}
className={resolvedAddressInfo.is_contract ? undefined : 'hidden'}
>
{addressInfo.is_contract ? (
{resolvedAddressInfo.is_contract ? (
<Card title="Contract Profile" className="mb-6">
<dl className="space-y-4">
<DetailRow label="Interaction Surface">
@@ -1044,7 +1063,7 @@ export default function AddressDetailPage() {
) : null}
{contractProfile ? (
<ContractCodeWorkspace address={addressInfo.address} profile={contractProfile} />
<ContractCodeWorkspace address={resolvedAddressInfo.address} profile={contractProfile} />
) : null}
{gruProfile ? <div className="mb-6"><GruStandardsCard profile={gruProfile} /></div> : null}
@@ -1060,18 +1079,24 @@ export default function AddressDetailPage() {
</Link>
</div>
) : null}
<Table
columns={tokenBalanceColumns}
data={pagedTokenBalances}
emptyMessage="No token balances were indexed for this address."
keyExtractor={(balance) => balance.token_address || `${balance.token_symbol}-${balance.value}`}
/>
<PaginationControls
page={balancePage}
pageCount={balancePageCount}
onPageChange={setBalancePage}
label="Token balances"
/>
{activityLoading ? (
<p className="text-sm text-gray-600 dark:text-gray-400">Loading token balances...</p>
) : (
<>
<Table
columns={tokenBalanceColumns}
data={pagedTokenBalances}
emptyMessage="No token balances were indexed for this address."
keyExtractor={(balance) => balance.token_address || `${balance.token_symbol}-${balance.value}`}
/>
<PaginationControls
page={balancePage}
pageCount={balancePageCount}
onPageChange={setBalancePage}
label="Token balances"
/>
</>
)}
</Card>
</div>
@@ -1088,35 +1113,47 @@ export default function AddressDetailPage() {
</Link>
</div>
) : null}
<Table
columns={tokenTransferColumns}
data={pagedTokenTransfers}
emptyMessage="No token transfers were found for this address."
keyExtractor={(transfer) => `${transfer.transaction_hash}-${transfer.token_address}-${transfer.value}`}
/>
<PaginationControls
page={transferPage}
pageCount={transferPageCount}
onPageChange={setTransferPage}
label="Token transfers"
/>
{activityLoading ? (
<p className="text-sm text-gray-600 dark:text-gray-400">Loading token transfers...</p>
) : (
<>
<Table
columns={tokenTransferColumns}
data={pagedTokenTransfers}
emptyMessage="No token transfers were found for this address."
keyExtractor={(transfer) => `${transfer.transaction_hash}-${transfer.token_address}-${transfer.value}`}
/>
<PaginationControls
page={transferPage}
pageCount={transferPageCount}
onPageChange={setTransferPage}
label="Token transfers"
/>
</>
)}
</Card>
</div>
<div {...sectionTabPanelProps(ADDRESS_DETAIL_TABS_ID, 'transactions', activeTab)}>
<Card title="Transactions">
<Table
columns={transactionColumns}
data={pagedTransactions}
emptyMessage="No recent transactions were found for this address."
keyExtractor={(tx) => tx.hash}
/>
<PaginationControls
page={transactionPage}
pageCount={transactionPageCount}
onPageChange={setTransactionPage}
label="Transactions"
/>
{activityLoading ? (
<p className="text-sm text-gray-600 dark:text-gray-400">Loading recent transactions...</p>
) : (
<>
<Table
columns={transactionColumns}
data={pagedTransactions}
emptyMessage="No recent transactions were found for this address."
keyExtractor={(tx) => tx.hash}
/>
<PaginationControls
page={transactionPage}
pageCount={transactionPageCount}
onPageChange={setTransactionPage}
label="Transactions"
/>
</>
)}
</Card>
</div>
</>