@bettoredge/calcutta 0.3.1 → 0.4.0

package/src/components/sealed/SealedBidMyBidsTab.tsx

@@ -227,7 +227,7 @@ export const SealedBidMyBidsTab: React.FC<SealedBidMyBidsTabProps> = ({
                                         <Text variant="body" bold numberOfLines={1}>{item.item_name}</Text>
                                         <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginTop: 2 }}>
                                             {isEliminated && (
-                                                <Text variant="caption" bold style={{ color: theme.colors.status.error, fontSize: 10, marginRight: 6 }}>ELIMINATED</Text>
+                                                <Text variant="caption" bold style={{ color: theme.colors.status.error, fontSize: 10, lineHeight: 13, marginRight: 6 }}>ELIMINATED</Text>
                                             )}
                                             {item.seed != null && (
                                                 <Text variant="caption" color="tertiary">Seed #{item.seed}</Text>
@@ -235,7 +235,7 @@ export const SealedBidMyBidsTab: React.FC<SealedBidMyBidsTabProps> = ({
                                         </View>
                                     </View>
                                     <View variant="transparent" style={{ alignItems: 'flex-end' }}>
-                                        <Text variant="caption" color="tertiary" style={{ fontSize: 10 }}>ROI</Text>
+                                        <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>ROI</Text>
                                         <Text variant="body" bold style={{
                                             color: itemROI > 0
                                                 ? theme.colors.status.success
@@ -358,7 +358,7 @@ export const SealedBidMyBidsTab: React.FC<SealedBidMyBidsTabProps> = ({
                                         size={8}
                                         color={getBidStatusColor(row.bid.bid_status)}
                                     />
-                                    <Text variant="caption" style={{ color: getBidStatusColor(row.bid.bid_status), marginLeft: 4, fontSize: 11 }}>
+                                    <Text variant="caption" style={{ color: getBidStatusColor(row.bid.bid_status), marginLeft: 4, fontSize: 11, lineHeight: 15 }}>
                                         {getStatusLabel(row.bid.bid_status)}
                                     </Text>
                                 </View>

package/src/components/sealed/SealedBidPlayersTab.tsx

@@ -131,7 +131,7 @@ export const SealedBidPlayersTab: React.FC<SealedBidPlayersTabProps> = ({
                                     <Text variant="body" bold={isMe} numberOfLines={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>
@@ -147,7 +147,7 @@ export const SealedBidPlayersTab: React.FC<SealedBidPlayersTabProps> = ({
                             {/* Winnings in results phase */}
                             {isResultsPhase && participant.total_winnings > 0 && (
                                 <View variant="transparent" style={{ alignItems: 'flex-end' }}>
-                                    <Text variant="caption" color="tertiary" style={{ fontSize: 10 }}>Won</Text>
+                                    <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>Won</Text>
                                     <Text variant="body" bold style={{ color: theme.colors.status.success }}>
                                         {formatCurrency(participant.total_winnings, market_type)}
                                     </Text>

package/src/components/sealed/SealedBidStatusBar.tsx

@@ -51,7 +51,7 @@ export const SealedBidStatusBar: React.FC<SealedBidStatusBarProps> = ({
     const timerTarget = lifecycleState === 'auctioning'
         ? competition.auction_end_datetime
         : lifecycleState === 'scheduled'
-            ? competition.auction_start_datetime
+            ? competition.scheduled_datetime
             : undefined;
 
     useEffect(() => {

package/src/components/sealed/SealedBidTabBar.tsx

@@ -97,6 +97,7 @@ export const SealedBidTabBar: React.FC<SealedBidTabBarProps> = ({
                                     color: isActive ? theme.colors.primary.default : theme.colors.text.tertiary,
                                     marginLeft: 4,
                                     fontSize: 11,
+                                    lineHeight: 15,
                                 }}
                             >
                                 {tab.label}
@@ -118,6 +119,7 @@ export const SealedBidTabBar: React.FC<SealedBidTabBarProps> = ({
                                         style={{
                                             color: isActive ? '#FFFFFF' : theme.colors.text.tertiary,
                                             fontSize: 9,
+                                            lineHeight: 12,
                                         }}
                                     >
                                         {tab.count}

package/src/hooks/useCalcuttaAuction.ts

@@ -13,6 +13,8 @@ export interface CalcuttaAuctionState {
     bids: CalcuttaBidProps[];
     my_bids: CalcuttaBidProps[];
     paused: boolean;
+    escrow_summaries: Record<string, { escrow_balance: number; committed_balance: number }>;
+    total_escrow_balance: number;
 }
 
 export const useCalcuttaAuction = (calcutta_competition_id?: string, poll_interval: number = 5000, player_id?: string) => {
@@ -22,6 +24,8 @@ export const useCalcuttaAuction = (calcutta_competition_id?: string, poll_interv
         bids: [],
         my_bids: [],
         paused: false,
+        escrow_summaries: {},
+        total_escrow_balance: 0,
     });
     const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -36,6 +40,8 @@ export const useCalcuttaAuction = (calcutta_competition_id?: string, poll_interv
                 bids: resp.bids,
                 my_bids: resp.my_bids,
                 paused: resp.competition?.auction_status === 'paused',
+                escrow_summaries: resp.escrow_summaries || {},
+                total_escrow_balance: resp.total_escrow_balance || 0,
             });
         } catch {
             // Silently fail on poll
@@ -62,7 +68,7 @@ export const useCalcuttaAuction = (calcutta_competition_id?: string, poll_interv
     }, []);
 
     // Socket event handlers for live mode — update local state directly
-    const handleBidUpdate = useCallback((data: { item: CalcuttaAuctionItemProps; bid: CalcuttaBidProps; item_deadline?: string }) => {
+    const handleBidUpdate = useCallback((data: { item: CalcuttaAuctionItemProps; bid: CalcuttaBidProps; item_deadline?: string; outbid_player_id?: string }) => {
         setState(prev => {
             const newState = {
                 ...prev,
@@ -70,7 +76,7 @@ export const useCalcuttaAuction = (calcutta_competition_id?: string, poll_interv
                     i.calcutta_auction_item_id === data.item.calcutta_auction_item_id ? data.item : i
                 ),
                 bids: [...prev.bids.filter(b => b.calcutta_bid_id !== data.bid.calcutta_bid_id), data.bid],
-                my_bids: prev.my_bids,
+                my_bids: [...prev.my_bids],
             };
             // Update my_bids if this bid belongs to the current user
             if (player_id && data.bid.player_id === player_id) {
@@ -79,6 +85,14 @@ export const useCalcuttaAuction = (calcutta_competition_id?: string, poll_interv
                     data.bid,
                 ];
             }
+            // If I was outbid, mark my bid on this item as 'outbid'
+            if (player_id && data.outbid_player_id === player_id) {
+                newState.my_bids = newState.my_bids.map(b =>
+                    b.calcutta_auction_item_id === data.item.calcutta_auction_item_id && b.bid_status === 'active'
+                        ? { ...b, bid_status: 'outbid' }
+                        : b
+                );
+            }
             return newState;
         });
     }, [player_id]);

package/src/hooks/useCalcuttaEscrow.ts

@@ -48,5 +48,9 @@ export const useCalcuttaEscrow = (calcutta_competition_id?: string) => {
         }
     }, [calcutta_competition_id]);
 
-    return { ...state, fetchEscrow, deposit, withdraw };
+    const updateEscrowLocally = useCallback((escrow: CalcuttaEscrowProps) => {
+        setState({ loading: false, escrow });
+    }, []);
+
+    return { ...state, fetchEscrow, deposit, withdraw, updateEscrowLocally };
 };

package/src/hooks/useCalcuttaSocket.ts

@@ -4,6 +4,7 @@ import type {
     CalcuttaAuctionItemProps,
     CalcuttaBidProps,
 } from '@bettoredge/types';
+import { useSocket } from '@bettoredge/socket';
 
 export interface CalcuttaPresencePlayer {
     player_id: string;
@@ -24,108 +25,105 @@ export interface CalcuttaSocketCallbacks {
     onAuctionPaused?: () => void;
     onAuctionResumed?: (data: { item?: CalcuttaAuctionItemProps; item_deadline?: string }) => void;
     onAuctionClosed?: (data: { competition: CalcuttaCompetitionProps }) => void;
+    /** Triggered when another client requests all clients to refresh their data */
+    onRefresh?: () => void;
 }
 
 export const useCalcuttaSocket = (
     calcutta_competition_id: string,
-    player_data: { username: string; profile_pic?: string },
-    getSocket: () => WebSocket | null,
-    getAccessToken: () => string | undefined,
-    getDeviceId: () => string | undefined,
+    access_token?: string,
+    device_id?: string,
+    player_data?: { username?: string; profile_pic?: string },
     callbacks?: CalcuttaSocketCallbacks,
 ) => {
-    const [connected, setConnected] = useState(false);
+    const { on, send, joinRoom, leaveRoom, ready, state } = useSocket({
+        access_token,
+        device_id,
+        autoConnect: !!access_token && !!device_id,
+    });
+
     const [presence, setPresence] = useState<CalcuttaPresence>({ count: 0, players: [] });
-    const joinedRef = useRef(false);
     const callbacksRef = useRef(callbacks);
     callbacksRef.current = callbacks;
 
-    const handleMessage = useCallback((event: MessageEvent) => {
-        try {
-            const data = JSON.parse(event.data);
-            if (data.calcutta_competition_id && data.calcutta_competition_id !== calcutta_competition_id) return;
+    // Join room + subscribe to events
+    useEffect(() => {
+        if (!ready || !calcutta_competition_id) return;
+
+        joinRoom('JOIN_CALCUTTA_AUCTION', {
+            access_token,
+            device_id,
+            calcutta_competition_id,
+            player_data: player_data || {},
+        });
 
-            switch (data.type) {
-                case 'CALCUTTA_BID_UPDATE':
+        const unsubs = [
+            on('CALCUTTA_PRESENCE_UPDATE', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
+                    setPresence({ count: data.count, players: data.players || [] });
+                }
+            }),
+            on('V1_SOCKET_JOIN_CALCUTTA', (data: any) => {
+                if (data.status === 'success' && data.players) {
+                    setPresence({ count: data.count, players: data.players });
+                }
+            }),
+            on('CALCUTTA_BID_UPDATE', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
                     callbacksRef.current?.onBidUpdate?.(data);
-                    break;
-                case 'CALCUTTA_ITEM_ACTIVE':
+                }
+            }),
+            on('CALCUTTA_ITEM_ACTIVE', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
                     callbacksRef.current?.onItemActive?.(data);
-                    break;
-                case 'CALCUTTA_ITEM_SOLD':
+                }
+            }),
+            on('CALCUTTA_ITEM_SOLD', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
                     callbacksRef.current?.onItemSold?.(data);
-                    break;
-                case 'CALCUTTA_ITEM_UNSOLD':
+                }
+            }),
+            on('CALCUTTA_ITEM_UNSOLD', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
                     callbacksRef.current?.onItemUnsold?.(data);
-                    break;
-                case 'CALCUTTA_AUCTION_PAUSED':
+                }
+            }),
+            on('CALCUTTA_AUCTION_PAUSED', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
                     callbacksRef.current?.onAuctionPaused?.();
-                    break;
-                case 'CALCUTTA_AUCTION_RESUMED':
+                }
+            }),
+            on('CALCUTTA_AUCTION_RESUMED', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
                     callbacksRef.current?.onAuctionResumed?.(data);
-                    break;
-                case 'CALCUTTA_AUCTION_CLOSED':
+                }
+            }),
+            on('CALCUTTA_AUCTION_CLOSED', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
                     callbacksRef.current?.onAuctionClosed?.(data);
-                    break;
-                case 'CALCUTTA_PRESENCE_UPDATE':
-                    setPresence({ count: data.count, players: data.players });
-                    break;
-                case 'V1_SOCKET_JOIN_CALCUTTA':
-                    if (data.status === 'success') {
-                        setConnected(true);
-                        if (data.count != null) {
-                            setPresence({ count: data.count, players: data.players || [] });
-                        }
-                    }
-                    break;
-            }
-        } catch {
-            // Ignore non-JSON or malformed messages
-        }
-    }, [calcutta_competition_id]);
-
-    useEffect(() => {
-        const ws = getSocket();
-        if (!ws || ws.readyState !== WebSocket.OPEN) return;
-
-        const access_token = getAccessToken();
-        const device_id = getDeviceId();
-        if (!access_token || !device_id) return;
-
-        // Add listener
-        // @ts-expect-error React Native WebSocket type lacks 'message' overload but it works at runtime
-        ws.addEventListener('message', handleMessage);
-
-        // Send join message
-        if (!joinedRef.current) {
-            ws.send(JSON.stringify({
-                type: 'JOIN_CALCUTTA_AUCTION',
-                access_token,
-                device_id,
-                calcutta_competition_id,
-                player_data,
-            }));
-            joinedRef.current = true;
-        }
+                }
+            }),
+            on('CALCUTTA_REFRESH', (data: any) => {
+                if (data.calcutta_competition_id === calcutta_competition_id) {
+                    callbacksRef.current?.onRefresh?.();
+                }
+            }),
+        ];
 
         return () => {
-            // @ts-expect-error React Native WebSocket type lacks 'message' overload but it works at runtime
-            ws.removeEventListener('message', handleMessage);
-
-            // Send leave message
-            if (joinedRef.current && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({
-                    type: 'LEAVE_CALCUTTA_AUCTION',
-                    access_token,
-                    device_id,
-                    calcutta_competition_id,
-                }));
-                joinedRef.current = false;
-            }
-
-            setConnected(false);
+            unsubs.forEach(u => u());
+            leaveRoom('LEAVE_CALCUTTA_AUCTION', { access_token, device_id, calcutta_competition_id });
         };
-    }, [calcutta_competition_id, handleMessage, getSocket, getAccessToken, getDeviceId]);
+    }, [ready, calcutta_competition_id]);
+
+    /** Broadcast an event to all other clients in this calcutta room (bypasses RabbitMQ) */
+    const broadcast = useCallback((event: Record<string, any>) => {
+        send({
+            type: 'CALCUTTA_BROADCAST',
+            calcutta_competition_id,
+            event: { ...event, calcutta_competition_id },
+        });
+    }, [send, calcutta_competition_id]);
 
-    return { connected, presence };
+    return { connected: ready, presence, socketState: state, broadcast };
 };

package/src/index.ts

@@ -29,6 +29,24 @@ export type { CalcuttaItemResultsProps } from './components/CalcuttaItemResults'
 export { SweepstakesReveal } from './components/SweepstakesReveal';
 export type { SweepstakesRevealProps } from './components/SweepstakesReveal';
 
+// UX Components
+export { CalcuttaActionCard } from './components/CalcuttaActionCard';
+export type { CalcuttaActionCardProps } from './components/CalcuttaActionCard';
+export { CalcuttaCountdown } from './components/CalcuttaCountdown';
+export type { CalcuttaCountdownProps } from './components/CalcuttaCountdown';
+export { EscrowWidget } from './components/EscrowWidget';
+export type { EscrowWidgetProps } from './components/EscrowWidget';
+export { AuctionInfoChips } from './components/AuctionInfoChips';
+export type { AuctionInfoChipsProps } from './components/AuctionInfoChips';
+export { AuctionCountdownOverlay } from './components/AuctionCountdownOverlay';
+export type { AuctionCountdownOverlayProps } from './components/AuctionCountdownOverlay';
+export { AuctionPausedOverlay } from './components/AuctionPausedOverlay';
+export type { AuctionPausedOverlayProps } from './components/AuctionPausedOverlay';
+export { ItemSoldCelebration } from './components/ItemSoldCelebration';
+export type { ItemSoldCelebrationProps } from './components/ItemSoldCelebration';
+export { AuctionCompleteOverlay } from './components/AuctionCompleteOverlay';
+export type { AuctionCompleteOverlayProps } from './components/AuctionCompleteOverlay';
+
 export { CalcuttaTemplateSelector } from './components/CalcuttaTemplateSelector';
 export type { CalcuttaTemplateSelectorProps } from './components/CalcuttaTemplateSelector';