be-components 1.0.9 → 1.1.0

package/src/Socket/api/index.ts

@@ -0,0 +1,15 @@
+
+import { APIOverrides } from '../../ApiOverrides/index';
+let WS_SVC_API = '';
+
+export { SocketAPI }
+
+const SocketAPI = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        WS_SVC_API = endpoints['WS_SVC_API'] as string;
+    },
+    socketConnect: () => {
+        return new WebSocket(WS_SVC_API)
+    }
+}

package/src/Socket/index.tsx

@@ -0,0 +1,96 @@
+import { SocketAPI } from './api/index';
+import { useEffect, useState } from "react"
+import { AppState, ActivityIndicator } from 'react-native';
+import Colors from '../constants/colors';
+
+type SocketManagerProps = {
+    access_token?:string,
+    distinct_id?:string,
+    onConnect:() => void,
+    onDisconnect:() => void,
+    onSocketEvent:(event:any) => void,
+    subscribed_events: string[]
+}
+
+const SocketManager = ({ access_token, distinct_id, onSocketEvent, subscribed_events, onConnect, onDisconnect }:SocketManagerProps) => {
+    const [ visible, setVisible ] = useState(true);
+    const [ ws, setWs ] = useState<any>();
+    const [ connected, setConnected ] = useState(false);
+
+    useEffect(() => {
+        SocketAPI.setEnvironment();
+        AppState.addEventListener('change', handleEventChange)
+        return () => {
+            console.log('closed!!!')
+        }
+    },[])
+
+    useEffect(() => {
+        if(visible){ 
+            console.log(ws?.readyState)
+           if(!ws || ws.readyState != 1) { return connectSocket(access_token, distinct_id) }
+           if(access_token && distinct_id){ socketAuthenticate(access_token, distinct_id) }
+        }
+        else {
+            if(ws){ ws.close() }
+        }
+    },[visible, access_token, distinct_id])
+
+
+    const handleEventChange = (state:string) => {
+        if(state == 'active'){ setVisible(true) }
+        else { setVisible(false) }
+    }
+
+    const connectSocket = (access_token?:string, distinct_id?:string) => {
+        let new_ws = SocketAPI.socketConnect();
+        let sub:any = undefined
+        new_ws.onopen = async() => {
+            setConnected(true)
+            onConnect();
+            new_ws.send(JSON.stringify({ type: 'PING', data: new Date().toTimeString() }));
+            if(access_token && distinct_id){
+                new_ws.send(JSON.stringify({
+                    type: 'AUTHENTICATE',
+                    access_token,
+                    device_id: distinct_id
+                }))
+            }
+        }
+
+        new_ws.onmessage = (body:any) => {
+            let message = JSON.parse(body.data);
+            if(message.type == 'PONG' && new_ws && new_ws.readyState == 1){ 
+                setTimeout(() => { 
+                    if(new_ws && new_ws.readyState == 1){
+                        new_ws.send(JSON.stringify({ type: 'PING', data: new Date().toTimeString() })) 
+                    }
+                }, 10000); 
+            }
+            if(subscribed_events.includes(message.type)){ onSocketEvent(message) }
+        }
+        new_ws.onclose = () => {
+            //setWs(undefined);
+            if(sub){ sub.remove() }
+            setConnected(false)
+            onDisconnect();
+        }
+        setWs(new_ws);
+    }
+
+    const socketAuthenticate = (access_token:string, device_id:string) => {
+        if(!ws || ws.readyState !== 1){ return } //Cannot set authenticate without a connected websocket
+        ws.send(JSON.stringify({
+            type: 'AUTHENTICATE',
+            access_token,
+            device_id
+        }))
+    }
+    if(ws && connected){ return <></> }
+    return (
+        <ActivityIndicator style={{ position:'absolute', bottom:5, right:5 }} size='large' color={Colors.brand.midnight}/>
+    )
+    
+}
+
+export default SocketManager

package/src/Squares/api/index.ts

