be-components 0.5.1 → 0.5.3

package/src/Wallet/components/DepositCard.tsx

@@ -1,22 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator } from "react-native";
+import { View, ActivityIndicator, Image } from "react-native";
 import type { MyPlayerProps } from '../../ProfileManager/api/types';
-import type { AccountProps, AccountSnoozeProps, ItemOrderProps, PlayerDepositLimitProps, WalletSettingsProps } from '../../types';
+import type { AccountProps, AccountSnoozeProps, CodeRequestProps, ItemOrderProps, PlayerDepositLimitProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers, WalletApi } from '../api';
 import Colors from '../../constants/colors';
-import { Button, Text, TextInput } from '../../Components';
+import { Button, Icons, Text, TextInput } from '../../Components';
 import { view_styles } from '../../constants/styles';
 
 type DepositCardProps = {
     player:MyPlayerProps,
     wallet_settings:WalletSettingsProps,
     account:AccountProps,
+    code_details?: {
+        code_request?:CodeRequestProps,
+        referrer?:PublicPlayerProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps,
+        reward_option?:RewardOptionProps
+    },
     deposit_limit:PlayerDepositLimitProps,
     onTransact:(draft_order:ItemOrderProps, account_id?:string) => void,
     onCancel:() => void
 }
 
