be-components 7.4.7 → 7.5.1

package/src/BetRouter/components/BuyOpportunityCard.tsx

@@ -0,0 +1,331 @@
+import React from 'react';
+import { Button, Text, View } from "../../Components/Themed";
+import type {
+    BuyOpportunity,
+    PartnerMarketProps,
+    RouterContestProps,
+    RouterMarketProps,
+    RouterMarketSideProps,
+    RouterMarketVariableProps,
+    RouterPartnerProps
+} from '../types';
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+
+type BuyOpportunityCardProps = {
+    opportunity: BuyOpportunity;
+    router_markets: RouterMarketProps[];
+    router_market_sides: RouterMarketSideProps[];
+    router_market_variables: RouterMarketVariableProps[];
+    partner_markets?: PartnerMarketProps[];
+    partners: RouterPartnerProps[];
+    router_contests: RouterContestProps[];
+    onBuy: (opportunity: BuyOpportunity, legIndex?: number) => void;
+    expanded?: boolean; // If false/undefined, shows compact view
+    onToggleExpand?: () => void; // Called when user wants to expand/collapse
+    onPress?: () => void; // Called when card is pressed (for detail modal)
+    compact_width_threshold?: number; // Width above which to always show expanded (default: 1400)
+};
+
+const BuyOpportunityCard = ({
+    opportunity,
+    router_markets,
+    //router_market_sides,
+    router_market_variables,
+    //partner_markets,
+    partners,
+    router_contests,
+    onBuy,
+    expanded = false,
+    onToggleExpand,
+    onPress,
+    //compact_width_threshold = 1400
+}: BuyOpportunityCardProps) => {
+    const Colors = useColors();
+
+    const market = router_markets?.find(m => m.router_market_id === opportunity.router_market_id);
+    if (!market) return null;
+
+    const variable = router_market_variables?.find(
+        v => v.router_market_variable_id === opportunity.legs[0]?.router_market_variable_id
+    );
+
+    let variableLabel = '';
+    if (variable) {
+        if (variable.variable_type === 'spread') {
+            variableLabel = `${variable.variable > 0 ? '+' : ''}${variable.variable}`;
+        } else {
+            variableLabel = `${variable.variable}`;
+        }
+    }
+
+    const contest = router_contests?.find(c => c.router_contest_id === opportunity.router_contest_id);
+    const is_green = opportunity.opportunity_with_fee ? true : false;
+
+    const getOpportunityIcon = () => {
+        if (opportunity.opportunity_type === 'arbitrage') {
+            return <Icons.BankIcon size={expanded ? 18 : 14} color={Colors.text.gold} />;
+        } else if (opportunity.opportunity_type === 'middle') {
+            return <Icons.TargetIcon size={expanded ? 18 : 14} color={Colors.text.action} />;
+        } else {
+            return <Icons.EmbedIcon size={expanded ? 18 : 14} color={Colors.text.warning} />;
+        }
+    };
+
+    // Compact view
+    if (!expanded) {
+        return (
+            <Button
+                transparent
+                style={{
+                    padding: 5,
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                }}
+                onPress={onPress}
+            >
+                <View float style={{ padding: 5, marginRight: 10 }}>
+                    {getOpportunityIcon()}
+                </View>
+                <View transparent style={{ flex: 1, paddingRight: 10, margin: 5 }}>
+                    <Text theme='h2' size={14} numberOfLines={1}>
+                        {market.market_label}{variableLabel === '0' ? '' : ` ${variableLabel}`}
+                    </Text>
+                    <Text theme='light' style={{ marginTop: 3 }} numberOfLines={1}>
+                        {opportunity.human_readable_description || `${contest?.contest_label}: ${market.market_description}`}
+                    </Text>
+                </View>
+                <View transparent style={{ alignItems: 'flex-end', marginRight: 10 }}>
+                    <Text
+                        theme='h1'
+                        size={18}
+                        color={!is_green ? Colors.text.warning : Colors.text.success}
+                    >
+                        ${(opportunity.expected_value ?? 0).toFixed(2)}
+                    </Text>
+                    <Text theme='description' size={12}>Expected Value</Text>
+                </View>
+                <View transparent style={{ margin: 8 }}>
+                    <Button
+                        title='BUY'
+                        type='success'
+                        onPress={(e) => {
+                            e?.stopPropagation();
+                            onBuy(opportunity);
+                        }}
+                        style={{ padding: 10 }}
+                    />
+                </View>
+            </Button>
+        );
+    }
+
+    // Expanded view
+    return (
+        <View transparent style={{ borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+            {/* Header Row - Opportunity Type Icon */}
+            <View transparent style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                padding: 8,
+                backgroundColor: Colors.views.header
+            }}>
+                <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    {getOpportunityIcon()}
+                    <Text theme='h2' size={14}>
+                        {opportunity.opportunity_type === 'arbitrage' ? 'Arbitrage' :
+                         opportunity.opportunity_type === 'middle' ? 'Middle' :
+                         'Reverse Middle'}
+                    </Text>
+                </View>
+                <View transparent style={{ flex: 1, marginLeft: 15 }}>
+                    <Text theme='description' size={12} numberOfLines={1}>
+                        {opportunity.human_readable_description || contest?.contest_label}
+                    </Text>
+                </View>
+                <Text theme='description' size={12}>
+                    {market.market_label}{variableLabel === '0' ? '' : ` ${variableLabel}`}
+                </Text>
+            </View>
+
+            {/* Main Content Row */}
+            <Button
+                transparent
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    padding: 0,
+                    flexWrap: 'wrap'
+                }}
+                onPress={onPress}
+            >
+                {/* Opportunity Legs */}
+            <View
+                transparent
+                style={{
+                    minWidth: 180,
+                    maxWidth: 250,
+                    margin: 5,
+                    padding: 3,
+                    borderLeftWidth: 1,
+                    borderColor: Colors.borders.light
+                }}
+            >
+                <Text theme='description' size={12}>Opportunity Legs</Text>
+                {opportunity.legs.map((leg, index) => {
+                    const partner = partners.find(p => p.partner_id === leg.partner_id);
+                    return (
+                        <View key={index} transparent>
+                            <Text theme='h2' size={14}>
+                                {partner?.name} {leg.title} @ ${leg.price.toFixed(2)}
+                            </Text>
+                        </View>
+                    );
+                })}
+            </View>
+
+            {/* Investment */}
+            <View
+                transparent
+                style={{
+                    minWidth: 120,
+                    margin: 5,
+                    padding: 3,
+                    borderLeftWidth: 1,
+                    borderColor: Colors.borders.light,
+                    flex: 1
+                }}
+            >
+                <Text theme='description' size={12}>Investment</Text>
+                <Text theme='h2' size={15}>${(opportunity.investment ?? 0).toFixed(2)}</Text>
+            </View>
+
+            {/* At Risk */}
+            <View
+                transparent
+                style={{
+                    minWidth: 120,
+                    margin: 5,
+                    padding: 3,
+                    borderLeftWidth: 1,
+                    borderColor: Colors.borders.light,
+                    flex: 1
+                }}
+            >
+                <Text theme='description' size={12}>At Risk</Text>
+                <Text
+                    theme='h2'
+                    size={15}
+                    color={(opportunity.at_risk ?? 0) > 0 ? Colors.text.warning : Colors.text.success}
+                >
+                    ${(opportunity.at_risk ?? 0).toFixed(2)}
+                </Text>
+            </View>
+
+            {/* Loss Probability */}
+            <View
+                transparent
+                style={{
+                    minWidth: 120,
+                    margin: 5,
+                    padding: 3,
+                    borderLeftWidth: 1,
+                    borderColor: Colors.borders.light,
+                    flex: 1
+                }}
+            >
+                <Text theme='description' size={12}>Loss Prob</Text>
+                <Text theme='h2' size={15}>
+                    {((opportunity.loss_probability ?? 0) * 100).toFixed(1)}%
+                </Text>
+            </View>
+
+            {/* Max Profit */}
+            <View
+                transparent
+                style={{
+                    minWidth: 120,
+                    margin: 5,
+                    padding: 3,
+                    borderLeftWidth: 1,
+                    borderColor: Colors.borders.light,
+                    flex: 1
+                }}
+            >
+                <Text theme='description' size={12}>Max Profit</Text>
+                <Text theme='h2' size={15} color={Colors.text.success}>
+                    ${(opportunity.total_potential_winnings ?? 0).toFixed(2)}
+                </Text>
+            </View>
+
+            {/* Win Probability */}
+            <View
+                transparent
+                style={{
+                    minWidth: 120,
+                    margin: 5,
+                    padding: 3,
+                    borderLeftWidth: 1,
+                    borderColor: Colors.borders.light,
+                    flex: 1
+                }}
+            >
+                <Text theme='description' size={12}>Win Prob</Text>
+                <Text theme='h2' size={15}>
+                    {((opportunity.win_probability ?? 0) * 100).toFixed(1)}%
+                </Text>
+            </View>
+
+            {/* Expected Value */}
+            <View
+                transparent
+                style={{
+                    minWidth: 120,
+                    margin: 5,
+                    padding: 3,
+                    borderLeftWidth: 1,
+                    borderColor: Colors.borders.light,
+                    flex: 1
+                }}
+            >
+                <Text theme='description' size={12}>Expected Value</Text>
+                <Text
+                    theme='h1'
+                    size={17}
+                    color={!is_green ? Colors.text.warning : Colors.text.success}
+                >
+                    ${(opportunity.expected_value ?? 0).toFixed(2)}
+                </Text>
+            </View>
+
+            {/* Collapse button (if not always expanded) */}
+            {onToggleExpand && (
+                <Button
+                    title='X'
+                    style={{ padding: 10, margin: 10 }}
+                    float
+                    onPress={(e) => {
+                        e?.stopPropagation();
+                        onToggleExpand();
+                    }}
+                />
+            )}
+
+            {/* Buy Button */}
+            <View transparent style={{ margin: 8 }}>
+                <Button
+                    title='BUY'
+                    type='success'
+                    onPress={(e) => {
+                        e?.stopPropagation();
+                        onBuy(opportunity);
+                    }}
+                    style={{ padding: 10 }}
+                />
+            </View>
+        </Button>
+        </View>
+    );
+};
+
+export default BuyOpportunityCard;