be-components 1.0.8 → 1.1.0

package/src/Squares/index.tsx

@@ -0,0 +1,398 @@
+import { useEffect, useState } from "react"
+import { ActivityIndicator, View, Image, TouchableOpacity, ScrollView } from 'react-native';
+import type { BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../types"
+import Colors from "../constants/colors";
+import { SqauresHelpers, SquaresApi } from "./api";
+import { Button, Icons, Text } from "../Components";
+import SquaresBoard from "./components/SquaresBoard";
+import BidForm from "./components/BidForm";
+import SocketManager from "../Socket";
+import EventCard from "./components/EventCard";
+import ResultsCard from "./components/ResultsCard";
+import SquaresDetails from "./components/SquaresDetails";
+import BoardStats from "./components/BoardStats";
+import SquareOwnersCard from "./components/SquareOwners";
+import type { BEEventProps } from "../Observer/api/types";
+import OfferForm from "./components/OfferForm";
+import MySquaresCard from "./components/MySquaresCard";
+import { view_styles } from "../constants/styles";
+
+type SquaresModuleProps = {
+    player_id?:string,
+    distinct_id:string,
+    sq_comp_id:string,
+    onRequestAuthenticate: (auth_strategy_id?:string) => void,
+    onShareCompetition:(squares_competition:SquaresCompetitionProps) => void,
+    onPlayerSelect:(player:PublicPlayerProps) => void,
+    onEvent:(ev:BEEventProps) => void
+}
+
+const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthenticate, onShareCompetition, onPlayerSelect }:SquaresModuleProps) => {
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ module_size, setModuleSize ] = useState({ width:0, height:0 })
+    const [ bid_form_expanded, setBidFormExpanded ] = useState(false);
+    const [ module_data, setModuleData ] = useState<{
+        loading:boolean,
+        loaded:boolean,
+        event?:EventProps,
+        squares_competition?:SquaresCompetitionProps,
+        squares:SquareProps[],
+        league?:LeagueProps,
+        players:PublicPlayerProps[],
+        squares_payout_type?:SquaresPayoutProps,
+        squares_type?: SquaresTypeProps,
+        square_results:SquareResultProps[],
+        square_offers:SquareOfferProps[],
+        player_square_history:PlayerSquareProps[],
+        player_squares:PlayerSquareProps[],
+    }>({
+        loading: false,
+        loaded: false,
+        squares:[],
+        players:[],
+        square_results: [],
+        square_offers: [],
+        player_square_history: [],
+        player_squares: []
+    });
+    const [ board_data, setBoardData ] = useState<{
+        draft_square_offers:SquareOfferProps[],
+        square_bids:PlayerSquareProps[],
+        submit_ready: { is_ready: boolean, is_loading:boolean }
+    }>({
+        draft_square_offers: [],
+        square_bids: [],
+        submit_ready: { is_loading:false, is_ready: false }
+    });
+
+    const { square_bids, draft_square_offers, submit_ready } = board_data;
+    const { loading, league, event, players, loaded, squares_competition, squares, squares_type, squares_payout_type, square_results, square_offers, player_square_history, player_squares } = module_data;
+
+
+    const my_squares = player_squares.filter(ps => ps.status == 'active' && ps.player_id == player_id);
+    const home_abbr = event?.home?.abbr??squares_competition?.event_backup?.home?.abbr
+    const away_abbr = event?.away?.abbr??squares_competition?.event_backup?.away?.abbr
+
+
+    useEffect(() => {
+        if(!sq_comp_id){ return }
+        if(!loaded){ SquaresApi.setEnvironment(); }
+        getDataFromServer(sq_comp_id);
+    },[sq_comp_id])
+
+    const getDataFromServer = async(sq_comp_id:string) => {
+        setModuleData({ ...module_data, loading: true });
+        const d = await SquaresApi.getSquareCompetitionById(sq_comp_id);
+        const evs = await SquaresApi.getEventsByEventIds([d.squares_competition.event_id]);
+        const league_id = evs[0]?.league_id
+        let ps = await SquaresApi.getPlayersByPlayerIds([ ...new Set(d.player_squares.map(ps => ps.player_id)) ])
+        let l:LeagueProps | undefined = undefined
+        if(league_id){
+            l = await SquaresApi.getLeagueById(league_id);
+        }
+        setModuleData({
+            ...module_data,
+            loaded: true,
+            event: evs[0],
+            league: l,
+            squares_competition: d.squares_competition,
+            squares_type: d.squares_type,
+            squares_payout_type: d.squares_payout_type,
+            squares:d.squares,
+            players:ps,
+            square_offers: d.square_offers,
+            square_results: d.square_results,
+            player_squares:d.player_squares,
+            player_square_history: d.player_square_history
+        })
+    }
+
+
+    const handleSubmitBid = async() => {
+        if(!squares_competition){ return }
+        if(!player_id){ return onRequestAuthenticate(squares_competition.auth_strategy_id) }
+        if(!submit_ready.is_ready){
+            setBoardData({ ...board_data, submit_ready: { is_ready: false, is_loading:true } })
+            setTimeout(() => {
+                setBoardData({ ...board_data, submit_ready: { is_ready: true, is_loading:false } })
+            }, 500);
+            return
+        }
+        //if(player?.vouched_status !== 'verified' && squares_competition.market_type === 'FOR_MONEY'){ return alert('Must be verified before purchasing real money squares') }
+        if(submit_ready.is_loading){ return } //Prevent button mashing
+        //SUBMIT BIDS!
+        setBoardData({ ...board_data, submit_ready: { ...submit_ready, is_loading:true } })
+        const resp = await SquaresApi.buySquares(squares_competition.sq_comp_id, square_bids)
+        if(needs_reload){ handleUpdateBoardFromBuy(resp) } //If we somehow got disconnected from the socket, we need to load it
+        setBoardData({ ...board_data, square_bids:[], submit_ready:{ is_loading: false, is_ready: false } })
+    }
+
+    const handleSubmitOffer = async() => {
+        if(draft_square_offers.length === 0 || !draft_square_offers[0]){ return }
+        if(!submit_ready.is_ready){
+            setBoardData({ ...board_data, submit_ready: { is_ready: false, is_loading:true } })
+            setTimeout(() => {
+                setBoardData({ ...board_data, submit_ready: { is_ready: true, is_loading:false } })
+            }, 500);
+            return
+        }
+        if(submit_ready.is_loading){ return } //Prevent button mashing
+        //SUBMIT BIDS!
+        
+        setBoardData({ ...board_data, submit_ready: { ...submit_ready, is_loading:true } })
+        const resp = await SquaresApi.offserSquare(draft_square_offers[0])
+        if(needs_reload){ handleUpdateBoardFromOffer(resp) } //If we somehow got disconnected from the socket, we need to load it
+        setBoardData({ ...board_data, draft_square_offers:[], submit_ready:{ is_loading: false, is_ready: false } })
+    }
+
+    const handleClearBids = () => {
+        setBoardData({ ...board_data, square_bids: [], submit_ready: { is_ready:false, is_loading:false }})
+        setBidFormExpanded(false);
+    }
+
+    const handleClearOffers = () => {
+        setBoardData({ ...board_data, draft_square_offers: [], submit_ready: { is_ready:false, is_loading:false }})
+    }
+
+    const handleSquareBid = (square:SquareProps, action:'remove'|'add') => {
+        if(!squares_competition){ return }
+        //setSubmitReady({ isReady:false, isLoading:false })
+        if(action === 'remove'){
+            return setBoardData({ ...board_data, square_bids: square_bids.filter(b => b.sq_square_id != square.sq_square_id) })
+        }
+        let purchase_price = square.init_cost
+        if(square.last_purchase_price >= square.init_cost){ purchase_price = square.last_purchase_price + 0.50 }
+        let newPS:PlayerSquareProps = {
+            sq_player_square_id:'', sq_comp_id:squares_competition.sq_comp_id, sq_square_id:square.sq_square_id, player_id:'', purchase_price, status:'active', create_datetime:'', last_update_datetime:''
+        }
+        return setBoardData({ ...board_data, square_bids: square_bids.concat(newPS) })
+    }
+
+    const handleBidAmountChange = (square_bid:PlayerSquareProps, square:SquareProps, direction:string) => {
+        let new_purchase_price:number = 0
+        if(direction === 'increase'){
+            new_purchase_price = square_bid.purchase_price + 0.50
+        } else {
+            new_purchase_price = square_bid.purchase_price - 0.50
+            if(new_purchase_price < square.init_cost){ return } //Do not change if the price is less than the initial cost
+            if(new_purchase_price <= square.last_purchase_price){ return } //Do not change if the price is not greater than current bid
+        }
+        
+        square_bid = { ...square_bid, purchase_price:new_purchase_price }
+        setBoardData({ ...board_data, square_bids: square_bids.filter(s => s.sq_square_id != square_bid.sq_square_id).concat(square_bid) })
+    }
+
+    const handleSquareOffer = (square:SquareProps, action:'remove'|'add') => {
+        if(!squares_competition){ return }
+        if(!player_id){ return }
+        //setSubmitReady({ isReady:false, isLoading:false })
+        let ps = player_squares.find(ps => ps.sq_square_id == square.sq_square_id)
+        if(!ps){ return alert('Cannot put offer on this square as it is not owned by anyone') }        
+        if(action === 'remove'){
+            return setBoardData({ ...board_data, draft_square_offers: draft_square_offers.filter(so => so.sq_player_square_id != ps?.sq_player_square_id) })
+        }
+        if(draft_square_offers.length > 0){ return alert('Currently only allowed to offer to buy 1 square at a time') }
+        //Todo - check if there is an existing square offer and update more than the last one (maybe)
+        let purchase_price = ps.purchase_price + 1
+        let newSO:SquareOfferProps = {
+            sq_offer_id:'', sq_comp_id:squares_competition.sq_comp_id, sq_player_square_id:ps.sq_player_square_id, amount:purchase_price, buy_sell_ind:ps.player_id == player_id?'sell':'buy', market_type:squares_competition.market_type,
+            status:'offered', offerer_id: player_id, offeree_id:ps.player_id, create_datetime:'', last_update_datetime:''
+        }
+        if(newSO.buy_sell_ind == 'buy'){
+            let existingSellOffer = square_offers.find(o => o.sq_player_square_id == newSO.sq_player_square_id)
+            if(existingSellOffer){ newSO.amount = existingSellOffer.amount }
+        }
+        if(newSO.buy_sell_ind == 'sell'){
+            let existingSellDraftOffer = draft_square_offers.find(o => o.sq_player_square_id == newSO.sq_player_square_id)
+            if(existingSellDraftOffer){ return alert('You already have an existing sale offer for this square') }
+        }
+        return setBoardData({ ...board_data, draft_square_offers: draft_square_offers.concat(newSO) })
+    }
+
+    const handleUpdateBoardFromOffer = (data:OfferResponseProps) => {
+        
+        setModuleData({
+            ...module_data,
+            player_squares: player_squares.filter(ps => !data.removed_player_squares.map(rps => rps.sq_player_square_id.toString()).includes(ps.sq_player_square_id.toString())).filter(ps => !data.saved_player_squares.find(nps => nps.sq_player_square_id == ps.sq_player_square_id)).concat(data.saved_player_squares),
+            square_offers: square_offers.filter(o => !data.updated_offers.find(no => no.sq_offer_id == o.sq_offer_id)).concat(data.updated_offers)
+        })
+    }
+
+    const handleUpdateBoardFromBuy = (data:BuySquaresResponseProps) => {
+        
+        setModuleData({
+            ...module_data,
+            squares_competition: data.squares_competition,
+            squares: squares.filter(s => !data.updated_squares.find(ns => ns.sq_square_id == s.sq_square_id)).concat(data.updated_squares),
+            player_squares: player_squares.filter(ps => !data.removed_player_squares.map(rps => rps.sq_player_square_id.toString()).includes(ps.sq_player_square_id.toString())).filter(ps => !data.saved_player_squares.find(nps => nps.sq_player_square_id == ps.sq_player_square_id)).concat(data.saved_player_squares)
+        })
+    }
+
+    if(loading || !squares_competition){
+        return (
+            <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.brand.midnight} size='large' />
+        )
+    }
+
+    const comp_status = SqauresHelpers.getCompStatus(event, squares_competition)
+    return (
+        <View style={{ flex:1, backgroundColor:Colors.shades.shade100 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout
+            setModuleSize({ width, height })
+        }}>
+            <ScrollView style={{flex:1}}>
+
+            <View nativeID="squares_header" style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.white }}>
+                <View>
+                    <Image
+                        source={{ uri: squares_competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
+                        style={{ height:50, width:50, borderRadius:4 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>{squares_competition.sq_comp_name}</Text>
+                    <Text style={{ marginTop:4 }} theme='header_2>'>{squares_competition.sq_comp_description}</Text>
+                </View>
+                <TouchableOpacity onPress={() => onShareCompetition(squares_competition)}>
+                    <Icons.ShareIcon color={Colors.brand.midnight} size={14} />
+                </TouchableOpacity>
+            </View>
+            {event ?
+            <EventCard
+                event={event}
+                league={league}
+            />
+            :<></>}
+            <BoardStats
+                player_id={player_id}
+                squares_competition={squares_competition}
+                squares={squares}
+                player_squares={player_squares}
+            />
+
+            {square_results.length > 0 ?
+            <ResultsCard
+                home_abbr={home_abbr}
+                away_abbr={away_abbr}
+                squares={squares}
+                square_results={square_results}
+                onPlayerSelect={onPlayerSelect}
+            />
+            :<></>}
+            <View>
+                <SquaresBoard 
+                    player_id={player_id}
+                    onSquareBid={handleSquareBid}
+                    onSquareOffer={handleSquareOffer}
+                    square_bids={square_bids}
+                    draft_square_offers={draft_square_offers}
+                    squares_competition={squares_competition}
+                    squares={squares}
+                    event={event}
+                    player_squares={player_squares}
+                    player_square_history={player_square_history}
+                    square_results={square_results}
+                    square_offers={square_offers}
+                />
+                {square_bids.length > 0 && !bid_form_expanded ?
+                <View style={{ position:'absolute', flexDirection:'row', alignItems:'center', top:10, left:10, backgroundColor:Colors.shades.shade600, padding:10, borderRadius:8, borderBottomLeftRadius:0,  ...view_styles.float }}>
+                    <Text theme="header">{square_bids.length} Squares</Text>
+                    <Button
+                        title="SET AMOUNTS"
+                        style={{ marginLeft:10 }}
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.brand.electric}
+                        onPress={() => setBidFormExpanded(true)}
+                    />
+                </View>
+                :<></>}
+            </View>
+            {my_squares.length > 0 ?
+            <MySquaresCard
+                player_squares={my_squares}
+                squares={squares}
+                square_offers={square_offers}
+                away_abbr={away_abbr}
+                home_abbr={home_abbr}
+                comp_status={comp_status}
+                onSquareOffer={handleSquareOffer}
+            />
+            :<></>}
+            <SquaresDetails
+                squares_competition={squares_competition}
+                squares_payout_type={squares_payout_type}
+                squares_type={squares_type}
+            />
+            <SquareOwnersCard
+                players={players}
+                player_squares={player_squares}
+                onPlayerSelect={onPlayerSelect}
+            />
+            <SocketManager 
+                //access_token={access_token}
+                onConnect={() => {
+                    if(needs_reload){
+                        setNeedsReload(false);
+                        getDataFromServer(sq_comp_id);
+                    }
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                distinct_id={distinct_id}
+                onSocketEvent={(ev) => {
+                    switch(ev.type){
+                        case 'V1_UPDATE_SQUARE_DETAILS':
+                            let data = ev.data as BuySquaresResponseProps | OfferResponseProps
+                            if(!data.squares_competition || data.squares_competition.sq_comp_id != squares_competition.sq_comp_id){ break } //This isn't this competition;
+                            if(ev.action == 'buy'){ handleUpdateBoardFromBuy(data as BuySquaresResponseProps) }
+                            if(ev.action == 'offer')[ handleUpdateBoardFromOffer(data as OfferResponseProps) ]
+                            break;
+                        default: break;
+                    }
+                }}
+                subscribed_events={['V1_UPDATE_SQUARE_DETAILS']}
+            />
+            </ScrollView>
+            {bid_form_expanded ?
+            <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, justifyContent:module_size.width > 500 ? 'center' : 'flex-end', alignItems:'center', backgroundColor:Colors.shades.black_faded }}>
+                <BidForm
+                    player_id={player_id}
+                    home_abbr={home_abbr}
+                    away_abbr={away_abbr}
+                    width={module_size.width}
+                    squares={squares}
+                    submit_ready={submit_ready}
+                    onBidAmountChange={(pb, sq, dir) => handleBidAmountChange(pb, sq, dir)}
+                    market_type={squares_competition.market_type}
+                    square_bids={square_bids}
+                    onClearBids={handleClearBids}
+                    onRequestAuthenticate={() => onRequestAuthenticate(squares_competition.auth_strategy_id)}
+                    onSubmitBid={() => handleSubmitBid()}
+                />
+            </View>
+            :<></>}
+            {draft_square_offers.length > 0 ?
+            <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, justifyContent:module_size.width > 500 ? 'center' : 'flex-end', alignItems:'center', backgroundColor:Colors.shades.black_faded }}>
+                <OfferForm
+                    player_id={player_id}
+                    draft_square_offers={draft_square_offers}
+                    home_abbr={home_abbr}
+                    width={module_size.width}
+                    away_abbr={away_abbr}
+                    squares={squares}
+                    submit_ready={submit_ready}
+                    market_type={squares_competition.market_type}
+                    player_squares={player_squares}
+                    onClearOffers={handleClearOffers}
+                    onRequestAuthenticate={() => onRequestAuthenticate(squares_competition.auth_strategy_id)}
+                    onOfferAmountChange={() => console.log('hey')}
+                    onSubmitOffer={() => handleSubmitOffer()}
+                />
+            </View>
+            :<></>}
+        </View>
+
+    )
+}
+
+export default SquaresModule

