Skip to main content
Rainbow’s codebase is organized with a mix of legacy flat structure and modern domain-based organization.

​
Root Structure

rainbow/
├── src/                    # Source code
├── android/                # Android native code
├── ios/                    # iOS native code
├── e2e/                    # End-to-end tests
├── scripts/                # Build and utility scripts
└── package.json

​
Source Directory Layout

​
Top-Level Directories

src/
├── features/           # Domain-organized features (NEW)
│   ├── app-icon/
│   ├── charts/
│   ├── notifications/
│   ├── perps/          # Perpetuals trading
│   ├── polymarket/     # Prediction markets
│   ├── positions/      # Portfolio positions
│   └── rnbw-rewards/   # Rewards system
├── __swaps__/          # Swap feature (@/swaps alias)
└── state/              # Zustand stores by domain

​
Feature Directory Structure

New features follow a consistent structure: 
features/<feature-name>/
├── components/         # or ui/
│   ├── FeatureCard.tsx
│   └── FeatureList.tsx
├── screens/
│   └── FeatureScreen.tsx
├── stores/            # or data/
│   └── featureStore.ts
├── hooks/
│   └── useFeatureData.ts
├── utils/
│   └── helpers.ts
└── types/
    └── index.ts

​
Example: Perps Feature

features/perps/
├── components/
│   ├── PositionCard.tsx
│   ├── OrderForm.tsx
│   └── PriceChart.tsx
├── screens/
│   ├── PerpsAccountScreen.tsx
│   └── PerpsTradeScreen.tsx
├── stores/
│   ├── perpsAccountStore.ts
│   └── perpsPositionsStore.ts
├── hooks/
│   ├── usePerpsAccount.ts
│   └── usePerpsPositions.ts
├── services/
│   └── perpsApi.ts
├── utils/
│   ├── calculations.ts
│   └── formatting.ts
└── charts-plugin/
    └── indicators.ts

​
State Directory Structure

State stores are organized by domain: 
state/
├── internal/                 # Store creators
│   ├── createRainbowStore.ts
│   ├── createQueryStore.ts
│   ├── createDerivedStore.ts
│   └── types.ts
├── wallets/
│   ├── walletsStore.ts
│   ├── useWalletSummaryStore.ts
│   └── pinnedWalletsStore.ts
├── swaps/
│   └── swapsStore.ts
├── nfts/
│   ├── createNftsStore.ts
│   └── openCollectionsStore.ts
├── navigation/
│   └── navigationStore.ts
├── browser/
│   ├── browserStore.ts
│   └── favoriteDappsStore.ts
└── claimables/
    └── airdropsStore.ts

navigation/
├── Navigation.tsx           # Core navigation logic
├── routesNames.ts          # Route constants
├── types.ts                # Navigation types
├── bottom-sheet/           # Bottom sheet navigator
│   ├── index.ts
│   ├── router.ts
│   ├── actions.ts
│   └── hooks/
│       └── useBottomSheetNavigator.ts
├── createVirtualNavigator.ts
└── virtualNavigators.ts

​
Storage Structure

storage/
├── index.ts                # Storage instances
├── schema.ts               # Type definitions
└── legacy.ts               # Legacy storage migration

​
Analytics Structure

analytics/
├── index.ts                # Analytics class
├── event.ts                # Event definitions
├── userProperties.ts       # User property types
├── getWalletContext.ts     # Wallet context helper
└── utils.ts                # Analytics utilities

​
Logger Structure

logger/
├── index.ts                # Logger class
├── sentry.ts               # Sentry integration
├── logDump.ts              # In-memory log buffer
└── debugContext.ts         # Debug context filtering

​
Import Aliases

Rainbow uses TypeScript path aliases for cleaner imports: 
{
  "@/*": ["src/*"],
  "@/swaps": ["src/__swaps__"],
  "@/state": ["src/state"],
  "@/features": ["src/features"]
}

​
Usage

// Instead of:
import { logger } from '../../../logger';

// Use:
import { logger } from '@/logger';

​
File Naming Conventions

// Components use PascalCase
MyComponent.tsx
UserProfile.tsx
TokenList.tsx

​
Migration Patterns

​
From Legacy to Domain Organization

1

Identify Domain

Determine which domain/feature the code belongs to (e.g., perps, polymarket, positions)
2

Create Feature Directory

Create a new directory under src/features/<feature-name>/
3

Organize by Layer

Move files into appropriate subdirectories:
  • UI components → components/ or ui/
  • State stores → stores/ or data/
  • Utilities → utils/
  • Types → types/
4

Update Imports

Update all import paths to use the new structure

​
Example Migration

Before
// src/components/PerpsPositionCard.tsx
import { formatCurrency } from '@/helpers/utilities';
import { usePerpsData } from '@/hooks/usePerpsData';
After
// src/features/perps/components/PositionCard.tsx
import { formatCurrency } from '@/features/perps/utils/formatting';
import { usePerpsData } from '@/features/perps/hooks/usePerpsData';

​
Key Files to Know

Root application component that sets up providers and navigation
Environment detection and feature flags:
  • IS_DEV - Development mode
  • IS_PROD - Production mode
  • IS_TEST - Test environment
  • IS_IOS - iOS platform
  • IS_ANDROID - Android platform
Central registry of all navigation routes
TypeScript types for store creators

​
Next Steps

State Management

Learn about Rainbow’s state management patterns

Navigation System

Understand the navigation architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us