[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { BlockchainExplorer } from "@/components/blockchain-explorer" export default function Home() { return } [V0_FILE]typescriptreact:file="components/block-explorer.tsx" isMerged="true" "use client" import { useState } from "react" import { Header } from "@/components/header" import { BlockList } from "@/components/block-list" import { TransactionDetails } from "@/components/transaction-details" import { AddressInfo } from "@/components/address-info" import { SearchBar } from "@/components/search-bar" import { ThemeProvider } from "@/components/theme-provider" type View = "blocks" | "transaction" | "address" export function BlockExplorer() { const [view, setView] = useState("blocks") const [selectedId, setSelectedId] = useState(null) const [searchQuery, setSearchQuery] = useState("") const handleSearch = (query: string) => { setSearchQuery(query) // Simple logic to determine what type of data was searched if (query.startsWith("0x") && query.length === 66) { setView("transaction") setSelectedId(query) } else if (query.startsWith("0x") && query.length === 42) { setView("address") setSelectedId(query) } else if (!isNaN(Number(query))) { setView("blocks") // If it's a number, we assume it's a block number } } const handleBlockClick = (blockNumber: number) => { // When a block is clicked, we could show its details setView("blocks") setSelectedId(blockNumber.toString()) } const handleTransactionClick = (txHash: string) => { setView("transaction") setSelectedId(txHash) } const handleAddressClick = (address: string) => { setView("address") setSelectedId(address) } return (

{view === "blocks" && ( )} {view === "transaction" && selectedId && ( )} {view === "address" && selectedId && ( )}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" type ThemeProviderProps = { children: React.ReactNode } type ThemeContextType = { theme: Theme toggleTheme: () => void } const ThemeContext = createContext(undefined) export function ThemeProvider({ children }: ThemeProviderProps) { const [theme, setTheme] = useState("dark") useEffect(() => { // Check if theme is stored in localStorage const storedTheme = localStorage.getItem("theme") as Theme | null if (storedTheme) { setTheme(storedTheme) } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { setTheme("dark") } }, []) useEffect(() => { // Apply theme class to document const root = window.document.documentElement if (theme === "dark") { root.classList.add("dark") } else { root.classList.remove("dark") } // Save theme to localStorage localStorage.setItem("theme", theme) }, [theme]) const toggleTheme = () => { setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")) } return {children} } export function useTheme() { const context = useContext(ThemeContext) if (context === undefined) { throw new Error("useTheme must be used within a ThemeProvider") } return context } [V0_FILE]typescriptreact:file="components/header.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { useTheme } from "@/components/theme-provider" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Moon, Sun, Search, Menu, X } from "lucide-react" interface HeaderProps { onSearch: (query: string) => void } export function Header({ onSearch }: HeaderProps) { const { theme, toggleTheme } = useTheme() const [searchQuery, setSearchQuery] = useState("") const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim()) { onSearch(searchQuery.trim()) } } return (

BlockVision

{/* Mobile menu */} {isMobileMenuOpen && (

setIsMobileMenuOpen(false)} > Home setIsMobileMenuOpen(false)} > Blocks setIsMobileMenuOpen(false)} > Transactions setIsMobileMenuOpen(false)} > Tokens setIsMobileMenuOpen(false)} > Analytics

)}

) } [V0_FILE]typescriptreact:file="components/search-bar.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Search } from "lucide-react" interface SearchBarProps { onSearch: (query: string) => void } export function SearchBar({ onSearch }: SearchBarProps) { const [query, setQuery] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (query.trim()) { onSearch(query.trim()) } } return ( ) } [V0_FILE]typescriptreact:file="components/block-list.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Skeleton } from "@/components/ui/skeleton" import { formatDistanceToNow } from "@/lib/utils" // Mock data for demonstration import { getBlocks } from "@/lib/mock-data" interface BlockListProps { onBlockClick: (blockNumber: number) => void onTransactionClick: (txHash: string) => void onAddressClick: (address: string) => void searchQuery?: string } export function BlockList({ onBlockClick, onTransactionClick, onAddressClick, searchQuery }: BlockListProps) { const [blocks, setBlocks] = useState([]) const [loading, setLoading] = useState(true) const [page, setPage] = useState(1) const pageSize = 10 useEffect(() => { const fetchBlocks = async () => { setLoading(true) try { // In a real app, this would be an API call with pagination const data = await getBlocks(page, pageSize, searchQuery) setBlocks(data) } catch (error) { console.error("Failed to fetch blocks:", error) } finally { setLoading(false) } } fetchBlocks() }, [page, searchQuery]) const handlePrevPage = () => { if (page > 1) { setPage(page - 1) } } const handleNextPage = () => { setPage(page + 1) } const truncateHash = (hash: string) => { return `${hash.substring(0, 6)}...${hash.substring(hash.length - 4)}` } if (loading) { return ( Latest Blocks

