be-components 4.8.8 → 4.8.9

package/src/Wallet/api/index.ts

@@ -226,7 +226,8 @@ const ItemOrderHelpers = {
 
         let transactions_remaining = withdraw_limit.withdraws_per_week - withdraw_limit.week_withdraw_count
         if(transactions_remaining <=0){ errors.push(`Already reached your max week withdraw transactions of ${withdraw_limit.withdraws_per_week}`) }
-        let available_for_withdraw = player_balance.balance - deposit_limit.instant_deposits;
+        let balance = Math.floor(player_balance.balance * 100) / 100
+        let available_for_withdraw = balance - deposit_limit.instant_deposits;
         switch(account.account_type){
             case 'card':
                 let card_available = withdraw_limit.card_daily_limit - withdraw_limit.last_days_card_withdraws

package/src/Wallet/components/DepositCard.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, Image, Keyboard, Pressable } from "react-native";
+import { FlatList, Image, Keyboard, Pressable } from "react-native";
 import type { AccountProps, AccountSnoozeProps, CodeRequestProps, FocusPositionProps, ItemOrderProps, MyPlayerProps, PlayerDepositLimitProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers, WalletApi } from '../api';
-import { Icons } from '../../Components';
+import { Checkbox, Icons } from '../../Components';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
 
@@ -22,10 +22,11 @@ type DepositCardProps = {
     onTransact:(draft_order:ItemOrderProps, account_id?:string) => void,
     onCancel:() => void
 }
-
+const sections = [ 'header', 'input', 'limits' ]
 const DepositCard = ({ wallet_settings, code_details, account, deposit_limit, onFocusPosition, onTransact, onCancel }:DepositCardProps) => {
     const Colors = useColors();
     const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
+    const [ instant_disclaimer, setInstantDisclaimer ] = useState(false);
     const [ account_snooze, setAccountSnooze ] = useState<AccountSnoozeProps>();
 
     useEffect(() => {
@@ -47,115 +48,203 @@ const DepositCard = ({ wallet_settings, code_details, account, deposit_limit, on
     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.text.h1} />
-            </View>
-        )
+
+    let order_amount = parseFloat(draft_order?.amount as string);
+    let ach_daily_avail = deposit_limit.ach_daily_limit - deposit_limit.last_days_ach_deposits
+    let card_daily_avail = deposit_limit.card_daily_limit - deposit_limit.last_days_card_deposits
+
+    const instant_alert = errors.length == 0 && order_amount > deposit_limit.instant_available ? true : false
+    const instant_confirmed = !instant_alert ? true : instant_alert && instant_disclaimer ? true : false
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
+                        <View transparent style={{flex:1}}>
+                            <Text size={20} theme='h1'>MAKE A DEPOSIT</Text>
+                            <Text style={{ marginTop:5}} theme='description'>In order to participate in real-money activities, you will need to fund your BettorEdge Wallet.  Please enter the amount you wish to deposit below</Text>
+                        </View>
+                    </View>
+                )
+            case 'input':
+                if(!draft_order){ return <></> }
+                return (
+                    <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
+                        <Text style={{ marginBottom:15 }} size={14} theme='description'>Minumum $25 / Maximum ${ItemOrderHelpers.getDepositAvailable(deposit_limit, account).toFixed(2)}</Text>
+                        <TextInput 
+                            style={{ flexGrow:1, width:200, textAlign:'center', color:Colors.text.success, fontSize:28 }}
+                            placeholder='25'
+                            onFocusPosition={onFocusPosition}
+                            keyboardType='decimal-pad'
+                            value={draft_order.amount as string}
+                            onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
+                        />
+                        <Text style={{ marginTop:15 }} size={14} theme='warning' textAlign='center'>*All deposits are held for {deposit_limit.hold_days} days before they are eligible for withdraw</Text>
+
+                    </View>
+                )
+            case 'limits':
+                return (
+                    <Pressable onPress={() => Keyboard.dismiss()}>
+                        <View float style={{ margin:10 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8, padding:10 }}>
+                                <View transparent style={{ flex:1 }}>
+                                    <Text theme='h1'>My Deposit Limits</Text>
+                                </View>
+                            </View>
+                            <View transparent type='body'>
+                                {account.account_type == 'ach' ? 
+                                    <View type='row' style={{ padding:10 }}>
+                                        <Text theme='description' style={{ flex:1 }}>ACH Daily Limit</Text>
+                                        <Text theme='success'>${deposit_limit.ach_daily_limit.toFixed(2)}</Text>
+                                    </View>
+                                :<></>}
+                                {account.account_type == 'ach' ? 
+                                    <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light}}>
+                                        <Text theme='description' style={{ flex:1 }}>Rolling 24 hour deposits</Text>
+                                        <Text theme='error'>(${deposit_limit.last_days_ach_deposits.toFixed(2)})</Text>
+                                    </View>
+                                :<></>}
+                                {account.account_type == 'ach' ? 
+                                    <View type='row' style={{ padding:20 }}>
+                                        <Text theme='h1' style={{ flex:1 }}>ACH Available</Text>
+                                        <Text theme='h1' color={ach_daily_avail > 25 ? Colors.text.success : Colors.text.error}>${ach_daily_avail.toFixed(2)}</Text>
+                                    </View>
+                                :<></>}
+                                {account.account_type != 'ach' ? 
+                                    <View type='row' style={{ padding:10 }}>
+                                        <Text theme='description' style={{ flex:1 }}>Daily Limit</Text>
+                                        <Text theme='success'>${deposit_limit.card_daily_limit.toFixed(2)}</Text>
+                                    </View>
+                                :<></>}
+                                {account.account_type != 'ach' ? 
+                                    <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light}}>
+                                        <Text theme='description' style={{ flex:1 }}>Rolling 24 hour deposits</Text>
+                                        <Text theme='error'>(${deposit_limit.last_days_card_deposits.toFixed(2)})</Text>
+                                    </View>
+                                :<></>}
+                                {account.account_type != 'ach' ? 
+                                    <View type='row' style={{ padding:20 }}>
+                                        <Text theme='h1' style={{ flex:1 }}>Available</Text>
+                                        <Text theme='h1' color={card_daily_avail > 25 ? Colors.text.success : Colors.text.error}>${card_daily_avail.toFixed(2)}</Text>
+                                    </View>
+                                :<></>}
+                            </View>
+                            <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                                <View transparent style={{ flex:1, marginRight:5 }}>
+                                    <Text theme='h1'>Instant Available</Text>
+                                    <Text style={{ marginTop:2 }} theme='description'>The amount that can be instantly available in your account</Text>
+                                </View>
+                                <Text theme='h1' color={deposit_limit.instant_available > 0 ? Colors.text.success : Colors.text.error}>${deposit_limit.instant_available.toFixed(2)}</Text>
+                            </View>
+                        </View>
+                </Pressable>
+                )
+            case 'referral':
+                if(!code_details?.code_request?.pending_deposit){ return <></> }
+                if(!code_details.promo || !code_details.referrer){ return <></> }
+                if(!['referral_code','referral_sweepstakes'].includes(code_details.promo.type)){ return <></> }
+                return (
+                        <View style={{ margin:15, flexDirection:'row' }}>
+                            <View style={{ justifyContent:'center' }}>
+                                {code_details.referrer?.profile_pic?
+                                <Image
+                                    source={{ uri: code_details.referrer.profile_pic }}
+                                    style={{ height: 60, width:60, borderRadius:4 }}
+                                    resizeMode='cover'
+                                />
+                                :
+                                <Icons.GiftIcon size={40} color={Colors.text.gold} />
+                                }
+                            </View>
+                            <View style={{flex:1, backgroundColor:Colors.absolutes.incentive.gold_faded, padding:10 }}>
+                                <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }} theme='h1'>Give back to {code_details.referrer?.username}</Text>
+                                <Text style={{ paddingTop:5 }} size={12} theme='h2'>Make a qualifying deposit and {code_details.referrer.username} will receive a reward!</Text>
+                            </View>
+                        </View>
+                )
+            default: return <></>
+        }
     }
