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 experience
+ * in 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 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,31 @@ 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 we are facing issues fetching the correct address ENS name Ethereum address. Since ENS related feature is not working properly, we are 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 +83,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;
-        }
+      /**
+       * 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.
+ *
+ * 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>
               ) : (