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

[danjm]

This PR fixes the following bug which exists on develop and prod:

1. Get exactly 5 UNI in your account
2. Use MetaMask's "Add token" feature to add a token that always returns an error when the eth-token-tracker tries to call either the symbol, balance or balanceOf method on the token contract. For example, add 0x7a250d5630b4cf539739df2c5dacb4c659f2488d and use a symbol name like "Test"
3. Then send most of your ETH out of your account. Leave $1-$10 USD of eth in your account
4. Then go to the home screen, select the UNI token, clicked the "Swap" button once on that token's asset screen
5. Once on the swap build quote screen, click the "Max" button, so that you are swapping away all 5 of your UNI.
6. Select ETH and the token to swap to, and request quotes
   7. You will arrive at the view quote screen and see a message that says "You need 5 more UNI to complete this swap", even though you have exactly 5 UNI in your account. Instead you should see a "You need ## more ETH to complete this swap"

Cause of this bug:

The useTokenTracker hook is how we get all balance information for users tokens. The useTokenTracker hook gets it balances via the eth-token-tracker library. That library receives data on all of a users tokens, and attempts to fetch balance data for all of them within a Promise.all call. If an error is thrown when attempting to fetch the balance data for any single token, it ultimately causes the useTokenTracker to return an empty array of token balances, even if balances for token other than the erroneous one would have succeeded.

If the user arrived at the view quote screen, and the above happened AND they had insufficient ETH for the token swap, then they see an error that says they have insufficient tokens. The useTokenTracker has no data on the token, so the view-quote screen logic evaluates the users balance of the token to be 0. Meanwhile, because the the user has insufficient ETH, the swaps.state.balanceError property is set to true. This causes the logic that sets insufficientTokens to evaluate to true, and tokenBalanceNeeded to evaluate to the amount of tokens being sent.

Solution:

This PR solves the issue in two ways, each of which would work on their own, but together they handle possible erroneous cases that could arise in the future as well.

First, the second parameter passed to useTokenTracker in view-quote is set to true. This is the includeFailedTokens parameter. It ensures that balances for all tokens that can be successfully retrieved are returned, even if attempting to get the balance of one or more tokens encounters and error. (This functionality was added in #9896). This alone prevents the bug as described above as it ensures that the token balance reflects the user's actual token balance and is not incorrectly defaulted to 0. As a result, the user will now correctly see an eth balance error (instead of a token balance error).

Second, if for whatever reason the useTokenTracker fails to get the balance for the currently selected token, we should not assume the balance is 0 and then show the user an error message that suggests that. Instead we should tell the user that we were unable to get information on their token balance, while also disabling submission of swaps in this case. A tokenBalanceUnavailable variable and associated error message has been added to handle this case.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [acb4756]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• code coverage: Report
• storybook: Storybook
• all artifacts

Page Load Metrics (642 ± 71 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	51	96	63	13	6
		domContentLoaded	347	977	640	147	71
		load	348	979	642	147	71
		domInteractive	346	977	640	147	71

[danjm]

@Gudahtt I added your suggestion copy change

[Gudahtt]

LGTM!

[metamaskbot]

Builds ready [21fd018]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• code coverage: Report
• storybook: Storybook
• all artifacts

Page Load Metrics (582 ± 38 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	47	76	60	7	3
		domContentLoaded	355	689	581	79	38
		load	357	690	582	79	38
		domInteractive	355	689	580	79	38