be-components 0.5.1 → 0.5.2

package/src/Wallet/components/WalletActionSelector.tsx

@@ -0,0 +1,196 @@
+
+import React, { useState } from 'react';
+import { View, FlatList, ScrollView, TouchableOpacity, Image } from "react-native"
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { MyPlayerProps, PlayerBalanceProps } from '../../ProfileManager/api/types';
+import type { AccountProps } from '../../types';
+import { WalletHelpers } from '../api';
+
+type WalletActionSelectorProps ={
+    player:MyPlayerProps,
+    player_balance:PlayerBalanceProps,
+    accounts:AccountProps[],
+    onClose: () => void,
+    walkthrough_steps:any[],
+    onActionSelect:(action:any, account?:AccountProps) => void,
+    onStartWalkthrough:(walkthrough:any) => void
+}
+
+const sections = [
+    { 
+        section: 'accounts', label:'Account Actions', actions : [
+            { 
+                action :'my_accounts', label: "View My Accounts", icon:<Icons.ListIcon color={Colors.brand.midnight} size={12}/>, description: 'Manage your connected accounts.  Transact, snooze, set limits or remove an existing account.'
+            },
+            { 
+                action :'wallet_settings', label: "View My Settings", icon:<Icons.SettingsIcon color={Colors.brand.midnight} size={20}/>, description: 'View your current settings including your deposit and withdraw limits.'
+            },
+            
+        ] 
+    },
+    { 
+        section: 'transact', label:'Transact', actions : [
+            { 
+                action :'order_history', label: "View Order History", icon:<Icons.TransactionIcon size={20} color={Colors.brand.midnight} />, description: 'View and manage past orders made on BettorEdge'
+            },
+            { 
+                action :'deposit', label: "Make A Deposit", icon:<Icons.DepositIcon size={20} color={Colors.brand.midnight} />, description: 'Fund your BettorEdge real-money balance by making a deposit from an existing account or new one.'
+            },
+            { 
+                action :'withdraw', label: "Make A Withdrawal", icon:<Icons.WithdrawIcon size={20} color={Colors.brand.midnight} />, description: 'Move funds from your BettorEdge real-money balance to a connected ACH account.'
+            },
+            
+        ] 
+    }
+]
+
+const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accounts, onClose, onActionSelect, onStartWalkthrough }: WalletActionSelectorProps) => {
+    const [ show_steps, setShowSteps ] = useState(false);
+    const [ width, setWidth ] = useState(0);
+
+    const handleActionSelect = (action:any) => {
+        switch(action.action){
+            case 'deposit':
+                let default_account = accounts.find(a => a.default_account)
+                if(!default_account){ default_account = accounts.find(a => a.account_type == 'paypal')}
+                return onActionSelect(action, default_account)
+            case 'withdraw':
+                let withdraw_account = accounts.find(a => !a.ibt_placeholder && a.account_type == 'ach')
+                if(!withdraw_account){ return onActionSelect({ action: 'add_ach_account' }) }
+                return onActionSelect(action, withdraw_account)
+            default: onActionSelect(action)
+        }
+    }
+
+    const renderActions = (data:{ item:any, index:number }) => {
+        return (
+            <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}
+            onPress={() => handleActionSelect(data.item)}>
+
+                <View style={{ flex:1, marginRight:10 }}>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        {data.item.icon?
+                            data.item.icon
+                        :<></>}
+                        <Text style={{ marginLeft:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>
+                    </View>
+                    <Text style={{ padding:5 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
+                </View>
+                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
+            </TouchableOpacity>
+        )
+    }
+
+    const renderSections = (data: { item:any, index:number }) => {
+        return (
+            <View style={{ padding:5 }}>
+                <Text size={16} color={Colors.brand.midnight} weight='regular'>{data.item.label.toUpperCase()}</Text>
+                <View style={{ padding:5 }}>
+                    <FlatList
+                        key='actions'
+                        data={data.item.actions}
+                        renderItem={renderActions}
+                        keyExtractor={(item) => item.action}
+                    />
+                </View>
+                
+            </View>
+        )
+    }
+
+    const renderSteps = (data: { item:any, index:number }) => {
+        return (
+            <TouchableOpacity
+                style={{ margin:5, padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8 }}
+                onPress={() => onStartWalkthrough({ enabled:true, steps: walkthrough_steps, active_step: data.item.step })}>
+                <Icons.CheckCirlceIcon size={14} color={data.item.complete?Colors.utility.success:Colors.brand.slate}/>
+                <Text style={{ flex:1, marginLeft:10 }} size={14} color={Colors.brand.midnight}>{data.item.label}</Text>
+                <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+        )
+    }
+
+    const pct_complete = walkthrough_steps.filter(s => s.complete).length / walkthrough_steps.length
+    
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { width } = ev.nativeEvent.layout
+            setWidth(width)
+        }}>
+            <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                <Image
+                    source={{ uri: player.profile_pic }}
+                    style={{ height:60, width:60, borderRadius:4 }}
+                    resizeMode='cover'
+                />
+                <View style={{ flex:1, marginLeft:5 }}>
+                    <Text size={20} color={Colors.brand.midnight} weight='bold'>Wallet Balances</Text>
+                    <View style={{ flexDirection:'row' }}>
+                        <View style={{ margin:3, backgroundColor:Colors.brand.cobalt, padding:5, borderRadius:8 }}>
+                            <Text size={14} color={Colors.shades.white} weight='bold'>${WalletHelpers.formatBalance(player_balance.balance)}</Text>
+                        </View>
+                        <View style={{ margin:3, backgroundColor:Colors.brand.cobalt, padding:5, borderRadius:8 }}>
+                            <Text size={14} color={Colors.shades.white} weight='bold'>P{WalletHelpers.formatBalance(player_balance.promo_balance)}</Text>
+                        </View>
+                        <View style={{ margin:3, backgroundColor:Colors.brand.cyan, padding:5, borderRadius:8 }}>
+                        <Text size={14} color={Colors.shades.white} weight='bold'>E{WalletHelpers.formatBalance(player_balance.free_market_balance)}</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+            <ScrollView style={{ flex:1 }}>
+
+                {pct_complete < 1 ?
+                <View style={{ backgroundColor:Colors.shades.white, padding:10 }}>
+                    <View>
+                        <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => setShowSteps(!show_steps)}>
+                            <View style={{ flex:1, marginRight:10 }}>
+                                <Text color={Colors.brand.midnight} size={14} weight='bold'>Setup your wallet</Text>
+                                <Text style={{ marginTop:3 }} color={Colors.brand.slate} size={14} weight='regular'>Complete all the steps below to have full access to move funds in and out of BettorEdge</Text>
+                            </View>
+                            <Icons.ChevronIcon direction={show_steps ? 'up' : 'down'} color={Colors.brand.midnight} size={10} />
+                        </TouchableOpacity>
+                        <View style={{ flexDirection:'row', justifyContent:'center', alignItems:'center', }}>
+                            <Text size={14} weight='bold'>{(pct_complete * 100).toFixed()}%</Text>
+                            <View style={{ marginLeft:20, height:10, width:width - 100, backgroundColor:Colors.brand.slate, borderRadius:15 }}>
+                                <View style={{ position:'absolute', top:0, left:0, bottom:0, width: (width-100)*pct_complete, backgroundColor:Colors.utility.success, borderRadius:15 }} />
+                            </View>
+                        </View>
+                    </View>
+                    {show_steps ?
+                    <View style={{marginTop:5, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <FlatList
+                            data={walkthrough_steps}
+                            renderItem={renderSteps}
+                            keyExtractor={(item) => item.step}
+                        />
+                    </View>
+                    :<></>}
+                </View>
+                :<></>}
+                <View style={{ padding:10 }}>
+                    <FlatList
+                        key={'wallet_sections'}
+                        data={sections}
+                        renderItem={renderSections}
+                        keyExtractor={(item) => item.section}
+                    />
+                </View>
+            </ScrollView>
+            <View nativeID='action_row' style={{ padding:20 }}>
+                <Button
+                    title='CLOSE'
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => onClose()}
+                />
+            </View>
+           
+        </View>
+    )
+}
+
+export default WalletActionSelector

