update walletConnect

aura-nw · Jun 21, 2024 · 7612fe5 · 7612fe5
1 parent 4f7f571
commit 7612fe5
Showing 1 changed file with 13 additions and 22 deletions.
diff --git a/src/app/get-aura/wallet-connect.tsx b/src/app/get-aura/wallet-connect.tsx
@@ -6,7 +6,7 @@ import { Tooltip } from "react-tooltip";
 import "./style.css";
 import { toast } from "react-toastify";
 function WalletConnectEVM() {
-  const _account = useAccount();
+  const { isConnected, address } = useAccount();
   const { disconnect } = useDisconnect();
   const toastConnected = () => toast.success("Connected.");
   const toastDisconnect = () => toast.error("Disconnected.");
@@ -23,22 +23,16 @@ function WalletConnectEVM() {
       <div className="main-container">
         <div className="flex flex-col items-center gap-6 lg:gap-16 mt-[14px]">
           <div className="xl:max-w-[867px] flex flex-col gap-10 px-2 items-center">
-            {!_account?.address ? (
+            {!isConnected ? (
               <div className="flex flex-col">
-                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[48px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">
-                  Your Journey Start Here
-                </h1>
-                <div className="text-medium-gray text-center text-xl lg:text-[20px] font-normal leading-8 max-w-[717px]">
-                  But first, let’s get you some AURA
-                </div>
+                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[48px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">Your Journey Start Here</h1>
+                <div className="text-medium-gray text-center text-xl lg:text-[20px] font-normal leading-8 max-w-[717px]">But first, let’s get you some AURA</div>
               </div>
             ) : (
               <div className="flex flex-col">
-                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[80px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">
-                  Welcome
-                </h1>
+                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[80px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">Welcome</h1>
                 <div className="flex gap-8 items-center justify-center">
-                  <div className="address">{_account?.address}</div>
+                  <div className="address">{address}</div>
                   <Image
                     data-tooltip-id="disconnect"
                     data-tooltip-content="Disconnect wallet"
@@ -54,20 +48,17 @@ function WalletConnectEVM() {
                 </div>
               </div>
             )}
-            <ConnectButton.Custom>
-              {({ account, openConnectModal }) => {
-                if (!account) {
+            {!isConnected && (
+              <ConnectButton.Custom>
+                {({ account, openConnectModal }) => {
                   return (
-                    <button
-                      onClick={openConnectModal}
-                      className={`w-fit rounded-full bg-brand-gradient hover:text-[#FD9552] hover:bg-dark-charcoal hover:bg-none hover:border hover:border-[#262320] py-4 px-8 font-semibold text-black text-lg leading-normal h-[54px] flex items-center`}
-                    >
+                    <button onClick={openConnectModal} className={`w-fit rounded-full bg-brand-gradient hover:text-[#FD9552] hover:bg-dark-charcoal hover:bg-none hover:border hover:border-[#262320] py-4 px-8 font-semibold text-black text-lg leading-normal h-[54px] flex items-center`}>
                       Connect wallet
                     </button>
                   );
-                }
-              }}
-            </ConnectButton.Custom>
+                }}
+              </ConnectButton.Custom>
+            )}
           </div>
         </div>
       </div>