Splash Screen

// Start vibing handler with connection check
const handleStartVibing = () => {
  if (connected && account) {
    setVibestreamModalVisible(true);
  } else {
    openModal(); // Open wallet connection modal
  }
};

// Vibe Market access with connection requirement
const handleVibeMarket = () => {
  if (connected && account) {
    onOpenVibeMarket();
  } else {
    openModal();
  }
};

// Live vibestreams navigation
const handleLiveVibes = () => {
  if (connected && account) {
    onOpenLiveVibes?.();
  } else {
    openModal();
  }
};

// Glitch line generation in SplashScreen.tsx
type GlitchLine = {
  y: number;
  width: number;
  opacity: number;
};

const generateGlitchLines = (count) => {
  const lines = [];
  for (let i = 0; i < count; i++) {
    const y = Math.random() * height;
    const lineWidth = Math.random() * 100 + 50;
    const opacity = Math.random() * 0.5 + 0.1;
    lines.push({ y, width: lineWidth, opacity });
  }
  return lines;
};

const glitchLines = generateGlitchLines(15);

// Layered background rendering
{/* Dark background */}
<View style={styles.background} />

{/* Acid color gradient overlay */}
<LinearGradient
  colors={['rgba(0,0,0,0.8)', 'rgba(10,10,10,0.9)']}
  style={styles.gradientBackground}
/>

{/* Glitch lines with brand colors */}
{glitchLines.map((line, index) => (
  <View 
    key={index}
    style={[
      styles.glitchLine,
      {
        top: line.y,
        width: line.width,
        opacity: line.opacity,
        backgroundColor: index % 3 === 0 ? COLORS.primary : 
                        index % 3 === 1 ? COLORS.secondary : COLORS.accent
      }
    ]}
  />
))}

{/* Noise texture overlay */}
<View style={styles.noiseOverlay} />

// Logo and brand display in SplashScreen.tsx
<View style={styles.logoContainer}>
  <View style={styles.logoBox}>
    <Text style={styles.logoText}>V</Text>
  </View>
  <Text style={styles.title}>VIBES<Text style={styles.titleAccent}>FLOW</Text></Text>
  <Text style={styles.slogan}>{BRANDING.slogan}</Text>
</View>

// Primary action buttons
<View style={styles.buttonsContainer}>
  <TouchableOpacity 
    style={styles.startButton}
    onPress={handleStartVibing}
  >
    <Text style={styles.startButtonText}>START_VIBING</Text>
    <View style={styles.buttonGlow} />
  </TouchableOpacity>
  
  <TouchableOpacity 
    style={styles.marketButton}
    onPress={handleVibeMarket}
  >
    <Text style={styles.marketButtonText}>VIBE_MARKET</Text>
    <View style={styles.marketButtonGlow} />
  </TouchableOpacity>
</View>

// Modal components integration
<ConnectModal /> {/* Wallet connection handled by context */}

<VibestreamModal
  visible={vibestreamModalVisible}
  onClose={() => setVibestreamModalVisible(false)}
  onLaunchVibePlayer={onLaunchVibePlayer}
/>

// Component state management
const [vibestreamModalVisible, setVibestreamModalVisible] = useState(false);
const [showDisconnectDropdown, setShowDisconnectDropdown] = useState(false);

// Cleanup handlers
const handleDisconnect = () => {
  disconnect();
  setShowDisconnectDropdown(false);
};

const handleOpenProfile = () => {
  onOpenProfile();
  setShowDisconnectDropdown(false);
};

// Platform-specific styling
const styles = StyleSheet.create({
  connectText: {
    color: COLORS.primary,
    fontWeight: '700',
    fontSize: 14,
    letterSpacing: 2,
  },
  startButtonText: {
    color: COLORS.primary,
    fontSize: width < 400 ? 16 : 18, // Responsive font sizing
    fontWeight: 'bold',
    letterSpacing: 1.5,
    textAlign: 'center',
  },
  // ... additional responsive styles
});

// Accessibility properties
<TouchableOpacity 
  style={styles.connectButton}
  onPress={handleWalletClick}
  activeOpacity={0.6}
  accessibilityLabel={connected ? "Wallet connected" : "Connect wallet"}
  accessibilityHint={connected ? "Tap to view account options" : "Tap to connect your wallet"}
>

// Graceful handling of tracking failures
useEffect(() => {
  const startTracking = async () => {
    try {
      await liveVibestreamsTracker.startTracking((data) => {
        setLiveVibestreamsData(data);
      });
    } catch (error) {
      console.warn('Failed to start live vibestreams tracking:', error);
      // Continue without live tracking
    }
  };

  startTracking();
}, []);

// Default state for live counter when tracking fails
const [liveVibestreamsData, setLiveVibestreamsData] = useState({
  liveVibestreams: [],
  totalLive: 0,      // Safe default
  nearLive: 0,
  metisLive: 0,
  lastUpdated: 0
});

// Memoized glitch lines generation
const glitchLines = useMemo(() => generateGlitchLines(15), []);

// Optimized update intervals
useEffect(() => {
  // Only track when component is mounted
  const cleanup = liveVibestreamsTracker.startTracking(setLiveVibestreamsData);
  
  return () => {
    cleanup?.();
  };
}, []);