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