explorer: fix home recent transactions table

Author: andrewnguyen22

cmd/rpc/web/explorer/src/components/Home/OverviewCards.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { motion } from 'framer-motion'
 import { Link, useNavigate } from 'react-router-dom'
 import { formatDistanceToNow, isValid, parseISO } from 'date-fns'
-import { useAllBlocksCache, useTransactionsWithRealPagination } from '../../hooks/useApi'
+import { useAllBlocksCache, useRecentTransactionsPreview } from '../../hooks/useApi'
 import { extractAmountMicro, toCNPY } from '../../lib/utils'
 import TransactionTypeBadge from '../transaction/TransactionTypeBadge'
 
@@ -47,8 +47,17 @@ const formatAmount = (amount: number) =>
 const normalizeList = (payload: any) => {
     if (!payload) return [] as any[]
     if (Array.isArray(payload)) return payload
-    const found = payload.transactions || payload.blocks || payload.results || payload.list || payload.data
-    return Array.isArray(found) ? found : []
+    for (const candidate of [
+        payload.results,
+        payload.transactions,
+        payload.txs,
+        payload.blocks,
+        payload.list,
+        payload.data,
+    ]) {
+        if (Array.isArray(candidate)) return candidate
+    }
+    return []
 }
 
 const LiveIndicator = () => (
@@ -192,8 +201,8 @@ const WalletPreviewTable: React.FC<WalletPreviewTableProps> = ({
 }
 
 const OverviewCards: React.FC = () => {
-    const { data: txsPage, isLoading: isTransactionsLoading } = useTransactionsWithRealPagination(1, 5)
     const { data: blocksPage, isLoading: isBlocksLoading } = useAllBlocksCache()
+    const { data: txsPage, isLoading: isTransactionsLoading } = useRecentTransactionsPreview(blocksPage, 5)
 
     const txs = normalizeList(txsPage)
     const blockList = normalizeList(blocksPage)
@@ -297,7 +306,7 @@ const OverviewCards: React.FC = () => {
                 viewAllPath="/transactions"
                 columns={['Type', 'Hash', 'From', 'Amount', 'Time']}
                 rows={transactionRows}
-                loading={isTransactionsLoading}
+                loading={isBlocksLoading || isTransactionsLoading}
                 emptyLabel="No transactions found"
                 minWidth="min-w-[760px]"
             />

cmd/rpc/web/explorer/src/hooks/useApi.ts

@@ -5,6 +5,7 @@ import {
     Transactions,
     AllTransactions,
     getTransactionsWithRealPagination,
+    getRecentTransactionsPreview,
     Accounts,
     Validators,
     ValidatorsWithFilters,
@@ -155,6 +156,21 @@ export const useTransactionsWithRealPagination = (page: number, perPage: number
     });
 };
 
+export const useRecentTransactionsPreview = (blocks: any[] | undefined, limit: number = 5) => {
+    const latestBlockHeight = Number(blocks?.[0]?.blockHeader?.height ?? blocks?.[0]?.height ?? 0);
+
+    return useQuery({
+        queryKey: ['recentTransactionsPreview', latestBlockHeight, limit],
+        queryFn: () => getRecentTransactionsPreview(limit, blocks),
+        staleTime: 5000,
+        refetchInterval: 10000,
+        refetchOnWindowFocus: true,
+        refetchOnMount: 'always',
+        enabled: Array.isArray(blocks) && blocks.length > 0,
+        placeholderData: (previousData) => previousData,
+    });
+};
+
 // Hooks for Accounts
 export const useAccounts = (page: number, perPage: number = 10) => {
     return useQuery({

cmd/rpc/web/explorer/src/lib/api.ts

@@ -214,6 +214,23 @@ function getBlockTransactionCount(block: any): number {
     );
 }
 
+function getTransactionTimestampMs(tx: any): number {
+    const value = tx?.blockTime ?? tx?.time ?? tx?.timestamp;
+    if (typeof value === 'number') {
+        if (value > 1e15) return Math.floor(value / 1_000_000);
+        if (value > 1e12) return Math.floor(value);
+        return Math.floor(value * 1_000);
+    }
+    if (typeof value === 'string') {
+        if (/^\d+$/.test(value)) {
+            return getTransactionTimestampMs({ time: Number(value) });
+        }
+        const parsed = Date.parse(value);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    }
+    return 0;
+}
+
 function attachBlockMetadataToTransactions(transactions: any[], block: any): any[] {
     const blockHeight = getBlockHeightValue(block);
     const blockHash = getBlockHashValue(block);
@@ -256,6 +273,54 @@ async function fetchTransactionsForBlock(block: any): Promise<any[]> {
     }
 }
 
+export async function getRecentTransactionsPreview(limit: number = 5, cachedBlocks?: any[]): Promise<any[]> {
+    try {
+        const fallbackBlocksResponse = Array.isArray(cachedBlocks) && cachedBlocks.length > 0
+            ? null
+            : await Blocks(1, 25);
+        const blocks = (
+            Array.isArray(cachedBlocks) && cachedBlocks.length > 0
+                ? cachedBlocks
+                : (
+                    fallbackBlocksResponse?.results ||
+                    fallbackBlocksResponse?.blocks ||
+                    fallbackBlocksResponse?.list ||
+                    []
+                )
+        ).filter((block: any) => getBlockTransactionCount(block) > 0);
+
+        if (!Array.isArray(blocks) || blocks.length === 0) return [];
+
+        const recentTransactions: any[] = [];
+
+        for (const block of blocks) {
+            const blockTransactions = await fetchTransactionsForBlock(block);
+            if (blockTransactions.length > 0) {
+                recentTransactions.push(...blockTransactions);
+            }
+            if (recentTransactions.length >= limit) break;
+        }
+
+        recentTransactions.sort((a, b) => {
+            const heightDelta = Number(b?.blockHeight ?? b?.height ?? 0) - Number(a?.blockHeight ?? a?.height ?? 0);
+            if (heightDelta !== 0) return heightDelta;
+
+            const indexDelta = Number(b?.index ?? b?.txIndex ?? b?.transactionIndex ?? -1) - Number(a?.index ?? a?.txIndex ?? a?.transactionIndex ?? -1);
+            if (indexDelta !== 0) return indexDelta;
+
+            const timeDelta = getTransactionTimestampMs(b) - getTransactionTimestampMs(a);
+            if (timeDelta !== 0) return timeDelta;
+
+            return String(b?.hash ?? b?.txHash ?? '').localeCompare(String(a?.hash ?? a?.txHash ?? ''));
+        });
+
+        return recentTransactions.slice(0, limit);
+    } catch (error) {
+        console.error('Error fetching recent transactions preview:', error);
+        return [];
+    }
+}
+
 // Optimized function to get transactions with real pagination
 export async function getTransactionsWithRealPagination(page: number, perPage: number = 10, filters?: {
     type?: string;