✨ Show lock script name

Also link to the explorer script page.
cryptape · Jan 10, 2024 · cbfa55f · cbfa55f
1 parent 7c8f6c8
commit cbfa55f
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/src/app/u/[wallet]/[connection]/account-header.js b/src/app/u/[wallet]/[connection]/account-header.js
@@ -1,19 +1,18 @@
-import * as walletSelector from "@/lib/wallet/selector";
 import SignOut from "./sign-out";
 
 export default function AccountHeader({
   address,
   wallet,
   connection,
-  config: { ckbChain },
+  config: { ckbChain, ckbChainConfig },
 }) {
-  const walletName = walletSelector.walletName(wallet);
-
   return (
     <header>
       <SignOut
-        walletName={walletName}
+        wallet={wallet}
         connection={connection !== address ? connection : null}
+        address={address}
+        ckbChainConfig={ckbChainConfig}
       />
 
       <p className="break-all">

diff --git a/src/app/u/[wallet]/[connection]/sign-out.js b/src/app/u/[wallet]/[connection]/sign-out.js
@@ -1,16 +1,71 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import * as walletSelector from "@/lib/wallet/selector";
 import { Dropdown } from "flowbite-react";
+import { useRouter } from "next/navigation";
+import * as lumosHelpers from "@ckb-lumos/helpers";
+
+export function LockScriptName({ lockScriptName, address, ckbChainConfig }) {
+  if (
+    ckbChainConfig.EXPLORER_URL !== null &&
+    ckbChainConfig.EXPLORER_URL !== undefined
+  ) {
+    const script = lumosHelpers.addressToScript(address, {
+      config: ckbChainConfig,
+    });
+    const href = `${ckbChainConfig.EXPLORER_URL}/script/${script.codeHash}/${script.hashType}`;
+    return (
+      <a
+        className="inline-flex items-center font-medium text-blue-600 hover:underline"
+        href={href}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {lockScriptName}
+        <svg
+          class="w-4 h-4 ms-2 rtl:rotate-180"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5h12m0 0L9 1m4 4L9 9"
+          />
+        </svg>
+      </a>
+    );
+  }
+  return <span>{lockScriptName}</span>;
+}
+
+export default function SignOut({
+  wallet,
+  connection,
+  address,
+  ckbChainConfig,
+}) {
+  const walletName = walletSelector.walletName(wallet);
+  const lockScriptNameProps = {
+    lockScriptName: walletSelector.lockScriptName(wallet),
+    address,
+    ckbChainConfig,
+  };
 
-export default function SignOut({ walletName, connection }) {
   const router = useRouter();
   return (
     <aside className="not-prose relative flex justify-end">
       <Dropdown inline label={walletName}>
-        {connection !== null ? (
-          <Dropdown.Header className="break-all">{connection}</Dropdown.Header>
-        ) : null}
+        <Dropdown.Header className="break-all flex flex-col gap-2">
+          {connection !== null ? <p>{connection}</p> : null}
+          <p>
+            Via <LockScriptName {...lockScriptNameProps} />
+          </p>
+        </Dropdown.Header>
         <Dropdown.Item onClick={() => router.push("/")}>Sign Out</Dropdown.Item>
       </Dropdown>
     </aside>