From 706074e271eb4fd3f3219874cbf057070a0c5037 Mon Sep 17 00:00:00 2001
From: RetricSu <inneverland2013@gmail.com>
Date: Thu, 13 Feb 2025 21:38:18 +0800
Subject: [PATCH 1/3] add more tooltip

---
 frontend/src/components/elevator/miner.tsx    | 16 ++++++----
 frontend/src/components/pool/bulb.tsx         |  4 +--
 .../src/components/pool/committed-line.tsx    |  1 +
 .../src/components/pool/committing-line.tsx   |  9 ++++--
 frontend/src/components/pool/header.tsx       |  5 ++-
 frontend/src/components/pool/pending-line.tsx | 32 ++++++++++++++++---
 .../src/components/pool/proposal-line.tsx     |  9 ++++--
 frontend/src/components/tooltip.tsx           |  2 +-
 8 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/elevator/miner.tsx b/frontend/src/components/elevator/miner.tsx
index c178b04..e90cc64 100644
--- a/frontend/src/components/elevator/miner.tsx
+++ b/frontend/src/components/elevator/miner.tsx
@@ -49,7 +49,7 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
         chainTheme === ChainTheme.mainnet
             ? "/assets/svg/elevator/mainnet/ape-jump.svg"
             : "/assets/svg/elevator/testnet/ape-jump.svg";
-    const jumpClass = doorClosing ? "w-2/3 animate-jump" : "";
+    const jumpClass = doorClosing ? "px-[30px] animate-jump" : "";
 
     const minerStandSvg =
         chainTheme === ChainTheme.mainnet
@@ -99,7 +99,7 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
 
                 <div>
                     <Tooltip text="I am a Miner, I work hard to find the nonce for the block for coins!">
-                        <div className="relative">
+                        <div className="relative  flex justify-center items-center">
                             <div className={`absolute flex justify-center`}>
                                 <img
                                     className={`z-50 ${jumpClass}`}
@@ -112,11 +112,13 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
                                 />
                             </div>
 
-                            <img
-                                className={`${doorClosing ? "" : spinClass}`}
-                                src={minerWheel}
-                                alt="Miner Wheel"
-                            />
+                            <div>
+                                <img
+                                    className={`${doorClosing ? "" : spinClass}`}
+                                    src={minerWheel}
+                                    alt="Miner Wheel"
+                                />
+                            </div>
                         </div>
                     </Tooltip>
 