-    
-    let order_amount = parseFloat(draft_order.amount as string);
+
 
     return (
         <View style={{ flex:1 }}>
-        <View style={{ flex:1 }}>
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
-                <View transparent style={{flex:1}}>
-                    <Text size={20} theme='h1'>MAKE A DEPOSIT</Text>
-                    <Text style={{ marginTop:5}} theme='description'>In order to participate in real-money activities, you will need to fund your BettorEdge Wallet.  Please enter the amount you wish to deposit below</Text>
-                </View>
-            </View>
             <View style={{ flex:1 }}>
-                <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
-                    <Text style={{ marginBottom:15 }} size={14} theme='description'>Minumum $25 / Maximum ${ItemOrderHelpers.getDepositAvailable(deposit_limit, account).toFixed(2)}</Text>
-                    <TextInput 
-                        style={{ flexGrow:1, width:200, textAlign:'center', color:Colors.text.success, fontSize:28 }}
-                        placeholder='25'
-                        onFocusPosition={onFocusPosition}
-                        keyboardType='decimal-pad'
-                        value={draft_order.amount as string}
-                        onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
-                    />
-                    <Text style={{ marginTop:15 }} size={14} theme='warning' textAlign='center'>*All deposits are held for {deposit_limit.hold_days} days before they are eligible for withdraw</Text>
-
-                </View>
-                <Pressable style={{ flex:1 }} onPress={() => Keyboard.dismiss()}>
-
-                {errors.length == 0 && order_amount > deposit_limit.instant_available ?
-                <View float nativeID='instant_available' style={{  padding:5, borderRadius:8, margin:10 }}>
-                    <View style={{ padding:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light  }}>
-                        <View style={{flexDirection:'row', marginBottom:5 }}>
-                            <Icons.AlertIcon color={Colors.text.warning} size={16}/>
-                            <Text style={{ marginLeft:10 }} size={14} color={Colors.text.warning} weight='bold'>INSTANT DEPOSIT NOTICE</Text>
+                <FlatList
+                    data={sections}
+                    key={'deposit_sections'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+                {instant_alert ?
+                <View float nativeID='instant_available' style={{ borderBottomRightRadius:0, borderBottomLeftRadius:0 }}>
+                    <View transparent style={{ borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.text.warning, borderBottomWidth:1, borderBottomColor:Colors.borders.light  }}>
+                        <View transparent style={{flexDirection:'row', padding:18 }}>
+                            <Icons.AlertIcon color={Colors.text.white} size={16}/>
+                            <Text theme='h1' style={{ marginLeft:10 }} size={14} color={Colors.text.white}>INSTANT DEPOSIT NOTICE</Text>
                         </View>
-                        <Text size={14} theme='description'>Transactions take time to leave your account and settle in ours. In order to get you started before they arrive, we allow for some to be instantly available. The remainder is available after settlement.</Text>
                     </View>
-                    <View style={{ padding:5 }}>
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                    <View transparent style={{ padding:5 }}>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
                             <Text style={{ flex:1 }} size={14} theme='h2'>Available Instantly</Text>
                             <Text size={14} theme='h1'>${deposit_limit.instant_available.toFixed(2)}</Text>
                         </View>
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
                             <Text style={{ flex:1 }} theme='h2'>Available after settlement ({deposit_limit.hold_days} days)</Text>
                             <Text size={14} theme='h1'>${(order_amount - deposit_limit.instant_available).toFixed(2)}</Text>
                         </View>
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
                             <Text style={{ flex:1 }} theme='h2'>Total Deposit</Text>
                             <Text size={14} theme='h1'>${order_amount.toFixed(2)}</Text>
                         </View>
                     </View>
+                    <Button style={{ borderRadius:0, flexDirection:'row', alignItems:'center', padding:14, backgroundColor:Colors.views.footer }} onPress={() => setInstantDisclaimer(!instant_disclaimer)}>
+                        <Checkbox color={Colors.text.action} disabled checked={instant_disclaimer} onSelect={() => console.log('')} />
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text size={14} color={Colors.text.action} theme='description'>I understand that ${deposit_limit.instant_available.toFixed(2)} will instantly be added and ${(order_amount - deposit_limit.instant_available).toFixed(2)} will be added after {deposit_limit.hold_days} days.</Text>
+                        </View>
+                    </Button>
                 </View>
-                :<></>}
+                :<></>}                
                 {errors.length > 0 ?
-                <View float style={{ margin:20, borderRadius:8, padding:20 }}>
-                    <Text style={{ marginBottom:10 }} theme='h2'>Please fix the following before continuing</Text>
+                <View float nativeID='errors' style={{ borderBottomRightRadius:0, borderBottomLeftRadius:0 }}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:15, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.text.error, borderBottomWidth:1, borderBottomColor:Colors.borders.light  }}>
+                        <Icons.AlertIcon color={Colors.text.white} size={24}/>
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1' size={14} color={Colors.text.white}>ERRORS</Text>
+                            <Text style={{ marginTop: 3}} theme='description' color={Colors.text.white}>Please fix the following before continuing</Text>
+                        </View>
+                    </View>
+                    <View transparent style={{ padding:10 }}>
                     {errors.map(e => {
                         return (
-                            <Text size={14} color={Colors.text.warning}>{e}</Text>
+                            <Text size={14} theme='h2' color={Colors.text.error}>{e}</Text>
                         )
                     })}
+                    </View>
                 </View>
                 :<></>}
