be-components 7.4.8 → 7.5.2

package/src/BetRouter/components/ContestLiquidity.tsx

@@ -0,0 +1,613 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../Components/Themed";
+import { BetRouterApi } from "../api";
+import type {
+    RouterLiquidityProps,
+    RouterPartnerProps,
+    RouterContestProps,
+    PartnerContestProps,
+    PartnerMarketProps,
+    RouterMarketProps,
+    RouterMarketSideProps,
+    RouterMarketVariableProps,
+    BuyOpportunity
+} from "../types";
+import type { MyPlayerProps } from '../../types';
+import { FlatList, ScrollView } from "react-native";
+import { useColors } from '../../constants/useColors';
+import DropDown from '../../Components/Dropdown';
+import BuyOpportunityCard from './BuyOpportunityCard';
+import OpportunityDetailModal from './OpportunityDetailModal';
+
+type ContestLiquidityProps = {
+    router_contest_id: string;
+    width?: number;
+    partner_ids?: string[]; // Optional filter by specific partners
+    include_opportunities?: boolean; // Whether to load and display opportunities
+    onBuyOpportunity?: (opportunity: BuyOpportunity, legIndex?: number) => void; // Handler for buying opportunities
+    me?: MyPlayerProps; // Current user for role checking
+    onOpenAdminPortal?: (contestId: string, leagueId: string) => void; // Handler to open admin portal with specific contest and league
+}
+
+type PartnerRow = {
+    partner: RouterPartnerProps;
+    sidePrices: Map<string, { title: string; price: number; available: number }>; // key is market_side_id
+}
+
+type MarketData = {
+    router_market: RouterMarketProps;
+    sides: RouterMarketSideProps[];
+    variables: RouterMarketVariableProps[];
+    partnerRows: PartnerRow[];
+}
+
+const ContestLiquidity = ({
+    router_contest_id,
+    partner_ids,
+    include_opportunities = false,
+    onBuyOpportunity,
+    me,
+    onOpenAdminPortal
+}: ContestLiquidityProps) => {
+    const Colors = useColors();
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState<{
+        contest: RouterContestProps;
+        liquidities: RouterLiquidityProps[];
+        partners: RouterPartnerProps[];
+        partner_contests: PartnerContestProps[];
+        partner_markets: PartnerMarketProps[];
+        router_markets: RouterMarketProps[];
+        router_market_sides: RouterMarketSideProps[];
+        router_market_variables: RouterMarketVariableProps[];
+        liquidity_count: number;
+        opportunity_count?: number;
+        opportunities?: BuyOpportunity[];
+    } | null>(null);
+
+    const [selectedMarketId, setSelectedMarketId] = useState<string>('');
+    const [selectedVariableId, setSelectedVariableId] = useState<string>('');
+    const [selectedOpportunity, setSelectedOpportunity] = useState<BuyOpportunity | null>(null);
+    const [modalVisible, setModalVisible] = useState(false);
+
+    useEffect(() => {
+        if (router_contest_id) {
+            loadLiquidity();
+        }
+    }, [router_contest_id, partner_ids, include_opportunities]);
+
+    useEffect(() => {
+        // Auto-select first market when data loads
+        if (data && data.router_markets.length > 0 && !selectedMarketId) {
+            const firstMarket = getMarketsWithLiquidity()[0];
+            if (firstMarket) {
+                setSelectedMarketId(firstMarket.router_market_id);
+            }
+        }
+    }, [data]);
+
+    const loadLiquidity = async () => {
+        try {
+            setLoading(true);
+            const response = await BetRouterApi.BetRouter.LiquidityApi.getLiquidity(
+                router_contest_id,
+                partner_ids,
+                include_opportunities
+            );
+            setData({
+                contest: response.contest,
+                liquidities: response.liquidities,
+                partners: response.partners,
+                partner_contests: response.partner_contests,
+                partner_markets: response.partner_markets,
+                router_markets: response.router_markets,
+                router_market_sides: response.router_market_sides,
+                router_market_variables: response.router_market_variables,
+                liquidity_count: response.liquidity_count,
+                opportunity_count: response.opportunity_count,
+                opportunities: response.opportunities
+            });
+        } catch (error) {
+            console.error('Error loading liquidity:', error);
+            setData(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Get unique markets that have liquidity
+    const getMarketsWithLiquidity = (): RouterMarketProps[] => {
+        if (!data) return [];
+
+        const marketIdsWithLiquidity = new Set<string>();
+        data.liquidities.forEach(liq => {
+            const partnerMarket = data.partner_markets.find(pm => pm.partner_market_id === liq.partner_market_id);
+            if (partnerMarket) {
+                marketIdsWithLiquidity.add(partnerMarket.router_market_id);
+            }
+        });
+
+        return data.router_markets.filter(rm => marketIdsWithLiquidity.has(rm.router_market_id));
+    };
+
+    // Get data for the selected market
+    const getSelectedMarketData = (): MarketData | null => {
+        if (!data || !selectedMarketId) return null;
+
+        const router_market = data.router_markets.find(rm => rm.router_market_id === selectedMarketId);
+        if (!router_market) return null;
+
+        // Get sides for this market
+        const sides = data.router_market_sides.filter(s => s.router_market_id === selectedMarketId);
+
+        // Get variables that have liquidity for this market
+        // For spread markets, only show home side variables
+        // For total markets, only show under side variables
+        const linkedVariableIds = new Set<string>();
+        const uniqueVariableValues = new Map<number, string>(); // absolute value -> variable_id
+
+        // First, find the home side and under side for this market
+        const homeSide = sides.find(s => s.side_key.toLowerCase() === 'home');
+        const underSide = sides.find(s => s.side_key.toLowerCase() === 'under');
+
+        data.liquidities.forEach(liq => {
+            const pm = data.partner_markets.find(p => p.partner_market_id === liq.partner_market_id);
+            if (pm && pm.router_market_id === selectedMarketId) {
+                linkedVariableIds.add(pm.router_market_variable_id);
+
+                // Find the variable to get its value
+                const variable = data.router_market_variables.find(v => v.router_market_variable_id === pm.router_market_variable_id);
+                if (variable) {
+                    // Only include variables from the correct side
+                    const isCorrectSide = router_market.variable_required
+                        ? (variable.variable_type === 'spread'
+                            ? pm.market_side_id === homeSide?.market_side_id
+                            : pm.market_side_id === underSide?.market_side_id)
+                        : true;
+
+                    if (isCorrectSide) {
+                        const absValue = Math.abs(variable.variable);
+                        if (!uniqueVariableValues.has(absValue)) {
+                            uniqueVariableValues.set(absValue, variable.router_market_variable_id);
+                        }
+                    }
+                }
+            }
+        });
+
+        // Get unique variables (for spread: home side only, for total: under side only)
+        const variables = Array.from(uniqueVariableValues.values())
+            .map(id => data.router_market_variables.find(v => v.router_market_variable_id === id))
+            .filter(v => v !== undefined) as RouterMarketVariableProps[];
+
+        // Auto-select first variable if not selected
+        let currentVariableId = selectedVariableId;
+        if (variables[0] && router_market.variable_required && variables.length > 0 && !currentVariableId) {
+            currentVariableId = variables[0].router_market_variable_id;
+            setSelectedVariableId(currentVariableId);
+        }
+
+        // Build partner rows
+        const partnerRowsMap = new Map<string, PartnerRow>();
+
+        data.liquidities.forEach(liq => {
+            const partner_market = data.partner_markets.find(pm => pm.partner_market_id === liq.partner_market_id);
+            if (!partner_market || partner_market.router_market_id !== selectedMarketId) return;
+
+            // Filter by variable if required
+            if (router_market.variable_required && currentVariableId) {
+                const selectedVariable = data.router_market_variables.find(v => v.router_market_variable_id === currentVariableId);
+                const currentVariable = data.router_market_variables.find(v => v.router_market_variable_id === partner_market.router_market_variable_id);
+
+                if (selectedVariable && currentVariable) {
+                    // For spread markets, match both +/- versions (e.g., -7 and +7)
+                    if (selectedVariable.variable_type === 'spread') {
+                        if (Math.abs(selectedVariable.variable) !== Math.abs(currentVariable.variable)) {
+                            return; // Different absolute values, skip
+                        }
+                    } else {
+                        // For totals, must match exactly
+                        if (selectedVariable.variable !== currentVariable.variable) {
+                            return;
+                        }
+                    }
+                }
+            }
+
+            const partner = data.partners.find(p => p.partner_id === partner_market.partner_id);
+            if (!partner) return;
+
+            if (!partnerRowsMap.has(partner.partner_id)) {
+                partnerRowsMap.set(partner.partner_id, {
+                    partner,
+                    sidePrices: new Map()
+                });
+            }
+
+            partnerRowsMap.get(partner.partner_id)!.sidePrices.set(
+                partner_market.market_side_id,
+                { title: liq.title, price: liq.price, available: liq.available }
+            );
+        });
+
+        return {
+            router_market,
+            sides,
+            variables,
+            partnerRows: Array.from(partnerRowsMap.values())
+        };
+    };
+
+    const renderPartnerRow = (sides: RouterMarketSideProps[]) => ({ item }: { item: PartnerRow }) => {
+        const { partner, sidePrices } = item;
+
+        return (
+            <View transparent style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingVertical: 12,
+                paddingHorizontal: 12,
+                borderBottomWidth: 1,
+                borderBottomColor: Colors.borders.light
+            }}>
+                {/* Partner Name */}
+                <View transparent style={{ width: 140 }}>
+                    <Text theme='h2' size={14}>{partner.name}</Text>
+                </View>
+
+                {/* Side Prices */}
+                {sides.map(side => {
+                    const sideData = sidePrices.get(side.market_side_id);
+                    return (
+                        <View key={side.market_side_id} transparent style={{ flex: 1, alignItems: 'flex-end', marginLeft: 20 }}>
+                            {sideData ? (
+                                <>
+                                    <Text theme='h2' size={14}>{(sideData.price * 100).toFixed(1)}%</Text>
+                                    <Text theme='description' size={12}>${sideData.available.toFixed(0)} avail</Text>
+                                </>
+                            ) : (
+                                <Text theme='description' size={14}>—</Text>
+                            )}
+                        </View>
+                    );
+                })}
+            </View>
+        );
+    };
+
+    if (loading) {
+        return (
+            <View float style={{ padding: 20 }}>
+                <Text style={{ textAlign: 'center' }}>Loading liquidity...</Text>
+            </View>
+        );
+    }
+
+    if (!data || data.liquidities.length === 0) {
+        return (
+            <View float style={{ padding: 20 }}>
+                <View type='header' style={{ padding: 15, borderTopLeftRadius: 8, borderTopRightRadius: 8 }}>
+                    <Text theme='h1'>Contest Liquidity</Text>
+                    {data?.contest && (
+                        <Text theme='description' style={{ marginTop: 3 }}>
+                            {data.contest.contest_label}
+                        </Text>
+                    )}
+                </View>
+                <View type='body' style={{ padding: 20 }}>
+                    <Text theme='description' style={{ textAlign: 'center' }}>
+                        No liquidity available for this contest
+                    </Text>
+                </View>
+            </View>
+        );
+    }
+
+    const availableMarkets = getMarketsWithLiquidity();
+    const selectedMarketData = getSelectedMarketData();
+
+    return (
+        <View transparent style={{ flex: 1, padding: 20 }}>
+            {/* Opportunity Detail Modal */}
+            <OpportunityDetailModal
+                visible={modalVisible}
+                opportunity={selectedOpportunity}
+                router_contests={data ? [data.contest] : []}
+                router_markets={data?.router_markets || []}
+                router_market_sides={data?.router_market_sides || []}
+                partners={data?.partners || []}
+                onClose={() => {
+                    setModalVisible(false);
+                    setSelectedOpportunity(null);
+                }}
+            />
+
+            {/* Two-Column Layout */}
+            <View transparent style={{ flexDirection: 'row', gap: 16 }}>
+                {/* LEFT COLUMN - Contest Info & Mapping (40%) */}
+                <View transparent style={{ flex: 0.4, gap: 16 }}>
+                    {/* Contest Information Card */}
+                    <View type='body' style={{
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: Colors.borders.light,
+                        overflow: 'hidden'
+                    }}>
+                        <View type='header' style={{ padding: 16 }}>
+                            <Text theme='h1' size={18}>Contest Liquidity</Text>
+                            <Text theme='h2' size={15} style={{ marginTop: 6 }}>
+                                {data.contest.contest_label}
+                            </Text>
+                        </View>
+                        <View transparent style={{ padding: 16 }}>
+                            <View transparent style={{ gap: 12 }}>
+                                <View transparent>
+                                    <Text theme='description' size={12}>LIQUIDITY SOURCES</Text>
+                                    <Text theme='h2' size={14} style={{ marginTop: 4 }}>{data.liquidity_count}</Text>
+                                </View>
+                                <View transparent>
+                                    <Text theme='description' size={12}>PARTNERS</Text>
+                                    <Text theme='h2' size={14} style={{ marginTop: 4 }}>
+                                        {data.partners.map(p => p.name).join(', ')}
+                                    </Text>
+                                </View>
+                                {include_opportunities && data.opportunity_count !== undefined && (
+                                    <View transparent>
+                                        <Text theme='description' size={12}>OPPORTUNITIES</Text>
+                                        <Text theme='h2' size={14} style={{ marginTop: 4 }}>{data.opportunity_count}</Text>
+                                    </View>
+                                )}
+                            </View>
+                        </View>
+                    </View>
+
+                    {/* Partner Contest Mapping Card */}
+                    <View type='body' style={{
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: Colors.borders.light,
+                        overflow: 'hidden'
+                    }}>
+                        <View type='header' style={{ padding: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <View transparent>
+                                <Text theme='h2' size={16}>Partner Contest Mapping</Text>
+                                <Text theme='description' size={13} style={{ marginTop: 4 }}>
+                                    {data.partner_contests.length} partner contest{data.partner_contests.length !== 1 ? 's' : ''} linked
+                                </Text>
+                            </View>
+                            {me?.role === 'admin' && onOpenAdminPortal && data.contest.router_league_id && (
+                                <Button
+                                    type='action'
+                                    title='Manage'
+                                    onPress={() => onOpenAdminPortal(router_contest_id, data.contest.router_league_id)}
+                                    style={{ paddingHorizontal: 16, paddingVertical: 8 }}
+                                />
+                            )}
+                        </View>
+                        <View transparent style={{ padding: 16 }}>
+                            {data.partner_contests.length === 0 ? (
+                                <Text theme='description' size={14} style={{ textAlign: 'center', padding: 16 }}>
+                                    No partner contests linked yet
+                                </Text>
+                            ) : (
+                                <View transparent style={{ gap: 12 }}>
+                                    {data.partners.map(partner => {
+                                        const partnerContests = data.partner_contests.filter(pc => pc.partner_id === partner.partner_id);
+                                        const partnerMarketsForContest = data.partner_markets.filter(pm =>
+                                            pm.partner_id === partner.partner_id &&
+                                            pm.router_contest_id === router_contest_id
+                                        );
+                                        const uniqueRouterMarkets = new Set(partnerMarketsForContest.map(pm => pm.router_market_id));
+
+                                        return (
+                                            <View key={partner.partner_id} transparent style={{
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                padding: 12,
+                                                borderWidth: 1,
+                                                borderColor: Colors.borders.light,
+                                                borderRadius: 6,
+                                                backgroundColor: Colors.views.header
+                                            }}>
+                                                <View transparent style={{ flex: 1 }}>
+                                                    <Text theme='h2' size={15}>{partner.name}</Text>
+                                                    <Text theme='description' size={13} style={{ marginTop: 4 }}>
+                                                        {partnerContests.length > 0 ? '✓ Contest linked' : '✗ No contest linked'}
+                                                    </Text>
+                                                </View>
+                                                <View transparent style={{ alignItems: 'flex-end' }}>
+                                                    <Text theme='h2' size={15}>
+                                                        {uniqueRouterMarkets.size}
+                                                    </Text>
+                                                    <Text theme='description' size={13} style={{ marginTop: 4 }}>
+                                                        market{uniqueRouterMarkets.size !== 1 ? 's' : ''}
+                                                    </Text>
+                                                </View>
+                                            </View>
+                                        );
+                                    })}
+                                </View>
+                            )}
+                        </View>
+                    </View>
+                </View>
+
+                {/* RIGHT COLUMN - Liquidity & Opportunities (60%) */}
+                <View transparent style={{ flex: 0.6, gap: 16 }}>
+                    {/* Market Selector & Liquidity Card */}
+                    <View type='body' style={{
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: Colors.borders.light,
+                        overflow: 'hidden'
+                    }}>
+                        <View type='header' style={{ padding: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <View transparent>
+                                <Text theme='h2' size={16}>Market Liquidity</Text>
+                                <Text theme='description' size={13} style={{ marginTop: 4 }}>
+                                    Compare prices across partners
+                                </Text>
+                            </View>
+
+                            {/* Market Dropdown */}
+                            {availableMarkets.length > 0 && (
+                                <View transparent style={{ width: 200 }}>
+                                    <DropDown
+                                        dropdown_options={[{
+                                            value: 'market',
+                                            eligible_options: availableMarkets.map(m => m.market_label)
+                                        }]}
+                                        selected_value={availableMarkets.find(m => m.router_market_id === selectedMarketId)?.market_label || ''}
+                                        onOptionSelect={(label) => {
+                                            const market = availableMarkets.find(m => m.market_label === label);
+                                            if (market) {
+                                                setSelectedMarketId(market.router_market_id);
+                                                setSelectedVariableId(''); // Reset variable selection
+                                            }
+                                        }}
+                                    />
+                                </View>
+                            )}
+                        </View>
+
+                        {/* Variable Selector (if market requires variables) */}
+                        {selectedMarketData && selectedMarketData.router_market.variable_required && selectedMarketData.variables.length > 0 && (
+                            <View transparent style={{ padding: 16, borderTopWidth: 1, borderColor: Colors.borders.light }}>
+                                <Text theme='description' size={13} style={{ marginBottom: 12 }}>
+                                    Select Variable:
+                                </Text>
+                                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                                    <View transparent style={{ flexDirection: 'row', gap: 10 }}>
+                                        {selectedMarketData.variables.map(variable => {
+                                            const isSelected = selectedVariableId === variable.router_market_variable_id;
+                                            let label = '';
+                                            if (variable.variable_type === 'spread') {
+                                                label = `Spread ${variable.variable > 0 ? '+' : ''}${variable.variable}`;
+                                            } else {
+                                                label = `Total ${variable.variable}`;
+                                            }
+
+                                            return (
+                                                <Button
+                                                    key={variable.router_market_variable_id}
+                                                    transparent
+                                                    style={{
+                                                        paddingHorizontal: 16,
+                                                        paddingVertical: 10,
+                                                        borderRadius: 8,
+                                                        borderWidth: 2,
+                                                        borderColor: isSelected ? Colors.text.success : Colors.borders.light,
+                                                        backgroundColor: isSelected ? Colors.views.header : 'transparent'
+                                                    }}
+                                                    onPress={() => setSelectedVariableId(variable.router_market_variable_id)}
+                                                >
+                                                    <Text
+                                                        theme='h2'
+                                                        size={14}
+                                                        color={isSelected ? Colors.text.success : Colors.text.h1}
+                                                    >
+                                                        {label}
+                                                    </Text>
+                                                </Button>
+                                            );
+                                        })}
+                                    </View>
+                                </ScrollView>
+                            </View>
+                        )}
+
+                        {/* Market Table */}
+                        {selectedMarketData && selectedMarketData.partnerRows.length > 0 ? (
+                            <View transparent style={{ padding: 16 }}>
+                                {/* Column Headers */}
+                                <View transparent style={{
+                                    flexDirection: 'row',
+                                    paddingVertical: 12,
+                                    paddingHorizontal: 12,
+                                    borderBottomWidth: 2,
+                                    borderColor: Colors.borders.light
+                                }}>
+                                    <View transparent style={{ width: 140 }}>
+                                        <Text theme='h2' size={12}>PARTNER</Text>
+                                    </View>
+                                    {selectedMarketData.sides.map(side => {
+                                        // Get a sample title from the first partner that has data for this side
+                                        let sampleTitle = side.side_key.toUpperCase();
+                                        for (const partnerRow of selectedMarketData.partnerRows) {
+                                            const sideData = partnerRow.sidePrices.get(side.market_side_id);
+                                            if (sideData?.title) {
+                                                sampleTitle = sideData.title;
+                                                break;
+                                            }
+                                        }
+
+                                        return (
+                                            <View key={side.market_side_id} transparent style={{ flex: 1, alignItems: 'flex-end', marginLeft: 20 }}>
+                                                <Text theme='h2' size={12} numberOfLines={2}>{sampleTitle}</Text>
+                                            </View>
+                                        );
+                                    })}
+                                </View>
+
+                                {/* Partner Rows */}
+                                <FlatList
+                                    data={selectedMarketData.partnerRows}
+                                    keyExtractor={(item) => item.partner.partner_id}
+                                    renderItem={renderPartnerRow(selectedMarketData.sides)}
+                                    scrollEnabled={true}
+                                />
+                            </View>
+                        ) : (
+                            <View transparent style={{ padding: 24 }}>
+                                <Text theme='description' size={14} style={{ textAlign: 'center' }}>
+                                    No liquidity data for selected market
+                                </Text>
+                            </View>
+                        )}
+                    </View>
+
+                    {/* Opportunities Section - Only shown if include_opportunities is true */}
+                    {include_opportunities && data.opportunities && data.opportunities.length > 0 && (
+                        <View type='body' style={{
+                            borderRadius: 8,
+                            borderWidth: 1,
+                            borderColor: Colors.borders.light,
+                            overflow: 'hidden'
+                        }}>
+                            <View type='header' style={{ padding: 16 }}>
+                                <Text theme='h2' size={16}>Buy Opportunities</Text>
+                                <Text theme='description' size={13} style={{ marginTop: 4 }}>
+                                    {data.opportunities.length} opportunit{data.opportunities.length !== 1 ? 'ies' : 'y'} found for this contest
+                                </Text>
+                            </View>
+                            <FlatList
+                                data={data.opportunities}
+                                keyExtractor={(item) => item.opportunity_id}
+                                renderItem={({ item }) => (
+                                    <BuyOpportunityCard
+                                        opportunity={item}
+                                        router_markets={data.router_markets}
+                                        router_market_sides={data.router_market_sides}
+                                        router_market_variables={data.router_market_variables}
+                                        partner_markets={data.partner_markets}
+                                        partners={data.partners}
+                                        router_contests={[data.contest]}
+                                        onBuy={onBuyOpportunity || (() => console.log('No buy handler provided'))}
+                                        expanded={true}
+                                        onPress={() => {
+                                            setSelectedOpportunity(item);
+                                            setModalVisible(true);
+                                        }}
+                                    />
+                                )}
+                                scrollEnabled={true}
+                            />
+                        </View>
+                    )}
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default ContestLiquidity;