diff --git a/frontend/src/components/pool/bulb.tsx b/frontend/src/components/pool/bulb.tsx
index 4c9c5bc..00eb082 100644
--- a/frontend/src/components/pool/bulb.tsx
+++ b/frontend/src/components/pool/bulb.tsx
@@ -7,10 +7,10 @@ export interface BulbProps {
 }
 
 export const Bulb: FunctionalComponent<BulbProps> = ({
-    bulbColor = "bg-white",
+    bulbColor = "bg-functionality-error",
     isOn = false,
 }) => {
-    const bulbStyle = `rounded-full border-2 border-black w-7 h-7 flex items-center justify-center transition-colors duration-300 ${isOn ? bulbColor : "bg-white"}`;
+    const bulbStyle = `rounded-full border-2 border-black w-7 h-7 flex items-center justify-center transition-colors duration-300 ${isOn ? bulbColor : "bg-functional-error"}`;
 
     return (
         <div className="flex flex-col items-center">
diff --git a/frontend/src/components/pool/committed-line.tsx b/frontend/src/components/pool/committed-line.tsx
index 92f6ed2..a0729b4 100644
--- a/frontend/src/components/pool/committed-line.tsx
+++ b/frontend/src/components/pool/committed-line.tsx
@@ -142,6 +142,7 @@ export const CommittedLine: FunctionalComponent<CommittedLineProps> = ({
                         <img src={holeSvg} alt="" />
                     </div>
                     <canvas className={`z-2 relative`} ref={canvasRef} />
+
                     {/* Transaction Box Tooltip 层 */}
                     {tooltipContent && tooltipPosition && (
                         <div
diff --git a/frontend/src/components/pool/committing-line.tsx b/frontend/src/components/pool/committing-line.tsx
index 43350b6..625bf0c 100644
--- a/frontend/src/components/pool/committing-line.tsx
+++ b/frontend/src/components/pool/committing-line.tsx
@@ -12,6 +12,7 @@ import { useAtomValue } from "jotai";
 import { ChainTheme, chainThemeAtom } from "../../states/atoms";
 import { bodyToScreenPosition, createTooltipContent } from "../../util/scene";
 import { SignBoard } from "./signboard";
+import Tooltip from "../tooltip";
 
 export interface LineProps {
     title: string;
@@ -214,7 +215,9 @@ export const CommittingLine: FunctionalComponent<LineProps> = ({
                 className={`relative flex justify-start items-center pt-[100px] border-b-8 border-l-8 ${borderColor}`}
             >
                 <div className={"absolute top-0 left-1/2 -translate-x-1/2"}>
-                    <SignBoard title={title} count={txs.length} />
+                    <Tooltip text="Committing transactions are the ones getting locked in! Once finalized, they’ll be officially part of the blockchain.">
+                        <SignBoard title={title} count={txs.length} />
+                    </Tooltip>
                 </div>
                 <div className={"relative"} ref={containerRef}>
                     <canvas ref={canvasRef} />
@@ -233,7 +236,9 @@ export const CommittingLine: FunctionalComponent<LineProps> = ({
                     )}
                 </div>
                 <div className={"h-[300px] flex items-end"}>
-                    <img src={minerRight} alt="" />
+                    <Tooltip text="Hey there! I’m your CKB miner—fair, reliable and honest! I get to pick up transactions based on their fee. The higher the fee, the better the chance of being picked up by me faster!">
+                        <img src={minerRight} alt="" />
+                    </Tooltip>
                 </div>
             </div>
         </div>
diff --git a/frontend/src/components/pool/header.tsx b/frontend/src/components/pool/header.tsx
index 61ad896..d1b1e38 100644
--- a/frontend/src/components/pool/header.tsx
+++ b/frontend/src/components/pool/header.tsx
@@ -1,6 +1,7 @@
 import { useAtomValue } from "jotai";
 import { FunctionalComponent } from "preact";
 import { ChainTheme, chainThemeAtom } from "../../states/atoms";
+import Tooltip from "../tooltip";
 
 export interface PoolHeaderProps {
     totalTxs: number;
@@ -29,7 +30,9 @@ export const PoolHeader: FunctionalComponent<PoolHeaderProps> = ({
                     "absolute bottom-6 w-fit left-1/2 -translate-x-1/2 flex justify-center bg-surface-DEFAULT-inverse px-8 py-4 gap-2"
                 }
             >
-                <div className={"text-text-inverse"}>Mempool Size (KB)</div>
+                <Tooltip text="The mempool is like a waiting room for transactions before they get picked by miners into a block. ">
+                    <div className={"text-text-inverse"}>Mempool Size (KB)</div>
+                </Tooltip>
                 <div className={textColor}>{txSizeInKB}</div>
                 <div className={"text-text-inverse"}>Total Transactions</div>
                 <div className={textColor}>{totalTxs}</div>
diff --git a/frontend/src/components/pool/pending-line.tsx b/frontend/src/components/pool/pending-line.tsx
index 854b2e5..141e940 100644
--- a/frontend/src/components/pool/pending-line.tsx
+++ b/frontend/src/components/pool/pending-line.tsx
@@ -13,6 +13,8 @@ import { useAtomValue } from "jotai";
 import { ChainTheme, chainThemeAtom } from "../../states/atoms";
 import { SignBoard } from "./signboard";
 import Bulb from "./bulb";
+import Tooltip from "../tooltip";
+import { useChainService } from "../../context/chain";
 
 export interface PendingLineProps {
     title: string;
@@ -24,6 +26,7 @@ export const PendingLine: FunctionalComponent<PendingLineProps> = ({
     txs,
 }) => {
     const chainTheme = useAtomValue(chainThemeAtom);
+    const { chainService } = useChainService();
 
     const [tooltipContent, setTooltipContent] = useState<JSX.Element | null>(
         null,
@@ -242,13 +245,30 @@ export const PendingLine: FunctionalComponent<PendingLineProps> = ({
                     <div
                         className={`text-text-inverse ${bgColor} w-[240px] h-[230px] border-[2px] border-text-secondary flex justify-center gap-2 p-4`}
                     >
-                        <Bulb bulbColor="bg-functional-warning" isOn={true} />
-                        <Bulb bulbColor="bg-functional-success" isOn={true} />
-                        <Bulb />
+                        <Tooltip text="Websocket connection status, green means connected, red means disconnected">
+                            <Bulb
+                                bulbColor="bg-functional-success"
+                                isOn={chainService.wsClient.isConnected}
+                            />
+                        </Tooltip>
+                        <Tooltip text="Reserved for later usage.">
+                            <Bulb
+                                bulbColor="bg-functional-warning"
+                                isOn={true}
+                            />
+                        </Tooltip>
+                        <Tooltip text="Reserved for later usage.">
+                            <Bulb
+                                bulbColor="bg-functional-warning"
+                                isOn={true}
+                            />
+                        </Tooltip>
                     </div>
                 </div>
                 <div className={"absolute top-0 left-1/2 -translate-x-1/2"}>
-                    <SignBoard title={title} count={txs.length} />
+                    <Tooltip text="Pending transactions are the ones just arrived and are waiting to be picked up by miners.">
+                        <SignBoard title={title} count={txs.length} />
+                    </Tooltip>
                 </div>
                 <div className={"relative"} ref={containerRef}>
                     <canvas ref={canvasRef} />
@@ -267,7 +287,9 @@ export const PendingLine: FunctionalComponent<PendingLineProps> = ({
                     )}
                 </div>
                 <div>
-                    <img src={minerRight} alt="" />
+                    <Tooltip text="Hey there! I’m your CKB miner—fair, reliable and honest! I get to pick up transactions based on their fee. The higher the fee, the better the chance of being picked up by me faster!">
+                        <img src={minerRight} alt="" />
+                    </Tooltip>
                 </div>
             </div>
         </div>
diff --git a/frontend/src/components/pool/proposal-line.tsx b/frontend/src/components/pool/proposal-line.tsx
index a5ef139..f062034 100644
--- a/frontend/src/components/pool/proposal-line.tsx
+++ b/frontend/src/components/pool/proposal-line.tsx
@@ -12,6 +12,7 @@ import { useAtomValue } from "jotai";
 import { ChainTheme, chainThemeAtom } from "../../states/atoms";
 import { bodyToScreenPosition, createTooltipContent } from "../../util/scene";
 import { SignBoard } from "./signboard";
+import Tooltip from "../tooltip";
 
 export interface ProposalLineProps {
     title: string;
@@ -212,7 +213,9 @@ export const ProposalLine: FunctionalComponent<ProposalLineProps> = ({
             className={`relative w-full flex justify-end border-b-8 border-r-8 pt-[100px] ${borderColor}`}
         >
             <div className={"h-[300px] flex items-end"}>
-                <img src={minerLeft} alt="" />
+                <Tooltip text="Hey there! I’m your CKB miner—fair, reliable and honest! I get to pick up transactions based on their fee. The higher the fee, the better the chance of being picked up by me faster!">
+                    <img src={minerLeft} alt="" />
+                </Tooltip>
             </div>
             <div className={"relative"} ref={containerRef}>
                 <canvas ref={canvasRef} />
@@ -232,7 +235,9 @@ export const ProposalLine: FunctionalComponent<ProposalLineProps> = ({
             </div>
 
             <div className={"absolute top-0 left-1/2 -translate-x-1/2"}>
-                <SignBoard title={title} count={txs.length} />
+                <Tooltip text="Proposal transactions are the ones selected and are waiting to be included in a block. But here’s the catch—if they aren’t committed within 11 blocks, they’ll go back to the pending status and have to be propose again!">
+                    <SignBoard title={title} count={txs.length} />
+                </Tooltip>
             </div>
         </div>
     );
diff --git a/frontend/src/components/tooltip.tsx b/frontend/src/components/tooltip.tsx
index 7059cc5..d6fcddb 100644
--- a/frontend/src/components/tooltip.tsx
+++ b/frontend/src/components/tooltip.tsx
@@ -16,7 +16,7 @@ const Tooltip = ({ text, children }: TooltipProps) => {
         >
             {children}
             {isVisible && (
-                <div className="absolute bottom-full mb-2 w-full left-1/2 transform -translate-x-1/2 bg-surface-DEFAULT-03 text-text-primary text-sm p-2 rounded-md shadow-lg z-50">
+                <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">
                     {text}
                 </div>
             )}

From 6c461525846064cf42a460b7e74966563305c601 Mon Sep 17 00:00:00 2001
From: RetricSu <inneverland2013@gmail.com>
Date: Thu, 13 Feb 2025 21:59:51 +0800
Subject: [PATCH 2/3] add some more tooltip

---
 frontend/src/components/elevator/car.tsx      |  1 +
 .../src/components/elevator/elevator-ui.tsx   | 16 +++++---
 frontend/src/components/elevator/miner.tsx    |  4 +-
 .../components/elevator/out-of-service.tsx    | 35 +++++++++++------
 frontend/src/components/tooltip.tsx           | 38 ++++++++++++++++---
 frontend/src/service/ws.ts                    |  2 +-
 6 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/elevator/car.tsx b/frontend/src/components/elevator/car.tsx
index 576d702..0487c0b 100644
--- a/frontend/src/components/elevator/car.tsx
+++ b/frontend/src/components/elevator/car.tsx
@@ -18,6 +18,7 @@ import { ChainTheme, chainThemeAtom } from "../../states/atoms";
 import ElevatorCapacity from "./capacity";
 import { JSX } from "preact/jsx-runtime";
 import { bodyToScreenPosition, createTooltipContent } from "../../util/scene";
+import Tooltip from "../tooltip";
 
 export interface ElevatorCarProp {
     transactions: Transaction[];
diff --git a/frontend/src/components/elevator/elevator-ui.tsx b/frontend/src/components/elevator/elevator-ui.tsx
index e9816b3..fcfe606 100644
--- a/frontend/src/components/elevator/elevator-ui.tsx
+++ b/frontend/src/components/elevator/elevator-ui.tsx
@@ -9,6 +9,7 @@ import { chainThemeAtom, ChainTheme } from "../../states/atoms";
 import { useState } from "preact/hooks";
 import { compactToDifficulty, difficultyToEH } from "../../util/difficulty";
 import { calcBlockOccupation, calcTotalTxSize } from "../../util/type";
+import Tooltip from "../tooltip";
 
 export interface ElevatorUIProp {
     block: TipBlockResponse;
@@ -60,11 +61,16 @@ export const ElevatorUI: FunctionalComponent<ElevatorUIProp> = ({
                         doorClosing={isDoorClosing}
                     />
                     <div className={"px-20"}>
-                        <ElevatorCar
-                            blockHeader={block.blockHeader}
-                            transactions={block.committedTransactions}
-                            setFromDoorClosing={doorClosing}
-                        />
+                        <Tooltip
+                            text="The elevator car size represents CKB max block size limit. The box size is then based on the transaction's size in bytes."
+                            pos="bottom"
+                        >
+                            <ElevatorCar
+                                blockHeader={block.blockHeader}
+                                transactions={block.committedTransactions}
+                                setFromDoorClosing={doorClosing}
+                            />
+                        </Tooltip>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/components/elevator/miner.tsx b/frontend/src/components/elevator/miner.tsx
index e90cc64..c63e0d7 100644
--- a/frontend/src/components/elevator/miner.tsx
+++ b/frontend/src/components/elevator/miner.tsx
@@ -98,7 +98,7 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
                 </div>
 
                 <div>
-                    <Tooltip text="I am a Miner, I work hard to find the nonce for the block for coins!">
+                    <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!">
                         <div className="relative  flex justify-center items-center">
                             <div className={`absolute flex justify-center`}>
                                 <img
@@ -122,7 +122,7 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
                         </div>
                     </Tooltip>
 
-                    <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.">
+                    <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!">
                         <div className="relative">
                             <div className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-text-inverse">
                                 <div
diff --git a/frontend/src/components/elevator/out-of-service.tsx b/frontend/src/components/elevator/out-of-service.tsx
index f325192..954392d 100644
--- a/frontend/src/components/elevator/out-of-service.tsx
+++ b/frontend/src/components/elevator/out-of-service.tsx
@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import { chainThemeAtom, ChainTheme } from "../../states/atoms";
 import { carBoxSize } from "./util";
 import { WebSocketConnectionState } from "../../service/ws";
+import Tooltip from "../tooltip";
 
 export interface ElevatorOutOfServiceUIProp {
     connectStatus: WebSocketConnectionState;
@@ -37,6 +38,14 @@ export const ElevatorOutOfServiceUI: FunctionalComponent<
             ? "bg-elevator-mainnet-bottom"
             : "bg-elevator-testnet-bottom";
 
+    const tooltipContent =
+        connectStatus === WebSocketConnectionState.OPEN
+            ? "We are connected, just waiting for the newest block coming, please be patient."
+            : connectStatus === WebSocketConnectionState.CLOSED
+              ? "The websocket connection is closed, waiting to reconnect..."
+              : connectStatus === WebSocketConnectionState.CONNECTING
+                ? "The websocket connection is connecting, please wait..."
+                : "The websocket connection is not connected, please check your network connection or try refresh the page.";
     return (
         <div
             className={
@@ -55,20 +64,22 @@ export const ElevatorOutOfServiceUI: FunctionalComponent<
                 <div
                     className={`${bgElevatorFrame} flex flex-col justify-center mx-auto rounded-lg border-[20px] ${borderBlack}`}
                 >
-                    <div className={"p-4"}>
-                        <div
-                            className={
-                                "w-min text-nowrap flex justify-center gap-1 text-center p-4 bg-surface-DEFAULT-inverse mx-auto rounded-lg"
-                            }
-                        >
-                            <div className={"text-functional-error"}>
-                                Status
-                            </div>
-                            <div className={"text-text-inverse"}>
-                                Connection {connectStatus}
+                    <Tooltip text={tooltipContent}>
+                        <div className={"p-4"}>
+                            <div
+                                className={
+                                    "w-min text-nowrap flex justify-center gap-1 text-center p-4 bg-surface-DEFAULT-inverse mx-auto rounded-lg"
+                                }
+                            >
+                                <div className={"text-functional-error"}>
+                                    Status
+                                </div>
+                                <div className={"text-text-inverse"}>
+                                    {connectStatus}
+                                </div>
                             </div>
                         </div>
-                    </div>
+                    </Tooltip>
                     <div className={"px-20"}>
                         {/* elevator car */}
                         <div
diff --git a/frontend/src/components/tooltip.tsx b/frontend/src/components/tooltip.tsx
index d6fcddb..cf2b519 100644
--- a/frontend/src/components/tooltip.tsx
+++ b/frontend/src/components/tooltip.tsx
@@ -3,22 +3,50 @@ import { useState } from "preact/hooks";
 interface TooltipProps {
     text: string;
     children: React.ReactNode;
+    pos?: "top" | "bottom" | "left" | "right"; // Added prop for tooltip position
 }
 
-const Tooltip = ({ text, children }: TooltipProps) => {
+const Tooltip = ({ text, children, pos = "top" }: TooltipProps) => {
     const [isVisible, setIsVisible] = useState(false);
 
+    let tooltipClasses =
+        "absolute z-50 bg-surface-DEFAULT-03 text-text-primary text-sm p-2 rounded-md shadow-lg border-2 border-black";
+    let wrapperClasses = "relative";
+
+    switch (pos) {
+        case "top":
+            tooltipClasses +=
+                " bottom-full mb-2 left-1/2 transform -translate-x-1/2";
+            break;
+        case "bottom":
+            tooltipClasses +=
+                " top-full mt-2 left-1/2 transform -translate-x-1/2";
+            break;
+        case "left":
+            tooltipClasses +=
+                " right-full mr-2 top-1/2 transform -translate-y-1/2";
+            wrapperClasses += " inline-block"; //  Important:  Set inline-block on the wrapper for left/right positioning
+            break;
+        case "right":
+            tooltipClasses +=
+                " left-full ml-2 top-1/2 transform -translate-y-1/2";
+            wrapperClasses += " inline-block"; //  Important:  Set inline-block on the wrapper for left/right positioning
+            break;
+        default:
+            tooltipClasses +=
+                " top-full mt-2 left-1/2 transform -translate-x-1/2"; // Default to bottom
+            break;
+    }
+
     return (
         <div
-            className={`relative`}
+            className={wrapperClasses}
             onMouseEnter={() => setIsVisible(true)}
             onMouseLeave={() => setIsVisible(false)}
         >
             {children}
             {isVisible && (
-                <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">
-                    {text}
-                </div>
+                <div className={tooltipClasses + " w-[300px]"}>{text}</div>
             )}
         </div>
     );
diff --git a/frontend/src/service/ws.ts b/frontend/src/service/ws.ts
index 99e4424..a469b6a 100644
--- a/frontend/src/service/ws.ts
+++ b/frontend/src/service/ws.ts
@@ -9,7 +9,7 @@ export type WebSocketMessageHandler<T> = (message: WebSocketMessage<T>) => void;
 
 export enum WebSocketConnectionState {
     CONNECTING = "CONNECTING",
-    OPEN = "OPEN",
+    OPEN = "CONNECTED",
     CLOSING = "CLOSING",
     CLOSED = "CLOSED",
     UNKNOWN = "UNKNOWN",

From 4b92d57dac703003d18280becb572c20ee3bf5d9 Mon Sep 17 00:00:00 2001
From: RetricSu <inneverland2013@gmail.com>
Date: Thu, 13 Feb 2025 22:08:16 +0800
Subject: [PATCH 3/3] fix some detaikls

---
 .../src/components/elevator/block-modal.tsx   |  2 +-
 frontend/src/components/replay/header.tsx     | 41 +++++++++++++++----
 frontend/src/layouts/navbar.tsx               |  2 +-
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/elevator/block-modal.tsx b/frontend/src/components/elevator/block-modal.tsx
index cd5adb2..94943e4 100644
--- a/frontend/src/components/elevator/block-modal.tsx
+++ b/frontend/src/components/elevator/block-modal.tsx
@@ -256,7 +256,7 @@ const BlockModal: preact.FunctionComponent<BlockModalProps> = ({
                         }}
                         className={`${buttonColor} ${buttonHover} text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline`}
                     >
-                        Share this Block
+                        Replay the Block
                     </button>
                     <a
                         href={createBlockLink(
diff --git a/frontend/src/components/replay/header.tsx b/frontend/src/components/replay/header.tsx
index ab87218..e1ea06f 100644
--- a/frontend/src/components/replay/header.tsx
+++ b/frontend/src/components/replay/header.tsx
@@ -1,6 +1,7 @@
 import { FunctionalComponent } from "preact";
 import { useAtomValue } from "jotai";
 import { chainThemeAtom, ChainTheme } from "../../states/atoms";
+import { useState } from "preact/hooks";
 
 export interface ReplayHeaderProp {
     blockHash: string;
@@ -13,6 +14,29 @@ export const ReplayHeader: FunctionalComponent<ReplayHeaderProp> = ({
         chainTheme === ChainTheme.mainnet
             ? "text-brand-mainnet"
             : "text-brand-testnet";
+    const [copyNotification, setCopyNotification] = useState<string | null>(
+        null,
+    );
+
+    const handleCopyClick = () => {
+        const link = `${window.location.origin}/replay/${blockHash}`;
+        navigator.clipboard
+            .writeText(link)
+            .then(() => {
+                setCopyNotification("Link copied!");
+                setTimeout(() => {
+                    setCopyNotification(null);
+                }, 2000); // Clear notification after 2 seconds
+            })
+            .catch((err) => {
+                console.error("Failed to copy: ", err);
+                setCopyNotification("Failed to copy link."); //Optional, error message.
+                setTimeout(() => {
+                    setCopyNotification(null);
+                }, 2000);
+            });
+    };
+
     return (
         <div>
             <div
@@ -22,14 +46,17 @@ export const ReplayHeader: FunctionalComponent<ReplayHeaderProp> = ({
             >
                 <h1>Elevator Block Replay </h1>
                 <div>
-                    <a
-                        className={`${textColor}`}
-                        href="http://"
-                        target="_blank"
-                        rel="noopener noreferrer"
+                    <button
+                        className={`${textColor} border border-black rounded-md px-4 py-2`}
+                        onClick={handleCopyClick}
                     >
-                        Copy the Share Link
-                    </a>
+                        Share this block with your friends!
+                    </button>
+                    {copyNotification && (
+                        <div className="text-text-secondary text-sm italic">
+                            {copyNotification}
+                        </div>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/frontend/src/layouts/navbar.tsx b/frontend/src/layouts/navbar.tsx
index 71126fd..f782f7e 100644
--- a/frontend/src/layouts/navbar.tsx
+++ b/frontend/src/layouts/navbar.tsx
@@ -24,7 +24,7 @@ const Navbar: FunctionalComponent = () => {
         {
             label: "Github",
             selected: false,
-            url: "https://github.com/cryptape",
+            url: "https://github.com/cryptape/ckb-tx-elevator",
             newTab: true,
             icon: "/assets/icons/github.svg",
         },