stampchain-io BTCStampsExplorer .cursorrules file for TypeScript (stars: 7)

# Adding version control information for better AI context
version_info:
  deno: "2.1.5"
  fresh: "1.7.3"
  project: "BTCStampsExplorer"

# Emoji and Unicode handling patterns
emoji_handling:
  description: "Standardized approach for handling emoji ticks across the application"
  flow:
    api_layer:
      - accepts_both_formats: ["emoji (🧧)", "unicode escape (\\U0001F9E7)"]
      - decodes_uri: "decodeURIComponent for URL-encoded ticks"
      - passes_through: "No format conversion at API layer"
    repository_layer:
      - converts_to_unicode: "For DB operations"
      - converts_to_emoji: "For API responses"
      - helper_functions:
        - ensureUnicodeEscape: "Checks and converts to unicode escape if needed"
        - convertResponseToEmoji: "Converts DB response ticks back to emoji"
    database_layer:
      - stores_unicode: "Always stores in unicode escape format"
  examples:
    emoji: "🧧"
    unicode_escape: "\\U0001F9E7"
    url_encoded: "%F0%9F%A7%A7"
  rules:
    - "API routes accept any format"
    - "Repository handles all format conversions"
    - "Database always stores unicode escape"
    - "Responses always return emoji format"
    - "No manual conversions in controllers or services"

# Expanding code style with project-specific patterns
code_style:
  framework: "Deno Fresh 2.1.5"
  principles:
    - write_concise_typescript
    - use_functional_programming
    - prefer_composition_over_inheritance
    - use_descriptive_variable_names:
        examples:
          - isLoading
          - hasError
    # Adding SRC20-specific naming patterns based on your codebase
    project_specific:
      - prefix_src20_components: "SRC20"
      - use_descriptive_suffixes:
          - Card
          - Tab
          - Header
          - TX

# Expanding import conventions based on your actual imports
import_conventions:
  patterns:
    - use_npm_prefix: "for npm packages"
    - use_dollar_prefix: "for project modules ($)"
    - follow_deno_std: "for standard library"
    - use_import_map: "in deno.json"
    - prefer_jsr:
        description: "Use JSR imports when available"
        examples:
          - "@std/assert": "jsr:/@std/assert@^1.0.9"
          - "@std/async": "jsr:/@std/async@^1.0.5"
          - "@std/crypto": "jsr:@std/crypto@^1.0.3"
          - "@std/dotenv": "jsr:/@std/dotenv@^0.225.2"
    - import_priority:
      - jsr: "First choice for standard libraries and packages"
      - deno.land/x: "Second choice if not on JSR"
      - npm: "Last resort or for specific packages"
  project_aliases:
    core:
      - "$/"
      - "$client/"
      - "$components/"
      - "$islands/"
      - "$lib/"
    feature_specific:
      - "$handlers/"
      - "$constants"
      - "$types/"
    utility:
      - "$globals"

# Adding specific route patterns from your codebase
routing_patterns:
  api_versioning:
    - v2_endpoints: "/api/v2/[...path].ts"
    - internal_endpoints: "/api/internal/"
  dynamic_routes:
    - address: "[address].ts"
    - block: "[block_index].ts"
    - wildcard: "[...path].ts"

# Expanding directory structure with actual patterns
directory_structure:
  root: "BTCStampsExplorer"
  directories:
    components:
      description: "Server-side rendered components (SSR)"
      rules:
        - no_client_javascript
        - server_rendered_html
      patterns:
        - group_by_feature
        - separate_layout_components
    islands:
      description: "Client-side interactive components"
      rules:
        - include_browser_javascript
        - can_use_hooks_and_state
      examples:
        - "BlockInfo.tsx - state and useEffect"
        - "SRC20TokenMintingCard.tsx"
        - "SRC20DetailsTab.tsx"
      patterns:
        - group_by_feature:
            - "src20/cards/"
            - "src20/details/"
    routes:
      api:
        - v2
        - internal
      patterns:
        - feature_based_grouping
        - version_prefixing

# Development workflow with actual tasks from deno.json
development_workflow:
  environments:
    development:
      command: "deno task dev"
      options: "--inspect --allow-all --watch"
      excludes:
        - "dist/"
        - "node_modules/"
        - "_fresh/"
        - ".git/"
        - "coverage/"
        - "tmp/"
        - "tests/"
    production:
      command: "deno task start"
      prerequisites: "check_version"
  testing:
    commands:
      version: "deno test -A --log-level=debug tests/versioning/"
      src20: "deno test --allow-net tests/src20/"
    patterns:
      - group_by_feature
      - use_descriptive_names

# Adding project-specific type patterns
typescript_patterns:
  src20:
    - use_typescript_interfaces_for_tokens
    - implement_strict_type_checking
  compiler_options:
    strict: true
    noUnusedLocals: true
    noUnusedParameters: true
    noImplicitReturns: true
    exactOptionalPropertyTypes: true
    noFallthroughCasesInSwitch: true

# Component patterns based on your actual components
component_patterns:
  rules:
    - use_function_declarations
    - implement_props_interfaces
    - use_preact_children_type
    - use_fresh_handlers
  naming:
    - prefix_feature_components
    - use_descriptive_suffixes
  layouts:
    - HowToLayout
    - CollectionLayout
    - StampLayout

# Error handling patterns from your codebase
error_handling:
  practices:
    - use_fresh_error_boundaries
    - implement_proper_logging
    - return_http_status_codes
    - handle_async_errors_with_trycatch
  api_responses:
    - use_response_util
    - implement_status_codes
    - provide_error_messages

# State management based on your implementation
state_management:
  preferences:
    - use_preact_signals
    - prefer_server_side_state
    - use_islands_sparingly
  patterns:
    - isolate_client_state
    - use_fresh_context
    - implement_handlers

# Performance optimizations from your code
performance:
  optimizations:
    - implement_fresh_streaming
    - use_partial_hydration
    - optimize_assets
    - implement_caching
  image_handling:
    - use_webp_format
    - include_size_data
    - implement_lazy_loading

# Fresh specific features used in your project
fresh_specific:
  features:
    - use_preact_signals
    - configure_typescript
    - use_tailwind_support
    - use_jsx_runtime
    - use_plugin_system
  plugins:
    - tailwind:
        config: "tailwind.config.ts"
        content: ["{routes,islands,components}/**/*.{ts,tsx}"]

# Testing patterns from your test files
testing:
  frameworks:
    - use_deno_testing
    - write_unit_tests
    - implement_component_tests
  commands:
    - "deno task test:version"
    - "deno task test:src20"
    - "deno task test:src20:watch"
  patterns:
    - test_api_versioning
    - test_src20_transactions
    - implement_dredd_tests

# Code quality standards from your configuration
code_quality:
  formatting:
    line_width: 80
    indent: 2
    use_spaces: true
    single_quote: false
    commands:
      check: "deno task check:fmt"
      debug: "deno task check:fmt:debug"
    excludes:
      - "**/_fresh/**/*"
      - "**/server/**/*"
      - "**/node_modules/**/*"
      - "**/dist/**/*"
      - "**/.git/**/*"
      - "**/coverage/**/*"
      - "**/tmp/**/*"
      - "**/.cache/**/*"
      - "**/.*/",
      - "**/.*"
      - "**/build/**/*"
      - "**/vendor/**/*"
      - "**/*.yml"
      - "**/*.yaml"
      - "**/*.css"
      - "**/*.json"
      - "**/*.md"
      - "**/*.html"
      - "**/static/**/*"
    file_types:
      include: ["**/*.ts", "**/*.tsx"]
    ci:
      workflow: "github-actions"
      step_name: "Check formatting"
      command: "deno task check:fmt"
  linting:
    rules:
      - "fresh"
      - "recommended"
    exclude:
      - "no-explicit-any"
  checks:
    command: "deno task check"
    run: "before commits"
    sequence:
      - format: "deno task check:fmt"
      - lint: "deno task check:lint"
      - types: "deno task check:types"

# Security implementations from your codebase
security:
  requirements:
    - implement_csrf_protection
    - use_fresh_security_headers
    - sanitize_user_input
    - follow_owasp_guidelines
  api_security:
    - version_headers
    - proper_cors_config
    - rate_limiting

# Documentation patterns
documentation:
  api:
    - use_openapi_schema
    - implement_redocly
    - maintain_swagger_docs
  validation:
    - validate_schema: "deno task validate:schema"
    - run_dredd_tests: "deno task dredd"
  formats:
    - markdown
    - yaml
    - openapi

# Environment and configuration
environment:
  development:
    base_url: "https://dev.stampchain.io"
    skip_redis: true
  production:
    base_url: "https://stampchain.io"
    skip_redis: false
  variables:
    - DENO_ENV
    - DEV_BASE_URL
    - SKIP_REDIS_CONNECTION

# SRC20 Optimization Plan
src20_optimization:
  overview:
    description: "Safe optimization plan for SRC20 data fetching and filtering with focus on API stability"
    goals:
      - "Maintain backward compatibility for all API routes"
      - "Introduce enhanced functionality alongside existing"
      - "Optimize data fetching patterns"
      - "Support comprehensive filtering"
      - "Improve performance monitoring"

  critical_dependencies:
    api_routes:
      - endpoint: "/api/v2/src20/index"
        function: "handleSrc20TransactionsRequest"
        notes: "Base SRC20 transaction endpoint - must maintain response format"
      
      - endpoint: "/api/v2/src20/tick/[tick]/deploy"
        function: "handleDeploymentRequest"
        notes: "Critical deployment info endpoint"
      
      - endpoint: "/api/v2/src20/balance/*"
        function: "handleSrc20BalanceRequest"
        notes: "Balance endpoints - high traffic"

  functions_to_refactor:
    queryService:
      fetchAndFormatSrc20Data:
        strategy: "Parallel versions"
        current: "Keep existing implementation untouched"
        new_version:
          name: "fetchAndFormatSrc20DataV2"
          features:
            - "Optional data enrichment"
            - "Parallel data fetching"
            - "Performance monitoring"
            - "Fallback safety"
        shared_helpers:
          - name: "enrichData"
            purpose: "Centralized data enrichment logic"
            features:
              - "Market data enrichment"
              - "Mint progress data"
              - "Batch processing"
              - "Error handling with fallback"
    
    controller:
      fetchSrc20DetailsWithHolders:
        strategy: "Gradual migration"
        steps:
          - "Create V2 version using new query service"
          - "Test in parallel with existing"
          - "Migrate internal routes first"
          - "Monitor performance before full migration"

  testing_strategy:
    unit_tests:
      queryService:
        - name: "fetchAndFormatSrc20DataV2"
          cases:
            - "Empty response handling"
            - "Pagination edge cases"
            - "Filter combinations"
            - "Market data enrichment"
            - "Error fallbacks"
        - name: "enrichData"
          cases:
            - "Batch processing limits"
            - "Partial data handling"
            - "Cache hits/misses"
            - "Error recovery"
    
    integration_tests:
      critical_routes:
        - endpoint: "/api/v2/src20/index"
          cases:
            - "Basic pagination"
            - "Filter combinations"
            - "Sort orders"
            - "Response format stability"
        
        - endpoint: "/api/v2/src20/tick/[tick]/deploy"
          cases:
            - "Valid deployment data"
            - "Non-existent tick"
            - "Emoji tick handling"
            - "Response structure"
        
        - endpoint: "/api/v2/src20/balance/*"
          cases:
            - "Valid balance data"
            - "Multiple holder snapshots"
            - "Zero balance handling"
            - "Response pagination"
      
      internal_routes:
        - endpoint: "/api/internal/src20/trending"
          cases:
            - "Trending calculation"
            - "Time window filtering"
            - "Cache validation"
            - "Data enrichment"
    
    performance_tests:
      scenarios:
        - name: "High load - GET /api/v2/src20/index"
          conditions:
            - "1000 concurrent users"
            - "Mixed filter combinations"
            - "Various page sizes"
          metrics:
            - "Response time < 500ms"
            - "Error rate < 0.1%"
            - "Memory usage stable"
        
        - name: "Cache effectiveness"
          conditions:
            - "Repeated queries"
            - "Market data updates"
            - "Trending calculations"
          metrics:
            - "Cache hit rate > 80%"
            - "Stale data < 30s"
        
        - name: "Data enrichment overhead"
          conditions:
            - "Large result sets"
            - "Multiple data sources"
            - "Parallel requests"
          metrics:
            - "Enrichment time < 100ms"
            - "Memory overhead < 50MB"
    
    validation_suites:
      response_format:
        - "Schema validation"
        - "Type consistency"
        - "Nullable handling"
        - "Empty state handling"
      
      data_integrity:
        - "Market data consistency"
        - "Balance calculation accuracy"
        - "Mint progress tracking"
        - "Holder count validation"
      
      error_handling:
        - "API error responses"
        - "Fallback behaviors"
        - "Cache invalidation"
        - "Recovery procedures"

  optimization_phases:
    phase_1_foundation:
      title: "Enhanced Query Service"
      steps:
        - "Add fetchAndFormatSrc20DataV2 alongside existing"
        - "Implement enrichData helper"
        - "Add performance monitoring"
        - "Comprehensive testing suite"
        - "Document all changes"
      safety_measures:
        - "Type safety for all new functions"
        - "Error handling with fallbacks"
        - "Performance threshold warnings"
        - "Response format validation"
      testing:
        setup:
          - "Create test data fixtures"
          - "Set up integration test environment"
          - "Define performance baselines"
        
        validation:
          - "Unit test new functions"
          - "Integration test critical paths"
          - "Validate response formats"
          - "Measure performance impact"
    
    phase_2_internal_migration:
      title: "Update Internal Routes"
      steps:
        - "Migrate trending.ts to V2"
        - "Update index.tsx to use V2"
        - "Add filter support to internal routes"
        - "Test thoroughly in staging"
      monitoring:
        - "Response time comparisons"
        - "Error rate tracking"
        - "Memory usage patterns"
      testing:
        setup:
          - "Expand test fixtures for internal routes"
          - "Create parallel test environments"
          - "Set up monitoring dashboards"
        
        validation:
          - "Compare V1 vs V2 responses"
          - "Validate data consistency"
          - "Monitor performance metrics"
          - "Test error scenarios"
    
    phase_3_optimization:
      title: "Performance Optimization"
      steps:
        - "Implement caching strategy"
        - "Optimize batch sizes"
        - "Add parallel processing"
        - "Enhance error handling"
      metrics:
        - "Response times"
        - "Cache hit rates"
        - "Error rates"
        - "Memory usage"
      testing:
        setup:
          - "Configure load test scenarios"
          - "Set up long-running tests"
          - "Prepare rollback validation"
        
        validation:
          - "Run load tests"
          - "Validate cache behavior"
          - "Monitor resource usage"
          - "Test recovery procedures"

  deployment_strategy:
    staging:
      steps:
        - "Deploy V2 functions"
        - "Run full test suite"
        - "Compare performance metrics"
        - "Validate response formats"
      
      validation:
        - "Zero deployment errors"
        - "All tests passing"
        - "Performance within bounds"
        - "No type mismatches"
    
    production:
      steps:
        - "Deploy with feature flags"
        - "Gradual traffic migration"
        - "Monitor error rates"
        - "Validate response times"
      
      validation:
        - "Error rate < 0.1%"
        - "Response time < baseline + 10%"
        - "Cache hit rate > 80%"
        - "Zero critical errors"

  type_updates:
    overview:
      description: "Type system consolidation and alignment with OpenAPI schema"
      goals:
        - "Consolidate overlapping types between globals.d.ts and src20.d.ts"
        - "Ensure type definitions match API contract in schema.yml"
        - "Improve type safety across the application"
        - "Reduce duplication and improve maintainability"
    
    consolidation_plan:
      shared_types:
        base_interfaces:
          - name: "SRC20Base"
            description: "Common properties shared across SRC20 types"
            source: "schema.yml#/components/schemas/Src20Detail"
            properties:
              - "tx_hash: string"
              - "block_index: number"
              - "tick: string"
              - "op: SRC20Operation"
              - "amt?: string | bigint"
              - "block_time: Date"
        
        response_types:
          - name: "SRC20Response"
            description: "Standardized response format for SRC20 endpoints"
            source: "schema.yml#/components/schemas/Src20ResponseBody"
            properties:
              - "last_block: number"
              - "data: SRC20Detail"
              - "performance?: PerformanceMetrics"
        
        request_types:
          - name: "SRC20RequestParams"
            description: "Unified request parameters"
            source: "schema.yml components"
            properties:
              - "tick?: string"
              - "op?: SRC20Operation"
              - "limit?: number"
              - "page?: number"
              - "sortBy?: string"
    
    new_types:
      performance_monitoring:
        PerformanceMetrics:
          description: "Metrics for monitoring and optimization"
          properties:
            - "duration: number"
            - "cacheHit: boolean"
            - "dataSize: number"
            - "queryTime?: number"
            - "enrichmentTime?: number"
      
      market_data:
        MarketMetrics:
          description: "Market-related data types"
          properties:
            - "floor_price: number"
            - "market_cap: number"
            - "volume_24h: number"
            - "holders: number"
      
      enrichment_options:
        EnrichmentConfig:
          description: "Configuration for data enrichment"
          properties:
            - "includeMarketData: boolean"
            - "enrichWithProgress: boolean"
            - "batchSize?: number"
            - "cacheDuration?: number"
    
    filter_options:
      interface: "FilterOptions"
      description: "Comprehensive filtering options for SRC20 tokens"
      options:
        minting:
          description: "Filter by minting status and activity"
          properties:
            - "progress: number - Current mint progress percentage"
            - "recent_activity: number - Recent mint transactions count"
        
        trending_mints:
          description: "Filter trending mints by time period"
          properties:
            - "min_mints: number - Minimum number of mint transactions"
        
        deploy:
          description: "Filter by deployment date"
          properties:
            - "date_range: DateRange - Start and end dates for deployment"
        
        supply:
          description: "Filter by token supply range"
          properties:
            - "min: number - Minimum supply amount"
            - "max: number - Maximum supply amount"
        
        marketcap:
          description: "Filter by market capitalization"
          properties:
            - "min: number - Minimum market cap in BTC"
            - "max: number - Maximum market cap in BTC"
        
        holders:
          description: "Filter by number of holders"
          properties:
            - "min: number - Minimum number of holders"
            - "max: number - Maximum number of holders"
        
        volume:
          description: "Filter by trading volume"
          properties:
            - "min: number - Minimum volume in BTC"
            - "max: number - Maximum volume in BTC"
        
        price_change:
          description: "Filter by price movement"
          properties:
            - "percentage: number - Price change percentage"
            - "time_period: '24h' | '7d' - Time period for price change"
    
    main_scenarios:
      all_tokens_view:
        description: "Complete view of all SRC20 tokens"
        data_requirements:
          - "All DEPLOY transactions"
          - "Mint progress for each token"
          - "Market data for fully minted tokens"
          - "Holders count for each token"
        filtering_options:
          - "By status (minting/outminted)"
          - "By supply range"
          - "By market cap range"
          - "By holder count range"
          - "By volume range"
          - "By price change"
        sorting_options:
          - "ASC/DESC by deploy date"
          - "By market cap"
          - "By holder count"
          - "By volume"
      
      minting_only_view:
        description: "View of actively minting tokens"
        data_requirements:
          - "DEPLOY transactions where progress < 100%"
          - "Current mint progress"
          - "Holders count"
          - "Recent mint activity"
        filtering_options:
          - "By supply range"
          - "By holder count range"
          - "By mint progress range"
          - "By mint activity"
        sorting_options:
          - "By mint progress"
          - "By recent activity"
          - "By deploy date"
      
      trending_view:
        description: "View of trending tokens"
        data_requirements:
          - "Recent mint transactions"
          - "Mint progress"
          - "Top mints percentage"
          - "Holders count"
        filtering_options:
          - "By time period (24h, 7d)"
          - "By mint volume"
          - "By holder growth"
        sorting_options:
          - "By mint activity"
          - "By holder growth"
      
      specialized_views:
        trending_minting:
          description: "Trending tokens currently minting"
          data_requirements:
            - "Active minting tokens"
            - "Recent mint transactions"
            - "Mint progress"
            - "Top mints percentage"
          parameters:
            - "Transaction count (default 1000)"
            - "Time period"
            - "Page/limit"
        
        top_market_cap:
          description: "Top tokens by market capitalization"
          data_requirements:
            - "Fully minted tokens"
            - "Market data (price, mcap, volume)"
            - "Holder counts"
          parameters:
            - "Page/limit"
            - "Min market cap"
            - "Min volume"
    
    migrations:
      phase_1:
        - "Create base interfaces in shared types directory"
        - "Update existing types to extend base interfaces"
        - "Add JSDoc documentation for all types"
      
      phase_2:
        - "Implement new performance monitoring types"
        - "Add market data types with proper validation"
        - "Update service layer to use new types"
      
      phase_3:
        - "Consolidate duplicate types across files"
        - "Remove deprecated type definitions"
        - "Update all imports to use new type paths"
    
    validation:
      typescript:
        - "Run type checking with strict mode"
        - "Verify no any types in core logic"
        - "Ensure proper nullability handling"
      
      runtime:
        - "Add runtime type validation for API responses"
        - "Implement schema validation using OpenAPI spec"
        - "Add error boundaries for type mismatches"
    
    documentation:
      - "Generate TypeDoc documentation"
      - "Update API documentation to reflect type changes"
      - "Add examples for common type usage"

  affected_files:
    services:
      - "server/services/src20/queryService.ts"
      changes:
        - "Add fetchAndFormatSrc20DataV2"
        - "Add enrichData helper"
        - "Add performance monitoring"
        - "Add type definitions"
      
      - "server/services/src20/marketService.ts"
      changes:
        - "Add batch market data fetching"
        - "Add caching layer"
        - "Add performance metrics"
    
    controller:
      - "server/controller/src20Controller.ts"
      changes:
        - "Add V2 versions of handlers"
        - "Implement gradual migration"
        - "Add monitoring"
    
    routes:
      internal:
        - "routes/src20/index.tsx"
        - "routes/api/internal/src20/trending.ts"
        changes:
          - "Migrate to V2 functions"
          - "Add enhanced error handling"
          - "Add performance monitoring"
      
      api_v2:
        - "routes/api/v2/src20/*"
        notes: "Maintain existing behavior"
        changes:
          - "Add performance monitoring only"
          - "No functional changes in Phase 1"

  backward_compatibility:
    guarantees:
      - "All existing API response formats maintained"
      - "No breaking changes to public endpoints"
      - "Fallback to original behavior on error"
      - "Performance regression protection"
    
    monitoring:
      - "Response time tracking"
      - "Error rate comparison"
      - "Memory usage patterns"
      - "Cache effectiveness"

  rollback_plan:
    triggers:
      - "Error rate increase > 0.1%"
      - "Response time increase > 100ms"
      - "Memory usage spike > 20%"
    
    steps:
      - "Disable V2 functions"
      - "Revert to original implementations"
      - "Clear caches"
      - "Notify monitoring"

  data_fetching_strategy:
    overview:
      description: "Strategy for optimizing data fetching between backend routes and frontend client-side"
      goals:
        - "Optimize above-the-fold content loading"
        - "Balance server vs client-side data fetching"
        - "Maintain responsive UI during data loading"
        - "Support efficient pagination for large datasets"
    
    current_state:
      client_side:
        - component: "SRC20Section.tsx"
          benefits:
            - "Real-time updates without full page reload"
            - "Smooth UI transitions"
            - "Reduced server load for small datasets"
          considerations:
            - "Initial page load performance"
            - "Memory usage for large datasets"
            - "SEO implications"
      
      server_side:
        - routes: "api/v2/src20/*"
          benefits:
            - "Efficient pagination"
            - "Better handling of large datasets"
            - "Improved SEO"
            - "Reduced client-side processing"
          considerations:
            - "Additional server load"
            - "Page reload on data updates"
    
    optimization_plan:
      phase_1_analysis:
        tasks:
          - "Identify critical above-the-fold content"
          - "Measure current performance metrics"
          - "Map data dependencies between components"
          - "Analyze dataset sizes and update frequencies"
        metrics:
          - "Time to First Contentful Paint (FCP)"
          - "Time to Interactive (TTI)"
          - "First Input Delay (FID)"
          - "Memory usage patterns"
      
      phase_2_hybrid_approach:
        server_side:
          components:
            - name: "Initial token list"
              strategy: "Pre-render first page of results"
              benefits:
                - "Faster initial page load"
                - "Better SEO"
                - "Reduced client-side processing"
            
            - name: "Market data summaries"
              strategy: "Server-side aggregation"
              benefits:
                - "Reduced API calls"
                - "Consistent data presentation"
        
        client_side:
          components:
            - name: "Trending tokens"
              strategy: "Real-time updates via client"
              benefits:
                - "Immediate user feedback"
                - "Reduced server load"
            
            - name: "Filter interactions"
              strategy: "Client-side filtering with cached data"
              benefits:
                - "Instant UI response"
                - "Reduced API calls"
      
      phase_3_implementation:
        steps:
          - "Implement server-side rendering for initial data"
          - "Add client-side hydration for interactivity"
          - "Optimize data caching strategy"
          - "Implement progressive loading"
        
        optimizations:
          above_fold:
            - "Pre-render critical content"
            - "Defer non-essential data loading"
            - "Implement placeholder loading states"
          
          pagination:
            - "Virtual scrolling for large lists"
            - "Prefetch next page data"
            - "Cache previous pages"
          
          caching:
            - "Implement service worker caching"
            - "Use memory cache for frequent lookups"
            - "Add cache invalidation strategy"
    
    component_specific_plans:
      SRC20Section:
        current: "Client-side fetching"
        proposed:
          initial_load:
            - "Server-side render first page"
            - "Include critical market data"
            - "Pre-calculate trending tokens"
          
          subsequent_updates:
            - "Client-side fetch for filters"
            - "Real-time updates for trending"
            - "Progressive load for additional pages"
        
        optimization_targets:
          - "Reduce Time to First Meaningful Paint"
          - "Minimize Content Layout Shift"
          - "Optimize memory usage"
      
      TokenDetails:
        current: "Server-side rendering"
        maintain: true
        reasons:
          - "Complex data aggregation"
          - "SEO requirements"
          - "Infrequent updates"
    
    monitoring_and_metrics:
      performance:
        - "Page load times by component"
        - "Server response times"
        - "Client-side rendering times"
        - "Memory usage patterns"
      
      user_experience:
        - "Time to interactivity"
        - "Input responsiveness"
        - "Layout stability"
      
      resource_usage:
        - "API call frequency"
        - "Cache hit rates"
        - "Browser memory usage"
    
    validation_criteria:
      - "Improved or maintained Lighthouse scores"
      - "Reduced Time to Interactive"
      - "Stable memory usage"
      - "Maintained server response times"