# gushalkdev/evm-yield-bearing-vaults architecture

> Architecture diagram of the GitHub repository gushalkdev/evm-yield-bearing-vaults, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gushalkdev/evm-yield-bearing-vaults
- Repository: https://github.com/gushalkdev/evm-yield-bearing-vaults

## Overview

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/src/App.tsx`](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/App.tsx) (App Router), [`app/src/lib/reads.ts`](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/reads.ts) (Contract Reads), [`app/src/components/Account.tsx`](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Account.tsx) (Account Actions), [`app/src/hooks/useTx.ts`](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useTx.ts) (Transaction Hook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application UI"]
  node_app_root["App Router<br/>[App.tsx]"]
  node_sections["Page Sections<br/>[Sections.tsx]"]
  node_vault_top["Vault Overview<br/>[Top.tsx]"]
  node_vault_details["Vault Details<br/>[Details.tsx]"]
  node_account["Account Actions<br/>[Account.tsx]"]
  node_loop_view["Loop Display<br/>[Loop.tsx]"]
  node_stress_test["Stress Test<br/>[StressTest.tsx]"]
  node_wallet_ui["Wallet UI<br/>[Wallet.tsx]"]
end

subgraph group_actions["Wallet Actions"]
end

subgraph group_model["Vault Model"]
  node_preview_state["Preview State<br/>[usePreview.tsx]"]
  node_vault_model["Vault View Model<br/>[model.ts]"]
  node_vault_math["Vault Simulations<br/>[vault.ts]"]
  node_aave_math["Aave Math<br/>[aave.ts]"]
  node_flow_math["Flow Projections<br/>[flow.ts]"]
  node_formatting["Value Formatting<br/>[format.ts]"]
  node_model_hook["Model Hook<br/>[useModel.ts]"]
end

subgraph group_chain["Chain Integration"]
  node_vault_data["Vault Data Hook<br/>[useVaultData.ts]"]
  node_contract_reads["Contract Reads<br/>[reads.ts]"]
  node_contract_abis["Contract ABIs<br/>[abi.ts]"]
  node_chain_config["Chain Config<br/>[chain.ts]"]
  node_deployment["Deployment Config<br/>[deployment.ts]"]
  node_wagmi_client["Wagmi Client<br/>[wagmi.ts]"]
  node_transaction_hook["Transaction Hook<br/>[useTx.ts]"]
  node_toast_state["Toast State<br/>[useToasts.tsx]"]
end

node_visitor(("Visitor"))
node_aave_pool{{"Aave V3"}}
node_pool_manager{{"Uniswap V4 PoolManager"}}
node_vault_contracts{{"Vault Contracts"}}
node_wallet(("Connected Wallet"))

node_visitor -->|"uses"| node_app_root
node_app_root -->|"renders"| node_sections
node_app_root -->|"renders"| node_vault_top
node_app_root -->|"renders"| node_vault_details
node_app_root -->|"renders"| node_account
node_app_root -->|"renders"| node_stress_test
node_app_root -->|"opens"| node_wallet_ui
node_app_root -->|"loads"| node_model_hook
node_app_root -->|"checks deployment"| node_chain_config
node_model_hook -->|"loads"| node_vault_data
node_vault_data -->|"fetches"| node_contract_reads
node_contract_reads -->|"uses"| node_contract_abis
node_contract_reads -->|"uses addresses"| node_deployment
node_chain_config -->|"loads"| node_deployment
node_vault_model -->|"computes limits"| node_vault_math
node_vault_model -->|"computes balances"| node_aave_math
node_vault_math -->|"uses reserve math"| node_aave_math
node_vault_top -->|"projects yield"| node_flow_math
node_vault_details -->|"projects flows"| node_flow_math
node_account -->|"builds plans"| node_flow_math
node_account -->|"submits calls"| node_transaction_hook
node_account -->|"publishes preview"| node_preview_state
node_loop_view -->|"reads preview"| node_preview_state
node_stress_test -->|"submits calls"| node_transaction_hook
node_transaction_hook -->|"sends transactions"| node_wagmi_client
node_transaction_hook -->|"updates status"| node_toast_state
node_wallet_ui -.->|"connects"| node_wallet
node_contract_reads -.->|"reads state"| node_vault_contracts
node_vault_contracts -.->|"uses"| node_aave_pool
node_vault_contracts -.->|"flash loans"| node_pool_manager
node_contract_reads -.->|"reads reserve data"| node_aave_pool
node_formatting -->|"uses scales"| node_aave_math

click node_app_root "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/App.tsx"
click node_sections "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Sections.tsx"
click node_vault_top "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Top.tsx"
click node_vault_details "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Details.tsx"
click node_account "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Account.tsx"
click node_loop_view "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Loop.tsx"
click node_stress_test "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/StressTest.tsx"
click node_wallet_ui "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Wallet.tsx"
click node_preview_state "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/usePreview.tsx"
click node_vault_model "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/model.ts"
click node_vault_math "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/vault.ts"
click node_aave_math "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/aave.ts"
click node_flow_math "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/flow.ts"
click node_formatting "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/format.ts"
click node_model_hook "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useModel.ts"
click node_vault_data "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useVaultData.ts"
click node_contract_reads "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/reads.ts"
click node_contract_abis "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/abi.ts"
click node_chain_config "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/config/chain.ts"
click node_deployment "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/config/deployment.ts"
click node_wagmi_client "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/wagmi.ts"
click node_transaction_hook "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useTx.ts"
click node_toast_state "https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useToasts.tsx"

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_root,node_sections,node_vault_top,node_vault_details,node_account,node_loop_view,node_stress_test,node_wallet_ui toneBlue
class node_preview_state,node_vault_model,node_vault_math,node_aave_math,node_flow_math,node_formatting,node_model_hook toneMint
class node_vault_data,node_contract_reads,node_contract_abis,node_chain_config,node_deployment,node_wagmi_client,node_transaction_hook,node_toast_state toneRose
class node_visitor,node_aave_pool,node_pool_manager,node_vault_contracts,node_wallet toneIndigo
```

## Components

### Application UI

- [App Router](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/App.tsx): `app/src/App.tsx`
- [Page Sections](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Sections.tsx): `app/src/components/Sections.tsx`
- [Vault Overview](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Top.tsx): `app/src/components/Top.tsx`
- [Vault Details](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Details.tsx): `app/src/components/Details.tsx`
- [Account Actions](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Account.tsx): `app/src/components/Account.tsx`
- [Loop Display](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Loop.tsx): `app/src/components/Loop.tsx`
- [Stress Test](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/StressTest.tsx): `app/src/components/StressTest.tsx`
- [Wallet UI](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/components/Wallet.tsx): `app/src/components/Wallet.tsx`

### Vault Model

- [Preview State](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/usePreview.tsx): `app/src/hooks/usePreview.tsx`
- [Vault View Model](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/model.ts): `app/src/lib/model.ts`
- [Vault Simulations](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/vault.ts): `app/src/lib/vault.ts`
- [Aave Math](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/aave.ts): `app/src/lib/aave.ts`
- [Flow Projections](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/flow.ts): `app/src/lib/flow.ts`
- [Value Formatting](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/format.ts): `app/src/lib/format.ts`
- [Model Hook](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useModel.ts): `app/src/hooks/useModel.ts`

### Chain Integration

- [Vault Data Hook](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useVaultData.ts): `app/src/hooks/useVaultData.ts`
- [Contract Reads](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/reads.ts): `app/src/lib/reads.ts`
- [Contract ABIs](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/lib/abi.ts): `app/src/lib/abi.ts`
- [Chain Config](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/config/chain.ts): `app/src/config/chain.ts`
- [Deployment Config](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/config/deployment.ts): `app/src/config/deployment.ts`
- [Wagmi Client](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/wagmi.ts): `app/src/wagmi.ts`
- [Transaction Hook](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useTx.ts): `app/src/hooks/useTx.ts`
- [Toast State](https://github.com/gushalkdev/evm-yield-bearing-vaults/blob/main/app/src/hooks/useToasts.tsx): `app/src/hooks/useToasts.tsx`

### Other components

- **Visitor**
- **Aave V3**
- **Uniswap V4 PoolManager**
- **Vault Contracts**
- **Connected Wallet**

## Connections

- Visitor → App Router: uses
- App Router → Page Sections: renders (evidence: `app/src/App.tsx`)
- App Router → Vault Overview: renders (evidence: `app/src/App.tsx`)
- App Router → Vault Details: renders (evidence: `app/src/App.tsx`)
- App Router → Account Actions: renders (evidence: `app/src/App.tsx`)
- App Router → Stress Test: renders (evidence: `app/src/App.tsx`)
- App Router → Wallet UI: opens (evidence: `app/src/App.tsx`)
- App Router → Model Hook: loads (evidence: `app/src/App.tsx`)
- App Router → Chain Config: checks deployment (evidence: `app/src/App.tsx`)
- Model Hook → Vault Data Hook: loads (evidence: `app/src/hooks/useModel.ts`)
- Vault Data Hook → Contract Reads: fetches (evidence: `app/src/hooks/useVaultData.ts`)
- Contract Reads → Contract ABIs: uses (evidence: `app/src/lib/reads.ts`)
- Contract Reads → Deployment Config: uses addresses (evidence: `app/src/lib/reads.ts`)
- Chain Config → Deployment Config: loads (evidence: `app/src/config/chain.ts`)
- Vault View Model → Vault Simulations: computes limits (evidence: `app/src/lib/model.ts`)
- Vault View Model → Aave Math: computes balances (evidence: `app/src/lib/model.ts`)
- Vault Simulations → Aave Math: uses reserve math (evidence: `app/src/lib/vault.ts`)
- Vault Overview → Flow Projections: projects yield (evidence: `app/src/components/Top.tsx`)
- Vault Details → Flow Projections: projects flows (evidence: `app/src/components/Details.tsx`)
- Account Actions → Flow Projections: builds plans (evidence: `app/src/components/Account.tsx`)
- Account Actions → Transaction Hook: submits calls (evidence: `app/src/components/Account.tsx`)
- Account Actions → Preview State: publishes preview (evidence: `app/src/components/Account.tsx`)
- Loop Display → Preview State: reads preview (evidence: `app/src/components/Loop.tsx`)
- Stress Test → Transaction Hook: submits calls (evidence: `app/src/components/StressTest.tsx`)
- Transaction Hook → Wagmi Client: sends transactions (evidence: `app/src/hooks/useTx.ts`)
- Transaction Hook → Toast State: updates status (evidence: `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 (evidence: `app/src/lib/format.ts`)