feat: use new limit param for number formatting

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

apps/explorer/src/app/components/assets/assets-table.tsx

@@ -24,7 +24,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
   const navigate = useNavigate();
   const ref = useRef<AgGridReact>(null);
   const showColumnsOnDesktop = () => {
-    ref.current?.columnApi.setColumnsVisible(
+    ref.current?.api.setColumnsVisible(
       ['id', 'type', 'status'],
       window.innerWidth > BREAKPOINT_MD
     );

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

@@ -60,7 +60,7 @@ const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
   }
 
   return (
-    <span className="whitespace-nowrap">
+    <span>
       {useName && <Icon size={4} name="cube" className="mr-2" />}
       <Link
         className="underline font-mono"

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

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

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

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

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

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

apps/explorer/src/app/components/markets/markets-table.tsx

@@ -29,7 +29,7 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
     const showColumnsOnDesktop = () => {
-      gridRef.current?.columnApi.setColumnsVisible(
+      gridRef.current?.api.setColumnsVisible(
         ['id', 'state', 'asset'],
         window.innerWidth > BREAKPOINT_MD
       );

apps/explorer/src/app/components/order-details/deterministic-order-details.tsx

@@ -60,7 +60,7 @@ const DeterministicOrderDetails = ({
   const o = data.orderByID;
   return (
     <div className={wrapperClasses}>
-      <div className="mb-12 lg:mb-0">
+      <div className="mb-0">
         <div className="relative block px-3 py-6 md:px-6 lg:-mr-7">
           <h2 className="text-3xl font-bold mb-4 display-5">
             <abbr title={tifFull[o.timeInForce]} className="bb-dotted mr-2">
@@ -89,9 +89,9 @@ const DeterministicOrderDetails = ({
               <span>{t('Reference')}</span>: {o.reference}
             </p>
           ) : null}
-          <div className="grid md:grid-cols-5 gap-x-6 mt-4">
-            <div className="mb-12 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-4">
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-x-6 mt-4">
+            <div className="mb-6 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
                 {t('Status')}
               </h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0 capitalize">
@@ -99,15 +99,17 @@ const DeterministicOrderDetails = ({
               </h5>
             </div>
 
-            <div className="mb-12 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-4">{t('Size')}</h2>
+            <div className="mb-6 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
+                {t('Size')}
+              </h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0">
                 <SizeInMarket size={o.size} marketId={o.market.id} />
               </h5>
             </div>
 
-            <div className="">
-              <h2 className="text-2xl font-bold text-dark mb-4">
+            <div className="mb-6 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
                 {t('Version')}
               </h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0">
@@ -115,8 +117,8 @@ const DeterministicOrderDetails = ({
               </h5>
             </div>
             {o.type ? (
-              <div className="">
-                <h2 className="text-2xl font-bold text-dark mb-4">
+              <div className="mb-6 md:mb-0">
+                <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
                   {t('Type')}
                 </h2>
                 <h5 className="text-lg font-medium text-gray-500 mb-0">

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -44,11 +44,11 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
     const showColumnsOnDesktop = () => {
-      gridRef.current?.columnApi.setColumnsVisible(
+      gridRef.current?.api.setColumnsVisible(
         ['voting', 'cDate', 'eDate', 'type'],
         window.innerWidth > BREAKPOINT_MD
       );
-      gridRef.current?.columnApi.setColumnWidth(
+      gridRef.current?.api.setColumnWidth(
         'actions',
         window.innerWidth > BREAKPOINT_MD ? 221 : 80
       );

apps/explorer/src/app/components/signature/signature.tsx

@@ -30,12 +30,12 @@ export const Signature = ({ signature }: SignatureProps) => {
 
   return (
     <div className="inline-flex border rounded signature-component relative pr-[20px]">
-      <span
+      <div
         className="bg-gray-100 px-2.5 py-0.5 text-xs text-gray-500 select-none cursor-default"
-        title={`Version ${signature.version}`}
+        title={`${signature.algo}`}
       >
-        {signature.algo}
-      </span>
+        <span>v{signature.version}</span>
+      </div>
       <div
         className={
           isOpen

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

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

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

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

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

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

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

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

apps/explorer/src/app/routes/layout.tsx

@@ -73,7 +73,7 @@ export const Layout = () => {
           <ProtocolUpgradeInProgressNotification />
         </div>
         <div className={fixedWidthClasses}>
-          <main className="p-4">
+          <main className="md:p-4">
             {!isHome && <BreadcrumbsContainer className="mb-4" />}
             <Outlet />
           </main>

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 { ProposalQuery } from '../proposals/proposal/__generated__/Proposal';
+import { type Proposal } from '../proposals/types';
 
 const nodesToShow = 6;
 
@@ -39,7 +39,7 @@ const HomeProposals = ({
   proposals,
   protocolUpgradeProposals,
 }: {
-  proposals: ProposalQuery['proposal'][];
+  proposals: Proposal[];
   protocolUpgradeProposals: ProtocolUpgradeProposalFieldsFragment[];
 }) => {
   const { t } = useTranslation();

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

@@ -1,16 +1,11 @@
 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 ReactNode } from 'react';
+import { type ProposalInfoLabelVariant } from '../proposal-info-label';
+import { type Proposal } from '../../types';
 
-export const CurrentProposalState = ({
-  proposal,
-}: {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
-}) => {
+export const CurrentProposalState = ({ proposal }: { proposal: 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

@@ -1,272 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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

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

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

@@ -6,11 +6,10 @@ import {
   KeyValueTableRow,
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
-import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { type Proposal } from '../../types';
 
 interface ProposalChangeTableProps {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  proposal: 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 { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { MockedResponse } from '@apollo/client/testing';
+import { type MockedResponse } from '@apollo/client/testing';
+import { type Proposal } from '../../types';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ...jest.requireActual('@vegaprotocol/proposals'),
@@ -36,7 +36,7 @@ jest.mock('@vegaprotocol/proposals', () => ({
 }));
 
 const renderComponent = (
-  proposal: ProposalQuery['proposal'],
+  proposal: Proposal,
   isListItem = true,
   mocks: MockedResponse[] = [],
   voteState?: VoteState
@@ -64,6 +64,7 @@ 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',
@@ -102,6 +103,7 @@ describe('Proposal header', () => {
 
   it('Renders Update market proposal', () => {
     renderComponent(
+      // @ts-ignore we aren't using batch yet
       generateProposal({
         rationale: {
           title: 'New market id',
@@ -130,6 +132,7 @@ 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',
@@ -159,6 +162,7 @@ describe('Proposal header', () => {
 
   it('Renders New asset proposal - BuiltInAsset', () => {
     renderComponent(
+      // @ts-ignore we aren't using batch yet
       generateProposal({
         terms: {
           change: {
@@ -184,6 +188,7 @@ describe('Proposal header', () => {
 
   it('Renders Update network', () => {
     renderComponent(
+      // @ts-ignore we aren't using batch yet
       generateProposal({
         rationale: {
           title: 'Network parameter',
@@ -213,6 +218,7 @@ describe('Proposal header', () => {
 
   it('Renders Freeform proposal - short rationale', () => {
     renderComponent(
+      // @ts-ignore we aren't using batch yet
       generateProposal({
         id: 'short',
         rationale: {
@@ -234,6 +240,7 @@ 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: {
@@ -259,6 +266,7 @@ 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: {
@@ -280,6 +288,7 @@ describe('Proposal header', () => {
 
   it('Renders asset change proposal header', () => {
     renderComponent(
+      // @ts-ignore we aren't using batch yet
       generateProposal({
         terms: {
           change: {
@@ -297,6 +306,7 @@ 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: {
@@ -313,6 +323,7 @@ describe('Proposal header', () => {
 
   it('Renders proposal state: Enacted', () => {
     renderComponent(
+      // @ts-ignore we aren't using batch yet
       generateProposal({
         state: ProposalState.STATE_ENACTED,
         terms: {
@@ -325,6 +336,7 @@ describe('Proposal header', () => {
 
   it('Renders proposal state: Passed', () => {
     renderComponent(
+      // @ts-ignore we aren't using batch yet
       generateProposal({
         state: ProposalState.STATE_PASSED,
         terms: {
@@ -338,6 +350,7 @@ 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: {
@@ -352,6 +365,7 @@ 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

@@ -2,8 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Lozenge, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { shorten } from '@vegaprotocol/utils';
 import { Heading, SubHeading } from '../../../../components/heading';
-import type { ReactNode } from 'react';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { type ReactNode } from 'react';
 import { truncateMiddle } from '../../../../lib/truncate-middle';
 import { CurrentProposalState } from '../current-proposal-state';
 import { ProposalInfoLabel } from '../proposal-info-label';
@@ -15,16 +14,17 @@ import {
 import { useFeatureFlags } 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: ProposalQuery['proposal'];
+  proposal: Proposal;
   isListItem?: boolean;
   voteState?: VoteState | null;
 }) => {
@@ -40,7 +40,7 @@ export const ProposalHeader = ({
 
   const titleContent = shorten(title ?? '', 100);
 
-  const getAsset = (proposal: ProposalQuery['proposal']) => {
+  const getAsset = (proposal: 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,5 +1,4 @@
 import { useTranslation } from 'react-i18next';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import {
   KeyValueTable,
   KeyValueTableRow,
@@ -14,9 +13,10 @@ 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: ProposalQuery['proposal'];
+  proposal: Proposal | null;
 }
 
 export const formatEndOfProgramTimestamp = (value: string) => {

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

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

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

@@ -1,6 +1,4 @@
 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';
@@ -21,11 +19,12 @@ import {
   addDecimalsFormatNumberQuantum,
   formatDateWithLocalTimezone,
 } from '@vegaprotocol/utils';
+import { type Proposal } from '../../types';
 
 export const ProposalTransferDetails = ({
   proposal,
 }: {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  proposal: 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,5 +1,4 @@
 import { useTranslation } from 'react-i18next';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import {
   KeyValueTable,
   KeyValueTableRow,
@@ -12,6 +11,7 @@ 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: ProposalQuery['proposal'];
+  proposal: Proposal | null;
 }
 
 /**

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: ProposalQuery['proposal'];
+  proposal: Proposal | null;
 }
 
 export const ProposalUpdateMarketState = ({

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

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import {
   KeyValueTable,
   KeyValueTableRow,
@@ -12,9 +11,10 @@ import {
 } from '../proposal-referral-program-details';
 import { formatNumberPercentage } from '@vegaprotocol/utils';
 import BigNumber from 'bignumber.js';
+import { type Proposal } from '../../types';
 
 interface ProposalReferralProgramDetailsProps {
-  proposal: ProposalQuery['proposal'];
+  proposal: Proposal | null;
 }
 
 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'),
@@ -50,14 +50,14 @@ const vegaWalletConfig: VegaWalletConfig = {
   },
 };
 
-const renderComponent = (proposal: ProposalQuery['proposal']) => {
+const renderComponent = (proposal: IProposal) => {
   render(
     <MemoryRouter>
       <MockedProvider>
         <VegaWalletProvider config={vegaWalletConfig}>
           <Proposal
             restData={{}}
-            proposal={proposal as ProposalQuery['proposal']}
+            proposal={proposal}
             networkParams={mockNetworkParams}
           />
         </VegaWalletProvider>

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

@@ -12,14 +12,13 @@ import { UserVote } from '../vote-details';
 import { ListAsset } from '../list-asset';
 import Routes from '../../../routes';
 import { ProposalMarketData } from '../proposal-market-data';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { MarketInfo } from '@vegaprotocol/markets';
-import type { AssetQuery } from '@vegaprotocol/assets';
+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 {
@@ -28,9 +27,10 @@ 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: ProposalQuery['proposal'];
+  proposal: IProposal;
   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 { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { type Proposal } from '../../types';
 
 const renderComponent = (
-  proposal: ProposalQuery['proposal'],
+  proposal: 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,21 +1,20 @@
+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 { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { type Proposal } from '../../types';
 
 export const ProposalsListItemDetails = ({
   proposal,
 }: {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  proposal: 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 { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { type Proposal } from '../../types';
 
 interface ProposalsListItemProps {
-  proposal?: ProposalQuery['proposal'] | null;
+  proposal?: 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 { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { type Proposal } from '../../types';
 
 const openProposalClosesNextMonth = generateProposal({
   id: 'proposal1',
@@ -63,7 +63,7 @@ const closedProtocolUpgradeProposal = generateProtocolUpgradeProposal({
 });
 
 const renderComponent = (
-  proposals: ProposalQuery['proposal'][],
+  proposals: 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: Array<ProposalQuery['proposal']>;
+  proposals: Proposal[];
   protocolUpgradeProposals: ProtocolUpgradeProposalFieldsFragment[];
   lastBlockHeight?: string;
 }
 
 interface SortedProposalsProps {
-  open: ProposalQuery['proposal'][];
-  closed: ProposalQuery['proposal'][];
+  open: Proposal[];
+  closed: Proposal[];
 }
 
 interface SortedProtocolUpgradeProposalsProps {
@@ -31,7 +31,7 @@ interface SortedProtocolUpgradeProposalsProps {
   closed: ProtocolUpgradeProposalFieldsFragment[];
 }
 
-export const orderByDate = (arr: ProposalQuery['proposal'][]) =>
+export const orderByDate = (arr: Proposal[]) =>
   orderBy(
     arr,
     [
@@ -91,14 +91,10 @@ export const ProposalsList = ({
     );
     return {
       open:
-        initialSorting.open.length > 0
-          ? orderByDate(initialSorting.open as ProposalQuery['proposal'][])
-          : [],
+        initialSorting.open.length > 0 ? orderByDate(initialSorting.open) : [],
       closed:
         initialSorting.closed.length > 0
-          ? orderByDate(
-              initialSorting.closed as ProposalQuery['proposal'][]
-            ).reverse()
+          ? orderByDate(initialSorting.closed).reverse()
           : [],
     };
   }, [proposals]);
@@ -125,9 +121,7 @@ export const ProposalsList = ({
       };
     }, [protocolUpgradeProposals, lastBlockHeight]);
 
-  const filterPredicate = (
-    p: ProposalFieldsFragment | ProposalQuery['proposal']
-  ) =>
+  const filterPredicate = (p: ProposalFieldsFragment | 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 { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { type Proposal } from '../../types';
 
 const rejectedProposalClosesNextWeek = generateProposal({
   id: 'rejected1',
@@ -35,7 +35,7 @@ const rejectedProposalClosedLastMonth = generateProposal({
   },
 });
 
-const renderComponent = (proposals: ProposalQuery['proposal'][]) => (
+const renderComponent = (proposals: 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 { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { type Proposal } from '../../types';
 
 interface ProposalsListProps {
-  proposals: ProposalQuery['proposal'][];
+  proposals: Proposal[];
 }
 
 export const RejectedProposalsList = ({ proposals }: ProposalsListProps) => {
   const { t } = useTranslation();
   const [filterString, setFilterString] = useState('');
 
-  const filterPredicate = (p: ProposalQuery['proposal']) =>
+  const filterPredicate = (p: Proposal) =>
     p?.id?.includes(filterString) ||
     p?.party?.id?.toString().includes(filterString);
 

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

@@ -9,8 +9,7 @@ import {
   nextWeek,
 } from '../../test-helpers/mocks';
 import { CompactVotes, VoteBreakdown } from './vote-breakdown';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { MockedResponse } from '@apollo/client/testing';
+import { type MockedResponse } from '@apollo/client/testing';
 import {
   generateNoVotes,
   generateProposal,
@@ -18,7 +17,8 @@ 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 AppState } from '../../../../contexts/app-state/app-state-context';
+import { type Proposal } from '../../types';
 
 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: ProposalQuery['proposal'],
+  proposal: 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,3 +1,4 @@
+import { type ReactNode } from 'react';
 import classNames from 'classnames';
 import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
@@ -5,10 +6,8 @@ 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
@@ -20,7 +19,7 @@ export const CompactVotes = ({ number }: { number: BigNumber }) => (
 );
 
 interface VoteBreakdownProps {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  proposal: Proposal;
 }
 
 interface VoteProgressProps {

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

@@ -5,14 +5,13 @@ 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, 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';
+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';
 
 interface UserVoteProps {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  proposal: Proposal;
   minVoterBalance: string | null | undefined;
   spamProtectionMinTokens: string | null | undefined;
   transaction: VegaTxState | null;

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

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

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

@@ -2,15 +2,10 @@ 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: ProposalFieldsFragment | ProposalQuery['proposal'];
-}) => {
+export const useVoteInformation = ({ proposal }: { proposal: Proposal }) => {
   const {
     appState: { totalSupply, decimals },
   } = useAppState();

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

@@ -86,230 +86,65 @@ query Proposal(
   $includeUpdateReferralProgram: Boolean!
 ) {
   proposal(id: $proposalId) {
-    id
-    rationale {
-      title
-      description
-    }
-    reference
-    state
-    datetime
-    rejectionReason
-    party {
+    ... on Proposal {
       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
-              }
-            }
-          }
-          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
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
+      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 PerpetualProduct {
-                settlementAsset {
-                  id
-                  name
-                  symbol
-                  decimals
-                  quantum
+              ... on SimpleRiskModel {
+                params {
+                  factorLong
+                  factorShort
                 }
-                quoteName
               }
             }
-          }
-          priceMonitoringParameters {
-            triggers {
-              horizonSecs
-              probability
-              auctionExtensionSecs
-            }
-          }
-          liquidityMonitoringParameters {
-            triggeringRatio
-            targetStakeParameters {
-              timeWindow
-              scalingFactor
-            }
-          }
-          positionDecimalPlaces
-          linearSlippageFactor
-          quadraticSlippageFactor
-        }
-        ... on UpdateMarket {
-          marketId
-          updateMarketConfiguration {
             instrument {
+              name
               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
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
+                ... on FutureProduct {
+                  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
-                  #             }
-                  #           }
-                  #         }
-                  #       }
-                  #     }
-                  #   }
-                  # }
+                  quoteName
                   dataSourceSpecBinding {
                     settlementDataProperty
                     tradingTerminationProperty
                   }
-                }
-                ... on UpdatePerpetualProduct {
-                  quoteName
                   dataSourceSpecForSettlementData {
                     sourceType {
                       ... on DataSourceDefinitionInternal {
@@ -350,14 +185,19 @@ query Proposal(
                       }
                     }
                   }
-                  dataSourceSpecBinding {
-                    settlementDataProperty
-                    settlementScheduleProperty
+                }
+                ... on PerpetualProduct {
+                  settlementAsset {
+                    id
+                    name
+                    symbol
+                    decimals
+                    quantum
                   }
+                  quoteName
                 }
               }
             }
-            metadata
             priceMonitoringParameters {
               triggers {
                 horizonSecs
@@ -372,71 +212,233 @@ query Proposal(
                 scalingFactor
               }
             }
-            riskParameters {
-              ... on UpdateMarketSimpleRiskModel {
-                simple {
-                  factorLong
-                  factorShort
+            positionDecimalPlaces
+            linearSlippageFactor
+            quadraticSlippageFactor
+          }
+          ... 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
+                    }
+                  }
                 }
               }
-              ... on UpdateMarketLogNormalRiskModel {
-                logNormal {
-                  riskAversionParameter
-                  tau
-                  params {
-                    r
-                    sigma
-                    mu
+              metadata
+              priceMonitoringParameters {
+                triggers {
+                  horizonSecs
+                  probability
+                  auctionExtensionSecs
+                }
+              }
+              liquidityMonitoringParameters {
+                triggeringRatio
+                targetStakeParameters {
+                  timeWindow
+                  scalingFactor
+                }
+              }
+              riskParameters {
+                ... on UpdateMarketSimpleRiskModel {
+                  simple {
+                    factorLong
+                    factorShort
+                  }
+                }
+                ... 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,6 +17,7 @@ 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);
@@ -67,6 +68,8 @@ export const ProposalContainer = () => {
     skip: !params.proposalId,
   });
 
+  const proposal = data?.proposal as IProposal;
+
   const successor = useSuccessorMarketProposalDetails(params.proposalId);
 
   const isSuccessor = !!successor?.parentMarketId || !!successor.code;
@@ -79,12 +82,12 @@ export const ProposalContainer = () => {
     },
   } = useFetch(
     `${ENV.rest}governance?proposalId=${
-      data?.proposal?.terms.change.__typename === 'UpdateMarket' &&
-      data?.proposal.terms.change.marketId
+      proposal?.terms.change.__typename === 'UpdateMarket' &&
+      proposal.terms.change.marketId
     }`,
     undefined,
     true,
-    data?.proposal?.terms.change.__typename !== 'UpdateMarket'
+    proposal?.terms.change.__typename !== 'UpdateMarket'
   );
 
   const {
@@ -97,7 +100,7 @@ export const ProposalContainer = () => {
     `${ENV.rest}governances?proposalState=STATE_ENACTED&proposalType=TYPE_UPDATE_MARKET`,
     undefined,
     true,
-    data?.proposal?.terms.change.__typename !== 'UpdateMarket'
+    proposal?.terms.change.__typename !== 'UpdateMarket'
   );
 
   const {
@@ -108,8 +111,8 @@ export const ProposalContainer = () => {
     dataProvider: marketInfoProvider,
     skipUpdates: true,
     variables: {
-      marketId: data?.proposal?.id || '',
-      skip: !data?.proposal?.id,
+      marketId: proposal?.id || '',
+      skip: !proposal?.id,
     },
   });
 
@@ -148,23 +151,22 @@ export const ProposalContainer = () => {
     fetchPolicy: 'network-only',
     variables: {
       assetId:
-        (data?.proposal?.terms.change.__typename === 'NewAsset' &&
-          data?.proposal?.id) ||
-        (data?.proposal?.terms.change.__typename === 'UpdateAsset' &&
-          data.proposal.terms.change.assetId) ||
+        (proposal?.terms.change.__typename === 'NewAsset' && proposal?.id) ||
+        (proposal?.terms.change.__typename === 'UpdateAsset' &&
+          proposal.terms.change.assetId) ||
         '',
     },
     skip: !['NewAsset', 'UpdateAsset'].includes(
-      data?.proposal?.terms?.change?.__typename || ''
+      proposal?.terms?.change?.__typename || ''
     ),
   });
 
   useEffect(() => {
     if (
       previouslyEnactedMarketProposalsRestData &&
-      data?.proposal?.terms.change.__typename === 'UpdateMarket'
+      proposal?.terms.change.__typename === 'UpdateMarket'
     ) {
-      const change = data?.proposal?.terms?.change as { marketId: string };
+      const change = proposal?.terms?.change as { marketId: string };
 
       const filteredProposals =
         // @ts-ignore rest data is not typed
@@ -188,8 +190,8 @@ export const ProposalContainer = () => {
   }, [
     previouslyEnactedMarketProposalsRestData,
     params.proposalId,
-    data?.proposal?.terms.change.__typename,
-    data?.proposal?.terms.change,
+    proposal?.terms.change.__typename,
+    proposal?.terms.change,
   ]);
 
   useEffect(() => {
@@ -242,7 +244,7 @@ export const ProposalContainer = () => {
     >
       {data?.proposal ? (
         <Proposal
-          proposal={data.proposal}
+          proposal={proposal}
           networkParams={networkParams}
           restData={restData}
           marketData={marketData}

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

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

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

@@ -0,0 +1,11 @@
+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

@@ -25,3 +25,4 @@ NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
+NX_TEAM_COMPETITION=true

apps/trading/README.md

@@ -54,3 +54,5 @@ To run the UI automation tests with a mocked API, run:
 ```bash
 yarn nx run trading-e2e:e2e
 ```
+
+To run tests with market sim please read [the readme](e2e/README.md).

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
@@ -72,17 +72,6 @@ export const MarketPage = () => {
     }
   }, [update, lastMarketId, data?.id]);
 
-  const pinnedAsset = data && getAsset(data);
-
-  const tradeView = useMemo(() => {
-    if (pinnedAsset) {
-      if (largeScreen) {
-        return <TradeGrid market={data} pinnedAsset={pinnedAsset} />;
-      }
-      return <TradePanels market={data} pinnedAsset={pinnedAsset} />;
-    }
-  }, [largeScreen, data, pinnedAsset]);
-
   if (loading) {
     return (
       <Splash>
@@ -118,6 +107,8 @@ export const MarketPage = () => {
     );
   }
 
+  const pinnedAsset = data && getAsset(data);
+
   return (
     <>
       <TitleUpdater
@@ -125,7 +116,11 @@ export const MarketPage = () => {
         marketName={data?.tradableInstrument.instrument.name}
         decimalPlaces={data?.decimalPlaces}
       />
-      {tradeView}
+      {largeScreen ? (
+        <TradeGrid market={data} pinnedAsset={pinnedAsset} />
+      ) : (
+        <TradePanels market={data} pinnedAsset={pinnedAsset} />
+      )}
     </>
   );
 };

apps/trading/client-pages/market/trade-grid.tsx

@@ -1,11 +1,10 @@
-import { memo } from 'react';
-import type { ReactNode } from 'react';
+import { memo, type ReactNode } from 'react';
 import { LayoutPriority } from 'allotment';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import type { PinnedAsset } from '@vegaprotocol/accounts';
-import { OracleBanner, useMarket } from '@vegaprotocol/markets';
-import type { Market } from '@vegaprotocol/markets';
+import { useFeatureFlags } from '@vegaprotocol/environment';
+import { type PinnedAsset } from '@vegaprotocol/accounts';
+import { type Market } from '@vegaprotocol/markets';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import {
   ResizableGrid,
@@ -13,31 +12,19 @@ import {
   usePaneLayout,
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
-import {
-  MarketSuccessorBanner,
-  MarketSuccessorProposalBanner,
-  MarketTerminationBanner,
-} from '../../components/market-banner';
-import { useFeatureFlags } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { MarketBanner } from '../../components/market-banner';
 
 interface TradeGridProps {
-  market: Market | null;
-  pinnedAsset?: PinnedAsset;
+  market: Market;
+  pinnedAsset?: PinnedAsset | undefined;
 }
 
 const MainGrid = memo(
-  ({
-    marketId,
-    pinnedAsset,
-  }: {
-    marketId: string;
-    pinnedAsset?: PinnedAsset;
-  }) => {
+  ({ market, pinnedAsset }: { market: Market; pinnedAsset?: PinnedAsset }) => {
     const featureFlags = useFeatureFlags((state) => state.flags);
     const t = useT();
-    const { data: market } = useMarket(marketId);
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
       id: 'middle-1',
@@ -65,17 +52,17 @@ const MainGrid = memo(
                     menu={<TradingViews.chart.menu />}
                   >
                     <ErrorBoundary feature="chart">
-                      <TradingViews.chart.component marketId={marketId} />
+                      <TradingViews.chart.component marketId={market.id} />
                     </ErrorBoundary>
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
                     <ErrorBoundary feature="depth">
-                      <TradingViews.depth.component marketId={marketId} />
+                      <TradingViews.depth.component marketId={market.id} />
                     </ErrorBoundary>
                   </Tab>
                   <Tab id="liquidity" name={t('Liquidity')}>
                     <ErrorBoundary feature="liquidity">
-                      <TradingViews.liquidity.component marketId={marketId} />
+                      <TradingViews.liquidity.component marketId={market.id} />
                     </ErrorBoundary>
                   </Tab>
                   {market &&
@@ -83,17 +70,21 @@ const MainGrid = memo(
                     'Perpetual' ? (
                     <Tab id="funding-history" name={t('Funding history')}>
                       <ErrorBoundary feature="funding-history">
-                        <TradingViews.funding.component marketId={marketId} />
+                        <TradingViews.funding.component marketId={market.id} />
                       </ErrorBoundary>
                     </Tab>
                   ) : null}
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
-                    <Tab id="funding-payments" name={t('Funding payments')}>
+                    <Tab
+                      id="funding-payments"
+                      name={t('Funding payments')}
+                      settings={<TradingViews.fundingPayments.settings />}
+                    >
                       <ErrorBoundary feature="funding-payments">
                         <TradingViews.fundingPayments.component
-                          marketId={marketId}
+                          marketId={market.id}
                         />
                       </ErrorBoundary>
                     </Tab>
@@ -109,12 +100,16 @@ const MainGrid = memo(
                 <Tabs storageKey="console-trade-grid-main-right">
                   <Tab id="orderbook" name={t('Orderbook')}>
                     <ErrorBoundary feature="orderbook">
-                      <TradingViews.orderbook.component marketId={marketId} />
+                      <TradingViews.orderbook.component marketId={market.id} />
                     </ErrorBoundary>
                   </Tab>
-                  <Tab id="trades" name={t('Trades')}>
+                  <Tab
+                    id="trades"
+                    name={t('Trades')}
+                    settings={<TradingViews.trades.settings />}
+                  >
                     <ErrorBoundary feature="trades">
-                      <TradingViews.trades.component marketId={marketId} />
+                      <TradingViews.trades.component marketId={market.id} />
                     </ErrorBoundary>
                   </Tab>
                 </Tabs>
@@ -133,6 +128,7 @@ const MainGrid = memo(
                 id="positions"
                 name={t('Positions')}
                 menu={<TradingViews.positions.menu />}
+                settings={<TradingViews.positions.settings />}
               >
                 <ErrorBoundary feature="positions">
                   <TradingViews.positions.component />
@@ -142,17 +138,26 @@ const MainGrid = memo(
                 id="open-orders"
                 name={t('Open')}
                 menu={<TradingViews.activeOrders.menu />}
+                settings={<TradingViews.activeOrders.settings />}
               >
                 <ErrorBoundary feature="activeOrders">
                   <TradingViews.activeOrders.component />
                 </ErrorBoundary>
               </Tab>
-              <Tab id="closed-orders" name={t('Closed')}>
+              <Tab
+                id="closed-orders"
+                name={t('Closed')}
+                settings={<TradingViews.closedOrders.settings />}
+              >
                 <ErrorBoundary feature="closedOrders">
                   <TradingViews.closedOrders.component />
                 </ErrorBoundary>
               </Tab>
-              <Tab id="rejected-orders" name={t('Rejected')}>
+              <Tab
+                id="rejected-orders"
+                name={t('Rejected')}
+                settings={<TradingViews.rejectedOrders.settings />}
+              >
                 <ErrorBoundary feature="rejectedOrders">
                   <TradingViews.rejectedOrders.component />
                 </ErrorBoundary>
@@ -161,25 +166,35 @@ const MainGrid = memo(
                 id="orders"
                 name={t('All')}
                 menu={<TradingViews.orders.menu />}
+                settings={<TradingViews.orders.settings />}
               >
                 <ErrorBoundary feature="orders">
                   <TradingViews.orders.component />
                 </ErrorBoundary>
               </Tab>
               {featureFlags.STOP_ORDERS ? (
-                <Tab id="stop-orders" name={t('Stop orders')}>
+                <Tab
+                  id="stop-orders"
+                  name={t('Stop orders')}
+                  settings={<TradingViews.stopOrders.settings />}
+                >
                   <ErrorBoundary feature="stop-orders">
                     <TradingViews.stopOrders.component />
                   </ErrorBoundary>
                 </Tab>
               ) : null}
-              <Tab id="fills" name={t('Fills')}>
+              <Tab
+                id="fills"
+                name={t('Fills')}
+                settings={<TradingViews.fills.settings />}
+              >
                 <TradingViews.fills.component />
               </Tab>
               <Tab
                 id="accounts"
                 name={t('Collateral')}
                 menu={<TradingViews.collateral.menu />}
+                settings={<TradingViews.collateral.settings />}
               >
                 <ErrorBoundary feature="collateral">
                   <TradingViews.collateral.component
@@ -197,7 +212,6 @@ const MainGrid = memo(
 MainGrid.displayName = 'MainGrid';
 
 export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const wrapperClasses = classNames(
     'h-full grid',
     'grid-rows-[min-content_1fr]'
@@ -206,17 +220,10 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        {featureFlags.SUCCESSOR_MARKETS && (
-          <>
-            <MarketSuccessorBanner market={market} />
-            <MarketSuccessorProposalBanner marketId={market?.id} />
-          </>
-        )}
-        <MarketTerminationBanner market={market} />
-        <OracleBanner marketId={market?.id || ''} />
+        <MarketBanner market={market} />
       </div>
       <div className="min-h-0 p-0.5">
-        <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
+        <MainGrid market={market} pinnedAsset={pinnedAsset} />
       </div>
     </div>
   );

apps/trading/client-pages/market/trade-panels.tsx

@@ -1,29 +1,30 @@
 import { type PinnedAsset } from '@vegaprotocol/accounts';
 import { type Market } from '@vegaprotocol/markets';
-import { OracleBanner } from '@vegaprotocol/markets';
+// TODO: handle oracle banner
+// import { OracleBanner } from '@vegaprotocol/markets';
 import { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useT } from '../../lib/use-t';
 import {
-  MarketSuccessorBanner,
-  MarketSuccessorProposalBanner,
-  MarketTerminationBanner,
-} from '../../components/market-banner';
+  Popover,
+  Splash,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import { useT } from '../../lib/use-t';
+import { MarketBanner } from '../../components/market-banner';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { type TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
-import { useFeatureFlags } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
-  market: Market | null;
+  market: Market;
   pinnedAsset?: PinnedAsset;
 }
 
 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const [view, setView] = useState<TradingView>('chart');
+  const viewCfg = TradingViews[view];
 
   const renderView = () => {
     const Component = TradingViews[view].component;
@@ -44,35 +45,36 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
   };
 
   const renderMenu = () => {
-    const viewCfg = TradingViews[view];
-
-    if ('menu' in viewCfg) {
-      const Menu = viewCfg.menu;
-
+    if ('menu' in viewCfg || 'settings' in viewCfg) {
       return (
         <div className="flex items-center justify-end gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          <Menu />
+          {'menu' in viewCfg ? <viewCfg.menu /> : null}
+          {'settings' in viewCfg ? (
+            <Popover
+              align="end"
+              trigger={
+                <span className="ml-1 flex items-center justify-center h-6 w-6">
+                  <VegaIcon name={VegaIconNames.COG} size={16} />
+                </span>
+              }
+            >
+              <div className="p-4 flex justify-end">
+                <viewCfg.settings />
+              </div>
+            </Popover>
+          ) : null}
         </div>
       );
     }
-
-    return null;
   };
 
   return (
     <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
       <div>
-        {featureFlags.SUCCESSOR_MARKETS && (
-          <>
-            <MarketSuccessorBanner market={market} />
-            <MarketSuccessorProposalBanner marketId={market?.id} />
-          </>
-        )}
-        <MarketTerminationBanner market={market} />
-        <OracleBanner marketId={market?.id || ''} />
+        <MarketBanner market={market} />
       </div>
       <div>{renderMenu()}</div>
-      <div className="h-full">
+      <div className="h-full relative">
         <AutoSizer>
           {({ width, height }) => (
             <div style={{ width, height }} className="overflow-auto">
@@ -110,7 +112,9 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
                 key={key}
                 view={key}
                 isActive={isActive}
-                onClick={() => setView(key)}
+                onClick={() => {
+                  setView(key);
+                }}
               />
             );
           })}

apps/trading/client-pages/market/trade-views.tsx

@@ -1,15 +1,36 @@
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
-import { TradesContainer } from '../../components/trades-container';
+import {
+  TradesContainer,
+  TradesSettings,
+} from '../../components/trades-container';
 import { OrderbookContainer } from '../../components/orderbook-container';
-import { FillsContainer } from '../../components/fills-container';
-import { PositionsContainer } from '../../components/positions-container';
-import { AccountsContainer } from '../../components/accounts-container';
+import {
+  FillsContainer,
+  FillsSettings,
+} from '../../components/fills-container';
+import {
+  PositionsContainer,
+  PositionsSettings,
+} from '../../components/positions-container';
+import {
+  AccountsContainer,
+  AccountsSettings,
+} from '../../components/accounts-container';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import { FundingContainer } from '../../components/funding-container';
-import { FundingPaymentsContainer } from '../../components/funding-payments-container';
-import { OrdersContainer } from '../../components/orders-container';
-import { StopOrdersContainer } from '../../components/stop-orders-container';
+import {
+  FundingPaymentsContainer,
+  FundingPaymentsSettings,
+} from '../../components/funding-payments-container';
+import {
+  OrdersContainer,
+  OrdersSettings,
+} from '../../components/orders-container';
+import {
+  StopOrdersContainer,
+  StopOrdersSettings,
+} from '../../components/stop-orders-container';
 import { AccountsMenu } from '../../components/accounts-menu';
 import { PositionsMenu } from '../../components/positions-menu';
 import { ChartContainer, ChartMenu } from '../../components/chart-container';
@@ -32,37 +53,46 @@ export const TradingViews = {
   },
   fundingPayments: {
     component: FundingPaymentsContainer,
+    settings: FundingPaymentsSettings,
   },
   orderbook: {
     component: OrderbookContainer,
   },
   trades: {
     component: TradesContainer,
+    settings: TradesSettings,
   },
   positions: {
     component: PositionsContainer,
     menu: PositionsMenu,
+    settings: PositionsSettings,
   },
   activeOrders: {
     component: () => <OrdersContainer filter={Filter.Open} />,
     menu: OpenOrdersMenu,
+    settings: () => <OrdersSettings filter={Filter.Open} />,
   },
   closedOrders: {
     component: () => <OrdersContainer filter={Filter.Closed} />,
+    settings: () => <OrdersSettings filter={Filter.Closed} />,
   },
   rejectedOrders: {
     component: () => <OrdersContainer filter={Filter.Rejected} />,
+    settings: () => <OrdersSettings filter={Filter.Rejected} />,
   },
   orders: {
     component: OrdersContainer,
     menu: OpenOrdersMenu,
+    settings: OrdersSettings,
   },
   stopOrders: {
     component: StopOrdersContainer,
+    settings: StopOrdersSettings,
   },
   collateral: {
     component: AccountsContainer,
     menu: AccountsMenu,
+    settings: AccountsSettings,
   },
-  fills: { component: FillsContainer },
+  fills: { component: FillsContainer, settings: FillsSettings },
 } as const;

apps/trading/client-pages/markets/market-list-table.tsx

@@ -42,7 +42,7 @@ export const createDataGridSlice: StateCreator<DataGridSlice> = (set) => ({
   },
 });
 
-const useMarketsStore = create<DataGridSlice>()(
+export const useMarketsStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_market_list_store',
   })

apps/trading/client-pages/markets/markets-page.tsx

@@ -16,6 +16,7 @@ import {
 } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { MarketsSettings } from './markets-settings';
 
 export const MarketsPage = () => {
   const t = useT();
@@ -34,7 +35,11 @@ export const MarketsPage = () => {
     <div className="h-full pt-0.5 pb-3 px-1.5">
       <div className="h-full my-1 border rounded-sm border-default">
         <Tabs storageKey="console-markets">
-          <Tab id="open-markets" name={t('Open markets')}>
+          <Tab
+            id="open-markets"
+            name={t('Open markets')}
+            settings={<MarketsSettings />}
+          >
             <ErrorBoundary feature="markets-open">
               <OpenMarkets />
             </ErrorBoundary>
@@ -42,6 +47,7 @@ export const MarketsPage = () => {
           <Tab
             id="proposed-markets"
             name={t('Proposed markets')}
+            settings={<MarketsSettings />}
             menu={
               <TradingAnchorButton
                 size="extra-small"
@@ -56,7 +62,11 @@ export const MarketsPage = () => {
               <Proposed />
             </ErrorBoundary>
           </Tab>
-          <Tab id="closed-markets" name={t('Closed markets')}>
+          <Tab
+            id="closed-markets"
+            name={t('Closed markets')}
+            settings={<MarketsSettings />}
+          >
             <ErrorBoundary feature="markets-closed">
               <Closed />
             </ErrorBoundary>

apps/trading/client-pages/markets/markets-settings.tsx

@@ -0,0 +1,8 @@
+import { GridSettings } from '../../components/grid-settings/grid-settings';
+import { useMarketsStore } from './market-list-table';
+
+export const MarketsSettings = () => (
+  <GridSettings
+    updateGridStore={useMarketsStore((store) => store.updateGridStore)}
+  />
+);

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

@@ -5,14 +5,29 @@ import { titlefy } from '@vegaprotocol/utils';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
-import { AccountsContainer } from '../../components/accounts-container';
+import {
+  AccountsContainer,
+  AccountsSettings,
+} from '../../components/accounts-container';
 import { DepositsContainer } from '../../components/deposits-container';
-import { FillsContainer } from '../../components/fills-container';
-import { FundingPaymentsContainer } from '../../components/funding-payments-container';
-import { PositionsContainer } from '../../components/positions-container';
+import {
+  FillsContainer,
+  FillsSettings,
+} from '../../components/fills-container';
+import {
+  FundingPaymentsContainer,
+  FundingPaymentsSettings,
+} from '../../components/funding-payments-container';
+import {
+  PositionsContainer,
+  PositionsSettings,
+} from '../../components/positions-container';
 import { PositionsMenu } from '../../components/positions-menu';
 import { WithdrawalsContainer } from '../../components/withdrawals-container';
-import { OrdersContainer } from '../../components/orders-container';
+import {
+  OrdersContainer,
+  OrdersSettings,
+} from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
 import {
   ResizableGrid,
@@ -76,22 +91,27 @@ export const Portfolio = () => {
                 id="positions"
                 name={t('Positions')}
                 menu={<PositionsMenu />}
+                settings={<PositionsSettings />}
               >
                 <ErrorBoundary feature="portfolio-positions">
                   <PositionsContainer allKeys />
                 </ErrorBoundary>
               </Tab>
-              <Tab id="orders" name={t('Orders')}>
+              <Tab id="orders" name={t('Orders')} settings={<OrdersSettings />}>
                 <ErrorBoundary feature="portfolio-orders">
                   <OrdersContainer />
                 </ErrorBoundary>
               </Tab>
-              <Tab id="fills" name={t('Fills')}>
+              <Tab id="fills" name={t('Fills')} settings={<FillsSettings />}>
                 <ErrorBoundary feature="portfolio-fills">
                   <FillsContainer />
                 </ErrorBoundary>
               </Tab>
-              <Tab id="funding-payments" name={t('Funding payments')}>
+              <Tab
+                id="funding-payments"
+                name={t('Funding payments')}
+                settings={<FundingPaymentsSettings />}
+              >
                 <ErrorBoundary feature="portfolio-funding-payments">
                   <FundingPaymentsContainer />
                 </ErrorBoundary>
@@ -114,6 +134,7 @@ export const Portfolio = () => {
               <Tab
                 id="collateral"
                 name={t('Collateral')}
+                settings={<AccountsSettings />}
                 menu={<AccountsMenu />}
               >
                 <ErrorBoundary feature="portfolio-accounts">

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

@@ -296,7 +296,7 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
     <>
       <div
         data-testid="referral-apply-code-form"
-        className="bg-vega-clight-800 dark:bg-vega-cdark-800 mx-auto w-2/3 max-w-md rounded-lg p-8"
+        className="bg-vega-clight-800 dark:bg-vega-cdark-800 mx-auto md:w-2/3 max-w-md rounded-lg p-8"
       >
         <h3 className="calt mb-4 text-center text-2xl">
           {t('Apply a referral code')}

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

@@ -3,7 +3,7 @@ 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-[40%_0px] bg-[length:1440px] bg-no-repeat bg-local';
+  '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 =

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

@@ -49,7 +49,7 @@ export const CreateCodeForm = () => {
   return (
     <div
       data-testid="referral-create-code-form"
-      className="w-2/3 max-w-md mx-auto bg-vega-clight-800 dark:bg-vega-cdark-800 p-8 rounded-lg"
+      className="md:w-2/3 max-w-md mx-auto bg-vega-clight-800 dark:bg-vega-cdark-800 p-8 rounded-lg"
     >
       <h3 className="mb-4 text-2xl text-center calt">
         {t('Create a referral code')}

apps/trading/client-pages/referrals/how-it-works-table.tsx

@@ -1,5 +1,5 @@
 import { useT } from '../../lib/use-t';
-import { Table } from './table';
+import { Table } from '../../components/table';
 
 export const HowItWorksTable = () => {
   const t = useT();

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

@@ -5,16 +5,16 @@ import { useT } from '../../lib/use-t';
 export const LandingBanner = () => {
   const t = useT();
   return (
-    <div className={classNames('relative mb-20')}>
+    <div className={classNames('relative mb-10 lg:mb-20')}>
       <div className="">
         <div
           aria-hidden
-          className="absolute top-20 right-[120px] md:right-[240px] max-sm:hidden"
+          className="absolute top-20 right-[220px] md:right-[240px] max-sm:hidden"
         >
           <AnimatedDudeWithWire />
         </div>
-        <div className="pt-20 sm:w-[50%]">
-          <h1 className="text-6xl font-alpha calt mb-10">
+        <div className="pt-10 lg:pt-20 sm:w-[50%]">
+          <h1 className="text-3xl _text-[6vw] lg:!text-6xl leading-[1em] font-alpha calt mb-10">
             {t('Vega community referrals')}
           </h1>
           <p className="text-lg mb-1">
@@ -22,7 +22,7 @@ export const LandingBanner = () => {
               'Referral programs can be proposed and created via community governance.'
             )}
           </p>
-          <p className="text-lg mb-10">
+          <p className="text-lg mb-1">
             {t(
               'Once live, users can generate referral codes to share with their friends and earn commission on their trades, while referred traders can access fee discounts based on the running volume of the group.'
             )}

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

@@ -13,7 +13,7 @@ export const Layout = ({
     <div
       className={classNames(
         'max-w-[1440px]',
-        'mx-auto px-16 md:px-32 pb-32',
+        'mx-auto px-4 lg:px-32 pb-32',
         'relative z-0',
         className
       )}

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

@@ -14,7 +14,7 @@ import {
   useUpdateReferees,
 } from './hooks/use-referral';
 import classNames from 'classnames';
-import { Table } from './table';
+import { Table } from '../../components/table';
 import {
   addDecimalsFormatNumber,
   getDateFormat,

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

@@ -72,7 +72,7 @@ export const Referrals = () => {
       {showNav && <Nav />}
       <div
         className={classNames({
-          'py-16': showNav,
+          'py-8 lg:py-16': showNav,
           'h-[300px] relative': loading || error,
         })}
       >

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

@@ -3,11 +3,12 @@ import {
   getDateTimeFormat,
 } from '@vegaprotocol/utils';
 import { useReferralProgram } from './hooks/use-referral-program';
-import { Table } from './table';
+import { Table } from '../../components/table';
 import classNames from 'classnames';
 import { BORDER_COLOR, GRADIENT } from './constants';
-import { Tag } from './tag';
-import type { ComponentProps, ReactNode } from 'react';
+import { Tag } from '../../components/helpers/tag';
+import { getTierColor, getTierGradient } from '../../components/helpers/tiers';
+import type { ReactNode } from 'react';
 import { ExternalLink, truncateMiddle } from '@vegaprotocol/ui-toolkit';
 import {
   DApp,
@@ -19,25 +20,6 @@ import {
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
 
-// rainbow-ish order
-const TIER_COLORS: Array<ComponentProps<typeof Tag>['color']> = [
-  'pink',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'purple',
-];
-
-const getTierColor = (tier: number) => {
-  const tiers = Object.keys(TIER_COLORS).length;
-  let index = Math.abs(tier - 1);
-  if (tier >= tiers) {
-    index = index % tiers;
-  }
-  return TIER_COLORS[index];
-};
-
 const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
   <div
     className={classNames(
@@ -53,10 +35,12 @@ const StakingTier = ({
   tier,
   referralRewardMultiplier,
   minimumStakedTokens,
+  max,
 }: {
   tier: number;
   referralRewardMultiplier: string;
   minimumStakedTokens: string;
+  max?: number;
 }) => {
   const t = useT();
   const minimum = addDecimalsFormatNumber(minimumStakedTokens, 18);
@@ -97,7 +81,7 @@ const StakingTier = ({
         )}
       >
         <div>
-          <Tag color={getTierColor(tier)}>
+          <Tag color={getTierColor(tier, max)}>
             {t('Multiplier')} {referralRewardMultiplier}x
           </Tag>
           <p className="mt-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
@@ -159,7 +143,9 @@ export const TiersContainer = () => {
 
   return (
     <>
-      <h2 className="text-3xl mt-10">{t('Current program details')}</h2>
+      <h2 className="text-3xl mt-10 font-alpha calt">
+        {t('Current program details')}
+      </h2>
       {details?.id && (
         <p>
           <Trans
@@ -198,7 +184,18 @@ export const TiersContainer = () => {
       </div>
 
       {/* Container */}
-      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20">
+      <div
+        className={classNames(
+          'md:bg-vega-clight-800',
+          'md:dark:bg-vega-cdark-800',
+          'md:text-black',
+          'md:dark:text-white',
+          'md:rounded-lg',
+          'md:p-6',
+          'mt-1',
+          'mb-20'
+        )}
+      >
         {/* Benefit tiers */}
         <div className="flex flex-col mb-5">
           <h3 className="text-2xl calt">{t('Benefit tiers')}</h3>
@@ -261,6 +258,7 @@ const StakingTiers = ({
       <StakingTier
         key={i}
         tier={tier}
+        max={data.length}
         referralRewardMultiplier={referralRewardMultiplier}
         minimumStakedTokens={minimumStakedTokens}
       />
@@ -322,22 +320,7 @@ const TiersTable = ({
       className="bg-white dark:bg-vega-cdark-900"
       data={data.map((d) => ({
         ...d,
-        className: classNames({
-          'from-vega-yellow-400 dark:from-vega-yellow-600 to-20%  bg-highlight':
-            'yellow' === getTierColor(d.tier),
-          'from-vega-green-400 dark:from-vega-green-600 to-20%  bg-highlight':
-            'green' === getTierColor(d.tier),
-          'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
-            'blue' === getTierColor(d.tier),
-          'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
-            'purple' === getTierColor(d.tier),
-          'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-            'pink' === getTierColor(d.tier),
-          'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-            'orange' === getTierColor(d.tier),
-          'from-vega-clight-200 dark:from-vega-cdark-200 to-20%  bg-highlight':
-            'none' === getTierColor(d.tier),
-        }),
+        className: classNames(getTierGradient(d.tier, data.length)),
       }))}
     />
   );

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

@@ -19,9 +19,11 @@ export const Tile = ({
   return (
     <div
       className={classNames(
-        'rounded-lg overflow-hidden relative',
-        'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white',
-        'p-6',
+        'text-black dark:text-white',
+        'overflow-hidden relative',
+        'p-3 md:p-6',
+        'rounded-lg',
+        'bg-vega-clight-800 dark:bg-vega-cdark-800',
         className
       )}
     >
@@ -55,7 +57,10 @@ export const StatTile = ({
       >
         {title}
       </h3>
-      <div data-testid={`${testId}-value`} className="text-5xl text-left">
+      <div
+        data-testid={`${testId}-value`}
+        className="text-2xl lg:text-5xl text-left"
+      >
         {children}
       </div>
       {description && (
@@ -119,7 +124,7 @@ export const CodeTile = ({
         >
           <div
             className={classNames(
-              'relative bg-rainbow bg-clip-text text-transparent text-5xl overflow-hidden',
+              'relative bg-rainbow bg-clip-text text-transparent text-2xl lg:text-5xl overflow-hidden',
               FADE_OUT_STYLE
             )}
           >

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

@@ -4,6 +4,7 @@ import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
 import { usePageTitleStore } from '../../stores';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 
 export const Rewards = () => {
   const t = useT();
@@ -16,10 +17,10 @@ export const Rewards = () => {
   }, [updateTitle, title]);
   return (
     <ErrorBoundary feature="rewards">
-      <div className="container mx-auto p-4">
+      <TinyScroll className="p-4 max-h-full overflow-auto">
         <h1 className="px-4 pb-4 text-2xl">{title}</h1>
         <RewardsContainer />
-      </div>
+      </TinyScroll>
     </ErrorBoundary>
   );
 };

apps/trading/client-pages/team/Team.graphql

@@ -0,0 +1,89 @@
+fragment TeamFields on Team {
+  teamId
+  referrer
+  name
+  teamUrl
+  avatarUrl
+  createdAt
+  createdAtEpoch
+  closed
+}
+
+fragment TeamStatsFields on TeamStatistics {
+  teamId
+  totalQuantumVolume
+  totalQuantumRewards
+  totalGamesPlayed
+  quantumRewards {
+    epoch
+    total_quantum_rewards
+  }
+  gamesPlayed
+}
+
+fragment TeamRefereeFields on TeamReferee {
+  teamId
+  referee
+  joinedAt
+  joinedAtEpoch
+}
+
+fragment TeamEntity on TeamGameEntity {
+  rank
+  volume
+  rewardMetric
+  rewardEarned
+  totalRewardsEarned
+  team {
+    teamId
+  }
+}
+
+fragment TeamGameFields on Game {
+  id
+  epoch
+  numberOfParticipants
+  entities {
+    ... on TeamGameEntity {
+      ...TeamEntity
+    }
+  }
+}
+
+query Team($teamId: ID!, $partyId: ID) {
+  teams(teamId: $teamId) {
+    edges {
+      node {
+        ...TeamFields
+      }
+    }
+  }
+  partyTeams: teams(partyId: $partyId) {
+    edges {
+      node {
+        ...TeamFields
+      }
+    }
+  }
+  teamsStatistics(teamId: $teamId) {
+    edges {
+      node {
+        ...TeamStatsFields
+      }
+    }
+  }
+  teamReferees(teamId: $teamId) {
+    edges {
+      node {
+        ...TeamRefereeFields
+      }
+    }
+  }
+  games(entityScope: ENTITY_SCOPE_TEAMS) {
+    edges {
+      node {
+        ...TeamGameFields
+      }
+    }
+  }
+}

apps/trading/client-pages/team/__generated__/Team.ts

@@ -0,0 +1,151 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type TeamFieldsFragment = { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean };
+
+export type TeamStatsFieldsFragment = { __typename?: 'TeamStatistics', teamId: string, totalQuantumVolume: string, totalQuantumRewards: string, totalGamesPlayed: number, gamesPlayed: Array<string>, quantumRewards: Array<{ __typename?: 'QuantumRewardsPerEpoch', epoch: number, total_quantum_rewards: string }> };
+
+export type TeamRefereeFieldsFragment = { __typename?: 'TeamReferee', teamId: string, referee: string, joinedAt: any, joinedAtEpoch: number };
+
+export type TeamEntityFragment = { __typename?: 'TeamGameEntity', rank: number, volume: string, rewardMetric: string, rewardEarned: string, totalRewardsEarned: string, team: { __typename?: 'TeamParticipation', teamId: string } };
+
+export type TeamGameFieldsFragment = { __typename?: 'Game', id: string, epoch: number, numberOfParticipants: number, entities: Array<{ __typename?: 'IndividualGameEntity' } | { __typename?: 'TeamGameEntity', rank: number, volume: string, rewardMetric: string, rewardEarned: string, totalRewardsEarned: string, team: { __typename?: 'TeamParticipation', teamId: string } }> };
+
+export type TeamQueryVariables = Types.Exact<{
+  teamId: Types.Scalars['ID'];
+  partyId?: Types.InputMaybe<Types.Scalars['ID']>;
+}>;
+
+
+export type TeamQuery = { __typename?: 'Query', teams?: { __typename?: 'TeamConnection', edges: Array<{ __typename?: 'TeamEdge', node: { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean } }> } | null, partyTeams?: { __typename?: 'TeamConnection', edges: Array<{ __typename?: 'TeamEdge', node: { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean } }> } | null, teamsStatistics?: { __typename?: 'TeamsStatisticsConnection', edges: Array<{ __typename?: 'TeamStatisticsEdge', node: { __typename?: 'TeamStatistics', teamId: string, totalQuantumVolume: string, totalQuantumRewards: string, totalGamesPlayed: number, gamesPlayed: Array<string>, quantumRewards: Array<{ __typename?: 'QuantumRewardsPerEpoch', epoch: number, total_quantum_rewards: string }> } }> } | null, teamReferees?: { __typename?: 'TeamRefereeConnection', edges: Array<{ __typename?: 'TeamRefereeEdge', node: { __typename?: 'TeamReferee', teamId: string, referee: string, joinedAt: any, joinedAtEpoch: number } }> } | null, games: { __typename?: 'GamesConnection', edges?: Array<{ __typename?: 'GameEdge', node: { __typename?: 'Game', id: string, epoch: number, numberOfParticipants: number, entities: Array<{ __typename?: 'IndividualGameEntity' } | { __typename?: 'TeamGameEntity', rank: number, volume: string, rewardMetric: string, rewardEarned: string, totalRewardsEarned: string, team: { __typename?: 'TeamParticipation', teamId: string } }> } } | null> | null } };
+
+export const TeamFieldsFragmentDoc = gql`
+    fragment TeamFields on Team {
+  teamId
+  referrer
+  name
+  teamUrl
+  avatarUrl
+  createdAt
+  createdAtEpoch
+  closed
+}
+    `;
+export const TeamStatsFieldsFragmentDoc = gql`
+    fragment TeamStatsFields on TeamStatistics {
+  teamId
+  totalQuantumVolume
+  totalQuantumRewards
+  totalGamesPlayed
+  quantumRewards {
+    epoch
+    total_quantum_rewards
+  }
+  gamesPlayed
+}
+    `;
+export const TeamRefereeFieldsFragmentDoc = gql`
+    fragment TeamRefereeFields on TeamReferee {
+  teamId
+  referee
+  joinedAt
+  joinedAtEpoch
+}
+    `;
+export const TeamEntityFragmentDoc = gql`
+    fragment TeamEntity on TeamGameEntity {
+  rank
+  volume
+  rewardMetric
+  rewardEarned
+  totalRewardsEarned
+  team {
+    teamId
+  }
+}
+    `;
+export const TeamGameFieldsFragmentDoc = gql`
+    fragment TeamGameFields on Game {
+  id
+  epoch
+  numberOfParticipants
+  entities {
+    ... on TeamGameEntity {
+      ...TeamEntity
+    }
+  }
+}
+    ${TeamEntityFragmentDoc}`;
+export const TeamDocument = gql`
+    query Team($teamId: ID!, $partyId: ID) {
+  teams(teamId: $teamId) {
+    edges {
+      node {
+        ...TeamFields
+      }
+    }
+  }
+  partyTeams: teams(partyId: $partyId) {
+    edges {
+      node {
+        ...TeamFields
+      }
+    }
+  }
+  teamsStatistics(teamId: $teamId) {
+    edges {
+      node {
+        ...TeamStatsFields
+      }
+    }
+  }
+  teamReferees(teamId: $teamId) {
+    edges {
+      node {
+        ...TeamRefereeFields
+      }
+    }
+  }
+  games(entityScope: ENTITY_SCOPE_TEAMS) {
+    edges {
+      node {
+        ...TeamGameFields
+      }
+    }
+  }
+}
+    ${TeamFieldsFragmentDoc}
+${TeamStatsFieldsFragmentDoc}
+${TeamRefereeFieldsFragmentDoc}
+${TeamGameFieldsFragmentDoc}`;
+
+/**
+ * __useTeamQuery__
+ *
+ * To run a query within a React component, call `useTeamQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTeamQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTeamQuery({
+ *   variables: {
+ *      teamId: // value for 'teamId'
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useTeamQuery(baseOptions: Apollo.QueryHookOptions<TeamQuery, TeamQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<TeamQuery, TeamQueryVariables>(TeamDocument, options);
+      }
+export function useTeamLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TeamQuery, TeamQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<TeamQuery, TeamQueryVariables>(TeamDocument, options);
+        }
+export type TeamQueryHookResult = ReturnType<typeof useTeamQuery>;
+export type TeamLazyQueryHookResult = ReturnType<typeof useTeamLazyQuery>;
+export type TeamQueryResult = Apollo.QueryResult<TeamQuery, TeamQueryVariables>;

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

@@ -0,0 +1 @@
+export { Team } from './team';

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

@@ -0,0 +1,395 @@
+import { useState, type ReactNode, type ButtonHTMLAttributes } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import orderBy from 'lodash/orderBy';
+import countBy from 'lodash/countBy';
+import {
+  TradingButton as Button,
+  Intent,
+  Pill,
+  VegaIcon,
+  VegaIconNames,
+  Tooltip,
+  Splash,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import { useT } from '../../lib/use-t';
+import { Table } from '../../components/table';
+import { formatNumberRounded, getDateTimeFormat } from '@vegaprotocol/utils';
+import {
+  useTeam,
+  type Team as TeamType,
+  type TeamStats,
+  type Member,
+  type TeamGame,
+} from './use-team';
+import { DApp, EXPLORER_PARTIES, useLinks } from '@vegaprotocol/environment';
+import BigNumber from 'bignumber.js';
+
+export const Team = () => {
+  const t = useT();
+  const { teamId } = useParams<{ teamId: string }>();
+  const { team, stats, partyInTeam, members, games } = useTeam(teamId);
+
+  if (!team) {
+    return (
+      <Splash>
+        <p>{t('Page not found')}</p>
+      </Splash>
+    );
+  }
+
+  return (
+    <TeamPage
+      team={team}
+      stats={stats}
+      partyInTeam={partyInTeam}
+      members={members}
+      games={games}
+    />
+  );
+};
+
+export const TeamPage = ({
+  team,
+  stats,
+  partyInTeam,
+  members,
+  games,
+}: {
+  team: TeamType;
+  stats?: TeamStats;
+  partyInTeam: boolean;
+  members?: Member[];
+  games?: TeamGame[];
+}) => {
+  const t = useT();
+  const [showGames, setShowGames] = useState(true);
+
+  return (
+    <div className="relative h-full 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">
+        <header className="flex gap-3 lg:gap-4 pt-5 lg:pt-10">
+          <TeamAvatar 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>
+            <JoinButton joined={partyInTeam} />
+          </div>
+        </header>
+        <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}
+        <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>
+      </div>
+    </div>
+  );
+};
+
+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',
+        },
+        { name: 'status', displayName: t('Status') },
+      ]}
+      data={games.map((game) => ({
+        rank: game.team.rank,
+        epoch: game.epoch,
+        type: game.team.rewardMetric,
+        amount: game.team.totalRewardsEarned,
+        teams: game.numberOfParticipants,
+      }))}
+      noCollapse={true}
+    />
+  );
+};
+
+const TeamAvatar = ({ imgUrl }: { imgUrl: string }) => {
+  // TODO: add fallback avatars
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={imgUrl}
+      alt="Team avatar"
+      className="rounded-full w-20 h-20 lg:w-[112px] lg:h-[112px] bg-vega-clight-700 dark:bg-vega-cdark-700 shrink-0"
+    />
+  );
+};
+
+const Members = ({ members }: { members?: Member[] }) => {
+  const t = useT();
+
+  if (!members?.length) {
+    return <p>{t('No members')}</p>;
+  }
+
+  const data = orderBy(
+    members.map((m) => ({
+      referee: <RefereeCell pubkey={m.referee} />,
+      joinedAt: getDateTimeFormat().format(new Date(m.joinedAt)),
+      joinedAtEpoch: Number(m.joinedAtEpoch),
+      explorerLink: <RefereeLink pubkey={m.referee} />,
+    })),
+    'joinedAtEpoch',
+    'desc'
+  );
+
+  return (
+    <Table
+      columns={[
+        { name: 'referee', displayName: t('Referee') },
+        {
+          name: 'joinedAt',
+          displayName: t('Joined at'),
+        },
+        {
+          name: 'joinedAtEpoch',
+          displayName: t('Joined epoch'),
+          headerClassName: 'text-right',
+          className: 'text-right',
+        },
+        {
+          name: 'explorerLink',
+          displayName: '',
+          headerClassName: 'hidden md:block',
+          className: 'hidden md:block text-right',
+        },
+      ]}
+      data={data}
+      noCollapse={true}
+    />
+  );
+};
+
+const RefereeCell = ({ pubkey }: { pubkey: string }) => {
+  return <span title={pubkey}>{truncateMiddle(pubkey)}</span>;
+};
+
+const RefereeLink = ({ pubkey }: { pubkey: string }) => {
+  const t = useT();
+
+  const linkCreator = useLinks(DApp.Explorer);
+  const link = linkCreator(EXPLORER_PARTIES.replace(':id', pubkey));
+
+  return (
+    <Link to={link} className="underline underline-offset-4">
+      {t('View on explorer')}
+    </Link>
+  );
+};
+
+const JoinButton = ({ joined }: { joined: boolean }) => {
+  const t = useT();
+
+  if (joined) {
+    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 intent={Intent.Primary}>{t('Join this team')}</Button>;
+};
+
+const LatestResults = ({ games }: { games: TeamGame[] }) => {
+  const t = useT();
+  const latestGames = games.slice(0, 5);
+
+  return (
+    <dl>
+      <dt className="text-muted text-sm">
+        {t('Last {{count}} game results', { 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);
+  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;
+
+  return (
+    <dl>
+      <dt className="text-muted text-sm">{t('Favorite game')}</dt>
+      <dd>
+        <Pill className="flex-inline items-center gap-2 bg-transparent text-sm">
+          <VegaIcon
+            name={VegaIconNames.STAR}
+            className="text-vega-yellow-400"
+          />{' '}
+          {favoriteMetric}
+        </Pill>
+      </dd>
+    </dl>
+  );
+};
+
+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,
+      })}
+    />
+  );
+};
+
+const StatSection = ({ children }: { children: ReactNode }) => {
+  return (
+    <section className="flex flex-col lg:flex-row gap-2 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-[min-content_min-content] 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/client-pages/team/use-team.ts

@@ -0,0 +1,64 @@
+import compact from 'lodash/compact';
+import orderBy from 'lodash/orderBy';
+import {
+  useTeamQuery,
+  type TeamFieldsFragment,
+  type TeamStatsFieldsFragment,
+  type TeamRefereeFieldsFragment,
+  type TeamEntityFragment,
+} from './__generated__/Team';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+
+export type Team = TeamFieldsFragment;
+export type TeamStats = TeamStatsFieldsFragment;
+export type Member = TeamRefereeFieldsFragment;
+export type TeamEntity = TeamEntityFragment;
+export type TeamGame = ReturnType<typeof useTeam>['games'][number];
+
+export const useTeam = (teamId?: string) => {
+  const { pubKey } = useVegaWallet();
+
+  const { data, loading, error } = useTeamQuery({
+    variables: { teamId: teamId || '', partyId: pubKey },
+    skip: !teamId,
+  });
+
+  const teamEdge = data?.teams?.edges.find((e) => e.node.teamId === teamId);
+  const partyTeamEdge = data?.partyTeams?.edges[0];
+  const teamStatsEdge = data?.teamsStatistics?.edges.find(
+    (e) => e.node.teamId === teamId
+  );
+  const members = data?.teamReferees?.edges
+    .filter((e) => e.node.teamId === teamId)
+    .map((e) => e.node);
+
+  // Find games where the current team participated in
+  const gamesWithTeam = compact(data?.games.edges).map((edge) => {
+    const team = edge.node.entities.find((e) => {
+      if (e.__typename !== 'TeamGameEntity') return false;
+      if (e.team.teamId !== teamId) return false;
+      return true;
+    });
+
+    if (!team) return null;
+
+    return {
+      id: edge.node.id,
+      epoch: edge.node.epoch,
+      numberOfParticipants: edge.node.numberOfParticipants,
+      team: team as TeamEntity, // TS can't infer that all the game entities are teams
+    };
+  });
+  const games = orderBy(compact(gamesWithTeam), 'epoch', 'desc');
+
+  return {
+    data,
+    loading,
+    error,
+    stats: teamStatsEdge?.node,
+    team: teamEdge?.node,
+    members,
+    games,
+    partyInTeam: Boolean(partyTeamEdge),
+  };
+};

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

@@ -73,7 +73,7 @@ export const AccountsContainer = ({
   );
 };
 
-const useAccountStore = create<DataGridSlice>()(
+export const useAccountStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_accounts_store',
   })

apps/trading/components/accounts-container/accounts-settings.tsx

@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useAccountStore } from './accounts-container';
+
+export const AccountsSettings = () => (
+  <GridSettings
+    updateGridStore={useAccountStore((store) => store.updateGridStore)}
+  />
+);

apps/trading/components/accounts-container/index.ts

@@ -1 +1,2 @@
 export * from './accounts-container';
+export * from './accounts-settings';

apps/trading/components/bootstrapper/bootstrapper.tsx

@@ -12,6 +12,7 @@ import { VegaWalletProvider } from '@vegaprotocol/wallet';
 import type { ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
 import { useT } from '../../lib/use-t';
+import { DataLoader } from './data-loader';
 
 export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   const t = useT();
@@ -52,28 +53,38 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
           />
         }
       >
-        <Web3Provider
+        <DataLoader
           skeleton={<AppLoader />}
           failure={
-            <AppFailure title={t('Could not configure web3 provider')} />
+            <AppFailure
+              title={t('Could not load market data or asset data')}
+              error={error}
+            />
           }
         >
-          <VegaWalletProvider
-            config={{
-              network: VEGA_ENV,
-              vegaUrl: VEGA_URL,
-              vegaWalletServiceUrl: VEGA_WALLET_URL,
-              links: {
-                explorer: VEGA_EXPLORER_URL,
-                concepts: DocsLinks.VEGA_WALLET_CONCEPTS_URL,
-                chromeExtensionUrl: CHROME_EXTENSION_URL,
-                mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
-              },
-            }}
+          <Web3Provider
+            skeleton={<AppLoader />}
+            failure={
+              <AppFailure title={t('Could not configure web3 provider')} />
+            }
           >
-            {children}
-          </VegaWalletProvider>
-        </Web3Provider>
+            <VegaWalletProvider
+              config={{
+                network: VEGA_ENV,
+                vegaUrl: VEGA_URL,
+                vegaWalletServiceUrl: VEGA_WALLET_URL,
+                links: {
+                  explorer: VEGA_EXPLORER_URL,
+                  concepts: DocsLinks.VEGA_WALLET_CONCEPTS_URL,
+                  chromeExtensionUrl: CHROME_EXTENSION_URL,
+                  mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
+                },
+              }}
+            >
+              {children}
+            </VegaWalletProvider>
+          </Web3Provider>
+        </DataLoader>
       </NodeGuard>
     </NetworkLoader>
   );

apps/trading/components/bootstrapper/data-loader.tsx

@@ -0,0 +1,34 @@
+import { useAssetsMapProvider } from '@vegaprotocol/assets';
+import { useMarketsMapProvider } from '@vegaprotocol/markets';
+import type { ReactNode } from 'react';
+
+export const DataLoader = ({
+  children,
+  failure,
+  skeleton,
+}: {
+  children: ReactNode;
+  failure: ReactNode;
+  skeleton: ReactNode;
+}) => {
+  // Query all markets and assets to ensure they are cached
+  const { data: markets, error, loading } = useMarketsMapProvider();
+  const {
+    data: assets,
+    error: errorAssets,
+    loading: loadingAssets,
+  } = useAssetsMapProvider();
+
+  if (loading || loadingAssets) {
+    // eslint-disable-next-line
+    return <>{skeleton}</>;
+  }
+
+  if (error || errorAssets || !markets || !assets) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{failure}</>;
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+};

apps/trading/components/card/card.tsx

@@ -9,6 +9,7 @@ export const Card = ({
   loading = false,
   highlight = false,
   testId,
+  noBackgroundOnMobile = false,
 }: {
   children: ReactNode;
   title: string;
@@ -16,20 +17,33 @@ export const Card = ({
   loading?: boolean;
   highlight?: boolean;
   testId?: string;
+  noBackgroundOnMobile?: boolean;
 }) => {
   return (
     <div
       data-testid={testId}
       className={classNames(
-        'bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full p-0.5 lg:col-auto',
-        'rounded-lg',
+        'col-span-full lg:col-auto',
+        {
+          'rounded-lg bg-vega-clight-800 dark:bg-vega-cdark-800 p-0.5':
+            !noBackgroundOnMobile,
+          'mt-3 md:mt-0 md:rounded-lg md:bg-vega-clight-800 md:dark:bg-vega-cdark-800 md:p-0.5':
+            noBackgroundOnMobile,
+        },
         {
           'bg-rainbow': highlight,
         },
         className
       )}
     >
-      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 h-full w-full rounded p-4">
+      <div
+        className={classNames('h-full w-full', {
+          'bg-vega-clight-800 dark:bg-vega-cdark-800 rounded p-4':
+            !noBackgroundOnMobile,
+          'md:bg-vega-clight-800 md:dark:bg-vega-cdark-800 md:rounded md:p-4':
+            noBackgroundOnMobile,
+        })}
+      >
         <h2 className="mb-3">{title}</h2>
         {loading ? <CardLoader /> : children}
       </div>

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

@@ -1,5 +1,5 @@
 import invert from 'lodash/invert';
-import { type Interval } from '@vegaprotocol/types';
+import { Interval } from '@vegaprotocol/types';
 import {
   TradingViewContainer,
   ALLOWED_TRADINGVIEW_HOSTNAMES,
@@ -11,6 +11,7 @@ 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
@@ -36,7 +37,7 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
   const pennantChart = (
     <CandlesChartContainer
       marketId={marketId}
-      interval={toPennantInterval(interval)}
+      interval={toPennantInterval(interval as SupportedInterval)}
       chartType={chartType}
       overlays={overlays}
       studies={studies}
@@ -63,7 +64,7 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
           libraryPath={CHARTING_LIBRARY_PATH}
           libraryHash={CHARTING_LIBRARY_HASH}
           marketId={marketId}
-          interval={toTradingViewResolution(interval)}
+          interval={toTradingViewResolution(interval as SupportedInterval)}
           studies={tradingViewStudies}
           onIntervalChange={(newInterval) => {
             setInterval(fromTradingViewResolution(newInterval));
@@ -83,7 +84,11 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
   }
 };
 
-const toTradingViewResolution = (interval: Interval) => {
+const toTradingViewResolution = (interval: SupportedInterval) => {
+  if (!SUPPORTED_INTERVALS.includes(interval)) {
+    throw new Error(`interval ${interval} is not supported`);
+  }
+
   const resolution = TRADINGVIEW_INTERVAL_MAP[interval];
 
   if (!resolution) {
@@ -107,7 +112,11 @@ const fromTradingViewResolution = (resolution: string) => {
   return interval as Interval;
 };
 
-const toPennantInterval = (interval: Interval) => {
+const toPennantInterval = (interval: SupportedInterval) => {
+  if (!SUPPORTED_INTERVALS.includes(interval)) {
+    throw new Error(`interval ${interval} is not supported`);
+  }
+
   const pennantInterval = PENNANT_INTERVAL_MAP[interval];
 
   if (!pennantInterval) {

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

@@ -24,15 +24,7 @@ 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';
-
-const INTERVALS = [
-  Interval.INTERVAL_I1M,
-  Interval.INTERVAL_I5M,
-  Interval.INTERVAL_I15M,
-  Interval.INTERVAL_I1H,
-  Interval.INTERVAL_I6H,
-  Interval.INTERVAL_I1D,
-];
+import { SUPPORTED_INTERVALS } from './constants';
 
 const chartTypeIcon = new Map<ChartType, IconName>([
   [ChartType.AREA, IconNames.TIMELINE_AREA_CHART],
@@ -93,7 +85,7 @@ export const ChartMenu = () => {
               setInterval(value as Interval);
             }}
           >
-            {INTERVALS.map((timeInterval) => (
+            {SUPPORTED_INTERVALS.map((timeInterval) => (
               <TradingDropdownRadioItem
                 key={timeInterval}
                 inset

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

@@ -0,0 +1,12 @@
+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/fees-container/fees-container.tsx

@@ -13,7 +13,7 @@ import { MarketFees } from './market-fees';
 import { useVolumeStats } from './use-volume-stats';
 import { useReferralStats } from './use-referral-stats';
 import { formatPercentage, getAdjustedFee } from './utils';
-import { Table, Td, Th, THead, Tr } from './table';
+import { Table as SimpleTable } from '../../components/table';
 import BigNumber from 'bignumber.js';
 import { Links } from '../../lib/links';
 import { Link } from 'react-router-dom';
@@ -24,6 +24,8 @@ import {
   truncateMiddle,
 } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
+import classNames from 'classnames';
+import { getTierGradient } from '../helpers/tiers';
 
 export const FeesContainer = () => {
   const t = useT();
@@ -36,7 +38,11 @@ export const FeesContainer = () => {
   const { data: markets, loading: marketsLoading } = useMarketList();
 
   const { data: programData, loading: programLoading } =
-    useDiscountProgramsQuery({ errorPolicy: 'ignore' });
+    useDiscountProgramsQuery({
+      errorPolicy: 'ignore',
+      fetchPolicy: 'cache-and-network',
+      pollInterval: 15000,
+    });
 
   const volumeDiscountWindowLength =
     programData?.currentVolumeDiscountProgram?.windowLength || 1;
@@ -47,6 +53,8 @@ export const FeesContainer = () => {
       partyId: pubKey || '',
     },
     skip: !pubKey,
+    fetchPolicy: 'cache-and-network',
+    pollInterval: 15000,
   });
 
   const previousEpoch = (Number(feesData?.epoch.id) || 0) - 1;
@@ -166,6 +174,7 @@ export const FeesContainer = () => {
         className="lg:col-span-full xl:col-span-2"
         loading={loading}
         data-testid="volume-discount-card"
+        noBackgroundOnMobile={true}
       >
         <VolumeTiers
           tiers={volumeTiers}
@@ -179,12 +188,14 @@ export const FeesContainer = () => {
         className="lg:col-span-full xl:col-span-2"
         loading={loading}
         data-testid="referral-discount-card"
+        noBackgroundOnMobile={true}
       >
         <ReferralTiers
           tiers={referralTiers}
           tierIndex={referralTierIndex}
           epochsInSet={epochsInSet}
           referralVolumeInWindow={referralVolumeInWindow}
+          referralDiscountWindowLength={referralDiscountWindowLength}
         />
       </Card>
       <Card
@@ -192,6 +203,7 @@ export const FeesContainer = () => {
         className="lg:col-span-full"
         loading={marketsLoading}
         data-testid="fees-by-market-card"
+        noBackgroundOnMobile={true}
       >
         <MarketFees
           markets={markets}
@@ -477,44 +489,65 @@ const VolumeTiers = ({
 
   return (
     <div>
-      <Table>
-        <THead>
-          <Tr>
-            <Th data-testid="tier-header">{t('Tier')}</Th>
-            <Th data-testid="discount-header">{t('Discount')}</Th>
-            <Th data-testid="min-volume-header">{t('Min. trading volume')}</Th>
-            <Th data-testid="my-volume-header">
-              {t('myVolume', 'My volume (last {{count}} epochs)', {
-                count: windowLength,
-              })}
-            </Th>
-            <Th data-testid="actions-header" />
-          </Tr>
-        </THead>
-        <tbody>
-          {Array.from(tiers).map((tier, i) => {
-            const isUserTier = tierIndex === i;
-
-            return (
-              <Tr key={i} data-testid={`tier-row-${i}`}>
-                <Td data-testid={`tier-value-${i}`}>{i + 1}</Td>
-                <Td data-testid={`discount-value-${i}`}>
-                  {formatPercentage(Number(tier.volumeDiscountFactor))}%
-                </Td>
-                <Td data-testid={`min-volume-value-${i}`}>
-                  {formatNumber(tier.minimumRunningNotionalTakerVolume)}
-                </Td>
-                <Td data-testid={`my-volume-value-${i}`}>
-                  {isUserTier ? formatNumber(lastEpochVolume) : ''}
-                </Td>
-                <Td data-testid={`your-tier-${i}`}>
-                  {isUserTier ? <YourTier /> : null}
-                </Td>
-              </Tr>
-            );
-          })}
-        </tbody>
-      </Table>
+      <SimpleTable
+        className="bg-white dark:bg-vega-cdark-900"
+        columns={[
+          { name: 'tier', displayName: t('Tier'), testId: 'col-tier-value' },
+          {
+            name: 'discount',
+            displayName: t('Discount'),
+            testId: 'discount-value',
+          },
+          {
+            name: 'minTradingVolume',
+            displayName: t('Min. trading volume'),
+            testId: 'min-volume-value',
+          },
+          {
+            name: 'myVolume',
+            displayName: t('myVolume', 'My volume (last {{count}} epochs)', {
+              count: windowLength,
+            }),
+            testId: 'my-volume-value',
+          },
+          {
+            name: 'indicator',
+            className: 'max-md:hidden',
+            testId: 'your-tier',
+          },
+        ]}
+        data={Array.from(tiers).map((tier, i) => {
+          const isUserTier = tierIndex === i;
+          const indicator = isUserTier ? (
+            <YourTier testId={`your-volume-tier-${i}`} />
+          ) : null;
+          const tierIndicator = (
+            <div className="flex justify-between">
+              <span data-testid={`tier-value-${i}`}>{i + 1}</span>
+              <span className="md:hidden">{indicator}</span>
+            </div>
+          );
+          return {
+            tier: tierIndicator,
+            discount: (
+              <>{formatPercentage(Number(tier.volumeDiscountFactor))}%</>
+            ),
+            minTradingVolume: (
+              <>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</>
+            ),
+            myVolume: isUserTier ? (
+              formatNumber(lastEpochVolume)
+            ) : (
+              <span className="md:hidden">-</span>
+            ),
+            indicator: indicator,
+            className: classNames(
+              getTierGradient(i + 1, tiers.length),
+              'text-xs'
+            ),
+          };
+        })}
+      />
     </div>
   );
 };
@@ -524,6 +557,7 @@ const ReferralTiers = ({
   tierIndex,
   epochsInSet,
   referralVolumeInWindow,
+  referralDiscountWindowLength,
 }: {
   tiers: Array<{
     referralDiscountFactor: string;
@@ -533,6 +567,7 @@ const ReferralTiers = ({
   tierIndex: number;
   epochsInSet: number;
   referralVolumeInWindow: number;
+  referralDiscountWindowLength: number;
 }) => {
   const t = useT();
 
@@ -544,60 +579,81 @@ const ReferralTiers = ({
 
   return (
     <div>
-      <Table>
-        <THead>
-          <Tr>
-            <Th data-testid="tier-header">{t('Tier')}</Th>
-            <Th data-testid="discount-header">{t('Discount')}</Th>
-            <Th data-testid="min-volume-header">{t('Min. trading volume')}</Th>
-            <Th data-testid="required-epochs-header">{t('Required epochs')}</Th>
-            <Th data-testid="extra-header" />
-          </Tr>
-        </THead>
-        <tbody>
-          {Array.from(tiers).map((tier, i) => {
-            const isUserTier = tierIndex === i;
+      <SimpleTable
+        className="bg-white dark:bg-vega-cdark-900"
+        columns={[
+          { name: 'tier', displayName: t('Tier'), testId: 'col-tier-value' },
+          {
+            name: 'discount',
+            displayName: t('Discount'),
+            tooltip: t(
+              "The proportion of the referee's taker fees to be discounted"
+            ),
+            testId: 'discount-value',
+          },
+          {
+            name: 'volume',
+            displayName: t(
+              'minTradingVolume',
+              'Min. trading volume (last {{count}} epochs)',
+              {
+                count: referralDiscountWindowLength,
+              }
+            ),
+            tooltip: t(
+              'The minimum running notional for the given benefit tier'
+            ),
+            testId: 'min-volume-value',
+          },
+          {
+            name: 'epochs',
+            displayName: t('Min. epochs'),
+            tooltip: t(
+              'The minimum number of epochs the party needs to be in the referral set to be eligible for the benefit'
+            ),
+            testId: 'required-epochs-value',
+          },
+          {
+            name: 'indicator',
+            className: 'max-md:hidden',
+            testId: 'user-tier-or-unlocks',
+          },
+        ]}
+        data={Array.from(tiers).map((tier, i) => {
+          const isUserTier = tierIndex === i;
+          const requiredVolume = Number(tier.minimumRunningNotionalTakerVolume);
 
-            const requiredVolume = Number(
-              tier.minimumRunningNotionalTakerVolume
-            );
-            let unlocksIn = null;
+          const indicator = isUserTier ? (
+            <YourTier testId={`your-referral-tier-${i}`} />
+          ) : referralVolumeInWindow >= requiredVolume &&
+            epochsInSet < tier.minimumEpochs ? (
+            <span className="text-muted text-xs">
+              Unlocks in {tier.minimumEpochs - epochsInSet} epochs
+            </span>
+          ) : null;
 
-            if (
-              referralVolumeInWindow >= requiredVolume &&
-              epochsInSet < tier.minimumEpochs
-            ) {
-              unlocksIn = (
-                <span className="text-muted">
-                  Unlocks in {tier.minimumEpochs - epochsInSet} epochs
-                </span>
-              );
-            }
+          const tierIndicator = (
+            <div className="flex justify-between">
+              <span data-testid={`tier-value-${i}`}>{i + 1}</span>
+              <span className="md:hidden">{indicator}</span>
+            </div>
+          );
 
-            return (
-              <Tr key={i} data-testid={`tier-row-${i}`}>
-                <Td data-testid={`tier-value-${i}`}>{i + 1}</Td>
-                <Td data-testid={`discount-value-${i}`}>
-                  {formatPercentage(Number(tier.referralDiscountFactor))}%
-                </Td>
-                <Td data-testid={`min-volume-value-${i}`}>
-                  {formatNumber(tier.minimumRunningNotionalTakerVolume)}
-                </Td>
-                <Td data-testid={`required-epochs-value-${i}`}>
-                  {tier.minimumEpochs}
-                </Td>
-                <Td data-testid={`user-tier-or-unlocks-${i}`}>
-                  {isUserTier ? (
-                    <YourTier testId={`your-tier-${i}`} />
-                  ) : (
-                    unlocksIn
-                  )}
-                </Td>
-              </Tr>
-            );
-          })}
-        </tbody>
-      </Table>
+          return {
+            tier: tierIndicator,
+            discount: (
+              <>{formatPercentage(Number(tier.referralDiscountFactor))}%</>
+            ),
+            volume: formatNumber(tier.minimumRunningNotionalTakerVolume),
+            epochs: tier.minimumEpochs,
+            indicator,
+            className: classNames(
+              getTierGradient(i + 1, tiers.length),
+              'text-xs'
+            ),
+          };
+        })}
+      />
     </div>
   );
 };
@@ -611,7 +667,7 @@ const YourTier = ({ testId }: YourTierProps) => {
 
   return (
     <span
-      className="bg-rainbow whitespace-nowrap rounded-xl px-4 py-1.5 text-white"
+      className="bg-rainbow whitespace-nowrap rounded-xl px-4 py-1.5 text-white text-xs"
       data-testid={testId}
     >
       {t('Your tier')}

apps/trading/components/fees-container/market-fees.tsx

@@ -8,43 +8,53 @@ import { useNavigateWithMeta } from '../../lib/hooks/use-market-click-handler';
 import { Links } from '../../lib/links';
 import { useT } from '../../lib/use-t';
 import { useMemo } from 'react';
+import { type ColDef } from 'ag-grid-community/dist/lib/entities/colDef';
 
-const useFeesTableColumnDefs = () => {
+const useFeesTableColumnDefs = (): ColDef[] => {
   const t = useT();
   return useMemo(
-    () => [
-      { field: 'code', cellRenderer: 'MarketCodeCell' },
-      {
-        field: 'feeAfterDiscount',
-        headerName: t('Total fee after discount'),
-        valueFormatter: ({ value }: { value: number }) => value + '%',
-      },
-      {
-        field: 'infraFee',
-        valueFormatter: ({ value }: { value: number }) => value + '%',
-      },
-      {
-        field: 'makerFee',
-        valueFormatter: ({ value }: { value: number }) => value + '%',
-      },
-      {
-        field: 'liquidityFee',
-        valueFormatter: ({ value }: { value: number }) => value + '%',
-      },
-      {
-        field: 'totalFee',
-        headerName: t('Total fee before discount'),
-        valueFormatter: ({ value }: { value: number }) => value + '%',
-      },
-    ],
+    () =>
+      [
+        {
+          field: 'code',
+          cellRenderer: 'MarketCodeCell',
+          pinned: 'left',
+          width: 150,
+        },
+        {
+          field: 'liquidityFee',
+          valueFormatter: ({ value }: { value: number }) => value + '%',
+        },
+        {
+          field: 'feeAfterDiscount',
+          headerName: t('Total fee after discount'),
+          valueFormatter: ({ value }: { value: number }) => value + '%',
+        },
+        {
+          field: 'totalFee',
+          headerName: t('Total fee before discount'),
+          valueFormatter: ({ value }: { value: number }) => value + '%',
+        },
+        {
+          field: 'infraFee',
+          valueFormatter: ({ value }: { value: number }) => value + '%',
+        },
+        {
+          field: 'makerFee',
+          valueFormatter: ({ value }: { value: number }) => value + '%',
+        },
+      ] as ColDef[],
     [t]
   );
 };
 
 const feesTableDefaultColDef = {
   flex: 1,
+  minWidth: 62,
   resizable: true,
   sortable: true,
+  suppressMovable: true,
+  pinned: false,
 };
 
 const components = {
@@ -62,6 +72,8 @@ export const MarketFees = ({
 }) => {
   const navigateWithMeta = useNavigateWithMeta();
 
+  const colDef = useFeesTableColumnDefs();
+
   const rows = compact(markets || []).map((m) => {
     const infraFee = new BigNumber(m.fees.factors.infrastructureFee);
     const makerFee = new BigNumber(m.fees.factors.makerFee);
@@ -88,9 +100,9 @@ export const MarketFees = ({
   });
 
   return (
-    <div className="border rounded-sm border-default">
+    <div className="border rounded-lg md:rounded-sm overflow-hidden border-default">
       <AgGrid
-        columnDefs={useFeesTableColumnDefs()}
+        columnDefs={colDef}
         rowData={rows}
         getRowId={({ data }) => data.id}
         defaultColDef={feesTableDefaultColDef}

apps/trading/components/fees-container/use-referral-stats.ts

@@ -1,4 +1,5 @@
 import type { DiscountProgramsQuery, FeesQuery } from './__generated__/Fees';
+
 export const useReferralStats = (
   previousEpoch?: number,
   referralStats?: NonNullable<

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

@@ -38,7 +38,7 @@ export const FillsContainer = () => {
   );
 };
 
-const useFillsStore = create<DataGridSlice>()(
+export const useFillsStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_fills_store',
   })

apps/trading/components/fills-container/fills-settings.tsx

@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useFillsStore } from './fills-container';
+
+export const FillsSettings = () => (
+  <GridSettings
+    updateGridStore={useFillsStore((store) => store.updateGridStore)}
+  />
+);

apps/trading/components/fills-container/index.ts

@@ -1 +1,2 @@
 export * from './fills-container';
+export * from './fills-settings';

apps/trading/components/funding-payments-container/funding-payments-container.tsx

@@ -45,7 +45,7 @@ export const FundingPaymentsContainer = ({
   );
 };
 
-const useFundingPaymentsStore = create<DataGridSlice>()(
+export const useFundingPaymentsStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_funding_payments_store',
   })

apps/trading/components/funding-payments-container/funding-payments-settings.tsx

@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useFundingPaymentsStore } from './funding-payments-container';
+
+export const FundingPaymentsSettings = () => (
+  <GridSettings
+    updateGridStore={useFundingPaymentsStore((store) => store.updateGridStore)}
+  />
+);

apps/trading/components/funding-payments-container/index.ts

@@ -1 +1,2 @@
 export * from './funding-payments-container';
+export * from './funding-payments-settings';

apps/trading/components/grid-settings/grid-settings.tsx

@@ -0,0 +1,24 @@
+import { useT } from '../../lib/use-t';
+import type { DataGridStore } from '../../stores/datagrid-store-slice';
+import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';
+
+export const GridSettings = ({
+  updateGridStore,
+}: {
+  updateGridStore: (gridStore: DataGridStore) => void;
+}) => {
+  const t = useT();
+  return (
+    <Button
+      onClick={() =>
+        updateGridStore({
+          columnState: undefined,
+          filterModel: undefined,
+        })
+      }
+      size="extra-small"
+    >
+      {t('Reset Columns')}
+    </Button>
+  );
+};

apps/trading/components/helpers/tag.tsx

@@ -2,7 +2,15 @@ import type { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 type TagProps = {
-  color?: 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'orange' | 'none';
+  color?:
+    | 'yellow'
+    | 'green'
+    | 'blue'
+    | 'purple'
+    | 'pink'
+    | 'orange'
+    | 'red'
+    | 'none';
 };
 export const Tag = ({
   color = 'none',

apps/trading/components/helpers/tiers.tsx

@@ -0,0 +1,48 @@
+import type { ComponentProps } from 'react';
+import type { Tag } from './tag';
+import classNames from 'classnames';
+
+// rainbow-ish order
+export const TIER_COLORS: Array<ComponentProps<typeof Tag>['color']> = [
+  'none', // worst tier if 8 tiers, otherwise relative to the best tier
+  'red',
+  'pink',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'purple', // best tier
+];
+
+export const getTierColor = (tier: number, max = TIER_COLORS.length) => {
+  const available =
+    max < TIER_COLORS.length
+      ? TIER_COLORS.slice(TIER_COLORS.length - max)
+      : TIER_COLORS;
+  const tiers = Object.keys(available).length;
+  let index = Math.abs(tier - 1);
+  if (tier >= tiers) {
+    index = index % tiers;
+  }
+  return available[index];
+};
+
+export const getTierGradient = (tier: number, max = TIER_COLORS.length) =>
+  classNames({
+    'from-vega-yellow-400 dark:from-vega-yellow-600 to-20%  bg-highlight':
+      'yellow' === getTierColor(tier, max),
+    'from-vega-green-400 dark:from-vega-green-600 to-20%  bg-highlight':
+      'green' === getTierColor(tier, max),
+    'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
+      'blue' === getTierColor(tier, max),
+    'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
+      'purple' === getTierColor(tier, max),
+    'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
+      'pink' === getTierColor(tier, max),
+    'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
+      'orange' === getTierColor(tier, max),
+    'from-vega-red-400 dark:from-vega-red-600 to-20%  bg-highlight':
+      'red' === getTierColor(tier, max),
+    'from-vega-clight-600 dark:from-vega-cdark-600 to-20%  bg-highlight':
+      'none' === getTierColor(tier, max),
+  });

apps/trading/components/market-banner/index.ts

@@ -1,3 +1 @@
-export * from './market-successor-banner';
-export * from './market-successor-proposal-banner';
-export * from './market-termination-banner';
+export { MarketBanner } from './market-banner';

apps/trading/components/market-banner/market-banner.tsx

@@ -0,0 +1,205 @@
+import compact from 'lodash/compact';
+import { MarketState } from '@vegaprotocol/types';
+import { Intent, NotificationBanner } from '@vegaprotocol/ui-toolkit';
+import {
+  useMarketState,
+  type Market,
+  useMaliciousOracle,
+} from '@vegaprotocol/markets';
+import { useState } from 'react';
+import { type MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { MarketSuspendedBanner } from './market-suspended-banner';
+import { MarketUpdateBanner } from './market-update-banner';
+import { MarketUpdateStateBanner } from './market-update-state-banner';
+import { MarketSettledBanner } from './market-settled-banner';
+import { MarketSuccessorProposalBanner } from './market-successor-proposal-banner';
+import { MarketOracleBanner, type Oracle } from './market-oracle-banner';
+import {
+  useSuccessorMarketProposals,
+  useUpdateMarketProposals,
+  useUpdateMarketStateProposals,
+} from './use-market-proposals';
+
+type UpdateMarketBanner = {
+  kind: 'UpdateMarket';
+  proposals: MarketViewProposalFieldsFragment[];
+};
+
+type UpdateMarketStateBanner = {
+  kind: 'UpdateMarketState';
+  proposals: MarketViewProposalFieldsFragment[];
+};
+
+type NewMarketBanner = {
+  kind: 'NewMarket'; // aka a proposal of NewMarket which succeeds the current market
+  proposals: MarketViewProposalFieldsFragment[];
+};
+
+type SettledBanner = {
+  kind: 'Settled';
+  market: Market;
+};
+
+type SuspendedBanner = {
+  kind: 'Suspended';
+  market: Market;
+};
+
+type OracleBanner = {
+  kind: 'Oracle';
+  oracle: Oracle;
+};
+
+type Banner =
+  | UpdateMarketBanner
+  | UpdateMarketStateBanner
+  | NewMarketBanner
+  | SettledBanner
+  | SuspendedBanner
+  | OracleBanner;
+
+export const MarketBanner = ({ market }: { market: Market }) => {
+  const { data: marketState } = useMarketState(market.id);
+
+  const { proposals: successorProposals, loading: successorLoading } =
+    useSuccessorMarketProposals(market.id);
+
+  const { proposals: updateMarketProposals, loading: updateMarketLoading } =
+    useUpdateMarketProposals(market.id);
+
+  const {
+    proposals: updateMarketStateProposals,
+    loading: updateMarketStateLoading,
+  } = useUpdateMarketStateProposals(market.id);
+
+  const { data: maliciousOracle, loading: oracleLoading } = useMaliciousOracle(
+    market.id
+  );
+
+  const loading =
+    successorLoading ||
+    updateMarketLoading ||
+    updateMarketStateLoading ||
+    oracleLoading;
+
+  if (loading) {
+    return null;
+  }
+
+  const banners = compact([
+    updateMarketStateProposals.length
+      ? {
+          kind: 'UpdateMarketState' as const,
+          proposals: updateMarketStateProposals,
+        }
+      : undefined,
+    updateMarketProposals.length
+      ? {
+          kind: 'UpdateMarket' as const,
+          proposals: updateMarketProposals,
+        }
+      : undefined,
+    successorProposals.length
+      ? {
+          kind: 'NewMarket' as const,
+          proposals: successorProposals,
+        }
+      : undefined,
+    marketState === MarketState.STATE_SETTLED
+      ? {
+          kind: 'Settled' as const,
+          market,
+        }
+      : undefined,
+    marketState === MarketState.STATE_SUSPENDED_VIA_GOVERNANCE
+      ? {
+          kind: 'Suspended' as const,
+          market,
+        }
+      : undefined,
+    maliciousOracle !== undefined
+      ? {
+          kind: 'Oracle' as const,
+          oracle: maliciousOracle,
+        }
+      : undefined,
+  ]);
+
+  return <BannerQueue banners={banners} market={market} />;
+};
+
+const BannerQueue = ({
+  banners,
+  market,
+}: {
+  banners: Banner[];
+  market: Market;
+}) => {
+  // for showing banner by index
+  const [index, setIndex] = useState(0);
+
+  const banner = banners[index];
+  if (!banner) return null;
+
+  let content = null;
+  let intent = Intent.Primary;
+
+  switch (banner.kind) {
+    case 'UpdateMarket': {
+      content = <MarketUpdateBanner proposals={banner.proposals} />;
+      break;
+    }
+    case 'UpdateMarketState': {
+      content = (
+        <MarketUpdateStateBanner proposals={banner.proposals} market={market} />
+      );
+      break;
+    }
+    case 'NewMarket': {
+      content = <MarketSuccessorProposalBanner proposals={banner.proposals} />;
+      intent = Intent.Warning;
+      break;
+    }
+    case 'Settled': {
+      content = <MarketSettledBanner market={market} />;
+      break;
+    }
+    case 'Suspended': {
+      content = <MarketSuspendedBanner />;
+      intent = Intent.Warning;
+      break;
+    }
+    case 'Oracle': {
+      // @ts-ignore oracle cannot be undefined
+      content = <MarketOracleBanner oracle={banner.oracle} />;
+      intent = Intent.Danger;
+      break;
+    }
+    default: {
+      return null;
+    }
+  }
+
+  const showCount = banners.length > 1;
+
+  const onClose = () => {
+    setIndex((x) => x + 1);
+  };
+
+  return (
+    <NotificationBanner
+      intent={intent}
+      onClose={onClose}
+      data-testid="market-banner"
+    >
+      <div className="flex items-center justify-between">
+        {content}
+        {showCount ? (
+          <p>
+            {index + 1}/{banners.length}
+          </p>
+        ) : null}
+      </div>
+    </NotificationBanner>
+  );
+};

apps/trading/components/market-banner/market-oracle-banner.spec.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MarketOracleBanner } from './market-oracle-banner';
+
+jest.mock('@vegaprotocol/markets', () => ({
+  ...jest.requireActual('@vegaprotocol/markets'),
+  OracleDialog: ({ open }: { open: boolean }) => {
+    return <div data-testid="oracle-dialog">{open ? 'open' : 'closed'}</div>;
+  },
+}));
+
+const oracle = {
+  dataSourceSpecId: 'someId',
+  provider: {
+    name: 'Test oracle',
+    url: 'https://zombo.com',
+    description_markdown:
+      'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
+    oracle: {
+      status: 'COMPROMISED' as const,
+      status_reason: 'Reason here',
+      first_verified: '2021-01-01T00:00:00Z',
+      last_verified: '2022-01-01T00:00:00Z',
+      type: 'public_key' as const,
+      public_key: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
+    },
+    proofs: [
+      {
+        format: 'url' as const,
+        available: true,
+        type: 'web' as const,
+        url: 'https://proofweb.com',
+      },
+      {
+        format: 'signed_message' as const,
+        available: true,
+        type: 'public_key' as const,
+        public_key: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
+        message: 'SOMEHEX',
+      },
+    ],
+    github_link:
+      'https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/eth_address-0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC.toml',
+  },
+};
+
+describe('MarketOracleBanner', () => {
+  it('should render successfully', async () => {
+    render(<MarketOracleBanner oracle={oracle} />);
+
+    expect(screen.getByTestId('oracle-dialog')).toHaveTextContent('closed');
+    expect(screen.getByTestId('oracle-banner-status')).toHaveTextContent(
+      'COMPROMISED'
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Show more' }));
+    expect(screen.getByTestId('oracle-dialog')).toHaveTextContent('open');
+  });
+});

apps/trading/components/market-banner/market-oracle-banner.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Trans } from 'react-i18next';
+import {
+  OracleDialog,
+  useOracleStatuses,
+  type useMaliciousOracle,
+} from '@vegaprotocol/markets';
+import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+
+export type Oracle = ReturnType<typeof useMaliciousOracle>['data'];
+
+export const MarketOracleBanner = ({
+  oracle,
+}: {
+  oracle: NonNullable<Oracle>;
+}) => {
+  const [open, setOpen] = useState(false);
+  const oracleStatuses = useOracleStatuses();
+
+  return (
+    <>
+      <OracleDialog open={open} onChange={setOpen} {...oracle} />
+      <p>
+        <Trans
+          defaults="Oracle status for this market is <0>{{status}}</0>. {{description}} <1>Show more</1>"
+          components={[
+            <span key="oracle-status" data-testid="oracle-banner-status">
+              status
+            </span>,
+            <ButtonLink
+              key="oracle-button"
+              onClick={() => setOpen((x) => !x)}
+              data-testid="oracle-banner-dialog-trigger"
+            >
+              Show more
+            </ButtonLink>,
+          ]}
+          values={{
+            status: oracle.provider.oracle.status,
+            description: oracleStatuses[oracle.provider.oracle.status],
+          }}
+        />
+      </p>
+    </>
+  );
+};

apps/trading/components/market-banner/market-settled-banner.spec.tsx

@@ -0,0 +1,219 @@
+import { render, screen } from '@testing-library/react';
+import { addDays, subDays, subHours } from 'date-fns';
+import { MockedProvider, type MockedResponse } from '@apollo/react-testing';
+import {
+  SuccessorMarketDocument,
+  MarketCandlesDocument,
+  MarketCandlesUpdateDocument,
+  SuccessorMarketIdDocument,
+  type Market,
+  type SuccessorMarketQuery,
+  type SuccessorMarketQueryVariables,
+  type MarketCandlesQuery,
+  type MarketCandlesQueryVariables,
+  type MarketCandlesUpdateSubscription,
+  type MarketCandlesUpdateSubscriptionVariables,
+  type SuccessorMarketIdQuery,
+  type SuccessorMarketIdQueryVariables,
+} from '@vegaprotocol/markets';
+import { MemoryRouter } from 'react-router-dom';
+import { createMarketFragment } from '@vegaprotocol/mock';
+import { Interval, MarketState, MarketTradingMode } from '@vegaprotocol/types';
+import { MarketSettledBanner } from './market-settled-banner';
+
+describe('MarketSettledBanner', () => {
+  const now = 1701388800000;
+  const origDateNow = Date.now;
+
+  beforeAll(() => {
+    Date.now = () => now;
+  });
+
+  afterAll(() => {
+    Date.now = origDateNow;
+  });
+
+  const marketId = 'market-0';
+  const successorId = 'successor-id';
+  const successorName = 'successor-name';
+
+  const successorMarketIdMock: MockedResponse<
+    SuccessorMarketIdQuery,
+    SuccessorMarketIdQueryVariables
+  > = {
+    request: {
+      query: SuccessorMarketIdDocument,
+      variables: {
+        marketId: marketId,
+      },
+    },
+    result: {
+      data: {
+        market: {
+          successorMarketID: successorId,
+        },
+      },
+    },
+  };
+
+  const successorMock: MockedResponse<
+    SuccessorMarketQuery,
+    SuccessorMarketQueryVariables
+  > = {
+    request: {
+      query: SuccessorMarketDocument,
+      variables: {
+        marketId: successorId,
+      },
+    },
+    result: {
+      data: {
+        market: {
+          id: successorId,
+          state: MarketState.STATE_ACTIVE,
+          tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
+          positionDecimalPlaces: 0,
+          tradableInstrument: {
+            instrument: {
+              name: successorName,
+              code: 'code',
+            },
+          },
+          proposal: {
+            id: 'proposal-id',
+          },
+        },
+      },
+    },
+  };
+
+  const since = subDays(new Date(now), 5).toISOString();
+  const successorCandlesMock: MockedResponse<
+    MarketCandlesQuery,
+    MarketCandlesQueryVariables
+  > = {
+    request: {
+      query: MarketCandlesDocument,
+      variables: {
+        marketId: successorId,
+        interval: Interval.INTERVAL_I1H,
+        since,
+      },
+    },
+    result: {
+      data: {
+        marketsConnection: {
+          edges: [
+            {
+              node: {
+                candlesConnection: {
+                  edges: [
+                    {
+                      node: {
+                        high: '100',
+                        low: '100',
+                        open: '100',
+                        close: '100',
+                        volume: '100',
+                        periodStart: subHours(new Date(now), 1).toISOString(),
+                      },
+                    },
+                    {
+                      node: {
+                        high: '100',
+                        low: '100',
+                        open: '100',
+                        close: '200',
+                        volume: '100',
+                        periodStart: subHours(new Date(now), 2).toISOString(),
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  };
+
+  const successorCandlesUpdateMock: MockedResponse<
+    MarketCandlesUpdateSubscription,
+    MarketCandlesUpdateSubscriptionVariables
+  > = {
+    request: {
+      query: MarketCandlesUpdateDocument,
+      variables: {
+        marketId: successorId,
+        interval: Interval.INTERVAL_I1H,
+        // @ts-ignore this query doesn't need the 'since' variable, but the data-provider
+        // uses all variables for both the query and the subscription so its needed here
+        // to match the mock
+        since,
+      },
+    },
+    result: {
+      data: {
+        candles: {
+          high: '100',
+          low: '100',
+          open: '100',
+          close: '100',
+          volume: '100',
+          periodStart: '2020-01-01T00:00:00',
+        },
+      },
+    },
+  };
+
+  const renderComponent = (market: Market, mocks?: MockedResponse[]) => {
+    return render(
+      <MemoryRouter>
+        <MockedProvider mocks={mocks}>
+          <MarketSettledBanner market={market} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+  };
+
+  it('shows that the market is settled if there is no successor', () => {
+    const market = createMarketFragment({
+      id: marketId,
+      successorMarketID: undefined,
+    });
+    renderComponent(market, [successorMarketIdMock, successorMock]);
+    expect(
+      screen.getByText('This market has been settled')
+    ).toBeInTheDocument();
+  });
+
+  it('shows that the market has been succeeded with an active market', async () => {
+    const market = createMarketFragment({
+      id: marketId,
+      successorMarketID: successorId,
+      marketTimestamps: {
+        close: addDays(new Date(now), 1).toISOString(),
+      },
+    });
+    renderComponent(market, [
+      successorMarketIdMock,
+      successorMock,
+      successorCandlesMock,
+      successorCandlesUpdateMock,
+    ]);
+    expect(
+      await screen.findByText('This market has been succeeded')
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(/has a 24h trading volume of 200$/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('This market expires in 1 day.')
+    ).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: successorName })).toHaveAttribute(
+      'href',
+      `/markets/${successorId}`
+    );
+  });
+});

apps/trading/components/market-banner/market-settled-banner.tsx

@@ -0,0 +1,122 @@
+import { Link } from 'react-router-dom';
+import { Trans } from 'react-i18next';
+import { isBefore, formatDuration, intervalToDuration } from 'date-fns';
+import {
+  calcCandleVolume,
+  useCandles,
+  useSuccessorMarket,
+  type Market,
+} from '@vegaprotocol/markets';
+import {
+  addDecimalsFormatNumber,
+  getMarketExpiryDate,
+  isNumeric,
+} from '@vegaprotocol/utils';
+import { useT, ns } from '../../lib/use-t';
+import { Links } from '../../lib/links';
+
+const getExpiryDate = (tags: string[], close?: string): Date | null => {
+  const expiryDate = getMarketExpiryDate(tags);
+  return expiryDate || (close && new Date(close)) || null;
+};
+
+export const MarketSettledBanner = ({ market }: { market: Market }) => {
+  const t = useT();
+  const { data: successorMarket } = useSuccessorMarket(market.id);
+
+  const expiry = market
+    ? getExpiryDate(
+        market.tradableInstrument.instrument.metadata.tags || [],
+        market.marketTimestamps.close
+      )
+    : null;
+
+  const duration =
+    expiry && isBefore(new Date(Date.now()), expiry)
+      ? intervalToDuration({ start: new Date(Date.now()), end: expiry })
+      : null;
+
+  const { oneDayCandles } = useCandles({
+    marketId: successorMarket?.id,
+  });
+
+  const candleVolume = oneDayCandles?.length
+    ? calcCandleVolume(oneDayCandles)
+    : null;
+
+  const successorVolume =
+    candleVolume && isNumeric(successorMarket?.positionDecimalPlaces)
+      ? addDecimalsFormatNumber(
+          candleVolume,
+          successorMarket?.positionDecimalPlaces as number
+        )
+      : null;
+
+  if (successorMarket) {
+    return (
+      <div>
+        <p>{t('This market has been succeeded')}</p>
+        {duration && (
+          <div className="mt-1">
+            <span>
+              {t('This market expires in {{duration}}.', {
+                duration: formatDuration(duration, {
+                  format: [
+                    'years',
+                    'months',
+                    'weeks',
+                    'days',
+                    'hours',
+                    'minutes',
+                  ],
+                }),
+              })}
+            </span>
+            <>
+              {' '}
+              {successorVolume ? (
+                <Trans
+                  defaults="The successor market <0>{{instrumentName}}</0> has a 24h trading volume of {{successorVolume}}"
+                  values={{
+                    successorVolume,
+                    instrumentName:
+                      successorMarket?.tradableInstrument.instrument.name,
+                  }}
+                  components={[
+                    <Link
+                      to={Links.MARKET(successorMarket.id)}
+                      key="link"
+                      target="_blank"
+                    >
+                      successor market name
+                    </Link>,
+                  ]}
+                />
+              ) : (
+                <Trans
+                  defaults="The successor market is <0>{{instrumentName}}</0>"
+                  values={{
+                    instrumentName:
+                      successorMarket?.tradableInstrument.instrument.name,
+                  }}
+                  components={[
+                    <Link
+                      to={Links.MARKET(successorMarket.id)}
+                      key="link"
+                      target="_blank"
+                    >
+                      successor market name
+                    </Link>,
+                  ]}
+                  ns={ns}
+                />
+              )}
+            </>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return <p>{t('This market has been settled')}</p>;
+};