ENS

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",

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"
                 />
               ) : (

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",

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",

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",

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",

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">

src/app/components/elements/AccountSelect.tsx

@@ -21,14 +21,14 @@ 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";
 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 && (

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]",

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",

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;

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",

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",