package/src/Wallet/components/ACHAddCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, TouchableOpacity, Image, ScrollView } from 'react-native';
 import type { AccountProps, MyPlayerProps } from '../../types';
 import { Button, Icons, Text } from '../../Components';

package/src/Wallet/components/AccountCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, TouchableOpacity } from "react-native";
 import type { AccountProps } from '../../types';
 import { Icons, Text } from '../../Components';

package/src/Wallet/components/AccountLimitManager.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
 import type { AccountLimitProps, AccountProps } from '../../types';
 import { WalletApi, WalletHelpers } from '../api';

package/src/Wallet/components/AccountManager.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FlatList, View, TouchableOpacity, Image, ScrollView } from 'react-native';
 import type { AccountProps } from '../../types';
 import AccountCard from './AccountCard';

package/src/Wallet/components/AccountSnoozeManager.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
 import type { AccountProps, AccountSnoozeProps } from '../../types';
 import { WalletApi } from '../api';

package/src/Wallet/components/AddressCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import type { PlayerAddressProps } from '../../types';
 import { Button, Text } from '../../Components';

package/src/Wallet/components/AddressManager.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
 import type { LocationProps, MyPlayerProps, PlayerAddressProps } from '../../types';
 import { WalletApi, WalletHelpers } from '../api';

