@bettoredge/calcutta 0.4.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettoredge/calcutta",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Calcutta auction competition components for BettorEdge applications",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/CalcuttaAuction.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { StyleSheet, TouchableOpacity, ActivityIndicator, FlatList, ScrollView, Image, TextInput, Platform, useWindowDimensions } from 'react-native';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, FlatList, ScrollView, Image, TextInput, Platform, useWindowDimensions, RefreshControl } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
 import type { CalcuttaEscrowProps } from '@bettoredge/types';
@@ -39,6 +39,8 @@ export interface CalcuttaAuctionProps {
     onManage?: () => void;
     onJoin?: () => void | Promise<void>;
     onLeave?: () => void | Promise<void>;
+    onRefresh?: () => void | Promise<void>;
+    onAuctionClosed?: () => void;
 }
 
 // Inner component for live auction (original layout)
@@ -54,12 +56,15 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
     onNextItem,
     player_balance,
     onDepositFunds,
+    onRefresh,
+    onAuctionClosed: onAuctionClosedProp,
 }) => {
     const { theme } = useTheme();
     const { width: windowWidth } = useWindowDimensions();
     const [containerWidth, setContainerWidth] = useState(0);
     const measuredWidth = containerWidth || windowWidth;
     const isDesktop = Platform.OS === 'web' && measuredWidth >= 700;
+    const [refreshing, setRefreshing] = useState(false);
     const {
         loading,
         competition,
@@ -87,6 +92,13 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
 
     const isAdmin = player_id != null && competition?.admin_id === player_id;
 
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        try {
+            await Promise.all([refreshAuction(), fetchEscrow(), onRefresh?.()]);
+        } catch {} finally { setRefreshing(false); }
+    };
+
     // Auction complete overlay
     const [showAuctionComplete, setShowAuctionComplete] = useState(false);
 
@@ -94,7 +106,8 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
         handleAuctionClosed(data);
         // Show complete overlay after a short delay (let last item celebration finish)
         setTimeout(() => setShowAuctionComplete(true), 1000);
-    }, [handleAuctionClosed]);
+        onAuctionClosedProp?.();
+    }, [handleAuctionClosed, onAuctionClosedProp]);
 
     // Celebration modal state
     const [celebrationData, setCelebrationData] = useState<{
@@ -535,7 +548,7 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
                    Full width: Active item
                    Below: [Items (paginated)] [Players] [Info]
                    ═══════════════════════════════════════ */
-                <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+                <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
                     {/* Top bar: escrow + admin */}
                     <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 12, zIndex: 200 }}>
                         <View variant="transparent" style={{ position: 'relative', zIndex: 200 }}>
@@ -666,6 +679,7 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
                     keyboardShouldPersistTaps="handled"
                     contentContainerStyle={{ paddingBottom: 40 }}
                     style={{ backgroundColor: theme.colors.surface.base }}
+                    refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
                     extraData={`${infoTab}-${items.map(i => `${i.calcutta_auction_item_id}:${i.status}:${i.current_bid}`).join(',')}-${my_bids.length}-${paused}-${escrow?.escrow_balance}`}
                     ListHeaderComponent={
                         <View variant="transparent">
@@ -745,12 +759,19 @@ const SweepstakesWaiting: React.FC<CalcuttaAuctionProps & { competition: any }>
     player_id,
     onClose,
     onManage,
+    onRefresh,
     competition,
 }) => {
     const { theme } = useTheme();
-    const { items, rounds, participants, item_results } = useCalcuttaCompetition(calcutta_competition_id);
+    const { items, rounds, participants, item_results, refresh } = useCalcuttaCompetition(calcutta_competition_id);
     const { images: itemImages } = useCalcuttaItemImages(items);
     const isAdmin = player_id != null && competition?.admin_id == player_id;
+    const [refreshing, setRefreshing] = useState(false);
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        try { await Promise.all([refresh(), onRefresh?.()]); }
+        catch {} finally { setRefreshing(false); }
+    };
 
     // Build player lookup for owner usernames
     const ownerIds = items.filter(i => i.winning_player_id).map(i => i.winning_player_id!);
@@ -787,7 +808,7 @@ const SweepstakesWaiting: React.FC<CalcuttaAuctionProps & { competition: any }>
 
     return (
         <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base }]}>
-            <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ gap: 16, paddingBottom: Platform.OS === 'web' ? 300 : 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+            <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ gap: 16, paddingBottom: Platform.OS === 'web' ? 300 : 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
                 {/* Hero with embedded title */}
                 <View style={{ position: 'relative' }}>
                     {competition.image?.url ? (

package/src/components/CalcuttaDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
-import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList, TextInput, Platform, useWindowDimensions } from 'react-native';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList, TextInput, Platform, useWindowDimensions, RefreshControl } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
 import type { CalcuttaParticipantProps } from '@bettoredge/types';
