feat: added copy feature for addresses and keys

frontend/src/app/components/BurnerWallet/BurnerWallet.tsx

@@ -5,6 +5,7 @@ import AssetTransferModal from "../AssetTransferModal";
 import ConnectionModal from "../ConnectionModal";
 import { useAccount, useBalance } from "@starknet-react/core";
 import { Account, RpcProvider } from "starknet";
+import CopyButton from "../CopyButton";
 
 interface IWallet {
   address: string;
@@ -36,11 +37,6 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
     token: "0x4718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
   });
 
-  useEffect(() => {
-    console.log("eth balance.....", ethBalance);
-    console.log("strk balance....", strkBalance);
-  }, [ethBalance, strkBalance]);
-
   function handleConnect() {
     const provider = new RpcProvider({
       nodeUrl:
@@ -54,8 +50,6 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
     setAccount(account);
     setIsConnected(true);
     setIsConnecting(false);
-
-    console.log("account connected");
   }
 
   return (
@@ -103,12 +97,15 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
             </span>
           </h2>
         </div>
-        <h3>
-          {wallet.address
-            .slice(0, 12)
-            .concat("....")
-            .concat(wallet.address.slice(-6))}
-        </h3>
+        <div className="flex items-center gap-x-4">
+          <h3>
+            {wallet.address
+              .slice(0, 7)
+              .concat("....")
+              .concat(wallet.address.slice(-6))}
+          </h3>
+          <CopyButton data={wallet.address} />
+        </div>
       </div>
       <div className="mt-[80px] flex  gap-[60px] justify-center">
         {isConnected ? (

frontend/src/app/components/ConnectionModal.tsx

@@ -1,4 +1,5 @@
 "use client";
+import CopyButton from "./CopyButton";
 import GenericModal from "./GenericModal";
 import { useEffect, useState } from "react";
 
@@ -62,10 +63,13 @@ function ConnectionModal({ isOpen, onClose, handleConnect, wallet }: Props) {
         </button>
       </div>
       <h1 className="text-[24px] mb-2 font-semibold ">Connect Account</h1>
-      <form action="">
+      <form>
         <div className="flex flex-col gap-y-5 ">
           <div className="flex flex-col gap-y-2">
-            <h2>Private Key</h2>
+            <div className="flex items-center justify-between">
+              <h2>Private Key</h2>
+              <CopyButton data={wallet.privateKey} />
+            </div>
             <input
               type="text"
               placeholder="Enter Private Key"
@@ -76,7 +80,10 @@ function ConnectionModal({ isOpen, onClose, handleConnect, wallet }: Props) {
           </div>
 
           <div className="flex flex-col gap-y-2">
-            <h2>Account Address</h2>
+            <div className="flex items-center justify-between">
+              <h2>Account Address</h2>
+              <CopyButton data={wallet.address} />
+            </div>
             <input
               type="text"
               placeholder="Enter Account Address"
@@ -89,6 +96,7 @@ function ConnectionModal({ isOpen, onClose, handleConnect, wallet }: Props) {
 
         <button
           className="w-full mt-7 py-3 bg-[#3b81f6] rounded font-bold flex items-center gap-x-2 justify-center disabled:cursor-not-allowed"
+          type="submit"
           onClick={handleConnect}
         >
           Connect

frontend/src/app/components/CopyButton.tsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+type Props = {
+  data: string;
+};
+
+function CopyButton({ data }: Props) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setIsCopied(false);
+    }, 1500);
+
+    return () => clearTimeout(id);
+  }, [isCopied]);
+
+  function handleCopyClick() {
+    if (!data) return;
+    navigator.clipboard.writeText(data);
+    setIsCopied(true);
+  }
+
+  if (!data) {
+    return null;
+  }
+  return (
+    <button
+      onClick={(e) => {
+        e.preventDefault();
+        handleCopyClick();
+      }}
+      className="dark:bg-black p-1 rounded-sm bg-[#333]"
+    >
+      <Image
+        src={isCopied ? "/assets/tick.svg" : "/assets/copy.svg"}
+        width={20}
+        height={20}
+        alt="#"
+      />
+    </button>
+  );
+}
+
+export default CopyButton;