A Swiss-style Ethereum dashboard for recent block activity, gas usage, wallet state, and RPC resilience.

以太坊链上数据钱包连接Gas 使用率D3 可视化RPC fallback

Colonnade uses Wagmi and Viem to connect browser wallets and query live Ethereum data, then uses D3 scales and path generation to render recent block transaction activity and gas utilization as readable SVG charts.

Recent blocks12

NetworksMainnet / Sepolia

ChartsD3 SVG

RPCFallback

Repository

/home/lry/Projects/TS-Repo/colonnade

Technical Stack

ViteReactTypeScriptWagmiViemD3.jsReact QueryEthereum RPCSVG

01 / Wallet layer

Wallet connection and account state are handled through Web3 React hooks.

WagmiProvider initializes the network configuration, while useConnect, useDisconnect, useAccount, useBlockNumber, useGasPrice, useBalance, and usePublicClient coordinate wallet connection, latest block subscription, gas price, balance reads, and custom RPC queries.

02 / Data pipeline

Viem reads the recent chain window directly from RPC and formats Ethereum units.

The app calculates the latest twelve block numbers from the watched block height, calls publicClient.getBlock for each block, extracts transaction counts, gas used, and gas limits, then formats ETH and Gwei values through Viem utilities.

03 / Visualization system

D3 calculates the graphics, React keeps ownership of the DOM.

D3 scaleBand, scaleLinear, line, curveMonotoneX, and format convert block data into bar positions, gas utilization points, smooth line paths, and compact block labels. The interface keeps a black-white-gray Swiss grid with red status emphasis.

Colonnade DApp visual 1 — 01 / Colonnade DApp

Colonnade DApp visual 2 — 02 / Colonnade DApp

What I Built

Connects browser-injected wallets such as MetaMask through Wagmi.

Reads current Ethereum block number, gas price, and connected wallet ETH balance.

Queries recent block transaction counts, gas used, and gas limits through Viem public client calls.

Uses multiple public mainnet RPC endpoints through fallback transport to reduce rate-limit stalls.

Builds chart geometry with D3 while rendering the final SVG through React.