be-components 0.4.9 → 0.5.1

package/src/Wallet/components/AddressManager.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import { FlatList, TouchableOpacity, View } from 'react-native';
+import type { LocationProps, PlayerAddressProps } from '../../types';
+import type { MyPlayerProps } from '../../ProfileManager/api/types';
+import { WalletApi, WalletHelpers } from '../api';
+import AddressCard from './AddressCard';
+import { Button, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+
+type AddressManaertProps = {
+    player:MyPlayerProps
+    location?: {
+        loading: boolean,
+        error?:string,
+        coordinates:any,
+        address_results:any[],
+        player_address?:PlayerAddressProps,
+        region?:string,
+        location?:LocationProps
+    }
+    player_addresses:PlayerAddressProps[],
+    onAddAddress:(address:PlayerAddressProps) => void,
+    onRemoveAddress:(address:PlayerAddressProps) => void,
+    onSelect: (address:PlayerAddressProps) => void
+    onCancel: () => void
+}
+
+const AddressManager = ({ location, player_addresses, onSelect, onCancel, onAddAddress, onRemoveAddress }:AddressManaertProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ draft_address, setDraftAddress ] = useState<PlayerAddressProps|undefined>(undefined)
+
+    const address_errors = WalletHelpers.isAddressValid(draft_address)
+
+
+    const handleCreateAddress = async() => {
+        if(!draft_address){ return } //
+        if(loading){ return } //Prevent button mashing
+        if(address_errors.length > 0){ return }
+        setLoading(true)
+        const new_addy = await WalletApi.createAddress(draft_address)
+        onAddAddress(new_addy)
+        setLoading(false)
+        setDraftAddress(undefined)
+    }
+
+    const handleDeleteAddres = async(address:PlayerAddressProps) => {
+        if(loading){ return } //No no button mash
+        //if(!selected_address){ return } //No selected address
+        setLoading(true)
+        const removed_addy = await WalletApi.deleteAddress(address.player_address_id);
+        onRemoveAddress(removed_addy)
+        setLoading(false)
+    }
+
+    const tryAutoFill = async() => {
+        if(!draft_address || !location?.player_address){ return }
+        setDraftAddress({ ...location.player_address })
+    }
+
+
+
+    const renderAddresses = (data:{ item:PlayerAddressProps, index:number }) => {
+        return (
+            <View style={{ margin:3 }}>
+                <AddressCard 
+                    address={data.item} 
+                    onSelect={(a) => onSelect(a)}
+                    onDelete={async(a) => {
+                        let confirmed = await confirm('Are you sure you would like to remove this address?')
+                        if(confirmed){ handleDeleteAddres(a) }
+                    }}
+                    />
+            </View>
+        )
+    }
+    if(draft_address){
+        return (
+            <View style={{ flex:1, minHeight:600 }}>
+                <View style={{ padding:20 }}>
+                    <Text size={30} color={Colors.brand.midnight} weight='bold'>CREATE NEW ADDRESS</Text>
+                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Use the form below to create a new address.</Text>
+                </View>
+                <View style={{ flex:1, padding:20 }}>
+                    <View nativeID='address_name' style={{ backgroundColor:Colors.shades.shade100, borderRadius:4, margin:5, padding:10 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign='center'>Address Name / Label</Text>
+                        <Text style={{ margin:3 }} size={12} color={Colors.brand.midnight} weight='regular' textAlign='center'>Give address a name (i.e., Home) to make it easily identifiable.</Text>
+                        <TextInput
+                            value={draft_address.name}
+                            placeholder='My Home'
+                            placeholderTextColor={Colors.brand.slate}
+                            onChangeText={(e) => setDraftAddress({ ...draft_address, name: e })}
+                        />
+                        {location?.player_address ?
+                        <TouchableOpacity style={{ marginTop:5, padding:10 }} onPress={() => tryAutoFill()}>
+                            <Text size={14} textAlign='center' weight='regular' color={Colors.brand.electric}>Autofill with Location</Text>
+                        </TouchableOpacity>
+                        :<></>}
+                    </View>
+                    <View nativeID='address_street' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
+                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>Street</Text>
+                        <TextInput 
+                            style={{ flex:1 }}
+                            value={draft_address.street}
+                            onChangeText={(e) => setDraftAddress({ ...draft_address, street: e })}
+                        />
+                    </View>
+                    <View nativeID='address_city' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
+                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>City</Text>
+                        <TextInput 
+                            style={{ flex:1 }}
+                            value={draft_address.city}
+                            onChangeText={(e) => setDraftAddress({ ...draft_address, city: e })}
+                        />
+                    </View>
+                    <View nativeID='address_state' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
+                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>State</Text>
+                        <TextInput 
+                            value={draft_address.state}
+                            placeholder='MN'
+                            style={{ flex:1 }}
+                            placeholderTextColor={Colors.shades.shade600}
+                            onChangeText={(e) => setDraftAddress({ ...draft_address, state: e })}
+                        />
+                    </View>
+                    <Text size={12} color={Colors.utility.warning} textAlign='right'>Two letter codes only accepted</Text>
+                    <View nativeID='address_zip' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
+                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>Zip</Text>
+                        <TextInput 
+                            style={{ flex:1 }}
+                            value={draft_address.zip}
+                            onChangeText={(e) => setDraftAddress({ ...draft_address, zip: e })}
+                        />
+                    </View>
+                </View>
+                <View style={{ flexDirection:'row', padding:10 }}>
+                    <Button
+                        style={{ flex:1, marginRight:5, opacity: 1 }}
+                        title={'CANCEL'}
+                        title_color={Colors.brand.electric}
+                        borderWidth={1}
+                        borderColor={Colors.brand.electric}
+                        padding={15}
+                        onPress={() => setDraftAddress(undefined)}
+                    />
+                    <Button
+                        style={{ flex:3, opacity:address_errors.length == 0 && !loading ? 1 : 0.5 }}
+                        title={'CREATE'}
+                        disabled={address_errors.length > 0 || loading ? true : false}
+                        title_color={Colors.shades.white}
+                        loading={loading}
+                        backgroundColor={Colors.utility.success}
+                        padding={15}
+                        onPress={() => handleCreateAddress()}
+                    />
+                </View>
+                
+            </View>
+        )
+    }
+
+
+    return (
+        <View style={{ flex:1, minHeight:600 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>MY ADDRESSES</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are the addresses we have on file. Manage or add a new one below</Text>
+            </View>
+            {player_addresses.length == 0 ?
+            <View style={{ flex:1, padding:10, borderRadius:8, margin:10, backgroundColor:Colors.shades.shade600, justifyContent:'center', alignItems:'center' }}>
+                <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>Uh Oh!</Text>
+                <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign='center'>It looks like you dont have any saved addresses</Text>
+                <TouchableOpacity style={{ marginTop:20, padding:10, backgroundColor:Colors.brand.electric, borderRadius:4 }} onPress={() => setDraftAddress(WalletHelpers.getEmptyAddress())}>
+                    <Text size={14} color={Colors.shades.white} textAlign='center'>Create New Address</Text>
+                </TouchableOpacity>
+            </View>
+            :<></>}
+            <View style={{ flex:1, padding:20 }}>
+                <FlatList data={player_addresses} renderItem={renderAddresses} />
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    style={{ flex:1, marginRight:5, opacity: 1 }}
+                    title={'CLOSE'}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    style={{ flex:3 }}
+                    title={'NEW ADDRESS'}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => setDraftAddress(WalletHelpers.getEmptyAddress())}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default AddressManager

package/src/Wallet/components/DepositCard.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator } from "react-native";
+import type { MyPlayerProps } from '../../ProfileManager/api/types';
+import type { AccountProps, AccountSnoozeProps, ItemOrderProps, PlayerDepositLimitProps, WalletSettingsProps } from '../../types';
+import { ItemOrderApi, ItemOrderHelpers, WalletApi } from '../api';
+import Colors from '../../constants/colors';
+import { Button, Text, TextInput } from '../../Components';
+import { view_styles } from '../../constants/styles';
+
+type DepositCardProps = {
+    player:MyPlayerProps,
+    wallet_settings:WalletSettingsProps,
+    account:AccountProps,
+    deposit_limit:PlayerDepositLimitProps,
+    onTransact:(draft_order:ItemOrderProps, account_id?:string) => void,
+    onCancel:() => void
+}
+
+const DepositCard = ({ wallet_settings, account, deposit_limit, onTransact, onCancel }:DepositCardProps) => {
+    const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
+    const [ account_snooze, setAccountSnooze ] = useState<AccountSnoozeProps>();
+
+    useEffect(() => {
+        getItemFromServer()
+    },[])
+
+    const getItemFromServer = async() => {
+        const item = await ItemOrderApi.getItemByIdentifier('deposit')
+        const as = await WalletApi.getSnoozeByAccountId(account.account_id);
+        setAccountSnooze(as)
+        setDraftOrder(ItemOrderHelpers.genDepositOrder(item, account))
+    }
+
+    const handleTransact = () => {
+        if(!draft_order){ return }
+        onTransact({ ...draft_order, total_amount: draft_order.amount as number }, account.account_id)
+    }
+
+    let errors = ItemOrderHelpers.isDepositOrdervalid(account, deposit_limit, wallet_settings, draft_order)
+    if(account_snooze?.status == 'active'){ errors.push('This account is currently snoozing and cannot be used to deposit') }
+
+    if(!draft_order){
+        return (
+            <View style={{ padding:20 }}>
+                <ActivityIndicator style={{ alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+            </View>
+        )
+    }
+    
+    return (
+        <View style={{ flex:1 }}>
+            <View nativeID='deposit_rules' style={{ padding:10 }}>
+                <Text size={28} textAlign='center' weight='bold' color={Colors.brand.midnight}>Top up your account</Text>
+                <Text style={{ marginTop:10 }} size={14} textAlign='center' weight='regular' color={Colors.brand.midnight}>Minumum $25 / Maximum ${ItemOrderHelpers.getDepositAvailable(deposit_limit, account).toFixed(2)}</Text>
+            </View>
+            <View style={{ flex:1 }}>
+                <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
+                    <TextInput 
+                        style={{ flex:1 }}
+                        placeholder='25'
+                        placeholderTextColor={Colors.brand.slate}
+                        value={draft_order.amount as string}
+                        onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
+                    />
+                </View>
+                <View nativeID='instant_available' style={{ backgroundColor:Colors.shades.shade100, padding:10, borderRadius:8 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>Instant Deposit Available</Text>
+                    <Text style={{ marginTop:5 }} size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>${deposit_limit.instant_available.toFixed(2)}</Text>
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular' textAlign='center'>Instant deposits are immediately available in your BettorEdge wallet</Text>
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.utility.error} weight='regular' textAlign='center'>All deposits are held for {deposit_limit.hold_days} days before they are eligible for withdraw</Text>
+                </View>
+                {errors.length > 0 ?
+                <View style={{ position:'absolute', bottom:0, left:0, right:0, margin:20, borderRadius:8, padding:20, backgroundColor:Colors.shades.white, ...view_styles.float }}>
+                    <Text style={{ marginBottom:10 }} size={14} color={Colors.brand.midnight}>Please fix the following before continuing</Text>
+                    {errors.map(e => {
+                        return (
+                            <Text size={14} color={Colors.utility.warning}>{e}</Text>
+                        )
+                    })}
+                </View>
+                :<></>}
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    style={{ flex:1, marginRight:5, opacity: 1 }}
+                    title={'CANCEL'}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    style={{ flex:3, opacity: errors.length > 0 ? 0.5: 1 }}
+                    disabled={errors.length > 0 ? true : false}
+                    title={'REVIEW DEPOSIT'}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => handleTransact()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default DepositCard

package/src/Wallet/components/LinkAccountManager.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View, Linking } from "react-native"
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { WalletApi } from '../api';
+import type { AccountProps } from '../../types';
+
+type LinkAccountManagerProps = {
+    ibt_placeholer_account:AccountProps,
+    onCancel: () => void
+    onComplete: (account_id:string) => void
+}
+
+const LinkAccountManager = ({ ibt_placeholer_account, onCancel, onComplete }: LinkAccountManagerProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ try_counter, setTryCounter ] = useState(0);
+    const [ linking, setLinking ] = useState(false);
+    const [ account, setAccount ] = useState<AccountProps>();
+    const [ error, setError ] = useState<string>();
+    const [ redirect_url, setRedirectUrl ] = useState<string>();
+
+    
+    const handleStartLink = async() => {
+        if(loading){ return }//Prevent button mashing
+        setLoading(true);
+        Linking.addEventListener('url', handler)
+        const a = await WalletApi.linkACHAccount(ibt_placeholer_account.account_id)
+        setAccount(a);
+        if(a.status != 'redirect' || !a.redirect_url){ setError('Unable to process') }
+        else { setRedirectUrl(a.redirect_url) }
+        setLoading(false);
+    }
+
+    const handler = (ev:any) => {
+        console.log(ev)
+    }
+
+    const tryGetAccount = async() => {
+        if(!account){ return }
+        if(try_counter > 60){ return } //Stop trying after 75 attempts
+        const a = await WalletApi.getAccountById(account.account_id)
+        setTryCounter(try_counter + 1)
+        setAccount(a);
+        if(a.status == 'redirect'){
+            setTimeout(() => {
+                console.log('trying again!')
+                tryGetAccount()
+            }, 4000);
+        } else {
+            setTryCounter(0);
+            onComplete(a.account_id)
+        }
+    }
+
+    const handleNavOut = async() => {
+        if(!redirect_url){ return }
+        setLinking(true);
+        Linking.openURL(redirect_url)
+        setTimeout(() => {
+            tryGetAccount()
+        }, 18000);
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>LINK NEW ACCOUNT</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Link an account via instant bank transfer and get access to instant deposits and withdraws.</Text>
+            </View>
+            <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                <Icons.IBTFLowIcon size={350} />
+                <View style={{backgroundColor:Colors.shades.shade100, padding:20, marginTop:20}}>
+                    <Text size={16} color={Colors.brand.cobalt} weight='light' textAlign='center' style={{marginBottom:2}}>Using <TouchableOpacity onPress={() => window.open('https://plaid.com/safety', '_blank')}><Text weight='bold' color={Colors.brand.electric} size={18}>Plaid</Text></TouchableOpacity>, you will be asked to securly login to your bank and select the account you wish to link and transact from.</Text>
+                </View>
+            </View>
+            
+            {error?
+            <Text size={14} color={Colors.utility.warning}>{error}</Text>
+            :<></>}
+            {!account || account.status == 'redirect' ?
+            <View nativeID='link_actions' style={{ flexDirection:'row', padding:20  }}>
+                <Button
+                    title='CLOSE'
+                    style={{ flex:1, marginRight:5 }}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onCancel()}
+                />
+                {!redirect_url ?
+                <Button
+                    style={{ flex:3, opacity:loading?0.5:1 }}
+                    disabled={loading}
+                    title='START ACCOUNT LINK'
+                    loading={loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => handleStartLink()}
+                />
+                :
+                <Button
+                    style={{ flex:3, opacity:linking?0.5:1 }}
+                    disabled={linking}
+                    title='FINISH WITH PLAID'
+                    loading={linking}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    padding={15}
+                    onPress={() => handleNavOut()}
+                />
+                }
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default LinkAccountManager

package/src/Wallet/components/ManageAccountCard.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, FlatList } from "react-native";
+import type { AccountActionProps, AccountProps, ItemOrderProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+import { WalletHelpers } from '../api';
+import DepositCard from './DepositCard';
+import type { MyPlayerProps, PlayerBalanceProps } from '../../ProfileManager/api/types';
+import WithdrawCard from './WithdrawCard';
+import AccountLimitManager from './AccountLimitManager';
+import AccountSnoozeManager from './AccountSnoozeManager';
+import RemoveAccountCard from './RemoveAccount';
+
+type ManageAccountCardProps = {
+    player:MyPlayerProps,
+    wallet_settings:WalletSettingsProps,
+    player_balance:PlayerBalanceProps,
+    account:AccountProps,
+    deposit_limit:PlayerDepositLimitProps,
+    withdraw_limit:PlayerWithdrawLimitProps,
+    onClose:() => void,
+    onAccountUpdate:(acct:AccountProps) => void,
+    onTransact:(draft_order:ItemOrderProps, account_id?:string) => void
+}
+
+const ManageAccountCard = ({ player, wallet_settings, player_balance, account, deposit_limit, withdraw_limit, onAccountUpdate, onTransact, onClose }:ManageAccountCardProps) => {
+    const [ active_action, setActiveAction ] = useState('select');
+
+    const account_actions = WalletHelpers.getAccountOptions(account)
+
+    const renderIcon = (action:AccountActionProps) => {
+        switch(action.action_type){
+            case 'deposit':
+                return <Icons.DepositIcon color={Colors.shades.white} size={20} />
+            case 'withdraw':
+                return <Icons.WithdrawIcon color={Colors.shades.white} size={20} />
+            case 'limits':
+                return <Icons.BankIcon color={Colors.shades.white} size={28}/>
+            case 'snoozes':
+                return <Icons.SnoozeIcon color={Colors.shades.white} size={18} />
+            case 'remove':
+                return <Icons.CloseIcon color={Colors.shades.white} size={14} />
+            default: return <></>
+        }
+    }
+
+    const renderAccountActions = (data: { item:AccountActionProps, index:number }) => {
+        if(!account){ return <></> }
+        if(account.ibt_placeholder && !['deposit'].includes(data.item.action_type)){ return <></> }
+        if(data.item.action_type == 'withdraw' && account.account_type == 'paypal'){ return <></> }
+        if(data.item.action_type == 'remove' && account.ibt_placeholder){ return <></> }
+        if(data.item.action_type == 'withdraw' && account.account_type == 'card'){ return <></> }
+        if(data.item.action_type == 'remove' && account.account_type === 'paypal'){ return <></> }
+
+        //if(data.item.action_type == 'deposit' && account.account_type == 'card' && account?.card_detail?.card_type != 'debit'){ return <></> }
+        return (
+            <TouchableOpacity style={{ flex:1, minHeight:80, margin:8, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float, padding:10 }} onPress={() => setActiveAction(data.item.action_type)}>
+                <View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
+                    <View style={{height:36, width:36, backgroundColor:Colors.brand.electric, justifyContent:'center', alignItems:'center', borderRadius:3.6 }}>
+                        {renderIcon(data.item)}
+                    </View>                            
+                    <View style={{marginLeft:16, marginRight:10, flex:1, padding:2}}>
+                        <Text size={14} weight='bold' color={Colors.brand.cobalt}>{data.item.action_title}</Text>
+                        <Text style={{ marginTop:2 }} size={12} weight='regular' color={Colors.brand.cobalt}>{data.item.action_description}</Text>
+                    </View>
+                    <Icons.ChevronIcon direction='right' color={Colors.brand.cobalt} size={12} />                       
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>{account.account_label}</Text>
+                {active_action == 'select' ?
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are the available actions that can be performed on this account!</Text>
+                :<></>}
+            </View>
+            <View style={{ flex:1 }}>
+
+                {active_action == 'select' ?
+                <View style={{flex:1}}>
+                    <View style={{flex:1, padding:20}}>
+                        <FlatList data={account_actions} renderItem={renderAccountActions} />
+                    </View>
+                    <View style={{ padding:20 }}>
+                        <Button
+                            title='BACK'
+                            padding={15}
+                            borderWidth={1}
+                            borderColor={Colors.brand.electric}
+                            title_color={Colors.brand.electric}
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                </View>
+                :active_action == 'deposit' ?
+                    <DepositCard
+                        player={player}
+                        wallet_settings={wallet_settings}
+                        account={account}
+                        deposit_limit={deposit_limit}
+                        onTransact={onTransact}
+                        onCancel={() => setActiveAction('select')}
+                    />
+                :active_action == 'withdraw'?
+                    <WithdrawCard
+                        player={player}
+                        deposit_limit={deposit_limit}
+                        wallet_settings={wallet_settings}
+                        player_balance={player_balance}
+                        account={account}
+                        withdraw_limit={withdraw_limit}
+                        onTransact={onTransact}
+                        onCancel={() => setActiveAction('select')}
+                    />
+                :active_action == 'limits'?
+                    <AccountLimitManager
+                        account={account}
+                        onCancel={() => setActiveAction('select')}
+                        onSetLimit={(al) => console.log(al)}
+                    />
+                :active_action == 'snoozes'?
+                    <AccountSnoozeManager
+                        account={account}
+                        onCancel={() => setActiveAction('select')}
+                        onSnooze={(snz) => console.log(snz)}
+                    />
+                :active_action == 'remove'?
+                    <RemoveAccountCard
+                        account={account}
+                        onCancel={() => setActiveAction('select')}
+                        onRemove={(acct) => {
+                            onAccountUpdate(acct)
+                            onClose()
+                        }}
+                    />
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default ManageAccountCard