be-components 3.6.1 → 3.6.3

package/src/Checkout/index.tsx

@@ -1,21 +1,21 @@
 import  React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Linking, ScrollView, ActivityIndicator } from "react-native";
+import { Linking, ActivityIndicator, Modal, Platform } from "react-native";
 import type { AccountProps, ItemOrderProps, ItemProps, MyPlayerProps, PlayerAddressProps, TransactionProps } from '../types';
-import { Button, Icons, Text } from '../Components';
+import { Icons } from '../Components';
 import { CheckoutApi, CheckoutHelpers } from './api';
 import ItemSummaryCard from './components/ItemSummaryCard';
 import OrderSummaryCard from './components/OrderSummaryCard';
 import AccountSummaryCard from './components/AccountSummaryCard';
-import Colors from '../constants/colors';
 import AddressManager from '../Wallet/components/AddressManager';
 import { PayPalScriptProvider } from '@paypal/react-paypal-js';
 import PayPalOrderCapture from './components/PayPalOrderCapture';
-import SpringView from '../Components/Spring';
 import { usePlayerLocation } from '../LocationTracker/LocationStatus';
 import LocationTracker from '../LocationTracker';
-import { view_styles } from '../constants/styles';
 import { WalletApi } from '../Wallet/api';
 import ShippingSummaryCard from './components/ShippingSummaryCard';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
+import WebView from 'react-native-webview';
 
 type CheckoutProps = {
     item_order:ItemOrderProps,
@@ -26,6 +26,7 @@ type CheckoutProps = {
     onCancel:() => void
 }
 const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, onRequestNewAccount }:CheckoutProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ completing, setCompleting ] = useState(false);
     const [ error, setError ] = useState<string|undefined>();
@@ -184,7 +185,10 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
         if(!ip_transaction?.redirect_url){ return }
         if(completing){ return }
         setCompleting(true);
-        Linking.openURL(ip_transaction.redirect_url)
+        if(Platform.OS == 'web'){
+            Linking.openURL(ip_transaction.redirect_url)
+        }
+        //Native we will use the webview component
         setTimeout(() => {
             checkTransactionStatus()
         }, 5000);
@@ -193,8 +197,8 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
     if(!draft_order || !player || !loaded){
         return (
             <View style={{ flex:1, height, padding:20 }}>
-                <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign='center'>LOADING YOUR CART</Text>
-                <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ alignSelf:'center', marginTop:30 }} />
+                <Text size={16} theme='h1' textAlign='center'>LOADING YOUR CART</Text>
+                <ActivityIndicator size='large' color={Colors.text.h1} style={{ alignSelf:'center', marginTop:30 }} />
             </View>
         )
     }
@@ -202,26 +206,26 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
     return (
         
         <View style={{ flex:1, height }}>
-            <ScrollView style={{ flex:1 }}>
-                <View nativeID='items' style={{ ...local_styles.section, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600}}>
+            <View style={{ flex:1 }}>
+                <View nativeID='items' style={{ borderBottomWidth:1, borderBottomColor:Colors.borders.light, padding:10}}>
                     <ItemSummaryCard
                         items={items}
                     />
                 </View>
-                <View nativeID='order_summary' style={{ ...local_styles.section, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600}}>
+                <View nativeID='order_summary' style={{ borderBottomWidth:1, borderBottomColor:Colors.borders.light, padding:10}}>
                     <OrderSummaryCard
                         item_order={draft_order}
                     />
                 </View>
                 {shipping_address_required ?
-                <View nativeID='shipping_summary' style={{ ...local_styles.section, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600}}>
+                <View nativeID='shipping_summary' style={{ borderBottomWidth:1, borderBottomColor:Colors.borders.light, padding:10}}>
                     <ShippingSummaryCard
                         player_address={shipping_address}
                         onChangeAddress={() => setShowAddresses({ visible: true, address_type: 'shipping' })}
                     />
                 </View>
                 :<></>}
-                <View nativeID='account_summary' style={{ ...local_styles.section, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600}}>
+                <View nativeID='account_summary' style={{ borderBottomWidth:1, borderBottomColor:Colors.borders.light, padding:10}}>
                     <AccountSummaryCard
                         accounts={accounts}
                         items={items}
@@ -245,20 +249,20 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
                         onSelectAccount={(account) => handleChangeAccount(account)}
                     />
                 </View>
-            </ScrollView>
+            </View>
             {order_errors.length > 0 ?
-            <View style={{ margin:10, borderRadius:4,  padding:10, backgroundColor:Colors.shades.white, ...view_styles.float }}>
-                <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.midnight} weight='semibold'>Please fix the following before continuing</Text>
+            <View float style={{ margin:10, borderRadius:4,  padding:10 }}>
+                <Text style={{ marginBottom:5 }} size={14} theme='h2'>Please fix the following before continuing</Text>
                 {order_errors.map(e => {
                     return (
-                        <Text style={{ padding:4 }} size={12} color={Colors.utility.warning} weight='bold'>{e}</Text>
+                        <Text style={{ padding:4 }} size={12} color={Colors.text.warning} theme='h1'>{e}</Text>
                     )
                 })}
             </View>
             :<></>}
             {error?
             <View style={{ padding:10 }}>
-                <Text size={14} color={Colors.utility.warning} weight='bold' textAlign='center'>{error}</Text>
+                <Text size={14} color={Colors.text.warning} theme='h1' textAlign='center'>{error}</Text>
             </View>  
             :<></>}
             <PayPalScriptProvider  
