diff --git a/native/avatars/thread-avatar.react.js b/native/avatars/thread-avatar.react.js
index e3865a3d5..2582ec2c4 100644
--- a/native/avatars/thread-avatar.react.js
+++ b/native/avatars/thread-avatar.react.js
@@ -1,51 +1,60 @@
// @flow
import * as React from 'react';
import { useAvatarForThread } from 'lib/hooks/avatar-hooks.js';
import { useResolvedAvatar } from 'lib/shared/avatar-utils.js';
import { getSingleOtherUser } from 'lib/shared/thread-utils.js';
import type { AvatarSize } from 'lib/types/avatar-types.js';
import type {
ThreadInfo,
ResolvedThreadInfo,
RawThreadInfo,
} from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js';
import Avatar from './avatar.react.js';
import { useSelector } from '../redux/redux-utils.js';
type Props = {
+threadInfo: RawThreadInfo | ThreadInfo | ResolvedThreadInfo,
+size: AvatarSize,
};
function ThreadAvatar(props: Props): React.Node {
const { threadInfo, size } = props;
const avatarInfo = useAvatarForThread(threadInfo);
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
let displayUserIDForThread;
if (threadInfo.type === threadTypes.GENESIS_PRIVATE) {
displayUserIDForThread = viewerID;
} else if (threadInfo.type === threadTypes.GENESIS_PERSONAL) {
displayUserIDForThread = getSingleOtherUser(threadInfo, viewerID);
}
- const displayUser = useSelector(state =>
- displayUserIDForThread
- ? state.userStore.userInfos[displayUserIDForThread]
- : null,
- );
+ const displayUser = useSelector(state => {
+ if (!displayUserIDForThread) {
+ return null;
+ }
+
+ const userBase = state.userStore.userInfos[displayUserIDForThread];
+ const farcasterID =
+ state.auxUserStore.auxUserInfos[displayUserIDForThread]?.fid;
+
+ return {
+ ...userBase,
+ farcasterID,
+ };
+ });
const resolvedThreadAvatar = useResolvedAvatar(avatarInfo, displayUser);
return ;
}
export default ThreadAvatar;
diff --git a/web/avatars/thread-avatar.react.js b/web/avatars/thread-avatar.react.js
index 7382668cb..2731ee67e 100644
--- a/web/avatars/thread-avatar.react.js
+++ b/web/avatars/thread-avatar.react.js
@@ -1,57 +1,66 @@
// @flow
import * as React from 'react';
import { useAvatarForThread } from 'lib/hooks/avatar-hooks.js';
import { useResolvedAvatar } from 'lib/shared/avatar-utils.js';
import { getSingleOtherUser } from 'lib/shared/thread-utils.js';
import type { AvatarSize } from 'lib/types/avatar-types.js';
import type {
ThreadInfo,
RawThreadInfo,
} from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js';
import Avatar from './avatar.react.js';
import { useSelector } from '../redux/redux-utils.js';
type Props = {
+threadInfo: RawThreadInfo | ThreadInfo,
+size: AvatarSize,
+showSpinner?: boolean,
};
function ThreadAvatar(props: Props): React.Node {
const { threadInfo, size, showSpinner } = props;
const avatarInfo = useAvatarForThread(threadInfo);
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
let displayUserIDForThread;
if (threadInfo.type === threadTypes.GENESIS_PRIVATE) {
displayUserIDForThread = viewerID;
} else if (threadInfo.type === threadTypes.GENESIS_PERSONAL) {
displayUserIDForThread = getSingleOtherUser(threadInfo, viewerID);
}
- const displayUser = useSelector(state =>
- displayUserIDForThread
- ? state.userStore.userInfos[displayUserIDForThread]
- : null,
- );
+ const displayUser = useSelector(state => {
+ if (!displayUserIDForThread) {
+ return null;
+ }
+
+ const userBase = state.userStore.userInfos[displayUserIDForThread];
+ const farcasterID =
+ state.auxUserStore.auxUserInfos[displayUserIDForThread]?.fid;
+
+ return {
+ ...userBase,
+ farcasterID,
+ };
+ });
const resolvedThreadAvatar = useResolvedAvatar(avatarInfo, displayUser);
return (
);
}
export default ThreadAvatar;