@@ -0,0 +1,69 @@
+import axios from "axios"
+import { APIOverrides } from "../../ApiOverrides"
+import type { BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../../types"
+import moment from "moment-mini"
+
+let AUTH_SVC_API = ''
+let TP_SVC_API = ''
+let EVENT_SVC_API = ''
+//let MK_SVC_API = ''
+
+export { SquaresApi, SqauresHelpers }
+
+const SquaresApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        TP_SVC_API = endpoints['TP_SVC_API'] as string;
+        EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        //MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    getSquareCompetitionById: async(sq_comp_id:string):Promise<{ squares_competition:SquaresCompetitionProps, square_results:SquareResultProps[], squares:SquareProps[], player_squares:PlayerSquareProps[], square_offers:SquareOfferProps[], squares_type:SquaresTypeProps, squares_payout_type: SquaresPayoutProps, player_square_history:PlayerSquareProps[] }> => {
+        const resp = await axios.get(`${TP_SVC_API}/tp/squares/comp/details/${sq_comp_id}`)
+        return resp.data
+    },
+    getEventsByEventIds: async(event_ids:string[]):Promise<EventProps[]> => {
+        const resp = await axios.post(`${EVENT_SVC_API}/v1/events/bulk/get`, { attribute:'event_id', values: event_ids })
+        return resp.data.events
+    },
+    getLeagueById: async(league_id:string):Promise<LeagueProps> => {
+        const resp = await axios.get(`${EVENT_SVC_API}/v1/leagues/league/${league_id}`)
+        return resp.data.league
+    },
+    buySquares: async(sq_comp_id:string, player_squares:PlayerSquareProps[]):Promise<BuySquaresResponseProps> => {
+        const resp = await axios.post(`${TP_SVC_API}/tp/squares/square/buy`, { sq_comp_id, player_squares })
+        return resp.data
+    },
+    offserSquare: async(square_offer:SquareOfferProps):Promise<OfferResponseProps> => {
+        const resp = await axios.post(`${TP_SVC_API}/tp/squares/square/offer`, { square_offer })
+        return resp.data
+    },
+    getPlayersByPlayerIds : async(player_ids:string[]):Promise<PublicPlayerProps[]> => {
+        if(player_ids.length == 0){ return [] }
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/bulk/get`, { player_ids })
+        return resp.data.players
+    }
+}
+
+
+const SqauresHelpers = {
+    getCompStatus:(event?:EventProps, squares_competition?:SquaresCompetitionProps) => {
+        if(!event){ return 'closed' }
+        if(['complete','closed','postponed','cancelled'].includes(event?.status)){ return 'closed' }
+        if(!squares_competition){ return 'not_started' }
+        let now = moment()
+        if(moment(squares_competition.begin_datetime).isAfter(now)){ return 'not_started' }
+        if(squares_competition.complete_ind){ return 'closed' }
+        return 'in_progress'
+    },
+    getOwnerShipPercents : (ps:PlayerSquareProps[]) => {
+        let active_ps = ps.filter(p => p.status == 'active');
+        const unique_players = [ ...new Set(active_ps.map(s => s.player_id)) ];
+        const ownerships: { player_id: string, owned_squares: number, owned_pct: number }[] = []
+        unique_players.map(id => {
+            let id_ps = active_ps.filter(p => p.player_id == id);
+            ownerships.push({ player_id: id, owned_squares:id_ps.length, owned_pct: id_ps.length / active_ps.length })
+        })
+        return ownerships.sort((a,b) => b.owned_squares - a.owned_squares)
+    }
+}

package/src/Squares/components/BidForm.tsx

@@ -0,0 +1,85 @@
+import { ActivityIndicator, FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
+import { view_styles } from '../../constants/styles';
+import { Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { PlayerSquareProps, SquareProps } from '../../types';
+import BidToggle from './BidToggle';
+
+type BidFormProps = {
+    player_id?:string,
+    market_type:string,
+    home_abbr?:string,
+    width:number,
+    away_abbr?:string,
+    submit_ready: { is_loading:boolean, is_ready:Boolean }
+    onSubmitBid: () => void,
+    onClearBids: () => void,
+    onBidAmountChange: (player_bid:PlayerSquareProps, square:SquareProps, direction: 'increase'|'decrease') => void,
+    onRequestAuthenticate: () => void,
+    square_bids:PlayerSquareProps[],
+    squares:SquareProps[]
+}
+const BidForm = ({ player_id, width, market_type, home_abbr, away_abbr, submit_ready, square_bids, squares, onSubmitBid, onClearBids, onBidAmountChange, onRequestAuthenticate }:BidFormProps) => {
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+    const total_bid_amount = square_bids.reduce((a,b) => a + b.purchase_price, 0)
+
+
+    const renderBids = (data: { item:PlayerSquareProps, index:number }) => {
+        let square = squares.find(s => s.sq_square_id == data.item.sq_square_id)
+        if(!square){ return ( <></> ) }
+        return (
+            <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View style={{flex:1}}>
+                    <Text theme="body">SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
+                    <Text theme="body_2">Current Bid: {cl}{square.last_purchase_price.toFixed(2)}</Text>
+                </View>
+                <View>
+                    <BidToggle sq_square_id={data.item.sq_square_id} amount={data.item.purchase_price} cl={cl}  onAmountChange={(dir) => onBidAmountChange(data.item, square, dir)}/>
+                </View>
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, width, padding:0, maxHeight:550, maxWidth:600 }}>
+            <ScrollView style={{ flex:1 }}>
+            <View style={ view_styles.section_header }>
+                <View style={{ flex:1 }}>
+                    <Text theme="header">SET BID AMOUNTS</Text>
+                    <Text style={{ marginTop:3 }} color={Colors.utility.error} size={12} weight='regular'>All purchases are final and cannot be removed</Text>
+                </View>
+                <View style={{ height:24, width:24, borderRadius:100, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center', marginLeft: 5 }}>
+                    <Text size={12} color={Colors.shades.white} textAlign='center'>{square_bids.length}</Text>
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList data={square_bids.sort((a,b) => parseInt(a.sq_square_id) - parseInt(b.sq_square_id))} renderItem={renderBids} keyExtractor={(item) => `b-${item.sq_square_id}`}/>
+                <View style={view_styles.body_row}>
+                    <Text style={{ flex:1 }} theme='body'>Total</Text>
+                    <Text theme='header_2'>{cl}{total_bid_amount.toFixed(2)}</Text>
+                </View>
+                <View style={{ ...view_styles.body_row }}>
+                    <TouchableOpacity style={{ flex:1/3, padding:12, borderRadius:4, borderWidth:1, borderColor:Colors.brand.cobalt, justifyContent:'center', alignItems:'center', marginRight:4 }} onPress={() => onClearBids()}>
+                        <Text size={14} weight='semibold' textAlign='center' color={Colors.brand.cobalt}>Clear</Text>
+                    </TouchableOpacity>
+                    {player_id ?
+                    <TouchableOpacity style={{ flex:2/3, padding:12, borderRadius:4, backgroundColor:submit_ready.is_ready?Colors.highlights.highlight400:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center', marginLeft:4, opacity:submit_ready.is_loading?0.5:1 }} onPress={() => onSubmitBid()}>
+                        {submit_ready.is_loading ?
+                        <ActivityIndicator size='small' color={Colors.shades.white}/>
+                        :
+                        <Text size={14} weight='semibold' textAlign='center' color={Colors.shades.white}>{submit_ready.is_ready?'Submit Bids':'Review Bids'}</Text>
+                        }
+                    </TouchableOpacity>
+                    :
+                    <TouchableOpacity style={{ flex:2/3, padding:12, borderRadius:4, backgroundColor:Colors.highlights.highlight400, justifyContent:'center', alignItems:'center', marginLeft:4 }} onPress={() => onRequestAuthenticate()}>
+                        <Text size={14} weight='semibold' textAlign='center' color={Colors.shades.white}>Sign Up</Text>
+                    </TouchableOpacity>
+                    }
+                </View>
+            </View>
+            </ScrollView>
+        </View>
+    )
+}
+
+export default BidForm

package/src/Squares/components/BidToggle.tsx

@@ -0,0 +1,27 @@
+import { TouchableOpacity, View } from "react-native"
+import { Text } from "../../Components"
+import Colors from "../../constants/colors"
+import { view_styles } from "../../constants/styles"
+
+type BidToggleProps = { 
+    cl: string,
+    sq_square_id:string,
+    amount:number,
+    onAmountChange:(dir:'increase'|'decrease') => void
+}
+
+const BidToggle = ({ cl, amount, onAmountChange }:BidToggleProps) => {
+    return (
+        <View style={{ ...view_styles.body_row, borderWidth:1, borderColor:Colors.accents.accent200, borderRadius:4, padding:0 }}>
+            <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:12, borderRightWidth:1, borderRightColor:Colors.accents.accent200}} onPress={() => onAmountChange('decrease')}>
+                <Text size={16} weight='semibold' color={Colors.brand.electric} textAlign='center'>-</Text>
+            </TouchableOpacity>
+            <Text style={{ flex:1, marginLeft:4, marginRight:4 }} theme="header_2">{cl}{amount.toFixed(2)}</Text>
+            <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:12,  borderLeftWidth:1, borderLeftColor:Colors.accents.accent200}} onPress={() => onAmountChange('increase')}>
+                <Text size={16} weight='semibold' color={Colors.brand.electric} textAlign='center'>+</Text>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+export default BidToggle

package/src/Squares/components/BoardStats.tsx

@@ -0,0 +1,70 @@
+import { View, TouchableOpacity } from "react-native"
+import { Icons, Text } from "../../Components"
+import { view_styles } from "../../constants/styles"
+import Colors from "../../constants/colors"
+import type { PlayerSquareProps, SquareProps, SquaresCompetitionProps } from "../../types"
+import { useState } from "react"
+
+type BoardStatsProps = {
+    player_id?:string,
+    squares_competition:SquaresCompetitionProps,
+    squares:SquareProps[],
+    player_squares:PlayerSquareProps[]
+}
+
+const BoardStats = ({ player_id, squares_competition, squares, player_squares }:BoardStatsProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+
+    let total_payout = squares_competition.potential_winnings
+    if(squares_competition.guaranteed_payout && squares_competition.guaranteed_payout > total_payout){ total_payout = squares_competition.guaranteed_payout }
+    let iteration_payout = total_payout / squares_competition.payout_frequency
+    let active_ps = player_squares.filter(ps => ps.status == 'active');
+    const ownership_pct = active_ps.length / squares.length * 100
+    const my_ownership = active_ps.filter(ps => ps.player_id == player_id).length / active_ps.length * 100
+    return (
+        <View style={{ ...view_styles.section, minWidth:350 }}>
+                <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                    <Icons.PieIcon color={Colors.brand.midnight} size={18} />
+                    <View style={{ flex:1, marginLeft:10 }}>
+                        <Text theme="header">BOARD STATS</Text>
+                        <Text style={{ marginTop: 4 }} theme="body_2">Current statistics from the squares board</Text>
+                    </View>
+                    <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
+                </TouchableOpacity>
+                {expanded ?
+                <View style={view_styles.section_body}>
+                    <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{flex:1, marginRight:10}}>
+                            <Text theme="header_2">Unbid Squares</Text>
+                            <Text style={{ marginTop:3 }} theme="body_2">Percent of the board that has no bids</Text>
+                        </View>
+                        <Text theme="header_2">{(squares.length - active_ps.length).toFixed()} ({(100 - ownership_pct).toFixed(2)}%)</Text>
+                    </View>
+                    <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{flex:1, marginRight:10}}>
+                            <Text theme="header_2">My Ownership Pct</Text>
+                            <Text style={{ marginTop:3 }} theme="body_2">How much of the total board do I own? (All unbid squares will be extrapolated based on this ownership pct)</Text>
+                        </View>
+                        <Text theme="header_2">{(my_ownership).toFixed()}%</Text>
+                    </View>
+                    <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{flex:1, marginRight:10}}>
+                            <Text theme="header_2">Current Total Payout</Text>
+                            <Text style={{ marginTop:3 }} theme="body_2">The current total amount to be paid out to the winners</Text>
+                        </View>
+                        <Text size={16} color={Colors.utility.success} weight='bold'>${total_payout.toFixed(2)}</Text>
+                    </View>
+                    <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{flex:1, marginRight:10}}>
+                            <Text theme="header_2">Current Iteration Payout</Text>
+                            <Text style={{ marginTop:3 }} theme="body_2">The current amount to be paid out per quarter</Text>
+                        </View>
+                        <Text size={16} color={Colors.utility.success} weight='bold'>${iteration_payout.toFixed(2)}</Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+    )
+}
+
+export default BoardStats

package/src/Squares/components/EventCard.tsx

@@ -0,0 +1,77 @@
+import { Image, View, TouchableOpacity } from "react-native"
+import { view_styles } from "../../constants/styles"
+import { Icons, Text } from "../../Components"
+import type { EventProps, LeagueProps } from "../../types"
+import moment from "moment-mini"
+import Colors from "../../constants/colors"
+import { useState } from "react"
+
+type EventCardProps = {
+    league?:LeagueProps,
+    event:EventProps
+}
+const EventCard = ({ event, league }:EventCardProps) => {
+    const [ expanded, setExpanded ] = useState(true);
+    const overtime_occurred = event.event_scoring && event.event_scoring.length > 4 ? true : false;
+
+    return (
+        <View style={{ ...view_styles.section, minWidth:350 }}>
+                <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                    <View style={{ flexDirection:'row', alignItems:'center', paddingRight:5, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                        {league ?
+                        <Image
+                            source={{ uri: league.league_image }}
+                            style={{ height:30, width:30, borderRadius:4, marginRight:5 }}
+                            resizeMode="cover"
+                        />
+                        :<></>}
+                    </View>
+                    <View style={{ flex:1, marginLeft:5 }}>
+                        <Text theme="header">{event.away?.market_name} {event.away?.name} vs {event.home?.market_name} {event.home?.name}</Text>
+                        <Text style={{ marginTop:3 }} theme="body_2">{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).add(10, 'days').format('MMM D - hh:mm a') : event.time_detail}</Text>
+                    </View>
+                    <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
+                </TouchableOpacity>
+                {event.event_scoring && expanded ?
+                <View style={view_styles.section_body}>
+                    <View style={view_styles.body_row}>
+                        <Image
+                            source={{ uri: event.away?.image?.url }}
+                            style={{ height:20, width:20, borderRadius:4, marginRight:5 }}
+                            resizeMode="cover"
+                        />
+                        <Text style={{ flex:1 }} theme="body">{event.away?.abbr}</Text>
+                        <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                            {event.event_scoring.map(s => {
+                                return (
+                                    <View style={{ flex:1 }}>
+                                        <Text theme={overtime_occurred && s.period == 4 ? 'error_header_2': 'header_2'}>{s.away_cumulative_score}</Text>
+                                    </View>
+                                )
+                            })}
+                        </View>
+                    </View>
+                    <View style={view_styles.body_row}>
+                        <Image
+                            source={{ uri: event.home?.image?.url }}
+                            style={{ height:20, width:20, borderRadius:4, marginRight:5 }}
+                            resizeMode="cover"
+                        />
+                        <Text style={{ flex:1 }} theme="body">{event.home?.abbr}</Text>
+                        <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                            {event.event_scoring.map(s => {
+                                return (
+                                    <View style={{ flex:1 }}>
+                                        <Text theme={overtime_occurred && s.period == 4 ? 'error_header_2': 'header_2'}>{s.home_cumulative_score}</Text>
+                                    </View>
+                                )
+                            })}
+                        </View>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+    )
+}
+
+export default EventCard

package/src/Squares/components/MySquaresCard.tsx

@@ -0,0 +1,80 @@
+import { View, TouchableOpacity, FlatList } from 'react-native';
+import type { PlayerSquareProps, SquareOfferProps, SquareProps } from '../../types';
+import { view_styles } from '../../constants/styles';
+import { Button, Icons, Text } from '../../Components';
+import { useState } from 'react';
+import Colors from '../../constants/colors';
+import { SquaresApi } from '../api';
+
+type MySquaresCardProps = {
+    player_squares:PlayerSquareProps[],
+    squares:SquareProps[],
+    square_offers:SquareOfferProps[],
+    away_abbr?:string,
+    home_abbr?:string,
+    comp_status: string,
+    onSquareOffer: (square:SquareProps, action:'add'|'remove') => void
+}
+
+const MySquaresCard = ({ player_squares, squares, away_abbr, home_abbr, square_offers, comp_status, onSquareOffer }: MySquaresCardProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    const renderPlayerSquares = (data: { item:PlayerSquareProps, index: number }) => {
+        const square = squares.find(s => s.sq_square_id == data.item.sq_square_id);
+        if(!square){ return <></> }
+        const square_offer = square_offers.find(so => so.sq_player_square_id == data.item.sq_player_square_id && so.status == 'offered');
+        return (
+            <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header_2'>SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
+                    <Text style={{ marginTop:3 }} theme='body_2'>${data.item.purchase_price.toFixed(2)}</Text>
+                </View>
+                {comp_status == 'not_started' ?
+                <View>
+                    {square_offer ?
+                    <Button
+                        title='WITHDRAW'
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.utility.warning}
+                        onPress={async() => await SquaresApi.offserSquare({ ...square_offer, status: 'withdrawn' })}
+                    />
+                    :
+                    <Button
+                        title='SELL'
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.brand.electric}
+                        onPress={() => onSquareOffer(square, 'add')}
+                    />
+                    }
+                </View>
+                :<></>}
+            </View>
+        )
+    }
+
+
+    return (
+        <View style={{ ...view_styles.section, minWidth:350 }}>
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <View style={{ height:18, width:18, borderRadius:100, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center' }}>
+                    <Text size={10} weight='bold' color={Colors.shades.white} textAlign='center'>{player_squares.length}</Text>
+                </View>
+                <View style={{flex:1, marginLeft:10}}>
+                    <Text theme='header'>MY SQUARES</Text>
+                    <Text style={{ marginTop:3 }} theme='body_2'>Square you either own or have the highest bid on</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} size={8} color={Colors.brand.midnight}/>
+            </TouchableOpacity>
+            {expanded ? 
+            <View style={view_styles.section_body}>
+                <FlatList
+                    data={player_squares.sort((a,b) => b.purchase_price - a.purchase_price)}
+                    renderItem={renderPlayerSquares}
+                    keyExtractor={(item) => item.sq_player_square_id.toString()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default MySquaresCard

package/src/Squares/components/OfferForm.tsx

@@ -0,0 +1,94 @@
+import { ActivityIndicator, FlatList, TouchableOpacity, View } from "react-native"
+import { Text } from "../../Components"
+import type { PlayerSquareProps, SquareOfferProps, SquareProps } from "../../types"
+import BidToggle from "./BidToggle"
+import { view_styles } from "../../constants/styles"
+import Colors from "../../constants/colors"
+
+type OfferFormProps = {
+    player_id?:string,
+    market_type:string,
+    home_abbr?:string,
+    away_abbr?:string,
+    width:number
+    submit_ready: { is_loading:boolean, is_ready:Boolean }
+    onSubmitOffer: () => void,
+    onClearOffers: () => void,
+    onOfferAmountChange: (offer:SquareOfferProps, player_square:PlayerSquareProps, direction: 'increase'|'decrease') => void,
+    onRequestAuthenticate: () => void,
+    draft_square_offers:SquareOfferProps[],
+    player_squares:PlayerSquareProps[],
+    squares:SquareProps[]
+}
+
+const OfferForm = ({ player_id, market_type, width, squares, submit_ready, home_abbr, away_abbr, player_squares, draft_square_offers, onRequestAuthenticate, onOfferAmountChange, onClearOffers, onSubmitOffer }:OfferFormProps) => {
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+    const total_offer_amount = draft_square_offers.reduce((a,b) => a + b.amount, 0)
+
+
+    const renderDraftOffers = (data: { item:SquareOfferProps, index:number }) => {
+        let ps = player_squares.find(psQ => psQ.sq_player_square_id == data.item.sq_player_square_id)
+        if(!ps){ return (<></>) }
+        let square = squares.find(s => s.sq_square_id == ps?.sq_square_id)
+        if(!square){ return ( <></> ) }
+        return (
+            <View style={{flex:1, flexDirection:'row', alignItems:'center', marginBottom:8}}>
+                <View style={{flex:1}}>
+                    <Text theme='body'>SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
+                    <Text theme='body_2'>Purchased Price: {cl}{ps.purchase_price.toFixed(2)}</Text>
+                </View>
+                <View>
+                    <BidToggle sq_square_id={square.sq_square_id} amount={data.item.amount} cl={cl}  onAmountChange={(dir) => onOfferAmountChange(data.item, ps, dir)}/>
+                </View>
+            </View>
+        )
+    }
+
+    if(!draft_square_offers[0]){ return <></> }
+
+    return (
+        <View style={{ ...view_styles.section, width, padding:0, maxHeight:550, maxWidth:600 }}>
+            <View style={ view_styles.section_header }>
+                <View style={{ flex:1 }}>
+                    <Text theme="header">SET YOUR {draft_square_offers[0].buy_sell_ind==='buy'?'OFFER AMOUNTS':'SELL PRICE'}</Text>
+                    {draft_square_offers[0].buy_sell_ind === 'buy' ?
+                    <Text style={{ marginTop:3 }} theme="body_2">How much are you willing to offer the current square owner</Text>
+                    :
+                    <Text style={{ marginTop:3 }} theme="body_2">How much are you willing to sell the selected square for?</Text>
+                    }
+                </View>
+                <View style={{ height:24, width:24, borderRadius:100, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center', marginLeft: 5 }}>
+                    <Text size={12} color={Colors.shades.white} textAlign='center'>{draft_square_offers.length}</Text>
+                </View>
+            </View>
+
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList data={draft_square_offers.sort((a,b) => parseInt(a.sq_player_square_id) - parseInt(b.sq_player_square_id))} renderItem={renderDraftOffers} keyExtractor={(item) => `o-${item.sq_player_square_id}`}/>
+                <View style={view_styles.body_row}>
+                    <Text style={{ flex:1 }} theme='body'>Total</Text>
+                    <Text theme='header_2'>{cl}{total_offer_amount.toFixed(2)}</Text>
+                </View>
+                <View style={{ ...view_styles.body_row }}>
+                    <TouchableOpacity style={{ flex:1/3, padding:12, borderRadius:4, borderWidth:1, borderColor:Colors.brand.cobalt, justifyContent:'center', alignItems:'center', marginRight:4 }} onPress={() => onClearOffers()}>
+                        <Text size={14} weight='semibold' textAlign='center' color={Colors.brand.cobalt}>Clear</Text>
+                    </TouchableOpacity>
+                    {player_id ?
+                    <TouchableOpacity style={{ flex:2/3, padding:12, borderRadius:4, backgroundColor:submit_ready.is_ready?Colors.highlights.highlight400:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center', marginLeft:4, opacity:submit_ready.is_loading?0.5:1 }} onPress={() => onSubmitOffer()}>
+                        {submit_ready.is_loading ?
+                        <ActivityIndicator size='small' color={Colors.shades.white}/>
+                        :
+                        <Text size={14} weight='semibold' textAlign='center' color={Colors.shades.white}>{submit_ready.is_ready?'Submit Offers':'Review Offers'}</Text>
+                        }
+                    </TouchableOpacity>
+                    :
+                    <TouchableOpacity style={{ flex:2/3, padding:12, borderRadius:4, backgroundColor:Colors.highlights.highlight400, justifyContent:'center', alignItems:'center', marginLeft:4 }} onPress={() => onRequestAuthenticate()}>
+                        <Text size={14} weight='semibold' textAlign='center' color={Colors.shades.white}>Sign Up</Text>
+                    </TouchableOpacity>
+                    }
+                </View>
+            </View>
+        </View>
+    )
+}
+
+export default OfferForm