diff --git a/CHANGELOG.md b/CHANGELOG.md index a477c016..b3cf3977 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -## [3.9.0] - 2024-12-20 +## [3.9.0] - 2025-01-07 - Improve how the ENS address information is provided if available through the UI. The new approach considerably improves efficiency in terms of on-chain reads. diff --git a/packages/services/src/ens.tsx b/packages/services/src/ens.tsx index e23c94c7..6f79d50f 100644 --- a/packages/services/src/ens.tsx +++ b/packages/services/src/ens.tsx @@ -65,7 +65,7 @@ const getENSInfo = (address: string, chainId: number): GetENSInfoResult => { }); }; -const useCachedEntry = (address: string) => { +const useCachedEntry = (address: string, enabled: boolean) => { const { chainId } = useWallet(); const cachedData = useContext(ENSDataContext); const [entry, setEntry] = useState>({ @@ -75,8 +75,7 @@ const useCachedEntry = (address: string) => { useEffect(() => { const isValidAddress = ethers.utils.isAddress(address ?? ''); - - if (!isValidAddress) { + if (!isValidAddress || !enabled) { const entry = { address, hasEns: false, resolving: false }; setEntry(entry); return; @@ -114,7 +113,7 @@ const useCachedEntry = (address: string) => { setEntry(newEntry); }); } - }, [cachedData, address, chainId]); + }, [cachedData, address, chainId, enabled]); return entry; }; @@ -151,13 +150,20 @@ export interface ENSEntry { resolving: boolean; } +type Opts = { enabled: boolean }; + /** * This hook provides a easy way to display ENS information about a ETH address. + * When opts params are omitted the fetching is enabled in case of cache miss. Otherwise, + * it will just cache and return the address passed down. * @param address ETH address to be resolved + * @param opts Option to fine grained control on fetching ENS info. * @returns ENSEntry with the address, and name if address can be resolved to a name */ -export const useENS = (address: string): ENSEntry => { - const cachedEnsEntry = useCachedEntry(address); +export const useENS = (address: string, opts?: Opts): ENSEntry => { + const isEnabled = opts === undefined || opts.enabled; + const cachedEnsEntry = useCachedEntry(address, isEnabled); + return { address: cachedEnsEntry?.address ?? address, resolving: cachedEnsEntry?.resolving ?? false, diff --git a/packages/ui/src/components/Address.tsx b/packages/ui/src/components/Address.tsx index 152c498a..cf01bbc8 100644 --- a/packages/ui/src/components/Address.tsx +++ b/packages/ui/src/components/Address.tsx @@ -68,7 +68,8 @@ const Address: FC = (props) => { } = props; // resolve ENS entry from address - const addressEnsInfo = useENS(address); + const withEns = ens === true; + const addressEnsInfo = useENS(address, { enabled: withEns }); const ensEntry = ens ? addressEnsInfo : null; const { hasCopied, onCopy } = useClipboard(address);