@dubsdotapp/expo 0.5.17 → 0.5.18

package/src/index.ts

@@ -77,6 +77,13 @@ export type {
   BuildArcadeEntryResult,
   EnterArcadePoolResult,
   ArcadePoolResult,
+  JackpotRound,
+  JackpotLastWinner,
+  JackpotEntry,
+  JackpotRoundResult,
+  JackpotConfig,
+  BuildJackpotEnterResult,
+  ConfirmJackpotEnterResult,
 } from './types';
 
 // Provider
@@ -111,6 +118,9 @@ export {
   useEnterArcadePool,
   useArcadeCountdown,
   useArcadeBridge,
+  useJackpot,
+  useJackpotHistory,
+  useEnterJackpot,
 } from './hooks';
 export type {
   CreateGameMutationResult,
@@ -129,6 +139,9 @@ export type {
   UseArcadeBridgeResult,
   HighlightVideo,
   ShortVideo,
+  UseJackpotResult,
+  UseJackpotHistoryResult,
+  EnterJackpotMutationResult,
 } from './hooks';
 
 export { useHighlights, useShorts } from './hooks';
@@ -155,6 +168,48 @@ export type {
   ArcadeLeaderboardSheetProps,
 } from './ui';
 
+// Jackpot widgets
+export { JackpotCard, JackpotSheet, JackpotWidget } from './ui';
+export type { JackpotCardProps, JackpotSheetProps, JackpotWidgetProps } from './ui';
+
+// Chat module
+export {
+  ChatProvider,
+  useChatContext,
+  ChatSocket,
+  useChatStatus,
+  useChatMessages,
+  useSendMessage,
+  useOnlineUsers,
+  useUnreadCount,
+  useConversations,
+  useDirectMessages,
+  useFriends,
+  useFriendRequests,
+  useSearchUsers,
+  useSendFriendRequest,
+  useRespondToFriendRequest,
+} from './chat';
+export type {
+  ChatProviderProps,
+  ChatContextValue,
+  ChatSocketConfig,
+  ChatSocketListeners,
+  ChatMessage,
+  ChatMention,
+  ChatPayment,
+  DirectMessage,
+  Conversation,
+  FriendUser,
+  FriendRequest,
+  OnlineUser,
+  TypingEvent,
+  ChatNotification,
+  ChatConnectionStatus,
+  SendMessageParams,
+  SendDMParams,
+} from './chat';
+
 // Utils
 export { signAndSendBase64Transaction } from './utils/transaction';
 export { getDeviceInfo, isSolanaSeeker } from './utils/device';

package/src/types.ts

@@ -581,6 +581,66 @@ export interface ArcadePoolResult {
   best_score: number;
 }
 
+// ── Jackpot ──
+
+export interface JackpotRound {
+  roundId: string;
+  status: 'Open' | 'Locked' | 'Resolved';
+  totalPotLamports: string;
+  totalPotSol: number;
+  entryCount: number;
+  totalWeight: string;
+  timeRemainingSlots: number;
+}
+
+export interface JackpotLastWinner {
+  roundId: string;
+  winner: string;
+  winAmount: string;
+  winAmountSol: number;
+  totalPot: string;
+  entryCount: number;
+  timestamp: string | null;
+}
+
+export interface JackpotEntry {
+  player: string;
+  weight: string;
+  weightSol: number;
+  oddsPercent: string;
+}
+
+export interface JackpotRoundResult {
+  roundId: string;
+  winner: string;
+  winAmount: string;
+  winAmountSol: number;
+  totalPot: string;
+  totalPotSol: number;
+  entryCount: number;
+  timestamp: string;
+}
+
+export interface JackpotConfig {
+  feeBasisPoints: number;
+  roundDurationSlots: string;
+  minEntryLamports: number;
+  minEntrySol: number;
+}
+
+export interface BuildJackpotEnterResult {
+  transaction: string;
+  roundId: string;
+  amount: string;
+  amountSol: number;
+}
+
+export interface ConfirmJackpotEnterResult {
+  attributed: boolean;
+  appId: number;
+  signature: string;
+}
+
 // ── UI Config (developer branding) ──
 
 export interface UiConfig {

package/src/ui/game/JoinGameSheet.tsx

@@ -88,7 +88,7 @@ export function JoinGameSheet({
 
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
 
-  const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | null>(null);
+  const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | 'draw' | null>(null);
   const [wager, setWager] = useState(game.buyIn);
   const [showSuccess, setShowSuccess] = useState(false);
 

package/src/ui/index.ts

@@ -15,6 +15,10 @@ export type { DubsTheme } from './theme';
 
 // Game widgets
 export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, CreateGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet, SolSlider } from './game';
+
+// Jackpot widgets
+export { JackpotCard, JackpotSheet, JackpotWidget } from './jackpot';
+export type { JackpotCardProps, JackpotSheetProps, JackpotWidgetProps } from './jackpot';
 export type {
   GamePosterProps,
   LivePoolsCardProps,

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',
+  },
+});