be-components 4.2.0 → 4.2.2

package/src/MarketMaker/components/ContestSelector.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { View, FlatList, TouchableOpacity } from 'react-native';
-
+import { FlatList } from 'react-native';
 import type { EventProps, LeagueProps, MatchProps, TournamentProps } from "../../types"
-import { view_styles } from '../../constants/styles';
-import { Checkbox, Text } from '../../Components';
+import { Checkbox } from '../../Components';
 import DropDown from '../../Components/Dropdown';
 import moment from 'moment-mini';
-import Colors from '../../constants/colors';
+import { Button, Text, View } from '../../Components/Themed';
+import SearchBox from '../../Components/SearchBox';
 
 type ContestSelectorProps = {
     leagues:LeagueProps[],
@@ -23,41 +22,44 @@ type ContestSelectorProps = {
     onSelectMatch:(m:MatchProps) => void
 }
 
-const ContestSelector = ({ maxHeight, leagues, events, onSelectEvent, selected_events, onDeselectEvent }:ContestSelectorProps) => {
+const ContestSelector = ({ leagues, events, onSelectEvent, selected_events, onDeselectEvent }:ContestSelectorProps) => {
     const [ selector_data, setSelectorData ] = useState<{
-        selected_league?:LeagueProps
+        selected_league?:LeagueProps,
+        search_value:string
     }>({
-        
+        search_value: ''
     });
-    const { selected_league } = selector_data;
+    const { selected_league, search_value } = 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());
-
+    let 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());
+    if(search_value){
+        filtered_events = filtered_events.filter(e => `${e.away?.market_name} ${e.away?.name} ${e.home?.market_name} ${e.home?.name}`.toLowerCase().includes(search_value.toLowerCase()))
+    }
 
     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)}>
+            <Button style={{ padding:2, flexDirection:'row', alignItems:'center' }} 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 transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text size={12} weight='bold' theme='h1'>{data.item.event_title}</Text>
+                    <Text style={{ marginTop:3 }} theme='light'>{data.item.time_detail == 'scheduled' ? moment(data.item.scheduled_datetime).format('MMM DD : hh:mm a') : data.item.time_detail}</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
         )
     }
 
 
     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>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>Select Contest</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Use league dropdown to filter</Text>
                 </View>
                 <DropDown
                     selected_value={selected_league?.league_name ?? ''}
@@ -70,7 +72,14 @@ const ContestSelector = ({ maxHeight, leagues, events, onSelectEvent, selected_e
                     }}
                 />
             </View>
-            <View style={{ ...view_styles.section_body }}>
+            <View type='body' style={{ maxHeight:300, overflow:'scroll' }}>
+                {selected_league ?
+                <SearchBox
+                    style={{ padding:5 }}
+                    button_style={{ padding:8 }}
+                    onChange={(text) => setSelectorData({ ...selector_data, search_value: text })}
+                />
+                :<></>}
                 <FlatList
                     data={filtered_events}
                     renderItem={renderEvents}

package/src/MarketMaker/components/Dashboard.tsx