package/src/Wallet/components/WalletSettings.tsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import { useState } from "react"
+import type { MyPlayerProps } from '../../ProfileManager/api/types';
+import type { PlayerDepositLimitProps, PlayerReferralProps, PlayerWithdrawLimitProps, PromoProps } from '../../types';
+import { View, TouchableOpacity } from 'react-native';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { WalletHelpers } from '../api';
+
+type BEWalletProps = {
+    player:MyPlayerProps,
+    deposit_limit:PlayerDepositLimitProps,
+    withdraw_limit:PlayerWithdrawLimitProps,
+    my_referral: {
+        player_referral?:PlayerReferralProps,
+        promo?:PromoProps
+    }
+    onPremium?:() => void,
+    onClose:() => void
+}
+
+const WalletSettings = ({ player, my_referral, deposit_limit, withdraw_limit, onPremium, onClose }:BEWalletProps) => {
+    const [ active_tab, setActiveTab ] = useState('deposit');
+
+    //const promo = useSelector((state:RootState) => state.wallet.promo, (left, right) => left?.promo_id == right?.promo_id);
+    //const player_referral = useSelector((state:RootState) => state.wallet.player_referral, (left, right) => left?.last_update_datetime == right?.last_update_datetime);
+
+    const { player_referral, promo } = my_referral
+    //const tabs = ['referral','deposit','withdraw']
+
+
+
+    if(!player){ return <></> }
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>WALLET SETTINGS</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are your overall wallet settings & configurations. These are set based on account type and past transaction history.</Text>
+            </View>
+            <View style={{ flexDirection: 'row', paddingLeft:10, paddingRight:10 }}>
+                <TouchableOpacity 
+                    style={{ flex:1, borderWidth:1,borderColor:Colors.shades.shade600, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:active_tab=='deposit'?Colors.brand.midnight:undefined }}
+                    onPress={() => setActiveTab('deposit')}
+                    >
+                    <Text weight={active_tab == 'deposit'?'bold':'regular'} textAlign="center" size={14} color={active_tab=='deposit'?Colors.shades.white:Colors.brand.midnight}>Deposit</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                    style={{ flex:1, borderWidth:1, borderColor:Colors.shades.shade600, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:active_tab=='withdraw'?Colors.brand.midnight:undefined }}
+                    onPress={() => setActiveTab('withdraw')}
+                    >
+                    <Text weight={active_tab == 'withdraw'?'bold':'regular'} textAlign="center" size={14} color={active_tab=='withdraw'?Colors.shades.white:Colors.brand.midnight}>Withdraw</Text>
+                </TouchableOpacity>
+                <TouchableOpacity 
+                    style={{ flex:1, borderWidth:1, borderColor:Colors.shades.shade600, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:active_tab=='referral'?Colors.brand.midnight:undefined }}
+                    onPress={() => setActiveTab('referral')}
+                    >
+                    <Text weight={active_tab == 'referral'?'bold':'regular'} textAlign="center" size={14} color={active_tab=='referral'?Colors.shades.white:Colors.brand.midnight}>Referral</Text>
+                </TouchableOpacity>
+            </View>
+            <View nativeID="settings" style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderLeftWidth:1, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                {active_tab == 'deposit' ?
+                <View>
+                    {deposit_limit ?
+                    <View nativeID="deposit_limit">
+                        <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='semibold'>Deposit Settings</Text>
+                            <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Below are your current deposit limits.  These may change based on historical transaction results.</Text>
+                        </View>
+                        <View style={{ padding:10 }}>
+
+                        <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>ACH Daily Limit</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The maximum deposit amount allowed per day from an ACH account</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">${deposit_limit.ach_daily_limit}</Text>
+                            </View>
+                        </View>
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Card / Paypal Daily Limit</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The maximum deposit amount allowed per day from a card account</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">${deposit_limit.card_daily_limit}</Text>
+                            </View>
+                        </View>
+                        <View style={{ flexDirection:'row', alignItems:'flex-start', marginTop:10, padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Instant Deposit Limit</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The total amount of unsettled deposits that will be instantly added to your wallet.  Any deposit over this amount will be held until it settles.</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">${deposit_limit.instant_limit}</Text>
+                            </View>
+                        </View>
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Hold Days</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The number of days a deposit transaction will be held (not settled) before it can be withdrawn</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">{deposit_limit.hold_days}</Text>
+                            </View>
+                        </View>
+                        <View style={{ flexDirection:'row', alignItems:'flex-start', marginTop:10, padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Instant Deposit Available</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Your instant deposit limit minus your unsettled deposits</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={deposit_limit.instant_available > 0 ? Colors.utility.success : Colors.utility.error} weight="bold">${deposit_limit.instant_available.toFixed(2)}</Text>
+                            </View>
+                        </View>
+                        </View>
+                    </View>
+                    :<></>}
+                </View>
+                :active_tab == 'withdraw' ?
+                <View>
+                    {withdraw_limit ?
+                    <View nativeID="withdraw_settings">
+                    <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='semibold'>Withdraw Settings</Text>
+                        <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Below are your current withdraw settings and limits.  These may change based on historical transaction results.</Text>
+                    </View>
+                    <View style={{ padding:10 }}>
+                        <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Weekly Withdraw Transaction Limit</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The number of withdraws allowed per rolling week.</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.withdraws_per_week}</Text>
+                            </View>
+                        </View>
+                        {withdraw_limit?.week_withdraw_count ?
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Withdraws Remaining</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Withdraw transaction limit minus the number of withdraws already processed in the last 7 days</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.withdraws_per_week - withdraw_limit.week_withdraw_count}</Text>
+                            </View>
+                        </View>
+                        :<></>}
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>ACH Withdraw Daily Limit</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Maximum amount of withdraws that can be made per rolling 24 hours to an ACH account.</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.ach_daily_limit}</Text>
+                            </View>
+                        </View>
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Card Withdraw Daily Limit</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Maximum amount of withdraws that can be made per rolling 24 hours to a card account.</Text>
+                            </View>
+                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.card_daily_limit}</Text>
+                            </View>
+                        </View>
+                    </View>
+                    </View>
+                    :<></>}
+                </View>
+                :active_tab == 'referral' ?
+                <View> 
+                {player_referral && promo ?
+                    <View nativeID="referral_settings">
+                        <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='semibold'>Referral Settings</Text>
+                            <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Below are your current referral settings. Share your code with others to earn cash from referrals.</Text>
+                        </View>
+                        <View style={{ padding:10 }}>
+                            {false ?
+                            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:8, backgroundColor:Colors.brand.electric }}>
+                                <Icons.ShareIcon color={Colors.shades.white} size={8}/>
+                                <Text style={{ marginLeft:5 }} size={10} color={Colors.shades.white} weight='regular'>Share Code</Text>
+                            </TouchableOpacity>
+                            :<></>}
+                            <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                                <View style={{ flex:1 }}>
+                                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>My Referral Code</Text>
+                                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>{WalletHelpers.getReferralDescription(promo)}</Text>
+                                </View>
+                                <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
+                                    <Text size={14} color={Colors.brand.midnight} weight="bold">{player_referral.referral_code}</Text>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                    :<></>}
+                </View>
+                :<></>}
+            </View>
+            {false && player?.type == 'freemium' ?
+            <View style={{ backgroundColor:Colors.shades.shade600, borderRadius:8, padding:10, margin:10 }}>
+                <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign="center">Want better limits and higher referral awards?</Text>
+                <TouchableOpacity style={{ marginTop:5, borderRadius:8, backgroundColor:Colors.incentive.gold, padding:15 }} onPress={() => {if(onPremium){ return onPremium() }}}>
+                    <Text size={14} color={Colors.shades.white} weight='bold' textAlign="center">VIEW PREMIUM</Text>
+                </TouchableOpacity>
+            </View>
+            :<></>}
+            <View style={{ padding:20 }}>
+                <Button
+                    title='BACK'
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => onClose()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default WalletSettings
+

