be-components 3.0.3 → 3.0.5

package/src/MarketComponents/components/OrderBook.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { FlatList, TouchableOpacity, View } from "react-native"
+import type { MarketProps, OrderProps } from '../../types';
+import OrderGradeBar from './OrderGradeBar';
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { MarketComponentHelpers } from '../api';
+import moment from 'moment-mini';
+
+type OrderBookCardProps = {
+    player_id?:string,
+    orders: OrderProps[],
+    market: MarketProps,
+    show_grades?:boolean,
+    show_orders?:boolean,
+    onBuy: (order:OrderProps) => void
+}
+
+const OrderBookCard = ({ player_id, orders, market, show_orders, show_grades, onBuy }:OrderBookCardProps) => {    
+    const trade_side_orders = orders.filter(o => o.side === market.trade_side).sort((a,b) => a.probability - b.probability).splice(0, 9)
+    const o_side_orders = orders.filter(o => o.side !== market.trade_side).sort((a,b) => a.probability - b.probability).splice(0,9)
+
+    const handleOrderPress = async(order:OrderProps) => {
+        return onBuy({
+            ...order,
+            buy_sell_ind: 'buy',
+            h2h:false,
+            h2h_id:undefined,
+            open_amt: 10,
+            fund_id:undefined,
+            expire_datetime: moment().add(1, 'minute')
+        })
+    }
+
+    const renderTradeSide = (data: {item: OrderProps, index:number}) => {
+        const cl = data.item.market_type === 'FOR_MONEY' ? '$' : 'E'
+        const mine = data.item.player_id == player_id ? true : false
+        return (
+            <TouchableOpacity style={{ minHeight:40, backgroundColor:show_orders||mine?Colors.shades.shade600:Colors.shades.black_faded, margin:4, marginLeft:8, borderRadius:4 }} onPress={() => handleOrderPress(data.item)}>
+                {show_orders || mine ?
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <OrderGradeBar mask={show_grades?false:true} grade={data.item.grade} view_type='book' />
+                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1/2}}>{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1/2}}>{cl}{data.item.open_amt.toFixed(2)}</Text>
+                </View>
+                :
+                <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <Icons.LockClosedIcon color={Colors.incentive.gold} size={14}/>
+                </View>
+                }
+                {mine ?
+                <View style={{ position:'absolute', right:0, bottom:0, top:0, width:5, backgroundColor:Colors.brand.electric, borderRadius:4 }} />
+                :<></>}
+            </TouchableOpacity>
+        )
+    }
+    const renderOSide = (data: {item: OrderProps, index:number}) => {
+        const cl = data.item.market_type === 'FOR_MONEY' ? '$' : 'E'
+        const mine = data.item.player_id == player_id ? true : false
+        return (
+            <TouchableOpacity style={{ minHeight:40, backgroundColor:show_orders||mine?Colors.shades.shade600:Colors.shades.black_faded, margin:4, marginLeft:8, borderRadius:4 }} onPress={() => handleOrderPress(data.item)}>
+                {show_orders || mine ?
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1}}>{cl}{data.item.open_amt.toFixed(2)}</Text>
+                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1}}>{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    <OrderGradeBar mask={show_grades?false:true} grade={data.item.grade} view_type='book' />
+                </View>
+                :
+                <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <Icons.LockClosedIcon color={Colors.incentive.gold} size={14}/>
+                </View>
+                }
+                {mine ?
+                <View style={{ position:'absolute', left:0, bottom:0, top:0, width:5, backgroundColor:Colors.brand.electric, borderRadius:4 }} />
+                :<></>}
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View>
+            <View style={{ flex:1, flexDirection:'row' }}>
+                <View nativeID="other_side_orders" style={{ flex:1 }}>
+                    <FlatList data={o_side_orders} renderItem={renderOSide} keyExtractor={(item) => item.order_id.toString()}/>
+                </View>
+                <View nativeID="trade_side_orders" style={{ flex:1 }}>
+                    <FlatList data={trade_side_orders} renderItem={renderTradeSide} keyExtractor={(item) => item.order_id.toString()}/>
+                </View>
+            </View>
+            <View nativeID='legend' style={{ flexDirection:'row', alignItems:'center', justifyContent:'center', padding:10 }}>
+                <View style={{ height:10, width:10, borderRadius:4, marginRight:5, backgroundColor:Colors.brand.electric }} />
+                <Text size={12} color={Colors.shades.black} weight='regular'>Your order</Text>
+            </View>
+        </View>
+        
+    )
+}
+
+export default OrderBookCard

