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 { LogDescription } from "@ethersproject/abi";
import { Tab } from "@headlessui/react";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import ModeTab from "../components/ModeTab";
import DecodedLog from "./DecodedLog";
import DecodedLogSignature from "./DecodedLogSignature";
import { TransactionData } from "../types";
@ -31,43 +33,60 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
/>
</div>
</div>
{logDesc && (
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Signature</div>
<div className="flex space-x-2 items-center col-span-11 font-mono">
<DecodedLogSignature event={logDesc.eventFragment} />
<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>
</div>
)}
{logDesc && (
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Name</div>
<div className="flex space-x-2 items-center col-span-11">
<DecodedLog logDesc={logDesc} />
</div>
</div>
)}
{log.topics.map((t, 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="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">
{i}
</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.List>
<Tab.Panels as={Fragment}>
<Tab.Panel className="space-y-2">
{logDesc && (
<>
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Signature</div>
<div className="flex space-x-2 items-center col-span-11 font-mono">
<DecodedLogSignature event={logDesc.eventFragment} />
</div>
</div>
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Name</div>
<div className="flex space-x-2 items-center col-span-11">
<DecodedLog logDesc={logDesc} />
</div>
</div>
</>
)}
</Tab.Panel>
<Tab.Panel className="space-y-2">
{log.topics.map((t, 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="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">
{i}
</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>
);