package/src/Wallet/components/WalletSetup.tsx

@@ -1,19 +1,22 @@
 import React, { useState } from 'react';
 import { View, Image, TouchableOpacity, Linking } from "react-native";
 import type { WalletSettingsProps } from '../../types';
-import { Button, Checkbox, Text, TextInput } from '../../Components';
+import { Button, Checkbox, Icons, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
 import type { MyPlayerProps } from '../../ProfileManager/api/types';
 import { WalletApi } from '../api';
 import moment from 'moment-mini';
+import { button_styles } from '../../constants/styles';
 
 type WalletSetupProps = {
     player: MyPlayerProps,
     wallet_settings: WalletSettingsProps,
     onSettingsUpdate:(ws:WalletSettingsProps) => void,
+    onClose?:() => void,
+    onNext?:() => void
 }
 
-const WalletSetup = ({ wallet_settings, onSettingsUpdate }:WalletSetupProps) => {
+const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:WalletSetupProps) => {
     const [ terms_agreed, setTermsAgreed ] = useState(false);
     const [ auth_error, setAuthError ] = useState<string>();
     const [ pin_view, setPinView ] = useState<'set'|'confirm'>('set');
@@ -25,7 +28,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate }:WalletSetupProps) =>
 
     const pin_valid = pin.length >= 4 ? true:false;
     const go_valid = pin_valid && confirm_pin == pin ? true : false;
-    console.log(pin_valid)
+
     const handleAgreeTerms = async() => {
         const ws = await WalletApi.agreeToTerms()
         onSettingsUpdate(ws)
@@ -52,8 +55,14 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate }:WalletSetupProps) =>
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>My Wallet!</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  Go through the wizard to get set up to deposit and withdraw!</Text>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>MY WALLET</Text>
+                {onNext ?
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  Go through the wizard to get set up to deposit and withdraw!</Text>
+                :!wallet_settings.agreed_to_terms ?
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  This is where your sensitive account details are kept.  Please review our terms and conditions!</Text>
+                :
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  Please enter your security pin to continue!</Text>
+                }
             </View>
             {!wallet_settings.agreed_to_terms ?
             <View style={{ flex:1, padding:20 }}>
@@ -146,18 +155,41 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate }:WalletSetupProps) =>
                 </View>
                 :<></>}
             </View>
-            :<></>}
+            :
+            <View style={{ flex:1 }}>
+                <View style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Image
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
+                        style={{ width: 250, height:250 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ margin:15, borderRadius:8, padding:10 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>WALLET SECURED!</Text>
+                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} textAlign='center'>Select next to continue your wallet set up by adding a transaction account.</Text>
+                </View>
+            </View>
+            }
             <View style={{ flexDirection:'row', padding:10 }}>
-                {!wallet_settings.agreed_to_terms ?
-                <Button
-                    title='I AGREE'
-                    style={{ flex:3, opacity:terms_agreed?1:0.5 }}
-                    disabled={!terms_agreed}
-                    backgroundColor={Colors.brand.electric}
-                    title_color={Colors.shades.white}
-                    padding={15}
-                    onPress={() => handleAgreeTerms()}
-                />
+                {!wallet_settings.agreed_to_terms && onClose ?
+                <View style={{ flex:1, flexDirection:'row' }}>
+                    <Button
+                        title='EXIT SETUP'
+                        style={{ flex:1, marginRight:5 }}
+                        title_color={Colors.utility.error}
+                        backgroundColor='transparent'
+                        onPress={() => onClose()}
+                    />
+                    <Button
+                        title='I AGREE'
+                        style={{ flex:3, opacity:terms_agreed?1:0.5 }}
+                        disabled={!terms_agreed}
+                        backgroundColor={Colors.brand.electric}
+                        title_color={Colors.shades.white}
+                        padding={15}
+                        onPress={() => handleAgreeTerms()}
+                    />
+                </View>
                 : !wallet_settings.pin && pin_view == 'set' ?
                     <Button
                         title='CONFIRM PIN'
@@ -188,7 +220,24 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate }:WalletSetupProps) =>
                         padding={15}
                         onPress={() => handleAuthPin()}
                     />
-                :<></>}
+                : onClose && onNext ?
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>
+                    <Button
+                        title='EXIT SETUP'
+                        title_color={Colors.utility.error}
+                        backgroundColor='transparent'
+                        onPress={() => onClose()}
+                    />
+                    <TouchableOpacity
+                        style={button_styles.wizard_valid}
+                        onPress={() => onNext()}
+                        //disabled={loading}
+                        >
+                        <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
+                    </TouchableOpacity>
+                </View>
+                :<></>
+                }
             </View>
         </View>
     )