Linkify all explorer addresses (#11339)

2020-08-03 01:44:47 +08:00 · 2020-08-03 01:44:47 +08:00 · f401ef7996
commit f401ef7996
parent d1b2e6cdf2
26 changed files with 212 additions and 375 deletions
--- a/explorer/src/components/AccountDetails.tsx
+++ b/explorer/src/components/AccountDetails.tsx
@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { PublicKey, StakeProgram, TokenAccountInfo } from "@solana/web3.js";
 import {
  FetchStatus,
@ -9,8 +8,6 @@ import {
  Account,
 } from "providers/accounts";
 import { lamportsToSolString } from "utils";
-import Copyable from "./Copyable";
-import { displayAddress } from "utils/tx";
 import { StakeAccountCards } from "components/account/StakeAccountCards";
 import ErrorCard from "components/common/ErrorCard";
 import LoadingCard from "components/common/LoadingCard";
@ -21,6 +18,8 @@ import {
  useAccountOwnedTokens,
 } from "providers/accounts/tokens";
 import { useCluster, ClusterStatus } from "providers/cluster";
+import Address from "./common/Address";
+import Signature from "./common/Signature";

 type Props = { address: string };
 export default function AccountDetails({ address }: Props) {
@ -92,9 +91,7 @@ function UnknownAccountCard({ account }: { account: Account }) {
        <tr>
          <td>Address</td>
          <td className="text-right">
-            <Copyable text={account.pubkey.toBase58()} right bottom>
-              <code>{displayAddress(account.pubkey.toBase58())}</code>
-            </Copyable>
+            <Address pubkey={account.pubkey} alignRight />
          </td>
        </tr>
        <tr>
@ -115,9 +112,7 @@ function UnknownAccountCard({ account }: { account: Account }) {
          <tr>
            <td>Owner</td>
            <td className="text-right">
-              <Copyable text={details.owner.toBase58()} right>
-                <code>{displayAddress(details.owner.toBase58())}</code>
-              </Copyable>
+              <Address pubkey={details.owner} alignRight link />
            </td>
          </tr>
        )}
@ -178,24 +173,9 @@ function TokensCard({ pubkey }: { pubkey: PublicKey }) {
    detailsList.push(
      <tr key={mintAddress}>
        <td>
-          <Copyable text={mintAddress}>
-            <code>{mintAddress}</code>
-          </Copyable>
+          <Address pubkey={new PublicKey(mintAddress)} link />
        </td>
-
        <td>{balance}</td>
-
-        <td>
-          <Link
-            to={(location) => ({
-              ...location,
-              pathname: "/account/" + mintAddress,
-            })}
-            className="btn btn-rounded-circle btn-white btn-sm"
-          >
-            <span className="fe fe-arrow-right"></span>
-          </Link>
-        </td>
      </tr>
    );
  });
@ -229,7 +209,6 @@ function TokensCard({ pubkey }: { pubkey: PublicKey }) {
            <tr>
              <th className="text-muted">Token Address</th>
              <th className="text-muted">Balance</th>
-              <th className="text-muted">Details</th>
            </tr>
          </thead>
          <tbody className="list">{detailsList}</tbody>
@ -317,21 +296,7 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
          </td>

          <td>
-            <Copyable text={signature}>
-              <code>{signature}</code>
-            </Copyable>
-          </td>
-
-          <td>
-            <Link
-              to={(location) => ({
-                ...location,
-                pathname: "/tx/" + signature,
-              })}
-              className="btn btn-rounded-circle btn-white btn-sm"
-            >
-              <span className="fe fe-arrow-right"></span>
-            </Link>
+            <Signature signature={signature} link />
          </td>
        </tr>
      );
@ -369,7 +334,6 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
              <th className="text-muted w-1">Slot</th>
              <th className="text-muted">Result</th>
              <th className="text-muted">Transaction Signature</th>
-              <th className="text-muted">Details</th>
            </tr>
          </thead>
          <tbody className="list">{detailsList}</tbody>
--- a/explorer/src/components/TopAccountsCard.tsx
+++ b/explorer/src/components/TopAccountsCard.tsx
@ -2,13 +2,13 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Location } from "history";
 import { AccountBalancePair } from "@solana/web3.js";
-import Copyable from "./Copyable";
 import { useRichList, useFetchRichList, Status } from "providers/richList";
 import LoadingCard from "./common/LoadingCard";
 import ErrorCard from "./common/ErrorCard";
 import { lamportsToSolString } from "utils";
 import { useQuery } from "utils/url";
 import { useSupply } from "providers/supply";
+import Address from "./common/Address";

 type Filter = "circulating" | "nonCirculating" | "all" | null;

@ -91,8 +91,7 @@ export default function TopAccountsCard() {
                <th className="text-muted">Rank</th>
                <th className="text-muted">Address</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>
+                <th className="text-muted text-right">% of {header} Supply</th>
              </tr>
            </thead>
            <tbody className="list">
@ -112,33 +111,19 @@ const renderAccountRow = (
  index: number,
  supply: number
 ) => {
-  const base58AccountPubkey = account.address.toBase58();
  return (
    <tr key={index}>
      <td>
        <span className="badge badge-soft-dark badge-pill">{index + 1}</span>
      </td>
      <td>
-        <Copyable text={base58AccountPubkey}>
-          <code>{base58AccountPubkey}</code>
-        </Copyable>
+        <Address pubkey={account.address} link />
      </td>
      <td className="text-right">{lamportsToSolString(account.lamports, 0)}</td>
-      <td className="text-center">{`${(
+      <td className="text-right">{`${(
        (100 * account.lamports) /
        supply
      ).toFixed(3)}%`}</td>
-      <td>
-        <Link
-          to={(location) => ({
-            ...location,
-            pathname: "/account/" + base58AccountPubkey,
-          })}
-          className="btn btn-rounded-circle btn-white btn-sm"
-        >
-          <span className="fe fe-arrow-right"></span>
-        </Link>
-      </td>
    </tr>
  );
 };
--- a/explorer/src/components/TransactionDetails.tsx
+++ b/explorer/src/components/TransactionDetails.tsx
@ -14,8 +14,6 @@ import {
  SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
-import Copyable from "./Copyable";
 import { UnknownDetailsCard } from "./instruction/UnknownDetailsCard";
 import { SystemDetailsCard } from "./instruction/system/SystemDetailsCard";
 import { StakeDetailsCard } from "./instruction/stake/StakeDetailsCard";
@ -25,6 +23,8 @@ import TableCardBody from "./common/TableCardBody";
 import { displayTimestamp } from "utils/date";
 import InfoTooltip from "components/InfoTooltip";
 import { isCached } from "providers/transactions/cached";
+import Address from "./common/Address";
+import Signature from "./common/Signature";

 type Props = { signature: TransactionSignature };
 export default function TransactionDetails({ signature }: Props) {
@ -115,9 +115,7 @@ function StatusCard({ signature }: Props) {
        <tr>
          <td>Signature</td>
          <td className="text-right">
-            <Copyable text={signature} right bottom>
-              <code>{signature}</code>
-            </Copyable>
+            <Signature signature={signature} />
          </td>
        </tr>

@ -239,9 +237,7 @@ function AccountsCard({ signature }: Props) {
    return (
      <tr key={key}>
        <td>
-          <Copyable text={key}>
-            <code>{displayAddress(pubkey.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={pubkey} link />
        </td>
        <td>{renderChange()}</td>
        <td>{lamportsToSolString(post)}</td>
--- a/explorer/src/components/account/StakeAccountCards.tsx
+++ b/explorer/src/components/account/StakeAccountCards.tsx
@ -2,10 +2,9 @@ import React from "react";
 import { StakeAccount, Meta } from "solana-sdk-wasm";
 import TableCardBody from "components/common/TableCardBody";
 import { lamportsToSolString } from "utils";
-import Copyable from "components/Copyable";
-import { displayAddress } from "utils/tx";
 import { displayTimestamp } from "utils/date";
 import { Account, useFetchAccountInfo } from "providers/accounts";
+import Address from "components/common/Address";

 export function StakeAccountCards({
  account,
@ -65,9 +64,7 @@ function OverviewCard({
        <tr>
          <td>Address</td>
          <td className="text-right">
-            <Copyable text={account.pubkey.toBase58()} bottom right>
-              <code>{account.pubkey.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={account.pubkey} alignRight />
          </td>
        </tr>
        <tr>
@ -130,11 +127,11 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
            <tr>
              <td>Delegated Vote Address</td>
              <td className="text-right">
-                <Copyable text={stake.delegation.voterPubkey.toBase58()} right>
-                  <code>
-                    {displayAddress(stake.delegation.voterPubkey.toBase58())}
-                  </code>
-                </Copyable>
+                <Address
+                  pubkey={stake.delegation.voterPubkey}
+                  alignRight
+                  link
+                />
              </td>
            </tr>

@ -175,18 +172,14 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
        <tr>
          <td>Stake Authority Address</td>
          <td className="text-right">
-            <Copyable text={meta.authorized.staker.toBase58()} bottom right>
-              <code>{meta.authorized.staker.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={meta.authorized.staker} alignRight link />
          </td>
        </tr>

        <tr>
          <td>Withdraw Authority Address</td>
          <td className="text-right">
-            <Copyable text={meta.authorized.withdrawer.toBase58()} right>
-              <code>{meta.authorized.withdrawer.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={meta.authorized.withdrawer} alignRight link />
          </td>
        </tr>

@ -194,9 +187,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
          <tr>
            <td>Lockup Authority Address</td>
            <td className="text-right">
-              <Copyable text={meta.lockup.custodian.toBase58()} right>
-                <code>{displayAddress(meta.lockup.custodian.toBase58())}</code>
-              </Copyable>
+              <Address pubkey={meta.lockup.custodian} alignRight link />
            </td>
          </tr>
        )}
--- a/explorer/src/components/common/Address.tsx
+++ b/explorer/src/components/common/Address.tsx
@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { PublicKey } from "@solana/web3.js";
+import { clusterPath } from "utils/url";
+import { displayAddress } from "utils/tx";
+import { Pubkey } from "solana-sdk-wasm";
+
+type CopyState = "copy" | "copied";
+type Props = {
+  pubkey: PublicKey | Pubkey;
+  alignRight?: boolean;
+  link?: boolean;
+};
+
+export default function Address({ pubkey, alignRight, link }: Props) {
+  const [state, setState] = useState<CopyState>("copy");
+  const address = pubkey.toBase58();
+
+  const copyToClipboard = () => navigator.clipboard.writeText(address);
+  const handleClick = () =>
+    copyToClipboard().then(() => {
+      setState("copied");
+      setTimeout(() => setState("copy"), 1000);
+    });
+
+  const copyIcon =
+    state === "copy" ? (
+      <span className="fe fe-copy" onClick={handleClick}></span>
+    ) : (
+      <span className="fe fe-check-circle"></span>
+    );
+
+  const copyButton = (
+    <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
+  );
+
+  return (
+    <div
+      className={`d-flex align-items-center ${
+        alignRight ? "justify-content-end" : ""
+      }`}
+    >
+      {copyButton}
+      <span className="text-monospace">
+        {link ? (
+          <Link className="" to={clusterPath(`/accounts/${address}`)}>
+            {displayAddress(address)}
+            <span className="fe fe-external-link ml-2"></span>
+          </Link>
+        ) : (
+          displayAddress(address)
+        )}
+      </span>
+    </div>
+  );
+}
--- a/explorer/src/components/common/Signature.tsx
+++ b/explorer/src/components/common/Signature.tsx
@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { TransactionSignature } from "@solana/web3.js";
+import { clusterPath } from "utils/url";
+
+type CopyState = "copy" | "copied";
+type Props = { signature: TransactionSignature; link?: boolean };
+
+export default function Signature({ signature, link }: Props) {
+  const [state, setState] = useState<CopyState>("copy");
+
+  const copyToClipboard = () => navigator.clipboard.writeText(signature);
+  const handleClick = () =>
+    copyToClipboard().then(() => {
+      setState("copied");
+      setTimeout(() => setState("copy"), 1000);
+    });
+
+  const copyIcon =
+    state === "copy" ? (
+      <span className="fe fe-copy" onClick={handleClick}></span>
+    ) : (
+      <span className="fe fe-check-circle"></span>
+    );
+
+  const copyButton = (
+    <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
+  );
+
+  return (
+    <div className="d-flex align-items-center justify-content-end">
+      {copyButton}
+      <span className="text-monospace">
+        {link ? (
+          <Link className="" to={clusterPath(`/tx/${signature}`)}>
+            {signature}
+            <span className="fe fe-external-link ml-2"></span>
+          </Link>
+        ) : (
+          signature
+        )}
+      </span>
+    </div>
+  );
+}
--- a/explorer/src/components/instruction/RawDetails.tsx
+++ b/explorer/src/components/instruction/RawDetails.tsx
@ -1,8 +1,8 @@
 import React from "react";
 import bs58 from "bs58";
 import { TransactionInstruction } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import Copyable from "components/Copyable";
+import Address from "components/common/Address";

 function displayData(data: string) {
  if (data.length > 50) {
@ -18,9 +18,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable text={ix.programId.toBase58()} bottom right>
-            <code>{displayAddress(ix.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={ix.programId} alignRight link />
        </td>
      </tr>

@ -36,9 +34,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
            )}
          </td>
          <td className="text-right">
-            <Copyable text={pubkey.toBase58()} right>
-              <code>{pubkey.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={pubkey} alignRight link />
          </td>
        </tr>
      ))}
--- a/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  StakeInstruction,
  StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function AuthorizeDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,10 +24,6 @@ export function AuthorizeDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const stakePubkey = params.stakePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-  const newAuthorizedPubkey = params.newAuthorizedPubkey.toBase58();
-
  let authorizationType;
  switch (params.stakeAuthorizationType.index) {
    case 0:
@ -52,36 +47,28 @@ export function AuthorizeDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Stake Address</td>
        <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Old Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>New Authority Address</td>
        <td className="text-right">
-          <Copyable right text={newAuthorizedPubkey}>
-            <code>{newAuthorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.newAuthorizedPubkey} alignRight link />
        </td>
      </tr>

--- a/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  StakeInstruction,
  StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function DeactivateDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,9 +24,6 @@ export function DeactivateDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const stakePubkey = params.stakePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -38,27 +34,21 @@ export function DeactivateDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Stake Address</td>
        <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  StakeInstruction,
  StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function DelegateDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,10 +24,6 @@ export function DelegateDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const stakePubkey = params.stakePubkey.toBase58();
-  const votePubkey = params.votePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -39,36 +34,28 @@ export function DelegateDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Stake Address</td>
        <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Delegated Vote Address</td>
        <td className="text-right">
-          <Copyable right text={votePubkey}>
-            <code>{votePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.votePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
@ -6,10 +6,9 @@ import {
  StakeProgram,
  SystemProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function InitializeDetailsCard(props: {
  ix: TransactionInstruction;
@ -26,10 +25,6 @@ export function InitializeDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const stakerPubkey = params.authorized.staker.toBase58();
-  const withdrawerPubkey = params.authorized.withdrawer.toBase58();
-  const stakePubkey = params.stakePubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -40,36 +35,28 @@ export function InitializeDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Stake Address</td>
        <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Stake Authority Address</td>
        <td className="text-right">
-          <Copyable right text={stakerPubkey}>
-            <code>{stakerPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorized.staker} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Withdraw Authority Address</td>
        <td className="text-right">
-          <Copyable right text={withdrawerPubkey}>
-            <code>{withdrawerPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorized.withdrawer} alignRight link />
        </td>
      </tr>

@ -93,9 +80,7 @@ export function InitializeDetailsCard(props: {
        <tr>
          <td>Lockup Custodian Address</td>
          <td className="text-right">
-            <Copyable right text={params.lockup.custodian.toBase58()}>
-              <code>{displayAddress(params.lockup.custodian.toBase58())}</code>
-            </Copyable>
+            <Address pubkey={params.lockup.custodian} alignRight link />
          </td>
        </tr>
      )}
--- a/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
@ -5,11 +5,10 @@ import {
  StakeInstruction,
  StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { lamportsToSolString } from "utils";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function SplitDetailsCard(props: {
  ix: TransactionInstruction;
@ -26,45 +25,33 @@ export function SplitDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const stakePubkey = params.stakePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-  const splitStakePubkey = params.splitStakePubkey.toBase58();
-
  return (
    <InstructionCard ix={ix} index={index} result={result} title="Split Stake">
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Stake Address</td>
        <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>New Stake Address</td>
        <td className="text-right">
-          <Copyable right text={splitStakePubkey}>
-            <code>{splitStakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.splitStakePubkey} alignRight link />
        </td>
      </tr>

--- a/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
@ -6,10 +6,9 @@ import {
  StakeProgram,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function WithdrawDetailsCard(props: {
  ix: TransactionInstruction;
@ -26,10 +25,6 @@ export function WithdrawDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const stakePubkey = params.stakePubkey.toBase58();
-  const toPubkey = params.toPubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -40,36 +35,28 @@ export function WithdrawDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Stake Address</td>
        <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>To Address</td>
        <td className="text-right">
-          <Copyable right text={toPubkey}>
-            <code>{toPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.toPubkey} alignRight link />
        </td>
      </tr>

--- a/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function AllocateDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,8 +24,6 @@ export function AllocateDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const accountKey = params.accountPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -37,18 +34,14 @@ export function AllocateDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Account Address</td>
        <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
        </td>
      </tr>

--- a/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
@ -5,10 +5,10 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
 import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function AllocateWithSeedDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,9 +25,6 @@ export function AllocateWithSeedDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const accountKey = params.accountPubkey.toBase58();
-  const baseKey = params.basePubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -38,27 +35,21 @@ export function AllocateWithSeedDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Account Address</td>
        <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Base Address</td>
        <td className="text-right">
-          <Copyable right text={baseKey}>
-            <code>{baseKey}</code>
-          </Copyable>
+          <Address pubkey={params.basePubkey} alignRight link />
        </td>
      </tr>

@ -79,9 +70,7 @@ export function AllocateWithSeedDetailsCard(props: {
      <tr>
        <td>Assigned Owner</td>
        <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/AssignDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AssignDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function AssignDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,8 +24,6 @@ export function AssignDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const accountKey = params.accountPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -37,27 +34,21 @@ export function AssignDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Account Address</td>
        <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Assigned Owner</td>
        <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
@ -5,10 +5,10 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
 import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function AssignWithSeedDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,9 +25,6 @@ export function AssignWithSeedDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const accountKey = params.accountPubkey.toBase58();
-  const baseKey = params.basePubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -38,27 +35,21 @@ export function AssignWithSeedDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Account Address</td>
        <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Base Address</td>
        <td className="text-right">
-          <Copyable right text={baseKey}>
-            <code>{baseKey}</code>
-          </Copyable>
+          <Address pubkey={params.basePubkey} alignRight link />
        </td>
      </tr>

@ -74,9 +65,7 @@ export function AssignWithSeedDetailsCard(props: {
      <tr>
        <td>Assigned Owner</td>
        <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/CreateDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/CreateDetailsCard.tsx
@ -6,10 +6,9 @@ import {
  SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function CreateDetailsCard(props: {
  ix: TransactionInstruction;
@ -26,9 +25,6 @@ export function CreateDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const from = params.fromPubkey.toBase58();
-  const newKey = params.newAccountPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -39,27 +35,21 @@ export function CreateDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>From Address</td>
        <td className="text-right">
-          <Copyable right text={from}>
-            <code>{from}</code>
-          </Copyable>
+          <Address pubkey={params.fromPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>New Address</td>
        <td className="text-right">
-          <Copyable right text={newKey}>
-            <code>{newKey}</code>
-          </Copyable>
+          <Address pubkey={params.newAccountPubkey} alignRight link />
        </td>
      </tr>

@ -76,9 +66,7 @@ export function CreateDetailsCard(props: {
      <tr>
        <td>Assigned Owner</td>
        <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
@ -6,10 +6,10 @@ import {
  SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
 import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function CreateWithSeedDetailsCard(props: {
  ix: TransactionInstruction;
@ -26,10 +26,6 @@ export function CreateWithSeedDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const from = params.fromPubkey.toBase58();
-  const newKey = params.newAccountPubkey.toBase58();
-  const baseKey = params.basePubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -40,36 +36,28 @@ export function CreateWithSeedDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>From Address</td>
        <td className="text-right">
-          <Copyable right text={from}>
-            <code>{from}</code>
-          </Copyable>
+          <Address pubkey={params.fromPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>New Address</td>
        <td className="text-right">
-          <Copyable right text={newKey}>
-            <code>{newKey}</code>
-          </Copyable>
+          <Address pubkey={params.newAccountPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Base Address</td>
        <td className="text-right">
-          <Copyable right text={baseKey}>
-            <code>{baseKey}</code>
-          </Copyable>
+          <Address pubkey={params.basePubkey} alignRight link />
        </td>
      </tr>

@ -95,9 +83,7 @@ export function CreateWithSeedDetailsCard(props: {
      <tr>
        <td>Assigned Owner</td>
        <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function NonceAdvanceDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,9 +24,6 @@ export function NonceAdvanceDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const nonceKey = params.noncePubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -38,27 +34,21 @@ export function NonceAdvanceDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Nonce Address</td>
        <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function NonceAuthorizeDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,10 +24,6 @@ export function NonceAuthorizeDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const nonceKey = params.noncePubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-  const newAuthorizedKey = params.newAuthorizedPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -39,36 +34,28 @@ export function NonceAuthorizeDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Nonce Address</td>
        <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Old Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>New Authority Address</td>
        <td className="text-right">
-          <Copyable right text={newAuthorizedKey}>
-            <code>{newAuthorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.newAuthorizedPubkey} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
@ -5,10 +5,9 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function NonceInitializeDetailsCard(props: {
  ix: TransactionInstruction;
@ -25,9 +24,6 @@ export function NonceInitializeDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const nonceKey = params.noncePubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-
  return (
    <InstructionCard
      ix={ix}
@ -38,27 +34,21 @@ export function NonceInitializeDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Nonce Address</td>
        <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>
    </InstructionCard>
--- a/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
@ -5,11 +5,10 @@ import {
  SignatureResult,
  SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { lamportsToSolString } from "utils";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function NonceWithdrawDetailsCard(props: {
  ix: TransactionInstruction;
@ -26,11 +25,6 @@ export function NonceWithdrawDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const nonceKey = params.noncePubkey.toBase58();
-  const toKey = params.toPubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-  const lamports = params.lamports;
-
  return (
    <InstructionCard
      ix={ix}
@ -41,42 +35,34 @@ export function NonceWithdrawDetailsCard(props: {
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Nonce Address</td>
        <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Authority Address</td>
        <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>To Address</td>
        <td className="text-right">
-          <Copyable right text={toKey}>
-            <code>{toKey}</code>
-          </Copyable>
+          <Address pubkey={params.toPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>Withdraw Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(lamports)}</td>
+        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
      </tr>
    </InstructionCard>
  );
--- a/explorer/src/components/instruction/system/TransferDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/TransferDetailsCard.tsx
@ -6,10 +6,9 @@ import {
  SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";

 export function TransferDetailsCard(props: {
  ix: TransactionInstruction;
@ -26,34 +25,26 @@ export function TransferDetailsCard(props: {
    return <UnknownDetailsCard {...props} />;
  }

-  const from = transfer.fromPubkey.toBase58();
-  const to = transfer.toPubkey.toBase58();
  return (
    <InstructionCard ix={ix} index={index} result={result} title="Transfer">
      <tr>
        <td>Program</td>
        <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
        </td>
      </tr>

      <tr>
        <td>From Address</td>
        <td className="text-right">
-          <Copyable right text={from}>
-            <code>{from}</code>
-          </Copyable>
+          <Address pubkey={transfer.fromPubkey} alignRight link />
        </td>
      </tr>

      <tr>
        <td>To Address</td>
        <td className="text-right">
-          <Copyable right text={to}>
-            <code>{to}</code>
-          </Copyable>
+          <Address pubkey={transfer.toPubkey} alignRight link />
        </td>
      </tr>

--- a/explorer/src/scss/_solana-variables.scss
+++ b/explorer/src/scss/_solana-variables.scss
@ -20,7 +20,7 @@ $gray-300: #e5ebe9;
 $gray-400: #c6e6de;
 $gray-500: #abd5c6;
 $gray-600: #86b8b6;
-$gray-700: #409088;
+$gray-700: #698582;
 $gray-800: #387462;
 $gray-900: #1b4e3f;
 $black: #232323;
@ -31,8 +31,8 @@ $rainbow-3: #79abd2;
 $rainbow-4: #38d0bd;
 $rainbow-5: #1dd79b;

+$primary: #358c70;
 $success: #42ba96;
-$primary: $success;
 $primary-desat: #42ba96;
 $secondary: $gray-700;
 $info: #b45be1;
--- a/explorer/src/utils/tx.ts
+++ b/explorer/src/utils/tx.ts
@ -18,6 +18,7 @@ const PROGRAM_IDS = {
  [SystemProgram.programId.toBase58()]: "System",
  Vest111111111111111111111111111111111111111: "Vest",
  [VOTE_PROGRAM_ID.toBase58()]: "Vote",
+  TokenSVp5gheXUvJ6jGWGeCsgPKgnE3YgdGKRVCMY9o: "Token",
 };

 const LOADER_IDS = {