diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 2b10de408..15b87600c 100644 --- 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": "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." diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js index f3fd90e58..ca2bf13ed 100644 --- a/ui/app/pages/swaps/view-quote/view-quote.js +++ b/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() { ); - const actionableInsufficientMessage = t('swapApproveNeedMoreTokens', [ - - {tokenBalanceNeeded || ethBalanceNeeded} - , - tokenBalanceNeeded && !(sourceTokenSymbol === 'ETH') - ? sourceTokenSymbol - : 'ETH', - ]); + const actionableBalanceErrorMessage = tokenBalanceUnavailable + ? t('swapTokenBalanceUnavailable', [sourceTokenSymbol]) + : t('swapApproveNeedMoreTokens', [ + + {tokenBalanceNeeded || ethBalanceNeeded} + , + 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) && ( setWarningHidden(true)} /> )} @@ -661,6 +666,7 @@ export default function ViewQuote() { disabled={ submitClicked || balanceError || + tokenBalanceUnavailable || disableSubmissionDueToPriceWarning || gasPrice === null || gasPrice === undefined