feat: improve transaction history number formatting (#992)

* feat: improve transaction history number formatting * feat: add test for trailing decimals --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Jan 22, 2024 · fc75b8f · fc75b8f
1 parent f26ceb1
commit fc75b8f
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/client/src/app/components/stardust/history/TransactionHistory.scss b/client/src/app/components/stardust/history/TransactionHistory.scss
@@ -33,18 +33,21 @@
                 background: var(--transaction-history-dark-row);
             }
 
+            th,
+            td {
+                padding: 16px;
+            }
+
             th {
                 @include font-size(12px);
 
-                text-align: center !important;
                 color: $gray-6;
                 font-weight: 600;
-                text-align: left;
+                text-align: center;
                 text-transform: uppercase;
             }
 
             td {
-                padding: 16px;
                 text-align: center;
                 width: 33%;
                 text-wrap: nowrap;
@@ -84,12 +87,23 @@
                     color: var(--amount-color);
                     @include font-size(16px, 21px);
                     font-weight: 700;
+                    text-align: right;
 
                     &.negative {
                         color: var(--expanded-color);
                     }
                 }
             }
+
+            td,
+            th {
+                &:first-child {
+                    text-align: left;
+                }
+                &:last-child {
+                    text-align: right;
+                }
+            }
         }
     }
 

diff --git a/client/src/app/components/stardust/history/TransactionRow.tsx b/client/src/app/components/stardust/history/TransactionRow.tsx
@@ -15,7 +15,7 @@ const TransactionRow: React.FC<ITransactionEntryProps> = ({
     setIsFormattedAmounts,
 }) => {
     const valueView = (
-        <span className="pointer margin-r-5" onClick={() => setIsFormattedAmounts(!isFormattedAmounts)}>
+        <span className="pointer" onClick={() => setIsFormattedAmounts(!isFormattedAmounts)}>
             {balanceChangeFormatted}
         </span>
     );

diff --git a/client/src/app/components/stardust/history/transactionHistoryUtils.ts b/client/src/app/components/stardust/history/transactionHistoryUtils.ts
@@ -86,7 +86,7 @@ export const getTransactionHistoryRecords = (
             timestamp: lastOutputTime,
             dateFormatted: `${DateHelper.formatShort(lastOutputTime * 1000)} (${ago})`,
             balanceChange: balanceChange,
-            balanceChangeFormatted: (isSpent ? `-` : `+`) + formatAmount(Math.abs(balanceChange), tokenInfo, !isFormattedAmounts),
+            balanceChangeFormatted: (isSpent ? `-` : `+`) + formatAmount(Math.abs(balanceChange), tokenInfo, !isFormattedAmounts, 2, true),
             outputs: outputs,
         });
     });

diff --git a/client/src/helpers/stardust/valueFormatHelper.spec.ts b/client/src/helpers/stardust/valueFormatHelper.spec.ts
@@ -41,6 +41,10 @@ test("formatAmount should format 1 unit with fraction properly", () => {
     expect(formatAmount(1234567, tokenInfo)).toBe("1.23 IOTA");
 });
 
+test("formatAmount should format 1 unit with trailing decimals properly", () => {
+    expect(formatAmount(1000000, tokenInfo, false, 2, true)).toBe("1.00 IOTA");
+});
+
 test("formatAmount should handle edge case from issue 'explorer/issues/822'", () => {
     expect(formatAmount(1140000, tokenInfo)).toBe("1.14 IOTA");
 });

diff --git a/client/src/helpers/stardust/valueFormatHelper.tsx b/client/src/helpers/stardust/valueFormatHelper.tsx
@@ -16,13 +16,19 @@ const GENESIS_BLOCK_ID = "0x0000000000000000000000000000000000000000000000000000
  * @param decimalPlaces The decimal places to show.
  * @returns The formatted string.
  */
-export function formatAmount(value: number, tokenInfo: INodeInfoBaseToken, formatFull: boolean = false, decimalPlaces: number = 2): string {
+export function formatAmount(
+    value: number,
+    tokenInfo: INodeInfoBaseToken,
+    formatFull: boolean = false,
+    decimalPlaces: number = 2,
+    trailingDecimals?: boolean,
+): string {
     if (formatFull) {
         return `${value} ${tokenInfo.subunit ?? tokenInfo.unit}`;
     }
 
     const baseTokenValue = value / Math.pow(10, tokenInfo.decimals);
-    const formattedAmount = toFixedNoRound(baseTokenValue, decimalPlaces);
+    const formattedAmount = toFixedNoRound(baseTokenValue, decimalPlaces, trailingDecimals);
 
     // useMetricPrefix is broken cause it passes a float value to formatBest
     const amount = tokenInfo.useMetricPrefix ? UnitsHelper.formatBest(baseTokenValue) : `${formattedAmount} `;
@@ -44,10 +50,12 @@ export function formatNumberWithCommas(value: bigint): string {
  * @param precision The decimal places to show.
  * @returns The formatted amount.
  */
-function toFixedNoRound(value: number, precision: number = 2): string {
+function toFixedNoRound(value: number, precision: number = 2, trailingDecimals?: boolean): string {
+    const defaultDecimals = "0".repeat(precision);
     const valueString = `${value}`;
-    const [integer, fraction] = valueString.split(".");
-    if (!fraction) {
+    const [integer, fraction = defaultDecimals] = valueString.split(".");
+
+    if (fraction === defaultDecimals && !trailingDecimals) {
         return valueString;
     }