@@ -272,13 +276,10 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
                         style={{ flex:1, marginRight:5, opacity:loading?0.5:1 }}
                         title='CANCEL'
                         disabled={loading}
-                        title_color={Colors.utility.error}
-                        borderWidth={1}
-                        borderColor={Colors.utility.error}
-                        padding={15}
+                        type='error'
                         onPress={() => handleCancel()}
                     />
-                    {selected_account?.account_type == 'paypal' ?
+                    {selected_account?.account_type == 'paypal' && Platform.OS == 'web' ?
                     <PayPalOrderCapture
                         draft_item_order={draft_order}
                         paypal_account={selected_account}
@@ -290,15 +291,24 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
                         onOrderUpdate={(item_order, transaction) => setCheckout({ ip_item_order: item_order, ip_transaction: transaction })}
                         onCancel={() => console.log('DONE!')}
                     />
+                    : selected_account?.account_type == 'paypal' && Platform.OS != 'web' ?
+                    <Button
+                        loading={loading || location.loading}
+                        disabled={loading || order_errors.length > 0}
+                        style={{ flex:1, alignItems:'center', padding:10 }}
+                        backgroundColor={Colors.absolutes.company.paypal}
+                        onPress={() => handleConfirm()}
+                    >
+                        <Icons.PayPalIcon size={90}/>
+                    </Button>
                     :
                     <Button
                         style={{ flex:3, opacity:loading || order_errors.length > 0 || error ? 0.5 : 1 }}
                         loading={loading || location.loading}
                         disabled={loading || order_errors.length > 0}
                         title={location.loading ?'VERIFYING LOCATION': will_redirect ? 'CONFIRM & CONTINUE' : 'SUBMIT PURCHASE'}
-                        title_color={Colors.shades.white}
-                        backgroundColor={ will_redirect ? Colors.brand.electric : Colors.utility.success }
-                        padding={15}
+                        title_color={Colors.text.white}
+                        backgroundColor={ will_redirect ? Colors.absolutes.brand.electric : Colors.absolutes.utility.success }
                         onPress={() => handleConfirm()}
                     />
                     }
@@ -306,72 +316,98 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
                 : <></>}
                 </View>
             </PayPalScriptProvider>
