diff --git a/explorer/src/components/Signature.tsx b/explorer/src/components/Signature.tsx
new file mode 100644
index 0000000000..f6ea9ffc18
--- /dev/null
+++ b/explorer/src/components/Signature.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+type SignatureProps = {
+ text: string
+}
+
+function Signature({ text }: SignatureProps) {
+ const copyToClipboard = () => navigator.clipboard.writeText(text);
+ // TODO: how to make onClick pop up a toast or other notification?
+
+ return {text}
;
+}
+
+export default Signature;
diff --git a/explorer/src/components/TransactionsCard.tsx b/explorer/src/components/TransactionsCard.tsx
index 3903d604e8..72089a11c2 100644
--- a/explorer/src/components/TransactionsCard.tsx
+++ b/explorer/src/components/TransactionsCard.tsx
@@ -10,6 +10,7 @@ import {
import bs58 from "bs58";
import { assertUnreachable } from "../utils";
import { useCluster } from "../providers/cluster";
+import Signature from "./Signature";
function TransactionsCard() {
const { transactions, idCounter } = useTransactions();
@@ -192,7 +193,7 @@ const renderTransactionRow = (
{statusText}
{transaction.signature}
+