Copy to clipboard

.changeset/wise-donkeys-smile.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added CopyToClipboard component

apps/web/src/components/CopyToClipboard.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from "react";
+import { CheckIcon } from "@heroicons/react/24/outline";
+
+import { useHover } from "~/hooks/useHover";
+import Copy from "~/icons/copy.svg";
+import { Tooltip } from "./Tooltip";
+
+type CopyToClipboardProps = {
+  label?: string;
+  value: string;
+};
+
+export function CopyToClipboard({
+  label = "Copy to clipboard",
+  value,
+}: CopyToClipboardProps) {
+  const [isCopied, setCopied] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const isHovered = useHover(buttonRef);
+  useEffect(() => setCopied(false), [isHovered]);
+
+  return (
+    // TODO: Use Button component
+    <button
+      ref={buttonRef}
+      className="relative cursor-pointer text-contentTertiary-light hover:text-link-light dark:text-contentTertiary-dark dark:hover:text-link-dark"
+      onClick={() => {
+        navigator.clipboard.writeText(value);
+        setCopied(true);
+      }}
+    >
+      {isCopied ? (
+        <CheckIcon className="h-5 w-5" />
+      ) : (
+        <Copy className="h-5 w-5" />
+      )}
+      <Tooltip show={isHovered}>
+        <div className="whitespace-nowrap">{isCopied ? "Copied!" : label}</div>
+      </Tooltip>
+    </button>
+  );
+}
+
+export function Copyable({ label, value }: CopyToClipboardProps) {
+  return (
+    <div className="flex items-center gap-2">
+      {value}
+      <CopyToClipboard value={value} label={label} />
+    </div>
+  );
+}

apps/web/src/components/InfoGrid.tsx

@@ -34,9 +34,7 @@ export const InfoGrid: React.FC<InfoGridProps> = function ({ fields }) {
         : fields.map(({ name, value }, i) => (
             <Fragment key={i}>
               <div className="font-semibold dark:text-coolGray-400">{name}</div>
-              <div className="col-span-3 overflow-hidden break-words text-sm">
-                {value}
-              </div>
+              <div className="col-span-3 break-words text-sm">{value}</div>
             </Fragment>
           ))}
     </div>

apps/web/src/components/Tooltip.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+type TooltipProps = {
+  show: boolean;
+  children: ReactNode;
+};
+
+export function Tooltip({ show, children }: TooltipProps) {
+  return (
+    <div
+      className={`pointer-events-none absolute -top-2 left-[50%] z-10 -translate-x-[50%] translate-y-[-100%] ${
+        show ? "opacity-100" : "opacity-0"
+      }`}
+    >
+      <div className="rounded-full bg-accent-light px-3 py-1.5 text-xs text-white dark:bg-primary-500">
+        {children}
+      </div>
+      <div className="absolute bottom-0 left-[50%] h-2 w-2 -translate-x-[50%] translate-y-[50%] rotate-45 bg-accent-light dark:bg-primary-500" />
+    </div>
+  );
+}

apps/web/src/pages/blob/[hash].tsx

@@ -11,6 +11,7 @@ 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 { Dropdown } from "~/components/Dropdown";
 import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
@@ -87,9 +88,18 @@ const Blob: NextPage = function () {
       });
     }
     detailsFields.push(
-      { name: "Versioned Hash", value: blob.versionedHash },
-      { name: "Commitment", value: blob.commitment },
-      { name: "Proof", value: blob.proof }
+      {
+        name: "Versioned Hash",
+        value: <Copyable value={blob.versionedHash} />,
+      },
+      {
+        name: "Commitment",
+        value: <Copyable value={blob.commitment} label="Copy commitment" />,
+      },
+      {
+        name: "Proof",
+        value: <Copyable value={blob.proof} label="Copy proof" />,
+      }
     );
 
     detailsFields.push({ name: "Size", value: formatBytes(blob.size) });
@@ -117,7 +127,10 @@ const Blob: NextPage = function () {
                 <div className="text-contentSecondary-light dark:text-contentSecondary-dark">
                   Tx{" "}
                 </div>
-                <Link href={buildTransactionRoute(txHash)}>{txHash}</Link>
+                <div className="flex items-center gap-2">
+                  {<Link href={buildTransactionRoute(txHash)}>{txHash}</Link>}
+                  <CopyToClipboard value={txHash} label="Copy tx hash" />
+                </div>
               </div>
               <div className="flex gap-1">
                 <div className="text-contentSecondary-light dark:text-contentSecondary-dark">
@@ -143,17 +156,20 @@ const Blob: NextPage = function () {
           <div className="flex items-center justify-between">
             <div>Blob Data</div>
             {blob && (
-              <div className="flex items-center gap-2">
-                <div className="text-sm font-normal text-contentSecondary-light dark:text-contentSecondary-dark">
-                  View as:
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <div className="text-sm font-normal text-contentSecondary-light dark:text-contentSecondary-dark">
+                    View as:
+                  </div>
+                  <Dropdown
+                    items={blobViewModes}
+                    selected={selectedBlobViewMode}
+                    onChange={(newViewMode) =>
+                      setSelectedBlobViewMode(newViewMode as BlobViewMode)
+                    }
+                  />
                 </div>
-                <Dropdown
-                  items={blobViewModes}
-                  selected={selectedBlobViewMode}
-                  onChange={(newViewMode) =>
-                    setSelectedBlobViewMode(newViewMode as BlobViewMode)
-                  }
-                />
+                <CopyToClipboard label="Copy blob data" value={blob.data} />
               </div>
             )}
           </div>

apps/web/src/pages/block/[id].tsx

@@ -5,6 +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 { BlobGasUsageDisplay } from "~/components/Displays/BlobGasUsageDisplay";
 import { StandardEtherUnitDisplay } from "~/components/Displays/StandardEtherUnitDisplay";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
@@ -78,7 +79,10 @@ const Block: NextPage = function () {
 
     detailsFields = [
       { name: "Block Height", value: blockData.number },
-      { name: "Hash", value: blockData.hash },
+      {
+        name: "Hash",
+        value: <Copyable value={blockData.hash} label="Copy Hash" />,
+      },
       {
         name: "Timestamp",
         value: (

apps/web/src/pages/tx/[hash].tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 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 { StandardEtherUnitDisplay } from "~/components/Displays/StandardEtherUnitDisplay";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
 import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
@@ -80,7 +81,7 @@ const Tx: NextPage = () => {
     detailsFields = [
       {
         name: "Hash",
-        value: hash,
+        value: <Copyable value={hash} label="Copy Hash" />,
       },
       {
         name: "Block",
@@ -100,11 +101,21 @@ const Tx: NextPage = () => {
       },
       {
         name: "From",
-        value: <Link href={buildAddressRoute(from)}>{from}</Link>,
+        value: (
+          <div className="flex items-center gap-2">
+            <Link href={buildAddressRoute(from)}>{from}</Link>
+            <CopyToClipboard value={from} label="Copy from address" />
+          </div>
+        ),
       },
       {
         name: "To",
-        value: <Link href={buildAddressRoute(to)}>{to}</Link>,
+        value: (
+          <div className="flex items-center gap-2">
+            <Link href={buildAddressRoute(to)}>{to}</Link>
+            <CopyToClipboard value={to} label="Copy to address" />
+          </div>
+        ),
       },
     ];