XLabs / wormscan-ui

6 stars 3 forks source link

Improve how to display decimals #401

Open SamantaCasal opened 1 year ago

SamantaCasal commented 1 year ago

Description

To enhance user experience, the current transaction detail interface displays amounts with two fixed decimal places. This can be visually confusing or uncomfortable for users engaging in transactions involving less than one complete token. Displaying such small fractional amounts with two decimals may create an impression of inaccuracy or raise concerns about the precision of the transaction. Example

Image

Acceptance criteria

The following rules should be apply to display the token amount and redeem amount.

  1. Decimal Adaptability: The system must display a variable number of decimals for each transaction, based on the significant figure count of the transaction amount. Up to 7 digits in total will be displayed.

  2. Zero Elimination: The system will automatically remove any unnecessary zeros following the last significant number in the decimal part of the transaction amount. Whole numbers must be displayed without decimals.

Cases:

Original Value: $123.40000
Displayed Value: $123.4
Explanation: Unnecessary zeros removed; total of 4 significant figures displayed.
Original Value: $5678901
Displayed Value: $5,678,901
Explanation: Whole number without decimals; total of 7 digits displayed.
Original Value: $0.000123400
Displayed Value: $0.0001234
Explanation: Unnecessary zeros removed; total of 5 significant figures displayed.
Original Value: $4567.89000
Displayed Value: $4,567.89
Explanation: Unnecessary zeros removed; total of 7 significant figures displayed.
Original Value: $12.0000000
Displayed Value: $12
Explanation: Whole number displayed without decimals.
Original Value: $0.123456789
Displayed Value: $0.1234567
Explanation: Rounded to 7 significant figures with unnecessary zeros removed.
Original Value: $1234567.8
Displayed Value: $1,234,568
Explanation: Rounded to fit within 7 digits total.
  1. Responsive Display: The decimal display functionality must be responsive and appear correctly across different screen sizes, ensuring clarity and readability on devices ranging from mobile phones to large monitors.
Gpluv commented 1 year ago

@SamantaCasal Design here: https://www.figma.com/file/kVuUyVjFFcRP55xHxHoKtH/WormholeScan?type=design&node-id=5672-10594&mode=design&t=d8o6pSt3Ong9XX1t-4