50. Capstone: architecting a mobile wallet app

A production mobile wallet composes everything covered so far: navigation between accounts/send/receive/history screens, a secure-storage-backed key manager, a multi-chain config layer, a queued/retryable transaction pipeline, and careful UX around fees and confirmations.

interface AppState {
  chains: Record<number, ChainConfig>;
  activeChainId: number;
  address: string | null;
  pendingTxs: PendingTx[];
}

async function bootstrapApp(): Promise<AppState> {
  const address = await SecureStore.getItemAsync("walletAddress");
  const pending = JSON.parse((await AsyncStorage.getItem("pendingTxs")) ?? "[]");
  return { chains: CHAINS, activeChainId: 8453, address, pendingTxs: pending };
}

The architecture should keep pure, testable logic (formatting, validation, reducers, chain config) decoupled from React components and native APIs, so the hardest-to-get-right code — money math, signing, persistence — can be unit tested exhaustively without ever mounting a screen.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges