Fix copy

frontend/src/components/ClickToCopy.tsx

@@ -0,0 +1,45 @@
+/// TODO: add this to the ui library/change the current one
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@ethui/ui/components/shadcn/tooltip";
+import { Copy } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface ClickToCopyProps {
+  text: string;
+  className?: string;
+}
+
+export function ClickToCopy({ text, className }: ClickToCopyProps) {
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timeout = setTimeout(() => {
+      setCopied(false);
+      setOpen(false);
+    }, 1500);
+    return () => clearTimeout(timeout);
+  }, [copied]);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.preventDefault();
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setOpen(true);
+  };
+
+  return (
+    <Tooltip open={open} onOpenChange={setOpen} delayDuration={40}>
+      <TooltipTrigger asChild>
+        <button type="button" onClick={handleCopy} className={className}>
+          <Copy className="h-3.5 w-3.5" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{copied ? "Copied!" : text}</TooltipContent>
+    </Tooltip>
+  );
+}

frontend/src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { TooltipProvider } from "@ethui/ui/components/shadcn/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
@@ -83,7 +84,9 @@ function ClientProviders({ children }: { children: React.ReactNode }) {
   const [queryClient] = React.useState(() => new QueryClient());
 
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>{children}</TooltipProvider>
+    </QueryClientProvider>
   );
 }
 

frontend/src/routes/_authenticated/dashboard/-components/StackCard.tsx

@@ -1,4 +1,4 @@
-import { ClickToCopy } from "@ethui/ui/components/click-to-copy";
+import { ClickToCopy } from "~/components/ClickToCopy";
 import { Button } from "@ethui/ui/components/shadcn/button";
 import {
   Card,
@@ -16,7 +16,6 @@ import {
 import { Link } from "@tanstack/react-router";
 import { formatDistanceToNow } from "date-fns";
 import {
-  Copy,
   ExternalLink,
   GitFork,
   Layers,
@@ -184,10 +183,8 @@ function UrlRow({ label, url, isExternal }: UrlRowProps) {
       <div className="flex items-center gap-0.5">
         <ClickToCopy
           text={url}
-          className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-        >
-          <Copy className="h-3.5 w-3.5" />
-        </ClickToCopy>
+          className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer"
+        />
         {isExternal && (
           <a
             href={url}