# spacemeshos/smapp-lite architecture

> Architecture diagram of the GitHub repository spacemeshos/smapp-lite, 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/spacemeshos/smapp-lite
- Repository: https://github.com/spacemeshos/smapp-lite

## Overview

Smapp-Lite is a browser-based Spacemesh wallet. The main user journey is to create or import a wallet, unlock it, select an account and network, inspect account activity, and initiate wallet operations such as sending or receiving. The graph includes account-data refresh and persistence layers, plus documented-by-tree capabilities for key management, transaction types, messaging, and Ledger support. Runtime wiring beyond the sampled files is kept conservative; unsampled feature nodes are represented by their exact enclosing paths.

Main entry points: [`src/App.tsx`](https://github.com/spacemeshos/smapp-lite/blob/main/src/App.tsx) (Application router), [`src/screens/WalletScreen.tsx`](https://github.com/spacemeshos/smapp-lite/blob/main/src/screens/WalletScreen.tsx) (Wallet dashboard), [`src/hooks/useAccountHandlers.ts`](https://github.com/spacemeshos/smapp-lite/blob/main/src/hooks/useAccountHandlers.ts) (Account handlers), [`src/store/useWallet.ts`](https://github.com/spacemeshos/smapp-lite/blob/main/src/store/useWallet.ts) (Wallet state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_wallet_setup["Wallet setup"]
  node_welcome["Welcome and import"]
  node_creation["Wallet creation"]
  node_unlock["Wallet unlock<br/>[UnlockScreen.tsx]"]
end

subgraph group_wallet_ops["Wallet operations"]
  node_wallet_screen["Wallet dashboard<br/>[WalletScreen.tsx]"]
  node_key_accounts["Keys and accounts<br/>[KeyManager.tsx]"]
  node_send["Send and spawn"]
  node_receive["Receive funds<br/>[Receive.tsx]"]
  node_history["Activity and rewards<br/>[TxList.tsx]"]
  node_messages["Sign and verify"]
end

subgraph group_network_data["Network and data"]
  node_network_ui["Network selection"]
  node_refresh["Data refresher"]
  node_handlers["Account handlers"]
  node_api_requests["RPC requests"]
end

subgraph group_state_security["State and security"]
  node_account_data[("Account data<br/>[useAccountData.ts]")]
  node_wallet_store[("Wallet state<br/>[useWallet.ts]")]
  node_crypto["Wallet crypto<br/>[wallet.ts]"]
end

subgraph group_integrations["Device integrations"]
  node_hardware_state["Ledger connection"]
end

node_user(("Wallet user"))
node_app["Application router<br/>[App.tsx]"]
node_rpc{{"Spacemesh RPC"}}
node_local_storage[("Browser storage")]
node_ledger{{"Ledger device"}}

node_user -->|"opens"| node_app
node_app -->|"routes"| node_welcome
node_app -->|"routes"| node_creation
node_app -->|"routes"| node_unlock
node_app -->|"routes"| node_wallet_screen
node_user -->|"imports wallet"| node_welcome
node_user -->|"creates wallet"| node_creation
node_user -->|"unlocks"| node_unlock
node_user -->|"uses"| node_wallet_screen
node_wallet_screen -->|"refreshes data"| node_refresh
node_refresh -->|"requests data"| node_handlers
node_handlers -->|"calls"| node_api_requests
node_api_requests -->|"queries"| node_rpc
node_handlers -->|"stores results"| node_account_data
node_wallet_screen -->|"selects network"| node_network_ui
node_user -->|"manages"| node_key_accounts
node_user -->|"initiates transaction"| node_send
node_user -->|"views receive details"| node_receive
node_user -->|"reviews activity"| node_history
node_user -->|"signs or verifies"| node_messages
node_wallet_store -->|"encrypts wallet"| node_crypto
node_wallet_store -->|"reads and writes"| node_local_storage
node_user -.->|"connects device"| node_hardware_state
node_hardware_state -.->|"communicates"| node_ledger

click node_app "https://github.com/spacemeshos/smapp-lite/blob/main/src/App.tsx"
click node_welcome "https://github.com/spacemeshos/smapp-lite/tree/main/src/screens/welcome"
click node_creation "https://github.com/spacemeshos/smapp-lite/tree/main/src/screens/createWallet"
click node_unlock "https://github.com/spacemeshos/smapp-lite/blob/main/src/screens/UnlockScreen.tsx"
click node_wallet_screen "https://github.com/spacemeshos/smapp-lite/blob/main/src/screens/WalletScreen.tsx"
click node_key_accounts "https://github.com/spacemeshos/smapp-lite/blob/main/src/components/KeyManager.tsx"
click node_send "https://github.com/spacemeshos/smapp-lite/tree/main/src/components/sendTx"
click node_receive "https://github.com/spacemeshos/smapp-lite/blob/main/src/components/Receive.tsx"
click node_history "https://github.com/spacemeshos/smapp-lite/blob/main/src/components/TxList.tsx"
click node_messages "https://github.com/spacemeshos/smapp-lite/tree/main/src/components"
click node_network_ui "https://github.com/spacemeshos/smapp-lite/blob/main/src/components/NetworksSeletion.tsx"
click node_refresh "https://github.com/spacemeshos/smapp-lite/blob/main/src/hooks/useDataRefresher.ts"
click node_handlers "https://github.com/spacemeshos/smapp-lite/blob/main/src/hooks/useAccountHandlers.ts"
click node_api_requests "https://github.com/spacemeshos/smapp-lite/tree/main/src/api/requests"
click node_account_data "https://github.com/spacemeshos/smapp-lite/blob/main/src/store/useAccountData.ts"
click node_wallet_store "https://github.com/spacemeshos/smapp-lite/blob/main/src/store/useWallet.ts"
click node_crypto "https://github.com/spacemeshos/smapp-lite/blob/main/src/utils/wallet.ts"
click node_hardware_state "https://github.com/spacemeshos/smapp-lite/blob/main/src/store/useHardwareWallet.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_welcome,node_creation,node_unlock,node_user toneBlue
class node_wallet_screen,node_key_accounts,node_send,node_receive,node_history,node_messages,node_local_storage toneAmber
class node_network_ui,node_refresh,node_handlers,node_api_requests,node_app toneMint
class node_account_data,node_wallet_store,node_crypto toneRose
class node_hardware_state,node_rpc,node_ledger toneIndigo
```

## Components

### Wallet setup

- [Welcome and import](https://github.com/spacemeshos/smapp-lite/tree/main/src/screens/welcome): `src/screens/welcome`
- [Wallet creation](https://github.com/spacemeshos/smapp-lite/tree/main/src/screens/createWallet): `src/screens/createWallet`
- [Wallet unlock](https://github.com/spacemeshos/smapp-lite/blob/main/src/screens/UnlockScreen.tsx): `src/screens/UnlockScreen.tsx`

### Wallet operations

- [Wallet dashboard](https://github.com/spacemeshos/smapp-lite/blob/main/src/screens/WalletScreen.tsx): `src/screens/WalletScreen.tsx`
- [Keys and accounts](https://github.com/spacemeshos/smapp-lite/blob/main/src/components/KeyManager.tsx): `src/components/KeyManager.tsx`
- [Send and spawn](https://github.com/spacemeshos/smapp-lite/tree/main/src/components/sendTx): `src/components/sendTx`
- [Receive funds](https://github.com/spacemeshos/smapp-lite/blob/main/src/components/Receive.tsx): `src/components/Receive.tsx`
- [Activity and rewards](https://github.com/spacemeshos/smapp-lite/blob/main/src/components/TxList.tsx): `src/components/TxList.tsx`
- [Sign and verify](https://github.com/spacemeshos/smapp-lite/tree/main/src/components): `src/components`

### Network and data

- [Network selection](https://github.com/spacemeshos/smapp-lite/blob/main/src/components/NetworksSeletion.tsx): `src/components/NetworksSeletion.tsx`
- [Data refresher](https://github.com/spacemeshos/smapp-lite/blob/main/src/hooks/useDataRefresher.ts): `src/hooks/useDataRefresher.ts`
- [Account handlers](https://github.com/spacemeshos/smapp-lite/blob/main/src/hooks/useAccountHandlers.ts): `src/hooks/useAccountHandlers.ts`
- [RPC requests](https://github.com/spacemeshos/smapp-lite/tree/main/src/api/requests): `src/api/requests`

### State and security

- [Account data](https://github.com/spacemeshos/smapp-lite/blob/main/src/store/useAccountData.ts): `src/store/useAccountData.ts`
- [Wallet state](https://github.com/spacemeshos/smapp-lite/blob/main/src/store/useWallet.ts): `src/store/useWallet.ts`
- [Wallet crypto](https://github.com/spacemeshos/smapp-lite/blob/main/src/utils/wallet.ts): `src/utils/wallet.ts`

### Device integrations

- [Ledger connection](https://github.com/spacemeshos/smapp-lite/blob/main/src/store/useHardwareWallet.ts): `src/store/useHardwareWallet.ts`

### Other components

- **Wallet user**
- [Application router](https://github.com/spacemeshos/smapp-lite/blob/main/src/App.tsx): `src/App.tsx`
- **Spacemesh RPC**
- **Browser storage**
- **Ledger device**

## Connections

- Wallet user → Application router: opens
- Application router → Welcome and import: routes
- Application router → Wallet creation: routes
- Application router → Wallet unlock: routes
- Application router → Wallet dashboard: routes
- Wallet user → Welcome and import: imports wallet
- Wallet user → Wallet creation: creates wallet
- Wallet user → Wallet unlock: unlocks
- Wallet user → Wallet dashboard: uses
- Wallet dashboard → Data refresher: refreshes data
- Data refresher → Account handlers: requests data
- Account handlers → RPC requests: calls
- RPC requests → Spacemesh RPC: queries
- Account handlers → Account data: stores results
- Wallet dashboard → Network selection: selects network
- Wallet user → Keys and accounts: manages
- Wallet user → Send and spawn: initiates transaction
- Wallet user → Receive funds: views receive details
- Wallet user → Activity and rewards: reviews activity
- Wallet user → Sign and verify: signs or verifies
- Wallet state → Wallet crypto: encrypts wallet
- Wallet state → Browser storage: reads and writes
- Wallet user → Ledger connection: connects device
- Ledger connection → Ledger device: communicates