Revamp transfer fee details in quote comparison

[ebma]

Context

To communicate more clearly how Vortex' fees are comprised and how they compare to competitors, the table for the quote comparison should show more data.

It should look similar to the comparison on Wise.

TODO

• Show each output amount in a larger font
• For the amount 'lost, use a filled arrow to prevent it being mistaken for a dropdown arrow

• Add a dropdown arrow right to each row. On click, it should show the 'Transfer fee', 'Exchange Rate', and 'Exchange Rate Markup', summing up to the total 'Cost of Transfer'
  • The 'Transfer Fee' equates to the offramp fee charged by the anchor.
  • The 'Exchange Rate' is the one we calculated and also show in the 'Fee details' box
  • The 'Exchange Rate Markup' is the difference between the 'Exchange Rate' that the provider is using vs the 'real current mid-market exchange rate'
• Show a '?' tooltip next to the 'Transfer Fee' with the text: "This transfer fee is an extra cost on top of the exchange rate markup. Many providers don’t show it upfront. Based on provider data as of (date), fees may vary and change over time"
• Show a '?' tooltip next to the 'Exchange Rate Markup' with the text: "Exchange rate markup. The exchange rate they're using {their-rate}, which is {real-rate - their-rate} lower than the mid-market rate of {real-rate}. This adds {exchange-rate-markup} EUR on top of your transfer fees."

Notes

• For simplicity, we assume that the Vortex exchange rate is the 'real' exchange rate. Thus, for Vortex we always show an 'Exchange Rate Markup' of 0.
• To calculate the 'Transfer Fee' vs 'Exchange Rate' of Moonpay, Transak and AlchemyPay, the responses of the signer-service need to be adjusted. All the relevant data should be processed and treamlined on the signer-service before being passed down to the Vortex frontend.

[ebma]

Hey team! Please add your planning poker estimate with Zenhub @gianfra-t @Sharqiewicz