ConfluxScan Explorer UI – Build a React Dashboard for Conflux Testnet Accounts

#1

:compass: ConfluxScan Explorer UI – Build a React Dashboard for Conflux Testnet Accounts

Are you building on the Conflux blockchain and looking for a clean, responsive way to interact with testnet data? In this blog, I’ll walk you through a modern React-based Conflux Explorer UI I built — a simple yet powerful dashboard that connects to the ConfluxScan API and visualizes account data like normal transactions, internal calls, token transfers, and balances.

This tool is perfect for developers who want to test, debug, or showcase Conflux Testnet activity using a user-friendly interface.

:bulb: What is the Conflux Explorer UI?

The ConfluxScan Explorer UI is a frontend React application that lets users input any Conflux Testnet address and fetch all relevant data tied to it. Once logged in, users can explore:

  • Normal Transactions (user-to-user or contract interactions)
  • Internal Transactions (contract-to-contract or system-level calls)
  • Token Transfers (ERC-20 transfers)
  • Account Balance (converted from Drip to readable CFX)

All this is displayed in a clean and mobile-friendly interface, with direct links to the official Conflux Testnet Explorer for more detailed views.

:sparkles: Key Features

:closed_lock_with_key: Login with Address

Users start by entering any valid Conflux Testnet wallet address. This kicks off API calls to load all the account data.

:receipt: Sidebar with Account Overview

The left panel includes:

  • Account identicon and address (with a copy button)
  • Real-time CFX balance
  • Quick links:
    :arrow_right_hook: Faucet (Get free Testnet CFX)
    :mag: Explorer (Official Conflux Testnet Explorer)
  • :door: Logout button to clear session

:card_index_dividers: Tabbed Main Area

Users can switch between three types of on-chain activities:

  1. Normal Transactions
  2. Internal Transactions
  3. Token Transfers

Each tab displays the data in a styled and responsive table, and every entry includes a “View” button linking to its page on the official explorer.

:iphone: Responsive Design

Built with Tailwind CSS, the app works seamlessly across desktop and mobile devices.

:globe_with_meridians: APIs Used (Powered by ConfluxScan)

The project uses public API endpoints provided by ConfluxScan. Here’s a breakdown:

1. Normal Transactions

Endpoint
https://evmapi-testnet.confluxscan.net/api?module=account&action=txlist&address={address}&page=1&offset=10&sort=asc

Returns:
List of external transactions including:

  • hash
  • from
  • to
  • value
  • timeStamp

2. Internal Transactions

Endpoint
https://evmapi-testnet.confluxscan.net/api?module=account&action=txlistinternal&address={address}&page=1&offset=10&sort=asc

Returns:
Contract interactions and internal value transfers:

  • hash
  • from
  • to
  • value
  • timeStamp

3. Token Transfers

Endpoint
https://evmapi-testnet.confluxscan.net/api?module=account&action=tokentx&address={address}&page=1&offset=10&sort=asc

Returns:
Token-related events including:

  • tokenSymbol
  • from
  • to
  • value
  • hash

4. Account Balance

Endpoint
https://evmapi-testnet.confluxscan.net/api?module=account&action=balance&address={address}

Returns:
Balance in Drip (smallest unit of CFX).
Conversion: 1 CFX = 10¹⁸ Drip

5. Faucet

URL: https://efaucet.confluxnetwork.org/
Used to claim free CFX for Testnet transactions.

6. Explorer

URL: https://evmtestnet.confluxscan.net/
Official Conflux Testnet Explorer to view all transaction details.

:framed_picture: UI Overview

➤ Login Screen

User enters their Conflux Testnet wallet address to access the dashboard.

➤ Sidebar

Displays:

  • Identicon
  • Wallet Address with copy button
  • Real-time CFX Balance
  • Faucet link
  • Explorer link
  • Logout option

➤ Tab View

Main area is divided into three tabs:

  • Normal Transactions
  • Internal Transactions
  • Token Transfers

Each tab displays a neatly formatted table with pagination-ready structure. Each transaction includes sender, receiver, value, and a timestamp — along with a “View” button to inspect the transaction on the official explorer.

:hammer_and_wrench: Tech Stack

  • Framework: React
  • Styling: Tailwind CSS
  • API Source: ConfluxScan API
  • UI Components: React Icons, responsive tables, and conditional render logic for loading/errors

:movie_camera: Watch the Tutorial

Prefer a visual walkthrough?
Check out the full video tutorial here:
:point_right: Watch on YouTube

:brain: Conclusion

This Conflux Explorer UI is a great example of how to build blockchain-integrated frontends using public APIs. It can be a valuable tool for developers to test and debug contracts or just monitor account activity with ease. You can also extend this further with:

  • NFT transaction tracking
  • Smart contract call history
  • Graphical analytics

Let me know what you think, and feel free to fork the code for your own projects.
Happy BUIDLing! :rocket: