@dubsdotapp/expo 0.5.16 → 0.5.18

package/src/ui/jackpot/JackpotCard.tsx

@@ -0,0 +1,417 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Animated,
+  StyleSheet,
+  Image,
+} from 'react-native';
+import type { JackpotRound, JackpotLastWinner, JackpotEntry } from '../../types';
+import type { ViewStyle } from 'react-native';
+
+export interface JackpotCardProps {
+  round: JackpotRound | null;
+  lastWinner?: JackpotLastWinner | null;
+  entries?: JackpotEntry[];
+  onPress?: () => void;
+  style?: ViewStyle;
+}
+
+function formatSOL(lamports: string | number): string {
+  const val = typeof lamports === 'string' ? parseInt(lamports, 10) : lamports;
+  if (isNaN(val) || val === 0) return '0';
+  const sol = val / 1_000_000_000;
+  // No trailing zeros
+  if (sol >= 100) return sol.toFixed(0);
+  if (sol >= 1) return sol.toFixed(2);
+  if (sol >= 0.01) return sol.toFixed(3);
+  return sol.toFixed(4);
+}
+
+function truncateWallet(addr: string): string {
+  if (!addr || addr.length < 8) return addr || '';
+  return `${addr.slice(0, 4)}...${addr.slice(-4)}`;
+}
+
+export function JackpotCard({ round, lastWinner, entries, onPress, style }: JackpotCardProps) {
+  const shimmerAnim = useRef(new Animated.Value(-1)).current;
+  const pulseAnim = useRef(new Animated.Value(0.4)).current;
+
+  useEffect(() => {
+    // Shimmer sweep: matches web heroSweep (4s)
+    const shimmer = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmerAnim, { toValue: 1, duration: 4000, useNativeDriver: true }),
+        Animated.delay(500),
+        Animated.timing(shimmerAnim, { toValue: -1, duration: 0, useNativeDriver: true }),
+      ]),
+    );
+    shimmer.start();
+
+    // Status dot pulse
+    const pulse = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, { toValue: 1, duration: 1000, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 0.4, duration: 1000, useNativeDriver: true }),
+      ]),
+    );
+    pulse.start();
+
+    return () => { shimmer.stop(); pulse.stop(); };
+  }, [shimmerAnim, pulseAnim]);
+
+  const potSol = round ? formatSOL(round.totalPotLamports) : '0';
+  const isOpen = round?.status === 'Open';
+  const entryCount = round?.entryCount ?? 0;
+  const totalWeight = round ? Number(BigInt(round.totalWeight || '0')) : 0;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.9}
+      onPress={onPress}
+      style={[styles.card, style]}
+    >
+      {/* Green accent gradient background */}
+      <View style={styles.gradientBg} />
+
+      {/* Shimmer sweep overlay */}
+      <Animated.View
+        style={[
+          styles.shimmer,
+          {
+            transform: [{
+              translateX: shimmerAnim.interpolate({
+                inputRange: [-1, 1],
+                outputRange: [-400, 400],
+              }),
+            }],
+          },
+        ]}
+      />
+
+      {/* Bottom accent bar */}
+      <View style={styles.accentBar} />
+
+      {/* Content */}
+      <View style={styles.content}>
+        {/* Status badge */}
+        <View style={styles.statusRow}>
+          <View style={[styles.statusBadge, isOpen ? styles.statusOpen : styles.statusClosed]}>
+            {isOpen && (
+              <Animated.View style={[styles.statusDot, { opacity: pulseAnim }]} />
+            )}
+            <Text style={[styles.statusText, { color: isOpen ? '#22c55e' : '#9ca3af' }]}>
+              {isOpen ? 'Open' : round?.status ?? 'Loading'}
+            </Text>
+          </View>
+          <Text style={styles.entryCountText}>{entryCount} player{entryCount !== 1 ? 's' : ''}</Text>
+        </View>
+
+        {/* Hero pot section */}
+        <View style={styles.heroSection}>
+          <View style={styles.potInfo}>
+            <Text style={styles.jackpotLabel}>JACKPOT</Text>
+            <Text style={styles.potValue}>{potSol} SOL</Text>
+          </View>
+          <Text style={styles.potEmoji}>🤑</Text>
+        </View>
+
+        {/* Info grid: Your Chance / Players / Last Winner */}
+        <View style={styles.infoGrid}>
+          <View style={styles.infoCard}>
+            <Text style={styles.infoLabel}>PLAYERS</Text>
+            <Text style={styles.infoValue}>{entryCount}</Text>
+          </View>
+          <View style={styles.infoCard}>
+            <Text style={styles.infoLabel}>TOTAL POT</Text>
+            <Text style={[styles.infoValue, { color: '#4ade80' }]}>{potSol}</Text>
+          </View>
+          <View style={styles.infoCard}>
+            <Text style={styles.infoLabel}>LAST WIN</Text>
+            <Text style={[styles.infoValue, { color: '#22c55e' }]}>
+              {lastWinner ? formatSOL(lastWinner.winAmount) : '—'}
+            </Text>
+          </View>
+        </View>
+
+        {/* Player carousel (horizontal scroll of entry chips) */}
+        {entries && entries.length > 0 && (
+          <View style={styles.playersSection}>
+            <View style={styles.playersSectionHeader}>
+              <Text style={styles.playersSectionTitle}>Players in Round</Text>
+              <View style={styles.activeCountBadge}>
+                <Text style={styles.activeCountText}>{entries.length}</Text>
+              </View>
+            </View>
+            <View style={styles.playersCarousel}>
+              {entries.slice(0, 8).map((entry, i) => {
+                const odds = entry.oddsPercent;
+                return (
+                  <View key={`${entry.player}-${i}`} style={styles.playerCard}>
+                    {/* Avatar placeholder */}
+                    <View style={styles.playerAvatar}>
+                      <Text style={styles.playerAvatarText}>
+                        {entry.player.slice(0, 2).toUpperCase()}
+                      </Text>
+                    </View>
+                    <Text style={styles.playerWallet} numberOfLines={1}>
+                      {truncateWallet(entry.player)}
+                    </Text>
+                    <Text style={styles.playerWager}>{entry.weightSol.toFixed(2)} SOL</Text>
+                    <Text style={styles.playerOdds}>{odds}%</Text>
+                  </View>
+                );
+              })}
+              {entries.length > 8 && (
+                <View style={styles.playerCardMore}>
+                  <Text style={styles.playerMoreText}>+{entries.length - 8}</Text>
+                </View>
+              )}
+            </View>
+          </View>
+        )}
+
+        {/* Place Bet CTA */}
+        <TouchableOpacity
+          style={styles.placeBetButton}
+          activeOpacity={0.85}
+          onPress={onPress}
+        >
+          <Text style={styles.placeBetText}>Place Bet</Text>
+        </TouchableOpacity>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(34, 197, 94, 0.2)',
+    backgroundColor: '#0c0c14',
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  gradientBg: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(34, 197, 94, 0.04)',
+  },
+  shimmer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 120,
+    backgroundColor: 'rgba(34, 197, 94, 0.08)',
+  },
+  accentBar: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: '40%' as any,
+    height: 2,
+    backgroundColor: '#22c55e',
+  },
+  content: {
+    padding: 16,
+    gap: 12,
+  },
+  // Status row
+  statusRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  statusBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 100,
+  },
+  statusOpen: {
+    backgroundColor: 'rgba(34, 197, 94, 0.15)',
+  },
+  statusClosed: {
+    backgroundColor: 'rgba(156, 163, 175, 0.15)',
+  },
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: '#22c55e',
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  entryCountText: {
+    fontSize: 12,
+    color: '#6b6b6b',
+    fontWeight: '500',
+  },
+  // Hero pot
+  heroSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  potInfo: {
+    flex: 1,
+  },
+  jackpotLabel: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#6b6b6b',
+    letterSpacing: 3,
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
+  potValue: {
+    fontSize: 36,
+    fontWeight: '900',
+    color: '#4ade80',
+    letterSpacing: -1,
+  },
+  potEmoji: {
+    fontSize: 40,
+    opacity: 0.2,
+  },
+  // Info grid
+  infoGrid: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  infoCard: {
+    flex: 1,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#1e1e2a',
+    backgroundColor: '#0c0c14',
+    padding: 12,
+  },
+  infoLabel: {
+    fontSize: 9,
+    fontWeight: '600',
+    color: '#6b6b6b',
+    letterSpacing: 2,
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
+  infoValue: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  // Players section
+  playersSection: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#1e1e2a',
+    backgroundColor: 'rgba(139, 92, 246, 0.04)',
+    padding: 12,
+    overflow: 'hidden',
+  },
+  playersSectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  playersSectionTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#a0a0a0',
+  },
+  activeCountBadge: {
+    backgroundColor: 'rgba(34, 197, 94, 0.15)',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 100,
+  },
+  activeCountText: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#22c55e',
+  },
+  playersCarousel: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  playerCard: {
+    width: 96,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    borderColor: 'rgba(139, 92, 246, 0.4)',
+    backgroundColor: 'rgba(139, 92, 246, 0.08)',
+    padding: 10,
+    alignItems: 'center',
+    gap: 4,
+  },
+  playerAvatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1.5,
+    borderColor: '#8b5cf6',
+    backgroundColor: 'rgba(139, 92, 246, 0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playerAvatarText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#a78bfa',
+  },
+  playerWallet: {
+    fontSize: 10,
+    fontWeight: '500',
+    color: '#a0a0a0',
+    width: '100%',
+    textAlign: 'center',
+  },
+  playerWager: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#a78bfa',
+  },
+  playerOdds: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: '#22c55e',
+  },
+  playerCardMore: {
+    width: 96,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    borderColor: '#1e1e2a',
+    backgroundColor: '#14141e',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playerMoreText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#6b6b6b',
+  },
+  // Place bet CTA
+  placeBetButton: {
+    height: 52,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#22c55e',
+    shadowColor: '#22c55e',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 6,
+  },
+  placeBetText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});