diff --git a/explorer/src/components/account/TokenLargestAccountsCard.tsx b/explorer/src/components/account/TokenLargestAccountsCard.tsx index a403a1d8e3..152235113b 100644 --- a/explorer/src/components/account/TokenLargestAccountsCard.tsx +++ b/explorer/src/components/account/TokenLargestAccountsCard.tsx @@ -52,7 +52,22 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) { return ; } + // Find largest fixed point in accounts array + const balanceFixedPoint = accounts.reduce( + (prev: number, current: TokenAccountBalancePair) => { + const amount = `${current.uiAmount}`; + const length = amount.length; + const decimalIndex = amount.indexOf("."); + if (decimalIndex >= 0 && length - decimalIndex - 1 > prev) { + return length - decimalIndex - 1; + } + return prev; + }, + 0 + ); + const supplyTotal = normalizeTokenAmount(mintInfo.supply, mintInfo.decimals); + return ( <>
@@ -77,7 +92,7 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) { {accounts.map((account, index) => - renderAccountRow(account, index, supplyTotal) + renderAccountRow(account, index, balanceFixedPoint, supplyTotal) )} @@ -90,11 +105,16 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) { const renderAccountRow = ( account: TokenAccountBalancePairWithOwner, index: number, + balanceFixedPoint: number, supply: number ) => { let percent = "-"; if (supply > 0) { percent = `${((100 * account.uiAmount) / supply).toFixed(3)}%`; + + if (parseFloat(percent) === 0 && account.uiAmount > 0) { + percent = `~${percent}`; + } } return ( @@ -109,8 +129,21 @@ const renderAccountRow = (
)} - {account.uiAmount} - {percent} + + {fixedLocaleNumber(account.uiAmount, balanceFixedPoint)} + + {percent} ); }; + +function fixedLocaleNumber(value: number, fixedPoint: number) { + const fixed = value.toFixed(fixedPoint); + const split = fixed.split("."); + + if (fixedPoint < 1) { + return parseInt(split[0], 10).toLocaleString("en"); + } + + return [parseInt(split[0], 10).toLocaleString("en"), split[1]].join("."); +}