@dubsdotapp/expo 0.2.39 → 0.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.2.39",
+  "version": "0.2.41",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/index.ts

@@ -99,7 +99,7 @@ export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsT
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, DubsTheme } from './ui';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet } from './ui';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton } from './ui';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -109,6 +109,7 @@ export type {
   CreateCustomGameSheetProps,
   JoinGameSheetProps,
   ClaimPrizeSheetProps,
+  ClaimButtonProps,
 } from './ui';
 
 // Utils

package/src/provider.tsx

@@ -1,4 +1,6 @@
 import React, { createContext, useContext, useMemo, useCallback, useState, useEffect } from 'react';
+import { ThemeOverrideProvider } from './ui/theme';
+import type { DubsTheme } from './ui/theme';
 import { Connection } from '@solana/web3.js';
 import { DubsClient } from './client';
 import { NETWORK_CONFIG } from './constants';
@@ -104,49 +106,24 @@ export function DubsProvider({
   // Wait for config before rendering so accent color is applied on first paint
   if (uiConfig === null) return null;
 
+  // Build theme overrides from server config so all SDK components respect the tint
+  const themeOverrides: Partial<DubsTheme> = {};
+  if (uiConfig.accentColor) {
+    themeOverrides.accent = uiConfig.accentColor;
+  }
+
   // ── Path A: External wallet provided (BYOA) ──
   if (externalWallet) {
     return (
-      <ExternalWalletProvider
-        client={client}
-        connection={connection}
-        wallet={externalWallet}
-        appName={uiConfig.appName || appName}
-        network={network}
-        storage={storage}
-        managed={managed}
-        renderLoading={renderLoading}
-        renderError={renderError}
-        renderRegistration={renderRegistration}
-        accentColor={uiConfig.accentColor}
-        uiConfig={uiConfig}
-      >
-        {children}
-      </ExternalWalletProvider>
-    );
-  }
-
-  // ── Path B: Managed MWA wallet ──
-  return (
-    <ManagedWalletProvider
-      appName={uiConfig.appName || appName}
-      cluster={cluster}
-      storage={storage}
-      renderConnectScreen={renderConnectScreen}
-      accentColor={uiConfig.accentColor}
-      appIcon={uiConfig.appIcon}
-      tagline={uiConfig.tagline}
-      redirectUri={redirectUri}
-      appUrl={appUrl || uiConfig.appUrl}
-    >
-      {(adapter) => (
-        <ManagedInner
+      <ThemeOverrideProvider value={themeOverrides}>
+        <ExternalWalletProvider
           client={client}
           connection={connection}
-          wallet={adapter}
+          wallet={externalWallet}
           appName={uiConfig.appName || appName}
           network={network}
           storage={storage}
+          managed={managed}
           renderLoading={renderLoading}
           renderError={renderError}
           renderRegistration={renderRegistration}
@@ -154,9 +131,44 @@ export function DubsProvider({
           uiConfig={uiConfig}
         >
           {children}
-        </ManagedInner>
-      )}
-    </ManagedWalletProvider>
+        </ExternalWalletProvider>
+      </ThemeOverrideProvider>
+    );
+  }
+
+  // ── Path B: Managed MWA wallet ──
+  return (
+    <ThemeOverrideProvider value={themeOverrides}>
+      <ManagedWalletProvider
+        appName={uiConfig.appName || appName}
+        cluster={cluster}
+        storage={storage}
+        renderConnectScreen={renderConnectScreen}
+        accentColor={uiConfig.accentColor}
+        appIcon={uiConfig.appIcon}
+        tagline={uiConfig.tagline}
+        redirectUri={redirectUri}
+        appUrl={appUrl || uiConfig.appUrl}
+      >
+        {(adapter) => (
+          <ManagedInner
+            client={client}
+            connection={connection}
+            wallet={adapter}
+            appName={uiConfig.appName || appName}
+            network={network}
+            storage={storage}
+            renderLoading={renderLoading}
+            renderError={renderError}
+            renderRegistration={renderRegistration}
+            accentColor={uiConfig.accentColor}
+            uiConfig={uiConfig}
+          >
+            {children}
+          </ManagedInner>
+        )}
+      </ManagedWalletProvider>
+    </ThemeOverrideProvider>
   );
 }
 

package/src/types.ts

@@ -213,6 +213,8 @@ export interface GameDetail {
   status: string;
   league: string | null;
   lockTimestamp: number | null;
+  /** Winning side: 'home' | 'away' | 'draw' | null (null = refund) */
+  winnerSide: string | null;
   opponents: GameListOpponent[];
   bettors: Bettor[];
   homePool: number;

package/src/ui/game/ClaimButton.tsx

@@ -0,0 +1,122 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { StyleSheet, Text, TouchableOpacity, type ViewStyle } from 'react-native';
+import { useDubsTheme } from '../theme';
+import { useDubs } from '../../provider';
+import { useGame } from '../../hooks/useGame';
+import { useHasClaimed } from '../../hooks/useHasClaimed';
+import { ClaimPrizeSheet } from './ClaimPrizeSheet';
+import type { ClaimMutationResult } from '../../hooks/useClaim';
+
+export interface ClaimButtonProps {
+  gameId: string;
+  style?: ViewStyle;
+  onSuccess?: (result: ClaimMutationResult) => void;
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Drop-in claim button that handles eligibility checks, prize/refund display,
+ * and the claim sheet lifecycle internally.
+ *
+ * Renders nothing when the user is ineligible (lost, not resolved, not a bettor, etc.).
+ */
+export function ClaimButton({ gameId, style, onSuccess, onError }: ClaimButtonProps) {
+  const t = useDubsTheme();
+  const { wallet } = useDubs();
+  const game = useGame(gameId);
+  const claimStatus = useHasClaimed(gameId);
+  const [sheetVisible, setSheetVisible] = useState(false);
+
+  const walletAddress = wallet.publicKey?.toBase58() ?? null;
+
+  const myBet = useMemo(() => {
+    if (!walletAddress || !game.data?.bettors) return null;
+    return game.data.bettors.find(b => b.wallet === walletAddress) ?? null;
+  }, [walletAddress, game.data?.bettors]);
+
+  const isResolved = game.data?.isResolved ?? false;
+  const isRefund = isResolved && game.data?.winnerSide === null;
+  const isWinner = isResolved && myBet != null && myBet.team === game.data?.winnerSide;
+  const isEligible = myBet != null && isResolved && (isWinner || isRefund);
+  const prizeAmount = isRefund ? (myBet?.amount ?? 0) : (game.data?.totalPool ?? 0);
+
+  const handleSuccess = useCallback(
+    (result: ClaimMutationResult) => {
+      claimStatus.refetch();
+      onSuccess?.(result);
+    },
+    [claimStatus.refetch, onSuccess], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  // Don't render while loading, missing data, or ineligible
+  if (game.loading || claimStatus.loading || !game.data || !walletAddress || !isEligible) {
+    return null;
+  }
+
+  const label = isRefund ? 'Refund' : 'Prize';
+
+  if (claimStatus.hasClaimed) {
+    return (
+      <TouchableOpacity
+        style={[styles.badge, { borderColor: t.accent }, style]}
+        activeOpacity={1}
+        disabled
+      >
+        <Text style={[styles.badgeText, { color: t.accent }]}>
+          {label} Claimed!
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: t.accent }, style]}
+        activeOpacity={0.8}
+        onPress={() => setSheetVisible(true)}
+      >
+        <Text style={styles.buttonText}>
+          Claim {label} — {prizeAmount} SOL
+        </Text>
+      </TouchableOpacity>
+
+      <ClaimPrizeSheet
+        visible={sheetVisible}
+        onDismiss={() => setSheetVisible(false)}
+        gameId={gameId}
+        prizeAmount={prizeAmount}
+        isRefund={isRefund}
+        onSuccess={handleSuccess}
+        onError={onError}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 52,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  badge: {
+    height: 52,
+    borderRadius: 14,
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  badgeText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});

package/src/ui/game/ClaimPrizeSheet.tsx

@@ -215,7 +215,7 @@ export function ClaimPrizeSheet({
               <TouchableOpacity
                 style={[
                   styles.ctaButton,
-                  { backgroundColor: canClaim ? t.success : t.border },
+                  { backgroundColor: canClaim ? t.accent : t.border },
                 ]}
                 disabled={!canClaim}
                 onPress={handleClaim}

package/src/ui/game/JoinGameButton.tsx

@@ -42,7 +42,7 @@ export function JoinGameButton({ game, walletAddress, selectedTeam, status, onJo
         <Text style={[styles.buyInValue, { color: t.text }]}>{game.buyIn} SOL</Text>
       </View>
       <TouchableOpacity
-        style={[styles.button, { backgroundColor: selectedTeam ? '#22D3EE' : t.border }]}
+        style={[styles.button, { backgroundColor: selectedTeam ? t.accent : t.border }]}
         disabled={!selectedTeam || isJoining}
         onPress={onJoin}
         activeOpacity={0.8}

package/src/ui/game/index.ts

@@ -14,3 +14,5 @@ export { JoinGameSheet } from './JoinGameSheet';
 export type { JoinGameSheetProps } from './JoinGameSheet';
 export { ClaimPrizeSheet } from './ClaimPrizeSheet';
 export type { ClaimPrizeSheetProps } from './ClaimPrizeSheet';
+export { ClaimButton } from './ClaimButton';
+export type { ClaimButtonProps } from './ClaimButton';

package/src/ui/index.ts

@@ -10,7 +10,7 @@ export { useDubsTheme, mergeTheme } from './theme';
 export type { DubsTheme } from './theme';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet } from './game';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton } from './game';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -20,4 +20,5 @@ export type {
   CreateCustomGameSheetProps,
   JoinGameSheetProps,
   ClaimPrizeSheetProps,
+  ClaimButtonProps,
 } from './game';

package/src/ui/theme.ts

@@ -1,3 +1,4 @@
+import { createContext, useContext } from 'react';
 import { useColorScheme } from 'react-native';
 
 export interface DubsTheme {
@@ -51,9 +52,16 @@ const light: DubsTheme = {
   errorBorder: '#FECACA',
 };
 
+/** Context for provider-level theme overrides (e.g. accent color from developer config). */
+const ThemeOverrideContext = createContext<Partial<DubsTheme>>({});
+export const ThemeOverrideProvider = ThemeOverrideContext.Provider;
+
 export function useDubsTheme(): DubsTheme {
   const scheme = useColorScheme();
-  return scheme === 'light' ? light : dark;
+  const base = scheme === 'light' ? light : dark;
+  const overrides = useContext(ThemeOverrideContext);
+  if (Object.keys(overrides).length === 0) return base;
+  return { ...base, ...overrides };
 }
 
 /** Merge overrides into a base theme (e.g. custom accent color from developer config) */