{Array.from({ length: 5 }).map((_, index) => (

))}

) } return ( Latest Blocks

Block Age Txn Miner Gas Used {blocks.map((block) => ( {formatDistanceToNow(block.timestamp)} {block.transactions.length} {block.gasUsed.toLocaleString()} ))}

Page {page}

) } [V0_FILE]typescriptreact:file="components/transaction-details.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { Badge } from "@/components/ui/badge" import { formatDistanceToNow } from "@/lib/utils" // Mock data for demonstration import { getTransaction } from "@/lib/mock-data" interface TransactionDetailsProps { txHash: string onAddressClick: (address: string) => void } export function TransactionDetails({ txHash, onAddressClick }: TransactionDetailsProps) { const [transaction, setTransaction] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { const fetchTransaction = async () => { setLoading(true) try { // In a real app, this would be an API call const data = await getTransaction(txHash) setTransaction(data) } catch (error) { console.error("Failed to fetch transaction:", error) } finally { setLoading(false) } } fetchTransaction() }, [txHash]) if (loading) { return ( Transaction Details

{Array.from({ length: 6 }).map((_, index) => (

))}

) } if (!transaction) { return ( Transaction Details

Transaction not found

) } return ( Transaction Details

Transaction Hash

{txHash}

Status

{transaction.status ? "Success" : "Failed"}

Block

{transaction.blockNumber}

From

To

Value

{transaction.value} ETH

Gas Price

{transaction.gasPrice} Gwei

Gas Used

{transaction.gasUsed.toLocaleString()}

Timestamp

{new Date(transaction.timestamp).toLocaleString()}({formatDistanceToNow(transaction.timestamp)} ago)

) } [V0_FILE]typescriptreact:file="components/address-info.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { formatDistanceToNow } from "@/lib/utils" // Mock data for demonstration import { getAddressInfo, getAddressTransactions } from "@/lib/mock-data" interface AddressInfoProps { address: string onTransactionClick: (txHash: string) => void } export function AddressInfo({ address, onTransactionClick }: AddressInfoProps) { const [addressInfo, setAddressInfo] = useState(null) const [transactions, setTransactions] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchAddressInfo = async () => { setLoading(true) try { // In a real app, these would be API calls const info = await getAddressInfo(address) const txs = await getAddressTransactions(address) setAddressInfo(info) setTransactions(txs) } catch (error) { console.error("Failed to fetch address info:", error) } finally { setLoading(false) } } fetchAddressInfo() }, [address]) const truncateHash = (hash: string) => { return `${hash.substring(0, 10)}...${hash.substring(hash.length - 8)}` } if (loading) { return ( Address Information

