chore(trading): update readme and clear session storage

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
Co-authored-by: Edd <edd@vega.xyz>

README.md

@@ -4,7 +4,7 @@ The front-end monorepo provides a toolkit for building apps that interact with V
 
 This repository is managed using [Nx](https://nx.dev).
 
-# 🔎 Applications in this repo
+## 🔎 Applications in this repo
 
 ### [Block explorer](./apps/explorer)
 
@@ -30,7 +30,7 @@ Hosting for static content being shared across apps, for example fonts.
 
 The utility dApp for validators wishing to add or remove themselves as a signer of the multisig contract.
 
-# 🧱 Libraries in this repo
+## 🧱 Libraries in this repo
 
 ### [UI toolkit](./libs/ui-toolkit)
 
@@ -53,7 +53,7 @@ A utility library for connecting to the Ethereum network and interacting with Ve
 
 Generic react helpers that can be used across multiple applications, along with other utilities.
 
-# 💻 Develop
+## 💻 Develop
 
 ### Set up
 
@@ -103,7 +103,7 @@ In CI linting, formatting and also run. These checks can be seen in the [CI work
 
 Visit the [Nx Documentation](https://nx.dev/getting-started/intro) to learn more.
 
-# 🐋 Hosting a console
+## 🐋 Hosting a console
 
 To host a console there are two possible build scenarios for running the frontends: nx performed **outside** or **inside** docker build. For specific build instructions follow [build instructions](#build-instructions).
 
@@ -226,6 +226,6 @@ Note: The script is only needed if capsule was built for first time or fresh. To
 vega wallet service run -n DV --load-tokens --tokens-passphrase-file passphrase --no-version-check --automatic-consent --home ~/.vegacapsule/testnet/wallet
 ```
 
-# 📑 License
+## 📑 License
 
 [MIT](./LICENSE)

apps/explorer/src/app/components/links/proposal-link/Proposal.graphql

@@ -1,11 +1,9 @@
 query ExplorerProposal($id: ID!) {
   proposal(id: $id) {
-    ... on Proposal {
-      id
-      rationale {
-        title
-        description
-      }
+    id
+    rationale {
+      title
+      description
     }
   }
 }

apps/explorer/src/app/components/links/proposal-link/__generated__/Proposal.ts

@@ -8,18 +8,16 @@ export type ExplorerProposalQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerProposalQuery = { __typename?: 'Query', proposal?: { __typename?: 'BatchProposal' } | { __typename?: 'Proposal', id?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string } } | null };
+export type ExplorerProposalQuery = { __typename?: 'Query', proposal?: { __typename?: 'Proposal', id?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string } } | null };
 
 
 export const ExplorerProposalDocument = gql`
     query ExplorerProposal($id: ID!) {
   proposal(id: $id) {
-    ... on Proposal {
-      id
-      rationale {
-        title
-        description
-      }
+    id
+    rationale {
+      title
+      description
     }
   }
 }

apps/explorer/src/app/components/links/proposal-link/proposal-link.spec.tsx

@@ -3,11 +3,7 @@ import { MockedProvider } from '@apollo/client/testing';
 import type { MockedResponse } from '@apollo/client/testing';
 import { render } from '@testing-library/react';
 import ProposalLink from './proposal-link';
-import {
-  ExplorerProposalDocument,
-  type ExplorerProposalQuery,
-  type ExplorerProposalQueryVariables,
-} from './__generated__/Proposal';
+import { ExplorerProposalDocument } from './__generated__/Proposal';
 import { GraphQLError } from 'graphql';
 
 function renderComponent(id: string, mocks: MockedResponse[]) {
@@ -27,10 +23,7 @@ describe('Proposal link component', () => {
   });
 
   it('Renders the ID on error', async () => {
-    const mock: MockedResponse<
-      ExplorerProposalQuery,
-      ExplorerProposalQueryVariables
-    > = {
+    const mock = {
       request: {
         query: ExplorerProposalDocument,
         variables: {
@@ -47,22 +40,17 @@ describe('Proposal link component', () => {
   });
 
   it('Renders the proposal title when the query returns a result', async () => {
-    const proposalId = '123';
-    const mock: MockedResponse<
-      ExplorerProposalQuery,
-      ExplorerProposalQueryVariables
-    > = {
+    const mock = {
       request: {
         query: ExplorerProposalDocument,
         variables: {
-          id: proposalId,
+          id: '123',
         },
       },
       result: {
         data: {
           proposal: {
-            __typename: 'Proposal',
-            id: proposalId,
+            id: '123',
             rationale: {
               title: 'test-title',
               description: 'test description',
@@ -72,16 +60,13 @@ describe('Proposal link component', () => {
       },
     };
 
-    const res = render(renderComponent(proposalId, [mock]));
-    expect(res.getByText(proposalId)).toBeInTheDocument();
+    const res = render(renderComponent('123', [mock]));
+    expect(res.getByText('123')).toBeInTheDocument();
     expect(await res.findByText('test-title')).toBeInTheDocument();
   });
 
   it('Leaves the proposal id when the market is not found', async () => {
-    const mock: MockedResponse<
-      ExplorerProposalQuery,
-      ExplorerProposalQueryVariables
-    > = {
+    const mock = {
       request: {
         query: ExplorerProposalDocument,
         variables: {

apps/explorer/src/app/components/links/proposal-link/proposal-link.tsx

@@ -1,11 +1,7 @@
-import {
-  useExplorerProposalQuery,
-  type ExplorerProposalQuery,
-} from './__generated__/Proposal';
+import { useExplorerProposalQuery } from './__generated__/Proposal';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { ENV } from '../../../config/env';
 import Hash from '../hash';
-
 export type ProposalLinkProps = {
   id: string;
   text?: string;
@@ -20,13 +16,8 @@ const ProposalLink = ({ id, text }: ProposalLinkProps) => {
     variables: { id },
   });
 
-  const proposal = data?.proposal as Extract<
-    ExplorerProposalQuery['proposal'],
-    { __typename?: 'Proposal' }
-  >;
-
   const base = ENV.dataSources.governanceUrl;
-  const label = proposal?.rationale.title || id;
+  const label = data?.proposal?.rationale.title || id;
 
   return (
     <ExternalLink href={`${base}/proposals/${id}`}>

apps/explorer/src/app/components/txs/details/proposal/Proposal.graphql

@@ -1,9 +1,7 @@
 query ExplorerProposalStatus($id: ID!) {
   proposal(id: $id) {
-    ... on Proposal {
-      id
-      state
-      rejectionReason
-    }
+    id
+    state
+    rejectionReason
   }
 }

apps/explorer/src/app/components/txs/details/proposal/__generated__/Proposal.ts

@@ -8,17 +8,15 @@ export type ExplorerProposalStatusQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerProposalStatusQuery = { __typename?: 'Query', proposal?: { __typename?: 'BatchProposal' } | { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | null };
+export type ExplorerProposalStatusQuery = { __typename?: 'Query', proposal?: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | null };
 
 
 export const ExplorerProposalStatusDocument = gql`
     query ExplorerProposalStatus($id: ID!) {
   proposal(id: $id) {
-    ... on Proposal {
-      id
-      state
-      rejectionReason
-    }
+    id
+    state
+    rejectionReason
   }
 }
     `;

apps/explorer/src/app/components/txs/details/proposal/proposal-date.tsx

@@ -14,18 +14,16 @@ export function format(date: string | undefined, def: string) {
   return new Date().toLocaleDateString() || def;
 }
 
-type Proposal = Extract<
-  ExplorerProposalStatusQuery['proposal'],
-  { __typename?: 'Proposal' }
->;
-
-export function getDate(proposal: Proposal | undefined, terms: Terms): string {
+export function getDate(
+  data: ExplorerProposalStatusQuery | undefined,
+  terms: Terms
+): string {
   const DEFAULT = t('Unknown');
-  if (!proposal?.state) {
+  if (!data?.proposal?.state) {
     return DEFAULT;
   }
 
-  switch (proposal.state) {
+  switch (data.proposal.state) {
     case 'STATE_DECLINED':
       return `${t('Rejected on')}: ${format(terms.closingTimestamp, DEFAULT)}`;
     case 'STATE_ENACTED':
@@ -64,11 +62,9 @@ export const ProposalDate = ({ terms, id }: ProposalDateProps) => {
     },
   });
 
-  const proposal = data?.proposal as Proposal;
-
   return (
     <Lozenge className="font-sans text-xs float-right">
-      {getDate(proposal, terms)}
+      {getDate(data, terms)}
     </Lozenge>
   );
 };

apps/explorer/src/app/components/txs/details/proposal/proposal-status-icon.tsx

@@ -2,8 +2,17 @@ import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { IconProps } from '@vegaprotocol/ui-toolkit';
 import { useExplorerProposalStatusQuery } from './__generated__/Proposal';
 import type { ExplorerProposalStatusQuery } from './__generated__/Proposal';
+import type * as Apollo from '@apollo/client';
+import type * as Types from '@vegaprotocol/types';
 import { t } from '@vegaprotocol/i18n';
 
+type ProposalQueryResult = Apollo.QueryResult<
+  ExplorerProposalStatusQuery,
+  Types.Exact<{
+    id: string;
+  }>
+>;
+
 interface ProposalStatusIconProps {
   id: string;
 }
@@ -20,38 +29,29 @@ type IconAndLabel = {
  * @param data a data result from useExplorerProposalStatusQuery
  * @returns Icon name
  */
-export function useIconAndLabelForStatus(id: string): IconAndLabel {
-  const { data, loading, error } = useExplorerProposalStatusQuery({
-    variables: {
-      id,
-    },
-  });
-
-  const proposal = data?.proposal as Extract<
-    ExplorerProposalStatusQuery['proposal'],
-    { __typename?: 'Proposal' }
-  >;
-
+export function getIconAndLabelForStatus(
+  res: ProposalQueryResult
+): IconAndLabel {
   const DEFAULT: IconAndLabel = {
     icon: 'error',
     label: t('Proposal state unknown'),
   };
 
-  if (loading) {
+  if (res.loading) {
     return {
       icon: 'more',
       label: t('Loading data'),
     };
   }
 
-  if (!data?.proposal || error) {
+  if (!res?.data?.proposal || res.error) {
     return {
       icon: 'error',
-      label: error?.message || DEFAULT.label,
+      label: res.error?.message || DEFAULT.label,
     };
   }
 
-  switch (proposal.state) {
+  switch (res.data.proposal.state) {
     case 'STATE_DECLINED':
       return {
         icon: 'stop',
@@ -99,7 +99,13 @@ export function useIconAndLabelForStatus(id: string): IconAndLabel {
 /**
  */
 export const ProposalStatusIcon = ({ id }: ProposalStatusIconProps) => {
-  const { icon, label } = useIconAndLabelForStatus(id);
+  const { icon, label } = getIconAndLabelForStatus(
+    useExplorerProposalStatusQuery({
+      variables: {
+        id,
+      },
+    })
+  );
 
   return (
     <div className="float-left mr-3">

apps/explorer/src/app/components/txs/tx-list-navigation.spec.tsx

@@ -61,4 +61,53 @@ describe('TxsListNavigation', () => {
 
     expect(nextPageMock).toHaveBeenCalledTimes(1);
   });
+
+  it('disables "Older" button if hasMoreTxs is false', () => {
+    render(
+      <TxsListNavigation
+        refreshTxs={NOOP}
+        nextPage={NOOP}
+        previousPage={NOOP}
+        hasMoreTxs={false}
+        hasPreviousPage={false}
+      >
+        <span></span>
+      </TxsListNavigation>
+    );
+
+    expect(screen.getByText('Older')).toBeDisabled();
+  });
+
+  it('disables "Newer" button if hasPreviousPage is false', () => {
+    render(
+      <TxsListNavigation
+        refreshTxs={NOOP}
+        nextPage={NOOP}
+        previousPage={NOOP}
+        hasMoreTxs={true}
+        hasPreviousPage={false}
+      >
+        <span></span>
+      </TxsListNavigation>
+    );
+
+    expect(screen.getByText('Newer')).toBeDisabled();
+  });
+
+  it('disables both buttons when more and previous are false', () => {
+    render(
+      <TxsListNavigation
+        refreshTxs={NOOP}
+        nextPage={NOOP}
+        previousPage={NOOP}
+        hasMoreTxs={false}
+        hasPreviousPage={false}
+      >
+        <span></span>
+      </TxsListNavigation>
+    );
+
+    expect(screen.getByText('Newer')).toBeDisabled();
+    expect(screen.getByText('Older')).toBeDisabled();
+  });
 });

apps/explorer/src/app/components/txs/tx-list-navigation.tsx

@@ -10,8 +10,7 @@ export interface TxListNavigationProps {
   loading?: boolean;
   hasPreviousPage: boolean;
   hasMoreTxs: boolean;
-  children?: React.ReactNode;
-  isEmpty?: boolean;
+  children: React.ReactNode;
 }
 /**
  * Displays a list of transactions with filters and controls to navigate through the list.
@@ -22,8 +21,9 @@ export const TxsListNavigation = ({
   refreshTxs,
   nextPage,
   previousPage,
+  hasMoreTxs,
+  hasPreviousPage,
   children,
-  isEmpty,
   loading = false,
 }: TxListNavigationProps) => {
   return (
@@ -35,6 +35,7 @@ export const TxsListNavigation = ({
           <Button
             className="mr-2"
             size="xs"
+            disabled={!hasPreviousPage || loading}
             onClick={() => {
               previousPage();
             }}
@@ -43,7 +44,7 @@ export const TxsListNavigation = ({
           </Button>
           <Button
             size="xs"
-            disabled={isEmpty}
+            disabled={!hasMoreTxs}
             onClick={() => {
               nextPage();
             }}

apps/explorer/src/app/hooks/get-txs-data-url.ts

@@ -43,7 +43,7 @@ export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
     url.searchParams.append('first', count);
     url.searchParams.append('after', params.after);
   } else {
-    url.searchParams.append('first', count);
+    url.searchParams.append('last', count);
   }
 
   // Hacky fix for param as array

apps/explorer/src/app/hooks/get-txs-data-urls.spec.ts

@@ -6,7 +6,7 @@ describe('getTxsDataUrl', () => {
       count: 10,
       baseUrl: 'https://example.com/transactions',
     };
-    const expectedUrl = 'https://example.com/transactions?first=10';
+    const expectedUrl = 'https://example.com/transactions?last=10';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });
@@ -41,7 +41,7 @@ describe('getTxsDataUrl', () => {
       baseUrl: 'https://example.com/transactions',
     };
     const expectedUrl =
-      'https://example.com/transactions?first=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
+      'https://example.com/transactions?last=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -31,14 +31,14 @@ export interface IUseTxsData {
 }
 
 export const useTxsData = ({
-  count = 50,
+  count = 25,
   before,
   after,
   filters,
   party,
 }: IUseTxsData) => {
   const [, setSearchParams] = useSearchParams();
-  let hasMoreTxs = false;
+  let hasMoreTxs = true;
   let txsData: BlockExplorerTransactionResult[] = [];
 
   const url = getTxsDataUrl({
@@ -60,8 +60,8 @@ export const useTxsData = ({
   }
 
   const nextPage = useCallback(() => {
-    const before = data?.transactions.at(-1)?.cursor || '';
-    const params: URLSearchParamsInit = { before };
+    const after = data?.transactions.at(-1)?.cursor || '';
+    const params: URLSearchParamsInit = { after };
     if (filters) {
       params.filters = Array.from(filters).join(',');
     }
@@ -69,8 +69,8 @@ export const useTxsData = ({
   }, [filters, data, setSearchParams]);
 
   const previousPage = useCallback(() => {
-    const after = data?.transactions[0]?.cursor || '';
-    const params: URLSearchParamsInit = { after };
+    const before = data?.transactions[0]?.cursor || '';
+    const params: URLSearchParamsInit = { before };
     if (filters && filters.size > 0 && filters.size === 1) {
       params.filters = Array.from(filters)[0];
     }

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -51,10 +51,9 @@ export const TxsListFiltered = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={hasMoreTxs}
+        hasPreviousPage={true}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
-        isEmpty={txsData.length === 0}
       >
         <TxsFilter
           filters={filters}
@@ -71,16 +70,7 @@ export const TxsListFiltered = () => {
         txs={txsData}
         loadMoreTxs={nextPage}
         error={error}
-        className="mb-4 w-full min-w-[400px]"
-      />
-      <TxsListNavigation
-        refreshTxs={refreshTxs}
-        nextPage={nextPage}
-        previousPage={previousPage}
-        hasPreviousPage={hasMoreTxs}
-        loading={loading}
-        hasMoreTxs={hasMoreTxs}
-        isEmpty={txsData.length === 0}
+        className="mb-28 w-full min-w-[400px]"
       />
     </>
   );

apps/governance/src/routes/home/index.tsx

@@ -31,7 +31,7 @@ import {
   orderByUpgradeBlockHeight,
 } from '../proposals/components/proposals-list/proposals-list';
 import { BigNumber } from '../../lib/bignumber';
-import { type Proposal } from '../proposals/types';
+import type { ProposalQuery } from '../proposals/proposal/__generated__/Proposal';
 
 const nodesToShow = 6;
 
@@ -39,7 +39,7 @@ const HomeProposals = ({
   proposals,
   protocolUpgradeProposals,
 }: {
-  proposals: Proposal[];
+  proposals: ProposalQuery['proposal'][];
   protocolUpgradeProposals: ProtocolUpgradeProposalFieldsFragment[];
 }) => {
   const { t } = useTranslation();

apps/governance/src/routes/proposals/components/current-proposal-state/current-proposal-state.tsx

@@ -1,11 +1,16 @@
 import { useTranslation } from 'react-i18next';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { ProposalState } from '@vegaprotocol/types';
 import { ProposalInfoLabel } from '../proposal-info-label';
-import { type ReactNode } from 'react';
-import { type ProposalInfoLabelVariant } from '../proposal-info-label';
-import { type Proposal } from '../../types';
+import type { ReactNode } from 'react';
+import type { ProposalInfoLabelVariant } from '../proposal-info-label';
 
-export const CurrentProposalState = ({ proposal }: { proposal: Proposal }) => {
+export const CurrentProposalState = ({
+  proposal,
+}: {
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+}) => {
   const { t } = useTranslation();
   let proposalStatus: ReactNode;
   let variant = 'tertiary' as ProposalInfoLabelVariant;

apps/governance/src/routes/proposals/components/current-proposal-status/current-proposal-status.spec.tsx

@@ -0,0 +1,272 @@
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import { render, screen } from '@testing-library/react';
+import { ProposalRejectionReason, ProposalState } from '@vegaprotocol/types';
+import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
+import { NetworkParamsDocument } from '@vegaprotocol/network-parameters';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
+import { generateProposal } from '../../test-helpers/generate-proposals';
+import { CurrentProposalStatus } from './current-proposal-status';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+
+const networkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
+  request: {
+    query: NetworkParamsDocument,
+  },
+  result: {
+    data: {
+      networkParametersConnection: {
+        edges: [
+          {
+            node: {
+              __typename: 'NetworkParameter',
+              key: 'governance.proposal.updateNetParam.requiredMajority',
+              value: '0.00000001',
+            },
+          },
+          {
+            node: {
+              __typename: 'NetworkParameter',
+              key: 'governance.proposal.updateNetParam.requiredParticipation',
+              value: '0.000000001',
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const renderComponent = ({
+  proposal,
+}: {
+  proposal: ProposalQuery['proposal'];
+}) => {
+  render(
+    <AppStateProvider>
+      <MockedProvider mocks={[networkParamsQueryMock]}>
+        <CurrentProposalStatus proposal={proposal} />
+      </MockedProvider>
+    </AppStateProvider>
+  );
+};
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(60 * 60 * 1000);
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+it('Proposal open - renders will fail state if the proposal will fail', async () => {
+  const failedProposal = generateProposal({
+    votes: {
+      __typename: 'ProposalVotes',
+      yes: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '0',
+        totalTokens: '0',
+        totalEquityLikeShareWeight: '0',
+      },
+      no: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '0',
+        totalTokens: '0',
+        totalEquityLikeShareWeight: '0',
+      },
+    },
+  });
+  renderComponent({ proposal: failedProposal });
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
+  expect(await screen.findByText('fail.')).toBeInTheDocument();
+});
+
+it('Proposal open - renders will pass state if the proposal will pass', async () => {
+  const proposal = generateProposal();
+
+  renderComponent({ proposal });
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
+  expect(await screen.findByText('pass.')).toBeInTheDocument();
+});
+
+it('Proposal enacted - renders vote passed and time since enactment', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_ENACTED,
+    terms: {
+      enactmentDatetime: new Date(0).toISOString(),
+    },
+  });
+
+  renderComponent({ proposal });
+  expect(await screen.findByText('Vote passed.')).toBeInTheDocument();
+  expect(await screen.findByText('about 1 hour ago')).toBeInTheDocument();
+});
+
+it('Proposal passed - renders vote passed and time since vote closed', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_PASSED,
+    terms: {
+      closingDatetime: new Date(0).toISOString(),
+    },
+  });
+
+  renderComponent({ proposal });
+  expect(await screen.findByText('Vote passed.')).toBeInTheDocument();
+  expect(await screen.findByText('about 1 hour ago')).toBeInTheDocument();
+});
+
+it('Proposal waiting for node vote - will pass  - renders if the vote will pass and status', async () => {
+  const failedProposal = generateProposal({
+    state: ProposalState.STATE_WAITING_FOR_NODE_VOTE,
+    votes: {
+      __typename: 'ProposalVotes',
+      yes: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '0',
+        totalTokens: '0',
+        totalEquityLikeShareWeight: '0',
+      },
+      no: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '0',
+        totalTokens: '0',
+        totalEquityLikeShareWeight: '0',
+      },
+    },
+  });
+  renderComponent({ proposal: failedProposal });
+  expect(
+    await screen.findByText('Waiting for nodes to validate asset.')
+  ).toBeInTheDocument();
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
+  expect(await screen.findByText('fail.')).toBeInTheDocument();
+});
+
+it('Proposal waiting for node vote - will fail - renders if the vote will pass and status', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_WAITING_FOR_NODE_VOTE,
+  });
+
+  renderComponent({ proposal });
+  expect(
+    await screen.findByText('Waiting for nodes to validate asset.')
+  ).toBeInTheDocument();
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
+  expect(await screen.findByText('pass.')).toBeInTheDocument();
+});
+
+it('Proposal failed - renders vote failed reason and vote closed ago', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_FAILED,
+    errorDetails: 'foo',
+    terms: {
+      closingDatetime: new Date(0).toISOString(),
+    },
+  });
+
+  renderComponent({ proposal });
+  expect(
+    await screen.findByText('Vote closed. Failed due to:')
+  ).toBeInTheDocument();
+  expect(await screen.findByText('foo')).toBeInTheDocument();
+  expect(await screen.findByText('about 1 hour ago')).toBeInTheDocument();
+});
+
+it('Proposal failed - renders rejection reason there are no error details', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_FAILED,
+    rejectionReason: ProposalRejectionReason.PROPOSAL_ERROR_CLOSE_TIME_TOO_LATE,
+    terms: {
+      closingDatetime: new Date(0).toISOString(),
+    },
+  });
+
+  renderComponent({ proposal });
+  expect(
+    await screen.findByText('Vote closed. Failed due to:')
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByText('PROPOSAL_ERROR_CLOSE_TIME_TOO_LATE')
+  ).toBeInTheDocument();
+  expect(await screen.findByText('about 1 hour ago')).toBeInTheDocument();
+});
+
+it('Proposal failed - renders unknown reason if there are no error details or rejection reason', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_FAILED,
+    terms: {
+      closingDatetime: new Date(0).toISOString(),
+    },
+  });
+
+  renderComponent({ proposal });
+  expect(
+    await screen.findByText('Vote closed. Failed due to:')
+  ).toBeInTheDocument();
+  expect(await screen.findByText('unknown reason')).toBeInTheDocument();
+  expect(await screen.findByText('about 1 hour ago')).toBeInTheDocument();
+});
+
+it('Proposal failed - renders participation not met if participation is not met', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_FAILED,
+    terms: {
+      closingDatetime: new Date(0).toISOString(),
+    },
+    votes: {
+      __typename: 'ProposalVotes',
+      yes: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '0',
+        totalTokens: '0',
+        totalEquityLikeShareWeight: '0',
+      },
+      no: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '0',
+        totalTokens: '0',
+        totalEquityLikeShareWeight: '0',
+      },
+    },
+  });
+
+  renderComponent({ proposal });
+  expect(
+    await screen.findByText('Vote closed. Failed due to:')
+  ).toBeInTheDocument();
+  expect(await screen.findByText('Participation not met')).toBeInTheDocument();
+  expect(await screen.findByText('about 1 hour ago')).toBeInTheDocument();
+});
+
+it('Proposal failed - renders majority not met if majority is not met', async () => {
+  const proposal = generateProposal({
+    state: ProposalState.STATE_FAILED,
+    terms: {
+      closingDatetime: new Date(0).toISOString(),
+    },
+    votes: {
+      __typename: 'ProposalVotes',
+      yes: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '0',
+        totalTokens: '0',
+        totalEquityLikeShareWeight: '0',
+      },
+      no: {
+        __typename: 'ProposalVoteSide',
+        totalNumber: '1',
+        totalTokens: '25242474195500835440000',
+        totalEquityLikeShareWeight: '0',
+      },
+    },
+  });
+
+  renderComponent({ proposal });
+  expect(
+    await screen.findByText('Vote closed. Failed due to:')
+  ).toBeInTheDocument();
+  expect(await screen.findByText('Majority not met')).toBeInTheDocument();
+  expect(await screen.findByText('about 1 hour ago')).toBeInTheDocument();
+});

apps/governance/src/routes/proposals/components/current-proposal-status/current-proposal-status.tsx

@@ -0,0 +1,143 @@
+import type { ReactNode } from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+
+import { ProposalState } from '@vegaprotocol/types';
+import { useVoteInformation } from '../../hooks';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+
+export const StatusPass = ({ children }: { children: ReactNode }) => (
+  <span className="text-vega-green">{children}</span>
+);
+
+export const StatusFail = ({ children }: { children: ReactNode }) => (
+  <span className="text-danger">{children}</span>
+);
+
+const WillPass = ({
+  willPass,
+  children,
+}: {
+  willPass: boolean;
+  children?: ReactNode;
+}) => {
+  const { t } = useTranslation();
+  if (willPass) {
+    return (
+      <>
+        {children}
+        <StatusPass>{t('pass')}.</StatusPass>
+        <span className="ml-2">{t('finalOutcomeMayDiffer')}</span>
+      </>
+    );
+  } else {
+    return (
+      <>
+        {children}
+        <StatusFail>{t('fail')}.</StatusFail>
+        <span className="ml-2">{t('finalOutcomeMayDiffer')}</span>
+      </>
+    );
+  }
+};
+
+export const CurrentProposalStatus = ({
+  proposal,
+}: {
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+}) => {
+  const { willPassByTokenVote, majorityMet, participationMet } =
+    useVoteInformation({
+      proposal,
+    });
+  const { t } = useTranslation();
+
+  const daysClosedAgo = formatDistanceToNow(
+    new Date(proposal?.terms.closingDatetime),
+    { addSuffix: true }
+  );
+
+  const daysEnactedAgo =
+    proposal?.terms.enactmentDatetime &&
+    formatDistanceToNow(new Date(proposal.terms.enactmentDatetime), {
+      addSuffix: true,
+    });
+
+  if (proposal?.state === ProposalState.STATE_OPEN) {
+    return (
+      <WillPass willPass={willPassByTokenVote}>{t('currentlySetTo')}</WillPass>
+    );
+  }
+
+  if (
+    proposal?.state === ProposalState.STATE_FAILED ||
+    proposal?.state === ProposalState.STATE_DECLINED ||
+    proposal?.state === ProposalState.STATE_REJECTED
+  ) {
+    if (!participationMet) {
+      return (
+        <>
+          <span>{t('voteFailedReason')}</span>
+          <StatusFail>{t('participationNotMet')}</StatusFail>
+          <span>&nbsp;{daysClosedAgo}</span>
+        </>
+      );
+    }
+
+    if (!majorityMet) {
+      return (
+        <>
+          <span>{t('voteFailedReason')}</span>
+          <StatusFail>{t('majorityNotMet')}</StatusFail>
+          <span>&nbsp;{daysClosedAgo}</span>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <span>{t('voteFailedReason')}</span>
+        <StatusFail>
+          {proposal?.errorDetails ||
+            proposal?.rejectionReason ||
+            t('unknownReason')}
+        </StatusFail>
+        <span>&nbsp;{daysClosedAgo}</span>
+      </>
+    );
+  }
+  if (
+    proposal?.state === ProposalState.STATE_ENACTED ||
+    proposal?.state === ProposalState.STATE_PASSED
+  ) {
+    return (
+      <>
+        <span>{t('votePassed')}</span>
+        <StatusPass>
+          &nbsp;
+          {proposal?.state === ProposalState.STATE_ENACTED
+            ? t('Enacted')
+            : t('Passed')}
+        </StatusPass>
+        <span>
+          &nbsp;
+          {proposal?.state === ProposalState.STATE_ENACTED
+            ? daysEnactedAgo
+            : daysClosedAgo}
+        </span>
+      </>
+    );
+  }
+
+  if (proposal?.state === ProposalState.STATE_WAITING_FOR_NODE_VOTE) {
+    return (
+      <WillPass willPass={willPassByTokenVote}>
+        <span>{t('WaitingForNodeVote')}</span>{' '}
+        <span>{t('currentlySetTo')}</span>
+      </WillPass>
+    );
+  }
+
+  return null;
+};

apps/governance/src/routes/proposals/components/current-proposal-status/index.tsx

@@ -0,0 +1 @@
+export { CurrentProposalStatus } from './current-proposal-status';

apps/governance/src/routes/proposals/components/proposal-change-table/proposal-change-table.tsx

@@ -6,10 +6,11 @@ import {
   KeyValueTableRow,
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
-import { type Proposal } from '../../types';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
 interface ProposalChangeTableProps {
-  proposal: Proposal;
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }
 
 export const ProposalChangeTable = ({ proposal }: ProposalChangeTableProps) => {

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.spec.tsx

@@ -23,8 +23,8 @@ import { useFeatureFlags } from '@vegaprotocol/environment';
 import { BrowserRouter } from 'react-router-dom';
 import { VoteState } from '../vote-details/use-user-vote';
 import { useNewTransferProposalDetails } from '@vegaprotocol/proposals';
-import { type MockedResponse } from '@apollo/client/testing';
-import { type Proposal } from '../../types';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { MockedResponse } from '@apollo/client/testing';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ...jest.requireActual('@vegaprotocol/proposals'),
@@ -36,7 +36,7 @@ jest.mock('@vegaprotocol/proposals', () => ({
 }));
 
 const renderComponent = (
-  proposal: Proposal,
+  proposal: ProposalQuery['proposal'],
   isListItem = true,
   mocks: MockedResponse[] = [],
   voteState?: VoteState
@@ -64,7 +64,6 @@ describe('Proposal header', () => {
   it('Renders New market proposal', () => {
     useFeatureFlags.setState({ flags: { SUCCESSOR_MARKETS: true } });
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         rationale: {
           title: 'New some market',
@@ -103,7 +102,6 @@ describe('Proposal header', () => {
 
   it('Renders Update market proposal', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         rationale: {
           title: 'New market id',
@@ -132,7 +130,6 @@ describe('Proposal header', () => {
 
   it('Renders New asset proposal - ERC20', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         rationale: {
           title: 'New asset: Fake currency',
@@ -162,7 +159,6 @@ describe('Proposal header', () => {
 
   it('Renders New asset proposal - BuiltInAsset', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         terms: {
           change: {
@@ -188,7 +184,6 @@ describe('Proposal header', () => {
 
   it('Renders Update network', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         rationale: {
           title: 'Network parameter',
@@ -218,7 +213,6 @@ describe('Proposal header', () => {
 
   it('Renders Freeform proposal - short rationale', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         id: 'short',
         rationale: {
@@ -240,7 +234,6 @@ describe('Proposal header', () => {
 
   it('Renders Freeform proposal - long rationale (105 chars) - listing', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         id: 'long',
         rationale: {
@@ -266,7 +259,6 @@ describe('Proposal header', () => {
   // Remove once proposals have rationale and re-enable above tests
   it('Renders Freeform proposal - id for title', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         id: 'freeform id',
         rationale: {
@@ -288,7 +280,6 @@ describe('Proposal header', () => {
 
   it('Renders asset change proposal header', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         terms: {
           change: {
@@ -306,7 +297,6 @@ describe('Proposal header', () => {
 
   it("Renders unknown proposal if it's a different proposal type", () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         terms: {
           change: {
@@ -323,7 +313,6 @@ describe('Proposal header', () => {
 
   it('Renders proposal state: Enacted', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         state: ProposalState.STATE_ENACTED,
         terms: {
@@ -336,7 +325,6 @@ describe('Proposal header', () => {
 
   it('Renders proposal state: Passed', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         state: ProposalState.STATE_PASSED,
         terms: {
@@ -350,7 +338,6 @@ describe('Proposal header', () => {
 
   it('Renders proposal state: Waiting for node vote', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         state: ProposalState.STATE_WAITING_FOR_NODE_VOTE,
         terms: {
@@ -365,7 +352,6 @@ describe('Proposal header', () => {
 
   it('Renders proposal state: Open', () => {
     renderComponent(
-      // @ts-ignore we aren't using batch yet
       generateProposal({
         state: ProposalState.STATE_OPEN,
         votes: {

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -8,7 +8,8 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { shorten } from '@vegaprotocol/utils';
 import { Heading, SubHeading } from '../../../../components/heading';
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { truncateMiddle } from '../../../../lib/truncate-middle';
 import { CurrentProposalState } from '../current-proposal-state';
 import { ProposalInfoLabel } from '../proposal-info-label';
@@ -25,17 +26,16 @@ import {
 } from '@vegaprotocol/environment';
 import Routes from '../../../routes';
 import { Link } from 'react-router-dom';
-import { type VoteState } from '../vote-details/use-user-vote';
+import type { VoteState } from '../vote-details/use-user-vote';
 import { VoteBreakdown } from '../vote-breakdown';
 import { GovernanceTransferKindMapping } from '@vegaprotocol/types';
-import { type Proposal } from '../../types';
 
 export const ProposalHeader = ({
   proposal,
   isListItem = true,
   voteState,
 }: {
-  proposal: Proposal;
+  proposal: ProposalQuery['proposal'];
   isListItem?: boolean;
   voteState?: VoteState | null;
 }) => {
@@ -53,7 +53,7 @@ export const ProposalHeader = ({
 
   const titleContent = shorten(title ?? '', 100);
 
-  const getAsset = (proposal: Proposal) => {
+  const getAsset = (proposal: ProposalQuery['proposal']) => {
     const terms = proposal?.terms;
     if (
       terms?.change.__typename === 'NewMarket' &&

apps/governance/src/routes/proposals/components/proposal-referral-program-details/proposal-referral-program-details.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import {
   KeyValueTable,
   KeyValueTableRow,
@@ -13,10 +14,9 @@ import {
 } from '@vegaprotocol/utils';
 import BigNumber from 'bignumber.js';
 import { useAppState } from '../../../../contexts/app-state/app-state-context';
-import { type Proposal } from '../../types';
 
 interface ProposalReferralProgramDetailsProps {
-  proposal: Proposal | null;
+  proposal: ProposalQuery['proposal'];
 }
 
 export const formatEndOfProgramTimestamp = (value: string) => {

apps/governance/src/routes/proposals/components/proposal-transfer/proposal-cancel-transfer-details.tsx

@@ -1,4 +1,6 @@
 import { useTranslation } from 'react-i18next';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import { useCancelTransferProposalDetails } from '@vegaprotocol/proposals';
 import {
   KeyValueTable,
@@ -6,12 +8,11 @@ import {
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
-import { type Proposal } from '../../types';
 
 export const ProposalCancelTransferDetails = ({
   proposal,
 }: {
-  proposal: Proposal;
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }) => {
   const { t } = useTranslation();
   const details = useCancelTransferProposalDetails(proposal?.id);

apps/governance/src/routes/proposals/components/proposal-transfer/proposal-transfer-details.tsx

@@ -1,4 +1,6 @@
 import { useState } from 'react';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
 import { SubHeading } from '../../../../components/heading';
 import { useTranslation } from 'react-i18next';
@@ -19,12 +21,11 @@ import {
   addDecimalsFormatNumberQuantum,
   formatDateWithLocalTimezone,
 } from '@vegaprotocol/utils';
-import { type Proposal } from '../../types';
 
 export const ProposalTransferDetails = ({
   proposal,
 }: {
-  proposal: Proposal;
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }) => {
   const { t } = useTranslation();
   const [show, setShow] = useState(false);

apps/governance/src/routes/proposals/components/proposal-update-benefit-tiers/proposal-update-benefit-tiers-details.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import {
   KeyValueTable,
   KeyValueTableRow,
@@ -11,7 +12,6 @@ import {
 } from '../proposal-referral-program-details';
 import { formatNumberPercentage } from '@vegaprotocol/utils';
 import BigNumber from 'bignumber.js';
-import { type Proposal } from '../../types';
 
 // These types are not generated as it's not known how dynamic these are
 type VestingBenefitTier = {
@@ -43,7 +43,7 @@ export const formatVolumeDiscountFactor = (value: string) => {
 };
 
 interface ProposalReferralProgramDetailsProps {
-  proposal: Proposal | null;
+  proposal: ProposalQuery['proposal'];
 }
 
 /**

apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.tsx

@@ -5,13 +5,13 @@ import {
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { Row } from '@vegaprotocol/markets';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { useState } from 'react';
 import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
 import { SubHeading } from '../../../../components/heading';
-import { type Proposal } from '../../types';
 
 interface ProposalUpdateMarketStateProps {
-  proposal: Proposal | null;
+  proposal: ProposalQuery['proposal'];
 }
 
 export const ProposalUpdateMarketState = ({

apps/governance/src/routes/proposals/components/proposal-volume-discount-program-details/proposal-volume-discount-program-details.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import {
   KeyValueTable,
   KeyValueTableRow,
@@ -11,10 +12,9 @@ import {
 } from '../proposal-referral-program-details';
 import { formatNumberPercentage } from '@vegaprotocol/utils';
 import BigNumber from 'bignumber.js';
-import { type Proposal } from '../../types';
 
 interface ProposalReferralProgramDetailsProps {
-  proposal: Proposal | null;
+  proposal: ProposalQuery['proposal'];
 }
 
 export const formatVolumeDiscountFactor = (value: string) => {

apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx

@@ -1,13 +1,13 @@
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import { VegaWalletProvider } from '@vegaprotocol/wallet';
-import { type VegaWalletConfig } from '@vegaprotocol/wallet';
+import type { VegaWalletConfig } from '@vegaprotocol/wallet';
 import { render, screen } from '@testing-library/react';
 import { generateProposal } from '../../test-helpers/generate-proposals';
 import { Proposal } from './proposal';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { ProposalState } from '@vegaprotocol/types';
 import { mockNetworkParams } from '../../test-helpers/mocks';
-import { type Proposal as IProposal } from '../../types';
 
 jest.mock('@vegaprotocol/network-parameters', () => ({
   ...jest.requireActual('@vegaprotocol/network-parameters'),
@@ -51,14 +51,14 @@ const vegaWalletConfig: VegaWalletConfig = {
   chainId: 'VEGA_CHAIN_ID',
 };
 
-const renderComponent = (proposal: IProposal) => {
+const renderComponent = (proposal: ProposalQuery['proposal']) => {
   render(
     <MemoryRouter>
       <MockedProvider>
         <VegaWalletProvider config={vegaWalletConfig}>
           <Proposal
             restData={{}}
-            proposal={proposal}
+            proposal={proposal as ProposalQuery['proposal']}
             networkParams={mockNetworkParams}
           />
         </VegaWalletProvider>

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -12,13 +12,14 @@ import { UserVote } from '../vote-details';
 import { ListAsset } from '../list-asset';
 import Routes from '../../../routes';
 import { ProposalMarketData } from '../proposal-market-data';
-import { type MarketInfo } from '@vegaprotocol/markets';
-import { type AssetQuery } from '@vegaprotocol/assets';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { MarketInfo } from '@vegaprotocol/markets';
+import type { AssetQuery } from '@vegaprotocol/assets';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
 import { ProposalMarketChanges } from '../proposal-market-changes';
 import { ProposalUpdateMarketState } from '../proposal-update-market-state';
-import { type NetworkParamsResult } from '@vegaprotocol/network-parameters';
+import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
 import { useVoteSubmit } from '@vegaprotocol/proposals';
 import { useUserVote } from '../vote-details/use-user-vote';
 import {
@@ -27,10 +28,9 @@ import {
 } from '../proposal-transfer';
 import { useFeatureFlags } from '@vegaprotocol/environment';
 import { ProposalUpdateBenefitTiers } from '../proposal-update-benefit-tiers';
-import { type Proposal as IProposal } from '../../types';
 
 export interface ProposalProps {
-  proposal: IProposal;
+  proposal: ProposalQuery['proposal'];
   networkParams: Partial<NetworkParamsResult>;
   marketData?: MarketInfo | null;
   parentMarketData?: MarketInfo | null;

apps/governance/src/routes/proposals/components/proposals-list-item/proposals-list-item-details.spec.tsx

@@ -1,7 +1,7 @@
 import { BrowserRouter as Router } from 'react-router-dom';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { type MockedResponse } from '@apollo/client/testing';
+import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, screen } from '@testing-library/react';
 import { format } from 'date-fns';
@@ -18,10 +18,10 @@ import {
   lastWeek,
   nextWeek,
 } from '../../test-helpers/mocks';
-import { type Proposal } from '../../types';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
 const renderComponent = (
-  proposal: Proposal,
+  proposal: ProposalQuery['proposal'],
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   mocks: MockedResponse<any>[] = [networkParamsQueryMock]
 ) =>

apps/governance/src/routes/proposals/components/proposals-list-item/proposals-list-item-details.tsx

@@ -1,20 +1,21 @@
-import { type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { differenceInHours, format, formatDistanceToNowStrict } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { DATE_FORMAT_DETAILED } from '../../../../lib/date-formats';
+import type { ReactNode } from 'react';
 import {
   ProposalRejectionReasonMapping,
   ProposalState,
 } from '@vegaprotocol/types';
 import Routes from '../../../routes';
-import { type Proposal } from '../../types';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
 export const ProposalsListItemDetails = ({
   proposal,
 }: {
-  proposal: Proposal;
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }) => {
   const { t } = useTranslation();
   const state = proposal?.state;

apps/governance/src/routes/proposals/components/proposals-list-item/proposals-list-item.tsx

@@ -2,10 +2,10 @@ import { RoundedWrapper } from '@vegaprotocol/ui-toolkit';
 import { ProposalHeader } from '../proposal-detail-header/proposal-header';
 import { ProposalsListItemDetails } from './proposals-list-item-details';
 import { useUserVote } from '../vote-details/use-user-vote';
-import { type Proposal } from '../../types';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
 interface ProposalsListItemProps {
-  proposal?: Proposal | null;
+  proposal?: ProposalQuery['proposal'] | null;
 }
 
 export const ProposalsListItem = ({ proposal }: ProposalsListItemProps) => {

apps/governance/src/routes/proposals/components/proposals-list/proposals-list.spec.tsx

@@ -17,8 +17,8 @@ import {
   lastMonth,
   nextMonth,
 } from '../../test-helpers/mocks';
-import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { type Proposal } from '../../types';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 const openProposalClosesNextMonth = generateProposal({
   id: 'proposal1',
@@ -63,7 +63,7 @@ const closedProtocolUpgradeProposal = generateProtocolUpgradeProposal({
 });
 
 const renderComponent = (
-  proposals: Proposal[],
+  proposals: ProposalQuery['proposal'][],
   protocolUpgradeProposals?: ProtocolUpgradeProposalFieldsFragment[]
 ) => (
   <Router>

apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx

@@ -10,20 +10,20 @@ import Routes from '../../../routes';
 import { Button, Toggle } from '@vegaprotocol/ui-toolkit';
 import { Link } from 'react-router-dom';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 import { ExternalLinks } from '@vegaprotocol/environment';
-import { type ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { type Proposal } from '../../types';
 
 interface ProposalsListProps {
-  proposals: Proposal[];
+  proposals: Array<ProposalQuery['proposal']>;
   protocolUpgradeProposals: ProtocolUpgradeProposalFieldsFragment[];
   lastBlockHeight?: string;
 }
 
 interface SortedProposalsProps {
-  open: Proposal[];
-  closed: Proposal[];
+  open: ProposalQuery['proposal'][];
+  closed: ProposalQuery['proposal'][];
 }
 
 interface SortedProtocolUpgradeProposalsProps {
@@ -31,7 +31,7 @@ interface SortedProtocolUpgradeProposalsProps {
   closed: ProtocolUpgradeProposalFieldsFragment[];
 }
 
-export const orderByDate = (arr: Proposal[]) =>
+export const orderByDate = (arr: ProposalQuery['proposal'][]) =>
   orderBy(
     arr,
     [
@@ -91,10 +91,14 @@ export const ProposalsList = ({
     );
     return {
       open:
-        initialSorting.open.length > 0 ? orderByDate(initialSorting.open) : [],
+        initialSorting.open.length > 0
+          ? orderByDate(initialSorting.open as ProposalQuery['proposal'][])
+          : [],
       closed:
         initialSorting.closed.length > 0
-          ? orderByDate(initialSorting.closed).reverse()
+          ? orderByDate(
+              initialSorting.closed as ProposalQuery['proposal'][]
+            ).reverse()
           : [],
     };
   }, [proposals]);
@@ -121,7 +125,9 @@ export const ProposalsList = ({
       };
     }, [protocolUpgradeProposals, lastBlockHeight]);
 
-  const filterPredicate = (p: ProposalFieldsFragment | Proposal) =>
+  const filterPredicate = (
+    p: ProposalFieldsFragment | ProposalQuery['proposal']
+  ) =>
     p?.id?.includes(filterString) ||
     p?.party?.id?.toString().includes(filterString);
 

apps/governance/src/routes/proposals/components/proposals-list/rejected-proposals-list.spec.tsx

@@ -12,7 +12,7 @@ import {
   nextWeek,
   lastMonth,
 } from '../../test-helpers/mocks';
-import { type Proposal } from '../../types';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
 const rejectedProposalClosesNextWeek = generateProposal({
   id: 'rejected1',
@@ -35,7 +35,7 @@ const rejectedProposalClosedLastMonth = generateProposal({
   },
 });
 
-const renderComponent = (proposals: Proposal[]) => (
+const renderComponent = (proposals: ProposalQuery['proposal'][]) => (
   <Router>
     <MockedProvider mocks={[networkParamsQueryMock]}>
       <AppStateProvider>

apps/governance/src/routes/proposals/components/proposals-list/rejected-proposals-list.tsx

@@ -3,17 +3,17 @@ import { useTranslation } from 'react-i18next';
 import { Heading } from '../../../../components/heading';
 import { ProposalsListItem } from '../proposals-list-item';
 import { ProposalsListFilter } from '../proposals-list-filter';
-import { type Proposal } from '../../types';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
 interface ProposalsListProps {
-  proposals: Proposal[];
+  proposals: ProposalQuery['proposal'][];
 }
 
 export const RejectedProposalsList = ({ proposals }: ProposalsListProps) => {
   const { t } = useTranslation();
   const [filterString, setFilterString] = useState('');
 
-  const filterPredicate = (p: Proposal) =>
+  const filterPredicate = (p: ProposalQuery['proposal']) =>
     p?.id?.includes(filterString) ||
     p?.party?.id?.toString().includes(filterString);
 

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.spec.tsx

@@ -9,7 +9,8 @@ import {
   nextWeek,
 } from '../../test-helpers/mocks';
 import { CompactVotes, VoteBreakdown } from './vote-breakdown';
-import { type MockedResponse } from '@apollo/client/testing';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { MockedResponse } from '@apollo/client/testing';
 import {
   generateNoVotes,
   generateProposal,
@@ -17,8 +18,7 @@ import {
 } from '../../test-helpers/generate-proposals';
 import { ProposalState } from '@vegaprotocol/types';
 import { BigNumber } from '../../../../lib/bignumber';
-import { type AppState } from '../../../../contexts/app-state/app-state-context';
-import { type Proposal } from '../../types';
+import type { AppState } from '../../../../contexts/app-state/app-state-context';
 
 const mockTotalSupply = new BigNumber(100);
 // Note - giving a fixedTokenValue of 1 means a ratio of 1:1 votes to tokens, making sums easier :)
@@ -41,7 +41,7 @@ jest.mock('../../../../contexts/app-state/app-state-context', () => ({
 }));
 
 const renderComponent = (
-  proposal: Proposal,
+  proposal: ProposalQuery['proposal'],
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   mocks: MockedResponse<any>[] = [networkParamsQueryMock]
 ) =>

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx

@@ -1,4 +1,3 @@
-import { type ReactNode } from 'react';
 import classNames from 'classnames';
 import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
@@ -6,8 +5,10 @@ import { useVoteInformation } from '../../hooks';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { formatNumber } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
+import type { ReactNode } from 'react';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { CompactNumber } from '@vegaprotocol/react-helpers';
-import { type Proposal } from '../../types';
 
 export const CompactVotes = ({ number }: { number: BigNumber }) => (
   <CompactNumber
@@ -19,7 +20,7 @@ export const CompactVotes = ({ number }: { number: BigNumber }) => (
 );
 
 interface VoteBreakdownProps {
-  proposal: Proposal;
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }
 
 interface VoteProgressProps {

apps/governance/src/routes/proposals/components/vote-details/user-vote.tsx

@@ -5,13 +5,14 @@ import { ProposalState } from '@vegaprotocol/types';
 import { ConnectToVega } from '../../../../components/connect-to-vega';
 import { VoteButtonsContainer } from './vote-buttons';
 import { SubHeading } from '../../../../components/heading';
-import { type VoteValue } from '@vegaprotocol/types';
-import { type DialogProps, type VegaTxState } from '@vegaprotocol/proposals';
-import { type VoteState } from './use-user-vote';
-import { type Proposal } from '../../types';
+import type { VoteValue } from '@vegaprotocol/types';
+import type { DialogProps, VegaTxState } from '@vegaprotocol/proposals';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { VoteState } from './use-user-vote';
 
 interface UserVoteProps {
-  proposal: Proposal;
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
   minVoterBalance: string | null | undefined;
   spamProtectionMinTokens: string | null | undefined;
   transaction: VegaTxState | null;

apps/governance/src/routes/proposals/hooks/use-proposal-network-params.ts

@@ -3,12 +3,13 @@ import {
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
 import { BigNumber } from '../../../lib/bignumber';
-import { type Proposal } from '../types';
+import type { ProposalFieldsFragment } from '../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../proposal/__generated__/Proposal';
 
 export const useProposalNetworkParams = ({
   proposal,
 }: {
-  proposal: Proposal;
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }) => {
   const { params } = useNetworkParams([
     NetworkParams.governance_proposal_updateMarket_requiredMajority,

apps/governance/src/routes/proposals/hooks/use-vote-information.ts

@@ -2,10 +2,15 @@ import { useMemo } from 'react';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { BigNumber } from '../../../lib/bignumber';
 import { useProposalNetworkParams } from './use-proposal-network-params';
+import type { ProposalFieldsFragment } from '../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../proposal/__generated__/Proposal';
 import { addDecimal } from '@vegaprotocol/utils';
-import { type Proposal } from '../types';
 
-export const useVoteInformation = ({ proposal }: { proposal: Proposal }) => {
+export const useVoteInformation = ({
+  proposal,
+}: {
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+}) => {
   const {
     appState: { totalSupply, decimals },
   } = useAppState();

apps/governance/src/routes/proposals/proposal/Proposal.graphql

@@ -86,65 +86,141 @@ query Proposal(
   $includeUpdateReferralProgram: Boolean!
 ) {
   proposal(id: $proposalId) {
-    ... on Proposal {
+    id
+    rationale {
+      title
+      description
+    }
+    reference
+    state
+    datetime
+    rejectionReason
+    party {
       id
-      rationale {
-        title
-        description
-      }
-      reference
-      state
-      datetime
-      rejectionReason
-      party {
-        id
-      }
-      errorDetails
-      ...NewMarketProductField @include(if: $includeNewMarketProductField)
-      ...UpdateMarketState @include(if: $includeUpdateMarketState)
-      ...UpdateReferralProgram @include(if: $includeUpdateReferralProgram)
-      ...UpdateVolumeDiscountProgram
-      terms {
-        closingDatetime
-        enactmentDatetime
-        change {
-          ... on NewMarket {
-            decimalPlaces
-            metadata
-            riskParameters {
-              ... on LogNormalRiskModel {
-                riskAversionParameter
-                tau
-                params {
-                  mu
-                  r
-                  sigma
-                }
-              }
-              ... on SimpleRiskModel {
-                params {
-                  factorLong
-                  factorShort
-                }
+    }
+    errorDetails
+    ...NewMarketProductField @include(if: $includeNewMarketProductField)
+    ...UpdateMarketState @include(if: $includeUpdateMarketState)
+    ...UpdateReferralProgram @include(if: $includeUpdateReferralProgram)
+    ...UpdateVolumeDiscountProgram
+    terms {
+      closingDatetime
+      enactmentDatetime
+      change {
+        ... on NewMarket {
+          decimalPlaces
+          metadata
+          riskParameters {
+            ... on LogNormalRiskModel {
+              riskAversionParameter
+              tau
+              params {
+                mu
+                r
+                sigma
               }
             }
+            ... on SimpleRiskModel {
+              params {
+                factorLong
+                factorShort
+              }
+            }
+          }
+          instrument {
+            name
+            code
+            product {
+              ... on FutureProduct {
+                settlementAsset {
+                  id
+                  name
+                  symbol
+                  decimals
+                  quantum
+                }
+                quoteName
+                dataSourceSpecBinding {
+                  settlementDataProperty
+                  tradingTerminationProperty
+                }
+                dataSourceSpecForSettlementData {
+                  sourceType {
+                    ... on DataSourceDefinitionInternal {
+                      sourceType {
+                        ... on DataSourceSpecConfigurationTime {
+                          conditions {
+                            operator
+                            value
+                          }
+                        }
+                      }
+                    }
+                    ... on DataSourceDefinitionExternal {
+                      sourceType {
+                        ... on DataSourceSpecConfiguration {
+                          signers {
+                            signer {
+                              ... on PubKey {
+                                key
+                              }
+                              ... on ETHAddress {
+                                address
+                              }
+                            }
+                          }
+                          filters {
+                            key {
+                              name
+                              type
+                            }
+                            conditions {
+                              operator
+                              value
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+              ... on PerpetualProduct {
+                settlementAsset {
+                  id
+                  name
+                  symbol
+                  decimals
+                  quantum
+                }
+                quoteName
+              }
+            }
+          }
+          priceMonitoringParameters {
+            triggers {
+              horizonSecs
+              probability
+              auctionExtensionSecs
+            }
+          }
+          liquidityMonitoringParameters {
+            targetStakeParameters {
+              timeWindow
+              scalingFactor
+            }
+          }
+          positionDecimalPlaces
+          linearSlippageFactor
+        }
+        ... on UpdateMarket {
+          marketId
+          updateMarketConfiguration {
             instrument {
-              name
               code
               product {
-                ... on FutureProduct {
-                  settlementAsset {
-                    id
-                    name
-                    symbol
-                    decimals
-                    quantum
-                  }
+                ... on UpdateFutureProduct {
                   quoteName
-                  dataSourceSpecBinding {
-                    settlementDataProperty
-                    tradingTerminationProperty
-                  }
                   dataSourceSpecForSettlementData {
                     sourceType {
                       ... on DataSourceDefinitionInternal {
@@ -185,19 +261,101 @@ query Proposal(
                       }
                     }
                   }
-                }
-                ... on PerpetualProduct {
-                  settlementAsset {
-                    id
-                    name
-                    symbol
-                    decimals
-                    quantum
+                  # dataSourceSpecForTradingTermination {
+                  #   sourceType {
+                  #     ... on DataSourceDefinitionInternal {
+                  #       sourceType {
+                  #         ... on DataSourceSpecConfigurationTime {
+                  #           conditions {
+                  #             operator
+                  #             value
+                  #           }
+                  #         }
+                  #       }
+                  #     }
+                  #     ... on DataSourceDefinitionExternal {
+                  #       sourceType {
+                  #         ... on DataSourceSpecConfiguration {
+                  #           signers {
+                  #             signer {
+                  #               ... on PubKey {
+                  #                 key
+                  #               }
+                  #               ... on ETHAddress {
+                  #                 address
+                  #               }
+                  #             }
+                  #           }
+                  #           filters {
+                  #             key {
+                  #               name
+                  #               type
+                  #             }
+                  #             conditions {
+                  #               operator
+                  #               value
+                  #             }
+                  #           }
+                  #         }
+                  #       }
+                  #     }
+                  #   }
+                  # }
+                  dataSourceSpecBinding {
+                    settlementDataProperty
+                    tradingTerminationProperty
                   }
+                }
+                ... on UpdatePerpetualProduct {
                   quoteName
+                  dataSourceSpecForSettlementData {
+                    sourceType {
+                      ... on DataSourceDefinitionInternal {
+                        sourceType {
+                          ... on DataSourceSpecConfigurationTime {
+                            conditions {
+                              operator
+                              value
+                            }
+                          }
+                        }
+                      }
+                      ... on DataSourceDefinitionExternal {
+                        sourceType {
+                          ... on DataSourceSpecConfiguration {
+                            signers {
+                              signer {
+                                ... on PubKey {
+                                  key
+                                }
+                                ... on ETHAddress {
+                                  address
+                                }
+                              }
+                            }
+                            filters {
+                              key {
+                                name
+                                type
+                              }
+                              conditions {
+                                operator
+                                value
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                  dataSourceSpecBinding {
+                    settlementDataProperty
+                    settlementScheduleProperty
+                  }
                 }
               }
             }
+            metadata
             priceMonitoringParameters {
               triggers {
                 horizonSecs
@@ -211,231 +369,71 @@ query Proposal(
                 scalingFactor
               }
             }
-            positionDecimalPlaces
-            linearSlippageFactor
-          }
-          ... on UpdateMarket {
-            marketId
-            updateMarketConfiguration {
-              instrument {
-                code
-                product {
-                  ... on UpdateFutureProduct {
-                    quoteName
-                    dataSourceSpecForSettlementData {
-                      sourceType {
-                        ... on DataSourceDefinitionInternal {
-                          sourceType {
-                            ... on DataSourceSpecConfigurationTime {
-                              conditions {
-                                operator
-                                value
-                              }
-                            }
-                          }
-                        }
-                        ... on DataSourceDefinitionExternal {
-                          sourceType {
-                            ... on DataSourceSpecConfiguration {
-                              signers {
-                                signer {
-                                  ... on PubKey {
-                                    key
-                                  }
-                                  ... on ETHAddress {
-                                    address
-                                  }
-                                }
-                              }
-                              filters {
-                                key {
-                                  name
-                                  type
-                                }
-                                conditions {
-                                  operator
-                                  value
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                    # dataSourceSpecForTradingTermination {
-                    #   sourceType {
-                    #     ... on DataSourceDefinitionInternal {
-                    #       sourceType {
-                    #         ... on DataSourceSpecConfigurationTime {
-                    #           conditions {
-                    #             operator
-                    #             value
-                    #           }
-                    #         }
-                    #       }
-                    #     }
-                    #     ... on DataSourceDefinitionExternal {
-                    #       sourceType {
-                    #         ... on DataSourceSpecConfiguration {
-                    #           signers {
-                    #             signer {
-                    #               ... on PubKey {
-                    #                 key
-                    #               }
-                    #               ... on ETHAddress {
-                    #                 address
-                    #               }
-                    #             }
-                    #           }
-                    #           filters {
-                    #             key {
-                    #               name
-                    #               type
-                    #             }
-                    #             conditions {
-                    #               operator
-                    #               value
-                    #             }
-                    #           }
-                    #         }
-                    #       }
-                    #     }
-                    #   }
-                    # }
-                    dataSourceSpecBinding {
-                      settlementDataProperty
-                      tradingTerminationProperty
-                    }
-                  }
-                  ... on UpdatePerpetualProduct {
-                    quoteName
-                    dataSourceSpecForSettlementData {
-                      sourceType {
-                        ... on DataSourceDefinitionInternal {
-                          sourceType {
-                            ... on DataSourceSpecConfigurationTime {
-                              conditions {
-                                operator
-                                value
-                              }
-                            }
-                          }
-                        }
-                        ... on DataSourceDefinitionExternal {
-                          sourceType {
-                            ... on DataSourceSpecConfiguration {
-                              signers {
-                                signer {
-                                  ... on PubKey {
-                                    key
-                                  }
-                                  ... on ETHAddress {
-                                    address
-                                  }
-                                }
-                              }
-                              filters {
-                                key {
-                                  name
-                                  type
-                                }
-                                conditions {
-                                  operator
-                                  value
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                    dataSourceSpecBinding {
-                      settlementDataProperty
-                      settlementScheduleProperty
-                    }
-                  }
+            riskParameters {
+              ... on UpdateMarketSimpleRiskModel {
+                simple {
+                  factorLong
+                  factorShort
                 }
               }
-              metadata
-              priceMonitoringParameters {
-                triggers {
-                  horizonSecs
-                  probability
-                  auctionExtensionSecs
-                }
-              }
-              liquidityMonitoringParameters {
-                targetStakeParameters {
-                  timeWindow
-                  scalingFactor
-                }
-              }
-              riskParameters {
-                ... on UpdateMarketSimpleRiskModel {
-                  simple {
-                    factorLong
-                    factorShort
-                  }
-                }
-                ... on UpdateMarketLogNormalRiskModel {
-                  logNormal {
-                    riskAversionParameter
-                    tau
-                    params {
-                      r
-                      sigma
-                      mu
-                    }
+              ... on UpdateMarketLogNormalRiskModel {
+                logNormal {
+                  riskAversionParameter
+                  tau
+                  params {
+                    r
+                    sigma
+                    mu
                   }
                 }
               }
             }
           }
-          ... on NewAsset {
-            name
-            symbol
-            decimals
-            quantum
-            source {
-              ... on BuiltinAsset {
-                maxFaucetAmountMint
-              }
-              ... on ERC20 {
-                contractAddress
-                lifetimeLimit
-                withdrawThreshold
-              }
+        }
+        ... on NewAsset {
+          name
+          symbol
+          decimals
+          quantum
+          source {
+            ... on BuiltinAsset {
+              maxFaucetAmountMint
+            }
+            ... on ERC20 {
+              contractAddress
+              lifetimeLimit
+              withdrawThreshold
             }
           }
-          ... on UpdateNetworkParameter {
-            networkParameter {
-              key
-              value
-            }
+        }
+        ... on UpdateNetworkParameter {
+          networkParameter {
+            key
+            value
           }
-          ... on UpdateAsset {
-            quantum
-            assetId
-            source {
-              ... on UpdateERC20 {
-                lifetimeLimit
-                withdrawThreshold
-              }
+        }
+        ... on UpdateAsset {
+          quantum
+          assetId
+          source {
+            ... on UpdateERC20 {
+              lifetimeLimit
+              withdrawThreshold
             }
           }
         }
       }
-      votes {
-        yes {
-          totalTokens
-          totalNumber
-          totalEquityLikeShareWeight
-        }
-        no {
-          totalTokens
-          totalNumber
-          totalEquityLikeShareWeight
-        }
+    }
+    votes {
+      yes {
+        totalTokens
+        totalNumber
+        totalEquityLikeShareWeight
+      }
+      no {
+        totalTokens
+        totalNumber
+        totalEquityLikeShareWeight
       }
     }
   }

apps/governance/src/routes/proposals/proposal/proposal-container.tsx

@@ -17,7 +17,6 @@ import {
 import { useParentMarketIdQuery } from '@vegaprotocol/markets';
 import { useFeatureFlags } from '@vegaprotocol/environment';
 import { useSuccessorMarketProposalDetails } from '@vegaprotocol/proposals';
-import { type Proposal as IProposal } from '../types';
 
 export const ProposalContainer = () => {
   const featureFlags = useFeatureFlags((state) => state.flags);
@@ -68,8 +67,6 @@ export const ProposalContainer = () => {
     skip: !params.proposalId,
   });
 
-  const proposal = data?.proposal as IProposal;
-
   const successor = useSuccessorMarketProposalDetails(params.proposalId);
 
   const isSuccessor = !!successor?.parentMarketId || !!successor.code;
@@ -82,12 +79,12 @@ export const ProposalContainer = () => {
     },
   } = useFetch(
     `${ENV.rest}governance?proposalId=${
-      proposal?.terms.change.__typename === 'UpdateMarket' &&
-      proposal.terms.change.marketId
+      data?.proposal?.terms.change.__typename === 'UpdateMarket' &&
+      data?.proposal.terms.change.marketId
     }`,
     undefined,
     true,
-    proposal?.terms.change.__typename !== 'UpdateMarket'
+    data?.proposal?.terms.change.__typename !== 'UpdateMarket'
   );
 
   const {
@@ -100,7 +97,7 @@ export const ProposalContainer = () => {
     `${ENV.rest}governances?proposalState=STATE_ENACTED&proposalType=TYPE_UPDATE_MARKET`,
     undefined,
     true,
-    proposal?.terms.change.__typename !== 'UpdateMarket'
+    data?.proposal?.terms.change.__typename !== 'UpdateMarket'
   );
 
   const {
@@ -111,8 +108,8 @@ export const ProposalContainer = () => {
     dataProvider: marketInfoProvider,
     skipUpdates: true,
     variables: {
-      marketId: proposal?.id || '',
-      skip: !proposal?.id,
+      marketId: data?.proposal?.id || '',
+      skip: !data?.proposal?.id,
     },
   });
 
@@ -151,22 +148,23 @@ export const ProposalContainer = () => {
     fetchPolicy: 'network-only',
     variables: {
       assetId:
-        (proposal?.terms.change.__typename === 'NewAsset' && proposal?.id) ||
-        (proposal?.terms.change.__typename === 'UpdateAsset' &&
-          proposal.terms.change.assetId) ||
+        (data?.proposal?.terms.change.__typename === 'NewAsset' &&
+          data?.proposal?.id) ||
+        (data?.proposal?.terms.change.__typename === 'UpdateAsset' &&
+          data.proposal.terms.change.assetId) ||
         '',
     },
     skip: !['NewAsset', 'UpdateAsset'].includes(
-      proposal?.terms?.change?.__typename || ''
+      data?.proposal?.terms?.change?.__typename || ''
     ),
   });
 
   useEffect(() => {
     if (
       previouslyEnactedMarketProposalsRestData &&
-      proposal?.terms.change.__typename === 'UpdateMarket'
+      data?.proposal?.terms.change.__typename === 'UpdateMarket'
     ) {
-      const change = proposal?.terms?.change as { marketId: string };
+      const change = data?.proposal?.terms?.change as { marketId: string };
 
       const filteredProposals =
         // @ts-ignore rest data is not typed
@@ -190,8 +188,8 @@ export const ProposalContainer = () => {
   }, [
     previouslyEnactedMarketProposalsRestData,
     params.proposalId,
-    proposal?.terms.change.__typename,
-    proposal?.terms.change,
+    data?.proposal?.terms.change.__typename,
+    data?.proposal?.terms.change,
   ]);
 
   useEffect(() => {
@@ -244,7 +242,7 @@ export const ProposalContainer = () => {
     >
       {data?.proposal ? (
         <Proposal
-          proposal={proposal}
+          proposal={data.proposal}
           networkParams={networkParams}
           restData={restData}
           marketData={marketData}

apps/governance/src/routes/proposals/test-helpers/generate-proposals.ts

@@ -8,7 +8,6 @@ import mergeWith from 'lodash/mergeWith';
 import { type PartialDeep } from 'type-fest';
 import { type ProposalQuery } from '../proposal/__generated__/Proposal';
 import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { type Proposal } from '../types';
 
 export function generateProtocolUpgradeProposal(
   override: PartialDeep<ProtocolUpgradeProposalFieldsFragment> = {}
@@ -44,8 +43,8 @@ export function generateProtocolUpgradeProposal(
 }
 
 export function generateProposal(
-  override: PartialDeep<Proposal> = {}
-): Proposal {
+  override: PartialDeep<ProposalQuery['proposal']> = {}
+): ProposalQuery['proposal'] {
   const defaultProposal: ProposalQuery['proposal'] = {
     __typename: 'Proposal',
     id: faker.datatype.uuid(),
@@ -93,16 +92,15 @@ export function generateProposal(
     },
   };
 
-  return mergeWith<Proposal, PartialDeep<Proposal>>(
-    defaultProposal,
-    override,
-    (objValue, srcValue) => {
-      if (!isArray(objValue)) {
-        return;
-      }
-      return srcValue;
+  return mergeWith<
+    ProposalQuery['proposal'],
+    PartialDeep<ProposalQuery['proposal']>
+  >(defaultProposal, override, (objValue, srcValue) => {
+    if (!isArray(objValue)) {
+      return;
     }
-  );
+    return srcValue;
+  });
 }
 
 type Vote = Pick<Schema.Vote, '__typename' | 'value' | 'party' | 'datetime'>;

apps/governance/src/routes/proposals/types.ts

@@ -1,11 +0,0 @@
-import type { ProposalQuery } from './proposal/__generated__/Proposal';
-
-/**
- * The default Proposal type needs extracting from the ProposalNode union type
- * as lots of fields on the original type don't exist on BatchProposal. Eventually
- * we will support BatchProposal but for now we don't
- */
-export type Proposal = Extract<
-  ProposalQuery['proposal'],
-  { __typename?: 'Proposal' }
->;

apps/trading/.env

@@ -21,7 +21,6 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true

apps/trading/.env.capsule

@@ -21,7 +21,6 @@ NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supp
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
-NX_ISOLATED_MARGIN=true
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false

apps/trading/.env.devnet

@@ -20,7 +20,6 @@ NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/m
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ISOLATED_MARGIN=true
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true

apps/trading/.env.mainnet

@@ -21,7 +21,6 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ISOLATED_MARGIN=false
 NX_ICEBERG_ORDERS=true
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
@@ -30,5 +29,5 @@ NX_REFERRALS=true
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
-NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
-NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=
+# NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
+# NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=

apps/trading/.env.mainnet-mirror

@@ -21,7 +21,6 @@ NX_APP_VERSION=v0.20.19-core-0.71.6
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ISOLATED_MARGIN=false
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false

apps/trading/.env.stagnet1

@@ -21,12 +21,10 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
-NX_TEAM_COMPETITION=true
 
 NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
 NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=

apps/trading/.env.testnet

@@ -22,7 +22,6 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true

apps/trading/.env.validators-testnet

@@ -22,7 +22,6 @@ NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/m
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false

apps/trading/client-pages/competitions/competitions-create-team.tsx

@@ -1,131 +0,0 @@
-import { useSearchParams } from 'react-router-dom';
-import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-import { useT } from '../../lib/use-t';
-import { useReferralSetTransaction } from '../../lib/hooks/use-referral-set-transaction';
-import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
-import { RainbowButton } from '../../components/rainbow-button';
-import { usePageTitle } from '../../lib/hooks/use-page-title';
-import { ErrorBoundary } from '../../components/error-boundary';
-import { Box } from '../../components/competitions/box';
-import { LayoutWithGradient } from '../../components/layouts-inner';
-import { Links } from '../../lib/links';
-import { TeamForm, TransactionType } from './team-form';
-
-export const CompetitionsCreateTeam = () => {
-  const [searchParams] = useSearchParams();
-  const isSolo = Boolean(searchParams.get('solo'));
-  const t = useT();
-
-  usePageTitle(t('Create a team'));
-
-  const { isReadOnly, pubKey } = useVegaWallet();
-  const openWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-
-  return (
-    <ErrorBoundary feature="create-team">
-      <LayoutWithGradient>
-        <div className="mx-auto md:w-2/3 max-w-xl">
-          <Box className="flex flex-col gap-4">
-            <h1 className="calt text-2xl lg:text-3xl xl:text-4xl">
-              {t('Create a team')}
-            </h1>
-            {pubKey && !isReadOnly ? (
-              <CreateTeamFormContainer isSolo={isSolo} />
-            ) : (
-              <>
-                <p>
-                  {t(
-                    'Create a team to participate in team based rewards as well as access the discount benefits of the current referral program.'
-                  )}
-                </p>
-                <RainbowButton variant="border" onClick={openWalletDialog}>
-                  {t('Connect wallet')}
-                </RainbowButton>
-              </>
-            )}
-          </Box>
-        </div>
-      </LayoutWithGradient>
-    </ErrorBoundary>
-  );
-};
-
-const CreateTeamFormContainer = ({ isSolo }: { isSolo: boolean }) => {
-  const t = useT();
-  const createLink = useLinks(DApp.Governance);
-
-  const { err, status, code, isEligible, requiredStake, onSubmit } =
-    useReferralSetTransaction({
-      onSuccess: (code) => {
-        // For some reason team creation takes a long time, too long even to make
-        // polling viable, so its not feasible to navigate to the team page
-        // after creation
-        //
-        // navigate(Links.COMPETITIONS_TEAM(code));
-      },
-    });
-
-  if (status === 'confirmed') {
-    return (
-      <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">{code}</span>
-            </p>
-            <TradingAnchorButton
-              href={Links.COMPETITIONS_TEAM(code)}
-              intent={Intent.Info}
-              size="small"
-            >
-              {t('View team')}
-            </TradingAnchorButton>
-          </>
-        )}
-      </div>
-    );
-  }
-
-  if (!isEligible) {
-    return (
-      <div className="flex flex-col gap-4">
-        {requiredStake !== undefined && (
-          <p>
-            {t(
-              'You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.',
-              {
-                requiredStake: addDecimalsFormatNumber(
-                  requiredStake.toString(),
-                  18
-                ),
-              }
-            )}
-          </p>
-        )}
-        <TradingAnchorButton
-          href={createLink(TokenStaticLinks.ASSOCIATE)}
-          intent={Intent.Primary}
-          target="_blank"
-        >
-          {t('Stake some $VEGA now')}
-        </TradingAnchorButton>
-      </div>
-    );
-  }
-
-  return (
-    <TeamForm
-      type={TransactionType.CreateReferralSet}
-      onSubmit={onSubmit}
-      status={status}
-      err={err}
-      isSolo={isSolo}
-    />
-  );
-};

apps/trading/client-pages/competitions/competitions-home.tsx

@@ -1,133 +0,0 @@
-import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '@sentry/react';
-import { CompetitionsHeader } from '../../components/competitions/competitions-header';
-import { Intent, Loader, TradingButton } from '@vegaprotocol/ui-toolkit';
-
-import { useGames } from '../../lib/hooks/use-games';
-import { useCurrentEpochInfoQuery } from '../referrals/hooks/__generated__/Epoch';
-import { Link, useNavigate } from 'react-router-dom';
-import { Links } from '../../lib/links';
-import {
-  CompetitionsAction,
-  CompetitionsActionsContainer,
-} from '../../components/competitions/competitions-cta';
-import { GamesContainer } from '../../components/competitions/games-container';
-import { CompetitionsLeaderboard } from '../../components/competitions/competitions-leaderboard';
-import { useTeams } from '../../lib/hooks/use-teams';
-import take from 'lodash/take';
-import { usePageTitle } from '../../lib/hooks/use-page-title';
-
-export const CompetitionsHome = () => {
-  const t = useT();
-  const navigate = useNavigate();
-
-  usePageTitle(t('Competitions'));
-
-  const { data: epochData } = useCurrentEpochInfoQuery();
-  const currentEpoch = Number(epochData?.epoch.id);
-
-  const { data: gamesData, loading: gamesLoading } = useGames({
-    onlyActive: true,
-    currentEpoch,
-  });
-
-  const { data: teamsData, loading: teamsLoading } = useTeams({
-    sortByField: ['totalQuantumRewards'],
-    order: 'desc',
-  });
-
-  return (
-    <ErrorBoundary>
-      <CompetitionsHeader title={t('Competitions')}>
-        <p className="text-lg mb-1">
-          {t(
-            'Be a team player! Participate in games and work together to rake in as much profit to win.'
-          )}
-        </p>
-      </CompetitionsHeader>
-
-      {/** 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());
-              }}
-            >
-              {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>
-
-      {gamesLoading ? (
-        <Loader size="small" />
-      ) : (
-        <GamesContainer data={gamesData} currentEpoch={currentEpoch} />
-      )}
-
-      {/** The teams ranking */}
-      <div className="mb-6 flex flex-row items-baseline justify-between">
-        <h2 className="text-2xl">{t('Leaderboard')}</h2>
-        <Link to={Links.COMPETITIONS_TEAMS()} className="text-sm underline">
-          {t('View all teams')}
-        </Link>
-      </div>
-
-      {teamsLoading ? (
-        <Loader size="small" />
-      ) : (
-        <CompetitionsLeaderboard data={take(teamsData, 10)} />
-      )}
-    </ErrorBoundary>
-  );
-};

apps/trading/client-pages/competitions/competitions-team.tsx

@@ -1,218 +0,0 @@
-import { useState, type ButtonHTMLAttributes } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import orderBy from 'lodash/orderBy';
-import { Splash, truncateMiddle, Loader } from '@vegaprotocol/ui-toolkit';
-import { DispatchMetricLabels, type DispatchMetric } from '@vegaprotocol/types';
-import classNames from 'classnames';
-import { useT } from '../../lib/use-t';
-import { Table } from '../../components/table';
-import { formatNumber, getDateTimeFormat } from '@vegaprotocol/utils';
-import {
-  useTeam,
-  type TeamStats as ITeamStats,
-  type Team as TeamType,
-  type Member,
-  type TeamGame,
-} from '../../lib/hooks/use-team';
-import { DApp, EXPLORER_PARTIES, useLinks } from '@vegaprotocol/environment';
-import { TeamAvatar } from '../../components/competitions/team-avatar';
-import { TeamStats } from '../../components/competitions/team-stats';
-import { usePageTitle } from '../../lib/hooks/use-page-title';
-import { ErrorBoundary } from '../../components/error-boundary';
-import { LayoutWithGradient } from '../../components/layouts-inner';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { JoinTeam } from './join-team';
-import { UpdateTeamButton } from './update-team-button';
-
-export const CompetitionsTeam = () => {
-  const t = useT();
-  const { teamId } = useParams<{ teamId: string }>();
-  usePageTitle([t('Competitions'), t('Team')]);
-  return (
-    <ErrorBoundary feature="team">
-      <TeamPageContainer teamId={teamId} />
-    </ErrorBoundary>
-  );
-};
-
-const TeamPageContainer = ({ teamId }: { teamId: string | undefined }) => {
-  const t = useT();
-  const { pubKey } = useVegaWallet();
-  const { team, partyTeam, stats, members, games, loading, refetch } = useTeam(
-    teamId,
-    pubKey || undefined
-  );
-
-  if (loading) {
-    return (
-      <Splash>
-        <Loader />
-      </Splash>
-    );
-  }
-
-  if (!team) {
-    return (
-      <Splash>
-        <p>{t('Page not found')}</p>
-      </Splash>
-    );
-  }
-
-  return (
-    <TeamPage
-      team={team}
-      partyTeam={partyTeam}
-      stats={stats}
-      members={members}
-      games={games}
-      refetch={refetch}
-    />
-  );
-};
-
-const TeamPage = ({
-  team,
-  partyTeam,
-  stats,
-  members,
-  games,
-  refetch,
-}: {
-  team: TeamType;
-  partyTeam?: TeamType;
-  stats?: ITeamStats;
-  members?: Member[];
-  games?: TeamGame[];
-  refetch: () => void;
-}) => {
-  const t = useT();
-  const [showGames, setShowGames] = useState(true);
-
-  return (
-    <LayoutWithGradient>
-      <header className="flex gap-3 lg:gap-4 pt-5 lg:pt-10">
-        <TeamAvatar teamId={team.teamId} imgUrl={team.avatarUrl} />
-        <div className="flex flex-col items-start gap-1 lg:gap-3">
-          <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">{team.name}</h1>
-          <JoinTeam team={team} partyTeam={partyTeam} refetch={refetch} />
-          <UpdateTeamButton team={team} />
-        </div>
-      </header>
-      <TeamStats stats={stats} members={members} games={games} />
-      <section>
-        <div className="flex gap-4 lg:gap-8 mb-4 border-b border-default">
-          <ToggleButton active={showGames} onClick={() => setShowGames(true)}>
-            {t('Games ({{count}})', { count: games ? games.length : 0 })}
-          </ToggleButton>
-          <ToggleButton active={!showGames} onClick={() => setShowGames(false)}>
-            {t('Members ({{count}})', {
-              count: members ? members.length : 0,
-            })}
-          </ToggleButton>
-        </div>
-        {showGames ? <Games games={games} /> : <Members members={members} />}
-      </section>
-    </LayoutWithGradient>
-  );
-};
-
-const Games = ({ games }: { games?: TeamGame[] }) => {
-  const t = useT();
-
-  if (!games?.length) {
-    return <p>{t('No games')}</p>;
-  }
-
-  return (
-    <Table
-      columns={[
-        { name: 'rank', displayName: t('Rank') },
-        {
-          name: 'epoch',
-          displayName: t('Epoch'),
-          headerClassName: 'hidden md:block',
-          className: 'hidden md:block',
-        },
-        { name: 'type', displayName: t('Type') },
-        { name: 'amount', displayName: t('Amount earned') },
-        {
-          name: 'teams',
-          displayName: t('No. of participating teams'),
-          headerClassName: 'hidden md:block',
-          className: 'hidden md:block',
-        },
-      ]}
-      data={games.map((game) => ({
-        rank: game.team.rank,
-        epoch: game.epoch,
-        type: DispatchMetricLabels[game.team.rewardMetric as DispatchMetric],
-        amount: formatNumber(game.team.totalRewardsEarned),
-        teams: game.numberOfParticipants,
-      }))}
-      noCollapse={true}
-    />
-  );
-};
-
-const Members = ({ members }: { members?: Member[] }) => {
-  const t = useT();
-
-  if (!members?.length) {
-    return <p>{t('No members')}</p>;
-  }
-
-  const data = orderBy(
-    members.map((m) => ({
-      referee: <RefereeLink pubkey={m.referee} />,
-      joinedAt: getDateTimeFormat().format(new Date(m.joinedAt)),
-      joinedAtEpoch: Number(m.joinedAtEpoch),
-    })),
-    'joinedAtEpoch',
-    'desc'
-  );
-
-  return (
-    <Table
-      columns={[
-        { name: 'referee', displayName: t('Referee') },
-        {
-          name: 'joinedAt',
-          displayName: t('Joined at'),
-        },
-        {
-          name: 'joinedAtEpoch',
-          displayName: t('Joined epoch'),
-        },
-      ]}
-      data={data}
-      noCollapse={true}
-    />
-  );
-};
-
-const RefereeLink = ({ pubkey }: { pubkey: string }) => {
-  const linkCreator = useLinks(DApp.Explorer);
-  const link = linkCreator(EXPLORER_PARTIES.replace(':id', pubkey));
-
-  return (
-    <Link to={link} target="_blank" className="underline underline-offset-4">
-      {truncateMiddle(pubkey)}
-    </Link>
-  );
-};
-
-const ToggleButton = ({
-  active,
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & { active: boolean }) => {
-  return (
-    <button
-      {...props}
-      className={classNames('relative top-px uppercase border-b-2 py-4', {
-        'text-muted border-transparent': !active,
-        'border-vega-yellow': active,
-      })}
-    />
-  );
-};

apps/trading/client-pages/competitions/competitions-teams.tsx

@@ -1,67 +0,0 @@
-import { ErrorBoundary } from '@sentry/react';
-import { CompetitionsHeader } from '../../components/competitions/competitions-header';
-import { useRef, useState } from 'react';
-import { useT } from '../../lib/use-t';
-import { useTeams } from '../../lib/hooks/use-teams';
-import { CompetitionsLeaderboard } from '../../components/competitions/competitions-leaderboard';
-import {
-  Input,
-  Loader,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import { usePageTitle } from '../../lib/hooks/use-page-title';
-
-export const CompetitionsTeams = () => {
-  const t = useT();
-
-  usePageTitle([t('Competitions'), t('Teams')]);
-
-  const { data: teamsData, loading: teamsLoading } = useTeams({
-    sortByField: ['totalQuantumRewards'],
-    order: 'desc',
-  });
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [filter, setFilter] = useState<string | null | undefined>(undefined);
-
-  return (
-    <ErrorBoundary>
-      <CompetitionsHeader title={t('Join a team')}>
-        <p className="text-lg mb-1">{t('Choose a team to get involved')}</p>
-      </CompetitionsHeader>
-
-      <div className="mb-6 flex justify-end">
-        <div className="w-full md:w-60 h-10 relative">
-          <span className="absolute z-10 pointer-events-none opacity-90 top-[5px] left-[5px]">
-            <VegaIcon name={VegaIconNames.SEARCH} size={18} />
-          </span>
-          <Input
-            ref={inputRef}
-            className="opacity-90 text-right"
-            placeholder={t('Name')}
-            onKeyUp={() => {
-              const value = inputRef.current?.value;
-              if (value != filter) setFilter(value);
-            }}
-          />
-        </div>
-      </div>
-      <div>
-        {teamsLoading ? (
-          <Loader size="small" />
-        ) : (
-          <CompetitionsLeaderboard
-            data={teamsData.filter((td) => {
-              if (filter && filter.length > 0) {
-                const re = new RegExp(filter, 'i');
-                return re.test(td.name);
-              }
-              return true;
-            })}
-          />
-        )}
-      </div>
-    </ErrorBoundary>
-  );
-};

apps/trading/client-pages/competitions/competitions-update-team.tsx

@@ -1,106 +0,0 @@
-import { ErrorBoundary } from '../../components/error-boundary';
-import { usePageTitle } from '../../lib/hooks/use-page-title';
-import { Box } from '../../components/competitions/box';
-import { useT } from '../../lib/use-t';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
-import { RainbowButton } from '../../components/rainbow-button';
-import { Link, Navigate, useParams } from 'react-router-dom';
-import { Links } from '../../lib/links';
-import { useReferralSetTransaction } from '../../lib/hooks/use-referral-set-transaction';
-import { type FormFields, TeamForm, TransactionType } from './team-form';
-import { useTeam } from '../../lib/hooks/use-team';
-import { LayoutWithGradient } from '../../components/layouts-inner';
-
-export const CompetitionsUpdateTeam = () => {
-  const t = useT();
-  usePageTitle([t('Competitions'), t('Update a team')]);
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const openWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-  const { teamId } = useParams<{ teamId: string }>();
-  if (!teamId) {
-    return <Navigate to={Links.COMPETITIONS()} />;
-  }
-
-  return (
-    <ErrorBoundary feature="update-team">
-      <LayoutWithGradient>
-        <div className="mx-auto md:w-2/3 max-w-xl">
-          <Box className="flex flex-col gap-4">
-            <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
-              {t('Update a team')}
-            </h1>
-            {pubKey && !isReadOnly ? (
-              <UpdateTeamFormContainer teamId={teamId} pubKey={pubKey} />
-            ) : (
-              <>
-                <p>{t('Connect to update the details of your team.')}</p>
-                <RainbowButton variant="border" onClick={openWalletDialog}>
-                  {t('Connect wallet')}
-                </RainbowButton>
-              </>
-            )}
-          </Box>
-        </div>
-      </LayoutWithGradient>
-    </ErrorBoundary>
-  );
-};
-
-const UpdateTeamFormContainer = ({
-  teamId,
-  pubKey,
-}: {
-  teamId: string;
-  pubKey: string;
-}) => {
-  const t = useT();
-  const { team, loading, error } = useTeam(teamId, pubKey);
-
-  const { err, status, onSubmit } = useReferralSetTransaction({
-    onSuccess: () => {
-      // NOOP
-    },
-  });
-
-  if (loading) {
-    return <Loader size="small" />;
-  }
-  if (error) {
-    return (
-      <Splash className="gap-1">
-        <span>{t('Something went wrong.')}</span>
-        <Link to={Links.COMPETITIONS_TEAM(teamId)} className="underline">
-          {t("Go back to the team's profile")}
-        </Link>
-      </Splash>
-    );
-  }
-
-  const isMyTeam = team?.referrer === pubKey;
-  if (!isMyTeam) {
-    return <Navigate to={Links.COMPETITIONS_TEAM(teamId)} />;
-  }
-
-  const defaultValues: FormFields = {
-    id: team.teamId,
-    name: team.name,
-    url: team.teamUrl,
-    avatarUrl: team.avatarUrl,
-    private: team.closed,
-    allowList: team.allowList.join(','),
-  };
-
-  return (
-    <TeamForm
-      type={TransactionType.UpdateReferralSet}
-      status={status}
-      err={err}
-      isSolo={team.closed}
-      onSubmit={onSubmit}
-      defaultValues={defaultValues}
-    />
-  );
-};

apps/trading/client-pages/competitions/join-team.spec.tsx

@@ -1,88 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { JoinButton } from './join-team';
-import { type Team } from '../../lib/hooks/use-team';
-
-describe('JoinButton', () => {
-  const teamA = {
-    teamId: 'teamA',
-    name: 'Team A',
-    referrer: 'referrerA',
-  } as Team;
-
-  const teamB = {
-    teamId: 'teamB',
-    name: 'Team B',
-    referrer: 'referrerrB',
-  } as Team;
-
-  const props = {
-    pubKey: 'pubkey',
-    isReadOnly: false,
-    team: teamA,
-    partyTeam: teamB,
-    onJoin: jest.fn(),
-  };
-
-  beforeEach(() => {
-    props.onJoin.mockClear();
-  });
-
-  it('disables button if not connected', async () => {
-    render(<JoinButton {...props} pubKey={null} />);
-    const button = screen.getByRole('button');
-    expect(button).toBeDisabled();
-    await userEvent.hover(button);
-    const tooltip = await screen.findByRole('tooltip');
-    expect(tooltip).toHaveTextContent(/Connect your wallet/);
-  });
-
-  it('disables button if you created the current team', () => {
-    render(
-      <JoinButton
-        {...props}
-        pubKey={teamA.referrer}
-        team={teamA}
-        partyTeam={teamA}
-      />
-    );
-
-    const button = screen.getByRole('button', { name: /Owner/ });
-    expect(button).toBeDisabled();
-  });
-
-  it('disables button if you created a team', async () => {
-    render(<JoinButton {...props} pubKey={teamB.referrer} />);
-
-    const button = screen.getByRole('button', { name: /Switch team/ });
-    expect(button).toBeDisabled();
-    await userEvent.hover(button);
-    const tooltip = await screen.findByRole('tooltip');
-    expect(tooltip).toHaveTextContent(/As a team creator/);
-  });
-
-  it('shows if party is already in team', async () => {
-    render(<JoinButton {...props} team={teamA} partyTeam={teamA} />);
-
-    const button = screen.getByRole('button', { name: /Joined/ });
-    expect(button).toBeDisabled();
-  });
-
-  it('enables switch team if party is in a different team', async () => {
-    render(<JoinButton {...props} />);
-
-    const button = screen.getByRole('button', { name: /Switch team/ });
-    expect(button).toBeEnabled();
-    await userEvent.click(button);
-    expect(props.onJoin).toHaveBeenCalledWith('switch');
-  });
-
-  it('enables join team if party is not in a team', async () => {
-    render(<JoinButton {...props} partyTeam={undefined} />);
-
-    const button = screen.getByRole('button', { name: /Join team/ });
-    expect(button).toBeEnabled();
-    await userEvent.click(button);
-    expect(props.onJoin).toHaveBeenCalledWith('join');
-  });
-});

apps/trading/client-pages/competitions/join-team.tsx

@@ -1,225 +0,0 @@
-import {
-  TradingButton as Button,
-  Dialog,
-  Intent,
-  Tooltip,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import {
-  useSimpleTransaction,
-  useVegaWallet,
-  type Status,
-} from '@vegaprotocol/wallet';
-import { useT } from '../../lib/use-t';
-import { type Team } from '../../lib/hooks/use-team';
-import { useState } from 'react';
-
-type JoinType = 'switch' | 'join';
-
-export const JoinTeam = ({
-  team,
-  partyTeam,
-  refetch,
-}: {
-  team: Team;
-  partyTeam?: Team;
-  refetch: () => void;
-}) => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const { send, status } = useSimpleTransaction({
-    onSuccess: refetch,
-  });
-  const [confirmDialog, setConfirmDialog] = useState<JoinType>();
-
-  const joinTeam = () => {
-    send({
-      joinTeam: {
-        id: team.teamId,
-      },
-    });
-  };
-
-  return (
-    <>
-      <JoinButton
-        team={team}
-        partyTeam={partyTeam}
-        pubKey={pubKey}
-        isReadOnly={isReadOnly}
-        onJoin={setConfirmDialog}
-      />
-      <Dialog
-        open={confirmDialog !== undefined}
-        onChange={() => setConfirmDialog(undefined)}
-      >
-        {confirmDialog !== undefined && (
-          <DialogContent
-            type={confirmDialog}
-            status={status}
-            team={team}
-            partyTeam={partyTeam}
-            onConfirm={joinTeam}
-            onCancel={() => setConfirmDialog(undefined)}
-          />
-        )}
-      </Dialog>
-    </>
-  );
-};
-
-export const JoinButton = ({
-  pubKey,
-  isReadOnly,
-  team,
-  partyTeam,
-  onJoin,
-}: {
-  pubKey: string | null;
-  isReadOnly: boolean;
-  team: Team;
-  partyTeam?: Team;
-  onJoin: (type: JoinType) => void;
-}) => {
-  const t = useT();
-
-  if (!pubKey || isReadOnly) {
-    return (
-      <Tooltip description={t('Connect your wallet to join the team')}>
-        <Button intent={Intent.Primary} disabled={true}>
-          {t('Join team')}{' '}
-        </Button>
-      </Tooltip>
-    );
-  }
-  // Party is the creator of a team
-  else if (partyTeam && partyTeam.referrer === pubKey) {
-    // Party is the creator of THIS team
-    if (partyTeam.teamId === team.teamId) {
-      return (
-        <Button intent={Intent.None} disabled={true}>
-          <span className="flex items-center gap-2">
-            {t('Owner')}{' '}
-            <span className="text-vega-green-600 dark:text-vega-green">
-              <VegaIcon name={VegaIconNames.TICK} />
-            </span>
-          </span>
-        </Button>
-      );
-    } else {
-      // Not creator of the team, but still can't switch because
-      // creators cannot leave their own team
-      return (
-        <Tooltip description="As a team creator, you cannot switch teams">
-          <Button intent={Intent.Primary} disabled={true}>
-            {t('Switch team')}{' '}
-          </Button>
-        </Tooltip>
-      );
-    }
-  }
-  // Party is in a team, but not this one
-  else if (partyTeam && partyTeam.teamId !== team.teamId) {
-    return (
-      <Button onClick={() => onJoin('switch')} intent={Intent.Primary}>
-        {t('Switch team')}{' '}
-      </Button>
-    );
-  }
-  // Joined. Current party is already in this team
-  else if (partyTeam && partyTeam.teamId === team.teamId) {
-    return (
-      <Button intent={Intent.None} disabled={true}>
-        <span className="flex items-center gap-2">
-          {t('Joined')}{' '}
-          <span className="text-vega-green-600 dark:text-vega-green">
-            <VegaIcon name={VegaIconNames.TICK} />
-          </span>
-        </span>
-      </Button>
-    );
-  }
-
-  return (
-    <Button onClick={() => onJoin('join')} intent={Intent.Primary}>
-      {t('Join team')}
-    </Button>
-  );
-};
-
-const DialogContent = ({
-  type,
-  status,
-  team,
-  partyTeam,
-  onConfirm,
-  onCancel,
-}: {
-  type: JoinType;
-  status: Status;
-  team: Team;
-  partyTeam?: Team;
-  onConfirm: () => void;
-  onCancel: () => void;
-}) => {
-  const t = useT();
-
-  if (status === 'requested') {
-    return <p>{t('Confirm in wallet...')}</p>;
-  }
-
-  if (status === 'pending') {
-    return <p>{t('Confirming transaction...')}</p>;
-  }
-
-  if (status === 'confirmed') {
-    if (type === 'switch') {
-      return (
-        <p>
-          {t(
-            'Team switch successful. You will switch team at the end of the epoch.'
-          )}
-        </p>
-      );
-    }
-
-    return <p>{t('Team joined')}</p>;
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      {type === 'switch' && (
-        <>
-          <h2 className="font-alpha text-xl">{t('Switch team')}</h2>
-          <p>
-            {t(
-              "Switching team will move you from '{{fromTeam}}' to '{{toTeam}}' at the end of the epoch. Are you sure?",
-              {
-                fromTeam: partyTeam?.name,
-                toTeam: team.name,
-              }
-            )}
-          </p>
-        </>
-      )}
-      {type === 'join' && (
-        <>
-          <h2 className="font-alpha text-xl">{t('Join team')}</h2>
-          <p>
-            {t('Are you sure you want to join team: {{team}}', {
-              team: team.name,
-            })}
-          </p>
-        </>
-      )}
-      <div className="flex justify-between gap-2">
-        <Button onClick={onConfirm} intent={Intent.Success}>
-          {t('Confirm')}
-        </Button>
-        <Button onClick={onCancel} intent={Intent.Danger}>
-          {t('Cancel')}
-        </Button>
-      </div>
-    </div>
-  );
-};

apps/trading/client-pages/competitions/team-form.tsx

@@ -1,254 +0,0 @@
-import {
-  TradingFormGroup,
-  TradingInput,
-  TradingInputError,
-  TradingCheckbox,
-  TextArea,
-  TradingButton,
-  Intent,
-} from '@vegaprotocol/ui-toolkit';
-import { URL_REGEX, isValidVegaPublicKey } from '@vegaprotocol/utils';
-
-import { type useReferralSetTransaction } from '../../lib/hooks/use-referral-set-transaction';
-import { useT } from '../../lib/use-t';
-import { useForm, Controller } from 'react-hook-form';
-import type {
-  CreateReferralSet,
-  UpdateReferralSet,
-  Status,
-} from '@vegaprotocol/wallet';
-
-export type FormFields = {
-  id: string;
-  name: string;
-  url: string;
-  avatarUrl: string;
-  private: boolean;
-  allowList: string;
-};
-
-export enum TransactionType {
-  CreateReferralSet,
-  UpdateReferralSet,
-}
-
-const prepareTransaction = (
-  type: TransactionType,
-  fields: FormFields
-): CreateReferralSet | UpdateReferralSet => {
-  switch (type) {
-    case TransactionType.CreateReferralSet:
-      return {
-        createReferralSet: {
-          isTeam: true,
-          team: {
-            name: fields.name,
-            teamUrl: fields.url,
-            avatarUrl: fields.avatarUrl,
-            closed: fields.private,
-            allowList: fields.private
-              ? parseAllowListText(fields.allowList)
-              : [],
-          },
-        },
-      };
-    case TransactionType.UpdateReferralSet:
-      return {
-        updateReferralSet: {
-          id: fields.id,
-          isTeam: true,
-          team: {
-            name: fields.name,
-            teamUrl: fields.url,
-            avatarUrl: fields.avatarUrl,
-            closed: fields.private,
-            allowList: fields.private
-              ? parseAllowListText(fields.allowList)
-              : [],
-          },
-        },
-      };
-  }
-};
-
-export const TeamForm = ({
-  type,
-  status,
-  err,
-  isSolo,
-  onSubmit,
-  defaultValues,
-}: {
-  type: TransactionType;
-  status: ReturnType<typeof useReferralSetTransaction>['status'];
-  err: ReturnType<typeof useReferralSetTransaction>['err'];
-  isSolo: boolean;
-  onSubmit: ReturnType<typeof useReferralSetTransaction>['onSubmit'];
-  defaultValues?: FormFields;
-}) => {
-  const t = useT();
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    watch,
-    formState: { errors },
-  } = useForm<FormFields>({
-    defaultValues: {
-      private: isSolo,
-      ...defaultValues,
-    },
-  });
-
-  const isPrivate = watch('private');
-
-  const sendTransaction = (fields: FormFields) => {
-    onSubmit(prepareTransaction(type, fields));
-  };
-
-  return (
-    <form onSubmit={handleSubmit(sendTransaction)}>
-      <input
-        type="hidden"
-        {...register('id', {
-          disabled: true,
-        })}
-      />
-      <TradingFormGroup label={t('Team name')} labelFor="name">
-        <TradingInput {...register('name', { required: t('Required') })} />
-        {errors.name?.message && (
-          <TradingInputError forInput="name">
-            {errors.name.message}
-          </TradingInputError>
-        )}
-      </TradingFormGroup>
-      <TradingFormGroup
-        label={t('URL')}
-        labelFor="url"
-        labelDescription={t(
-          'Provide a link so users can learn more about your team'
-        )}
-      >
-        <TradingInput
-          {...register('url', {
-            pattern: { value: URL_REGEX, message: t('Invalid URL') },
-          })}
-        />
-        {errors.url?.message && (
-          <TradingInputError forInput="url">
-            {errors.url.message}
-          </TradingInputError>
-        )}
-      </TradingFormGroup>
-      <TradingFormGroup
-        label={t('Avatar URL')}
-        labelFor="avatarUrl"
-        labelDescription={t('Provide a URL to a hosted image')}
-      >
-        <TradingInput
-          {...register('avatarUrl', {
-            pattern: {
-              value: URL_REGEX,
-              message: t('Invalid image URL'),
-            },
-          })}
-        />
-        {errors.avatarUrl?.message && (
-          <TradingInputError forInput="avatarUrl">
-            {errors.avatarUrl.message}
-          </TradingInputError>
-        )}
-      </TradingFormGroup>
-      <TradingFormGroup
-        label={t('Make team private')}
-        labelFor="private"
-        hideLabel={true}
-      >
-        <Controller
-          name="private"
-          control={control}
-          render={({ field }) => {
-            return (
-              <TradingCheckbox
-                label={t('Make team private')}
-                checked={field.value}
-                onCheckedChange={(value) => {
-                  field.onChange(value);
-                }}
-                disabled={isSolo}
-              />
-            );
-          }}
-        />
-      </TradingFormGroup>
-      {isPrivate && (
-        <TradingFormGroup
-          label={t('Public key allow list')}
-          labelFor="allowList"
-          labelDescription={t(
-            'Use a comma separated list to allow only specific public keys to join the team'
-          )}
-        >
-          <TextArea
-            {...register('allowList', {
-              required: t('Required'),
-              disabled: isSolo,
-              validate: {
-                allowList: (value) => {
-                  const publicKeys = parseAllowListText(value);
-                  if (publicKeys.every((pk) => isValidVegaPublicKey(pk))) {
-                    return true;
-                  }
-                  return t('Invalid public key found in allow list');
-                },
-              },
-            })}
-          />
-          {errors.allowList?.message && (
-            <TradingInputError forInput="avatarUrl">
-              {errors.allowList.message}
-            </TradingInputError>
-          )}
-        </TradingFormGroup>
-      )}
-      {err && <p className="text-danger text-xs mb-4 capitalize">{err}</p>}
-      <SubmitButton type={type} status={status} />
-    </form>
-  );
-};
-
-const SubmitButton = ({
-  type,
-  status,
-}: {
-  type?: TransactionType;
-  status: Status;
-}) => {
-  const t = useT();
-  const disabled = status === 'pending' || status === 'requested';
-
-  let text = t('Create');
-  if (type === TransactionType.UpdateReferralSet) {
-    text = t('Update');
-  }
-
-  if (status === 'requested') {
-    text = t('Confirm in wallet...');
-  } else if (status === 'pending') {
-    text = t('Confirming transaction...');
-  }
-
-  return (
-    <TradingButton type="submit" intent={Intent.Info} disabled={disabled}>
-      {text}
-    </TradingButton>
-  );
-};
-
-const parseAllowListText = (str: string) => {
-  return str
-    .split(',')
-    .map((v) => v.trim())
-    .filter(Boolean);
-};

apps/trading/client-pages/competitions/update-team-button.tsx

@@ -1,20 +0,0 @@
-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';
-
-export const UpdateTeamButton = ({ team }: { team: Team }) => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-
-  if (pubKey && !isReadOnly && pubKey === team.referrer) {
-    return (
-      <TradingAnchorButton
-        data-testid="update-team-button"
-        href={Links.COMPETITIONS_UPDATE_TEAM(team.teamId)}
-        intent={Intent.Info}
-      />
-    );
-  }
-
-  return null;
-};

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -5,19 +5,17 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
+import type { FieldValues } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import classNames from 'classnames';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
-import { useCallback } from 'react';
-import { RainbowButton } from '../../components/rainbow-button';
-import {
-  useSimpleTransaction,
-  useVegaWallet,
-  useVegaWalletDialogStore,
-} from '@vegaprotocol/wallet';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { RainbowButton } from './buttons';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { useIsInReferralSet, useReferral } from './hooks/use-referral';
 import { Routes } from '../../lib/links';
+import { useTransactionEventSubscription } from '@vegaprotocol/web3';
 import { Statistics, useStats } from './referral-statistics';
 import { useReferralProgram } from './hooks/use-referral-program';
 import { ns, useT } from '../../lib/use-t';
@@ -75,10 +73,6 @@ export const ApplyCodeFormContainer = ({
   return <ApplyCodeForm onSuccess={onSuccess} />;
 };
 
-type FormFields = {
-  code: string;
-};
-
 export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   const t = useT();
   const program = useReferralProgram();
@@ -87,47 +81,31 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
     (store) => store.openVegaWalletDialog
   );
 
-  const { isReadOnly, pubKey } = useVegaWallet();
+  const [status, setStatus] = useState<
+    'requested' | 'no-funds' | 'successful' | null
+  >(null);
+  const txHash = useRef<string | null>(null);
+  const { isReadOnly, pubKey, sendTx } = useVegaWallet();
   const { isEligible, requiredFunds } = useFundsAvailable();
 
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((s) => s.setViews);
 
-  const [params] = useSearchParams();
   const {
     register,
     handleSubmit,
     formState: { errors },
+    setValue,
     setError,
     watch,
-  } = useForm<FormFields>({
-    defaultValues: {
-      code: params.get('code') || '',
-    },
-  });
+  } = useForm();
+  const [params] = useSearchParams();
 
   const codeField = watch('code');
-
   const { data: previewData, loading: previewLoading } = useReferral({
     code: validateCode(codeField, t) ? codeField : undefined,
   });
 
-  const { send, status } = useSimpleTransaction({
-    onSuccess: () => {
-      // go to main page when successfully applied
-      setTimeout(() => {
-        if (onSuccess) onSuccess();
-        navigate(Routes.REFERRALS);
-      }, RELOAD_DELAY);
-    },
-    onError: (msg) => {
-      setError('code', {
-        type: 'required',
-        message: msg,
-      });
-    },
-  });
-
   /**
    * Validates if a connected party can apply a code (min funds span protection)
    */
@@ -157,55 +135,99 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
     return true;
   }, [codeField, previewData, previewLoading, t]);
 
-  const noFunds = validateFundsAvailable() !== true ? true : false;
+  useEffect(() => {
+    const code = params.get('code');
+    if (code) setValue('code', code);
+  }, [params, setValue]);
 
-  const onSubmit = ({ code }: FormFields) => {
+  useEffect(() => {
+    const err = validateFundsAvailable();
+    if (err !== true) {
+      setStatus('no-funds');
+    } else {
+      setStatus(null);
+    }
+  }, [isEligible, validateFundsAvailable]);
+
+  const onSubmit = ({ code }: FieldValues) => {
     if (isReadOnly || !pubKey || !code || code.length === 0) {
       return;
     }
 
-    send({
+    setStatus('requested');
+
+    sendTx(pubKey, {
       applyReferralCode: {
         id: code as string,
       },
-    });
-
-    // sendTx(pubKey, {
-    //   applyReferralCode: {
-    //     id: code as string,
-    //   },
-    // })
-    //   .then((res) => {
-    //     if (!res) {
-    //       setError('code', {
-    //         type: 'required',
-    //         message: t('The transaction could not be sent'),
-    //       });
-    //     }
-    //     if (res) {
-    //       txHash.current = res.transactionHash.toLowerCase();
-    //     }
-    //   })
-    //   .catch((err) => {
-    //     if (err.message.includes('user rejected')) {
-    //       setStatus(null);
-    //     } else {
-    //       setStatus(null);
-    //       setError('code', {
-    //         type: 'required',
-    //         message:
-    //           err instanceof Error
-    //             ? err.message
-    //             : t('Your code has been rejected'),
-    //       });
-    //     }
-    //   });
+    })
+      .then((res) => {
+        if (!res) {
+          setError('code', {
+            type: 'required',
+            message: t('The transaction could not be sent'),
+          });
+        }
+        if (res) {
+          txHash.current = res.transactionHash.toLowerCase();
+        }
+      })
+      .catch((err) => {
+        if (err.message.includes('user rejected')) {
+          setStatus(null);
+        } else {
+          setStatus(null);
+          setError('code', {
+            type: 'required',
+            message:
+              err instanceof Error
+                ? err.message
+                : t('Your code has been rejected'),
+          });
+        }
+      });
   };
 
+  useTransactionEventSubscription({
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+    fetchPolicy: 'no-cache',
+    onData: ({ data: result }) =>
+      result.data?.busEvents?.forEach((event) => {
+        if (event.event.__typename === 'TransactionResult') {
+          const hash = event.event.hash.toLowerCase();
+          if (txHash.current && txHash.current === hash) {
+            const err = event.event.error;
+            const status = event.event.status;
+            if (err) {
+              setStatus(null);
+              setError('code', {
+                type: 'required',
+                message: err,
+              });
+            }
+            if (status && !err) {
+              setStatus('successful');
+            }
+          }
+        }
+      }),
+  });
+
   const { epochsValue, nextBenefitTierValue } = useStats({ program });
 
+  // go to main page when successfully applied
+  useEffect(() => {
+    if (status === 'successful') {
+      setTimeout(() => {
+        if (onSuccess) onSuccess();
+        navigate(Routes.REFERRALS);
+      }, RELOAD_DELAY);
+    }
+  }, [navigate, onSuccess, status]);
+
   // show "code applied" message when successfully applied
-  if (status === 'confirmed') {
+  if (status === 'successful') {
     return (
       <div className="mx-auto w-1/2">
         <h3 className="calt mb-5 flex flex-row items-center justify-center gap-2 text-center text-xl uppercase">
@@ -239,7 +261,7 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
       };
     }
 
-    if (noFunds) {
+    if (status === 'no-funds') {
       return {
         disabled: false,
         children: t('Deposit funds'),
@@ -310,7 +332,7 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
           </label>
           <RainbowButton variant="border" {...getButtonProps()} />
         </form>
-        {noFunds ? (
+        {status === 'no-funds' ? (
           <InputError intent="warning" className="overflow-auto break-words">
             <span>
               <SpamProtectionErr requiredFunds={requiredFunds?.toString()} />

apps/trading/client-pages/referrals/buttons.tsx

@@ -4,6 +4,41 @@ import type { ComponentProps, ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { NavLink } from 'react-router-dom';
 
+type RainbowButtonProps = {
+  variant?: 'full' | 'border';
+};
+
+export const RainbowButton = ({
+  variant = 'full',
+  children,
+  className,
+  ...props
+}: RainbowButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) => (
+  <button
+    className={classNames(
+      'bg-rainbow rounded-lg overflow-hidden disabled:opacity-40',
+      'hover:bg-rainbow-180 hover:animate-spin-rainbow',
+      {
+        'px-5 py-3 text-white': variant === 'full',
+        'p-[0.125rem]': variant === 'border',
+      }
+    )}
+    {...props}
+  >
+    <div
+      className={classNames(
+        {
+          'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
+            variant === 'border',
+        },
+        className
+      )}
+    >
+      {children}
+    </div>
+  </button>
+);
+
 const RAINBOW_TAB_STYLE = classNames(
   'inline-block',
   'bg-vega-clight-500 dark:bg-vega-cdark-500',

apps/trading/client-pages/referrals/constants.ts

@@ -2,6 +2,9 @@ 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 SKY_BACKGROUND =
+  'bg-[url(/sky-light.png)] dark:bg-[url(/sky-dark.png)] bg-[37%_0px] bg-[length:1440px] bg-no-repeat bg-local';
+
 // TODO: Update the links to use the correct referral related pages
 export const REFERRAL_DOCS_LINK =
   'https://docs.vega.xyz/mainnet/concepts/trading-on-vega/discounts-rewards#referral-program';

apps/trading/client-pages/referrals/create-code-form.tsx

@@ -1,5 +1,9 @@
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { RainbowButton } from '../../components/rainbow-button';
+import {
+  useVegaWallet,
+  useVegaWalletDialogStore,
+  determineId,
+} from '@vegaprotocol/wallet';
+import { RainbowButton } from './buttons';
 import { useState } from 'react';
 import {
   CopyWithTooltip,
@@ -7,7 +11,6 @@ import {
   ExternalLink,
   InputError,
   Intent,
-  Tooltip,
   TradingAnchorButton,
   TradingButton,
   VegaIcon,
@@ -15,28 +18,34 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
+import { useStakeAvailable } from './hooks/use-stake-available';
 import { ABOUT_REFERRAL_DOCS_LINK } from './constants';
 import { useIsInReferralSet, useReferral } from './hooks/use-referral';
 import { useT } from '../../lib/use-t';
-import { Link, Navigate, useNavigate } from 'react-router-dom';
-import { Links, Routes } from '../../lib/links';
+import { Navigate } from 'react-router-dom';
+import { Routes } from '../../lib/links';
 import { useReferralProgram } from './hooks/use-referral-program';
-import { useReferralSetTransaction } from '../../lib/hooks/use-referral-set-transaction';
-import { Trans } from 'react-i18next';
 
 export const CreateCodeContainer = () => {
-  const t = useT();
-  const { pubKey, isReadOnly } = useVegaWallet();
+  const { pubKey } = useVegaWallet();
   const isInReferralSet = useIsInReferralSet(pubKey);
-  const openWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
 
   // Navigate to the index page when already in the referral set.
   if (isInReferralSet) {
     return <Navigate to={Routes.REFERRALS} />;
   }
 
+  return <CreateCodeForm />;
+};
+
+export const CreateCodeForm = () => {
+  const t = useT();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const openWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+  const { pubKey, isReadOnly } = useVegaWallet();
+
   return (
     <div
       data-testid="referral-create-code-form"
@@ -51,82 +60,22 @@ export const CreateCodeContainer = () => {
         )}
       </p>
 
-      <div className="w-full flex flex-col gap-4 items-stretch">
-        {pubKey ? (
-          <CreateCodeForm />
-        ) : (
-          <RainbowButton
-            variant="border"
-            disabled={isReadOnly}
-            onClick={openWalletDialog}
-          >
-            {t('Connect wallet')}
-          </RainbowButton>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const CreateCodeForm = () => {
-  const t = useT();
-  const navigate = useNavigate();
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const { isReadOnly } = useVegaWallet();
-
-  return (
-    <>
-      <Tooltip
-        description={t(
-          'Create a simple referral code to enjoy the referrer commission outlined in the current referral program'
-        )}
-      >
-        <span>
-          <RainbowButton
-            variant="border"
-            disabled={isReadOnly}
-            onClick={() => setDialogOpen(true)}
-            className="w-full"
-          >
-            {t('Create a referral code')}
-          </RainbowButton>
-        </span>
-      </Tooltip>
-      <Tooltip
-        description={
-          <Trans
-            i18nKey={
-              'Make your referral code a Team to compete in Competitions with your friends, appear in leaderboards on the <0>Competitions Homepage</0>, and earn rewards'
+      <div className="w-full flex flex-col">
+        <RainbowButton
+          variant="border"
+          disabled={isReadOnly}
+          onClick={() => {
+            if (pubKey) {
+              setDialogOpen(true);
+            } else {
+              openWalletDialog();
             }
-            components={[
-              <Link
-                key="homepage-link"
-                to={Links.COMPETITIONS()}
-                className="underline"
-              >
-                Compeitionts Homepage
-              </Link>,
-            ]}
-          />
-        }
-      >
-        <span>
-          <RainbowButton
-            role="link"
-            variant="border"
-            disabled={isReadOnly}
-            onClick={() => navigate(Links.COMPETITIONS_CREATE_TEAM())}
-            className="w-full"
-          >
-            {t('Create a team')}
-          </RainbowButton>
-        </span>
-      </Tooltip>
-      <p className="text-xs">
-        <Link className="underline" to={Links.COMPETITIONS()}>
-          {t('Go to competitions')}
-        </Link>
-      </p>
+          }}
+        >
+          {pubKey ? t('Create a referral code') : t('Connect wallet')}
+        </RainbowButton>
+      </div>
+
       <Dialog
         title={t('Create a referral code')}
         open={dialogOpen}
@@ -135,7 +84,7 @@ export const CreateCodeForm = () => {
       >
         <CreateCodeDialog setDialogOpen={setDialogOpen} />
       </Dialog>
-    </>
+    </div>
   );
 };
 
@@ -146,42 +95,67 @@ const CreateCodeDialog = ({
 }) => {
   const t = useT();
   const createLink = useLinks(DApp.Governance);
-  const { pubKey } = useVegaWallet();
+  const { isReadOnly, pubKey, sendTx } = useVegaWallet();
   const { refetch } = useReferral({ pubKey, role: 'referrer' });
-  const {
-    err,
-    code,
-    status,
-    stakeAvailable: currentStakeAvailable,
-    requiredStake,
-    onSubmit,
-  } = useReferralSetTransaction();
+  const [err, setErr] = useState<string | null>(null);
+  const [code, setCode] = useState<string | null>(null);
+  const [status, setStatus] = useState<
+    'idle' | 'loading' | 'success' | 'error'
+  >('idle');
+
+  const { stakeAvailable: currentStakeAvailable, requiredStake } =
+    useStakeAvailable();
 
   const { details: programDetails } = useReferralProgram();
 
+  const onSubmit = () => {
+    if (isReadOnly || !pubKey) {
+      setErr('Not connected');
+    } else {
+      setErr(null);
+      setStatus('loading');
+      setCode(null);
+      sendTx(pubKey, {
+        createReferralSet: {
+          isTeam: false,
+        },
+      })
+        .then((res) => {
+          if (!res) {
+            setErr(`Invalid response: ${JSON.stringify(res)}`);
+            return;
+          }
+          const code = determineId(res.signature);
+          setCode(code);
+          setStatus('success');
+        })
+        .catch((err) => {
+          if (err.message.includes('user rejected')) {
+            setStatus('idle');
+            return;
+          }
+          setStatus('error');
+          setErr(err.message);
+        });
+    }
+  };
+
   const getButtonProps = () => {
-    if (status === 'idle') {
+    if (status === 'idle' || status === 'error') {
       return {
         children: t('Generate code'),
-        onClick: () => onSubmit({ createReferralSet: { isTeam: false } }),
+        onClick: () => onSubmit(),
       };
     }
 
-    if (status === 'requested') {
+    if (status === 'loading') {
       return {
         children: t('Confirm in wallet...'),
         disabled: true,
       };
     }
 
-    if (status === 'pending') {
-      return {
-        children: t('Waiting for transaction...'),
-        disabled: true,
-      };
-    }
-
-    if (status === 'confirmed') {
+    if (status === 'success') {
       return {
         children: t('Close'),
         intent: Intent.Success,
@@ -235,10 +209,7 @@ const CreateCodeDialog = ({
   if (!programDetails) {
     return (
       <div className="flex flex-col gap-4">
-        {(status === 'idle' ||
-          status === 'requested' ||
-          status === 'pending' ||
-          err) && (
+        {(status === 'idle' || status === 'loading' || status === 'error') && (
           <>
             {
               <p>
@@ -249,7 +220,7 @@ const CreateCodeDialog = ({
             }
           </>
         )}
-        {status === 'confirmed' && code && (
+        {status === 'success' && code && (
           <div className="flex items-center gap-2">
             <div className="flex-1 min-w-0 p-2 text-sm rounded bg-vega-clight-700 dark:bg-vega-cdark-700">
               <p className="overflow-hidden whitespace-nowrap text-ellipsis">
@@ -269,7 +240,7 @@ const CreateCodeDialog = ({
         <TradingButton
           fill={true}
           intent={Intent.Primary}
-          onClick={() => onSubmit({ createReferralSet: { isTeam: false } })}
+          onClick={() => onSubmit()}
           {...getButtonProps()}
         >
           {t('Yes')}
@@ -298,17 +269,14 @@ const CreateCodeDialog = ({
 
   return (
     <div className="flex flex-col gap-4">
-      {(status === 'idle' ||
-        status === 'requested' ||
-        status === 'pending' ||
-        err) && (
+      {(status === 'idle' || status === 'loading' || status === 'error') && (
         <p>
           {t(
             'Generate a referral code to share with your friends and access the commission benefits of the current program.'
           )}
         </p>
       )}
-      {status === 'confirmed' && code && (
+      {status === 'success' && code && (
         <div className="flex items-center gap-2">
           <div className="flex-1 min-w-0 p-2 text-sm rounded bg-vega-clight-700 dark:bg-vega-cdark-700">
             <p className="overflow-hidden whitespace-nowrap text-ellipsis">

apps/trading/client-pages/referrals/error-boundary.tsx

@@ -1,10 +1,53 @@
-import { useNavigate } from 'react-router';
-import { RainbowButton } from '../../components/rainbow-button';
-import { LayoutWithSky } from '../../components/layouts-inner';
+import { isRouteErrorResponse, useNavigate, useRouteError } from 'react-router';
+import { RainbowButton } from './buttons';
 import { AnimatedDudeWithWire } from './graphics/dude';
+import { LayoutWithSky } from './layout';
 import { Routes } from '../../lib/links';
 import { useT } from '../../lib/use-t';
 
+export const ErrorBoundary = () => {
+  const t = useT();
+  const error = useRouteError();
+  const navigate = useNavigate();
+
+  const title = isRouteErrorResponse(error)
+    ? `${error.status} ${error.statusText}`
+    : t('Something went wrong');
+
+  const code = isRouteErrorResponse(error) ? error.status : 0;
+
+  const messages: Record<number, string> = {
+    0: t('An unknown error occurred.'),
+    404: t("The page you're looking for doesn't exists."),
+  };
+
+  return (
+    <LayoutWithSky className="pt-32">
+      <div
+        aria-hidden
+        className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
+      >
+        <AnimatedDudeWithWire className="animate-spin" />
+      </div>
+      <h1 className="text-6xl font-alpha calt mb-10">{title}</h1>
+
+      {Object.keys(messages).includes(code.toString()) ? (
+        <p className="text-lg mb-10">{messages[code]}</p>
+      ) : null}
+
+      <p className="text-lg mb-10">
+        <RainbowButton
+          onClick={() => navigate('..')}
+          variant="border"
+          className="text-xs"
+        >
+          {t('Go back and try again')}
+        </RainbowButton>
+      </p>
+    </LayoutWithSky>
+  );
+};
+
 export const NotFound = () => {
   const t = useT();
   const navigate = useNavigate();

apps/trading/client-pages/referrals/hooks/use-referral.ts

@@ -8,13 +8,13 @@ import type {
   ReferralSetsQueryVariables,
 } from './__generated__/ReferralSets';
 import { useReferralSetsQuery } from './__generated__/ReferralSets';
-import { useStakeAvailable } from '../../../lib/hooks/use-stake-available';
+import { useStakeAvailable } from './use-stake-available';
 
 export const DEFAULT_AGGREGATION_DAYS = 30;
 
 export type Role = 'referrer' | 'referee';
 type UseReferralArgs = (
-  | { code: string | undefined }
+  | { code: string }
   | { pubKey: string | null; role: Role }
 ) & {
   aggregationEpochs?: number;

apps/trading/client-pages/referrals/layout.tsx

@@ -1,12 +1,10 @@
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
+import { SKY_BACKGROUND } from './constants';
 import { Outlet } from 'react-router-dom';
 import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 
-export const SKY_BACKGROUND =
-  'bg-[url(/sky-light.png)] dark:bg-[url(/sky-dark.png)] bg-[37%_0px] bg-[length:1440px] bg-no-repeat bg-local';
-
-const Layout = ({
+export const Layout = ({
   className,
   children,
   ...props

apps/trading/client-pages/referrals/referral-statistics.spec.tsx

@@ -1,9 +1,6 @@
 import { MockedProvider, type MockedResponse } from '@apollo/react-testing';
-import { render, screen, waitFor } from '@testing-library/react';
-import {
-  VegaWalletContext,
-  type VegaWalletContextShape,
-} from '@vegaprotocol/wallet';
+import { render, waitFor } from '@testing-library/react';
+import { type VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { ReferralStatistics } from './referral-statistics';
 import {
   ReferralProgramDocument,
@@ -18,7 +15,7 @@ import {
   StakeAvailableDocument,
   type StakeAvailableQueryVariables,
   type StakeAvailableQuery,
-} from '../../lib/hooks/__generated__/StakeAvailable';
+} from './hooks/__generated__/StakeAvailable';
 import {
   RefereesDocument,
   type RefereesQueryVariables,
@@ -299,99 +296,122 @@ const refereesMock30: MockedResponse<RefereesQuery, RefereesQueryVariables> = {
   },
 };
 
-describe('ReferralStatistics', () => {
-  const renderComponent = (mocks: MockedResponse[]) => {
-    const walletContext = {
-      pubKey: MOCK_PUBKEY,
-      isReadOnly: false,
-      sendTx: jest.fn(),
-    } as unknown as VegaWalletContextShape;
+jest.mock('@vegaprotocol/wallet', () => {
+  return {
+    ...jest.requireActual('@vegaprotocol/wallet'),
+    useVegaWallet: () => {
+      const ctx: Partial<VegaWalletContextShape> = {
+        pubKey: MOCK_PUBKEY,
+      };
+      return ctx;
+    },
+  };
+});
 
-    return render(
+describe('ReferralStatistics', () => {
+  it('displays apply code when no data has been found for given pubkey', () => {
+    const { queryByTestId } = render(
       <MemoryRouter>
-        <VegaWalletContext.Provider value={walletContext}>
-          <MockedProvider mocks={mocks} showWarnings={false}>
-            <ReferralStatistics />
-          </MockedProvider>
-        </VegaWalletContext.Provider>
+        <MockedProvider mocks={[]} showWarnings={false}>
+          <ReferralStatistics />
+        </MockedProvider>
       </MemoryRouter>
     );
-  };
 
-  it('displays apply code when no data has been found for given pubkey', () => {
-    renderComponent([]);
-    expect(
-      screen.queryByTestId('referral-apply-code-form')
-    ).toBeInTheDocument();
+    expect(queryByTestId('referral-apply-code-form')).toBeInTheDocument();
   });
 
   it('displays referrer stats when given pubkey is a referrer', async () => {
-    renderComponent([
-      programMock,
-      referralSetAsReferrerMock,
-      noReferralSetAsRefereeMock,
-      stakeAvailableMock,
-      refereesMock,
-      refereesMock30,
-    ]);
+    const { queryByTestId } = render(
+      <MemoryRouter>
+        <MockedProvider
+          mocks={[
+            programMock,
+            referralSetAsReferrerMock,
+            noReferralSetAsRefereeMock,
+            stakeAvailableMock,
+            refereesMock,
+            refereesMock30,
+          ]}
+          showWarnings={false}
+        >
+          <ReferralStatistics />
+        </MockedProvider>
+      </MemoryRouter>
+    );
 
     await waitFor(() => {
       expect(
-        screen.queryByTestId('referral-create-code-form')
+        queryByTestId('referral-create-code-form')
       ).not.toBeInTheDocument();
-      expect(screen.queryByTestId('referral-statistics')).toBeInTheDocument();
-      expect(screen.queryByTestId('referral-statistics')?.dataset.as).toEqual(
+      expect(queryByTestId('referral-statistics')).toBeInTheDocument();
+      expect(queryByTestId('referral-statistics')?.dataset.as).toEqual(
         'referrer'
       );
       // gets commision from 30 epochs query
-      expect(screen.queryByTestId('total-commission-value')).toHaveTextContent(
+      expect(queryByTestId('total-commission-value')).toHaveTextContent(
         '12,340'
       );
     });
   });
 
   it('displays referee stats when given pubkey is a referee', async () => {
-    renderComponent([
-      programMock,
-      noReferralSetAsReferrerMock,
-      referralSetAsRefereeMock,
-      stakeAvailableMock,
-      refereesMock,
-    ]);
+    const { queryByTestId } = render(
+      <MemoryRouter>
+        <MockedProvider
+          mocks={[
+            programMock,
+            noReferralSetAsReferrerMock,
+            referralSetAsRefereeMock,
+            stakeAvailableMock,
+            refereesMock,
+          ]}
+          showWarnings={false}
+        >
+          <ReferralStatistics />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+
     await waitFor(() => {
       expect(
-        screen.queryByTestId('referral-create-code-form')
+        queryByTestId('referral-create-code-form')
       ).not.toBeInTheDocument();
-      expect(screen.queryByTestId('referral-statistics')).toBeInTheDocument();
-      expect(screen.queryByTestId('referral-statistics')?.dataset.as).toEqual(
+      expect(queryByTestId('referral-statistics')).toBeInTheDocument();
+      expect(queryByTestId('referral-statistics')?.dataset.as).toEqual(
         'referee'
       );
     });
   });
 
   it('displays eligibility warning when the set is no longer valid due to the referrers stake', async () => {
-    renderComponent([
-      programMock,
-      noReferralSetAsReferrerMock,
-      referralSetAsRefereeMock,
-      nonEligibleStakeAvailableMock,
-      refereesMock,
-    ]);
+    const { queryByTestId } = render(
+      <MemoryRouter>
+        <MockedProvider
+          mocks={[
+            programMock,
+            noReferralSetAsReferrerMock,
+            referralSetAsRefereeMock,
+            nonEligibleStakeAvailableMock,
+            refereesMock,
+          ]}
+          showWarnings={false}
+        >
+          <ReferralStatistics />
+        </MockedProvider>
+      </MemoryRouter>
+    );
 
     await waitFor(() => {
       expect(
-        screen.queryByTestId('referral-create-code-form')
+        queryByTestId('referral-create-code-form')
       ).not.toBeInTheDocument();
-      expect(screen.queryByTestId('referral-statistics')).toBeInTheDocument();
-      expect(screen.queryByTestId('referral-statistics')?.dataset.as).toEqual(
+      expect(queryByTestId('referral-statistics')).toBeInTheDocument();
+      expect(queryByTestId('referral-statistics')?.dataset.as).toEqual(
         'referee'
       );
-      expect(
-        screen.queryByTestId('referral-eligibility-warning')
-      ).toBeInTheDocument();
-      expect(
-        screen.queryByTestId('referral-apply-code-form')
-      ).toBeInTheDocument();
+      expect(queryByTestId('referral-eligibility-warning')).toBeInTheDocument();
+      expect(queryByTestId('referral-apply-code-form')).toBeInTheDocument();
     });
   });
 });

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -1,17 +1,20 @@
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import BigNumber from 'bignumber.js';
 import minBy from 'lodash/minBy';
-import sortBy from 'lodash/sortBy';
-import compact from 'lodash/compact';
-import { Trans } from 'react-i18next';
-import classNames from 'classnames';
+import { CodeTile, StatTile } from './tile';
 import {
   VegaIcon,
   VegaIconNames,
   truncateMiddle,
   TextChildrenTooltip as Tooltip,
 } from '@vegaprotocol/ui-toolkit';
+
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import {
+  DEFAULT_AGGREGATION_DAYS,
+  useReferral,
+  useUpdateReferees,
+} from './hooks/use-referral';
+import classNames from 'classnames';
+import { Table } from '../../components/table';
 import {
   addDecimalsFormatNumber,
   getDateFormat,
@@ -21,22 +24,17 @@ import {
   removePaginationWrapper,
 } from '@vegaprotocol/utils';
 import { useReferralSetStatsQuery } from './hooks/__generated__/ReferralSetStats';
-import { useStakeAvailable } from '../../lib/hooks/use-stake-available';
-import { useT, ns } from '../../lib/use-t';
-import { useTeam } from '../../lib/hooks/use-team';
-import { TeamAvatar } from '../../components/competitions/team-avatar';
-import { TeamStats } from '../../components/competitions/team-stats';
-import { Table } from '../../components/table';
-import {
-  DEFAULT_AGGREGATION_DAYS,
-  useReferral,
-  useUpdateReferees,
-} from './hooks/use-referral';
-import { ApplyCodeForm, ApplyCodeFormContainer } from './apply-code-form';
+import compact from 'lodash/compact';
 import { useReferralProgram } from './hooks/use-referral-program';
+import { useStakeAvailable } from './hooks/use-stake-available';
+import sortBy from 'lodash/sortBy';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
+import BigNumber from 'bignumber.js';
+import { useT, ns } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
+import { ApplyCodeForm, ApplyCodeFormContainer } from './apply-code-form';
 import { QUSDTooltip } from './qusd-tooltip';
-import { CodeTile, StatTile, Tile } from './tile';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -194,7 +192,10 @@ export const Statistics = ({
     nextBenefitTierEpochsValue,
   } = useStats({ data, program });
 
-  const isApplyCodePreview = data.referee === null;
+  const isApplyCodePreview = useMemo(
+    () => data.referee === null,
+    [data.referee]
+  );
 
   const { benefitTiers } = useReferralProgram();
 
@@ -327,6 +328,23 @@ export const Statistics = ({
     </StatTile>
   );
 
+  const referrerTiles = (
+    <>
+      <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
+        {baseCommissionTile}
+        {stakingMultiplierTile}
+        {finalCommissionTile}
+      </div>
+
+      <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+        {codeTile}
+        {referrerVolumeTile}
+        {numberOfTradersTile}
+        {totalCommissionTile}
+      </div>
+    </>
+  );
+
   const currentBenefitTierTile = (
     <StatTile
       title={t('Current tier')}
@@ -398,41 +416,8 @@ export const Statistics = ({
     </StatTile>
   );
 
-  const eligibilityWarningOverlay = as === 'referee' && !isEligible && (
-    <div
-      data-testid="referral-eligibility-warning"
-      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-1/2 lg:w-1/3"
-    >
-      <h2 className="text-2xl mb-2">{t('Referral code no longer valid')}</h2>
-      <p>
-        {t(
-          'Your referral code is no longer valid as the referrer no longer meets the minimum requirements. Apply a new code to continue receiving discounts.'
-        )}
-      </p>
-    </div>
-  );
-
-  const referrerTiles = (
-    <>
-      <Team teamId={data.code} />
-      <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
-        {baseCommissionTile}
-        {stakingMultiplierTile}
-        {finalCommissionTile}
-      </div>
-
-      <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
-        {codeTile}
-        {referrerVolumeTile}
-        {numberOfTradersTile}
-        {totalCommissionTile}
-      </div>
-    </>
-  );
-
   const refereeTiles = (
     <>
-      <Team teamId={data.code} />
       <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
         {currentBenefitTierTile}
         {runningVolumeTile}
@@ -447,6 +432,20 @@ export const Statistics = ({
     </>
   );
 
+  const eligibilityWarning = as === 'referee' && !isEligible && (
+    <div
+      data-testid="referral-eligibility-warning"
+      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-1/2 lg:w-1/3"
+    >
+      <h2 className="text-2xl mb-2">{t('Referral code no longer valid')}</h2>
+      <p>
+        {t(
+          'Your referral code is no longer valid as the referrer no longer meets the minimum requirements. Apply a new code to continue receiving discounts.'
+        )}
+      </p>
+    </div>
+  );
+
   return (
     <div
       data-testid="referral-statistics"
@@ -461,7 +460,8 @@ export const Statistics = ({
         {as === 'referrer' && referrerTiles}
         {as === 'referee' && refereeTiles}
       </div>
-      {eligibilityWarningOverlay}
+
+      {eligibilityWarning}
     </div>
   );
 };
@@ -574,19 +574,3 @@ export const RefereesTable = ({
     </>
   );
 };
-
-const Team = ({ teamId }: { teamId?: string }) => {
-  const { team, games, members } = useTeam(teamId);
-
-  if (!team) return null;
-
-  return (
-    <Tile className="flex gap-3 lg:gap-4">
-      <TeamAvatar teamId={team.teamId} imgUrl={team.avatarUrl} />
-      <div className="flex flex-col items-start gap-1 lg:gap-3">
-        <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">{team.name}</h1>
-        <TeamStats members={members} games={games} />
-      </div>
-    </Tile>
-  );
-};

apps/trading/client-pages/referrals/referrals.tsx

@@ -13,9 +13,11 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
 import { REFERRAL_DOCS_LINK } from './constants';
 import classNames from 'classnames';
+import { usePageTitleStore } from '../../stores';
+import { useEffect } from 'react';
+import { titlefy } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
-import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 const Nav = () => {
   const t = useT();
@@ -55,7 +57,13 @@ export const Referrals = () => {
   const loading = refereeLoading || referrerLoading;
   const showNav = !loading && !error && !referrer && !referee;
 
-  usePageTitle(t('Referrals'));
+  const { updateTitle } = usePageTitleStore((store) => ({
+    updateTitle: store.updateTitle,
+  }));
+
+  useEffect(() => {
+    updateTitle(titlefy([t('Referrals')]));
+  }, [updateTitle, t]);
 
   return (
     <ErrorBoundary feature="referrals">

apps/trading/client-pages/teams/index.ts

@@ -0,0 +1 @@
+export { Teams } from './teams';

apps/trading/client-pages/teams/teams.tsx

@@ -0,0 +1,7 @@
+export const Teams = () => {
+  return (
+    <div>
+      <h1>Teams</h1>
+    </div>
+  );
+};

apps/trading/components/chart-container/chart-container.tsx

@@ -11,7 +11,6 @@ import {
 } from '@vegaprotocol/candles-chart';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { useChartSettings, STUDY_SIZE } from './use-chart-settings';
-import { SUPPORTED_INTERVALS, type SupportedInterval } from './constants';
 
 /**
  * Renders either the pennant chart or the tradingview chart
@@ -37,7 +36,7 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
   const pennantChart = (
     <CandlesChartContainer
       marketId={marketId}
-      interval={toPennantInterval(interval as SupportedInterval)}
+      interval={toPennantInterval(interval)}
       chartType={chartType}
       overlays={overlays}
       studies={studies}
@@ -64,7 +63,7 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
           libraryPath={CHARTING_LIBRARY_PATH}
           libraryHash={CHARTING_LIBRARY_HASH}
           marketId={marketId}
-          interval={toTradingViewResolution(interval as SupportedInterval)}
+          interval={toTradingViewResolution(interval)}
           onIntervalChange={(newInterval) => {
             setInterval(fromTradingViewResolution(newInterval));
           }}
@@ -84,11 +83,7 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
   }
 };
 
-const toTradingViewResolution = (interval: SupportedInterval) => {
-  if (!SUPPORTED_INTERVALS.includes(interval)) {
-    throw new Error(`interval ${interval} is not supported`);
-  }
-
+const toTradingViewResolution = (interval: Interval) => {
   const resolution = TRADINGVIEW_INTERVAL_MAP[interval];
 
   if (!resolution) {
@@ -112,11 +107,7 @@ const fromTradingViewResolution = (resolution: string) => {
   return interval as Interval;
 };
 
-const toPennantInterval = (interval: SupportedInterval) => {
-  if (!SUPPORTED_INTERVALS.includes(interval)) {
-    throw new Error(`interval ${interval} is not supported`);
-  }
-
+const toPennantInterval = (interval: Interval) => {
   const pennantInterval = PENNANT_INTERVAL_MAP[interval];
 
   if (!pennantInterval) {

apps/trading/components/chart-container/chart-menu.tsx

@@ -18,13 +18,21 @@ import {
   TradingDropdownTrigger,
   Icon,
 } from '@vegaprotocol/ui-toolkit';
-import { type Interval } from '@vegaprotocol/types';
+import { Interval } from '@vegaprotocol/types';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { ALLOWED_TRADINGVIEW_HOSTNAMES } from '@vegaprotocol/trading-view';
 import { IconNames, type IconName } from '@blueprintjs/icons';
 import { useChartSettings } from './use-chart-settings';
 import { useT } from '../../lib/use-t';
-import { SUPPORTED_INTERVALS } from './constants';
+
+const INTERVALS = [
+  Interval.INTERVAL_I1M,
+  Interval.INTERVAL_I5M,
+  Interval.INTERVAL_I15M,
+  Interval.INTERVAL_I1H,
+  Interval.INTERVAL_I6H,
+  Interval.INTERVAL_I1D,
+];
 
 const chartTypeIcon = new Map<ChartType, IconName>([
   [ChartType.AREA, IconNames.TIMELINE_AREA_CHART],
@@ -86,7 +94,7 @@ export const ChartMenu = () => {
               setInterval(value as Interval);
             }}
           >
-            {SUPPORTED_INTERVALS.map((timeInterval) => (
+            {INTERVALS.map((timeInterval) => (
               <TradingDropdownRadioItem
                 key={timeInterval}
                 inset

apps/trading/components/chart-container/constants.ts

@@ -1,12 +0,0 @@
-import { Interval } from '@vegaprotocol/types';
-
-export type SupportedInterval = typeof SUPPORTED_INTERVALS[number];
-
-export const SUPPORTED_INTERVALS = [
-  Interval.INTERVAL_I1M,
-  Interval.INTERVAL_I5M,
-  Interval.INTERVAL_I15M,
-  Interval.INTERVAL_I1H,
-  Interval.INTERVAL_I6H,
-  Interval.INTERVAL_I1D,
-] as const;

apps/trading/components/competitions/box.tsx

@@ -1,21 +0,0 @@
-import classNames from 'classnames';
-import { type HTMLAttributes } from 'react';
-
-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>) => {
-  return (
-    <div
-      {...props}
-      className={classNames(
-        BORDER_COLOR,
-        GRADIENT,
-        'border rounded-lg',
-        'p-6',
-        props.className
-      )}
-    />
-  );
-};

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

@@ -1,41 +0,0 @@
-import { Box } from './box';
-import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
-import { DudeBadge } from './graphics/dude-badge';
-
-export const CompetitionsActionsContainer = ({
-  children,
-}: {
-  children:
-    | ReactElement<typeof CompetitionsAction>
-    | Iterable<ReactElement<typeof CompetitionsAction>>;
-}) => (
-  <div
-    className="grid grid-cols-1 md:grid-cols-3 grid-rows-4'
- gap-6 mb-12"
-  >
-    {children}
-  </div>
-);
-
-export const CompetitionsAction = ({
-  variant,
-  title,
-  description,
-  actionElement,
-}: {
-  variant: ComponentProps<typeof DudeBadge>['variant'];
-  title: string;
-  description?: string;
-  actionElement: ReactNode;
-}) => {
-  return (
-    <Box className="grid md:grid-rows-[subgrid] gap-6 row-span-4 text-center">
-      <div className="flex justify-center">
-        <DudeBadge variant={variant} />
-      </div>
-      <h2 className="text-2xl">{title}</h2>
-      {description && <p className="text-muted">{description}</p>}
-      <div className="flex justify-center">{actionElement}</div>
-    </Box>
-  );
-};

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

@@ -1,27 +0,0 @@
-import { AnimatedDudeWithWire } from '../../client-pages/referrals/graphics/dude';
-import { type ReactNode } from 'react';
-
-export const CompetitionsHeader = ({
-  title,
-  children,
-}: {
-  title: string;
-  children?: ReactNode;
-}) => {
-  return (
-    <div className="relative mb-4 lg:mb-20">
-      <div
-        aria-hidden
-        className="absolute top-20 right-[220px] md:right-[240px] max-sm:hidden"
-      >
-        <AnimatedDudeWithWire />
-      </div>
-      <div className="pt-6 lg:pt-20 sm:w-1/2">
-        <h1 className="text-3xl lg:text-6xl leading-[1em] font-alpha calt mb-2 lg:mb-10">
-          {title}
-        </h1>
-        {children}
-      </div>
-    </div>
-  );
-};

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

@@ -1,71 +0,0 @@
-import { Link } from 'react-router-dom';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { getNumberFormat } from '@vegaprotocol/utils';
-import { type useTeams } from '../../lib/hooks/use-teams';
-import { useT } from '../../lib/use-t';
-import { Table } from '../table';
-import { Rank } from './graphics/rank';
-import { Links } from '../../lib/links';
-import { TeamAvatar } from './team-avatar';
-
-export const CompetitionsLeaderboard = ({
-  data,
-}: {
-  data: ReturnType<typeof useTeams>['data'];
-}) => {
-  const t = useT();
-
-  const num = (n?: number | string) =>
-    !n ? '-' : getNumberFormat(0).format(Number(n));
-
-  if (!data || data.length === 0) {
-    return <Splash>{t('Could not find any teams')}</Splash>;
-  }
-
-  return (
-    <Table
-      columns={[
-        { name: 'rank', displayName: '#' },
-        { name: 'avatar', displayName: '' },
-        { name: 'team', displayName: t('Team') },
-        { name: 'earned', displayName: t('Rewards earned') },
-        { name: 'games', displayName: t('Total games') },
-        { name: 'status', displayName: t('Status') },
-        { name: 'volume', displayName: t('Volume') },
-      ]}
-      data={data.map((td, i) => {
-        // leaderboard place or medal
-        let rank: number | React.ReactNode = i + 1;
-        if (rank === 1) rank = <Rank variant="gold" />;
-        if (rank === 2) rank = <Rank variant="silver" />;
-        if (rank === 3) rank = <Rank variant="bronze" />;
-
-        const avatar = (
-          <TeamAvatar
-            teamId={td.teamId}
-            imgUrl={td.avatarUrl}
-            alt={td.name}
-            size="small"
-          />
-        );
-
-        return {
-          rank,
-          avatar,
-          team: (
-            <Link
-              className="hover:underline"
-              to={Links.COMPETITIONS_TEAM(td.teamId)}
-            >
-              {td.name}
-            </Link>
-          ),
-          earned: num(td.totalQuantumRewards),
-          games: num(td.totalGamesPlayed),
-          status: td.closed ? t('Closed') : t('Open'),
-          volume: num(td.totalQuantumVolume),
-        };
-      })}
-    />
-  );
-};

apps/trading/components/competitions/games-container.tsx

@@ -1,44 +0,0 @@
-import { type TransferNode } from '@vegaprotocol/types';
-import { ActiveRewardCard } from '../rewards-container/active-rewards';
-import { useT } from '../../lib/use-t';
-
-export const GamesContainer = ({
-  data,
-  currentEpoch,
-}: {
-  data: TransferNode[];
-  currentEpoch: number;
-}) => {
-  const t = useT();
-
-  if (!data || data.length === 0) {
-    return (
-      <p className="mb-6 text-muted">
-        {t('There are currently no games available.')}
-      </p>
-    );
-  }
-
-  return (
-    <div className="mb-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {data.map((game, i) => {
-        // TODO: Remove `kind` prop from ActiveRewardCard
-        const { transfer } = game;
-        if (
-          transfer.kind.__typename !== 'RecurringTransfer' ||
-          !transfer.kind.dispatchStrategy?.dispatchMetric
-        ) {
-          return null;
-        }
-        return (
-          <ActiveRewardCard
-            key={i}
-            transferNode={game}
-            currentEpoch={currentEpoch}
-            kind={transfer.kind}
-          />
-        );
-      })}
-    </div>
-  );
-};

apps/trading/components/competitions/graphics/dude-badge.tsx

@@ -1,40 +0,0 @@
-import classNames from 'classnames';
-import { DudeWithFlag } from './dude-with-flag';
-
-/**
- * Pre-defined badge gradients
- */
-
-export const BADGE_GRADIENT_VARIANT_A =
-  'bg-gradient-to-r from-vega-blue-500 via-vega-purple-500 to-vega-pink-500';
-export const BADGE_GRADIENT_VARIANT_B =
-  'bg-gradient-to-r from-vega-purple-500 via-vega-green-500 to-vega-blue-500';
-export const BADGE_GRADIENT_VARIANT_C =
-  'bg-gradient-to-r from-vega-blue-500 via-vega-purple-500 to-vega-green-500';
-
-/** Badge */
-
-export const DudeBadge = ({
-  variant,
-  className,
-}: {
-  variant: 'A' | 'B' | 'C' | undefined;
-  className?: classNames.Argument;
-}) => {
-  return (
-    <div
-      className={classNames(
-        'w-24 h-24 rounded-full bg-black relative',
-        'rotate-12',
-        {
-          [BADGE_GRADIENT_VARIANT_A]: variant === 'A',
-          [BADGE_GRADIENT_VARIANT_B]: variant === 'B',
-          [BADGE_GRADIENT_VARIANT_C]: variant === 'C',
-        },
-        className
-      )}
-    >
-      <DudeWithFlag className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-12" />
-    </div>
-  );
-};

apps/trading/components/competitions/graphics/dude-with-flag.tsx

@@ -1,50 +0,0 @@
-import { theme } from '@vegaprotocol/tailwindcss-config';
-
-type DudeWithFlagProps = {
-  flagColor?: string;
-  withStar?: boolean;
-  className?: string;
-};
-
-const DEFAULT_FLAG_COLOR = theme.colors.vega.green[500];
-
-export const DudeWithFlag = ({
-  flagColor = DEFAULT_FLAG_COLOR,
-  withStar = true,
-  className,
-}: DudeWithFlagProps) => {
-  return (
-    <svg
-      width="49"
-      height="43"
-      viewBox="0 0 49 43"
-      fill="none"
-      className={className}
-    >
-      {withStar && (
-        <>
-          <path d="M3.99992 0H2V1.99993H3.99992V0Z" fill="white" />
-          <path
-            d="M2 1.99993L0 1.99981V3.99974H1.99992L2 1.99993Z"
-            fill="white"
-          />
-          <path
-            d="M3.99995 3.99992L1.99992 3.99974L2 5.99988H3.99995V3.99992Z"
-            fill="white"
-          />
-          <path
-            d="M5.99997 1.99981L3.99992 1.99993L3.99995 3.99992L5.99997 3.99974V1.99981Z"
-            fill="white"
-          />
-        </>
-      )}
-      <path
-        d="M32 4H11V33H15V43H20V33H23V43H28V33H32V4ZM20 17H15V12H20V17ZM28 17H23V12H28V17Z"
-        fill="white"
-      />
-      <path d="M41 25L32 25L32 20L41 20L41 25Z" fill="white" />
-      <path d="M36 29V4H35V29" fill="white" />
-      <path d="M36 13H49L44.55 8.5L49 4H36V13Z" fill={flagColor} />
-    </svg>
-  );
-};

apps/trading/components/competitions/graphics/rank.tsx

@@ -1,110 +0,0 @@
-import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
-import classNames from 'classnames';
-
-export const Rank = ({
-  variant,
-  className,
-}: {
-  variant?: 'gold' | 'silver' | 'bronze';
-  className?: classNames.Argument;
-}) => {
-  const { theme } = useThemeSwitcher();
-  return (
-    <div
-      title={classNames({
-        '1': variant === 'gold',
-        '2': variant === 'silver',
-        '3': variant === 'bronze',
-      })}
-      className={classNames(
-        {
-          'text-yellow-300': variant === 'gold',
-          'text-vega-clight-500': variant === 'silver',
-          'text-vega-orange-500': variant === 'bronze',
-          'text-black dark:text-white': variant === undefined,
-        },
-        className
-      )}
-    >
-      <svg width="18" height="30" viewBox="0 0 18 30" fill="none">
-        <defs>
-          <linearGradient x1="0" y1="0" x2="100%" y2="100%" id="medal">
-            <stop offset="33%" stopColor="transparent" />
-            <stop offset="100%" stopColor="black" stopOpacity="50%" />
-          </linearGradient>
-          <clipPath id="shape">
-            <path d="M2 2H4V4H2V2Z" />
-            <path d="M2 2H4V4H2V2Z" />
-            <path d="M2 2H6V4H2V2Z" />
-            <path d="M2 2H6V4H2V2Z" />
-            <path d="M0 4H4V6H0V4Z" />
-            <path d="M0 4H4V6H0V4Z" />
-            <path d="M4 0H14V2H4V0Z" />
-            <path d="M4 0H14V2H4V0Z" />
-            <path d="M0 14V4H2V14H0Z" />
-            <path d="M0 14V4H2V14H0Z" />
-            <path d="M2 30L2 18H4L4 30H2Z" />
-            <path d="M2 30L2 18H4L4 30H2Z" />
-            <path d="M14 30L14 18H16L16 30H14Z" />
-            <path d="M14 30L14 18H16L16 30H14Z" />
-            <path d="M16 14L16 4H18V14H16Z" />
-            <path d="M16 14L16 4H18V14H16Z" />
-            <path d="M2 6V2H4V6H2Z" />
-            <path d="M2 6V2H4V6H2Z" />
-            <path d="M16 2V6H14V2H16Z" />
-            <path d="M16 2V6H14V2H16Z" />
-            <path d="M12 2H16L16 4H12V2Z" />
-            <path d="M12 2H16L16 4H12V2Z" />
-            <path d="M14 4H18V6H14V4Z" />
-            <path d="M14 4H18V6H14V4Z" />
-            <path d="M16 16H12V14H16V16Z" />
-            <path d="M16 16H12V14H16V16Z" />
-            <path d="M14 18H4L4 16L14 16L14 18Z" />
-            <path d="M14 18H4L4 16L14 16L14 18Z" />
-            <path d="M16 12V16H14V12H16Z" />
-            <path d="M16 12V16H14V12H16Z" />
-            <path d="M6 16H2V14H6V16Z" />
-            <path d="M6 16H2V14H6V16Z" />
-            <path d="M6 28H4L4 26H6V28Z" />
-            <path d="M6 28H4L4 26H6V28Z" />
-            <path d="M8 26H6L6 24H8V26Z" />
-            <path d="M8 26H6L6 24H8V26Z" />
-            <path d="M10 24H8V22H10V24Z" />
-            <path d="M10 24H8V22H10V24Z" />
-            <path d="M12 26H10L10 24H12V26Z" />
-            <path d="M12 26H10L10 24H12V26Z" />
-            <path d="M14 28H12L12 26H14V28Z" />
-            <path d="M14 28H12L12 26H14V28Z" />
-            <path d="M4 14H0L2.04189e-07 12H4V14Z" />
-            <path d="M4 14H0L2.04189e-07 12H4V14Z" />
-            <path d="M6 4H12V14H6V4Z" />
-            <path d="M6 4H12V14H6V4Z" />
-            <path d="M4 6H14V12H4V6Z" />
-            <path d="M4 6H14V12H4V6Z" />
-          </clipPath>
-        </defs>
-        <rect
-          rx="0"
-          ry="0"
-          width="18"
-          height="30"
-          fill="currentColor"
-          clipPath="url(#shape)"
-        />
-        <rect
-          rx="0"
-          ry="0"
-          width="18"
-          height="30"
-          fill="url(#medal)"
-          clipPath="url(#shape)"
-          style={{ mixBlendMode: theme === 'dark' ? 'darken' : 'overlay' }}
-        />
-        <g style={{ mixBlendMode: 'overlay' }}>
-          <path d="M10.5 6H8.5V8H10.5V6Z" fill="white" />
-          <path d="M12.5 8H10.5V10H12.5V8Z" fill="white" />
-        </g>
-      </svg>
-    </div>
-  );
-};

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

@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-
-const NUM_AVATARS = 20;
-const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png';
-
-const getFallbackAvatar = (teamId: string) => {
-  const avatarId = ((parseInt(teamId, 16) % NUM_AVATARS) + 1)
-    .toString()
-    .padStart(2, '0'); // between 01 - 20
-
-  return AVATAR_PATHNAME_PATTERN.replace('{id}', avatarId);
-};
-
-export const TeamAvatar = ({
-  teamId,
-  imgUrl,
-  alt,
-  size = 'large',
-}: {
-  teamId: string;
-  imgUrl: string;
-  alt?: string;
-  size?: 'large' | 'small';
-}) => {
-  const img = imgUrl && imgUrl.length > 0 ? imgUrl : getFallbackAvatar(teamId);
-  return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={img}
-      alt={alt || 'Team avatar'}
-      className={classNames(
-        'rounded-full bg-vega-clight-700 dark:bg-vega-cdark-700 shrink-0',
-        {
-          'w-20 h-20 lg:w-[112px] lg:h-[112px]': size === 'large',
-          'w-10 h-10': size === 'small',
-        }
-      )}
-      referrerPolicy="no-referrer"
-    />
-  );
-};

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

@@ -1,184 +0,0 @@
-import { type ReactNode } from 'react';
-import BigNumber from 'bignumber.js';
-import countBy from 'lodash/countBy';
-import {
-  Pill,
-  VegaIcon,
-  VegaIconNames,
-  Tooltip,
-} from '@vegaprotocol/ui-toolkit';
-import { formatNumberRounded } from '@vegaprotocol/utils';
-import {
-  type TeamStats as ITeamStats,
-  type Member,
-  type TeamGame,
-} from '../../lib/hooks/use-team';
-import { useT } from '../../lib/use-t';
-import { DispatchMetricLabels, type DispatchMetric } from '@vegaprotocol/types';
-
-export const TeamStats = ({
-  stats,
-  members,
-  games,
-}: {
-  stats?: ITeamStats;
-  members?: Member[];
-  games?: TeamGame[];
-}) => {
-  const t = useT();
-  return (
-    <>
-      <StatSection>
-        <StatList>
-          <Stat value={members ? members.length : 0} label={t('Members')} />
-          <Stat
-            value={stats ? stats.totalGamesPlayed : 0}
-            label={t('Total games')}
-            tooltip={t('Total number of games this team has participated in')}
-          />
-          <StatSectionSeparator />
-          <Stat
-            value={
-              stats
-                ? formatNumberRounded(
-                    new BigNumber(stats.totalQuantumVolume),
-                    '1e3'
-                  )
-                : 0
-            }
-            label={t('Total volume')}
-          />
-          <Stat
-            value={
-              stats
-                ? formatNumberRounded(
-                    new BigNumber(stats.totalQuantumRewards),
-                    '1e3'
-                  )
-                : 0
-            }
-            label={t('Rewards paid')}
-            tooltip={'Total amount of rewards paid out to this team in qUSD'}
-          />
-        </StatList>
-      </StatSection>
-      {games && games.length ? (
-        <StatSection>
-          <FavoriteGame games={games} />
-          <StatSectionSeparator />
-          <LatestResults games={games} />
-        </StatSection>
-      ) : null}
-    </>
-  );
-};
-
-const LatestResults = ({ games }: { games: TeamGame[] }) => {
-  const t = useT();
-  const latestGames = games.slice(0, 5);
-
-  return (
-    <dl className="flex flex-col gap-1">
-      <dt className="text-muted text-sm">
-        {t('gameCount', { count: latestGames.length })}
-      </dt>
-      <dd className="flex gap-1">
-        {latestGames.map((game) => {
-          return (
-            <Pill key={game.id} className="text-sm">
-              {t('place', { count: game.team.rank, ordinal: true })}
-            </Pill>
-          );
-        })}
-      </dd>
-    </dl>
-  );
-};
-
-const FavoriteGame = ({ games }: { games: TeamGame[] }) => {
-  const t = useT();
-
-  const rewardMetrics = games.map(
-    (game) => game.team.rewardMetric as DispatchMetric
-  );
-  const count = countBy(rewardMetrics);
-
-  let favoriteMetric = '';
-  let mostOccurances = 0;
-
-  for (const key in count) {
-    if (count[key] > mostOccurances) {
-      favoriteMetric = key;
-      mostOccurances = count[key];
-    }
-  }
-
-  if (!favoriteMetric) return null;
-
-  // rewardMetric is a string, should be typed as DispatchMetric
-  const favoriteMetricLabel =
-    DispatchMetricLabels[favoriteMetric as DispatchMetric];
-
-  return (
-    <dl className="flex flex-col gap-1">
-      <dt className="text-muted text-sm">{t('Favorite game')}</dt>
-      <dd>
-        <Pill className="inline-flex items-center gap-1 bg-transparent text-sm">
-          <VegaIcon
-            name={VegaIconNames.STAR}
-            className="text-vega-yellow-400 relative top-[-1px]"
-          />{' '}
-          {favoriteMetricLabel}
-        </Pill>
-      </dd>
-    </dl>
-  );
-};
-
-const StatSection = ({ children }: { children: ReactNode }) => {
-  return (
-    <section className="flex flex-col lg:flex-row gap-4 lg:gap-8">
-      {children}
-    </section>
-  );
-};
-
-const StatSectionSeparator = () => {
-  return <div className="hidden md:block border-r border-default" />;
-};
-
-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}
-    </dl>
-  );
-};
-
-const Stat = ({
-  value,
-  label,
-  tooltip,
-}: {
-  value: ReactNode;
-  label: ReactNode;
-  tooltip?: string;
-}) => {
-  return (
-    <div>
-      <dd className="text-3xl lg:text-4xl">{value}</dd>
-      <dt className="text-sm text-muted">
-        {tooltip ? (
-          <Tooltip description={tooltip} underline={false}>
-            <span className="flex items-center gap-2">
-              {label}
-              <VegaIcon name={VegaIconNames.INFO} size={12} />
-            </span>
-          </Tooltip>
-        ) : (
-          label
-        )}
-      </dt>
-    </div>
-  );
-};

apps/trading/components/layouts-inner/index.ts

@@ -1,2 +0,0 @@
-export { LayoutWithSky } from './layout-with-sky';
-export { LayoutWithGradient } from './layout-with-gradient';

apps/trading/components/layouts-inner/layout-with-gradient.tsx

@@ -1,14 +0,0 @@
-import { type ReactNode } from 'react';
-
-export const LayoutWithGradient = ({ children }: { children: ReactNode }) => {
-  return (
-    <div className="relative h-full pt-5 overflow-y-auto">
-      <div className="absolute top-0 left-0 w-full h-[40%] -z-10 bg-[40%_0px] bg-cover bg-no-repeat bg-local bg-[url(/cover.png)]">
-        <div className="absolute top-o left-0 w-full h-full bg-gradient-to-t from-white dark:from-vega-cdark-900 to-transparent from-20% to-60%" />
-      </div>
-      <div className="flex flex-col gap-4 lg:gap-6 container p-4 mx-auto">
-        {children}
-      </div>
-    </div>
-  );
-};

apps/trading/components/layouts/index.ts

@@ -1,2 +1 @@
-export { LayoutWithSidebar } from './layout-with-sidebar';
-export { LayoutCentered } from './layout-centered';
+export * from './layout-with-sidebar';

apps/trading/components/navbar/navbar.tsx

@@ -204,13 +204,6 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
             {t('Portfolio')}
           </NavbarLink>
         </NavbarItem>
-        {featureFlags.TEAM_COMPETITION && (
-          <NavbarItem>
-            <NavbarLink to={Links.COMPETITIONS()} onClick={onClick}>
-              {t('Competitions')}
-            </NavbarLink>
-          </NavbarItem>
-        )}
         {featureFlags.REFERRALS && (
           <NavbarItem>
             <NavbarLink end={false} to={Links.REFERRALS()} onClick={onClick}>

apps/trading/components/rainbow-button/index.ts

@@ -1 +0,0 @@
-export { RainbowButton } from './rainbow-button';

apps/trading/components/rainbow-button/rainbow-button.tsx

@@ -1,35 +0,0 @@
-import classNames from 'classnames';
-import { type ButtonHTMLAttributes } from 'react';
-
-type RainbowButtonProps = {
-  variant?: 'full' | 'border';
-};
-
-export const RainbowButton = ({
-  variant = 'full',
-  children,
-  className,
-  ...props
-}: RainbowButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) => (
-  <button
-    className={classNames(
-      'bg-rainbow rounded-lg overflow-hidden disabled:opacity-40',
-      'hover:bg-rainbow-180 hover:animate-spin-rainbow',
-      {
-        'px-5 py-3 text-white': variant === 'full',
-        'p-[0.125rem]': variant === 'border',
-      },
-      className
-    )}
-    {...props}
-  >
-    <div
-      className={classNames({
-        'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
-          variant === 'border',
-      })}
-    >
-      {children}
-    </div>
-  </button>
-);

apps/trading/components/rewards-container/active-rewards.tsx

@@ -309,49 +309,29 @@ export const ActiveRewardCard = ({
       ].includes(m.state)
   );
 
-  const assetInSettledMarket =
-    allMarkets &&
-    Object.values(allMarkets).some((m: MarketFieldsFragment | null) => {
-      if (m && getAsset(m).id === dispatchStrategy.dispatchMetricAssetId) {
-        return (
-          m?.state &&
-          [
-            MarketState.STATE_TRADING_TERMINATED,
-            MarketState.STATE_SETTLED,
-            MarketState.STATE_CANCELLED,
-            MarketState.STATE_CLOSED,
-          ].includes(m.state)
-        );
-      }
-      return false;
-    });
-
   if (marketSettled) {
     return null;
   }
 
-  // Gray out the cards that are related to suspended markets
-  const suspended = transferNode.markets?.some(
+  const assetInActiveMarket =
+    allMarkets &&
+    Object.values(allMarkets).some((m: MarketFieldsFragment | null) => {
+      if (m && getAsset(m).id === dispatchStrategy.dispatchMetricAssetId) {
+        return m?.state && MarketState.STATE_ACTIVE === m.state;
+      }
+      return false;
+    });
+
+  const marketSuspended = 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 } =
-    suspended || assetInSuspendedMarket || assetInSettledMarket
+    marketSuspended || !assetInActiveMarket
       ? {
           gradientClassName: 'from-vega-cdark-500 to-vega-clight-400',
           mainClassName: 'from-vega-cdark-400 dark:from-vega-cdark-600 to-20%',
@@ -437,12 +417,12 @@ export const ActiveRewardCard = ({
           <span>
             {DispatchMetricLabels[dispatchStrategy.dispatchMetric]} •{' '}
             <Tooltip
-              underline={suspended}
+              underline={marketSuspended}
               description={
-                (suspended || assetInSuspendedMarket) &&
+                (marketSuspended || !assetInActiveMarket) &&
                 (specificMarkets
                   ? t('Eligible market(s) currently suspended')
-                  : assetInSuspendedMarket
+                  : !assetInActiveMarket
                   ? t('Currently no markets eligible for reward')
                   : '')
               }