1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00

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>
This commit is contained in:
Dan J Miller 2021-02-17 11:19:24 -03:30 committed by GitHub
parent 1a91d985cc
commit b056867c33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 11 deletions

View File

@ -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."

View File

@ -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', [
<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