be-components 3.6.1 → 3.6.2

package/lib/typescript/src/Wallet/components/AddressManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressManager.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/AddressManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMpF,KAAK,mBAAmB,GAAG;IACvB,MAAM,CAAC,EAAC,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAC,MAAM,CAAC;QACd,WAAW,EAAC,GAAG,CAAC;QAChB,eAAe,EAAC,GAAG,EAAE,CAAC;QACtB,cAAc,CAAC,EAAC,kBAAkB,CAAC;QACnC,MAAM,CAAC,EAAC,MAAM,CAAC;QACf,QAAQ,CAAC,EAAC,aAAa,CAAA;KAC1B,CAAA;IACD,gBAAgB,EAAC,kBAAkB,EAAE,CAAC;IACtC,YAAY,EAAC,CAAC,OAAO,EAAC,kBAAkB,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAC,CAAC,OAAO,EAAC,kBAAkB,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,CAAC,OAAO,EAAC,kBAAkB,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,QAAA,MAAM,cAAc,sFAAsF,mBAAmB,sBA8K5H,CAAA;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"AddressManager.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/AddressManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMpF,KAAK,mBAAmB,GAAG;IACvB,MAAM,CAAC,EAAC,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAC,MAAM,CAAC;QACd,WAAW,EAAC,GAAG,CAAC;QAChB,eAAe,EAAC,GAAG,EAAE,CAAC;QACtB,cAAc,CAAC,EAAC,kBAAkB,CAAC;QACnC,MAAM,CAAC,EAAC,MAAM,CAAC;QACf,QAAQ,CAAC,EAAC,aAAa,CAAA;KAC1B,CAAA;IACD,gBAAgB,EAAC,kBAAkB,EAAE,CAAC;IACtC,YAAY,EAAC,CAAC,OAAO,EAAC,kBAAkB,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAC,CAAC,OAAO,EAAC,kBAAkB,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,CAAC,OAAO,EAAC,kBAAkB,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,QAAA,MAAM,cAAc,sFAAsF,mBAAmB,sBAmK5H,CAAA;AAED,eAAe,cAAc,CAAA"}

package/lib/typescript/src/Wallet/components/FundAccountCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FundAccountCard.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/FundAccountCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAKxJ,KAAK,oBAAoB,GAAG;IACxB,MAAM,EAAC,aAAa,CAAC;IACrB,QAAQ,EAAC,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE;QACV,YAAY,CAAC,EAAC,gBAAgB,CAAC;QAC/B,QAAQ,CAAC,EAAC,iBAAiB,CAAC;QAC5B,KAAK,CAAC,EAAC,UAAU,CAAC;QAClB,eAAe,CAAC,EAAC,mBAAmB,CAAC;QACrC,aAAa,CAAC,EAAC,iBAAiB,CAAA;KACnC,CAAA;IACD,WAAW,CAAC,EAAC,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAC,CAAC,OAAO,CAAC,EAAC,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,CAAC,OAAO,EAAC,YAAY,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,eAAe,mGAAmG,oBAAoB,sBAiI3I,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"FundAccountCard.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/FundAccountCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAKxJ,KAAK,oBAAoB,GAAG;IACxB,MAAM,EAAC,aAAa,CAAC;IACrB,QAAQ,EAAC,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE;QACV,YAAY,CAAC,EAAC,gBAAgB,CAAC;QAC/B,QAAQ,CAAC,EAAC,iBAAiB,CAAC;QAC5B,KAAK,CAAC,EAAC,UAAU,CAAC;QAClB,eAAe,CAAC,EAAC,mBAAmB,CAAC;QACrC,aAAa,CAAC,EAAC,iBAAiB,CAAA;KACnC,CAAA;IACD,WAAW,CAAC,EAAC,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAC,CAAC,OAAO,CAAC,EAAC,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,CAAC,OAAO,EAAC,YAAY,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,eAAe,mGAAmG,oBAAoB,sBAkI3I,CAAA;AAED,eAAe,eAAe,CAAA"}

