# muhumairkhan/react-blockchain-frontend architecture

> Architecture diagram of the GitHub repository muhumairkhan/react-blockchain-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/muhumairkhan/react-blockchain-frontend
- Repository: https://github.com/muhumairkhan/react-blockchain-frontend

## Overview

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: [`src/app/routes/Home.jsx`](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/routes/Home.jsx) (Node dashboard), [`src/api.js`](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/api.js) (Node REST client), [`src/lib/wallet.js`](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/lib/wallet.js) (Wallet management), [`src/app/router.jsx`](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/router.jsx) (Route selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_console["Console UI"]
  node_main["Application entry<br/>[Main.jsx]"]
  node_router["Route selection<br/>[router.jsx]"]
  node_layout["Node selection<br/>[Layout.jsx]"]
  node_home["Node dashboard<br/>[Home.jsx]"]
  node_status["Status display<br/>[StatusPanel.jsx]"]
  node_pending["Pending transactions<br/>[PendingTable.jsx]"]
  node_blocks["Recent blocks<br/>[BlocksTable.jsx]"]
  node_header["Console header<br/>[Header.jsx]"]
end

subgraph group_node["Node Access"]
  node_api["Node REST client<br/>[api.js]"]
  node_nodeapi["PoA node API"]
end

subgraph group_wallets["Wallets"]
  node_walletpage["Wallet page<br/>[Wallet.jsx]"]
  node_walletcontext["Wallet context<br/>[WalletContext.jsx]"]
  node_walletlib["Wallet management<br/>[wallet.js]"]
  node_localstorage[("Browser wallet storage")]
end

subgraph group_signing["Transaction Signing"]
  node_txform["Transaction form"]
  node_crypto["Key cryptography<br/>[crypto.js]"]
  node_transaction["Transaction builder<br/>[transaction.js]"]
end

node_user(("Operator"))

node_user -->|"opens console"| node_main
node_main -->|"renders"| node_router
node_router -->|"routes through"| node_layout
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_walletpage
node_layout -->|"renders"| node_header
node_layout -->|"polls node"| node_api
node_home -->|"displays status"| node_status
node_home -->|"displays pending"| node_pending
node_home -->|"displays blocks"| node_blocks
node_home -->|"offers submission"| node_txform
node_home -->|"requests proposal"| node_api
node_api -->|"fetches node data"| node_nodeapi
node_txform -->|"reads account"| node_api
node_txform -->|"builds and signs"| node_transaction
node_txform -->|"submits transaction"| node_api
node_walletpage -->|"manages wallets"| node_walletlib
node_walletpage -->|"selects wallet"| node_walletcontext
node_walletcontext -->|"loads metadata"| node_walletlib
node_walletcontext -->|"syncs account"| node_api
node_walletlib -->|"reads and writes"| node_localstorage
node_walletlib -->|"encrypts and signs"| node_crypto
node_transaction -->|"signs with wallet"| node_walletlib
node_transaction -->|"uses key functions"| node_crypto

click node_main "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/Main.jsx"
click node_router "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/router.jsx"
click node_layout "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/Layout.jsx"
click node_home "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/routes/Home.jsx"
click node_walletpage "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/routes/Wallet.jsx"
click node_status "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/StatusPanel.jsx"
click node_pending "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/PendingTable.jsx"
click node_blocks "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/BlocksTable.jsx"
click node_txform "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/TransactionForm.jsx"
click node_header "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/Header.jsx"
click node_api "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/api.js"
click node_walletcontext "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/context/WalletContext.jsx"
click node_walletlib "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/lib/wallet.js"
click node_crypto "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/lib/crypto.js"
click node_transaction "https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/lib/transaction.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_router,node_layout,node_home,node_status,node_pending,node_blocks,node_header toneBlue
class node_api,node_nodeapi toneAmber
class node_walletpage,node_walletcontext,node_walletlib,node_localstorage toneMint
class node_txform,node_crypto,node_transaction toneRose
class node_user toneIndigo
```

## Components

### Console UI

- [Application entry](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/Main.jsx): `src/Main.jsx`
- [Route selection](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/router.jsx): `src/app/router.jsx`
- [Node selection](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/Layout.jsx): `src/app/Layout.jsx`
- [Node dashboard](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/routes/Home.jsx): `src/app/routes/Home.jsx`
- [Status display](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/StatusPanel.jsx): `src/components/StatusPanel.jsx`
- [Pending transactions](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/PendingTable.jsx): `src/components/PendingTable.jsx`
- [Recent blocks](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/BlocksTable.jsx): `src/components/BlocksTable.jsx`
- [Console header](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/Header.jsx): `src/components/Header.jsx`

### Node Access

- [Node REST client](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/api.js): `src/api.js`
- **PoA node API**

### Wallets

- [Wallet page](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/routes/Wallet.jsx): `src/app/routes/Wallet.jsx`
- [Wallet context](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/app/context/WalletContext.jsx): `src/app/context/WalletContext.jsx`
- [Wallet management](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/lib/wallet.js): `src/lib/wallet.js`
- **Browser wallet storage**

### Transaction Signing

- [Transaction form](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/components/TransactionForm.jsx): `src/components/TransactionForm.jsx`
- [Key cryptography](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/lib/crypto.js): `src/lib/crypto.js`
- [Transaction builder](https://github.com/muhumairkhan/react-blockchain-frontend/blob/master/src/lib/transaction.js): `src/lib/transaction.js`

### Other components

- **Operator**

## Connections

- 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