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

Extract decoders

Browse Source
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 { 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,83 +21,62 @@ 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">
{prefix && <span className="text-gray-300">{prefix}</span>}
{arrayElem !== undefined ? (
<span className="text-gray-400">
{" "}
[<span className="text-black">{arrayElem}</span>]
</span>
) : (
<>
{paramType.name ?? <span className="italic">param_{i}</span>}{" "}
{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>
) : 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" ? (
<></>
) : (
r.toString()
)}
</td>
</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}
/>
))}
</>
);
};
}) => (
<>
<tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100">
<td className="col-span-3 pl-1">
{prefix && <span className="text-gray-300">{prefix}</span>}
{arrayElem !== undefined ? (
<span className="text-gray-400">
{" "}
[<span className="text-black">{arrayElem}</span>]
</span>
) : (
<>
{paramType.name ?? <span className="italic">param_{i}</span>}{" "}
{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" ? (
<AddressDecoder r={r} txData={txData} />
) : paramType.baseType === "bool" ? (
<BooleanDecoder r={r} />
) : paramType.baseType === "bytes" ? (
<BytesDecoder r={r} />
) : paramType.baseType === "tuple" || paramType.baseType === "array" ? (
<></>
) : (
r.toString()
)}
</td>
</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);