Bridge Builder UI for Cross-Chain Trading

[Josephrp]

Type: Feature
Priority: P1 (High)
Labels: feature, frontend, trading, blockchain
Epic: #XXX (Epic: Complete Remaining Features)
Estimated Effort: 2 weeks

---

Description

Create user-friendly UI for Bridge Builder to trade challenge coins across organization blockchains and with the CreditNexus main chain.

Current State:

• ✅ ChallengeCoinNFT.sol contract fully implemented
• ✅ ChallengeCoinService fully implemented
• ✅ BridgeBuilderService fully implemented
• ✅ BridgeTrade model exists
• ❌ BridgeBuilder UI component missing

Target State:

• User-friendly interface for cross-chain trading
• Token selection and bridge configuration
• Trade execution flow
• Trade status tracking

Related Plan

dev/BRIDGE_BUILDER_CHALLENGE_COIN_PLAN.md - Complete implementation plan

Sub-Tasks

Frontend Components

• Create BridgeBuilder Component (client/src/components/dashboard-tabs/BridgeBuilder.tsx)

  • Load user's challenge coin tokens
  • Token selection interface
  • Target chain selection
  • Target address input
  • Trade creation and execution
  • Trade status display

• Create BridgeTradeStatus Component (client/src/components/trading/BridgeTradeStatus.tsx)

  • Display trade status (pending, locked, bridging, completed)
  • Show transaction hashes
  • Show lock expiration
  • Show bridge progress

• Add BridgeBuilder to UnifiedDashboard

  • Add Bridge tab or section
  • Permission gating (trading permissions)

API Endpoints

• Create Bridge Builder API (app/api/bridge_builder_routes.py)
  • GET /api/challenge-coins/my-tokens - Get user's challenge coins
  • POST /api/bridge-builder/create-trade - Create bridge trade
  • POST /api/bridge-builder/execute-trade - Execute trade after signing
  • GET /api/bridge-builder/trades - Get user's bridge trades

Acceptance Criteria

1. ✅ Users can view their challenge coin tokens
2. ✅ Users can create bridge trades
3. ✅ Users can configure target chain and address
4. ✅ Trade execution flow works
5. ✅ Trade status is tracked and displayed
6. ✅ MetaMask integration for transaction signing

Dependencies

• ChallengeCoinService (✅ Already implemented)
• BridgeBuilderService (✅ Already implemented)
• ChallengeCoinNFT contract (✅ Already implemented)
• MetaMask wallet (✅ Already implemented)

Testing

• Test token loading
• Test trade creation
• Test trade execution
• Test status tracking
• Test MetaMask signing

---

Created: 2026-01-26
Status: Open