59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
|
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);
|