diff --git a/frontend/src/components/elevator/car.tsx b/frontend/src/components/elevator/car.tsx index bfa98a0..576d702 100644 --- a/frontend/src/components/elevator/car.tsx +++ b/frontend/src/components/elevator/car.tsx @@ -18,7 +18,6 @@ import { ChainTheme, chainThemeAtom } from "../../states/atoms"; import ElevatorCapacity from "./capacity"; import { JSX } from "preact/jsx-runtime"; import { bodyToScreenPosition, createTooltipContent } from "../../util/scene"; -import { toShortHex } from "../../util/type"; export interface ElevatorCarProp { transactions: Transaction[]; diff --git a/frontend/src/components/elevator/miner.tsx b/frontend/src/components/elevator/miner.tsx index 5a3c26e..5e78d57 100644 --- a/frontend/src/components/elevator/miner.tsx +++ b/frontend/src/components/elevator/miner.tsx @@ -4,6 +4,7 @@ import { ChainTheme, chainThemeAtom } from "../../states/atoms"; import { Hex } from "@ckb-ccc/core"; import { useMemo } from "preact/hooks"; import { getApeRunningGif, getRunningSpeedClass } from "./util"; +import Tooltip from "../tooltip"; export interface ElevatorUpButtonProps { difficultyInEH: number; @@ -72,40 +73,49 @@ const ElevatorMiner: FunctionComponent = ({
-
- Miner Ape - Miner Wheel - - {/* 气泡元素 */} - {doorClosing && ( -
- Found a new nonce {nonce} -
- )} -
- -
-
-
+
+ - Difficulty {difficultyInEH} EH + src={ + doorClosing ? minerJumpSvg : minerApeRunning + } + alt="Miner Ape" + /> + + Miner Wheel + + {/* 气泡元素 */} + {doorClosing && ( +
+ Found a new nonce {nonce} +
+ )} +
+ + + +
+
+
+ Difficulty {difficultyInEH} EH +
+ Miner Base
- Miner Base -
+
diff --git a/frontend/src/components/tooltip.tsx b/frontend/src/components/tooltip.tsx new file mode 100644 index 0000000..7059cc5 --- /dev/null +++ b/frontend/src/components/tooltip.tsx @@ -0,0 +1,27 @@ +import { useState } from "preact/hooks"; + +interface TooltipProps { + text: string; + children: React.ReactNode; +} + +const Tooltip = ({ text, children }: TooltipProps) => { + const [isVisible, setIsVisible] = useState(false); + + return ( +
setIsVisible(true)} + onMouseLeave={() => setIsVisible(false)} + > + {children} + {isVisible && ( +
+ {text} +
+ )} +
+ ); +}; + +export default Tooltip;