# System Components

An overview of every component in the EcoRound stack, what it does, and how it connects to the rest.

***

## Component Map

```mermaid
flowchart TD
    subgraph Frontend["Frontend — Next.js 16"]
        UI["dApp UI Valorант theme"]
        HOOKS["wagmi hooks useVaultData useDeposit useClaim useFaucet"]
    end

    subgraph Backend["Backend — Go / Gin"]
        API["API Simulator port 8080"]
        DB[("PostgreSQL Neon")]
    end

    subgraph Oracle["Oracle — Chainlink CRE"]
        WF["EcoRound Workflow Go → WASM"]
        CONSENSUS["2/3 Consensus Engine"]
    end

    subgraph Blockchain["Blockchain — Tenderly Base Fork"]
        FM["FactoryMatch"]
        VM["VaultMatch (per match)"]
        MORPHO["Morpho ERC4626"]
        USDC_C["USDC"]
    end

    subgraph Panel["Admin — Go TUI"]
        TUI["panel-v2 tview terminal UI"]
    end

    UI --> HOOKS
    HOOKS -->|read state| Blockchain
    HOOKS -->|fetch metadata| API
    HOOKS -->|write txns| Blockchain

    TUI -->|create matches| API
    TUI -->|deploy on-chain| FM

    WF --> CONSENSUS
    CONSENSUS -->|poll sources| API
    CONSENSUS -->|lock + resolve| VM

    API <--> DB

    FM -->|deploys| VM
    VM <-->|yield| MORPHO
    VM <-->|transfers| USDC_C

    style Frontend fill:#0d1117,stroke:#00E6C3,color:#ccc
    style Backend fill:#0d1117,stroke:#FFB800,color:#ccc
    style Oracle fill:#0d1117,stroke:#FF4655,color:#ccc
    style Blockchain fill:#0d1117,stroke:#7B68EE,color:#ccc
    style Panel fill:#0d1117,stroke:#888,color:#ccc
```

***

## Component Summary

| Component           | Tech                                    | Role                                               |
| ------------------- | --------------------------------------- | -------------------------------------------------- |
| **Frontend**        | Next.js 16, React 19, wagmi, RainbowKit | User interface — deposit, claim, browse matches    |
| **API Simulator**   | Go, Gin, GORM, PostgreSQL               | Match metadata + simulated data sources            |
| **Chainlink CRE**   | Go WASM, CRE SDK                        | Decentralized oracle — locks and resolves matches  |
| **Smart Contracts** | Solidity, Foundry, OpenZeppelin         | On-chain escrow, yield routing, payout enforcement |
| **Morpho Vault**    | ERC4626, Base Mainnet                   | Yield source for idle USDC during matches          |
| **Tenderly Fork**   | Virtual TestNet, Base state             | Safe development environment with real DeFi state  |
| **Admin Panel**     | Go, tview TUI                           | Match creation, result simulation, monitoring      |

***

## Port & Endpoint Reference

| Service                | Location                                                        |
| ---------------------- | --------------------------------------------------------------- |
| Frontend dApp          | `http://localhost:3000`                                         |
| API Simulator          | `http://localhost:8080`                                         |
| Tenderly RPC (public)  | `https://virtual.rpc.tenderly.co/.../public/ecoround-base`      |
| Tenderly RPC (private) | `https://virtual.rpc.tenderly.co/.../private/ecoround-base/...` |
| Admin Panel            | Terminal process                                                |
| CRE Oracle             | `cre workflow simulate EcoRound-workflow`                       |

***

## Technology Choices Rationale

```mermaid
flowchart LR
    subgraph Why["Why These Technologies?"]
        direction TB
        C1["Base→ Low fees + USDC + Morpho native"]
        C2["Morpho ERC4626→ Best USDC yield on Base→ Standard interface, swappable"]
        C3["Chainlink CRE→ Only oracle with HTTP + consensus→ Decentralized, verifiable"]
        C4["Tenderly→ Real mainnet state without real funds→ Built-in faucet + tx explorer"]
        C5["Go→ High performance API + TUI→ CRE SDK is Go-native"]
        C6["Next.js + wagmi→ Best DX for EVM dApps→ App Router + React 19"]
    end

    style C1 fill:#1a2a1a,stroke:#00E6C3,color:#ccc
    style C2 fill:#2a1a2a,stroke:#FF4655,color:#ccc
    style C3 fill:#1a1a2a,stroke:#7B68EE,color:#ccc
    style C4 fill:#2a2a1a,stroke:#FFB800,color:#ccc
    style C5 fill:#1a2a2a,stroke:#00E6C3,color:#ccc
    style C6 fill:#2a1a1a,stroke:#FF4655,color:#ccc
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eco-round.gitbook.io/eco-round-docs/technical-details/system-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.