Split log display modes
This commit is contained in:
parent
b5c69a2d3f
commit
450f2e72f3
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue