@bettoredge/calcutta 0.3.0 → 0.4.0

package/src/components/CalcuttaEscrow.tsx

@@ -66,10 +66,25 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
     const hasBalance = player_balance != null;
     const insufficientBalance = hasBalance && action === 'transfer_in' && numericAmount > Number(player_balance);
     const shortfall = insufficientBalance ? numericAmount - Number(player_balance) : 0;
+    const exceedsBudget = action === 'transfer_in' && budgetRemaining !== null && numericAmount > budgetRemaining;
+    const exceedsWithdraw = action === 'transfer_out' && numericAmount > available;
+    const [actionError, setActionError] = useState('');
+
+    const isInvalidAmount = numericAmount <= 0 || exceedsBudget || exceedsWithdraw || (insufficientBalance && !onDepositFunds);
+
+    const getValidationMessage = (): string => {
+        if (numericAmount <= 0) return '';
+        if (exceedsBudget) return `Budget cap: ${formatCurrency(Number(max_escrow), market_type)}. You can deposit up to ${formatCurrency(budgetRemaining ?? 0, market_type)} more.`;
+        if (exceedsWithdraw) return `You only have ${formatCurrency(available, market_type)} available to withdraw.`;
+        if (insufficientBalance && !onDepositFunds) return `Insufficient wallet balance. You have ${formatCurrency(player_balance, market_type)}.`;
+        return '';
+    };
+
+    const validationMessage = getValidationMessage();
 
     const handleAction = async () => {
         if (isNaN(numericAmount) || numericAmount <= 0) return;
-        if (action === 'transfer_in' && budgetRemaining !== null && numericAmount > budgetRemaining) return;
+        setActionError('');
         if (insufficientBalance && onDepositFunds) {
             onDepositFunds(Math.ceil(shortfall * 100) / 100);
             return;
@@ -84,12 +99,22 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
             if (result) {
                 onUpdate(result);
                 setAmount('');
+                setActionError('');
             }
-        } catch {}
+        } catch (e: any) {
+            setActionError(e?.message || 'Transfer failed. Please try again.');
+        }
     };
 
     const handleQuickAmount = (amt: number) => {
-        setAmount(String(amt));
+        // Cap quick amount to budget remaining for deposits
+        if (action === 'transfer_in' && budgetRemaining !== null) {
+            setAmount(String(Math.min(amt, budgetRemaining)));
+        } else if (action === 'transfer_out') {
+            setAmount(String(Math.min(amt, available)));
+        } else {
+            setAmount(String(amt));
+        }
     };
 
     // ============================================
@@ -278,14 +303,14 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                 </View>
                 <TouchableOpacity
                     style={[styles.submitBtn, {
-                        backgroundColor: insufficientBalance
+                        backgroundColor: insufficientBalance && onDepositFunds
                             ? theme.colors.status.error
-                            : (loading || !amount || numericAmount <= 0 || (action === 'transfer_in' && budgetFullyDeposited))
+                            : (loading || isInvalidAmount)
                                 ? theme.colors.surface.elevated
                                 : theme.colors.primary.default,
                     }]}
                     onPress={handleAction}
-                    disabled={loading || !amount || numericAmount <= 0 || (action === 'transfer_in' && budgetFullyDeposited)}
+                    disabled={loading || (isInvalidAmount && !(insufficientBalance && onDepositFunds))}
                     activeOpacity={0.7}
                 >
                     {loading ? (
@@ -295,13 +320,13 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                             <Ionicons
                                 name={action === 'transfer_in' ? 'arrow-down-circle' : 'arrow-up-circle'}
                                 size={20}
-                                color={(!amount || numericAmount <= 0) ? theme.colors.text.tertiary : '#FFFFFF'}
+                                color={isInvalidAmount ? theme.colors.text.tertiary : '#FFFFFF'}
                             />
                             <Text
                                 variant="body"
                                 bold
                                 style={{
-                                    color: (!amount || numericAmount <= 0) ? theme.colors.text.tertiary : '#FFFFFF',
+                                    color: isInvalidAmount ? theme.colors.text.tertiary : '#FFFFFF',
                                     marginLeft: 6,
                                 }}
                             >
@@ -316,8 +341,18 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                 </TouchableOpacity>
             </View>
 
-            {/* Insufficient balance */}
-            {insufficientBalance && (
+            {/* Validation message (budget cap, withdraw limit, etc.) */}
+            {validationMessage ? (
+                <View variant="transparent" style={[styles.warningRow, { backgroundColor: '#D9770615' }]}>
+                    <Ionicons name="information-circle-outline" size={16} color="#D97706" />
+                    <Text variant="caption" style={{ color: '#D97706', marginLeft: 8, flex: 1 }}>
+                        {validationMessage}
+                    </Text>
+                </View>
+            ) : null}
+
+            {/* Insufficient wallet balance */}
+            {insufficientBalance && !validationMessage && (
                 <View variant="transparent" style={[styles.warningRow, { backgroundColor: theme.colors.status.error + '10' }]}>
                     <Ionicons name="warning-outline" size={16} color={theme.colors.status.error} />
                     <Text variant="caption" style={{ color: theme.colors.status.error, marginLeft: 8, flex: 1 }}>
@@ -326,12 +361,12 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                 </View>
             )}
 
-            {/* Error */}
-            {error && (
+            {/* API error */}
+            {(error || actionError) && (
                 <View variant="transparent" style={[styles.warningRow, { backgroundColor: theme.colors.status.error + '10' }]}>
                     <Ionicons name="alert-circle-outline" size={16} color={theme.colors.status.error} />
                     <Text variant="caption" style={{ color: theme.colors.status.error, marginLeft: 8, flex: 1 }}>
-                        {error}
+                        {actionError || error}
                     </Text>
                 </View>
             )}
@@ -442,6 +477,7 @@ const styles = StyleSheet.create({
     input: {
         flex: 1,
         fontSize: 18,
+        lineHeight: 24,
         height: 48,
         padding: 0,
     },

package/src/components/CalcuttaLeaderboard.tsx

@@ -74,7 +74,7 @@ export const CalcuttaLeaderboard: React.FC<CalcuttaLeaderboardProps> = ({
                         <Image source={{ uri: profilePic }} style={styles.avatar} />
                     ) : (
                         <View variant="transparent" style={[styles.avatar, { backgroundColor: theme.colors.primary.subtle }]}>
-                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 10 }}>
+                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 10, lineHeight: 13 }}>
                                 {username.charAt(0).toUpperCase()}
                             </Text>
                         </View>
@@ -84,7 +84,7 @@ export const CalcuttaLeaderboard: React.FC<CalcuttaLeaderboardProps> = ({
                             <Text variant="body" bold={isMe} numberOfLines={1} style={{ flex: 1 }}>{username}</Text>
                             {isMe && (
                                 <View variant="transparent" style={[styles.youBadge, { backgroundColor: theme.colors.primary.subtle }]}>
-                                    <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 9 }}>YOU</Text>
+                                    <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 9, lineHeight: 12 }}>YOU</Text>
                                 </View>
                             )}
                         </View>

package/src/components/EscrowWidget.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaEscrowProps } from '@bettoredge/types';
+import { useCalcuttaEscrow } from '../hooks/useCalcuttaEscrow';
+import { formatCurrency } from '../helpers/formatting';
+import { CalcuttaEscrow } from './CalcuttaEscrow';
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+export interface EscrowWidgetProps {
+    calcutta_competition_id: string;
+    market_type: string;
+    max_escrow?: number;
+    player_balance?: number;
+    onDepositFunds?: (amount: number) => void;
+    readOnly?: boolean;
+    onUpdate?: () => void;
+    initialExpanded?: boolean;
+}
+
+export const EscrowWidget: React.FC<EscrowWidgetProps> = ({
+    calcutta_competition_id,
+    market_type,
+    max_escrow,
+    player_balance,
+    onDepositFunds,
+    readOnly,
+    onUpdate,
+    initialExpanded,
+}) => {
+    const { theme } = useTheme();
+    const { escrow, fetchEscrow } = useCalcuttaEscrow(calcutta_competition_id);
+    const [expanded, setExpanded] = useState(initialExpanded ?? false);
+
+    useEffect(() => {
+        if (initialExpanded) setExpanded(true);
+    }, [initialExpanded]);
+
+    useEffect(() => {
+        fetchEscrow();
+    }, []);
+
+    const available = Number(escrow?.escrow_balance ?? 0);
+    const committed = Number(escrow?.committed_balance ?? 0);
+    const hasFunds = available > 0 || committed > 0;
+
+    const toggle = () => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setExpanded(!expanded);
+    };
+
+    return (
+        <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+            {/* Collapsed header — always visible */}
+            <TouchableOpacity
+                style={styles.header}
+                onPress={readOnly ? undefined : toggle}
+                activeOpacity={readOnly ? 1 : 0.7}
+            >
+                <View variant="transparent" style={[styles.iconCircle, { backgroundColor: hasFunds ? theme.colors.status.successSubtle : theme.colors.primary.subtle }]}>
+                    <Ionicons
+                        name="wallet-outline"
+                        size={18}
+                        color={hasFunds ? theme.colors.status.success : theme.colors.primary.default}
+                    />
+                </View>
+                <View variant="transparent" style={styles.headerText}>
+                    <Text variant="body" bold>
+                        {formatCurrency(available, market_type)}
+                        <Text variant="caption" color="tertiary"> available</Text>
+                    </Text>
+                    {committed > 0 && (
+                        <Text variant="caption" color="tertiary">
+                            {formatCurrency(committed, market_type)} committed
+                        </Text>
+                    )}
+                </View>
+                {!readOnly && (
+                    <View variant="transparent" style={[styles.addBtn, { backgroundColor: theme.colors.primary.default }]}>
+                        <Ionicons name={expanded ? 'chevron-up' : 'add'} size={18} color="#FFFFFF" />
+                        {!expanded && (
+                            <Text variant="caption" bold style={{ color: '#FFFFFF', marginLeft: 4 }}>
+                                {hasFunds ? 'Manage' : 'Add Funds'}
+                            </Text>
+                        )}
+                    </View>
+                )}
+            </TouchableOpacity>
+
+            {/* Budget cap bar (always visible if applicable) */}
+            {max_escrow != null && Number(max_escrow) > 0 && (
+                <View variant="transparent" style={styles.budgetBar}>
+                    <View variant="transparent" style={[styles.barTrack, { backgroundColor: theme.colors.surface.base }]}>
+                        <View variant="transparent" style={[styles.barFill, {
+                            width: `${Math.min(100, ((Number(escrow?.total_deposited ?? 0) - Number(escrow?.total_withdrawn ?? 0)) / Number(max_escrow)) * 100)}%`,
+                            backgroundColor: theme.colors.primary.default,
+                        }]} />
+                    </View>
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 4 }}>
+                        Budget: {formatCurrency(Number(max_escrow), market_type)}
+                    </Text>
+                </View>
+            )}
+
+            {/* Expanded: full escrow management */}
+            {expanded && !readOnly && (
+                <View variant="transparent" style={styles.expandedContent}>
+                    <CalcuttaEscrow
+                        calcutta_competition_id={calcutta_competition_id}
+                        escrow={escrow ?? undefined}
+                        market_type={market_type}
+                        max_escrow={max_escrow}
+                        player_balance={player_balance}
+                        onDepositFunds={onDepositFunds}
+                        onUpdate={(updated) => {
+                            fetchEscrow();
+                            onUpdate?.();
+                        }}
+                    />
+                </View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 14,
+        borderWidth: 1,
+        overflow: 'hidden',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 14,
+    },
+    iconCircle: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerText: {
+        flex: 1,
+        marginLeft: 12,
+    },
+    addBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 20,
+    },
+    budgetBar: {
+        paddingHorizontal: 14,
+        paddingBottom: 12,
+    },
+    barTrack: {
+        height: 4,
+        borderRadius: 2,
+        overflow: 'hidden',
+    },
+    barFill: {
+        height: 4,
+        borderRadius: 2,
+    },
+    expandedContent: {
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(128,128,128,0.15)',
+    },
+});

