Refactor and extract common component

This commit is contained in:
Willian Mitsuda 2021-09-18 17:41:00 -03:00
parent 1ac2679fad
commit f662a8c72e
4 changed files with 26 additions and 70 deletions

View File

@ -1,57 +0,0 @@
import React from "react";
import { TransactionDescription } from "@ethersproject/abi";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy";
import { TransactionData } from "../types";
type DecodedInputProps = {
txData: TransactionData;
txDesc: TransactionDescription;
};
const DecodedInput: React.FC<DecodedInputProps> = ({ txData, txDesc }) => (
<table className="border rounded w-full">
<thead>
<tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-gray-100">
<th className="col-span-3 pl-1">
param <span className="text-gray-400 text-xs">(index)</span>
</th>
<th className="col-span-1">type</th>
<th className="col-span-8 pr-1">value</th>
</tr>
</thead>
<tbody className="divide-y">
{txDesc.args.map((r, i) => (
<tr key={i} className="grid grid-cols-12 gap-x-2 py-2">
<td className="col-span-3 pl-1">
{txDesc.functionFragment.inputs[i].name}{" "}
<span className="text-gray-400 text-xs">({i})</span>
</td>
<td className="col-span-1">
{txDesc.functionFragment.inputs[i].type}
</td>
<td className="col-span-8 pr-1 font-code break-all">
{txDesc.functionFragment.inputs[i].type === "address" ? (
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={r.toString()}>
<DecoratedAddressLink
address={r.toString()}
miner={r.toString() === txData.confirmedData?.miner}
txFrom={r.toString() === txData.from}
txTo={r.toString() === txData.to}
/>
</AddressHighlighter>
<Copy value={r.toString()} />
</div>
) : (
r.toString()
)}
</td>
</tr>
))}
</tbody>
</table>
);
export default React.memo(DecodedInput);

View File

@ -1,16 +1,21 @@
import React from "react"; import React from "react";
import { LogDescription } from "@ethersproject/abi"; import { LogDescription, ParamType, Result } from "@ethersproject/abi";
import AddressHighlighter from "../components/AddressHighlighter"; import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink"; import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy"; import Copy from "../components/Copy";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
type DecodedLogProps = { type DecodedParamsTableProps = {
args: Result;
paramTypes: ParamType[];
txData: TransactionData; txData: TransactionData;
logDesc: LogDescription;
}; };
const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => ( const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
args,
paramTypes,
txData,
}) => (
<table className="border rounded w-full"> <table className="border rounded w-full">
<thead> <thead>
<tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-gray-100"> <tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-gray-100">
@ -22,15 +27,15 @@ const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
</tr> </tr>
</thead> </thead>
<tbody className="divide-y"> <tbody className="divide-y">
{logDesc.args.map((r, i) => ( {args.map((r, i) => (
<tr key={i} className="grid grid-cols-12 gap-x-2 py-2"> <tr key={i} className="grid grid-cols-12 gap-x-2 py-2">
<td className="col-span-3 pl-1"> <td className="col-span-3 pl-1">
{logDesc.eventFragment.inputs[i].name}{" "} {paramTypes[i].name}{" "}
<span className="text-gray-400 text-xs">({i})</span> <span className="text-gray-400 text-xs">({i})</span>
</td> </td>
<td className="col-span-1">{logDesc.eventFragment.inputs[i].type}</td> <td className="col-span-1">{paramTypes[i].type}</td>
<td className="col-span-8 pr-1 font-code break-all"> <td className="col-span-8 pr-1 font-code break-all">
{logDesc.eventFragment.inputs[i].type === "address" ? ( {paramTypes[i].type === "address" ? (
<div className="flex items-baseline space-x-2 -ml-1 mr-3"> <div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={r.toString()}> <AddressHighlighter address={r.toString()}>
<DecoratedAddressLink <DecoratedAddressLink
@ -52,4 +57,4 @@ const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
</table> </table>
); );
export default React.memo(DecodedLog); export default React.memo(DecodedParamsTable);

View File

@ -31,7 +31,7 @@ import ExternalLink from "../components/ExternalLink";
import RelativePosition from "../components/RelativePosition"; import RelativePosition from "../components/RelativePosition";
import PercentagePosition from "../components/PercentagePosition"; import PercentagePosition from "../components/PercentagePosition";
import ModeTab from "../components/ModeTab"; import ModeTab from "../components/ModeTab";
import DecodedInput from "./DecodedInput"; import DecodedParamsTable from "./DecodedParamsTable";
type DetailsProps = { type DetailsProps = {
txData: TransactionData; txData: TransactionData;
@ -327,7 +327,11 @@ const Details: React.FC<DetailsProps> = ({
) : txDesc === null ? ( ) : txDesc === null ? (
<>No decoded data</> <>No decoded data</>
) : ( ) : (
<DecodedInput txData={txData} txDesc={txDesc} /> <DecodedParamsTable
args={txDesc.args}
paramTypes={txDesc.functionFragment.inputs}
txData={txData}
/>
)} )}
</Tab.Panel> </Tab.Panel>
<Tab.Panel> <Tab.Panel>

View File

@ -4,7 +4,7 @@ import { LogDescription } from "@ethersproject/abi";
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
import DecoratedAddressLink from "../components/DecoratedAddressLink"; import DecoratedAddressLink from "../components/DecoratedAddressLink";
import ModeTab from "../components/ModeTab"; import ModeTab from "../components/ModeTab";
import DecodedLog from "./DecodedLog"; import DecodedParamsTable from "./DecodedParamsTable";
import DecodedLogSignature from "./DecodedLogSignature"; import DecodedLogSignature from "./DecodedLogSignature";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
@ -53,7 +53,11 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, 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 txData={txData} logDesc={logDesc} /> <DecodedParamsTable
args={logDesc.args}
paramTypes={logDesc.eventFragment.inputs}
txData={txData}
/>
</div> </div>
</div> </div>
</> </>