diff --git a/lib/hooks/ens-cache.js b/lib/hooks/ens-cache.js --- a/lib/hooks/ens-cache.js +++ b/lib/hooks/ens-cache.js @@ -131,4 +131,50 @@ } } -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, + >(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 };