From 035fc9a77d8ad45963f0971bd440520db05c2fe4 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Thu, 7 Nov 2024 19:32:42 +0700
Subject: [PATCH 1/9] feat(web): create CopyableLink component

---
 apps/web/src/components/CopyableLink.tsx | 25 ++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 apps/web/src/components/CopyableLink.tsx

diff --git a/apps/web/src/components/CopyableLink.tsx b/apps/web/src/components/CopyableLink.tsx
new file mode 100644
index 000000000..132e2d423
--- /dev/null
+++ b/apps/web/src/components/CopyableLink.tsx
@@ -0,0 +1,25 @@
+import type { FC, ReactNode } from "react";
+
+import { CopyToClipboard } from "./CopyToClipboard";
+import { Link } from "./Link";
+
+export type CopyableLinkProps = {
+  href: string;
+  value: string;
+  children: ReactNode;
+  tooltipText?: string;
+};
+
+export const CopyableLink: FC<CopyableLinkProps> = function ({
+  href,
+  value,
+  children,
+  tooltipText,
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      <Link href={href}>{children}</Link>
+      <CopyToClipboard value={value} label={tooltipText} />
+    </div>
+  );
+};

From d0ea7a175a5a71656e904ba88470247f635bda42 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Thu, 7 Nov 2024 19:33:47 +0700
Subject: [PATCH 2/9] refactor(web): use CopyableLink in blobs table link
 ocurrencies

---
 apps/web/src/pages/blobs.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/pages/blobs.tsx b/apps/web/src/pages/blobs.tsx
index 053b85fe6..c5b2b2620 100644
--- a/apps/web/src/pages/blobs.tsx
+++ b/apps/web/src/pages/blobs.tsx
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import type { NextPage } from "next";
 import NextError from "next/error";
 
+import { CopyableLink } from "~/components/CopyableLink";
 import { Filters } from "~/components/Filters";
 import { Header } from "~/components/Header";
 import { Link } from "~/components/Link";
@@ -39,6 +40,10 @@ const BLOBS_TABLE_HEADERS = [
         item: "Timestamp",
         className: "2xl:w-[185px] xl:w-[160px] lg:w-[127px] w-[100px]",
       },
