feat: disconnect wallet feature

package.json

@@ -21,6 +21,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-toastify": "^10.0.6",
     "sharp": "^0.33.5",
     "viem": "^2.21.51",
     "wagmi": "^2.13.3"

src/components/deposit-withdraw/TokenInputComponent.tsx

@@ -103,7 +103,7 @@ export const TokenInputComponent: React.FC = () => {
           <TokenSelectionComponent
             tokenSymbol={getBridgeToken(transaction)?.symbol ?? ""}
             onClick={() => {
-              if (isConnected) setIsTokenSelectModalOpen(true);
+              setIsTokenSelectModalOpen(true);
             }}
           />
         </Flex>

src/components/icons/CopyAddress.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+import CopyAddressIcon from "@/assets/icons/network/copy-address.svg";
+import Image from "next/image";
+
+export const CopyAddressIconComponent: React.FC<{
+  width?: number;
+  height?: number;
+}> = ({ width = 24, height = 24 }) => {
+  return (
+    <Image
+      src={CopyAddressIcon}
+      alt="Copy Address icon"
+      width={width}
+      height={height}
+    />
+  );
+};

src/components/icons/Disconnect.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+import DisconnectIcon from "@/assets/icons/network/disconnect.svg";
+import Image from "next/image";
+
+export const DisconnectIconComponent: React.FC<{
+  width?: number;
+  height?: number;
+}> = ({ width = 24, height = 24 }) => {
+  return (
+    <Image
+      src={DisconnectIcon}
+      alt="disconnect icon"
+      width={width}
+      height={height}
+    />
+  );
+};

src/components/layout/GNB.tsx

@@ -5,8 +5,11 @@ import { ConnectedNetworkAccount } from "../network/ConnectedNetworkAccount";
 import dynamic from "next/dynamic";
 import LogoIcon from "@/assets/icons/logo.svg";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 const GNBComponentInner = () => {
+  const router = useRouter();
+
   return (
     <Flex
       height={"80px"}
@@ -17,7 +20,13 @@ const GNBComponentInner = () => {
       py={"20px"}
     >
       <Flex position={"absolute"} left={"32px"} top={"20px"}>
-        <Flex px="16px" py="8px" gap={"8px"}>
+        <Flex
+          px="16px"
+          py="8px"
+          gap={"8px"}
+          cursor={"pointer"}
+          onClick={() => router.push("/")}
+        >
           <Flex>
             <Image src={LogoIcon} alt="logo" width={20} height={20} />
           </Flex>

src/components/modals/TokenInfoComponent.tsx

@@ -19,16 +19,17 @@ export const TokenInfoComponent: React.FC<ITokenInfoComponentProps> = ({
   onClick,
 }) => {
   const [balance, setBalance] = useState<TokenBalance | null>(null);
-  const { address } = useWalletConnect();
+  const { address, isConnected } = useWalletConnect();
   useEffect(() => {
+    if (!isConnected) return;
     getTokenBalanceByChainId(
       address as `0x${string}`,
       token.chainId,
       token.address
     ).then((balance) => {
       setBalance(balance);
     });
-  }, [token, setBalance, address]);
+  }, [token, setBalance, address, isConnected]);
   return (
     <Button
       width={"372px"}

src/components/network/NetworkList.tsx

@@ -38,9 +38,10 @@ export const NetworkListComponent: React.FC<INetworkListComponentProps> = ({
             await onSelectNetwork(chain.id);
           }}
           value={chain.name}
-          width={"100%"}
+          width={"192px"}
+          height={"32px"}
           px={"12px"}
-          py={"5.5px"}
+          py={"6px"}
           fontSize={"14px"}
           fontWeight={500}
           bgColor={"transparent"}

src/components/wallet-connect/Account.tsx

@@ -6,9 +6,17 @@ import { trimAddress } from "@/utils/address";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { Button } from "../ui/button";
+import {
+  MenuContent,
+  MenuItem,
+  MenuRoot,
+  MenuTrigger,
+} from "@/components/ui/menu";
+import { CopyAddressIconComponent } from "@/components/icons/CopyAddress";
+import { DisconnectIconComponent } from "@/components/icons/Disconnect";
 
 export const Account = () => {
-  const { address, isConnected } = useWalletConnect();
+  const { address, isConnected, disconnect } = useWalletConnect();
   const [, setIsOpen] = useAtom(walletConnectModalOpenedStatus);
   const [buttonText, setButtonText] = useState("Connect Wallet");
 
@@ -25,20 +33,98 @@ export const Account = () => {
   }, [address, isConnected]);
 
   return (
-    <Button
-      px={"12px"}
-      py={"8px"}
-      height={"46px"}
-      bgColor={"#101217"}
-      borderRadius={"8px"}
-      border={"1px solid #25282F"}
-      fontWeight={500}
-      fontSize={"16px"}
-      lineHeight={"24px"}
-      _hover={{ border: "1px solid #555A64" }}
-      onClick={handleWalletConnect}
-    >
-      {buttonText}
-    </Button>
+    <MenuRoot>
+      {isConnected ? (
+        <MenuTrigger>
+          <Button
+            px={"12px"}
+            py={"8px"}
+            height={"46px"}
+            bgColor={"#101217"}
+            borderRadius={"8px"}
+            border={"1px solid #25282F"}
+            fontWeight={500}
+            fontSize={"16px"}
+            lineHeight={"24px"}
+            _hover={{ border: "1px solid #555A64" }}
+          >
+            {buttonText}
+          </Button>
+        </MenuTrigger>
+      ) : (
+        <Button
+          px={"12px"}
+          py={"8px"}
+          height={"46px"}
+          bgColor={"#101217"}
+          borderRadius={"8px"}
+          border={"1px solid #25282F"}
+          fontWeight={500}
+          fontSize={"16px"}
+          lineHeight={"24px"}
+          _hover={{ border: "1px solid #555A64" }}
+          onClick={handleWalletConnect}
+        >
+          {buttonText}
+        </Button>
+      )}
+      <MenuContent
+        display={"flex"}
+        flexDir={"column"}
+        py={"8px"}
+        justifyContent={"flex-start"}
+        alignItems={"flex-start"}
+        gap={"12px"}
+        width={"192px"}
+        borderRadius={"6px"}
+        bgColor={"#101217"}
+        border={"1px solid #25282F"}
+      >
+        <MenuItem
+          value="Copy"
+          width={"192px"}
+          height={"32px"}
+          px={"12px"}
+          py={"6px"}
+          fontSize={"14px"}
+          fontWeight={500}
+          bgColor={"transparent"}
+          _hover={{ bgColor: "#1D1F25" }}
+          justifyContent={"flex-start"}
+          color={"#FFFFFF"}
+          cursor={"pointer"}
+          gap={"8px"}
+          onClick={() => {
+            if (address) {
+              navigator.clipboard.writeText(address);
+            }
+          }}
+        >
+          <CopyAddressIconComponent width={20} height={20} />
+          Copy Address
+        </MenuItem>
+        <MenuItem
+          value="Disconnect"
+          width={"192px"}
+          height={"32px"}
+          px={"12px"}
+          py={"6px"}
+          bgColor={"transparent"}
+          _hover={{ bgColor: "#1D1F25" }}
+          fontSize={"14px"}
+          fontWeight={500}
+          justifyContent={"flex-start"}
+          color={"#FFFFFF"}
+          cursor={"pointer"}
+          gap={"8px"}
+          onClick={() => {
+            disconnect();
+          }}
+        >
+          <DisconnectIconComponent width={20} height={20} />
+          Disconnect
+        </MenuItem>
+      </MenuContent>
+    </MenuRoot>
   );
 };