Add tuple support

This commit is contained in:
Willian Mitsuda 2021-09-18 18:35:37 -03:00
parent f2d6bc54a9
commit d007f10e7a
1 changed files with 53 additions and 37 deletions

View File

@ -6,6 +6,7 @@ import { ParamType } from "@ethersproject/abi";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
type DecodedParamRowProps = { type DecodedParamRowProps = {
prefix?: string;
i?: number | undefined; i?: number | undefined;
r: any; r: any;
paramType: ParamType; paramType: ParamType;
@ -13,50 +14,65 @@ type DecodedParamRowProps = {
}; };
const DecodedParamRow: React.FC<DecodedParamRowProps> = ({ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
prefix,
i, i,
r, r,
paramType, paramType,
txData, txData,
}) => { }) => {
return ( return (
<tr className="grid grid-cols-12 gap-x-2 py-2"> <>
<td className="col-span-3 pl-1"> <tr className="grid grid-cols-12 gap-x-2 py-2">
{paramType.name}{" "} <td className="col-span-3 pl-1">
{i !== undefined && ( {prefix && <span className="text-gray-300">{prefix}</span>}
<span className="text-gray-400 text-xs">({i})</span> {paramType.name}{" "}
)} {i !== undefined && (
</td> <span className="text-gray-400 text-xs">({i})</span>
<td className="col-span-1">{paramType.type}</td> )}
<td className="col-span-8 pr-1 font-code break-all"> </td>
{paramType.type === "address" ? ( <td className="col-span-1 text-gray-500">{paramType.type}</td>
<div className="flex items-baseline space-x-2 -ml-1 mr-3"> <td className="col-span-8 pr-1 font-code break-all">
<AddressHighlighter address={r.toString()}> {paramType.baseType === "address" ? (
<DecoratedAddressLink <div className="flex items-baseline space-x-2 -ml-1 mr-3">
address={r.toString()} <AddressHighlighter address={r.toString()}>
miner={r.toString() === txData.confirmedData?.miner} <DecoratedAddressLink
txFrom={r.toString() === txData.from} address={r.toString()}
txTo={r.toString() === txData.to} miner={r.toString() === txData.confirmedData?.miner}
/> txFrom={r.toString() === txData.from}
</AddressHighlighter> txTo={r.toString() === txData.to}
<Copy value={r.toString()} /> />
</div> </AddressHighlighter>
) : paramType.type === "bool" ? ( <Copy value={r.toString()} />
<span className={`${r ? "text-green-700" : "text-red-700"}`}> </div>
{r.toString()} ) : paramType.baseType === "bool" ? (
</span> <span className={`${r ? "text-green-700" : "text-red-700"}`}>
) : paramType.type === "bytes" ? ( {r.toString()}
<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>
</span> ) : paramType.baseType === "bytes" ? (
) : ( <span>
r.toString() {r.toString()}{" "}
)} <span className="font-sans text-xs text-gray-400">
</td> {r.toString().length / 2 - 1}{" "}
</tr> {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}
/>
))}
</>
); );
}; };