be-components 5.0.8 → 5.0.9

package/src/MarketComponents/api/index.ts

@@ -27,6 +27,23 @@ const MarketComponentApi = {
             return []
         }
     },
+    getOrderById: async(order_id:string):Promise<OrderProps | undefined> => {
+        try {
+            const resp = await axios.get(`${MK_SVC_API}/v1/orders/order/${order_id}`);
+            return resp.data.order
+        } catch (e) {
+            return undefined
+        }
+    },
+    getActiveEvents: async(league_id?:string):Promise<EventProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/events/active?expanded=true&league_id=${league_id}`);
+            return resp.data.events
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
     getLatestTradesByEvents: async(event_type: string, event_ids:string[]):Promise<TradeProps[]> => {
         try {
             if(event_ids.length == 0){ return [] }

package/src/SocialComponents/api/index.ts

@@ -7,7 +7,7 @@ import moment from "moment-mini";
 let SOCIAL_SVC_API = '';
 let EVENT_SVC_API = '';
 let MK_SVC_API = '';
-
+//let AUTH_SVC_API = '';
 export { SocialComponentApi, SocialOrderHelpers, SocialPodcastHelpers }
 
 const SocialComponentApi = {
@@ -16,6 +16,7 @@ const SocialComponentApi = {
         SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
         EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
         MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        //AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
 
     },
     getLeagues: async():Promise<LeagueProps[]> => {

package/src/Ticker/components/TradeText.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { Text } from '../../../src/Components/Themed';
+import type { MarketProps, TradeProps } from '../../../src/types';
+import { useColors } from '../../../src/constants/useColors';
+import { MarketComponentHelpers } from '../../../src/MarketComponents/api';
+
+type TradeTextProps = {
+    trade:TradeProps,
+    width:number,
+    market:MarketProps,
+    animate:boolean
+}
+
+const TradeText = ({ trade, width, market, animate }:TradeTextProps) => {
+    const Colors = useColors();
+    const [ local_trade, setLocalTrade ] = useState(trade);
+    const [ trade_style, setTradeStyle ] = useState({
+        color:Colors.text.h1,
+        theme: 'h2',
+        borderColor:'transparent',
+
+    });
+
+    useEffect(() => {
+        createEffect(trade);
+    },[trade]);
+
+    const createEffect = (new_trade:TradeProps) => {
+        if(!animate){ return }
+        setTradeStyle({ color: Colors.text.action, theme:'h1', borderColor:Colors.text.action })
+        setTimeout(() => {
+            setTradeStyle({ color: Colors.text.h1, theme:'h2', borderColor:'transparent' })
+        }, (500));
+        setTimeout(() => {
+            setTradeStyle({ color: Colors.text.action, theme:'h1', borderColor:Colors.text.action })
+        }, 1000);
+        setTimeout(() => {
+            setTradeStyle({ color: Colors.text.h1, theme:'h2', borderColor:'transparent' });
+            setLocalTrade(new_trade)
+        }, (1500));
+    }
+
+    return (
+        <View key={trade.trade_id.toString()} style={{ width, padding:5, borderWidth:1, borderColor:trade_style.borderColor, borderRadius:4 }}>
+            {market.var_1_required ?
+            <Text theme={trade_style.theme as any} textAlign='center' color={trade_style.color}>{MarketComponentHelpers.getVar1Label(market, local_trade.var_1)}</Text>
+            :
+            <Text theme={trade_style.theme as any} textAlign='center' color={trade_style.color}>{MarketComponentHelpers.getOddsLabel(local_trade.odds)}</Text>
+            }
+        </View>
+    )
+}
+
+export default TradeText

package/src/Ticker/index.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View } from "../../src/Components/Themed"
+import type { EventProps, ExternalPriceProps, LeagueProps, MarketProps, OrderProps, TradeProps } from '../../src/types';
+import { MarketComponentApi } from '../../src/MarketComponents/api';
+import { SocketManager } from 'be-components';
+import { Image } from 'react-native';
+import moment from 'moment-mini';
+import { useColors } from '../../src/constants/useColors';
+import { FINALIZED_STATUSES } from '../../src/Competition/api';
+import TradeText from './components/TradeText';
+
+
+type TickerProps = {
+    league_ids:string[],
+    color_mode?:'light'|'dark',
+    distinct_id?:string,
+    onOrders?:(orders:OrderProps[]) => void
+}
+
+const MIN_SIZE = 350
+const MARGIN = 6
+
+const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) => {
+    const Colors = useColors({ mode: color_mode });
+    const [ embed_size, setEmbedSize ] = useState({ height:0, width:0 });
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ socket_event, setSocketEvent ] = useState<EventProps | undefined>(undefined);
+    const [ socket_trade, setSocketTrade ] = useState<TradeProps[]>([])
+    const [ ticker_data, setTickerData ] = useState<{
+        loading:boolean,
+        markets:MarketProps[],
+        league_ids:string[],
+        events:EventProps[],
+        leagues:LeagueProps[],
+        trades:TradeProps[],
+        animate:boolean,
+        external_prices:ExternalPriceProps[],
+    }>({
+        loading:false,
+        league_ids:league_ids,
+        events: [],
+        markets:[],
+        animate: false,
+        trades: [],
+        leagues: [],
+        external_prices: []
+    });
+    const { trades, leagues, events, animate, markets } = ticker_data;
+    let sorted_events = events.sort((a,b) => {
+        return moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix() || parseInt(a.event_id) - parseInt(b.event_id)
+    });
+    const primary_markets = markets.filter(m => m.primary_market && m.event_type == 'team');
+
+    const calcWidth = (width:number, min_size:number, margin:number) => {
+        //Check how many we can do min size
+        let number_to_render = Math.floor(width / min_size)
+        let width_no_margin = width / number_to_render
+        return width_no_margin - (margin*2)
+    }
+
+    const tick_width = calcWidth(embed_size.width, MIN_SIZE, MARGIN);
+    useEffect(() => {
+        startUp();
+    },[]);
+
+    useEffect(() => {
+        if(!socket_event){ return }
+        let exists = events.find(e => e.event_id == socket_event.event_id)
+        if(!exists){ return }
+        setTickerData({
+            ...ticker_data,
+            events: events.filter(e => e.event_id != socket_event.event_id).concat(socket_event)
+        })
+        setSocketEvent(undefined)
+    },[socket_event])
+
+    useEffect(() => {
+        if(socket_trade.length == 0){ return }
+        let market = markets.find(m => m.market_id == socket_trade[0]?.market_id)
+        if(!market){ return }//
+
+        let nt = socket_trade.find(t => t.side == market.trade_side && t.market_type == 'FOR_MONEY');
+        if(!nt){ return }
+        let matching_trade = trades.find(t => t.event_type == nt.event_type && t.event_id == nt.event_id && t.market_id == nt.market_id && t.side == nt.side && t.side_id == nt.side_id);
+        setTickerData({
+            ...ticker_data,
+            trades: trades.filter(t => t.trade_id != matching_trade?.trade_id).concat(nt),
+            animate: true,
+        })
+        setSocketTrade([]);
+    },[socket_trade])
+
+    const startUp = async() => {
+
+        MarketComponentApi.setEnvironment();
+        getData(league_ids);
+    }
+
+    const getData = async(league_ids:string[]) => {
+        const lgs = await MarketComponentApi.getLeagues();
+        const mks = await MarketComponentApi.getMarkets();
+        let evs = await MarketComponentApi.getActiveEvents();
+        if(league_ids.length > 0){
+            evs = evs.filter(e => league_ids.map(id => id.toString()).includes(e.league_id.toString()));
+        }
+        const lts = await MarketComponentApi.getLatestTradesByEvents('team', evs.map(e => e.event_id));
+        setTickerData({
+            ...ticker_data,
+            events: evs,
+            animate:false,
+            markets: mks,
+            trades: lts.filter(t => t.market_type == 'FOR_MONEY'),
+            leagues: lgs
+        });
+    }
+
+
+    const renderTrades = (data: { item:MarketProps, index:number, event:EventProps, is_live:boolean }) => {
+        const ev_trades = trades.filter(t => t.event_type == 'team' && t.event_id == data.event.event_id && t.market_id == data.item.market_id);
+        const trade_side_trade = ev_trades.find(t => t.side == data.item.trade_side);
+        if(!trade_side_trade){ return <></> }
+        return (
+            <TradeText
+                market={data.item}
+                trade={trade_side_trade}
+                width={tick_width / 2.5 / 3}
+                animate={animate}
+            />
+        )
+    }
+
+    const renderEvents = (data: { item:EventProps, index:number }) => {
+        const league = leagues.find(l => l.league_id == data.item.league_id);
+        let sup_markets = data.item.supported_markets ?? []
+        const supported_markets = primary_markets.filter(pm => sup_markets.map(sm => sm.market_id.toString()).includes(pm.market_id.toString())).sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id));
+        const is_live = moment().isAfter(moment(data.item.scheduled_datetime)) ? true : false
+        const is_closed = FINALIZED_STATUSES.includes(data.item.status) ? true : false
+        return (
+            <View style={{ width:tick_width, margin:5, padding:8, borderBottomWidth:1, borderColor:is_closed?Colors.text.error:is_live?Colors.text.success:Colors.borders.light }}>
+                <View key={data.item.event_id.toString()} style={{ flexDirection:'row', alignItems:'center' }}>
+                    <Image
+                        source={{ uri: league?.league_image }}
+                        style={{ height:30, width:30 }}
+                        resizeMode='cover'
+                    />
+                    <View style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                        <Text theme='h2'>{data.item.event_title}</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>{data.item.time_detail == 'scheduled'?`${moment(data.item.scheduled_datetime).format('MMM DD hh:mm a')}`:data.item.time_detail}</Text>
+                    </View>
+                    <View style={{ flexDirection:'row' }}>
+                        {supported_markets.map((sm, i) => {
+                            return renderTrades({ item: sm, index:i, event:data.item, is_live })
+                        })}
+                    </View>
+                </View>
+                {data.item.last_play ?
+                <Text theme='description' style={{ marginTop:3 }}>{data.item.last_play}</Text>
+                :<></>}
+            </View>
+            
+        )
+    }
+
+    return (
+        <View style={{ flex:1, flexDirection:'row' }} >
+            <View style={{ flex:1 }} onLayout={(ev) => {
+                const { width, height } = ev.nativeEvent.layout;
+                setEmbedSize({ width, height });
+            }}>
+                <View style={{ flexDirection:'row', flexWrap:'wrap', overflow:'scroll' }}>
+                    {sorted_events.map((e,i) => {
+                        return renderEvents({ item:e, index:i })
+                    })}
+                </View>
+            </View>
+            {distinct_id ?
+            <SocketManager
+                distinct_id={distinct_id}
+                subscribed_events={['V1_UPDATE_LATEST_TRADE','V1_UPDATE_EVENT', 'V1_UPDATE_ORDERS']}
+                onConnect={() => {
+                    if(needs_reload){ getData(league_ids) }
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                onSocketEvent={(ev) => {
+                    switch(ev.type){
+                        case 'V1_UPDATE_LATEST_TRADE':
+                            return setSocketTrade(ev.data)
+                        case 'V1_UPDATE_EVENT':
+                            return setSocketEvent(ev.data)
+                        case 'V1_UPDATE_ORDERS':
+                            if(!onOrders){ return }
+                            return onOrders(ev.data)
+                        default:return
+                    }
+                }}
+            />
+            :<></>}
+        </View>
+    )
+}
+
+export default Ticker

package/src/constants/useColors.tsx

@@ -1,9 +1,11 @@
 import { useColorScheme } from "react-native"
 import Colors from "./colors"
 
-
-export const useColors = () => {
-    let color_scheme = useColorScheme()
+type UseColorProps = {
+    mode?:'dark'|'light'
+}
+export const useColors = (props?:UseColorProps) => {
+    let color_scheme = props?.mode ?? useColorScheme()
     let absolutes = Colors
     
     let light_theme = {

package/src/index.tsx

@@ -39,12 +39,17 @@ import SeasonCard from './Engage/components/SeasonCard';
 import NotificationModule from './Notifications';
 import { useNotifications } from './Notifications/useNotifications';
 import ManageBracketCompetitionForm from './Bracket/components/ManageBracketCompetitionForm';
+import Campaign from './Campaign';
+import Ticker from './Ticker';
+
 export {
   Authenticator,
   Observer,
   BEEventApi,
   BELinkApi,
+  Ticker,
   LocationTracker,
+  Campaign,
   ManageBracketCompetitionForm,
   NotificationModule,
   useNotifications,

package/src/types.d.ts

@@ -502,6 +502,35 @@ export interface PlayerFollowerStatsProps {
 
 
 
+export interface CampaignProps {
+    campaign_id:string,
+    campaign_name:string,
+    description?:string,
+    status:'active'|'inactive',
+    sponsors?:bigint[],
+    prize_description?:string,
+    raffle_options?:string[],
+    raffle_type?:string,
+    ads?:{
+        ad_type:string,
+        url:string
+    }[],
+    league_ids?:string[],
+    campaign_image?:any,
+    admin_id:string,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+export interface CampaignParticipantProps {
+    campaign_participant_id:string,
+    campaign_id:string,
+    player_id:string,
+    status:'invited'|'active'|'inactive',
+    payload:any,
+    create_datetime:any,
+    last_update_datetime:any
+}
 
 
 //POLL TYPES
@@ -1977,6 +2006,7 @@ export interface OrderProps {
     side_type: 'athlete' | 'team' | 'side';
     reversed?:boolean,
     draft_liquidity?:number,
+    campaign_id?:string,
     fund_id?:string,
     reference_order_id?:string,
     be_type: 'market' | 'prop' | 'ind'; //The old be-type of order so we can compare to historical orders
@@ -2033,6 +2063,36 @@ export interface OrderProps {
     no_bet_reason?:string
 }
 
+export interface OverallOrderAnalyticsProps {
+    player_id:string,
+    fulfilled_positions:number,
+    original_stake:number,
+    cash_rcvd:number,
+    winnings:number,
+    net_winnings:number,
+    wins:number,
+    losses:number,
+    draws:number
+}
+
+export interface OrderAnalyticsProps {
+    day:string,
+    player_id:string,
+    league_id:string,
+    market_id:string,
+    side:string,
+    side_id:string,
+    side_type:string,
+    fulfilled_positions:number,
+    original_stake:number,
+    cash_rcvd:number,
+    winnings:number,
+    net_winnings:number,
+    wins:number,
+    losses:number,
+    draws:number
+}
+
 export interface HedgeProps {
     hedge_id:string,
     hedged_amt:number,