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

27
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,24 +33,38 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
/> />
</div> </div>
</div> </div>
<Tab.Group>
<Tab.List className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="col-start-2 col-span-11 flex space-x-1 mb-1">
<ModeTab>Decoded</ModeTab>
<ModeTab>Raw</ModeTab>
</div>
</Tab.List>
<Tab.Panels as={Fragment}>
<Tab.Panel className="space-y-2">
{logDesc && ( {logDesc && (
<>
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"> <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Signature</div> <div className="text-right">Signature</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 font-mono">
<DecodedLogSignature event={logDesc.eventFragment} /> <DecodedLogSignature event={logDesc.eventFragment} />
</div> </div>
</div> </div>
)}
{logDesc && (
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"> <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Name</div> <div className="text-right">Name</div>
<div className="flex space-x-2 items-center col-span-11"> <div className="flex space-x-2 items-center col-span-11">
<DecodedLog logDesc={logDesc} /> <DecodedLog logDesc={logDesc} />
</div> </div>
</div> </div>
</>
)} )}
</Tab.Panel>
<Tab.Panel className="space-y-2">
{log.topics.map((t, i) => ( {log.topics.map((t, i) => (
<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"
key={i}
>
<div className="text-right">{i === 0 && "Topics"}</div> <div className="text-right">{i === 0 && "Topics"}</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 font-mono">
<span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs"> <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
@ -68,6 +84,9 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
/> />
</div> </div>
</div> </div>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div> </div>
</div> </div>
); );