{Array.from({ length: 4 }).map((_, index) => (

))}

) } if (!addressInfo) { return ( Address Information

Address not found

) } return (

Address Information

Address

{address}

Balance

{addressInfo.balance} ETH

Transactions

{addressInfo.transactionCount}

Last Activity

{formatDistanceToNow(addressInfo.lastActivity)} ago

Transactions

Tx Hash Block Age From/To Value {transactions.map((tx) => ( {tx.blockNumber} {formatDistanceToNow(tx.timestamp)} {tx.from === address ? (

OUT {truncateHash(tx.to)}

) : (

IN {truncateHash(tx.from)}

)} {tx.value} ETH ))}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function formatDistanceToNow(timestamp: number): string { const now = Date.now() const diff = now - timestamp // Convert milliseconds to seconds const seconds = Math.floor(diff / 1000) if (seconds < 60) { return `${seconds} sec${seconds !== 1 ? "s" : ""}` } // Convert to minutes const minutes = Math.floor(seconds / 60) if (minutes < 60) { return `${minutes} min${minutes !== 1 ? "s" : ""}` } // Convert to hours const hours = Math.floor(minutes / 60) if (hours < 24) { return `${hours} hr${hours !== 1 ? "s" : ""}` } // Convert to days const days = Math.floor(hours / 24) if (days < 30) { return `${days} day${days !== 1 ? "s" : ""}` } // Convert to months const months = Math.floor(days / 30) if (months < 12) { return `${months} month${months !== 1 ? "s" : ""}` } // Convert to years const years = Math.floor(months / 12) return `${years} year${years !== 1 ? "s" : ""}` } [V0_FILE]typescriptreact:file="lib/mock-data.ts" isMerged="true" // This file contains mock data for the blockchain explorer // In a real application, this would be replaced with API calls to a blockchain node // Generate a random hash function generateHash(length = 64): string { const characters = "0123456789abcdef" let result = "0x" for (let i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)) } return result } // Generate a random address function generateAddress(): string { return generateHash(40) } // Generate a random block function generateBlock(blockNumber: number) { const transactions = Array.from({ length: Math.floor(Math.random() * 50) + 1 }, () => ({ hash: generateHash(), from: generateAddress(), to: generateAddress(), value: (Math.random() * 10).toFixed(4), gasPrice: (Math.random() * 100).toFixed(2), gasUsed: Math.floor(Math.random() * 1000000), })) return { number: blockNumber, hash: generateHash(), timestamp: Date.now() - blockNumber * 15000, // Approximately 15 seconds per block transactions, miner: generateAddress(), gasUsed: transactions.reduce((sum, tx) => sum + tx.gasUsed, 0), gasLimit: 15000000, size: Math.floor(Math.random() * 100000) + 10000, } } // Generate a random transaction function generateTransaction(txHash: string) { const blockNumber = Math.floor(Math.random() * 10000000) + 1 return { hash: txHash, blockNumber, from: generateAddress(), to: generateAddress(), value: (Math.random() * 10).toFixed(4), gasPrice: (Math.random() * 100).toFixed(2), gasUsed: Math.floor(Math.random() * 1000000), timestamp: Date.now() - Math.floor(Math.random() * 10000000), status: Math.random() > 0.1, // 90% success rate } } // Generate address info function generateAddressInfo(address: string) { return { address, balance: (Math.random() * 100).toFixed(4), transactionCount: Math.floor(Math.random() * 1000), lastActivity: Date.now() - Math.floor(Math.random() * 10000000), } } // Generate transactions for an address function generateAddressTransactions(address: string, count = 10) { return Array.from({ length: count }, (_, i) => { const isOutgoing = Math.random() > 0.5 return { hash: generateHash(), blockNumber: Math.floor(Math.random() * 10000000) + 1, timestamp: Date.now() - Math.floor(Math.random() * 10000000), from: isOutgoing ? address : generateAddress(), to: isOutgoing ? generateAddress() : address, value: (Math.random() * 5).toFixed(4), } }).sort((a, b) => b.timestamp - a.timestamp) // Sort by timestamp descending } // Mock API functions export async function getBlocks(page = 1, pageSize = 10, searchQuery?: string) { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 500)) const startBlock = 10000000 - (page - 1) * pageSize // If there's a search query and it's a number, filter to that specific block if (searchQuery && !isNaN(Number(searchQuery))) { const blockNumber = Number.parseInt(searchQuery) return [generateBlock(blockNumber)] } return Array.from({ length: pageSize }, (_, i) => generateBlock(startBlock - i)) } export async function getTransaction(txHash: string) { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 700)) return generateTransaction(txHash) } export async function getAddressInfo(address: string) { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 600)) return generateAddressInfo(address) } export async function getAddressTransactions(address: string) { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 800)) return generateAddressTransactions(address) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, ping: { "0%": { transform: "scale(1)", opacity: "1" }, "75%, 100%": { transform: "scale(2)", opacity: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", ping: "ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer components { .shadow-glow { box-shadow: 0 0 20px 2px rgba(var(--color-primary), 0.3); } .shadow-glow-sm { box-shadow: 0 0 10px 1px rgba(var(--color-primary), 0.2); } .typing-text { @apply text-foreground; } .typing-cursor { display: inline-block; width: 2px; background-color: currentColor; animation: blink 1s step-end infinite; } .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: hsl(var(--secondary)); border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.5); border-radius: 10px; } .blockchain-nodes { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: radial-gradient(circle at 25% 25%, hsl(var(--primary) / 0.15) 1px, transparent 0), radial-gradient(circle at 75% 75%, hsl(var(--primary) / 0.15) 1px, transparent 0); background-size: 40px 40px; animation: moveNodes 60s linear infinite; } @keyframes moveNodes { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } } /* Set RGB variables for glow effects */ :root { --color-primary: 59, 130, 246; } .dark { --color-primary: 59, 130, 246; } .light { --color-primary: 37, 99, 235; } /* Add these utility classes at the end of the file */ .no-horizontal-scroll { max-width: 100vw; overflow-x: hidden; } .container { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } } .text-adaptive { @apply text-foreground dark:text-foreground; } [V0_FILE]typescriptreact:file="components/blockchain-explorer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Header } from "@/components/header" import { HeroSection } from "@/components/hero-section" import { BlockchainStats } from "@/components/blockchain-stats" import { LatestActivity } from "@/components/latest-activity" import { Footer } from "@/components/footer" import { ThemeProvider } from "@/components/theme-provider" import { BlockchainProvider } from "@/components/blockchain-provider" export function BlockchainExplorer() { const [searchQuery, setSearchQuery] = useState("") const handleSearch = (query: string) => { setSearchQuery(query) // In a real app, this would trigger a search and navigate to results console.log("Searching for:", query) } return (

) } [V0_FILE]typescriptreact:file="components/blockchain-provider.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import { getLatestBlocks, getLatestTransactions, getBlockchainStats } from "@/lib/blockchain-data" type BlockchainContextType = { blocks: any[] transactions: any[] stats: any isLoading: boolean } const BlockchainContext = createContext(undefined) export function BlockchainProvider({ children }: { children: React.ReactNode }) { const [blocks, setBlocks] = useState([]) const [transactions, setTransactions] = useState([]) const [stats, setStats] = useState({}) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const fetchData = async () => { setIsLoading(true) try { const [blocksData, transactionsData, statsData] = await Promise.all([ getLatestBlocks(), getLatestTransactions(), getBlockchainStats(), ]) setBlocks(blocksData) setTransactions(transactionsData) setStats(statsData) } catch (error) { console.error("Failed to fetch blockchain data:", error) } finally { setIsLoading(false) } } fetchData() // Set up polling for real-time updates const interval = setInterval(fetchData, 15000) // Update every 15 seconds return () => clearInterval(interval) }, []) return ( {children} ) } export function useBlockchain() { const context = useContext(BlockchainContext) if (context === undefined) { throw new Error("useBlockchain must be used within a BlockchainProvider") } return context } [V0_FILE]typescriptreact:file="components/live-ticker.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { useBlockchain } from "@/components/blockchain-provider" import { ArrowRight } from "lucide-react" export function LiveTicker() { const { blocks, transactions } = useBlockchain() const tickerRef = useRef(null) useEffect(() => { const ticker = tickerRef.current if (!ticker) return const animation = ticker.animate([{ transform: "translateX(0)" }, { transform: "translateX(-50%)" }], { duration: 30000, iterations: Number.POSITIVE_INFINITY, }) return () => { animation.cancel() } }, []) // Only run the effect when the component mounts and unmounts // Combine and format ticker items const tickerItems = [ ...blocks.slice(0, 5).map((block) => ({ type: "block", id: block.number, text: `Block #${block.number} | ${block.transactions.length} txs`, })), ...transactions.slice(0, 5).map((tx) => ({ type: "tx", id: tx.hash, text: `Tx: ${tx.hash.substring(0, 8)}...${tx.hash.substring(tx.hash.length - 8)} | ${tx.value} ETH`, })), ] // Duplicate items to create seamless loop const allItems = [...tickerItems, ...tickerItems] return (

{allItems.map((item, index) => (

{item.text}

))}

) } [V0_FILE]typescriptreact:file="components/blockchain-stats.tsx" isMerged="true" "use client" import { useBlockchain } from "@/components/blockchain-provider" import { Card, CardContent } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { Blocks, ArrowUpRight, Clock, Wallet, BarChart3 } from "lucide-react" export function BlockchainStats() { const { stats, isLoading } = useBlockchain() const statCards = [ { title: "Current Block Height", value: stats.blockHeight?.toLocaleString() || "0", icon: , color: "from-blue-500 to-indigo-600", }, { title: "Total Transactions", value: stats.totalTransactions?.toLocaleString() || "0", icon: , color: "from-green-500 to-emerald-600", }, { title: "Average Block Time", value: stats.avgBlockTime ? `${stats.avgBlockTime.toFixed(2)}s` : "0s", icon: , color: "from-purple-500 to-violet-600", }, { title: "Gas Price", value: stats.gasPrice ? `${stats.gasPrice} Gwei` : "0 Gwei", icon: , color: "from-red-500 to-pink-600", }, { title: "Active Wallets", value: stats.activeWallets?.toLocaleString() || "0", icon: , color: "from-amber-500 to-orange-600", }, ] return (

Real-Time Blockchain Stats

{statCards.map((stat, index) => (

{stat.icon}

{stat.title}

{isLoading ? :

{stat.value}

} ))}

) } [V0_FILE]typescriptreact:file="components/latest-activity.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useBlockchain } from "@/components/blockchain-provider" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { Badge } from "@/components/ui/badge" import { formatDistanceToNow } from "@/lib/utils" import { ArrowUpRight, CheckCircle2, Clock, XCircle, ChevronRight, ExternalLink, Blocks } from "lucide-react" export function LatestActivity() { const { blocks, transactions, isLoading } = useBlockchain() const [expandedBlock, setExpandedBlock] = useState(null) const [expandedTx, setExpandedTx] = useState(null) const toggleBlockExpand = (blockNumber: number) => { setExpandedBlock(expandedBlock === blockNumber ? null : blockNumber) } const toggleTxExpand = (txHash: string) => { setExpandedTx(expandedTx === txHash ? null : txHash) } const truncateHash = (hash: string) => { return `${hash.substring(0, 6)}...${hash.substring(hash.length - 4)}` } return (

