Better display of array tx input parameters
This commit is contained in:
parent
e4fa639e69
commit
f612e4791a
|
@ -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,15 +20,24 @@ 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>}
|
||||||
{paramType.name ?? <span className="italic">param_{i}</span>}{" "}
|
{arrayElem !== undefined ? (
|
||||||
{i !== undefined && (
|
<span className="text-gray-400">{" "}
|
||||||
<span className="text-gray-400 text-xs">({i})</span>
|
[<span className="text-black">{arrayElem}</span>]
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{paramType.name ?? <span className="italic">param_{i}</span>}{" "}
|
||||||
|
{i !== undefined && (
|
||||||
|
<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>
|
||||||
|
@ -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}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue