diff --git a/apps/trading/components/competitions/box.tsx b/apps/trading/components/competitions/box.tsx index d6c15de41..17227b3b5 100644 --- a/apps/trading/components/competitions/box.tsx +++ b/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) => { +export const Box = ({ + children, + backgroundImage, + ...props +}: HTMLAttributes & { backgroundImage?: string }) => { return (
) => { BORDER_COLOR, GRADIENT, 'border rounded-lg', - 'p-6', + 'relative p-6 overflow-hidden', props.className )} - /> + > + {Boolean(backgroundImage?.length) && ( +
+ )} + + {children} +
); }; diff --git a/apps/trading/components/competitions/team-avatar.tsx b/apps/trading/components/competitions/team-avatar.tsx index 8074ed525..7e8be0ecb 100644 --- a/apps/trading/components/competitions/team-avatar.tsx +++ b/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 diff --git a/apps/trading/components/competitions/team-card.tsx b/apps/trading/components/competitions/team-card.tsx index 7a8588ae0..4ecffbe45 100644 --- a/apps/trading/components/competitions/team-card.tsx +++ b/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 ( - -
+
+

{team.name}

- {games && } + {games && } -
+ {/** Tiles */} -
+
- {lastGames.length > 0 && ( + {
{t('Last {{games}} games result', { - replace: { games: lastGames.length }, + replace: { games: lastGames.length || '' }, })}
+ {lastGames.length === 0 && t('None available')} {lastGames.map((game, i) => (
- )} -
- + } + +
); }; diff --git a/apps/trading/components/competitions/team-stats.tsx b/apps/trading/components/competitions/team-stats.tsx index 5904aafab..ced4ad18c 100644 --- a/apps/trading/components/competitions/team-stats.tsx +++ b/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 (
-
{t('Favorite game')}
+
+ {t('Favorite game')} +
{ 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 };