feat(tooling-explorer): Show sign in supply change

iotaledger · Aug 13, 2024 · d08ede7 · d08ede7
1 parent fc4678f
commit d08ede7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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<StatsProps, 'children'> & {
     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 (
         <Stats postfix={formattedAmount && symbol} {...props}>
@@ -141,6 +148,7 @@ export default function EpochDetail() {
                             <IotaStats
                                 label="Supply Change"
                                 amount={getSupplyChangeAfterEpochEnd(epochData.endOfEpochInfo)}
+                                showSign
                             />
                         </EpochStats>