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

Split log display modes

This commit is contained in:
Willian Mitsuda 2021-09-18 15:25:30 -03:00
parent b5c69a2d3f
commit 450f2e72f3
1 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/transaction/LogEntry.tsx
View File

@ -1,7 +1,9 @@
import React from "react"; import React, { Fragment } from "react";
import { Log } from "@ethersproject/abstract-provider"; import { Log } from "@ethersproject/abstract-provider";
import { LogDescription } from "@ethersproject/abi"; import { LogDescription } from "@ethersproject/abi";
import { Tab } from "@headlessui/react";
import DecoratedAddressLink from "../components/DecoratedAddressLink"; import DecoratedAddressLink from "../components/DecoratedAddressLink";
import ModeTab from "../components/ModeTab";
import DecodedLog from "./DecodedLog"; import DecodedLog from "./DecodedLog";
import DecodedLogSignature from "./DecodedLogSignature"; import DecodedLogSignature from "./DecodedLogSignature";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
@ -31,43 +33,60 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
/> />
</div> </div>
</div> </div>
{logDesc && ( <Tab.Group>
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"> <Tab.List className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Signature</div> <div className="col-start-2 col-span-11 flex space-x-1 mb-1">
<div className="flex space-x-2 items-center col-span-11 font-mono"> <ModeTab>Decoded</ModeTab>
<DecodedLogSignature event={logDesc.eventFragment} /> <ModeTab>Raw</ModeTab>
</div> </div>
</div> </Tab.List>
)} <Tab.Panels as={Fragment}>
{logDesc && ( <Tab.Panel className="space-y-2">
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"> {logDesc && (
<div className="text-right">Name</div> <>
<div className="flex space-x-2 items-center col-span-11"> <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<DecodedLog logDesc={logDesc} /> <div className="text-right">Signature</div>
</div> <div className="flex space-x-2 items-center col-span-11 font-mono">
</div> <DecodedLogSignature event={logDesc.eventFragment} />
)} </div>
{log.topics.map((t, i) => ( </div>
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm" key={i}> <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">{i === 0 && "Topics"}</div> <div className="text-right">Name</div>
<div className="flex space-x-2 items-center col-span-11 font-mono"> <div className="flex space-x-2 items-center col-span-11">
<span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs"> <DecodedLog logDesc={logDesc} />
{i} </div>
</span> </div>
<span>{t}</span> </>
</div> )}
</div> </Tab.Panel>
))} <Tab.Panel className="space-y-2">
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"> {log.topics.map((t, i) => (
<div className="text-right pt-2">Data</div> <div
<div className="col-span-11"> className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
<textarea key={i}
className="w-full h-40 bg-gray-50 font-mono focus:outline-none border rounded p-2" >
value={log.data} <div className="text-right">{i === 0 && "Topics"}</div>
readOnly <div className="flex space-x-2 items-center col-span-11 font-mono">
/> <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
</div> {i}
</div> </span>
<span>{t}</span>
</div>
</div>
))}
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right pt-2">Data</div>
<div className="col-span-11">
<textarea
className="w-full h-40 bg-gray-50 font-mono focus:outline-none border rounded p-2"
value={log.data}
readOnly
/>
</div>
</div>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div> </div>
</div> </div>
); );