package/lib/typescript/src/Wallet/components/LinkAccountManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkAccountManager.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/LinkAccountManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKpE,KAAK,uBAAuB,GAAG;IAC3B,sBAAsB,EAAC,YAAY,CAAC;IACpC,gBAAgB,EAAC,kBAAkB,EAAE,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,CAAC,OAAO,EAAC,YAAY,KAAK,IAAI,CAAA;CAC7C,CAAA;AAED,QAAA,MAAM,kBAAkB,uEAAwE,uBAAuB,sBAiMtH,CAAA;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"LinkAccountManager.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/LinkAccountManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMpE,KAAK,uBAAuB,GAAG;IAC3B,sBAAsB,EAAC,YAAY,CAAC;IACpC,gBAAgB,EAAC,kBAAkB,EAAE,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,CAAC,OAAO,EAAC,YAAY,KAAK,IAAI,CAAA;CAC7C,CAAA;AAED,QAAA,MAAM,kBAAkB,uEAAwE,uBAAuB,sBAuLtH,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/lib/typescript/src/Wallet/components/ManualACHAdd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManualACHAdd.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/ManualACHAdd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG/D,KAAK,iBAAiB,GAAG;IACrB,MAAM,EAAC,aAAa,CAAC;IACrB,YAAY,EAAC,CAAC,OAAO,EAAC,YAAY,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAC,MAAM,IAAI,CAAA;CACtB,CAAA;AACD,QAAA,MAAM,YAAY,uCAAuC,iBAAiB,sBAmJzE,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ManualACHAdd.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/ManualACHAdd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAM/D,KAAK,iBAAiB,GAAG;IACrB,MAAM,EAAC,aAAa,CAAC;IACrB,YAAY,EAAC,CAAC,OAAO,EAAC,YAAY,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAC,MAAM,IAAI,CAAA;CACtB,CAAA;AAGD,QAAA,MAAM,YAAY,uCAAuC,iBAAiB,sBAoKzE,CAAA;AAED,eAAe,YAAY,CAAA"}

package/lib/typescript/src/Wallet/components/ManualCardAdd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManualCardAdd.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/ManualCardAdd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG/D,KAAK,kBAAkB,GAAG;IACtB,MAAM,EAAC,aAAa,CAAC;IACrB,YAAY,EAAC,CAAC,IAAI,EAAC,YAAY,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAC,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,QAAA,MAAM,aAAa,uCAAuC,kBAAkB,sBAkK3E,CAAA;AAOD,eAAe,aAAa,CAAA"}
+{"version":3,"file":"ManualCardAdd.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/ManualCardAdd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAM/D,KAAK,kBAAkB,GAAG;IACtB,MAAM,EAAC,aAAa,CAAC;IACrB,YAAY,EAAC,CAAC,IAAI,EAAC,YAAY,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAC,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,QAAA,MAAM,aAAa,uCAAuC,kBAAkB,sBA4L3E,CAAA;AAID,eAAe,aAAa,CAAA"}

package/lib/typescript/src/Wallet/components/MyBalance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MyBalance.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/MyBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKnF,KAAK,cAAc,GAAG;IAClB,MAAM,EAAC,aAAa,CAAC;IACrB,cAAc,EAAC,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAC,YAAY,CAAC;IAC9B,WAAW,CAAC,EAAC,OAAO,CAAC;IACrB,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,MAAM,EAAC,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,SAAS,wCAAwC,cAAc,sBAiEpE,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"MyBalance.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/MyBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKnF,KAAK,cAAc,GAAG;IAClB,MAAM,EAAC,aAAa,CAAC;IACrB,cAAc,EAAC,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAC,YAAY,CAAC;IAC9B,WAAW,CAAC,EAAC,OAAO,CAAC;IACrB,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,MAAM,EAAC,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,SAAS,wCAAwC,cAAc,sBAgEpE,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/typescript/src/Wallet/components/WalletSetup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletSetup.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/WalletSetup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQtE,KAAK,gBAAgB,GAAG;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,eAAe,EAAE,mBAAmB,CAAC;IACrC,gBAAgB,EAAC,CAAC,EAAE,EAAC,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAC,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAC,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,WAAW,2DAA2D,gBAAgB,sBAmO3F,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"WalletSetup.d.ts","sourceRoot":"","sources":["../../../../../src/Wallet/components/WalletSetup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOtE,KAAK,gBAAgB,GAAG;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,eAAe,EAAE,mBAAmB,CAAC;IACrC,gBAAgB,EAAC,CAAC,EAAE,EAAC,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAC,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAC,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,WAAW,2DAA2D,gBAAgB,sBA6P3F,CAAA;AAED,eAAe,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -195,6 +195,7 @@
     "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/Checkout/components/AccountSummaryCard.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { View, TouchableOpacity, Image } from "react-native";
