diff --git a/apps/core/src/hooks/useFormatCoin.ts b/apps/core/src/hooks/useFormatCoin.ts index f9212f97846..8920c20f934 100644 --- a/apps/core/src/hooks/useFormatCoin.ts +++ b/apps/core/src/hooks/useFormatCoin.ts @@ -31,14 +31,20 @@ export function formatBalance( balance: bigint | number | string, decimals: number, format: CoinFormat = CoinFormat.ROUNDED, + showSign = false, ) { const bn = new BigNumber(balance.toString()).shiftedBy(-1 * decimals); + let formattedBalance = formatAmount(bn); if (format === CoinFormat.FULL) { - return bn.toFormat(); + formattedBalance = bn.toFormat(); } - return formatAmount(bn); + if (showSign && !formattedBalance.startsWith('-')) { + formattedBalance = `+${formattedBalance}`; + } + + return formattedBalance; } const ELLIPSIS = '\u{2026}'; @@ -100,6 +106,7 @@ export function useFormatCoin( balance?: bigint | number | string | null, coinType?: string | null, format: CoinFormat = CoinFormat.ROUNDED, + showSign = false, ): FormattedCoin { const fallbackSymbol = useMemo( () => (coinType ? getCoinSymbol(coinType) ?? '' : ''), @@ -114,7 +121,7 @@ export function useFormatCoin( if (!isFetched) return '...'; - return formatBalance(balance, data?.decimals ?? 0, format); + return formatBalance(balance, data?.decimals ?? 0, format, showSign); }, [data?.decimals, isFetched, balance, format]); return [formatted, isFetched ? data?.symbol || fallbackSymbol : '', queryResult]; diff --git a/apps/explorer/src/pages/epochs/EpochDetail.tsx b/apps/explorer/src/pages/epochs/EpochDetail.tsx index 67967cc1fb6..49a08bc0e7d 100644 --- a/apps/explorer/src/pages/epochs/EpochDetail.tsx +++ b/apps/explorer/src/pages/epochs/EpochDetail.tsx @@ -2,7 +2,7 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { useFormatCoin } from '@iota/core'; +import { CoinFormat, useFormatCoin } from '@iota/core'; import { useIotaClientQuery } from '@iota/dapp-kit'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { LoadingIndicator } from '@iota/ui'; @@ -30,11 +30,18 @@ import { ValidatorStatus } from './stats/ValidatorStatus'; function IotaStats({ amount, + showSign, ...props }: Omit & { amount: bigint | number | string | undefined | null; + showSign?: boolean; }): JSX.Element { - const [formattedAmount, symbol] = useFormatCoin(amount, IOTA_TYPE_ARG); + const [formattedAmount, symbol] = useFormatCoin( + amount, + IOTA_TYPE_ARG, + CoinFormat.ROUNDED, + showSign, + ); return ( @@ -141,6 +148,7 @@ export default function EpochDetail() {