Add tuple support
This commit is contained in:
parent
f2d6bc54a9
commit
d007f10e7a
|
@ -6,6 +6,7 @@ import { ParamType } from "@ethersproject/abi";
|
|||
import { TransactionData } from "../types";
|
||||
|
||||
type DecodedParamRowProps = {
|
||||
prefix?: string;
|
||||
i?: number | undefined;
|
||||
r: any;
|
||||
paramType: ParamType;
|
||||
|
@ -13,50 +14,65 @@ type DecodedParamRowProps = {
|
|||
};
|
||||
|
||||
const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
|
||||
prefix,
|
||||
i,
|
||||
r,
|
||||
paramType,
|
||||
txData,
|
||||
}) => {
|
||||
return (
|
||||
<tr className="grid grid-cols-12 gap-x-2 py-2">
|
||||
<td className="col-span-3 pl-1">
|
||||
{paramType.name}{" "}
|
||||
{i !== undefined && (
|
||||
<span className="text-gray-400 text-xs">({i})</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="col-span-1">{paramType.type}</td>
|
||||
<td className="col-span-8 pr-1 font-code break-all">
|
||||
{paramType.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>
|
||||
) : paramType.type === "bool" ? (
|
||||
<span className={`${r ? "text-green-700" : "text-red-700"}`}>
|
||||
{r.toString()}
|
||||
</span>
|
||||
) : paramType.type === "bytes" ? (
|
||||
<span>
|
||||
{r.toString()}{" "}
|
||||
<span className="font-sans text-xs text-gray-400">
|
||||
{r.toString().length / 2 - 1}{" "}
|
||||
{r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"}
|
||||
<>
|
||||
<tr className="grid grid-cols-12 gap-x-2 py-2">
|
||||
<td className="col-span-3 pl-1">
|
||||
{prefix && <span className="text-gray-300">{prefix}</span>}
|
||||
{paramType.name}{" "}
|
||||
{i !== undefined && (
|
||||
<span className="text-gray-400 text-xs">({i})</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="col-span-1 text-gray-500">{paramType.type}</td>
|
||||
<td className="col-span-8 pr-1 font-code break-all">
|
||||
{paramType.baseType === "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>
|
||||
) : paramType.baseType === "bool" ? (
|
||||
<span className={`${r ? "text-green-700" : "text-red-700"}`}>
|
||||
{r.toString()}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
r.toString()
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
) : paramType.baseType === "bytes" ? (
|
||||
<span>
|
||||
{r.toString()}{" "}
|
||||
<span className="font-sans text-xs text-gray-400">
|
||||
{r.toString().length / 2 - 1}{" "}
|
||||
{r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"}
|
||||
</span>
|
||||
</span>
|
||||
) : paramType.baseType === "tuple" ? (
|
||||
<></>
|
||||
) : (
|
||||
r.toString()
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
{paramType.baseType === "tuple" &&
|
||||
r.map((e: any, idx: number) => (
|
||||
<DecodedParamRow
|
||||
prefix={paramType.name + "."}
|
||||
r={e}
|
||||
paramType={paramType.components[idx]}
|
||||
txData={txData}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue