Show appropriate error message if we do not have data on the balance …

…of token on the view-quote screen
MetaMask · Feb 16, 2021 · acb4756 · acb4756
1 parent 3605309
commit acb4756
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/app/_locales/en/messages.json b/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": "The balance of $1 is unavailable",
+    "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."

diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
@@ -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', [
-    <span key="swapApproveNeedMoreTokens-1" className="view-quote__bold">
-      {tokenBalanceNeeded || ethBalanceNeeded}
-    </span>,
-    tokenBalanceNeeded && !(sourceTokenSymbol === 'ETH')
-      ? sourceTokenSymbol
-      : 'ETH',
-  ]);
+  const actionableBalanceErrorMessage = tokenBalanceUnavailable
+    ? t('swapTokenBalanceUnavailable', [sourceTokenSymbol])
+    : t('swapApproveNeedMoreTokens', [
+        <span key="swapApproveNeedMoreTokens-1" className="view-quote__bold">
+          {tokenBalanceNeeded || ethBalanceNeeded}
+        </span>,
+        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