-import { Button, Checkbox, Icons, Text, TextInput } from '../../Components';
+import { Image } from "react-native";
+import { Checkbox, Icons } from '../../Components';
 import type { AccountProps, ItemProps, PlayerAddressProps } from '../../types';
-import Colors from '../../constants/colors';
 import { CheckoutApi, CheckoutHelpers } from '../api';
 import moment from 'moment-mini';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AccountSummaryCardProps = {
     selected_account?:AccountProps,
@@ -20,7 +21,7 @@ type AccountSummaryCardProps = {
     onSelectAccount:(account:AccountProps) => void
 }
 const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_address_required, player_address, onRequestNewAccount, onCVVChange, onAccountsUpdate, onSelectAccount, onChangeAddress }:AccountSummaryCardProps) => {
-
+    const Colors = useColors();
     const my_accounts = CheckoutHelpers.filterMyPurchaseAccounts(accounts, items);
 
 
@@ -41,30 +42,30 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
                 if(account.ach_detail?.payment_provider == 'nuvei'){ 
                     return (
                         <View style={{ flexDirection:'row', alignItems:'center', padding:4 }}>
-                            <Icons.BankInstantIcon size={22} color={Colors.brand.midnight}/>
-                            <Text style={{ marginLeft:3 }} size={12} color={Colors.brand.midnight} weight='semibold'>{account.ach_detail?.bank_name}</Text>
+                            <Icons.BankInstantIcon size={22} color={Colors.text.h1}/>
+                            <Text style={{ marginLeft:3 }} size={12} theme='h2'>{account.ach_detail?.bank_name}</Text>
                         </View>
                     ) 
                 }
                 return (
                     <View style={{ flexDirection:'row', alignItems:'center', padding:4 }}>
-                        <Icons.BankIcon size={22} color={Colors.brand.midnight}/>
-                        <Text style={{ marginLeft:3 }} size={12} color={Colors.brand.midnight} weight='semibold'>{account.ach_detail?.bank_name}</Text>
+                        <Icons.BankIcon size={22} color={Colors.text.h1}/>
+                        <Text style={{ marginLeft:3 }} size={12} theme='h2'>{account.ach_detail?.bank_name}</Text>
                     </View>
                 ) 
             case 'card':
                 return renderCardIcon(account.card_detail?.card_brand)
             case 'paypal':
                 return (
-                    <View style={{ flexDirection:'row', alignItems:'center', padding:4, backgroundColor:Colors.company.paypal }}>
-                        <Icons.PayPalIcon size={50} color={Colors.brand.midnight}/>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:4, backgroundColor:Colors.absolutes.company.paypal }}>
+                        <Icons.PayPalIcon size={50} color={Colors.text.h1}/>
                     </View>
                 )
             case 'bettoredge':
                 return (
                     <View style={{ flexDirection:'row', alignItems:'center', padding:4 }}>
-                        <Icons.BettorEdgeIcon size={10} color={Colors.brand.midnight}/>
-                        <Text style={{ marginLeft:5 }} size={14} color={Colors.brand.midnight} weight='semibold'>Wallet</Text>
+                        <Icons.BettorEdgeIcon size={10} color={Colors.text.h1}/>
+                        <Text style={{ marginLeft:5 }} size={14} theme='h2'>Wallet</Text>
                     </View>
                 )
             default: return <></>
