How muhumairkhan/react-blockchain-frontend works
PoA Node Console is a browser control panel for selecting a node and inspecting or operating it. The main workflow is to choose a node, poll its status and chain activity, then optionally create and sign a transaction or manually request block proposal. Wallet management is a separate branch for creating, restoring, exporting, selecting, and deleting encrypted wallets. The README documents the console capabilities; some route, polling, and API wiring is not included in the sampled source, so those links reflect documented responsibilities rather than inspected call sites.
Main entry points: Home.jsx Node dashboard · api.js Node REST client · wallet.js Wallet management · router.jsx Route selection
Components 18
Console UI
- Application entry
src/Main.jsx - Route selection
src/app/router.jsx - Node selection
src/app/Layout.jsx - Node dashboard
src/app/routes/Home.jsx - Status display
src/components/StatusPanel.jsx - Pending transactions
src/components/PendingTable.jsx - Recent blocks
src/components/BlocksTable.jsx - Console header
src/components/Header.jsx
Node Access
- Node REST client
src/api.js - PoA node API
Wallets
- Wallet page
src/app/routes/Wallet.jsx - Wallet context
src/app/context/WalletContext.jsx - Wallet management
src/lib/wallet.js - Browser wallet storage
Transaction Signing
- Transaction form
src/components/TransactionForm.jsx - Key cryptography
src/lib/crypto.js - Transaction builder
src/lib/transaction.js
Other components
- Operator
Connections 24
- Operator → Application entry: opens console
- Application entry → Route selection: renders
- Route selection → Node selection: routes through
- Route selection → Node dashboard: routes to
- Route selection → Wallet page: routes to
- Node selection → Console header: renders
- Node selection → Node REST client: polls node
- Node dashboard → Status display: displays status
- Node dashboard → Pending transactions: displays pending
- Node dashboard → Recent blocks: displays blocks
- Node dashboard → Transaction form: offers submission
- Node dashboard → Node REST client: requests proposal
- Node REST client → PoA node API: fetches node data
- Transaction form → Node REST client: reads account
- Transaction form → Transaction builder: builds and signs
- Transaction form → Node REST client: submits transaction
- Wallet page → Wallet management: manages wallets
- Wallet page → Wallet context: selects wallet
- Wallet context → Wallet management: loads metadata
- Wallet context → Node REST client: syncs account
- Wallet management → Browser wallet storage: reads and writes
- Wallet management → Key cryptography: encrypts and signs
- Transaction builder → Wallet management: signs with wallet
- Transaction builder → Key cryptography: uses key functions