fix: UI and add toast for address copy (#133)

src/components/Atoms/Address/Address.tsx

@@ -1,20 +1,45 @@
 import { copyToClipboard, truncate } from "@/utils/functions";
 import { IconWrapper } from "@/components/Shared";
 import { type AddressProps } from "@/utils/types/atoms.types";
+import { toast } from "@/utils/hooks/use-toast";
+import { useState } from "react";
 
 export const Address: React.FC<AddressProps> = ({ address }) => {
+    const [showCopy, setShowCopy] = useState(false);
+
+    const handleCopyClick = () => {
+        toast({
+            description: "Address copied!",
+        });
+        setShowCopy(true);
+        setTimeout(() => {
+            setShowCopy(false);
+        }, 3000);
+    };
+
     return (
         <div className="flex items-center gap-x-2">
             <p>{truncate(address)}</p>
             <button
                 className="cursor-pointer"
-                onClick={() => copyToClipboard(address)}
+                onClick={() => {
+                    copyToClipboard(address);
+                }}
             >
-                <IconWrapper
-                    icon_class_name="content_copy"
-                    icon_size="text-sm"
-                    class_name="text-secondary dark:text-secondary"
-                />
+                {showCopy ? (
+                    <IconWrapper
+                        icon_class_name="done"
+                        icon_size="text-sm"
+                        class_name="text-secondary dark:text-secondary"
+                    />
+                ) : (
+                    <IconWrapper
+                        icon_class_name="content_copy"
+                        icon_size="text-sm"
+                        class_name="text-secondary dark:text-secondary"
+                        on_click={() => handleCopyClick()}
+                    />
+                )}
             </button>
         </div>
     );