[UX] Improve clarity of token exchange rate in payment requests (total amount section)

[ori-near]

Background

Currently, within the Payments page, the "Create Payment Request" screen displays the equivalent token value for a given USD amount. For example, if a user selects NEAR token and enters $10 for the total amount, and the current NEAR price is $6.21, the user sees this:

We currently fetch the rate from CoinGecko (using the API endpoint: https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd) when the user initially loads a particular page, such as Payments page. The price is then cached for the entire session, meaning it will remain the same even if the actual exchange rate changes.

Our current approach and UI present a couple of problems:

1. The exchange rate information and update mechanism are not clear to the user
2. The cached exchange rate might not reflect the latest value, potentially leading to confusion and inaccuracies in the payment amounts

User Story

As a user who creates a payment request, I need to want to understand how the token rate is calculated and be able to refresh it manually so that I can have the most accurate payment amount.

Acceptance Criteria

• Create a Figma design that solves the following issues:
  • Improve the display of values around the total amount
  • Determine the best way to display both the equivalent USD amount and the exchange rate. Currently the "USD and Price" values are confusing.
  • Provide an info button with a clear explanation of how we calculate the exchange rate (e.g. "The exchange is fetched from CoinGecko when you first load this page. You can manually refresh it for the latest value."
  • Manual Refresh: Add a visual cue (e.g. refresh button) or text that allows the user to manually update the exchange rate to get the latest value.
• Create a follow up development task to implement solution

Resources & Additional Notes

Priority

🔴 P0 : Critical

[FREZZZBE]

@ori-near @Megha-Dev-19

Here is the solution I would like to offer. I explained it in the video.

Screen.Recording.2024-12-24.at.13.49.20.mov

[ori-near]

Thanks @FREZZZBE!

Question - do you think it is clear to the user that the right value below the near input field represents the current NEAR token price?

Also I like the refresh concept but don't think I'd say "outdated" - maybe just refresh to get latest or something. @Megha-Dev-19 please confirm if this would work.

[Megha-Dev-19]

@FREZZZBE this looks great, we can implement the auto-refresh, we can decide the time in which we want to refresh the price, but if we want to do it manually that's also possible.
cc: @ori-near

[FREZZZBE]

Question - do you think it is clear to the user that the right value below the near input field represents the current NEAR token price?

It wasn’t clear to me at first, but once I started using it, I understood. I don’t want to make it more complicated, and I believe that if you’re familiar with crypto, seeing a value around $100k near the Bitcoin logo would naturally indicate it’s the price of Bitcoin.

@ori-near after discussion with @Megha-Dev-19, we simplified it and how it works:

• Every 1 minute, it automatically updates the price.
• If the user doesn’t understand it, he can hover over the info icon.