Solid 💰

A next-generation crypto savings app that combines traditional banking convenience with DeFi innovation. Earn high yields on your crypto assets while maintaining security through advanced wallet infrastructure and account abstraction.

🎯 Overview

Solid is a React Native/Expo mobile application that provides users with:

High-yield crypto savings with real-time APY calculation
Smart wallet infrastructure using passkey authentication
DeFi features including swaps, staking, and liquidity provision
Banking-like experience with virtual debit cards and bank transfers
Multi-chain support across Ethereum, Fuse Network, Polygon, Base, and Arbitrum

✨ Key Features

🔐 Smart Wallet & Security

Passkey Authentication: WebAuthn/FIDO2 standards eliminate seed phrase risks
Account Abstraction: Safe smart accounts with ERC-4337 implementation
Hardware Security: Device secure enclave for key protection
Turnkey Integration: Secure custody and key management infrastructure
Persona KYC: Identity verification and compliance

💎 Crypto Savings & DeFi

High-Yield Savings: Earn competitive APY on various tokens
Automated Compounding: Real-time yield calculations and compound interest
Token Swapping: Integrated Voltage DEX using Algebra Protocol
Cross-Chain Bridging: Seamless asset transfers between networks
Staking & Liquidity: Earn additional rewards through DeFi protocols

🏦 Banking Features

Virtual Debit Card: Spend crypto anywhere cards are accepted
Bank Transfers: ACH/wire integration for fiat on/off ramps
P2P Payments: Send crypto via username or address
Transaction History: Comprehensive activity tracking and analytics

🎮 Rewards & Gamification

Points System: Earn points for app activities
Referral Program: Invite friends and earn rewards together
Achievement System: Unlock benefits through engagement
Rewards Integration: Additional reward mechanisms

📊 Analytics & Support

Amplitude Analytics: User behavior tracking and insights
Firebase Analytics: Event tracking and user engagement
Sentry Integration: Error monitoring and performance tracking
Intercom Support: In-app customer support and messaging

🛠️ Technology Stack

Core Technologies

React Native 0.79.5 with Expo 53.0.20
TypeScript with strict type checking
NativeWind (Tailwind CSS for React Native)

Web3 Infrastructure

Wagmi 2.15.7 for Ethereum interactions
Viem for blockchain utilities and type safety
Permissionless.js for account abstraction (ERC-4337)
Safe smart wallet ecosystem
Turnkey SDK for secure key management

State & Data Management

Zustand 5.0.6 for global state management
React Query (@tanstack/react-query 5.83.0) for server state
Apollo Client 3.13.8 for GraphQL and The Graph integration
MMKV 3.3.0 for performant local storage

DeFi Integration

ThirdWeb 5.105.21 for Web3 development
CryptoAlgebra Fuse SDK for DEX functionality
Voltage Finance SDK 1.0.5 for additional DEX features
LiFi integration for cross-chain bridging
Multiple networks: Ethereum, Fuse, Polygon, Base, Arbitrum

🚀 Getting Started

Prerequisites

Node.js 20+ (Node.js 18 reached EOL in April 2025)
iOS Simulator or Android Emulator
Expo CLI

Installation

Clone the repository

git clone https://github.com/Solid-Money/solid-ui.git
cd solid-ui

Install dependencies
```
npm install
```

Environment setup

cp .env.example .env.local
# Configure your environment variables

Start the development server
```
npx expo start
```
Launch the app
- Press i for iOS simulator
- Press a for Android emulator
- Scan QR code with Expo Go app for physical device testing

📱 Development

Project Structure

├── app/                    # File-based routing (Expo Router)
│   ├── (protected)/       # Authenticated routes
│   │   └── (tabs)/        # Main tab navigation
│   ├── _layout.tsx        # Root layout
│   ├── register.tsx       # User registration
│   └── welcome.tsx        # Onboarding
├── components/            # Reusable UI components
├── lib/                   # Core utilities and APIs
├── hooks/                 # Custom React hooks
├── store/                 # Zustand state management
├── constants/             # App constants and configuration
├── assets/                # Images and static files
└── generated/             # Auto-generated files (GraphQL, Wagmi)

Key Directories

app/(protected)/(tabs)/: Main authenticated screens (Home, Savings, Activity, etc.)
components/: Organized by feature (Dashboard, Wallet, BankTransfer, etc.)
lib/: Core business logic, API calls, and Web3 utilities
hooks/: Custom hooks for Web3, authentication, and data fetching
store/: Global state management with Zustand

Available Scripts

npm start             # Start Expo development server
npm run android       # Run on Android emulator  
npm run ios          # Run on iOS simulator
npm run web          # Run in web browser
npm run lint         # Run ESLint with auto-fix (uses expo lint)
npm run codegen      # Generate GraphQL types from schema
npm run wagmi-generate # Generate Wagmi hooks from contracts

🖼️ Asset Management

The project uses a hybrid asset management system optimized for both Mobile (local/offline) and Web (CDN/caching).

How to Add an Asset