package/src/components/ItemSoldCelebration.tsx

@@ -0,0 +1,288 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, Animated, Image } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaAuctionItemProps } from '@bettoredge/types';
+import { formatCurrency } from '../helpers/formatting';
+import { CalcuttaCountdown } from './CalcuttaCountdown';
+
+export interface ItemSoldCelebrationProps {
+    visible: boolean;
+    item?: CalcuttaAuctionItemProps;
+    winnerName?: string;
+    winnerProfilePic?: string;
+    winningBid?: number;
+    isMe?: boolean;
+    marketType?: string;
+    /** Next item coming up (shown at bottom of modal) */
+    nextItem?: CalcuttaAuctionItemProps;
+    nextItemDeadline?: string;
+    /** Auto-dismiss after this many ms (default 5000) */
+    autoDismissMs?: number;
+    onDismiss: () => void;
+    itemImage?: string;
+}
+
+export const ItemSoldCelebration: React.FC<ItemSoldCelebrationProps> = ({
+    visible,
+    item,
+    winnerName,
+    winnerProfilePic,
+    winningBid,
+    isMe,
+    marketType = 'FOR_MONEY',
+    nextItem,
+    nextItemDeadline,
+    autoDismissMs = 5000,
+    onDismiss,
+    itemImage,
+}) => {
+    const { theme } = useTheme();
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const scaleAnim = useRef(new Animated.Value(0.8)).current;
+    const trophyBounce = useRef(new Animated.Value(0)).current;
+    const confettiAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        if (!visible) {
+            Animated.timing(opacityAnim, { toValue: 0, duration: 300, useNativeDriver: true }).start();
+            return;
+        }
+
+        // Entrance
+        opacityAnim.setValue(0);
+        scaleAnim.setValue(0.8);
+        trophyBounce.setValue(0);
+        confettiAnim.setValue(0);
+
+        Animated.parallel([
+            Animated.timing(opacityAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
+            Animated.spring(scaleAnim, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        ]).start(() => {
+            // Trophy bounce
+            Animated.sequence([
+                Animated.timing(trophyBounce, { toValue: -20, duration: 200, useNativeDriver: true }),
+                Animated.spring(trophyBounce, { toValue: 0, friction: 3, tension: 120, useNativeDriver: true }),
+            ]).start();
+
+            // Confetti burst
+            Animated.timing(confettiAnim, { toValue: 1, duration: 600, useNativeDriver: true }).start();
+        });
+
+        // Auto-dismiss
+        const timer = setTimeout(() => {
+            Animated.timing(opacityAnim, { toValue: 0, duration: 400, useNativeDriver: true }).start(() => onDismiss());
+        }, autoDismissMs);
+
+        return () => clearTimeout(timer);
+    }, [visible]);
+
+    if (!visible || !item) return null;
+
+    const accentColor = isMe ? '#10B981' : '#F59E0B';
+
+    return (
+        <Animated.View style={[styles.overlay, { opacity: opacityAnim }]}>
+            <View variant="transparent" style={styles.backdrop} />
+            <Animated.View style={[styles.card, { transform: [{ scale: scaleAnim }] }]}>
+                {/* Confetti dots */}
+                {[...Array(12)].map((_, i) => {
+                    const angle = (i / 12) * Math.PI * 2;
+                    const colors = ['#F59E0B', '#10B981', '#3B82F6', '#EF4444', '#8B5CF6', '#EC4899'];
+                    return (
+                        <Animated.View
+                            key={i}
+                            style={{
+                                ...StyleSheet.absoluteFillObject,
+                                top: '50%',
+                                left: '50%',
+                                width: 8,
+                                height: 8,
+                                borderRadius: 4,
+                                backgroundColor: colors[i % colors.length],
+                                opacity: confettiAnim,
+                                transform: [
+                                    { translateX: Animated.multiply(confettiAnim, Math.cos(angle) * 120) as any },
+                                    { translateY: Animated.multiply(confettiAnim, Math.sin(angle) * 120 - 40) as any },
+                                    { scale: Animated.subtract(1, Animated.multiply(confettiAnim, 0.5)) as any },
+                                ],
+                            }}
+                        />
+                    );
+                })}
+
+                {/* Trophy */}
+                <Animated.View style={{ transform: [{ translateY: trophyBounce }], marginBottom: 16 }}>
+                    <View variant="transparent" style={[styles.trophyCircle, { backgroundColor: accentColor + '20' }]}>
+                        <Ionicons name="trophy" size={40} color={accentColor} />
+                    </View>
+                </Animated.View>
+
+                {/* SOLD label */}
+                <Text style={[styles.soldLabel, { color: accentColor }]}>SOLD!</Text>
+
+                {/* Item info */}
+                <View variant="transparent" style={styles.itemRow}>
+                    {itemImage ? (
+                        <Image source={{ uri: itemImage }} style={styles.itemImage} resizeMode="cover" />
+                    ) : (
+                        <View variant="transparent" style={[styles.itemImage, { backgroundColor: theme.colors.surface.elevated, alignItems: 'center', justifyContent: 'center' }]}>
+                            <Ionicons name="trophy-outline" size={20} color={theme.colors.text.tertiary} />
+                        </View>
+                    )}
+                    <View variant="transparent" style={{ flex: 1, marginLeft: 12 }}>
+                        <Text style={styles.itemName}>{item.item_name}</Text>
+                        {item.seed != null && <Text style={styles.itemSeed}>Seed #{item.seed}</Text>}
+                    </View>
+                </View>
+
+                {/* Winner + bid */}
+                <View variant="transparent" style={[styles.winnerRow, { backgroundColor: accentColor + '10', borderColor: accentColor + '30' }]}>
+                    {winnerProfilePic ? (
+                        <Image source={{ uri: winnerProfilePic }} style={styles.winnerAvatar} />
+                    ) : (
+                        <View variant="transparent" style={[styles.winnerAvatar, { backgroundColor: accentColor + '30', alignItems: 'center', justifyContent: 'center' }]}>
+                            <Text style={{ color: accentColor, fontWeight: '700', fontSize: 14, lineHeight: 19 }}>
+                                {(winnerName || '?').charAt(0).toUpperCase()}
+                            </Text>
+                        </View>
+                    )}
+                    <View variant="transparent" style={{ flex: 1, marginLeft: 10 }}>
+                        <Text style={[styles.winnerName, { color: accentColor }]}>
+                            {isMe ? 'You won!' : winnerName || 'Winner'}
+                        </Text>
+                        <Text style={styles.bidAmount}>
+                            {formatCurrency(winningBid ?? 0, marketType)}
+                        </Text>
+                    </View>
+                    {isMe && <Ionicons name="checkmark-circle" size={28} color={accentColor} />}
+                </View>
+
+                {/* Next item teaser */}
+                {nextItem && (
+                    <View variant="transparent" style={styles.nextSection}>
+                        <View variant="transparent" style={styles.divider} />
+                        <Text style={styles.nextLabel}>Next up</Text>
+                        <Text style={styles.nextItemName}>{nextItem.item_name}</Text>
+                        {nextItemDeadline && (
+                            <View variant="transparent" style={{ marginTop: 6 }}>
+                                <CalcuttaCountdown targetDate={nextItemDeadline} label="Bidding starts" size="compact" />
+                            </View>
+                        )}
+                    </View>
+                )}
+            </Animated.View>
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 998,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.75)',
+    },
+    card: {
+        backgroundColor: '#1a1a2e',
+        borderRadius: 24,
+        padding: 28,
+        alignItems: 'center',
+        width: '85%',
+        maxWidth: 360,
+        overflow: 'visible',
+    },
+    trophyCircle: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    soldLabel: {
+        fontSize: 28,
+        lineHeight: 37,
+        fontWeight: '900',
+        letterSpacing: 4,
+        marginBottom: 20,
+    },
+    itemRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        marginBottom: 16,
+    },
+    itemImage: {
+        width: 48,
+        height: 48,
+        borderRadius: 10,
+    },
+    itemName: {
+        color: '#FFFFFF',
+        fontSize: 18,
+        lineHeight: 24,
+        fontWeight: '700',
+    },
+    itemSeed: {
+        color: 'rgba(255,255,255,0.5)',
+        fontSize: 13,
+        lineHeight: 17,
+        marginTop: 2,
+    },
+    winnerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        padding: 14,
+        borderRadius: 14,
+        borderWidth: 1,
+    },
+    winnerAvatar: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        overflow: 'hidden',
+    },
+    winnerName: {
+        fontSize: 15,
+        lineHeight: 20,
+        fontWeight: '700',
+    },
+    bidAmount: {
+        color: '#FFFFFF',
+        fontSize: 18,
+        lineHeight: 24,
+        fontWeight: '800',
+        marginTop: 2,
+    },
+    nextSection: {
+        width: '100%',
+        alignItems: 'center',
+        marginTop: 16,
+    },
+    divider: {
+        width: 40,
+        height: 2,
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        borderRadius: 1,
+        marginBottom: 12,
+    },
+    nextLabel: {
+        color: 'rgba(255,255,255,0.4)',
+        fontSize: 12,
+        lineHeight: 16,
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+    },
+    nextItemName: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        lineHeight: 21,
+        fontWeight: '600',
+        marginTop: 4,
+    },
+});

