feat: implement address component with clipboard functionality and loading state in form submission

Author: rokitgg

apps/nextjs/src/app/address/[address]/_components/address.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Button } from "@acme/ui/button";
+import { Check, Copy, Eye, EyeOff } from "lucide-react";
+import { useCopyToClipboard } from "~/lib/hooks/use-clipboard";
+import { toast } from "sonner";
+import { useState } from "react";
+
+export function Address({ address }: { address: string }) {
+  const [copiedText, copy, setCopiedText] = useCopyToClipboard();
+  const [hidden, setHidden] = useState(false);
+
+  const handleCopy = (text: string) => () => {
+    copy(text)
+      .then(() => {
+        toast.success("Address copied to clipboard.", {
+          duration: 1000,
+        });
+        setTimeout(() => {
+          setCopiedText(null);
+        }, 1000);
+      })
+      .catch((error) => {
+        toast.error("Something went wrong.");
+      });
+  };
+
+  const handleHide = () => {
+    setHidden(!hidden);
+  };
+
+  return (
+    <div className="flex flex-row gap-3 items-center">
+      <h2 className="text-3xl font-bold text-foreground">
+        {hidden
+          ? "*".repeat(17)
+          : `${address.slice(0, 8)}...${address.slice(-6)}`}
+      </h2>
+      <div className="flex flex-row items-center">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-full"
+          onClick={handleCopy(address)}
+        >
+          {copiedText ? (
+            <Check className="w-4 h-4 text-emerald-400" />
+          ) : (
+            <Copy className="w-4 h-4 text-muted-foreground" />
+          )}
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-full"
+          onClick={handleHide}
+        >
+          {hidden ? (
+            <EyeOff className="w-4 h-4 text-rose-600" />
+          ) : (
+            <Eye className="w-4 h-4 text-muted-foreground" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/nextjs/src/app/address/[address]/page.tsx

@@ -18,6 +18,7 @@ import {
 } from "@acme/ui/dialog";
 import Link from "next/link";
 import Image from "next/image";
+import { Address } from "./_components/address";
 
 export default async function AddressPage({
   params,
@@ -47,19 +48,7 @@ export default async function AddressPage({
           </Badge>
         </div>
         <div className="flex flex-row gap-3 w-full justify-between items-center">
-          <div className="flex flex-row gap-3 items-center">
-            <h2 className="text-3xl font-bold text-foreground">
-              {`${address.slice(0, 8)}...${address.slice(-6)}`}
-            </h2>
-            <div className="flex flex-row items-center">
-              <Button variant="ghost" size="icon" className="rounded-full">
-                <Copy className="w-4 h-4 text-muted-foreground" />
-              </Button>
-              <Button variant="ghost" size="icon" className="rounded-full">
-                <Eye className="w-4 h-4 text-muted-foreground" />
-              </Button>
-            </div>
-          </div>
+          <Address address={address} />
           <div className="flex flex-row gap-3 items-center">
             <Link
               href="/"

apps/nextjs/src/app/page.tsx

@@ -18,6 +18,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowRight, Loader, Search } from "lucide-react";
 import { Button } from "@acme/ui/button";
+import { useState } from "react";
 
 const formSchema = z.object({
   address: z
@@ -33,14 +34,15 @@ const formSchema = z.object({
 
 export default function HomePage() {
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: { address: "" },
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    await new Promise((resolve) => setTimeout(resolve, 300));
+    setIsLoading(true);
 
     if (!values.address) {
       return form.setError("address", {
@@ -106,7 +108,7 @@ export default function HomePage() {
                           type="submit"
                           disabled={form.formState.isSubmitting}
                         >
-                          {form.formState.isSubmitting ? (
+                          {isLoading ? (
                             <Loader className="animate-spin" />
                           ) : (
                             <ArrowRight

apps/nextjs/src/lib/hooks/use-clipboard.ts

@@ -0,0 +1,33 @@
+import { useCallback, useState } from "react";
+
+type CopiedValue = string | null;
+
+type CopyFn = (text: string) => Promise<boolean>;
+
+export function useCopyToClipboard(): [
+  CopiedValue,
+  CopyFn,
+  (value: CopiedValue) => void,
+] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = useCallback(async (text) => {
+    if (!navigator?.clipboard) {
+      console.warn("Clipboard not supported");
+      return false;
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn("Copy failed", error);
+      setCopiedText(null);
+      return false;
+    }
+  }, []);
+
+  return [copiedText, copy, setCopiedText];
+}