-            </Pressable>
             </View>
-            {code_details && code_details.code_request?.pending_deposit && code_details.promo && code_details.referrer && ['referral_code','referral_sweepstakes'].includes(code_details.promo.type) ?
-            <View style={{ margin:15, flexDirection:'row' }}>
-                <View style={{ justifyContent:'center' }}>
-                    {code_details.referrer?.profile_pic?
-                    <Image
-                        source={{ uri: code_details.referrer.profile_pic }}
-                        style={{ height: 60, width:60, borderRadius:4 }}
-                        resizeMode='cover'
-                    />
-                    :
-                    <Icons.GiftIcon size={40} color={Colors.text.gold} />
-                    }
-                </View>
-                <View style={{flex:1, backgroundColor:Colors.absolutes.incentive.gold_faded, padding:10 }}>
-                    <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }} theme='h1'>Give back to {code_details.referrer?.username}</Text>
-                    <Text style={{ paddingTop:5 }} size={12} theme='h2'>Make a qualifying deposit and {code_details.referrer.username} will receive a reward!</Text>
-                </View>
+            <View type='footer' style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    style={{ flex:1, marginRight:5, opacity: 1 }}
+                    title={'CANCEL'}
+                    type='close'
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    style={{ flex:3, opacity: errors.length > 0 || !instant_confirmed ? 0.5: 1 }}
+                    disabled={errors.length > 0 || !instant_confirmed ? true : false}
+                    title={'REVIEW DEPOSIT'}
+                    type='success'
+                    onPress={() => handleTransact()}
+                />
             </View>