-            
-            {show_addresses.visible ?
-            <View style={{ position:'absolute', top:0, bottom:0, left:0, right:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
-            <SpringView
-                to={0}
-                from={500}
-                slide='vertical'
-                style={{ backgroundColor:Colors.shades.white,  borderTopRightRadius:40, borderTopLeftRadius:40 }}
-            >
-                <AddressManager
-                    player={player}
-                    player_addresses={player_addresses}
-                    location={location}
-                    onCancel={() => setShowAddresses({ visible:false })}
-                    onRemoveAddress={(addy) => {
-                        let selected_addy = billing_address && billing_address.player_address_id == addy.player_address_id ? undefined : billing_address
-                        if(show_addresses.address_type == 'billing'){
-                            setCheckoutData({ ...checkout_data, billing_address: selected_addy, player_addresses: player_addresses.filter(pa => pa.player_address_id != addy.player_address_id) })
-                        } else {
-                            setCheckoutData({ ...checkout_data, shipping_address: selected_addy, player_addresses: player_addresses.filter(pa => pa.player_address_id != addy.player_address_id) })
-                        }
-                    }}
-                    onAddAddress={(addy) => handleChangeBillingAddress(addy, show_addresses.address_type)}
-                    onSelect={(addy) => handleChangeBillingAddress(addy, show_addresses.address_type)}
-                />
-                </SpringView>
-            </View>
+            {Platform.OS != 'web' ?
+            <Modal
+                transparent
+                visible={completing && ip_transaction && ip_transaction.status == 'redirect' && ip_transaction.redirect_url ? true : false}
+                style={{ flex:1 }}
+            >   
+                <View type='blur' style={{ flex:1, padding:20, paddingTop:50, paddingBottom:50 }}>
+                    <View float style={{flex:1}}>
+                        {completing && ip_transaction && ip_transaction.redirect_url ?
+                        <WebView
+                            style={{ flex:1 }}
+                            originWhitelist={['*']}
+                            source={{ uri:ip_transaction.redirect_url }}
+                        />
+
+                    :<></>}
+                    </View>
+                </View>
+            </Modal>
             :<></>}
-            
-            {ip_item_order && ip_transaction ?
-                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
-                    <SpringView 
-                        slide='vertical'
-                        from={500}
-                        to={0}
-                        style={{ borderTopRightRadius:40, borderTopLeftRadius:40, backgroundColor:Colors.shades.white }}>
+            <Modal
+                visible={show_addresses.visible}
+                transparent
+                animationType='slide'
+                style={{flex:1}}
+            >
+                <View type='blur' style={{ flex:1 }}>
+                    <AddressManager
+                        player={player}
+                        player_addresses={player_addresses}
+                        location={location}
+                        onCancel={() => setShowAddresses({ visible:false })}
+                        onRemoveAddress={(addy) => {
+                            let selected_addy = billing_address && billing_address.player_address_id == addy.player_address_id ? undefined : billing_address
+                            if(show_addresses.address_type == 'billing'){
+                                setCheckoutData({ ...checkout_data, billing_address: selected_addy, player_addresses: player_addresses.filter(pa => pa.player_address_id != addy.player_address_id) })
+                            } else {
+                                setCheckoutData({ ...checkout_data, shipping_address: selected_addy, player_addresses: player_addresses.filter(pa => pa.player_address_id != addy.player_address_id) })
+                            }
+                        }}
+                        onAddAddress={(addy) => handleChangeBillingAddress(addy, show_addresses.address_type)}
+                        onSelect={(addy) => handleChangeBillingAddress(addy, show_addresses.address_type)}
+                    />
+                </View>
+            </Modal>
+            <Modal
+                transparent
+                animationType='slide'
+                visible={ip_transaction && ip_transaction ? true : false}
+                style={{flex:1}}
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'flex-end' }}>
+                {ip_item_order && ip_transaction ?
+                    <View float style={{ borderTopRightRadius:22, borderTopLeftRadius:22 }}>
                         {ip_transaction.status == 'posted' ?
-                        <View style={{ flex:1, padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
+                        <View style={{ padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
                             <Icons.TransactionSuccessIcon  size={150} />
-                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.utility.success, marginTop:20 }}>
-                                <Text size={20} color={Colors.utility.success} weight='bold' textAlign='center'>Order Successful</Text>
-                                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.cobalt} weight='regular' textAlign='center'>Your order was successfully processed. An email confirmation has been sent. Please select close below to continue.</Text>
+                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.text.success, marginTop:20 }}>
+                                <Text size={20} color={Colors.text.success} theme='h1' textAlign='center'>Order Successful</Text>
+                                <Text style={{ marginTop:10 }} size={16} theme='description' textAlign='center'>Your order was successfully processed. An email confirmation has been sent. Please select close below to continue.</Text>
                             </View>
                         </View>
                         : ip_transaction.status == 'failed' ?
-                        <View style={{ flex:1, padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
+                        <View style={{ padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
                             <Icons.TransactionErrorIcon  size={150} />
-                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.utility.error, marginTop:20 }}>
-                                <Text size={20} color={Colors.utility.error} weight='bold' textAlign='center'>Order Failed</Text>
-                                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.cobalt} weight='regular' textAlign='center'>Sorry, we were unable to process your order at this time.  Please try again or reach out to support for help.</Text>
+                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.text.error, marginTop:20 }}>
+                                <Text size={20} color={Colors.text.error} theme='h1' textAlign='center'>Order Failed</Text>
+                                <Text style={{ marginTop:10 }} size={16} theme='description' textAlign='center'>Sorry, we were unable to process your order at this time.  Please try again or reach out to support for help.</Text>
                             </View>
                         </View>
                         :ip_transaction.status == 'cancelled' ?
-                        <View style={{ flex:1, padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
+                        <View style={{ padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
                             <Icons.TransactionErrorIcon  size={150} />
-                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.utility.error, marginTop:20 }}>
-                                <Text size={20} color={Colors.utility.error} weight='bold' textAlign='center'>Order Cancelled</Text>
-                                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.cobalt} weight='regular' textAlign='center'>Your order was cancelled.  Please try again.</Text>
+                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.text.error, marginTop:20 }}>
+                                <Text size={20} color={Colors.text.error} theme='h1' textAlign='center'>Order Cancelled</Text>
+                                <Text style={{ marginTop:10 }} size={16} theme='description' textAlign='center'>Your order was cancelled.  Please try again.</Text>
                             </View>
                         </View>
-                        : ip_transaction.status == 'redirect' ?
-                        <View style={{ flex:1, padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
+                        : ip_transaction.status == 'redirect' && selected_account?.account_type == 'ach' ?
+                        <View style={{ padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
                             <Icons.IBTFLowIcon  size={300} />
-                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600, marginTop:20 }}>
-                                <Text size={20} color={Colors.brand.cobalt} weight='bold' textAlign='center'>Finish With Plaid</Text>
-                                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.cobalt} weight='regular' textAlign='center'>Select Complete Order below to complete the transaction through Plaid</Text>
+                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.borders.light, marginTop:20 }}>
+                                <Text size={20} theme='h1' textAlign='center'>Finish With Plaid</Text>
+                                <Text style={{ marginTop:10 }} size={16} theme='description' textAlign='center'>Select Complete Order below to complete the transaction through Plaid</Text>
+                            </View>
+                        </View>
+                        : ip_transaction.status == 'redirect' && selected_account?.account_type == 'paypal' ?
+                        <View style={{ padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
+                            <Icons.PayPalIcon  size={250} />
+                            <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.borders.light, marginTop:20 }}>
+                                <Text size={20} theme='h1' textAlign='center'>Finish With PayPal</Text>
+                                <Text style={{ marginTop:10 }} size={16} theme='description' textAlign='center'>Select Complete Order below to complete the transaction through PayPal</Text>
                             </View>
                         </View>
                         :<></>
