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 = () => {
-
+
{enableSidebar ? : }
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 (
{({ isConnected, show, truncatedAddress, address, ensName }) => {
- if (ensName && address) setEnsNameStore(ensName, address);
-
return (