Latest Blockchain Activity

Latest Blocks Latest Transactions

{isLoading ? Array.from({ length: 5 }).map((_, index) => (

)) : blocks.slice(0, 5).map((block) => ( {expandedBlock === block.number && (

Miner

{truncateHash(block.miner)}

Gas Used

{block.gasUsed.toLocaleString()} ({Math.round((block.gasUsed / block.gasLimit) * 100)} %)

Transactions

{block.transactions.slice(0, 5).map((tx: any) => (

{truncateHash(tx.hash)} {tx.value} ETH

))} {block.transactions.length > 5 && ( )}

)} ))}

{isLoading ? Array.from({ length: 5 }).map((_, index) => (

)) : transactions.slice(0, 5).map((tx) => ( {expandedTx === tx.hash && (

From

{truncateHash(tx.from)}

{truncateHash(tx.to)}

Value

{tx.value} ETH

Gas Price

{tx.gasPrice} Gwei

)} ))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="lib/blockchain-data.ts" isMerged="true" // This file contains mock data for the blockchain explorer // In a real application, this would be replaced with API calls to blockchain nodes // Generate a random hash function generateHash(length = 64): string { const characters = "0123456789abcdef" let result = "0x" for (let i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)) } return result } // Generate a random address function generateAddress(): string { return generateHash(40) } // Generate a random block function generateBlock(blockNumber: number, chain = "ethereum") { const transactionCount = Math.floor(Math.random() * 50) + 1 const transactions = Array.from({ length: transactionCount }, () => ({ hash: generateHash(), from: generateAddress(), to: generateAddress(), value: (Math.random() * 10).toFixed(4), gasPrice: (Math.random() * 100).toFixed(2), gasUsed: Math.floor(Math.random() * 1000000), timestamp: Date.now() - Math.floor(Math.random() * 3600000), status: Math.random() > 0.1, // 90% success rate })) return { number: blockNumber, hash: generateHash(), timestamp: Date.now() - blockNumber * 15000, // Approximately 15 seconds per block transactions, miner: generateAddress(), gasUsed: transactions.reduce((sum: number, tx: any) => sum + tx.gasUsed, 0), gasLimit: 15000000, size: Math.floor(Math.random() * 100000) + 10000, chain, } } // Generate a random transaction function generateTransaction(chain = "ethereum") { const blockNumber = Math.floor(Math.random() * 10000000) + 1 const hash = generateHash() const timestamp = Date.now() - Math.floor(Math.random() * 3600000) const status = Math.random() > 0.2 ? true : Math.random() > 0.5 ? false : null // null means pending return { hash, blockNumber: status === null ? null : blockNumber, from: generateAddress(), to: generateAddress(), value: (Math.random() * 10).toFixed(4), gasPrice: (Math.random() * 100).toFixed(2), gasUsed: Math.floor(Math.random() * 1000000), timestamp, status, chain, } } // Generate blockchain stats function generateStats(chain = "ethereum") { const baseStats = { blockHeight: 18500000 + Math.floor(Math.random() * 1000), totalTransactions: 2000000000 + Math.floor(Math.random() * 10000000), avgBlockTime: 12 + Math.random() * 3, gasPrice: Math.floor(Math.random() * 50) + 10, activeWallets: 1000000 + Math.floor(Math.random() * 100000), } // Customize stats based on chain switch (chain) { case "bitcoin": return { ...baseStats, blockHeight: 800000 + Math.floor(Math.random() * 1000), avgBlockTime: 600 + Math.random() * 60, gasPrice: 0, // Bitcoin doesn't use gas } case "polygon": return { ...baseStats, blockHeight: 45000000 + Math.floor(Math.random() * 10000), avgBlockTime: 2 + Math.random(), } case "binance": return { ...baseStats, blockHeight: 30000000 + Math.floor(Math.random() * 5000), avgBlockTime: 3 + Math.random(), } case "solana": return { ...baseStats, blockHeight: 200000000 + Math.floor(Math.random() * 1000000), avgBlockTime: 0.4 + Math.random() * 0.1, } default: return baseStats } } // Mock API functions export async function getLatestBlocks(chain = "ethereum", count = 10) { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 500)) const startBlock = chain === "ethereum" ? 18500000 : chain === "bitcoin" ? 800000 : chain === "polygon" ? 45000000 : chain === "binance" ? 30000000 : 200000000 return Array.from({ length: count }, (_, i) => generateBlock(startBlock - i, chain)) } export async function getLatestTransactions(chain = "ethereum", count = 10) { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 700)) return Array.from({ length: count }, () => generateTransaction(chain)) } export async function getBlockchainStats(chain = "ethereum") { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 600)) return generateStats(chain) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { useBlockchain } from "@/components/blockchain-provider" import { Search } from "lucide-react" import { LiveTicker } from "@/components/live-ticker" interface HeroSectionProps { onSearch: (query: string) => void } const texts = [ "Explore Blockchain Transactions in Real-Time", "Track Blocks, Addresses & Smart Contracts", "The Most Advanced Blockchain Explorer", ] export function HeroSection({ onSearch }: HeroSectionProps) { const [searchQuery, setSearchQuery] = useState("") const [displayText, setDisplayText] = useState("") const [textIndex, setTextIndex] = useState(0) const [charIndex, setCharIndex] = useState(0) const [isTyping, setIsTyping] = useState(true) const { stats } = useBlockchain() useEffect(() => { const typingInterval = setInterval(() => { if (isTyping) { if (charIndex < texts[textIndex].length) { setDisplayText((prev) => prev + texts[textIndex][charIndex]) setCharIndex((prev) => prev + 1) } else { setIsTyping(false) setTimeout(() => { setIsTyping(true) setCharIndex(0) setDisplayText("") setTextIndex((prev) => (prev + 1) % texts.length) }, 2000) // Wait for 2 seconds before starting the next text } } }, 50) // Adjust typing speed here return () => clearInterval(typingInterval) }, [charIndex, isTyping, textIndex]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim()) { onSearch(searchQuery.trim()) } } return (

{/* Background animation */}

Blockchain Explorer

{displayText} |

) }

Transaction Hash

Status

Block

From

To

Value

Gas Price

Gas Used

Timestamp

Address

Balance

Transactions

Last Activity

Real-Time Blockchain Stats

{stat.title}

Latest Blockchain Activity

Block #{block.number}

{truncateHash(tx.hash)}

Blockchain Explorer

{displayText} |

About

About