Interactive Conflux Transaction Visualizer

#1

Building an Interactive Conflux Transaction Visualizer: A Journey Through Real Blockchain Education

How I created an educational tool that makes blockchain transactions understandable through real Conflux eSpace integration

:dart: The Problem: Making Blockchain Accessible

Blockchain technology is often perceived as complex and intimidating. When I set out to build an educational tool for Conflux eSpace transactions, I wanted to bridge the gap between technical complexity and user understanding. The challenge was clear: How do you make real blockchain interactions both educational and engaging?

The answer? Combine real blockchain integration with intuitive visual metaphors and dual-mode interfaces.

:rocket: The Solution: Real Blockchain + Visual Learning

Core Concept

Instead of building another simulation, I created a tool that:

  • Uses real Conflux eSpace testnet for authentic blockchain interactions
  • Provides dual learning modes (Simple vs Technical)
  • Visualizes transaction flow through relatable analogies
  • Integrates live data from ConfluxScan explorer

:building_construction: Technical Architecture

Tech Stack

  • Frontend: Next.js 15 with TypeScript
  • Blockchain: Web3.js for Conflux eSpace integration
  • UI: Radix UI + Tailwind CSS + Framer Motion
  • Network: Conflux eSpace Testnet (evmtestnet.confluxrpc.com)

Project Structure

📂 /app/
├── layout.tsx              # Metadata & page configuration
├── page.tsx               # Main application state management
└── globals.css            # Global styling

📂 /components/
├── welcome-modal.tsx      # Educational introduction
├── wallet-generator.tsx   # Real wallet creation & faucet
├── transaction-sender.tsx # Real transaction execution
├── transaction-visualizer.tsx # 6-stage visual flow
├── data-panel.tsx         # Live blockchain data display
└── theme-toggle.tsx       # UI controls

:key: Key Features & Implementation

1. Real Wallet Generation with Web3.js

The wallet generator creates authentic Ethereum-compatible wallets for Conflux eSpace:

// Generate a proper wallet pair using Web3.js
function generateWalletPair(): { address: string; privateKey: string } {
  try {
    console.log('🚀 Generating new wallet pair...')
    
    // Initialize Web3 to use its account generation
    const web3 = new Web3()
    
    // Create a new account (different each time)
    const account = web3.eth.accounts.create()
    
    return {
      address: account.address,
      privateKey: account.privateKey
    }
  } catch (error) {
    console.error('Error generating wallet pair:', error)
    // Fallback to known working pair for demo
    return {
      address: "0x1234567890123456789012345678901234567890",
      privateKey: "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef"
    }
  }
}

Why this matters: Real wallet generation ensures users understand actual blockchain mechanics, not just simulations.

2. Live Faucet Integration

The faucet provides real test tokens from a funded Conflux eSpace address:

// Real faucet implementation with live balance checking
async function sendFromFaucet(toAddress: string): Promise<string> {
  try {
    // Initialize Web3 with Conflux eSpace testnet
    const web3 = new Web3('https://evmtestnet.confluxrpc.com')
    
    // Create faucet account from private key
    const faucetAccount = web3.eth.accounts.privateKeyToAccount(FAUCET_PRIVATE_KEY)
    
    // Add the faucet account to Web3 wallet
    web3.eth.accounts.wallet.add(faucetAccount)
    web3.eth.defaultAccount = faucetAccount.address
    
    // Convert CFX to Wei
    const amountInWei = web3.utils.toWei(FAUCET_AMOUNT, 'ether')
    
    // Create and send transaction
    const transactionObject = {
      from: FAUCET_ADDRESS,
      to: toAddress,
      value: amountInWei,
      gas: 21000,
      gasPrice: await web3.eth.getGasPrice(),
    }
    
    const txHash = await web3.eth.sendTransaction(transactionObject)
    return txHash.transactionHash
    
  } catch (error) {
    console.error('❌ Error sending real faucet tokens:', error)
    throw error
  }
}

Key insight: Real faucet integration means users get actual test tokens they can use for genuine transactions.

3. Real Transaction Execution

The transaction sender executes actual blockchain transactions:

async function sendRealTransaction(
  fromAddress: string,
  privateKey: string,
  toAddress: string,
  amount: string,
  onStageUpdate: (stage: TransactionStage, data: TransactionData) => void
): Promise<string> {
  try {
    // Initialize Web3 with Conflux eSpace testnet
    const web3 = new Web3('https://evmtestnet.confluxrpc.com')
    
    // Create account from private key
    const account = web3.eth.accounts.privateKeyToAccount(privateKey)
    
    // Verify account matches the from address
    if (account.address.toLowerCase() !== fromAddress.toLowerCase()) {
      throw new Error(`Account mismatch: expected ${fromAddress}, got ${account.address}`)
    }
    
    // Add account to Web3 wallet
    web3.eth.accounts.wallet.add(account)
    web3.eth.defaultAccount = account.address
    
    // Convert CFX to Wei
    const amountInWei = web3.utils.toWei(amount, 'ether')
    
    // Create transaction object
    const transactionObject = {
      from: fromAddress,
      to: toAddress,
      value: amountInWei,
      gas: 21000,
      gasPrice: await web3.eth.getGasPrice(),
    }
    
    // Stage 1: Created
    onStageUpdate("created", {
      from: fromAddress,
      to: toAddress,
      value: amount,
    })
    
    // Stage 2: Signed
    onStageUpdate("signed", {
      from: fromAddress,
      to: toAddress,
      value: amount,
      nonce: await web3.eth.getTransactionCount(fromAddress),
      gas: "21000",
      gasPrice: web3.utils.fromWei(await web3.eth.getGasPrice(), 'ether'),
    })
    
    // Send the transaction
    const txHash = await web3.eth.sendTransaction(transactionObject)
    
    // Stage 3: Broadcasted
    onStageUpdate("broadcasted", {
      hash: txHash.transactionHash,
      from: fromAddress,
      to: toAddress,
      value: amount,
      nonce: await web3.eth.getTransactionCount(fromAddress),
      gas: "21000",
      gasPrice: web3.utils.fromWei(await web3.eth.getGasPrice(), 'ether'),
    })
    
    // Wait for confirmation and update remaining stages...
    
    return txHash.transactionHash
    
  } catch (error) {
    console.error('❌ Error sending real transaction:', error)
    throw error
  }
}

Critical feature: Real transaction execution with live stage updates provides authentic blockchain experience.

4. Visual Transaction Journey

The transaction visualizer breaks down complex blockchain processes into understandable steps:

const stages = [
  {
    id: "created",
    label: "Created",
    simpleLabel: "📝 Writing Your Letter",
    description: "Transaction object created with recipient and amount",
    simpleDescription: "You've written down who to send money to and how much",
    analogy: "Like writing a letter with the recipient's address and a check inside",
    icon: Mail,
    emoji: "📝",
    color: "text-blue-600",
    bgColor: "bg-blue-50 border-blue-200",
  },
  {
    id: "signed",
    label: "Signed",
    simpleLabel: "🔒 Sealing the Envelope",
    description: "Transaction signed with your private key",
    simpleDescription: "You've sealed it with your unique signature so no one can tamper with it",
    analogy: "Like signing a check and sealing the envelope - only you can do this",
    icon: Lock,
    emoji: "🔒",
    color: "text-purple-600",
    bgColor: "bg-purple-50 border-purple-200",
  },
  // ... additional stages
]

Educational value: The letter-sending analogy makes blockchain concepts accessible to beginners.

5. Dual-Mode Interface

The application adapts to different user expertise levels:

// Main app state management
export default function ConfluxVisualizer() {
  const [beginnerMode, setBeginnerMode] = useState(true)
  const [walletAddress, setWalletAddress] = useState<string>("")
  const [stage, setStage] = useState<TransactionStage>("idle")
  const [txData, setTxData] = useState<TransactionData>({})

  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="border-b border-border/50 bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-xl font-bold text-balance">
              {beginnerMode ? "Learn How Digital Money Works" : "Conflux eSpace Transaction Visualizer"}
            </h1>
            <p className="text-xs text-muted-foreground">
              {beginnerMode ? "Interactive Blockchain Learning" : "Educational Conflux eSpace Explorer"}
            </p>
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setBeginnerMode(!beginnerMode)}
            className="flex items-center gap-2"
          >
            {beginnerMode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
            <span className="hidden sm:inline">{beginnerMode ? "Simple Mode" : "Technical Mode"}</span>
          </Button>
        </div>
      </header>
      {/* ... rest of component */}
    </div>
  )
}

