From a6a302563ebb5ee27f1201e20933277ac408bcb5 Mon Sep 17 00:00:00 2001 From: vihsonic Date: Mon, 16 Dec 2024 07:54:34 +0100 Subject: [PATCH] feat: disconnect wallet feature --- package-lock.json | 23 ++++ package.json | 1 + src/assets/icons/network/copy-address.svg | 4 + src/assets/icons/network/disconnect.svg | 12 ++ .../deposit-withdraw/TokenInputComponent.tsx | 2 +- src/components/icons/CopyAddress.tsx | 19 +++ src/components/icons/Disconnect.tsx | 19 +++ src/components/layout/GNB.tsx | 11 +- src/components/modals/TokenInfoComponent.tsx | 5 +- src/components/network/NetworkList.tsx | 5 +- src/components/wallet-connect/Account.tsx | 118 +++++++++++++++--- 11 files changed, 197 insertions(+), 22 deletions(-) create mode 100644 src/assets/icons/network/copy-address.svg create mode 100644 src/assets/icons/network/disconnect.svg create mode 100644 src/components/icons/CopyAddress.tsx create mode 100644 src/components/icons/Disconnect.tsx diff --git a/package-lock.json b/package-lock.json index 0f9055d..97cc006 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,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" @@ -11095,6 +11096,28 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/react-toastify": { + "version": "10.0.6", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz", + "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/react-toastify/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/readable-stream": { "version": "4.5.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz", diff --git a/package.json b/package.json index 1d3da44..4172e91 100644 --- a/package.json +++ b/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" diff --git a/src/assets/icons/network/copy-address.svg b/src/assets/icons/network/copy-address.svg new file mode 100644 index 0000000..025b0f9 --- /dev/null +++ b/src/assets/icons/network/copy-address.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/network/disconnect.svg b/src/assets/icons/network/disconnect.svg new file mode 100644 index 0000000..490b1e6 --- /dev/null +++ b/src/assets/icons/network/disconnect.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/deposit-withdraw/TokenInputComponent.tsx b/src/components/deposit-withdraw/TokenInputComponent.tsx index 0f6a113..b24c09a 100644 --- a/src/components/deposit-withdraw/TokenInputComponent.tsx +++ b/src/components/deposit-withdraw/TokenInputComponent.tsx @@ -103,7 +103,7 @@ export const TokenInputComponent: React.FC = () => { { - if (isConnected) setIsTokenSelectModalOpen(true); + setIsTokenSelectModalOpen(true); }} /> diff --git a/src/components/icons/CopyAddress.tsx b/src/components/icons/CopyAddress.tsx new file mode 100644 index 0000000..fcecd08 --- /dev/null +++ b/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 ( + Copy Address icon + ); +}; diff --git a/src/components/icons/Disconnect.tsx b/src/components/icons/Disconnect.tsx new file mode 100644 index 0000000..44ed455 --- /dev/null +++ b/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 ( + disconnect icon + ); +}; diff --git a/src/components/layout/GNB.tsx b/src/components/layout/GNB.tsx index 3b72920..37b83cd 100644 --- a/src/components/layout/GNB.tsx +++ b/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 ( { py={"20px"} > - + router.push("/")} + > logo diff --git a/src/components/modals/TokenInfoComponent.tsx b/src/components/modals/TokenInfoComponent.tsx index 149be73..6115ce4 100644 --- a/src/components/modals/TokenInfoComponent.tsx +++ b/src/components/modals/TokenInfoComponent.tsx @@ -19,8 +19,9 @@ export const TokenInfoComponent: React.FC = ({ onClick, }) => { const [balance, setBalance] = useState(null); - const { address } = useWalletConnect(); + const { address, isConnected } = useWalletConnect(); useEffect(() => { + if (!isConnected) return; getTokenBalanceByChainId( address as `0x${string}`, token.chainId, @@ -28,7 +29,7 @@ export const TokenInfoComponent: React.FC = ({ ).then((balance) => { setBalance(balance); }); - }, [token, setBalance, address]); + }, [token, setBalance, address, isConnected]); return ( + + {isConnected ? ( + + + + ) : ( + + )} + + { + if (address) { + navigator.clipboard.writeText(address); + } + }} + > + + Copy Address + + { + disconnect(); + }} + > + + Disconnect + + + ); };