Live multichain explorer with real-time feeds and cross-chain actions. Built for ETHOnline 2025.
CrossScan is a next-generation blockchain explorer that solves the multichain visibility problem by providing a unified dashboard for monitoring wallet activity across multiple EVM chains in real-time.
Key Features:
Live Transaction Feed - Real-time wallet activity streaming across Sepolia, Base, Arbitrum, Optimism, and Polygon using Envio HyperSync Embedded Explorer - Decoded transaction details and token metadata without context switching via Blockscout SDK integration Cross-Chain Actions - One-click "Bridge & Execute" functionality powered by Avail Nexus SDK Unified UX - Single interface to monitor, explore, and act on transactions across multiple networks Tech Stack: Next.js 15, TypeScript, wagmi, RainbowKit, Tailwind CSS
Problem Solved: Eliminates the need to switch between multiple chain-specific explorers by providing a single dashboard for multichain transaction monitoring and cross-chain operations.
Phase 1: Foundation (Day 1) T1. Scaffold + CI/CD Create Next.js (TS), Tailwind, shadcn/ui. Add wagmi + RainbowKit. Push to GitHub. Connect Vercel. Auto-deploy main. Output: Live URL renders navbar + Connect. Accept: npm run dev ok. Vercel deploy passes.
T2. Dashboard layout (3 panes) Left: Tx feed. Right: Explorer pane (placeholder). Top: Filters bar + Bridge button. Dark mode. Output: Static skeleton with responsive grid. Accept: Lighthouse basic pass. No console errors.
Phase 2: Envio Integration (Day 1–2) T3. HyperSync first (simplest) lib/envioClient.ts: REST fetcher + polling (3–5s). Query by address: tx hash, from, to, value, token transfers, status, timestamp, chainId. Normalize ERC20 vs native; include failed/pending. Output: TxFeed shows real wallet activity. Accept: Send 1 test tx → appears within expected latency.
T4. Schema + docs docs/DATA_MODEL.md: field map, edge cases (internal txs, pending). Link in README. Output: Clear data model. Accept: Docs build complete.
T5. Real-time UX Animate new rows. Filters: chain, token, type, status. Tx detail modal (basic) if ExplorerPane empty. Output: Smooth feed under bursts. Accept: No dropped rows across refreshes. (Optional later: swap to HyperIndex + hosted deployment if time.)
Phase 3: Blockscout Integration (Day 2) T6. Autoscout instance Launch at deploy.blockscout.com. Configure Sepolia/Amoy RPC. Verify indexing, API, base URL. Output: Working explorer URL. Accept: Paste tx hash → page resolves.
T7. SDK embed Install SDK. ExplorerPane.tsx renders decoded tx, logs, token metadata by hash+chain. Add “Open in Blockscout” deep link per row. Output: Right pane shows details for selected tx. Accept: Clicking any row populates pane; deep link opens Autoscout.
Phase 4: Avail Integration (Day 2–3) T8. Minimal “Bridge & Execute” Install Nexus SDK. lib/nexusClient.ts: client + config. Simple flow: Source chain A → Target chain B. If swap is flaky, bridge native test asset only. Guards: max slippage, gas cap. Output: BridgeButton submits intent, returns source tx hash. Accept: Hash verifiable; UI toast shows status.
T9. Optional Receiver contract Receiver.sol: receiveAndLog(address,uint256) emits Received(...). Deploy with Hardhat 3 on target testnet. Use this as execute target for proof. Output: Deterministic target event. Accept: Event visible in feed + on Autoscout.
T10. AVAIL_FEEDBACK.md Note docs used, what worked, unclear parts, suggestions. Include 3–5 screenshots (intent config, success, explorer pages). Output: docs/AVAIL_FEEDBACK.md. Accept: Linked in README.
Phase 5: Polish & Documentation (Day 3) T11. UX hardening Loading states, empty states, error banners with retry. Copy buttons for address/hash, time-ago badges. Debounce feed updates; cache last 50 per chain. Output: Production-like feel. Accept: Simulated network blip recovers cleanly.
T12. README (partner-grade) What it does, live links, quick start. Envio: exact query/endpoint used. Blockscout: SDK APIs used; Autoscout URL. Avail: exact method and params used. Env vars, run steps, screenshots, known limits. Output: Final README.md. Accept: New dev can run in ≤10 steps.
T13. Submission

