Rename signature to be more generic (and less wrong); Make copyable accept children

explorer/src/components/AccountsCard.tsx

@@ -11,7 +11,7 @@ import { assertUnreachable } from "../utils";
 import { displayAddress } from "../utils/tx";
 import { useCluster } from "../providers/cluster";
 import { PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";
-import Signature from "./Signature";
+import Copyable from "./Copyable";
 
 function AccountsCard() {
   const { accounts, idCounter } = useAccounts();
@@ -148,6 +148,7 @@ const renderAccountRow = (account: Account) => {
     balance = `◎${(1.0 * account.lamports) / LAMPORTS_PER_SOL}`;
   }
 
+  const base58AccountPubkey = account.pubkey.toBase58()
   return (
     <tr key={account.id}>
       <td>
@@ -157,7 +158,9 @@ const renderAccountRow = (account: Account) => {
         <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
       </td>
       <td>
-        <Signature text={account.pubkey.toBase58()} />
+        <Copyable text={base58AccountPubkey}>
+          <code>{base58AccountPubkey}</code>
+        </Copyable>
       </td>
       <td>{balance}</td>
       <td>{data}</td>

explorer/src/components/Copyable.tsx

@@ -0,0 +1,36 @@
+import React, { useState, ReactNode } from "react";
+
+type CopyableProps = {
+  text: string
+  children: ReactNode
+}
+
+const popover = (
+  <div className="popover fade bs-popover-right show">
+    <div className="arrow" />
+    <div className="popover-body">Copied!</div>
+  </div>
+);
+
+function Copyable({ text, children }: CopyableProps) {
+  const [showPopover, setShowPopover] = useState(false);
+
+  const copyToClipboard = () => navigator.clipboard.writeText(text);
+  const handleClick = () =>
+    copyToClipboard()
+      .then(() => {
+        setShowPopover(true);
+        setTimeout(setShowPopover.bind(null, false), 2500);
+      });
+
+  return (
+    <div className="copyable">
+      <div onClick={handleClick}>
+        {children}
+      </div>
+      {showPopover && popover}
+    </div>
+  );
+}
+
+export default Copyable;

explorer/src/components/Signature.tsx

@@ -1,32 +0,0 @@
-import React, { useState } from "react";
-
-type SignatureProps = {
-  text: string;
-};
-
-const popover = (
-  <div className="popover fade bs-popover-right show">
-    <div className="arrow" />
-    <div className="popover-body">Copied!</div>
-  </div>
-);
-
-function Signature({ text }: SignatureProps) {
-  const [showPopover, setShowPopover] = useState(false);
-
-  const copyToClipboard = () => navigator.clipboard.writeText(text);
-  const handleClick = () =>
-    copyToClipboard().then(() => {
-      setShowPopover(true);
-      setTimeout(setShowPopover.bind(null, false), 2500);
-    });
-
-  return (
-    <div className="signature">
-      <code onClick={handleClick}>{text}</code>
-      {showPopover && popover}
-    </div>
-  );
-}
-
-export default Signature;

explorer/src/components/TransactionsCard.tsx

@@ -10,7 +10,7 @@ import {
 import bs58 from "bs58";
 import { assertUnreachable } from "../utils";
 import { useCluster } from "../providers/cluster";
-import Signature from "./Signature";
+import Copyable from "./Copyable";
 
 function TransactionsCard() {
   const { transactions, idCounter } = useTransactions();
@@ -193,7 +193,9 @@ const renderTransactionRow = (
         <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
       </td>
       <td>
-        <Signature text={transaction.signature} />
+        <Copyable text={transaction.signature}>
+          <code>{transaction.signature}</code>
+        </Copyable>
       </td>
       <td className="text-uppercase">{confirmationsText}</td>
       <td>{slotText}</td>

explorer/src/scss/_solana.scss

@@ -10,7 +10,7 @@ code {
   color: $black;
 }
 
-.signature {
+.copyable {
   position: relative;
 
   &:hover {