+
+ );
+ }
return (
-
- {/* Placeholder with shimmer effect */}
- {!isLoaded && (
-
+
+
-
)}
-
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !blockData) {
+ return (
+ <>
+ Loading Block Transactions...
+
+
+
+
+
+
+
+ );
+ }
+
+ const totalTransactions = blockData.total;
+ const totalPages = Math.ceil(totalTransactions / ITEMS_PER_PAGE);
+ const currentPage = Math.min(Math.max(1, page), totalPages);
+ const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+ const endIndex = Math.min(startIndex + ITEMS_PER_PAGE, totalTransactions);
+ const paginatedTransactions = blockData.transactions.slice(startIndex, endIndex);
+
+ return (
+ <>
+
+
+ {error || "Block data not found"}
+ +
+
+
+
+
+
+ Block #{blockData.blockNumber}
+
+
+
+ Block #{blockData.blockNumber}
+
+ {totalTransactions} Transactions
+
+
+ + {new Date(blockData.timestamp * 1000).toLocaleString()} +
+
+
+
+
+
+ {totalPages > 1 && (
+
+
+ )}
+
+ ) : (
+ + Showing {startIndex + 1}-{endIndex} of {totalTransactions} +
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
+ No transactions found in this block
+
+ )}
+
+
+);
+
+export default function BlockDetails() {
+ const searchParams = useSearchParams();
+ const blockNumber = searchParams.get("number");
+ const router = useRouter();
+ const [block, setBlock] = useState
+
+ {children}
+ {title}
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !block) {
+ return (
+ Loading Block Details...
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+ {error || "Block not found"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + #{block.number} +
++ {format(new Date(block.timestamp), "PPpp")} +
+
+
+ + {block.hash} +
+ +
+ {/* Circular Progress Bar */}
+
+
+
+
+ {/* Gas Usage Details */}
+
+
+ + {Number(block.gasUsed).toLocaleString()} / {Number(block.gasLimit).toLocaleString()} + + ({((Number(block.gasUsed) / Number(block.gasLimit)) * 100).toFixed(2)}%) + +
++{((Number(block.gasUsed) / Number(block.gasLimit)) * 100 - 100).toFixed(2)}% Gas Target
++ {(Number(block.baseFeePerGas) / 1e9).toFixed(2)} Gwei +
++ {Number(block.size).toLocaleString()} bytes +
+
+
+ Transactions
+
+
+
+ Transactions
+
+ {block.transactions.length}
+
+
+
+
+
+ {block.transactions.slice(0, 9).map((hash) => (
+
+ ))}
+
+ {block.transactions.length > 9 && (
+
+
+
+ )}
+
+
+ {title}
+{value}
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !token) {
+ return (
+ Loading Token Details...
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+ {error || "Token not found"}
+
+
+
+ 
{
+ e.currentTarget.src = '/placeholder-token.png';
+ }}
+ />
+ {token.priceUSD && (
+
+ ${Number(token.priceUSD).toFixed(2)}
+
+ )}
+
+
+
+ {token.name}
+
+ {token.symbol}
+
+
+
+ + {token.address} +
+
+
+
+
+
+
+ {formatNumber(Number(token.totalSupply) / Math.pow(10, token.decimals))}
+ {token.symbol}
+
+ }
+ delay={0.2}
+ />
+
+
+ {token.recentTransfers && token.recentTransfers.length > 0 && (
+ Recent Transfers
+
+
+
+
+ Loading Transaction Details...
+
+
+ Transaction Error
+{error}
+
+
+
+
+
+
+ {/* Transaction Basic Info */}
+
+
+
+ {/* Gas Information */}
+
+
+
+ {/* Transaction Data Section */}
+
+
+
+ {/* From/To Section */}
+
+
+ Transaction Hash
+{transaction.hash}
+
+
+
+
+
+
+ From
+
+
+
+ {/* Value Section */}
+
+
+
+ To
+
+
+ Value
++ {transaction.valueInEth} ETH + + (${(Number(transaction.valueInEth) * 2000).toFixed(4)}) + +
+
+
+
+ {/* Block Information */}
+ Gas Information
+
+
+ + Gas Price: + {formatGwei(transaction.gasPrice)} +
++ Gas Limit: + {transaction.gasLimit} +
++ Gas Used: + + {transaction.gasUsed} ({(Number(transaction.gasUsed) / Number(transaction.gasLimit) * 100).toFixed(2)}%) + +
++ Effective Gas Price: + {formatGwei(transaction.effectiveGasPrice)} +
++ Transaction Fee: + {transaction.txFee+"ETH"} +
+
+
+
+ {/* Transaction Details */}
+ Block Information
+
+
+ + Block Number: + #{transaction.blockNumber} +
++ Block Hash: + {transaction.blockHash} +
++ Confirmations: + {transaction.confirmations} +
++ Timestamp: + + {format(new Date(transaction.timestamp * 1000), "PPpp")} + +
+
+
+ Transaction Details
+
+
+ + Nonce: + {transaction.nonce} +
++ Type: + {transaction.type} +
+Input Data
+
+
+
+ {transaction.data}
+
+
@@ -239,19 +368,48 @@ export default function SearchBar() {
- ) : (
+ ) : searchType === "offchain" ?(
+
+ ) : searchType === "Token" ? (
+
+
+ ) : searchType === "Block" ? (
+
+
+ ) : (
+
+
+ )
+ }