improve debug struct UI (#726)

scaffold-eth · Feb 15, 2024 · 22f4a05 · 22f4a05
1 parent a5eedbd
commit 22f4a05
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/packages/nextjs/app/debug/_components/contract/ContractInput.tsx b/packages/nextjs/app/debug/_components/contract/ContractInput.tsx
@@ -73,8 +73,8 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
   };
 
   return (
-    <div className="flex flex-col gap-1 w-full pl-2">
-      <div className="flex items-center">
+    <div className="flex flex-col gap-1.5 w-full">
+      <div className="flex items-center ml-2">
         {paramType.name && <span className="text-xs font-medium mr-2 leading-none">{paramType.name}</span>}
         <span className="block text-xs font-extralight leading-none">{paramType.type}</span>
       </div>

diff --git a/packages/nextjs/app/debug/_components/contract/Tuple.tsx b/packages/nextjs/app/debug/_components/contract/Tuple.tsx
@@ -27,12 +27,12 @@ export const Tuple = ({ abiTupleParameter, setParentForm, parentStateObjectKey }
 
   return (
     <div>
-      <div className="collapse collapse-arrow">
+      <div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
         <input type="checkbox" className="min-h-fit peer" />
-        <div className="collapse-title p-0 min-h-fit peer-checked:mb-2">
+        <div className="collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50">
           <p className="m-0 p-0 text-[1rem]">{abiTupleParameter.internalType}</p>
         </div>
-        <div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-2 collapse-content">
+        <div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-4 collapse-content">
           {abiTupleParameter?.components?.map((param, index) => {
             const key = getFunctionInputKey(abiTupleParameter.name || "tuple", param, index);
             return <ContractInput setForm={setForm} form={form} key={key} stateObjectKey={key} paramType={param} />;

diff --git a/packages/nextjs/app/debug/_components/contract/TupleArray.tsx b/packages/nextjs/app/debug/_components/contract/TupleArray.tsx
@@ -97,17 +97,17 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject
 
   return (
     <div>
-      <div className="collapse collapse-arrow">
+      <div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
         <input type="checkbox" className="min-h-fit peer" />
-        <div className="collapse-title p-0 min-h-fit peer-checked:mb-1">
+        <div className="collapse-title p-0 min-h-fit peer-checked:mb-1 text-primary-content/50">
           <p className="m-0 text-[1rem]">{abiTupleParameter.internalType}</p>
         </div>
-        <div className="ml-3 flex-col space-y-2 border-secondary/70 border-l-2 pl-2 collapse-content">
+        <div className="ml-3 flex-col space-y-2 border-secondary/70 border-l-2 pl-4 collapse-content">
           {additionalInputs.map((additionalInput, additionalIndex) => (
             <div key={additionalIndex} className="space-y-1">
-              <p className="m-0 ml-2 text-[0.95rem]">
+              <span className="badge bg-base-300 badge-sm">
                 {depth > 1 ? `${additionalIndex}` : `tuple[${additionalIndex}]`}
-              </p>
+              </span>
               <div className="space-y-4">
                 {additionalInput.map((param, index) => {
                   const key = getFunctionInputKey(
@@ -123,11 +123,11 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject
             </div>
           ))}
           <div className="flex space-x-2">
-            <button className="btn btn-sm" onClick={addInput}>
+            <button className="btn btn-sm btn-secondary" onClick={addInput}>
               +
             </button>
             {additionalInputs.length > 0 && (
-              <button className="btn btn-sm" onClick={removeInput}>
+              <button className="btn btn-sm btn-secondary" onClick={removeInput}>
                 -
               </button>
             )}

diff --git a/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
@@ -100,14 +100,20 @@ export const WriteOnlyFunctionForm = ({
         </p>
         {inputs}
         {abiFunction.stateMutability === "payable" ? (
-          <IntegerInput
-            value={txValue}
-            onChange={updatedTxValue => {
-              setDisplayedTxResult(undefined);
-              setTxValue(updatedTxValue);
-            }}
-            placeholder="value (wei)"
-          />
+          <div className="flex flex-col gap-1.5 w-full">
+            <div className="flex items-center ml-2">
+              <span className="text-xs font-medium mr-2 leading-none">payable value</span>
+              <span className="block text-xs font-extralight leading-none">wei</span>
+            </div>
+            <IntegerInput
+              value={txValue}
+              onChange={updatedTxValue => {
+                setDisplayedTxResult(undefined);
+                setTxValue(updatedTxValue);
+              }}
+              placeholder="value (wei)"
+            />
+          </div>
         ) : null}
         <div className="flex justify-between gap-2">
           {!zeroInputs && (