Skip to content
This repository was archived by the owner on Dec 10, 2025. It is now read-only.

Commit 6c46152

Browse files
RetricSuRetricSu
committed
add some more tooltip
1 parent 706074e commit 6c46152

File tree

6 files changed

+71
-25
lines changed

6 files changed

+71
-25
lines changed

‎frontend/src/components/elevator/car.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { ChainTheme, chainThemeAtom } from "../../states/atoms";
1818
import ElevatorCapacity from "./capacity";
1919
import { JSX } from "preact/jsx-runtime";
2020
import { bodyToScreenPosition, createTooltipContent } from "../../util/scene";
21+
import Tooltip from "../tooltip";
2122

2223
export interface ElevatorCarProp {
2324
transactions: Transaction[];

‎frontend/src/components/elevator/elevator-ui.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { chainThemeAtom, ChainTheme } from "../../states/atoms";
99
import { useState } from "preact/hooks";
1010
import { compactToDifficulty, difficultyToEH } from "../../util/difficulty";
1111
import { calcBlockOccupation, calcTotalTxSize } from "../../util/type";
12+
import Tooltip from "../tooltip";
1213

1314
export interface ElevatorUIProp {
1415
block: TipBlockResponse;
@@ -60,11 +61,16 @@ export const ElevatorUI: FunctionalComponent<ElevatorUIProp> = ({
6061
doorClosing={isDoorClosing}
6162
/>
6263
<div className={"px-20"}>
63-
<ElevatorCar
64-
blockHeader={block.blockHeader}
65-
transactions={block.committedTransactions}
66-
setFromDoorClosing={doorClosing}
67-
/>
64+
<Tooltip
65+
text="The elevator car size represents CKB max block size limit. The box size is then based on the transaction's size in bytes."
66+
pos="bottom"
67+
>
68+
<ElevatorCar
69+
blockHeader={block.blockHeader}
70+
transactions={block.committedTransactions}
71+
setFromDoorClosing={doorClosing}
72+
/>
73+
</Tooltip>
6874
</div>
6975
</div>
7076
</div>

‎frontend/src/components/elevator/miner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
9898
</div>
9999

100100
<div>
101-
<Tooltip text="I am a Miner, I work hard to find the nonce for the block for coins!">
101+
<Tooltip text="Hey there! I’m your CKB miner—honest, reliable, and impossible to deceive! I verify every transaction and only include valid ones. The harder the mining gets, the faster I have to work! Wish me luck!">
102102
<div className="relative flex justify-center items-center">
103103
<div className={`absolute flex justify-center`}>
104104
<img
@@ -122,7 +122,7 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
122122
</div>
123123
</Tooltip>
124124

125-
<Tooltip text="The miner difficulty is the number of leading zeros in the hash of the block header. The higher the difficulty, the harder it is to find the nonce.">
125+
<Tooltip text="CKB runs on Proof-of-Work (PoW), just like Bitcoin! That means miners compete to solve complex puzzles to secure the network. The higher the difficulty, the harder they have to work to mine new blocks and keep everything running smoothly!">
126126
<div className="relative">
127127
<div className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-text-inverse">
128128
<div

‎frontend/src/components/elevator/out-of-service.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
44
import { chainThemeAtom, ChainTheme } from "../../states/atoms";
55
import { carBoxSize } from "./util";
66
import { WebSocketConnectionState } from "../../service/ws";
7+
import Tooltip from "../tooltip";
78

89
export interface ElevatorOutOfServiceUIProp {
910
connectStatus: WebSocketConnectionState;
@@ -37,6 +38,14 @@ export const ElevatorOutOfServiceUI: FunctionalComponent<
3738
? "bg-elevator-mainnet-bottom"
3839
: "bg-elevator-testnet-bottom";
3940

41+
const tooltipContent =
42+
connectStatus === WebSocketConnectionState.OPEN
43+
? "We are connected, just waiting for the newest block coming, please be patient."
44+
: connectStatus === WebSocketConnectionState.CLOSED
45+
? "The websocket connection is closed, waiting to reconnect..."
46+
: connectStatus === WebSocketConnectionState.CONNECTING
47+
? "The websocket connection is connecting, please wait..."
48+
: "The websocket connection is not connected, please check your network connection or try refresh the page.";
4049
return (
4150
<div
4251
className={
@@ -55,20 +64,22 @@ export const ElevatorOutOfServiceUI: FunctionalComponent<
5564
<div
5665
className={`${bgElevatorFrame} flex flex-col justify-center mx-auto rounded-lg border-[20px] ${borderBlack}`}
5766
>
58-
<div className={"p-4"}>
59-
<div
60-
className={
61-
"w-min text-nowrap flex justify-center gap-1 text-center p-4 bg-surface-DEFAULT-inverse mx-auto rounded-lg"
62-
}
63-
>
64-
<div className={"text-functional-error"}>
65-
Status
66-
</div>
67-
<div className={"text-text-inverse"}>
68-
Connection {connectStatus}
67+
<Tooltip text={tooltipContent}>
68+
<div className={"p-4"}>
69+
<div
70+
className={
71+
"w-min text-nowrap flex justify-center gap-1 text-center p-4 bg-surface-DEFAULT-inverse mx-auto rounded-lg"
72+
}
73+
>
74+
<div className={"text-functional-error"}>
75+
Status
76+
</div>
77+
<div className={"text-text-inverse"}>
78+
{connectStatus}
79+
</div>
6980
</div>
7081
</div>
71-
</div>
82+
</Tooltip>
7283
<div className={"px-20"}>
7384
{/* elevator car */}
7485
<div

‎frontend/src/components/tooltip.tsx‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,50 @@ import { useState } from "preact/hooks";
33
interface TooltipProps {
44
text: string;
55
children: React.ReactNode;
6+
pos?: "top" | "bottom" | "left" | "right"; // Added prop for tooltip position
67
}
78

8-
const Tooltip = ({ text, children }: TooltipProps) => {
9+
const Tooltip = ({ text, children, pos = "top" }: TooltipProps) => {
910
const [isVisible, setIsVisible] = useState(false);
1011

12+
let tooltipClasses =
13+
"absolute z-50 bg-surface-DEFAULT-03 text-text-primary text-sm p-2 rounded-md shadow-lg border-2 border-black";
14+
let wrapperClasses = "relative";
15+
16+
switch (pos) {
17+
case "top":
18+
tooltipClasses +=
19+
" bottom-full mb-2 left-1/2 transform -translate-x-1/2";
20+
break;
21+
case "bottom":
22+
tooltipClasses +=
23+
" top-full mt-2 left-1/2 transform -translate-x-1/2";
24+
break;
25+
case "left":
26+
tooltipClasses +=
27+
" right-full mr-2 top-1/2 transform -translate-y-1/2";
28+
wrapperClasses += " inline-block"; // Important: Set inline-block on the wrapper for left/right positioning
29+
break;
30+
case "right":
31+
tooltipClasses +=
32+
" left-full ml-2 top-1/2 transform -translate-y-1/2";
33+
wrapperClasses += " inline-block"; // Important: Set inline-block on the wrapper for left/right positioning
34+
break;
35+
default:
36+
tooltipClasses +=
37+
" top-full mt-2 left-1/2 transform -translate-x-1/2"; // Default to bottom
38+
break;
39+
}
40+
1141
return (
1242
<div
13-
className={`relative`}
43+
className={wrapperClasses}
1444
onMouseEnter={() => setIsVisible(true)}
1545
onMouseLeave={() => setIsVisible(false)}
1646
>
1747
{children}
1848
{isVisible && (
19-
<div className="absolute bottom-full mb-2 w-[300px] left-1/2 transform -translate-x-1/2 bg-surface-DEFAULT-03 text-text-primary text-sm p-2 rounded-md shadow-lg border-2 border-black z-50">
20-
{text}
21-
</div>
49+
<div className={tooltipClasses + " w-[300px]"}>{text}</div>
2250
)}
2351
</div>
2452
);

‎frontend/src/service/ws.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export type WebSocketMessageHandler<T> = (message: WebSocketMessage<T>) => void;
99

1010
export enum WebSocketConnectionState {
1111
CONNECTING = "CONNECTING",
12-
OPEN = "OPEN",
12+
OPEN = "CONNECTED",
1313
CLOSING = "CLOSING",
1414
CLOSED = "CLOSED",
1515
UNKNOWN = "UNKNOWN",

0 commit comments

Comments
 (0)