WDK Wallets

Cross-chain mobile wallet app built with Expo + React Native and Wallet Development Kit(WDK).

Features

• Use a single mnemonic to create both Bitcoin and Sepolia USDT wallets
• Generate a new mnemonic
• Biometric authentication
• Receive Bitcoin and Sepolia USDT
• Send Bitcoin and Sepolia USDT
• See combined Bitcoin and Sepolia USDT balance in USD
• Restore wallet from mnemonic
• Scan QR code
• View transactions and balances for each wallet
• Dark and light mode

Project Info

This project currently supports:

• Ethereum Sepolia testnet with USDT support
• Bitcoin testnet4 with native SegWit wallet support

Network configuration lives in src/config/wdk.ts.

Installation And Setup

Prerequisites

• Node.js 20+
• Xcode (for iOS)
• Android Studio + SDK (for Android)

Install dependencies

npm install

Start Metro (dev client)

npm start

Run on iOS

npx expo run:ios

Run on Android

npx expo run:android

Project Structure

wdk-wallets/
├── index.tsx
├── app.json
├── wdk.config.js
├── src/
│   ├── App.tsx
│   ├── components/        # Reusable UI components
│   ├── config/            # Wallet and asset configuration
│   │   ├── assets.ts
│   │   └── wdk.ts
│   ├── localization/      # i18n resources and setup
│   ├── navigation/        # Navigation containers and routes
│   ├── providers/         # React context providers
│   ├── screens/           # App screens
│   ├── services/          # Network/API integrations
│   ├── storage/           # Local persistence layer
│   ├── theme/             # App theming
│   ├── utils/             # Shared utilities/constants
│   └── wdk-bundle/        # Local WDK bundle typings/runtime
├── ios/                   # iOS native project
└── android/               # Android native project

Architecture

The app follows a modular, layered React Native architecture:

• Presentation layer: screens in src/screens compose reusable UI from src/components.
• Navigation layer: route definitions and navigator setup live in src/navigation.
• Provider layer: cross-cutting app context (WDK, localization, paper theme, toast) is bootstrapped in src/providers.
• Configuration layer: blockchain and asset setup is centralized in src/config.
• Service layer: external data integrations (rates, transactions) are isolated in src/services.
• Persistence layer: local key-value state is managed through MMKV wrappers in src/storage.
• Theme/localization layer: design tokens and i18n resources are managed in src/theme and src/localization.

Typical flow:

1. User interacts with a screen.
2. Screen triggers provider/service logic.
3. Service talks to chain/RPC APIs or storage.
4. Updated state is rendered back through themed React Native Paper components.

React Query-like Data Flow

• Data sources come from WDK hooks and service functions in src/services.
• Loading and refetching are orchestrated in screen-level hooks (mainly src/screens/Home.tsx).
• Manual sync triggers balance refresh, then refetches BTC/USD rate and transfer history.
• MMKV stores hot values (for example BTC price) and app preferences.
• BTC and USDT transfers are normalized into one deduplicated, sorted list for UI.

Third-Party APIs Used

• https://api.coingecko.com: Used to fetch Bitcoin to USD rate (see src/services/bitcoinToUsdRate.ts).

• Sepolia token transactions (src/services/sepoliaTokenTransactions.ts): Used to fetch recent Sepolia USDT transfer history via JSON-RPC eth_getLogs.

• https://tbtc4.trezor.io/api: Used as the Bitcoin testnet4 Blockbook HTTP endpoint.

Theming And UI Components

• The app uses react-native-paper for core UI components and MD3 design tokens.
• Theme wiring is handled through PaperProvider in src/providers/PaperProvider.tsx.
• Both light and dark theme objects are defined in src/theme/PaperTheme.ts.
• Active theme is selected from persisted user preference (StorageKeys.THEME_MODE) using MMKV.
• Shared colors are centralized in src/theme/Colors.ts to keep visual consistency across screens and components.

Local Storage (MMKV)

• The app uses react-native-mmkv as a fast on-device key-value storage layer.
• Storage helpers and typed keys are defined in src/storage/index.ts.
• Persisted app data includes theme mode, language, biometric auth preference, wallet id, address indexes, and BTC price cache.