From dfd3da74734f626cae8521dfddd8f1df6e0874e4 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 13:43:30 +0100
Subject: [PATCH 1/9] Fix zero inputs send button positioning

---
 .../scaffold-eth/Contract/WriteOnlyFunctionForm.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
index 809dbdec..33686f34 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
@@ -94,7 +94,7 @@ export const WriteOnlyFunctionForm = ({
 
   return (
     <div className="py-5 space-y-3 first:pt-0 last:pb-1">
-      <div className={`flex gap-3 ${zeroInputs ? "flex-row justify-between items-center" : "flex-col"}`}>
+      <div className={`flex gap-3 ${zeroInputs ? "flex-row justify-between" : "flex-col"}`}>
         <p className="font-medium my-0 break-words">
           {abiFunction.name}
           <InheritanceTooltip inheritedFrom={inheritedFrom} />
@@ -116,7 +116,7 @@ export const WriteOnlyFunctionForm = ({
             />
           </div>
         ) : null}
-        <div className="flex justify-between gap-2">
+        <div className={`flex justify-between gap-2 ${zeroInputs ? "mt-8" : "mt-0"}`}>
           {!zeroInputs && (
             <div className="flex-grow basis-0">
               {displayedTxResult ? <TxReceipt txResult={displayedTxResult} /> : null}

From 97ab42a2ccbb242a4faf7b044b0b12d905695801 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 14:17:01 +0100
Subject: [PATCH 2/9] Fix read button positioning and result gap

---
 .../components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
index c4b9d434..1f42956c 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
@@ -67,7 +67,7 @@ export const ReadOnlyFunctionForm = ({
         <InheritanceTooltip inheritedFrom={inheritedFrom} />
       </p>
       {inputElements}
-      <div className="flex justify-end flex-wrap w-full">
+      <div className="flex justify-end w-full gap-5">
         <div className="flex-grow w-4/5">
           {result !== null && result !== undefined && (
             <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words">

From d855995f0e7ed0883ea888b617afc5fd83c7117d Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 14:17:43 +0100
Subject: [PATCH 3/9] Reduce result rounded border

---
 .../components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
index 1f42956c..29b6d12b 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
@@ -70,7 +70,7 @@ export const ReadOnlyFunctionForm = ({
       <div className="flex justify-end w-full gap-5">
         <div className="flex-grow w-4/5">
           {result !== null && result !== undefined && (
-            <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words">
+            <div className="bg-secondary rounded-xl text-sm px-4 py-1.5 break-words">
               <p className="font-bold m-0 mb-1">Result:</p>
               <pre className="whitespace-pre-wrap break-words">{displayTxResult(result)}</pre>
             </div>

From 3fd2b89ee57bd7b4329e94c19774669c6b150354 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 14:20:30 +0100
Subject: [PATCH 4/9] Adjust methods and close icons positioning

---
 .../scaffold-eth/Contract/ContractReadMethods.tsx | 15 +++++++++++----
 .../scaffold-eth/Contract/ContractUI.tsx          |  4 ++--
 .../Contract/ContractWriteMethods.tsx             | 10 +++++++---
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
index f640c95e..116fc2bf 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
@@ -31,21 +31,28 @@ export const ContractReadMethods = ({
     .sort((a, b) => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
 
   if (!functionsToDisplay.length) {
-    return <span className="font-light text-gray-500">Please select read methods from the sidebar.</span>;
+    return (
+      <div className="py-5">
+        <span className="font-light text-gray-500 my-5">Please select read methods from the sidebar.</span>
+      </div>
+    );
   }
 
   return (
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
-        <div key={fn.name} className="relative mb-4">
+        <div key={fn.name} className="relative mb-4 pt-5">
           <ReadOnlyFunctionForm
             abi={deployedContractData.abi as Abi}
             contractAddress={deployedContractData.address}
             abiFunction={fn}
             inheritedFrom={inheritedFrom}
           />
-          <button onClick={() => removeMethod(fn.name)} className="absolute top-1 right-0 btn btn-ghost btn-xs">
-            <XMarkIcon className="h-4 w-4" />
+          <button
+            onClick={() => removeMethod(fn.name)}
+            className="absolute top-0 right-0 p-1 btn btn-ghost btn-xs pt-[22px]"
+          >
+            <XMarkIcon className="h-5 w-5" />
           </button>
         </div>
       ))}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
index 0b2b2ba3..739e5fcc 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
@@ -148,7 +148,7 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
                       <p className="my-0 text-sm font-bold">Read</p>
                     </div>
                   </div>
-                  <div className="divide-y divide-base-300 p-5">
+                  <div className="divide-y divide-base-300 px-5">
                     <ContractReadMethods
                       deployedContractData={{ address: initialContractData.address, abi }}
                       removeMethod={removeMethod}
@@ -163,7 +163,7 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
                       <p className="my-0 text-sm font-bold">Write</p>
                     </div>
                   </div>
-                  <div className="divide-y divide-base-300 p-5">
+                  <div className="divide-y divide-base-300 px-5">
                     <ContractWriteMethods
                       deployedContractData={{ address: initialContractData.address, abi }}
                       onChange={triggerRefreshDisplayVariables}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
index b2d20339..5b70264b 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
@@ -32,13 +32,17 @@ export const ContractWriteMethods = ({
     .sort((a, b) => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
 
   if (!functionsToDisplay.length) {
-    return <span className="font-light text-gray-500">Please select write methods from the sidebar.</span>;
+    return (
+      <div className="py-5">
+        <span className="font-light text-gray-500">Please select write methods from the sidebar.</span>
+      </div>
+    );
   }
 
   return (
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }, idx) => (
-        <div key={`${fn.name}-${idx}`} className="relative mb-4">
+        <div key={`${fn.name}-${idx}`} className="relative mb-4 pt-5">
           <WriteOnlyFunctionForm
             abi={deployedContractData.abi as Abi}
             abiFunction={fn}
@@ -48,7 +52,7 @@ export const ContractWriteMethods = ({
           />
           <button
             onClick={() => removeMethod(fn.name)}
-            className="absolute top-0 right-0 p-1 rounded-full text-sm focus:outline-none text-gray-500 hover:text-gray-700"
+            className="absolute top-0 right-0 p-1 btn btn-ghost btn-xs pt-[22px]"
             aria-label="Remove method"
           >
             <XMarkIcon className="h-5 w-5" />

From fc6972f0ad06ecd983c35f6231cfda2e0d5e2a58 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 14:21:19 +0100
Subject: [PATCH 5/9] Delete input additional left margin

---
 .../nextjs/components/scaffold-eth/Contract/ContractInput.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
index ef6bfcf5..9aea2398 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
@@ -49,7 +49,7 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
   };
 
   return (
-    <div className="flex flex-col gap-1 w-full pl-2">
+    <div className="flex flex-col gap-1 w-full">
       <div className="flex items-center">
         {paramType.name && <span className="text-xs font-medium mr-2">{paramType.name}</span>}
         <span className="block text-xs font-extralight">{paramType.type}</span>

From 08c36192471e32ea801e091627ed4e5c5465e9b8 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 14:54:53 +0100
Subject: [PATCH 6/9] Add hover effect on close menu button

---
 .../nextjs/components/scaffold-eth/Contract/MethodSelector.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx b/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
index e9ff874a..9ed1b9fb 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
@@ -39,7 +39,7 @@ export const MethodSelector = ({
     <div className="overflow-auto h-[80vh]">
       <input id="sidebar" type="checkbox" className="drawer-toggle" />
       <label htmlFor="sidebar" className="cursor-pointer block sm:hidden">
-        <XMarkIcon className="h-5 w-5 mb-5" />
+        <XMarkIcon className="h-5 w-5 mb-5 hover:opacity-70" />
       </label>
       <div>
         <h3

From 5e11bb021cdab13099086b0304e235b2c88e1e8b Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 15:02:20 +0100
Subject: [PATCH 7/9] Add margin left to the refresh variable buttons

---
 .../nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
index 47c49e6b..05078ade 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
@@ -49,7 +49,7 @@ export const DisplayVariable = ({
     <div className="space-y-1 pb-2">
       <div className="flex items-center">
         <h3 className="font-medium text-sm mb-0 break-all">{abiFunction.name}</h3>
-        <button className="btn btn-ghost btn-xs" onClick={async () => await refetch()}>
+        <button className="btn btn-ghost btn-xs ml-2" onClick={async () => await refetch()}>
           {isFetching ? (
             <span className="loading loading-spinner loading-xs"></span>
           ) : (

From 453f4cdd5354ea447b4bc1b963b65604b737a9ab Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Wed, 7 Feb 2024 15:31:34 +0100
Subject: [PATCH 8/9] Fix close icon position on read and write methods

---
 .../components/scaffold-eth/Contract/ContractReadMethods.tsx   | 3 ++-
 .../components/scaffold-eth/Contract/ContractWriteMethods.tsx  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
index 116fc2bf..a5a87f84 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
@@ -50,7 +50,8 @@ export const ContractReadMethods = ({
           />
           <button
             onClick={() => removeMethod(fn.name)}
-            className="absolute top-0 right-0 p-1 btn btn-ghost btn-xs pt-[22px]"
+            className="absolute top-0 right-0 btn btn-ghost btn-xs mt-[21px]"
+            aria-label="Remove method"
           >
             <XMarkIcon className="h-5 w-5" />
           </button>
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
index 5b70264b..e76dca75 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
@@ -52,7 +52,7 @@ export const ContractWriteMethods = ({
           />
           <button
             onClick={() => removeMethod(fn.name)}
-            className="absolute top-0 right-0 p-1 btn btn-ghost btn-xs pt-[22px]"
+            className="absolute top-0 right-0 btn btn-ghost btn-xs mt-[21px]"
             aria-label="Remove method"
           >
             <XMarkIcon className="h-5 w-5" />

From e9739319c683357ed14c0ffa2f931223eb0b8ec8 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 8 Feb 2024 12:17:33 +0100
Subject: [PATCH 9/9] Add ENS placeholder for addresses

---
 .../nextjs/components/scaffold-eth/Contract/ContractInput.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
index 9aea2398..89f0ea5c 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
@@ -32,7 +32,8 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
   const renderInput = () => {
     switch (paramType.type) {
       case "address":
-        return <AddressInput {...inputProps} />;
+        const addressInputProps = { ...inputProps, placeholder: "address or ENS" };
+        return <AddressInput {...addressInputProps} />;
       case "bytes32":
         return <Bytes32Input {...inputProps} />;
       case "bytes":