package/src/MarketComponents/components/OrderBookChart.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, FlatList, TouchableOpacity, View } from "react-native"
+import type { MarketProps, OrderBookProps } from '../../types';
+import { Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { MarketComponentHelpers } from '../api';
+
+type OrderBookChartProps = {
+    order_book:OrderBookProps,
+    onSelectVar1: (var_1:number) => void,
+    active_var_1: number,
+    market:MarketProps,
+    market_type: 'FOR_MONEY'|'FREE',
+    side_type?:string
+    side_id?:string
+    away_label?:string,
+    home_label?:string
+}
+
+const OrderBookChart = ({ order_book, market, active_var_1, onSelectVar1, away_label, home_label, side_id }:OrderBookChartProps) => {
+    const [ loading ] = useState(false)
+    const [ expanded, setExpanded ] = useState(false);
+    const [ width, setWidth ] = useState(300)
+
+
+    const renderVariableBar = (data: { item: number, index:number }) => {
+        const isActive = data.item == active_var_1 ? true :  false
+        let trade_side_stat = order_book.book_stats.find(s => s.side === market.trade_side && s.var_1 == data.item)
+        if(side_id){ trade_side_stat =  order_book.book_stats.find(s => s.side === market.trade_side && s.var_1 == data.item && s.side_id == side_id)}
+        let o_side_stat = order_book.book_stats.find(s => { 
+            if(s.side !== market.trade_side && market.type === 'Spread' && s.var_1 * -1 == data.item){ return s }
+            if(s.side !== market.trade_side && market.type !== 'Spread' && s.var_1 == data.item){ return s }
+            return s
+        })
+        if(side_id){
+            o_side_stat = order_book.book_stats.find(s => { 
+                if(s.side_id == side_id && s.side !== market.trade_side && market.type === 'Spread' && s.var_1 * -1 == data.item){ return s }
+                if(s.side_id == side_id && s.side !== market.trade_side && market.type !== 'Spread' && s.var_1 == data.item){ return s }
+                return s
+            })
+        }
+        return (
+            <TouchableOpacity style={{flex:1, flexDirection:'row', alignItems:'center', marginBottom:5, borderRadius:8, backgroundColor:isActive?Colors.shades.shade600:Colors.shades.shade100 }} onPress={() => onSelectVar1(data.item)}>
+                {market.var_1_required ?
+                    <Text size={12} textAlign='left' style={{padding:8, flex:1/12}} color={Colors.shades.black}>{market.type === 'Spread'? data.item * -1: data.item}</Text>
+                :
+                <></>
+                }
+                <View style={{flex:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between'}} onLayout={(event) => {
+                    //if(Math.abs(event.nativeEvent.layout.width - width) < 5){ return }
+                    return setWidth(event.nativeEvent.layout.width)
+                }}>
+                    {o_side_stat ?
+                    <View style={{ width: width * (1 - o_side_stat.probability), height:25,  backgroundColor:Colors.chart.cyan, borderRightWidth:1, borderRightColor:Colors.brand.cyan,  borderTopLeftRadius:4, borderBottomLeftRadius:4, flexGrow:0 }}>
+                        {100 > -800 ?
+                        <View style={{ position: 'absolute', paddingRight:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-end' }}>
+                            <Text size={12} textAlign='right' color={Colors.shades.white}>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(o_side_stat.probability))}</Text>
+                        </View>
+                        :<Text size={12} textAlign='right' style={{padding:8}} color={Colors.shades.white}>-</Text> }
+                    </View>
+                    :
+                    <View style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
+                        <Text size={12} textAlign='right' style={{padding:8}} color={Colors.shades.black}>No Orders</Text>
+                    </View>
+                    }
+                    {trade_side_stat ?
+                    <View style={{  width: width * (1 -trade_side_stat.probability), height:25, backgroundColor:Colors.chart.electric, borderLeftWidth:1, borderLeftColor:Colors.brand.electric, borderTopRightRadius:4, borderBottomRightRadius:4, flexGrow:0 }}>
+                        {100 > -800 ?
+                        <View style={{ position: 'absolute', paddingLeft:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-start' }}>
+                            <Text size={12} textAlign='right' color={Colors.shades.white}>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(trade_side_stat.probability))}</Text>
+                        </View>
+                        :<Text size={12} textAlign='right' style={{padding:8}} color={Colors.shades.white}>-</Text>}
+                    </View>
+                    :
+                    <View style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
+                        <Text size={12} textAlign='left' style={{padding:8}} color={Colors.shades.black}>No Orders</Text>
+                    </View>
+                    }
+                </View>
+                {market.var_1_required ?
+                    <Text size={12} textAlign='right' style={{padding:8, flex:1/12}} color={Colors.shades.black}>{data.item}</Text>
+                :
+                    <></>
+                }
+            </TouchableOpacity>
+        )
+    }
+    if(!market || loading || !order_book){ return (
+        <View style={{padding:10}}>
+            <ActivityIndicator size='small' color={Colors.brand.midnight} />
+        </View>
+    ) }
+    
+    let unique_var_1 = [ ...new Set(order_book.book_stats.map(s => {
+        if(market.type != 'Spread'){ return s.var_1 }
+        if(s.side !== market.trade_side){ return s.var_1 * -1 }
+        return s.var_1
+    })) ]
+
+    let var_1_options = unique_var_1
+
+    if(side_id){
+        unique_var_1 = [ ...new Set(order_book.book_stats.filter(s => s.side_id == side_id).map(s => {
+        if(market.type !== 'Spread'){ return s.var_1 }
+        if(s.side !== market.trade_side){ return s.var_1 * -1 }
+        return s.var_1
+    })) ]
+    }
+
+    if(!expanded && active_var_1){
+        var_1_options = [active_var_1]
+    }
+
+    return (
+        <View style={{flex:1, margin:20, marginTop:5 }}>
+            {unique_var_1.length > 0 ?
+            <>
+            <View style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', marginBottom:8}}>
+                <Text size={14} weight='semibold' color={Colors.shades.black} textAlign='left'>{away_label?.toUpperCase()??'TBD'}</Text>
+                <Text size={14} weight='semibold' color={Colors.shades.black} textAlign='center'>{market.stat_label ?? market.type?.toUpperCase()??'TBD'}</Text>
+                <Text size={14} weight='semibold' color={Colors.shades.black} textAlign='right'>{home_label?.toUpperCase()??'TBD'}</Text>
+            </View>
+            <FlatList data={var_1_options.sort((a,b) => a - b)} renderItem={renderVariableBar} keyExtractor={(item) => item.toString()} extraData={width} />
+            <TouchableOpacity style={{ padding:10 }} onPress={() => setExpanded(!expanded)}>
+                {!expanded ?
+                <Text size={12} color={Colors.brand.electric} weight='semibold' textAlign='center'>{unique_var_1.length} Other {market.type}s Available</Text>
+                :
+                <Text size={12} color={Colors.utility.error} weight='semibold' textAlign='center'>Hide Alternatives</Text>
+                }
+            </TouchableOpacity>
+            </>
+            :
+            <Text size={12} textAlign='center' style={{padding:8}} color={Colors.shades.black}>No Active Orders</Text> 
+            }
+        </View>
+    )
+}
+
+export default OrderBookChart

package/src/MarketComponents/components/OrderGradeBar.tsx

@@ -34,7 +34,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
     //Get the player's role
     let premium = true
     if(mask){ premium = false }
-
+    console.log(premium)
 
     /**
      * Renders the grade boxes
@@ -71,6 +71,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
         const success = grade > 98 ? true : false
         const locked = !premium ? true : false
 
+        console.log(locked)
         //Render the box
         return (
             <View style={{ margin:1, height:4, width:15, borderRadius:4,  backgroundColor:locked? data.item.locked_color : filled ? success ? data.item.success_color : data.item.fail_color : Colors.shades.shade100 }} />

package/src/MarketComponents/index.tsx

@@ -6,14 +6,24 @@ import TeamEventList from './components/TeamEventList';
 import TournamentMarket from './components/TournamentMarket';
 import MatchMarket from './components/MatchMarket';
 import TournamentList from './components/TournamentList';
+import TeamTournamentMarket from './components/TeamTournamentMarket';
+import OrderBookChart from './components/OrderBookChart';
+import BestAvailableOrderCard from './components/BestAvailableOrderCard';
+import OrderBookCard from './components/OrderBook';
+import MyOrderList from './components/MyOrderList';
 
 export default {
     TeamEventMarket,
+    TeamTournamentMarket,
     AthleteMarket,
+    BestAvailableOrderCard,
     EventMarket,
+    OrderBookCard,
+    OrderBookChart,
     AthleteTournamentMarket,
     TeamEventList,
     TournamentMarket,
     MatchMarket,
-    TournamentList
+    TournamentList,
+    MyOrderList
 }

package/src/Socket/index.tsx

@@ -30,7 +30,6 @@ const SocketManager = ({ access_token, distinct_id, onSocketEvent, subscribed_ev
         if(visible){ 
            if(!ws || ws.readyState != 1) { return connectSocket(access_token, distinct_id) }
            if(access_token && distinct_id){ 
-            console.log('authningn')
             socketAuthenticate(access_token, distinct_id) 
         }
         }

package/src/types.d.ts

@@ -27,6 +27,8 @@ export interface PublicPlayerProps {
 }
 
 
+
+
 export interface ArticleFeedProps {
     article_feed_id: string,
     company_id?:string,
@@ -1895,6 +1897,60 @@ export interface PositionProps {
     hedged_positions?:HedgedPositionProps[]
 }
 
+export interface OrderBookProps {
+    event_id:string,
+    event_type:string,
+    market_id:string,
+    updated: string,
+    book_stats: BookStatsProps[]
+}
+export interface BookStatsProps {
+    side:string,
+    side_id:string,
+    var_1:number,
+    probability:number,
+    order_count:number
+}
+
+export interface OrderStatsProps {
+    stat_id:string,
+    event_id:string,
+    player_id:string,
+    result_ind?:string,
+    event_type: string,
+    unique_order_titles?:string[],
+    roi:number,
+    original_stake:number,
+    delayed_cash:number,
+    wins:number,
+    
+    losses:number,
+    draws:number
+    unresolved_stake:number,
+    resolved_stake:number,
+    unresolved_position_odds:number, 
+    resolved_position_odds:number, 
+    earnings: number,
+    unresolved_position_probability:number,
+    resolved_position_probability:number,
+    cash_rcvd:number,
+    num_trades:number,
+    unresolved_potential_winnings:number,
+    unresolved_potential_net_winnings:number,
+    resolved_potential_winnings:number,
+    open_amt:number,
+    offer_odds: number,
+    offer_probability: number,
+    called_amt:number,
+    winnings:number,
+    net_winnings:number,
+    commission:number,
+    potential_winnings: number,
+    open_orders:string[]
+    orders:string[],
+    last_update_datetime?:string
+}
+
 export interface OrderProps {
     order_id:string; //Primary key of the order
     player_id:string; //Id of the player creating the order