be-components 2.4.9 → 2.5.1

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

@@ -0,0 +1,121 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import type { BestAvailableOrderProps, EventOrderStatProps, MarketProps, MarketSideOptionProps, OrderProps, TeamProps, TournamentProps, 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 { TeamImage } from '../../../Components/Jerseys';
+
+type TeamTournamentMarketProps = {
+    tournament:TournamentProps,
+    event_type:'team'|'tournament'|'match',
+    team:TeamProps,
+    hide_stat_banner?:boolean,
+    width?:number,
+    market:MarketProps,
+    show_event?:boolean,
+    hide_liquidity?:boolean,
+    latest_trades:TradeProps[],
+    best_available_orders:BestAvailableOrderProps[],
+    event_order_stats:EventOrderStatProps[],
+    default_price_view:'last_trade'|'best_available',
+    onOrder:(order:OrderProps) => void,
+    show_grades?:boolean,
+    onView:(data:{event_id:string, event_type:string, market_id:string, side_type:'team', side_id:string}) => void,
+    onTradeLongPress:(trade:TradeProps) => void
+}
+
+const TeamTournamentMarket = ({ tournament, show_event, hide_liquidity, hide_stat_banner, width, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
+    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
+    const renderSides = useCallback((data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
+        
+        const ba_order = best_available_orders.find(o => o.market_id == market.market_id && o.side_type == 'team' && o.side_id == team.team_id && o.side == data.item.side && o.show);
+        const side_details = MarketComponentHelpers.getTournamentSideIds(market, data.item, undefined, team);
+        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, tournament.tournament_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}
+                    show_grades={show_grades}
+                    order={ba_order}
+                    onLongPress={onTradeLongPress}
+                    onPress={(order) => {
+                        const order_title = MarketComponentHelpers.getOrderTitleForTournament(order, market, tournament, undefined, team);
+                        if(!order_title){ return alert('Unable to process order') }
+                        onOrder({ ...order, title: order_title })
+                    }}
+                />
+            </View>
+        )
+    },[JSON.stringify(best_available_orders)])
+
+    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'}
+            />
+            :<></>}
+            {show_event ?
+            <View style={{ padding:5, backgroundColor:Colors.shades.shade100 }}>
+                <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{tournament.tournament_name}</Text>
+            </View>
+            :<></>}
+            <View style={{ ...view_styles.section_body, flex:1, padding:0, justifyContent:'center', alignItems:'center' }}>
+                <TeamImage
+                    team={team}
+                    size={24}
+                />
+                <View style={{ padding:10, paddingBottom:0 }}>
+                    <Text weight='bold' size={14} color={Colors.brand.midnight} textAlign='center'>{team.market_name} {team.name}</Text>
+                    <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{team.division}</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>
+            {!hide_liquidity ?
+            <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: tournament.tournament_id, 
+                        event_type: 'tournament', 
+                        market_id: market.market_id, 
+                        side_type: 'team', 
+                        side_id: team.team_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 TeamTournamentMarket

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

@@ -0,0 +1,74 @@
+import moment from "moment-mini";
+import type { AthleteProps, EventOrderStatProps, MarketProps, MatchProps, TeamProps, TournamentProps, TradeProps } from "../../../../types";
+
+export { TournamentMarketHelpers }
+const TournamentMarketHelpers = {
+    visibleMarketTypes: (tournament:TournamentProps, market?:MarketProps) => {
+        let show_athletes = false
+        let show_teams = false
+        let show_matches = false
+        tournament.supported_markets.map(sm => {
+            if(!market){ return }
+            if(sm.market_id != market.market_id){ return }
+            switch(market?.event_type){
+                case 'tournament':
+                    if(market.level == 'athlete'){ show_athletes = true }
+                    if(market.level == 'team'){ show_teams = true }
+                    return
+                case 'match': 
+                    show_matches = true
+                    return
+                default: return
+            }
+        })
+        return { show_athletes, show_teams, show_matches }
+    },
+    sortAthletes : (event_order_stats:EventOrderStatProps[], latest_trades:TradeProps[], athletes:AthleteProps[], market?:MarketProps) => {
+        return athletes.sort((a,b) => {
+            let a_prob = 0
+            let b_prob = 0
+            let a_trade = latest_trades.find(os => os.market_id == market?.market_id && os.side == market?.trade_side && os.side_type == 'athlete' && os.side_id == a.athlete_id);
+            if(a_trade){ a_prob = a_trade.probability }
+            let b_trade = latest_trades.find(os => os.market_id == market?.market_id && os.side == market?.trade_side && os.side_type == 'athlete' && os.side_id == b.athlete_id);
+            if(b_trade){ b_prob = b_trade.probability }
+            let a_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'athlete' && os.side_id == a.athlete_id).reduce((a,b) => a + b.open_order_amount, 0);
+            let b_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'athlete' && os.side_id == b.athlete_id).reduce((a,b) => a + b.open_order_amount, 0);
+            
+            if(a_stats > 0){ a_prob += a_stats }
+            if(b_stats > 0){ b_prob += b_stats }
+            return b_prob - a_prob
+        })
+    },
+    sortTeams : (event_order_stats:EventOrderStatProps[], latest_trades:TradeProps[], teams:TeamProps[], market?:MarketProps) => {
+        return teams.sort((a,b) => {
+            let a_prob = 0
+            let b_prob = 0
+            let a_trade = latest_trades.find(os => os.market_id == market?.market_id && os.side == market?.trade_side && os.side_type == 'team' && os.side_id == a.team_id);
+            if(a_trade){ a_prob = a_trade.probability }
+            let b_trade = latest_trades.find(os => os.market_id == market?.market_id && os.side == market?.trade_side && os.side_type == 'team' && os.side_id == b.team_id);
+            if(b_trade){ b_prob = b_trade.probability }
+            let a_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'athlete' && os.side_id == a.team_id).reduce((a,b) => a + b.open_order_amount, 0);
+            let b_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'athlete' && os.side_id == b.team_id).reduce((a,b) => a + b.open_order_amount, 0);
+            
+            if(a_stats > 0){ a_prob += a_stats }
+            if(b_stats > 0){ b_prob += b_stats }
+            return b_prob - a_prob
+        })
+    },
+    sortMatches : (event_order_stats:EventOrderStatProps[], matches:MatchProps[], market?:MarketProps) => {
+        return matches.sort((a,b) => {
+            let a_prob = 0
+            let b_prob = 0
+            let a_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.event_type == 'match' && os.event_id == a.match_id).reduce((a,b) => a + b.open_order_amount, 0);
+            let b_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.event_type == 'match' && os.event_id == b.match_id).reduce((a,b) => a + b.open_order_amount, 0);
+            if(a_stats > 0){ a_prob += a_stats + 999999999 }
+            if(b_stats > 0){ b_prob += b_stats + 999999999 }
+            if(a_prob == 0 && b_prob == 0){
+                b_prob = moment(a.scheduled_datetime).unix()
+                a_prob = moment(b.scheduled_datetime).unix()
+            }
+
+            return b_prob - a_prob
+        })
+    }
+}

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