@@ -382,21 +418,14 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
                                 style={{ flex:1, marginRight:5, opacity:1 }}
                                 title='CANCEL'
                                 //disabled={loading}
-                                title_color={Colors.utility.error}
-                                borderWidth={1}
-                                borderColor={Colors.utility.error}
-                                padding={15}
+                                type='error'
                                 onPress={() => handleCancel()}
                             />
                             :
                             <Button
                                 style={{ flex:1, opacity:1 }}
                                 title='CLOSE'
-                                //disabled={loading}
-                                title_color={Colors.utility.error}
-                                borderWidth={1}
-                                borderColor={Colors.utility.error}
-                                padding={15}
+                                type='error'
                                 onPress={() => onCompleteOrder(ip_item_order, ip_transaction)}
                             />
                             }
@@ -406,24 +435,18 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
                                 loading={completing}
                                 disabled={completing}
                                 title='COMPLETE ORDER'
-                                title_color={Colors.shades.white}
-                                backgroundColor={Colors.brand.electric}
-                                padding={15}
+                                type='success'
                                 onPress={() => handleRedirect()}
                             />
                             :<></>}
                         </View>
-                    </SpringView>
                 </View>
             :<></>}
+            </View>
+            </Modal>
+            
             {show_location ?
-            <View style={{ position:'absolute', top:0, bottom:0, left:0, right:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
-                <SpringView
-                    to={0}
-                    from={500}
-                    slide='vertical'
-                    style={{ backgroundColor:Colors.shades.white, borderTopRightRadius:40, borderTopLeftRadius:40 }}
-                >
+            <View style={{ position:'absolute', top:0, bottom:0, left:0, right:0, justifyContent:'flex-end' }}>
                     <LocationTracker 
                         location={location}
                         permission={permission}
@@ -431,18 +454,11 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
                         onPromptForPermission={() => checkPermissions()}
                         onClose={() => setShowLocation(false)}
                     />
-                </SpringView>
             </View>
             :<></>}
         </View>
     )
 }
 