package/src/Wallet/components/DepositCard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { View, ActivityIndicator, Image, ScrollView } from "react-native";
 import type { AccountProps, AccountSnoozeProps, CodeRequestProps, ItemOrderProps, MyPlayerProps, PlayerDepositLimitProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers, WalletApi } from '../api';

package/src/Wallet/components/FundAccountCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, TouchableOpacity, Image, ScrollView } from 'react-native';
 import type { AccountProps, CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
 import { Button, Icons, Text } from '../../Components';

package/src/Wallet/components/ItemOrderCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';

package/src/Wallet/components/ItemOrderDetailCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useEffect, useState } from "react"
 import { FlatList, View, ActivityIndicator} from "react-native"
 import { Text } from '../../Components';

package/src/Wallet/components/LinkAccountManager.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { TouchableOpacity, View, Linking } from "react-native"
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';

package/src/Wallet/components/ManageAccountCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, TouchableOpacity, FlatList, ScrollView } from "react-native";
 import type { AccountActionProps, AccountProps, ItemOrderProps, MyPlayerProps, PlayerBalanceProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
 import { Button, Icons, Text } from '../../Components';

package/src/Wallet/components/ManualACHAdd.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, TouchableOpacity, ScrollView } from "react-native";
 import { Button, Checkbox, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';

package/src/Wallet/components/ManualCardAdd.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, StyleSheet, ScrollView } from "react-native";
 import { WalletApi, WalletHelpers } from '../api';
 import { Button, Icons, Text, TextInput } from '../../Components';

