ENS

package.json

@@ -26,6 +26,8 @@
     "@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",
+    "@ensdomains/ensjs": "^3.4.3",
     "@ledgerhq/hw-app-eth": "6.35.2",
     "@ledgerhq/hw-transport": "6.30.1",
     "@ledgerhq/hw-transport-webauthn": "5.36.0-deprecated",
@@ -97,6 +99,7 @@
     "use-debounce": "10.0.0",
     "use-force-update": "1.0.11",
     "use-resize-observer": "9.1.0",
+    "viem": "^1.21.4",
     "webextension-polyfill": "0.10.0"
   },
   "devDependencies": {

src/app/components/elements/AutoIcon.tsx

@@ -1,4 +1,12 @@
-import { FC, HTMLAttributes, memo, RefObject, useRef } from "react";
+import {
+  FC,
+  HTMLAttributes,
+  memo,
+  RefObject,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
 import classNames from "clsx";
 import memoize from "mem";
 import Avatar from "boring-avatars";
@@ -10,6 +18,8 @@ import useResizeObserver from "use-resize-observer";
 
 import niceColorPalettes from "fixtures/niceColorPalettes/200.json";
 
+import { useEns } from "app/hooks";
+
 type Source = "dicebear" | "boring";
 type DicebearStyleType = "avataaars" | "personas";
 type BoringVariant =
@@ -52,6 +62,26 @@ const AutoIcon: FC<AutoIconProps> = memo(
   }) => {
     const rootRef = useRef<HTMLDivElement>(null);
 
+    const { getEnsName, getEnsAvatar } = useEns();
+
+    const [ensAvatar, setEnsAvatar] = useState<string | null>(null);
+
+    useEffect(() => {
+      const fetchEnsName = async () => {
+        try {
+          const name = await getEnsName(seed);
+          if (name) {
+            const avatar = await getEnsAvatar(name);
+            setEnsAvatar(avatar);
+          }
+        } catch (error) {
+          console.error("Error fetching ENS avatar:", error);
+        }
+      };
+
+      fetchEnsName();
+    }, [getEnsName, getEnsAvatar, seed]);
+
     return (
       <div
         ref={rootRef}
@@ -86,11 +116,21 @@ const AutoIcon: FC<AutoIconProps> = memo(
                 </>
               ),
             }
-          : {
-              dangerouslySetInnerHTML: {
-                __html: loadDicebearIconSvg(type, seed),
-              },
-            })}
+          : ensAvatar
+            ? {
+                children: (
+                  <img
+                    src={ensAvatar}
+                    alt="ensAvatar"
+                    style={{ borderRadius: "8px" }}
+                  />
+                ),
+              }
+            : {
+                dangerouslySetInnerHTML: {
+                  __html: loadDicebearIconSvg(type, seed),
+                },
+              })}
       />
     );
   },

src/app/components/elements/ContactAutocomplete.tsx

@@ -26,7 +26,7 @@ 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";
@@ -117,6 +117,7 @@ const ContactAutocomplete = forwardRef<
           e.preventDefault();
         }
       }
+
       rest.onKeyDown?.(e);
     },
     [mergedAccounts, rest, activeSuggestion, setValue],
@@ -158,6 +159,26 @@ const ContactAutocomplete = forwardRef<
 
   const { paste } = usePasteFromClipboard(setValue);
 
+  const { getAddressByEns } = useEns();
+
+  useEffect(() => {
+    const watchEns = async () => {
+      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) {
+            setValue(response);
+          }
+        }
+      }
+    };
+
+    watchEns();
+  }, [value, setValue, getAddressByEns]);
+
   const pasteButton = useMemo(() => {
     return (
       <button

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,50 @@ 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);
+  // const [ensAvatar, setEnsAvatar] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchEnsName = async () => {
+      try {
+        const name = await getEnsName(wallet.address);
+        setEnsName(name);
+      } catch (error) {
+        console.error("Error fetching ENS name:", 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 ? ensName : wallet.name} />
+      </span>
     </span>
-  </span>
-);
+  );
+};
 
 export default WalletName;
 

src/app/hooks/ens.tsx

@@ -0,0 +1,73 @@
+import { useMemo, useCallback } from "react";
+import { useProvider } from "app/hooks";
+import { AvatarResolver } from "@ensdomains/ens-avatar";
+import { http } from "viem";
+import { mainnet } from "viem/chains";
+import { createEnsPublicClient } from "@ensdomains/ensjs";
+
+const client = createEnsPublicClient({
+  chain: mainnet,
+  transport: http(),
+});
+
+const useEns = () => {
+  const provider = useProvider();
+
+  const getEnsName = useCallback(
+    async (address: string) => {
+      const ensNameLS = localStorage.getItem(`ENS_${address}`);
+      if (ensNameLS) {
+        return ensNameLS;
+      } else {
+        const ensName = await provider.lookupAddress(address);
+        if (ensName) {
+          localStorage.setItem(`ENS_${address}`, ensName);
+          return ensName;
+        } else {
+          return null;
+        }
+      }
+    },
+    [provider],
+  );
+
+  const getAddressByEns = useCallback(async (ensName: string) => {
+    const ethAddress = await client.getAddressRecord({ name: ensName });
+    if (ethAddress && ethAddress.value) {
+      return ethAddress.value;
+    } else {
+      return null;
+    }
+  }, []);
+
+  const getEnsAvatar = useCallback(
+    async (ensName: string) => {
+      const ensAvatarLS = localStorage.getItem(`ENS_AVATAR_${ensName}`);
+      if (ensAvatarLS) {
+        return ensAvatarLS;
+      } else {
+        //@ts-expect-error: Should expect JsonRpcProvider
+        const resolver = new AvatarResolver(provider);
+        const imageUrl = await resolver.getAvatar(ensName, {});
+        if (imageUrl) {
+          localStorage.setItem(`ENS_AVATAR_${ensName}`, imageUrl);
+          return imageUrl;
+        } else {
+          return null;
+        }
+      }
+    },
+    [provider],
+  );
+
+  return useMemo(
+    () => ({
+      getEnsName,
+      getEnsAvatar,
+      getAddressByEns,
+    }),
+    [getEnsName, getEnsAvatar, getAddressByEns],
+  );
+};
+
+export { useEns };

src/app/hooks/index.ts

@@ -11,3 +11,4 @@ export * from "./explorer";
 export * from "./tokens";
 export * from "./nftMetadata";
 export * from "./ramp";
+export * from "./ens";