diff --git a/explorer/src/components/AccountsCard.tsx b/explorer/src/components/AccountsCard.tsx
index a305aa54f4..f6641ff3c4 100644
--- a/explorer/src/components/AccountsCard.tsx
+++ b/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 (
@@ -157,7 +158,9 @@ const renderAccountRow = (account: Account) => {
{statusText}
|
-
+
+ {base58AccountPubkey}
+
|
{balance} |
{data} |
diff --git a/explorer/src/components/Copyable.tsx b/explorer/src/components/Copyable.tsx
new file mode 100644
index 0000000000..27a91ae166
--- /dev/null
+++ b/explorer/src/components/Copyable.tsx
@@ -0,0 +1,36 @@
+import React, { useState, ReactNode } from "react";
+
+type CopyableProps = {
+ text: string
+ children: ReactNode
+}
+
+const popover = (
+
+);
+
+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 (
+
+
+ {children}
+
+ {showPopover && popover}
+
+ );
+}
+
+export default Copyable;
\ No newline at end of file
diff --git a/explorer/src/components/Signature.tsx b/explorer/src/components/Signature.tsx
deleted file mode 100644
index e799507813..0000000000
--- a/explorer/src/components/Signature.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { useState } from "react";
-
-type SignatureProps = {
- text: string;
-};
-
-const popover = (
-
-);
-
-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 (
-
- {text}
- {showPopover && popover}
-
- );
-}
-
-export default Signature;
diff --git a/explorer/src/components/TransactionsCard.tsx b/explorer/src/components/TransactionsCard.tsx
index 72089a11c2..010beca20b 100644
--- a/explorer/src/components/TransactionsCard.tsx
+++ b/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 = (
{statusText}
-
+
+ {transaction.signature}
+
|
{confirmationsText} |
{slotText} |
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 7ed3e6dcde..5ef707019d 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -10,7 +10,7 @@ code {
color: $black;
}
-.signature {
+.copyable {
position: relative;
&:hover {