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;