be-components 7.4.8 → 7.5.1

package/lib/module/BetRouter/components/ContestLiquidity.js

@@ -0,0 +1,658 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../Components/Themed";
+import { BetRouterApi } from "../api";
+import { FlatList, ScrollView } from "react-native";
+import { useColors } from '../../constants/useColors';
+import DropDown from '../../Components/Dropdown';
+import BuyOpportunityCard from './BuyOpportunityCard';
+import OpportunityDetailModal from './OpportunityDetailModal';
+const ContestLiquidity = ({
+  router_contest_id,
+  partner_ids,
+  include_opportunities = false,
+  onBuyOpportunity,
+  me,
+  onOpenAdminPortal
+}) => {
+  const Colors = useColors();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(null);
+  const [selectedMarketId, setSelectedMarketId] = useState('');
+  const [selectedVariableId, setSelectedVariableId] = useState('');
+  const [selectedOpportunity, setSelectedOpportunity] = useState(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 = () => {
+    if (!data) return [];
+    const marketIdsWithLiquidity = new Set();
+    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 = () => {
+    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();
+    const uniqueVariableValues = new Map(); // 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);
+
+    // 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();
+    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 => ({
+    item
+  }) => {
+    const {
+      partner,
+      sidePrices
+    } = item;
+    return /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.borders.light
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        width: 140
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      size: 14
+    }, partner.name)), sides.map(side => {
+      const sideData = sidePrices.get(side.market_side_id);
+      return /*#__PURE__*/React.createElement(View, {
+        key: side.market_side_id,
+        transparent: true,
+        style: {
+          flex: 1,
+          alignItems: 'flex-end',
+          marginLeft: 20
+        }
+      }, sideData ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+        theme: "h2",
+        size: 14
+      }, (sideData.price * 100).toFixed(1), "%"), /*#__PURE__*/React.createElement(Text, {
+        theme: "description",
+        size: 12
+      }, "$", sideData.available.toFixed(0), " avail")) : /*#__PURE__*/React.createElement(Text, {
+        theme: "description",
+        size: 14
+      }, "\u2014"));
+    }));
+  };
+  if (loading) {
+    return /*#__PURE__*/React.createElement(View, {
+      float: true,
+      style: {
+        padding: 20
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        textAlign: 'center'
+      }
+    }, "Loading liquidity..."));
+  }
+  if (!data || data.liquidities.length === 0) {
+    return /*#__PURE__*/React.createElement(View, {
+      float: true,
+      style: {
+        padding: 20
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      type: "header",
+      style: {
+        padding: 15,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, "Contest Liquidity"), data?.contest && /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, data.contest.contest_label)), /*#__PURE__*/React.createElement(View, {
+      type: "body",
+      style: {
+        padding: 20
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        textAlign: 'center'
+      }
+    }, "No liquidity available for this contest")));
+  }
+  const availableMarkets = getMarketsWithLiquidity();
+  const selectedMarketData = getSelectedMarketData();
+  return /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(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);
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      gap: 16
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 0.4,
+      gap: 16
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "body",
+    style: {
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: Colors.borders.light,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      padding: 16
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    size: 18
+  }, "Contest Liquidity"), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 15,
+    style: {
+      marginTop: 6
+    }
+  }, data.contest.contest_label)), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 16
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      gap: 12
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 12
+  }, "LIQUIDITY SOURCES"), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 14,
+    style: {
+      marginTop: 4
+    }
+  }, data.liquidity_count)), /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 12
+  }, "PARTNERS"), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 14,
+    style: {
+      marginTop: 4
+    }
+  }, data.partners.map(p => p.name).join(', '))), include_opportunities && data.opportunity_count !== undefined && /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 12
+  }, "OPPORTUNITIES"), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 14,
+    style: {
+      marginTop: 4
+    }
+  }, data.opportunity_count))))), /*#__PURE__*/React.createElement(View, {
+    type: "body",
+    style: {
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: Colors.borders.light,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      padding: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 16
+  }, "Partner Contest Mapping"), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 13,
+    style: {
+      marginTop: 4
+    }
+  }, data.partner_contests.length, " partner contest", data.partner_contests.length !== 1 ? 's' : '', " linked")), me?.role === 'admin' && onOpenAdminPortal && data.contest.router_league_id && /*#__PURE__*/React.createElement(Button, {
+    type: "action",
+    title: "Manage",
+    onPress: () => onOpenAdminPortal(router_contest_id, data.contest.router_league_id),
+    style: {
+      paddingHorizontal: 16,
+      paddingVertical: 8
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 16
+    }
+  }, data.partner_contests.length === 0 ? /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 14,
+    style: {
+      textAlign: 'center',
+      padding: 16
+    }
+  }, "No partner contests linked yet") : /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    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 /*#__PURE__*/React.createElement(View, {
+      key: partner.partner_id,
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderWidth: 1,
+        borderColor: Colors.borders.light,
+        borderRadius: 6,
+        backgroundColor: Colors.views.header
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      size: 15
+    }, partner.name), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      size: 13,
+      style: {
+        marginTop: 4
+      }
+    }, partnerContests.length > 0 ? '✓ Contest linked' : '✗ No contest linked')), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        alignItems: 'flex-end'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      size: 15
+    }, uniqueRouterMarkets.size), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      size: 13,
+      style: {
+        marginTop: 4
+      }
+    }, "market", uniqueRouterMarkets.size !== 1 ? 's' : '')));
+  }))))), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 0.6,
+      gap: 16
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "body",
+    style: {
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: Colors.borders.light,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      padding: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 16
+  }, "Market Liquidity"), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 13,
+    style: {
+      marginTop: 4
+    }
+  }, "Compare prices across partners")), availableMarkets.length > 0 && /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      width: 200
+    }
+  }, /*#__PURE__*/React.createElement(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
+      }
+    }
+  }))), selectedMarketData && selectedMarketData.router_market.variable_required && selectedMarketData.variables.length > 0 && /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 16,
+      borderTopWidth: 1,
+      borderColor: Colors.borders.light
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 13,
+    style: {
+      marginBottom: 12
+    }
+  }, "Select Variable:"), /*#__PURE__*/React.createElement(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    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 /*#__PURE__*/React.createElement(Button, {
+      key: variable.router_market_variable_id,
+      transparent: true,
+      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)
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      size: 14,
+      color: isSelected ? Colors.text.success : Colors.text.h1
+    }, label));
+  })))), selectedMarketData && selectedMarketData.partnerRows.length > 0 ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 16
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      paddingVertical: 12,
+      paddingHorizontal: 12,
+      borderBottomWidth: 2,
+      borderColor: Colors.borders.light
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      width: 140
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 12
+  }, "PARTNER")), 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 /*#__PURE__*/React.createElement(View, {
+      key: side.market_side_id,
+      transparent: true,
+      style: {
+        flex: 1,
+        alignItems: 'flex-end',
+        marginLeft: 20
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      size: 12,
+      numberOfLines: 2
+    }, sampleTitle));
+  })), /*#__PURE__*/React.createElement(FlatList, {
+    data: selectedMarketData.partnerRows,
+    keyExtractor: item => item.partner.partner_id,
+    renderItem: renderPartnerRow(selectedMarketData.sides),
+    scrollEnabled: true
+  })) : /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 24
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 14,
+    style: {
+      textAlign: 'center'
+    }
+  }, "No liquidity data for selected market"))), include_opportunities && data.opportunities && data.opportunities.length > 0 && /*#__PURE__*/React.createElement(View, {
+    type: "body",
+    style: {
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: Colors.borders.light,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      padding: 16
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    size: 16
+  }, "Buy Opportunities"), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    size: 13,
+    style: {
+      marginTop: 4
+    }
+  }, data.opportunities.length, " opportunit", data.opportunities.length !== 1 ? 'ies' : 'y', " found for this contest")), /*#__PURE__*/React.createElement(FlatList, {
+    data: data.opportunities,
+    keyExtractor: item => item.opportunity_id,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/React.createElement(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
+  })))));
+};
+export default ContestLiquidity;
+//# sourceMappingURL=ContestLiquidity.js.map