From 14c40a58a8d4303fd8942e0af1ab10ad78795dff Mon Sep 17 00:00:00 2001
From: Alain Nicolas <alain.nicolas@consensys.net>
Date: Mon, 25 Nov 2024 17:35:13 +0100
Subject: [PATCH] feat(explorer): As a user, I want the Subject Page title to
 be explicit

---
 explorer/src/components/Title/index.tsx |  9 ++++++
 explorer/src/pages/Subject/index.tsx    | 39 ++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 explorer/src/components/Title/index.tsx

diff --git a/explorer/src/components/Title/index.tsx b/explorer/src/components/Title/index.tsx
new file mode 100644
index 00000000..c764a8f4
--- /dev/null
+++ b/explorer/src/components/Title/index.tsx
@@ -0,0 +1,9 @@
+export const Title = ({ title }: { title: string }) => {
+  return (
+    <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 md:mb-8 gap-6 md:gap-0">
+      <h1 className="text-2xl md:text-[2rem]/[2rem] font-semibold tracking-tighter text-text-primary dark:text-whiteDefault">
+        {title}
+      </h1>
+    </div>
+  );
+};
diff --git a/explorer/src/pages/Subject/index.tsx b/explorer/src/pages/Subject/index.tsx
index 09e986fd..039e155c 100644
--- a/explorer/src/pages/Subject/index.tsx
+++ b/explorer/src/pages/Subject/index.tsx
@@ -1,10 +1,18 @@
 import { OrderDirection } from "@verax-attestation-registry/verax-sdk/lib/types/.graphclient";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
 import { useParams } from "react-router-dom";
 import useSWR from "swr";
+import { isAddress } from "viem";
 
+import { Title } from "@/components/Title";
+import { THOUSAND } from "@/constants";
 import { EQueryParams } from "@/enums/queryParams";
+import useWindowDimensions from "@/hooks/useWindowDimensions.ts";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
+import { cropString } from "@/utils/stringUtils.ts";
 
 import { CardView } from "../Attestations/components/CardView";
 
@@ -17,6 +25,20 @@ export const Subject: React.FC = () => {
   const searchParams = new URLSearchParams(window.location.search);
   const sortByDateDirection = searchParams.get(EQueryParams.SORT_BY_DATE);
 
+  const { sm } = useWindowDimensions();
+
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy = (text: string, result: boolean) => {
+    if (!result || !text) return;
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, THOUSAND);
+  };
+
+  const CopyIcon = copied ? Check : Copy;
+
   const { data: attestationsList } = useSWR(
     `${SWRKeys.GET_ATTESTATION_LIST}/${subject}/${sortByDateDirection}/${chain.id}`,
     () =>
@@ -29,5 +51,20 @@ export const Subject: React.FC = () => {
       ),
   );
 
-  return attestationsList && <CardView attestationsList={attestationsList}></CardView>;
+  return (
+    <div className="container mt-5 md:mt-8">
+      <Title title={"Explore Attestations"} />
+      <div className="flex items-center text-text-secondary dark:text-text-secondaryDark text-base font-medium gap-3 mb-6">
+        <div>With subject {sm && subject && isAddress(subject) ? cropString(subject) : subject}</div>
+        <CopyToClipboard onCopy={handleCopy} text={subject ?? ""}>
+          <CopyIcon
+            className={`w-4 cursor-pointer hover:opacity-60 transition ${
+              copied ? "text-greenDefault dark:text-greenDark" : "text-greyDefault dark:text-text-secondaryDark"
+            } `}
+          />
+        </CopyToClipboard>
+      </div>
+      {attestationsList && <CardView attestationsList={attestationsList}></CardView>}
+    </div>
+  );
 };