How hasu-01/rosca-web3 works
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: App.tsx App coordinator · ethers.ts Ethers utilities · PoolDashboard.tsx Pool dashboard · PoolActions.tsx Pool actions
Components 20
Application UI
- App coordinator
src/App.tsx - Wallet connection
src/components/WalletConnect.tsx - Contract settings
src/components/ContractSettings.tsx
Pool Operations
- Demo workflow
src/components/DemoMode.tsx - Token balance
src/components/TokenPanel.tsx - Pool dashboard
src/components/PoolDashboard.tsx - Pool actions
src/components/PoolActions.tsx - Pool members
src/components/MembersPanel.tsx - Receiver panels
src/components/ReceiverPanels.tsx - Pool timeline
src/components/Timeline.tsx - Transaction history
src/components/TransactionHistory.tsx
Chain Integration
- Ethers utilities
src/lib/ethers.ts - Pool data types
src/lib/types.ts - Lending ABI
src/abis/communityLendingAbi.ts - Token ABI
src/abis/mockERC20Abi.ts - Browser storage
Smart Contracts
- Community lending
smart-contract/contracts/CommunityLending.sol - Demo ERC-20
smart-contract/contracts/MockERC20.sol
Other components
- Pool participant
- Ethereum network
Connections 26
- 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