package/src/Wallet/components/MyBalance.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, TouchableOpacity, ScrollView } from "react-native"
 import type { AccountProps, MyPlayerProps, PlayerBalanceProps } from '../../types';
 import { Button, Icons, Text } from '../../Components';

package/src/Wallet/components/OrderManager.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FlatList, View, ActivityIndicator, ScrollView } from 'react-native';
 import { ItemOrderApi } from '../api';
 import type { ItemOrderProps, ItemProps } from '../../types';

package/src/Wallet/components/RemoveAccount.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import type { AccountProps } from '../../types';

package/src/Wallet/components/VerifyACHAccount.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, ScrollView } from 'react-native';
 import { Button, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';

package/src/Wallet/components/WalletActionSelector.tsx

@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, FlatList, ScrollView, TouchableOpacity, Image } from "react-native"
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';

package/src/Wallet/components/WalletSettings.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState } from "react"
 import type { MyPlayerProps, PlayerDepositLimitProps, PlayerReferralProps, PlayerWithdrawLimitProps, PromoProps } from '../../types';
 import { View, TouchableOpacity, ScrollView } from 'react-native';

package/src/Wallet/components/WalletSetup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, Image, TouchableOpacity, Linking, ScrollView } from "react-native";
 import type { MyPlayerProps, WalletSettingsProps } from '../../types';
 import { Button, Checkbox, Icons, Text, TextInput } from '../../Components';

