feat(trading): team card
This commit is contained in:
asiaznik
@@ -16,6 +16,8 @@ import { CompetitionsLeaderboard } from '../../components/competitions/competiti
|
||||
import { useTeams } from '../../lib/hooks/use-teams';
|
||||
import take from 'lodash/take';
|
||||
import { usePageTitle } from '../../lib/hooks/use-page-title';
|
||||
import { TeamCard } from '../../components/competitions/team-card';
|
||||
import { useMyTeam } from '../../lib/hooks/use-my-team';
|
||||
|
||||
export const CompetitionsHome = () => {
|
||||
const t = useT();
|
||||
@@ -33,6 +35,13 @@ export const CompetitionsHome = () => {
|
||||
|
||||
const { data: teamsData, loading: teamsLoading } = useTeams();
|
||||
|
||||
const {
|
||||
team: myTeam,
|
||||
stats: myTeamStats,
|
||||
games: myTeamGames,
|
||||
rank: myTeamRank,
|
||||
} = useMyTeam();
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<CompetitionsHeader title={t('Competitions')}>
|
||||
@@ -43,68 +52,82 @@ export const CompetitionsHome = () => {
|
||||
</p>
|
||||
</CompetitionsHeader>
|
||||
|
||||
{/** Get started */}
|
||||
<h2 className="text-2xl mb-6">{t('Get started')}</h2>
|
||||
{/** Team card */}
|
||||
{myTeam ? (
|
||||
<>
|
||||
<h2 className="text-2xl mb-6">{t('My team')}</h2>
|
||||
<div className="mb-12">
|
||||
<TeamCard
|
||||
team={myTeam}
|
||||
rank={myTeamRank}
|
||||
stats={myTeamStats}
|
||||
games={myTeamGames}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/** Get started */}
|
||||
<h2 className="text-2xl mb-6">{t('Get started')}</h2>
|
||||
|
||||
<CompetitionsActionsContainer>
|
||||
<CompetitionsAction
|
||||
variant="A"
|
||||
title={t('Create a team')}
|
||||
description={t(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat ipsum minus nemo error dicta.'
|
||||
)}
|
||||
actionElement={
|
||||
<TradingButton
|
||||
intent={Intent.Primary}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(Links.COMPETITIONS_CREATE_TEAM());
|
||||
}}
|
||||
data-testid="create-public-team-button"
|
||||
>
|
||||
{t('Create a public team')}
|
||||
</TradingButton>
|
||||
}
|
||||
/>
|
||||
<CompetitionsAction
|
||||
variant="B"
|
||||
title={t('Solo team / lone wolf')}
|
||||
description={t(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat ipsum minus nemo error dicta.'
|
||||
)}
|
||||
actionElement={
|
||||
<TradingButton
|
||||
intent={Intent.Primary}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(Links.COMPETITIONS_CREATE_TEAM_SOLO());
|
||||
}}
|
||||
data-testid="create-private-team-button"
|
||||
>
|
||||
{t('Create a private team')}
|
||||
</TradingButton>
|
||||
}
|
||||
/>
|
||||
<CompetitionsAction
|
||||
variant="C"
|
||||
title={t('Join a team')}
|
||||
description={t(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat ipsum minus nemo error dicta.'
|
||||
)}
|
||||
actionElement={
|
||||
<TradingButton
|
||||
intent={Intent.Primary}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(Links.COMPETITIONS_TEAMS());
|
||||
}}
|
||||
data-testid="choose-team-button"
|
||||
>
|
||||
{t('Choose a team')}
|
||||
</TradingButton>
|
||||
}
|
||||
/>
|
||||
</CompetitionsActionsContainer>
|
||||
<CompetitionsActionsContainer>
|
||||
<CompetitionsAction
|
||||
variant="A"
|
||||
title={t('Create a team')}
|
||||
description={t(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat ipsum minus nemo error dicta.'
|
||||
)}
|
||||
actionElement={
|
||||
<TradingButton
|
||||
intent={Intent.Primary}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(Links.COMPETITIONS_CREATE_TEAM());
|
||||
}}
|
||||
>
|
||||
{t('Create a public team')}
|
||||
</TradingButton>
|
||||
}
|
||||
/>
|
||||
<CompetitionsAction
|
||||
variant="B"
|
||||
title={t('Solo team / lone wolf')}
|
||||
description={t(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat ipsum minus nemo error dicta.'
|
||||
)}
|
||||
actionElement={
|
||||
<TradingButton
|
||||
intent={Intent.Primary}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(Links.COMPETITIONS_CREATE_TEAM_SOLO());
|
||||
}}
|
||||
>
|
||||
{t('Create a private team')}
|
||||
</TradingButton>
|
||||
}
|
||||
/>
|
||||
<CompetitionsAction
|
||||
variant="C"
|
||||
title={t('Join a team')}
|
||||
description={t(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat ipsum minus nemo error dicta.'
|
||||
)}
|
||||
actionElement={
|
||||
<TradingButton
|
||||
intent={Intent.Primary}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(Links.COMPETITIONS_TEAMS());
|
||||
}}
|
||||
>
|
||||
{t('Choose a team')}
|
||||
</TradingButton>
|
||||
}
|
||||
/>
|
||||
</CompetitionsActionsContainer>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/** List of available games */}
|
||||
<h2 className="text-2xl mb-6">{t('Games')}</h2>
|
||||
|
||||
@@ -1,16 +1,24 @@
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
import { type Team } from '../../lib/hooks/use-team';
|
||||
import { type ComponentProps } from 'react';
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
|
||||
import { Links } from '../../lib/links';
|
||||
import { useT } from '../../lib/use-t';
|
||||
|
||||
export const UpdateTeamButton = ({ team }: { team: Team }) => {
|
||||
export const UpdateTeamButton = ({
|
||||
team,
|
||||
size = 'medium',
|
||||
}: {
|
||||
team: Pick<Team, 'teamId' | 'referrer'>;
|
||||
size?: ComponentProps<typeof TradingAnchorButton>['size'];
|
||||
}) => {
|
||||
const t = useT();
|
||||
const { pubKey, isReadOnly } = useVegaWallet();
|
||||
|
||||
if (pubKey && !isReadOnly && pubKey === team.referrer) {
|
||||
return (
|
||||
<TradingAnchorButton
|
||||
size={size}
|
||||
data-testid="update-team-button"
|
||||
href={Links.COMPETITIONS_UPDATE_TEAM(team.teamId)}
|
||||
intent={Intent.Info}
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
import { type TeamGame, type TeamStats } from '../../lib/hooks/use-team';
|
||||
import { type TeamsFieldsFragment } from '../../lib/hooks/__generated__/Teams';
|
||||
import { TeamAvatar } from './team-avatar';
|
||||
import { FavoriteGame, Stat } from './team-stats';
|
||||
import { useI18n, useT } from '../../lib/use-t';
|
||||
import { formatNumberRounded } from '@vegaprotocol/utils';
|
||||
import BigNumber from 'bignumber.js';
|
||||
import { Box } from './box';
|
||||
import { Intent, Tooltip, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
|
||||
import { Links } from '../../lib/links';
|
||||
import orderBy from 'lodash/orderBy';
|
||||
import { take } from 'lodash';
|
||||
import { DispatchMetric, DispatchMetricLabels } from '@vegaprotocol/types';
|
||||
import classNames from 'classnames';
|
||||
import { UpdateTeamButton } from '../../client-pages/competitions/update-team-button';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const MOCK_LAST_GAMES = [
|
||||
{
|
||||
rank: 12,
|
||||
metric: DispatchMetric.DISPATCH_METRIC_MAKER_FEES_PAID,
|
||||
epoch: 1,
|
||||
},
|
||||
{
|
||||
rank: 33,
|
||||
metric: DispatchMetric.DISPATCH_METRIC_RELATIVE_RETURN,
|
||||
epoch: 2,
|
||||
},
|
||||
{
|
||||
rank: 4,
|
||||
metric: DispatchMetric.DISPATCH_METRIC_VALIDATOR_RANKING,
|
||||
epoch: 3,
|
||||
},
|
||||
{
|
||||
rank: 99,
|
||||
metric: DispatchMetric.DISPATCH_METRIC_AVERAGE_POSITION,
|
||||
epoch: 4,
|
||||
},
|
||||
{
|
||||
rank: 47,
|
||||
metric: DispatchMetric.DISPATCH_METRIC_MARKET_VALUE,
|
||||
epoch: 5,
|
||||
},
|
||||
];
|
||||
|
||||
export const TeamCard = ({
|
||||
rank,
|
||||
team,
|
||||
stats,
|
||||
games,
|
||||
}: {
|
||||
rank: number;
|
||||
team: TeamsFieldsFragment;
|
||||
stats?: TeamStats;
|
||||
games?: TeamGame[];
|
||||
}) => {
|
||||
const t = useT();
|
||||
|
||||
const lastGames = take(
|
||||
orderBy(
|
||||
games?.map((g) => ({
|
||||
rank: g.team.rank,
|
||||
metric: g.team.rewardMetric,
|
||||
epoch: g.epoch,
|
||||
})),
|
||||
(i) => i.epoch,
|
||||
'desc'
|
||||
),
|
||||
5
|
||||
);
|
||||
// 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]">
|
||||
<TeamAvatar teamId={team.teamId} imgUrl={team.avatarUrl} />
|
||||
<h1 className="calt lg:text-2xl" data-testid="team-name">
|
||||
{team.name}
|
||||
</h1>
|
||||
{games && <FavoriteGame games={games} />}
|
||||
<TradingAnchorButton
|
||||
size="extra-small"
|
||||
intent={Intent.Primary}
|
||||
href={Links.COMPETITIONS_TEAM(team.teamId)}
|
||||
>
|
||||
{t('Profile')}
|
||||
</TradingAnchorButton>
|
||||
<UpdateTeamButton team={team} size="extra-small" />
|
||||
</div>
|
||||
|
||||
{/** Tiles */}
|
||||
|
||||
<div className="w-full">
|
||||
<div
|
||||
className={classNames(
|
||||
'grid gap-3 w-full mb-4',
|
||||
'lg:grid-cols-4 lg:grid-rows-2',
|
||||
'md:grid-cols-3 md:grid-rows-2',
|
||||
'grid-cols-2 grid-rows-3'
|
||||
)}
|
||||
>
|
||||
<Stat
|
||||
className="flex flex-col-reverse"
|
||||
value={rank}
|
||||
label={t('Rank')}
|
||||
valueTestId="team-rank"
|
||||
/>
|
||||
<Stat
|
||||
className="flex flex-col-reverse"
|
||||
value={team.totalMembers || 0}
|
||||
label={t('Members')}
|
||||
valueTestId="members-count-stat"
|
||||
/>
|
||||
<Stat
|
||||
className="flex flex-col-reverse"
|
||||
value={stats?.totalGamesPlayed || 0}
|
||||
label={t('Total games')}
|
||||
valueTestId="total-games-stat"
|
||||
/>
|
||||
<Stat
|
||||
className="flex flex-col-reverse"
|
||||
value={
|
||||
stats?.totalQuantumVolume
|
||||
? formatNumberRounded(
|
||||
new BigNumber(stats.totalQuantumVolume || 0),
|
||||
'1e3'
|
||||
)
|
||||
: 0
|
||||
}
|
||||
label={t('Total volume')}
|
||||
valueTestId="total-volume-stat"
|
||||
/>
|
||||
<Stat
|
||||
className="flex flex-col-reverse"
|
||||
value={
|
||||
stats?.totalQuantumRewards
|
||||
? formatNumberRounded(
|
||||
new BigNumber(stats.totalQuantumRewards || 0),
|
||||
'1e3'
|
||||
)
|
||||
: 0
|
||||
}
|
||||
label={t('Rewards paid out')}
|
||||
valueTestId="rewards-paid-stat"
|
||||
/>
|
||||
</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 },
|
||||
})}
|
||||
</dt>
|
||||
<dd className="flex flex-row flex-wrap gap-2">
|
||||
{lastGames.map((game, i) => (
|
||||
<Tooltip
|
||||
key={i}
|
||||
description={DispatchMetricLabels[game.metric]}
|
||||
>
|
||||
<button className="cursor-help text-sm bg-vega-clight-700 dark:bg-vega-cdark-700 px-2 py-1 rounded-full">
|
||||
<RankLabel rank={game.rank} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
))}
|
||||
</dd>
|
||||
</dl>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the english ordinal for rank (only if the current language is set to
|
||||
* english)
|
||||
*/
|
||||
const RankLabel = ({ rank }: { rank: number }) => {
|
||||
const i18n = useI18n();
|
||||
if (i18n.language.substring(0, 2) !== 'en') return rank.toString();
|
||||
|
||||
const r = rank.toString();
|
||||
let suffix = 'th';
|
||||
if (r.substring(r.length - 1) === '1') suffix = 'st';
|
||||
if (r.substring(r.length - 1) === '2') suffix = 'nd';
|
||||
if (r.substring(r.length - 1) === '3') suffix = 'rd';
|
||||
|
||||
return `${r}${suffix}`;
|
||||
};
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
} from '../../lib/hooks/use-team';
|
||||
import { useT } from '../../lib/use-t';
|
||||
import { DispatchMetricLabels, type DispatchMetric } from '@vegaprotocol/types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const TeamStats = ({
|
||||
stats,
|
||||
@@ -102,7 +103,7 @@ const LatestResults = ({ games }: { games: TeamGame[] }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const FavoriteGame = ({ games }: { games: TeamGame[] }) => {
|
||||
export const FavoriteGame = ({ games }: { games: TeamGame[] }) => {
|
||||
const t = useT();
|
||||
|
||||
const rewardMetrics = games.map(
|
||||
@@ -142,7 +143,7 @@ const FavoriteGame = ({ games }: { games: TeamGame[] }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const StatSection = ({ children }: { children: ReactNode }) => {
|
||||
export const StatSection = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<section className="flex flex-col lg:flex-row gap-4 lg:gap-8">
|
||||
{children}
|
||||
@@ -150,11 +151,11 @@ const StatSection = ({ children }: { children: ReactNode }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const StatSectionSeparator = () => {
|
||||
export const StatSectionSeparator = () => {
|
||||
return <div className="hidden md:block border-r border-default" />;
|
||||
};
|
||||
|
||||
const StatList = ({ children }: { children: ReactNode }) => {
|
||||
export const StatList = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<dl className="grid grid-cols-2 md:flex gap-4 md:gap-6 lg:gap-8 whitespace-nowrap">
|
||||
{children}
|
||||
@@ -162,19 +163,21 @@ const StatList = ({ children }: { children: ReactNode }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const Stat = ({
|
||||
export const Stat = ({
|
||||
value,
|
||||
label,
|
||||
tooltip,
|
||||
valueTestId,
|
||||
className,
|
||||
}: {
|
||||
value: ReactNode;
|
||||
label: ReactNode;
|
||||
tooltip?: string;
|
||||
valueTestId?: string;
|
||||
className?: classNames.Argument;
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<div className={classNames(className)}>
|
||||
<dd className="text-3xl lg:text-4xl" data-testid={valueTestId}>
|
||||
{value}
|
||||
</dd>
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
fragment TeamsFields on Team {
|
||||
teamId
|
||||
referrer
|
||||
name
|
||||
teamUrl
|
||||
avatarUrl
|
||||
createdAt
|
||||
createdAtEpoch
|
||||
closed
|
||||
totalMembers
|
||||
}
|
||||
|
||||
query Teams($teamId: ID, $partyId: ID) {
|
||||
teams(teamId: $teamId, partyId: $partyId) {
|
||||
edges {
|
||||
node {
|
||||
teamId
|
||||
referrer
|
||||
name
|
||||
teamUrl
|
||||
avatarUrl
|
||||
createdAt
|
||||
createdAtEpoch
|
||||
closed
|
||||
...TeamsFields
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+18
-11
@@ -3,33 +3,40 @@ import * as Types from '@vegaprotocol/types';
|
||||
import { gql } from '@apollo/client';
|
||||
import * as Apollo from '@apollo/client';
|
||||
const defaultOptions = {} as const;
|
||||
export type TeamsFieldsFragment = { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean, totalMembers: number };
|
||||
|
||||
export type TeamsQueryVariables = Types.Exact<{
|
||||
teamId?: Types.InputMaybe<Types.Scalars['ID']>;
|
||||
partyId?: Types.InputMaybe<Types.Scalars['ID']>;
|
||||
}>;
|
||||
|
||||
|
||||
export type TeamsQuery = { __typename?: 'Query', teams?: { __typename?: 'TeamConnection', edges: Array<{ __typename?: 'TeamEdge', node: { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean } }> } | null };
|
||||
|
||||
export type TeamsQuery = { __typename?: 'Query', teams?: { __typename?: 'TeamConnection', edges: Array<{ __typename?: 'TeamEdge', node: { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean, totalMembers: number } }> } | null };
|
||||
|
||||
export const TeamsFieldsFragmentDoc = gql`
|
||||
fragment TeamsFields on Team {
|
||||
teamId
|
||||
referrer
|
||||
name
|
||||
teamUrl
|
||||
avatarUrl
|
||||
createdAt
|
||||
createdAtEpoch
|
||||
closed
|
||||
totalMembers
|
||||
}
|
||||
`;
|
||||
export const TeamsDocument = gql`
|
||||
query Teams($teamId: ID, $partyId: ID) {
|
||||
teams(teamId: $teamId, partyId: $partyId) {
|
||||
edges {
|
||||
node {
|
||||
teamId
|
||||
referrer
|
||||
name
|
||||
teamUrl
|
||||
avatarUrl
|
||||
createdAt
|
||||
createdAtEpoch
|
||||
closed
|
||||
...TeamsFields
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
${TeamsFieldsFragmentDoc}`;
|
||||
|
||||
/**
|
||||
* __useTeamsQuery__
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
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';
|
||||
|
||||
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: partyTeams } = useTeamsQuery({
|
||||
variables: {
|
||||
partyId: pubKey,
|
||||
},
|
||||
skip: !pubKey,
|
||||
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 { games, stats } = useTeam(team?.teamId);
|
||||
|
||||
return { team, stats, games, rank };
|
||||
};
|
||||
Reference in New Issue
Block a user