-            :<></>}
-                <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
-                    <Button
-                        style={{ flex:1, marginRight:5, opacity: 1 }}
-                        title={'CANCEL'}
-                        type='close'
-                        onPress={() => onCancel()}
-                    />
-                    <Button
-                        style={{ flex:3, opacity: errors.length > 0 ? 0.5: 1 }}
-                        disabled={errors.length > 0 ? true : false}
-                        title={'REVIEW DEPOSIT'}
-                        type='success'
-                        onPress={() => handleTransact()}
-                    />
-                </View>
-        </View>
         </View>
     )
 }
 
-export default DepositCard
+export default DepositCard
+

package/src/Wallet/components/WithdrawCard.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, Keyboard, Pressable } from "react-native";
+import { ActivityIndicator, FlatList, Keyboard, Pressable } from "react-native";
 import type { AccountProps, FocusPositionProps, ItemOrderProps, MyPlayerProps, PlayerBalanceProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers } from '../api';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
 
 
 type WithdrawCardProps = {
@@ -17,6 +18,7 @@ type WithdrawCardProps = {
     onTransact:(draft_order:ItemOrderProps) => void,
     onCancel:() => void
 }
+const sections = ['header','input','limits']
 const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, withdraw_limit, onFocusPosition, deposit_limit , onCancel}:WithdrawCardProps) => {
     const Colors = useColors();
     const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
@@ -40,6 +42,94 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
     }
 
 
