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 @@ -1,19 +1,26 @@ // @flow import invariant from 'invariant'; +import * as React from 'react'; import stringHash from 'string-hash'; +import { userIdentifiedByETHAddress } from './account-utils.js'; import { selectedThreadColors } from './color-utils.js'; import { threadOtherMembers } from './thread-utils.js'; import genesis from '../facts/genesis.js'; +import { useENSAvatar } from '../hooks/ens-cache.js'; import { threadInfoSelector } from '../selectors/thread-selectors.js'; -import type { ClientEmojiAvatar, ClientAvatar } from '../types/avatar-types.js'; +import type { + ClientEmojiAvatar, + ClientAvatar, + ResolvedClientAvatar, +} from '../types/avatar-types.js'; import { type RawThreadInfo, type ThreadInfo, threadTypes, } from '../types/thread-types.js'; -import type { UserInfos } from '../types/user-types.js'; +import type { UserInfos, UserInfo } from '../types/user-types.js'; import { useSelector } from '../utils/redux-utils.js'; const defaultAnonymousUserEmojiAvatar: ClientEmojiAvatar = { @@ -117,9 +124,43 @@ return getDefaultAvatar(thread.id, thread.color); } +function useENSResolvedAvatar( + avatarInfo: ClientAvatar, + userInfo: ?UserInfo, +): ResolvedClientAvatar { + const ethAddress = React.useMemo(() => { + let address = null; + if (userInfo && avatarInfo.type === 'ens') { + const { username } = userInfo; + address = + username && userIdentifiedByETHAddress(userInfo) ? username : null; + } + return address; + }, [avatarInfo.type, userInfo]); + + const ensAvatarURI = useENSAvatar(ethAddress); + + const resolvedAvatar = React.useMemo(() => { + if (avatarInfo.type !== 'ens') { + return avatarInfo; + } + + if (ensAvatarURI) { + return { + type: 'image', + uri: ensAvatarURI, + }; + } + + return defaultAnonymousUserEmojiAvatar; + }, [ensAvatarURI, avatarInfo]); + + return resolvedAvatar; +} + export { - defaultAnonymousUserEmojiAvatar, getAvatarForUser, getUserAvatarForThread, useGetAvatarForThread, + useENSResolvedAvatar, }; diff --git a/lib/types/avatar-types.js b/lib/types/avatar-types.js --- a/lib/types/avatar-types.js +++ b/lib/types/avatar-types.js @@ -37,3 +37,5 @@ | ClientEmojiAvatar | ClientImageAvatar | ClientENSAvatar; + +export type ResolvedClientAvatar = ClientEmojiAvatar | ClientImageAvatar; diff --git a/native/components/user-avatar.react.js b/native/components/user-avatar.react.js --- a/native/components/user-avatar.react.js +++ b/native/components/user-avatar.react.js @@ -2,11 +2,9 @@ import * as React from 'react'; -import { useENSAvatar } from 'lib/hooks/ens-cache.js'; -import { userIdentifiedByETHAddress } from 'lib/shared/account-utils.js'; import { - defaultAnonymousUserEmojiAvatar, getAvatarForUser, + useENSResolvedAvatar, } from 'lib/shared/avatar-utils.js'; import Avatar from './avatar.react.js'; @@ -25,34 +23,9 @@ ); const avatarInfo = getAvatarForUser(userInfo); - const ethAddress = React.useMemo(() => { - let address = null; - if (userInfo && avatarInfo.type === 'ens') { - const { username } = userInfo; - address = - username && userIdentifiedByETHAddress(userInfo) ? username : null; - } - return address; - }, [avatarInfo.type, userInfo]); - - const ensAvatarURI = useENSAvatar(ethAddress); - - const userAvatarInfo = React.useMemo(() => { - if (avatarInfo.type !== 'ens') { - return avatarInfo; - } - - if (ensAvatarURI) { - return { - type: 'image', - uri: ensAvatarURI, - }; - } - - return defaultAnonymousUserEmojiAvatar; - }, [ensAvatarURI, avatarInfo]); - - return ; + const resolvedUserAvatar = useENSResolvedAvatar(avatarInfo, userInfo); + + return ; } export default UserAvatar;