User experience: Seamless switching between educational and technical views accommodates different learning styles.

:art: Design Philosophy

Visual Metaphors

  • Letter sending analogy for transaction flow
  • Postal system metaphors for blockchain mechanics
  • Color-coded stages for visual progression
  • Animated transitions for engagement

Educational Approach

  • Progressive disclosure of technical details
  • Contextual tooltips for complex concepts
  • Real-world analogies for abstract processes
  • Live data integration for authenticity

:wrench: Technical Challenges & Solutions

Challenge 1: Real Blockchain Integration

Problem: Ensuring reliable connection to Conflux eSpace testnet
Solution: Implemented robust error handling and fallback mechanisms

// Robust error handling for blockchain operations
try {
  const web3 = new Web3('https://evmtestnet.confluxrpc.com')
  const balanceInWei = await web3.eth.getBalance(address)
  const balanceInCFX = web3.utils.fromWei(balanceInWei, 'ether')
  return parseFloat(balanceInCFX).toFixed(4)
} catch (error) {
  console.error('❌ Error fetching balance:', error)
  return "0.0000" // Graceful fallback
}

Challenge 2: Transaction State Management

Problem: Tracking complex transaction lifecycle states
Solution: Implemented comprehensive state machine with TypeScript

export type TransactionStage =
  | "idle"
  | "created"
  | "signed"
  | "broadcasted"
  | "pending"
  | "included"
  | "confirmed"
  | "error"

export interface TransactionData {
  hash?: string
  from?: string
  to?: string
  value?: string
  nonce?: number
  gas?: string
  gasPrice?: string
  data?: string
  blockNumber?: number
  blockHash?: string
  timestamp?: number
  status?: number
  gasUsed?: string
  logs?: any[]
  error?: string
}

Challenge 3: Educational UX

Problem: Making complex concepts accessible without oversimplifying
Solution: Dual-mode interface with contextual explanations

:bar_chart: Results & Impact

Technical Achievements

  • :white_check_mark: Real blockchain integration with Conflux eSpace testnet
  • :white_check_mark: Live data fetching from ConfluxScan explorer
  • :white_check_mark: Authentic transaction execution with private key signing
  • :white_check_mark: Responsive design for desktop and mobile
  • :white_check_mark: Smooth animations with Framer Motion

Educational Value

  • :white_check_mark: Intuitive learning curve through visual metaphors
  • :white_check_mark: Progressive complexity with dual-mode interface
  • :white_check_mark: Real-world context with actual blockchain data
  • :white_check_mark: Interactive engagement through hands-on experience

:rocket: Future Enhancements

Planned Features

  1. Multi-network support (Ethereum, Polygon, etc.)
  2. Advanced transaction types (smart contract interactions)
  3. Portfolio tracking for multiple wallets
  4. Educational modules with structured learning paths
  5. Social features for sharing transaction visualizations

Technical Improvements

  1. Enhanced error handling for network issues
  2. Offline mode with cached data
  3. Performance optimization for large transaction histories
  4. Accessibility improvements for screen readers
  5. Internationalization for global users

:dart: Key Takeaways

For Developers

  • Real blockchain integration is more educational than simulations
  • Visual metaphors make complex concepts accessible
  • Dual-mode interfaces accommodate different user needs
  • Progressive disclosure prevents information overload

For Educators

  • Hands-on experience beats theoretical explanations
  • Real data increases engagement and credibility
  • Visual progression helps users understand processes
  • Contextual help supports independent learning

For Users

  • Blockchain isn’t as complex as it initially appears
  • Real transactions provide authentic learning experience
  • Visual feedback makes abstract processes concrete
  • Interactive tools make learning engaging and memorable

:link: Project Links