fix(trading): wrong team image showing (#6081)

apps/trading/components/competitions/competitions-leaderboard.tsx

@@ -44,6 +44,7 @@ export const CompetitionsLeaderboard = ({
 
         const avatar = (
           <TeamAvatar
+            key={td.teamId}
             teamId={td.teamId}
             imgUrl={td.avatarUrl}
             alt={td.name}

apps/trading/components/competitions/team-avatar.tsx

@@ -1,6 +1,4 @@
-import { isValidUrl } from '@vegaprotocol/utils';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
 
 const NUM_AVATARS = 20;
 const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png';
@@ -13,26 +11,6 @@ export const getFallbackAvatar = (teamId: string) => {
   return AVATAR_PATHNAME_PATTERN.replace('{id}', avatarId);
 };
 
-const useAvatar = (teamId: string, url: string) => {
-  const fallback = getFallbackAvatar(teamId);
-  const [avatar, setAvatar] = useState<string>(fallback);
-
-  useEffect(() => {
-    if (!isValidUrl(url)) return;
-    fetch(url, { cache: 'force-cache' })
-      .then((response) => {
-        if (response.ok) {
-          setAvatar(url);
-        }
-      })
-      .catch(() => {
-        /** noop */
-      });
-  });
-
-  return avatar;
-};
-
 export const TeamAvatar = ({
   teamId,
   imgUrl,
@@ -44,11 +22,11 @@ export const TeamAvatar = ({
   alt?: string;
   size?: 'large' | 'small';
 }) => {
-  const img = useAvatar(teamId, imgUrl);
+  // const img = useAvatar(teamId, imgUrl);
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
-      src={img}
+      src={imgUrl}
       alt={alt || 'Team avatar'}
       className={classNames(
         'rounded-full bg-vega-clight-700 dark:bg-vega-cdark-700 shrink-0',
@@ -58,6 +36,9 @@ export const TeamAvatar = ({
         }
       )}
       referrerPolicy="no-referrer"
+      onError={(e) => {
+        e.currentTarget.src = getFallbackAvatar(teamId);
+      }}
     />
   );
 };