package/src/components/SweepstakesReveal.tsx

@@ -146,8 +146,8 @@ const styles = StyleSheet.create({
     },
     emoji: {
         fontSize: 48,
+        lineHeight: 63,
         marginBottom: 8,
-        lineHeight: 56,
     },
     itemSection: {
         padding: 24,

package/src/components/sealed/SealedBidAuction.tsx

@@ -26,7 +26,9 @@ import { CalcuttaLeaderboard } from '../CalcuttaLeaderboard';
 interface SealedBidAuctionProps {
     calcutta_competition_id: string;
     player_id?: string;
-    onClose: () => void;
+    onClose?: () => void;
+    access_token?: string;
+    device_id?: string;
     getSocket?: () => WebSocket | null;
     getAccessToken?: () => string | undefined;
     getDeviceId?: () => string | undefined;
@@ -53,9 +55,8 @@ export const SealedBidAuction: React.FC<SealedBidAuctionProps> = ({
     calcutta_competition_id,
     player_id,
     onClose,
-    getSocket,
-    getAccessToken,
-    getDeviceId,
+    access_token,
+    device_id,
     player_data,
     player_balance,
     onDepositFunds,
@@ -145,14 +146,11 @@ export const SealedBidAuction: React.FC<SealedBidAuctionProps> = ({
     const { images: itemImages } = useCalcuttaItemImages(items);
 
     // Socket for presence
-    const noopSocket = useCallback(() => null, []);
-    const noopString = useCallback(() => undefined, []);
     const { connected: socketConnected, presence } = useCalcuttaSocket(
         calcutta_competition_id,
+        access_token,
+        device_id,
         player_data || { username: '' },
-        getSocket || noopSocket,
-        getAccessToken || noopString,
-        getDeviceId || noopString,
     );
 
     // Adaptive polling based on lifecycle state