@@ -1,12 +1,9 @@
-import React, { useState } from 'react';
-import { View, ActivityIndicator } from 'react-native';
-import { view_styles } from "../../constants/styles"
+import React from 'react';
 import type { AthleteProps, 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';
+import { Text, View } from '../../Components/Themed';
 
 type DashboardProps = {
     loaded:boolean,
@@ -32,10 +29,9 @@ type DashboardProps = {
 }
 
 
-const Dashboard = ({ fund, loaded, external_name, athletes, prices, leagues, events, tournaments, matches, markets, orders, fund_orders, best_available_orders, trades, onOrder, onSetMarket, onClearMarket, onWorkCapital, onLayoffCapital, onDepositFund }:DashboardProps) => {
-    const [ dash_size, setDashSize ] = useState({ height:400, width:400 });
-    console.log(dash_size)
+const Dashboard = ({ fund, external_name, athletes, prices, leagues, events, tournaments, matches, markets, orders, fund_orders, best_available_orders, trades, onOrder, onSetMarket, onClearMarket, onWorkCapital, onLayoffCapital, onDepositFund }:DashboardProps) => {
     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)
@@ -50,7 +46,7 @@ const Dashboard = ({ fund, loaded, external_name, athletes, prices, leagues, eve
         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={{ flexGrow:1, flexShrink:1 }} key={`${data.item.contest_type}${data.item.id}`}>
+            <View key={`${data.item.contest_type}${data.item.id}`}>
                 <Contest
                     contest_id={data.item.id}
                     contest_type={data.item.contest_type}
@@ -79,14 +75,11 @@ const Dashboard = ({ fund, loaded, external_name, athletes, prices, leagues, eve
     }
 
     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>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center' }}>
                 <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>
+                    <Text theme='h1'>Dashboard</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Select contests and markets to see activity and market options</Text>
                 </View>
             </View>
             {fund?
@@ -103,14 +96,6 @@ const Dashboard = ({ fund, loaded, external_name, athletes, prices, leagues, eve
                     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>
     )
 }

package/src/MarketMaker/components/FundOwnershipList.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { View, FlatList, Image } from 'react-native';
+import { FlatList, Image } from 'react-native';
 import type { FundOwnershipProps, PublicPlayerProps } from "../../types"
-import { view_styles } from '../../constants/styles';
-import { Text } from '../../Components';
-import Colors from '../../constants/colors';
 import moment from 'moment-mini';
+import { Text, View } from '../../Components/Themed';
 
 type FundOwnershipListProps = {
     fund_ownerships:FundOwnershipProps[],
@@ -16,30 +14,30 @@ const FundOwnershipList = ({ fund_ownerships, players }:FundOwnershipListProps)
         const player = players.find(p => p.player_id == data.item.player_id);
         if(!player){ return <></> }
         return (
-            <View style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 <Image
                     source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
-                    style={{ height:40, width:40, borderRadius:100 }}
+                    style={{ height:30, width:30, borderRadius:100 }}
                     resizeMode='cover'
                 />
                 <View style={{ flex:1, marginLeft:10 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.first_name} {player.last_name}</Text>
-                    <Text style={{ marginTop:3 }} size={12} weight='regular' color={Colors.brand.midnight}>Owner since {moment(data.item.create_datetime).format('MMM DD YYYY')}</Text>
+                    <Text size={14} theme='h1' weight='bold'>{player.first_name} {player.last_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} weight='regular' theme='description'>Owner since {moment(data.item.create_datetime).format('MMM DD YYYY')}</Text>
                 </View>
-                <Text size={14} weight='bold' color={Colors.brand.midnight}>{(data.item.ownership_pct * 100).toFixed(2)}%</Text>
+                <Text size={14} weight='bold' theme='h1'>{(data.item.ownership_pct * 100).toFixed(2)}%</Text>
             </View>
         )
     }
 
     return (
-        <View style={{ ...view_styles.section }}>
-            <View style={{ ...view_styles.section_header }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>Fund Owners</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Below are the players that have invested in this fund sorted by their ownership pct.</Text>
+        <View>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>Fund Owners</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Below are the players that have invested in this fund sorted by their ownership pct.</Text>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_body, padding:0 }}>
+            <View transparent style={{ padding:0 }}>
                 <FlatList
                     key={'fund_ownerships'}
                     data={fund_ownerships.sort((a,b) => b.ownership_pct - a.ownership_pct)}

package/src/MarketMaker/components/FundSelector.tsx

@@ -1,48 +1,46 @@
 import React from 'react';
-import { View, FlatList, TouchableOpacity } from 'react-native';
-import { view_styles } from "../../constants/styles"
+import { FlatList } from 'react-native';
 import type { FundProps } from '../../types';
-import { Button, Checkbox, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Checkbox, Icons } from '../../Components';
 import { MarketMakerApi } from '../api';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 
 type FundSelectorProps = {
     funds:FundProps[],
     selected_fund_id?:string,
-    maxHeight:number,
     onSelectFund:(f:FundProps) => void,
     onCreateFund:(f:FundProps) => void,
     onEditFund:(f:FundProps) => void
 }
-const FundSelector = ({ selected_fund_id, funds, maxHeight, onSelectFund, onCreateFund, onEditFund }:FundSelectorProps) => {
-
+const FundSelector = ({ selected_fund_id, funds, onSelectFund, onCreateFund, onEditFund }:FundSelectorProps) => {
+    const Colors = useColors();
     const renderFunds = (data:{item:FundProps, index:number}) => {
         const selected = selected_fund_id == data.item.fund_id ? true : false
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} onPress={() => onSelectFund(data.item)}>
+            <Button style={{ padding:2, flexDirection:'row', alignItems:'center' }} onPress={() => onSelectFund(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.name}</Text>
-                    <Text style={{ marginTop:3 }} theme='body_2'>This is a cool fund!</Text>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text size={12} weight='bold' theme='h1'>{data.item.name}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>This is a cool fund!</Text>
                 </View>
-                <TouchableOpacity onPress={() => onEditFund(data.item)}>
-                    <Icons.EditIcon size={18} color={Colors.brand.electric} />
-                </TouchableOpacity>
-            </TouchableOpacity>
+                <Button onPress={() => onEditFund(data.item)}>
+                    <Icons.EditIcon size={18} color={Colors.text.action} />
+                </Button>
+            </Button>
         )
     }
     return (
-        <View style={{ ...view_styles.section, maxHeight }}>
-            <View style={{ ...view_styles.section_header }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>Select Fund</Text>
-                    <Text style={{ marginTop:3 }} theme='body_2'>Select a fund to populate the dashboard with the funds orders and data</Text>
+        <View>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>Select Fund</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Select a fund to populate the dashboard with the funds orders and data</Text>
                 </View>
                 <Button
                     title='NEW'
-                    backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
+                    type='success'
                     onPress={async() => {
                        const new_fund = await MarketMakerApi.createFund('Pending Fund', 100, 'FOR_MONEY');
                        if(!new_fund){ return alert('Unable to process') }
@@ -50,7 +48,7 @@ const FundSelector = ({ selected_fund_id, funds, maxHeight, onSelectFund, onCrea
                     }}
                 />
             </View>
-            <View style={{ ...view_styles.section_body }}>
+            <View transparent>
                 <FlatList
                     key={'market_selector'}
                     data={funds}

package/src/MarketMaker/components/FundingRequestList.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { View, FlatList, Image } from 'react-native';
+import { FlatList, Image } from 'react-native';
 import type { FundingRequestProps, PublicPlayerProps } from "../../types"
-import { view_styles } from '../../constants/styles';
-import { Button, Text } from '../../Components';
-import Colors from '../../constants/colors';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
 
 type FundingRequestListProps = {
     funding_requests:FundingRequestProps[],
@@ -18,30 +16,26 @@ const FundingRequestList = ({ funding_requests, players, onApproveRequest, onDec
         const player = players.find(p => p.player_id == data.item.player_id)
         if(!player){ return <></> }
         return (
-            <View style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View style={{ flexDirection:'row', alignItems:'center' }}>
                 <Image
                     source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                     style={{ height:40, width:40, borderRadius:100 }}
                     resizeMode='cover'
                 />
                 <View style={{ flex:1, marginLeft:10 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.first_name} {player.last_name}</Text>
-                    <Text style={{ marginTop:3 }} size={12} weight='regular' color={Colors.brand.midnight}>Requested on {moment(data.item.create_datetime).format('MMM DD hh:mm a')}</Text>
+                    <Text size={14} theme='h1'>{player.first_name} {player.last_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='description'>Requested on {moment(data.item.create_datetime).format('MMM DD hh:mm a')}</Text>
                 </View>
-                <Text size={14} weight='bold' color={Colors.brand.midnight}>${data.item.amount.toFixed(2)}</Text>
+                <Text size={14} weight='bold' theme='h1'>${data.item.amount.toFixed(2)}</Text>
                 <Button
                     title='DECLINE'
                     style={{ marginRight:5, marginLeft:5 }}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
-                    borderRadius={4}
+                    type='error'
                     onPress={() => onDeclineRequest(data.item.funding_request_id)}
                 />
                 <Button
                     title='APPROVE'
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
-                    borderRadius={4}
+                    type='success'
                     onPress={() => onApproveRequest(data.item.funding_request_id)}
                 />
             </View>
@@ -49,14 +43,14 @@ const FundingRequestList = ({ funding_requests, players, onApproveRequest, onDec
     }
 
     return (
-        <View style={{ ...view_styles.section }}>
-            <View style={{ ...view_styles.section_header }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>Funding Requests</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Below are the pending funding requests.  Approve or decline them.</Text>
+        <View>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10}}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>Funding Requests</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Below are the pending funding requests.  Approve or decline them.</Text>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_body, padding:0 }}>
+            <View transparent>
                 <FlatList
                     key={'funding_requests'}
                     data={funding_requests}

package/src/MarketMaker/components/ManageFundForm.tsx

@@ -7,7 +7,7 @@ import Colors from '../../constants/colors';
 import { MarketMakerApi } from '../api';
 
 type ManageFundFormProps = {
-    fund: FundProps
+    fund?: FundProps
     onFundUpdate:(fund:FundProps) => void,
     onClose:() => void
 }
@@ -24,7 +24,7 @@ const ManageFundForm = ({ fund, onFundUpdate, onClose }:ManageFundFormProps) =>
         setFormData({ ...form_data, draft_fund: fund })
     },[fund])
 
-    if(!draft_fund){ return <></> }
+    if(!draft_fund || !fund){ return <></> }
 
     const is_name_changed = fund.name != draft_fund.name ? true : false
 

package/src/MarketMaker/components/MarketSelector.tsx

@@ -1,41 +1,39 @@
 import React from 'react';
-import { View, FlatList, TouchableOpacity } from 'react-native';
-import { view_styles } from "../../constants/styles"
+import { FlatList } from 'react-native';
 import type { MarketProps } from '../../types';
-import { Checkbox, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Checkbox } from '../../Components';
+import { Button, Text, View } from '../../Components/Themed';
 
 
 type MarketSelectorProps = {
-    maxHeight?:number,
     markets:MarketProps[],
     selected_markets:string[],
     onSelectMarket:(m:MarketProps) => void,
     onDeselectMarket:(m:MarketProps) => void
 }
-const MarketSelector = ({ maxHeight, markets, selected_markets, onSelectMarket, onDeselectMarket }:MarketSelectorProps) => {
+const MarketSelector = ({ markets, selected_markets, onSelectMarket, onDeselectMarket }:MarketSelectorProps) => {
 
     const renderMarkets = (data:{item:MarketProps, index:number}) => {
         const selected = selected_markets.find(se => se == data.item.market_id) ? true : false;
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} onPress={() => selected ? onDeselectMarket(data.item) : onSelectMarket(data.item)}>
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:4 }} onPress={() => selected ? onDeselectMarket(data.item) : onSelectMarket(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.type == 'Stat' ? data.item.stat_label : data.item.type}</Text>
-                    <Text style={{ marginTop:3 }} theme='body_2'>{data.item.description}</Text>
+                    <Text size={12} weight='bold' theme='h1'>{data.item.type == 'Stat' ? data.item.stat_label : data.item.type}</Text>
+                    <Text style={{ marginTop:3 }} theme='light'>{data.item.description}</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
         )
     }
     return (
-        <View style={{ ...view_styles.section, maxHeight }}>
-            <View style={{ ...view_styles.section_header }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>Select Market</Text>
-                    <Text style={{ marginTop:3 }} theme='body_2'>Manage the markets that are shown on the dashboard</Text>
+        <View style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>Select Market</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Manage the markets that are shown on the dashboard</Text>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_body }}>
+            <View transparent style={{ maxHeight:400 }}>
                 <FlatList
                     key={'market_selector'}
                     data={markets}

package/src/MarketMaker/components/OrderForm.tsx

@@ -8,7 +8,7 @@ import { MarketMaketHelpers } from '../api';
 
 type OrderFormProps = {
     fund:FundProps,
-    order:OrderProps,
+    order?:OrderProps,
     available?:number,
     onClose:() => void,
     onSubmit: (order:OrderProps) => void
@@ -28,19 +28,20 @@ const OrderForm = ({ fund, order, available, onClose, onSubmit }:OrderFormProps)
     if(available && available.toFixed(2) == open_amt.toFixed(2)){ available_set = true }
 
     useEffect(() => {
+        if(!order || !fund){ return }
         setOdds(MarketMaketHelpers.getOddsLabel(order.odds))
         if(available){
-            updateWorkingPctForAvailable(available)
+            updateWorkingPctForAvailable(available, fund)
         }
     },[order, available]);
 
-    const updateWorkingPctForAvailable = (avail:number) => {
+    const updateWorkingPctForAvailable = (avail:number, fund:FundProps) => {
         let init_working_pct = avail / fund.working_capital
         if(init_working_pct > 1){ init_working_pct = 1 }
         setWorkingPct((init_working_pct*100).toFixed(2))
     }
 
-    if(!order){ return <></> }
+    if(!order || !fund){ return <></> }
 
     return (
         <View style={{ ...view_styles.section }}>
@@ -94,7 +95,7 @@ const OrderForm = ({ fund, order, available, onClose, onSubmit }:OrderFormProps)
                         title_color={Colors.shades.white}
                         backgroundColor={Colors.brand.electric}
                         onPress={() => {
-                            updateWorkingPctForAvailable(available)
+                            updateWorkingPctForAvailable(available, fund)
                         }}
                     />
                 </View>