diff --git a/client/src/app/components/stardust/history/TransactionHistory.scss b/client/src/app/components/stardust/history/TransactionHistory.scss index 60d53e5ee..fe95e75bb 100644 --- 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 index bb1c65333..2bb0e5d47 100644 --- 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 = ({ setIsFormattedAmounts, }) => { const valueView = ( - setIsFormattedAmounts(!isFormattedAmounts)}> + setIsFormattedAmounts(!isFormattedAmounts)}> {balanceChangeFormatted} ); diff --git a/client/src/app/components/stardust/history/transactionHistoryUtils.ts b/client/src/app/components/stardust/history/transactionHistoryUtils.ts index cb50d5430..75caf524c 100644 --- 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 index ac47dedf3..e820c2e5a 100644 --- 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 index 628a54035..df66be4f3 100644 --- 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; }