Fix: useUserAvatars hook

src/hooks/index.ts

@@ -76,6 +76,7 @@ export { default as useEnoughTokensForStaking } from './useEnoughTokensForStakin
 export { default as useCurrentBlockTime } from './useCurrentBlockTime';
 export { default as useClipboardCopy } from './useClipboardCopy';
 export { default as useInvitationLink } from './useInvitationLink';
+export { default as useUsersByAddresses } from './useUsersByAddresses';
 
 export {
   default as useSafeTransactionStatus,

src/hooks/useUserAvatars/index.ts

@@ -1,16 +1,22 @@
 import { useMemo } from 'react';
+
+import { UserFragment } from '~gql';
+import { useAppContext, useUsersByAddresses } from '~hooks';
+import { notNull } from '~utils/arrays';
 import { calculateRemainingItems } from '~utils/avatars';
-import { useGetUsers } from '~common/ColonyActions/ActionDetailsPage/DefaultMotion/MotionPhaseWidget/VoteOutcome/VoteResults/helpers';
+
 import { UserAvatarsItem } from '~v5/shared/UserAvatars/types';
-import useAppContext from '../useAppContext';
-import { UseUserAvatarsReturnType } from './types';
 
 export const useUserAvatars = (
   maxAvatars: number,
   items: UserAvatarsItem[],
-): UseUserAvatarsReturnType => {
+): {
+  remainingAvatarsCount: number;
+  registeredUsers: UserFragment[];
+} => {
   const remainingAvatarsCount = calculateRemainingItems(maxAvatars, items);
   const { user } = useAppContext();
+
   const voterAddresses = useMemo(
     () =>
       items.reduce<string[]>((acc, { address }) => {
@@ -24,10 +30,16 @@ export const useUserAvatars = (
     [items, user],
   );
 
-  const registeredUsers = useGetUsers(voterAddresses);
+  const { users: registeredUsers = [] } = useUsersByAddresses(
+    /*
+     * @NOTE Due to how the or filter works
+     * If the array would be empty it would return all users
+     */
+    voterAddresses.length ? voterAddresses : [''],
+  );
 
   return {
     remainingAvatarsCount,
-    registeredUsers,
+    registeredUsers: registeredUsers.filter(notNull),
   };
 };