be-components 1.6.0 → 1.6.1

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
+        })
+    }
+}

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

@@ -0,0 +1,295 @@
+import React, { useEffect, useState } from 'react';
+import { View, Image, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
+import type { AthleteProps, BestAvailableOrderProps, CompetitionProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from '../../../types';
+import { view_styles } from '../../../constants/styles';
+import { Button, Icons, LinearDiagnal, Text } from '../../../Components';
+import {TeamEventMarketHelpers} from './api';
+import MarketButton from '../../components/MarketButton';
+import Colors from '../../../constants/colors';
+import moment from 'moment-mini';
+import AthleteMarket from '../../components/AthleteMarket';
+import EventMarket from '../../components/EventMarket';
+
+import { MarketComponentApi, MarketComponentHelpers } from '../../api';
+import { MarketButtonHelpers } from '../MarketButton/api';
+
+type TeamEventMarketProps = {
+    event:EventProps,
+    markets:MarketProps[],
+    competition?:CompetitionProps,
+    latest_trades:TradeProps[],
+    best_available_orders:BestAvailableOrderProps[],
+    event_order_stats:EventOrderStatProps[],
+    default_price_view: 'last_trade'|'best_available',
+    onView:(data:{ event_id:string, event_type:string, market_id:string, side_type?:string, side_id?:string }) => void,
+    onOrder:(order:OrderProps) => void,
+    onExpand?:(expanded:boolean) => void,
+    onCompetitionSelect:(competition_id:string) => void,
+    onViewAdditionalMarkets: (event_id:string, event_type:string) => void
+}
+const TeamEventMarket = ({ event, competition, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets }:TeamEventMarketProps) => {
+    const [ expanded_data, setExpandedData ] = useState<{
+        expanded:boolean,
+        loaded:boolean,
+        loading:boolean,
+        athletes:AthleteProps[]
+    }>({
+        loaded:false,
+        loading:false,
+        expanded:false,
+        athletes:[]
+    })
+    const { expanded, athletes, loaded, loading } = expanded_data;
+
+    useEffect(() => {
+        MarketComponentApi.setEnvironment();
+    },[])
+
+    const expandedEvent = async() => {
+        if(onExpand){ onExpand(expanded ? false : true) }
+        if(expanded){ return setExpandedData({ ...expanded_data, expanded: false }) }
+        if(loaded){ return setExpandedData({ ...expanded_data, expanded: true }) }
+        setExpandedData({ ...expanded_data, expanded:true, loading:true });
+
+        //Need to load our athletes in here!
+        const away_athletes = await MarketComponentApi.getAthletesByTeamId(event.away_team_id);
+        const home_athletes = await MarketComponentApi.getAthletesByTeamId(event.home_team_id);
+        setExpandedData({
+            expanded:true,
+            loaded:true,
+            loading:false,
+            athletes: away_athletes.concat(home_athletes)
+         })
+    }
+    
+    const primary_markets = TeamEventMarketHelpers.getPrimaryMarkets(event, markets);
+    
+
+    const renderSides = (data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
+        const side_details = MarketComponentHelpers.getTeamEventSideIds(event, data.market, data.item);
+        if(!side_details){ return <></> } //Bomb out if we cant get the side details
+        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(data.market, event.event_id, 'team', data.item.side, data.item.id_source, side_details.side_id, side_details.reversed_side_id)
+        }
+        if(!trade){ return <></> }
+        return (
+            <View style={{ margin:2, width:50, height:50 }}>
+                <MarketButton
+                    side_option={data.item}
+                    market={data.market}
+                    trade={trade}
+                    onPress={(order) => {
+                        const order_title = MarketComponentHelpers.getOrderTitleForTeamEvent(order, data.market, event);
+                        if(!order_title){ return alert('Unable to process order') }
+                        onOrder({ ...order, title: order_title })
+                    }}
+                />
+            </View>
+        )
+    }
+
+    const renderMarketHeaders = (data:{ item:MarketProps, index:number }) => {
+        return (
+            <View style={{ width:50, marginLeft:2, marginRight:2 }}>
+                <Text size={12} color={Colors.brand.midnight} textAlign='center'>{data.item.type.toUpperCase()}</Text>
+            </View>
+        )
+    }
+
+    const renderNonPrimaryMarkets = (data: { item:EventOrderStatProps, index:number }) => {
+        const market = markets.find(m => m.market_id == data.item.market_id);
+        if(!market){ return <></> }
+        switch(market.level){
+            case 'athlete':
+                const athlete = athletes.find(a => a.athlete_id == data.item.side_id)
+                if(!athlete){ return <></> }
+                const athlete_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == data.item.market_id && t.side_type == 'athlete' && t.side_id == data.item.side_id);
+                const athlete_orders = best_available_orders.filter(t => t.market_id == data.item.market_id && t.side_type == 'athlete' && t.side_id == data.item.side_id);
+                return (
+                    <View>
+                        <AthleteMarket
+                            event={event}
+                            event_type='team'
+                            athlete={athlete}
+                            market={market}
+                            event_order_stats={[data.item]}
+                            latest_trades={athlete_trades}
+                            default_price_view={default_price_view}
+                            best_available_orders={athlete_orders}
+                            onOrder={onOrder}
+                            onView={onView}
+                        />
+                    </View>
+                )
+            case 'event':
+                const event_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == data.item.market_id);
+                const event_orders = best_available_orders.filter(t => t.market_id == data.item.market_id);
+                return (
+                    <View>
+                        <EventMarket
+                            event={event}
+                            market={market}
+                            event_order_stats={[data.item]}
+                            latest_trades={event_trades}
+                            best_available_orders={event_orders}
+                            default_price_view={default_price_view}
+                            onOrder={onOrder}
+                            onView={onView}
+                        />
+                    </View>
+                )
+            default: return<></>
+        }
+    }
+
+    const renderPrimaryMarkets = (data:{ item:MarketProps, index:number }) => {
+        return (
+            <View>
+                <FlatList
+                    key={`${event.event_id}_side_options`}
+                    data={data.item.side_options.sort((a,b) => {
+                        let a_t = a.side == data.item.trade_side ? 1 : 0
+                        let b_t = b.side == data.item.trade_side ? 1 : 0
+                        return a_t - b_t
+                    })}
+                    keyExtractor={(item) => item.side}
+                    renderItem={({ item, index }) => renderSides({ item, index, market:data.item })}
+                />
+            </View>
+        )
+    }
+
+    if(!event.away || !event.home){ return <></> }
+
+    const upcoming = moment().isBefore(moment(event.scheduled_datetime)) ? true : false
+    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
+
+    const non_primary_markets = TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats)
+
+    return (
+        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View nativeID='event_header_data' style={{ flexDirection:'row', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                <View style={{ flex:1 }}>
+                    {event.event_sub_title ?
+                    <Text size={12} color={Colors.brand.midnight} weight='semibold'>{event.event_sub_title}</Text>
+                    :<></>}
+                </View>
+                <View style={{ flexDirection:'row', alignItems:'center' }}>
+                    <Icons.TVIcon size={10} color={Colors.brand.midnight} />
+                    <Text style={{ marginLeft:8 }} size={12} color={Colors.brand.midnight} weight='semibold'>{event.info?.broadcast?.network}</Text>
+                </View>
+            </View>
+            <View nativeID='primary_markets' style={{ flexDirection:'row' }}>
+                <View nativeID='team_details' style={{ flex:1, padding:5, paddingRight:0 }}>
+                    <View style={{ flexDirection:'row', alignItems:'center', marginTop:5, marginBottom:5, marginLeft:10 }}>
+                        <View style={{ marginRight:5, height:10, width:10, borderRadius:100, backgroundColor:upcoming?Colors.brand.electric:Colors.utility.success }} />
+                        <Text size={12} color={Colors.brand.midnight}>{TeamEventMarketHelpers.getTimeDetail(event)}</Text>
+                    </View>
+                    <View nativeID='away_details' style={{ ...view_styles.body_row, minHeight:48 }}>
+                        <Image
+                            source={{ uri: event.away.image?.url }}
+                            style={{ height:30, width:30 }}
+                            resizeMode='cover'
+                        />
+                        <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:5 }}>
+                            <View style={{ flex:1, marginRight:5 }}>
+                                <Text theme='header_2'>{event.away.market_name} {event.away.name}</Text>
+                                {event.away_sub_title ?
+                                <Text style={{ marginTop:3 }} theme='body_2'>{event.away_sub_title}</Text>
+                                :<></>}
+                            </View>
+                            <Text theme='body'>{event.away_team_score}</Text>
+                        </View>
+                    </View>
+                    <View nativeID='home_details' style={{ ...view_styles.body_row, minHeight:48 }}>
+                        <Image
+                            source={{ uri: event.home.image?.url }}
+                            style={{ height:30, width:30 }}
+                            resizeMode='cover'
+                        />
+                        <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:5 }}>
+                            <View style={{ flex:1, marginRight:5 }}>
+                                <Text theme='header_2'>{event.home.market_name} {event.home.name}</Text>
+                                {event.home_sub_title ?
+                                <Text style={{ marginTop:3 }} theme='body_2'>{event.home_sub_title}</Text>
+                                :<></>}
+                            </View>
+                            <Text theme='body'>{event.home_team_score}</Text>
+                        </View>
+                    </View>
+                </View>
+                <View nativeID='primary_market_details' style={{ padding:5 }}>
+                    <View style={{ marginTop:5, marginBottom:5 }}>
+                        <FlatList
+                            key={`${event.event_id}_market_headers`}
+                            data={primary_markets}
+                            keyExtractor={(item) => item.market_id.toString()}
+                            horizontal
+                            renderItem={renderMarketHeaders}
+                        />
+                    </View>
+                    <FlatList
+                        key={`${event.event_id}_primary_markets`}
+                        data={primary_markets}
+                        horizontal
+                        renderItem={renderPrimaryMarkets}
+                        keyExtractor={(item) => item.market_id.toString()}
+                    />
+                </View>
+            </View>
+            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <TouchableOpacity style={{ flex:1, flexDirection:'row' }} onPress={() => {
+                    if(!primary_markets[0]){ return }
+                    onView({ event_id: event.event_id, event_type:'team', market_id: primary_markets[0].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>
+                {competition ?
+                <TouchableOpacity 
+                    style={{ marginRight:15, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, backgroundColor:Colors.highlights.highlight500, ...view_styles.float }}
+                    onPress={() => onCompetitionSelect(competition.competition_id)}>
+                    <Icons.PickEmIcon size={18} color={Colors.shades.white} />
+                    <Text style={{ marginLeft:5 }} size={14} color={Colors.shades.white} weight='semibold'>Pick 6 Available</Text>
+                </TouchableOpacity>
+                :<></>}
+                <TouchableOpacity style={{ height:35, width:35, justifyContent:'center', borderRadius:100, alignItems:'center', backgroundColor:Colors.shades.white, ...view_styles.float }} onPress={() => expandedEvent()}>
+                   <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.brand.midnight} />
+                </TouchableOpacity>
+            </View>
+            {expanded ?
+            <View>
+                <View style={{ flexDirection:'row', alignItems:'center' }}>
+                    <View style={{flex:1}}>
+                        <LinearDiagnal label_size={12} label={'Hot Markets'} left_color={Colors.utility.warning} right_color={Colors.utility.error}/>
+                    </View>
+                    {loading ?
+                        <ActivityIndicator style={{ paddingRight:20 }} size='small' color={Colors.brand.midnight} /> 
+                    :
+                    <Button
+                        title='SEE ALL'
+                        padding={15}
+                        title_color={Colors.brand.electric}
+                        onPress={() => onViewAdditionalMarkets(event.event_id, 'team')}
+                    />
+                    }
+                </View>
+                <FlatList
+                    data={non_primary_markets}
+                    renderItem={renderNonPrimaryMarkets}
+                    keyExtractor={(item) => `${item.market_id}:${item.side_type}:${item.side_id}`}
+                    horizontal
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default TeamEventMarket

package/src/MarketComponents/index.tsx

@@ -0,0 +1,5 @@
+import TeamEventMarket from './components/TeamEventMarket';
+
+export default {
+    TeamEventMarket
+}

package/src/index.tsx

@@ -25,6 +25,7 @@ import EngageModule from "./Engage";
 import SeasonManager from "./CompetitionSeasonManager";
 import SeasonModule from "./CompetitionSeason";
 import CreateSeasonForm from "./CompetitionSeasonManager/components/CreateSeasonForm";
+import MarketComponents from './MarketComponents';
 
 export {
   Authenticator,
@@ -42,6 +43,7 @@ export {
   Colors,
   MyWallet,
   Checkout,
+  MarketComponents,
   PollCampaign,
   PollCampaignApi,
   PollApi,