# pantos06/fungi-interface architecture

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

- Interactive diagram: https://gitdiagram.com/pantos06/fungi-interface
- Repository: https://github.com/pantos06/fungi-interface

## Overview

Fungi Interface is a Vue dApp for viewing the $FUNGI token’s on-chain seed inscriptions. A visitor connects a wallet; the app reads account and network state, then presents inscription lists for all holders, the connected wallet, or a searched address. Users can load more holders and view inscription artwork and metadata. The header also shows token, holder, and inscription figures. The README describes the art and inscriptions as on-chain; runtime details beyond the sampled files are represented only where the tree supports them.

Main entry points: [`src/services/user.js`](https://github.com/pantos06/fungi-interface/blob/main/src/services/user.js) (Wallet service), [`src/App.vue`](https://github.com/pantos06/fungi-interface/blob/main/src/App.vue) (App shell), [`src/components/AppPage.vue`](https://github.com/pantos06/fungi-interface/blob/main/src/components/AppPage.vue) (Inscription page), [`src/components/AppHeader.vue`](https://github.com/pantos06/fungi-interface/blob/main/src/components/AppHeader.vue) (Stats header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["User interface"]
  node_app["App shell<br/>[App.vue]"]
  node_page["Inscription page<br/>[AppPage.vue]"]
  node_header["Stats header<br/>[AppHeader.vue]"]
  node_list["Inscription list"]
  node_modal["Modal display<br/>[AppModal.vue]"]
  node_modalinfo["Inscription details<br/>[ModalInfo.vue]"]
end

subgraph group_account["Wallet and account"]
  node_user["Wallet service<br/>[user.js]"]
  node_userstore["User state<br/>[user.js]"]
  node_layoutstore["Layout state<br/>[layout.js]"]
  node_web3modal["Wallet modal<br/>[web3modal.js]"]
end

subgraph group_inscriptions["Inscription data"]
  node_token["Fungi token service<br/>[token.js]"]
end

subgraph group_chain["Chain access"]
  node_contract["Contract wrapper<br/>[contract.js]"]
  node_web3["Web3 provider<br/>[web3.js]"]
  node_contracts["Contract settings<br/>[contracts.js]"]
  node_web3config["Network settings<br/>[web3.js]"]
  node_numberutils["Number formatting<br/>[web3.js]"]
end

node_visitor(("Visitor"))
node_wallet{{"Wallet connector"}}
node_chaincontract[("Fungi token contract")]

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_page
node_app -->|"renders"| node_header
node_app -->|"renders"| node_modal
node_app -->|"checks connection"| node_user
node_page -->|"reads state"| node_userstore
node_page -->|"requests connection"| node_user
node_page -->|"fetches inscriptions"| node_token
node_page -->|"passes results"| node_list
node_header -->|"reads account"| node_userstore
node_header -->|"requests connection"| node_user
node_header -->|"fetches figures"| node_token
node_header -->|"formats balances"| node_numberutils
node_user -->|"opens"| node_web3modal
node_user -->|"reads account and network"| node_wallet
node_user -->|"updates state"| node_userstore
node_user -->|"sets provider"| node_web3
node_user -->|"checks chain"| node_web3config
node_token -->|"calls methods"| node_contract
node_contract -->|"uses address and ABI"| node_contracts
node_contract -->|"uses provider"| node_web3
node_contract -->|"reads token data"| node_chaincontract
node_modal -->|"uses modal state"| node_layoutstore
node_modal -->|"displays details"| node_modalinfo

click node_app "https://github.com/pantos06/fungi-interface/blob/main/src/App.vue"
click node_page "https://github.com/pantos06/fungi-interface/blob/main/src/components/AppPage.vue"
click node_header "https://github.com/pantos06/fungi-interface/blob/main/src/components/AppHeader.vue"
click node_list "https://github.com/pantos06/fungi-interface/blob/main/src/components/InscriptionList.vue"
click node_modal "https://github.com/pantos06/fungi-interface/blob/main/src/components/AppModal.vue"
click node_modalinfo "https://github.com/pantos06/fungi-interface/blob/main/src/components/modals/ModalInfo.vue"
click node_user "https://github.com/pantos06/fungi-interface/blob/main/src/services/user.js"
click node_userstore "https://github.com/pantos06/fungi-interface/blob/main/src/stores/user.js"
click node_layoutstore "https://github.com/pantos06/fungi-interface/blob/main/src/stores/layout.js"
click node_web3modal "https://github.com/pantos06/fungi-interface/blob/main/src/services/web3modal.js"
click node_token "https://github.com/pantos06/fungi-interface/blob/main/src/services/token.js"
click node_contract "https://github.com/pantos06/fungi-interface/blob/main/src/services/contract.js"
click node_web3 "https://github.com/pantos06/fungi-interface/blob/main/src/services/web3.js"
click node_contracts "https://github.com/pantos06/fungi-interface/blob/main/src/const/contracts.js"
click node_web3config "https://github.com/pantos06/fungi-interface/blob/main/src/const/web3.js"
click node_numberutils "https://github.com/pantos06/fungi-interface/blob/main/src/utils/web3.js"

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,node_page,node_header,node_list,node_modal,node_modalinfo toneBlue
class node_user,node_userstore,node_layoutstore,node_web3modal,node_chaincontract toneAmber
class node_token toneMint
class node_contract,node_web3,node_contracts,node_web3config,node_numberutils toneRose
class node_visitor,node_wallet toneIndigo
```

## Components

### User interface

- [App shell](https://github.com/pantos06/fungi-interface/blob/main/src/App.vue): `src/App.vue`
- [Inscription page](https://github.com/pantos06/fungi-interface/blob/main/src/components/AppPage.vue): `src/components/AppPage.vue`
- [Stats header](https://github.com/pantos06/fungi-interface/blob/main/src/components/AppHeader.vue): `src/components/AppHeader.vue`
- [Inscription list](https://github.com/pantos06/fungi-interface/blob/main/src/components/InscriptionList.vue): `src/components/InscriptionList.vue`
- [Modal display](https://github.com/pantos06/fungi-interface/blob/main/src/components/AppModal.vue): `src/components/AppModal.vue`
- [Inscription details](https://github.com/pantos06/fungi-interface/blob/main/src/components/modals/ModalInfo.vue): `src/components/modals/ModalInfo.vue`

### Wallet and account

- [Wallet service](https://github.com/pantos06/fungi-interface/blob/main/src/services/user.js): `src/services/user.js`
- [User state](https://github.com/pantos06/fungi-interface/blob/main/src/stores/user.js): `src/stores/user.js`
- [Layout state](https://github.com/pantos06/fungi-interface/blob/main/src/stores/layout.js): `src/stores/layout.js`
- [Wallet modal](https://github.com/pantos06/fungi-interface/blob/main/src/services/web3modal.js): `src/services/web3modal.js`

### Inscription data

- [Fungi token service](https://github.com/pantos06/fungi-interface/blob/main/src/services/token.js): `src/services/token.js`

### Chain access

- [Contract wrapper](https://github.com/pantos06/fungi-interface/blob/main/src/services/contract.js): `src/services/contract.js`
- [Web3 provider](https://github.com/pantos06/fungi-interface/blob/main/src/services/web3.js): `src/services/web3.js`
- [Contract settings](https://github.com/pantos06/fungi-interface/blob/main/src/const/contracts.js): `src/const/contracts.js`
- [Network settings](https://github.com/pantos06/fungi-interface/blob/main/src/const/web3.js): `src/const/web3.js`
- [Number formatting](https://github.com/pantos06/fungi-interface/blob/main/src/utils/web3.js): `src/utils/web3.js`

### Other components

- **Visitor**
- **Wallet connector**
- **Fungi token contract**

## Connections

- Visitor → App shell: opens
- App shell → Inscription page: renders
- App shell → Stats header: renders
- App shell → Modal display: renders
- App shell → Wallet service: checks connection
- Inscription page → User state: reads state
- Inscription page → Wallet service: requests connection
- Inscription page → Fungi token service: fetches inscriptions
- Inscription page → Inscription list: passes results
- Stats header → User state: reads account
- Stats header → Wallet service: requests connection
- Stats header → Fungi token service: fetches figures
- Stats header → Number formatting: formats balances
- Wallet service → Wallet modal: opens
- Wallet service → Wallet connector: reads account and network
- Wallet service → User state: updates state
- Wallet service → Web3 provider: sets provider
- Wallet service → Network settings: checks chain
- Fungi token service → Contract wrapper: calls methods
- Contract wrapper → Contract settings: uses address and ABI
- Contract wrapper → Web3 provider: uses provider
- Contract wrapper → Fungi token contract: reads token data
- Modal display → Layout state: uses modal state
- Modal display → Inscription details: displays details