Skip to main content

Architecture

Altitude Wallet is built as three independent layers that communicate securely. Each layer has a clearly defined responsibility and never steps outside its boundary.

System Architecture​

Altitude Wallet Architecture

How the Layers Work Together​

Browser Extension​

The part you interact with. The extension runs entirely in your browser and is split into isolated contexts:

  • Wallet UI — Your main interface for balances, sending, history, and settings
  • Onboarding — Guides you through wallet creation or import on first launch
  • Approvals — A dedicated screen for reviewing and confirming transactions requested by dApps
  • Background Service — A persistent, isolated process that holds the encrypted vault and handles all signing. The UI never touches your keys directly — it sends requests to the background, which signs and responds

Backend API​

A dedicated service that aggregates blockchain data from multiple sources so you always get accurate, up-to-date information without the extension making dozens of raw blockchain calls:

  • Real-time wallet balances and token prices
  • Full transaction history with decoded details
  • Token metadata and charts
  • Network and RPC endpoint configuration

Data is sourced from Moralis, Zerion, and CoinGecko and served through a single clean API.

Blockchain Service​

A focused library that handles everything that happens on-chain:

  • Building and estimating transactions
  • Broadcasting signed transactions to the network
  • Reading token balances and contract state
  • Managing connections to multiple RPC endpoints with automatic failover

This layer is stateless and has no access to keys — it only works with already-signed data.

Technology Stack​

The project is organized as a monorepo using pnpm workspaces, with each package having its own focused set of dependencies.

Extension​

  • React 19 + TypeScript — UI layer with full type safety
  • MobX — Reactive state management for wallet and UI state
  • Vanilla Extract — Zero-runtime CSS-in-TypeScript styling
  • TanStack Query — Server state, caching, and data fetching
  • Viem — Type-safe EVM interactions and wallet primitives

Backend​

  • Express.js + TypeScript — Lightweight HTTP server
  • Moralis SDK — Web3 data aggregation (balances, history, approvals)
  • Axios — HTTP client for external API communication
  • Swagger / OpenAPI — API contract documentation

Blockchain Service​

  • Viem — Low-level EVM interactions and transaction building
  • Custom Transport — Multi-RPC fallback for resilient chain connectivity
  • Type-Safe ABIs — Contract interfaces with full TypeScript inference

Supported Networks​

  • Ethereum, Arbitrum, Optimism, Base
  • Polygon, BNB Chain, Avalanche