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