Fix/ens name

components/01-atoms/ENSAvatar.tsx

@@ -1,4 +1,24 @@
+/**
+ * @deprecated This component is deprecated because the searched Ethereum addresses
+ * are not always returning the relative ENS primary names, which negatively impacts the user experience
+ * in the application.
+ *
+ * The `ENSAvatar` component is responsible for displaying an Ethereum Name Service (ENS)
+ * avatar based on the provided Ethereum address. It supports two sizes: small and medium.
+ *
+ * The component uses the `useEnsData` hook to fetch the avatar data. Depending on the
+ * status of the query, it either shows a loading indicator, an error icon, or the
+ * fetched avatar image.
+ *
+ * @component
+ * @param {EthereumAddress} avatarETHAddress - The Ethereum address to fetch the avatar for.
+ * @param {ENSAvatarSize} ENSAvatarSize - The size of the avatar to display. Defaults to ENSAvatarSize.MEDIUM
+ *
+ * @returns {JSX.Element} The rendered ENS avatar component.
+ */
 /* eslint-disable react-hooks/exhaustive-deps */
+
+/**
 import { LoadingIndicator, PersonIcon } from "@/components/01-atoms";
 import {
   ENSAvatarQueryStatus,
@@ -101,3 +121,5 @@ export const ENSAvatar = ({
     </div>
   );
 };
+
+ */

components/01-atoms/SearchBar.tsx

@@ -5,23 +5,35 @@ import { ForWhom } from "../03-organisms";
 import { MagnifyingGlassIcon } from "@/components/01-atoms";
 import { EthereumAddress } from "@/lib/shared/types";
 import { ADDRESS_ZERO } from "@/lib/client/constants";
-import { normalizeENSName } from "@/lib/client/blockchain-utils";
 import { SwapContext } from "@/lib/client/contexts";
 import { useContext, useEffect } from "react";
-import { ENS } from "web3-eth-ens";
-import Web3 from "web3";
 import toast from "react-hot-toast";
 
+/**
+ * @deprecated
+ * The Ethereum address related ENS primary name getter function is
+ * under refactoring, thus, this feature is currently commented out.
+ *
+ * import { normalizeENSName } from "@/lib/client/blockchain-utils";
+ * import { ENS } from "web3-eth-ens";
+ * import Web3 from "web3";
+ */
+
 export const SearchBar = () => {
   if (!process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP) {
     throw new Error(
       "Cannot get the ENS primary name`s address without an Alchemy API Key",
     );
   }
-  const provider = new Web3.providers.HttpProvider(
-    process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP,
-  );
-  const ens = new ENS(undefined, provider);
+  /**
+   * The Ethereum address related ENS primary name getter function is
+   * under refactoring, thus, this feature is currently commented out.
+   *
+   * const provider = new Web3.providers.HttpProvider(
+   *  process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP,
+   * );
+   * const ens = new ENS(undefined, provider);
+   */
 
   const {
     lastWalletConnected,
@@ -75,19 +87,32 @@ export const SearchBar = () => {
 
   const getUserAddress = async () => {
     if (lastWalletConnected && inputAddress.length > 2) {
-      const _inputAddress = inputAddress;
-      const formattedAddress = normalizeENSName(inputAddress);
+      /**
+       * @deprecated
+       * The Ethereum address related ENS primary name getter function is
+       * under refactoring, thus, this feature is currently commented out.
+       *
+       * const _inputAddress = inputAddress;
+       * const formattedAddress = normalizeENSName(inputAddress);
+       */
 
       try {
-        const address: unknown = await ens.getOwner(formattedAddress);
-        if (typeof address !== "string") {
-          toast.error(
-            "Wrong type of address returned by provider. Please contact the team",
-          );
-          return;
-        }
+        /**
+         * @deprecated
+         * The Ethereum address related ENS primary name getter function is
+         * under refactoring, thus, this feature is currently commented out.
+         *
+         * const address: unknown = await ens.getOwner(formattedAddress);
+         * if (typeof address !== "string") {
+         * toast.error(
+         *  "Wrong type of address returned by provider. Please contact the team",
+         * );
+         * return;
+         * }
+         */
+
         validateAddressToSwap(
-          address === ADDRESS_ZERO ? _inputAddress : address,
+          inputAddress !== ADDRESS_ZERO ? inputAddress : ADDRESS_ZERO,
         );
       } catch (error) {
         toast.error("Invalid Ethereum Address");

components/01-atoms/index.ts

@@ -3,7 +3,10 @@ export * from "./ApproveTokenCards";
 export * from "./BlockExplorerExternalLinkButton";
 export * from "./ConnectWallet";
 export * from "./DisconnectWallet";
-export * from "./ENSAvatar";
+/**
+*  This export is commented out from dApp's features for now.
+*  export * from "./ENSAvatar";
+*/
 export * from "./LoadingIndicator";
 export * from "./NetworkDropdown";
 export * from "./MobileNotSupported";

components/02-molecules/EnsNameAndAddressWallet.tsx

@@ -1,17 +1,35 @@
+/**
+ *
+ * Component that displays the authenticated user's ENS name and address wallet.
+ *
+ * This component utilizes the `useAuthenticatedUser` hook to retrieve the authenticated user's address.
+ * It also includes commented sections that are intended for future use with ENS (Ethereum Name Service) data.
+ *
+ * The commented sections include:
+ * - `useEnsData` hook: This hook is used to fetch ENS data, such as the primary name associated with an address.
+ * - `ENSAvatar` component: This component is used to display the ENS avatar for a given address.
+ *
+ * @deprecated
+ * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address.
+ *
+ * The component renders a copy address button and a block explorer external link button if the authenticated user's address is available.
+ *
+ * import { useEnsData } from "@/lib/client/hooks/useENSData";
+ * import { ENSAvatar  } from "@/components/01-atoms";
+ */
+
 import { CopyAdressButton } from "@/components/02-molecules";
-import {
-  BlockExplorerExternalLinkButton,
-  ENSAvatar,
-} from "@/components/01-atoms";
+import { BlockExplorerExternalLinkButton } from "@/components/01-atoms";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
-import { useEnsData } from "@/lib/client/hooks/useENSData";
 
 export const EnsNameAndAddressWallet = () => {
   const { authenticatedUserAddress } = useAuthenticatedUser();
 
+  /**
   const { primaryName } = useEnsData({
     ensAddress: authenticatedUserAddress,
   });
+  */
 
   if (!authenticatedUserAddress) return null;
 
@@ -21,17 +39,23 @@ export const EnsNameAndAddressWallet = () => {
     <div className="flex gap-3 pb-5">
       {authenticatedUserAddress && (
         <>
-          <ENSAvatar avatarENSAddress={authenticatedUserAddress} />
+          {/**
+           * @deprecated
+           * The Ethereum address related ENS primary name getter function is
+           * under refactoring, thus, this feature is currently commented out.
+           *
+           * <ENSAvatar avatarENSAddress={authenticatedUserAddress} />
+           */}
           <div className="flex flex-col">
             <div className="flex items-center justify-start gap-2">
-              {primaryName && (
+              {/* {primaryName && (
                 <>
                   <h3 className="text-sm ">{`${primaryName}`}</h3>
                   <h3 className="text-sm text-softGray dark:text-mediumGray">
                     |
                   </h3>
                 </>
-              )}
+              )} */}
               <CopyAdressButton
                 authenticatedUserAddress={authenticatedUserAddress.toString()}
                 displayAddress={displayAddress}

components/02-molecules/OfferSummary.tsx

@@ -1,5 +1,5 @@
 import { ForWhom } from "../03-organisms";
-import { ENSAvatar, ENSAvatarSize, PersonIcon } from "@/components/01-atoms";
+import { PersonIcon } from "@/components/01-atoms";
 import {
   EtherFieldAddition,
   TokenCardStyleType,
@@ -8,9 +8,35 @@ import {
 import { ADDRESS_ZERO } from "@/lib/client/constants";
 import { SwapContext } from "@/lib/client/contexts";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
-import { useEnsData } from "@/lib/client/hooks/useENSData";
+/**
+ *  @deprecated
+ *
+ *  import { useEnsData } from "@/lib/client/hooks/useENSData";
+ */
 import { useContext } from "react";
 
+/**
+ * OfferSummary component displays a summary of token offers for a given user.
+ *
+ * @param {ForWhom} variant - Specifies whether the summary is for the authenticated user or another user.
+ *
+ *
+ * @remarks
+ * This component uses the `SwapContext` to fetch the necessary data for rendering the token offers.
+ * It also utilizes the `useAuthenticatedUser` hook to get the authenticated user's address.
+ *
+ * The component conditionally renders different sections based on the `variant` prop:
+ * - If `variant` is `ForWhom.Yours`, it displays the authenticated user's token offers.
+ * - If `variant` is `ForWhom.Their`, it displays the searched user's token offers.
+ *
+ * The ENS-related sections are currently commented out due to issues with fetching the correct ENS address.
+ * These sections include:
+ * - Displaying the ENS avatar for the searched address.
+ * - Displaying the ENS name for the searched address.
+ *
+ * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address.
+ * Since the ENS are not working properly. We're commenting those sections.
+ */
 export const OfferSummary = ({ variant }: { variant: ForWhom }) => {
   const {
     validatedAddressToSwap,
@@ -24,45 +50,51 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => {
       ? authenticatedUserTokensList
       : searchedUserTokensList;
 
-  const { primaryName: searchedENSName } = useEnsData({
-    ensAddress: validatedAddressToSwap,
-  });
-  const { primaryName: authenticatedUserENSName } = useEnsData({
-    ensAddress: authenticatedUserAddress,
-  });
+  /**
+   * const { primaryName: searchedENSName } = useEnsData({
+   *  ensAddress: validatedAddressToSwap,
+   * });
+   * const { primaryName: authenticatedUserENSName } = useEnsData({
+   *  ensAddress: authenticatedUserAddress,
+   * });
+   */
 
   return (
     <div className="w-full h-full dark:bg-darkGreen border dark:border-darkGray bg-[#F0EEEE] borderlightSilver rounded-lg ">
       <div className="flex flex-col gap-4 px-4 pt-2 pb-4">
         <div className="flex justify-between items-center h-9 gap-2">
           <div className="flex space-x-2 items-center">
             <div className="flex items-center">
-              {variant === ForWhom.Their && validatedAddressToSwap ? (
-                <ENSAvatar
-                  avatarENSAddress={validatedAddressToSwap}
-                  size={ENSAvatarSize.SMALL}
+              {/* {variant === ForWhom.Their && validatedAddressToSwap ? (
+               *<ENSAvatar
+               *  avatarENSAddress={validatedAddressToSwap}
+               *  size={ENSAvatarSize.SMALL}
+               *  />
+               *) : variant === ForWhom.Yours && authenticatedUserAddress ? (
+               *  <ENSAvatar
+               *    avatarENSAddress={authenticatedUserAddress}
+               *    size={ENSAvatarSize.SMALL}
+               *  />
+               *) : ( */}
+              <div className="bg-lightSilver dark:bg-darkGray p-[5px] rounded-md">
+                <PersonIcon
+                  size="14"
+                  className="text-sageGray dark:text-mediumGray"
                 />
-              ) : variant === ForWhom.Yours && authenticatedUserAddress ? (
-                <ENSAvatar
-                  avatarENSAddress={authenticatedUserAddress}
-                  size={ENSAvatarSize.SMALL}
-                />
-              ) : (
-                <div className="bg-lightSilver dark:bg-darkGray p-[5px] rounded-md">
-                  <PersonIcon
-                    size="14"
-                    className="text-sageGray dark:text-mediumGray"
-                  />
-                </div>
-              )}
+              </div>
+              {/* )} */}
             </div>
             <div className="items-center">
               <p className="p-small-variant-black-3 dark:p-small-variant-light-2 contrast-50">
                 {variant === ForWhom.Their && validatedAddressToSwap
                   ? `${
-                      searchedENSName
-                        ? `${searchedENSName} offers`
-                        : validatedAddressToSwap
+                      /**
+                       * searchedENSName
+                       * ? `${searchedENSName} offers`
+                       *
+                       *
+                       */
+                      validatedAddressToSwap
                         ? `${
                             validatedAddressToSwap.address === ADDRESS_ZERO
                               ? "Any user offers"
@@ -75,9 +107,11 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => {
                   ? "They offer"
                   : variant === ForWhom.Yours && authenticatedUserAddress
                   ? `${
-                      authenticatedUserENSName
-                        ? `${authenticatedUserENSName} offers`
-                        : authenticatedUserAddress
+                      /**
+                       * authenticatedUserENSName
+                       * ? `${authenticatedUserENSName} offers`
+                       */
+                      authenticatedUserAddress
                         ? `${authenticatedUserAddress.getEllipsedAddress()} offers`
                         : "Connect your wallet"
                     }`

components/02-molecules/TheHeader.tsx

@@ -1,11 +1,12 @@
+/* import { ENSAvatar } from "@/components/01-atoms"; */
 import { useScreenSize } from "@/lib/client/hooks/useScreenSize";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
 import {
   ConnectWallet,
-  ENSAvatar,
   MoonIcon,
   NetworkDropdown,
   NetworkVariantPosition,
+  PersonIcon,
   SunIcon,
   SwaplaceIcon,
   SwappingIcons,
@@ -93,9 +94,13 @@ export const TheHeader = () => {
                 <Tooltip position={"left"} content={"Your wallet"}>
                   <button
                     onClick={() => toggleSidebar()}
-                    className="rounded-[10px] flex items-center justify-center"
+                    className="rounded-[10px] flex items-center justify-center w-full h-full"
                   >
-                    <ENSAvatar avatarENSAddress={authenticatedUserAddress} />
+                    {/* <ENSAvatar avatarENSAddress={authenticatedUserAddress} /> */}
+                    <PersonIcon
+                      size={"20"}
+                      className="h-full items-center justify-center flex w-full p-2 text-sageGray dark:text-mediumGray"
+                    />
                   </button>
                 </Tooltip>
               ) : (