Extract decoders

This commit is contained in:
Willian Mitsuda 2021-09-25 17:28:49 -03:00
parent 1b127b84a2
commit ab7ac37ca0
4 changed files with 116 additions and 81 deletions

View File

@ -0,0 +1,26 @@
import React from "react";
import AddressHighlighter from "../../components/AddressHighlighter";
import DecoratedAddressLink from "../../components/DecoratedAddressLink";
import Copy from "../../components/Copy";
import { TransactionData } from "../../types";
type AddressDecoderProps = {
r: any;
txData: TransactionData;
};
const AddressDecoder: React.FC<AddressDecoderProps> = ({ r, txData }) => (
<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>
);
export default React.memo(AddressDecoder);

View File

@ -0,0 +1,13 @@
import React from "react";
type BooleanDecoderProps = {
r: any;
};
const BooleanDecoder: React.FC<BooleanDecoderProps> = ({ r }) => (
<span className={`${r ? "text-green-700" : "text-red-700"}`}>
{r.toString()}
</span>
);
export default React.memo(BooleanDecoder);

View File

@ -0,0 +1,17 @@
import React from "react";
type BytesDecoderProps = {
r: any;
};
const BytesDecoder: React.FC<BytesDecoderProps> = ({ r }) => (
<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>
);
export default React.memo(BytesDecoder);

View File

@ -1,8 +1,8 @@
import React, { ReactNode } from "react";
import { ParamType } from "@ethersproject/abi";
import AddressHighlighter from "../../components/AddressHighlighter";
import DecoratedAddressLink from "../../components/DecoratedAddressLink";
import Copy from "../../components/Copy";
import AddressDecoder from "./AddressDecoder";
import BooleanDecoder from "./BooleanDecoder";
import BytesDecoder from "./BytesDecoder";
import { TransactionData } from "../../types";
type DecodedParamRowProps = {
@ -21,8 +21,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
paramType,
txData,
arrayElem,
}) => {
return (
}) => (
<>
<tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100">
<td className="col-span-3 pl-1">
@ -44,31 +43,12 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
<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>
<AddressDecoder r={r} txData={txData} />
) : paramType.baseType === "bool" ? (
<span className={`${r ? "text-green-700" : "text-red-700"}`}>
{r.toString()}
</span>
<BooleanDecoder r={r} />
) : 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" ||
paramType.baseType === "array" ? (
<BytesDecoder r={r} />
) : paramType.baseType === "tuple" || paramType.baseType === "array" ? (
<></>
) : (
r.toString()
@ -98,6 +78,5 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
))}
</>
);
};
export default React.memo(DecodedParamRow);