Fix #9872 - Show price difference warning on swaps price quote

[darkwing]

Fixes: #9872

Explanation: Implements the price difference warning for swaps quotes (https://www.figma.com/file/fDtda1cs3MmPXw1MgKswZc?embed_host=notion&kind=&node-id=1533%3A1064&viewer=1)

[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.

[danjm]

I think that if there is a balance warning being shown, we should not show the price difference warning. Because the price difference warning will not matter if the user can't actually submit the swap.

[danjm]

Code looks good overall. Two requested changes. Also, I am going to check with Jake about the copy.

[danjm]

Need to incorporate the copy changes discussed here https://consensys.slack.com/archives/C01CZRZ9H0T/p1605800606242600

[darkwing]

Per @jakehaugen, we need to update the following:

Warning message:
Swapping 1.2 ETH (~$500) for 0.08 WBTC (~$450).

Tooltip:
The difference in market prices can be affected by fees taken by intermediaries, size of market, size of trade, or market inefficiencies.

[darkwing]

@jakehaugen @danjm I believe I've found a blocker to this: we are not given a value for the destination token in the quotes we get returned from the API (as far as I can tell). For example, if I want to swap 5 $ETH for {x} $LINK, we do get told how many $LINK we'd get in return, but we don't get the value of 1 $LINK, nor do we get a total dollar value.

We do know the conversionRate of the origin token; can we do some wild math to figure out the total destination value? Is that safe? Please let me know if I'm missing anything obvious with dcd8eea to get the dollar amounts. Ideas very much welcome!

[danjm]

@darkwing The necessary API updates is now on prod. You can see it in the response to a trades request. For example: https://api.metaswap.codefi.network/trades?destinationToken=0x6b175474e89094c44da98b954eedeac495271d0f&sourceToken=0x0000000000000000000000000000000000000000&sourceAmount=1000000000000000000&slippage=2&timeout=10000&walletAddress=0x91224fd5662db33409e0278bc427ff18535ebb22

[danjm]

@darkwing bumping up a previous comment I made:

I think that if there is a balance warning being shown, we should not show the price difference warning. Because the price difference warning will not matter if the user can't actually submit the swap.

although, looking at the code, I am not sure why the price difference warning is showing at the same time as the insufficient eth warning...

[darkwing]

although, looking at the code, I am not sure why the price difference warning is showing at the same time as the insufficient eth warning...

If you're referring to the screenshots I posted, I set shouldShowPriceDifferenceWarning explicitly to true to illustrate how this new block could be used. Is there a reliable swap pairing that would often trigger this warning?

[danjm]

This is how it will look when no insufficient warning is present on full screen:

Edit: to recreate, you can disable the display of the insufficient warning but leave its containing div where it is, and also disable the logic that hides the price difference warning when there is insufficient balance

This is because of the space that the insufficient eth warning container takes up. It would be best for the price difference warning to be centered.

[darkwing]

This could be a bad assumption, but if there is a calculation error, we show it to the user directly. Thoughts?

[danjm]

I think in this case we should just show the "unknown impact" message.

[danjm]

One other change that is needed here: the places where we set a --thin modifier class based on showInsufficientWarning need to be updated to show that class based on showInsufficientWarning || shouldShowPriceDifferenceWarning

[danjm]

LGTM