chore: better looking card

apps/trading/components/competitions/box.tsx

@@ -5,7 +5,11 @@ export const BORDER_COLOR = 'border-vega-clight-500 dark:border-vega-cdark-500';
 export const GRADIENT =
   'bg-gradient-to-b from-vega-clight-800 dark:from-vega-cdark-800 to-transparent';
 
-export const Box = (props: HTMLAttributes<HTMLDivElement>) => {
+export const Box = ({
+  children,
+  backgroundImage,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { backgroundImage?: string }) => {
   return (
     <div
       {...props}
@@ -13,9 +17,22 @@ export const Box = (props: HTMLAttributes<HTMLDivElement>) => {
         BORDER_COLOR,
         GRADIENT,
         'border rounded-lg',
-        'p-6',
+        'relative p-6 overflow-hidden',
         props.className
       )}
-    />
+    >
+      {Boolean(backgroundImage?.length) && (
+        <div
+          className={classNames(
+            'pointer-events-none',
+            'bg-no-repeat bg-center bg-[length:500px_500px]',
+            'absolute top-0 left-0 w-full h-full -z-10 opacity-30 blur-lg'
+          )}
+          style={{ backgroundImage: `url("${backgroundImage}")` }}
+        ></div>
+      )}
+
+      {children}
+    </div>
   );
 };

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 const NUM_AVATARS = 20;
 const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png';
 
-const getFallbackAvatar = (teamId: string) => {
+export const getFallbackAvatar = (teamId: string) => {
   const avatarId = ((parseInt(teamId, 16) % NUM_AVATARS) + 1)
     .toString()
     .padStart(2, '0'); // between 01 - 20

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

@@ -1,6 +1,6 @@
 import { type TeamGame, type TeamStats } from '../../lib/hooks/use-team';
 import { type TeamsFieldsFragment } from '../../lib/hooks/__generated__/Teams';
-import { TeamAvatar } from './team-avatar';
+import { TeamAvatar, getFallbackAvatar } from './team-avatar';
 import { FavoriteGame, Stat } from './team-stats';
 import { useI18n, useT } from '../../lib/use-t';
 import { formatNumberRounded } from '@vegaprotocol/utils';
@@ -71,13 +71,21 @@ export const TeamCard = ({
   //   const lastGames = MOCK_LAST_GAMES;
 
   return (
-    <Box className="flex flex-row items-start gap-12 lg:p-12">
-      <div className="flex flex-col gap-3 min-w-[80px] lg:min-w-[112px]">
+    <div
+      className={classNames(
+        'gap-6 grid grid-cols-1 grid-rows-1',
+        'md:grid-cols-3'
+      )}
+    >
+      <Box
+        backgroundImage={team.avatarUrl || getFallbackAvatar(team.teamId)}
+        className="flex flex-col items-center gap-3 min-w-[80px] lg:min-w-[112px]"
+      >
         <TeamAvatar teamId={team.teamId} imgUrl={team.avatarUrl} />
         <h1 className="calt lg:text-2xl" data-testid="team-name">
           {team.name}
         </h1>
-        {games && <FavoriteGame games={games} />}
+        {games && <FavoriteGame games={games} noLabel />}
         <TradingAnchorButton
           size="extra-small"
           intent={Intent.Primary}
@@ -86,15 +94,15 @@ export const TeamCard = ({
           {t('Profile')}
         </TradingAnchorButton>
         <UpdateTeamButton team={team} size="extra-small" />
-      </div>
+      </Box>
 
       {/** Tiles */}
 
-      <div className="w-full">
+      <Box className="w-full md:col-span-2">
         <div
           className={classNames(
             'grid gap-3 w-full mb-4',
-            'lg:grid-cols-4 lg:grid-rows-2',
+            // 'lg:grid-cols-3 lg:grid-rows-2',
             'md:grid-cols-3 md:grid-rows-2',
             'grid-cols-2 grid-rows-3'
           )}
@@ -145,14 +153,15 @@ export const TeamCard = ({
           />
         </div>
 
-        {lastGames.length > 0 && (
+        {
           <dl className="w-full pt-4 border-t border-vega-clight-700 dark:border-vega-cdark-700">
             <dt className="mb-1 text-sm text-muted">
               {t('Last {{games}} games result', {
-                replace: { games: lastGames.length },
+                replace: { games: lastGames.length || '' },
               })}
             </dt>
             <dd className="flex flex-row flex-wrap gap-2">
+              {lastGames.length === 0 && t('None available')}
               {lastGames.map((game, i) => (
                 <Tooltip
                   key={i}
@@ -165,9 +174,9 @@ export const TeamCard = ({
               ))}
             </dd>
           </dl>
-        )}
-      </div>
-    </Box>
+        }
+      </Box>
+    </div>
   );
 };
 

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

@@ -103,7 +103,13 @@ const LatestResults = ({ games }: { games: TeamGame[] }) => {
   );
 };
 
-export const FavoriteGame = ({ games }: { games: TeamGame[] }) => {
+export const FavoriteGame = ({
+  games,
+  noLabel = false,
+}: {
+  games: TeamGame[];
+  noLabel?: boolean;
+}) => {
   const t = useT();
 
   const rewardMetrics = games.map(
@@ -129,7 +135,13 @@ export const FavoriteGame = ({ games }: { games: TeamGame[] }) => {
 
   return (
     <dl className="flex flex-col gap-1">
-      <dt className="text-muted text-sm">{t('Favorite game')}</dt>
+      <dt
+        className={classNames('text-muted text-sm', {
+          hidden: noLabel,
+        })}
+      >
+        {t('Favorite game')}
+      </dt>
       <dd>
         <Pill className="inline-flex items-center gap-1 bg-transparent text-sm">
           <VegaIcon

apps/trading/lib/hooks/use-my-team.ts

@@ -3,25 +3,13 @@ import compact from 'lodash/compact';
 import first from 'lodash/first';
 import { useTeamsQuery } from './__generated__/Teams';
 import { useTeam } from './use-team';
-import { DEFAULT_AGGREGATION_EPOCHS } from './use-teams';
-import { useTeamsStatisticsQuery } from './__generated__/TeamsStatistics';
-import orderBy from 'lodash/orderBy';
+import { useTeams } from './use-teams';
 
 export const useMyTeam = () => {
   const { pubKey } = useVegaWallet();
-  const { data: statsData } = useTeamsStatisticsQuery({
-    variables: {
-      aggregationEpochs: DEFAULT_AGGREGATION_EPOCHS,
-    },
-    fetchPolicy: 'cache-and-network',
-  });
-  const allStats = orderBy(
-    compact(statsData?.teamsStatistics?.edges).map((e) => e.node),
-    (s) => Number(s.totalQuantumRewards) || 0,
-    'desc'
-  );
+  const { data: teams } = useTeams();
 
-  const { data: partyTeams } = useTeamsQuery({
+  const { data: maybeMyTeam } = useTeamsQuery({
     variables: {
       partyId: pubKey,
     },
@@ -29,8 +17,8 @@ export const useMyTeam = () => {
     fetchPolicy: 'cache-and-network',
   });
 
-  const team = first(compact(partyTeams?.teams?.edges.map((n) => n.node)));
-  const rank = allStats.findIndex((t) => t.teamId === team?.teamId) + 1;
+  const team = first(compact(maybeMyTeam?.teams?.edges.map((n) => n.node)));
+  const rank = teams.findIndex((t) => t.teamId === team?.teamId) + 1;
   const { games, stats } = useTeam(team?.teamId);
 
   return { team, stats, games, rank };