diff --git a/package.json b/package.json
index 4ecd3cc8a..ba9dd2fc5 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@dicebear/core": "7.0.1",
     "@dicebear/personas": "7.0.1",
     "@emotion/is-prop-valid": "1.2.1",
+    "@ensdomains/ens-avatar": "1.0.0-alpha.0.ethers.6",
     "@ledgerhq/hw-app-eth": "6.35.2",
     "@ledgerhq/hw-transport": "6.30.1",
     "@ledgerhq/hw-transport-webauthn": "5.36.0-deprecated",
diff --git a/src/app/components/blocks/ContactsDialog.tsx b/src/app/components/blocks/ContactsDialog.tsx
index 5c72156cb..8e965070a 100644
--- a/src/app/components/blocks/ContactsDialog.tsx
+++ b/src/app/components/blocks/ContactsDialog.tsx
@@ -19,11 +19,11 @@ import { useContactsDialog } from "app/hooks/contacts";
 import { useDialog } from "app/hooks/dialog";
 import { useToast } from "app/hooks/toast";
 import SecondaryModal from "app/components/elements/SecondaryModal";
-import AutoIcon from "app/components/elements/AutoIcon";
 import Input from "app/components/elements/Input";
 import AddressField from "app/components/elements/AddressField";
 import Button from "app/components/elements/Button";
 import { ReactComponent as AvatarPlaceholderIcon } from "app/icons/avatar-placeholder.svg";
