Add copy to clipboard to TxReceipt (#590)

scaffold-eth · Oct 30, 2023 · b5347f7 · b5347f7
1 parent e88419a
commit b5347f7
Showing 1 changed file with 36 additions and 6 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx b/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
@@ -1,17 +1,47 @@
+import { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
 import { TransactionReceipt } from "viem";
+import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { displayTxResult } from "~~/components/scaffold-eth";
 
 export const TxReceipt = (
   txResult: string | number | bigint | Record<string, any> | TransactionReceipt | undefined,
 ) => {
+  const [txResultCopied, setTxResultCopied] = useState(false);
+
   return (
-    <div className="flex-wrap collapse collapse-arrow mb-2">
-      <input type="checkbox" className="min-h-0 peer" />
-      <div className="collapse-title text-sm rounded-3xl peer-checked:rounded-b-none min-h-0 bg-secondary py-1.5">
-        <strong>Transaction Receipt</strong>
+    <div className="flex text-sm rounded-3xl peer-checked:rounded-b-none min-h-0 bg-secondary py-0">
+      <div className="mt-1 pl-2">
+        {txResultCopied ? (
+          <CheckCircleIcon
+            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+            aria-hidden="true"
+          />
+        ) : (
+          <CopyToClipboard
+            text={displayTxResult(txResult) as string}
+            onCopy={() => {
+              setTxResultCopied(true);
+              setTimeout(() => {
+                setTxResultCopied(false);
+              }, 800);
+            }}
+          >
+            <DocumentDuplicateIcon
+              className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+              aria-hidden="true"
+            />
+          </CopyToClipboard>
+        )}
       </div>
-      <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
-        <pre className="text-xs pt-4">{displayTxResult(txResult)}</pre>
+      <div className="flex-wrap collapse collapse-arrow">
+        <input type="checkbox" className="min-h-0 peer" />
+        <div className="collapse-title text-sm min-h-0 py-1.5 pl-1">
+          <strong>Transaction Receipt</strong>
+        </div>
+        <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
+          <pre className="text-xs pt-4">{displayTxResult(txResult)}</pre>
+        </div>
       </div>
     </div>
   );