Add uint256 decoder with display mode toggler
This commit is contained in:
parent
ab7ac37ca0
commit
a1da1d532b
|
@ -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} />
|
||||||
|
|
|
@ -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);
|
Loading…
Reference in New Issue