+      {
+        item: "Category",
+        className: "w-[60px]",
+      },
       {
         item: "Size",
         className: "2xl:w-[178px] xl:w-[145px] lg:w-[101px] w-[66px]",
@@ -87,16 +92,24 @@ const Blobs: NextPage = function () {
             cells: [
               {
                 item: (
-                  <Link href={buildBlobRoute(versionedHash)}>
+                  <CopyableLink
+                    href={buildBlobRoute(versionedHash)}
+                    value={versionedHash}
+                    tooltipText="Copy versioned hash"
+                  >
                     {shortenAddress(versionedHash, 8)}
-                  </Link>
+                  </CopyableLink>
                 ),
               },
               {
                 item: (
-                  <Link href={buildTransactionRoute(txHash)}>
+                  <CopyableLink
+                    href={buildTransactionRoute(txHash)}
+                    value={txHash}
+                    tooltipText="Copy transaction hash"
+                  >
                     {shortenAddress(txHash, 8)}
-                  </Link>
+                  </CopyableLink>
                 ),
               },
               {
@@ -115,6 +128,9 @@ const Blobs: NextPage = function () {
                   </div>
                 ),
               },
+              {
+                item: <span></span>,
+              },
               {
                 item: (
                   <div className="flex gap-2">

From 934f4a4cd1756e2fa4f50a2310b6c1d6407243b2 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Thu, 7 Nov 2024 19:34:01 +0700
Subject: [PATCH 3/9] refactor(web): use CopyableLink in transactions table
 link ocurrencies

---
 apps/web/src/pages/txs.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/pages/txs.tsx b/apps/web/src/pages/txs.tsx
index 170d72232..3d62e79bb 100644
--- a/apps/web/src/pages/txs.tsx
+++ b/apps/web/src/pages/txs.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import type { NextPage } from "next";
 
+import { CopyableLink } from "~/components/CopyableLink";
 import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay";
 import { Filters } from "~/components/Filters";
 import { Header } from "~/components/Header";
@@ -198,9 +199,13 @@ const Txs: NextPage = function () {
             cells: [
               {
                 item: (
-                  <Link href={buildTransactionRoute(hash)}>
+                  <CopyableLink
+                    href={buildTransactionRoute(hash)}
+                    value={hash}
+                    tooltipText="Copy hash"
+                  >
                     {shortenAddress(hash, 6)}
-                  </Link>
+                  </CopyableLink>
                 ),
               },
               {
@@ -217,16 +222,24 @@ const Txs: NextPage = function () {
               },
               {
                 item: (
-                  <Link href={buildAddressRoute(from)}>
+                  <CopyableLink
+                    href={buildAddressRoute(from)}
+                    value={from}
+                    tooltipText="Copy the origin address"
+                  >
                     {shortenAddress(from, 6)}
-                  </Link>
+                  </CopyableLink>
                 ),
               },
               {
                 item: (
-                  <Link href={buildAddressRoute(to)}>
+                  <CopyableLink
+                    href={buildAddressRoute(to)}
+                    value={to}
+                    tooltipText="Copy the destination address"
+                  >
                     {shortenAddress(to, 6)}
-                  </Link>
+                  </CopyableLink>
                 ),
               },
               {

From 0b870ae37c87d01d8a63d3d5fb7288b9eb7c2477 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Fri, 8 Nov 2024 09:37:52 +0700
Subject: [PATCH 4/9] refactor(web): merge Copyable and CopyableLink components

---
 apps/web/src/components/CopyToClipboard.tsx | 17 +++---------
 apps/web/src/components/Copyable.tsx        | 30 +++++++++++++++++++++
 apps/web/src/components/CopyableLink.tsx    | 25 -----------------
 apps/web/src/pages/blob/[hash].tsx          |  9 ++++---
 apps/web/src/pages/blobs.tsx                | 10 +++----
 apps/web/src/pages/block/[id].tsx           |  4 +--
 apps/web/src/pages/blocks.tsx               | 17 +++++++-----
 apps/web/src/pages/tx/[hash].tsx            |  5 ++--
 apps/web/src/pages/txs.tsx                  | 22 ++++++++-------
 9 files changed, 72 insertions(+), 67 deletions(-)
 create mode 100644 apps/web/src/components/Copyable.tsx
 delete mode 100644 apps/web/src/components/CopyableLink.tsx

diff --git a/apps/web/src/components/CopyToClipboard.tsx b/apps/web/src/components/CopyToClipboard.tsx
index 4462f1d84..99472037b 100644
--- a/apps/web/src/components/CopyToClipboard.tsx
+++ b/apps/web/src/components/CopyToClipboard.tsx
@@ -1,3 +1,4 @@
+import type { FC } from "react";
 import { useState } from "react";
 import { CheckIcon } from "@heroicons/react/24/outline";
 
@@ -9,10 +10,7 @@ type CopyToClipboardProps = {
   value: string;
 };
 
-export function CopyToClipboard({
-  label = "Copy to clipboard",
-  value,
-}: CopyToClipboardProps) {
+export const CopyToClipboard: FC<CopyToClipboardProps> = ({ label, value }) => {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
@@ -43,13 +41,4 @@ export function CopyToClipboard({
       </TooltipTrigger>
     </Tooltip>
   );
-}
-
-export function Copyable({ label, value }: CopyToClipboardProps) {
-  return (
-    <div className="flex items-center gap-2">
-      <div className="truncate">{value}</div>
-      <CopyToClipboard value={value} label={label} />
-    </div>
-  );
-}
+};
diff --git a/apps/web/src/components/Copyable.tsx b/apps/web/src/components/Copyable.tsx
new file mode 100644
index 000000000..329306553
--- /dev/null
+++ b/apps/web/src/components/Copyable.tsx
@@ -0,0 +1,30 @@
+import type { FC } from "react";
+import React from "react";
+
+import { CopyToClipboard } from "./CopyToClipboard";
+import { Link } from "./Link";
+
+export interface CopyableProps {
+  href?: string;
+  value: string;
+  tooltipText?: string;
+  children?: React.ReactNode;
+}
+
+export const Copyable: FC<CopyableProps> = ({
+  href,
+  value,
+  tooltipText,
+  children,
+}) => {
+  return (
+    <div className="flex items-center gap-1" title={value}>
+      {href ? (
+        <Link href={href}>{children || value}</Link>
+      ) : (
+        <div className="truncate">{children || value}</div>
+      )}
+      <CopyToClipboard value={value} label={tooltipText} />
+    </div>
+  );
+};
diff --git a/apps/web/src/components/CopyableLink.tsx b/apps/web/src/components/CopyableLink.tsx
deleted file mode 100644
index 132e2d423..000000000
--- a/apps/web/src/components/CopyableLink.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { FC, ReactNode } from "react";
-
-import { CopyToClipboard } from "./CopyToClipboard";
-import { Link } from "./Link";
-
-export type CopyableLinkProps = {
-  href: string;
-  value: string;
-  children: ReactNode;
-  tooltipText?: string;
-};
-
-export const CopyableLink: FC<CopyableLinkProps> = function ({
-  href,
-  value,
-  children,
-  tooltipText,
-}) {
-  return (
-    <div className="flex items-center gap-1">
-      <Link href={href}>{children}</Link>
-      <CopyToClipboard value={value} label={tooltipText} />
-    </div>
-  );
-};
diff --git a/apps/web/src/pages/blob/[hash].tsx b/apps/web/src/pages/blob/[hash].tsx
index f708de735..14da6fb7a 100644
--- a/apps/web/src/pages/blob/[hash].tsx
+++ b/apps/web/src/pages/blob/[hash].tsx
@@ -11,7 +11,8 @@ import { StorageBadge } from "~/components/Badges/StorageBadge";
 import { BlobViewer, DEFAULT_BLOB_VIEW_MODES } from "~/components/BlobViewer";
 import type { BlobViewMode } from "~/components/BlobViewer";
 import { Card } from "~/components/Cards/Card";
-import { Copyable, CopyToClipboard } from "~/components/CopyToClipboard";
+import { CopyToClipboard } from "~/components/CopyToClipboard";
+import { Copyable } from "~/components/Copyable";
 import { Dropdown } from "~/components/Dropdown";
 import type { DropdownProps } from "~/components/Dropdown";
 import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
@@ -110,11 +111,13 @@ const Blob: NextPage = function () {
     detailsFields.push(
       {
         name: "Commitment",
-        value: <Copyable value={blob.commitment} label="Copy commitment" />,
+        value: (
+          <Copyable value={blob.commitment} tooltipText="Copy commitment" />
+        ),
       },
       {
         name: "Proof",
-        value: <Copyable value={blob.proof} label="Copy proof" />,
+        value: <Copyable value={blob.proof} tooltipText="Copy proof" />,
       }
     );
 
diff --git a/apps/web/src/pages/blobs.tsx b/apps/web/src/pages/blobs.tsx
index c5b2b2620..b2c57ed66 100644
--- a/apps/web/src/pages/blobs.tsx
+++ b/apps/web/src/pages/blobs.tsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import type { NextPage } from "next";
 import NextError from "next/error";
 
-import { CopyableLink } from "~/components/CopyableLink";
+import { Copyable } from "~/components/Copyable";
 import { Filters } from "~/components/Filters";
 import { Header } from "~/components/Header";
 import { Link } from "~/components/Link";
@@ -92,24 +92,24 @@ const Blobs: NextPage = function () {
             cells: [
               {
                 item: (
-                  <CopyableLink
+                  <Copyable
                     href={buildBlobRoute(versionedHash)}
                     value={versionedHash}
                     tooltipText="Copy versioned hash"
                   >
                     {shortenAddress(versionedHash, 8)}
-                  </CopyableLink>
+                  </Copyable>
                 ),
               },
               {
                 item: (
-                  <CopyableLink
+                  <Copyable
                     href={buildTransactionRoute(txHash)}
                     value={txHash}
                     tooltipText="Copy transaction hash"
                   >
                     {shortenAddress(txHash, 8)}
-                  </CopyableLink>
+                  </Copyable>
                 ),
               },
               {
diff --git a/apps/web/src/pages/block/[id].tsx b/apps/web/src/pages/block/[id].tsx
index 5507d0935..c34101fdd 100644
--- a/apps/web/src/pages/block/[id].tsx
+++ b/apps/web/src/pages/block/[id].tsx
@@ -5,7 +5,7 @@ import type { NextRouter } from "next/router";
 
 import { Card } from "~/components/Cards/Card";
 import { BlobTransactionCard } from "~/components/Cards/SurfaceCards/BlobTransactionCard";
-import { Copyable } from "~/components/CopyToClipboard";
+import { Copyable } from "~/components/Copyable";
 import { BlobGasUsageDisplay } from "~/components/Displays/BlobGasUsageDisplay";
 import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
@@ -113,7 +113,7 @@ const Block: NextPage = function () {
       { name: "Status", value: <BlockStatus blockNumber={blockData.number} /> },
       {
         name: "Hash",
-        value: <Copyable value={blockData.hash} label="Copy Hash" />,
+        value: <Copyable value={blockData.hash} tooltipText="Copy Hash" />,
       },
       {
         name: "Timestamp",
diff --git a/apps/web/src/pages/blocks.tsx b/apps/web/src/pages/blocks.tsx
index c9afe7dc0..ae2156968 100644
--- a/apps/web/src/pages/blocks.tsx
+++ b/apps/web/src/pages/blocks.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import type { NextPage } from "next";
 
+import { Copyable } from "~/components/Copyable";
 import { BlobGasUsageDisplay } from "~/components/Displays/BlobGasUsageDisplay";
 import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay";
 import { Filters } from "~/components/Filters";
@@ -134,16 +135,20 @@ const Blocks: NextPage = function () {
                 cells: [
                   {
                     item: (
-                      <Link href={buildTransactionRoute(transactionHash)}>
-                        {transactionHash}
-                      </Link>
+                      <Copyable
+                        href={buildTransactionRoute(transactionHash)}
+                        value={transactionHash}
+                        tooltipText="Copy transaction hash"
+                      />
                     ),
                   },
                   {
                     item: (
-                      <Link href={buildBlobRoute(blobVersionedHash)}>
-                        {blobVersionedHash}
-                      </Link>
+                      <Copyable
+                        href={buildBlobRoute(blobVersionedHash)}
+                        value={blobVersionedHash}
+                        tooltipText="Copy blob versioned hash"
+                      />
                     ),
                   },
                 ],
diff --git a/apps/web/src/pages/tx/[hash].tsx b/apps/web/src/pages/tx/[hash].tsx
index fa7866831..543cab537 100644
--- a/apps/web/src/pages/tx/[hash].tsx
+++ b/apps/web/src/pages/tx/[hash].tsx
@@ -6,7 +6,8 @@ import { parseDecodedData } from "~/utils/decoded-transaction";
 import { RollupBadge } from "~/components/Badges/RollupBadge";
 import { Card } from "~/components/Cards/Card";
 import { BlobCard } from "~/components/Cards/SurfaceCards/BlobCard";
-import { Copyable, CopyToClipboard } from "~/components/CopyToClipboard";
+import { CopyToClipboard } from "~/components/CopyToClipboard";
+import { Copyable } from "~/components/Copyable";
 import { StandardEtherUnitDisplay } from "~/components/Displays/StandardEtherUnitDisplay";
 import { InfoGrid } from "~/components/InfoGrid";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
@@ -102,7 +103,7 @@ const Tx: NextPage = () => {
     detailsFields = [
       {
         name: "Hash",
-        value: <Copyable value={hash} label="Copy Hash" />,
+        value: <Copyable value={hash} tooltipText="Copy Hash" />,
       },
       { name: "Status", value: <BlockStatus blockNumber={blockNumber} /> },
       {
diff --git a/apps/web/src/pages/txs.tsx b/apps/web/src/pages/txs.tsx
index 3d62e79bb..baf4a323b 100644
--- a/apps/web/src/pages/txs.tsx
+++ b/apps/web/src/pages/txs.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { NextPage } from "next";
 
-import { CopyableLink } from "~/components/CopyableLink";
+import { Copyable } from "~/components/Copyable";
 import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay";
 import { Filters } from "~/components/Filters";
 import { Header } from "~/components/Header";
@@ -167,9 +167,11 @@ const Txs: NextPage = function () {
                   cells: [
                     {
                       item: (
-                        <Link href={buildBlobRoute(b.versionedHash)}>
-                          {b.versionedHash}
-                        </Link>
+                        <Copyable
+                          href={buildBlobRoute(b.versionedHash)}
+                          value={b.versionedHash}
+                          tooltipText="Copy blob versioned hash"
+                        />
                       ),
                     },
                     {
@@ -199,13 +201,13 @@ const Txs: NextPage = function () {
             cells: [
               {
                 item: (
-                  <CopyableLink
+                  <Copyable
                     href={buildTransactionRoute(hash)}
                     value={hash}
                     tooltipText="Copy hash"
                   >
                     {shortenAddress(hash, 6)}
-                  </CopyableLink>
+                  </Copyable>
                 ),
               },
               {
@@ -222,24 +224,24 @@ const Txs: NextPage = function () {
               },
               {
                 item: (
-                  <CopyableLink
+                  <Copyable
                     href={buildAddressRoute(from)}
                     value={from}
                     tooltipText="Copy the origin address"
                   >
                     {shortenAddress(from, 6)}
-                  </CopyableLink>
+                  </Copyable>
                 ),
               },
               {
                 item: (
-                  <CopyableLink
+                  <Copyable
                     href={buildAddressRoute(to)}
                     value={to}
                     tooltipText="Copy the destination address"
                   >
                     {shortenAddress(to, 6)}
-                  </CopyableLink>
+                  </Copyable>
                 ),
               },
               {

From 7aeda7f3df9453c0f8b525e32b848ee86b9e7236 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Fri, 8 Nov 2024 09:41:00 +0700
Subject: [PATCH 5/9] feat(web): add copyable behaviour to blob hash in block
 details

---
 .../Cards/SurfaceCards/BlobTransactionCard.tsx           | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx
index 110c0938b..a7d8a8af0 100644
--- a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx
+++ b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx
@@ -3,6 +3,7 @@ import type { FC } from "react";
 import { ArrowRightIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 
 import { Collapsable } from "~/components/Collapsable";
+import { Copyable } from "~/components/Copyable";
 import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay";
 import { IconButton } from "~/components/IconButton";
 import { RollupIcon } from "~/components/RollupIcon";
@@ -219,9 +220,11 @@ const BlobTransactionCard: FC<BlobTransactionCardProps> = function ({
                 <React.Fragment key={`${versionedHash}-${index}`}>
                   <TableCol>{index}</TableCol>
                   <TableCol>
-                    <Link href={buildBlobRoute(versionedHash)}>
-                      {versionedHash}
-                    </Link>
+                    <Copyable
+                      href={buildBlobRoute(versionedHash)}
+                      value={versionedHash}
+                      tooltipText="Copy blob versiones hash"
+                    />
                   </TableCol>
                   <TableCol>{formatBytes(size)}</TableCol>
                 </React.Fragment>

From e0a210310ab33370a19926c7632fea05fb4688d5 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Fri, 8 Nov 2024 09:47:55 +0700
Subject: [PATCH 6/9] fix(web): fix CopyableToClipBoard bug when label is not
 set

---
 .../Cards/SurfaceCards/BlobTransactionCard.tsx        |  1 -
 apps/web/src/components/CopyToClipboard.tsx           | 11 ++++++++---
 apps/web/src/components/Copyable.tsx                  |  2 +-
 apps/web/src/pages/blob/[hash].tsx                    |  7 +++++--
 apps/web/src/pages/tx/[hash].tsx                      |  8 ++++----
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx
index a7d8a8af0..b9479fba7 100644
--- a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx
+++ b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx
@@ -223,7 +223,6 @@ const BlobTransactionCard: FC<BlobTransactionCardProps> = function ({
                     <Copyable
                       href={buildBlobRoute(versionedHash)}
                       value={versionedHash}
-                      tooltipText="Copy blob versiones hash"
                     />
                   </TableCol>
                   <TableCol>{formatBytes(size)}</TableCol>
diff --git a/apps/web/src/components/CopyToClipboard.tsx b/apps/web/src/components/CopyToClipboard.tsx
index 99472037b..0fa0523b9 100644
--- a/apps/web/src/components/CopyToClipboard.tsx
+++ b/apps/web/src/components/CopyToClipboard.tsx
@@ -6,11 +6,14 @@ import Copy from "~/icons/copy.svg";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip";
 
 type CopyToClipboardProps = {
-  label?: string;
+  tooltipText?: string;
   value: string;
 };
 
-export const CopyToClipboard: FC<CopyToClipboardProps> = ({ label, value }) => {
+export const CopyToClipboard: FC<CopyToClipboardProps> = ({
+  tooltipText,
+  value,
+}) => {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
@@ -21,7 +24,9 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ label, value }) => {
         }
       }}
     >
-      <TooltipContent>{isCopied ? "Copied!" : label}</TooltipContent>
+      {(tooltipText || isCopied) && (
+        <TooltipContent>{isCopied ? "Copied!" : tooltipText}</TooltipContent>
+      )}
       <TooltipTrigger
         className="text-contentTertiary-light hover:text-link-light dark:text-contentTertiary-dark dark:hover:text-link-dark"
         onClick={async () => {
diff --git a/apps/web/src/components/Copyable.tsx b/apps/web/src/components/Copyable.tsx
index 329306553..40855803d 100644
--- a/apps/web/src/components/Copyable.tsx
+++ b/apps/web/src/components/Copyable.tsx
@@ -24,7 +24,7 @@ export const Copyable: FC<CopyableProps> = ({
       ) : (
         <div className="truncate">{children || value}</div>
       )}
-      <CopyToClipboard value={value} label={tooltipText} />
+      <CopyToClipboard value={value} tooltipText={tooltipText} />
     </div>
   );
 };
diff --git a/apps/web/src/pages/blob/[hash].tsx b/apps/web/src/pages/blob/[hash].tsx
index 14da6fb7a..575593d0d 100644
--- a/apps/web/src/pages/blob/[hash].tsx
+++ b/apps/web/src/pages/blob/[hash].tsx
@@ -151,7 +151,7 @@ const Blob: NextPage = function () {
                   title={txHash}
                 >
                   {<Link href={buildTransactionRoute(txHash)}>{txHash}</Link>}
-                  <CopyToClipboard value={txHash} label="Copy tx hash" />
+                  <CopyToClipboard value={txHash} tooltipText="Copy tx hash" />
                 </div>
               </div>
               <div className="flex gap-1">
@@ -179,7 +179,10 @@ const Blob: NextPage = function () {
             <div>Blob Data</div>
             {blob && (
               <div className="flex items-center gap-4">
-                <CopyToClipboard label="Copy blob data" value={blob.data} />
+                <CopyToClipboard
+                  tooltipText="Copy blob data"
+                  value={blob.data}
+                />
                 <div className="flex items-center gap-2">
                   <div className="text-sm font-normal text-contentSecondary-light dark:text-contentSecondary-dark">
                     View as:
diff --git a/apps/web/src/pages/tx/[hash].tsx b/apps/web/src/pages/tx/[hash].tsx
index 543cab537..bb73fe6dc 100644
--- a/apps/web/src/pages/tx/[hash].tsx
+++ b/apps/web/src/pages/tx/[hash].tsx
@@ -127,7 +127,7 @@ const Tx: NextPage = () => {
         value: (
           <div className="flex items-center gap-2">
             <Link href={buildAddressRoute(from)}>{from}</Link>
-            <CopyToClipboard value={from} label="Copy from address" />
+            <CopyToClipboard value={from} tooltipText="Copy from address" />
           </div>
         ),
       },
@@ -136,7 +136,7 @@ const Tx: NextPage = () => {
         value: (
           <div className="flex items-center gap-2">
             <Link href={buildAddressRoute(to)}>{to}</Link>
-            <CopyToClipboard value={to} label="Copy to address" />
+            <CopyToClipboard value={to} tooltipText="Copy to address" />
           </div>
         ),
       },
@@ -289,7 +289,7 @@ const Tx: NextPage = () => {
                       </Link>
                       <CopyToClipboard
                         value={"0x" + decodedData.parentL2BlockHash}
-                        label="Copy parent L2 block hash"
+                        tooltipText="Copy parent L2 block hash"
                       />
                     </div>
                   ),
@@ -309,7 +309,7 @@ const Tx: NextPage = () => {
                       </Link>
                       <CopyToClipboard
                         value={"0x" + decodedData.l1OriginBlockHash}
-                        label="Copy L1 origin block hash"
+                        tooltipText="Copy L1 origin block hash"
                       />
                     </div>
                   ),

From c6bc9ae030165048ed0d41f38317f0e7dfbb27d9 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Fri, 8 Nov 2024 09:50:18 +0700
Subject: [PATCH 7/9] chore(web): update chageset

---
 .changeset/tricky-yaks-bake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tricky-yaks-bake.md

diff --git a/.changeset/tricky-yaks-bake.md b/.changeset/tricky-yaks-bake.md
new file mode 100644
index 000000000..0401030ad
--- /dev/null
+++ b/.changeset/tricky-yaks-bake.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added copyable behavior to hashes and addresses in blob, block and transaction tables.

From 195ff47570ba48ab3919d61024ec77cbe52482d4 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Sun, 10 Nov 2024 14:10:08 +0700
Subject: [PATCH 8/9] refactor(web): reduce CopyToClipboard icon size to be
 aligned with text height

---
 apps/web/src/components/CopyToClipboard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/CopyToClipboard.tsx b/apps/web/src/components/CopyToClipboard.tsx
index 0fa0523b9..84169937f 100644
--- a/apps/web/src/components/CopyToClipboard.tsx
+++ b/apps/web/src/components/CopyToClipboard.tsx
@@ -39,9 +39,9 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({
         }}
       >
         {isCopied ? (
-          <CheckIcon className="h-5 w-5" />
+          <CheckIcon className="h-4 w-4" />
         ) : (
-          <Copy className="h-5 w-5" />
+          <Copy className="h-4 w-4" />
         )}
       </TooltipTrigger>
     </Tooltip>

From eba22480f4f0bd865a15a54b7b077f83cd7c4209 Mon Sep 17 00:00:00 2001
From: Fran Jimenez Aguilera <franjimenezaguilera@gmail.com>
Date: Sun, 10 Nov 2024 14:21:16 +0700
Subject: [PATCH 9/9] feat(web): use Copyable component in transaction details
 view

---
 apps/web/src/pages/tx/[hash].tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/pages/tx/[hash].tsx b/apps/web/src/pages/tx/[hash].tsx
index bb73fe6dc..11d462318 100644
--- a/apps/web/src/pages/tx/[hash].tsx
+++ b/apps/web/src/pages/tx/[hash].tsx
@@ -125,19 +125,21 @@ const Tx: NextPage = () => {
       {
         name: "From",
         value: (
-          <div className="flex items-center gap-2">
-            <Link href={buildAddressRoute(from)}>{from}</Link>
-            <CopyToClipboard value={from} tooltipText="Copy from address" />
-          </div>
+          <Copyable
+            href={buildAddressRoute(from)}
+            value={from}
+            tooltipText="Copy from address"
+          />
         ),
       },
       {
         name: "To",
         value: (
-          <div className="flex items-center gap-2">
-            <Link href={buildAddressRoute(to)}>{to}</Link>
-            <CopyToClipboard value={to} tooltipText="Copy to address" />
-          </div>
+          <Copyable
+            href={buildAddressRoute(to)}
+            value={to}
+            tooltipText="Copy to address"
+          />
         ),
       },
     ];