+    let balance = Math.floor(player_balance.balance * 100) / 100
+    let limit_available = withdraw_limit.ach_daily_limit - withdraw_limit.last_days_ach_withdraws
+
+    const renderSections = (data: { item: string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View nativeID='deposit_rules' style={{ padding:10 }}>
+                        <Text size={28} textAlign='center' theme='h1'>Withdraw to your bank</Text>
+                        <Text style={{ marginTop:10 }} size={14} textAlign='center' theme='description'>Withdraws can take up to 3 business days</Text>
+                    </View>
+                )
+            case 'input':
+                if(!draft_order){ return <></> }
+                return (
+                    <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
+                        <TextInput 
+                            style={{ flexGrow:1, width:200, textAlign:'center', color:Colors.text.success, fontSize:28 }}
+                            placeholder='0'
+                            onFocusPosition={onFocusPosition}
+                            keyboardType='decimal-pad'
+                            value={draft_order.amount as string}
+                            onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
+                        />
+                    </View>
+                )
+            case 'limits':
+                const withdraws_available = withdraw_limit.withdraws_per_week - withdraw_limit.week_withdraw_count
+                const avail_for_withdraw = withdraws_available == 0 ? 0 : Math.min(available_for_withdraw, limit_available)
+                return (
+                    <Pressable onPress={() => Keyboard.dismiss()}>
+                        <View float nativeID='withdraw_limits' style={{ margin:10 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                                <View transparent style={{ flex:1 }}>
+                                    <Text theme='h1'>Withdraw Amount Available</Text>
+                                    <Text style={{ marginTop:3 }} theme='description'>Weekly withdraws remaining</Text>
+                                </View>
+                                <View transparent style={{ alignItems:'flex-end' }}>
+                                    <Text theme='h1' color={avail_for_withdraw>0?Colors.text.success:Colors.text.error}>{avail_for_withdraw.toFixed(2)}</Text>
+                                    <Text style={{ marginTop:3 }} theme='description' color={withdraws_available>0?Colors.text.success:Colors.text.error}>{withdraws_available.toFixed()} Remaining</Text>
+                                </View>
+                            </View>
+                            <View transparent type='body'>
+                                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>How is this deteremined?</Text>
+                                        <Text theme='description' style={{ marginTop:3 }}>Use the lessor of the following amounts</Text>
+                                    </View>
+                                </View>
+                                <View transparent type='body' style={{ padding:10 }}>
+                                    <View float style={{ padding:10 }}>
+                                        <View transparent type='row' style={{ padding:4 }}>
+                                            <Text theme='description' style={{ flex:1 }}>My Balance</Text>
+                                            <Text theme='h2'>{balance.toFixed(2)}</Text>
+                                        </View>
+                                        <View transparent type='row' style={{ padding:4, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                                            <Text theme='description' style={{ flex:1 }}>Unsettled Deposits</Text>
+                                            <Text theme='h2' color={Colors.text.error}>(${deposit_limit.instant_deposits.toFixed(2)})</Text>
+                                        </View>
+                                        <View transparent type='row' style={{ padding:4 }}>
+                                            <Text theme='h2' style={{ flex:1 }}>Withdrawable Balance</Text>
+                                            <Text theme='h1'>{available_for_withdraw.toFixed(2)}</Text>
+                                        </View>
+                                    </View>
+                                    <View float style={{ marginTop:20, padding:10 }}>
+                                        <View transparent type='row' style={{ padding:4 }}>
+                                            <Text theme='description' style={{ flex:1 }}>Daily Limit</Text>
+                                            <Text theme='h2'>${withdraw_limit.ach_daily_limit.toFixed(2)}</Text>
+                                        </View>
+                                        <View transparent type='row' style={{ padding:4, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                                            <Text theme='description' style={{ flex:1 }}>Rolling 24 hour withdraws</Text>
+                                            <Text theme='h2' color={Colors.text.error}>(${withdraw_limit.last_days_ach_withdraws.toFixed(2)})</Text>
+                                        </View>
+                                        <View transparent type='row' style={{ padding:4 }}>
+                                            <Text theme='h2' style={{ flex:1 }}>Limit Available</Text>
+                                            <Text theme='h1'>${(limit_available).toFixed(2)}</Text>
+                                        </View>
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                    </Pressable>
+                )
+            default: return <></>
+        }
+    }
+
+
     if(!draft_order){
         return (
             <View style={{ padding:20 }}>
@@ -48,81 +138,34 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
         )
     }
 
-
-    let balance = Math.floor(player_balance.balance * 100) / 100
-    let limit_available = withdraw_limit.ach_daily_limit - withdraw_limit.last_days_ach_withdraws
     return (
         <View style={{ flex:1 }}>
             <View style={{flex:1}}>
-            <View nativeID='deposit_rules' style={{ padding:10 }}>
-                <Text size={28} textAlign='center' theme='h1'>Withdraw to your bank</Text>
-                <Text style={{ marginTop:10 }} size={14} textAlign='center' theme='description'>Withdraws can take up to 3 business days</Text>
-            </View>
-
-            <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
-                <TextInput 
-                    style={{ flexGrow:1, width:200, textAlign:'center', color:Colors.text.success, fontSize:28 }}
-                    placeholder='0'
-                    onFocusPosition={onFocusPosition}
-                    keyboardType='decimal-pad'
-                    value={draft_order.amount as string}
-                    onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
+                <FlatList
+                    data={sections}
+                    key='withdraw_sections'
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
                 />
-            </View>
-            <Pressable style={{ flex:1, justifyContent:'flex-end' }} onPress={() => Keyboard.dismiss()}>
-            <View float nativeID='withdraw_limits' style={{ padding:10, margin:10 }}>
-                <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                    <Text style={{ flex:1 }} size={14} theme='h2'>Weekly Withdraws Available</Text>
-                    <Text size={14} theme='h1'>{withdraw_limit.withdraws_per_week - withdraw_limit.week_withdraw_count}</Text>
-                </View>
-                <View style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:0 }}>
-                    <Text style={{ flex:1 }} size={14} theme='h2'>Available For Withdraw</Text>
-                    <Text size={14} theme='h1'>{Math.min(available_for_withdraw, limit_available).toFixed(2)}</Text>
-                </View>
-                <View style={{ marginTop:5, borderRadius:8, padding:10 }}>
-                    <Text size={14} theme='h2'>Determined by the LESSER OF</Text>
-                    <View nativeID='available_to_withdraw_calculation' style={{ margin:5,  marginTop:10, padding:10, borderRadius:4 }}>
-                        <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
-                            <Text style={{ flex:1 }} size={14} theme='description'>My Balance</Text>
-                            <Text size={14} theme='h2'>${balance}</Text>
-                        </View>
-                        <View style={{ padding:5, flexDirection:'row', alignItems:'center', paddingLeft:15 }}>
-                            <Text style={{ flex:1 }} size={14} theme='description'>Instant Deposits (unsettled)</Text>
-                            <Text size={14} color={Colors.text.error} weight='semibold'>${deposit_limit.instant_deposits.toFixed(2)}</Text>
-                        </View>
-                        <View style={{ padding:5, flexDirection:'row', alignItems:'center', borderTopWidth:1, borderTopColor:Colors.borders.light }}>
-                            <Text style={{ flex:1 }} size={14} theme='h2'>Withdrawable Balance</Text>
-                            <Text size={14} theme='h1'>${available_for_withdraw.toFixed(2)}</Text>
-                        </View>
-                    </View>
-
-                    <View nativeID='daily_limit' style={{ margin:5, padding:10, borderRadius:4 }}>
-                        <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
-                            <Text style={{ flex:1 }} size={14} theme='description'>Daily Limit</Text>
-                            <Text size={14} theme='h2'>${withdraw_limit.ach_daily_limit.toFixed(2)}</Text>
-                        </View>
-                        <View style={{ padding:5, flexDirection:'row', alignItems:'center', paddingLeft:15}}>
-                            <Text style={{ flex:1 }} size={14} theme='description'>Last Days Withdraws</Text>
-                            <Text size={14} color={Colors.text.error} weight='semibold'>${withdraw_limit.last_days_ach_withdraws.toFixed(2)}</Text>
-                        </View>
-                        <View style={{ padding:5, flexDirection:'row', alignItems:'center' , borderTopWidth:1, borderTopColor:Colors.borders.light }}>
-                            <Text style={{ flex:1 }} size={14} theme='h1'>Limit Available</Text>
-                            <Text size={14} theme='h1'>${(limit_available).toFixed(2)}</Text>
+                {errors.length > 0 ?
+                <View float nativeID='errors' style={{ borderBottomRightRadius:0, borderBottomLeftRadius:0 }}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:15, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.text.error, borderBottomWidth:1, borderBottomColor:Colors.borders.light  }}>
+                        <Icons.AlertIcon color={Colors.text.white} size={24}/>
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1' size={14} color={Colors.text.white}>ERRORS</Text>
+                            <Text style={{ marginTop: 3}} theme='description' color={Colors.text.white}>Please fix the following before continuing</Text>
                         </View>
                     </View>
-                </View>
-                {errors.length > 0 ?
-                <View style={{ margin:20, borderRadius:8, padding:20 }}>
-                    <Text style={{ marginBottom:10 }} theme='description'>Please fix the following before continuing</Text>
+                    <View transparent style={{ padding:10 }}>
                     {errors.map(e => {
                         return (
-                            <Text size={14} color={Colors.text.warning}>{e}</Text>
+                            <Text size={14} theme='h2' color={Colors.text.error}>{e}</Text>
                         )
                     })}
+                    </View>
                 </View>
                 :<></>}
             </View>
-            </Pressable>
             <View type='footer' style={{ flexDirection:'row', padding:20 }}>
                 <Button
                     style={{ flex:1, marginRight:5, opacity: 1 }}
@@ -139,7 +182,6 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
                 />
             </View>
         </View>
-        </View>
     )
 }