fix some detaikls

Author: RetricSu

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(

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>

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",
         },