fix(web): fix CopyableToClipBoard bug when label is not set

Blobscan · Nov 8, 2024 · 98c226e · 98c226e
1 parent 7aeda7f
commit 98c226e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git 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
@@ -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,10 @@ 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/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
@@ -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>
                   ),