Extract decoders
This commit is contained in:
parent
1b127b84a2
commit
ab7ac37ca0
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue