ENS avatar don't reset after disconnecting the wallet

components/01-atoms/DisconnectWallet.tsx

@@ -1,17 +1,24 @@
-import { PowerIcon } from "@/components/01-atoms";
+import { PowerIcon, SwapContext } from "@/components/01-atoms";
 import { useSidebar } from "@/lib/client/contexts/SidebarContext.tsx";
+import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
 import { useDisconnect } from "wagmi";
 import cc from "classcat";
 import { useTheme } from "next-themes";
+import { useContext } from "react";
 
 export const DisconnectWallet = () => {
   const { disconnect } = useDisconnect();
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === "system" ? systemTheme : theme;
   const isDark = currentTheme === "dark";
   const { toggleSidebar } = useSidebar();
+  const { authenticatedUserAddress } = useAuthenticatedUser();
+
+  const { validateAddressToSwap, setInputAddress } = useContext(SwapContext);
 
   const handleClick = () => {
+    setInputAddress("");
+    validateAddressToSwap(authenticatedUserAddress, null);
     toggleSidebar();
     disconnect();
   };

components/01-atoms/SearchBar.tsx

@@ -92,10 +92,11 @@ export const SearchBar = () => {
           name="search"
           type="search"
           className={cc([
-            `h-11 w-full border-gray-100 focus:ring-0 focus:ring-transparent focus:outline-none focus-visible:border-gray-300 placeholder:p-small text-ellipsis bg-inherit
-             border-none dark:border-none bg-transparent dark:bg-transparent contrast-50`,
+            `h-11 w-full border-gray-100 focus:ring-0 focus:ring-transparent focus:outline-none focus-visible:border-gray-300 placeholder:p-small text-ellipsis
+             border-none bg-transparent dark:border-none dark:bg-transparent contrast-50`,
           ])}
           placeholder="Search username, address or ENS"
+          value={inputAddress}
           onChange={({ target }) => setInputAddress(target.value)}
         />
       </div>

components/03-organisms/SwappingShelfs.tsx

@@ -25,7 +25,6 @@ export const SwappingShelfs = () => {
     useState<SwappingShelfID>(SwappingShelfID.THEIR_ITEMS);
 
   const {
-    validatedAddressToSwap,
     setAuthenticatedUserTokensList,
     setSearchedUserTokensList,
     setInputAddress,
@@ -35,7 +34,7 @@ export const SwappingShelfs = () => {
     setAuthenticatedUserTokensList([]);
     setSearchedUserTokensList([]);
     setInputAddress("");
-  }, [chain]);
+  }, [chain, authenticatedUserAddress]);
 
   return (
     <div className="w-full h-full dark:bg-[#212322] dark:border-[#353836] border border-[#D6D5D5] rounded-2xl dark:shadow-swap-station shadow-swap-station-light">
@@ -53,16 +52,10 @@ export const SwappingShelfs = () => {
       </div>
       <div className="p-5">
         <div className={cc([activeSwappingShelfID ? "hidden" : "block"])}>
-          <TokensShelf
-            address={validatedAddressToSwap}
-            variant={TokensShelfVariant.Their}
-          />
+          <TokensShelf variant={TokensShelfVariant.Their} />
         </div>
         <div className={cc([activeSwappingShelfID ? "block" : "hidden"])}>
-          <TokensShelf
-            address={authenticatedUserAddress}
-            variant={TokensShelfVariant.Your}
-          />
+          <TokensShelf variant={TokensShelfVariant.Your} />
         </div>
       </div>
     </div>

components/03-organisms/TokensShelf.tsx

@@ -4,7 +4,7 @@ import {
   getERC721TokensFromAddress,
   getERC20TokensFromAddress,
 } from "@/lib/client/blockchain-utils";
-import { EthereumAddress, Token } from "@/lib/shared/types";
+import { Token } from "@/lib/shared/types";
 import { TokensList } from "@/components/02-molecules";
 import { SelectUserIcon, SwapContext } from "@/components/01-atoms";
 import { useSupportedNetworks } from "@/lib/client/hooks/useSupportedNetworks";
@@ -19,7 +19,6 @@ export enum TokensShelfVariant {
 }
 
 interface TokensShelfProps {
-  address: EthereumAddress | null;
   variant: TokensShelfVariant;
 }
 
@@ -30,7 +29,7 @@ interface TokensShelfProps {
  *
  * @returns Tokens Shelf based in status of given address
  */
-export const TokensShelf = ({ address, variant }: TokensShelfProps) => {
+export const TokensShelf = ({ variant }: TokensShelfProps) => {
   const { chain } = useNetwork();
   const { isNetworkSupported } = useSupportedNetworks();
   const [allTokensList, setAllTokensList] = useState<Token[]>([]);
@@ -43,6 +42,11 @@ export const TokensShelf = ({ address, variant }: TokensShelfProps) => {
   const { validatedAddressToSwap, inputAddress, destinyChain } =
     useContext(SwapContext);
 
+  const address =
+    variant === TokensShelfVariant.Their
+      ? validatedAddressToSwap
+      : authenticatedUserAddress;
+
   const getUserTokens = async () => {
     const chainId = authenticatedUserAddress?.equals(address)
       ? chain?.id
@@ -51,7 +55,7 @@ export const TokensShelf = ({ address, variant }: TokensShelfProps) => {
     let queriedTokens: Token[] = [];
     let tokensCount = allTokensList.length;
 
-    if (address && chainId) {
+    if (address && chainId && !!authenticatedUserAddress) {
       setTokensQueryStatus(TokensQueryStatus.LOADING);
 
       Promise.all([
@@ -81,8 +85,14 @@ export const TokensShelf = ({ address, variant }: TokensShelfProps) => {
 
   // will only reload if network isNetworkSupported changes
   useEffect(() => {
-    isNetworkSupported && getUserTokens();
-  }, [address, isNetworkSupported, destinyChain]);
+    !!authenticatedUserAddress && isNetworkSupported && getUserTokens();
+  }, [
+    address,
+    isNetworkSupported,
+    authenticatedUserAddress,
+    validatedAddressToSwap,
+    destinyChain,
+  ]);
 
   const conditionallyCleanTokensList = (condition: boolean) => {
     if (condition) {