@@ -0,0 +1,289 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { View, FlatList, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
+import { view_styles } from '../../../constants/styles';
+import Colors from '../../../constants/colors';
+import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, LeagueProps, MarketProps, MatchProps, OrderProps, TeamProps, TournamentProps, TradeProps } from '../../../types';
+import { Button, Icons, Text } from '../../../Components';
+import { MarketComponentApi, MarketComponentHelpers } from '../../api';
+import AthleteTournamentMarket from '../AthleteTournamentMarket';
+import TeamTournamentMarket from '../TeamTournamentMarket';
+import MatchMarket from '../MatchMarket';
+import moment from 'moment-mini';
+import { TournamentMarketHelpers } from './api';
+import { useIsInViewport } from '../../../Components/ViewportObserver';
+
+
+type TournamentMarketProps = {
+    tournament:TournamentProps,
+    league?:LeagueProps,
+    markets:MarketProps[],
+    latest_trades:TradeProps[],
+    best_available_orders:BestAvailableOrderProps[],
+    match_available_orders:BestAvailableOrderProps[],
+    event_order_stats:EventOrderStatProps[],
+    match_order_stats:EventOrderStatProps[],
+    match_latest_trades:TradeProps[],
+    onView:(data:{ event_id:string, event_type:string, market_id:string, side_type?:string, side_id?:string }) => void,
+    onTradeLongPress:(trade:TradeProps) => void,
+    onActivate?:(event_id:string, event_type:string) => void,
+    onViewAdditionalMarkets: (event_id:string, event_type:string) => void,
+    onOrder:(order:OrderProps) => void
+}
+
+
+const TournamentMarket = ({ tournament, league, markets, latest_trades, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, onView, onTradeLongPress, onViewAdditionalMarkets, onOrder }:TournamentMarketProps) => {
+    const [ tournament_data, setTournamentData ] = useState<{
+        loaded:boolean,
+        loading:boolean,
+        athletes:AthleteProps[],
+        teams:TeamProps[],
+        matches:MatchProps[],
+        match_trades:TradeProps[],
+        active_market?:MarketProps
+    }>({
+        loading:false,
+        loaded:false,
+        athletes:[],
+        match_trades:[],
+        teams:[],
+        matches:[]
+    });
+    const { loaded, athletes, loading, matches, teams, active_market, match_trades } = tournament_data;
+    const [ show_markets, setShowMarkets ] = useState(false);
+
+    const ref = useRef(null);
+    const is_in_viewport = useIsInViewport(ref)
+
+    const supported_markets = markets.filter(m => tournament.supported_markets.find(sm => sm.market_id == m.market_id));
+    const { show_athletes, show_teams, show_matches } = TournamentMarketHelpers.visibleMarketTypes(tournament, active_market);
+    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats.concat(match_order_stats));
+    const sorted_athletes = TournamentMarketHelpers.sortAthletes(event_order_stats, latest_trades, athletes, active_market);
+    const sorted_teams = TournamentMarketHelpers.sortTeams(event_order_stats, latest_trades, teams, active_market);
+    const sorted_matches = TournamentMarketHelpers.sortMatches(match_order_stats, matches, active_market);
+
+    useEffect(() => {
+        if(!is_in_viewport || loaded || loading){ return }
+        MarketComponentApi.setEnvironment();
+        getTournamentData(tournament)
+    },[is_in_viewport, tournament.tournament_id]);
+
+    const getTournamentData = async(t:TournamentProps) => {
+        if(loaded || loading){ return }
+        setTournamentData({ ...tournament_data, loading:true });
+        let t_ids:string[] = [];
+        let a_ids:string[] = [];
+        let mtchs:MatchProps[] = await MarketComponentApi.getMatchesByTournament(t.tournament_id);
+        let trades = await MarketComponentApi.getLatestTradesByEvents('match', mtchs.map(m => m.match_id));
+        mtchs.map(m => {
+            if(t.participant_type == 'athlete'){ a_ids = a_ids.concat(m.participants) }
+            if(t.participant_type == 'team'){ t_ids = t_ids.concat(m.participant_type) }
+        })
+        if(t.participant_type == 'team'){ t_ids = t_ids.concat(t.participants) }
+        if(t.participant_type == 'athlete'){ a_ids = a_ids.concat(t.participants) }
+
+        let sm = tournament.supported_markets[0]
+        let market = markets.find(m => m.market_id == sm?.market_id);
+        const aths = await MarketComponentApi.getAthletesByIds(a_ids);
+        const tms = await MarketComponentApi.getTeamsByIds(t_ids);
+
+        setTournamentData({
+            ...tournament_data,
+            loaded: true,
+            loading:false,
+            athletes: aths,
+            match_trades: trades,
+            teams: tms,
+            matches: mtchs,
+            active_market: market
+        })
+    }
+
+    const renderMarkets = (data: { item:MarketProps, index:number }) => {
+        return (
+            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => {
+                setTournamentData({ ...tournament_data, active_market: data.item });
+                setShowMarkets(false);
+            }}>
+                <Text size={12} color={Colors.brand.midnight} weight='semibold'>{data.item.type == 'Stat' ? data.item.stat_label : data.item.type}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    const renderMatches = (data: { item:MatchProps, index:number }) => {
+        if(!active_market){ return <></> }
+        let home_athlete = athletes.find(a => a.athlete_id == data.item.participants[1]);
+        let away_athlete = athletes.find(a => a.athlete_id == data.item.participants[0]);
+        let home_team = teams.find(a => a.team_id == data.item.participants[1]);
+        let away_team = teams.find(a => a.team_id == data.item.participants[0]);
+
+        let m_available_orders = match_available_orders.filter(ba => ba.event_id == data.item.match_id && ba.event_type == 'match');
+        let m_trades = match_latest_trades.filter(t => t.event_id == data.item.match_id && t.event_type == 'match');
+        if(m_trades.length == 0){
+            m_trades = match_trades.filter(t => t.event_id == data.item.match_id && t.event_type == 'match');
+        }
+        let m_order_stats = match_order_stats.filter(os => os.event_id == data.item.match_id && os.event_type == 'match');
+        return (
+            <MatchMarket
+                match={data.item}
+                league={league}
+                away_athlete={away_athlete}
+                home_athlete={home_athlete}
+                away_team={away_team}
+                home_team={home_team}
+                market={active_market}
+                latest_trades={m_trades}
+                best_available_orders={m_available_orders}
+                event_order_stats={m_order_stats}
+                onOrder={onOrder}
+                onTradeLongPress={onTradeLongPress}
+                onView={onView}
+                default_price_view='best_available'
+
+            />
+        )
+    }
+
+    const renderTeams = (data:{ item:TeamProps, index:number }) => {
+        if(!active_market){ return <></> }
+        let team_available_orders = best_available_orders.filter(ba => ba.side_type == 'team' && ba.side_id == data.item.team_id);
+        let team_trades = latest_trades.filter(t => t.side_type == 'team' && t.side_id == data.item.team_id);
+        let team_order_stats = event_order_stats.filter(os => os.side_type == 'team' && os.side_id == data.item.team_id);
+        return (
+            <TeamTournamentMarket
+                team={data.item}
+                event_type='tournament'
+                onTradeLongPress={onTradeLongPress}
+                onView={onView}
+                tournament={tournament}
+                event_order_stats={team_order_stats}
+                best_available_orders={team_available_orders}
+                latest_trades={team_trades}
+                default_price_view='best_available'
+                market={active_market}
+                onOrder={onOrder}
+            />
+        )
+    }
+
+    const renderAthletes = (data:{ item:AthleteProps, index:number }) => {
+        if(!active_market){ return <></> }
+        let team_available_orders = best_available_orders.filter(ba => ba.side_type == 'athlete' && ba.side_id == data.item.athlete_id);
+        let team_trades = latest_trades.filter(t => t.side_type == 'athlete' && t.side_id == data.item.athlete_id);
+        let team_order_stats = event_order_stats.filter(os => os.side_type == 'athlete' && os.side_id == data.item.athlete_id);
+        return (
+            <AthleteTournamentMarket
+                athlete={data.item}
+                event_type='tournament'
+                onTradeLongPress={onTradeLongPress}
+                onView={onView}
+                tournament={tournament}
+                event_order_stats={team_order_stats}
+                best_available_orders={team_available_orders}
+                latest_trades={team_trades}
+                default_price_view='best_available'
+                market={active_market}
+                onOrder={onOrder}
+            />
+        )
+    }
+
+
+    return (
+        <View ref={ref} style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View style={{ ...view_styles.section_header }}>
+                {league ?
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:40, width: 40, marginRight:10 }}
+                    resizeMode='cover'
+                />
+                :<></>}
+                <View style={{ flex:1 }}>
+                    <Text theme='header_2'>{tournament.tournament_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>{moment(tournament.scheduled_datetime).format('MMM DD YYYY')}</Text>
+                </View>
+            </View>
+            {loading || !loaded ?
+            <View style={{ padding:20 }}>
+                <ActivityIndicator size={'large'} color={Colors.brand.midnight} />
+            </View>
+            :
+            <View>
+            {show_teams && teams.length > 0 ?
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList
+                    data={sorted_teams}
+                    renderItem={renderTeams}
+                    horizontal
+                    keyExtractor={(item) => item.team_id.toString()}
+                />
+            </View>
+            :<></>}
+            {show_athletes && athletes.length > 0 ?
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList
+                    data={sorted_athletes}
+                    renderItem={renderAthletes}
+                    horizontal
+                    keyExtractor={(item) => item.athlete_id.toString()}
+                />
+            </View>
+            :show_matches && matches.length > 0 ?
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList
+                    data={sorted_matches}
+                    renderItem={renderMatches}
+                    keyExtractor={(item) => item.match_id.toString()}
+                    horizontal
+                />
+            </View>
+            :<></>}
+            </View>
+            }
+            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <TouchableOpacity style={{ flex:1, flexDirection:'row', minWidth:115 }} onPress={() => {
+                    if(!active_market){ return }
+                    onViewAdditionalMarkets(tournament.tournament_id, 'tournament');
+                }}>
+                    <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:5 }}>
+                        <Text theme='body_2'>Tournament Liquidity</Text>
+                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    </View>
+                </TouchableOpacity>
+                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:4, padding:10, ...view_styles.float }} onPress={() => setShowMarkets(!show_markets)}>
+                    <Text style={{ marginRight:10 }} size={14} color={Colors.brand.midnight}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
+                    <Icons.ChevronIcon color={Colors.brand.midnight} size={14} />
+                </TouchableOpacity>
+                {show_markets ?
+                <View style={{ ...view_styles.section, position:'absolute', bottom:5, right:5, minWidth:175 }}>
+                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header_2'>Select Market</Text>
+                        </View>
+                        <Button
+                            title='X'
+                            title_weight='regular'
+                            borderRadius={100}
+                            backgroundColor={Colors.shades.white}
+                            padding={5}
+                            onPress={() => setShowMarkets(false)}
+                        />
+                    </View>
+                    <View style={{ ...view_styles.section_body, padding:10 }}>
+                        <FlatList
+                            data={supported_markets}
+                            renderItem={renderMarkets}
+                            keyExtractor={(item) => item.market_id.toString()}
+                        />
+                    </View>
+                </View>
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default TournamentMarket

package/src/MarketComponents/index.tsx

@@ -3,11 +3,13 @@ import AthleteMarket from './components/AthleteMarket';
 import EventMarket from './components/EventMarket';
 import AthleteTournamentMarket from './components/AthleteTournamentMarket';
 import TeamEventList from './components/TeamEventList';
+import TournamentMarket from './components/TournamentMarket';
 
 export default {
     TeamEventMarket,
     AthleteMarket,
     EventMarket,
     AthleteTournamentMarket,
-    TeamEventList
+    TeamEventList,
+    TournamentMarket
 }