Add uint256 decoder with display mode toggler

This commit is contained in:
Willian Mitsuda 2021-09-25 18:40:00 -03:00
parent ab7ac37ca0
commit a1da1d532b
2 changed files with 62 additions and 1 deletions

View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { ParamType } from "@ethersproject/abi"; import { ParamType } from "@ethersproject/abi";
import Uint256Decoder from "./Uint256Decoder";
import AddressDecoder from "./AddressDecoder"; import AddressDecoder from "./AddressDecoder";
import BooleanDecoder from "./BooleanDecoder"; import BooleanDecoder from "./BooleanDecoder";
import BytesDecoder from "./BytesDecoder"; import BytesDecoder from "./BytesDecoder";
@ -42,7 +43,9 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
</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 === "uint256" ? (
<Uint256Decoder r={r} />
) : paramType.baseType === "address" ? (
<AddressDecoder r={r} txData={txData} /> <AddressDecoder r={r} txData={txData} />
) : paramType.baseType === "bool" ? ( ) : paramType.baseType === "bool" ? (
<BooleanDecoder r={r} /> <BooleanDecoder r={r} />

View File

@ -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<Uint256DecoderProps> = ({ r }) => {
const [displayMode, setDisplayMode] = useState<DisplayMode>(
DisplayMode.EIGHTEEN_DECIMALS
);
const toggleModes = () => {
setDisplayMode(
displayMode === DisplayMode.EIGHTEEN_DECIMALS ? 0 : displayMode + 1
);
};
return (
<div className="flex items-baseline space-x-2">
<button
className="flex items-baseline space-x-2 rounded-lg bg-gray-50 text-gray-300 hover:text-gray-500 font-sans text-xs px-3 py-1 min-w-max"
onClick={toggleModes}
>
<div>
<FontAwesomeIcon icon={faSync} size="1x" />
</div>
<span>
{displayMode === DisplayMode.RAW
? "Raw number"
: displayMode === DisplayMode.HEX
? "Hex number"
: "18 decimals"}
</span>
</button>
<span>
{displayMode === DisplayMode.RAW ? (
<>{commify(r.toString())}</>
) : displayMode === DisplayMode.HEX ? (
<>{hexlify(r)}</>
) : (
<>{commify(formatEther(r))}</>
)}
</span>
</div>
);
};
export default React.memo(Uint256Decoder);