be-components 6.0.4 → 6.0.6

package/src/Components/Icons.tsx

@@ -25,6 +25,22 @@ const AlertIcon = ({ color, size }:IconProps) => {
     )
 }
 
+const AthleteIcon = ({size, color}:IconProps) => {
+    const ratio = 0.7
+    const height = size ?? 30
+    const width = height * ratio
+    return (
+        <Svg width={`${width}px`} height={`${height}px`}  viewBox="0 0 21 30">
+            <G id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <G id="athlete-svgrepo-com" fill={color??Colors.brand.midnight} fillRule="nonzero">
+                    <Path d="M10.4052437,14.8646046 C4.59485879,14.8646046 0,19.5973344 0,25.2698484 L0,28.8660949 C0,29.4922857 0.507655754,30 1.13390514,30 L19.6766409,30 C20.3028317,30 20.8105461,29.4923442 20.8105461,28.8660949 L20.8105461,25.2698484 C20.8105461,19.5349321 16.1428553,14.8646046 10.4052437,14.8646046 Z M9.49170948,17.1839188 C10.0969237,17.1164188 10.7031341,17.1147782 11.318778,17.1839188 L11.318778,18.8465734 C11.318778,19.3502448 10.9089737,19.7601077 10.4052437,19.7601077 C9.90151377,19.7601077 9.49170948,19.3503034 9.49170948,18.8465734 L9.49170948,17.1839188 Z M3.55839496,27.7321897 L2.26775169,27.7321897 C2.26775169,25.1453954 2.04491988,23.2271551 3.55833637,20.8766105 L3.55833637,27.7321897 L3.55839496,27.7321897 Z M14.9843994,27.7321897 L5.82620525,27.7321897 L5.82620525,18.5465737 C6.26360716,18.2477459 6.73136061,17.9902852 7.22401638,17.7802854 L7.22401638,18.8466906 C7.22401638,20.60081 8.65112436,22.0280351 10.4053609,22.0280351 C12.1595975,22.0280351 13.5867055,20.6009271 13.5867055,18.8466906 L13.5867055,17.7802854 C14.0793612,17.9903438 14.5471147,18.2477459 14.9845166,18.5465737 L14.9845166,27.7321897 L14.9843994,27.7321897 Z M18.542853,27.7321897 L17.2522683,27.7321897 L17.2522683,20.8766105 C18.7474622,23.1989129 18.542853,25.0730322 18.542853,27.7321897 Z" id="Shape"></Path>
+                    <Path d="M3.76265258,4.82369646 C2.29177511,9.33347721 5.67515071,13.9701719 10.4053609,13.9701719 C15.1458836,13.9701719 18.5161343,9.32515691 17.0480107,4.82369646 C17.3922486,4.62904822 17.6249828,4.26031811 17.6249828,3.83662711 C17.6249828,3.21043632 17.117327,2.70272197 16.4910776,2.70272197 L15.9201993,2.70272197 C13.1156122,-0.901083103 7.69458233,-0.900731541 4.89028819,2.70272197 L4.31946844,2.70272197 C3.69327764,2.70272197 3.1855633,3.21037773 3.1855633,3.83662711 C3.1855633,4.26025951 3.41835604,4.62898962 3.76265258,4.82369646 Z M12.381316,2.70266338 L8.42917146,2.70266338 C9.65067417,2.13682409 11.0967665,2.10752724 12.381316,2.70266338 Z M6.14050182,4.97047366 L14.6701029,4.97047366 C16.1461366,8.08285344 13.8644396,11.7023616 10.4053023,11.7023616 C6.94657525,11.7023616 4.66429232,8.083205 6.14050182,4.97047366 Z" id="Shape"></Path>
+                </G>
+            </G>
+        </Svg>
+    )
+}
+
 const LeaderboardIcon = ({ color, size }:IconProps) => {
     return (
         <Svg width={`${size??34}px`} height={`${size??34}px`} viewBox="0 0 34 34">
@@ -1606,6 +1622,7 @@ export default {
     PauseIcon,
     TransactionErrorIcon,
     VisaCardIcon,
+    AthleteIcon,
     MasterCardIcon,
     UnbidSquare
 }

package/src/Components/Pagination.tsx

@@ -1,28 +1,68 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { Button, View } from "./Themed"
+import { FlatList } from 'react-native';
+import { useColors } from '../constants/useColors';
 
 type PaginationProps = {
     offset:number
     style?:any,
+    pages?:number,
     next_title?:string,
     previous_title?:string,
     onPrevious: () => void,
-    onNext: () => void
+    onNext: () => void,
+    onSelectPage?:(page:number) => void
 }
 
-const Pagination = ({ offset, onPrevious, onNext, next_title, previous_title, style }:PaginationProps) => {
+const Pagination = ({ offset, pages, onPrevious, onNext, next_title, previous_title, style, onSelectPage }:PaginationProps) => {
+    const Colors = useColors();
+    const [ width, setWidth ] = useState(0);
+    let pagination_dots = useCallback(() => {
+        if(!pages){ return [] }
+        const arr = Array.from({ length: pages }, (_, i) => i);
+        return arr
+    },[pages]);
+    const page_dots = pagination_dots();
+    const renderDots = (data:{ item:number, index:number }) => {
+        const active = offset == data.item ? true : false
+        return (
+            <Button transparent disabled={!onSelectPage} 
+            style={{ padding:10, width: width / page_dots.length, justifyContent:'center', alignItems:'center' }}
+            onPress={() => onSelectPage ? onSelectPage(data.item): console.log('')}>
+                <View style={{ height:active ? 10 : 8, width:active ? 10 : 8, borderRadius:100, backgroundColor:active ? Colors.text.action :Colors.text.h1, opacity: active? 1 : 0.8 }} />
+            </Button>
+        )
+    }
 
     return (
-        <View transparent style={{ flexDirection: 'row', alignItems:'center', justifyContent:'space-between', ...style }}>
-            {offset > 0 ?
+        <View transparent style={{ flexDirection: 'row', alignItems:'center', ...style }}>
+            
             <Button
+                disabled={offset == 0}
+                style={{ opacity: offset == 0 ? 0.4: 1 }}
                 title={previous_title ?? 'PREV'}
                 type='text'
                 onPress={() => onPrevious()}
             />
-            :<View />}
+            
+            <View transparent style={{ flex:1 }} onLayout={(ev) => {
+                const { width } = ev.nativeEvent.layout;
+                setWidth(width);
+            }}>
+                <FlatList
+                    data={page_dots}
+                    keyExtractor={(item) => item.toString()}
+                    key={'pagination_dots'}
+                    showsHorizontalScrollIndicator={false}
+                    renderItem={renderDots}
+                    horizontal
+
+                />
+            </View>
             <Button
                 title={next_title ?? 'NEXT'}
+                style={{ opacity: pages && pages == offset + 1  ? 0.4 : 1 }}
+                disabled={pages && pages == offset + 1  ? true : false}
                 type='text'
                 onPress={() => onNext()}
             />

package/src/LocationTracker/api/index.tsx

@@ -31,6 +31,7 @@ const LocationApi = {
     },
     compareLastLocation: async(player_location:PlayerLocationProps):Promise<{ last_location?:PlayerLocationProps, distance:number }> => {
         try {
+            console.log(SOCIAL_SVC_API)
             if(Platform.OS != 'web'){ return { distance: 1000 } }
             const resp = await axios.post(`${SOCIAL_SVC_API}/v1/locations/player/compare`, { player_location })
             return { distance: resp.data.distance, last_location: resp.data.last_location }
@@ -138,6 +139,7 @@ const LocationHelpers = {
                     location: {
                         location_id: '',
                         label: region ?? 'UNKNOWN',
+                        commission_pct: 0.015,
                         value: region ?? 'UNKNOWN',
                         create_datetime: '', last_update_datetime: '',
                         legal_ind: false,

package/src/LocationTracker/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { View, Image, Linking, Platform } from 'react-native';
-import { Button, Text } from '../Components';
-import Colors from '../constants/colors';
+import { Image, Linking, Platform } from 'react-native';
 import { isSafari, isChrome, isIOS } from 'react-device-detect';
 import type { LocationProps, PlayerAddressProps } from '../types';
 import * as Location from 'expo-location';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
 
 type LocationTrackerProps = {
     onClose: () => void,
@@ -25,7 +25,7 @@ type LocationTrackerProps = {
     onGetLocation: () => void
 }
 const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromptForPermission }: LocationTrackerProps) => {
-
+    const Colors = useColors();
     const { loading, error } = location;
 
     const handleHelpMe = () => {
@@ -41,7 +41,7 @@ const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromp
             {permission.permission == 'undetermined' || permission.permission == 'prompt' || !permission.permission ?
             <View style={{ padding:20 }}>
                 <View style={{ padding:10 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='semibold' textAlign='center'>ALL REAL-MONEY TRANSACTIONS REQUIRE LOCATION</Text>
+                    <Text size={18} theme='h2'>ALL REAL-MONEY TRANSACTIONS REQUIRE LOCATION</Text>
                 </View>
                 <View style={{ justifyContent:'center', alignItems:'center', padding:15 }}>
                     <Image
@@ -50,13 +50,13 @@ const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromp
                     />
                 </View>
                 <View style={{ padding:10 }}>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} weight='regular' textAlign='center'>When using real money, either in the form of a bet, competition or deposit/withdrawal, BettorEdge requires location services turned on to verify you are in a location where betting is permitted.</Text>
+                    <Text style={{ marginTop:5 }} size={14} theme='description' textAlign='center'>When using real money, either in the form of a bet, competition or deposit/withdrawal, BettorEdge requires location services turned on to verify you are in a location where betting is permitted.</Text>
                 </View>
             </View>
             : permission.permission == 'denied' ?
             <View style={{ padding:20 }}>
                 <View style={{ padding:10 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='semibold' textAlign='center'>LOCATION SETTINGS ARE NOT ENABLED</Text>
+                    <Text size={18} theme='h2' textAlign='center'>LOCATION SETTINGS ARE NOT ENABLED</Text>
                 </View>
                 <View style={{ justifyContent:'center', alignItems:'center', padding:15 }}>
                     <Image
@@ -65,13 +65,13 @@ const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromp
                     />
                 </View>
                 <View style={{ padding:10 }}>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} weight='regular' textAlign='center'>{error ?? `We were not able to get your location.  Please use the Help Me button below to troubleshoot enabling your device's location services`}</Text>
+                    <Text style={{ marginTop:5 }} size={14} theme='warning' textAlign='center'>{error ?? `We were not able to get your location.  Please use the Help Me button below to troubleshoot enabling your device's location services`}</Text>
                 </View>
             </View>
             : permission.permission == 'granted' || location.location ?
             <View style={{ padding:20 }}>
                 <View style={{ padding:10 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='semibold' textAlign='center'>ALL REAL-MONEY TRANSACTIONS REQUIRE LOCATION</Text>
+                    <Text size={18} theme='h2' textAlign='center'>ALL REAL-MONEY TRANSACTIONS REQUIRE LOCATION</Text>
                 </View>
                 <View style={{ justifyContent:'center', alignItems:'center', padding:15 }}>
                     <Image
@@ -80,7 +80,7 @@ const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromp
                     />
                 </View>
                 <View style={{ padding:10 }}>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} weight='regular' textAlign='center'>When using real money, either in the form of a bet, competition or deposit/withdrawal, BettorEdge requires location services turned on to verify you are in a location where betting is permitted.</Text>
+                    <Text style={{ marginTop:5 }} theme='description' size={14} weight='regular' textAlign='center'>When using real money, either in the form of a bet, competition or deposit/withdrawal, BettorEdge requires location services turned on to verify you are in a location where betting is permitted.</Text>
                 </View>
             </View>
             :<></>}
@@ -88,12 +88,8 @@ const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromp
             <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
                 <Button 
                     title='CLOSE'
+                    type='close'
                     style={{ flex:1, marginRight:5 }}
-                    title_color={Colors.utility.error}
-                    backgroundColor={Colors.shades.white}
-                    borderWidth={1}
-                    padding={15}
-                    borderColor={Colors.utility.error}
                     onPress={() => onClose()}
                 />
                 <Button
@@ -101,8 +97,8 @@ const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromp
                     style={{ flex:3, opacity: loading ? 0.5 : 1 }}
                     loading={loading}
                     disabled={loading}
-                    backgroundColor={Colors.brand.electric}
-                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.text.highlight}
+                    title_color={Colors.text.white}
                     onPress={() => {
                         if(permission.permission == 'prompt' || permission.permission == 'undetermined' || !permission.checked){
                             return onPromptForPermission()
@@ -116,21 +112,15 @@ const LocationTracker = ({ onClose, onGetLocation, permission, location, onPromp
             <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
                 <Button 
                     title='CLOSE'
+                    type='error'
                     style={{ flex:1, marginRight:5 }}
-                    title_color={Colors.utility.error}
-                    backgroundColor={Colors.shades.white}
-                    borderWidth={1}
-                    padding={15}
-                    borderColor={Colors.utility.error}
                     onPress={() => onClose()}
                 />
                 <Button 
                     title='HELP ME'
                     style={{ flex:3 }}
-                    title_color={Colors.shades.white}
-                    borderWidth={1}
-                    padding={15}
-                    backgroundColor={Colors.brand.electric}
+                    title_color={Colors.text.white}
+                    backgroundColor={Colors.text.highlight}
                     onPress={() => handleHelpMe()}
                 />
             </View>

package/src/MarketComponents/api/index.ts

@@ -27,6 +27,15 @@ const MarketComponentApi = {
             return []
         }
     },
+    createOrder: async(order:OrderProps):Promise<OrderProps | undefined> => {
+        try {
+            const resp = await axios.post(`${MK_SVC_API}/v1/orders/order/create`, { order });
+            return resp.data.order
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
     getPlayersByIds: async(player_ids:string[]):Promise<PublicPlayerProps[]> => {
         try {
             if(player_ids.length == 0){ return [] }
@@ -202,7 +211,7 @@ const MarketComponentApi = {
         }
 
     },
-    getAthletesByIds : async(athlete_ids:string[]) => {
+    getAthletesByIds : async(athlete_ids:string[]):Promise<AthleteProps[]> => {
         try {
             if(athlete_ids.length == 0){ return [] }
             const resp = await axios.post(`${EVENT_SVC_API}/v1/athletes/bulk/get`, { attribute: 'athlete_id', values: athlete_ids })
@@ -238,13 +247,12 @@ const MarketComponentApi = {
             return []
         }
     },
-    getBestAvailableOrders:async():Promise<BestAvailableResponseProps | undefined> => {
+    getBestAvailableOrders:async():Promise<BestAvailableResponseProps> => {
         try {
             const resp = await axios.get(`${MK_SVC_API}/v1/orders/available`);
             return resp.data
         } catch (e) {
-            console.log(e)
-            return undefined
+            return { events: [], tournaments: [], matches: [] }
         }
     },
     getAthletesByTeamId: async(team_id:string):Promise<AthleteProps[]> => {
@@ -317,6 +325,104 @@ const MarketComponentHelpers = {
             return earningsMultiplyer * amt
         }
     },
+    getMissingTournaments:(matches:MatchProps[], tournaments:TournamentProps[]) => {
+        let needed_tourneys:string[] = []
+        matches.map(m => {
+            let tourney = tournaments.find(t => t.tournament_id == m.tournament_id);
+            if(!tourney){ needed_tourneys.push(m.tournament_id) }
+        })
+        return needed_tourneys
+    },
+    extractAthleteIds: (athlete_ids?:string):string[] => {
+        if(!athlete_ids || athlete_ids == 'undefined'){ return [] }
+        let split_ids = athlete_ids.split(',');
+        let ath_ids:string[] = []
+        split_ids.map(id => {
+            if(isNaN(parseInt(id))){ return }
+            return ath_ids.push(id)
+        });
+        return ath_ids
+    },
+    formatBestAvailable:(ba_response:{ events:EventProps[], tournaments:TournamentProps[], matches:MatchProps[] }) => {
+        let best_available:{ [key:string]: BestAvailableOrderProps[] } = {}
+        let order_stats: { [key:string]: EventOrderStatProps[] } = {}
+        let latest_trades: { [key:string]: TradeProps[] } = {}
+        let athlete_ids:string[] = []
+        let team_ids: string[] = []
+
+        ba_response.events.map((e:EventProps) => {
+            if(!e.supported_markets){ return }
+            let ao:BestAvailableOrderProps[] = [], os:EventOrderStatProps[] = [], lt:TradeProps[] = []
+            let supported_markets = e.supported_markets.filter(m => m)
+
+            supported_markets.map(m => {
+                m.available_orders?.map(o => ao.push(o))
+                m.order_stats?.map(s => os.push(s))
+                m.latest_trades?.map(t => {
+                    if(t.side_type == 'athlete'){ athlete_ids.push(t.side_id) }
+                    lt.push(t)
+                })
+            });
+            best_available[`team:${e.event_id}`] = ao
+            order_stats[`team:${e.event_id}`] = os
+            latest_trades[`team:${e.event_id}`] = lt
+        })
+        ba_response.tournaments.map((e:TournamentProps) => {
+            if(!e.supported_markets){ return }
+            let ao:BestAvailableOrderProps[] = [], os:EventOrderStatProps[] = [], lt:TradeProps[] = []
+            let supported_markets = e.supported_markets.filter(m => m)
+            supported_markets.map(m => {
+                m.available_orders?.map(o => ao.push(o))
+                m.order_stats?.map(s => os.push(s))
+                m.latest_trades?.map(t => {
+                    if(t.side_type == 'athlete'){ athlete_ids.push(t.side_id) }
+                    lt.push(t)
+                })
+            });
+            best_available[`tournament:${e.tournament_id}`] = ao
+            order_stats[`tournament:${e.tournament_id}`] = os
+            latest_trades[`tournament:${e.tournament_id}`] = lt
+
+        })
+        ba_response.matches.map((e:MatchProps) => {
+            if(!e.supported_markets){ return }
+            if(e.participant_type == 'athlete'){ athlete_ids = athlete_ids.concat(e.participants) }
+            let ao:BestAvailableOrderProps[] = [], os:EventOrderStatProps[] = [], lt:TradeProps[] = []
+            let supported_markets = e.supported_markets.filter(m => m)
+            supported_markets.map(m => {
+                
+                m.available_orders?.map(o => ao.push(o))
+                m.order_stats?.map(s => os.push(s))
+                m.latest_trades?.map(t => lt.push(t))
+            });
+            best_available[`match:${e.match_id}`] = ao
+            order_stats[`match:${e.match_id}`] = os
+            latest_trades[`match:${e.match_id}`] = lt
+
+            let existing_tournament = order_stats[`tournament:${e.tournament_id}`]
+            if(!existing_tournament){
+                order_stats[`tournament:${e.tournament_id}`] = os
+            } else {
+                order_stats[`tournament:${e.tournament_id}`] = existing_tournament.concat(os)
+            }
+
+            let existing_tournament_trades = latest_trades[`tournament:${e.tournament_id}`]
+            if(!existing_tournament_trades){
+                latest_trades[`tournament:${e.tournament_id}`] = lt
+            } else {
+                latest_trades[`tournament:${e.tournament_id}`] = existing_tournament_trades.concat(lt)
+            }
+
+            let existing_tournament_orders = best_available[`tournament:${e.tournament_id}`]
+            if(!existing_tournament_orders){
+                best_available[`tournament:${e.tournament_id}`] = ao
+            } else {
+                best_available[`tournament:${e.tournament_id}`] = existing_tournament_orders.concat(ao)
+            }
+        })
+        athlete_ids = [ ...new Set(athlete_ids.map(id => id)) ]
+        return { best_available, order_stats, latest_trades, athlete_ids, team_ids }
+    },
     getOrdersFromTrade:(trade:TradeProps, orders:OrderProps[]) => {
         if(trade.position_ids.length == 0){ return { found_orders:[], found_positions: [] } }
         let found_orders:OrderProps[] = []

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

@@ -66,13 +66,12 @@ const AthleteMarket = ({ event, show_event, float, hide_image, direction, league
             </View>
         )
     },[athlete.athlete_id, is_locked, market.market_id, JSON.stringify(event_order_stats), JSON.stringify(best_available_orders)])
-
     return (
         <View float={float} style={[{ borderRadius:8 }, style]}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
-                label_size={14}
+                label_size={12}
                 style={{ borderTopLeftRadius:8, padding:5  }}
                 left_color={Colors.incentive.gold}
                 right_color={'#ebd197'}
@@ -98,7 +97,7 @@ const AthleteMarket = ({ event, show_event, float, hide_image, direction, league
                         <Text style={{ marginTop:3 }} theme='description' textAlign='center' size={12}>{athlete.team?`${athlete.team.abbr}`:''} ({athlete.position})</Text>
                     </View>
                 </View>
-                <View nativeID='market_sides' style={{ flexDirection:'row', flexGrow:1, justifyContent:'flex-end', alignItems:'center', padding:10 }}>
+                <View nativeID='market_sides' style={{ flexDirection:'row', flexGrow:1, justifyContent:direction=='vertical'?'center':'flex-end', 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

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

@@ -0,0 +1,9 @@
+import moment from "moment-mini"
+import type { PollProps } from "../../../../types"
+
+export const MatchMarketHelpers = {
+        getUpcomingFlash: (flash_markets?:PollProps[]) => {
+            if(!flash_markets){ return undefined }
+            return flash_markets.filter(fm => fm.status == 'active' && moment().isBefore(moment(fm.end_datetime))).sort((a,b) => moment(a.end_datetime).unix() - moment(b.end_datetime).unix() || parseInt(a.poll_id) - parseInt(b.poll_id))[0]
+        }
+}

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, LeagueProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, TeamProps, TournamentProps, TradeProps } from "../../../types"
+import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, LeagueProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, PollProps, TeamProps, TournamentProps, TradeProps } from "../../../types"
 import MarketButton from '../MarketButton';
 import { Icons, LinearDiagnal } from '../../../Components';
 import { MarketButtonHelpers } from '../MarketButton/api';
@@ -7,6 +7,8 @@ import { MarketComponentHelpers } from '../../api';
 import { AthleteImage } from '../../../Components/Jerseys';
 import { Button, Text, View } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
+import { MatchMarketHelpers } from './api';
+import { Image } from 'react-native';
 
 type MatchMarketProps = {
     league?:LeagueProps,
@@ -21,6 +23,7 @@ type MatchMarketProps = {
     home_team?:TeamProps,
     image_size_override?:number,
     hide_stat_banner?:boolean,
+    flash_markets?:PollProps[],
     width?:number,
     style?:any,
     market:MarketProps,
@@ -31,16 +34,18 @@ type MatchMarketProps = {
     event_order_stats:EventOrderStatProps[],
     default_price_view:'last_trade'|'best_available',
     onOrder:(order:OrderProps) => void,
+    onFlashSelect?:(poll_id:string) => void,
     show_grades?:boolean,
     onView:(data:{event_id:string, event_type:string, market_id:string, side_type:'athlete', side_id:string}) => void,
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const MatchMarket = ({ league, match, tournament, float, show_event, hide_image, image_size_override, direction, style, hide_liquidity, hide_stat_banner, width, away_athlete, home_athlete, away_team, home_team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:MatchMarketProps) => {
+const MatchMarket = ({ league, match, tournament, float, flash_markets, show_event, hide_image, image_size_override, direction, style, hide_liquidity, hide_stat_banner, width, away_athlete, home_athlete, away_team, home_team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onFlashSelect, onOrder, onView, onTradeLongPress }:MatchMarketProps) => {
     const C = useColors();
     const { liquidity, open_order_count } = useMemo(() => MarketComponentHelpers.getLiqudity(event_order_stats), [JSON.stringify(event_order_stats)])
     const is_locked = useMemo(() => MarketComponentHelpers.isMatchMarketLocked(match, market.market_id),[JSON.stringify(match.supported_markets)])
     const match_time_detail = MarketComponentHelpers.getMatchTimeDetail(match);
+    const upcoming_flash_market = MatchMarketHelpers.getUpcomingFlash(flash_markets);
     let image_size = image_size_override ?? 40
     if(!image_size_override && width){ image_size = width * 0.18 }
 
@@ -148,6 +153,28 @@ const MatchMarket = ({ league, match, tournament, float, show_event, hide_image,
                     
                 </View>
             </View>
+            {onFlashSelect && upcoming_flash_market ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:C.borders.light }}>
+                {upcoming_flash_market.poll_image ?
+                <Image
+                    source={{ uri: upcoming_flash_market.poll_image.url }}
+                    style={{ height:30, width:30, borderRadius:4 }}
+                    resizeMode='cover'
+                />
+                :
+                <Icons.FlameIcon size={24} color={C.text.error} />
+                }
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme='h2'>{upcoming_flash_market.poll_question}</Text>
+                </View>
+                <Button
+                    title='BUY NOW'
+                    type='success'
+                    style={{ padding:10 }}
+                    onPress={() => onFlashSelect(upcoming_flash_market.poll_id)}
+                />
+            </View>
+            :<></>}
             {!hide_liquidity ?
             <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                 <Button transparent style={{ flexGrow:1, flexDirection:'row', padding:10 }} onPress={() => {

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

@@ -1,5 +1,5 @@
 import moment from "moment-mini";
-import type { AthleteProps, EventOrderStatProps, EventProps, MarketProps, TradeProps } from "../../../../types"
+import type { AthleteProps, EventOrderStatProps, EventProps, MarketProps, PollProps, TradeProps } from "../../../../types"
 
 export  { TeamEventMarketHelpers }
 const TeamEventMarketHelpers = {
@@ -20,7 +20,33 @@ const TeamEventMarketHelpers = {
     sortNonPrimaryMarkets: (markets:MarketProps[], event_order_stats:EventOrderStatProps[], latest_trades:TradeProps[]) => {
         let available = latest_trades.find(t => markets.map(m => m.market_id.toString()).includes(t.market_id)) ? true : false
         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()));
-        
+        //How do we also just grab the top level markets from latest trades if there is no volume on it?
+        let sorted_athlete_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.side_type == 'athlete' && markets.map(m => m.market_id.toString()).includes(t.market_id.toString()));
+        //For each market ID - lets create a sorted stat that has 0 in liquidity
+        let unique_traded_markets = [ ...new Set(sorted_athlete_trades.map(t => t.market_id)) ]
+        //Ok we have unique markets!
+        //Lets map through the markets and find the top 3 var_1s of each market!
+        unique_traded_markets.map(m => {
+            //Find the top 3 markets
+            let athlete_trades = sorted_athlete_trades.filter(t => t.market_id == m).sort((a,b) => b.var_1 - a.var_1).slice(0, 3);
+            athlete_trades.map(t => {
+                let exists = sorted_stats.find(ss => ss.side_id == t.side_id && ss.side_type == t.side_type && ss.market_id == ss.market_id);
+                if(exists){ return } //We already have this!
+                //Now lets create a new event order stat
+                let new_order_stat:EventOrderStatProps = {
+                    event_id: t.event_id,
+                    event_type: t.event_type,
+                    market_id: t.market_id,
+                    side_type: t.side_type,
+                    side_id: t.side_id,
+                    market_type: t.market_type,
+                    open_order_amount:0,
+                    open_order_count:0
+                }
+                sorted_stats = sorted_stats.concat(new_order_stat)
+            })
+        });
+
         //Now need to combine event level markets
         let event_level_markets:EventOrderStatProps[] = []
         let non_event_level_markets:EventOrderStatProps[] = []
@@ -69,5 +95,9 @@ const TeamEventMarketHelpers = {
         if(['unnecessary','postponed','cancelled','canceled','complete','completed','closed','suspended'].includes(event.status)){ status = 'closed' }
         if(status == 'active' && !event.is_active){ status = 'inactive' }
         return status
+    },
+    getUpcomingFlash: (flash_markets?:PollProps[]) => {
+        if(!flash_markets){ return undefined }
+        return flash_markets.filter(fm => fm.status == 'active' && moment().isBefore(moment(fm.end_datetime))).sort((a,b) => moment(a.end_datetime).unix() - moment(b.end_datetime).unix() || parseInt(a.poll_id) - parseInt(b.poll_id))[0]
     }
 }