-const DepositCard = ({ wallet_settings, account, deposit_limit, onTransact, onCancel }:DepositCardProps) => {
+const DepositCard = ({ wallet_settings, code_details, account, deposit_limit, onTransact, onCancel }:DepositCardProps) => {
     const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
     const [ account_snooze, setAccountSnooze ] = useState<AccountSnoozeProps>();
 
@@ -49,9 +56,9 @@ const DepositCard = ({ wallet_settings, account, deposit_limit, onTransact, onCa
     
     return (
         <View style={{ flex:1 }}>
-            <View nativeID='deposit_rules' style={{ padding:10 }}>
-                <Text size={28} textAlign='center' weight='bold' color={Colors.brand.midnight}>Top up your account</Text>
-                <Text style={{ marginTop:10 }} size={14} textAlign='center' weight='regular' color={Colors.brand.midnight}>Minumum $25 / Maximum ${ItemOrderHelpers.getDepositAvailable(deposit_limit, account).toFixed(2)}</Text>
+             <View style={{ padding:20 }}>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>MAKE A DEPOSIT</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>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 style={{ flex:1 }}>
                 <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
@@ -62,6 +69,7 @@ const DepositCard = ({ wallet_settings, account, deposit_limit, onTransact, onCa
                         value={draft_order.amount as string}
                         onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
                     />
+                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Minumum $25 / Maximum ${ItemOrderHelpers.getDepositAvailable(deposit_limit, account).toFixed(2)}</Text>
                 </View>
                 <View nativeID='instant_available' style={{ backgroundColor:Colors.shades.shade100, padding:10, borderRadius:8 }}>
                     <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>Instant Deposit Available</Text>
@@ -80,6 +88,25 @@ const DepositCard = ({ wallet_settings, account, deposit_limit, onTransact, onCa
                 </View>
                 :<></>}
             </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', backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+                <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.incentive.gold} />
+                    }
+                </View>
+                <View style={{flex:1, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
+                    <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} size={14} color={Colors.brand.midnight} weight='bold'>Give back to {code_details.referrer?.username}</Text>
+                    <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>Make a qualifying deposit and {code_details.referrer.username} will receive a reward!</Text>
+                </View>
+            </View>
+            :<></>}
             <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
                 <Button
                     style={{ flex:1, marginRight:5, opacity: 1 }}

package/src/Wallet/components/FundAccountCard.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import type { MyPlayerProps } from '../../ProfileManager/api/types';
+import type { AccountProps, CodeRequestProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { button_styles, view_styles } from '../../constants/styles';
+
+type FundAccountCardProps = {
+    player:MyPlayerProps,
+    accounts:AccountProps[],
+    code_details: {
+        code_request?:CodeRequestProps,
+        referrer?:PublicPlayerProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps,
+        reward_option?:RewardOptionProps
+    }
+    walkthrough?:boolean,
+    onManualACH: () => void,
+    onCard:(account?:AccountProps) => void,
+    onSelectAccount: (account:AccountProps) => void,
+    onClose: () => void,
+    onNext: () => void,
+}
+
+const FundAccountCard = ({ accounts, code_details, onClose, onCard, onNext, walkthrough, onManualACH, onSelectAccount }:FundAccountCardProps) => {
+    
+    const { code_request, promo, referrer } = code_details;
+
+    const manual_account = accounts.find(a => a.ach_detail && a.ach_detail.ach_type == 'manual');
+    const ibt_placeholder_account = accounts.find(a => a.ibt_placeholder);
+    const ibt_account = accounts.find(a => a.ach_detail && a.ach_detail.ach_type == 'ibf' && !a.ibt_placeholder);
+    const card_account = accounts.find(a => a.account_type == 'card');
+    const paypal_account = accounts.find(a => a.account_type == 'paypal');
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>FUND YOUR BETTOREDGE WALLET</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>In order to fund your real-money/USD ($) balance, simply make a deposit using the following options</Text>
+            </View>
+            <View style={{ flex:1, padding:20 }}>
+                <View nativeID='fund_account_now'>
+                <Text size={18} color={Colors.brand.midnight} weight='bold'>FUND YOUR ACCOUNT NOW</Text>
+                {ibt_placeholder_account ?
+                <View style={{ marginTop:15 }}>
+                    <TouchableOpacity style={{padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.shades.white }}
+                        onPress={() => onSelectAccount(ibt_placeholder_account)}>
+                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.midnight }}>
+                            <Icons.PlaidIcon size={22} color={Colors.brand.midnight} />
+                        </View>
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>INSTANT BANK TRANSFER</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>When you link an account you get access to both instant deposits and instant withdraws.</Text>
+                        </View>
+                    </TouchableOpacity>
+                    {ibt_account ?
+                    <View style={{ position:'absolute', top:5, right:5, bottom:0}}>
+                        <Icons.TransactionSuccessIcon size={45}/>
+                    </View>
+                    :<></>}
+                </View>
+                :<></>}
+                <View style={{ marginTop:10 }}>
+                    <TouchableOpacity style={{ padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.cyan }}
+                        onPress={() => onCard(card_account)}>
+                        <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>
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text size={14} color={Colors.shades.white} weight='bold'>DEBIT / CREDIT CARD</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.shades.white} weight='semibold'>Add a debit / credit card and deposit instantly.</Text>
+                        </View>
+                    </TouchableOpacity>
+                    {card_account ?
+                    <View style={{ position:'absolute', top:5, right:5, bottom:0}}>
+                        <Icons.TransactionSuccessIcon size={45}/>
+                    </View>
+                    :<></>}
+                </View>
+                {paypal_account ?
+                <View style={{ marginTop:10 }}>
+                    <TouchableOpacity style={{ padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.company.paypal }}
+                        onPress={() => onSelectAccount(paypal_account)}>
+                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.white }}>
+                            <Icons.PayPalIcon size={22}/>
+                        </View>
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text size={14} color={Colors.company.paypal_blue} weight='bold'>PAYPAL</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.company.paypal_blue} weight='semibold'>Use your paypal account to deposit instantly.</Text>
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                :<></>}
+                </View>
+                <View style={{ marginTop:20 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold'>FUND LATER (~1-3 BUSINESS DAYS)</Text>
+                    <View style={{ marginTop:15 }}>
+
+                        <TouchableOpacity style={{ padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.midnight }}
+                        onPress={() => onManualACH()}>
+                            <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>
+                        </TouchableOpacity>
+                        {manual_account?
+                        <View style={{ position:'absolute', top:5, right:5, bottom:0}}>
+                            <Icons.TransactionSuccessIcon size={45}/>
+                        </View>
+                        :<></>}
+                    </View>
+                </View>
+            </View>
+            {code_request?.pending_deposit && promo && referrer && ['referral_code','referral_sweepstakes'].includes(promo.type) ?
+            <View style={{ margin:15, flexDirection:'row', backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+                <View style={{ justifyContent:'center' }}>
+                    {referrer?.profile_pic?
+                    <Image
+                        source={{ uri: referrer.profile_pic }}
+                        style={{ height: 60, width:60, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                    :
+                    <Icons.GiftIcon size={40} color={Colors.incentive.gold} />
+                    }
+                </View>
+                <View style={{flex:1, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
+                    <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} size={14} color={Colors.brand.midnight} weight='bold'>Give back to {referrer?.username}</Text>
+                    <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>Make a qualifying deposit and {referrer.username} will receive a reward!</Text>
+                </View>
+            </View>
+            :<></>}
+            {walkthrough ?
+            <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
+                <Button
+                    title={!ibt_account && !manual_account ? 'DO THIS LATER' : 'All Set!'}
+                    title_color={!ibt_account && !manual_account ? Colors.utility.error: Colors.utility.success}
+                    backgroundColor='transparent'
+                    onPress={() => onClose()}
+                />
+                <TouchableOpacity
+                    style={manual_account || ibt_account ? button_styles.wizard_valid : button_styles.wizard_invalid}
+                    disabled={!manual_account && !ibt_account ? true : false}
+                    onPress={() => onNext()}
+                >
+                    <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
+                </TouchableOpacity>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default FundAccountCard

package/src/Wallet/components/ItemOrderCard.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+import { ItemOrderHelpers } from '../api';
+import type { ItemOrderProps } from '../../types';
+import ItemOrderDetails from './ItemOrderDetailCard';
+
+type ItemOrderCardProps = {
+    item_order:ItemOrderProps
+}
+const ItemOrderCard = ({ item_order }:ItemOrderCardProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+
+    const status_label = ItemOrderHelpers.getStatusLabel(item_order);
+
+    return (
+        <View style={{ backgroundColor:expanded?Colors.shades.shade600:undefined, borderRadius:8 }}>
+            <TouchableOpacity style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade100 }} onPress={() => setExpanded(!expanded)}>
+                <View nativeID='item_order_info' style={{ flex:3, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>{item_order.description}</Text>
+                    <Text style={{ marginTop:4 }} size={12} color={Colors.brand.midnight} weight='regular'>Created at {moment(item_order.create_datetime).format('YYYY-MM-DD hh:mm a')}</Text>
+                </View>
+                <View nativeID='item_order_amount' style={{ flex:1, padding:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>${item_order.total_amount.toFixed(2)}</Text>
+                    <View style={{ marginTop:3, padding:3, paddingRight:10, paddingLeft:10, backgroundColor:status_label.color, borderRadius:8}}>
+                        <Text color={Colors.shades.white} weight='regular' textAlign='center'>{status_label.text}</Text>
+                    </View>
+                </View>
+                <View style={{ padding:10 }}>
+                    <Icons.ChevronIcon direction={expanded?'up':'down'} size={10} color={Colors.brand.midnight}/>
+                </View>
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ padding:20 }}>
+                <ItemOrderDetails
+                    item_order={item_order}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default ItemOrderCard

package/src/Wallet/components/ItemOrderDetailCard.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useEffect, useState } from "react"
+import { FlatList, View, ActivityIndicator} from "react-native"
+import { Text } from '../../Components';
+import { ItemOrderApi, WalletApi } from '../api';
+import type { AccountProps, ItemOrderProps, TransactionDetailProps, TransactionProps } from '../../types';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+
+type ItemOrderDetailsProps = {
+    item_order: ItemOrderProps,
+}
+
+const ItemOrderDetails = ({ item_order }:ItemOrderDetailsProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ data, setData ] = useState<{
+        account?:AccountProps,
+        transaction?:TransactionProps,
+        transaction_details:TransactionDetailProps[]
+    }>({
+        transaction_details: []
+    });
+
+    const { account, transaction, transaction_details } = data;
+
+
+    useEffect(() => {
+        getDataFromServer(item_order)
+    },[item_order])
+
+    const getDataFromServer = async(item_order:ItemOrderProps) => {
+        if(!item_order.transaction_id){ return }
+        setLoading(true);
+        const resp = await ItemOrderApi.getTransactionById(item_order.transaction_id)
+        const acct = await WalletApi.getAccountById(resp.transaction.account_id)
+        setData({
+            transaction: resp.transaction,
+            transaction_details: resp.transaction_details,
+            account:acct
+        })
+        setLoading(false)
+    }
+
+    const renderTransactionDetails = (data : { item:TransactionDetailProps, index:number }) => {
+        return (
+            <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
+                <Text size={14} color={Colors.brand.midnight} weight="bold">${data.item.amount.toFixed(2)}</Text>
+            </View>
+        )
+    }
+
+    if(!item_order){ return <></> }
+
+    let sub_total = parseFloat(item_order.amount as string)
+    let detail_total = transaction_details.filter(td => !td.fee_type).reduce((a,b) => a + b.amount, 0)
+    let unsettled = sub_total - detail_total
+    
+
+
+    return (
+        <View nativeID="item_order_details">
+            {account ?
+                <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Account</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight="bold">{account.account_label}</Text>
+                </View>
+            :<></>}
+            {loading ?
+            <ActivityIndicator size='small' color={Colors.brand.midnight} />
+            :<></>}
+            <FlatList
+                data={transaction_details}
+                renderItem={renderTransactionDetails}
+            />
+            {transaction?.status == 'posted' && transaction?.estimated_settle_datetime && moment().isBefore(moment(transaction.estimated_settle_datetime)) ?
+                <View>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Estimated Settle Time</Text>
+                        <Text size={14} color={Colors.brand.midnight} weight="bold">{moment(transaction.estimated_settle_datetime).format('MM/DD @ h a')}</Text>
+                    </View>
+                    {unsettled > 0 ?
+                    <View style={{ padding:10, backgroundColor:Colors.shades.shade100, borderRadius:8, marginTop:10 }}>
+                        <View style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Awaiting Settlement</Text>
+                            <Text size={14} color={Colors.utility.warning} weight="bold">${unsettled.toFixed(2)}</Text>
+                        </View>
+                        <Text style={{ marginTop:10 }} size={12} color={Colors.brand.midnight} weight='regular'>This amount exceeded your <Text size={12} weight='bold'>Instant Deposit Limit</Text> and will be added to your wallet after the transaction settles based on the date noted above.</Text>
+                    </View>
+                    :<></>}
+                </View>
+            :<></>}
+            {false && item_order.type == 'wallet' && transaction?.status == 'posted' ?
+            <View style={{ borderRadius:8, backgroundColor:Colors.utility.warning, padding:10, marginTop:10 }}>
+                <Text size={14} color={Colors.shades.white} weight='semibold' textAlign="center">Deposits in posted status are not eligible for withdraw until they settle.</Text>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+export default ItemOrderDetails

package/src/Wallet/components/LinkAccountManager.tsx

@@ -8,7 +8,7 @@ import type { AccountProps } from '../../types';
 type LinkAccountManagerProps = {
     ibt_placeholer_account:AccountProps,
     onCancel: () => void
-    onComplete: (account_id:string) => void
+    onComplete: (account:AccountProps) => void
 }
 
 const LinkAccountManager = ({ ibt_placeholer_account, onCancel, onComplete }: LinkAccountManagerProps) => {
@@ -48,7 +48,7 @@ const LinkAccountManager = ({ ibt_placeholer_account, onCancel, onComplete }: Li
             }, 4000);
         } else {
             setTryCounter(0);
-            onComplete(a.account_id)
+            onComplete(a)
         }
     }
 
@@ -64,8 +64,8 @@ const LinkAccountManager = ({ ibt_placeholer_account, onCancel, onComplete }: Li
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>LINK NEW ACCOUNT</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Link an account via instant bank transfer and get access to instant deposits and withdraws.</Text>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>LINK NEW ACCOUNT</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Link an account via instant bank transfer and get access to instant deposits and withdraws.</Text>
             </View>
             <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
                 <Icons.IBTFLowIcon size={350} />

package/src/Wallet/components/ManualACHAdd.tsx

@@ -44,8 +44,8 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>MANUAL ACH ACCOUNT</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new ACH account.  Once submitted, we will send 2 small deposits to the account to confirm ownership. This process can take up to 3 business days.</Text>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>MANUAL ACH ACCOUNT</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new ACH account.  Once submitted, we will send 2 small deposits to the account to confirm ownership. This process can take up to 3 business days.</Text>
             </View>
             <View style={{ flex:1, padding:20 }}>
                 <View style={{ marginTop:10 }}>

package/src/Wallet/components/ManualCardAdd.tsx

@@ -66,8 +66,8 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>NEW CARD ACCOUNT</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new card account. Once submitted and approve, you can transact immediately.</Text>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>NEW CARD ACCOUNT</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new card account. Once successfully added, you can transact immediately.</Text>
             </View>
             <View style={{ flex:1, padding:10, margin:10 }}>
                 <View nativeID='cc_input' style={{ marginTop:10 }}>
@@ -164,8 +164,8 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                 />
                 <Button
                     title='ADD ACCOUNT'
-                    style={{ flex:3, opacity:valid?1:0.5 }}
-                    disabled={!valid}
+                    style={{ flex:3, opacity:valid&&!loading?1:0.5 }}
+                    disabled={!valid||loading}
                     loading={loading}
                     title_color={Colors.shades.white}
                     padding={15}

package/src/Wallet/components/MyBalance.tsx

@@ -15,32 +15,54 @@ type MyBalanceProps = {
     onNext:() => void
 }
 
-const MyBalance = ({ player, balance_account, player_balance, walkthrough, onClose, onNext }:MyBalanceProps) => {
-
-    console.log(player, player_balance, balance_account)
+const MyBalance = ({ player_balance, onClose, onNext }:MyBalanceProps) => {
 
 
     return (
         <View style={{ flex:1 }}>
              <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>BettorEdge Balance</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>All order and game activity goes in and out of your BettorEdge balance.</Text>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>BETTOREDGE BALANCES</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>All order and competition activity goes in and out of your BettorEdge balances.  The specific balance depends on which app-mode you are in.</Text>
             </View>
-            <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                <View>
-                    <Text size={14} color={Colors.brand.midnight}>Your BettorEdge balance is made up of 3 currencies</Text>
-                </View>
-                <View>
-                    <Text>REAL MONEY (USD)</Text>
+            <View style={{ flex:1, padding:10 }}>
+                <View style={{ padding:10, paddingBottom:0 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='left'>APP MODES</Text>
                 </View>
-                <View>
-                    <Text>PROMO</Text>
+                <View style={{ backgroundColor:Colors.brand.cobalt, padding:10, borderRadius:8, margin:10 }}>
+                    <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={26} color={Colors.shades.white} weight='semibold'>Real-Money Mode</Text>
+                        <Icons.USDIcon size={30} color={Colors.shades.white} />
+                    </View>
+                    <View style={{ padding:5, paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.accents.accent200 }}>
+                        <Text size={14} weight='regular' color={Colors.shades.shade100}>When in real-money mode.  The app header will show as this dark blue color.  All activity when in this mode will use your real-money (USD) balance.</Text>
+                    </View>
+                    <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.shades.white}>Real-Money / USD ($)</Text>
+                        <Text size={16} weight='bold' color={Colors.shades.white}>${player_balance.balance.toFixed(2)}</Text>
+                    </View>
+                    <View style={{ padding:10 }}>
+                        <View style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.shades.white}>Promo (P)</Text>
+                            <Text size={16} weight='bold' color={Colors.shades.white}>P{player_balance.promo_balance.toFixed(2)}</Text>
+                        </View>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.utility.warning} weight='semibold'>Promo balance can be used for all real-money activities. Winnings will be returned as Real-Money/USD ($).</Text>
+                    </View>
                 </View>
-                <View>
-                    <Text>EDGE COINS</Text>
+                
+                <View style={{ backgroundColor:Colors.brand.cyan, padding:10, borderRadius:8, margin:10 }}>
+                    <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={26} color={Colors.shades.white} weight='semibold'>Demo Mode</Text>
+                        <Icons.EdgeCoinIcon size={30} color={Colors.shades.white} />
+                    </View>
+                    <View style={{ padding:5, paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.accents.accent100 }}>
+                        <Text size={14} weight='regular' color={Colors.shades.shade100}>When in demo mode.  The app header will show as this light blue color.  All activity when in this mode will use your Edge Coin (E) balance.</Text>
+                    </View>
+                    <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.shades.white}>Edge Coins (E)</Text>
+                        <Text size={16} weight='bold' color={Colors.shades.white}>E{player_balance.free_market_balance.toFixed(2)}</Text>
+                    </View>
                 </View>
             </View>
-            {walkthrough ?
             <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button
                     title='EXIT SETUP'
@@ -56,7 +78,6 @@ const MyBalance = ({ player, balance_account, player_balance, walkthrough, onClo
                     <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
                 </TouchableOpacity>
             </View>
-            :<></>}
         </View>
     )
 }

package/src/Wallet/components/OrderManager.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, View, ActivityIndicator } from 'react-native';
+import { ItemOrderApi } from '../api';
+import type { ItemOrderProps, ItemProps } from '../../types';
+import ItemOrderCard from './ItemOrderCard';
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type OrderManagerProps = {
+    onClose: () => void
+}
+
+const OrderManager = ({ onClose }:OrderManagerProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ data, setData ] = useState<{
+        offset: number,
+        items:ItemProps[],
+        item_orders:ItemOrderProps[]
+    }>({
+        offset:0,
+        items:[],
+        item_orders:[]
+    })
+
+    const { item_orders, offset } = data;
+
+    useEffect(() => {
+        getDataFromServer(0)
+    },[])
+
+    const getDataFromServer = async(offset:number) => {
+        setLoading(true);
+        console.log(offset)
+        const my_orders = await ItemOrderApi.getMyItemOrders(offset);
+        setData({
+            items:my_orders.items,
+            item_orders: my_orders.item_orders,
+            offset
+        })
+        setLoading(false)
+    }
+
+    const renderItemOrders = (data: { item:ItemOrderProps, index:number }) => {
+        return (
+            <ItemOrderCard
+                item_order={data.item}
+            />
+        )
+    }
+
+
+    return (
+        <View style={{ flex:1 }}>
+           <View style={{ padding:20 }}>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>ORDER HISTORY</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Review your order history below.  Select an item to see the transaction details.</Text>
+            </View>
+            <View style={{ flex:1, padding:10 }}>
+                {loading ?
+                <ActivityIndicator size='large' color={Colors.brand.midnight} />
+                :<></>}
+                <FlatList
+                    data={item_orders}
+                    renderItem={renderItemOrders}
+                    keyExtractor={(item) => item.item_order_id.toString()}
+                />
+            </View>
+            <View style={{ flexDirection:'row', alignItems:'center', padding:20, paddingBottom:0 }}>
+                <Button
+                    style={{ opacity: offset > 0 ? 1 : 0.5 }}
+                    title='PREV'
+                    disabled={offset == 0 ? true : false}
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset - 1)}
+                />
+                <View style={{ flex:1 }} />
+                <Button
+                    title='NEXT'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset + 1)}
+                />
+            </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 OrderManager

package/src/Wallet/components/VerifyACHAccount.tsx

@@ -56,8 +56,8 @@ const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetP
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>VERIFY ACCOUNT</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Verify this account by entering the two deposit amounts received from Bettoredge when setting up the account.</Text>
+                <Text size={26} color={Colors.brand.midnight} weight='bold'>VERIFY ACCOUNT</Text>
+                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Verify this account by entering the two deposit amounts received from Bettoredge when setting up the account.</Text>
             </View>
             <View nativeID='verify_inputs' style={{ flex:1, margin:20 }}>
                 <View style={{marginTop:30}}>