[lib] Introduce useENSAvatar hook
ClosedPublic
Actions

Authored by ashoat on Mar 23 2023, 9:04 PM.

Details

Reviewers

ginsu
atul

Commits

rCOMM0ce88c17f8a0: [lib] Introduce useENSAvatar hook

Summary

More context in the discussion under ENG-3302. We decided to make this a hook to separate fetching and rendering concerns.

This is mostly modelled after useENSNames, except that we only need to handle one fetch at a time in this hook.

Test Plan

I tested with this patch, which uses an ENS name that points to an NFT in the user's wallet that is an SVG data URI: https://gist.github.com/Ashoat/461523a089b78554ce3a36dcf3115661

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ashoat created this revision.Mar 23 2023, 9:04 PM

Herald added a subscriber: tomek. · View Herald TranscriptMar 23 2023, 9:04 PM

Harbormaster completed remote builds in B17571: Diff 24058.Mar 23 2023, 9:19 PM

ashoat requested review of this revision.Mar 23 2023, 9:19 PM

ginsu accepted this revision.Mar 26 2023, 9:35 PM

This revision is now accepted and ready to land.Mar 26 2023, 9:35 PM

Closed by commit rCOMM0ce88c17f8a0: [lib] Introduce useENSAvatar hook (authored by ashoat). · Explain WhyMar 27 2023, 7:01 AM

This revision was automatically updated to reflect the committed changes.

ashoat added a commit: rCOMM0ce88c17f8a0: [lib] Introduce useENSAvatar hook.

Revision Contents
Changeset List

Path

Size

lib/

hooks/

ens-cache.js

48 lines

Diff 24194

View Options

lib/hooks/ens-cache.js

Show First 20 Lines • Show All 125 Lines • ▼ Show 20 Lines	invariant(
'the only way result can be falsey is if useENSNames is passed a ' +		'the only way result can be falsey is if useENSNames is passed a ' +
'falsey input, and that can only happen if useStringForUser input is ' +		'falsey input, and that can only happen if useStringForUser input is ' +
'falsey or isViewer is set',		'falsey or isViewer is set',
);		);
return user;		return user;
}		}
}		}

export { useENSNames, useENSName, useStringForUser };		function useENSAvatar(ethAddress: ?string): ?string {
		const cacheContext = React.useContext(ENSCacheContext);
		const { ensCache } = cacheContext;

		const cachedAvatar = React.useMemo(() => {
		if (!ethAddress) {
		return ethAddress;
		}
		if (!ensCache) {
		return null;
		}
		return ensCache.getCachedAvatarURIForAddress(ethAddress);
		}, [ensCache, ethAddress]);

		const [ensAvatars, setENSAvatars] = React.useState<
		$ReadOnlyMap<string, string>,
		>(new Map());

		React.useEffect(() => {
		if (!ensCache \|\| !ethAddress \|\| cachedAvatar !== undefined) {
		return;
		}
		(async () => {
		const result = await ensCache.getAvatarURIForAddress(ethAddress);
		if (!result) {
		return;
		}
		setENSAvatars(oldENSAvatars => {
		const newENSAvatars = new Map(oldENSAvatars);
		newENSAvatars.set(ethAddress, result);
		return newENSAvatars;
		});
		})();
		}, [ensCache, cachedAvatar, ethAddress]);

		return React.useMemo(() => {
		if (!ethAddress) {
		return ethAddress;
		} else if (cachedAvatar !== undefined) {
		return cachedAvatar;
		} else {
		return ensAvatars.get(ethAddress);
		}
		}, [ethAddress, cachedAvatar, ensAvatars]);
		}

		export { useENSNames, useENSName, useStringForUser, useENSAvatar };

[lib] Introduce useENSAvatar hookClosedPublicActions