be-components 1.5.9 → 1.6.1

package/src/MarketComponents/api/index.ts

@@ -0,0 +1,143 @@
+import axios from 'axios';
+import { APIOverrides } from "../../ApiOverrides"
+import type { AthleteProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, TeamProps, TournamentProps } from "../../types"
+
+let EVENT_SVC_API = ''
+
+export { MarketComponentApi, MarketComponentHelpers }
+
+const MarketComponentApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        //MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        //AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    getAthletesByTeamId: async(team_id:string):Promise<AthleteProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/athletes/team/${team_id}`)
+            return resp.data.athletes
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    }
+}
+
+
+const MarketComponentHelpers = {
+    getLiqudity: (event_order_stats:EventOrderStatProps[]):{ liquidity: number, open_order_count:number } => {
+        let liquidity = event_order_stats.reduce((a,b) => a + b.open_order_amount, 0);
+        let open_order_count = event_order_stats.reduce((a,b) => a + parseInt(b.open_order_count as string), 0);
+        return { liquidity, open_order_count }
+    },
+    getVar1Label: (market:MarketProps, var_1:number, side?:string) => {
+        if(side == 'over'){ return `O ${var_1}` }
+        if(side == 'under'){ return `U ${var_1}` }
+        if(market.type != 'Spread'){ return `${var_1}` }
+        if(var_1 < 0){ return `${var_1}` }
+        return `+${var_1}`
+    },
+    getOddsLabel: (odds:number, decimals?:number) => {
+        let new_odds = odds.toFixed()
+        if(decimals){ new_odds = odds.toFixed(decimals) }
+        if(odds < 0){ return `${new_odds}` }
+        return `+${new_odds}`
+    },
+    getTeamEventSideIds:(event:EventProps, market:MarketProps, side_option:MarketSideOptionProps, athlete?:AthleteProps, team?:TeamProps) => {
+        const o_side = market.side_options.find(so => so.side != side_option.side);
+        if(!o_side){ return undefined }
+        switch(side_option.id_source){
+            case 'side':
+                return { side_id: side_option.side, reversed_side_id: o_side.side }
+            case 'athlete':
+                if(!athlete){ return undefined }
+                return { side_id: athlete.athlete_id, reversed_side_id: athlete.athlete_id }
+            case 'team':
+                if(market.level == 'event'){
+                    let side_id = event[side_option.side as keyof EventProps]?.team_id
+                    let reversed_side_id = event[o_side.side as keyof EventProps]?.team_id
+                    if(!side_id || !reversed_side_id){ return undefined }
+                    return { side_id, reversed_side_id }
+                }
+                if(market.level == 'team'){
+                    if(!team){ return undefined }
+                    return { side_id: team.team_id, reversed_side_id: team.team_id }
+                }
+                return undefined
+            default: return undefined
+        }
+    },
+
+    getOrderTitleForTeamEvent : (order:OrderProps, market:MarketProps, event:EventProps, athlete?:AthleteProps, exotic?:any):string | undefined => {
+        let market_side = market.side_options.find(o => o.side == order.side)
+        if(!market_side){ return undefined }
+        var re = /({.*?})/;
+        let parsed_text = market_side.parseable_title.split(re)
+        let new_title = '';
+        parsed_text.map(t => {
+            if(t === ''){ return }
+            if(t[0] !== '{'){ return new_title += t }
+            let variable = t.slice(1)
+            variable = variable.slice(0, variable.length -1)
+            switch(variable){
+                case 'team': 
+                    let team = event[order.side as keyof EventProps]
+                    return new_title += team.market_name
+                case 'var_1': return new_title += MarketComponentHelpers.getVar1Label(market, order.var_1)
+                case 'athlete': return new_title += athlete?.abbr_name
+                case 'stat': return new_title += market.stat_label ?? market.stat
+                case 'exotic': return new_title += exotic?.name 
+                default: return
+
+            }
+        })
+        return new_title
+    },
+    getOrderTitleForTournament : (order:OrderProps, market:MarketProps, tournament:TournamentProps, athlete?:AthleteProps, team?:TeamProps):string | undefined => {
+        if(!tournament){ return undefined }
+        let market_side = market.side_options.find(o => o.side == order.side)
+        if(!market_side){ return order.side }
+        var re = /({.*?})/;
+        let parsed_text = market_side.parseable_title.split(re)
+        let new_title = '';
+        parsed_text.map(t => {
+            if(t === ''){ return }
+            if(t[0] !== '{'){ return new_title += t }
+            let variable = t.slice(1)
+            variable = variable.slice(0, variable.length -1)
+            switch(variable){
+                case 'team': return new_title += `${team?.market_name} ${team?.name}`
+                case 'var_1': return new_title += MarketComponentHelpers.getVar1Label(market, order.var_1)
+                case 'athlete': return new_title += athlete?.abbr_name
+                case 'stat': return new_title += market.stat 
+                default: return
+
+            }
+        })
+        return new_title
+    },
+    getOrderTitleForMatch : (order:OrderProps, market:MarketProps, match:MatchProps, athlete?:AthleteProps, team?:TeamProps):string | undefined => {
+        if(!match){ return undefined }
+        let market_side = market.side_options.find(o => o.side == order.side)
+        if(!market_side){ return order.side }
+        var re = /({.*?})/;
+        let parsed_text = market_side.parseable_title.split(re)
+        let new_title = '';
+        parsed_text.map(t => {
+            if(t === ''){ return }
+            if(t[0] !== '{'){ return new_title += t }
+            let variable = t.slice(1)
+            variable = variable.slice(0, variable.length -1)
+            switch(variable){
+                case 'team': return new_title += `${team?.market_name} ${team?.name}`
+                case 'var_1': return new_title += MarketComponentHelpers.getVar1Label(market, order.var_1)
+                case 'athlete': return new_title += athlete?.abbr_name
+                case 'stat': return new_title += market.stat 
+                default: return
+
+            }
+        })
+        return new_title
+    }
+}

