From 6162c2d0d5fcb65fc8d3660c7b773a76158840eb Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Thu, 13 Aug 2020 22:57:53 +0800
Subject: [PATCH] Add token registry to explorer (#11612)

---
 explorer/public/tokens/serum-32.png           | Bin 0 -> 725 bytes
 explorer/public/tokens/serum-64.png           | Bin 0 -> 3326 bytes
 explorer/src/components/SearchBar.tsx         |  81 +++++--
 .../components/account/OwnedTokensCard.tsx    | 228 +++++++++++++++---
 .../account/TokenAccountSection.tsx           |  60 +++--
 .../components/account/TokenHistoryCard.tsx   |   2 +-
 .../account/TokenLargestAccountsCard.tsx      |   7 +-
 explorer/src/components/common/Address.tsx    |  19 +-
 explorer/src/components/common/Signature.tsx  |   1 -
 explorer/src/pages/AccountDetailsPage.tsx     |  46 +++-
 explorer/src/scss/_solana-variables-dark.scss |   1 +
 explorer/src/scss/_solana.scss                |  17 ++
 explorer/src/tokenRegistry.ts                 |  38 +++
 explorer/src/utils/tx.ts                      |  36 ++-
 explorer/src/validators/accounts/token.ts     |  13 +-
 15 files changed, 438 insertions(+), 111 deletions(-)
 create mode 100644 explorer/public/tokens/serum-32.png
 create mode 100644 explorer/public/tokens/serum-64.png
 create mode 100644 explorer/src/tokenRegistry.ts

diff --git a/explorer/public/tokens/serum-32.png b/explorer/public/tokens/serum-32.png
new file mode 100644
index 0000000000000000000000000000000000000000..83881ecf015c83c65b65639b20a8ac517737b62d
GIT binary patch
literal 725
zcmV;`0xJE9P)<h;3K|Lk000e1NJLTq001BW001Be0{{R3M5Kzw0001oP)t-sM{rDV
z;O%$h?`_`eVc6zg*5-KR?|9?yLCD)Z#o02x*JIh|Z{X}))#Ym4>So&MTh-)U*5+p0
z=~~s~RMO&B)8j<R+(gRVKE~QZ$=pK7+#a^hGr`t1!`CFa&?UOjG{M&yw9Fc`%oVZA
z7PHG8w#_5C&kL=`3a!TtuE-0m#|f*)2&=}SJn&fn001p?QchC<Jl;z)AjGp65euc%
zDUff0UFF5z)otCGxK1X1$Uv>&l`vbwP2;uSqtA1KSg*`Z0005dNkl<ZcmZrr1p>n$
z5W}@-1)2Q+nM3AVTHyQ=@B&158W<7q2b6Ik6#z;K#>8)4>BT?>+aN{^vg)V6A>3w2
z2qk9}Bln$$$n^|Fi1a#-;5Pv+Eh2{TQROB7qG1;kVh}Cc`$NQLvF~{tLyJhgG<~EQ
zqaMHVV%1Ww!p#_tZU*GDz;DJy2&0>VhaJrJRMJed`_^?Aui7-f)Am0G?85etd3Nlc
zj{h!kJIEH=51u$S5;k+(M;wXfRp_E#1+rwZdYX>0u{r4=se(7uWR4_q85>fq>2$ux
z_X2S_OuB|7nte^CWlIJh$hS7fD?xG)hJw2j5&si$lR*LQf4-63IXs(8l?bp??aOM5
zugeeYmg@`KmWzHh#MK|t14G^}XkVgPs=Yi{{53XZxA~{*&3Au!q4nJQ@#P_C0UHo5
z1U1;8|M&5B={{3B6|sr3?=APXElpLvnns-W=NYLPb)<TbuDme#N?g1zOw|L6^SvC6
z%6mcw1xbSi9FljHPc@yO$(4q)#yMl%q?!#@_wSS}HNz0XImSei0l7;4cafC`Qxb|`
zDh39j@|S_BTn4LwtgZ?FZj+~wAT#PPFYt?)HW`s;GZ&kG;LR{eotni200000NkvXX
Hu0mjf9$;T1

literal 0
HcmV?d00001

diff --git a/explorer/public/tokens/serum-64.png b/explorer/public/tokens/serum-64.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3d44a0a883229e5a4578d18665174ac18911dcc
GIT binary patch
literal 3326
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
IM6N<$f__WePXGV_

literal 0
HcmV?d00001

diff --git a/explorer/src/components/SearchBar.tsx b/explorer/src/components/SearchBar.tsx
index 8d6ed7dd4..3b27b4755 100644
--- a/explorer/src/components/SearchBar.tsx
+++ b/explorer/src/components/SearchBar.tsx
@@ -3,13 +3,16 @@ import bs58 from "bs58";
 import { useHistory, useLocation } from "react-router-dom";
 import Select, { InputActionMeta, ActionMeta, ValueType } from "react-select";
 import StateManager from "react-select";
-import { PROGRAM_IDS, SYSVAR_IDS } from "utils/tx";
+import { PROGRAM_IDS, SYSVAR_IDS, ProgramName } from "utils/tx";
+import { TokenRegistry } from "tokenRegistry";
+import { Cluster, useCluster } from "providers/cluster";
 
 export function SearchBar() {
   const [search, setSearch] = React.useState("");
   const selectRef = React.useRef<StateManager<any> | null>(null);
   const history = useHistory();
   const location = useLocation();
+  const { cluster } = useCluster();
 
   const onChange = ({ pathname }: ValueType<any>, meta: ActionMeta<any>) => {
     if (meta.action === "select-option") {
@@ -29,9 +32,9 @@ export function SearchBar() {
         <div className="col">
           <Select
             ref={(ref) => (selectRef.current = ref)}
-            options={buildOptions(search)}
+            options={buildOptions(search, cluster)}
             noOptionsMessage={() => "No Results"}
-            placeholder="Search by address or signature"
+            placeholder="Search for accounts, transactions, programs, and tokens"
             value={resetValue}
             inputValue={search}
             blurInputOnSelect
@@ -47,22 +50,31 @@ export function SearchBar() {
   );
 }
 
-const SEARCHABLE_PROGRAMS = ["Config", "Stake", "System", "Vote", "Token"];
+const SEARCHABLE_PROGRAMS: ProgramName[] = [
+  "Config Program",
+  "Stake Program",
+  "System Program",
+  "Vote Program",
+  "SPL Token",
+];
 
 function buildProgramOptions(search: string) {
-  const matchedPrograms = Object.entries(PROGRAM_IDS).filter(([, name]) => {
-    return (
-      SEARCHABLE_PROGRAMS.includes(name) &&
-      name.toLowerCase().includes(search.toLowerCase())
-    );
-  });
+  const matchedPrograms = Object.entries(PROGRAM_IDS).filter(
+    ([address, name]) => {
+      return (
+        SEARCHABLE_PROGRAMS.includes(name) &&
+        (name.toLowerCase().includes(search.toLowerCase()) ||
+          address.includes(search))
+      );
+    }
+  );
 
   if (matchedPrograms.length > 0) {
     return {
       label: "Programs",
       options: matchedPrograms.map(([id, name]) => ({
         label: name,
-        value: name,
+        value: [name, id],
         pathname: "/address/" + id,
       })),
     };
@@ -70,23 +82,52 @@ function buildProgramOptions(search: string) {
 }
 
 function buildSysvarOptions(search: string) {
-  const matchedSysvars = Object.entries(SYSVAR_IDS).filter(([, name]) => {
-    return name.toLowerCase().includes(search.toLowerCase());
-  });
+  const matchedSysvars = Object.entries(SYSVAR_IDS).filter(
+    ([address, name]) => {
+      return (
+        name.toLowerCase().includes(search.toLowerCase()) ||
+        address.includes(search)
+      );
+    }
+  );
 
   if (matchedSysvars.length > 0) {
     return {
       label: "Sysvars",
       options: matchedSysvars.map(([id, name]) => ({
         label: name,
-        value: name,
+        value: [name, id],
         pathname: "/address/" + id,
       })),
     };
   }
 }
 
-function buildOptions(search: string) {
+function buildTokenOptions(search: string, cluster: Cluster) {
+  const matchedTokens = Object.entries(TokenRegistry.all(cluster)).filter(
+    ([address, details]) => {
+      const searchLower = search.toLowerCase();
+      return (
+        details.name.toLowerCase().includes(searchLower) ||
+        details.symbol.toLowerCase().includes(searchLower) ||
+        address.includes(search)
+      );
+    }
+  );
+
+  if (matchedTokens.length > 0) {
+    return {
+      label: "Tokens",
+      options: matchedTokens.map(([id, details]) => ({
+        label: details.name,
+        value: [details.name, details.symbol, id],
+        pathname: "/address/" + id,
+      })),
+    };
+  }
+}
+
+function buildOptions(search: string, cluster: Cluster) {
   if (search.length === 0) return [];
 
   const options = [];
@@ -101,6 +142,14 @@ function buildOptions(search: string) {
     options.push(sysvarOptions);
   }
 
+  const tokenOptions = buildTokenOptions(search, cluster);
+  if (tokenOptions) {
+    options.push(tokenOptions);
+  }
+
+  // Prefer nice suggestions over raw suggestions
+  if (options.length > 0) return options;
+
   try {
     const decoded = bs58.decode(search);
     if (decoded.length === 32) {
diff --git a/explorer/src/components/account/OwnedTokensCard.tsx b/explorer/src/components/account/OwnedTokensCard.tsx
index 428f8a11f..2e76635e9 100644
--- a/explorer/src/components/account/OwnedTokensCard.tsx
+++ b/explorer/src/components/account/OwnedTokensCard.tsx
@@ -4,16 +4,36 @@ import { FetchStatus } from "providers/cache";
 import {
   useFetchAccountOwnedTokens,
   useAccountOwnedTokens,
+  TokenInfoWithPubkey,
 } from "providers/accounts/tokens";
 import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
 import { Address } from "components/common/Address";
+import { TokenRegistry } from "tokenRegistry";
+import { useQuery } from "utils/url";
+import { Link } from "react-router-dom";
+import { Location } from "history";
+import { useCluster } from "providers/cluster";
+
+type Display = "summary" | "detail" | null;
+
+const useQueryDisplay = (): Display => {
+  const query = useQuery();
+  const filter = query.get("display");
+  if (filter === "summary" || filter === "detail") {
+    return filter;
+  } else {
+    return null;
+  }
+};
 
 export function OwnedTokensCard({ pubkey }: { pubkey: PublicKey }) {
   const address = pubkey.toBase58();
   const ownedTokens = useAccountOwnedTokens(address);
   const fetchAccountTokens = useFetchAccountOwnedTokens();
   const refresh = () => fetchAccountTokens(pubkey);
+  const [showDropdown, setDropdown] = React.useState(false);
+  const display = useQueryDisplay();
 
   // Fetch owned tokens
   React.useEffect(() => {
@@ -28,9 +48,9 @@ export function OwnedTokensCard({ pubkey }: { pubkey: PublicKey }) {
   const tokens = ownedTokens.data?.tokens;
   const fetching = status === FetchStatus.Fetching;
   if (fetching && (tokens === undefined || tokens.length === 0)) {
-    return <LoadingCard message="Loading owned tokens" />;
+    return <LoadingCard message="Loading token holdings" />;
   } else if (tokens === undefined) {
-    return <ErrorCard retry={refresh} text="Failed to fetch owned tokens" />;
+    return <ErrorCard retry={refresh} text="Failed to fetch token holdings" />;
   }
 
   if (tokens.length === 0) {
@@ -38,17 +58,100 @@ export function OwnedTokensCard({ pubkey }: { pubkey: PublicKey }) {
       <ErrorCard
         retry={refresh}
         retryText="Try Again"
-        text={"No owned tokens found"}
+        text={"No token holdings found"}
       />
     );
   }
 
+  return (
+    <>
+      {showDropdown && (
+        <div className="dropdown-exit" onClick={() => setDropdown(false)} />
+      )}
+
+      <div className="card">
+        <div className="card-header align-items-center">
+          <h3 className="card-header-title">Token Holdings</h3>
+          <DisplayDropdown
+            display={display}
+            toggle={() => setDropdown((show) => !show)}
+            show={showDropdown}
+          />
+        </div>
+        {display === "detail" ? (
+          <HoldingsDetailTable tokens={tokens} />
+        ) : (
+          <HoldingsSummaryTable tokens={tokens} />
+        )}
+      </div>
+    </>
+  );
+}
+
+function HoldingsDetailTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
+  const detailsList: React.ReactNode[] = [];
+  const { cluster } = useCluster();
+  const showLogos = tokens.some(
+    (t) => TokenRegistry.get(t.info.mint.toBase58(), cluster) !== undefined
+  );
+  tokens.forEach((tokenAccount) => {
+    const address = tokenAccount.pubkey.toBase58();
+    const mintAddress = tokenAccount.info.mint.toBase58();
+    const tokenDetails = TokenRegistry.get(mintAddress, cluster);
+    detailsList.push(
+      <tr key={address}>
+        {showLogos && (
+          <td className="w-1 p-0 text-center">
+            {tokenDetails && (
+              <img
+                src={tokenDetails.icon}
+                alt="token icon"
+                className="token-icon rounded-circle border border-4 border-gray-dark"
+              />
+            )}
+          </td>
+        )}
+        <td>
+          <Address pubkey={tokenAccount.pubkey} link truncate />
+        </td>
+        <td>
+          <Address pubkey={tokenAccount.info.mint} link truncate />
+        </td>
+        <td>
+          {tokenAccount.info.tokenAmount.uiAmount}{" "}
+          {tokenDetails && tokenDetails.symbol}
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <div className="table-responsive mb-0">
+      <table className="table table-sm table-nowrap card-table">
+        <thead>
+          <tr>
+            {showLogos && (
+              <th className="text-muted w-1 p-0 text-center">Logo</th>
+            )}
+            <th className="text-muted">Account Address</th>
+            <th className="text-muted">Mint Address</th>
+            <th className="text-muted">Balance</th>
+          </tr>
+        </thead>
+        <tbody className="list">{detailsList}</tbody>
+      </table>
+    </div>
+  );
+}
+
+function HoldingsSummaryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
+  const { cluster } = useCluster();
   const mappedTokens = new Map<string, number>();
   for (const { info: token } of tokens) {
     const mintAddress = token.mint.toBase58();
     const totalByMint = mappedTokens.get(mintAddress);
 
-    let amount = token?.amount || (token?.tokenAmount?.uiAmount as number);
+    let amount = token.tokenAmount.uiAmount;
     if (totalByMint !== undefined) {
       amount += totalByMint;
     }
@@ -57,51 +160,100 @@ export function OwnedTokensCard({ pubkey }: { pubkey: PublicKey }) {
   }
 
   const detailsList: React.ReactNode[] = [];
+  const showLogos = tokens.some((t) =>
+    TokenRegistry.get(t.info.mint.toBase58(), cluster)
+  );
   mappedTokens.forEach((totalByMint, mintAddress) => {
+    const tokenDetails = TokenRegistry.get(mintAddress, cluster);
     detailsList.push(
       <tr key={mintAddress}>
+        {showLogos && (
+          <td className="w-1 p-0 text-center">
+            {tokenDetails && (
+              <img
+                src={tokenDetails.icon}
+                alt="token icon"
+                className="token-icon rounded-circle border border-4 border-gray-dark"
+              />
+            )}
+          </td>
+        )}
         <td>
           <Address pubkey={new PublicKey(mintAddress)} link />
         </td>
-        <td>{totalByMint}</td>
+        <td>
+          {totalByMint} {tokenDetails && tokenDetails.symbol}
+        </td>
       </tr>
     );
   });
 
   return (
-    <div className="card">
-      <div className="card-header align-items-center">
-        <h3 className="card-header-title">Owned Tokens</h3>
-        <button
-          className="btn btn-white btn-sm"
-          disabled={fetching}
-          onClick={refresh}
-        >
-          {fetching ? (
-            <>
-              <span className="spinner-grow spinner-grow-sm mr-2"></span>
-              Loading
-            </>
-          ) : (
-            <>
-              <span className="fe fe-refresh-cw mr-2"></span>
-              Refresh
-            </>
-          )}
-        </button>
-      </div>
-
-      <div className="table-responsive mb-0">
-        <table className="table table-sm table-nowrap card-table">
-          <thead>
-            <tr>
-              <th className="text-muted">Token Address</th>
-              <th className="text-muted">Balance</th>
-            </tr>
-          </thead>
-          <tbody className="list">{detailsList}</tbody>
-        </table>
-      </div>
+    <div className="table-responsive mb-0">
+      <table className="table table-sm table-nowrap card-table">
+        <thead>
+          <tr>
+            {showLogos && (
+              <th className="text-muted w-1 p-0 text-center">Logo</th>
+            )}
+            <th className="text-muted">Mint Address</th>
+            <th className="text-muted">Total Balance</th>
+          </tr>
+        </thead>
+        <tbody className="list">{detailsList}</tbody>
+      </table>
     </div>
   );
 }
+
+type DropdownProps = {
+  display: Display;
+  toggle: () => void;
+  show: boolean;
+};
+
+const DisplayDropdown = ({ display, toggle, show }: DropdownProps) => {
+  const buildLocation = (location: Location, display: Display) => {
+    const params = new URLSearchParams(location.search);
+    if (display === null) {
+      params.delete("display");
+    } else {
+      params.set("display", display);
+    }
+    return {
+      ...location,
+      search: params.toString(),
+    };
+  };
+
+  const DISPLAY_OPTIONS: Display[] = [null, "detail"];
+  return (
+    <div className="dropdown">
+      <button
+        className="btn btn-white btn-sm dropdown-toggle"
+        type="button"
+        onClick={toggle}
+      >
+        {display === "detail" ? "Detailed" : "Summary"}
+      </button>
+      <div
+        className={`dropdown-menu-right dropdown-menu${show ? " show" : ""}`}
+      >
+        {DISPLAY_OPTIONS.map((displayOption) => {
+          return (
+            <Link
+              key={displayOption || "null"}
+              to={(location) => buildLocation(location, displayOption)}
+              className={`dropdown-item${
+                displayOption === display ? " active" : ""
+              }`}
+              onClick={toggle}
+            >
+              {displayOption === "detail" ? "Detailed" : "Summary"}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/explorer/src/components/account/TokenAccountSection.tsx b/explorer/src/components/account/TokenAccountSection.tsx
index 2897c1a8c..99a2f9a4b 100644
--- a/explorer/src/components/account/TokenAccountSection.tsx
+++ b/explorer/src/components/account/TokenAccountSection.tsx
@@ -12,6 +12,8 @@ import { Address } from "components/common/Address";
 import { UnknownAccountCard } from "./UnknownAccountCard";
 import { useFetchTokenSupply, useTokenSupply } from "providers/mints/supply";
 import { FetchStatus } from "providers/cache";
+import { TokenRegistry } from "tokenRegistry";
+import { useCluster } from "providers/cluster";
 
 export function TokenAccountSection({
   account,
@@ -46,6 +48,7 @@ function MintAccountCard({
   account: Account;
   info: MintAccountInfo;
 }) {
+  const { cluster } = useCluster();
   const mintAddress = account.pubkey.toBase58();
   const fetchInfo = useFetchAccountInfo();
   const supply = useTokenSupply(mintAddress);
@@ -70,18 +73,20 @@ function MintAccountCard({
       renderSupply = "Fetch failed";
     }
   } else {
-    renderSupply = supplyTotal;
+    const unit = TokenRegistry.get(mintAddress, cluster)?.symbol;
+    renderSupply = unit ? `${supplyTotal} ${unit}` : supplyTotal;
   }
 
   React.useEffect(() => {
     if (!supply) refreshSupply();
   }, [mintAddress]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const tokenInfo = TokenRegistry.get(mintAddress, cluster);
   return (
     <div className="card">
       <div className="card-header">
         <h3 className="card-header-title mb-0 d-flex align-items-center">
-          Token Mint Account
+          {tokenInfo ? "Overview" : "Token Mint"}
         </h3>
         <button className="btn btn-white btn-sm" onClick={refresh}>
           <span className="fe fe-refresh-cw mr-2"></span>
@@ -100,6 +105,21 @@ function MintAccountCard({
           <td>Total Supply</td>
           <td className="text-lg-right">{renderSupply}</td>
         </tr>
+        {tokenInfo && (
+          <tr>
+            <td>Website</td>
+            <td className="text-lg-right">
+              <a
+                rel="noopener noreferrer"
+                target="_blank"
+                href={tokenInfo.website}
+              >
+                {tokenInfo.website}
+                <span className="fe fe-external-link ml-2"></span>
+              </a>
+            </td>
+          </tr>
+        )}
         <tr>
           <td>Decimals</td>
           <td className="text-lg-right">{info.decimals}</td>
@@ -131,13 +151,11 @@ function TokenAccountCard({
   info: TokenAccountInfo;
 }) {
   const refresh = useFetchAccountInfo();
+  const { cluster } = useCluster();
 
-  let balance;
-  if ("amount" in info) {
-    balance = info.amount;
-  } else {
-    balance = info.tokenAmount?.uiAmount;
-  }
+  const balance = info.tokenAmount?.uiAmount;
+  const unit =
+    TokenRegistry.get(info.mint.toBase58(), cluster)?.symbol || "tokens";
 
   return (
     <div className="card">
@@ -174,15 +192,15 @@ function TokenAccountCard({
           </td>
         </tr>
         <tr>
-          <td>Balance (tokens)</td>
+          <td>Balance ({unit})</td>
           <td className="text-lg-right">{balance}</td>
         </tr>
-        <tr>
-          <td>Status</td>
-          <td className="text-lg-right">
-            {info.isInitialized ? "Initialized" : "Uninitialized"}
-          </td>
-        </tr>
+        {!info.isInitialized && (
+          <tr>
+            <td>Status</td>
+            <td className="text-lg-right">Uninitialized</td>
+          </tr>
+        )}
       </TableCardBody>
     </div>
   );
@@ -235,12 +253,12 @@ function MultisigAccountCard({
             </td>
           </tr>
         ))}
-        <tr>
-          <td>Status</td>
-          <td className="text-lg-right">
-            {info.isInitialized ? "Initialized" : "Uninitialized"}
-          </td>
-        </tr>
+        {!info.isInitialized && (
+          <tr>
+            <td>Status</td>
+            <td className="text-lg-right">Uninitialized</td>
+          </tr>
+        )}
       </TableCardBody>
     </div>
   );
diff --git a/explorer/src/components/account/TokenHistoryCard.tsx b/explorer/src/components/account/TokenHistoryCard.tsx
index 434e70a9b..5953887a9 100644
--- a/explorer/src/components/account/TokenHistoryCard.tsx
+++ b/explorer/src/components/account/TokenHistoryCard.tsx
@@ -233,7 +233,7 @@ function TokenTransactionRow({
                 </td>
 
                 <td>
-                  <Address pubkey={mint} link />
+                  <Address pubkey={mint} link truncate />
                 </td>
 
                 <td>{typeName}</td>
diff --git a/explorer/src/components/account/TokenLargestAccountsCard.tsx b/explorer/src/components/account/TokenLargestAccountsCard.tsx
index 5aa28c8d8..509fae8da 100644
--- a/explorer/src/components/account/TokenLargestAccountsCard.tsx
+++ b/explorer/src/components/account/TokenLargestAccountsCard.tsx
@@ -9,6 +9,8 @@ import {
   useFetchTokenLargestAccounts,
 } from "providers/mints/largest";
 import { FetchStatus } from "providers/cache";
+import { TokenRegistry } from "tokenRegistry";
+import { useCluster } from "providers/cluster";
 
 export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
   const mintAddress = pubkey.toBase58();
@@ -16,6 +18,9 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
   const largestAccounts = useTokenLargestTokens(mintAddress);
   const fetchLargestAccounts = useFetchTokenLargestAccounts();
   const refreshLargest = () => fetchLargestAccounts(pubkey);
+  const { cluster } = useCluster();
+  const unit = TokenRegistry.get(mintAddress, cluster)?.symbol;
+  const unitLabel = unit ? `(${unit})` : "";
 
   React.useEffect(() => {
     if (!largestAccounts) refreshLargest();
@@ -61,7 +66,7 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
               <tr>
                 <th className="text-muted">Rank</th>
                 <th className="text-muted">Address</th>
-                <th className="text-muted text-right">Balance</th>
+                <th className="text-muted text-right">Balance {unitLabel}</th>
                 <th className="text-muted text-right">% of Total Supply</th>
               </tr>
             </thead>
diff --git a/explorer/src/components/common/Address.tsx b/explorer/src/components/common/Address.tsx
index a801e008b..4728328c1 100644
--- a/explorer/src/components/common/Address.tsx
+++ b/explorer/src/components/common/Address.tsx
@@ -4,6 +4,7 @@ import { PublicKey } from "@solana/web3.js";
 import { clusterPath } from "utils/url";
 import { displayAddress } from "utils/tx";
 import { Pubkey } from "solana-sdk-wasm";
+import { useCluster } from "providers/cluster";
 
 type CopyState = "copy" | "copied";
 type Props = {
@@ -11,11 +12,13 @@ type Props = {
   alignRight?: boolean;
   link?: boolean;
   raw?: boolean;
+  truncate?: boolean;
 };
 
-export function Address({ pubkey, alignRight, link, raw }: Props) {
+export function Address({ pubkey, alignRight, link, raw, truncate }: Props) {
   const [state, setState] = useState<CopyState>("copy");
   const address = pubkey.toBase58();
+  const { cluster } = useCluster();
 
   const copyToClipboard = () => navigator.clipboard.writeText(address);
   const handleClick = () =>
@@ -36,14 +39,16 @@ export function Address({ pubkey, alignRight, link, raw }: Props) {
       <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
       <span className="text-monospace">
         {link ? (
-          <Link className="" to={clusterPath(`/address/${address}`)}>
-            {raw ? address : displayAddress(address)}
-            <span className="fe fe-external-link ml-2"></span>
+          <Link
+            className={truncate ? "text-truncate address-truncate" : ""}
+            to={clusterPath(`/address/${address}`)}
+          >
+            {raw ? address : displayAddress(address, cluster)}
           </Link>
-        ) : raw ? (
-          address
         ) : (
-          displayAddress(address)
+          <span className={truncate ? "text-truncate address-truncate" : ""}>
+            {raw ? address : displayAddress(address, cluster)}
+          </span>
         )}
       </span>
     </>
diff --git a/explorer/src/components/common/Signature.tsx b/explorer/src/components/common/Signature.tsx
index a3961ca3e..8578f2528 100644
--- a/explorer/src/components/common/Signature.tsx
+++ b/explorer/src/components/common/Signature.tsx
@@ -42,7 +42,6 @@ export function Signature({ signature, alignRight, link }: Props) {
         {link ? (
           <Link className="" to={clusterPath(`/tx/${signature}`)}>
             {signature}
-            <span className="fe fe-external-link ml-2"></span>
           </Link>
         ) : (
           signature
diff --git a/explorer/src/pages/AccountDetailsPage.tsx b/explorer/src/pages/AccountDetailsPage.tsx
index 7a271a2f2..f534fb2e3 100644
--- a/explorer/src/pages/AccountDetailsPage.tsx
+++ b/explorer/src/pages/AccountDetailsPage.tsx
@@ -18,6 +18,7 @@ import { OwnedTokensCard } from "components/account/OwnedTokensCard";
 import { TransactionHistoryCard } from "components/account/TransactionHistoryCard";
 import { TokenHistoryCard } from "components/account/TokenHistoryCard";
 import { TokenLargestAccountsCard } from "components/account/TokenLargestAccountsCard";
+import { TokenRegistry } from "tokenRegistry";
 
 type Props = { address: string; tab?: string };
 export function AccountDetailsPage({ address, tab }: Props) {
@@ -31,8 +32,7 @@ export function AccountDetailsPage({ address, tab }: Props) {
     <div className="container mt-n3">
       <div className="header">
         <div className="header-body">
-          <h6 className="header-pretitle">Details</h6>
-          <h4 className="header-title">Account</h4>
+          <AccountHeader address={address} />
         </div>
       </div>
       {!pubkey ? (
@@ -44,6 +44,38 @@ export function AccountDetailsPage({ address, tab }: Props) {
   );
 }
 
+export function AccountHeader({ address }: { address: string }) {
+  const { cluster } = useCluster();
+  const tokenDetails = TokenRegistry.get(address, cluster);
+  if (tokenDetails) {
+    return (
+      <div className="row align-items-end">
+        <div className="col-auto">
+          <div className="avatar avatar-lg header-avatar-top">
+            <img
+              src={tokenDetails.logo}
+              alt="token logo"
+              className="avatar-img rounded-circle border border-4 border-body"
+            />
+          </div>
+        </div>
+
+        <div className="col mb-3 ml-n3 ml-md-n2">
+          <h6 className="header-pretitle">Token</h6>
+          <h2 className="header-title">{tokenDetails.name}</h2>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <h6 className="header-pretitle">Details</h6>
+      <h2 className="header-title">Account</h2>
+    </>
+  );
+}
+
 function DetailsSections({ pubkey, tab }: { pubkey: PublicKey; tab?: string }) {
   const fetchAccount = useFetchAccountInfo();
   const address = pubkey.toBase58();
@@ -79,9 +111,9 @@ function DetailsSections({ pubkey, tab }: { pubkey: PublicKey; tab?: string }) {
   if (data && data?.name === "spl-token") {
     if (data.parsed.type === "mint") {
       tabs.push({
-        slug: "holders",
-        title: "Holders",
-        path: "/holders",
+        slug: "largest",
+        title: "Distribution",
+        path: "/largest",
       });
     }
   } else {
@@ -139,7 +171,7 @@ type Tab = {
   path: string;
 };
 
-type MoreTabs = "history" | "tokens" | "holders";
+type MoreTabs = "history" | "tokens" | "largest";
 function MoreSection({
   account,
   tab,
@@ -180,7 +212,7 @@ function MoreSection({
         </>
       )}
       {tab === "history" && <TransactionHistoryCard pubkey={pubkey} />}
-      {tab === "holders" && <TokenLargestAccountsCard pubkey={pubkey} />}
+      {tab === "largest" && <TokenLargestAccountsCard pubkey={pubkey} />}
     </>
   );
 }
diff --git a/explorer/src/scss/_solana-variables-dark.scss b/explorer/src/scss/_solana-variables-dark.scss
index abb88e7be..d4f476d82 100644
--- a/explorer/src/scss/_solana-variables-dark.scss
+++ b/explorer/src/scss/_solana-variables-dark.scss
@@ -28,4 +28,5 @@ $input-group-addon-color: $white !default;
 $theme-colors: (
   "black": $black,
   "gray": $gray-600,
+  "gray-dark": $gray-800-dark,
 );
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 4ae325fb2..1ed292762 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -173,3 +173,20 @@ h4.slot-pill {
 .search-bar__menu {
   border-radius: $border-radius !important;
 }
+
+.token-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.address-truncate {
+  @include media-breakpoint-down(md) {
+    max-width: 180px;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+
+  @include media-breakpoint-down(sm) {
+    max-width: 120px;
+  }
+}
diff --git a/explorer/src/tokenRegistry.ts b/explorer/src/tokenRegistry.ts
new file mode 100644
index 000000000..ee289d50a
--- /dev/null
+++ b/explorer/src/tokenRegistry.ts
@@ -0,0 +1,38 @@
+import { Cluster } from "providers/cluster";
+
+export type TokenDetails = {
+  name: string;
+  symbol: string;
+  logo: string;
+  icon: string;
+  website: string;
+};
+
+const ENABLE_DETAILS = !!new URLSearchParams(window.location.search).get(
+  "test"
+);
+
+function get(address: string, cluster: Cluster): TokenDetails | undefined {
+  if (ENABLE_DETAILS && cluster === Cluster.MainnetBeta)
+    return MAINNET_TOKENS[address];
+}
+
+function all(cluster: Cluster) {
+  if (ENABLE_DETAILS && cluster === Cluster.MainnetBeta) return MAINNET_TOKENS;
+  return {};
+}
+
+export const TokenRegistry = {
+  get,
+  all,
+};
+
+const MAINNET_TOKENS: { [key: string]: TokenDetails } = {
+  MSRMmR98uWsTBgusjwyNkE8nDtV79sJznTedhJLzS4B: {
+    name: "MegaSerum",
+    symbol: "MSRM",
+    logo: "/tokens/serum-64.png",
+    icon: "/tokens/serum-32.png",
+    website: "https://projectserum.com",
+  },
+};
diff --git a/explorer/src/utils/tx.ts b/explorer/src/utils/tx.ts
index 2eaf28523..a1d8494e5 100644
--- a/explorer/src/utils/tx.ts
+++ b/explorer/src/utils/tx.ts
@@ -12,17 +12,30 @@ import {
   TransactionInstruction,
   Transaction,
 } from "@solana/web3.js";
+import { TokenRegistry } from "tokenRegistry";
+import { Cluster } from "providers/cluster";
 
-export const PROGRAM_IDS = {
-  Budget1111111111111111111111111111111111111: "Budget",
-  Config1111111111111111111111111111111111111: "Config",
-  Exchange11111111111111111111111111111111111: "Exchange",
-  [StakeProgram.programId.toBase58()]: "Stake",
-  Storage111111111111111111111111111111111111: "Storage",
-  [SystemProgram.programId.toBase58()]: "System",
-  Vest111111111111111111111111111111111111111: "Vest",
-  [VOTE_PROGRAM_ID.toBase58()]: "Vote",
-  TokenSVp5gheXUvJ6jGWGeCsgPKgnE3YgdGKRVCMY9o: "Token",
+export type ProgramName =
+  | "Budget Program"
+  | "Config Program"
+  | "Exchange Program"
+  | "Stake Program"
+  | "Storage Program"
+  | "System Program"
+  | "Vest Program"
+  | "Vote Program"
+  | "SPL Token";
+
+export const PROGRAM_IDS: { [key: string]: ProgramName } = {
+  Budget1111111111111111111111111111111111111: "Budget Program",
+  Config1111111111111111111111111111111111111: "Config Program",
+  Exchange11111111111111111111111111111111111: "Exchange Program",
+  [StakeProgram.programId.toBase58()]: "Stake Program",
+  Storage111111111111111111111111111111111111: "Storage Program",
+  [SystemProgram.programId.toBase58()]: "System Program",
+  Vest111111111111111111111111111111111111111: "Vest Program",
+  [VOTE_PROGRAM_ID.toBase58()]: "Vote Program",
+  TokenSVp5gheXUvJ6jGWGeCsgPKgnE3YgdGKRVCMY9o: "SPL Token",
 };
 
 const LOADER_IDS = {
@@ -48,12 +61,13 @@ export const SYSVAR_IDS = {
   [SYSVAR_STAKE_HISTORY_PUBKEY.toBase58()]: "SYSVAR_STAKE_HISTORY",
 };
 
-export function displayAddress(address: string): string {
+export function displayAddress(address: string, cluster: Cluster): string {
   return (
     PROGRAM_IDS[address] ||
     LOADER_IDS[address] ||
     SYSVAR_IDS[address] ||
     SYSVAR_ID[address] ||
+    TokenRegistry.get(address, cluster)?.name ||
     address
   );
 }
diff --git a/explorer/src/validators/accounts/token.ts b/explorer/src/validators/accounts/token.ts
index 61094094c..8b4c40e2f 100644
--- a/explorer/src/validators/accounts/token.ts
+++ b/explorer/src/validators/accounts/token.ts
@@ -22,14 +22,11 @@ export const TokenAccountInfo = pick({
   isNative: boolean(),
   mint: Pubkey,
   owner: Pubkey,
-  amount: optional(number()), // TODO remove when ui amount is deployed
-  tokenAmount: optional(
-    object({
-      decimals: number(),
-      uiAmount: number(),
-      amount: string(),
-    })
-  ),
+  tokenAmount: pick({
+    decimals: number(),
+    uiAmount: number(),
+    amount: string(),
+  }),
   delegate: nullable(optional(Pubkey)),
   delegatedAmount: optional(number()),
 });