diff --git a/src/transaction/decoder/DecodedParamRow.tsx b/src/transaction/decoder/DecodedParamRow.tsx index 493f6b3..f0f0013 100644 --- a/src/transaction/decoder/DecodedParamRow.tsx +++ b/src/transaction/decoder/DecodedParamRow.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { ParamType } from "@ethersproject/abi"; +import Uint256Decoder from "./Uint256Decoder"; import AddressDecoder from "./AddressDecoder"; import BooleanDecoder from "./BooleanDecoder"; import BytesDecoder from "./BytesDecoder"; @@ -42,7 +43,9 @@ const DecodedParamRow: React.FC = ({ {paramType.type} - {paramType.baseType === "address" ? ( + {paramType.baseType === "uint256" ? ( + + ) : paramType.baseType === "address" ? ( ) : paramType.baseType === "bool" ? ( diff --git a/src/transaction/decoder/Uint256Decoder.tsx b/src/transaction/decoder/Uint256Decoder.tsx new file mode 100644 index 0000000..65b50c1 --- /dev/null +++ b/src/transaction/decoder/Uint256Decoder.tsx @@ -0,0 +1,58 @@ +import React, { useState } from "react"; +import { hexlify } from "@ethersproject/bytes"; +import { commify, formatEther } from "@ethersproject/units"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faSync } from "@fortawesome/free-solid-svg-icons/faSync"; + +type Uint256DecoderProps = { + r: any; +}; + +enum DisplayMode { + RAW, + HEX, + EIGHTEEN_DECIMALS, +} + +const Uint256Decoder: React.FC = ({ r }) => { + const [displayMode, setDisplayMode] = useState( + DisplayMode.EIGHTEEN_DECIMALS + ); + + const toggleModes = () => { + setDisplayMode( + displayMode === DisplayMode.EIGHTEEN_DECIMALS ? 0 : displayMode + 1 + ); + }; + + return ( +
+ + + {displayMode === DisplayMode.RAW ? ( + <>{commify(r.toString())} + ) : displayMode === DisplayMode.HEX ? ( + <>{hexlify(r)} + ) : ( + <>{commify(formatEther(r))} + )} + +
+ ); +}; + +export default React.memo(Uint256Decoder);