[Wallets] Rostislav / WALL-2443 / Align TransactionStatus header fo…

…nt size with Figma (binary-com#11180) * fix: transaction status font size * fix: `TransactionStatus` no transactions * fix: "No recent transactions" font size also updated * refactor: remove useless usememos, add `isTransactionStatusSuccessVisible`
aum-deriv · Nov 6, 2023 · f615a67 · f615a67
1 parent 3d7d202
commit f615a67
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx
@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useActiveWalletAccount, useCryptoTransactions } from '@deriv/api';
-import { Divider, WalletText } from '../../../../components/Base';
 import { WalletsTransactionStatusLoader } from '../../../../components';
+import { Divider, WalletText } from '../../../../components/Base';
 import Warning from '../../../../public/images/warning.svg';
 import { THooks } from '../../../../types';
 import { TransactionStatusError } from './components/TransactionStatusError';
@@ -33,15 +33,9 @@ const TransactionStatus: React.FC<TTransactionStatus> = ({ transactionType }) =>
         return () => unsubscribe();
     }, [subscribe, transactionType, unsubscribe]);
 
-    const isLoading = useMemo(
-        () => isTransactionsLoading || isActiveWalletAccountLoading,
-        [isTransactionsLoading, isActiveWalletAccountLoading]
-    );
-
-    const isError = useMemo(
-        () => !!activeWalletAccountError || !!recentTransactionsError,
-        [activeWalletAccountError, recentTransactionsError]
-    );
+    const isLoading = isTransactionsLoading || isActiveWalletAccountLoading;
+    const isError = !!activeWalletAccountError || !!recentTransactionsError;
+    const isTransactionStatusSuccessVisible = !isLoading && !isError && wallet;
 
     const refresh = useCallback(() => {
         unsubscribe();
@@ -53,17 +47,19 @@ const TransactionStatus: React.FC<TTransactionStatus> = ({ transactionType }) =>
     return (
         <div className='wallets-transaction-status'>
             <div className='wallets-transaction-status__header'>
-                <WalletText weight='bold'>Transaction status</WalletText>
+                <WalletText size='sm' weight='bold'>
+                    Transaction status
+                </WalletText>
                 {isError && <Warning />}
             </div>
             <Divider color='#d6dadb' /> {/* --color-grey-5 */}
             <div className='wallets-transaction-status__body'>
                 {!isError && isLoading && <WalletsTransactionStatusLoader />}
                 {isError && <TransactionStatusError refresh={refresh} />}
-                {!isLoading && !isError && wallet && transactions && (
+                {isTransactionStatusSuccessVisible && (
                     <TransactionStatusSuccess
                         transactionType={transactionType}
-                        transactions={transactions}
+                        transactions={transactions || []}
                         wallet={wallet}
                     />
                 )}

diff --git a/...odules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx b/...odules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx
@@ -49,7 +49,7 @@ const TransactionStatusSuccess: React.FC<TTransactionStatusSuccess> = ({ transac
                 </React.Fragment>
             ) : (
                 <React.Fragment>
-                    <WalletText size='xs'>No recent transactions.</WalletText>
+                    <WalletText size='sm'>No recent transactions.</WalletText>
                     <Divider color='#d6dadb' /> {/* --color-grey-5 */}
                 </React.Fragment>
             )}