Fix/ens name

components/01-atoms/ENSAvatar.tsx

@@ -1,4 +1,24 @@
+/**
+ * @deprecated This component is deprecated because the searched ENS address
+ * sometimes returns incorrect results, which negatively impacts the user flow
+ * of the application.
+ *
+ * The `ENSAvatar` component is responsible for displaying an Ethereum Name Service (ENS)
+ * avatar based on the provided ENS 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} avatarENSAddress - The ENS address to fetch the avatar for.
+ * @param {ENSAvatarSize} [size=ENSAvatarSize.MEDIUM] - The size of the avatar to display.
+ *
+ * @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 { 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";
 
+/**
+ *
+ * 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 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);
+  /**
+
+    const provider = new Web3.providers.HttpProvider(
+      process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP,
+    );
+    const ens = new ENS(undefined, provider);
+    * 
+   */
 
   const {
     lastWalletConnected,
@@ -75,19 +87,24 @@ export const SearchBar = () => {
 
   const getUserAddress = async () => {
     if (lastWalletConnected && inputAddress.length > 2) {
-      const _inputAddress = inputAddress;
-      const formattedAddress = normalizeENSName(inputAddress);
+      /**
+        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;
         }
+           */
+
         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,7 @@ export * from "./ApproveTokenCards";
 export * from "./BlockExplorerExternalLinkButton";
 export * from "./ConnectWallet";
 export * from "./DisconnectWallet";
-export * from "./ENSAvatar";
+// 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.
+ *
+ * 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 { CopyAdressButton } from "@/components/02-molecules";
 import {
   BlockExplorerExternalLinkButton,
-  ENSAvatar,
+  /*ENSAvatar */
 } from "@/components/01-atoms";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
-import { useEnsData } from "@/lib/client/hooks/useENSData";
+/*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,17 @@ export const EnsNameAndAddressWallet = () => {
     <div className="flex gap-3 pb-5">
       {authenticatedUserAddress && (
         <>
-          <ENSAvatar avatarENSAddress={authenticatedUserAddress} />
+          {/* <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,33 @@ 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";
+// import { useEnsData } from "@/lib/client/hooks/useENSData";
 import { useContext } from "react";
 
+/**
+ * OfferSummary component displays a summary of token offers for a given user.
+ *
+ * @param {Object} props - The properties object.
+ * @param {ForWhom} props.variant - Specifies whether the summary is for the authenticated user or another user.
+ *
+ * @returns {JSX.Element} The rendered OfferSummary component.
+ *
+ * @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,20 +48,22 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => {
       ? authenticatedUserTokensList
       : searchedUserTokensList;
 
+  /**
   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 ? (
+              {/* {variant === ForWhom.Their && validatedAddressToSwap ? (
                 <ENSAvatar
                   avatarENSAddress={validatedAddressToSwap}
                   size={ENSAvatarSize.SMALL}
@@ -47,22 +73,22 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => {
                   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 className="bg-lightSilver dark:bg-darkGray p-[5px] rounded-md">
+                <PersonIcon
+                  size="14"
+                  className="text-sageGray dark:text-mediumGray"
+                />
+              </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 +101,9 @@ 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

@@ -2,10 +2,11 @@ import { useScreenSize } from "@/lib/client/hooks/useScreenSize";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
 import {
   ConnectWallet,
-  ENSAvatar,
+  // ENSAvatar,
   MoonIcon,
   NetworkDropdown,
   NetworkVariantPosition,
+  PersonIcon,
   SunIcon,
   SwaplaceIcon,
   SwappingIcons,
@@ -93,9 +94,14 @@ 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} />
+                    {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */}
+                    {/* <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>
               ) : (