From b5347f7cad85f5cddb1eb0c7f17d8835c5f696f4 Mon Sep 17 00:00:00 2001
From: Damian Martinelli <damianmarti@gmail.com>
Date: Mon, 30 Oct 2023 07:29:12 -0300
Subject: [PATCH] Add copy to clipboard to TxReceipt (#590)

---
 .../scaffold-eth/Contract/TxReceipt.tsx       | 42 ++++++++++++++++---
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx b/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
index 12570b464..6308ed277 100644
--- 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>
   );