+import WalletAvatar from "../elements/WalletAvatar";
 
 type FormValues = {
   name: string;
@@ -110,10 +110,8 @@ const ContactsDialog: FC = () => {
               )}
             >
               {address || values.address ? (
-                <AutoIcon
+                <WalletAvatar
                   seed={values.address ?? address}
-                  source="dicebear"
-                  type="personas"
                   className="w-full h-full"
                 />
               ) : (
diff --git a/src/app/components/blocks/ContactsSection.tsx b/src/app/components/blocks/ContactsSection.tsx
index 800c4153a..e1a0df694 100644
--- a/src/app/components/blocks/ContactsSection.tsx
+++ b/src/app/components/blocks/ContactsSection.tsx
@@ -16,13 +16,13 @@ import { useDialog } from "app/hooks/dialog";
 import { useContacts, useContactsDialog } from "app/hooks/contacts";
 import { ToastOverflowProvider, useToast } from "app/hooks/toast";
 import SearchInput from "app/components/elements/SearchInput";
-import AutoIcon from "app/components/elements/AutoIcon";
 import HashPreview from "app/components/elements/HashPreview";
 import ScrollAreaContainer from "app/components/elements/ScrollAreaContainer";
 import { ReactComponent as AddWalletIcon } from "app/icons/add-wallet.svg";
 import { ReactComponent as DeleteIcon } from "app/icons/delete-medium.svg";
 import { ReactComponent as EditIcon } from "app/icons/edit-medium.svg";
 import { ReactComponent as NoResultsFoundIcon } from "app/icons/no-results-found.svg";
+import WalletAvatar from "../elements/WalletAvatar";
 
 const ContactsSection: FC = () => {
   const { confirm } = useDialog();
@@ -212,10 +212,8 @@ const ContactCard = forwardRef<HTMLDivElement, ContactCardProps>(
         )}
       >
         <div className="flex flex-col items-center pt-8 pb-4 px-3 w-full">
-          <AutoIcon
+          <WalletAvatar
             seed={address}
-            source="dicebear"
-            type="personas"
             className={classNames(
               "h-[4.625rem] w-[4.625rem]",
               "mb-5",
diff --git a/src/app/components/blocks/EditWalletSection.tsx b/src/app/components/blocks/EditWalletSection.tsx
index b8dc10883..235ead716 100644
--- a/src/app/components/blocks/EditWalletSection.tsx
+++ b/src/app/components/blocks/EditWalletSection.tsx
@@ -42,7 +42,6 @@ import SecondaryModal, {
   SecondaryModalProps,
 } from "app/components/elements/SecondaryModal";
 import PasswordField from "app/components/elements/PasswordField";
-import AutoIcon from "app/components/elements/AutoIcon";
 import SecretField from "app/components/blocks/SecretField";
 import SeedPhraseWords from "app/components/blocks/SeedPhraseWords";
 import { ReactComponent as SuccessIcon } from "app/icons/success.svg";
@@ -56,6 +55,7 @@ import { ReactComponent as TwitterIcon } from "app/icons/twitter.svg";
 import { ReactComponent as NoteIcon } from "app/icons/note.svg";
 import { ReactComponent as DeleteIcon } from "app/icons/Delete.svg";
 import { ReactComponent as LedgerIcon } from "app/icons/ledger.svg";
+import WalletAvatar from "../elements/WalletAvatar";
 
 type EditWalletSectionProps = {
   account: Account;
@@ -515,10 +515,8 @@ const AddressField: FC<AddressFieldProps> = ({ address, className }) => {
         className,
       )}
     >
-      <AutoIcon
+      <WalletAvatar
         seed={address}
-        source="dicebear"
-        type="personas"
         className={classNames(
           "h-24 w-24 min-w-[6rem] m-0.5",
           "bg-black/40",
diff --git a/src/app/components/blocks/WalletTabs.tsx b/src/app/components/blocks/WalletTabs.tsx
index 8878a6a22..91cf4e048 100644
--- a/src/app/components/blocks/WalletTabs.tsx
+++ b/src/app/components/blocks/WalletTabs.tsx
@@ -11,13 +11,13 @@ import { TippySingletonProvider } from "app/hooks";
 import ScrollAreaContainer from "app/components/elements/ScrollAreaContainer";
 import TotalWalletBalance from "app/components/elements/TotalWalletBalance";
 import HashPreview from "app/components/elements/HashPreview";
-import AutoIcon from "app/components/elements/AutoIcon";
 import SearchInput from "app/components/elements/SearchInput";
 import Button from "app/components/elements/Button";
 import WalletName from "app/components/elements/WalletName";
 import { ReactComponent as ChevronRightIcon } from "app/icons/chevron-right.svg";
 import { ReactComponent as AddWalletIcon } from "app/icons/add-wallet.svg";
 import { ReactComponent as NoResultsFoundIcon } from "app/icons/no-results-found.svg";
+import WalletAvatar from "../elements/WalletAvatar";
 
 type WalletTabsProps = {
   selectedAccount: Account;
@@ -143,10 +143,8 @@ const WalletTab: FC<WalletTabProps> = ({
       onClick={onClick}
       autoFocus={active}
     >
-      <AutoIcon
+      <WalletAvatar
         seed={address}
-        source="dicebear"
-        type="personas"
         className={classNames(
           "h-14 w-14 min-w-[3.5rem]",
           "mr-3",
diff --git a/src/app/components/blocks/approvals/ApprovalHeader.tsx b/src/app/components/blocks/approvals/ApprovalHeader.tsx
index dda7582af..2f017804a 100644
--- a/src/app/components/blocks/approvals/ApprovalHeader.tsx
+++ b/src/app/components/blocks/approvals/ApprovalHeader.tsx
@@ -7,7 +7,6 @@ import { getNetworkIconUrl } from "fixtures/networks";
 import { useLazyNetwork } from "app/hooks";
 import { openInTabExternal } from "app/utils";
 import { ActivityIcon } from "app/components/blocks/ApprovalStatus";
-import AutoIcon from "app/components/elements/AutoIcon";
 import WalletName from "app/components/elements/WalletName";
 import HashPreview from "app/components/elements/HashPreview";
 import TotalWalletBalance from "app/components/elements/TotalWalletBalance";
@@ -16,6 +15,7 @@ import { ReactComponent as SendIcon } from "app/icons/Send.svg";
 import { ReactComponent as LinkIcon } from "app/icons/external-link.svg";
 import { ReactComponent as SigningIcon } from "app/icons/edit-medium.svg";
 import { ReactComponent as SwapIcon } from "app/icons/SwapIcon.svg";
+import WalletAvatar from "app/components/elements/WalletAvatar";
 
 type ApprovalHeaderProps = {
   account: Account;
@@ -127,10 +127,8 @@ const WalletCard: FC<WalletCardProps> = ({ account, signing }) => (
       "text-left",
     )}
   >
-    <AutoIcon
+    <WalletAvatar
       seed={account.address}
-      source="dicebear"
-      type="personas"
       className={classNames(
         "h-12 w-12 min-w-[3rem]",
         "mr-2",
diff --git a/src/app/components/elements/AccountPreview.tsx b/src/app/components/elements/AccountPreview.tsx
index 91050bf43..3d470489d 100644
--- a/src/app/components/elements/AccountPreview.tsx
+++ b/src/app/components/elements/AccountPreview.tsx
@@ -2,8 +2,8 @@ import { FC, memo } from "react";
 import classNames from "clsx";
 import { ethers } from "ethers";
 
-import AutoIcon from "./AutoIcon";
 import HashPreview from "./HashPreview";
+import WalletAvatar from "./WalletAvatar";
 
 type AssetBalance = {
   symbol: string;
@@ -20,12 +20,7 @@ type AccountPreviewProps = {
 export const AccountPreview = memo<AccountPreviewProps>(
   ({ address, baseAsset, quoteAsset }) => (
     <div className={classNames("inline-flex items-stretch")}>
-      <AutoIcon
-        seed={address}
-        source="dicebear"
-        type="avataaars"
-        className="h-16 w-16 mr-4"
-      />
+      <WalletAvatar seed={address} className="h-16 w-16 mr-4" />
 
       <div className="p-1 flex flex-col">
         <span className="text-lg font-semibold">
diff --git a/src/app/components/elements/AccountSelect.tsx b/src/app/components/elements/AccountSelect.tsx
index 53dca6dd2..905414d6f 100644
--- a/src/app/components/elements/AccountSelect.tsx
+++ b/src/app/components/elements/AccountSelect.tsx
@@ -21,7 +21,6 @@ import { ReactComponent as GasIcon } from "app/icons/gas.svg";
 import { ReactComponent as AddWalletIcon } from "app/icons/add-wallet.svg";
 
 import Select from "./Select";
-import AutoIcon from "./AutoIcon";
 import HashPreview from "./HashPreview";
 import Balance from "./Balance";
 import CopiableTooltip from "./CopiableTooltip";
@@ -29,6 +28,7 @@ import WalletName from "./WalletName";
 import SmartLink from "./SmartLink";
 import Avatar from "./Avatar";
 import IconedButton from "./IconedButton";
+import WalletAvatar from "./WalletAvatar";
 
 type AccountSelectProps = {
   className?: string;
@@ -147,10 +147,8 @@ const CurrentAccount: FC<AccountSelectItemProps> = ({ account }) => {
 
   return (
     <span className="flex items-center text-left w-full pr-3 min-w-0">
-      <AutoIcon
+      <WalletAvatar
         seed={address}
-        source="dicebear"
-        type="personas"
         className={classNames(
           "h-10 w-10 min-w-[2.5rem]",
           "mr-1",
@@ -229,10 +227,8 @@ const AccountSelectItem: FC<
         "rounded-[.625rem]",
       )}
     >
-      <AutoIcon
+      <WalletAvatar
         seed={account.address}
-        source="dicebear"
-        type="personas"
         className={classNames("w-full h-full", isSelected && "opacity-20")}
       />
       {isSelected && (
diff --git a/src/app/components/elements/ContactAutocomplete.tsx b/src/app/components/elements/ContactAutocomplete.tsx
index 71f5e34a4..baa161694 100644
--- a/src/app/components/elements/ContactAutocomplete.tsx
+++ b/src/app/components/elements/ContactAutocomplete.tsx
@@ -26,13 +26,13 @@ import {
   LOAD_MORE_ON_CONTACTS_DROPDOWN_FROM_END,
 } from "app/defaults";
 import { useContacts } from "app/hooks/contacts";
-import { useAccounts } from "app/hooks";
+import { useAccounts, useEns } from "app/hooks";
 import ScrollAreaContainer from "./ScrollAreaContainer";
 import AddressField, { AddressFieldProps } from "./AddressField";
-import AutoIcon from "./AutoIcon";
 import WalletName from "./WalletName";
 import HashPreview from "./HashPreview";
 import SmallContactCard from "./SmallContactCard";
+import WalletAvatar from "./WalletAvatar";
 
 type ContactAutocompleteProps = {
   meta: FieldMetaState<any>;
@@ -117,6 +117,7 @@ const ContactAutocomplete = forwardRef<
           e.preventDefault();
         }
       }
+
       rest.onKeyDown?.(e);
     },
     [mergedAccounts, rest, activeSuggestion, setValue],
@@ -158,6 +159,12 @@ const ContactAutocomplete = forwardRef<
 
   const { paste } = usePasteFromClipboard(setValue);
 
+  const { getAddressByEns, watchEns } = useEns();
+
+  useEffect(() => {
+    watchEns(value, setValue);
+  }, [value, setValue, getAddressByEns, watchEns]);
+
   const pasteButton = useMemo(() => {
     return (
       <button
@@ -391,10 +398,8 @@ const ContactButton = forwardRef<HTMLButtonElement, ContactButtonProps>(
         )}
         {...rest}
       >
-        <AutoIcon
+        <WalletAvatar
           seed={contact.address}
-          source="dicebear"
-          type="personas"
           className={classNames(
             "relative",
             "h-8 w-8 min-w-[2rem]",
diff --git a/src/app/components/elements/LargeWalletCard.tsx b/src/app/components/elements/LargeWalletCard.tsx
index 0cb55bb20..9d1102c79 100644
--- a/src/app/components/elements/LargeWalletCard.tsx
+++ b/src/app/components/elements/LargeWalletCard.tsx
@@ -12,7 +12,6 @@ import {
 } from "app/hooks";
 import { Page } from "app/nav";
 
-import AutoIcon from "./AutoIcon";
 import HashPreview from "./HashPreview";
 import Balance from "./Balance";
 import IconedButton from "./IconedButton";
@@ -25,6 +24,7 @@ import { ReactComponent as SettingsIcon } from "app/icons/setting-general.svg";
 import { ReactComponent as CopyIcon } from "app/icons/copy.svg";
 import { ReactComponent as SuccessIcon } from "app/icons/success.svg";
 import { ReactComponent as GasIcon } from "app/icons/gas.svg";
+import WalletAvatar from "./WalletAvatar";
 
 type LargeWalletCardProps = {
   account: Account;
@@ -71,10 +71,8 @@ const LargeWalletCard = memo<LargeWalletCardProps>(({ account, className }) => {
           >
             <TippySingletonProvider>
               <div className="flex">
-                <AutoIcon
+                <WalletAvatar
                   seed={address}
-                  source="dicebear"
-                  type="personas"
                   className={classNames(
                     "h-[4.5rem] w-[4.5rem] min-w-[4.5rem] mr-4",
                     "bg-black/40",
diff --git a/src/app/components/elements/LockProfileButton.tsx b/src/app/components/elements/LockProfileButton.tsx
index 78de47b3d..b66686b57 100644
--- a/src/app/components/elements/LockProfileButton.tsx
+++ b/src/app/components/elements/LockProfileButton.tsx
@@ -9,8 +9,8 @@ import { lockWallet } from "core/client";
 import { useDialog } from "app/hooks/dialog";
 import { approvalsAtom, currentProfileAtom } from "app/atoms";
 import Button from "app/components/elements/Button";
-import AutoIcon from "app/components/elements/AutoIcon";
 import RoundedButton from "app/components/elements/RoundedButton";
+import AutoIcon from "./AutoIcon";
 
 type LockProfileButtonProps = {
   className?: string;
diff --git a/src/app/components/elements/ProfileButton.tsx b/src/app/components/elements/ProfileButton.tsx
index 5ed66cf1c..28d43d008 100644
--- a/src/app/components/elements/ProfileButton.tsx
+++ b/src/app/components/elements/ProfileButton.tsx
@@ -29,7 +29,6 @@ import { ReactComponent as LockIcon } from "app/icons/lock.svg";
 import { ReactComponent as GearIcon } from "app/icons/settings-gear.svg";
 import { ReactComponent as ExpandIcon } from "app/icons/expand.svg";
 
-import AutoIcon from "./AutoIcon";
 import WalletName from "./WalletName";
 import HashPreview from "./HashPreview";
 import CopiableTooltip from "./CopiableTooltip";
@@ -41,6 +40,8 @@ import TooltipIcon from "./TooltipIcon";
 import Tooltip from "./Tooltip";
 import IconedButton from "./IconedButton";
 import TotalWalletBalance from "./TotalWalletBalance";
+import AutoIcon from "./AutoIcon";
+import WalletAvatar from "./WalletAvatar";
 
 type Size = "small" | "large";
 
@@ -95,10 +96,8 @@ const ProfileButton: FC<ProfileButtonProps> = ({
               size === "large" ? "text-base" : "text-sm",
             )}
           />
-          <AutoIcon
+          <WalletAvatar
             seed={currentAccount.address}
-            source="dicebear"
-            type="personas"
             className={classNames(
               size === "large"
                 ? "h-[3rem] w-[3rem] min-w-[3rem]"
@@ -428,10 +427,8 @@ const ProfileItem: FC<ProfileItemProps & { size?: Size }> = ({
       className,
     )}
   >
-    <AutoIcon
+    <WalletAvatar
       seed={account.address}
-      source="dicebear"
-      type="personas"
       className={classNames(
         "h-8 w-8 min-w-[2rem]",
         "mr-3",
diff --git a/src/app/components/elements/SmallContactCard.tsx b/src/app/components/elements/SmallContactCard.tsx
index 1124dff04..739fb119e 100644
--- a/src/app/components/elements/SmallContactCard.tsx
+++ b/src/app/components/elements/SmallContactCard.tsx
@@ -8,10 +8,10 @@ import { useContacts, useContactsDialog } from "app/hooks/contacts";
 import { ReactComponent as PlusIcon } from "app/icons/PlusCircle.svg";
 
 import InputLabelAction from "./InputLabelAction";
-import AutoIcon from "./AutoIcon";
 import WalletName from "./WalletName";
 import HashPreview from "./HashPreview";
 import IconedButton from "./IconedButton";
+import WalletAvatar from "./WalletAvatar";
 
 type SmallContactCardProps = {
   address?: string;
@@ -100,10 +100,8 @@ const SmallContactCard: FC<SmallContactCardProps> = ({
         className,
       )}
     >
-      <AutoIcon
+      <WalletAvatar
         seed={contact.address}
-        source="dicebear"
-        type="personas"
         className={classNames(
           !isSmall && "h-6 w-6 min-w-[1.5rem] mr-2",
           isSmall && "h-4 w-4 min-w-[1rem] mr-1",
diff --git a/src/app/components/elements/WalletAvatar.tsx b/src/app/components/elements/WalletAvatar.tsx
new file mode 100644
index 000000000..b6d5c72e2
--- /dev/null
+++ b/src/app/components/elements/WalletAvatar.tsx
@@ -0,0 +1,63 @@
+import { FC, HTMLAttributes, memo, useEffect, useState } from "react";
+import AutoIcon from "./AutoIcon";
+import Avatar from "app/components/elements/Avatar";
+
+import { useEns } from "app/hooks";
+
+type WalletAvatarProps = HTMLAttributes<HTMLDivElement> & {
+  seed: string;
+};
+
+const WalletAvatar: FC<WalletAvatarProps> = memo(({ seed, className }) => {
+  const { getEnsName, getEnsAvatar } = useEns();
+
+  const [ensAvatar, setEnsAvatar] = useState<string | null>(null);
+
+  useEffect(() => {
+    const isValidEthereumAddress = (seed: string) => {
+      const ethereumAddressRegex = /^(0x)?[0-9a-fA-F]{40}$/;
+      return ethereumAddressRegex.test(seed);
+    };
+
+    const fetchEnsName = async () => {
+      try {
+        const name = await getEnsName(seed);
+        if (name) {
+          const avatar = await getEnsAvatar(name);
+          setEnsAvatar(avatar);
+        } else {
+          setEnsAvatar(null);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    if (isValidEthereumAddress(seed)) {
+      fetchEnsName();
+    }
+  }, [getEnsName, getEnsAvatar, seed]);
+
+  return (
+    <>
+      {ensAvatar ? (
+        <Avatar
+          src={ensAvatar}
+          className={className}
+          imageClassName="rounded-md"
+          alt={"ensAvatar"}
+          withBorder={false}
+        />
+      ) : (
+        <AutoIcon
+          seed={seed}
+          source="dicebear"
+          type="personas"
+          className={className}
+        />
+      )}
+    </>
+  );
+});
+
+export default WalletAvatar;
diff --git a/src/app/components/elements/WalletName.tsx b/src/app/components/elements/WalletName.tsx
index 8285da262..be2966b03 100644
--- a/src/app/components/elements/WalletName.tsx
+++ b/src/app/components/elements/WalletName.tsx
@@ -1,8 +1,9 @@
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 import classNames from "clsx";
 import { TReplace } from "lib/ext/i18n/react";
 
 import { Account, AccountSource } from "core/types";
+import { useEns } from "app/hooks";
 
 import { ReactComponent as GoogleIcon } from "app/icons/google.svg";
 import { ReactComponent as FacebookIcon } from "app/icons/facebook.svg";
@@ -24,30 +25,49 @@ const WalletName: FC<WalletNameProps> = ({
   theme = "large",
   className,
   iconClassName,
-}) => (
-  <span
-    className={classNames(
-      "flex items-center",
-      "min-w-0 w-full",
-      "font-bold",
-      theme === "large" && "leading-[1.125rem]",
-      className,
-    )}
-  >
-    <Icon
-      wallet={wallet}
+}) => {
+  const { getEnsName } = useEns();
+
+  const [ensName, setEnsName] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchEnsName = async () => {
+      try {
+        const name = await getEnsName(wallet.address);
+        setEnsName(name);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchEnsName();
+  }, [getEnsName, wallet.address]);
+
+  return (
+    <span
       className={classNames(
-        "h-auto",
-        theme === "large" && "w-[1.125rem] min-w-[1.125rem] mr-1",
-        theme === "small" && "w-4 min-w-[1rem] mr-0.5",
-        iconClassName,
+        "flex items-center",
+        "min-w-0 w-full",
+        "font-bold",
+        theme === "large" && "leading-[1.125rem]",
+        className,
       )}
-    />
-    <span className="truncate min-w-0">
-      <TReplace msg={wallet.name} />
+    >
+      <Icon
+        wallet={wallet}
+        className={classNames(
+          "h-auto",
+          theme === "large" && "w-[1.125rem] min-w-[1.125rem] mr-1",
+          theme === "small" && "w-4 min-w-[1rem] mr-0.5",
+          iconClassName,
+        )}
+      />
+      <span className="truncate min-w-0">
+        <TReplace msg={ensName ?? wallet.name} />
+      </span>
     </span>
-  </span>
-);
+  );
+};
 
 export default WalletName;
 
diff --git a/src/app/hooks/ens.tsx b/src/app/hooks/ens.tsx
new file mode 100644
index 000000000..a76072bcb
--- /dev/null
+++ b/src/app/hooks/ens.tsx
@@ -0,0 +1,117 @@
+import { useMemo, useCallback } from "react";
+import { getClientProvider } from "core/client";
+import { AvatarResolver } from "@ensdomains/ens-avatar";
+
+const ONE_DAY = 24 * 60 * 60 * 1000;
+
+const toDataURL = async (url: string) =>
+  fetch(url)
+    .then((response) => response.blob())
+    .then(
+      (blob) =>
+        new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result);
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        }),
+    );
+
+const useEns = () => {
+  const provider = getClientProvider(1);
+
+  const getEnsName = useCallback(
+    async (address: string) => {
+      const ensNameLS = localStorage.getItem(`ENS_${address}`);
+      const parsedData = ensNameLS ? JSON.parse(ensNameLS) : null;
+      if (parsedData && parsedData.expirationTimestamp > Date.now()) {
+        return parsedData.ensName;
+      } else {
+        const ensName = await provider.lookupAddress(address);
+
+        if (ensName) {
+          const data = {
+            ensName,
+            expirationTimestamp: Date.now() + ONE_DAY,
+          };
+          localStorage.setItem(`ENS_${address}`, JSON.stringify(data));
+          return ensName;
+        } else {
+          return null;
+        }
+      }
+    },
+    [provider],
+  );
+
+  const getAddressByEns = useCallback(
+    async (ensName: string) => {
+      const address = await provider.resolveName(ensName);
+      if (address) {
+        return address;
+      } else {
+        return null;
+      }
+    },
+    [provider],
+  );
+
+  const getEnsAvatar = useCallback(
+    async (ensName: string) => {
+      const ensAvatarLS = localStorage.getItem(`ENS_AVATAR_${ensName}`);
+      const parsedData = ensAvatarLS ? JSON.parse(ensAvatarLS) : null;
+      if (parsedData && parsedData.expirationTimestamp > Date.now()) {
+        return parsedData.imageUrl;
+      } else {
+        //@ts-expect-error: Should expect JsonRpcProvider
+        const resolver = new AvatarResolver(provider);
+        const imageUrl = await resolver.getAvatar(ensName, {});
+
+        if (imageUrl) {
+          const imageDataUrl = await toDataURL(imageUrl);
+
+          const data = {
+            imageUrl: imageDataUrl,
+            expirationTimestamp: Date.now() + ONE_DAY,
+          };
+
+          localStorage.setItem(`ENS_AVATAR_${ensName}`, JSON.stringify(data));
+
+          return imageDataUrl;
+        } else {
+          return null;
+        }
+      }
+    },
+    [provider],
+  );
+
+  const watchEns = useCallback(
+    async (value: any, cb: (address: string) => void) => {
+      const ethereumAddressOrENSRegex =
+        /^(0x[a-fA-F0-9]{40})|([a-zA-Z0-9-]+\.eth)$/;
+      if (value && typeof value == "string") {
+        const isValid = ethereumAddressOrENSRegex.test(value);
+        if (isValid && value.includes(".eth")) {
+          const response = await getAddressByEns(value);
+          if (response) {
+            cb(response);
+          }
+        }
+      }
+    },
+    [getAddressByEns],
+  );
+
+  return useMemo(
+    () => ({
+      getEnsName,
+      getEnsAvatar,
+      getAddressByEns,
+      watchEns,
+    }),
+    [getEnsName, getEnsAvatar, getAddressByEns, watchEns],
+  );
+};
+
+export { useEns };
diff --git a/src/app/hooks/index.ts b/src/app/hooks/index.ts
index ad04533d9..2471477b4 100644
--- a/src/app/hooks/index.ts
+++ b/src/app/hooks/index.ts
@@ -11,3 +11,4 @@ export * from "./explorer";
 export * from "./tokens";
 export * from "./nftMetadata";
 export * from "./ramp";
+export * from "./ens";
diff --git a/yarn.lock b/yarn.lock
index c8d3be10d..fd57ae8c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17,6 +17,11 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
   integrity sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==
 
+"@adraffy/ens-normalize@1.10.1":
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz#63430d04bd8c5e74f8d7d049338f1cd9d4f02069"
+  integrity sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==
+
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -1364,6 +1369,23 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
+"@ensdomains/ens-avatar@1.0.0-alpha.0.ethers.6":
+  version "1.0.0-alpha.0.ethers.6"
+  resolved "https://registry.yarnpkg.com/@ensdomains/ens-avatar/-/ens-avatar-1.0.0-alpha.0.ethers.6.tgz#837ff22971244d2a33aec91f4fcdc2941c7fcc3c"
+  integrity sha512-pjWiLhhnzdeaii1mHUMte2W5kZjJl5tdAEuDHeoBgfk1vbkH7hxgTmMNWi3HobU4q5LdLule/cAtctTUt8hIkQ==
+  dependencies:
+    "@ethersproject/contracts" "^5.7.0"
+    "@ethersproject/providers" "^5.7.0"
+    assert "^2.1.0"
+    axios "^0.27.2"
+    axios-cache-interceptor "^0.9.3"
+    buffer "^6.0.3"
+    dompurify "^3.0.6"
+    ethers "^6.10.0"
+    is-svg "^4.3.2"
+    multiformats "^9.6.2"
+    url-join "^4.0.1"
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -1628,7 +1650,7 @@
   dependencies:
     "@ethersproject/logger" "^5.7.0"
 
-"@ethersproject/providers@5.7.2", "@ethersproject/providers@^5.7.2":
+"@ethersproject/providers@5.7.2", "@ethersproject/providers@^5.7.0", "@ethersproject/providers@^5.7.2":
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.7.2.tgz#f8b1a4f275d7ce58cf0a2eec222269a08beb18cb"
   integrity sha512-g34EWZ1WWAVgr4aptGlVBF8mhl3VWjv+8hoAnzStu8Ah22VHBsuGzP17eb6xDVRzw895G4W7vvx60lFFur/1Rg==
@@ -5176,6 +5198,17 @@ arraybuffer.prototype.slice@^1.0.2:
     is-array-buffer "^3.0.2"
     is-shared-array-buffer "^1.0.2"
 
+assert@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-2.1.0.tgz#6d92a238d05dc02e7427c881fb8be81c8448b2dd"
+  integrity sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==
+  dependencies:
+    call-bind "^1.0.2"
+    is-nan "^1.3.2"
+    object-is "^1.1.5"
+    object.assign "^4.1.4"
+    util "^0.12.5"
+
 ast-types-flow@^0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
@@ -5234,10 +5267,19 @@ axe-core@=4.7.0:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
+axios-cache-interceptor@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/axios-cache-interceptor/-/axios-cache-interceptor-0.9.3.tgz#4e95130f3f94af8dc390ff70d7ae387a7c1d957f"
+  integrity sha512-2gftpDWH8yajxjl9gBOD2ZvLaavaLM2uoLvgalwOPlLpr8KOriKO58UYJBZnuTei4rFAl40w4KQjcgtwEU0jXw==
+  dependencies:
+    cache-parser "^1.2.2"
+    fast-defer "^1.1.5"
+    object-code "^1.2.0"
+
 axios-fetch-adapter@./.vendor/axios-fetch-adapter:
   version "0.0.1"
 
-axios@0.26.1, axios@1.6.5, axios@>=1.6.4, axios@^1.3.4, axios@^1.6.0:
+axios@0.26.1, axios@1.6.5, axios@>=1.6.4, axios@^0.27.2, axios@^1.3.4, axios@^1.6.0:
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.5.tgz#2c090da14aeeab3770ad30c3a1461bc970fb0cd8"
   integrity sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==
@@ -5536,6 +5578,11 @@ bufferutil@^4.0.1:
   dependencies:
     node-gyp-build "^4.3.0"
 
+cache-parser@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/cache-parser/-/cache-parser-1.2.4.tgz#60975135ef2330e6a1d60895279d7237a2a9b398"
+  integrity sha512-O0KwuHuJnbHUrghHi2kGp0SxnWSIBXTYt7M8WVhW0kbPRUNUKoE/Of6e1rRD6AAxmfxFunKnt90yEK09D+sc5g==
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -6448,6 +6495,11 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^3.0.6:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.8.tgz#e0021ab1b09184bc8af7e35c7dd9063f43a8a437"
+  integrity sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -7062,6 +7114,19 @@ ethers@6.10.0:
     tslib "2.4.0"
     ws "8.5.0"
 
+ethers@^6.10.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-6.11.0.tgz#6d3e884ad36454c29d4662ae49439d5d04556c66"
+  integrity sha512-kPHNTnhVWiWU6AVo6CAeTjXEK24SpCXyZvwG9ROFjT0Vlux0EOhWKBAeC+45iDj80QNJTYaT1SDEmeunT0vDNw==
+  dependencies:
+    "@adraffy/ens-normalize" "1.10.1"
+    "@noble/curves" "1.2.0"
+    "@noble/hashes" "1.3.2"
+    "@types/node" "18.15.13"
+    aes-js "4.0.0-beta.5"
+    tslib "2.4.0"
+    ws "8.5.0"
+
 eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -7145,6 +7210,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-defer@^1.1.5:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/fast-defer/-/fast-defer-1.1.8.tgz#940ef9597b2ea51c4cd08e99d0f2a8978fa49ba2"
+  integrity sha512-lEJeOH5VL5R09j6AA0D4Uvq7AgsHw0dAImQQ+F3iSyHZuAxyQfWobsagGpTcOPvJr3urmKRHrs+Gs9hV+/Qm/Q==
+
 fast-diff@^1.1.2:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
@@ -7197,6 +7267,13 @@ fast-stable-stringify@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-stable-stringify/-/fast-stable-stringify-1.0.0.tgz#5c5543462b22aeeefd36d05b34e51c78cb86d313"
   integrity sha512-wpYMUmFu5f00Sm0cj2pfivpmawLZ0NKdviQ4w9zJeR8JVtOpOxHmLaJuj0vxvGqMJQWyP/COUkF75/57OKyRag==
 
+fast-xml-parser@^4.1.3:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.3.4.tgz#385cc256ad7bbc57b91515a38a22502a9e1fca0d"
+  integrity sha512-utnwm92SyozgA3hhH2I8qldf2lBqm6qHOICawRNRFu1qMe3+oqr+GcXjGqTmXTMGE5T4eC03kr/rlh5C1IRdZA==
+  dependencies:
+    strnum "^1.0.5"
+
 fastest-levenshtein@^1.0.12:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
@@ -8111,6 +8188,14 @@ is-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
   integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
 
+is-nan@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/is-nan/-/is-nan-1.3.2.tgz#043a54adea31748b55b6cd4e09aadafa69bd9e1d"
+  integrity sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 is-negative-zero@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
@@ -8211,6 +8296,13 @@ is-string@^1.0.5, is-string@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-svg@^4.3.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-4.4.0.tgz#34db20a38146be5f2b3060154da33d11e6f74b7c"
+  integrity sha512-v+AgVwiK5DsGtT9ng+m4mClp6zDAmwrW8nZi6Gg15qzvBnRWWdfWA1TGaXyCDnWq5g5asofIgMVl3PjKxvk1ug==
+  dependencies:
+    fast-xml-parser "^4.1.3"
+
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
@@ -9468,7 +9560,7 @@ multiformats@13.0.1:
   resolved "https://registry.yarnpkg.com/multiformats/-/multiformats-13.0.1.tgz#c0622affa5171189eacd57c06f977195ca7acb08"
   integrity sha512-bt3R5iXe2O8xpp3wkmQhC73b/lC4S2ihU8Dndwcsysqbydqb8N+bpP116qMcClZ17g58iSIwtXUTcg2zT4sniA==
 
-multiformats@^9.4.2:
+multiformats@^9.4.2, multiformats@^9.6.2:
   version "9.9.0"
   resolved "https://registry.yarnpkg.com/multiformats/-/multiformats-9.9.0.tgz#c68354e7d21037a8f1f8833c8ccd68618e8f1d37"
   integrity sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==
@@ -9603,6 +9695,11 @@ object-assign@^4.0.1, object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-code@^1.2.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/object-code/-/object-code-1.3.3.tgz#cf21843ddfecce3ec73fd141f66a7f16ba0cb93e"
+  integrity sha512-/Ds4Xd5xzrtUOJ+xJQ57iAy0BZsZltOHssnDgcZ8DOhgh41q1YJCnTPnWdWSLkNGNnxYzhYChjc5dgC9mEERCA==
+
 object-hash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
@@ -9613,6 +9710,14 @@ object-inspect@^1.13.1, object-inspect@^1.9.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
   integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
+object-is@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
 object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -11346,6 +11451,11 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strnum@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/strnum/-/strnum-1.0.5.tgz#5c4e829fe15ad4ff0d20c3db5ac97b73c9b072db"
+  integrity sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==
+
 stylehacks@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-6.0.0.tgz#9fdd7c217660dae0f62e14d51c89f6c01b3cb738"
@@ -11973,6 +12083,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-join@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
+  integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
+
 url-loader@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
@@ -12056,7 +12171,7 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-util@^0.12.4:
+util@^0.12.4, util@^0.12.5:
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
   integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==