diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js --- a/lib/shared/avatar-utils.js +++ b/lib/shared/avatar-utils.js @@ -6,6 +6,7 @@ import { getETHAddressForUserInfo } from './account-utils.js'; import { selectedThreadColors } from './color-utils.js'; +import { extractFIDFromUserID } from './id-utils.js'; import { threadOtherMembers } from './thread-utils.js'; import { threadTypeIsPersonal, @@ -423,6 +424,33 @@ }; } +function useDisplayUserForThread( + displayUserIDForThread: ?string, + userInfos: UserInfos, + auxUserInfos: { +[userID: string]: { +fid?: ?string, ... }, ... }, +): ?UsernameAndFID { + return React.useMemo(() => { + if (!displayUserIDForThread) { + return null; + } + + const fid = extractFIDFromUserID(displayUserIDForThread); + if (fid) { + return { + farcasterID: fid, + }; + } + + const userBase = userInfos[displayUserIDForThread]; + const farcasterID = auxUserInfos[displayUserIDForThread]?.fid; + + return { + ...userBase, + farcasterID, + }; + }, [displayUserIDForThread, userInfos, auxUserInfos]); +} + export { defaultAnonymousUserEmojiAvatar, defaultEmojiAvatars, @@ -433,4 +461,5 @@ getAvatarForThread, useResolvedUserAvatar, useResolvedThreadAvatar, + useDisplayUserForThread, }; diff --git a/native/avatars/thread-avatar.react.js b/native/avatars/thread-avatar.react.js --- a/native/avatars/thread-avatar.react.js +++ b/native/avatars/thread-avatar.react.js @@ -3,7 +3,10 @@ import * as React from 'react'; import { useAvatarForThread } from 'lib/hooks/avatar-hooks.js'; -import { useResolvedThreadAvatar } from 'lib/shared/avatar-utils.js'; +import { + useResolvedThreadAvatar, + useDisplayUserForThread, +} from 'lib/shared/avatar-utils.js'; import { getSingleOtherUser, getCommunity } from 'lib/shared/thread-utils.js'; import { threadTypeIsPersonal, @@ -50,20 +53,14 @@ displayUserIDForThread = getSingleOtherUser(threadInfo, viewerID); } - const displayUser = useSelector(state => { - if (!displayUserIDForThread) { - return null; - } - - const userBase = state.userStore.userInfos[displayUserIDForThread]; - const farcasterID = - state.auxUserStore.auxUserInfos[displayUserIDForThread]?.fid; + const userInfos = useSelector(state => state.userStore.userInfos); + const auxUserInfos = useSelector(state => state.auxUserStore.auxUserInfos); - return { - ...userBase, - farcasterID, - }; - }); + const displayUser = useDisplayUserForThread( + displayUserIDForThread, + userInfos, + auxUserInfos, + ); const resolvedThreadAvatar = useResolvedThreadAvatar(avatarInfo, { userProfileInfo: displayUser, diff --git a/web/avatars/thread-avatar.react.js b/web/avatars/thread-avatar.react.js --- a/web/avatars/thread-avatar.react.js +++ b/web/avatars/thread-avatar.react.js @@ -3,7 +3,10 @@ import * as React from 'react'; import { useAvatarForThread } from 'lib/hooks/avatar-hooks.js'; -import { useResolvedThreadAvatar } from 'lib/shared/avatar-utils.js'; +import { + useResolvedThreadAvatar, + useDisplayUserForThread, +} from 'lib/shared/avatar-utils.js'; import { getSingleOtherUser, getCommunity } from 'lib/shared/thread-utils.js'; import { threadTypeIsPersonal, @@ -49,20 +52,14 @@ displayUserIDForThread = getSingleOtherUser(threadInfo, viewerID); } - const displayUser = useSelector(state => { - if (!displayUserIDForThread) { - return null; - } - - const userBase = state.userStore.userInfos[displayUserIDForThread]; - const farcasterID = - state.auxUserStore.auxUserInfos[displayUserIDForThread]?.fid; + const userInfos = useSelector(state => state.userStore.userInfos); + const auxUserInfos = useSelector(state => state.auxUserStore.auxUserInfos); - return { - ...userBase, - farcasterID, - }; - }); + const displayUser = useDisplayUserForThread( + displayUserIDForThread, + userInfos, + auxUserInfos, + ); const resolvedThreadAvatar = useResolvedThreadAvatar(avatarInfo, { userProfileInfo: displayUser,