🔍 Framework Detection

SuperSafe Wallet automatically detects dApp frameworks and adapts connection behavior accordingly, ensuring seamless integration with RainbowKit, Wagmi, Dynamic, and other popular frameworks.

Overview

SuperSafe implements automatic framework detection to provide optimal connection behavior for different dApp frameworks. This ensures compatibility with modern React-based dApp frameworks without requiring manual configuration.

Supported Frameworks

✅ RainbowKit: Full compatibility with RainbowKit's provider detection
✅ Wagmi: React hooks compatibility
✅ Dynamic: Framework detection and adaptation
✅ Web3-React: Standard web3-react compatibility
✅ WalletConnect: WalletConnect v2/Reown integration

Automatic Detection System

Location: src/utils/dAppFrameworkDetector.js

Detection Logic

export function detectDAppFramework(origin, injectedObjects = {}) {
  const detectionResults = {
    framework: 'unknown',
    confidence: 'low',
    indicators: []
  };
  
  // Check for RainbowKit
  if (injectedObjects.isRainbowKit || 
      window.location.href.includes('rainbow')) {
    detectionResults.framework = 'rainbowkit';
    detectionResults.confidence = 'high';
    detectionResults.indicators.push('RainbowKit detected');
  }
  
  // Check for Wagmi
  else if (injectedObjects.isWagmi) {
    detectionResults.framework = 'wagmi';
    detectionResults.confidence = 'high';
    detectionResults.indicators.push('Wagmi detected');
  }
  
  // Check for Dynamic
  else if (window.dynamic || injectedObjects.isDynamic) {
    detectionResults.framework = 'dynamic';
    detectionResults.confidence = 'high';
    detectionResults.indicators.push('Dynamic detected');
  }
  
  // Check for Web3-React
  else if (injectedObjects.isWeb3React) {
    detectionResults.framework = 'web3-react';
    detectionResults.confidence = 'medium';
  }
  
  return detectionResults;
}

Detection Indicators

The detection system uses multiple indicators to identify frameworks:

Window Object Properties: Checks for framework-specific global objects
URL Patterns: Analyzes URL patterns for framework-specific paths
Injected Objects: Checks for framework-specific injected objects
Event Listeners: Monitors for framework-specific event patterns

Framework-Specific Strategies

Location: src/background/strategy/ConnectionStrategies.js

Strategy Configuration

export function getConnectionStrategy(framework) {
  const strategies = {
    rainbowkit: {
      name: 'RainbowKit',
      requiresImmediateResponse: true,
      supportsAccountsChanged: true,
      supportsChainChanged: true,
      handshake: null  // Smart Native Connection
    },
    
    wagmi: {
      name: 'Wagmi',
      requiresImmediateResponse: true,
      supportsAccountsChanged: true,
      supportsChainChanged: true,
      handshake: null
    },
    
    walletconnect: {
      name: 'WalletConnect',
      requiresSession: true,
      supportsMultiChain: true,
      usesNamespaces: true
    }
  };
  
  return strategies[framework] || strategies.rainbowkit;
}

RainbowKit Strategy

Characteristics:

Uses EIP-6963 provider discovery
Supports automatic wallet detection
Requires immediate response to connection requests
Fully compatible with Smart Native Connection

Connection Flow:

RainbowKit detects SuperSafe via EIP-6963
User clicks "Connect Wallet" in RainbowKit UI
RainbowKit calls eth_requestAccounts
SuperSafe shows connection popup
User approves connection
RainbowKit receives account address
Connection established

Wagmi Strategy

Characteristics:

Uses React hooks for wallet connection
Supports EIP-6963 provider discovery
Requires immediate response to connection requests
Compatible with Smart Native Connection

Connection Flow:

Wagmi detects SuperSafe via EIP-6963
Wagmi hook calls eth_requestAccounts
SuperSafe shows connection popup
User approves connection
Wagmi hook receives account address
Connection established

Dynamic Strategy

Characteristics:

Uses Dynamic SDK for wallet connection
Supports multiple wallet providers
Requires framework-specific detection
Adapts connection behavior for Dynamic

Connection Flow:

Dynamic detects SuperSafe provider
Dynamic SDK initiates connection
SuperSafe shows connection popup
User approves connection
Dynamic SDK receives account address
Connection established

EIP-6963 Provider Discovery

Overview

EIP-6963 provides a standardized way for wallets to announce themselves to dApps, enabling automatic detection without relying on window.ethereum.

Implementation

// EIP-6963: Announce provider to dApps
function announceProvider(provider) {
  const detail = {
    info: {
      uuid: 'super-safe-wallet',
      name: 'SuperSafe',
      icon: 'data:image/svg+xml;base64,...',
      rdns: 'cool.supersafe'
    },
    provider: provider
  };
  
  // Announce provider
  window.dispatchEvent(new CustomEvent('eip6963:announceProvider', {
    detail: detail
  }));
  
  // Listen for provider requests
  window.addEventListener('eip6963:requestProvider', () => {
    window.dispatchEvent(new CustomEvent('eip6963:announceProvider', {
      detail: detail
    }));
  });
}

Benefits

✅ RainbowKit/Wagmi Automatic Detection: Frameworks automatically detect SuperSafe
✅ Multi-Wallet Coexistence: Multiple wallets can coexist without conflicts
✅ Standardized Discovery Protocol: Follows EIP-6963 standard
✅ Better dApp Compatibility: Works with modern dApp frameworks