be-components 6.2.1 → 6.2.3

package/src/MarketComponents/api/index.ts

@@ -1,7 +1,8 @@
 import axios from 'axios';
 import { APIOverrides } from "../../ApiOverrides"
 import type { AthleteProps, AthleteStatProps, BestAvailableOrderProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, ExternalPriceProps, LeagueProps, MarketProps, MarketSideOptionProps, MarketStatsProps, MatchProps, MyPlayerProps, OrderProps, PodcastProps, PositionProps, PublicPlayerProps, TeamProps, TournamentProps, TradeProps } from "../../types"
-import moment from 'moment-mini';
+import moment, { type Moment } from 'moment-mini';
+import { MarketMaketHelpers } from '../../MarketMaker/api';
 
 let EVENT_SVC_API = ''
 let AUTH_SVC_API = ''
@@ -526,6 +527,21 @@ const MarketComponentHelpers = {
         }
         return (p/(1-(p/100)))*-1
     },
+    getSideIds: (contest_type:string, so:MarketSideOptionProps, market?:MarketProps, event?:EventProps, tournament?:TournamentProps, match?:MatchProps, athlete?:AthleteProps, team?:TeamProps) => {
+        if(!market){ return undefined }
+        switch(contest_type){
+            case 'team':
+                if(!event) return undefined
+                return MarketComponentHelpers.getTeamEventSideIds(event, market, so, athlete, team)
+            case 'tournament':
+                if(!tournament){ return undefined }
+                return MarketComponentHelpers.getTournamentSideIds(market, so, athlete, team);
+            case 'match':
+                if(!match){ return undefined }
+                return MarketComponentHelpers.getMatchSideIds(match, so)
+            default: return undefined
+        }
+    },
     getTournamentSideIds: (market:MarketProps, side_option:MarketSideOptionProps, athlete?:AthleteProps, team?:TeamProps) => {
         const o_side = market.side_options.find(so => so.side != side_option.side);
         if(!o_side){ return undefined }
@@ -544,6 +560,46 @@ const MarketComponentHelpers = {
             default: return undefined
         }
     },
+    pretendFulfillOrder: (order:BestAvailableOrderProps | OrderProps, stake?:number):OrderProps => {
+        let fill_stake = stake ?? order.open_amt
+        if(fill_stake > order.open_amt){
+            fill_stake = order.open_amt
+        }
+        order.open_amt -= fill_stake
+        order.called_amt = fill_stake
+
+        let position:PositionProps = {
+            position_id: '',
+            order_id: order.order_id,
+            stake: fill_stake,
+            probability: order.probability,
+            odds: order.odds,
+            status: 'inprogress',
+            winnings: 0, net_winnings: 0,
+            potential_winnings: MarketComponentHelpers.calcPotentialWinnings(fill_stake, order.odds),
+            original_stake: fill_stake,
+            cash_rcvd: 0,
+            delayed_cash: 0,
+            in_sale_order: 0,
+            commission: 0
+        }
+        return {
+            ...order,
+            be_type: 'market',
+            order_type:'limit',
+            collar_pct: 0,
+            position_ids: [],
+            market_type: 'FOR_MONEY',
+            status: 'approved',
+            available_for_parlays:false,
+            resolution_status: 'inprogress',
+            commission_pct: 0,
+            side_type: order.side_type as 'team'|'side'|'athlete',
+            buy_sell_ind: order.buy_sell_ind as 'buy'|'sell',
+            event_type: order.event_type as 'team'|'tournament'|'match',
+            positions: [position]
+        }
+    },
     prettyKey : (key?:string) => {
         try {
             if(!key){ return '' }
@@ -751,6 +807,113 @@ const MarketComponentHelpers = {
             }
         })
         return { contest_title, o_side_label, trade_side_label }
