The premier Gnosis Safe migration and portfolio management app for BNB Smart Chain.
Real-time blockchain data · Multi-Safe support · Premium mobile UX
SafeVault is a production-grade mobile application that helps BNB Chain users migrate, manage, and monitor their Gnosis Safe multi-signature wallets. Built with Expo React Native and a Node.js/Express backend, it delivers 100% real on-chain data — no mocks, no simulations.
Whether you're moving from a legacy Safe to a new deployment, monitoring portfolio allocation, tracking live gas prices, or exploring your full transaction history, SafeVault gives you a Bloomberg-grade experience in your pocket.
- Live Safe balance, owners count, and threshold display
- Real-time BNB Smart Chain block height and gas price
- One-tap navigation to migration, verification, and Safe details
- Pull-to-refresh with haptic feedback
- Total portfolio value in USD (BNB + BEP-20 tokens)
- Live BNB price with 24h change indicator (CoinGecko)
- Visual allocation bar showing asset distribution
- Individual token cards with live balances: USDT, USDC, BUSD, ETH, BTCB
- Live BSC gas price with 15-second auto-refresh
- 10-block gas history chart (color-coded: green/yellow/red)
- Cost estimator for common operations (BNB transfer, Safe TX, token transfer, Safe deploy)
- Real BNB price-based USD estimates
- Network stats: block number, RPC status, chain ID
- Full external transaction history from BSCScan
- Internal transaction history (contract calls, Safe executions)
- Incoming/outgoing/contract-interaction direction detection
- Tap-to-open in BscScan browser
- Error transaction highlighting
- Add unlimited Safe addresses with custom labels
- On-chain verification: confirms any address is a Gnosis Safe, shows owners + threshold
- One-tap Safe switching (auto-persisted with AsyncStorage)
- Live balance/owner preview per Safe in the list
- Quick links to BscScan, Gnosis Safe docs, BNB Chain docs
- Clone owners and threshold configuration from source Safe
- Step-by-step guided migration flow
- Post-migration verification (owner set and threshold comparison)
┌─────────────────────────────────────────────────────────┐
│ Expo React Native (iOS/Android/Web) │
│ │
│ app/(tabs)/ contexts/ components/ │
│ ├── index.tsx SafeContext.tsx GradientCard │
│ ├── portfolio.tsx (multi-safe MetricTile │
│ ├── gas.tsx mgmt + persist) StatusBadge │
│ ├── activity.tsx │
│ └── settings.tsx lib/ │
│ query-client.ts │
│ app/ (React Query + │
│ ├── migration.tsx API helpers) │
│ ├── verify.tsx │
│ └── safe-details.tsx │
└────────────────────────┬────────────────────────────────┘
│ REST API (port 5000)
┌────────────────────────▼────────────────────────────────┐
│ Express + TypeScript Backend │
│ │
│ /api/safe/info ← viem + BSC RPC │
│ /api/safe/tokens ← BEP-20 balanceOf │
│ /api/safe/transactions ← BSCScan public API │
│ /api/safe/internal-transactions │
│ /api/safe/verify ← owner/threshold comparison │
│ /api/safe/modules ← Safe module list │
│ /api/safe/address-lookup ← isSafe detection │
│ /api/chain/status ← block + gas price │
│ /api/chain/gas-history ← 10-block history │
│ /api/chain/bnb-price ← CoinGecko live price │
└────────────────────────┬────────────────────────────────┘
│
┌────────────────┼──────────────────┐
▼ ▼ ▼
BSC RPC Node BSCScan API CoinGecko API
(bsc-dataseed1) (public, no key) (public, no key)
| Layer | Technology |
|---|---|
| Mobile Framework | Expo 54 / React Native 0.81 |
| Routing | Expo Router (file-based) |
| State Management | React Query v5 + React Context |
| Blockchain | viem v2 (BSC mainnet) |
| Styling | React Native StyleSheet + Linear Gradient |
| Animations | React Native Reanimated 4 |
| Haptics | expo-haptics |
| Persistence | AsyncStorage |
| Backend | Express 5 + TypeScript |
| Fonts | Inter (400/500/600/700) |
| Icons | @expo/vector-icons (Feather + MaterialCommunity) |
- Node.js 18+
- Expo Go on your iOS or Android device
# Clone the repository
git clone https://github.com/your-username/safevault.git
cd safevault
# Install dependencies
npm installStart both the backend and frontend in separate terminals:
# Terminal 1: Start the API server (port 5000)
npm run server:dev
# Terminal 2: Start the Expo dev server (port 8081)
npm run expo:devThen scan the QR code with Expo Go on your phone.
Create a .env file in the project root:
# Custom BNB RPC endpoint (defaults to bsc-dataseed1.binance.org)
RPC_URL=https://bsc-dataseed1.binance.org
# For migration signing (optional — view-only features work without it)
PRIVATE_KEY=0x...Note: All read-only features (dashboard, portfolio, gas tracker, activity, settings) work without any API keys. BSCScan and CoinGecko public endpoints are used.
All endpoints are prefixed with /api.
| Method | Path | Description |
|---|---|---|
GET |
/safe/info?address= |
Owners, threshold, balance, nonce |
GET |
/safe/tokens?address= |
BEP-20 token balances |
GET |
/safe/transactions?address= |
External transaction history |
GET |
/safe/internal-transactions?address= |
Internal TX history |
POST |
/safe/verify |
Compare old/new Safe configs |
GET |
/safe/modules?address= |
Active Safe modules |
GET |
/safe/address-lookup?address= |
Verify if address is a Safe |
| Method | Path | Description |
|---|---|---|
GET |
/chain/status |
Block number, gas price, RPC status |
GET |
/chain/gas-history |
Last 10 blocks gas data |
GET |
/chain/bnb-price |
Live BNB price + 24h change |
safevault/
├── app/
│ ├── _layout.tsx # Root layout (providers)
│ ├── index.tsx # Redirect → /(tabs)
│ ├── (tabs)/
│ │ ├── _layout.tsx # Tab bar config
│ │ ├── index.tsx # Home / Dashboard
│ │ ├── portfolio.tsx # Portfolio analytics
│ │ ├── gas.tsx # Gas tracker
│ │ ├── activity.tsx # Transaction explorer
│ │ └── settings.tsx # Multi-Safe manager
│ ├── safe-details.tsx # Safe info deep-dive
│ ├── migration.tsx # Migration wizard
│ └── verify.tsx # Migration verifier
├── server/
│ ├── index.ts # Express app bootstrap
│ └── routes.ts # All API route handlers
├── contexts/
│ └── SafeContext.tsx # Multi-Safe state + persistence
├── components/
│ ├── GradientCard.tsx # Navy gradient card
│ ├── MetricTile.tsx # KPI tile component
│ └── StatusBadge.tsx # Status indicator badge
├── constants/
│ └── colors.ts # Design system palette
├── lib/
│ └── query-client.ts # React Query config + fetch helpers
└── assets/ # Images, fonts
SafeVault uses a premium navy-and-gold palette inspired by institutional finance apps:
| Token | Value | Usage |
|---|---|---|
navy |
#0A1628 |
Primary backgrounds, cards |
navyMid |
#1A2D52 |
Secondary backgrounds |
gold |
#E8A838 |
Primary accent, active states |
goldLight |
#F5C563 |
Subtle highlights |
teal |
#2DD4BF |
Secondary accent, CTAs |
green |
#22C55E |
Success states |
red |
#EF4444 |
Error/danger states |
Typography: Inter (400 / 500 / 600 / 700 weights)
This project supports Replit's built-in Expo Launch publishing workflow for iOS App Store submission. Click the Publish button in Replit to trigger the build and submission pipeline.
# Build static Expo bundle + compile server
npm run expo:static:build
npm run server:build
# Run production server (serves both API and static Expo web)
npm run server:prodThe production server serves the compiled Expo web app as static files alongside the REST API on port 5000.
| Network | Chain ID | Status |
|---|---|---|
| BNB Smart Chain Mainnet | 56 | Supported |
| BNB Smart Chain Testnet | 97 | Planned |
- No private keys are stored or transmitted unless explicitly provided via
PRIVATE_KEYenv var - All blockchain reads use public RPC endpoints
- No user data is stored server-side — everything persists locally on-device via AsyncStorage
- Transaction signing is handled client-side (when implemented)
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-feature - Commit your changes:
git commit -m 'Add my feature' - Push to the branch:
git push origin feature/my-feature - Open a Pull Request
MIT © SafeVault Contributors
Built with Expo · Powered by BNB Smart Chain · Data by BSCScan & CoinGecko