be-components 2.4.7 → 2.4.9

package/src/MarketMaker/components/FundOwnershipList.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, 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';
+
+type FundOwnershipListProps = {
+    fund_ownerships:FundOwnershipProps[],
+    players:PublicPlayerProps[]
+}
+const FundOwnershipList = ({ fund_ownerships, players }:FundOwnershipListProps) => {
+
+    const renderFundOwnerships = (data:{ item:FundOwnershipProps, index:number }) => {
+        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 }}>
+                <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}>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>
+            </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>
+            <View style={{ ...view_styles.section_body, padding:0 }}>
+                <FlatList
+                    key={'fund_ownerships'}
+                    data={fund_ownerships.sort((a,b) => b.ownership_pct - a.ownership_pct)}
+                    keyExtractor={(item) => item.fund_ownership_id.toString()}
+                    renderItem={renderFundOwnerships}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default FundOwnershipList

package/src/MarketMaker/components/FundSelector.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, FlatList, TouchableOpacity } from 'react-native';
+import { view_styles } from "../../constants/styles"
+import type { FundProps } from '../../types';
+import { Button, Checkbox, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { MarketMakerApi } from '../api';
+
+
+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 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)}>
+                <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>
+                <TouchableOpacity onPress={() => onEditFund(data.item)}>
+                    <Icons.EditIcon size={18} color={Colors.brand.electric} />
+                </TouchableOpacity>
+            </TouchableOpacity>
+        )
+    }
+    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>
+                <Button
+                    title='NEW'
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={async() => {
+                       const new_fund = await MarketMakerApi.createFund('Pending Fund', 100, 'FOR_MONEY');
+                       if(!new_fund){ return alert('Unable to process') }
+                       onCreateFund(new_fund)
+                    }}
+                />
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList
+                    key={'market_selector'}
+                    data={funds}
+                    renderItem={renderFunds}
+                    keyExtractor={(item) => item.fund_id.toString()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default FundSelector

package/src/MarketMaker/components/FundingRequestList.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View, 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';
+
+type FundingRequestListProps = {
+    funding_requests:FundingRequestProps[],
+    players:PublicPlayerProps[],
+    onApproveRequest:(funding_request_id:string) => void,
+    onDeclineRequest:(funding_request_id:string) => void
+}
+const FundingRequestList = ({ funding_requests, players, onApproveRequest, onDeclineRequest }:FundingRequestListProps) => {
+
+    const renderFundingRequests = (data:{ item:FundingRequestProps, index:number }) => {
+        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 }}>
+                <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>
+                </View>
+                <Text size={14} weight='bold' color={Colors.brand.midnight}>${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}
+                    onPress={() => onDeclineRequest(data.item.funding_request_id)}
+                />
+                <Button
+                    title='APPROVE'
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    borderRadius={4}
+                    onPress={() => onApproveRequest(data.item.funding_request_id)}
+                />
+            </View>
+        )
+    }
+
+    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>
+            <View style={{ ...view_styles.section_body, padding:0 }}>
+                <FlatList
+                    key={'funding_requests'}
+                    data={funding_requests}
+                    keyExtractor={(item) => item.funding_request_id.toString()}
+                    renderItem={renderFundingRequests}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default FundingRequestList

