diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md new file mode 100644 index 0000000..32de303 --- /dev/null +++ b/ARCHITECTURE.md @@ -0,0 +1,219 @@ +# OpenSVM Mobile Architecture + +This document provides a detailed overview of the OpenSVM Mobile application architecture, explaining the project structure, key components, data flow, and design patterns. + +## Application Architecture + +OpenSVM Mobile follows a modular architecture with clear separation of concerns: + +```mermaid +graph TD + A[App Entry] --> B[Navigation] + B --> C[Screens] + C --> D[Components] + D --> E[Hooks] + E --> F[Stores] + F --> G[API/WebSocket] +``` + +### Key Architectural Components + +1. **Navigation (Expo Router)**: Handles routing and navigation between screens +2. **Screens**: Main UI views for different app sections +3. **Components**: Reusable UI elements +4. **Hooks**: Custom React hooks for business logic and data fetching +5. **Stores**: Global state management using Zustand +6. **API/WebSocket**: Communication with backend services + +## Directory Structure + +### `/app` Directory + +The `/app` directory uses Expo Router's file-based routing system: + +- `_layout.tsx`: Root layout component with global styling and navigation setup +- `(tabs)/_layout.tsx`: Tab-based navigation configuration +- `(tabs)/index.tsx`: Explorer screen (home) +- `(tabs)/validators.tsx`: Validator monitoring screen +- `(tabs)/solanow.tsx`: SIMD-0228 proposal screen +- `(tabs)/wallet.tsx`: Wallet management screen +- `(tabs)/ai.tsx`: AI Assistant screen +- `account/[id].tsx`: Dynamic route for account details +- `transaction/[id].tsx`: Dynamic route for transaction details + +### `/components` Directory + +Reusable UI components organized by functionality: + +- `NetworkStats.tsx`: Displays blockchain network statistics +- `ValidatorAnalytics.tsx`: Shows validator performance metrics +- `AIAssistant.tsx`: AI chat interface for user assistance +- `SearchBar.tsx`: Search functionality for blockchain data +- `WalletButton.tsx`: Wallet connection button +- `charts/`: Visualization components for data display + - `LineChart.tsx`: Line chart for time-series data + - `GlobeVisualization.tsx`: Global map of validator distribution + - `MetricsGrid.tsx`: Grid display of performance metrics + +### `/hooks` Directory + +Custom React hooks for data fetching and business logic: + +- `use-validator-metrics.ts`: Fetches and processes validator performance data +- `use-network-stats.ts`: Retrieves blockchain network statistics +- `use-websocket.ts`: WebSocket connection management +- `use-github-discussions.ts`: Fetches GitHub discussion data for SIMD proposal + +### `/stores` Directory + +Zustand stores for global state management: + +- `wallet-store.ts`: Manages wallet connection state and address +- `theme-store.ts`: Handles application theme settings + +### `/constants` Directory + +Application-wide constants: + +- `colors.ts`: Color palette for UI elements +- `typography.ts`: Typography settings + +### `/utils` Directory + +Utility functions: + +- `address-utils.ts`: Helper functions for Solana address formatting + +### `/types` Directory + +TypeScript type definitions: + +- `blockchain.ts`: Types for blockchain data structures + +### `/mocks` Directory + +Mock data for development and testing: + +- `github-thread.ts`: Mock GitHub discussion data + +## Data Flow + +### Validator Monitoring Flow + +```mermaid +sequenceDiagram + participant User + participant UI as Validator Screen + participant Hook as useValidatorMetrics + participant WebSocket + participant Store as State Store + + User->>UI: Open Validators Tab + UI->>Hook: Request Validator Data + Hook->>WebSocket: Connect to WebSocket + WebSocket-->>Hook: Stream Validator Updates + Hook-->>Store: Update Validator State + Store-->>UI: Render Updated Data + User->>UI: Select Validator + UI->>Hook: Get Validator Details + Hook-->>UI: Return Detailed Data + UI-->>User: Display Validator Details +``` + +### Wallet Connection Flow + +```mermaid +sequenceDiagram + participant User + participant UI as Wallet Screen + participant Store as Wallet Store + participant Storage as AsyncStorage + + User->>UI: Open Wallet Tab + UI->>Store: Check Connection Status + Store->>Storage: Retrieve Saved State + Storage-->>Store: Return Saved State + Store-->>UI: Display Connection Status + User->>UI: Press Connect Button + UI->>Store: Call connect() + Store->>Storage: Save Connection State + Store-->>UI: Update UI with Connected State + UI-->>User: Show Wallet Details +``` + +## State Management + +The application uses Zustand for state management with the following stores: + +1. **Wallet Store**: Manages wallet connection state + - `isConnected`: Boolean indicating connection status + - `address`: Connected wallet address + - `connect()`: Function to connect wallet + - `disconnect()`: Function to disconnect wallet + +2. **Theme Store**: Manages application theme + - `theme`: Current theme (light/dark) + - `setTheme()`: Function to change theme + +## UI Component Hierarchy + +```mermaid +graph TD + A[App Layout] --> B[Tab Navigation] + B --> C1[Explorer Screen] + B --> C2[Validators Screen] + B --> C3[SIMD Screen] + B --> C4[Wallet Screen] + B --> C5[AI Screen] + + C1 --> D1[SearchBar] + C1 --> D2[NetworkStats] + C1 --> D3[ValidatorAnalytics] + C1 --> D4[RecentBlocks] + C1 --> D5[AIAssistant] + + C2 --> E1[MetricsGrid] + C2 --> E2[GlobeVisualization] + C2 --> E3[LineChart] + C2 --> E4[ValidatorListItem] + + C3 --> F1[TabNavigation] + F1 --> F2[EmissionMechanism] + F1 --> F3[StakingCalculator] + F1 --> F4[Discussion] + + C4 --> G1[WalletConnect] + C4 --> G2[WalletDetails] + + C5 --> H1[AIAssistant] +``` + +## Key Features Implementation + +### Blockchain Explorer + +The Explorer screen (`app/(tabs)/index.tsx`) provides a search interface for blockchain data and displays network statistics. It uses the `SearchBar` component for queries and `NetworkStats` to show current blockchain metrics. + +### Validator Monitoring + +The Validators screen (`app/(tabs)/validators.tsx`) displays real-time validator performance metrics. It uses the `useValidatorMetrics` hook to fetch and process validator data, and visualizes it using various chart components. + +### SIMD-0228 Proposal + +The SIMD screen (`app/(tabs)/solanow.tsx`) provides an interactive simulation of the proposed market-based emission mechanism. It includes formula visualization, interactive sliders, and a staking calculator. + +### Wallet Management + +The Wallet screen (`app/(tabs)/wallet.tsx`) allows users to connect their Solana wallet and view their address. It uses the `useWalletStore` for state management and persists connection state using AsyncStorage. + +### AI Assistant + +The AI Assistant (`app/(tabs)/ai.tsx` and `components/AIAssistant.tsx`) provides a chat interface for users to ask questions about Solana and receive assistance with using the application. + +## Future Architecture Considerations + +1. **Real API Integration**: Replace mock data with real API endpoints for blockchain data +2. **Wallet SDK Integration**: Integrate with Solana wallet SDKs for full wallet functionality +3. **Offline Support**: Implement caching and offline capabilities +4. **Performance Optimization**: Optimize rendering and data processing for large datasets +5. **Testing Strategy**: Implement comprehensive testing for components and business logic \ No newline at end of file diff --git a/DIAGRAMS.md b/DIAGRAMS.md new file mode 100644 index 0000000..8a1a7b4 --- /dev/null +++ b/DIAGRAMS.md @@ -0,0 +1,386 @@ +# OpenSVM Mobile Diagrams + +This document contains visual diagrams to help understand the OpenSVM Mobile application structure, data flow, and component relationships. + +## Application Architecture + +```mermaid +graph TD + A[App Entry] --> B[Navigation Layer] + B --> C[Screen Components] + C --> D[UI Components] + D --> E[Business Logic/Hooks] + E --> F[State Management] + F --> G[External Services] + + subgraph "Navigation Layer" + B1[Expo Router] + B2[Tab Navigation] + B3[Stack Navigation] + end + + subgraph "Screen Components" + C1[Explorer] + C2[Validators] + C3[SIMD-0228] + C4[Wallet] + C5[AI Assistant] + end + + subgraph "UI Components" + D1[Charts] + D2[Forms] + D3[Lists] + D4[Cards] + D5[Modals] + end + + subgraph "Business Logic/Hooks" + E1[useValidatorMetrics] + E2[useNetworkStats] + E3[useWebSocket] + E4[useGithubDiscussions] + end + + subgraph "State Management" + F1[Wallet Store] + F2[Theme Store] + end + + subgraph "External Services" + G1[Solana RPC] + G2[Validator API] + G3[GitHub API] + end + + B1 --> B2 + B1 --> B3 + B2 --> C1 + B2 --> C2 + B2 --> C3 + B2 --> C4 + B2 --> C5 + B3 --> C6[Transaction Details] + B3 --> C7[Account Details] + + C1 --> D1 + C1 --> D3 + C2 --> D1 + C2 --> D4 + C3 --> D1 + C3 --> D2 + C4 --> D4 + C5 --> D5 + + C1 --> E2 + C2 --> E1 + C2 --> E3 + C3 --> E4 + C4 --> F1 + + E1 --> G2 + E2 --> G1 + E4 --> G3 + F1 --> G1 +``` + +## Data Flow Diagram + +```mermaid +flowchart TD + User([User]) <--> UI[UI Components] + UI <--> Hooks[Custom Hooks] + Hooks <--> Store[State Stores] + Hooks <--> API[External APIs] + Store <--> Storage[(Local Storage)] + + subgraph "User Interactions" + A1[View Explorer] + A2[Monitor Validators] + A3[Explore SIMD Proposal] + A4[Connect Wallet] + A5[Use AI Assistant] + end + + subgraph "Data Processing" + B1[Fetch Blockchain Data] + B2[Process Validator Metrics] + B3[Calculate Emission Rates] + B4[Manage Wallet State] + B5[Process AI Queries] + end + + User --> A1 + User --> A2 + User --> A3 + User --> A4 + User --> A5 + + A1 --> B1 + A2 --> B2 + A3 --> B3 + A4 --> B4 + A5 --> B5 + + B1 --> UI + B2 --> UI + B3 --> UI + B4 --> UI + B5 --> UI +``` + +## Component Hierarchy + +```mermaid +graph TD + App[App Root] --> Layout[Root Layout] + Layout --> Tabs[Tab Navigation] + + Tabs --> Explorer[Explorer Screen] + Tabs --> Validators[Validators Screen] + Tabs --> SIMD[SIMD-0228 Screen] + Tabs --> Wallet[Wallet Screen] + Tabs --> AI[AI Assistant Screen] + + Explorer --> SearchBar + Explorer --> NetworkStats + Explorer --> ValidatorAnalytics + Explorer --> RecentBlocks + Explorer --> AIAssistantMini + + Validators --> MetricsGrid + Validators --> GlobeVisualization + Validators --> LineChart + Validators --> ValidatorList + ValidatorList --> ValidatorItem + + SIMD --> TabNav[Tab Navigation] + TabNav --> EmissionTab[Emission Mechanism] + TabNav --> StakingTab[Staking Calculator] + TabNav --> DiscussionTab[Discussion] + + EmissionTab --> FormulaDisplay + EmissionTab --> InteractiveSlider + EmissionTab --> ResultsGrid + EmissionTab --> BenefitsCards + + StakingTab --> Calculator + StakingTab --> ComparisonCard + + DiscussionTab --> GitHubThread + + Wallet --> ConnectButton + Wallet --> WalletDetails + WalletDetails --> AddressDisplay + WalletDetails --> CopyButton + + AI --> AIAssistant + AIAssistant --> ChatInterface + AIAssistant --> MessageList + AIAssistant --> InputBar +``` + +## State Management + +```mermaid +stateDiagram-v2 + [*] --> AppInitialized + + state AppInitialized { + [*] --> WalletDisconnected + WalletDisconnected --> WalletConnecting: User clicks connect + WalletConnecting --> WalletConnected: Connection successful + WalletConnecting --> WalletError: Connection failed + WalletError --> WalletDisconnected: User retries + WalletConnected --> WalletDisconnected: User disconnects + + state ThemeState { + [*] --> LightTheme + LightTheme --> DarkTheme: Toggle theme + DarkTheme --> LightTheme: Toggle theme + } + + state DataFetchingState { + [*] --> DataLoading + DataLoading --> DataLoaded: Fetch complete + DataLoading --> DataError: Fetch failed + DataError --> DataLoading: Retry + DataLoaded --> DataRefreshing: Pull to refresh + DataRefreshing --> DataLoaded: Refresh complete + } + } +``` + +## Validator Monitoring Flow + +```mermaid +sequenceDiagram + participant User + participant ValidatorsScreen + participant useValidatorMetrics + participant WebSocket + + User->>ValidatorsScreen: Open Validators Tab + ValidatorsScreen->>useValidatorMetrics: Initialize hook + useValidatorMetrics->>WebSocket: Connect to WebSocket + WebSocket-->>useValidatorMetrics: Initial validator data + useValidatorMetrics-->>ValidatorsScreen: Update UI with data + + loop Real-time updates + WebSocket-->>useValidatorMetrics: New metrics data + useValidatorMetrics-->>ValidatorsScreen: Update UI with new data + end + + User->>ValidatorsScreen: Select validator + ValidatorsScreen->>useValidatorMetrics: Get validator details + useValidatorMetrics-->>ValidatorsScreen: Return detailed data + ValidatorsScreen-->>User: Show validator detail view + + User->>ValidatorsScreen: Close detail view + ValidatorsScreen-->>User: Return to validators list +``` + +## SIMD-0228 Proposal Flow + +```mermaid +sequenceDiagram + participant User + participant SIMDScreen + participant Calculator + participant GitHubThread + + User->>SIMDScreen: Open SIMD Tab + SIMDScreen->>User: Show emission mechanism tab + + User->>SIMDScreen: Adjust staking percentage + SIMDScreen->>SIMDScreen: Calculate new emission rate + SIMDScreen->>SIMDScreen: Update charts and results + SIMDScreen-->>User: Display updated results + + User->>SIMDScreen: Switch to staking calculator + SIMDScreen->>Calculator: Initialize with current rates + Calculator-->>User: Show calculator interface + + User->>Calculator: Enter staking amount + User->>Calculator: Select staking period + User->>Calculator: Choose yield rate + Calculator->>Calculator: Calculate rewards + Calculator-->>User: Display staking results + + User->>SIMDScreen: Switch to discussion tab + SIMDScreen->>GitHubThread: Fetch discussion data + GitHubThread-->>User: Display GitHub discussion +``` + +## Explorer Search Flow + +```mermaid +sequenceDiagram + participant User + participant ExplorerScreen + participant SearchBar + participant Router + + User->>ExplorerScreen: Open Explorer Tab + ExplorerScreen-->>User: Show network stats and recent blocks + + User->>SearchBar: Enter search query + SearchBar->>SearchBar: Process query + SearchBar-->>ExplorerScreen: Return search results + ExplorerScreen-->>User: Display search results + + User->>ExplorerScreen: Select transaction result + ExplorerScreen->>Router: Navigate to transaction/[id] + Router-->>User: Show transaction details + + User->>Router: Go back + Router-->>ExplorerScreen: Return to Explorer + ExplorerScreen-->>User: Show Explorer screen +``` + +## Wallet Connection Flow + +```mermaid +sequenceDiagram + participant User + participant WalletScreen + participant WalletStore + participant AsyncStorage + + User->>WalletScreen: Open Wallet Tab + WalletScreen->>WalletStore: Get connection status + WalletStore->>AsyncStorage: Retrieve saved state + AsyncStorage-->>WalletStore: Return connection data + WalletStore-->>WalletScreen: Update UI with status + + alt Wallet not connected + WalletScreen-->>User: Show connect button + User->>WalletScreen: Press connect + WalletScreen->>WalletStore: Call connect() + WalletStore->>WalletStore: Set isConnected = true + WalletStore->>WalletStore: Set mock address + WalletStore->>AsyncStorage: Save connection state + WalletStore-->>WalletScreen: Update UI + WalletScreen-->>User: Show connected state + else Wallet already connected + WalletScreen-->>User: Show wallet details + User->>WalletScreen: Press disconnect + WalletScreen->>WalletStore: Call disconnect() + WalletStore->>WalletStore: Set isConnected = false + WalletStore->>AsyncStorage: Save connection state + WalletStore-->>WalletScreen: Update UI + WalletScreen-->>User: Show disconnected state + end +``` + +## AI Assistant Flow + +```mermaid +sequenceDiagram + participant User + participant AIScreen + participant AIAssistant + participant AIService + + User->>AIScreen: Open AI Tab + AIScreen->>AIAssistant: Initialize with expanded view + AIAssistant-->>User: Show chat interface + + User->>AIAssistant: Type question + AIAssistant->>AIService: Send query + AIService-->>AIAssistant: Return response + AIAssistant-->>User: Display AI response + + User->>AIAssistant: Ask follow-up question + AIAssistant->>AIService: Send follow-up query with context + AIService-->>AIAssistant: Return contextual response + AIAssistant-->>User: Display AI response +``` + +## Technology Stack + +```mermaid +graph TD + A[OpenSVM Mobile] --> B[Frontend Framework] + A --> C[State Management] + A --> D[Navigation] + A --> E[UI Components] + A --> F[Data Fetching] + A --> G[Storage] + + B --> B1[React Native] + B --> B2[Expo] + + C --> C1[Zustand] + + D --> D1[Expo Router] + + E --> E1[Native Components] + E --> E2[Custom Components] + E --> E3[Lucide Icons] + + F --> F1[WebSockets] + F --> F2[Custom Hooks] + + G --> G1[AsyncStorage] +``` \ No newline at end of file diff --git a/DOCUMENTATION_GUIDE.md b/DOCUMENTATION_GUIDE.md new file mode 100644 index 0000000..0f8ef5b --- /dev/null +++ b/DOCUMENTATION_GUIDE.md @@ -0,0 +1,99 @@ +# OpenSVM Mobile Documentation Guide + +This guide provides an overview of the documentation available for the OpenSVM Mobile application. Use this as a starting point to navigate through the various documentation files. + +## Documentation Overview + +| Document | Description | +|----------|-------------| +| [README.md](README.md) | Project overview, features, setup instructions, and basic information | +| [ARCHITECTURE.md](ARCHITECTURE.md) | Detailed architecture documentation, project structure, and component relationships | +| [DIAGRAMS.md](DIAGRAMS.md) | Visual diagrams of application structure, data flow, and component relationships | +| [KNOWLEDGE_GRAPH.md](KNOWLEDGE_GRAPH.md) | Conceptual knowledge graphs showing relationships between components and concepts | +| [ROADMAP.md](ROADMAP.md) | Development roadmap with planned features and milestones | + +## Key Documentation Sections + +### Project Overview (README.md) + +The README provides a high-level overview of the OpenSVM Mobile application, including: + +- Project description and purpose +- Key features and capabilities +- Setup and installation instructions +- Project structure overview +- Technology stack + +This is the best starting point for new users and contributors to understand what the project is about. + +### Architecture Documentation (ARCHITECTURE.md) + +The architecture documentation provides a detailed explanation of: + +- Application architecture and design patterns +- Directory structure and organization +- Data flow between components +- State management approach +- Key features implementation details + +This document is valuable for developers who need to understand how the application is structured and how different components interact. + +### Visual Diagrams (DIAGRAMS.md) + +The diagrams document contains visual representations of: + +- Application architecture +- Data flow diagrams +- Component hierarchies +- State management flows +- User journey flows +- Technology stack + +These diagrams help visualize complex relationships and processes within the application. + +### Knowledge Graphs (KNOWLEDGE_GRAPH.md) + +The knowledge graphs document provides conceptual maps of: + +- Core application concepts +- Technology stack relationships +- Solana blockchain concepts +- User journeys +- Data relationships +- SIMD-0228 proposal concepts +- Application architecture +- Future integration possibilities + +This document helps understand the conceptual relationships between different aspects of the application and the Solana ecosystem. + +### Development Roadmap (ROADMAP.md) + +The roadmap document outlines: + +- Current project status +- Short-term development goals (1-3 months) +- Medium-term development goals (3-6 months) +- Long-term development goals (6+ months) +- Technical debt and infrastructure plans +- Community and feedback initiatives +- Milestone timeline + +This document is useful for understanding the project's direction and planned features. + +## How to Use This Documentation + +1. **New to the project?** Start with the [README.md](README.md) to get a high-level overview. +2. **Want to understand the architecture?** Read the [ARCHITECTURE.md](ARCHITECTURE.md) document. +3. **Prefer visual representations?** Check out the [DIAGRAMS.md](DIAGRAMS.md) file. +4. **Need to understand conceptual relationships?** Explore the [KNOWLEDGE_GRAPH.md](KNOWLEDGE_GRAPH.md) document. +5. **Interested in future plans?** Review the [ROADMAP.md](ROADMAP.md) document. + +## Contributing to Documentation + +If you'd like to improve or expand this documentation: + +1. Fork the repository +2. Make your changes +3. Submit a pull request with a clear description of your improvements + +We welcome contributions to make this documentation more comprehensive and useful! \ No newline at end of file diff --git a/KNOWLEDGE_GRAPH.md b/KNOWLEDGE_GRAPH.md new file mode 100644 index 0000000..b5a7dfd --- /dev/null +++ b/KNOWLEDGE_GRAPH.md @@ -0,0 +1,318 @@ +# OpenSVM Mobile Knowledge Graph + +This document provides a conceptual knowledge graph of the OpenSVM Mobile application, showing the relationships between different components, features, and concepts. + +## Core Concepts + +```mermaid +graph TD + A[OpenSVM Mobile] --> B[Blockchain Explorer] + A --> C[Validator Monitoring] + A --> D[SIMD-0228 Proposal] + A --> E[Wallet Management] + A --> F[AI Assistant] + + B --> B1[Transactions] + B --> B2[Blocks] + B --> B3[Accounts] + B --> B4[Network Stats] + + C --> C1[Performance Metrics] + C --> C2[Global Distribution] + C --> C3[Resource Usage] + C --> C4[Validator Rankings] + + D --> D1[Emission Mechanism] + D --> D2[Staking Calculator] + D --> D3[Community Discussion] + + E --> E1[Wallet Connection] + E --> E2[Address Management] + E --> E3[Transaction History] + + F --> F1[Query Processing] + F --> F2[Blockchain Knowledge] + F --> F3[User Assistance] + + B1 --> G1[Transaction Details] + B2 --> G2[Block Details] + B3 --> G3[Account Details] + + C1 --> H1[TPS] + C1 --> H2[Latency] + C1 --> H3[Skip Rate] + C1 --> H4[Vote Distance] + + D1 --> I1[Emission Formula] + D1 --> I2[Staking Percentage] + D1 --> I3[Validator Returns] +``` + +## Technology Stack + +```mermaid +graph TD + A[OpenSVM Mobile] --> B[Frontend] + A --> C[State Management] + A --> D[Data Fetching] + A --> E[Storage] + A --> F[Navigation] + + B --> B1[React Native] + B --> B2[Expo] + B --> B3[UI Components] + + C --> C1[Zustand] + C --> C2[Stores] + + D --> D1[Custom Hooks] + D --> D2[WebSocket] + D --> D3[Mock Data] + + E --> E1[AsyncStorage] + + F --> F1[Expo Router] + + B3 --> G1[Charts] + B3 --> G2[Forms] + B3 --> G3[Lists] + + C2 --> H1[Wallet Store] + C2 --> H2[Theme Store] + + D1 --> I1[useValidatorMetrics] + D1 --> I2[useNetworkStats] + D1 --> I3[useWebSocket] + D1 --> I4[useGithubDiscussions] +``` + +## Solana Blockchain Concepts + +```mermaid +graph TD + A[Solana Blockchain] --> B[Consensus] + A --> C[Tokenomics] + A --> D[Validators] + A --> E[Transactions] + A --> F[Programs] + + B --> B1[Proof of Stake] + B --> B2[Proof of History] + B --> B3[Tower BFT] + + C --> C1[SOL Token] + C --> C2[Inflation] + C --> C3[Staking] + C --> C4[SIMD-0228] + + D --> D1[Validator Nodes] + D --> D2[Stake Delegation] + D --> D3[Vote Accounts] + D --> D4[Commission] + + E --> E1[Transaction Structure] + E --> E2[Instructions] + E --> E3[Signatures] + E --> E4[Fees] + + F --> F1[Smart Contracts] + F --> F2[System Program] + F --> F3[Token Program] + F --> F4[DeFi Programs] + + C4 --> G1[Market-Based Emission] + C4 --> G2[Staking Participation] + C4 --> G3[Validator Returns] + + D1 --> H1[Performance] + D1 --> H2[Resources] + D1 --> H3[Location] + D1 --> H4[Version] +``` + +## User Journeys + +```mermaid +graph TD + A[User] --> B[Explore Blockchain] + A --> C[Monitor Validators] + A --> D[Understand SIMD-0228] + A --> E[Manage Wallet] + A --> F[Get AI Assistance] + + B --> B1[Search for Transaction] + B1 --> B2[View Transaction Details] + B --> B3[View Network Stats] + B --> B4[Browse Recent Blocks] + + C --> C1[View Validator List] + C1 --> C2[Select Validator] + C2 --> C3[View Performance Metrics] + C2 --> C4[View Resource Usage] + C --> C5[View Global Distribution] + + D --> D1[Learn About Mechanism] + D --> D2[Simulate Different Scenarios] + D --> D3[Calculate Staking Rewards] + D --> D4[Participate in Discussion] + + E --> E1[Connect Wallet] + E1 --> E2[View Address] + E2 --> E3[Copy Address] + E2 --> E4[View Explorer Link] + + F --> F1[Ask Question] + F1 --> F2[Receive Answer] + F2 --> F3[Ask Follow-up] +``` + +## Data Relationships + +```mermaid +graph TD + A[Blockchain Data] --> B[Transactions] + A --> C[Blocks] + A --> D[Accounts] + A --> E[Validators] + + B --> B1[Signature] + B --> B2[Status] + B --> B3[Fee] + B --> B4[Instructions] + B --> B5[Timestamp] + + C --> C1[Block Height] + C --> C2[Transactions List] + C --> C3[Timestamp] + C --> C4[Parent Block] + + D --> D1[Address] + D --> D2[Balance] + D --> D3[Owner Program] + D --> D4[Tokens] + + E --> E1[Identity] + E --> E2[Vote Account] + E --> E3[Commission] + E --> E4[Active Stake] + E --> E5[Performance Metrics] + + E5 --> F1[TPS] + E5 --> F2[Latency] + E5 --> F3[Skip Rate] + E5 --> F4[Vote Distance] + + E --> G1[Resources] + G1 --> G2[CPU Usage] + G1 --> G3[Memory Usage] + G1 --> G4[Disk Usage] + G1 --> G5[Bandwidth] +``` + +## SIMD-0228 Concepts + +```mermaid +graph TD + A[SIMD-0228] --> B[Market-Based Emission] + A --> C[Staking Incentives] + A --> D[Network Security] + A --> E[Economic Design] + + B --> B1[Emission Formula] + B1 --> B2["i(s) = r(1-โˆšs + c ยท max(1-โˆš2s,0))"] + B --> B3[Dynamic Adjustment] + B --> B4[Staking Percentage] + + C --> C1[Validator Returns] + C1 --> C2["v(s) = i(s)/s"] + C --> C3[Staking APY] + C --> C4[Reward Distribution] + + D --> D1[Security Budget] + D --> D2[Attack Resistance] + D --> D3[Decentralization] + + E --> E1[Inflation Control] + E --> E2[Supply Growth] + E --> E3[Token Velocity] + E --> E4[MEV Considerations] + + B4 --> F1[Low Staking Scenario] + B4 --> F2[High Staking Scenario] + F1 --> F3[Higher Emission] + F2 --> F4[Lower Emission] +``` + +## Application Architecture + +```mermaid +graph TD + A[App Structure] --> B[Navigation] + A --> C[Screens] + A --> D[Components] + A --> E[State Management] + A --> F[Data Fetching] + + B --> B1[Root Layout] + B --> B2[Tab Navigation] + B --> B3[Stack Navigation] + + C --> C1[Explorer Screen] + C --> C2[Validators Screen] + C --> C3[SIMD Screen] + C --> C4[Wallet Screen] + C --> C5[AI Screen] + + D --> D1[UI Components] + D --> D2[Chart Components] + D --> D3[Form Components] + + E --> E1[Zustand Stores] + E --> E2[Local State] + E --> E3[Context] + + F --> F1[Custom Hooks] + F --> F2[WebSocket] + F --> F3[Mock Services] + + D1 --> G1[SearchBar] + D1 --> G2[NetworkStats] + D1 --> G3[ValidatorAnalytics] + D1 --> G4[AIAssistant] + + D2 --> H1[LineChart] + D2 --> H2[GlobeVisualization] + D2 --> H3[MetricsGrid] +``` + +## Future Integration Possibilities + +```mermaid +graph TD + A[OpenSVM Mobile] --> B[Wallet SDKs] + A --> C[Solana RPC] + A --> D[DeFi Protocols] + A --> E[NFT Marketplaces] + A --> F[Governance Platforms] + + B --> B1[Phantom] + B --> B2[Solflare] + B --> B3[Backpack] + + C --> C1[Public RPC] + C --> C2[Private RPC] + C --> C3[Validator RPC] + + D --> D1[Jupiter] + D --> D2[Raydium] + D --> D3[Marinade] + D --> D4[Orca] + + E --> E1[Magic Eden] + E --> E2[Tensor] + E --> E3[Solanart] + + F --> F1[Realms] + F --> F2[SPL Governance] + F --> F3[Squads] +``` \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..7275545 --- /dev/null +++ b/README.md @@ -0,0 +1,108 @@ +# OpenSVM Mobile + +A mobile application for exploring the Solana blockchain, monitoring validators, and managing your Solana wallet. + +![OpenSVM Mobile](https://via.placeholder.com/800x400?text=OpenSVM+Mobile) + +## Overview + +OpenSVM Mobile is a comprehensive mobile application built with Expo and React Native that provides tools for interacting with the Solana blockchain. The application offers real-time monitoring of validator performance, blockchain exploration, wallet management, and an AI assistant for Solana-related queries. + +## Features + +### ๐Ÿ” Blockchain Explorer +- Search for transactions, blocks, and accounts +- View network statistics and metrics +- Monitor recent blocks and transactions + +### ๐Ÿ“Š Validator Monitoring +- Track validator performance metrics (TPS, latency, skip rate) +- View global validator distribution +- Analyze validator resources (CPU, memory, disk, bandwidth) +- Compare top validators + +### ๐Ÿ’ฐ Wallet Management +- Connect your Solana wallet +- View your assets and transactions +- Copy wallet address for transactions + +### ๐Ÿค– AI Assistant +- Get help with Solana-related queries +- Learn about blockchain concepts +- Receive guidance on using the application + +### ๐Ÿ“ SIMD-0228 Proposal +- Interactive simulation of the market-based emission mechanism +- Staking calculator to estimate rewards +- Discussion thread for community feedback + +## Getting Started + +### Prerequisites +- Node.js (v16 or higher) +- Expo CLI +- Yarn or npm + +### Installation + +1. Clone the repository +```bash +git clone https://github.com/yourusername/opensvm-mobile.git +cd opensvm-mobile +``` + +2. Install dependencies +```bash +yarn install +# or +npm install +``` + +3. Start the development server +```bash +yarn start +# or +npm start +``` + +4. Run on your device or emulator +- Scan the QR code with the Expo Go app (Android) or Camera app (iOS) +- Press 'a' to run on Android emulator +- Press 'i' to run on iOS simulator +- Press 'w' to run in web browser + +## Project Structure + +``` +opensvm-mobile/ +โ”œโ”€โ”€ app/ # Main application screens and navigation +โ”‚ โ”œโ”€โ”€ (tabs)/ # Tab-based navigation screens +โ”‚ โ”œโ”€โ”€ account/ # Account-related screens +โ”‚ โ””โ”€โ”€ transaction/ # Transaction-related screens +โ”œโ”€โ”€ assets/ # Static assets (images, fonts) +โ”œโ”€โ”€ components/ # Reusable UI components +โ”‚ โ””โ”€โ”€ charts/ # Chart and visualization components +โ”œโ”€โ”€ constants/ # App constants (colors, typography) +โ”œโ”€โ”€ hooks/ # Custom React hooks +โ”œโ”€โ”€ mocks/ # Mock data for development +โ”œโ”€โ”€ stores/ # State management (Zustand) +โ”œโ”€โ”€ types/ # TypeScript type definitions +โ””โ”€โ”€ utils/ # Utility functions +``` + +## Technologies + +- **Framework**: [Expo](https://expo.dev/) & [React Native](https://reactnative.dev/) +- **Navigation**: [Expo Router](https://docs.expo.dev/routing/introduction/) +- **State Management**: [Zustand](https://github.com/pmndrs/zustand) +- **UI Components**: [Lucide React Native](https://lucide.dev/guide/packages/lucide-react-native) +- **Storage**: [AsyncStorage](https://react-native-async-storage.github.io/async-storage/) +- **Charts**: Custom chart components + +## Contributing + +Contributions are welcome! Please feel free to submit a Pull Request. + +## License + +This project is licensed under the MIT License - see the LICENSE file for details. \ No newline at end of file diff --git a/ROADMAP.md b/ROADMAP.md new file mode 100644 index 0000000..6869849 --- /dev/null +++ b/ROADMAP.md @@ -0,0 +1,173 @@ +# OpenSVM Mobile Roadmap + +This document outlines the development roadmap for the OpenSVM Mobile application, including planned features, improvements, and milestones. + +## Current Status + +The OpenSVM Mobile application is currently in the prototype/development phase with the following features implemented: + +- Basic blockchain explorer functionality +- Validator monitoring with performance metrics +- SIMD-0228 proposal simulation and calculator +- Simple wallet connection interface +- AI Assistant for user queries + +The application uses mock data for development purposes and does not yet connect to real Solana blockchain APIs. + +## Short-term Goals (1-3 months) + +### Phase 1: Core Functionality + +- [ ] **Real API Integration** + - Connect to Solana RPC endpoints for live blockchain data + - Implement proper error handling and retry mechanisms + - Add caching layer for improved performance + +- [ ] **Wallet Integration** + - Integrate with Solana wallet adapters (Phantom, Solflare, etc.) + - Implement transaction signing capabilities + - Add token balance display and management + +- [ ] **Enhanced Explorer** + - Add detailed transaction view with instruction decoding + - Implement account explorer with token holdings + - Add program explorer for viewing deployed programs + +### Phase 2: User Experience + +- [ ] **UI/UX Improvements** + - Implement dark/light theme toggle + - Add customizable dashboard layouts + - Improve accessibility features + +- [ ] **Performance Optimization** + - Optimize rendering for large datasets + - Implement virtualized lists for better performance + - Reduce bundle size and improve load times + +- [ ] **Offline Support** + - Add offline caching for recent data + - Implement background sync when connection is restored + - Add offline mode indicators + +## Medium-term Goals (3-6 months) + +### Phase 3: Advanced Features + +- [ ] **Validator Management** + - Add staking interface for delegating to validators + - Implement validator comparison tools + - Add alerts for validator performance issues + +- [ ] **Transaction Builder** + - Create intuitive transaction building interface + - Support for common transaction types + - Save and share transaction templates + +- [ ] **Enhanced AI Assistant** + - Integrate with Solana documentation + - Add transaction explanation capabilities + - Implement code generation for common tasks + +### Phase 4: Ecosystem Integration + +- [ ] **DeFi Integration** + - Connect to popular Solana DeFi protocols + - Add swap interface for tokens + - Implement yield farming dashboard + +- [ ] **NFT Support** + - Add NFT gallery and management + - Implement NFT transaction history + - Add marketplace integration + +- [ ] **Developer Tools** + - Add program deployment interface + - Implement transaction simulation + - Add debugging tools for developers + +## Long-term Goals (6+ months) + +### Phase 5: Advanced Analytics + +- [ ] **Network Analytics** + - Implement advanced network statistics + - Add historical data visualization + - Create custom analytics dashboards + +- [ ] **Validator Analytics** + - Add predictive analytics for validator performance + - Implement stake optimization recommendations + - Create validator health monitoring system + +- [ ] **Market Analytics** + - Add token price tracking and alerts + - Implement market trend analysis + - Create portfolio performance tracking + +### Phase 6: Ecosystem Expansion + +- [ ] **Multi-chain Support** + - Add support for Solana L2 solutions + - Implement cross-chain transaction viewing + - Create unified multi-chain dashboard + +- [ ] **Governance Integration** + - Add DAO and governance proposal viewing + - Implement voting interface + - Create governance analytics + +- [ ] **Enterprise Features** + - Add team management and permissions + - Implement enhanced security features + - Create reporting and compliance tools + +## Technical Debt and Infrastructure + +Throughout all phases, we will address the following ongoing concerns: + +- [ ] **Testing Infrastructure** + - Implement comprehensive unit and integration tests + - Add end-to-end testing for critical flows + - Set up continuous integration and deployment + +- [ ] **Documentation** + - Create comprehensive API documentation + - Add developer guides for contributors + - Maintain up-to-date user documentation + +- [ ] **Security** + - Regular security audits and updates + - Implement best practices for mobile security + - Add privacy-enhancing features + +## Community and Feedback + +We value community input and will adjust this roadmap based on user feedback and changing ecosystem needs. Key community initiatives include: + +- [ ] **User Research** + - Conduct user interviews and surveys + - Analyze usage patterns and pain points + - Prioritize features based on user needs + +- [ ] **Open Source Collaboration** + - Encourage community contributions + - Host hackathons and bounties + - Recognize and reward contributors + +- [ ] **Education and Outreach** + - Create tutorials and guides + - Host webinars and workshops + - Build a knowledge base for users + +## Milestone Timeline + +| Milestone | Target Date | Key Deliverables | +|-----------|-------------|------------------| +| Alpha Release | Q2 2023 | Core explorer, validator monitoring, basic wallet integration | +| Beta Release | Q3 2023 | Real API integration, enhanced explorer, improved UI/UX | +| v1.0 Release | Q4 2023 | Full wallet functionality, transaction builder, offline support | +| v2.0 Release | Q2 2024 | DeFi integration, NFT support, advanced analytics | +| v3.0 Release | Q4 2024 | Multi-chain support, governance integration, enterprise features | + +*Note: This roadmap is subject to change based on community feedback, ecosystem developments, and resource availability.* \ No newline at end of file