explorer: 11939 normalize token values largest table (#11952)
* render consistent fixed point on balance, add tilde for approximation * run format fix * add comment * make number values monospaced and add comma formatting
This commit is contained in:
@ -52,7 +52,22 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
|
|||||||
return <ErrorCard text="No holders found" />;
|
return <ErrorCard text="No holders found" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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);
|
const supplyTotal = normalizeTokenAmount(mintInfo.supply, mintInfo.decimals);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="card">
|
<div className="card">
|
||||||
@ -77,7 +92,7 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody className="list">
|
<tbody className="list">
|
||||||
{accounts.map((account, index) =>
|
{accounts.map((account, index) =>
|
||||||
renderAccountRow(account, index, supplyTotal)
|
renderAccountRow(account, index, balanceFixedPoint, supplyTotal)
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -90,11 +105,16 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
|
|||||||
const renderAccountRow = (
|
const renderAccountRow = (
|
||||||
account: TokenAccountBalancePairWithOwner,
|
account: TokenAccountBalancePairWithOwner,
|
||||||
index: number,
|
index: number,
|
||||||
|
balanceFixedPoint: number,
|
||||||
supply: number
|
supply: number
|
||||||
) => {
|
) => {
|
||||||
let percent = "-";
|
let percent = "-";
|
||||||
if (supply > 0) {
|
if (supply > 0) {
|
||||||
percent = `${((100 * account.uiAmount) / supply).toFixed(3)}%`;
|
percent = `${((100 * account.uiAmount) / supply).toFixed(3)}%`;
|
||||||
|
|
||||||
|
if (parseFloat(percent) === 0 && account.uiAmount > 0) {
|
||||||
|
percent = `~${percent}`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
@ -109,8 +129,21 @@ const renderAccountRow = (
|
|||||||
<Address pubkey={account.owner} alignRight link truncate />
|
<Address pubkey={account.owner} alignRight link truncate />
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-right">{account.uiAmount}</td>
|
<td className="text-right text-monospace">
|
||||||
<td className="text-right">{percent}</td>
|
{fixedLocaleNumber(account.uiAmount, balanceFixedPoint)}
|
||||||
|
</td>
|
||||||
|
<td className="text-right text-monospace">{percent}</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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(".");
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user