# hasu-01/rosca-web3 architecture

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

- Interactive diagram: https://gitdiagram.com/hasu-01/rosca-web3
- Repository: https://github.com/hasu-01/rosca-web3

## Overview

This is a React dApp for a community rotating-savings pool (“hụi”), using MetaMask and token contracts on a blockchain. The user connects a wallet, configures contract addresses, funds and approves demo tokens, creates or joins a pool, contributes, submits or skips payout offers, and views pool and transaction information. The sampled source shows the app composition, token and pool actions, and ethers utilities; several panels and Solidity implementation details are present in the tree but were not sampled, so their internal wiring is not inferred.

Main entry points: [`src/App.tsx`](https://github.com/hasu-01/rosca-web3/blob/main/src/App.tsx) (App coordinator), [`src/lib/ethers.ts`](https://github.com/hasu-01/rosca-web3/blob/main/src/lib/ethers.ts) (Ethers utilities), [`src/components/PoolDashboard.tsx`](https://github.com/hasu-01/rosca-web3/blob/main/src/components/PoolDashboard.tsx) (Pool dashboard), [`src/components/PoolActions.tsx`](https://github.com/hasu-01/rosca-web3/blob/main/src/components/PoolActions.tsx) (Pool actions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Application UI"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_wallet["Wallet connection<br/>[WalletConnect.tsx]"]
  node_settings["Contract settings"]
end

subgraph group_operations["Pool Operations"]
  node_demo["Demo workflow<br/>[DemoMode.tsx]"]
  node_tokenpanel["Token balance<br/>[TokenPanel.tsx]"]
  node_dashboard["Pool dashboard<br/>[PoolDashboard.tsx]"]
  node_actions["Pool actions<br/>[PoolActions.tsx]"]
  node_members["Pool members<br/>[MembersPanel.tsx]"]
  node_receivers["Receiver panels<br/>[ReceiverPanels.tsx]"]
  node_timeline["Pool timeline<br/>[Timeline.tsx]"]
  node_history["Transaction history"]
end

subgraph group_integration["Chain Integration"]
  node_ethers["Ethers utilities<br/>[ethers.ts]"]
  node_types["Pool data types<br/>[types.ts]"]
  node_lendingabi["Lending ABI"]
  node_tokenabi["Token ABI<br/>[mockERC20Abi.ts]"]
  node_localstorage[("Browser storage")]
end

subgraph group_contracts["Smart Contracts"]
  node_lending["Community lending"]
  node_token["Demo ERC-20<br/>[MockERC20.sol]"]
end

node_user(("Pool participant"))
node_network{{"Ethereum network"}}

node_user -->|"uses"| node_app
node_app -->|"renders"| node_wallet
node_app -->|"renders"| node_settings
node_app -->|"renders"| node_demo
node_app -->|"renders"| node_tokenpanel
node_app -->|"renders"| node_dashboard
node_app -->|"renders"| node_actions
node_app -->|"renders"| node_receivers
node_app -->|"renders"| node_timeline
node_app -->|"renders"| node_history
node_dashboard -->|"reports pool"| node_app
node_actions -->|"signals completion"| node_app
node_demo -->|"uses wallet and contracts"| node_ethers
node_tokenpanel -->|"uses token helpers"| node_ethers
node_dashboard -->|"uses lending helpers"| node_ethers
node_actions -->|"uses lending helpers"| node_ethers
node_history -->|"loads transaction records"| node_ethers
node_settings -->|"address helpers"| node_ethers
node_ethers -->|"constructs token contract"| node_tokenabi
node_ethers -->|"constructs lending contract"| node_lendingabi
node_ethers -->|"reads and writes"| node_localstorage
node_ethers -->|"connects and submits"| node_network
node_network -->|"executes calls"| node_lending
node_network -->|"executes calls"| node_token
node_dashboard -->|"uses pool data"| node_types
node_timeline -->|"uses pool data"| node_types

click node_app "https://github.com/hasu-01/rosca-web3/blob/main/src/App.tsx"
click node_wallet "https://github.com/hasu-01/rosca-web3/blob/main/src/components/WalletConnect.tsx"
click node_settings "https://github.com/hasu-01/rosca-web3/blob/main/src/components/ContractSettings.tsx"
click node_demo "https://github.com/hasu-01/rosca-web3/blob/main/src/components/DemoMode.tsx"
click node_tokenpanel "https://github.com/hasu-01/rosca-web3/blob/main/src/components/TokenPanel.tsx"
click node_dashboard "https://github.com/hasu-01/rosca-web3/blob/main/src/components/PoolDashboard.tsx"
click node_actions "https://github.com/hasu-01/rosca-web3/blob/main/src/components/PoolActions.tsx"
click node_members "https://github.com/hasu-01/rosca-web3/blob/main/src/components/MembersPanel.tsx"
click node_receivers "https://github.com/hasu-01/rosca-web3/blob/main/src/components/ReceiverPanels.tsx"
click node_timeline "https://github.com/hasu-01/rosca-web3/blob/main/src/components/Timeline.tsx"
click node_history "https://github.com/hasu-01/rosca-web3/blob/main/src/components/TransactionHistory.tsx"
click node_ethers "https://github.com/hasu-01/rosca-web3/blob/main/src/lib/ethers.ts"
click node_types "https://github.com/hasu-01/rosca-web3/blob/main/src/lib/types.ts"
click node_lendingabi "https://github.com/hasu-01/rosca-web3/blob/main/src/abis/communityLendingAbi.ts"
click node_tokenabi "https://github.com/hasu-01/rosca-web3/blob/main/src/abis/mockERC20Abi.ts"
click node_lending "https://github.com/hasu-01/rosca-web3/blob/main/smart-contract/contracts/CommunityLending.sol"
click node_token "https://github.com/hasu-01/rosca-web3/blob/main/smart-contract/contracts/MockERC20.sol"

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_settings toneBlue
class node_demo,node_tokenpanel,node_dashboard,node_actions,node_members,node_receivers,node_timeline,node_history toneAmber
class node_ethers,node_types,node_lendingabi,node_tokenabi,node_localstorage toneMint
class node_lending,node_token toneRose
class node_user,node_network toneIndigo
```

## Components

### Application UI

- [App coordinator](https://github.com/hasu-01/rosca-web3/blob/main/src/App.tsx): `src/App.tsx`
- [Wallet connection](https://github.com/hasu-01/rosca-web3/blob/main/src/components/WalletConnect.tsx): `src/components/WalletConnect.tsx`
- [Contract settings](https://github.com/hasu-01/rosca-web3/blob/main/src/components/ContractSettings.tsx): `src/components/ContractSettings.tsx`

### Pool Operations

- [Demo workflow](https://github.com/hasu-01/rosca-web3/blob/main/src/components/DemoMode.tsx): `src/components/DemoMode.tsx`
- [Token balance](https://github.com/hasu-01/rosca-web3/blob/main/src/components/TokenPanel.tsx): `src/components/TokenPanel.tsx`
- [Pool dashboard](https://github.com/hasu-01/rosca-web3/blob/main/src/components/PoolDashboard.tsx): `src/components/PoolDashboard.tsx`
- [Pool actions](https://github.com/hasu-01/rosca-web3/blob/main/src/components/PoolActions.tsx): `src/components/PoolActions.tsx`
- [Pool members](https://github.com/hasu-01/rosca-web3/blob/main/src/components/MembersPanel.tsx): `src/components/MembersPanel.tsx`
- [Receiver panels](https://github.com/hasu-01/rosca-web3/blob/main/src/components/ReceiverPanels.tsx): `src/components/ReceiverPanels.tsx`
- [Pool timeline](https://github.com/hasu-01/rosca-web3/blob/main/src/components/Timeline.tsx): `src/components/Timeline.tsx`
- [Transaction history](https://github.com/hasu-01/rosca-web3/blob/main/src/components/TransactionHistory.tsx): `src/components/TransactionHistory.tsx`

### Chain Integration

- [Ethers utilities](https://github.com/hasu-01/rosca-web3/blob/main/src/lib/ethers.ts): `src/lib/ethers.ts`
- [Pool data types](https://github.com/hasu-01/rosca-web3/blob/main/src/lib/types.ts): `src/lib/types.ts`
- [Lending ABI](https://github.com/hasu-01/rosca-web3/blob/main/src/abis/communityLendingAbi.ts): `src/abis/communityLendingAbi.ts`
- [Token ABI](https://github.com/hasu-01/rosca-web3/blob/main/src/abis/mockERC20Abi.ts): `src/abis/mockERC20Abi.ts`
- **Browser storage**

### Smart Contracts

- [Community lending](https://github.com/hasu-01/rosca-web3/blob/main/smart-contract/contracts/CommunityLending.sol): `smart-contract/contracts/CommunityLending.sol`
- [Demo ERC-20](https://github.com/hasu-01/rosca-web3/blob/main/smart-contract/contracts/MockERC20.sol): `smart-contract/contracts/MockERC20.sol`

### Other components

- **Pool participant**
- **Ethereum network**

## Connections

- Pool participant → App coordinator: uses
- App coordinator → Wallet connection: renders
- App coordinator → Contract settings: renders
- App coordinator → Demo workflow: renders
- App coordinator → Token balance: renders
- App coordinator → Pool dashboard: renders
- App coordinator → Pool actions: renders
- App coordinator → Receiver panels: renders
- App coordinator → Pool timeline: renders
- App coordinator → Transaction history: renders
- Pool dashboard → App coordinator: reports pool
- Pool actions → App coordinator: signals completion
- Demo workflow → Ethers utilities: uses wallet and contracts
- Token balance → Ethers utilities: uses token helpers
- Pool dashboard → Ethers utilities: uses lending helpers
- Pool actions → Ethers utilities: uses lending helpers
- Transaction history → Ethers utilities: loads transaction records
- Contract settings → Ethers utilities: address helpers
- Ethers utilities → Token ABI: constructs token contract
- Ethers utilities → Lending ABI: constructs lending contract
- Ethers utilities → Browser storage: reads and writes
- Ethers utilities → Ethereum network: connects and submits
- Ethereum network → Community lending: executes calls
- Ethereum network → Demo ERC-20: executes calls
- Pool dashboard → Pool data types: uses pool data
- Pool timeline → Pool data types: uses pool data