From ed932ac0f51f77caff0ab7f4fe3eb8cc0092f0dc Mon Sep 17 00:00:00 2001
From: woodenfurniture <125113430+woodenfurniture@users.noreply.github.com>
Date: Thu, 19 Sep 2024 11:19:14 +1000
Subject: [PATCH] fix: use proper loading translation for approval gas fee

---
 .../components/SharedApprovalStep/SharedApprovalStep.tsx    | 5 +++--
 .../components/SharedApprovalDescription.tsx                | 3 +--
 .../components/SharedApprovalStepPending.tsx                | 6 ++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/SharedApprovalStep.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/SharedApprovalStep.tsx
index c5790ced59a..56b1fad3976 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/SharedApprovalStep.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/SharedApprovalStep.tsx
@@ -59,16 +59,17 @@ export const SharedApprovalStep = ({
   }, [tradeQuoteStep, transactionExecutionState, txHash, errorTranslation])
 
   const renderDescription = useCallback(
-    (approvalNetworkFeeCryptoFormatted: string) => {
+    (approvalNetworkFeeCryptoFormatted: string | undefined) => {
       return (
         <SharedApprovalDescription
           tradeQuoteStep={tradeQuoteStep}
           isError={transactionExecutionState === TransactionExecutionState.Failed}
           txHash={txHash}
-          approvalNetworkFeeCryptoFormatted={approvalNetworkFeeCryptoFormatted}
+          approvalNetworkFeeCryptoFormatted={approvalNetworkFeeCryptoFormatted ?? ''}
           errorTranslation={errorTranslation}
           gasFeeLoadingTranslation={gasFeeLoadingTranslation}
           gasFeeTranslation={gasFeeTranslation}
+          isLoadingNetworkFee={!Boolean(approvalNetworkFeeCryptoFormatted)}
         />
       )
     },
diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx
index 527bc876dcd..ae81aa735b7 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx
@@ -65,8 +65,7 @@ type SharedApprovalDescriptionProps = {
   approvalNetworkFeeCryptoFormatted: string
   gasFeeLoadingTranslation: string
   gasFeeTranslation: string
-  isAwaitingReset?: boolean
-  isLoadingNetworkFee?: boolean
+  isLoadingNetworkFee: boolean
 } & ErrorMsgProps
 
 export const SharedApprovalDescription = ({
diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalStepPending.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalStepPending.tsx
index 5b9fb15d052..26abb35c715 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalStepPending.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalStepPending.tsx
@@ -23,7 +23,7 @@ export type SharedApprovalStepPendingProps = {
   transactionExecutionState: TransactionExecutionState
   stepIndicator: JSX.Element
   allowanceType: AllowanceType
-  renderDescription: (approvalNetworkFeeCryptoFormatted: string) => JSX.Element
+  renderDescription: (approvalNetworkFeeCryptoFormatted: string | undefined) => JSX.Element
   renderContent: RenderAllowanceContentCallback
 }
 
@@ -70,9 +70,7 @@ export const SharedApprovalStepPending = ({
         feeAsset.symbol,
       )
     }
-
-    return translate('common.loadingText').toLowerCase()
-  }, [approvalNetworkFeeCryptoBaseUnit, feeAsset, toCrypto, translate])
+  }, [approvalNetworkFeeCryptoBaseUnit, feeAsset, toCrypto])
 
   const content = useMemo(() => {
     return renderContent({