be-components 6.2.2 → 6.2.3

package/src/MarketComponents/components/CreateMarketForm.tsx

@@ -0,0 +1,444 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed"
+import type { BestAvailableOrderProps, EventProps, ExternalPriceProps, LocationProps, MarketProps, MatchProps, OrderProps, TournamentProps, TradeProps } from '../../types';
+import { MarketComponentApi, MarketComponentHelpers } from '../api';
+import { ActivityIndicator, FlatList, type ViewStyle } from 'react-native';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import { MarketMaketHelpers } from '../../MarketMaker/api';
+import OrderGradeBar from './OrderGradeBar';
+import WeightProgress from './WeightProgress';
+
+type CreateMarketFormProps = {
+    float?:boolean,
+    style?:ViewStyle
+    contest_type:'team'|'tournament'|'match',
+    contest_id:string,
+    best_available_orders:BestAvailableOrderProps[],
+    my_orders:OrderProps[],
+    action_loading?:boolean,
+    market_id:string,
+    unit_size?:number,
+    location?:LocationProps,
+    coordinates?:{ latitude:number, longitude:number, [key:string]:any }
+    side_type?:'side'|'team'|'athlete',
+    side_id?:string,
+    onCancel:() => void,
+    onSubmitOrders:(orders:OrderProps[]) => void
+}
+
+
+const sections = ['o_side', 'submit', 'trade_side', 'draft_orders','my_orders', 'what_if'];
+const CreateMarketForm = ({ float, action_loading, unit_size, location, coordinates, style, my_orders, best_available_orders, contest_type, contest_id, market_id, side_id, side_type, onCancel, onSubmitOrders }:CreateMarketFormProps) => {
+    const Colors = useColors();
+    const [ draft_orders, setDraftOrders ] = useState<OrderProps[]>([]);
+    const [ draft_data, setDraftData ] = useState<{
+        stake:string,
+        o_side_margin:number,
+        trade_side_margin:number
+    }>({
+        stake:unit_size?.toFixed(2) ?? '10',
+        o_side_margin: 0.02,
+        trade_side_margin: 0.02
+    });
+    const { o_side_margin, trade_side_margin, stake } = draft_data;
+    const [ form_data, setFormData ] = useState<{
+        loading:boolean,
+        markets:MarketProps[],
+        prices:ExternalPriceProps[],
+        trades:TradeProps[],
+        event?:EventProps,
+        tournament?:TournamentProps,
+        match?:MatchProps
+    }>({
+        loading:false,
+        markets: [],
+        prices: [],
+        trades: []
+    });
+
+    const { loading, markets, prices, event, tournament, match } = form_data;
+    
+    const { contest_title } = MarketComponentHelpers.getContestDetails(contest_type, event, tournament, match);
+    const market = markets.find(mk => mk.market_id == market_id);
+
+    const orders = MarketComponentHelpers.setMarket(parseFloat(stake), contest_type, best_available_orders, prices, o_side_margin, trade_side_margin, market, event, tournament, match, undefined, undefined)
+    const no_vig_data = MarketMaketHelpers.getNoVigPrice(prices, market);
+
+
+    useEffect(() => {
+        MarketComponentApi.setEnvironment();
+        getFormData();
+    },[]);
+
+    const getFormData = async() => {
+        setFormData({ ...form_data, loading:true })
+        const mks = await MarketComponentApi.getMarkets();
+        let ev:EventProps | undefined, tourn:TournamentProps | undefined, mtch:MatchProps|undefined
+        if(contest_type == 'team'){
+            let evs = await MarketComponentApi.getEventsByEventIds([contest_id]);
+            ev = evs[0]
+        }
+        if(contest_type == 'tournament'){
+            let tourns = await MarketComponentApi.getTournamentsByTournamentIds([contest_id]);
+            tourn = tourns[0]
+        }
+        if(contest_type == 'match'){
+            let mtchs = await MarketComponentApi.getMatchesByMatchIds([contest_id]);
+            mtch = mtchs[0]
+            if(mtch){
+                let mtch_tourns = await MarketComponentApi.getTournamentsByTournamentIds([mtch.tournament_id]);
+                tourn = mtch_tourns[0]
+            }
+        }
+        let contest_prices = await MarketComponentApi.getExternalPrices(contest_type, contest_id, market_id);
+        //Get the correct prices
+        if(side_type){ contest_prices = contest_prices.filter(p => p.participant_type == side_type &&  p.participant_id == side_id) }
+        //First try to get consensus
+        contest_prices = contest_prices.filter(p => p.external_name == 'Consensus');
+        if(contest_prices.length == 0){
+            let available_books = [ ...new Set(contest_prices.map(p => p.external_name)) ]
+            contest_prices = contest_prices.filter(p => p.external_name == available_books[0]);
+        }
+
+        let contest_trades = await MarketComponentApi.getLatestTradesByEvents(contest_type, [contest_id]);
+
+
+        setFormData({
+            ...form_data,
+            loading:false,
+            markets: mks,
+            match: mtch,
+            event: ev,
+            tournament: tourn,
+            prices: contest_prices,
+            trades: contest_trades
+        });
+    }
+
+    const handleSubmitOrder = () => {
+        if(action_loading){ return }
+        if(draft_orders.length == 0){ return alert('Unable to submit!') }
+        if(!location){ return alert('Unable to create order without location') }
+        if(!location.legal_ind){ return alert('Unable to create order in this location') }
+        if(!coordinates?.latitude){ return alert('Need coordinates') }
+        let new_orders = draft_orders.map(o => {
+            o.region = location.label
+            o.location = coordinates
+            return o
+        });
+        onSubmitOrders(new_orders)
+    }
+
+    const handleUpdateMargin = (side:'other'|'trade', direction: 'increase'|'decrease') => {
+        let o_side = o_side_margin
+        let trade_side = trade_side_margin
+        if(side == 'other' && direction == 'increase'){ o_side += 0.001 }
+        if(side == 'other' && direction == 'decrease'){ o_side -= 0.001 }
+
+        if(side == 'trade' && direction == 'increase'){ trade_side += 0.001 }
+        if(side == 'trade' && direction == 'decrease'){ trade_side -= 0.001 }
+        let total_margin = o_side + trade_side
+        if(total_margin < 0.001){ return } //Cant go negative!!
+        setDraftData({ o_side_margin: o_side, trade_side_margin: trade_side, stake })
+        
+    }
+
+    const renderOrders = (data:{ item:OrderProps, index:number }) => {
+        return (
+            <View style={{ flexGrow:1 }}>
+                <View style={{ padding:10 }}>
+                    <Text theme='h1' textAlign='center'>{data.item.title}</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'my_orders':
+                if(!market){ return <></> }
+                const hedges = MarketMaketHelpers.getHedgesFromPositions(my_orders, markets);
+                const hedge = hedges[0]
+                const o_side_stats = MarketMaketHelpers.getOrderStats(my_orders.filter(o => o.side != market.trade_side));
+                const t_side_stats = MarketMaketHelpers.getOrderStats(my_orders.filter(o => o.side == market.trade_side));
+                const stake_weight = MarketMaketHelpers.getWeight(o_side_stats.stake_potential_winnings, t_side_stats.stake_potential_winnings, market);
+                const at_risk = o_side_stats.stake_potential_winnings - t_side_stats.stake_potential_winnings
+                return (
+                    <View type='footer' style={{ padding:10 }}>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>My Current Position</Text>
+                            </View>
+                            {hedge?
+                            <View transparent>
+                                {hedge.delayed_cash_draw ?
+                                <Text theme='error' size={14}>-${hedge.delayed_cash_draw.toFixed(2)}</Text>
+                                :
+                                <Text theme='success' size={14}>${hedge.delayed_cash_no_draw.toFixed(2)}</Text>
+                                }
+                                <Text theme='description'>Hedged</Text>
+                            </View>
+                            :<></>}
+                        </View>
+                        <View transparent type='row'>
+                            <View transparent style={{ flex:1, padding:5 }}>
+                                <Text theme='h2' textAlign='center'>{o_side_stats.stake_potential_winnings.toFixed(2)}</Text>
+                            </View>
+                            <View transparent style={{ flex:1, padding:5 }}>
+                                <Text theme='h2' textAlign='center'>{t_side_stats.stake_potential_winnings.toFixed(2)}</Text>
+                            </View>
+                        </View>
+                        <WeightProgress
+                            style={{ margin:10 }}
+                            min_value={0}
+                            max_value={100}
+                            value={stake_weight.weighted_pct}
+                            bar_height={18}
+                        />
+                        <View transparent type='row'>
+                            {at_risk > 0 ?
+                            <View transparent style={{ flex:1, padding:5 }}>
+                                <Text theme='error' textAlign='center' style={{ marginTop:3 }}>${at_risk.toFixed(2)}</Text>
+                                <Text theme='description' textAlign='center' style={{ marginTop:3 }}>At Risk</Text>
+                            </View>
+                            :<View style={{ flex:1 }} />}
+                            {at_risk < 0 ?
+                            <View transparent style={{ flex:1, padding:5 }}>
+                                <Text theme='error' textAlign='center' style={{ marginTop:3 }}>${at_risk.toFixed(2)}</Text>
+                                <Text theme='description' textAlign='center' style={{ marginTop:3 }}>At Risk</Text>
+                            </View>
+                            :<View style={{ flex:1 }} />}
+                        </View>
+                    </View>
+                )
+            case 'o_side':
+                if(draft_orders.length > 0){ return <></> }
+                if(!market){ return <></> }
+                let o_side_option = market.side_options.find(so => so.side != market.trade_side);
+                if(!o_side_option){ return <></> }
+                const o_side_order = orders.find(o => o.side != market.trade_side);
+                if(!o_side_order){ return <></> }
+                const o_side_price = prices.find(p => p.side != market.trade_side);
+                const o_side_no_vig = no_vig_data?.o_side_odds
+                const o_best_available = best_available_orders.find(o => o.market_id == market_id && o.side != market.trade_side)
+                //const my_o_side_open = my_orders.filter(o => o.market_id == market_id && o.side != market.trade_side);
+                //const my_open_stats = MarketMaketHelpers.getOrderStats(my_o_side_open, o_best_available);
+                return (
+                    <View style={{ borderWidth:1, borderColor:Colors.borders.light, margin:10  }}>
+                        <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h2'>{o_side_order.title}</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>${o_side_order.open_amt.toFixed(2)} to win ${o_side_order.potential_winnings.toFixed(2)}</Text>
+                            </View>
+                            <Text theme='h1'>${o_side_order.open_amt.toFixed(2)}</Text>
+                            <View type='row' style={{ marginLeft:10 }}>
+                                <Button float onPress={() => handleUpdateMargin('other', 'increase')}>
+                                    <Icons.ChevronIcon direction='left' size={8} color={Colors.text.h1} />
+                                </Button>
+                                <View style={{ paddingLeft:10, paddingRight:10 }}>
+                                    <Text theme='h1' textAlign='center'>{(o_side_order.probability * 100).toFixed(2)}%</Text>
+                                    <Text theme='light' style={{ marginTop:3 }} textAlign='center'>{MarketComponentHelpers.getOddsLabel(o_side_order.odds)}</Text>
+                                </View>
+                                <Button float onPress={() => handleUpdateMargin('other', 'decrease')}>
+                                    <Icons.ChevronIcon direction='right' size={8} color={Colors.text.h1} />
+                                </Button>
+                            </View>
+                        </View>
+                        {o_best_available ?
+                        <View type='row' style={{ padding:10 }}>
+                            <View transparent style={{flex:1}}>
+                                <Text theme='h1'>{o_best_available.title}</Text>
+                                {o_best_available.grade ?
+                                <OrderGradeBar style={{ alignSelf:'flex-start', marginTop:3 }} grade={o_best_available.grade} view_type='card' onSelectGrade={() => console.log('')}/>
+                                :<></>}
+                            </View>
+                            <View style={{ alignItems:'flex-end' }}>
+                                <Text theme='h2'>{MarketComponentHelpers.getOddsLabel(o_best_available.odds)}</Text>
+                                <Text theme='success'>${o_best_available.open_amt.toFixed(2)} Available</Text>
+                            </View>
+                            <Button
+                                title='BUY'
+                                type='success'
+                                loading={action_loading}
+                                style={{ padding:10, marginLeft:10, opacity: action_loading ? 0.5:1 }}
+                                disabled={action_loading}
+                                onPress={() => {
+                                    let side_ids = MarketComponentHelpers.getSideIds(contest_type, o_side_option, market, event, tournament, match, undefined, undefined);
+                                    if(!side_ids){ return }
+                                    let trade = MarketMaketHelpers.getTradeFromAvailableOrder(o_best_available, side_ids.reversed_side_id);
+                                    let order = MarketMaketHelpers.getOrderFromTrade(trade, unit_size ?? 10, o_best_available.order_id);
+                                    order.title = o_best_available.title
+                                    setDraftOrders([order])
+                                }}
+                            />
+                        </View>
+                        :<></>}
+                        {o_side_price && o_side_no_vig ?
+                        <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>{o_side_price.external_name}</Text>
+                                <Text theme='light' style={{ marginTop:3 }}>External price with vig removed</Text>
+                            </View>
+                            <Text theme='h2'>{MarketComponentHelpers.getOddsLabel(o_side_no_vig)}</Text>
+                        </View>
+                        :<></>}
+                    </View>
+                    
+                )
+            case 'submit':
+                if(draft_orders.length > 0){ return <></> }
+                return (
+                    <View type='header' style={{ flexDirection:'row', padding:10 }}>
+                        <TextInput
+                            value={stake}
+                            style={{ width:100, textAlign:'center' }}
+                            onChangeText={(text) => setDraftData({ ...draft_data, stake:text })}
+                        />
+                        <Button
+                            style={{ flex:2, marginLeft:10, opacity: action_loading?0.5:1 }}
+                            type='success'
+                            loading={action_loading}
+                            disabled={action_loading}
+                            title='SET MARKET'
+                            onPress={() => setDraftOrders(orders)}
+                        />
+                    </View>
+                )
+            case 'trade_side':
+                if(draft_orders.length > 0){ return <></> }
+                if(!market){ return <></> }
+                let trade_side_option = market.side_options.find(so => so.side == market.trade_side);
+                if(!trade_side_option){ return <></> }
+                const trade_side_order = orders.find(o => o.side == market.trade_side);
+                if(!trade_side_order){ return <></> }
+                const trade_side_price = prices.find(p => p.side == market.trade_side);
+                const trade_side_no_vig_odds = no_vig_data?.trade_side_odds
+                const t_best_available = best_available_orders.find(o => o.market_id == market_id && o.side == market.trade_side)
+                return (
+                    <View style={{ borderWidth:1, borderColor:Colors.borders.light, margin:10  }}>
+                        <View type='row' style={{ padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h2'>{trade_side_order.title}</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>${trade_side_order.open_amt.toFixed(2)} to win ${trade_side_order.potential_winnings.toFixed(2)}</Text>
+                            </View>
+                            <Text theme='h1'>${trade_side_order.open_amt.toFixed(2)}</Text>
+                            <View type='row' style={{ marginLeft:10 }}>
+                                <Button float onPress={() => handleUpdateMargin('trade', 'increase')}>
+                                    <Icons.ChevronIcon direction='left' size={8} color={Colors.text.h1} />
+                                </Button>
+                                <View style={{ paddingLeft:10, paddingRight:10 }}>
+                                    <Text theme='h1'>{(trade_side_order.probability * 100).toFixed(2)}%</Text>
+                                    <Text theme='light' style={{ marginTop:3 }} textAlign='center'>{MarketComponentHelpers.getOddsLabel(trade_side_order.odds)}</Text>
+                                </View>
+                                <Button float onPress={() => handleUpdateMargin('trade', 'decrease')}>
+                                    <Icons.ChevronIcon direction='right' size={8} color={Colors.text.h1} />
+                                </Button>
+                            </View>
+                        </View>
+                         {t_best_available ?
+                        <View type='row' style={{ padding:10 }}>
+                            <View transparent style={{flex:1}}>
+                                <Text theme='h1'>{t_best_available.title}</Text>
+                                {t_best_available.grade ?
+                                <OrderGradeBar style={{ alignSelf:'flex-start', marginTop:3 }} grade={t_best_available.grade} view_type='card' onSelectGrade={() => console.log('')}/>
+                                :<></>}
+                            </View>
+                            <View style={{ alignItems:'flex-end' }}>
+                                <Text theme='h2'>{MarketComponentHelpers.getOddsLabel(t_best_available.odds)}</Text>
+                                <Text theme='success'>${t_best_available.open_amt.toFixed(2)} Available</Text>
+                            </View>
+                            <Button
+                                title='BUY'
+                                type='success'
+                                style={{ padding:10, marginLeft:10, opacity: action_loading ? 0.5:1 }}
+                                disabled={action_loading}
+                                onPress={() => {
+                                    let side_ids = MarketComponentHelpers.getSideIds(contest_type, trade_side_option, market, event, tournament, match, undefined, undefined);
+                                    if(!side_ids){ return }
+                                    let trade = MarketMaketHelpers.getTradeFromAvailableOrder(t_best_available, side_ids.reversed_side_id);
+                                    let order = MarketMaketHelpers.getOrderFromTrade(trade, unit_size ?? 10, t_best_available.order_id);
+                                    order.title = t_best_available.title
+                                    setDraftOrders([order])
+                                }}
+                            />
+                        </View>
+                        :<></>}
+                        {trade_side_price && trade_side_no_vig_odds ?
+                        <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>{trade_side_price.external_name}</Text>
+                                <Text theme='light' style={{ marginTop:3 }}>External price with vig removed</Text>
+                            </View>
+                            <Text theme='h2'>{MarketComponentHelpers.getOddsLabel(trade_side_no_vig_odds)}</Text>
+                        </View>
+                        :<></>}
+                    </View>
+                )
+            case 'draft_orders':
+                if(draft_orders.length == 0){ return <></> }
+                return (
+                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        {draft_orders.map((o,i) => {
+                            return renderOrders({ item: o, index:i })
+                        })}
+                    </View>
+                )
+            case 'what_if':return <></>
+            default: return <></>
+        }
+    }
+
+    const total_margin = o_side_margin + trade_side_margin
+    return (
+        <View float={float} style={{ ...style }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopLeftRadius:8, borderTopRightRadius:8 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{contest_title}</Text>
+                </View>
+                <View transparent style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h2' color={total_margin > 0.06 ? Colors.text.error : total_margin > 0.045 ? Colors.text.warning : Colors.text.success}>{(total_margin*100).toFixed(2)}%</Text>
+                    <Text theme='description' textAlign='center'>Margin</Text>
+                </View>
+            </View>
+            <View type='body' style={{ flex:1 }}>
+                {loading ?
+                <ActivityIndicator size='large' color={Colors.text.h1} />
+                :<></>}
+                <FlatList
+                    key={'create_market_sections'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                    data={sections}
+                />
+            </View>
+            {draft_orders.length == 0 ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                <Button
+                    style={{ flex:1 }}
+                    type='action'
+                    title='CLOSE'
+                    onPress={() => onCancel()}
+                />
+            </View>
+            :
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                <Button
+                    style={{ flex:1 }}
+                    type='error'
+                    title='CANCEL'
+                    onPress={() => setDraftOrders([])}
+                />
+                <Button
+                    style={{ flex:2, marginLeft:5 }}
+                    type='success'
+                    title='SUBMIT ORDERS'
+                    onPress={() => handleSubmitOrder()}
+                />
+            </View>
+            }
+        </View>
+    )
+}
+
+export default CreateMarketForm

package/src/MarketComponents/components/WeightProgress.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import type { ViewStyle } from 'react-native';
+
+type WeightProgressProps = {
+    min_value:number,
+    max_value:number,
+    style?:ViewStyle,
+    value: number,
+    bar_height?:number
+}
+
+const WeightProgress = ({ value, bar_height, style }:WeightProgressProps) => {
+    const Colors = useColors();
+    const [ width, setWidth ] = useState(0);
+    let progress_width = value * width / 2
+    let start_point = width/2
+    if(progress_width < 0){
+        start_point += progress_width
+    }
+    return (
+        <View style={{ borderRadius:2, height: bar_height ? bar_height + 2: 6, backgroundColor:Colors.borders.light, padding:1, justifyContent:'center', ...style }} onLayout={(ev) => {
+            const { width } = ev.nativeEvent.layout;
+            setWidth(width)
+        }}>
+            <View style={{ position:'absolute', top:1, bottom:1, left:start_point, width:Math.abs(progress_width), backgroundColor:Colors.text.h1, height:bar_height??4, borderRadius:4 }}/>
+        </View>
+    )
+}
+
+export default WeightProgress

package/src/MarketComponents/index.tsx

@@ -14,6 +14,7 @@ import MyOrderList from './components/MyOrderList';
 import ExternalPriceComparison from './components/ExternalPriceComparison';
 import OrderGradeBar from './components/OrderGradeBar';
 import MarketManager from './components/MarketManager';
+import CreateMarketForm from './components/CreateMarketForm';
 
 export default {
     TeamEventMarket,
@@ -22,6 +23,7 @@ export default {
     BestAvailableOrderCard,
     EventMarket,
     OrderBookCard,
+    CreateMarketForm,
     MarketManager,
     OrderBookChart,
     AthleteTournamentMarket,

package/src/MarketMaker/api/index.ts

@@ -936,7 +936,8 @@ const MarketMaketHelpers = {
         }
         return cash
     },
-    getNoVigPrice: (prices:ExternalPriceProps[], market:MarketProps) => {
+    getNoVigPrice: (prices:ExternalPriceProps[], market?:MarketProps) => {
+        if(!market){ return undefined }
         if(!prices || prices.length != 2){ return undefined }
         let external_name = prices[0]?.external_name
         if(!external_name){ return undefined }

package/src/Poll/components/PollCard.tsx

@@ -199,6 +199,7 @@ const PollCard = ({ poll_id, height, width, view_mode, poll_response, action_loa
                 )
             case 'correct_select':
                 if(!poll || poll.poll_type != 'select' || !correct_option){ return <></> }
+                if(poll.status != 'closed' && correct_option && !poll_response){ return <></> }
                 return (
                     <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
                         <Text style={{ marginBottom:5 }} size={14} theme='description' weight='semibold'>CORRECT ANSWER</Text>