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

@@ -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>

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 ? (

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';

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>
   );