Place the file: Add your image, animation, or font to the appropriate subdirectory in the assets/ folder.
Update the Registry: Run the following command to update the type-safe asset registry:
```
npm run assets:update 
```
Note: This runs automatically on npm install and during builds.

How to Use Assets

Always use the getAsset or getImageUrl helpers from lib/assets.ts. Do not use require() directly in your components.

Standard Usage (Components):

import { getAsset } from "@/lib/assets"; 
import { Image } from "expo-image"; 

<Image source={getAsset("images/logo.png")} style={{ width: 100, height: 100 }} />

String URL Usage (External links/CSS):

import { getImageUrl } from "@/lib/assets"; 

const url = getImageUrl("images/banner.png");

How it Works

Mobile: getAsset returns the local require() module. Assets are bundled into the app for offline support.
Web (Production): getAsset returns a CDN URL pointing to your domain.
Caching: Assets on Web are served with a 30-day cache. To prevent stale content, the system automatically appends a content-based hash to the URL (e.g., logo.png?v=a1b2c3d4). The hash only changes if the file content changes.

🔧 Configuration

Environment Variables

Key environment variables (see .env.example):

EXPO_PUBLIC_BASE_URL: Frontend domain URL (used for redirects and assets on Web)
EXPO_PUBLIC_ALCHEMY_API_KEY: Alchemy API key for blockchain data
EXPO_PUBLIC_ETHEREUM_API_KEY: Ethereum API key
EXPO_PUBLIC_PIMLICO_API_KEY: Pimlico paymaster API key
EXPO_PUBLIC_FLASH_API_BASE_URL: Solid API configuration
EXPO_PUBLIC_FLASH_ANALYTICS_API_BASE_URL: Solid analytics endpoint
EXPO_PUBLIC_BRIDGE_AUTO_DEPOSIT_ADDRESS: Bridge auto-deposit address
EXPO_PUBLIC_AMPLITUDE_API_KEY: Amplitude analytics
EXPO_PUBLIC_INFO_GRAPH: The Graph endpoint for project data
EXPO_PUBLIC_ALGEBRA_INFO_GRAPH: The Graph endpoint for DEX data
EXPO_PUBLIC_COIN_GECKO_API_KEY: CoinGecko API for price data
EXPO_PUBLIC_THIRDWEB_CLIENT_ID: ThirdWeb client configuration
EXPO_PUBLIC_TURNKEY_API_BASE_URL: Turnkey API endpoint
EXPO_PUBLIC_TURNKEY_ORGANIZATION_ID: Turnkey organization ID
EXPO_PUBLIC_REOWN_PROJECT_ID: Reown (formerly WalletConnect) project ID
EXPO_PUBLIC_PASSKEY_CERTIFICATES_HOST: Passkey certificates host
EXPO_PUBLIC_WAITLIST_API_BASE_URL: Waitlist API endpoint
EXPO_PUBLIC_ENVIRONMENT: Environment configuration
GOOGLE_SERVICES_JSON/PLIST: Firebase configuration files
SENTRY_AUTH_TOKEN: Sentry authentication token

Blockchain Configuration

Ethereum Mainnet: Primary network for high-value transactions
Fuse Network: Low-cost transactions and yield farming
Layer 2s: Polygon, Base, Arbitrum for optimized costs
Custom RPCs: Configured via Alchemy for reliability

🧪 Testing

Testing Setup

Currently, the project does not have a formal test suite configured. Testing infrastructure needs to be set up.

Recommended Testing Strategy

Unit Tests: Components and utilities (Jest + React Native Testing Library)
Integration Tests: Web3 interactions and API calls
E2E Tests: Critical user flows with Detox or Maestro

Setup Testing (TODO)

# Install testing dependencies
npm install --save-dev jest @testing-library/react-native
# Add test scripts to package.json
# Create __tests__ directories

🚢 Deployment

Build Configuration

The app uses EAS Build for deployment:

# Development build
eas build --profile development

# Preview build  
eas build --profile preview

# Production build
eas build --profile production

App Store Deployment

iOS: Automated via EAS Submit to App Store Connect
Android: Play Console deployment with internal track testing
OTA Updates: Expo Updates for JavaScript bundle updates

🔐 Security

Authentication Flow

Passkey Registration: WebAuthn credential creation
Turnkey Integration: Secure key generation and storage
Smart Account Creation: Safe wallet deployment
Multi-factor Protection: Device biometrics + passkey

Best Practices

All sensitive operations require user confirmation
Private keys never leave secure hardware
GraphQL operations are rate-limited and validated
Smart contracts undergo regular audits

🤝 Contributing

Development Workflow

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Make changes following coding standards
Run tests and linting (npm run lint && npm test)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request

Code Standards

TypeScript: Strict typing required
ESLint: Follow Expo configuration
Prettier: Auto-formatting enabled
Conventional Commits: Use semantic commit messages

📄 License

🆘 Support

For technical issues or questions:

Create an issue in the repository
Contact the development team
Check the documentation wiki

Built with ❤️ by the Solid team

FilesExpand file tree

README.md

Latest commit

History