From 92d07d74bb213575c19acc24d7c2845630e24e1f Mon Sep 17 00:00:00 2001
From: Damian <damianmarti@gmail.com>
Date: Fri, 27 Oct 2023 12:37:07 -0300
Subject: [PATCH 1/2] Add copy to clipboard to TxReceipt

---
 .../scaffold-eth/Contract/TxReceipt.tsx       | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx b/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
index 12570b464..e287e2804 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
@@ -1,9 +1,14 @@
+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" />
@@ -11,6 +16,27 @@ export const TxReceipt = (
         <strong>Transaction Receipt</strong>
       </div>
       <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
+        {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>
+        )}
         <pre className="text-xs pt-4">{displayTxResult(txResult)}</pre>
       </div>
     </div>

From 0330e5475a4c18daa39f018f65d3d5527a0a5274 Mon Sep 17 00:00:00 2001
From: Damian <damianmarti@gmail.com>
Date: Fri, 27 Oct 2023 15:49:56 -0300
Subject: [PATCH 2/2] Move copy tx receipt icon to title left

---
 .../scaffold-eth/Contract/TxReceipt.tsx        | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx b/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
index e287e2804..6308ed277 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/TxReceipt.tsx
@@ -10,12 +10,8 @@ export const TxReceipt = (
   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>
-      <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
+    <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"
@@ -37,7 +33,15 @@ export const TxReceipt = (
             />
           </CopyToClipboard>
         )}
-        <pre className="text-xs pt-4">{displayTxResult(txResult)}</pre>
+      </div>
+      <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>
   );