From 9162a1f92be5f77edadfa2cc46abe16284fe5423 Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.xyz>
Date: Thu, 18 May 2023 16:39:57 -0300
Subject: [PATCH] fix: fix wallet button (#263)

* fix: refactor connect button wallet to fix warning

* chore: remove unused component
---
 ui/src/components/layout/nav-bar/nav-bar.tsx  |  4 +--
 ...n.tsx => navbar-connect-wallet-button.tsx} | 17 ++++++++----
 .../explore-list/nfa-search.fragment.tsx      |  2 +-
 .../wallet-step/connect-wallet-button.tsx     | 27 ++++++++++---------
 4 files changed, 30 insertions(+), 20 deletions(-)
 rename ui/src/components/layout/nav-bar/{connect-wallet-button.tsx => navbar-connect-wallet-button.tsx} (71%)

diff --git a/ui/src/components/layout/nav-bar/nav-bar.tsx b/ui/src/components/layout/nav-bar/nav-bar.tsx
index efbc1c1..b01ab99 100644
--- a/ui/src/components/layout/nav-bar/nav-bar.tsx
+++ b/ui/src/components/layout/nav-bar/nav-bar.tsx
@@ -1,8 +1,8 @@
 import { useMediaQuery } from '@/hooks';
 
-import { ConnectWalletButton } from './connect-wallet-button';
 import { Logo } from './logo';
 import { NavBarStyles as Styles } from './nav-bar.styles';
+import { NavBarConnectWalletButton } from './navbar-connect-wallet-button';
 import { Navigation } from './navigation';
 import { Sidebar } from './sidebar';
 
@@ -13,7 +13,7 @@ export const NavBar: React.FC = () => {
     <Styles.Container>
       <Styles.Content>
         <Logo />
-        <ConnectWalletButton />
+        <NavBarConnectWalletButton />
         {enableSidebar ? <Sidebar /> : <Navigation />}
       </Styles.Content>
     </Styles.Container>
diff --git a/ui/src/components/layout/nav-bar/connect-wallet-button.tsx b/ui/src/components/layout/nav-bar/navbar-connect-wallet-button.tsx
similarity index 71%
rename from ui/src/components/layout/nav-bar/connect-wallet-button.tsx
rename to ui/src/components/layout/nav-bar/navbar-connect-wallet-button.tsx
index 7a12e55..166b4db 100644
--- a/ui/src/components/layout/nav-bar/connect-wallet-button.tsx
+++ b/ui/src/components/layout/nav-bar/navbar-connect-wallet-button.tsx
@@ -1,15 +1,24 @@
 import { Avatar, ConnectKitButton } from 'connectkit';
+import { useEffect } from 'react';
+import { useAccount, useEnsName } from 'wagmi';
 
 import { Button, Flex } from '@/components';
 import { ENSActions, useAppDispatch, useENSStore } from '@/store';
 
-export const ConnectWalletButton: React.FC = () => {
+export const NavBarConnectWalletButton: React.FC = () => {
   const { addressMap } = useENSStore();
+  const { address } = useAccount();
+  const { data: ensName } = useEnsName({
+    address,
+  });
   const dispatch = useAppDispatch();
 
-  const setEnsNameStore = (ensName: string, address: string): void => {
+  useEffect(() => {
+    if (address === undefined) return;
+
     const stored = addressMap[address] || {};
     if (typeof stored.state !== 'undefined') return;
+    if (ensName === null) return;
 
     dispatch(
       ENSActions.setAddress({
@@ -17,13 +26,11 @@ export const ConnectWalletButton: React.FC = () => {
         value: { state: 'success', value: ensName },
       })
     );
-  };
+  }, [address, addressMap, dispatch, ensName]);
 
   return (
     <ConnectKitButton.Custom>
       {({ isConnected, show, truncatedAddress, address, ensName }) => {
-        if (ensName && address) setEnsNameStore(ensName, address);
-
         return (
           <Button onClick={show} css={{ gridArea: 'wallet' }}>
             {isConnected && !!address && !!truncatedAddress ? (
diff --git a/ui/src/views/explore/explore-list/nfa-search.fragment.tsx b/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
index 2f1f5a7..9eee744 100644
--- a/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
+++ b/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/client';
 import { useState } from 'react';
 
-import { Combobox, Flex, Icon, InputGroup, InputGroupText } from '@/components';
+import { Combobox, InputGroup, InputGroupText } from '@/components';
 import { totalTokensDocument } from '@/graphclient';
 import { useDebounce } from '@/hooks';
 import { FleekERC721 } from '@/integrations/ethereum/contracts';
diff --git a/ui/src/views/mint/wallet-step/connect-wallet-button.tsx b/ui/src/views/mint/wallet-step/connect-wallet-button.tsx
index 273747e..ef054cc 100644
--- a/ui/src/views/mint/wallet-step/connect-wallet-button.tsx
+++ b/ui/src/views/mint/wallet-step/connect-wallet-button.tsx
@@ -1,26 +1,29 @@
 import { ConnectKitButton } from 'connectkit';
+import { useEffect } from 'react';
+import { useAccount } from 'wagmi';
 
 import { Stepper } from '@/components';
 
 import { ButtonConnection } from '../button-connection';
 
 export const ConnectWalletButton: React.FC = () => {
+  const { address } = useAccount();
   const { nextStep } = Stepper.useContext();
 
+  useEffect(() => {
+    if (address) nextStep();
+  }, [address, nextStep]);
+
   return (
     <ConnectKitButton.Custom>
-      {({ isConnected, show, address }) => {
-        if (isConnected && address) {
-          nextStep();
-        } else {
-          return (
-            <ButtonConnection
-              icon={'ethereum'}
-              label={'Connect Wallet'}
-              onClick={show}
-            />
-          );
-        }
+      {({ show }) => {
+        return (
+          <ButtonConnection
+            icon={'ethereum'}
+            label={'Connect Wallet'}
+            onClick={show}
+          />
+        );
       }}
     </ConnectKitButton.Custom>
   );