a/otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reduce the number of nested divs

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/transaction/TraceItem.tsx
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>
{!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>
)}
</>