package/src/Wallet/components/WithdrawCard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ActivityIndicator, View, ScrollView } from "react-native";
 import type { AccountProps, ItemOrderProps, MyPlayerProps, PlayerBalanceProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers } from '../api';

package/src/Wallet/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { View, ActivityIndicator, FlatList, TouchableOpacity } from 'react-native';
 import { ItemOrderApi, WalletApi, WalletHelpers } from './api';
 import Colors from '../constants/colors';

package/src/constants/styles.ts

@@ -11,7 +11,12 @@ export const view_styles = StyleSheet.create({
     },
     float: {
         shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1
-    }
+    },
+    section: { margin:10, backgroundColor:Colors.shades.white, borderRadius:8,  shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1 },
+    section_header: { padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 },
+    section_body: { flex:1, padding:20 },
+    section_footer: { padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderTopWidth:1, borderTopColor:Colors.shades.shade600, backgroundColor:Colors.shades.shade100 },
+    body_row : { padding:5, flexDirection:'row', alignItems:'center' }
 })
 
 export const button_styles = StyleSheet.create({
@@ -48,5 +53,13 @@ export const text_styles = StyleSheet.create({
     light_heading_3: {
         fontSize: 12,
         color:Colors.shades.white
-    }
+    },
+    header: { color:Colors.brand.midnight, fontSize: 16, fontFamily: 'barlow-bold', textAlign:'left' },
+    header_2: { color:Colors.brand.midnight, fontSize: 14, fontFamily: 'barlow-semibold', textAlign:'left' },
+    error_header_2: { color:Colors.utility.error, fontSize: 14, fontFamily: 'barlow-semibold', textAlign:'left' },
+
+    body: { color:Colors.brand.midnight, fontSize: 14, fontFamily: 'barlow-regular', textAlign:'left' },
+    error_body: { color:Colors.utility.error, fontSize: 14, fontFamily: 'barlow-regular', textAlign:'left' },
+    body_2: { color:Colors.brand.midnight, fontSize: 12, fontFamily: 'barlow-regular', textAlign:'left' },
+    error_body_2: { color:Colors.utility.error, fontSize: 12, fontFamily: 'barlow-regular', textAlign:'left' }
 })

package/src/index.tsx

@@ -15,6 +15,9 @@ import { PollCampaignApi, PollApi } from "./Poll/api";
 import CompetitionModule from "./Competition";
 import AdServer, { AdProvider } from "./AdServer";
 import BracketRoom from "./Bracket";
+import SocketManager from './Socket';
+import SquaresModule from "./Squares";
+
 
 export {
   Authenticator,
@@ -37,5 +40,7 @@ export {
   CompetitionModule,
   AdServer,
   AdProvider,
-  BracketRoom
+  BracketRoom,
+  SquaresModule,
+  SocketManager
 }