How gushalkdev/evm-yield-bearing-vaults works
This is the React web app for the Yield Bearing Vaults testnet demo. A visitor connects a wallet, reads a live vault model, previews and submits deposit or withdrawal actions, and can use a separate stress-test page to trigger the documented emergency-and-recovery cycle. The app mirrors vault and Aave math locally for projections, while contract reads and writes run through the configured chain client. Edges reflect excerpts, indexed references, or README statements; several component implementations and the data-fetching details were not sampled.
Main entry points: App.tsx App Router · reads.ts Contract Reads · Account.tsx Account Actions · useTx.ts Transaction Hook
Components 28
Application UI
- App Router
app/src/App.tsx - Page Sections
app/src/components/Sections.tsx - Vault Overview
app/src/components/Top.tsx - Vault Details
app/src/components/Details.tsx - Account Actions
app/src/components/Account.tsx - Loop Display
app/src/components/Loop.tsx - Stress Test
app/src/components/StressTest.tsx - Wallet UI
app/src/components/Wallet.tsx
Vault Model
- Preview State
app/src/hooks/usePreview.tsx - Vault View Model
app/src/lib/model.ts - Vault Simulations
app/src/lib/vault.ts - Aave Math
app/src/lib/aave.ts - Flow Projections
app/src/lib/flow.ts - Value Formatting
app/src/lib/format.ts - Model Hook
app/src/hooks/useModel.ts
Chain Integration
- Vault Data Hook
app/src/hooks/useVaultData.ts - Contract Reads
app/src/lib/reads.ts - Contract ABIs
app/src/lib/abi.ts - Chain Config
app/src/config/chain.ts - Deployment Config
app/src/config/deployment.ts - Wagmi Client
app/src/wagmi.ts - Transaction Hook
app/src/hooks/useTx.ts - Toast State
app/src/hooks/useToasts.tsx
Other components
- Visitor
- Aave V3
- Uniswap V4 PoolManager
- Vault Contracts
- Connected Wallet
Connections 32
- Visitor → App Router: uses
- App Router → Page Sections: renders
app/src/App.tsx - App Router → Vault Overview: renders
app/src/App.tsx - App Router → Vault Details: renders
app/src/App.tsx - App Router → Account Actions: renders
app/src/App.tsx - App Router → Stress Test: renders
app/src/App.tsx - App Router → Wallet UI: opens
app/src/App.tsx - App Router → Model Hook: loads
app/src/App.tsx - App Router → Chain Config: checks deployment
app/src/App.tsx - Model Hook → Vault Data Hook: loads
app/src/hooks/useModel.ts - Vault Data Hook → Contract Reads: fetches
app/src/hooks/useVaultData.ts - Contract Reads → Contract ABIs: uses
app/src/lib/reads.ts - Contract Reads → Deployment Config: uses addresses
app/src/lib/reads.ts - Chain Config → Deployment Config: loads
app/src/config/chain.ts - Vault View Model → Vault Simulations: computes limits
app/src/lib/model.ts - Vault View Model → Aave Math: computes balances
app/src/lib/model.ts - Vault Simulations → Aave Math: uses reserve math
app/src/lib/vault.ts - Vault Overview → Flow Projections: projects yield
app/src/components/Top.tsx - Vault Details → Flow Projections: projects flows
app/src/components/Details.tsx - Account Actions → Flow Projections: builds plans
app/src/components/Account.tsx - Account Actions → Transaction Hook: submits calls
app/src/components/Account.tsx - Account Actions → Preview State: publishes preview
app/src/components/Account.tsx - Loop Display → Preview State: reads preview
app/src/components/Loop.tsx - Stress Test → Transaction Hook: submits calls
app/src/components/StressTest.tsx - Transaction Hook → Wagmi Client: sends transactions
app/src/hooks/useTx.ts - Transaction Hook → Toast State: updates status
app/src/hooks/useTx.ts - Wallet UI → Connected Wallet: connects
- Contract Reads → Vault Contracts: reads state
- Vault Contracts → Aave V3: uses
- Vault Contracts → Uniswap V4 PoolManager: flash loans
- Contract Reads → Aave V3: reads reserve data
- Value Formatting → Aave Math: uses scales
app/src/lib/format.ts