Table of contents

• About
• Tech Stack
• Getting Started
• Features
• Configuration
• Contributing

About

Web3Mobile is an opinionated framework for building mobile Web3 applications. It provides a carefully curated stack of modern tools and libraries, focusing on developer experience, typesafety, and Web3 integration.

This CLI helps you start new projects with our recommended stack without spending hours on setup and configuration.

Tech Stack

The core stack includes:

• React Native - Mobile development framework
• Expo - React Native tooling
• TypeScript - Type safety
• NativeWind - Tailwind CSS for React Native
• Gluestack - UI components
• WalletConnect - Wallet integration
• wagmi - React Hooks for Ethereum
• ethers.js - Ethereum library

Getting Started

To create a new app, run one of the following commands:

npm

npm create web3mobile@latest

yarn

yarn create web3mobile

pnpm

pnpm create web3mobile@latest

Follow the CLI prompts to configure your project.

Current Features

Here are the features that are currently available and production-ready:

🔗 Web3 Integration

• ✅ Wallet connection out of the box
• ✅ Multiple chain support

📱 Mobile-First

• ✅ Native UI components
• ✅ Deep linking

🛠 Developer Experience

• ✅ Type safety throughout
• ✅ Hot reloading
• ✅ Built-in debugging tools

🎨 Styling & UI

• ✅ NativeWind for Tailwind CSS styling
• ✅ Gluestack UI components
• ✅ Dark mode support
• ✅ Customizable themes

Upcoming Features

These features are currently in development and will be available in future releases:

🔗 Web3 Integration (In Development)

• 🚧 Transaction management
• 🚧 Contract interactions
• 🚧 NFT support
• 🚧 Enhanced wallet support
• 🚧 Cross-chain bridging capabilities

📱 Mobile-First (Planned)

• 🚧 Biometric authentication
• 🚧 Push notifications
• 🚧 QR code scanning
• 🚧 Secure enclave integration
• 🚧 Offline support

🛠 Developer Experience (In Progress)

• 🚧 Automated testing setup
• 🚧 CI/CD configuration
• 🚧 Performance monitoring
• 🚧 Error tracking
• 🚧 Analytics integration

🆕 Additional Features (Planning Stage)

• 🚧 DeFi protocol integrations
• 🚧 Social features
• 🚧 Token gating
• 🚧 Fiat on/off ramps
• 🚧 Layer 2 support

Configuration

Environment Variables

Configuration

1. Copy the .env.example file to create your own .env:

cp .env.example .env

2. Fill in the environment variables in your .env file with your own API keys:

• INFURA_API_KEY: Get your key at https://infura.io
• WALLETCONNECT_PROJECT_ID: Create a project at https://cloud.walletconnect.com
• ALCHEMY_API_KEY: Get your key at https://alchemy.com

Each API key can be obtained by creating an account on the respective platforms. These keys are required for the app to interact with various blockchain services.

Network Configuration

// config/networks.ts export const networks = { mainnet: { // ... }, polygon: { // ... } }

Contributing

We love contributors! Please read our Contributing Guide before submitting any Pull Requests.

Development

1. Fork the repository
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Add some AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.