From ab7ac37ca07157aa196433d2e1239dcf93f18528 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 25 Sep 2021 17:28:49 -0300 Subject: [PATCH] Extract decoders --- src/transaction/decoder/AddressDecoder.tsx | 26 ++++ src/transaction/decoder/BooleanDecoder.tsx | 13 ++ src/transaction/decoder/BytesDecoder.tsx | 17 +++ src/transaction/decoder/DecodedParamRow.tsx | 141 +++++++++----------- 4 files changed, 116 insertions(+), 81 deletions(-) create mode 100644 src/transaction/decoder/AddressDecoder.tsx create mode 100644 src/transaction/decoder/BooleanDecoder.tsx create mode 100644 src/transaction/decoder/BytesDecoder.tsx diff --git a/src/transaction/decoder/AddressDecoder.tsx b/src/transaction/decoder/AddressDecoder.tsx new file mode 100644 index 0000000..ee6369a --- /dev/null +++ b/src/transaction/decoder/AddressDecoder.tsx @@ -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 = ({ r, txData }) => ( +
+ + + + +
+); + +export default React.memo(AddressDecoder); diff --git a/src/transaction/decoder/BooleanDecoder.tsx b/src/transaction/decoder/BooleanDecoder.tsx new file mode 100644 index 0000000..259f4a9 --- /dev/null +++ b/src/transaction/decoder/BooleanDecoder.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +type BooleanDecoderProps = { + r: any; +}; + +const BooleanDecoder: React.FC = ({ r }) => ( + + {r.toString()} + +); + +export default React.memo(BooleanDecoder); diff --git a/src/transaction/decoder/BytesDecoder.tsx b/src/transaction/decoder/BytesDecoder.tsx new file mode 100644 index 0000000..f7de95f --- /dev/null +++ b/src/transaction/decoder/BytesDecoder.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +type BytesDecoderProps = { + r: any; +}; + +const BytesDecoder: React.FC = ({ r }) => ( + + {r.toString()}{" "} + + {r.toString().length / 2 - 1}{" "} + {r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"} + + +); + +export default React.memo(BytesDecoder); diff --git a/src/transaction/decoder/DecodedParamRow.tsx b/src/transaction/decoder/DecodedParamRow.tsx index 79bc6d5..493f6b3 100644 --- a/src/transaction/decoder/DecodedParamRow.tsx +++ b/src/transaction/decoder/DecodedParamRow.tsx @@ -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 = ({ paramType, txData, arrayElem, -}) => { - return ( - <> - - - {prefix && {prefix}} - {arrayElem !== undefined ? ( - - {" "} - [{arrayElem}] - - ) : ( - <> - {paramType.name ?? param_{i}}{" "} - {i !== undefined && ( - ({i}) - )} - - )} - - {paramType.type} - - {paramType.baseType === "address" ? ( -
- - - - -
- ) : paramType.baseType === "bool" ? ( - - {r.toString()} - - ) : paramType.baseType === "bytes" ? ( - - {r.toString()}{" "} - - {r.toString().length / 2 - 1}{" "} - {r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"} - - - ) : paramType.baseType === "tuple" || - paramType.baseType === "array" ? ( - <> - ) : ( - r.toString() - )} - - - {paramType.baseType === "tuple" && - r.map((e: any, idx: number) => ( - - ))} - {paramType.baseType === "array" && - r.map((e: any, idx: number) => ( - param_{i}} - r={e} - paramType={paramType.arrayChildren} - txData={txData} - arrayElem={idx} - /> - ))} - - ); -}; +}) => ( + <> + + + {prefix && {prefix}} + {arrayElem !== undefined ? ( + + {" "} + [{arrayElem}] + + ) : ( + <> + {paramType.name ?? param_{i}}{" "} + {i !== undefined && ( + ({i}) + )} + + )} + + {paramType.type} + + {paramType.baseType === "address" ? ( + + ) : paramType.baseType === "bool" ? ( + + ) : paramType.baseType === "bytes" ? ( + + ) : paramType.baseType === "tuple" || paramType.baseType === "array" ? ( + <> + ) : ( + r.toString() + )} + + + {paramType.baseType === "tuple" && + r.map((e: any, idx: number) => ( + + ))} + {paramType.baseType === "array" && + r.map((e: any, idx: number) => ( + param_{i}} + r={e} + paramType={paramType.arrayChildren} + txData={txData} + arrayElem={idx} + /> + ))} + +); export default React.memo(DecodedParamRow);