@@ -83,7 +84,7 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
             case 'discover':
                 return <Icons.DiscoverCardIcon size={50} />
             default:
-                return <Icons.CreditCardIcon size={50} color={Colors.brand.midnight}/>
+                return <Icons.CreditCardIcon size={50} color={Colors.text.h1}/>
         }
     }
 
@@ -91,11 +92,11 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
     const renderAccounts = (data: { item:AccountProps, index:number }) => {
         const selected = data.item.account_id == selected_account?.account_id ? true : false
         return (
-            <TouchableOpacity 
-                style={{ margin:3, flexDirection:'row', backgroundColor:selected?Colors.highlights.highlight400Faded:'transparent', borderWidth:selected?2:1, borderColor:selected?Colors.brand.electric:Colors.shades.shade600, borderRadius:4 }}
+            <Button 
+                style={{ margin:3, padding:3, flexDirection:'row', borderWidth:selected?2:1, borderColor:selected?Colors.text.success:Colors.borders.light, borderRadius:4 }}
                 onPress={() => onSelectAccount(data.item)}>
                 {getLabel(data.item)}
-            </TouchableOpacity>
+            </Button>
         )
     }
     
@@ -107,11 +108,10 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
     return (
         <View style={{  padding:5 }}>
             <View style={{ padding:5, paddingTop:10, paddingBottom:10, flexDirection:'row', alignItems:'center' }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='semibold'>Select Account</Text>
+                <Text style={{ flex:1 }} size={14} theme='h2'>Select Account</Text>
                 <Button
                     title='Add New Account'
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
+                    type='text'
                     onPress={() => onRequestNewAccount()}
                 />
             </View>
@@ -126,11 +126,11 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
                     <View style={{ flex:1, marginRight:5 }}>
                         <Text size={14} weight='bold'>{selected_account.account_label}</Text>
                         {selected_account.account_type == 'card' && selected_account.card_detail ?
-                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>EXP: {moment(selected_account.card_detail.expiration_date).format('MM/YYYY')}</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.text.descriptionLight}>EXP: {moment(selected_account.card_detail.expiration_date).format('MM/YYYY')}</Text>
                         :<></>}   
                     </View>
                     <View style={{ flexDirection:'row', alignItems:'center' }}>
-                        <Text style={{ marginRight:5 }} size={14} color={Colors.brand.midnight}>Default</Text>
+                        <Text style={{ marginRight:5 }} size={14} theme='description'>Default</Text>
                         <Checkbox
                             checked={selected_account.default_account ? true : false}
                             onSelect={() => handleUpdateDefault(selected_account.account_id)}
@@ -140,10 +140,9 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
                 </View>
                 {selected_account.account_type == 'card' ?
                 <View style={{ flexDirection:'row', alignItems:'center', marginTop:10 }}>
-                    <Text style={{ flex:1 }} color={Colors.brand.midnight} size={12}>Enter CVV</Text>
+                    <Text style={{ flex:1 }} theme='description' size={12}>Enter CVV</Text>
                     <TextInput
                         style={{ textAlign:'center', width:100, padding:10, borderRadius:4 }}
-                        placeholderTextColor={Colors.brand.slate}
                         placeholder='123'
                         value={cvv}
                         onChangeText={(text) => onCVVChange(text)}
@@ -154,14 +153,13 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
                 <View style={{ marginTop:15, flexDirection:'row', alignItems:'center' }}>
                     {player_address ?
                     <View style={{ flex:1 }}>
-                        <Text size={12} color={Colors.brand.midnight}>{player_address.street}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight}>{player_address.city}, {player_address.state} {player_address.zip}</Text>
+                        <Text size={12} theme='description'>{player_address.street}</Text>
+                        <Text style={{ marginTop:3 }} size={12} theme='description'>{player_address.city}, {player_address.state} {player_address.zip}</Text>
                     </View>
                     :<View style={{flex:1}} />}
                     <Button
                         title={player_address ? 'CHANGE':'ADD BILLING ADDRESS'}
-                        title_color={Colors.brand.electric}
-                        padding={5}
+                        type='text'
                         onPress={() => onChangeAddress()}
                     />
                 </View>

package/src/Checkout/components/ItemSummaryCard.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import { Image, View } from "react-native";
+import { Image } from "react-native";
 import type { ItemProps } from "../../types";
-import { Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Text, View } from '../../Components/Themed';
 
 type ItemSummaryCardProps = {
     items:ItemProps[]
 }
 const ItemSummaryCard = ({ items }:ItemSummaryCardProps) => {
-
     const default_item = items[0]
 
     if(!default_item){ return <></> }
@@ -23,8 +21,8 @@ const ItemSummaryCard = ({ items }:ItemSummaryCardProps) => {
                     />
                 </View>
                 <View style={{ flex:1 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{default_item.name}</Text>
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>{default_item.description}</Text>
+                    <Text size={16} theme='h1'>{default_item.name}</Text>
+                    <Text style={{ marginTop:5 }} size={14} theme='description'>{default_item.description}</Text>
                 </View>
             </View>
         </View>

package/src/Checkout/components/OrderSummaryCard.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { View } from "react-native";
 import type { ItemOrderProps } from "../../types";
-import Colors from '../../constants/colors';
-import { Text } from '../../Components';
+import { Text, View } from '../../Components/Themed';
 
 
 type OrderSummaryCardProps = {
@@ -14,24 +12,24 @@ const OrderSummaryCard = ({ item_order }:OrderSummaryCardProps) => {
     return (
         <View>
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight}>Subtotal</Text>
-                <Text size={14} color={Colors.brand.midnight}>${item_order.amount}</Text>
+                <Text style={{ flex:1 }} size={14} theme='description'>Subtotal</Text>
+                <Text size={14} theme='description'>${item_order.amount}</Text>
             </View>
             {item_order.fee_1 ?
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight}>{item_order.fee_1}</Text>
-                <Text size={14} color={Colors.brand.midnight}>${item_order.fee_1_amount}</Text>
+                <Text style={{ flex:1 }} size={14} theme='description'>{item_order.fee_1}</Text>
+                <Text size={14} theme='description'>${item_order.fee_1_amount}</Text>
             </View>
             :<></>}
             {item_order.fee_2 ?
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight}>{item_order.fee_2}</Text>
-                <Text size={14} color={Colors.brand.midnight}>${item_order.fee_2_amount}</Text>
+                <Text style={{ flex:1 }} size={14} theme='description'>{item_order.fee_2}</Text>
+                <Text size={14} theme='description'>${item_order.fee_2_amount}</Text>
             </View>
             :<></>}
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>Total</Text>
-                <Text size={14} color={Colors.brand.midnight} weight='bold'>${item_order.total_amount}</Text>
+                <Text style={{ flex:1 }} size={14} theme='h1'>Total</Text>
+                <Text size={14} theme='h1'>${item_order.total_amount}</Text>
             </View>
         </View>
     )

package/src/Checkout/components/PayPalHtml.ts

@@ -0,0 +1,26 @@
+export const PaypalHtml = (client_id:string) => {
+    return (
+        `
+        <!DOCTYPE html>
+            <html>
+            <head>
+                <meta charset="UTF-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <title>PayPal JS SDK Standard Integration</title>
+                <link
+                rel="stylesheet"
+                type="text/css"
+                href="https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css"
+                />
+            </head>
+            <body>
+                <div id="paypal-button-container" class="paypal-button-container"></div>
+                <p id="result-message"></p>
+
+                <script src="https://www.paypal.com/sdk/js?client-id=%${client_id}%&buyer-country=US&currency=USD&components=buttons&enable-funding=venmo"></script>
+                <script src="app.js"></script>
+            </body>
+        </html>
+        `
+    )
+}

package/src/Checkout/components/PayPalOrderCapture.tsx

@@ -40,7 +40,7 @@ const PayPalOrderCapture = ({ draft_item_order, region, coordinates, items, payp
         onCancel()
 
     }
-    
+
     let height = 55
     if(button_height && button_height > 24 && button_height < 56){ height = button_height }
 

package/src/Checkout/components/PayPalWebview.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import WebView from "react-native-webview";
+
+
+const PayPalWebView = ({}) => {
+    const htmlContent = `
+  <!DOCTYPE html>
+<html>
+
+<head>
+  <title>Hey</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="https://www.paypal.com/sdk/js?client-id=AUZbVk4xEx5hlDu52ogVyUr4LhPF7eIYWrvxqEh_ebiAlbdg8HUvCZHnNgnW9_gmkI2lx4nX095STlAr&currency=USD"></script>
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f5f5f5;
+    }
+
+    #paypal-button-container {
+    pointer-events: auto
+      z-index: 999;
+      /* Make sure PayPal button is on top */
+    }
+  </style>
+</head>
+
+<body>
+  <div id="paypal-button-container"></div>
+  <script>
+    const sendMessage = () => {
+        if (window.ReactNativeWebView) {
+          window.ReactNativeWebView.postMessage(JSON.stringify({title:'hello'}));
+        } else {
+          setTimeout(sendMessage, 500); // Try again after 500ms
+        }
+      };
+      sendMessage();
+      paypal.Buttons({
+        fundingSource: paypal.FUNDING.PAYPAL,
+        style: {
+          layout: 'vertical',
+          color: 'gold',
+          shape: 'rect',
+          label: 'pay',
+          height: 50
+        },
+        createOrder: function(data, actions) {
+            console.log('CREATING ORDER!!!!!')
+          return actions.order.create({
+            purchase_units: [{
+              amount: {
+                value: '100'
+              }
+            }]
+          });
+        },
+        onApprove: function(data, actions) {
+          return actions.order.capture().then(function(details) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({ event: "success", details }));
+          });
+        },
+        onError: function(err) {
+          window.ReactNativeWebView.postMessage(JSON.stringify({ event: "error", error: err }));
+        }
+      }).render('#paypal-button-container');
+  </script>
+</body>
+
+</html>
+`;
+
+
+/*
+    const onSuccess = (data:any) => {
+        console.log(data)
+    }
+
+    const onError = (data:any) => {
+        console.log(data)
+    }
+*/
+
+    const handleMessage = (event:any) => {
+        console.log(event)
+        /*
+        const data = JSON.parse(event.nativeEvent.data);
+        if (data.event === "success") {
+        onSuccess(data.details);
+        } else if (data.event === "error") {
+        onError(data.error);
+        }
+        */
+    };
+    return (
+        <WebView
+            style={{ flex:1, borderRadius:8 }}
+            source={{ html: htmlContent }}
+            javaScriptEnabled={true}
+            //userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"
+            //userAgent={device.userAgent}
+            domStorageEnabled={true}
+            onError={(error) => console.error(error)}
+            onLoadEnd={() => console.log('Page loaded')}
+            onMessage={handleMessage}
+
+            />
+    )
+}
+
+export default PayPalWebView

package/src/Checkout/components/ShippingSummaryCard.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { View } from 'react-native';
-import { Button, Text } from '../../Components';
 import type { PlayerAddressProps } from '../../types';
-import Colors from '../../constants/colors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type ShippingSummaryCardProps = {
     onChangeAddress: () => void,
@@ -14,18 +12,17 @@ const ShippingSummaryCard = ({ player_address, onChangeAddress }:ShippingSummary
     return (
         <View>
             <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='semibold'>Shipping Address</Text>
+                <Text style={{ flex:1 }} size={14} theme='h1'>Shipping Address</Text>
                 <Button
                     title={player_address ? 'Change' : 'Select Address'}
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
+                    type='text'
                     onPress={() => onChangeAddress()}
                 />
             </View>
             {player_address ?
             <View style={{ padding:5, marginTop:10 }}>
-                <Text size={12} color={Colors.brand.midnight}>{player_address.street}</Text>
-                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight}>{player_address.city}, {player_address.state} {player_address.zip}</Text>
+                <Text size={12} theme='description'>{player_address.street}</Text>
+                <Text style={{ marginTop:3 }} size={12} theme='description'>{player_address.city}, {player_address.state} {player_address.zip}</Text>
             </View>
             :<></>}
         </View>