@@ -34,6 +34,8 @@ export interface CalcuttaDetailProps {
     onDepositFunds?: (amount: number) => void;
     initialShowWalkthrough?: boolean;
     onWalkthroughDismiss?: () => void;
+    onRefresh?: () => void | Promise<void>;
+    onAuctionStarted?: () => void;
 }
 
 const getStatusConfig = (status: string) => {
@@ -63,12 +65,15 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     device_id,
     player_username,
     player_profile_pic,
+    onRefresh,
+    onAuctionStarted,
 }) => {
     const { theme } = useTheme();
     const { width: windowWidth } = useWindowDimensions();
     const [containerWidth, setContainerWidth] = useState(0);
     const measuredWidth = containerWidth || windowWidth;
     const isDesktop = Platform.OS === 'web' && measuredWidth >= 700;
+    const [refreshing, setRefreshing] = useState(false);
 
     // Walkthrough state
     const [showWalkthrough, setShowWalkthrough] = useState(false);
@@ -123,6 +128,13 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     const [itemSearch, setItemSearch] = useState('');
     const [mobileListTab, setMobileListTab] = useState<'items' | 'players'>('items');
 
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        try {
+            await Promise.all([refresh(), fetchEscrow(), onRefresh?.()]);
+        } catch {} finally { setRefreshing(false); }
+    };
+
     const filteredItems = useMemo(() => {
         if (competition?.auction_type !== 'sweepstakes' || !itemSearch.trim()) return items;
         const q = itemSearch.toLowerCase().trim();
@@ -594,7 +606,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     return (
         <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base }]} onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
             {isDesktop ? (
-                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ padding: 12, paddingBottom: 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ padding: 12, paddingBottom: 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
                     {/* Row 1: Hero + Info/Action left, Items right */}
                     <View variant="transparent" style={{ flexDirection: 'row', gap: 12 }}>
                         <View variant="transparent" style={{ flex: 3 }}>
@@ -647,6 +659,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                     style={{ backgroundColor: theme.colors.surface.base }}
                     contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40 }}
                     keyboardShouldPersistTaps="handled"
+                    refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
                 />
             )}
 
@@ -659,6 +672,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                 onComplete={() => {
                     setShowCountdown(false);
                     refresh();
+                    onAuctionStarted?.();
                 }}
             />
 

package/src/components/CalcuttaEscrow.tsx

@@ -226,7 +226,7 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                     activeOpacity={0.7}
                 >
                     <Ionicons
-                        name="arrow-down-outline"
+                        name="arrow-up-outline"
                         size={18}
                         color={action === 'transfer_in' ? '#FFFFFF' : theme.colors.text.secondary}
                     />
@@ -250,7 +250,7 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                     activeOpacity={0.7}
                 >
                     <Ionicons
-                        name="arrow-up-outline"
+                        name="arrow-down-outline"
                         size={18}
                         color={action === 'transfer_out' ? '#FFFFFF' : theme.colors.text.secondary}
                     />
@@ -307,7 +307,7 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                             ? theme.colors.status.error
                             : (loading || isInvalidAmount)
                                 ? theme.colors.surface.elevated
-                                : theme.colors.primary.default,
+                                : theme.colors.status.success,
                     }]}
                     onPress={handleAction}
                     disabled={loading || (isInvalidAmount && !(insufficientBalance && onDepositFunds))}
@@ -318,7 +318,7 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                     ) : (
                         <>
                             <Ionicons
-                                name={action === 'transfer_in' ? 'arrow-down-circle' : 'arrow-up-circle'}
+                                name={action === 'transfer_in' ? 'arrow-up-circle' : 'arrow-down-circle'}
                                 size={20}
                                 color={isInvalidAmount ? theme.colors.text.tertiary : '#FFFFFF'}
                             />

package/src/components/CalcuttaResults.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import { StyleSheet, ScrollView, TouchableOpacity, Image, FlatList, Platform, useWindowDimensions } from 'react-native';
+import { StyleSheet, ScrollView, TouchableOpacity, Image, FlatList, Platform, useWindowDimensions, RefreshControl } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
 import type { CalcuttaParticipantProps } from '@bettoredge/types';
@@ -19,6 +19,7 @@ export interface CalcuttaResultsProps {
     player_profile_pic?: string;
     onManage?: () => void;
     onShare?: () => void;
+    onRefresh?: () => void | Promise<void>;
 }
 
 export const CalcuttaResults: React.FC<CalcuttaResultsProps> = ({
@@ -30,12 +31,14 @@ export const CalcuttaResults: React.FC<CalcuttaResultsProps> = ({
     player_profile_pic,
     onManage,
     onShare,
+    onRefresh,
 }) => {
     const { theme } = useTheme();
     const { width: windowWidth } = useWindowDimensions();
     const [containerWidth, setContainerWidth] = useState(0);
     const measuredWidth = containerWidth || windowWidth;
     const isDesktop = Platform.OS === 'web' && measuredWidth >= 700;
+    const [refreshing, setRefreshing] = useState(false);
 
     const {
         loading,
@@ -60,6 +63,12 @@ export const CalcuttaResults: React.FC<CalcuttaResultsProps> = ({
         { username: player_username, profile_pic: player_profile_pic },
     );
 
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        try { await Promise.all([refresh(), onRefresh?.()]); }
+        catch {} finally { setRefreshing(false); }
+    };
+
     // Derived data
     const isAdmin = player_id != null && competition?.admin_id == player_id;
     const myItems = useMemo(() =>
@@ -381,7 +390,7 @@ export const CalcuttaResults: React.FC<CalcuttaResultsProps> = ({
     return (
         <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base }]} onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
             {isDesktop ? (
-                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ padding: 12, paddingBottom: 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ padding: 12, paddingBottom: 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
                     {renderHeader()}
                     {renderMyItems()}
                     {renderPotKPIs()}
@@ -409,7 +418,7 @@ export const CalcuttaResults: React.FC<CalcuttaResultsProps> = ({
                     </View>
                 </ScrollView>
             ) : (
-                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
                     {renderHeader()}
                     {renderMyItems()}
                     {renderPotKPIs()}