From 8cc9a7372a9690fe0bb71aa62f7fe21df4cdcf8e Mon Sep 17 00:00:00 2001 From: nektamu Date: Mon, 12 Feb 2024 20:35:24 +0200 Subject: [PATCH 1/9] Use env --- package.json | 3 + src/app/components/elements/AutoIcon.tsx | 52 +- .../elements/ContactAutocomplete.tsx | 23 +- src/app/components/elements/WalletName.tsx | 65 +- src/app/hooks/ens.tsx | 73 + src/app/hooks/index.ts | 1 + yarn.lock | 4249 ++++++++--------- 7 files changed, 2226 insertions(+), 2240 deletions(-) create mode 100644 src/app/hooks/ens.tsx diff --git a/package.json b/package.json index 4ecd3cc8a..e9a136b00 100644 --- a/package.json +++ b/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": { diff --git a/src/app/components/elements/AutoIcon.tsx b/src/app/components/elements/AutoIcon.tsx index 32b1f548d..1c41c7337 100644 --- a/src/app/components/elements/AutoIcon.tsx +++ b/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 = memo( }) => { const rootRef = useRef(null); + const { getEnsName, getEnsAvatar } = useEns(); + + const [ensAvatar, setEnsAvatar] = useState(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 (
= memo( ), } - : { - dangerouslySetInnerHTML: { - __html: loadDicebearIconSvg(type, seed), - }, - })} + : ensAvatar + ? { + children: ( + ensAvatar + ), + } + : { + dangerouslySetInnerHTML: { + __html: loadDicebearIconSvg(type, seed), + }, + })} /> ); }, diff --git a/src/app/components/elements/ContactAutocomplete.tsx b/src/app/components/elements/ContactAutocomplete.tsx index 71f5e34a4..2aff43bdf 100644 --- a/src/app/components/elements/ContactAutocomplete.tsx +++ b/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 (