-const local_styles = StyleSheet.create({
-    section: { 
-        padding: 10,
-        margin:5
-    }
-})
 
 export default Checkout

package/src/Components/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import Colors from '../constants/colors';
+import { Button, View } from './Themed';
+import { useColors } from '../constants/useColors';
 
 type CheckBoxProps = {
     checked?:boolean,
@@ -13,18 +13,19 @@ type CheckBoxProps = {
 }
 
 const Checkbox = ({ checked, size, disabled, color, onSelect, style, fill_style }:CheckBoxProps) => {
+    const Colors = useColors()
     const box_size = size ?? 20
-    const box_color = color ?? Colors.brand.midnight
+    const box_color = color ?? Colors.text.h1
     return (
-        <TouchableOpacity 
+        <Button 
             disabled={disabled}
-            style={{ height:box_size, width:box_size, borderWidth:1, borderRadius:4, borderColor:box_color, justifyContent:'center', alignItems:'center', ...style }}
+            style={{ height:box_size, width:box_size, padding:5, borderWidth:1, borderRadius:4, borderColor:box_color, justifyContent:'center', alignItems:'center', ...style }}
             onPress={() => onSelect(checked ? false : true)}
             >
             {checked ?
             <View style={{ height:box_size*0.75, width:box_size*0.75, backgroundColor:box_color, ...fill_style }} />
             :<></>}
-        </TouchableOpacity>
+        </Button>
     )
 }
 

package/src/Components/Icons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Colors from '../constants/colors';
-import Svg, { G, Circle, Line, Path, Mask, Rect, Defs, Stop, Polygon, Polyline } from 'react-native-svg';
+import Svg, { G, Circle, Line, Path, Mask, Rect, Defs, Stop, Polygon, Polyline, LinearGradient } from 'react-native-svg';
 
 
 type IconProps = {
@@ -245,17 +245,17 @@ const DiscoverCardIcon = ({ size }:IconProps) => {
     return (
         <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 53 37">
             <Defs>
-                <linearGradient x1="119.04999%" y1="34.8173989%" x2="34.8160554%" y2="-19.0523015%" id="linearGradient-1">
+                <LinearGradient x1="119.04999%" y1="34.8173989%" x2="34.8160554%" y2="-19.0523015%" id="LinearGradient-1">
                     <Stop stop-color="#F6A000" offset="0%"></Stop>
                     <Stop stop-color="#E47E02" offset="62.3918%"></Stop>
                     <Stop stop-color="#D36002" offset="100%"></Stop>
-                </linearGradient>
+                </LinearGradient>
             </Defs>
             <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                 <G id="discover-svgrepo-com" transform="translate(1.896552, 1.000000)">
                     <Rect id="Rectangle" stroke="#F3F3F3" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" x="0" y="0" width="50" height="34.2105263" rx="4"></Rect>
                     <Path d="M16.2885088,17.3880702 C16.2885088,19.5302632 17.970614,21.1912281 20.1353509,21.1912281 C20.747193,21.1912281 21.2714035,21.0709649 21.9176316,20.7665789 L21.9176316,19.0932456 C21.3494737,19.6620175 20.8459649,19.8914912 20.2014912,19.8914912 C18.7697368,19.8914912 17.7535088,18.8533333 17.7535088,17.3773684 C17.7535088,15.9782456 18.8018421,14.8744737 20.1353509,14.8744737 C20.8133333,14.8744737 21.3266667,15.1164035 21.9176316,15.694386 L21.9176316,14.0219298 C21.2936842,13.7054386 20.7807018,13.5742105 20.1688596,13.5742105 C18.0150877,13.5742105 16.2885088,15.2689474 16.2885088,17.3880702 Z M12.6403509,15.6180702 C12.6403509,16.0119298 12.8907018,16.22 13.7438596,16.5357018 C15.3608772,17.1272807 15.8400877,17.6512281 15.8400877,18.8092982 C15.8400877,20.22 14.8036842,21.2023684 13.3265789,21.2023684 C12.2447368,21.2023684 11.4580702,20.7764035 10.8031579,19.8148246 L11.7215789,18.9304386 C12.0487719,19.5633333 12.595,19.9026316 13.2730702,19.9026316 C13.9074561,19.9026316 14.3768421,19.4650877 14.3768421,18.8746491 C14.3768421,18.5685965 14.2346491,18.3058772 13.9505263,18.1203509 C13.8077193,18.0324561 13.5244737,17.9018421 12.967807,17.7052632 C11.6326316,17.2249123 11.1748246,16.7107895 11.1748246,15.7067544 C11.1748246,14.5140351 12.1583333,13.6185965 13.4478947,13.6185965 C14.2470175,13.6185965 14.9782456,13.8917544 15.5894737,14.4264035 L14.845614,15.4003509 C14.4753509,14.9853509 14.1250877,14.8101754 13.699386,14.8101754 C13.0866667,14.8101754 12.6403509,15.1591228 12.6403509,15.6180702 Z M8.84614035,21.0271053 L10.267807,21.0271053 L10.267807,13.7390351 L8.84614035,13.7390351 L8.84614035,21.0271053 Z M5.94036842,19.2138596 C5.49380702,19.6173684 4.91349123,19.7933333 3.99501754,19.7933333 L3.61349123,19.7933333 L3.61349123,14.9736842 L3.99501754,14.9736842 C4.91349123,14.9736842 5.471,15.1381579 5.94036842,15.5633333 C6.43199123,16.0008772 6.72764035,16.6794737 6.72764035,17.3774561 C6.72764035,18.077193 6.43199123,18.7763158 5.94036842,19.2138596 Z M4.27968421,13.7390351 L2.19298246,13.7390351 L2.19298246,21.0268421 L4.26870175,21.0268421 C5.37244737,21.0268421 6.16928947,20.7666667 6.86898246,20.1855263 C7.70045614,19.4977193 8.19207018,18.4607018 8.19207018,17.3881579 C8.19207018,15.2372807 6.58516667,13.7390351 4.27968421,13.7390351 Z M31.2458772,13.7390351 L33.1892105,18.634386 L35.1579825,13.7390351 L36.6989474,13.7390351 L33.5505263,21.2141228 L32.7854386,21.2141228 L29.6927193,13.7390351 L31.2458772,13.7390351 Z M37.3418421,21.0270175 L41.3733333,21.0270175 L41.3733333,19.7931579 L38.7622807,19.7931579 L38.7622807,17.8258772 L41.2772807,17.8258772 L41.2772807,16.5914035 L38.7622807,16.5914035 L38.7622807,14.9738596 L41.3733333,14.9738596 L41.3733333,13.7388596 L37.3418421,13.7388596 L37.3418421,21.0270175 Z M43.7347368,17.0942105 L44.15,17.0942105 C45.0580702,17.0942105 45.5392982,16.6997368 45.5392982,15.9671053 C45.5392982,15.2578947 45.0580702,14.8870175 44.1725439,14.8870175 L43.7347368,14.8870175 L43.7347368,17.0942105 Z M44.4228947,13.7387719 C46.062193,13.7387719 47.0020175,14.5260526 47.0020175,15.8905263 C47.0020175,17.0064035 46.4124561,17.7390351 45.3416667,17.9566667 L47.6361404,21.0269298 L45.8878947,21.0269298 L43.9202632,18.0991228 L43.7347368,18.0991228 L43.7347368,21.0269298 L42.3147368,21.0269298 L42.3147368,13.7387719 L44.4228947,13.7387719 Z" id="Shape" fill="#1D1D1B"></Path>
-                    <Path d="M29.525,19.497193 C30.6787719,17.6929825 30.1518421,15.2961404 28.3478947,14.1424561 L28.3478947,14.1424561 C26.5438596,12.9887719 24.1465789,13.5154386 22.9927193,15.3196491 L22.9927193,15.3196491 C21.8392105,17.1233333 22.3664035,19.5209649 24.1703509,20.6746491 L24.1703509,20.6746491 C25.9742982,21.8283333 28.3714035,21.3008772 29.525,19.497193 Z" id="Path" fill="url(#linearGradient-1)"></Path>
+                    <Path d="M29.525,19.497193 C30.6787719,17.6929825 30.1518421,15.2961404 28.3478947,14.1424561 L28.3478947,14.1424561 C26.5438596,12.9887719 24.1465789,13.5154386 22.9927193,15.3196491 L22.9927193,15.3196491 C21.8392105,17.1233333 22.3664035,19.5209649 24.1703509,20.6746491 L24.1703509,20.6746491 C25.9742982,21.8283333 28.3714035,21.3008772 29.525,19.497193 Z" id="Path" fill="url(#LinearGradient-1)"></Path>
                 </G>
             </G>
         </Svg>
@@ -385,14 +385,14 @@ const TransactionSuccessIcon = ({ size }:IconProps) => {
     return (
         <Svg width={`${icon_size}px`} height={`${icon_size}px`} viewBox="0 0 280 280">
             <Defs>
-                <linearGradient x1="10.1840112%" y1="0%" x2="83.3721051%" y2="96.1944687%" id="linearGradient-1">
+                <LinearGradient x1="10.1840112%" y1="0%" x2="83.3721051%" y2="96.1944687%" id="LinearGradient-1">
                     <Stop stop-color="#AB9F5E" offset="0%"></Stop>
                     <Stop stop-color="#AB9F5E" stop-opacity="0.5" offset="100%"></Stop>
-                </linearGradient>
+                </LinearGradient>
             </Defs>
             <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                 <G id="success-filled-svgrepo-com" transform="translate(14.818182, 14.909091)">
-                    <Circle id="Oval" stroke="url(#linearGradient-1)" stroke-width="30" cx="125.181818" cy="125.090909" r="125"></Circle>
+                    <Circle id="Oval" stroke="url(#LinearGradient-1)" stroke-width="30" cx="125.181818" cy="125.090909" r="125"></Circle>
                     <Path d="M125,0 C194.035594,0 250,55.9644063 250,125 C250,194.035594 194.035594,250 125,250 C55.9644063,250 0,194.035594 0,125 C0,55.9644063 55.9644063,0 125,0 Z M109.428571,149.660714 L81.6607143,121.875 C78.9525135,119.166799 75.0052249,118.109126 71.3057539,119.100397 C67.6062828,120.091667 64.716667,122.981283 63.7253967,126.680754 C62.7341264,130.380225 63.7917992,134.327514 66.5,137.035714 L101.857143,172.392857 C103.862111,174.413566 106.590895,175.550121 109.4375,175.550121 C112.284105,175.550121 115.012889,174.413566 117.017857,172.392857 L190.232143,99.1607143 C192.977104,96.4631674 194.064403,92.5006372 193.080578,88.77993 C192.096752,85.0592229 189.192965,82.152011 185.47342,81.1638015 C181.753875,80.1755921 177.790066,81.2582195 175.089286,84 L109.428571,149.660714 Z" id="Shape" fill="#7DCD85" fill-rule="nonzero"></Path>
                 </G>
             </G>
@@ -406,15 +406,15 @@ const TransactionErrorIcon = ({size}:IconProps) => {
     return (
         <Svg width={`${icon_size}px`} height={`${icon_size}px`} viewBox="0 0 270 270">
             <Defs>
-                <linearGradient x1="24.8993998%" y1="1.46791298%" x2="80.892076%" y2="92.9436978%" id="linearGradient-1">
+                <LinearGradient x1="24.8993998%" y1="1.46791298%" x2="80.892076%" y2="92.9436978%" id="LinearGradient-1">
                     <Stop stop-color="#6E8894" offset="0%"></Stop>
                     <Stop stop-color="#6E8894" stop-opacity="0.64" offset="100%"></Stop>
-                </linearGradient>
+                </LinearGradient>
             </Defs>
             <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                 <G id="error-filled-svgrepo-com" transform="translate(10.000000, 10.000000)">
                     <Path d="M125,0 C194.025,0 250,55.975 250,125 C250,194.025 194.025,250 125,250 C55.975,250 0,194.025 0,125 C0,55.975 55.975,0 125,0 Z M153.6625,78.6625001 L125,107.325 L96.3374999,78.6625001 L78.6625001,96.3374999 L107.325,125 L78.6625001,153.6625 L96.3374999,171.3375 L125,142.675 L153.6625,171.3375 L171.3375,153.6625 L142.675,125 L171.3375,96.3374999 L153.6625,78.6625001 Z" id="Combined-Shape" fill="#D5573B" fill-rule="nonzero"></Path>
-                    <Circle id="Oval" stroke="url(#linearGradient-1)" stroke-width="20" cx="125" cy="125" r="125"></Circle>
+                    <Circle id="Oval" stroke="url(#LinearGradient-1)" stroke-width="20" cx="125" cy="125" r="125"></Circle>
                 </G>
             </G>
         </Svg>