-
-    }
+    },
+    setMarket: (unit_size:number, contest_type:'team'|'tournament'|'match',best_available:BestAvailableOrderProps[], external_prices:ExternalPriceProps[], o_side_margin:number, trade_side_margin:number, market?:MarketProps, event?:EventProps, tournament?:TournamentProps, match?:MatchProps, athlete?:AthleteProps, team?:TeamProps) => {
+            let orders:OrderProps[] = []
+            let expire_datetime:Moment | undefined = undefined
+            if(!market){ return [] }
+            market.side_options.map(so => {
+                let side_id_response:any = undefined
+                switch(contest_type){
+                    case 'team':
+                        if(!event){ return }
+                        expire_datetime = moment(event.scheduled_datetime);
+                        side_id_response = MarketComponentHelpers.getTeamEventSideIds(event, market, so);
+                        break
+                    case 'tournament':
+                        if(!tournament){ return }
+                        expire_datetime = moment(tournament.scheduled_datetime);
+                        side_id_response = MarketComponentHelpers.getTournamentSideIds(market, so, athlete, team);
+                        break
+                    case 'match':
+                        if(!match){ return }
+                        expire_datetime = moment(match.scheduled_datetime);
+                        side_id_response = MarketComponentHelpers.getMatchSideIds(match, so);
+                        break
+                    default: return
+                }
+                 
+                if(!side_id_response){ return }
+                let ba = best_available.find(ba => ba.side == so.side)
+                let o_ba = best_available.find(ba => ba.side != so.side);
+                if(ba && o_ba){
+                    let ba_trade = MarketMaketHelpers.getTradeFromAvailableOrder(ba, side_id_response.reversed_side_id);
+                    let ba_order = MarketMaketHelpers.getOrderFromTrade(ba_trade, 10, ba.order_id);
+                    let ba_title = MarketComponentHelpers.getOrderTitle(ba_order, market, event, tournament, match, athlete, team);
+    
+                    if(!ba_title){ return }
+                    return orders.push({ ...ba_order, title: ba_title })
+                }
+                let ep = external_prices.find(p => p.side == so.side);
+                let o_ep = external_prices.find(p => p.side != so.side);
+                if(ep && o_ep){
+                    let ep_trade = MarketMaketHelpers.getTradeFromPrice(ep, side_id_response.reversed_side_id);
+                    let ep_order = MarketMaketHelpers.getOrderFromTrade(ep_trade, 10);
+                    let ep_title = MarketComponentHelpers.getOrderTitle(ep_order, market, event, tournament, match, athlete, team);
+                    if(!ep_title){ return }
+                    return orders.push({ ...ep_order, title: ep_title })
+                }
+                return
+            })
+    
+            if(orders.length != 2){ return [] }
+    
+            //OK!! Lets figured out the buffer odds!
+            let no_vig_trade_price = .5
+            let no_vig_o_price = .5
+            let no_vig_data = MarketMaketHelpers.getNoVigPrice(external_prices, market);
+            if(no_vig_data){
+                no_vig_o_price = no_vig_data.o_side_prob
+                no_vig_trade_price = no_vig_data.trade_side_prob
+            }
+    
+            //Now lets add a buffer to each one based on the margin provided!
+            let margin = o_side_margin + trade_side_margin
+            let o_side_weight = o_side_margin / margin
+            let trade_side_weight = trade_side_margin / margin
+            no_vig_trade_price -= (margin * trade_side_weight)
+            let novig_trade_side_odds = Math.round(MarketMaketHelpers.calcAmericanOddsFromProbability(no_vig_trade_price))
+    
+            no_vig_o_price -= (margin * o_side_weight)
+    
+            let novig_o_side_odds = Math.round(MarketMaketHelpers.calcAmericanOddsFromProbability(no_vig_o_price))
+    
+            //OK!!! Now lets add the propbabilities to the orders!
+            let trade_side_order = orders.find(o => o.side == market.trade_side);
+            let o_side_order = orders.find(o => o.side != market.trade_side);
+            if(!trade_side_order || !o_side_order){ return [] }
+    
+            let higher_probability_order = no_vig_trade_price >= no_vig_o_price ? 'trade' : 'other'
+            let trade_side_stake = unit_size, o_side_stake = unit_size
+            if(higher_probability_order == 'trade'){
+                //If that is the stake, then the potential winnigns is
+                let pot_win = MarketMaketHelpers.calcPotentialWinnings(trade_side_stake, novig_trade_side_odds);
+                o_side_stake = MarketMaketHelpers.calcSaleValue(novig_o_side_odds, pot_win);
+            } else {
+                //If that is the stake, then the potential winnigns is
+                let pot_win = MarketMaketHelpers.calcPotentialWinnings(o_side_stake, novig_o_side_odds);
+                trade_side_stake = MarketMaketHelpers.calcSaleValue(novig_trade_side_odds, pot_win);
+            }
+    
+            o_side_order = {
+                ...o_side_order,
+                probability: no_vig_o_price,
+                odds: novig_o_side_odds,
+                fulfill_action: 'drain',
+                expire_datetime: expire_datetime,
+                potential_winnings: MarketMaketHelpers.calcPotentialWinnings(o_side_stake, novig_o_side_odds),
+                open_amt: o_side_stake,
+            }
+            trade_side_order = {
+                ...trade_side_order,
+                probability: no_vig_trade_price,
+                odds: novig_trade_side_odds,
+                fulfill_action: 'drain',
+                expire_datetime: expire_datetime,
+                potential_winnings: MarketMaketHelpers.calcPotentialWinnings(trade_side_stake, novig_trade_side_odds),
+                open_amt: trade_side_stake,
+            }
+    
+            return [ o_side_order, trade_side_order ]
+        }
 }

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