From f615a67399b162757be0ba0a264992c281f7b976 Mon Sep 17 00:00:00 2001
From: Rostik Kayko <119863957+rostislav-deriv@users.noreply.github.com>
Date: Fri, 3 Nov 2023 17:05:32 +0300
Subject: [PATCH] [Wallets] Rostislav / WALL-2443 / Align `TransactionStatus`
 header font size with Figma (#11180)

* fix: transaction status font size

* fix: `TransactionStatus` no transactions

* fix: "No recent transactions" font size also updated

* refactor: remove useless usememos, add `isTransactionStatusSuccessVisible`
---
 .../TransactionStatus/TransactionStatus.tsx   | 24 ++++++++-----------
 .../TransactionStatusSuccess.tsx              |  2 +-
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx
index f24f169da7e7..97f59478af53 100644
--- 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/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx
index 5c76ab42cc0e..6d900941d2ba 100644
--- a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx
+++ b/packages/wallets/src/features/cashier/modules/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>
             )}