From 4da76ae836328b0fceac10e66c5ee5d8b632ee24 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 29 Oct 2021 22:31:16 -0300
Subject: [PATCH] Reduce the number of nested divs

---
 src/transaction/TraceItem.tsx | 47 ++++++++++++++---------------------
 1 file changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/transaction/TraceItem.tsx b/src/transaction/TraceItem.tsx
index 3e72fed..6bf11dd 100644
--- a/src/transaction/TraceItem.tsx
+++ b/src/transaction/TraceItem.tsx
@@ -28,14 +28,12 @@ const TraceItem: React.FC<TraceItemProps> = ({
 
   return (
     <>
-      <div className="flex">
-        <div className="relative w-5">
-          <div className="absolute border-l border-b w-full h-full transform -translate-y-1/2"></div>
-          {!last && (
-            <div className="absolute left-0 border-l w-full h-full transform translate-y-1/2"></div>
-          )}
-        </div>
-        <div className="flex items-baseline border rounded px-1 py-px">
+      <div className="flex relative">
+        <div className="absolute border-l border-b w-5 h-full transform -translate-y-1/2"></div>
+        {!last && (
+          <div className="absolute left-0 border-l w-5 h-full transform translate-y-1/2"></div>
+        )}
+        <div className="ml-5 flex items-baseline border rounded px-1 py-px">
           <span className="text-xs text-gray-400 lowercase">{t.type}</span>
           <span>
             <AddressHighlighter address={t.to}>
@@ -54,29 +52,22 @@ const TraceItem: React.FC<TraceItemProps> = ({
               {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
             </span>
           )}
-          <span>(</span>
-          {t.input.length > 10 && (
-            <span className="whitespace-nowrap">
-              input=[0x{t.input.slice(10)}]
-            </span>
-          )}
-          <span>)</span>
+          <span className="whitespace-nowrap">
+            ({t.input.length > 10 && <>input=[0x{t.input.slice(10)}]</>})
+          </span>
         </div>
       </div>
       {t.children && (
-        <div className="flex">
-          <div className={`w-10 ${last ? "" : "border-l"}`}></div>
-          <div className="space-y-3">
-            {t.children.map((tc, i, a) => (
-              <TraceItem
-                key={i}
-                t={tc}
-                txData={txData}
-                last={i === a.length - 1}
-                fourBytesMap={fourBytesMap}
-              />
-            ))}
-          </div>
+        <div className={`pl-10 ${last ? "" : "border-l"} space-y-3`}>
+          {t.children.map((tc, i, a) => (
+            <TraceItem
+              key={i}
+              t={tc}
+              txData={txData}
+              last={i === a.length - 1}
+              fourBytesMap={fourBytesMap}
+            />
+          ))}
         </div>
       )}
     </>