# kasware-wallet/extension architecture

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

- Interactive diagram: https://gitdiagram.com/kasware-wallet/extension
- Repository: https://github.com/kasware-wallet/extension

## Overview

KasWare is a Kaspa browser-extension wallet. A dApp request enters through the page-provider bridge, is routed by the extension background to a provider method, and reaches wallet operations; the wallet also uses OpenAPI services. Users manage accounts and settings, inspect assets, and create or approve transactions in the extension UI. The graph preserves major KRC-20, NFT/KNS, and swap capabilities visible in the source tree. Some UI-to-background and external-service connections are inferred from the product shape, so they are dashed and uncited.

Main entry points: [`src/ui/state/index.ts`](https://github.com/kasware-wallet/extension/blob/main/src/ui/state/index.ts) (UI state), [`src/background/index.ts`](https://github.com/kasware-wallet/extension/blob/main/src/background/index.ts) (Background router), [`src/background/controller/wallet.ts`](https://github.com/kasware-wallet/extension/blob/main/src/background/controller/wallet.ts) (Wallet operations), [`src/background/service/openapi.ts`](https://github.com/kasware-wallet/extension/blob/main/src/background/service/openapi.ts) (Kaspa API access)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bridge["Extension bridge"]
  node_page_provider["Page provider<br/>[index.ts]"]
  node_content_script["Content script<br/>[index.ts]"]
  node_background["Background router<br/>[index.ts]"]
  node_provider_controller["Provider methods<br/>[controller.ts]"]
end

subgraph group_wallet["Wallet core"]
  node_wallet_controller["Wallet operations<br/>[wallet.ts]"]
  node_keyrings["Keyrings"]
  node_preferences["Preferences<br/>[preference.ts]"]
  node_permissions["Site permissions<br/>[permission.ts]"]
  node_openapi["Kaspa API access<br/>[openapi.ts]"]
  node_extension_storage[("Extension storage<br/>[storage.ts]")]
end

subgraph group_ui["Wallet interface"]
  node_ui_entry["Extension UI<br/>[index.tsx]"]
  node_ui_state["UI state<br/>[index.ts]"]
  node_account_screens["Account screens"]
  node_transaction_screens["Transaction screens"]
  node_approval_screens["Approval screens"]
end

subgraph group_assets["Asset features"]
  node_asset_views["Wallet asset views"]
  node_krc20["KRC-20"]
  node_nft_kns["NFT and KNS"]
  node_swap["Swap features"]
end

node_dapp(("dApp"))
node_rpc_service[("Kaspa RPC services")]

node_dapp -.->|"sends requests"| node_page_provider
node_content_script -.->|"loads provider"| node_page_provider
node_background -->|"routes requests"| node_provider_controller
node_provider_controller -->|"calls wallet"| node_wallet_controller
node_background -->|"checks connections"| node_permissions
node_background -->|"initializes"| node_openapi
node_background -->|"loads and saves"| node_extension_storage
node_wallet_controller -->|"uses API service"| node_openapi
node_ui_entry -->|"initializes store"| node_ui_state
node_ui_entry -.->|"requests wallet methods"| node_background
node_account_screens -.->|"updates account state"| node_ui_state
node_transaction_screens -.->|"uses transaction state"| node_ui_state
node_approval_screens -.->|"uses approval state"| node_ui_state
node_asset_views -.->|"uses wallet state"| node_ui_state
node_krc20 -.->|"requests token operations"| node_wallet_controller
node_nft_kns -.->|"presents collectibles"| node_asset_views
node_swap -.->|"uses transaction state"| node_ui_state
node_openapi -.->|"communicates with"| node_rpc_service
node_wallet_controller -->|"uses keyrings"| node_keyrings
node_ui_state -.->|"syncs settings"| node_preferences

click node_page_provider "https://github.com/kasware-wallet/extension/blob/main/src/content-script/pageProvider/index.ts"
click node_content_script "https://github.com/kasware-wallet/extension/blob/main/src/content-script/index.ts"
click node_background "https://github.com/kasware-wallet/extension/blob/main/src/background/index.ts"
click node_provider_controller "https://github.com/kasware-wallet/extension/blob/main/src/background/controller/provider/controller.ts"
click node_wallet_controller "https://github.com/kasware-wallet/extension/blob/main/src/background/controller/wallet.ts"
click node_keyrings "https://github.com/kasware-wallet/extension/tree/main/src/background/service/keyringclass"
click node_preferences "https://github.com/kasware-wallet/extension/blob/main/src/background/service/preference.ts"
click node_permissions "https://github.com/kasware-wallet/extension/blob/main/src/background/service/permission.ts"
click node_openapi "https://github.com/kasware-wallet/extension/blob/main/src/background/service/openapi.ts"
click node_extension_storage "https://github.com/kasware-wallet/extension/blob/main/src/background/webapi/storage.ts"
click node_ui_entry "https://github.com/kasware-wallet/extension/blob/main/src/ui/index.tsx"
click node_ui_state "https://github.com/kasware-wallet/extension/blob/main/src/ui/state/index.ts"
click node_account_screens "https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Account"
click node_transaction_screens "https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Wallet"
click node_approval_screens "https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Approval"
click node_asset_views "https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Main/WalletTabScreen"
click node_krc20 "https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/KRC20"
click node_nft_kns "https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Main/kns-kspr"
click node_swap "https://github.com/kasware-wallet/extension/tree/main/src/ui/state/transactions/chainge"

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_page_provider,node_content_script,node_background,node_provider_controller toneBlue
class node_wallet_controller,node_keyrings,node_preferences,node_permissions,node_openapi,node_extension_storage,node_rpc_service toneAmber
class node_ui_entry,node_ui_state,node_account_screens,node_transaction_screens,node_approval_screens toneMint
class node_asset_views,node_krc20,node_nft_kns,node_swap toneRose
class node_dapp toneIndigo
```

## Components

### Extension bridge

- [Page provider](https://github.com/kasware-wallet/extension/blob/main/src/content-script/pageProvider/index.ts): `src/content-script/pageProvider/index.ts`
- [Content script](https://github.com/kasware-wallet/extension/blob/main/src/content-script/index.ts): `src/content-script/index.ts`
- [Background router](https://github.com/kasware-wallet/extension/blob/main/src/background/index.ts): `src/background/index.ts`
- [Provider methods](https://github.com/kasware-wallet/extension/blob/main/src/background/controller/provider/controller.ts): `src/background/controller/provider/controller.ts`

### Wallet core

- [Wallet operations](https://github.com/kasware-wallet/extension/blob/main/src/background/controller/wallet.ts): `src/background/controller/wallet.ts`
- [Keyrings](https://github.com/kasware-wallet/extension/tree/main/src/background/service/keyringclass): `src/background/service/keyringclass`
- [Preferences](https://github.com/kasware-wallet/extension/blob/main/src/background/service/preference.ts): `src/background/service/preference.ts`
- [Site permissions](https://github.com/kasware-wallet/extension/blob/main/src/background/service/permission.ts): `src/background/service/permission.ts`
- [Kaspa API access](https://github.com/kasware-wallet/extension/blob/main/src/background/service/openapi.ts): `src/background/service/openapi.ts`
- [Extension storage](https://github.com/kasware-wallet/extension/blob/main/src/background/webapi/storage.ts): `src/background/webapi/storage.ts`

### Wallet interface

- [Extension UI](https://github.com/kasware-wallet/extension/blob/main/src/ui/index.tsx): `src/ui/index.tsx`
- [UI state](https://github.com/kasware-wallet/extension/blob/main/src/ui/state/index.ts): `src/ui/state/index.ts`
- [Account screens](https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Account): `src/ui/pages/Account`
- [Transaction screens](https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Wallet): `src/ui/pages/Wallet`
- [Approval screens](https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Approval): `src/ui/pages/Approval`

### Asset features

- [Wallet asset views](https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Main/WalletTabScreen): `src/ui/pages/Main/WalletTabScreen`
- [KRC-20](https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/KRC20): `src/ui/pages/KRC20`
- [NFT and KNS](https://github.com/kasware-wallet/extension/tree/main/src/ui/pages/Main/kns-kspr): `src/ui/pages/Main/kns-kspr`
- [Swap features](https://github.com/kasware-wallet/extension/tree/main/src/ui/state/transactions/chainge): `src/ui/state/transactions/chainge`

### Other components

- **dApp**
- **Kaspa RPC services**

## Connections

- dApp → Page provider: sends requests
- Content script → Page provider: loads provider
- Background router → Provider methods: routes requests (evidence: `src/background/index.ts`)
- Provider methods → Wallet operations: calls wallet (evidence: `src/background/controller/provider/controller.ts`)
- Background router → Site permissions: checks connections (evidence: `src/background/index.ts`)
- Background router → Kaspa API access: initializes (evidence: `src/background/index.ts`)
- Background router → Extension storage: loads and saves (evidence: `src/background/index.ts`)
- Wallet operations → Kaspa API access: uses API service (evidence: `src/background/controller/wallet.ts`)
- Extension UI → UI state: initializes store (evidence: `src/ui/index.tsx`)
- Extension UI → Background router: requests wallet methods
- Account screens → UI state: updates account state
- Transaction screens → UI state: uses transaction state
- Approval screens → UI state: uses approval state
- Wallet asset views → UI state: uses wallet state
- KRC-20 → Wallet operations: requests token operations
- NFT and KNS → Wallet asset views: presents collectibles
- Swap features → UI state: uses transaction state
- Kaspa API access → Kaspa RPC services: communicates with
- Wallet operations → Keyrings: uses keyrings (evidence: `src/background/controller/wallet.ts`)
- UI state → Preferences: syncs settings