be-components 3.2.5 → 3.2.7

package/lib/typescript/src/MarketComponents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/MarketComponents/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;qBA4B6rB,CAAC;mBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAN3sB,CAAJ;qBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAM0lB,CAAC;mBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAjmB,CAAC;qBAAkB,CAAC;;;;;;;;;;;;;AAdlD,wBAcC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/MarketComponents/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;qBA8BolB,CAAC;mBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAX/lB,CAAC;qBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAWye,CAAC;mBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAJlhB,CAAH;qBAAkB,CAAC;;;;;;;;;;;;;AAXpB,wBAeC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "3.2.5",
+  "version": "3.2.7",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Components/Button.tsx

@@ -38,7 +38,7 @@ const Button = ({ title, style, title_weight, disabled, loading, title_size, pad
 
             <TouchableOpacity 
                 disabled={disabled}
-                style={{ ...getBorderRadiusOverride(), flexDirection:'row', alignItems:'center', justifyContent:'center', flex:1, padding:padding??8, backgroundColor:backgroundColor??Colors.brand.electric, borderWidth:borderWidth??0, borderColor:borderColor, ...input_style }}
+                style={{ ...getBorderRadiusOverride(), flexDirection:'row', alignItems:'center', justifyContent:'center',  padding:padding??8, backgroundColor:backgroundColor??Colors.brand.electric, borderWidth:borderWidth??0, borderColor:borderColor, ...input_style }}
                 onPress={(ev) => onPress(ev)}>
                 {avatar_url ?
                 <Image 
@@ -47,7 +47,7 @@ const Button = ({ title, style, title_weight, disabled, loading, title_size, pad
                     resizeMode='cover'
                 />
                 :<></>}
-                <View style={{ marginLeft:5, marginRight:5, flexGrow:1 }}>
+                <View style={{ marginLeft:5, marginRight:5 }}>
                     <Text size={title_size??14} weight={title_weight ?? 'bold'} textAlign="center" color={title_color??Colors.brand.midnight}>{title}</Text>
                     {loading ?
                     <View style={{ position:'absolute', top:0, bottom:0, left:0, right:0 }}>

package/src/Components/Toggle.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react"
+import { FlatList, StyleSheet, TouchableOpacity, View } from "react-native"
+import Text from "./Text"
+import Colors from "../constants/colors"
+
+
+type ToggleProps = {
+    options: {key:string, label:string}[],
+    background_color?:string,
+    toggle_padding?:number,
+    border_radius?:number,
+    active_toggle_color?:string,
+    inactive_toggle_color?:string,
+    inactive_title_color?:string,
+    active_title_color?:string,
+    selected_option?: string,
+    onSelectOption:(key:string) => void
+}
+const Toggle = ({ options, background_color, active_title_color, toggle_padding, border_radius, inactive_title_color, inactive_toggle_color ,active_toggle_color, selected_option, onSelectOption }:ToggleProps) => {
+    const [ toggle_width, setToggleWidth ] = useState(300);
+    const MIN_OPTION_WIDTH = 110
+    let option_width = toggle_width - 4
+    if(options.length > 0){
+        option_width = toggle_width / options.length
+        if(option_width < MIN_OPTION_WIDTH){ option_width = MIN_OPTION_WIDTH }
+    }
+
+    const renderOptions = (data:{item:{ key:string, label:string }, index:number}) => {
+        const selected = selected_option == data.item.key ? true : false
+        const last = data.index == options.length -1 ? true: false
+        const first = data.index == 0 ? true : false
+        return (
+            <TouchableOpacity 
+                style={{ 
+                    width: option_width, 
+                    padding:toggle_padding ?? 15, 
+                    backgroundColor:selected?active_toggle_color ?? Colors.brand.midnight : inactive_toggle_color ?? Colors.shades.white,
+                    borderTopLeftRadius: first ? border_radius ?? 8 : 0,
+                    borderBottomLeftRadius: first? border_radius ?? 8 : 0,
+                    borderTopRightRadius: last ? border_radius ?? 8 : 0,
+                    borderBottomRightRadius: last ? border_radius ?? 8 : 0,
+                    ...style.float
+                    
+                }}
+                onPress={() => onSelectOption(data.item.key)}
+            >
+                <Text 
+                    textAlign='center' 
+                    size={14} 
+                    color={selected?active_title_color??Colors.shades.white: inactive_title_color ?? Colors.brand.midnight} 
+                    weight={selected?'bold':'regular'}>{data.item.label}</Text>
+            </TouchableOpacity>
+        )
+    }
+    
+    return (
+        <View style={{ borderRadius:border_radius ?? 8, backgroundColor:background_color ?? Colors.shades.white, padding:2 }} onLayout={(ev) => {
+            const { width } = ev.nativeEvent.layout;
+            setToggleWidth(width)
+        }}>
+            <FlatList
+                key='toggle'
+                data={options}
+                showsHorizontalScrollIndicator={false}
+                horizontal
+                renderItem={renderOptions}
+                keyExtractor={(item) => item.key.toString()}
+            />
+        </View>
+    )
+}
+
+const style = StyleSheet.create({
+    float: { shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1 }
+
+})
+
+export default Toggle

package/src/MarketComponents/api/index.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { APIOverrides } from "../../ApiOverrides"
-import type { AthleteProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, LeagueProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, PodcastProps, TeamProps, TournamentProps } from "../../types"
+import type { AthleteProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, ExternalPriceProps, LeagueProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, PodcastProps, TeamProps, TournamentProps, TradeProps } from "../../types"
 import moment from 'moment-mini';
 
 let EVENT_SVC_API = ''
@@ -27,7 +27,7 @@ const MarketComponentApi = {
             return []
         }
     },
-    getLatestTradesByEvents: async(event_type: string, event_ids:string[]) => {
+    getLatestTradesByEvents: async(event_type: string, event_ids:string[]):Promise<TradeProps[]> => {
         try {
             if(event_ids.length == 0){ return [] }
             const resp = await axios.post(`${MK_SVC_API}/v1/trades/event/latest/bulk/get`, { event_type, event_ids })
@@ -37,6 +37,25 @@ const MarketComponentApi = {
             return []
         }
     },
+    getExternalPrices: async(contest_type:string, contest_id:string, market_id:string, side?:string, participant_id?:string, participant_type?:string, external_name?:string):Promise<ExternalPriceProps[]> => {
+        try {
+            let url = `${EVENT_SVC_API}/v1/prices/latest/${contest_id}/${contest_type}?market_id=${market_id}`
+            if(side){
+                url += `&side=${side}`
+            }
+            if(participant_type && participant_id){
+                url += `&participant_id=${participant_id}`
+            }
+            if(external_name){
+                url += `&external_name=${external_name}`
+            }
+            const resp = await axios.get(url);
+            return resp.data.prices
+
+        } catch (e) {
+            return []
+        }
+    },
     getMyAction:async():Promise<OrderProps[]> => {
         try {
             const resp = await axios.get(`${MK_SVC_API}/v1/orders/action/me`);
@@ -165,7 +184,6 @@ const MarketComponentApi = {
     },
     getContestStatsByEvent: async(contest_id:string):Promise<ContestStatProps[]> => {
         try {
-            console.log(EVENT_SVC_API)
             const resp = await axios.get(`${EVENT_SVC_API}/v1/events/stats/event/${contest_id}`)
             return resp.data.contest_stats
         } catch (e) {
@@ -377,5 +395,45 @@ const MarketComponentHelpers = {
             }
         })
         return new_title
+    },
+    getExternalPriceDetails: (contest_type:string, market?:MarketProps, event?:EventProps, tournament?:TournamentProps, match?:MatchProps) => {
+        let fail_response = { contest_title: '', o_side_label:'', trade_side_label: '' }
+        if(!market){ return fail_response }
+        fail_response.o_side_label = market.side_options.find(so => so.side != market.trade_side)?.side.toUpperCase() ?? '',
+        fail_response.trade_side_label = market.trade_side.toUpperCase()
+
+        let contest_title = ''
+        let o_side_label = fail_response.o_side_label
+        let trade_side_label = fail_response.trade_side_label
+
+        market.side_options.map(so => {
+            if(so.id_source == 'side'){
+                if(so.side == market.trade_side){ trade_side_label = so.side.toUpperCase() }
+                else { o_side_label = so.side.toUpperCase() }
+                return
+            }
+            switch(contest_type){
+                case 'team':
+                    if(!event){ break }
+                    contest_title = event.event_title
+                    if(so.id_source == 'team'){
+                        if(so.side == market.trade_side){ trade_side_label = event[so.side as keyof EventProps]?.abbr }
+                        else { o_side_label = event[so.side as keyof EventProps]?.abbr }
+                        break
+                    }
+                    break  
+                case 'tournament':
+                    if(!tournament){ break }
+                    contest_title = tournament.tournament_name
+                    break
+                case 'match':
+                    if(!match){ return }
+                    contest_title = match.match_title
+                    break
+                default:
+            }
+        })
+        return { contest_title, o_side_label, trade_side_label }
+
     }
 }

package/src/MarketComponents/components/ExternalPriceComparison.tsx

@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, FlatList, View } from 'react-native';
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { AthleteProps, EventProps, ExternalPriceProps, MarketProps, MatchProps, TeamProps, TournamentProps, TradeProps } from '../../types';
+import { MarketComponentApi, MarketComponentHelpers } from '../api';
+import Toggle from '../../Components/Toggle';
+import moment from 'moment-mini';
+import { view_styles } from '../../constants/styles';
+
+type ExternalPriceComparisonProps = {
+    price_key:string,
+    contest_id:string,
+    contest_type:string,
+    market_id:string,
+    maxHeight?:number,
+    participant_type?:string,
+    external_name?:string,
+    participant_id?:string,
+    init_side?:string,
+    onClose:() => void
+}
+
+
+const ExternalPriceComparison = ({ price_key, contest_id, contest_type, maxHeight, market_id, participant_id, participant_type, external_name, init_side, onClose }:ExternalPriceComparisonProps) => {
+    const [ module_data, setModuleData ] = useState<{
+        loading:boolean,
+        market?:MarketProps,
+        selected_side:string,
+        athlete?:AthleteProps,
+        team?:TeamProps,
+        trades:TradeProps[],
+        event?:EventProps,
+        tournament?:TournamentProps,
+        match?:MatchProps,
+        external_prices:ExternalPriceProps[]
+    }>({
+        loading:false,
+        selected_side: '',
+        trades:[],
+        external_prices: []
+    });
+    const { loading, event, athlete, team, market, selected_side, tournament, match, trades, external_prices } = module_data;
+
+    useEffect(() => {
+        MarketComponentApi.setEnvironment();
+        if(!price_key || !contest_id){ return }
+        getData()
+    },[price_key]);
+
+    const getData = async() => {
+        setModuleData({ ...module_data, loading:true });
+        const prices = await MarketComponentApi.getExternalPrices(contest_type, contest_id, market_id, undefined, participant_id, participant_type, external_name);
+        const ts = await MarketComponentApi.getLatestTradesByEvents(contest_type, [contest_id]);
+        let market_ts = ts.filter(lt => lt.market_id == market_id && lt.market_type == 'FOR_MONEY');
+        let a:AthleteProps | undefined = undefined
+        let tm:TeamProps | undefined = undefined
+        if(participant_id){
+            market_ts = market_ts.filter(lt => lt.side_id == participant_id);
+            if(participant_type == 'athlete'){
+                let as = await MarketComponentApi.getAthletesByIds([participant_id])
+                a = as[0]
+            }
+            if(participant_type == 'team'){
+                let tms = await MarketComponentApi.getTeamsByIds([participant_id])
+                tm = tms[0]
+            }
+        }
+        const markets = await MarketComponentApi.getMarkets();
+        const mk = markets.find(m => m.market_id == market_id)
+        
+        let e:EventProps | undefined = undefined
+        let t:TournamentProps | undefined = undefined
+        let m:MatchProps | undefined = undefined
+
+        if(contest_type == 'team'){ 
+            let es = await MarketComponentApi.getEventsByEventIds([contest_id]) 
+            e = es[0]
+        }
+        if(contest_type == 'tournament'){
+            let ts = await MarketComponentApi.getTournamentsByTournamentIds([contest_id])
+            t = ts[0]
+        }
+        if(contest_type == 'match'){
+            let ms = await MarketComponentApi.getMatchesByMatchIds([contest_id])
+            m = ms[0]
+        }
+
+
+
+        setModuleData({
+            ...module_data,
+            loading: false,
+            athlete: a,
+            team: tm,
+            external_prices: prices,
+            event: e,
+            tournament:t,
+            trades: market_ts,
+            match: m,
+            market:mk,
+            selected_side: init_side ?? mk?.trade_side ?? ''
+        })
+    }
+
+    const renderPrices = (data:{item:ExternalPriceProps, index:number}) => {
+        if(!market){ return <></> }
+        return (
+            <View style={{ ...view_styles.body_row }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header_2'>{data.item.external_name}</Text>
+                    <Text style={{ marginTop:3 }} size={10} color={Colors.brand.slate} weight='regular'>{(data.item.vig_pct*100).toFixed(2)}% Vig</Text>
+                </View>
+                <View style={{ alignItems:'flex-end' }}>
+                    <Text theme='header_2'>{market.var_1_required ? `${MarketComponentHelpers.getVar1Label(market, data.item.var_1)} `:''}{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    <Text style={{ marginTop:3 }} size={10} color={Colors.brand.slate} weight='regular'>As of: {moment(data.item.last_update_datetime).fromNow()}</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const { o_side_label, trade_side_label } = MarketComponentHelpers.getExternalPriceDetails(contest_type, market, event, tournament, match)
+    let visible_prices = external_prices.filter(p => p.side == selected_side).sort((a,b) => a.external_name.localeCompare(b.external_name))
+    const consensus_price = visible_prices.find(p => p.external_name.toLowerCase() == 'consensus');
+    visible_prices = visible_prices.filter(p => p.external_name.toLowerCase() != 'consensus');
+
+    const latest_trade = trades.find(t => t.side == selected_side)
+    return (
+        <View style={{ ...view_styles.section, maxHeight }}>
+            <View style={{ ...view_styles.section_header }}>
+                <View style={{ flexGrow:1 }}>
+                    <Text theme='header'>External Price Comparison</Text>
+                    {market ?
+                    <Text theme='body' style={{ marginTop:3 }}>{athlete?`${athlete.abbr_name} `:team?`${team.abbr} `:''}{market.type == 'Stat' ? market.stat_label : market.type}</Text>
+                    :<></>}
+                </View>
+                <View style={{ flexDirection:'row' }}>
+                    <Button
+                        title='X'
+                        padding={10}
+                        backgroundColor={Colors.shades.shade100}
+                        onPress={() => onClose()}
+                    />
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                {loading ?
+                <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:20, alignSelf:'center' }}/>
+                :<></>}
+                {market ?
+                <Toggle
+                    background_color={Colors.shades.shade100}
+                    options={[{ key: market.side_options.find(so => so.side != market.trade_side)?.side ?? '', label: o_side_label }, { key: market.trade_side, label: trade_side_label }]}
+                    onSelectOption={(option) => setModuleData({ ...module_data, selected_side: option })}
+                    selected_option={selected_side}
+                />
+                :<></>}
+                
+                <View nativeID='header_trades' style={{ paddingTop:20, borderBottomWidth:1, borderColor:Colors.shades.shade600, paddingBottom:10 }}>
+                    {latest_trade && market ?
+                    <View style={{ ...view_styles.body_row }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header'>BettorEdge</Text>
+                            <Text style={{ marginTop:3 }} size={10} color={Colors.brand.slate} weight='regular'>{0}% Vig</Text>
+                        </View>
+                        <View style={{ alignItems:'flex-end' }}>
+                            <Text theme='header_2'>{market.var_1_required ? `${MarketComponentHelpers.getVar1Label(market, latest_trade.var_1)} `:''}{MarketComponentHelpers.getOddsLabel(latest_trade.odds)}</Text>
+                            <Text style={{ marginTop:3 }} size={10} color={Colors.brand.slate} weight='regular'>Traded: {moment(latest_trade.last_update_datetime).fromNow()}</Text>
+                        </View>
+                    </View>
+                    :<></>}
+                    {consensus_price && market ?
+                    <View style={{ ...view_styles.body_row }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header_2'>Consensus</Text>
+                            <Text style={{ marginTop:3 }} size={10} color={Colors.brand.slate} weight='regular'>{(consensus_price.vig_pct*100).toFixed(2)}% Vig</Text>
+                        </View>
+                        <View style={{ alignItems:'flex-end' }}>
+                            <Text theme='header_2'>{market.var_1_required ? `${MarketComponentHelpers.getVar1Label(market, consensus_price.var_1)} `:''}{MarketComponentHelpers.getOddsLabel(consensus_price.odds)}</Text>
+                            <Text style={{ marginTop:3 }} size={10} color={Colors.brand.slate} weight='regular'>As of: {moment(consensus_price.last_update_datetime).fromNow()}</Text>
+                        </View>
+                    </View>
+                    :<></>}
+                </View>
+                <View style={{ marginTop:10 }}>
+                    <FlatList
+                        data={visible_prices}
+                        renderItem={renderPrices}
+                        keyExtractor={(item) => item.external_price_id.toString()}
+                    />
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='CLOSE'
+                    backgroundColor={Colors.shades.white}
+                    style={{ flex:1 }}
+                    borderWidth={1}
+                    borderRadius={4}
+                    padding={12}
+                    onPress={() => onClose()}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                />
+            </View>
+
+        </View>
+    )
+}
+
+export default ExternalPriceComparison

package/src/MarketComponents/index.tsx

@@ -11,6 +11,7 @@ import OrderBookChart from './components/OrderBookChart';
 import BestAvailableOrderCard from './components/BestAvailableOrderCard';
 import OrderBookCard from './components/OrderBook';
 import MyOrderList from './components/MyOrderList';
+import ExternalPriceComparison from './components/ExternalPriceComparison';
 
 export default {
     TeamEventMarket,
@@ -22,6 +23,7 @@ export default {
     OrderBookChart,
     AthleteTournamentMarket,
     TeamEventList,
+    ExternalPriceComparison,
     TournamentMarket,
     MatchMarket,
     TournamentList,