chore: make team stats aggregation epochs 192

2024-02-01 09:16:27 -08:00
20 changed files with 338 additions and 616 deletions
@@ -71,27 +71,18 @@ const CreateTeamFormContainer = ({ isSolo }: { isSolo: boolean }) => {

  if (status === 'confirmed') {
    return (
-      <div
-        className="flex flex-col items-start gap-2"
-        data-testid="team-creation-success-message"
-      >
+      <div className="flex flex-col items-start gap-2">
        <p className="text-sm">{t('Team creation transaction successful')}</p>
        {code && (
          <>
            <p className="text-sm">
              Your team ID is:{' '}
-              <span
-                className="font-mono break-all"
-                data-testid="team-id-display"
-              >
-                {code}
-              </span>
+              <span className="font-mono break-all">{code}</span>
            </p>
            <TradingAnchorButton
              href={Links.COMPETITIONS_TEAM(code)}
              intent={Intent.Info}
              size="small"
-              data-testid="view-team-button"
            >
              {t('View team')}
            </TradingAnchorButton>
@@ -16,8 +16,6 @@ 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();
@@ -35,13 +33,6 @@ 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')}>
@@ -52,83 +43,65 @@ export const CompetitionsHome = () => {
        </p>
      </CompetitionsHeader>

-      {/** 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>
+      {/** 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());
-                  }}
-                >
-                  {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>
-        </>
-      )}
+      <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>
@@ -105,11 +105,7 @@ export const JoinButton = ({
  // Party is in a team, but not this one
  else if (partyTeam && partyTeam.teamId !== team.teamId) {
    return (
-      <Button
-        onClick={() => onJoin('switch')}
-        intent={Intent.Primary}
-        data-testid="switch-team-button"
-      >
+      <Button onClick={() => onJoin('switch')} intent={Intent.Primary}>
        {t('Switch team')}{' '}
      </Button>
    );
@@ -219,11 +215,7 @@ const DialogContent = ({
        </>
      )}
      <div className="flex justify-between gap-2">
-        <Button
-          onClick={joinTeam}
-          intent={Intent.Success}
-          data-testid="confirm-switch-button"
-        >
+        <Button onClick={joinTeam} intent={Intent.Success}>
          {t('Confirm')}
        </Button>
        <Button onClick={onCancel} intent={Intent.Danger}>
@@ -115,12 +115,9 @@ export const TeamForm = ({
    <form onSubmit={handleSubmit(sendTransaction)}>
      <input type="hidden" {...register('id')} />
      <TradingFormGroup label={t('Team name')} labelFor="name">
-        <TradingInput
-          {...register('name', { required: t('Required') })}
-          data-testid="team-name-input"
-        />
+        <TradingInput {...register('name', { required: t('Required') })} />
        {errors.name?.message && (
-          <TradingInputError forInput="name" data-testid="team-name-error">
+          <TradingInputError forInput="name">
            {errors.name.message}
          </TradingInputError>
        )}
@@ -136,10 +133,9 @@ export const TeamForm = ({
          {...register('url', {
            pattern: { value: URL_REGEX, message: t('Invalid URL') },
          })}
-          data-testid="team-url-input"
        />
        {errors.url?.message && (
-          <TradingInputError forInput="url" data-testid="team-url-error">
+          <TradingInputError forInput="url">
            {errors.url.message}
          </TradingInputError>
        )}
@@ -156,13 +152,9 @@ export const TeamForm = ({
              message: t('Invalid image URL'),
            },
          })}
-          data-testid="avatar-url-input"
        />
        {errors.avatarUrl?.message && (
-          <TradingInputError
-            forInput="avatarUrl"
-            data-testid="avatar-url-error"
-          >
+          <TradingInputError forInput="avatarUrl">
            {errors.avatarUrl.message}
          </TradingInputError>
        )}
@@ -187,7 +179,6 @@ export const TeamForm = ({
                      onCheckedChange={(value) => {
                        field.onChange(value);
                      }}
-                      data-testid="team-private-checkbox"
                    />
                  );
                }}
@@ -216,13 +207,9 @@ export const TeamForm = ({
                      },
                    },
                  })}
-                  data-testid="team-allow-list-textarea"
                />
                {errors.allowList?.message && (
-                  <TradingInputError
-                    forInput="avatarUrl"
-                    data-testid="team-allow-list-error"
-                  >
+                  <TradingInputError forInput="avatarUrl">
                    {errors.allowList.message}
                  </TradingInputError>
                )}
@@ -297,12 +284,7 @@ const SubmitButton = ({

  return (
    <div className="flex gap-2 items-baseline">
-      <TradingButton
-        type="submit"
-        intent={Intent.Info}
-        disabled={disabled}
-        data-testid="team-form-submit-button"
-      >
+      <TradingButton type="submit" intent={Intent.Info} disabled={disabled}>
        {text}
      </TradingButton>
      {status === 'confirmed' && confirmed}
@@ -1,24 +1,16 @@
-import { type Team } from '../../lib/hooks/use-team';
-import { type ComponentProps } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { type Team } from '../../lib/hooks/use-team';
 import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
 import { Links } from '../../lib/links';
 import { useT } from '../../lib/use-t';

-export const UpdateTeamButton = ({
-  team,
-  size = 'medium',
-}: {
-  team: Pick<Team, 'teamId' | 'referrer'>;
-  size?: ComponentProps<typeof TradingAnchorButton>['size'];
-}) => {
+export const UpdateTeamButton = ({ team }: { team: Team }) => {
  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}
@@ -5,11 +5,7 @@ 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 = ({
-  children,
-  backgroundImage,
-  ...props
-}: HTMLAttributes<HTMLDivElement> & { backgroundImage?: string }) => {
+export const Box = (props: HTMLAttributes<HTMLDivElement>) => {
  return (
    <div
      {...props}
@@ -17,22 +13,9 @@ export const Box = ({
        BORDER_COLOR,
        GRADIENT,
        'border rounded-lg',
-        'relative p-6 overflow-hidden',
+        'p-6',
        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>
+    />
  );
 };
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 const NUM_AVATARS = 20;
 const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png';

-export const getFallbackAvatar = (teamId: string) => {
+const getFallbackAvatar = (teamId: string) => {
  const avatarId = ((parseInt(teamId, 16) % NUM_AVATARS) + 1)
    .toString()
    .padStart(2, '0'); // between 01 - 20
@@ -1,154 +0,0 @@
-import { type TeamGame, type TeamStats } from '../../lib/hooks/use-team';
-import { type TeamsFieldsFragment } from '../../lib/hooks/__generated__/Teams';
-import { TeamAvatar, getFallbackAvatar } from './team-avatar';
-import { FavoriteGame, Stat } from './team-stats';
-import { 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 { DispatchMetricLabels } from '@vegaprotocol/types';
-import classNames from 'classnames';
-import { UpdateTeamButton } from '../../client-pages/competitions/update-team-button';
-
-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
-  );
-
-  return (
-    <div
-      className={classNames(
-        'gap-6 grid grid-cols-1 grid-rows-1',
-        'md:grid-cols-3'
-      )}
-    >
-      {/** Card */}
-      <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} noLabel />}
-        <TradingAnchorButton
-          size="extra-small"
-          intent={Intent.Primary}
-          href={Links.COMPETITIONS_TEAM(team.teamId)}
-        >
-          {t('Profile')}
-        </TradingAnchorButton>
-        <UpdateTeamButton team={team} size="extra-small" />
-      </Box>
-
-      {/** Tiles */}
-      <Box className="w-full md:col-span-2">
-        <div
-          className={classNames(
-            'grid gap-3 w-full mb-4',
-            '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>
-
-        <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.length === 0 && t('None available')}
-            {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>
-      </Box>
-    </div>
-  );
-};
-
-/**
- * Sets the english ordinal for given rank only if the current language is set
- * to english.
- */
-const RankLabel = ({ rank }: { rank: number }) => {
-  const t = useT();
-  return t('place', { count: rank, ordinal: true });
-};
@@ -15,7 +15,6 @@ 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,
@@ -103,13 +102,7 @@ const LatestResults = ({ games }: { games: TeamGame[] }) => {
  );
 };

-export const FavoriteGame = ({
-  games,
-  noLabel = false,
-}: {
-  games: TeamGame[];
-  noLabel?: boolean;
-}) => {
+const FavoriteGame = ({ games }: { games: TeamGame[] }) => {
  const t = useT();

  const rewardMetrics = games.map(
@@ -135,13 +128,7 @@ export const FavoriteGame = ({

  return (
    <dl className="flex flex-col gap-1">
-      <dt
-        className={classNames('text-muted text-sm', {
-          hidden: noLabel,
-        })}
-      >
-        {t('Favorite game')}
-      </dt>
+      <dt className="text-muted text-sm">{t('Favorite game')}</dt>
      <dd>
        <Pill className="inline-flex items-center gap-1 bg-transparent text-sm">
          <VegaIcon
@@ -155,7 +142,7 @@ export const FavoriteGame = ({
  );
 };

-export const StatSection = ({ children }: { children: ReactNode }) => {
+const StatSection = ({ children }: { children: ReactNode }) => {
  return (
    <section className="flex flex-col lg:flex-row gap-4 lg:gap-8">
      {children}
@@ -163,11 +150,11 @@ export const StatSection = ({ children }: { children: ReactNode }) => {
  );
 };

-export const StatSectionSeparator = () => {
+const StatSectionSeparator = () => {
  return <div className="hidden md:block border-r border-default" />;
 };

-export const StatList = ({ children }: { children: ReactNode }) => {
+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}
@@ -175,21 +162,19 @@ export const StatList = ({ children }: { children: ReactNode }) => {
  );
 };

-export const Stat = ({
+const Stat = ({
  value,
  label,
  tooltip,
  valueTestId,
-  className,
 }: {
  value: ReactNode;
  label: ReactNode;
  tooltip?: string;
  valueTestId?: string;
-  className?: classNames.Argument;
 }) => {
  return (
-    <div className={classNames(className)}>
+    <div>
      <dd className="text-3xl lg:text-4xl" data-testid={valueTestId}>
        {value}
      </dd>
@@ -152,11 +152,7 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
  if (!enrichedTransfers || !enrichedTransfers.length) return null;

  return (
-    <Card
-      title={t('Active rewards')}
-      className="lg:col-span-full"
-      data-testid="active-rewards-card"
-    >
+    <Card title={t('Active rewards')} className="lg:col-span-full">
      {enrichedTransfers.length > 1 && (
        <TradingInput
          onChange={(e) =>
@@ -316,30 +312,49 @@ export const ActiveRewardCard = ({
        MarketState.STATE_CLOSED,
      ].includes(m.state)
  );
-
  if (marketSettled) {
    return null;
  }

-  const assetInActiveMarket =
+  const assetInSettledMarket =
    allMarkets &&
    Object.values(allMarkets).some((m: MarketFieldsFragment | null) => {
      if (m && getAsset(m).id === dispatchStrategy.dispatchMetricAssetId) {
-        return m?.state && MarketState.STATE_ACTIVE === m.state;
+        return (
+          m?.state &&
+          [
+            MarketState.STATE_TRADING_TERMINATED,
+            MarketState.STATE_SETTLED,
+            MarketState.STATE_CANCELLED,
+            MarketState.STATE_CLOSED,
+          ].includes(m.state)
+        );
      }
      return false;
    });

-  const marketSuspended = transferNode.markets?.some(
+  // Gray out the cards that are related to suspended markets
+  const suspended = transferNode.markets?.some(
    (m) =>
      m?.state === MarketState.STATE_SUSPENDED ||
      m?.state === MarketState.STATE_SUSPENDED_VIA_GOVERNANCE
  );

+  const assetInSuspendedMarket =
+    allMarkets &&
+    Object.values(allMarkets).some((m: MarketFieldsFragment | null) => {
+      if (m && getAsset(m).id === dispatchStrategy.dispatchMetricAssetId) {
+        return (
+          m?.state === MarketState.STATE_SUSPENDED ||
+          m?.state === MarketState.STATE_SUSPENDED_VIA_GOVERNANCE
+        );
+      }
+      return false;
+    });
+
  // Gray out the cards that are related to suspended markets
-  // Or settlement assets in markets that are not active and eligible for rewards
  const { gradientClassName, mainClassName } =
-    marketSuspended || !assetInActiveMarket
+    suspended || assetInSuspendedMarket || assetInSettledMarket
      ? {
          gradientClassName: 'from-vega-cdark-500 to-vega-clight-400',
          mainClassName: 'from-vega-cdark-400 dark:from-vega-cdark-600 to-20%',
@@ -356,7 +371,6 @@ export const ActiveRewardCard = ({
          'rounded-lg',
          gradientClassName
        )}
-        data-testid="active-rewards-card"
      >
        <div
          className={classNames(
@@ -368,7 +382,7 @@ export const ActiveRewardCard = ({
            <div className="flex flex-col gap-2 items-center text-center">
              <EntityIcon transfer={transfer} />
              {entityScope && (
-                <span className="text-muted text-xs" data-testid="entity-scope">
+                <span className="text-muted text-xs">
                  {EntityScopeLabelMapping[entityScope] || t('Unspecified')}
                </span>
              )}
@@ -376,7 +390,7 @@ export const ActiveRewardCard = ({

            <div className="flex flex-col gap-2 items-center text-center">
              <h3 className="flex flex-col gap-1 text-2xl shrink-1 text-center">
-                <span className="font-glitch" data-testid="reward-value">
+                <span className="font-glitch">
                  {addDecimalsFormatNumber(
                    transferNode.transfer.amount,
                    transferNode.transfer.asset?.decimals || 0,
@@ -397,7 +411,7 @@ export const ActiveRewardCard = ({
                  )}
                  underline={true}
                >
-                  <span className="text-xs" data-testid="distribution-strategy">
+                  <span className="text-xs">
                    {
                      DistributionStrategyMapping[
                        dispatchStrategy.distributionStrategy
@@ -415,10 +429,7 @@ export const ActiveRewardCard = ({
                  'Number of epochs after distribution to delay vesting of rewards by'
                )}
              />
-              <span
-                className="text-muted text-xs whitespace-nowrap"
-                data-testid="locked-for"
-              >
+              <span className="text-muted text-xs whitespace-nowrap">
                {t('numberEpochs', '{{count}} epochs', {
                  count: kind.dispatchStrategy?.lockPeriod,
                })}
@@ -427,15 +438,15 @@ export const ActiveRewardCard = ({
          </div>

          <span className="border-[0.5px] border-gray-700" />
-          <span data-testid="dispatch-metric-info">
+          <span>
            {DispatchMetricLabels[dispatchStrategy.dispatchMetric]} •{' '}
            <Tooltip
-              underline={marketSuspended}
+              underline={suspended}
              description={
-                (marketSuspended || !assetInActiveMarket) &&
+                (suspended || assetInSuspendedMarket) &&
                (specificMarkets
                  ? t('Eligible market(s) currently suspended')
-                  : !assetInActiveMarket
+                  : assetInSuspendedMarket
                  ? t('Currently no markets eligible for reward')
                  : '')
              }
@@ -447,8 +458,8 @@ export const ActiveRewardCard = ({
          <div className="flex items-center gap-8 flex-wrap">
            {kind.endEpoch && (
              <span className="flex flex-col">
-                <span className="text-muted text-xs">{t('Ends in')} </span>
-                <span data-testid="ends-in">
+                <span className="text-muted text-xs">{t('Ends in')}</span>
+                <span>
                  {t('numberEpochs', '{{count}} epochs', {
                    count: kind.endEpoch - currentEpoch,
                  })}
@@ -459,7 +470,7 @@ export const ActiveRewardCard = ({
            {
              <span className="flex flex-col">
                <span className="text-muted text-xs">{t('Assessed over')}</span>
-                <span data-testid="assessed-over">
+                <span>
                  {t('numberEpochs', '{{count}} epochs', {
                    count: dispatchStrategy.windowLength,
                  })}
@@ -502,7 +513,7 @@ const RewardRequirements = ({
            entity: EntityScopeLabelMapping[dispatchStrategy.entityScope],
          })}
        </dt>
-        <dd className="flex items-center gap-1" data-testid="scope">
+        <dd className="flex items-center gap-1">
          <RewardEntityScope dispatchStrategy={dispatchStrategy} />
        </dd>
      </div>
@@ -511,10 +522,7 @@ const RewardRequirements = ({
        <dt className="flex items-center gap-1 text-muted">
          {t('Staked VEGA')}
        </dt>
-        <dd
-          className="flex items-center gap-1"
-          data-testid="staking-requirement"
-        >
+        <dd className="flex items-center gap-1">
          {addDecimalsFormatNumber(
            dispatchStrategy?.stakingRequirement || 0,
            assetDecimalPlaces
@@ -526,7 +534,7 @@ const RewardRequirements = ({
        <dt className="flex items-center gap-1 text-muted">
          {t('Average position')}
        </dt>
-        <dd className="flex items-center gap-1" data-testid="average-position">
+        <dd className="flex items-center gap-1">
          {addDecimalsFormatNumber(
            dispatchStrategy?.notionalTimeWeightedAveragePositionRequirement ||
              0,
@@ -59,7 +59,7 @@ def test_filtered_cards(continuous_market, vega: VegaServiceNull, page: Page):
    next_epoch(vega=vega)
    
    page.reload()
-    expect(page.get_by_test_id("active-rewards-card")).to_be_visible(timeout=15000)
+    expect(page.locator(".from-vega-cdark-400")).to_be_visible(timeout=15000)
    governance.submit_oracle_data(
        wallet=vega.wallet,
        payload={"trading.terminated": "true"},
@@ -67,4 +67,4 @@ def test_filtered_cards(continuous_market, vega: VegaServiceNull, page: Page):
    )
    next_epoch(vega=vega)
    page.reload()
-    expect(page.get_by_test_id("active-rewards-card")).not_to_be_in_viewport()
+    expect(page.locator(".from-vega-cdark-400")).not_to_be_in_viewport()
@@ -3,7 +3,7 @@ from playwright.sync_api import expect, Page
 import vega_sim.proto.vega as vega_protos
 from vega_sim.null_service import VegaServiceNull
 from conftest import init_vega
-from actions.utils import next_epoch, change_keys
+from actions.utils import next_epoch
 from fixtures.market import setup_continuous_market
 from conftest import auth_setup, init_page, init_vega, risk_accepted_setup
 from wallet_config import PARTY_A, PARTY_B, PARTY_C, PARTY_D, MM_WALLET
@@ -14,7 +14,6 @@ def vega(request):
    with init_vega(request) as vega:
        yield vega

-
@pytest.fixture(scope="module")
 def team_page(vega, browser, request, setup_teams_and_games):
    with init_page(vega, browser, request) as page:
@@ -24,20 +23,9 @@ def team_page(vega, browser, request, setup_teams_and_games):
        page.goto(f"/#/competitions/teams/{team_id}")
        yield page

-
-@pytest.fixture(scope="module")
-def competitions_page(vega, browser, request, setup_teams_and_games):
-    with init_page(vega, browser, request) as page:
-        risk_accepted_setup(page)
-        auth_setup(vega, page)
-        team_id = setup_teams_and_games["team_id"]
-        page.goto(f"/#/competitions/")
-        yield page
-
-
@pytest.fixture(scope="module")
 def setup_teams_and_games(vega: VegaServiceNull):
-    tDAI_market = setup_continuous_market(vega, custom_quantum=100000)
+    tDAI_market = setup_continuous_market(vega)
    tDAI_asset_id = vega.find_asset_id(symbol="tDAI")
    vega.mint(key_name=PARTY_B.name, asset=tDAI_asset_id, amount=100000)
    vega.mint(key_name=PARTY_C.name, asset=tDAI_asset_id, amount=100000)
@@ -58,18 +46,6 @@ def setup_teams_and_games(vega: VegaServiceNull):

    # list_teams actually returns a dictionary {"team_id": Team}
    team_id = list(teams.keys())[0]
-    vega.create_referral_set(
-        key_name="market_maker",
-        name="test",
-        team_url="https://vega.xyz",
-        avatar_url="http://placekitten.com/200/200",
-        closed=False,
-    )
-    next_epoch(vega)
-    teams = vega.list_teams()
-
-    team_id_2 = list(teams.keys())[0]
-    vega.apply_referral_code("Key 1", team_id_2)

    vega.apply_referral_code(PARTY_B.name, team_id)

@@ -87,7 +63,7 @@ def setup_teams_and_games(vega: VegaServiceNull):

    current_epoch = vega.statistics().epoch_seq
    game_start = current_epoch + 1
-    game_end = current_epoch + 14
+    game_end = current_epoch + 11

    current_epoch = vega.statistics().epoch_seq
    print(f"[EPOCH: {current_epoch}] creating recurring transfer")
@@ -108,42 +84,9 @@ def setup_teams_and_games(vega: VegaServiceNull):
        factor=1.0,
        start_epoch=game_start,
        end_epoch=game_end,
-        window_length=15,
-    )
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-    vega.recurring_transfer(
-        from_key_name=PARTY_B.name,
-        from_account_type=vega_protos.vega.ACCOUNT_TYPE_GENERAL,
-        to_account_type=vega_protos.vega.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
-        asset=tDAI_asset_id,
-        reference="reward",
-        asset_for_metric=tDAI_asset_id,
-        metric=vega_protos.vega.DISPATCH_METRIC_MAKER_FEES_PAID,
-        entity_scope=vega_protos.vega.ENTITY_SCOPE_INDIVIDUALS,
-        individual_scope=vega_protos.vega.INDIVIDUAL_SCOPE_IN_TEAM,
-        n_top_performers=1,
-        amount=100,
-        factor=1.0,
-        window_length=15
-    )
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-    vega.recurring_transfer(
-        from_key_name=PARTY_C.name,
-        from_account_type=vega_protos.vega.ACCOUNT_TYPE_GENERAL,
-        to_account_type=vega_protos.vega.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
-        asset=tDAI_asset_id,
-        reference="reward",
-        asset_for_metric=tDAI_asset_id,
-        metric=vega_protos.vega.DISPATCH_METRIC_MAKER_FEES_PAID,
-        entity_scope=vega_protos.vega.ENTITY_SCOPE_INDIVIDUALS,
-        individual_scope=vega_protos.vega.INDIVIDUAL_SCOPE_NOT_IN_TEAM,
-        n_top_performers=1,
-        amount=100,
-        factor=1.0,
-        window_length=15
+        window_length=10
    )
+
    next_epoch(vega)
    print(f"[EPOCH: {vega.statistics().epoch_seq}] starting order activity")

@@ -170,22 +113,6 @@ def setup_teams_and_games(vega: VegaServiceNull):
            side="SIDE_BUY",
            volume=1,
        )
-        vega.submit_order(
-            trading_key="Key 1",
-            market_id=tDAI_market,
-            order_type="TYPE_MARKET",
-            time_in_force="TIME_IN_FORCE_IOC",
-            side="SIDE_BUY",
-            volume=1,
-        )
-        vega.submit_order(
-            trading_key="market_maker",
-            market_id=tDAI_market,
-            order_type="TYPE_MARKET",
-            time_in_force="TIME_IN_FORCE_IOC",
-            side="SIDE_BUY",
-            volume=1,
-        )
        next_epoch(vega)
        print(f"[EPOCH: {vega.statistics().epoch_seq}] {i} epoch passed")

@@ -193,7 +120,6 @@ def setup_teams_and_games(vega: VegaServiceNull):
        "market_id": tDAI_market,
        "asset_id": tDAI_asset_id,
        "team_id": team_id,
-        "team_id_2": team_id_2,
        "team_name": team_name,
    }

@@ -210,109 +136,66 @@ def create_team(vega: VegaServiceNull):

    return team_name

-
 def test_team_page_games_table(team_page: Page):
+    team_page.pause()
    team_page.get_by_test_id("games-toggle").click()
    expect(team_page.get_by_test_id("games-toggle")).to_have_text("Games (1)")
-    expect(team_page.get_by_test_id("rank-0")).to_have_text("2")
-    expect(team_page.get_by_test_id("epoch-0")).to_have_text("19")
-    expect(team_page.get_by_test_id("type-0")
-           ).to_have_text("Price maker fees paid")
-    expect(team_page.get_by_test_id("amount-0")).to_have_text("74")
-    expect(team_page.get_by_test_id("participatingTeams-0")).to_have_text("2")
-    expect(team_page.get_by_test_id("participatingMembers-0")).to_have_text("4")
-
+    expect(team_page.get_by_test_id("rank-0")).to_have_text("1")
+    expect(team_page.get_by_test_id("epoch-0")).to_have_text("18")
+    expect(team_page.get_by_test_id("type-0")).to_have_text("Price maker fees paid")
+    expect(team_page.get_by_test_id("amount-0")).to_have_text("100,000,000")
+    expect(team_page.get_by_test_id("participatingTeams-0")).to_have_text(
+        "1"
+    )
+    expect(team_page.get_by_test_id("participatingMembers-0")).to_have_text(
+        "2"
+    )

 def test_team_page_members_table(team_page: Page):
    team_page.get_by_test_id("members-toggle").click()
-    expect(team_page.get_by_test_id("members-toggle")
-           ).to_have_text("Members (4)")
+    expect(team_page.get_by_test_id("members-toggle")).to_have_text("Members (4)")
    expect(team_page.get_by_test_id("referee-0")).to_be_visible()
    expect(team_page.get_by_test_id("joinedAt-0")).to_be_visible()
-    expect(team_page.get_by_test_id("joinedAtEpoch-0")).to_have_text("9")
+    expect(team_page.get_by_test_id("joinedAtEpoch-0")).to_have_text("8")

-
-def test_team_page_headline(team_page: Page, setup_teams_and_games):
+def test_team_page_headline(team_page: Page, setup_teams_and_games
+):
    team_name = setup_teams_and_games["team_name"]
    expect(team_page.get_by_test_id("team-name")).to_have_text(team_name)
    expect(team_page.get_by_test_id("members-count-stat")).to_have_text("4")

-    expect(team_page.get_by_test_id("total-games-stat")).to_have_text("2")
+    expect(team_page.get_by_test_id("total-games-stat")).to_have_text(
+        "1"
+    )

    # TODO this still seems wrong as its always 0
-    expect(team_page.get_by_test_id("total-volume-stat")).to_have_text("0")
+    expect(team_page.get_by_test_id("total-volume-stat")).to_have_text(
+        "0"
+    )

-    expect(team_page.get_by_test_id("rewards-paid-stat")).to_have_text("214")
-
-
-def test_switch_teams(team_page: Page, vega: VegaServiceNull):
-    team_page.get_by_test_id("switch-team-button").click()
-    team_page.get_by_test_id("confirm-switch-button").click()
-    expect(team_page.get_by_test_id("dialog-content").first).to_be_visible()
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-    next_epoch(vega=vega)
-    team_page.reload()
-    expect(team_page.get_by_test_id("members-count-stat")).to_have_text("5")
+    expect(team_page.get_by_test_id("rewards-paid-stat")).to_have_text(
+        "100m"
+    )

+@pytest.fixture(scope="module")
+def competitions_page(vega, browser, request):
+    with init_page(vega, browser, request) as page:
+        risk_accepted_setup(page)
+        auth_setup(vega, page)
+        yield page

 def test_leaderboard(competitions_page: Page, setup_teams_and_games):
    team_name = setup_teams_and_games["team_name"]
-    competitions_page.reload()
-    expect(
-        competitions_page.get_by_test_id("rank-0").locator(".text-yellow-300")
-    ).to_have_count(1)
-    expect(
-        competitions_page.get_by_test_id(
-            "rank-1").locator(".text-vega-clight-500")
-    ).to_have_count(1)
-    expect(competitions_page.get_by_test_id("team-1")).to_have_text(team_name)
-    expect(competitions_page.get_by_test_id("status-1")).to_have_text("Open")
+    competitions_page.goto(f"/#/competitions/")
+    expect(competitions_page.get_by_test_id("rank-0").locator(".text-yellow-300")).to_have_count(1)
+    expect(competitions_page.get_by_test_id("team-0")).to_have_text(team_name)
+    expect(competitions_page.get_by_test_id("status-0")).to_have_text("Open")

-    #  FIXME: the numbers are different we need to clarify this with the backend
-    # expect(competitions_page.get_by_test_id("earned-1")).to_have_text("160")
-    expect(competitions_page.get_by_test_id("games-1")).to_have_text("2")
+    expect(competitions_page.get_by_test_id("earned-0")).to_have_text("100,000,000")
+    expect(competitions_page.get_by_test_id("games-0")).to_have_text("1")

    # TODO  still odd that this is 0
    expect(competitions_page.get_by_test_id("volume-0")).to_have_text("-")

-
-def test_game_card(competitions_page: Page):
-    expect(competitions_page.get_by_test_id(
-        "active-rewards-card")).to_have_count(2)
-    game_1 = competitions_page.get_by_test_id("active-rewards-card").first
-    expect(game_1).to_be_visible()
-    expect(game_1.get_by_test_id("entity-scope")).to_have_text("Individual")
-    expect(game_1.get_by_test_id("locked-for")).to_have_text("1 epoch")
-    expect(game_1.get_by_test_id("reward-value")).to_have_text("100.00")
-    expect(game_1.get_by_test_id("distribution-strategy")
-           ).to_have_text("Pro rata")
-    expect(game_1.get_by_test_id("dispatch-metric-info")
-           ).to_have_text("Price maker fees paid • ")
-    expect(game_1.get_by_test_id("assessed-over")).to_have_text("15 epochs")
-    expect(game_1.get_by_test_id("scope")).to_have_text("In team")
-    expect(game_1.get_by_test_id("staking-requirement")).to_have_text("0.00")
-    expect(game_1.get_by_test_id("average-position")).to_have_text("0.00")
-
-
-def test_create_team(competitions_page: Page, vega: VegaServiceNull):
-    change_keys(competitions_page, vega, "market_maker_2")
-    competitions_page.get_by_test_id("create-public-team-button").click()
-    competitions_page.get_by_test_id("team-name-input").fill("e2e")
-    competitions_page.get_by_test_id("team-url-input").fill("https://vega.xyz")
-    competitions_page.get_by_test_id("avatar-url-input").fill(
-        "http://placekitten.com/200/200"
-    )
-    competitions_page.get_by_test_id("team-form-submit-button").click()
-    expect(competitions_page.get_by_test_id("team-form-submit-button")).to_have_text(
-        "Confirming transaction..."
-    )
-    vega.wait_fn(2)
-    vega.wait_for_total_catchup()
-    expect(
-        competitions_page.get_by_test_id("team-creation-success-message")
-    ).to_be_visible()
-    expect(competitions_page.get_by_test_id("team-id-display")).to_be_visible()
-    expect(competitions_page.get_by_test_id("team-id-display")).to_be_visible()
-    competitions_page.get_by_test_id("view-team-button").click()
-    expect(competitions_page.get_by_test_id("team-name")).to_have_text("e2e")
+#TODO def test_games(competitions_page: Page):
+#TODO currently no games appear which i think is a bug
@@ -1,20 +1,15 @@
-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 {
-        ...TeamsFields
+        teamId
+        referrer
+        name
+        teamUrl
+        avatarUrl
+        createdAt
+        createdAtEpoch
+        closed
      }
    }
  }
@@ -3,40 +3,33 @@ 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, totalMembers: number } }> } | 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 } }> } | 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 {
-        ...TeamsFields
+        teamId
+        referrer
+        name
+        teamUrl
+        avatarUrl
+        createdAt
+        createdAtEpoch
+        closed
      }
    }
  }
 }
-    ${TeamsFieldsFragmentDoc}`;
+    `;

 /**
 * __useTeamsQuery__
@@ -1,25 +0,0 @@
-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 { useTeams } from './use-teams';
-
-export const useMyTeam = () => {
-  const { pubKey } = useVegaWallet();
-  const { data: teams } = useTeams();
-
-  const { data: maybeMyTeam } = useTeamsQuery({
-    variables: {
-      partyId: pubKey,
-    },
-    skip: !pubKey,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  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 };
-};
@@ -96,6 +96,11 @@ describe('TransferForm', () => {
  });

  it.each([
+    {
+      targetText: 'Include transfer fee',
+      tooltipText:
+        'The fee will be taken from the amount you are transferring.',
+    },
    {
      targetText: 'Transfer fee',
      tooltipText: /transfer\.fee\.factor/,
@@ -271,6 +276,9 @@ describe('TransferForm', () => {

    const amountInput = screen.getByLabelText('Amount');

+    const checkbox = screen.getByTestId('include-transfer-fee');
+    expect(checkbox).not.toBeChecked();
+
    await userEvent.clear(amountInput);
    await userEvent.type(amountInput, '50');

@@ -280,7 +288,10 @@ describe('TransferForm', () => {
    await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
    expect(amountInput).toHaveValue('100.00');

-    // If transfering from a vested account  fees should be 0
+    // If transfering from a vested account 'include fees' checkbox should
+    // be disabled and fees should be 0
+    expect(checkbox).not.toBeChecked();
+    expect(checkbox).toBeDisabled();
    const expectedFee = '0';
    const total = new BigNumber(amount).plus(expectedFee).toFixed();

@@ -385,7 +396,78 @@ describe('TransferForm', () => {
      });
    });
  });
+
  describe('IncludeFeesCheckbox', () => {
+    it('validates fields and submits when checkbox is checked', async () => {
+      const mockSubmit = jest.fn();
+      renderComponent({ ...props, submitTransfer: mockSubmit });
+
+      // check current pubkey not shown
+      const keySelect = screen.getByLabelText<HTMLSelectElement>('To Vega key');
+      const pubKeyOptions = ['', pubKey, props.pubKeys[1]];
+      expect(keySelect.children).toHaveLength(pubKeyOptions.length);
+      expect(Array.from(keySelect.options).map((o) => o.value)).toEqual(
+        pubKeyOptions
+      );
+
+      await submit();
+      expect(await screen.findAllByText('Required')).toHaveLength(2); // pubkey set as default value
+
+      // Select a pubkey
+      await userEvent.selectOptions(
+        screen.getByLabelText('To Vega key'),
+        props.pubKeys[1]
+      );
+
+      // Select asset
+      await selectAsset(asset);
+
+      await userEvent.selectOptions(
+        screen.getByLabelText('From account'),
+        `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
+      );
+
+      const amountInput = screen.getByLabelText('Amount');
+      const checkbox = screen.getByTestId('include-transfer-fee');
+
+      // 1003-TRAN-022
+      expect(checkbox).not.toBeChecked();
+
+      await userEvent.clear(amountInput);
+      await userEvent.type(amountInput, amount);
+      await userEvent.click(checkbox);
+
+      expect(checkbox).toBeChecked();
+      const expectedFee = new BigNumber(amount)
+        .times(props.feeFactor)
+        .toFixed();
+      const expectedAmount = new BigNumber(amount).minus(expectedFee).toFixed();
+
+      // 1003-TRAN-020
+      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
+      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(
+        expectedAmount
+      );
+      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
+        amount
+      );
+
+      await submit();
+
+      await waitFor(() => {
+        // 1003-TRAN-023
+        expect(mockSubmit).toHaveBeenCalledTimes(1);
+        expect(mockSubmit).toHaveBeenCalledWith({
+          fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+          toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+          to: props.pubKeys[1],
+          asset: asset.id,
+          amount: removeDecimal(expectedAmount, asset.decimals),
+          oneOff: {},
+        });
+      });
+    });
+
    it('validates fields when checkbox is not checked', async () => {
      renderComponent(props);

@@ -415,8 +497,11 @@ describe('TransferForm', () => {
      );

      const amountInput = screen.getByLabelText('Amount');
+      const checkbox = screen.getByTestId('include-transfer-fee');
+      expect(checkbox).not.toBeChecked();

      await userEvent.type(amountInput, amount);
+      expect(checkbox).not.toBeChecked();
      const expectedFee = new BigNumber(amount)
        .times(props.feeFactor)
        .toFixed();
@@ -15,6 +15,7 @@ import {
  TradingRichSelect,
  TradingSelect,
  Tooltip,
+  TradingCheckbox,
  TradingButton,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
@@ -134,17 +135,32 @@ export const TransferForm = ({
  const accountBalance =
    account && addDecimal(account.balance, account.asset.decimals);

+  const [includeFee, setIncludeFee] = useState(false);
+
  // Max amount given selected asset and from account
  const max = accountBalance ? new BigNumber(accountBalance) : new BigNumber(0);

-  const fee = useMemo(
-    () => feeFactor && new BigNumber(feeFactor).times(amount).toString(),
-    [amount, feeFactor]
-  );
+  const transferAmount = useMemo(() => {
+    if (!amount) return undefined;
+    if (includeFee && feeFactor) {
+      return new BigNumber(1).minus(feeFactor).times(amount).toString();
+    }
+    return amount;
+  }, [amount, includeFee, feeFactor]);
+
+  const fee = useMemo(() => {
+    if (!transferAmount) return undefined;
+    if (includeFee) {
+      return new BigNumber(amount).minus(transferAmount).toString();
+    }
+    return (
+      feeFactor && new BigNumber(feeFactor).times(transferAmount).toString()
+    );
+  }, [amount, includeFee, transferAmount, feeFactor]);

  const onSubmit = useCallback(
    (fields: FormFields) => {
-      if (!amount) {
+      if (!transferAmount) {
        throw new Error('Submitted transfer with no amount selected');
      }

@@ -157,7 +173,7 @@ export const TransferForm = ({

      const transfer = normalizeTransfer(
        fields.toVegaKey,
-        amount,
+        transferAmount,
        type,
        AccountType.ACCOUNT_TYPE_GENERAL, // field is readonly in the form
        {
@@ -167,7 +183,7 @@ export const TransferForm = ({
      );
      submitTransfer(transfer);
    },
-    [submitTransfer, amount, assets]
+    [submitTransfer, transferAmount, assets]
  );

  // reset for placeholder workaround https://github.com/radix-ui/primitives/issues/1569
@@ -263,6 +279,7 @@ export const TransferForm = ({
                  ) {
                    setValue('toVegaKey', pubKey);
                    setToVegaKeyMode('select');
+                    setIncludeFee(false);
                  }
                }}
              >
@@ -432,9 +449,27 @@ export const TransferForm = ({
          </TradingInputError>
        )}
      </TradingFormGroup>
-      {amount && fee && (
+      <div className="mb-4">
+        <Tooltip
+          description={t(
+            `The fee will be taken from the amount you are transferring.`
+          )}
+        >
+          <div>
+            <TradingCheckbox
+              name="include-transfer-fee"
+              disabled={!transferAmount || fromVested}
+              label={t('Include transfer fee')}
+              checked={includeFee}
+              onCheckedChange={() => setIncludeFee((x) => !x)}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      {transferAmount && fee && (
        <TransferFee
-          amount={amount}
+          amount={transferAmount}
+          transferAmount={transferAmount}
          feeFactor={feeFactor}
          fee={fromVested ? '0' : fee}
          decimals={asset?.decimals}
@@ -449,22 +484,29 @@ export const TransferForm = ({

 export const TransferFee = ({
  amount,
+  transferAmount,
  feeFactor,
  fee,
  decimals,
 }: {
  amount: string;
+  transferAmount: string;
  feeFactor: string | null;
  fee?: string;
  decimals?: number;
 }) => {
  const t = useT();
-  if (!feeFactor || !amount || !fee) return null;
-  if (isNaN(Number(feeFactor)) || isNaN(Number(amount)) || isNaN(Number(fee))) {
+  if (!feeFactor || !amount || !transferAmount || !fee) return null;
+  if (
+    isNaN(Number(feeFactor)) ||
+    isNaN(Number(amount)) ||
+    isNaN(Number(transferAmount)) ||
+    isNaN(Number(fee))
+  ) {
    return null;
  }

-  const totalValue = new BigNumber(amount).plus(fee).toString();
+  const totalValue = new BigNumber(transferAmount).plus(fee).toString();

  return (
    <div className="mb-4 flex flex-col gap-2 text-xs">
@@ -21,6 +21,7 @@
  "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.": "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.",
  "Enter manually": "Enter manually",
  "From account": "From account",
+  "Include transfer fee": "Include transfer fee",
  "initial level": "initial level",
  "maintenance level": "maintenance level",
  "Margin health": "Margin health",
@@ -32,6 +33,7 @@
  "release level": "release level",
  "search level": "search level",
  "Select from wallet": "Select from wallet",
+  "The fee will be taken from the amount you are transferring.": "The fee will be taken from the amount you are transferring.",
  "The total amount of each asset on this key. Includes used and available collateral.": "The total amount of each asset on this key. Includes used and available collateral.",
  "The total amount taken from your account. The amount to be transferred plus the fee.": "The total amount taken from your account. The amount to be transferred plus the fee.",
  "The total amount to be transferred (without the fee)": "The total amount to be transferred (without the fee)",
@@ -417,7 +417,6 @@
  "myVolume_other": "My volume (last {{count}} epochs)",
  "numberEpochs": "{{count}} epochs",
  "numberEpochs_one": "{{count}} epoch",
-  "Rewards earned": "Rewards earned",
  "Rewards paid out": "Rewards paid out",
  "{{reward}}x": "{{reward}}x",
  "userActive": "{{active}} trader: {{count}} epochs so far",
@@ -432,19 +431,5 @@
  "{{assetSymbol}} Reward pot": "{{assetSymbol}} Reward pot",
  "{{checkedAssets}} Assets": "{{checkedAssets}} Assets",
  "{{distance}} ago": "{{distance}} ago",
-  "{{instrumentCode}} liquidity provision": "{{instrumentCode}} liquidity provision",
-  "My team": "My team",
-  "Profile": "Profile",
-  "Last {{games}} games result_one": "Last game result",
-  "Last {{games}} games result_other": "Last {{games}} games result",
-  "Leaderboard": "Leaderboard",
-  "View all teams": "View all teams",
-  "Competitions": "Competitions",
-  "Be a team player! Participate in games and work together to rake in as much profit to win.": "Be a team player! Participate in games and work together to rake in as much profit to win.",
-  "Create a public team": "Create a public team",
-  "Create a private team": "Create a private team",
-  "Choose a team": "Choose a team",
-  "Join a team": "Join a team",
-  "Solo team / lone wolf": "Solo team / lone wolf",
-  "Choose a team to get involved": "Choose a team to get involved"
+  "{{instrumentCode}} liquidity provision": "{{instrumentCode}} liquidity provision"
 }
@@ -40,12 +40,22 @@

 ## Transfer

+- **Must** can select include transfer fee (<a name="1003-TRAN-015" href="#1003-TRAN-015">1003-TRAN-015</a>)
+
+- **Must** display tooltip for "Include transfer fee" when hovered over.(<a name="1003-TRAN-016" href="#1003-TRAN-016">1003-TRAN-016</a>)
+
 - **Must** display tooltip for "Transfer fee when hovered over.(<a name="1003-TRAN-017" href="#1003-TRAN-017">1003-TRAN-017</a>)

 - **Must** display tooltip for "Amount to be transferred" when hovered over.(<a name="1003-TRAN-018" href="#1003-TRAN-018">1003-TRAN-018</a>)

 - **Must** display tooltip for "Total amount (with fee)" when hovered over.(<a name="1003-TRAN-019" href="#1003-TRAN-019">1003-TRAN-019</a>)

+- **Must** amount to be transferred and transfer fee update correctly when include transfer fee is selected (<a name="1003-TRAN-020" href="#1003-TRAN-020">1003-TRAN-020</a>)
+
+- **Must** total amount with fee is correct with and without "Include transfer fee" selected (<a name="1003-TRAN-021" href="#1003-TRAN-021">1003-TRAN-021</a>)
+
+- **Must** i cannot select include transfer fee unless amount is entered (<a name="1003-TRAN-022" href="#1003-TRAN-022">1003-TRAN-022</a>)
+
 - **Must** With all fields entered correctly, clicking "confirm transfer" button will start transaction(<a name="1003-TRAN-023" href="#1003-TRAN-023">1003-TRAN-023</a>)

 ### Transfer page