Correct use of useTokenTracker in viewQuote to ensure token data is not disrupted by faulty token in user account (#10456)

* Use the includeFailedTokens option with useTokenTracker in viewQuote

* Show appropriate error message if we do not have data on the balance of token on the view-quote screen

* Update app/_locales/en/messages.json

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

app/_locales/en/messages.json

@@ -1841,6 +1841,10 @@
     "message": "Your $1 has been added to your account.",
     "description": "This message is shown after a swap is successful and communicates the exact amount of tokens the user has received for a swap. The $1 is a decimal number of tokens followed by the token symbol."
   },
+  "swapTokenBalanceUnavailable": {
+    "message": "We were unable to retrieve your $1 balance",
+    "description": "This message communicates to the user that their balance of a given token is currently unavailable. $1 will be replaced by a token symbol"
+  },
   "swapTokenToToken": {
     "message": "Swap $1 to $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."

ui/app/pages/swaps/view-quote/view-quote.js

@@ -148,7 +148,7 @@ export default function ViewQuote() {
 
   const gasTotalInWeiHex = calcGasTotal(maxGasLimit, gasPrice);
 
-  const { tokensWithBalances } = useTokenTracker(swapsTokens);
+  const { tokensWithBalances } = useTokenTracker(swapsTokens, true);
   const swapsEthToken = useSwapsEthToken();
   const balanceToken =
     fetchParamsSourceToken === swapsEthToken.address
@@ -164,6 +164,8 @@ export default function ViewQuote() {
       selectedFromToken.balance || '0x0',
       selectedFromToken.decimals,
     ).toFixed(9);
+  const tokenBalanceUnavailable =
+    tokensWithBalances && balanceToken === undefined;
 
   const approveData = getTokenData(approveTxParams?.data);
   const approveValue = approveData && getTokenValueParam(approveData);
@@ -473,14 +475,16 @@ export default function ViewQuote() {
     </span>
   );
 
-  const actionableInsufficientMessage = t('swapApproveNeedMoreTokens', [
+  const actionableBalanceErrorMessage = tokenBalanceUnavailable
-    <span key="swapApproveNeedMoreTokens-1" className="view-quote__bold">
+    ? t('swapTokenBalanceUnavailable', [sourceTokenSymbol])
-      {tokenBalanceNeeded || ethBalanceNeeded}
+    : t('swapApproveNeedMoreTokens', [
-    </span>,
+        <span key="swapApproveNeedMoreTokens-1" className="view-quote__bold">
-    tokenBalanceNeeded && !(sourceTokenSymbol === 'ETH')
+          {tokenBalanceNeeded || ethBalanceNeeded}
-      ? sourceTokenSymbol
+        </span>,
-      : 'ETH',
+        tokenBalanceNeeded && !(sourceTokenSymbol === 'ETH')
-  ]);
+          ? sourceTokenSymbol
+          : 'ETH',
+      ]);
 
   // Price difference warning
   const priceSlippageBucket = usedQuote?.priceSlippage?.bucket;
@@ -528,6 +532,7 @@ export default function ViewQuote() {
   }
 
   const shouldShowPriceDifferenceWarning =
+    !tokenBalanceUnavailable &&
     !showInsufficientWarning &&
     usedQuote &&
     (priceDifferenceRiskyBuckets.includes(priceSlippageBucket) ||
@@ -580,9 +585,9 @@ export default function ViewQuote() {
           })}
         >
           {viewQuotePriceDifferenceComponent}
-          {showInsufficientWarning && (
+          {(showInsufficientWarning || tokenBalanceUnavailable) && (
             <ActionableMessage
-              message={actionableInsufficientMessage}
+              message={actionableBalanceErrorMessage}
               onClose={() => setWarningHidden(true)}
             />
           )}
@@ -661,6 +666,7 @@ export default function ViewQuote() {
         disabled={
           submitClicked ||
           balanceError ||
+          tokenBalanceUnavailable ||
           disableSubmissionDueToPriceWarning ||
           gasPrice === null ||
           gasPrice === undefined