Expo Swap Template

A production-ready React Native template for building token swap applications on the Monad blockchain. This template provides a complete mobile DEX interface with embedded wallet functionality powered by Privy.

Features

• 🔄 Token Swapping - Exchange tokens on Monad testnet with real-time quotes
• 👛 Embedded Wallet - Seamless wallet creation and management via Privy
• 📱 Cross-Platform - Works on iOS and Android using React Native & Expo
• 🎨 Modern UI - Beautiful dark/light theme with smooth animations
• ⚡ Real-time Updates - Auto-refreshing quotes with visual countdown
• 🔐 Secure - Email-based authentication with secure key storage

Supported Tokens

• MON - Native Monad token
• USDC - USD Coin
• USDT - Tether
• WBTC - Wrapped Bitcoin
• WETH - Wrapped Ethereum
• WSOL - Wrapped Solana
• WMON - Wrapped Monad

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI
• iOS Simulator (for iOS development) or Android Studio (for Android development)

Installation

1. Clone the repository:

git clone https://github.com/monad-developers/expo-swap-template.git
cd expo-swap-template

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env file in the project root with:

EXPO_PUBLIC_PRIVY_APP_ID=your_privy_app_id
EXPO_PUBLIC_PRIVY_CLIENT_ID=your_privy_client_id

Getting Privy Credentials

1. Visit Privy Dashboard
2. Create a new app or use an existing one
3. Navigate to Settings > API Keys
4. Copy your App ID and Client ID

Running the App

Development Server

npm start

iOS

npm run ios

Android

npm run android

Web (Experimental)

npm run web

Native Builds

For iOS:

npx expo run:ios

For Android:

npx expo run:android

Building for Production

iOS

eas build --platform ios

Android

eas build --platform android

Project Structure

expo-swap-template/
├── app/                    # Main application screens
│   ├── _layout.tsx        # Root layout with providers
│   └── index.tsx          # Main swap interface
├── components/            # Reusable UI components
│   ├── SwapInput.tsx      # Token input/output component
│   ├── TokenSelector.tsx  # Token selection modal
│   └── WalletConnect.tsx  # Wallet connection component
├── services/              # Business logic
│   ├── realSwapService.ts # DEX swap implementation
│   └── web3Service.ts     # Blockchain interactions
├── hooks/                 # Custom React hooks
├── constants/             # App configuration
├── config/                # Token configuration
└── ios/android/          # Native platform code

Key Technologies

• React Native - Cross-platform mobile framework
• Expo - Development platform for React Native
• Privy - Embedded wallet and authentication
• Viem & Wagmi - Web3 interaction libraries
• TypeScript - Type-safe development

Configuration

Slippage Tolerance

Default: 2.5% Location: constants/swap.ts

Transaction Deadline

Default: 20 minutes Location: constants/swap.ts

Supported Networks

Currently configured for Monad Testnet. To add more networks, update:

• services/web3Service.ts
• app/_layout.tsx (Privy configuration)

Learn more

To learn more about developing your project with Expo, Privy, and Monad look at the following resources:

• Expo documentation
• Expo guides
• Learn Expo tutorial
• Creating embedded wallet on the client side
• Sending transactions using embedded wallet
• Signing transactions using embedded wallet
• Tooling and infra options on Monad

Join the community

• Discord community: Chat with fellow Monad developers and ask questions.