# julianoivan10/forma architecture

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

- Interactive diagram: https://gitdiagram.com/julianoivan10/forma
- Repository: https://github.com/julianoivan10/forma

## Overview

Forma is a testnet staking dapp centered on creating programmable ERC-721 staking positions, earning and routing rewards, and using a separate liquid-staking vault. The graph follows the documented user journey and the sampled frontend read/write boundaries. Contract internals and several pages were not sampled, so their documented capabilities are represented at the enclosing contracts path without asserting unsupported call wiring.

Main entry points: [`apps/web/src/lib/reads.ts`](https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/reads.ts) (Contract read hooks), [`apps/web/src/lib/write.ts`](https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/write.ts) (Transaction writes), [`apps/web/src/app/layout.tsx`](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/layout.tsx) (Next.js app), [`packages/sdk/src/index.ts`](https://github.com/julianoivan10/forma/blob/main/packages/sdk/src/index.ts) (Forma SDK)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Forma web app"]
  node_web["Next.js app<br/>[layout.tsx]"]
  node_stake["Create position<br/>[page.tsx]"]
  node_home["Position overview<br/>[page.tsx]"]
  node_position["Position detail<br/>[page.tsx]"]
  node_earn["Rewards and earn<br/>[page.tsx]"]
  node_activity["Activity history<br/>[page.tsx]"]
  node_positions["Positions list<br/>[page.tsx]"]
  node_settings["Settings and faucet<br/>[page.tsx]"]
  node_liquidpage["Liquid vault UI<br/>[page.tsx]"]
end

subgraph group_protocol["Staking protocol"]
  node_staking["FormaStaking"]
  node_nft["Position NFT and renderer"]
  node_token["FORGE token"]
end

subgraph group_vault["Liquid staking"]
  node_vault["LiquidStakingVault"]
end

subgraph group_shared["SDK and network"]
  node_reads["Contract read hooks<br/>[reads.ts]"]
  node_writes["Transaction writes<br/>[write.ts]"]
  node_forma["Contract configuration<br/>[forma.ts]"]
  node_sdk["Forma SDK<br/>[index.ts]"]
  node_config["Chain and deployments<br/>[index.ts]"]
end

node_user(("Wallet user"))
node_chain[("EVM network")]
node_wallet(("Browser wallet"))

node_user -->|"uses"| node_web
node_web -->|"routes to"| node_stake
node_web -->|"routes to"| node_home
node_web -->|"routes to"| node_position
node_web -->|"routes to"| node_earn
node_web -->|"routes to"| node_activity
node_web -->|"routes to"| node_positions
node_web -->|"routes to"| node_settings
node_web -->|"routes to"| node_liquidpage
node_stake -->|"previews"| node_reads
node_stake -->|"submits stake"| node_writes
node_home -->|"loads positions"| node_reads
node_positions -->|"loads positions"| node_reads
node_position -->|"loads position"| node_reads
node_position -->|"sends actions"| node_writes
node_earn -->|"loads rewards"| node_reads
node_activity -->|"loads activity"| node_reads
node_settings -->|"loads settings"| node_reads
node_settings -->|"requests faucet"| node_writes
node_liquidpage -->|"previews vault"| node_reads
node_liquidpage -->|"sends vault actions"| node_writes
node_reads -->|"gets addresses"| node_forma
node_writes -->|"gets addresses"| node_forma
node_forma -->|"loads deployments"| node_config
node_reads -->|"reads state"| node_staking
node_reads -->|"reads vault"| node_vault
node_reads -->|"reads balances"| node_token
node_writes -->|"calls methods"| node_staking
node_writes -->|"calls methods"| node_vault
node_writes -->|"approves token"| node_token
node_staking -->|"mints positions"| node_nft
node_staking -->|"stores protocol state"| node_chain
node_nft -->|"stores token state"| node_chain
node_vault -->|"stores vault state"| node_chain
node_token -->|"stores token state"| node_chain
node_wallet -->|"signs transactions"| node_writes
node_reads -->|"queries"| node_chain
node_writes -->|"broadcasts transactions"| node_chain
node_sdk -->|"formats and models"| node_stake
node_sdk -->|"formats and models"| node_position
node_sdk -->|"formats rewards"| node_earn
node_sdk -->|"parses amounts"| node_liquidpage

click node_web "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/layout.tsx"
click node_stake "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/stake/page.tsx"
click node_home "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/page.tsx"
click node_position "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/positions/%5Bid%5D/page.tsx"
click node_earn "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/earn/page.tsx"
click node_activity "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/activity/page.tsx"
click node_positions "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/positions/page.tsx"
click node_settings "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/settings/page.tsx"
click node_liquidpage "https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/liquid/page.tsx"
click node_reads "https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/reads.ts"
click node_writes "https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/write.ts"
click node_forma "https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/forma.ts"
click node_sdk "https://github.com/julianoivan10/forma/blob/main/packages/sdk/src/index.ts"
click node_config "https://github.com/julianoivan10/forma/blob/main/packages/config/src/index.ts"
click node_staking "https://github.com/julianoivan10/forma/tree/main/packages/contracts"
click node_nft "https://github.com/julianoivan10/forma/tree/main/packages/contracts"
click node_token "https://github.com/julianoivan10/forma/tree/main/packages/contracts"
click node_vault "https://github.com/julianoivan10/forma/tree/main/packages/contracts"

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_web,node_stake,node_home,node_position,node_earn,node_activity,node_positions,node_settings,node_liquidpage,node_user,node_wallet toneBlue
class node_staking,node_nft,node_token,node_chain toneAmber
class node_vault toneMint
class node_reads,node_writes,node_forma,node_sdk,node_config toneRose
```

## Components

### Forma web app

- [Next.js app](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/layout.tsx): `apps/web/src/app/layout.tsx`
- [Create position](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/stake/page.tsx): `apps/web/src/app/stake/page.tsx`
- [Position overview](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/page.tsx): `apps/web/src/app/page.tsx`
- [Position detail](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/positions/%5Bid%5D/page.tsx): `apps/web/src/app/positions/[id]/page.tsx`
- [Rewards and earn](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/earn/page.tsx): `apps/web/src/app/earn/page.tsx`
- [Activity history](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/activity/page.tsx): `apps/web/src/app/activity/page.tsx`
- [Positions list](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/positions/page.tsx): `apps/web/src/app/positions/page.tsx`
- [Settings and faucet](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/settings/page.tsx): `apps/web/src/app/settings/page.tsx`
- [Liquid vault UI](https://github.com/julianoivan10/forma/blob/main/apps/web/src/app/liquid/page.tsx): `apps/web/src/app/liquid/page.tsx`

### Staking protocol

- [FormaStaking](https://github.com/julianoivan10/forma/tree/main/packages/contracts): `packages/contracts`
- [Position NFT and renderer](https://github.com/julianoivan10/forma/tree/main/packages/contracts): `packages/contracts`
- [FORGE token](https://github.com/julianoivan10/forma/tree/main/packages/contracts): `packages/contracts`

### Liquid staking

- [LiquidStakingVault](https://github.com/julianoivan10/forma/tree/main/packages/contracts): `packages/contracts`

### SDK and network

- [Contract read hooks](https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/reads.ts): `apps/web/src/lib/reads.ts`
- [Transaction writes](https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/write.ts): `apps/web/src/lib/write.ts`
- [Contract configuration](https://github.com/julianoivan10/forma/blob/main/apps/web/src/lib/forma.ts): `apps/web/src/lib/forma.ts`
- [Forma SDK](https://github.com/julianoivan10/forma/blob/main/packages/sdk/src/index.ts): `packages/sdk/src/index.ts`
- [Chain and deployments](https://github.com/julianoivan10/forma/blob/main/packages/config/src/index.ts): `packages/config/src/index.ts`

### Other components

- **Wallet user**
- **EVM network**
- **Browser wallet**

## Connections

- Wallet user → Next.js app: uses
- Next.js app → Create position: routes to
- Next.js app → Position overview: routes to
- Next.js app → Position detail: routes to
- Next.js app → Rewards and earn: routes to
- Next.js app → Activity history: routes to
- Next.js app → Positions list: routes to
- Next.js app → Settings and faucet: routes to
- Next.js app → Liquid vault UI: routes to
- Create position → Contract read hooks: previews
- Create position → Transaction writes: submits stake
- Position overview → Contract read hooks: loads positions
- Positions list → Contract read hooks: loads positions
- Position detail → Contract read hooks: loads position
- Position detail → Transaction writes: sends actions
- Rewards and earn → Contract read hooks: loads rewards
- Activity history → Contract read hooks: loads activity
- Settings and faucet → Contract read hooks: loads settings
- Settings and faucet → Transaction writes: requests faucet
- Liquid vault UI → Contract read hooks: previews vault
- Liquid vault UI → Transaction writes: sends vault actions
- Contract read hooks → Contract configuration: gets addresses
- Transaction writes → Contract configuration: gets addresses
- Contract configuration → Chain and deployments: loads deployments
- Contract read hooks → FormaStaking: reads state
- Contract read hooks → LiquidStakingVault: reads vault
- Contract read hooks → FORGE token: reads balances
- Transaction writes → FormaStaking: calls methods
- Transaction writes → LiquidStakingVault: calls methods
- Transaction writes → FORGE token: approves token
- FormaStaking → Position NFT and renderer: mints positions
- FormaStaking → EVM network: stores protocol state
- Position NFT and renderer → EVM network: stores token state
- LiquidStakingVault → EVM network: stores vault state
- FORGE token → EVM network: stores token state
- Browser wallet → Transaction writes: signs transactions
- Contract read hooks → EVM network: queries
- Transaction writes → EVM network: broadcasts transactions
- Forma SDK → Create position: formats and models
- Forma SDK → Position detail: formats and models
- Forma SDK → Rewards and earn: formats rewards
- Forma SDK → Liquid vault UI: parses amounts