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-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="ml-5 flex items-baseline border rounded px-1 py-px">
<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,19 +52,13 @@ const TraceItem: React.FC<TraceItemProps> = ({
{"{"}value: <FormattedBalance value={t.value} /> ETH{"}"} {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
</span> </span>
)} )}
<span>(</span>
{t.input.length > 10 && (
<span className="whitespace-nowrap"> <span className="whitespace-nowrap">
input=[0x{t.input.slice(10)}] ({t.input.length > 10 && <>input=[0x{t.input.slice(10)}]</>})
</span> </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>
<div className="space-y-3">
{t.children.map((tc, i, a) => ( {t.children.map((tc, i, a) => (
<TraceItem <TraceItem
key={i} key={i}
@ -77,7 +69,6 @@ const TraceItem: React.FC<TraceItemProps> = ({
/> />
))} ))}
</div> </div>
</div>
)} )}
</> </>
); );