gaspersic/solana
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Display SOL uniformly in explorer

Browse Source
This commit is contained in:
Justin Starry 2020-08-01 23:31:39 +08:00 committed by Justin Starry
parent 97c0f7c364
commit eab48c99d7
4 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
explorer/src/components/AccountsCard.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { ReactNode } from "react";
import { Link } from "react-router-dom";
import {
useAccounts,
@ -140,7 +140,7 @@ const renderAccountRow = (account: Account) => {
owner = displayAddress(account.details.owner.toBase58());
}
let balance = "-";
let balance: ReactNode = "-";
if (account.lamports !== undefined) {
balance = lamportsToSolString(account.lamports);
}

12
explorer/src/components/SupplyCard.tsx
View File

@ -32,17 +32,23 @@ export default function SupplyCard() {
<TableCardBody>
<tr>
<td className="w-100">Total Supply (SOL)</td>
<td>{lamportsToSolString(supply.total)}</td>
<td className="text-right">
{lamportsToSolString(supply.total, 0)}
</td>
</tr>
<tr>
<td className="w-100">Circulating Supply (SOL)</td>
<td>{lamportsToSolString(supply.circulating)}</td>
<td className="text-right">
{lamportsToSolString(supply.circulating, 0)}
</td>
</tr>
<tr>
<td className="w-100">Non-Circulating Supply (SOL)</td>
<td>{lamportsToSolString(supply.nonCirculating)}</td>
<td className="text-right">
{lamportsToSolString(supply.nonCirculating, 0)}
</td>
</tr>
</TableCardBody>
</div>

8
explorer/src/components/TopAccountsCard.tsx
View File

@ -90,8 +90,8 @@ export default function TopAccountsCard() {
<tr>
<th className="text-muted">Rank</th>
<th className="text-muted">Address</th>
<th className="text-muted">Balance (SOL)</th>
<th className="text-muted">% of {header} Supply</th>
<th className="text-muted text-right">Balance (SOL)</th>
<th className="text-muted text-center">% of {header} Supply</th>
<th className="text-muted">Details</th>
</tr>
</thead>
@ -123,8 +123,8 @@ const renderAccountRow = (
<code>{base58AccountPubkey}</code>
</Copyable>
</td>
<td>{lamportsToSolString(account.lamports, 0)}</td>
<td>{`${((100 * account.lamports) / supply).toFixed(3)}%`}</td>
<td className="text-right">{lamportsToSolString(account.lamports, 0)}</td>
<td className="text-center">{`${((100 * account.lamports) / supply).toFixed(3)}%`}</td>
<td>
<Link
to={(location) => ({

11
explorer/src/utils/index.ts → explorer/src/utils/index.tsx
View File

@ -1,8 +1,10 @@
import React from "react";
import { LAMPORTS_PER_SOL } from "@solana/web3.js";
import {
HumanizeDuration,
HumanizeDurationLanguage,
} from "humanize-duration-ts";
import { ReactNode } from "react";
export const NUM_TICKS_PER_SECOND = 160;
export const DEFAULT_TICKS_PER_SLOT = 64;
@ -17,10 +19,15 @@ export function assertUnreachable(x: never): never {
export function lamportsToSolString(
lamports: number,
maximumFractionDigits: number = 9
): string {
): ReactNode {
const sol = Math.abs(lamports) / LAMPORTS_PER_SOL;
return (
"◎" + new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(sol)
<>
◎
<span className="text-monospace">
{new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(sol)}
</span>
</>
);
}