Update explorer address labels (#11910)

explorer/src/components/SearchBar.tsx

@@ -60,7 +60,7 @@ const SEARCHABLE_PROGRAMS: ProgramName[] = [
   "Stake Program",
   "System Program",
   "Vote Program",
-  "SPL Token",
+  "SPL Token Program",
 ];
 
 function buildProgramOptions(search: string) {

explorer/src/components/account/TokenAccountSection.tsx

@@ -89,7 +89,7 @@ function MintAccountCard({
             )}
           </td>
         </tr>
-        {tokenInfo && (
+        {tokenInfo?.website && (
           <tr>
             <td>Website</td>
             <td className="text-lg-right">

explorer/src/components/account/UnknownAccountCard.tsx

@@ -3,11 +3,15 @@ import { Account } from "providers/accounts";
 import { lamportsToSolString } from "utils";
 import { TableCardBody } from "components/common/TableCardBody";
 import { Address } from "components/common/Address";
+import { addressLabel } from "utils/tx";
+import { useCluster } from "providers/cluster";
 
 export function UnknownAccountCard({ account }: { account: Account }) {
   const { details, lamports } = account;
+  const { cluster } = useCluster();
   if (lamports === undefined) return null;
 
+  const label = addressLabel(account.pubkey.toBase58(), cluster);
   return (
     <div className="card">
       <div className="card-header align-items-center">
@@ -21,6 +25,12 @@ export function UnknownAccountCard({ account }: { account: Account }) {
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
+        {label && (
+          <tr>
+            <td>Address Label</td>
+            <td className="text-lg-right">{label}</td>
+          </tr>
+        )}
         <tr>
           <td>Balance (SOL)</td>
           <td className="text-lg-right text-uppercase">

explorer/src/pages/AccountDetailsPage.tsx

@@ -50,15 +50,17 @@ export function AccountHeader({ address }: { address: string }) {
   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"
-            />
+        {tokenDetails.logo && (
+          <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>
+        )}
 
         <div className="col mb-3 ml-n3 ml-md-n2">
           <h6 className="header-pretitle">Token</h6>

explorer/src/tokenRegistry.ts

@@ -3,22 +3,17 @@ import { Cluster } from "providers/cluster";
 export type TokenDetails = {
   name: string;
   symbol: string;
-  logo: string;
-  icon: string;
-  website: 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];
+  if (cluster === Cluster.MainnetBeta) return MAINNET_TOKENS[address];
 }
 
 function all(cluster: Cluster) {
-  if (ENABLE_DETAILS && cluster === Cluster.MainnetBeta) return MAINNET_TOKENS;
+  if (cluster === Cluster.MainnetBeta) return MAINNET_TOKENS;
   return {};
 }
 
@@ -28,11 +23,44 @@ export const TokenRegistry = {
 };
 
 const MAINNET_TOKENS: { [key: string]: TokenDetails } = {
-  MSRMmR98uWsTBgusjwyNkE8nDtV79sJznTedhJLzS4B: {
+  SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt: {
+    name: "Serum",
+    symbol: "SRM",
+  },
+  MSRMcoVyrFxnSgo5uXwone5SKcGhT1KEJMFEkMEWf9L: {
     name: "MegaSerum",
     symbol: "MSRM",
-    logo: "/tokens/serum-64.png",
-    icon: "/tokens/serum-32.png",
-    website: "https://projectserum.com",
+  },
+  "9n4nbM75f5Ui33ZbPYXn59EwSgE8CGsHtAeTH5YFeJ9E": {
+    symbol: "BTC",
+    name: "Wrapped Bitcoin",
+  },
+  "2FPyTwcZLUg1MDrwsyoP4D6s1tM7hAkHYRjkNb5w6Pxk": {
+    symbol: "ETH",
+    name: "Wrapped Ethereum",
+  },
+  AGFEad2et2ZJif9jaGpdMixQqvW5i81aBdvKe7PHNfz3: {
+    symbol: "FTT",
+    name: "Wrapped FTT",
+  },
+  "3JSf5tPeuscJGtaCp5giEiDhv51gQ4v3zWg8DGgyLfAB": {
+    symbol: "YFI",
+    name: "Wrapped YFI",
+  },
+  CWE8jPTUYhdCTZYWPTe1o5DFqfdjzWKc9WKz6rSjQUdG: {
+    symbol: "LINK",
+    name: "Wrapped Chainlink",
+  },
+  Ga2AXHpfAF6mv2ekZwcsJFqu7wB4NV331qNH7fW9Nst8: {
+    symbol: "XRP",
+    name: "Wrapped XRP",
+  },
+  BQcdHdAQW1hczDbBi9hiegXAR7A98Q9jx3X3iBBBDiq4: {
+    symbol: "USDT",
+    name: "Wrapped USDT",
+  },
+  BXXkv6z8ykpG1yuvUDPgh732wzVHB69RnB9YgSYh3itW: {
+    symbol: "USDC",
+    name: "Wrapped USDC",
   },
 };

explorer/src/utils/tx.ts

@@ -24,7 +24,7 @@ export type ProgramName =
   | "System Program"
   | "Vest Program"
   | "Vote Program"
-  | "SPL Token";
+  | "SPL Token Program";
 
 export const PROGRAM_IDS: { [key: string]: ProgramName } = {
   Budget1111111111111111111111111111111111111: "Budget Program",
@@ -35,13 +35,13 @@ export const PROGRAM_IDS: { [key: string]: ProgramName } = {
   [SystemProgram.programId.toBase58()]: "System Program",
   Vest111111111111111111111111111111111111111: "Vest Program",
   [VOTE_PROGRAM_ID.toBase58()]: "Vote Program",
-  TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA: "SPL Token",
+  TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA: "SPL Token Program",
 };
 
 const LOADER_IDS = {
   MoveLdr111111111111111111111111111111111111: "Move Loader",
   NativeLoader1111111111111111111111111111111: "Native Loader",
-  [BpfLoader.programId().toBase58()]: "BPF Loader",
+  [BpfLoader.programId(1).toBase58()]: "BPF Loader",
   [BpfLoader.programId(2).toBase58()]: "BPF Loader 2",
 };
 
@@ -65,18 +65,24 @@ export const SYSVAR_IDS = {
   [SYSVAR_STAKE_HISTORY_PUBKEY.toBase58()]: "SYSVAR_STAKE_HISTORY",
 };
 
-export function displayAddress(address: string, cluster: Cluster): string {
+export function addressLabel(
+  address: string,
+  cluster: Cluster
+): string | undefined {
   return (
     PROGRAM_IDS[address] ||
     LOADER_IDS[address] ||
     SYSVAR_IDS[address] ||
     SYSVAR_ID[address] ||
     WRAPPED_SOL[address] ||
-    TokenRegistry.get(address, cluster)?.name ||
-    address
+    TokenRegistry.get(address, cluster)?.name
   );
 }
 
+export function displayAddress(address: string, cluster: Cluster): string {
+  return addressLabel(address, cluster) || address;
+}
+
 export function intoTransactionInstruction(
   tx: ParsedTransaction,
   index: number