m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/_locales/en/messages.json
View File

@ -1841,6 +1841,10 @@
"message": "Your $1 has been added to your account.", "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." "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": { "swapTokenToToken": {
"message": "Swap $1 to $2", "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." "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."

28
ui/app/pages/swaps/view-quote/view-quote.js
View File

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