a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/transaction/decoder/AddressDecoder.tsx Normal file
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);

13
src/transaction/decoder/BooleanDecoder.tsx Normal file
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);

17
src/transaction/decoder/BytesDecoder.tsx Normal file
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);

141
src/transaction/decoder/DecodedParamRow.tsx
View File

@ -1,8 +1,8 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { ParamType } from "@ethersproject/abi"; import { ParamType } from "@ethersproject/abi";
import AddressHighlighter from "../../components/AddressHighlighter"; import AddressDecoder from "./AddressDecoder";
import DecoratedAddressLink from "../../components/DecoratedAddressLink"; import BooleanDecoder from "./BooleanDecoder";
import Copy from "../../components/Copy"; import BytesDecoder from "./BytesDecoder";
import { TransactionData } from "../../types"; import { TransactionData } from "../../types";
type DecodedParamRowProps = { type DecodedParamRowProps = {
@ -21,83 +21,62 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
paramType, paramType,
txData, txData,
arrayElem, arrayElem,
}) => { }) => (
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>} {arrayElem !== undefined ? (
{arrayElem !== undefined ? ( <span className="text-gray-400">
<span className="text-gray-400"> {" "}
{" "} [<span className="text-black">{arrayElem}</span>]
[<span className="text-black">{arrayElem}</span>] </span>
</span> ) : (
) : ( <>
<> {paramType.name ?? <span className="italic">param_{i}</span>}{" "}
{paramType.name ?? <span className="italic">param_{i}</span>}{" "} {i !== undefined && (
{i !== undefined && ( <span className="text-gray-400 text-xs">({i})</span>
<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> <td className="col-span-8 pr-1 font-code break-all">
<td className="col-span-8 pr-1 font-code break-all"> {paramType.baseType === "address" ? (
{paramType.baseType === "address" ? ( <AddressDecoder r={r} txData={txData} />
<div className="flex items-baseline space-x-2 -ml-1 mr-3"> ) : paramType.baseType === "bool" ? (
<AddressHighlighter address={r.toString()}> <BooleanDecoder r={r} />
<DecoratedAddressLink ) : paramType.baseType === "bytes" ? (
address={r.toString()} <BytesDecoder r={r} />
miner={r.toString() === txData.confirmedData?.miner} ) : paramType.baseType === "tuple" || paramType.baseType === "array" ? (
txFrom={r.toString() === txData.from} <></>
txTo={r.toString() === txData.to} ) : (
/> r.toString()
</AddressHighlighter> )}
<Copy value={r.toString()} /> </td>
</div> </tr>
) : paramType.baseType === "bool" ? ( {paramType.baseType === "tuple" &&
<span className={`${r ? "text-green-700" : "text-red-700"}`}> r.map((e: any, idx: number) => (
{r.toString()} <DecodedParamRow
</span> key={idx}
) : paramType.baseType === "bytes" ? ( prefix={paramType.name + "."}
<span> r={e}
{r.toString()}{" "} paramType={paramType.components[idx]}
<span className="font-sans text-xs text-gray-400"> txData={txData}
{r.toString().length / 2 - 1}{" "} />
{r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"} ))}
</span> {paramType.baseType === "array" &&
</span> r.map((e: any, idx: number) => (
) : paramType.baseType === "tuple" || <DecodedParamRow
paramType.baseType === "array" ? ( key={idx}
<></> prefix={paramType.name ?? <span className="italic">param_{i}</span>}
) : ( r={e}
r.toString() paramType={paramType.arrayChildren}
)} txData={txData}
</td> arrayElem={idx}
</tr> />
{paramType.baseType === "tuple" && ))}
r.map((e: any, idx: number) => ( </>
<DecodedParamRow );
key={idx}
prefix={paramType.name + "."}
r={e}
paramType={paramType.components[idx]}
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}
/>
))}
</>
);
};
export default React.memo(DecodedParamRow); export default React.memo(DecodedParamRow);