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

Better display of array tx input parameters

This commit is contained in:
Willian Mitsuda 2021-09-25 15:11:57 -03:00
parent e4fa639e69
commit f612e4791a
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/transaction/DecodedParamRow.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { ReactNode } from "react";
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";
@ -6,11 +6,12 @@ import { ParamType } from "@ethersproject/abi";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
type DecodedParamRowProps = { type DecodedParamRowProps = {
prefix?: string; prefix?: ReactNode;
i?: number | undefined; i?: number | undefined;
r: any; r: any;
paramType: ParamType; paramType: ParamType;
txData: TransactionData; txData: TransactionData;
arrayElem?: number | undefined;
}; };
const DecodedParamRow: React.FC<DecodedParamRowProps> = ({ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
@ -19,16 +20,25 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
r, r,
paramType, paramType,
txData, txData,
arrayElem,
}) => { }) => {
return ( return (
<> <>
<tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100"> <tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100">
<td className="col-span-3 pl-1"> <td className="col-span-3 pl-1">
{prefix && <span className="text-gray-300">{prefix}</span>} {prefix && <span className="text-gray-300">{prefix}</span>}
{arrayElem !== undefined ? (
<span className="text-gray-400">{" "}
[<span className="text-black">{arrayElem}</span>]
</span>
) : (
<>
{paramType.name ?? <span className="italic">param_{i}</span>}{" "} {paramType.name ?? <span className="italic">param_{i}</span>}{" "}
{i !== undefined && ( {i !== undefined && (
<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 text-gray-500">{paramType.type}</td> <td className="col-span-1 text-gray-500">{paramType.type}</td>
<td className="col-span-8 pr-1 font-code break-all"> <td className="col-span-8 pr-1 font-code break-all">
@ -56,7 +66,8 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
{r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"} {r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"}
</span> </span>
</span> </span>
) : paramType.baseType === "tuple" ? ( ) : paramType.baseType === "tuple" ||
paramType.baseType === "array" ? (
<></> <></>
) : ( ) : (
r.toString() r.toString()
@ -73,6 +84,17 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
txData={txData} txData={txData}
/> />
))} ))}
{paramType.baseType === "array" &&
r.map((e: any, idx: number) => (
<DecodedParamRow
key={idx}
prefix={paramType.name ?? <span className="italic">param_{i}</span>}
r={e}
paramType={paramType.arrayChildren}
txData={txData}
arrayElem={idx}
/>
))}
</> </>
); );
}; };