# kk666679/defi-amm architecture

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

- Interactive diagram: https://gitdiagram.com/kk666679/defi-amm
- Repository: https://github.com/kk666679/defi-amm

## Overview

PayFlow is a hybrid-wallet and DeFi AMM demo: users enter the app, connect an injected wallet, and use swap or liquidity screens against a local chain. The visible PayFlow dashboard also presents balances and navigation; sampled swap and pool screens contain demonstration data, so their displayed quotes and pool listings are not evidence of live AMM calls. The README documents the intended wallet-to-chain path and AMM capabilities, but the contract sources are absent from the supplied tree. Several wallet-route and shared-component implementations were indexed as read but not excerpted, so their internal wiring is omitted.

Main entry points: [`frontend/app/wallet/layout.tsx`](https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/layout.tsx) (Wallet Shell), [`frontend/app/payflow/PayFlowApp.tsx`](https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/PayFlowApp.tsx) (PayFlow Shell), [`frontend/app/page.tsx`](https://github.com/kk666679/defi-amm/blob/main/frontend/app/page.tsx) (AMM Landing), [`frontend/app/wallet/page.tsx`](https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/page.tsx) (Wallet Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and Wallet"]
  node_root["AMM Landing<br/>[page.tsx]"]
  node_wallet_layout["Wallet Shell<br/>[layout.tsx]"]
  node_wallet_home["Wallet Dashboard<br/>[page.tsx]"]
  node_wallet_pools["Wallet Pools<br/>[page.tsx]"]
  node_wallet_swap["Wallet Swap<br/>[page.tsx]"]
  node_wallet_bar["Wallet Bar<br/>[WalletBar.tsx]"]
  node_swap_card["Swap Card<br/>[SwapCard.tsx]"]
  node_reserves["Reserve Display"]
end

subgraph group_payflow["PayFlow Screens"]
  node_payflow_route["PayFlow Route<br/>[page.tsx]"]
  node_payflow_app["PayFlow Shell<br/>[PayFlowApp.tsx]"]
  node_home["Balance Home<br/>[HomePage.tsx]"]
  node_swap["Swap Screen<br/>[SwapPage.tsx]"]
  node_pools["Pool Screen<br/>[PoolsPage.tsx]"]
  node_payflow_data["Screen Data<br/>[data.ts]"]
end

subgraph group_web3["Web3 Runtime"]
  node_providers["Web3 Providers<br/>[providers.tsx]"]
  node_wagmi["Wallet Config<br/>[wagmi.ts]"]
  node_abi["Contract ABI<br/>[abi.ts]"]
  node_wallet["Injected Wallet"]
end

subgraph group_chain["AMM Chain"]
  node_chain[("Local Hardhat Chain")]
  node_amm["Constant-Product AMM"]
  node_tokens["Pool Tokens"]
end

node_user(("User"))

node_user -->|"opens"| node_root
node_user -->|"opens"| node_payflow_route
node_payflow_route -.->|"renders"| node_payflow_app
node_payflow_app -->|"renders"| node_home
node_payflow_app -->|"renders"| node_swap
node_payflow_app -->|"renders"| node_pools
node_swap -->|"reads quote data"| node_payflow_data
node_pools -->|"reads pool data"| node_payflow_data
node_root -.->|"uses"| node_providers
node_wallet_layout -.->|"frames"| node_wallet_home
node_wallet_layout -.->|"frames"| node_wallet_pools
node_wallet_layout -.->|"frames"| node_wallet_swap
node_wallet_layout -.->|"uses"| node_wallet_bar
node_wallet_swap -.->|"uses"| node_swap_card
node_wallet_home -.->|"uses"| node_reserves
node_providers -->|"configures"| node_wagmi
node_wagmi -->|"connects injected"| node_wallet
node_wallet -->|"sends JSON-RPC"| node_chain
node_chain -->|"hosts"| node_amm
node_amm -->|"uses reserves"| node_tokens
node_swap_card -.->|"uses contract interface"| node_abi
node_reserves -.->|"uses contract interface"| node_abi

click node_root "https://github.com/kk666679/defi-amm/blob/main/frontend/app/page.tsx"
click node_wallet_layout "https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/layout.tsx"
click node_wallet_home "https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/page.tsx"
click node_wallet_pools "https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/pools/page.tsx"
click node_wallet_swap "https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/swap/page.tsx"
click node_payflow_route "https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/page.tsx"
click node_payflow_app "https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/PayFlowApp.tsx"
click node_home "https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/components/HomePage.tsx"
click node_swap "https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/components/SwapPage.tsx"
click node_pools "https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/components/PoolsPage.tsx"
click node_payflow_data "https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/data.ts"
click node_wallet_bar "https://github.com/kk666679/defi-amm/blob/main/frontend/components/WalletBar.tsx"
click node_swap_card "https://github.com/kk666679/defi-amm/blob/main/frontend/components/SwapCard.tsx"
click node_reserves "https://github.com/kk666679/defi-amm/blob/main/frontend/components/ReservesDisplay.tsx"
click node_providers "https://github.com/kk666679/defi-amm/blob/main/frontend/app/providers.tsx"
click node_wagmi "https://github.com/kk666679/defi-amm/blob/main/frontend/app/wagmi.ts"
click node_abi "https://github.com/kk666679/defi-amm/blob/main/frontend/lib/abi.ts"

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_root,node_wallet_layout,node_wallet_home,node_wallet_pools,node_wallet_swap,node_wallet_bar,node_swap_card,node_reserves,node_user toneBlue
class node_payflow_route,node_payflow_app,node_home,node_swap,node_pools,node_payflow_data toneAmber
class node_providers,node_wagmi,node_abi,node_wallet toneMint
class node_chain,node_amm,node_tokens toneRose
```

## Components

### App and Wallet

- [AMM Landing](https://github.com/kk666679/defi-amm/blob/main/frontend/app/page.tsx): `frontend/app/page.tsx`
- [Wallet Shell](https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/layout.tsx): `frontend/app/wallet/layout.tsx`
- [Wallet Dashboard](https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/page.tsx): `frontend/app/wallet/page.tsx`
- [Wallet Pools](https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/pools/page.tsx): `frontend/app/wallet/pools/page.tsx`
- [Wallet Swap](https://github.com/kk666679/defi-amm/blob/main/frontend/app/wallet/swap/page.tsx): `frontend/app/wallet/swap/page.tsx`
- [Wallet Bar](https://github.com/kk666679/defi-amm/blob/main/frontend/components/WalletBar.tsx): `frontend/components/WalletBar.tsx`
- [Swap Card](https://github.com/kk666679/defi-amm/blob/main/frontend/components/SwapCard.tsx): `frontend/components/SwapCard.tsx`
- [Reserve Display](https://github.com/kk666679/defi-amm/blob/main/frontend/components/ReservesDisplay.tsx): `frontend/components/ReservesDisplay.tsx`

### PayFlow Screens

- [PayFlow Route](https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/page.tsx): `frontend/app/payflow/page.tsx`
- [PayFlow Shell](https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/PayFlowApp.tsx): `frontend/app/payflow/PayFlowApp.tsx`
- [Balance Home](https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/components/HomePage.tsx): `frontend/app/payflow/components/HomePage.tsx`
- [Swap Screen](https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/components/SwapPage.tsx): `frontend/app/payflow/components/SwapPage.tsx`
- [Pool Screen](https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/components/PoolsPage.tsx): `frontend/app/payflow/components/PoolsPage.tsx`
- [Screen Data](https://github.com/kk666679/defi-amm/blob/main/frontend/app/payflow/data.ts): `frontend/app/payflow/data.ts`

### Web3 Runtime

- [Web3 Providers](https://github.com/kk666679/defi-amm/blob/main/frontend/app/providers.tsx): `frontend/app/providers.tsx`
- [Wallet Config](https://github.com/kk666679/defi-amm/blob/main/frontend/app/wagmi.ts): `frontend/app/wagmi.ts`
- [Contract ABI](https://github.com/kk666679/defi-amm/blob/main/frontend/lib/abi.ts): `frontend/lib/abi.ts`
- **Injected Wallet**

### AMM Chain

- **Local Hardhat Chain**
- **Constant-Product AMM**
- **Pool Tokens**

### Other components

- **User**

## Connections

- User → AMM Landing: opens
- User → PayFlow Route: opens
- PayFlow Route → PayFlow Shell: renders
- PayFlow Shell → Balance Home: renders (evidence: `frontend/app/payflow/PayFlowApp.tsx`)
- PayFlow Shell → Swap Screen: renders (evidence: `frontend/app/payflow/PayFlowApp.tsx`)
- PayFlow Shell → Pool Screen: renders (evidence: `frontend/app/payflow/PayFlowApp.tsx`)
- Swap Screen → Screen Data: reads quote data (evidence: `frontend/app/payflow/components/SwapPage.tsx`)
- Pool Screen → Screen Data: reads pool data (evidence: `frontend/app/payflow/components/PoolsPage.tsx`)
- AMM Landing → Web3 Providers: uses
- Wallet Shell → Wallet Dashboard: frames
- Wallet Shell → Wallet Pools: frames
- Wallet Shell → Wallet Swap: frames
- Wallet Shell → Wallet Bar: uses
- Wallet Swap → Swap Card: uses
- Wallet Dashboard → Reserve Display: uses
- Web3 Providers → Wallet Config: configures (evidence: `frontend/app/layout.tsx`)
- Wallet Config → Injected Wallet: connects injected
- Injected Wallet → Local Hardhat Chain: sends JSON-RPC
- Local Hardhat Chain → Constant-Product AMM: hosts
- Constant-Product AMM → Pool Tokens: uses reserves
- Swap Card → Contract ABI: uses contract interface
- Reserve Display → Contract ABI: uses contract interface