From eab48c99d71cd3048377cbbd28e098d975aeef0e Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Sat, 1 Aug 2020 23:31:39 +0800
Subject: [PATCH] Display SOL uniformly in explorer

---
 explorer/src/components/AccountsCard.tsx    |  4 ++--
 explorer/src/components/SupplyCard.tsx      | 12 +++++++++---
 explorer/src/components/TopAccountsCard.tsx |  8 ++++----
 explorer/src/utils/{index.ts => index.tsx}  | 11 +++++++++--
 4 files changed, 24 insertions(+), 11 deletions(-)
 rename explorer/src/utils/{index.ts => index.tsx} (82%)

diff --git a/explorer/src/components/AccountsCard.tsx b/explorer/src/components/AccountsCard.tsx
index 7439a026c3..e341cf21a0 100644
--- a/explorer/src/components/AccountsCard.tsx
+++ b/explorer/src/components/AccountsCard.tsx
@@ -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);
   }
diff --git a/explorer/src/components/SupplyCard.tsx b/explorer/src/components/SupplyCard.tsx
index 08e2e42561..3671867a2b 100644
--- a/explorer/src/components/SupplyCard.tsx
+++ b/explorer/src/components/SupplyCard.tsx
@@ -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>
diff --git a/explorer/src/components/TopAccountsCard.tsx b/explorer/src/components/TopAccountsCard.tsx
index f114648491..311f8dbaf7 100644
--- a/explorer/src/components/TopAccountsCard.tsx
+++ b/explorer/src/components/TopAccountsCard.tsx
@@ -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) => ({
diff --git a/explorer/src/utils/index.ts b/explorer/src/utils/index.tsx
similarity index 82%
rename from explorer/src/utils/index.ts
rename to explorer/src/utils/index.tsx
index 0d94df6bf5..3e88917821 100644
--- a/explorer/src/utils/index.ts
+++ b/explorer/src/utils/index.tsx
@@ -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>
+    </>
   );
 }