package/src/MarketMaker/components/ManageFundForm.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { View } 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';
+import { MarketMakerApi } from '../api';
+
+type ManageFundFormProps = {
+    fund: FundProps
+    onFundUpdate:(fund:FundProps) => void,
+    onClose:() => void
+}
+const ManageFundForm = ({ fund, onFundUpdate, onClose }:ManageFundFormProps) => {
+    const [ form_data, setFormData ] = useState<{
+        loading:boolean,
+        draft_fund?:FundProps
+    }>({
+        loading:false
+    });
+    const { loading, draft_fund } = form_data;
+
+    useEffect(() => {
+        setFormData({ ...form_data, draft_fund: fund })
+    },[fund])
+
+    if(!draft_fund){ return <></> }
+
+    const is_name_changed = fund.name != draft_fund.name ? true : false
+
+    return (
+        <View style={{ ...view_styles.section }}>
+            <View style={{ ...view_styles.section_header }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Manage Fund</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Update fund settings below and save</Text>
+                </View>
+                <Button
+                    title='X'
+                    title_color={Colors.brand.midnight}
+                    borderRadius={100}
+                    backgroundColor={Colors.shades.shade100}
+                    onPress={() => onClose()}
+                />
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <View style={{ ...view_styles.body_row }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='header_2'>Fund Name</Text>
+                        <View style={{ marginTop:5, flexDirection:'row', alignItems:'center' }}>
+                            <TextInput
+                                style={{ ...view_styles.input }}
+                                value={draft_fund.name}
+                                onChangeText={(text) => setFormData({ ...form_data, draft_fund: { ...draft_fund, name: text } })}
+                            />
+                             <Button
+                                title='SAVE'
+                                backgroundColor={Colors.utility.success}
+                                style={{ opacity: is_name_changed && !loading ? 1: 0.5, marginLeft:10 }}
+                                disabled={!is_name_changed || loading}
+                                onPress={async() => {
+                                    setFormData({ ...form_data, loading: true });
+                                    let new_fund = await MarketMakerApi.udpateFundName(fund.fund_id, draft_fund.name)
+                                    if(!new_fund){ return alert('Unable to process') }
+                                    setFormData({
+                                        ...form_data,
+                                        loading: false,
+                                        draft_fund: new_fund
+                                    });
+                                    onFundUpdate(new_fund)
+                                }}
+                            />
+                        </View>
+                       
+                    </View>
+                </View>
+            </View>
+            
+        </View>
+    )
+}
+
+export default ManageFundForm

package/src/MarketMaker/components/MarketSelector.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, FlatList, TouchableOpacity } from 'react-native';
+import { view_styles } from "../../constants/styles"
+import type { MarketProps } from '../../types';
+import { Checkbox, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+
+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 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)}>
+                <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>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+    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>
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList
+                    key={'market_selector'}
+                    data={markets}
+                    renderItem={renderMarkets}
+                    keyExtractor={(item) => item.market_id.toString()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default MarketSelector

package/src/MarketMaker/components/SetMarketForm.tsx

@@ -0,0 +1,213 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import type { ExternalPriceProps, FundProps, MarketProps, OrderProps } from '../../types';
+import { view_styles } from '../../constants/styles';
+import { Button, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import { MarketMaketHelpers } from '../api';
+
+type SetMarketFormProps = {
+    fund:FundProps,
+    form_key:string,
+    orders:OrderProps[],
+    market:MarketProps,
+    prices:ExternalPriceProps[],
+    spread_pct:string,
+    onSetMarket:(orders:OrderProps[]) => void
+    onClose:() => void
+}
+const SetMarketForm = ({ form_key, orders, market, prices, onClose, onSetMarket }:SetMarketFormProps) => {
+    const [ form_data, setFormData ] = useState<{
+        spread_pct:string,
+        trade_side?:OrderProps,
+        o_side?:OrderProps
+    }>({
+        spread_pct: '5'
+    })
+    const { trade_side, o_side, spread_pct } = form_data;
+
+    const no_vig_data = MarketMaketHelpers.getNoVigPrice(prices, market);
+
+    useEffect(() => {
+        if(!form_key) { return }
+        let trade_side_o = orders.find(o => o.side == market.trade_side);
+        let o_side_o = orders.find(o => o.side != market.trade_side);
+        setFormData({ trade_side:trade_side_o, o_side: o_side_o, spread_pct });
+    },[form_key])
+
+    if(!trade_side || !o_side){ return <></> }
+    const actual_margin = (1 - [trade_side, o_side].reduce((a, b) => a + b.probability, 0)) * 100
+
+    return (
+        <View style={{ ...view_styles.section, minWidth:330 }}>
+            <View style={{ ...view_styles.section_header, paddingLeft:10 }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Set Market</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Customize the orders below or submit</Text>
+                </View>
+                <Button
+                    title='X'
+                    borderRadius={100}
+                    backgroundColor={Colors.shades.shade100}
+                    title_color={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+            <View style={{ ...view_styles.section_body, padding:0 }}>
+                {no_vig_data ?
+                <View style={{ ...view_styles.body_row, padding:10 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='header_2'>{no_vig_data.external_name}</Text>
+                        <Text style={{ marginTop:3 }} theme='body_2'>The NO VIG price retrieved from {no_vig_data.external_name}</Text>
+                    </View>
+                    <Text size={16}>{MarketMaketHelpers.getOddsLabel(no_vig_data.trade_side_odds)}</Text>
+                </View>
+                :<></>}
+                <View style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600, backgroundColor:Colors.shades.shade100 }}>
+                    <View style={{ flex:1, marginRight:10}}>
+                        <Text theme='header_2'>Customize Margin</Text>
+                        <Text style={{ marginTop:3 }} theme='body_2'>Set the margin pct to automatically create prices.</Text>
+                    </View>
+                    {actual_margin.toFixed(2) != parseInt(spread_pct).toFixed(2) ?
+                    <Text size={14} color={actual_margin < 0 ? Colors.utility.error : actual_margin < 5 ? Colors.utility.success : actual_margin > 8 ? Colors.utility.error : Colors.utility.warning} weight='bold'>{actual_margin .toFixed(2)}%</Text>
+                    :<></>}
+                    <TextInput
+                        style={{ ...view_styles.input, width:40 }}
+                        value={spread_pct}
+                        onChangeText={(text) => setFormData({ ...form_data, spread_pct: text })}
+                    />
+                    <Text size={16} color={Colors.brand.midnight}>%</Text>
+                </View>
+                <View style={{ ...view_styles.body_row, paddingBottom:10 }}>
+                    <View style={{ flex:1 }}>
+                        <View style={{ padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>{o_side.title}</Text>
+                        </View>
+                    </View>
+                    <View style={{ flex:1 }}>
+                        <View style={{ padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>{trade_side.title}</Text>
+                        </View>
+                    </View>
+                </View>
+                
+                <View style={{ ...view_styles.body_row }}>
+                    <Text style={{ flex:1 }} textAlign='center' size={14} color={Colors.brand.midnight}>${o_side.open_amt.toFixed(2)}</Text>
+                    <Text size={14} color={Colors.brand.midnight} textAlign='center'>TO STAKE</Text>
+                    <Text style={{ flex:1 }} textAlign='center' size={14} color={Colors.brand.midnight}>${trade_side.open_amt.toFixed(2)}</Text>
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='Review'
+                    style={{ flex:1 }}
+                    borderRadius={4}
+                    backgroundColor={Colors.brand.electric}
+                    title_color={Colors.shades.white}
+                    onPress={() => onSetMarket([o_side, trade_side])}
+                />
+            </View>
+
+        </View>
+    )
+}
+
+export default SetMarketForm
+
+
+/*
+
+                <View style={{ ...view_styles.body_row, padding:10 }}>
+                    <TextInput
+                        style={{ flex:1, ...view_styles.input }}
+                        value={o_side.working_pct}
+                        onChangeText={(text) => {
+                            let open_amt = fund.working_capital * parseFloat(text)
+
+                            setFormData({ 
+                                ...form_data, 
+                                o_side: { 
+                                    ...o_side, 
+                                    working_pct: text, 
+                                    open_amt: open_amt,
+                                    potential_winnings: MarketMaketHelpers.calcPotentialWinnings(open_amt, o_side.odds) 
+                                }
+                            })
+                        }}
+                    />
+                    <Text style={{ marginLeft:5, marginRight:5 }} size={14} color={Colors.brand.midnight}>WORK %</Text>
+                    <TextInput
+                        style={{ flex:1, ...view_styles.input }}
+                        value={trade_side.working_pct}
+                        onChangeText={(text) => {
+                            let open_amt = fund.working_capital * parseFloat(text)
+                            
+                            setFormData({ 
+                                ...form_data, 
+                                trade_side: { 
+                                    ...trade_side, 
+                                    working_pct: text, 
+                                    open_amt: open_amt,
+                                    potential_winnings: MarketMaketHelpers.calcPotentialWinnings(open_amt, trade_side.odds) 
+                                }
+                            })
+                        }}
+                    />
+                </View>
+                <View style={{ ...view_styles.body_row, padding:10 }}>
+                    <TextInput
+                        style={{ flex:1, ...view_styles.input }}
+                        value={o_side.potential_winnings}
+                        onChangeText={(text) => setFormData({ 
+                            ...form_data, 
+                            o_side: { 
+                                ...o_side, 
+                                potential_winnings: text, 
+                                open_amt: MarketMaketHelpers.calcSaleValue(o_side.odds, text) 
+                            }
+                        })}
+                    />
+                    <Text style={{ marginLeft:5, marginRight:5 }} size={14} color={Colors.brand.midnight}>TO WIN</Text>
+                    <TextInput
+                        style={{ flex:1, ...view_styles.input }}
+                        value={trade_side.potential_winnings}
+                        onChangeText={(text) => setFormData({ 
+                            ...form_data, 
+                            trade_side: { 
+                                ...trade_side, 
+                                potential_winnings: text, 
+                                open_amt: MarketMaketHelpers.calcSaleValue(trade_side.odds, text) 
+                            }
+                        })}
+                    />
+                </View>
+                <View style={{ ...view_styles.body_row, padding:10 }}>
+                    <TextInput
+                        style={{ flex:1, ...view_styles.input }}
+                        value={o_side.odds}
+                        onChangeText={(text) => setFormData({ 
+                            ...form_data, 
+                            o_side: { 
+                                ...o_side, 
+                                odds: text,
+                                probability: MarketMaketHelpers.calcProbabilityFromOdds(parseInt(text)),
+                                potential_winnings: MarketMaketHelpers.calcPotentialWinnings(parseInt(text), o_side.potential_winnings) 
+                            }
+                        })}
+                    />
+                    <Text style={{ marginLeft:5, marginRight:5 }} size={14} color={Colors.brand.midnight}>ODDS</Text>
+                    <TextInput
+                        style={{ flex:1, ...view_styles.input }}
+                        value={trade_side.odds}
+                        onChangeText={(text) => setFormData({
+                            ...form_data, 
+                            trade_side: { 
+                                ...trade_side, 
+                                odds: text, 
+                                probability: MarketMaketHelpers.calcProbabilityFromOdds(parseInt(text)),
+                                open_amt: MarketMaketHelpers.calcSaleValue(parseInt(text), trade_side.potential_winnings) 
+                            }
+                        })}
+                    />
+                </View>
+*/

package/src/MarketMaker/components/WeightProgress.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View } from 'react-native';
+import Colors from '../../constants/colors';
+
+type WeightProgressProps = {
+    min_value:number,
+    max_value:number,
+    value: number,
+    width:number
+}
+
+const WeightProgress = ({ width, value }:WeightProgressProps) => {
+    let progress_width = value * width / 2
+    let start_point = width/2
+    if(progress_width < 0){
+        start_point += progress_width
+    }
+    return (
+        <View style={{ alignSelf:'center', width: width, height:4, borderRadius:2, backgroundColor:Colors.shades.white }}>
+            <View style={{ position:'absolute', left:start_point, width:Math.abs(progress_width), backgroundColor:Colors.brand.midnight, height:4, borderRadius:4 }}/>
+        </View>
+    )
+}
+
+export default WeightProgress