be-components 2.4.7 → 2.4.9

package/src/MarketMaker/components/Contest.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { View, Image, FlatList } from 'react-native';
+import type { BestAvailableOrderProps, EventProps, ExternalPriceProps, FundOrderProps, FundProps, LeagueProps, MarketProps, MatchProps, OrderProps, TournamentProps, TradeProps } from '../../types';
+import { view_styles } from '../../constants/styles';
+import { Text } from '../../Components';
+import ContestMarket from './ContestMarkets';
+import { MarketMaketHelpers } from '../api';
+import Colors from '../../constants/colors';
+
+type ContestProps = {
+    fund:FundProps,
+    league?:LeagueProps,
+    contest_id:string,
+    contest_type:string,
+    time_detail:string,
+    contest_title:string,
+    best_available_orders:BestAvailableOrderProps[],
+    latest_trades:TradeProps[],
+    external_prices:ExternalPriceProps[],
+    backup_prices?:ExternalPriceProps[],
+    orders:OrderProps[],
+    fund_orders:FundOrderProps[],
+    markets:MarketProps[],
+    event?:EventProps,
+    tournament?:TournamentProps,
+    match?:MatchProps,
+    onSetMarket:(orders:OrderProps[], market:MarketProps, prices:ExternalPriceProps[]) => void
+    onClearMarket:(order_ids:string[]) => void
+}
+
+const Contest = ({ fund, contest_id, time_detail, event, external_prices, backup_prices, tournament, match, contest_type, league, contest_title, best_available_orders, latest_trades, orders, fund_orders, markets, onSetMarket, onClearMarket }:ContestProps) => {
+    
+    console.log(markets)    
+    const { called_amt, open_potential_winnings } = MarketMaketHelpers.getOrderStats(orders);
+    //const hedges = MarketMaketHelpers.getHedgesFromPositions(orders, markets);
+    console.log('HERE WE GO')
+    const renderMarkets = (data:{ item:MarketProps, index:number }) => {
+        const market_orders = orders.filter(o => o.market_id == data.item.market_id);
+        const market_fund_orders = fund_orders.filter(fo => market_orders.map(o => o.order_id.toString()).includes(fo.order_id.toString()))
+        const market_trades = latest_trades.filter(t => t.market_id == data.item.market_id);
+        const market_available_orders = best_available_orders.filter(o => o.market_id == data.item.market_id);
+        const market_prices = external_prices.filter(p => p.market_id == data.item.market_id);
+
+        const { unique_var_1, default_var_1 } = MarketMaketHelpers.getAvailableVar1s(market_orders, market_available_orders, market_prices, data.item);
+        const side_id_resp = MarketMaketHelpers.getAvailableSideIds(market_orders, market_available_orders, market_prices, data.item);
+        console.log(side_id_resp)
+        console.log(unique_var_1, default_var_1)
+        
+        return (
+            <View style={{ borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                <ContestMarket
+                    fund={fund}
+                    contest_id={contest_id}
+                    contest_type={contest_type}
+                    market={data.item}
+                    orders={market_orders}
+                    fund_orders={market_fund_orders}
+                    unique_var_1={unique_var_1}
+                    latest_trades={market_trades}
+                    best_available_orders={market_available_orders}
+                    var_1={default_var_1}
+                    external_prices={market_prices}
+                    backup_prices={backup_prices}
+                    event={event}
+                    tournament={tournament}
+                    match={match}
+                    onSetMarket={onSetMarket}
+                    onClearMarket={onClearMarket}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600, padding:0, flex:1 }}>
+            <View style={{ flexDirection:'row', backgroundColor:Colors.brand.midnight, borderTopRightRadius:8, borderTopLeftRadius:8, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                <View style={{ backgroundColor:Colors.shades.shade100, padding:8, borderTopLeftRadius:8 }}>
+                    {league ?
+                    <Image
+                        source={{ uri: league.league_image }}
+                        style={{ height:30, width:30, alignSelf:'center' }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                </View>
+                <View style={{ flex:1, padding:8, justifyContent:'center' }}>
+                    <Text size={14} color={Colors.shades.shade100} weight='bold'>{contest_title}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.shades.shade100} weight='semibold'>{time_detail}</Text>
+                </View>
+                <View style={{ marginLeft:10, padding:5 }}>
+                    <Text size={12} color={Colors.utility.success} textAlign='right'>O: ${open_potential_winnings.toFixed(2)}</Text>
+                    <Text size={12} color={Colors.brand.midnight} textAlign='right'>F: ${called_amt.toFixed(2)}</Text>
+                </View>
+            </View>
+            <View>
+                <FlatList
+                    data={markets}
+                    renderItem={renderMarkets}
+                    keyExtractor={(item) => item.market_id.toString()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default Contest

package/src/MarketMaker/components/ContestMarkets.tsx

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import type { AthleteProps, BestAvailableOrderProps, EventProps, ExternalPriceProps, FundOrderProps, FundProps, MarketProps, MatchProps, OrderProps, TeamProps, TournamentProps, TradeProps } from '../../types';
+import { Button, Text } from '../../Components';
+import { view_styles } from '../../constants/styles';
+import Colors from '../../constants/colors';
+import { MarketMaketHelpers } from '../api';
+import WeightProgress from './WeightProgress';
+
+type ContestMarketProps = {
+    contest_id:string,
+    contest_type:string,
+    fund:FundProps,
+    market:MarketProps,
+    best_available_orders:BestAvailableOrderProps[],
+    latest_trades:TradeProps[],
+    orders:OrderProps[],
+    fund_orders:FundOrderProps[],
+    var_1:number,
+    unique_var_1:number[],
+    event?:EventProps,
+    tournament?:TournamentProps,
+    match?:MatchProps,
+    athlete?:AthleteProps,
+    team?:TeamProps,
+    external_prices:ExternalPriceProps[],
+    backup_prices?:ExternalPriceProps[],
+    onSetMarket:(orders:OrderProps[], market:MarketProps, prices:ExternalPriceProps[]) => void
+    onClearMarket:(order_ids:string[]) => void
+}
+
+const ContestMarket = ({ fund, event, external_prices, unique_var_1, market, orders, best_available_orders, latest_trades, var_1, athlete, backup_prices, onSetMarket, onClearMarket }:ContestMarketProps) => {
+    const [ selected_var_1, setSelectedVar1 ] = useState(var_1);
+    
+    const { var_1_orders, var_1_available, var_1_prices } = MarketMaketHelpers.filterByVar1(selected_var_1, orders, best_available_orders, external_prices, market, backup_prices);
+    
+    const { trade_side, o_side, trade_side_orders, o_side_orders, trade_side_ba, o_side_ba } = MarketMaketHelpers.getSideMarketData(var_1_orders, var_1_available, latest_trades, market);
+    const trade_side_order_stats = MarketMaketHelpers.getOrderStats(trade_side_orders);
+    const hedges = MarketMaketHelpers.getHedgesFromPositions(orders, [market]);
+    const hedged_amt = (hedges.reduce((a,b) => a + b.delayed_cash_draw, 0) * -1) + hedges.reduce((a,b) => a + b.delayed_cash_no_draw, 0);
+    const o_side_order_stats = MarketMaketHelpers.getOrderStats(o_side_orders);
+    const stake_weight = MarketMaketHelpers.getWeight(o_side_order_stats.stake_potential_winnings, trade_side_order_stats.stake_potential_winnings, market);
+    const open_weight = MarketMaketHelpers.getWeight(o_side_order_stats.open_potential_winnings, trade_side_order_stats.open_potential_winnings, market);
+    const o_price = var_1_prices.find(p => p.side != market.trade_side);
+    const trade_price = var_1_prices.find(p => p.side == market.trade_side);
+
+    const handleSelectBA = (ba:BestAvailableOrderProps) => {
+        const side_option = market.side_options.find(so => so.side == ba.side)
+        if(!side_option){ return alert('Unable to process') }
+        if(!event){ return alert('Not set up for events!!!') }
+        const side_id_data = MarketMaketHelpers.getTeamEventSideIds(event, market, side_option)
+        if(!side_id_data){ return alert('Unable to process') }
+        const ba_trade = MarketMaketHelpers.getTradeFromAvailableOrder(ba, side_id_data.reversed_side_id);
+        //console.log(ba_trade);
+        const order = MarketMaketHelpers.getOrderFromTrade(ba_trade, 10, ba.order_id);
+        const order_title = MarketMaketHelpers.getOrderTitleForTeamEvent(order, market, event, athlete);
+        console.log(order_title)
+    } 
+
+    return (
+        <View style={{ }}>
+            <View style={{ ...view_styles.body_row, justifyContent:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <Text textAlign='left' size={12} color={Colors.brand.midnight} weight='regular'>{o_side?.toUpperCase()}</Text>
+                {market.var_1_required ?
+                <View style={{ flex:1, justifyContent:'center', alignItems:'center', flexDirection:'row', overflow:'scroll' }}>
+                    {unique_var_1.map(var_1 => {
+                        const selected = selected_var_1 == var_1 ? true : false
+                        return (
+                            <TouchableOpacity style={{ margin:3 }} onPress={() => setSelectedVar1(var_1)}>
+                                <Text weight={selected?'bold':'regular'} size={12} color={Colors.brand.midnight}>{var_1}</Text>
+                            </TouchableOpacity>
+                        )
+                    })}
+                </View>
+                :
+                <Text style={{ flex:1 }} textAlign='center' size={12} color={Colors.brand.midnight} weight='bold'>{market.type == 'Stat' ? market.stat_label : market.type}{market.var_1_required ? ` ${MarketMaketHelpers.getVar1Label(market, selected_var_1)}`:''}</Text>
+                }
+                <Text textAlign='right' size={12} color={Colors.brand.midnight} weight='regular'>{trade_side.toUpperCase()}</Text>
+            </View>
+            <View style={{ ...view_styles.body_row, justifyContent:'center' }}>
+                <View style={{ flex:1, flexDirection:'row', justifyContent:'flex-start' }}>
+                    {o_price ?
+                    <TouchableOpacity style={{ marginRight:5, padding:5, borderRadius:4, backgroundColor:Colors.shades.shade100, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={12} color={Colors.brand.midnight}>{MarketMaketHelpers.getOddsLabel(o_price.odds)}</Text>
+                    </TouchableOpacity>
+                    :<></>}
+                    <TouchableOpacity style={{ padding:5, borderRadius:4, backgroundColor:Colors.shades.shade600, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={12} color={Colors.brand.midnight}>{o_side_order_stats.open_odds.toFixed()}</Text>
+                        <Text size={12} color={Colors.brand.midnight}>{o_side_order_stats.open_potential_winnings.toFixed(2)}</Text>
+                    </TouchableOpacity>
+                    {o_side_ba ?
+                    <TouchableOpacity style={{ marginLeft:5, padding:5, borderRadius:4, backgroundColor:MarketMaketHelpers.getOrderColor(o_side_ba), justifyContent:'center', alignItems:'center' }}
+                    onPress={() => handleSelectBA(o_side_ba)}>
+                        <Text size={12} color={Colors.brand.midnight}>{o_side_ba.odds.toFixed()}</Text>
+                        <Text size={12} color={Colors.brand.midnight}>{o_side_ba.open_amt.toFixed(2)}</Text>
+                    </TouchableOpacity>
+                    :<></>}
+                </View>
+                <View style={{ marginRight:5, marginLeft:5}}>
+                    {orders.length > 0 ?
+                    <Button
+                        title='CLEAR'
+                        backgroundColor={Colors.utility.error}
+                        title_color={Colors.shades.white}
+                        padding={3}
+                        onPress={() => onClearMarket(orders.map(o => o.order_id))}
+                    />
+                    :
+                    <Button
+                        title='SET'
+                        backgroundColor={Colors.utility.success}
+                        title_color={Colors.shades.white}
+                        padding={3}
+                        onPress={() => {
+                            if(!event){ return alert('Unable to set market') }
+                            const set_orders = MarketMaketHelpers.setMarkets(fund, var_1_available, var_1_prices, market, .05, event);
+                            if(set_orders.length != 2){ return alert('Unable to set market at this time') }
+                            return onSetMarket(set_orders, market, var_1_prices);
+                        }}
+                    />
+                    }
+                </View>
+                <View style={{ flex:1, flexDirection:'row', justifyContent:'flex-end' }}>
+                    {trade_side_ba ?
+                    <TouchableOpacity style={{ marginRight:5, padding:5, borderRadius:4, backgroundColor:MarketMaketHelpers.getOrderColor(trade_side_ba), justifyContent:'center', alignItems:'center' }}
+                    onPress={() => handleSelectBA(trade_side_ba)}>
+                        <Text size={12} color={Colors.brand.midnight}>{trade_side_ba.odds.toFixed()}</Text>
+                        <Text size={12} color={Colors.brand.midnight}>{trade_side_ba.open_amt.toFixed(2)}</Text>
+                    </TouchableOpacity>
+                    :<></>}
+                    <TouchableOpacity style={{  padding:5, borderRadius:4, backgroundColor:Colors.shades.shade600, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={12} color={Colors.brand.midnight}>{trade_side_order_stats.open_odds.toFixed()}</Text>
+                        <Text size={12} color={Colors.brand.midnight}>{trade_side_order_stats.open_potential_winnings.toFixed(2)}</Text>
+                    </TouchableOpacity>
+                    {trade_price ?
+                    <TouchableOpacity style={{ marginLeft:5,  padding:5, borderRadius:4, backgroundColor:Colors.shades.shade100, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={12} color={Colors.brand.midnight}>{MarketMaketHelpers.getOddsLabel(trade_price.odds)}</Text>
+                    </TouchableOpacity>
+                    :<></>}
+                </View>
+            </View>
+            <View style={{ backgroundColor:Colors.shades.shade100, padding:5 }}>
+                <WeightProgress
+                    width={225}
+                    min_value={0}
+                    max_value={100}
+                    value={open_weight.weighted_pct}
+                />
+            </View>
+            <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View style={{ flex:1 }}>
+                    <Text size={12} color={Colors.brand.midnight} weight='bold'>${o_side_order_stats.stake_earnings.toFixed(2)}</Text>
+                </View>
+                <Text size={12} color={hedged_amt < 0 ? Colors.utility.error : Colors.utility.success} weight='semibold'>${hedged_amt.toFixed(2)}</Text>
+                <View style={{ flex:1 }}>
+                    <Text size={12} color={Colors.brand.midnight} weight='bold' textAlign='right'>${trade_side_order_stats.stake_earnings.toFixed(2)}</Text>
+                </View>
+            </View>
+            <View style={{ backgroundColor:Colors.shades.shade100, padding:5 }}>
+                
+                <View style={{ margin:3 }}>
+                    <WeightProgress
+                        width={225}
+                        min_value={0}
+                        max_value={100}
+                        value={stake_weight.weighted_pct}
+                    />
+                </View>
+            </View>
+        </View>
+    )
+}
+
+export default ContestMarket

package/src/MarketMaker/components/ContestSelector.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList, TouchableOpacity } from 'react-native';
+
+import type { EventProps, LeagueProps, MatchProps, TournamentProps } from "../../types"
+import { view_styles } from '../../constants/styles';
+import { Checkbox, Text } from '../../Components';
+import DropDown from '../../Components/Dropdown';
+import moment from 'moment-mini';
+import Colors from '../../constants/colors';
+
+type ContestSelectorProps = {
+    leagues:LeagueProps[],
+    maxHeight?:number,
+    events:EventProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
+    selected_events:string[],
+    onSelectEvent:(e:EventProps) => void,
+    onDeselectEvent:(e:EventProps) => void,
+    selected_tournaments:string[],
+    onSelectTournament:(t:TournamentProps) => void
+    selected_matches:string[],
+    onSelectMatch:(m:MatchProps) => void
+}
+
+const ContestSelector = ({ maxHeight, leagues, events, onSelectEvent, selected_events, onDeselectEvent }:ContestSelectorProps) => {
+    const [ selector_data, setSelectorData ] = useState<{
+        selected_league?:LeagueProps
+    }>({
+        
+    });
+    const { selected_league } = selector_data;
+
+    useEffect(() => {
+        if(!selected_league){ setSelectorData({ ...selector_data, selected_league: leagues.find(l => l.priority == 1) }) }
+    },[leagues.length]);
+
+    const filtered_events = events.filter(e => e.league_id == selected_league?.league_id).sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix());
+
+
+    const renderEvents = (data:{ item:EventProps, index:number }) => {
+        const selected = selected_events.find(se => se == data.item.event_id) ? true : false;
+        return (
+            <TouchableOpacity style={{ ...view_styles.body_row, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} onPress={() => selected ? onDeselectEvent(data.item) : onSelectEvent(data.item)}>
+                <Checkbox checked={selected} disabled onSelect={() => console.log('')}/>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text size={12} weight='bold' color={Colors.brand.midnight}>{data.item.event_title}</Text>
+                    <Text style={{ marginTop:3 }} theme='body_2'>{data.item.time_detail == 'scheduled' ? moment(data.item.scheduled_datetime).format('MMM DD : hh:mm a') : data.item.time_detail}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+
+    return (
+        <View style={{ ...view_styles.section, maxHeight }}>
+            <View style={{ ...view_styles.section_header }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Select Contest</Text>
+                    <Text theme='body' style={{ marginTop:3 }}>Use league dropdown to filter</Text>
+                </View>
+                <DropDown
+                    selected_value={selected_league?.league_name ?? ''}
+                    dropdown_options={[
+                        { value: 'league', eligible_options: leagues.sort((a,b) => a.priority - b.priority).map(l => l.league_name) }
+                    ]}
+                    onOptionSelect={(option) => {
+                        let league = leagues.find(l => l.league_name == option);
+                        setSelectorData({ ...selector_data, selected_league: league })
+                    }}
+                />
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList
+                    data={filtered_events}
+                    renderItem={renderEvents}
+                    keyExtractor={(item) => item.event_id.toString()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ContestSelector

package/src/MarketMaker/components/Dashboard.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { view_styles } from "../../constants/styles"
+import type { BestAvailableOrderProps, EventProps, ExternalPriceProps, FundOrderProps, FundProps, LeagueProps, MarketProps, MatchProps, OrderProps, SortedContestProps, TournamentProps, TradeProps } from "../../types"
+import { Text } from '../../Components';
+import Contest from './Contest';
+import { MarketMaketHelpers } from '../api';
+import Colors from '../../constants/colors';
+import FundActions from './FundActions';
+
+type DashboardProps = {
+    loaded:boolean,
+    fund?:FundProps,
+    leagues:LeagueProps[],
+    events:EventProps[],
+    markets:MarketProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
+    best_available_orders:BestAvailableOrderProps[],
+    trades:TradeProps[],
+    prices:ExternalPriceProps[],
+    orders:OrderProps[],
+    fund_orders:FundOrderProps[],
+    external_name?:string,
+    onSetMarket:(orders:OrderProps[], market:MarketProps, prices:ExternalPriceProps[]) => void,
+    onClearMarket:(order_ids:string[]) => void,
+    onWorkCapital:(amount:number) => void,
+    onLayoffCapital: (amount: number) => void,
+    onDepositFund: (amount:number) => void
+}
+
+
+const Dashboard = ({ fund, loaded, external_name, prices, leagues, events, tournaments, matches, markets, orders, fund_orders, best_available_orders, trades, onSetMarket, onClearMarket, onWorkCapital, onLayoffCapital, onDepositFund }:DashboardProps) => {
+    const [ dash_size, setDashSize ] = useState({ height:400, width:400 });
+    const contests = MarketMaketHelpers.sortContests(events, tournaments, matches, markets)
+    const renderContests = (data:{item:SortedContestProps, index:number}) => {
+        if(!fund){ return <></> }
+        const league = leagues.find(l => l.league_id == data.item.league_id)
+        const contest_orders = orders.filter(o => o.event_type == data.item.contest_type && o.event_id == data.item.id);
+        const contest_fund_orders = fund_orders.filter(fo => contest_orders.map(o => o.order_id.toString()).includes(fo.order_id.toString()));
+        const contest_trades = trades.filter(t => t.event_type == data.item.contest_type && t.event_id == data.item.id);
+        const contest_ba = best_available_orders.filter(o => o.event_type == data.item.contest_type && o.event_id == data.item.id);
+        
+        const event = events.find(e => e.event_id == data.item.id && data.item.contest_type == 'team');
+        const tournament = tournaments.find(t => t.tournament_id == data.item.id && data.item.contest_type == 'tournament');
+        const match = matches.find(m => m.match_id == data.item.id && data.item.contest_type == 'match');
+        const contest_prices = prices.filter(p => p.event_type == data.item.contest_type && p.event_id == data.item.id);
+        const book_prices = contest_prices.filter(p => p.external_name == external_name)
+        return (
+            <View style={{ minWidth:335 }} key={`${data.item.contest_type}${data.item.id}`}>
+                <Contest
+                    contest_id={data.item.id}
+                    contest_type={data.item.contest_type}
+                    time_detail={data.item.time_detail}
+                    league={league}
+                    event={event}
+                    tournament={tournament}
+                    match={match}
+                    fund={fund}
+                    contest_title={data.item.title}
+                    latest_trades={contest_trades}
+                    best_available_orders={contest_ba}
+                    external_prices={book_prices}
+                    backup_prices={contest_prices}
+                    orders={contest_orders}
+                    fund_orders={contest_fund_orders}
+                    onSetMarket={onSetMarket}
+                    onClearMarket={onClearMarket}
+                    markets={data.item.markets}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, flexGrow:1, flexShrink:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout;
+            setDashSize({ width, height })
+        }}>
+            <View style={{ ...view_styles.section_header }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Dashboard</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Select contests and markets to see activity and market options</Text>
+                </View>
+            </View>
+            {fund?
+            <FundActions
+                fund={fund}
+                onDepositFund={onDepositFund}
+                onLayoffCapital={onLayoffCapital}
+                onWorkCapital={onWorkCapital}
+                onReleaseFunds={() => console.log('WITDHRAW!!!')}
+            />
+            :<></>}
+            <View style={{ maxWidth: dash_size.width, flexDirection:'row', flexWrap:'wrap' }}>
+                {contests.sort((a,b) => a.scheduled_datetime.unix() - b.scheduled_datetime.unix()).map((c,i) => {
+                    return renderContests({ item: c, index:i })
+                })}
+            </View>
+            {!loaded ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                <View style={{ ...view_styles.section, minWidth:200, minHeight:200, justifyContent:'center', alignItems:'center' }}>
+                    <ActivityIndicator style={{ alignSelf:'center'}} size='large' color={Colors.brand.midnight} />
+                    <Text style={{ marginTop:10 }} theme='header_2'>Loading Your Data...</Text>
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default Dashboard

package/src/MarketMaker/components/FundActions.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, FlatList } from 'react-native';
+import type { FundProps } from "../../types";
+import { view_styles } from '../../constants/styles';
+import { Button, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+
+type FundActionsProps = {
+    fund:FundProps,
+    onWorkCapital:(amount:number) => void,
+    onLayoffCapital:(amount: number) => void,
+    onDepositFund:(amount: number) => void,
+    onReleaseFunds:(amount:number) => void
+}
+
+const FundActions = ({ fund, onWorkCapital, onLayoffCapital, onDepositFund }:FundActionsProps) => {
+    const [ show_actions, setShowActions ] = useState(false);
+    const [ selected_action, setSelectedAction ] = useState<any | undefined>(undefined);
+    const [ amount, setAmount ] = useState('');
+
+    const actions = [
+        {action:'deposit', label:'Deposit Capital', color:Colors.utility.success},
+        {action:'work', label:'Work Capital', color:Colors.brand.electric},
+        {action:'layoff', label:'Layoff Capital', color:Colors.utility.error}
+    ]
+
+    const renderActions = (data:{item:any, index:number}) => {
+        return (
+            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => setSelectedAction(data.item)}>
+                <View style={{ flex:1 }}>
+                    <Text size={14} color={data.item.color} weight='semibold'>{data.item.label}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+    let action_valid = selected_action && !isNaN(parseFloat(amount)) ? true : false
+
+    const handleAction = (selected_action:{ action:string }) => {
+        setSelectedAction(undefined);
+        setShowActions(false);
+        switch(selected_action.action){
+            case 'deposit':
+                return onDepositFund(parseFloat(amount))
+            case 'work':
+                return onWorkCapital(parseFloat(amount))
+            case 'layoff':
+                return onLayoffCapital(parseFloat(amount))
+            default: return alert('Not handled')
+        }
+    }
+
+    return (
+        <View style={{ ...view_styles.section_header, zIndex:1 }}>
+            <View style={{ flex:1 }}>
+                <Text theme='header'>{fund.name}</Text>
+                <Text style={{ marginTop:3 }} theme='body'>${fund.invested_capital.toFixed(2)} Total Invested</Text>
+            </View>
+            <View style={{ padding:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                <Text textAlign='center' size={14} color={Colors.utility.success}>${fund.available_capital.toFixed(2)}</Text>
+                <Text textAlign='center' size={14} color={Colors.utility.success}>Available</Text>
+            </View>
+            <View style={{ padding:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                <Text textAlign='center' size={14} color={Colors.brand.electric}>${fund.working_capital.toFixed(2)}</Text>
+                <Text textAlign='center' size={14} color={Colors.brand.electric}>Working</Text>
+            </View>
+            <View style={{ padding:10 }}>
+                <Text textAlign='center' size={14} color={Colors.brand.midnight}>${fund.deployed_capital.toFixed(2)}</Text>
+                <Text textAlign='center' size={14} color={Colors.brand.midnight}>Deployed</Text>
+            </View>
+            <Button
+                title='ACTIONS'
+                style={{ marginLeft:10 }}
+                onPress={() => setShowActions(true)}
+                backgroundColor={Colors.brand.electric}
+                title_color={Colors.shades.white}
+            />
+            {show_actions ?
+            <View style={{ position:'absolute', top:0, right:0 }}>
+                <View style={{ ...view_styles.section, minWidth:275 }}>
+                    <View style={{ ...view_styles.section_header }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header_2'>Fund Actions</Text>
+                        </View>
+                        <Button
+                            title='X'
+                            title_color={Colors.brand.midnight}
+                            borderRadius={100}
+                            backgroundColor={Colors.shades.shade100}
+                            onPress={() => setShowActions(false)}
+                        />
+                    </View>
+                    {!selected_action ?
+                    <View style={{ ...view_styles.section_body, padding:0 }}>
+                        <FlatList
+                            data={actions}
+                            key={'action_list'}
+                            keyExtractor={(item) => item.action}
+                            renderItem={renderActions}
+                        />
+                    </View>
+                    :
+                    <View>
+                        <View style={{ ...view_styles.section_body, padding:0 }}>
+                            <View style={{ padding:10 }}>
+                                <Text size={14} color={Colors.brand.midnight} textAlign='center'>{selected_action.label}</Text>
+                            </View>
+                            <View style={{ ...view_styles.body_row }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='bold'>$</Text>
+                                <TextInput
+                                    style={{ ...view_styles.input, marginLeft:3, flex:1 }}
+                                    placeholder='0'
+                                    placeholderTextColor={Colors.shades.shade600}
+                                    value={amount}
+                                    onChangeText={(text) => setAmount(text)}
+                                />
+                            </View>
+                        </View>
+                        <View style={{ ...view_styles.section_footer }}>
+                            <Button
+                                title='CANCEL'
+                                style={{ flex:1, minWidth:80, marginRight:5 }}
+                                borderRadius={8}
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.error}
+                                onPress={() => setSelectedAction(undefined)}
+                            />
+                            <Button
+                                title='SUBMIT'
+                                style={{ flex:2, opacity: action_valid ? 1 : 0.5 }}
+                                disabled={!action_valid}
+                                borderRadius={8}
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.success}
+                                onPress={() => handleAction(selected_action)}
+                            />
+                        </View>
+                    </View>
+                    
+                    }
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+
+}
+
+export default FundActions