be-components 3.5.9 → 3.6.1

package/lib/typescript/src/Wallet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Wallet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAgB,YAAY,EAAoB,cAAc,EAAgD,kBAAkB,EAAiJ,MAAM,UAAU,CAAC;AAsB9S,KAAK,aAAa,GAAG;IACjB,UAAU,CAAC,EAAC,MAAM,CAAC;IACnB,WAAW,CAAC,EAAC,kBAAkB,CAAC;IAChC,MAAM,CAAC,EAAC,MAAM,CAAC;IACf,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,OAAO,EAAC,CAAC,KAAK,EAAC,YAAY,KAAK,IAAI,CAAA;IACpC,UAAU,EAAE,CAAC,UAAU,EAAC,cAAc,EAAE,UAAU,CAAC,EAAC,MAAM,KAAK,IAAI,CAAA;CACtE,CAAA;AAED,QAAA,MAAM,QAAQ,sEAAsE,aAAa,sBAwhBhG,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Wallet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAgB,YAAY,EAAoB,cAAc,EAAgD,kBAAkB,EAAiJ,MAAM,UAAU,CAAC;AAuB9S,KAAK,aAAa,GAAG;IACjB,UAAU,CAAC,EAAC,MAAM,CAAC;IACnB,WAAW,CAAC,EAAC,kBAAkB,CAAC;IAChC,MAAM,CAAC,EAAC,MAAM,CAAC;IACf,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,OAAO,EAAC,CAAC,KAAK,EAAC,YAAY,KAAK,IAAI,CAAA;IACpC,UAAU,EAAE,CAAC,UAAU,EAAC,cAAc,EAAE,UAAU,CAAC,EAAC,MAAM,KAAK,IAAI,CAAA;CACtE,CAAA;AAED,QAAA,MAAM,QAAQ,sEAAsE,aAAa,sBAyhBhG,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "3.5.9",
+  "version": "3.6.1",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -195,7 +195,6 @@
     "react-native-uuid": "^2.0.3",
     "react-native-web-linear-gradient": "^1.1.2",
     "react-native-web-swiper": "^2.2.4",
-    "react-native-webview": "^13.12.5",
     "us-bank-account-validator": "^1.0.0",
     "uuid": "^9.0.1"
   },

package/src/Components/Pagination.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button, View } from "./Themed"
+
+type PaginationProps = {
+    offset:number
+    style?:any,
+    next_title?:string,
+    previous_title?:string,
+    onPrevious: () => void,
+    onNext: () => void
+}
+
+const Pagination = ({ offset, onPrevious, onNext, next_title, previous_title, style }:PaginationProps) => {
+
+    return (
+        <View transparent style={{ flexDirection: 'row', alignItems:'center', justifyContent:'space-between', ...style }}>
+            {offset > 0 ?
+            <Button
+                title={previous_title ?? 'PREV'}
+                type='text'
+                onPress={() => onPrevious()}
+            />
+            :<View />}
+            <Button
+                title={next_title ?? 'NEXT'}
+                type='text'
+                onPress={() => onNext()}
+            />
+        </View>
+    )
+}
+
+export default Pagination

package/src/ProfileManager/Components/VouchCard.tsx

@@ -4,7 +4,6 @@ import { useCameraPermissions } from 'expo-camera';
 import vouchHtml from './Vouchhtml';
 import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
-import { WebView } from "react-native-webview";
 import { ProfileApi, ProfileHelpers } from '../api';
 import moment from 'moment-mini';
 import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
@@ -41,7 +40,7 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
     const VOUCHED_CALLBACK_URL = ProfileApi.getVouchKeys().VOUCHED_CALLBACK_URL
     const VOUCHED_SANDBOX = ProfileApi.getVouchKeys().VOUCHED_SANDBOX
     const VOUCHED_HTML = vouchHtml({VOUCH_ID, VOUCHED_CALLBACK_URL, VOUCHED_SANDBOX, player})
