diff --git a/lib/hooks/fc-cache.js b/lib/hooks/fc-cache.js --- a/lib/hooks/fc-cache.js +++ b/lib/hooks/fc-cache.js @@ -181,4 +181,46 @@ }, [fid, cachedAvatarURL, farcasterAvatarURL]); } -export { useFCNames, useFarcasterUserAvatarURL }; +function useFarcasterChannelAvatarURL(channelID: ?string): ?string { + const neynarClientContext = React.useContext(NeynarClientContext); + const fcCache = neynarClientContext?.fcCache; + + const cachedAvatarURL = React.useMemo(() => { + if (!channelID || !fcCache) { + return null; + } + const cachedChannel = + fcCache.getCachedFarcasterChannelForChannelID(channelID); + return cachedChannel?.image_url ?? null; + }, [fcCache, channelID]); + + const [farcasterAvatarURL, setFarcasterAvatarURL] = + React.useState(null); + + React.useEffect(() => { + if (!fcCache || !channelID || cachedAvatarURL) { + return; + } + void (async () => { + const farcasterChannel = + await fcCache.getFarcasterChannelForChannelID(channelID); + const avatarURL = farcasterChannel?.image_url; + if (!avatarURL) { + return; + } + setFarcasterAvatarURL(avatarURL); + })(); + }, [fcCache, cachedAvatarURL, channelID]); + + return React.useMemo(() => { + if (!channelID) { + return null; + } else if (cachedAvatarURL) { + return cachedAvatarURL; + } else { + return farcasterAvatarURL; + } + }, [channelID, cachedAvatarURL, farcasterAvatarURL]); +} + +export { useFCNames, useFarcasterUserAvatarURL, useFarcasterChannelAvatarURL };