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

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

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

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

@ -90,8 +90,8 @@ export default function TopAccountsCard() {
<tr> <tr>
<th className="text-muted">Rank</th> <th className="text-muted">Rank</th>
<th className="text-muted">Address</th> <th className="text-muted">Address</th>
<th className="text-muted">Balance (SOL)</th> <th className="text-muted text-right">Balance (SOL)</th>
<th className="text-muted">% of {header} Supply</th> <th className="text-muted text-center">% of {header} Supply</th>
<th className="text-muted">Details</th> <th className="text-muted">Details</th>
</tr> </tr>
</thead> </thead>
@ -123,8 +123,8 @@ const renderAccountRow = (
<code>{base58AccountPubkey}</code> <code>{base58AccountPubkey}</code>
</Copyable> </Copyable>
</td> </td>
<td>{lamportsToSolString(account.lamports, 0)}</td> <td className="text-right">{lamportsToSolString(account.lamports, 0)}</td>
<td>{`${((100 * account.lamports) / supply).toFixed(3)}%`}</td> <td className="text-center">{`${((100 * account.lamports) / supply).toFixed(3)}%`}</td>
<td> <td>
<Link <Link
to={(location) => ({ 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 { LAMPORTS_PER_SOL } from "@solana/web3.js";
import { import {
HumanizeDuration, HumanizeDuration,
HumanizeDurationLanguage, HumanizeDurationLanguage,
} from "humanize-duration-ts"; } from "humanize-duration-ts";
import { ReactNode } from "react";
export const NUM_TICKS_PER_SECOND = 160; export const NUM_TICKS_PER_SECOND = 160;
export const DEFAULT_TICKS_PER_SLOT = 64; export const DEFAULT_TICKS_PER_SLOT = 64;
@ -17,10 +19,15 @@ export function assertUnreachable(x: never): never {
export function lamportsToSolString( export function lamportsToSolString(
lamports: number, lamports: number,
maximumFractionDigits: number = 9 maximumFractionDigits: number = 9
): string { ): ReactNode {
const sol = Math.abs(lamports) / LAMPORTS_PER_SOL; const sol = Math.abs(lamports) / LAMPORTS_PER_SOL;
return ( return (
"◎" + new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(sol) <>
◎
<span className="text-monospace">
{new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(sol)}
</span>
</>
); );
} }