-
+    console.log(VOUCHED_HTML)
 
     const { code_request, promo } = code_details;
     useEffect(() => {
@@ -61,8 +60,7 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
         initializeVouch()
         if(!vouched){ return }
         vouched.mount('#vouched-element')
-        const tokens = ProfileApi.getVouchKeys()
-        console.log(tokens)
+        
     },[vouched])
 
     const initializeVouch = () => {
@@ -168,30 +166,8 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
           }));
     }
 
-    const onMessage = (data:any) => {
-        console.log(data)
-    }
 
-    if(vouching){
-        if(Platform.OS != 'web'){
-            console.log('Rendering Webvewi!!!')
-            return (
-                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
-                    <WebView
-                        source={{ html: VOUCHED_HTML }}
-                        style={{ marginTop: 20, flex:1 }}
-                        originWhitelist={['*']}
-                        //mediaCapturePermissionGrantType='grant'
-                        geolocationEnabled={true}
-                        mediaPlaybackRequiresUserAction={false}
-                        allowsInlineMediaPlayback
-                        javaScriptEnabled={true}
-                        onMessage={m => onMessage(m.nativeEvent.data)}
-                    />
-                </View>
-            )
-        }
-    }
+    if(Platform.OS != 'web'){ return <></> }
 
     if(vouched){
         return (

package/src/Wallet/components/AccountCard.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { View, TouchableOpacity } from "react-native";
 import type { AccountProps } from '../../types';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { view_styles } from '../../constants/styles';
+import { Icons } from '../../Components';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AccountCardProps = {
     account:AccountProps,
@@ -13,12 +12,13 @@ type AccountCardProps = {
 }
 
 const AccountCard = ({ account, hide_status, onSelectAccount }: AccountCardProps) => {
+    const Colors = useColors();
 
     const getIcon = () => {
         switch(account.account_type){
             case 'ach':
-                if(account.ach_detail?.payment_provider == 'nuvei'){ return <Icons.BankInstantIcon size={28} color={Colors.brand.midnight}/> }
-                return <Icons.BankIcon size={28} color={Colors.utility.success} />
+                if(account.ach_detail?.payment_provider == 'nuvei'){ return <Icons.BankInstantIcon size={28} color={Colors.text.h1}/> }
+                return <Icons.BankIcon size={28} color={Colors.text.success} />
             case 'card':
                 return renderCardIcon(account.card_detail?.card_brand)
             case 'paypal':
@@ -39,17 +39,17 @@ const AccountCard = ({ account, hide_status, onSelectAccount }: AccountCardProps
             case 'discover':
                 return <Icons.DiscoverCardIcon size={28} />
             default:
-                return <Icons.CreditCardIcon size={22} color={Colors.brand.midnight}/>
+                return <Icons.CreditCardIcon size={22} color={Colors.text.h1}/>
         }
     }
 
     const getStatusColor = () => {
         switch(account.status){
-            case 'active': return Colors.utility.success
-            case 'inactive': return Colors.utility.error
-            case 'suspended': return Colors.utility.warning
-            case 'verify': return Colors.utility.warning
-            default: return Colors.brand.midnight
+            case 'active': return Colors.text.success
+            case 'inactive': return Colors.text.error
+            case 'suspended': return Colors.text.warning
+            case 'verify': return Colors.text.warning
+            default: return Colors.text.h1
         }
     }
 
@@ -69,25 +69,26 @@ const AccountCard = ({ account, hide_status, onSelectAccount }: AccountCardProps
     }
 
     return (
-        <TouchableOpacity 
-            style={{ borderRadius:8, backgroundColor:Colors.shades.white, ...view_styles.float }}
+        <Button 
+            style={{ padding:10 }}
+            float
             onPress={() => onSelectAccount(account)}    
         >
-            <View style={{ padding:10, flexDirection:'row' }}>
-                <View style={{ marginRight:10, justifyContent:'center', alignItems:'center' }}>
+            <View transparent style={{ flexDirection:'row' }}>
+                <View transparent style={{ marginRight:10, justifyContent:'center', alignItems:'center' }}>
                     {getIcon()}
                 </View>
-                <View style={{ flex:1 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{account.account_label}</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.midnight} weight='regular'>{getDescriptionLabel()}</Text> 
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{account.account_label}</Text>
+                    <Text style={{ marginTop:4 }} theme='description'>{getDescriptionLabel()}</Text> 
                 </View>
                 {!hide_status ?
-                <View>
+                <View transparent>
                     <Text size={12} color={getStatusColor()} weight='bold'>{account.status.toUpperCase()}</Text>
                 </View>
                 :<></>}
             </View>
-        </TouchableOpacity>
+        </Button>
     )
 }
 

package/src/Wallet/components/AccountLimitManager.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import type { AccountLimitProps, AccountProps } from '../../types';
 import { WalletApi, WalletHelpers } from '../api';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons, Toggle } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 const limit_amount_options = [ 50, 100, 250, 500, 1000]
 const frequency_options = ['Daily', 'Weekly', 'Monthly']
@@ -15,8 +16,8 @@ type AccountLimitManagerProps = {
 }
 
 const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitManagerProps ) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
-    const [ freq_width, setFreqWidth ] = useState(0);
     const [ disclaimer, setDisclaimer ] = useState(false);
     const [ dropdown_visible, setDropdownVisible ] = useState(false);
     const [ active_frequency, setActiveFrequency ] = useState('Daily')
@@ -102,41 +103,34 @@ const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitMana
     const renderOptions = (data: { item:number, index:number }) => {
         //const selected = data.item == active_amount ? true : false
         return (
-            <TouchableOpacity style={{ padding:10 }} onPress={() => {
+            <Button style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => {
                 setActiveAmount(data.item);
                 setDropdownVisible(false);
             }}>
-                <Text color={Colors.brand.midnight} weight='semibold' size={14}>${data.item}</Text>
-            </TouchableOpacity>
+                <Text theme='h2'>${data.item}</Text>
+            </Button>
         )
     }
 
-    const renderFrequencies = (data: {item:string, index:number}) => {
-        const selected = data.item == active_frequency ? true : false
-        return (
-            <TouchableOpacity style={{ width:freq_width/3, backgroundColor:selected?Colors.shades.white:'transparent', borderRadius:4, padding:10 }} onPress={() => setActiveFrequency(data.item)}>
-                <Text size={14} color={Colors.brand.midnight} weight={selected?'bold':'regular'} textAlign='center'>{data.item}</Text>
-            </TouchableOpacity>
-        )
-    }
     const valid = active_amount && active_frequency ? true : false
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>{account_limit?.status == 'active'?'Update Deposit Limits':'Deposit Limits'}</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Set your own limit for depositing.</Text>
+                <Text size={30} theme='h1'>{account_limit?.status == 'active'?'Update Deposit Limits':'Deposit Limits'}</Text>
+                <Text style={{ marginTop:15 }} size={16} theme='description'>Set your own limit for depositing.</Text>
             </View>
-            <ScrollView style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
                 <View style={{padding:16}}>
-                    <Text size={16} color={Colors.brand.cobalt} weight='semibold'>Amount</Text>
-                    <TouchableOpacity 
+                    <Text size={16} theme='h2'>Amount</Text>
+                    <Button 
+                    float
                     onPress={() => setDropdownVisible(!dropdown_visible)}
-                    style={{marginTop:8, flexDirection:'row', alignItems:'center', justifyContent:'space-between', padding:15, backgroundColor:Colors.shades.shade100}}>
-                        <Text color={Colors.brand.cobalt} size={14} weight='semibold'>{active_amount?`$${active_amount}`:'Select Limit'}</Text>
-                        <Icons.ChevronIcon direction='down' color={Colors.brand.cobalt} size={8} />
-                    </TouchableOpacity>
+                    style={{marginTop:8, flexDirection:'row', alignItems:'center', justifyContent:'space-between', padding:15 }}>
+                        <Text theme='h2'>{active_amount?`$${active_amount}`:'Select Limit'}</Text>
+                        <Icons.ChevronIcon direction='down' color={Colors.text.h1} size={8} />
+                    </Button>
                     {dropdown_visible ?
-                    <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.borders.light }}>
                         <FlatList
                             data={limit_amount_options}
                             renderItem={renderOptions}
@@ -145,53 +139,43 @@ const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitMana
                     :<></>}
                 </View>
                 <View style={{ padding:16 }}>
-                    <Text size={16} color={Colors.brand.cobalt} weight='semibold'>Frequency</Text>
-                    <View style={{ marginTop:8, backgroundColor: '#e9e9e9', padding:2, borderRadius:4 }} onLayout={(ev) => {
-                        setFreqWidth(ev.nativeEvent.layout.width)
-                    }}>
-                        <FlatList
-                            data={frequency_options}
-                            renderItem={renderFrequencies}
-                            horizontal
-                            showsHorizontalScrollIndicator={false}
-                        />
-                    </View>
+                    <Text style={{ marginBottom:10 }} size={16} theme='h2'>Frequency</Text>
+                    <Toggle
+                        options={frequency_options.map(o => { return { key: o, label:o } })}
+                        selected_option={active_frequency}
+                        onSelectOption={(option) => setActiveFrequency(option)}
+                    />
                 </View>
                 {account_limit?.status == 'active' ?
-                    <View style={{ margin:10, borderRadius:8, backgroundColor:Colors.shades.shade600, padding:10 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>There is an active limit on this account of ${account_limit.limit_amount} every {account_limit.limit_days} days</Text>
+                    <View style={{ margin:10, borderRadius:8, backgroundColor:Colors.borders.light, padding:10 }}>
+                        <Text size={14} theme='h2' textAlign='center'>There is an active limit on this account of ${account_limit.limit_amount} every {account_limit.limit_days} days</Text>
                         <Button
                             style={{ marginTop:10 }}
                             title='REMOVE'
-                            title_color={Colors.shades.white}
-                            padding={15}
-                            backgroundColor={Colors.utility.error}
+                            type='error'
                             onPress={() => handleRemoveAccountLimit()}
                         />
                     </View>
                     :<></>}
-            </ScrollView>
+            </View>
             
             { valid ?
             <View nativeID='limit_disclaimer' style={{ margin:10 }}>
-                <TouchableOpacity style={{ flexDirection:'row', padding:5 }} onPress={() => setDisclaimer(!disclaimer)}>
-                    <View style={{ justifyContent:'center', marginRight:10, alignItems:'center', height:25, width:25, borderRadius:4, backgroundColor: disclaimer ? Colors.brand.midnight : 'transparent', borderWidth:1, borderColor:Colors.brand.midnight }}>
+                <Button style={{ flexDirection:'row', padding:5 }} onPress={() => setDisclaimer(!disclaimer)}>
+                    <View style={{ justifyContent:'center', marginRight:10, alignItems:'center', height:25, width:25, borderRadius:4, backgroundColor: disclaimer ? Colors.text.h1 : 'transparent', borderWidth:1, borderColor:Colors.text.h1 }}>
                         {disclaimer ?
-                        <Icons.CheckIcon color={Colors.shades.white} size={14} />
+                        <Icons.CheckIcon color={Colors.text.h1} size={14} />
                         :<></>}
                     </View>
-                    <Text size={14} color={Colors.brand.midnight} weight='regular'>I confirm I would like to the my deposit limit to {active_amount}, and deposit frequency to {active_frequency}</Text>
-                </TouchableOpacity>
+                    <Text size={14} theme='description'>I confirm I would like to the my deposit limit to {active_amount}, and deposit frequency to {active_frequency}</Text>
+                </Button>
             </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}
-                    borderColor={Colors.brand.electric}
-                    borderWidth={1}
-                    padding={15}
+                    type='close'
                     onPress={() => onCancel()}
                 />
                 <Button
@@ -199,9 +183,7 @@ const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitMana
                     title={'SAVE LIMIT'}
                     disabled={!valid||!disclaimer}
                     loading={loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
-                    padding={15}
+                    type='success'
                     onPress={() => handleSetLimit()}
                 />
             </View>

package/src/Wallet/components/AccountManager.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { FlatList, View, TouchableOpacity, Image, ScrollView } from 'react-native';
+import { FlatList, Image } from 'react-native';
 import type { AccountProps } from '../../types';
 import AccountCard from './AccountCard';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AccountManagerProps = {
     accounts:AccountProps[],
@@ -13,15 +14,16 @@ type AccountManagerProps = {
     onSelectManualCard: () => void,
     onSelectInstantBankTransfer: () => void
 }
+const screen_sections = ['header','my_accounts','new_account']
 
 const AccountManager = ({ accounts,  onSelectAccount, onSelectManualACH, onSelectManualCard, onSelectInstantBankTransfer , onClose}:AccountManagerProps) => {
-
+    const Colors = useColors();
     const my_accounts = accounts.filter(a => !a.ibt_placeholder && !['bettoredge'].includes(a.account_type))
     //const ibt_placeholder = accounts.find(a => a.ibt_placeholder);
 
     const renderAccounts = (data:{item:AccountProps, index:number}) => {
         return (
-            <View style={{ margin:5 }}>
+            <View transparent style={{ margin:5 }}>
                 <AccountCard
                     account={data.item}
                     onSelectAccount={(account) => onSelectAccount(account)}
@@ -30,70 +32,102 @@ const AccountManager = ({ accounts,  onSelectAccount, onSelectManualACH, onSelec
         )
     }
 
-    return (
-        <View style={{ flex:1 }}>
-             <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>WALLET ACCOUNTS</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are the accounts we have on file for you.  Please select one to manage or transact!</Text>
-            </View>
-            <ScrollView style={{ flex:1, padding:10 }}>
-                {my_accounts.length > 0 ?
-                <View style={{ padding:10 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>MY ACCOUNTS</Text>
-                    <View style={{ marginTop:10 }}>
-                        <FlatList
-                            data={my_accounts}
-                            renderItem={renderAccounts}
-                            keyExtractor={(item) => item.account_id.toString()}
-                        />
-                    </View>
-                </View>
-                :<></>}
-                <View style={{ padding:10, marginTop:20 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>ADD NEW ACCOUNT</Text>
-                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.shades.white }}
-                    onPress={() => onSelectInstantBankTransfer()}>
-                        <View style={{  height:50, width:110, borderRadius:100, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.cobalt }}>
-                            <Image
-                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1695821528/1630344814441_wjq98b.png' }}
-                                style={{ width:50, height:30 }}
-                                resizeMode='cover'
-                            />
-                        </View>
-                        <View style={{ flex:1, marginLeft:5 }}>
-                            <Text size={10} color={Colors.utility.success} weight='bold'>RECOMMENDED</Text>
-                            <Text size={14} color={Colors.brand.cobalt} textAlign='left' weight='bold'>INSTANT BANK TRANSFER</Text>
+    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'>MANAGE MY ACCOUNTS</Text>
+                            <Text style={{ marginTop:5}} theme='description'>Below are the accounts we have on file for you.  Please select one to manage or transact!</Text>
                         </View>
-                    </TouchableOpacity>
-                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.midnight }}
-                    onPress={() => onSelectManualACH()}>
-                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.white }}>
-                            <Icons.BankIcon size={22} color={Colors.brand.midnight} />
-                        </View>
-                        <View style={{ flex:1 }}>
-                            <Text size={14} color={Colors.shades.white} textAlign='center' weight='bold'>ADD MANUAL ACH ACCOUNT</Text>
+                    </View>
+                )
+            case 'my_accounts':
+                return (
+                    <View style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>MY ACCOUNTS</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Accounts already linked or ways to transact immediately</Text>
+                            </View>
                         </View>
-                    </TouchableOpacity>
-                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.cyan }}
-                    onPress={() => onSelectManualCard()}>
-                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.white }}>
-                            <Icons.CreditCardIcon size={22} color={Colors.brand.cyan} />
+                        <View type='body' style={{ padding:20 }}>
+                            <FlatList
+                                data={my_accounts}
+                                renderItem={renderAccounts}
+                                keyExtractor={(item) => item.account_id.toString()}
+                            />
                         </View>
-                        <View style={{ flex:1 }}>
-                            <Text size={14} color={Colors.shades.white} textAlign='center' weight='bold'>ADD NEW CARD ACCOUNT</Text>
+                    </View>
+                )
+            case 'new_account':
+                return (
+                    <View>
+                        <View type='header' style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1' color={Colors.text.success}>ADD NEW ACCOUNT</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Link a new account and use to transact</Text>
+                            </View>
                         </View>
-                    </TouchableOpacity>
+                        <View type='body' style={{ padding:20 }}>
+                            <Button float style={{ marginTop:10, padding:5, flexDirection:'row', alignItems:'center' }}
+                            onPress={() => onSelectInstantBankTransfer()}>
+                                <View  style={{  height:50, width:80, borderRadius:8, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.absolutes.brand.cobalt }}>
+                                    <Image
+                                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1695821528/1630344814441_wjq98b.png' }}
+                                        style={{ width:50, height:30 }}
+                                        resizeMode='cover'
+                                    />
+                                </View>
+                                <View transparent style={{ flex:1, marginLeft:10 }}>
+                                    <Text size={10} color={Colors.text.success} weight='bold'>RECOMMENDED</Text>
+                                    <Text size={14} theme='h1' textAlign='left'>INSTANT BANK TRANSFER</Text>
+                                </View>
+                            </Button>
+                            <Button float style={{ marginTop:10, padding:5, flexDirection:'row', alignItems:'center' }}
+                            onPress={() => onSelectManualACH()}>
+                                <View float style={{  height:50, width:50, justifyContent:'center', alignItems:'center' }}>
+                                    <Icons.BankIcon size={22} color={Colors.text.h1} />
+                                </View>
+                                <View transparent style={{ flex:1, marginLeft:10 }}>
+                                    <Text size={14} theme='h2' textAlign='left'>ADD MANUAL ACH ACCOUNT</Text>
+                                </View>
+                            </Button>
+                            <Button float style={{ marginTop:10, padding:5, flexDirection:'row', alignItems:'center' }}
+                            onPress={() => onSelectManualCard()}>
+                            <View float style={{  height:50, width:50, justifyContent:'center', alignItems:'center'}}>
+                                <Icons.CreditCardIcon size={22} color={Colors.text.highlight} />
+                            </View>
+                            <View transparent style={{ flex:1, marginLeft:10 }}>
+                                <Text size={14} theme='h2' textAlign='left'>ADD NEW CARD ACCOUNT</Text>
+                            </View>
+                        </Button>
+                    </View>
                 
                 </View>
-            </ScrollView>
-            <View nativeID='action_row' style={{ padding:20 }}>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+             
+            <View style={{ flex:1 }}>
+                <FlatList
+                    key='account_sections'
+                    data={screen_sections}
+                    renderItem={renderSections}
+                    keyExtractor={(item) => item}
+                />
+                
+            </View>
+            <View type='footer' style={{ flexDirection:'row', padding:20 }}>
                 <Button
-                    style={{ flex:1, opacity: 1 }}
+                    style={{ flex:1 }}
                     title={'BACK'}
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={15}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>