stream.place
Live video on the AT Protocol
move useAvatars call out of the dropdown menu
+16
-6
js/components/src/components/chat/user-profile-card.tsx
+16
-6
js/components/src/components/chat/user-profile-card.tsx
···
73
73
streamer,
74
74
badge,
75
75
serviceDid,
76
+
issuerProfiles,
76
77
}: {
77
78
badge: NonNullable<ChatMessageViewHydrated["badges"]>[number];
78
79
serviceDid: string;
79
80
streamer?: ProfileViewBasic;
81
+
issuerProfiles: ReturnType<typeof useAvatars>;
80
82
}) => {
81
83
const isServiceIssued = badge.issuer === serviceDid;
82
-
const issuerDids = useMemo(
83
-
() => (isServiceIssued ? [] : [badge.issuer]),
84
-
[isServiceIssued, badge.issuer],
85
-
);
86
-
const issuerProfiles = useAvatars(issuerDids);
87
84
const meta = BADGE_META[badge.badgeType];
88
85
89
86
if (!meta) return null;
···
149
146
const thisRef = useRef<TriggerRef>(null);
150
147
const [hovered, setHovered] = useState(false);
151
148
152
-
const profiles = useAvatars(author.did ? [author.did] : []);
149
+
const issuerDids = useMemo(
150
+
() =>
151
+
badges?.map((b) => b.issuer).filter((did) => did && did !== serviceDid) ??
152
+
[],
153
+
[badges, serviceDid],
154
+
);
155
+
156
+
const allDids = useMemo(
157
+
() => (author.did ? [author.did, ...issuerDids] : issuerDids),
158
+
[author.did, issuerDids],
159
+
);
160
+
161
+
const profiles = useAvatars(allDids);
153
162
const profile = profiles[author.did];
154
163
155
164
useEffect(() => {
···
273
282
badge={badge}
274
283
serviceDid={serviceDid}
275
284
streamer={streamer}
285
+
issuerProfiles={profiles}
276
286
/>
277
287
))}
278
288
</View>