React Native theorytheory 0/50 · 0%
Capstone · hard

50. Capstone: architecting a mobile wallet app

Putting the pieces together into one coherent 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.

Check your understanding

  1. 1. What should a wallet app's bootstrap process typically restore?

  2. 2. Why decouple pure logic (formatting, reducers) from components?

  3. 3. Which parts of a wallet app deserve the most rigorous testing?