package/src/MarketComponents/components/AthleteMarket/index.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from "../../../types"
+import { view_styles } from '../../../constants/styles';
+import MarketButton from '../../components/MarketButton';
+import { Icons, LinearDiagnal, Text } from '../../../Components';
+import Colors from '../../../constants/colors';
+import { MarketButtonHelpers } from '../MarketButton/api';
+import { MarketComponentHelpers } from '../../api';
+import { AthleteImage } from '../../../Components/Jerseys';
+
+type AthleteMarketProps = {
+    event:EventProps,
+    event_type:'team'|'tournament'|'match',
+    athlete:AthleteProps,
+    hide_stat_banner?:boolean,
+    width?:number,
+    market:MarketProps,
+    latest_trades:TradeProps[],
+    best_available_orders:BestAvailableOrderProps[],
+    event_order_stats:EventOrderStatProps[],
+    default_price_view:'last_trade'|'best_available',
+    onOrder:(order:OrderProps) => void,
+    onView:(data:{event_id:string, event_type:string, market_id:string, side_type:'athlete', side_id:string}) => void
+}
+
+const AthleteMarket = ({ event, hide_stat_banner, width, athlete, market, event_order_stats, default_price_view, latest_trades, best_available_orders, onOrder, onView }:AthleteMarketProps) => {
+    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
+
+    const renderSides = (data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
+        const side_details = MarketComponentHelpers.getTeamEventSideIds(event, market, data.item, athlete, undefined);
+        if(!side_details){ return <></> }
+        let trade = MarketButtonHelpers.getVisibleTrade(default_price_view, data.market, data.item, latest_trades, best_available_orders, side_details.side_id, side_details.reversed_side_id); 
+        if(!trade){
+            trade = MarketButtonHelpers.getTradeFromMarket(market, event.event_id, 'team', data.item.side, data.item.id_source, side_details.side_id, side_details.reversed_side_id);
+        }
+        return (
+            <View style={{ margin:2, height:50, width:75 }}>
+                <MarketButton
+                    side_option={data.item}
+                    market={data.market}
+                    trade={trade}
+                    onPress={(order) => {
+                        const order_title = MarketComponentHelpers.getOrderTitleForTeamEvent(order, market, event, athlete);
+                        if(!order_title){ return alert('Unable to process order') }
+                        onOrder({ ...order, title: order_title })
+                    }}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, flex:1, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
+            {!hide_stat_banner ?
+             <LinearDiagnal 
+                label={market.stat_label ?? market.type}
+                label_size={14}
+                style={{ borderTopLeftRadius:8, padding:5  }}
+                left_color={Colors.incentive.gold}
+                right_color={'#ebd197'}
+            />
+            :<></>}
+
+            <View style={{ ...view_styles.section_body, flex:1, padding:0, justifyContent:'center', alignItems:'center' }}>
+                <AthleteImage
+                    athlete={athlete}
+                    size={50}
+                    number_size={12}
+                />
+                <View style={{ padding:10, paddingBottom:0 }}>
+                    <Text weight='bold' size={14} color={Colors.brand.midnight} textAlign='center'>{athlete.first_name} {athlete.last_name}</Text>
+                    <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{athlete.team?`${athlete.team.abbr}`:''} ({athlete.position})</Text>
+                </View>
+            </View>
+            <View nativeID='market_sides' style={{ flexDirection:'row', justifyContent:'center', alignItems:'center', padding:10 }}>
+                {market.side_options.sort((a,b) => {
+                    let a_t = a.side == market.trade_side ? 1 : 0
+                    let b_t = b.side == market.trade_side ? 1 : 0
+                    return a_t - b_t
+                }).map((so, index) => {
+                    return renderSides({ item:so, index, market })
+                })}
+                
+            </View>
+            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <TouchableOpacity style={{ flex:1, flexDirection:'row' }} onPress={() => {
+                    onView({
+                        event_id: event.event_id, 
+                        event_type: 'team', 
+                        market_id: market.market_id, 
+                        side_type: 'athlete', 
+                        side_id: athlete.athlete_id
+                    });
+                }}>
+                    <View style={{ backgroundColor:Colors.shades.white, height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
+                        <Icons.LiquidityIcon color={Colors.brand.midnight} size={30}/>
+                    </View>
+                    <View style={{ marginLeft:10 }}>
+                        <Text theme='body_2'>Liquidity</Text>
+                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    </View>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+export default AthleteMarket

package/src/MarketComponents/components/EventMarket/index.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, Image, TouchableOpacity } from 'react-native';
+import type { BestAvailableOrderProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from '../../../types';
+import { MarketButtonHelpers } from '../MarketButton/api';
+import MarketButton from '../../components/MarketButton';
+import { Icons, LinearDiagnal, Text } from '../../../Components';
+import Colors from '../../../constants/colors';
+import { view_styles } from '../../../constants/styles';
+import { TeamEventMarketHelpers } from '../TeamEventMarket/api';
+import { MarketComponentHelpers } from '../../api';
+
+type EventMarketProps = {
+    event:EventProps,
+    width?:number,
+    market:MarketProps,
+    hide_market_banner?:boolean,
+    latest_trades:TradeProps[],
+    best_available_orders:BestAvailableOrderProps[],
+    event_order_stats:EventOrderStatProps[],
+    default_price_view:'last_trade'|'best_available',
+    onOrder:(order:OrderProps) => void,
+    onView:(data: { event_id:string, event_type:string, market_id:string }) => void
+}
+
+const EventMarket = ({ width, event, market, latest_trades, best_available_orders, hide_market_banner, event_order_stats, default_price_view, onOrder, onView }:EventMarketProps) => {
+    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
+
+    const renderSides = (data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
+        const side_details = MarketComponentHelpers.getTeamEventSideIds(event, market, data.item, undefined, undefined);
+        if(!side_details){ return }
+        let trade = MarketButtonHelpers.getVisibleTrade(default_price_view, data.market, data.item, latest_trades, best_available_orders, side_details.side_id, side_details.reversed_side_id); 
+        if(!trade){
+            trade = MarketButtonHelpers.getTradeFromMarket(market, event.event_id, 'team', data.item.side, data.item.id_source, side_details.side_id, side_details.reversed_side_id);
+        }
+        if(!trade){ return <></> }
+        let side_label = event[data.item.side as keyof EventProps].abbr
+        return (
+            <View style={{ margin:2, height:50, width:75 }}>
+                <MarketButton
+                    side_option={data.item}
+                    market={data.market}
+                    side_label={side_label}
+                    trade={trade}
+                    onPress={(order) => {
+                        const order_title = MarketComponentHelpers.getOrderTitleForTeamEvent(order, market, event);
+                        if(!order_title){ return alert('Unable to process order') }
+                        onOrder({ ...order, title: order_title })
+                    }}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, flex:1, borderWidth:1, borderColor:Colors.shades.shade600, width, maxWidth:175 }}>
+            {!hide_market_banner ?
+             <LinearDiagnal 
+                label={market.stat_label ?? market.type}
+                label_size={14}
+                style={{ borderTopLeftRadius:8, padding:5  }}
+                left_color={Colors.incentive.gold}
+                right_color={'#ebd197'}
+            />
+            :<></>}
+            <View style={{ ...view_styles.section_body, flex:1, padding:0, justifyContent:'center', alignItems:'center' }}>
+                <View style={{flexDirection:'row', alignItems:'center'}}>
+                    <Image
+                        source={{ uri: event.away?.image?.url }}
+                        style={{ height:50, width:50, marginRight:5 }}
+                        resizeMode='cover'
+                    />
+                    <Text theme='body'>VS</Text>
+                    <Image
+                        source={{ uri: event.home?.image?.url }}
+                        style={{ height:50, width:50, marginLeft:5 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ padding:10, paddingBottom:0 }}>
+                    <Text weight='bold' size={14} color={Colors.brand.midnight} textAlign='center'>{event.event_title}</Text>
+                    <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{TeamEventMarketHelpers.getTimeDetail(event)}</Text>
+                </View>
+            </View>
+            <View nativeID='market_sides' style={{ flexDirection:'row', justifyContent:'center', alignItems:'center', padding:10 }}>
+                {market.side_options.sort((a,b) => {
+                    let a_t = a.side == market.trade_side ? 1 : 0
+                    let b_t = b.side == market.trade_side ? 1 : 0
+                    return a_t - b_t
+                }).map((so, index) => {
+                    return renderSides({ item:so, index, market })
+                })}
+                
+            </View>
+            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <TouchableOpacity style={{ flex:1, flexDirection:'row' }} onPress={() => {
+                    onView({
+                        event_id: event.event_id, 
+                        event_type: 'team', 
+                        market_id: market.market_id
+                    });
+                }}>
+                    <View style={{ backgroundColor:Colors.shades.white, height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
+                        <Icons.LiquidityIcon color={Colors.brand.midnight} size={30}/>
+                    </View>
+                    <View style={{ marginLeft:10 }}>
+                        <Text theme='body_2'>Liquidity</Text>
+                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    </View>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+export default EventMarket

package/src/MarketComponents/components/MarketButton/api/index.ts

@@ -0,0 +1,152 @@
+import moment from "moment-mini";
+import Colors from "../../../../constants/colors";
+import type { BestAvailableOrderProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from "../../../../types";
+import { MarketComponentHelpers } from "../../../api";
+
+
+export const MarketButtonHelpers = {
+    getButtonLabel: (market:MarketProps, side_option:MarketSideOptionProps, trade:TradeProps) => {
+        let v_1 = MarketComponentHelpers.getVar1Label(market, trade.var_1, side_option.side);
+        let o_1 = MarketComponentHelpers.getOddsLabel(trade.odds);
+        return { var_1: v_1, odds:o_1, color: trade.draft_liquidity? Colors.highlights.highlight500Faded : Colors.shades.shade100 }
+    },
+    getVisibleTrade: (default_price_view:'best_available'|'last_trade', market:MarketProps, side_option:MarketSideOptionProps, latest_trades:TradeProps[], best_available_orders:BestAvailableOrderProps[], side_id:string, reversed_side_id:string) => {
+        const order = best_available_orders.find(o => o.market_id == market.market_id && o.side == side_option.side && o.show);
+        const o_side_order = best_available_orders.find(o => o.market_id == market.market_id && o.side != side_option.side && o.show);
+        let trade = latest_trades.find(t => t.market_type == 'FOR_MONEY' && t.market_id == market.market_id && t.side == side_option.side);
+        switch(default_price_view){
+            case 'best_available':
+                if(order){ return MarketButtonHelpers.getTradeFromAvailableOrder(order, reversed_side_id) }
+                if(o_side_order){ 
+                    //Now lets reverse this order and get a trade for it
+                    const reversed_order = MarketButtonHelpers.reverseBAOrder(o_side_order, market, side_id);
+                    if(!reversed_order){ return undefined }
+                    return MarketButtonHelpers.getTradeFromAvailableOrder(reversed_order, reversed_side_id)
+                 }
+                if(trade){ return trade }
+                return undefined
+            case 'last_trade':
+                if(trade){ return trade }
+                return undefined
+            default: return undefined
+        }
+    },
+    reverseBAOrder: (order:BestAvailableOrderProps, market:MarketProps, side_id:string):BestAvailableOrderProps | undefined => {
+        const side_option = market.side_options.find(so => so.side != order.side);
+        if(!side_option){ return undefined }
+        return {
+            ...order,
+            side: side_option.side,
+            side_id: side_id,
+            odds: order.odds * -1,
+            var_1: market.type == 'Spread' ? order.var_1 * -1 : order.var_1,
+            probability: 1 - order.probability,
+            title: '',
+            open_amt: 0,
+            called_amt: 0,
+            potential_winnings: 0
+        }
+    },
+    getTradeFromMarket: (market:MarketProps, event_id:string, event_type: 'match'|'tournament'|'team', side:string, side_type:string, side_id:string, reversed_side_id:string):TradeProps => {
+        return {
+            trade_id:'',
+            event_id,
+            event_type,
+            trade_amt: 0,
+            cumulative_amt: 0,
+            latest:true,
+            probability:0.5,
+            odds: 100,
+            create_datetime:'',
+            last_update_datetime: '',
+            market_id: market.market_id,
+            var_1: 0,
+            side_id,
+            side_type:side_type as 'team'|'exotic'|'side'|'athlete',
+            reversed_side_id,
+            side,
+            position_ids:[],
+            market_type: 'FREE'
+        }
+    },
+    getTradeFromAvailableOrder : (ba:BestAvailableOrderProps, reversed_side_id:string):TradeProps => {
+        return {
+            trade_id:'',
+            event_id: ba.event_id,
+            event_type: ba.event_type as 'tournament'|'team'|'match',
+            cumulative_amt: 0,
+            trade_amt: 0,
+            create_datetime: '', last_update_datetime: '',
+            market_id: ba.market_id,
+            var_1: ba.var_1,
+            side: ba.side,
+            side_id: ba.side_id,
+            draft_liquidity: ba.open_amt,
+            reversed_side_id,
+            probability: ba.probability,
+            odds: ba.odds,
+            side_type: ba.side_type as 'team'|'athlete'|'side',
+            market_type: 'FOR_MONEY',
+            latest: true,
+            position_ids: []
+        }
+    },
+    reverseTradeFromOrder: (order:BestAvailableOrderProps, market:MarketProps):TradeProps => {
+        return {
+            trade_id:'',
+            side: order.side,
+            side_id: order.side_id,
+            reversed_side_id: '',
+            market_id: order.market_id,
+            event_id: order.event_id,
+            event_type: order.event_type as 'team'|'tournament'|'match',
+            odds: order.odds * -1,
+            var_1: market.type == 'Spread' ? order.var_1 * -1 : order.var_1,
+            probability: 1 - order.probability,
+            side_type: order.side_type as 'athlete'|'team'|'side',
+            market_type: 'FOR_MONEY',
+            latest: true,
+            trade_amt: 0, cumulative_amt:0,
+            position_ids: [],
+            last_update_datetime: '', create_datetime:''
+        }
+    },
+    getOrderFromTrade: (trade:TradeProps, unit_size?:number):OrderProps => {
+        let open_amt = 10
+        if(unit_size){ open_amt = unit_size }
+        let draft_liquidity = 0
+        if(trade.draft_liquidity){ draft_liquidity = trade.draft_liquidity }
+    
+        return {
+            order_id: '',
+            player_id: '',
+            be_type: 'market', //TODO - Make this dynamic,
+            open_amt,
+            called_amt: 0,
+            buy_sell_ind: 'buy',
+            rejections:0,
+            commission_pct:0,
+            available_for_parlays: false,
+            event_id: trade.event_id,
+            draft_liquidity,
+            event_type: trade.event_type,
+            side: trade.side as 'home'|'away'|'over'|'under'|'yes'|'no',
+            side_type: trade.side_type as 'team' | 'side' | 'athlete',
+            resolution_status: 'inprogress',
+            side_id: trade.side_id,
+            order_type: trade.limit_override ? 'limit': 'market',
+            potential_winnings: 0,
+            collar_pct: .01,
+            positions: [],
+            market_id: trade.market_id,
+            title: '',
+            probability: trade.probability,
+            odds: trade.odds,
+            var_1: trade.var_1,
+            market_type: trade.market_type,
+            position_ids: [],
+            status: 'approved',
+            expire_datetime: moment().add(1, 'hours')
+        }
+    }
+}

package/src/MarketComponents/components/MarketButton/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TouchableOpacity, View } from "react-native"
+import Text from '../../../Components/Text';
+import type { MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from '../../../types';
+import Colors from '../../../constants/colors';
+import { MarketButtonHelpers } from './api';
+
+type MarketButtonProps = {
+    market:MarketProps,
+    side_option:MarketSideOptionProps,
+    side_label?:string,
+    trade:TradeProps,
+    onPress: (order:OrderProps) => void
+}
+const MarketCard = ({ side_option, market, trade, side_label, onPress }:MarketButtonProps) => {
+    const { var_1, odds, color } = MarketButtonHelpers.getButtonLabel(market, side_option, trade);
+    const handlePress = () => {
+        return onPress(MarketButtonHelpers.getOrderFromTrade(trade))
+    }
+
+    return (
+        <TouchableOpacity style={{ flex:1, padding:5, backgroundColor:color, borderRadius:4, justifyContent:'center' }}
+        onPress={() => handlePress()}>
+            <View>
+                {side_label ?
+                <Text size={12} color={Colors.brand.midnight} weight='semibold' textAlign='center'>{side_label}</Text>
+                :<></>}
+                {market.var_1_required ?
+                <Text size={12} color={Colors.brand.midnight} weight='semibold' textAlign='center'>{var_1}</Text>
+                :<></>}
+                <Text style={{ marginTop:2 }} size={12} color={Colors.brand.midnight} weight='semibold' textAlign='center'>{odds}</Text>
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+export default MarketCard

package/src/MarketComponents/components/TeamEventMarket/api/index.ts

@@ -0,0 +1,35 @@
+import moment from "moment-mini";
+import type { AthleteProps, EventOrderStatProps, EventProps, MarketProps, TradeProps } from "../../../../types"
+
+export  { TeamEventMarketHelpers }
+const TeamEventMarketHelpers = {
+    getPrimaryMarkets: (event:EventProps, markets:MarketProps[]):MarketProps[] => {
+        if(!event.supported_markets){ return [] }
+        let event_markets = markets.filter(m => event.supported_markets?.filter(sm => !sm.removed).map(sm => sm.market_id.toString()).includes(m.market_id.toString()));
+        return event_markets.filter(m => m.primary_market);
+    },
+    getNonPrimaryMarkets:(event:EventProps, markets:MarketProps[]):MarketProps[] => {
+        if(!event.supported_markets){ return [] }
+        let event_markets = markets.filter(m => event.supported_markets?.filter(sm => !sm.removed).map(sm => sm.market_id.toString()).includes(m.market_id.toString()));
+        return event_markets.filter(m => !m.primary_market);
+    },
+    getTimeDetail: (event:EventProps) => {
+        if(['scheduled','created'].includes(event.status)){ return moment(event.scheduled_datetime).format('MM/DD @ hh:mm a') }
+        return event.time_detail
+    },
+    sortNonPrimaryMarkets: (markets:MarketProps[], event_order_stats:EventOrderStatProps[]) => {
+        let sorted_stats = event_order_stats.filter(s => s.market_type == 'FOR_MONEY' && markets.map(m => m.market_id.toString()).includes(s.market_id.toString()));
+        return sorted_stats.sort((a,b) => parseInt(b.open_order_count as string) - parseInt(a.open_order_count as string))
+    },
+    sortAthleteMarkets: (market:MarketProps, event_order_stats:EventOrderStatProps[], latest_trades:TradeProps[], athletes:AthleteProps[]):AthleteProps[] => {
+        if(!market){ return [] }
+        let market_stats = event_order_stats.filter(s => s.market_id == market.market_id && s.market_type == 'FOR_MONEY');
+        let market_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == market.market_id && t.side_type == 'athlete');
+        let filtered_athletes = athletes.filter(a => market_trades.map(t => t.side_id.toString()).includes(a.athlete_id.toString()));
+        return filtered_athletes.sort((a,b) => {
+            let old_order_count = market_stats.filter(s => s.side_id == a.athlete_id).reduce((a,b) => a + parseInt(b.open_order_count as string), 0)
+            let new_order_count = market_stats.filter(s => s.side_id == b.athlete_id).reduce((a,b) => a + parseInt(b.open_order_count as string), 0)
+            return new_order_count - old_order_count
+        })
+    }
+}