# akm4033/complete-example-dapp architecture

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

- Interactive diagram: https://gitdiagram.com/akm4033/complete-example-dapp
- Repository: https://github.com/akm4033/complete-example-dapp

## Overview

This is a small token-minting dapp: users connect a browser wallet, view token supply, submit a paid mint transaction, and inspect recent purchase events. The React app assembles these views around a contract instance; the components perform contract reads, writes, and event queries. The repository also includes a Hardhat deployment script and Moonbase Alpha configuration. The Solidity contract and ABI were not excerpted, so their internal behavior is not inferred; edges reflect only the shown frontend calls, deployment code, and provider setup.

Main entry points: [`frontend/src/App.js`](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/App.js) (Dapp shell), [`contracts/MintableERC20.sol`](https://github.com/akm4033/complete-example-dapp/blob/main/contracts/MintableERC20.sol) (Mintable token), [`frontend/src/index.js`](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/index.js) (Provider setup), [`frontend/src/SupplyComponent.js`](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/SupplyComponent.js) (Supply display)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Dapp frontend"]
  node_app["Dapp shell<br/>[App.js]"]
  node_wallet["Wallet controls<br/>[App.js]"]
  node_supply["Supply display<br/>[SupplyComponent.js]"]
  node_mint["Mint purchase"]
  node_events["Purchase history"]
  node_entry["Provider setup<br/>[index.js]"]
end

subgraph group_chain["Token and chain"]
  node_abi["Contract ABI<br/>[MintableERC20.json]"]
  node_token[("Mintable token<br/>[MintableERC20.sol]")]
  node_moonbase(("Moonbase Alpha RPC"))
end

subgraph group_deployment["Deployment"]
  node_deploy["Token deployer<br/>[deploy.js]"]
  node_hardhat["Network config<br/>[hardhat.config.js]"]
end

node_user(("Token user"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_wallet
node_app -->|"renders"| node_supply
node_app -->|"renders"| node_mint
node_app -->|"renders"| node_events
node_app -->|"loads ABI"| node_abi
node_app -->|"creates contract client"| node_token
node_supply -->|"reads supply"| node_token
node_mint -->|"calls purchaseMint"| node_token
node_events -->|"queries purchase events"| node_token
node_entry -->|"renders in provider"| node_app
node_entry -->|"configures read RPC"| node_moonbase
node_deploy -->|"deploys"| node_token

click node_app "https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/App.js"
click node_wallet "https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/App.js"
click node_supply "https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/SupplyComponent.js"
click node_mint "https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/MintingComponent.js"
click node_events "https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/PurchaseOccurredEvents.js"
click node_entry "https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/index.js"
click node_abi "https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/MintableERC20.json"
click node_token "https://github.com/akm4033/complete-example-dapp/blob/main/contracts/MintableERC20.sol"
click node_deploy "https://github.com/akm4033/complete-example-dapp/blob/main/scripts/deploy.js"
click node_hardhat "https://github.com/akm4033/complete-example-dapp/blob/main/hardhat.config.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_app,node_wallet,node_supply,node_mint,node_events,node_entry,node_user toneBlue
class node_abi,node_token,node_moonbase toneAmber
class node_deploy,node_hardhat toneMint
```

## Components

### Dapp frontend

- [Dapp shell](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Wallet controls](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Supply display](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/SupplyComponent.js): `frontend/src/SupplyComponent.js`
- [Mint purchase](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/MintingComponent.js): `frontend/src/MintingComponent.js`
- [Purchase history](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/PurchaseOccurredEvents.js): `frontend/src/PurchaseOccurredEvents.js`
- [Provider setup](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/index.js): `frontend/src/index.js`

### Token and chain

- [Contract ABI](https://github.com/akm4033/complete-example-dapp/blob/main/frontend/src/MintableERC20.json): `frontend/src/MintableERC20.json`
- [Mintable token](https://github.com/akm4033/complete-example-dapp/blob/main/contracts/MintableERC20.sol): `contracts/MintableERC20.sol`
- **Moonbase Alpha RPC**

### Deployment

- [Token deployer](https://github.com/akm4033/complete-example-dapp/blob/main/scripts/deploy.js): `scripts/deploy.js`
- [Network config](https://github.com/akm4033/complete-example-dapp/blob/main/hardhat.config.js): `hardhat.config.js`

### Other components

- **Token user**

## Connections

- Token user → Dapp shell: uses (evidence: `frontend/src/App.js`)
- Dapp shell → Wallet controls: renders (evidence: `frontend/src/App.js`)
- Dapp shell → Supply display: renders (evidence: `frontend/src/App.js`)
- Dapp shell → Mint purchase: renders (evidence: `frontend/src/App.js`)
- Dapp shell → Purchase history: renders (evidence: `frontend/src/App.js`)
- Dapp shell → Contract ABI: loads ABI (evidence: `frontend/src/App.js`)
- Dapp shell → Mintable token: creates contract client (evidence: `frontend/src/App.js`)
- Supply display → Mintable token: reads supply (evidence: `frontend/src/SupplyComponent.js`)
- Mint purchase → Mintable token: calls purchaseMint (evidence: `frontend/src/MintingComponent.js`)
- Purchase history → Mintable token: queries purchase events (evidence: `frontend/src/PurchaseOccurredEvents.js`)
- Provider setup → Dapp shell: renders in provider (evidence: `frontend/src/index.js`)
- Provider setup → Moonbase Alpha RPC: configures read RPC (evidence: `frontend/src/index.js`)
- Token deployer → Mintable token: deploys (evidence: `scripts/deploy.js`)