Reduce the number of nested divs

This commit is contained in:
Willian Mitsuda 2021-10-29 22:31:16 -03:00
parent a3626136a6
commit 4da76ae836
1 changed files with 19 additions and 28 deletions

View File

@ -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>
<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-full h-full transform translate-y-1/2"></div>
<div className="absolute left-0 border-l w-5 h-full transform translate-y-1/2"></div>
)}
</div>
<div className="flex items-baseline border rounded px-1 py-px">
<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,19 +52,13 @@ 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)}]
({t.input.length > 10 && <>input=[0x{t.input.slice(10)}]</>})
</span>
)}
<span>)</span>
</div>
</div>
{t.children && (
<div className="flex">
<div className={`w-10 ${last ? "" : "border-l"}`}></div>
<div className="space-y-3">
<div className={`pl-10 ${last ? "" : "border-l"} space-y-3`}>
{t.children.map((tc, i, a) => (
<TraceItem
key={i}
@ -77,7 +69,6 @@ const TraceItem: React.FC<TraceItemProps> = ({
/>
))}
</div>
</div>
)}
</>
);