Merge remote-tracking branch 'origin/develop' into fix/claim

.github/workflows/publish-dist.yml

@@ -191,36 +191,34 @@ jobs:
             -d '{"query": "mutation{triggerDeploy(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id status}}"}' \
             https://api.fleek.co/graphql
 
-      - name: Update vega.trading DNS to redirect to the new console
+      - name: Checkout vega.xyz
         if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        uses: actions/checkout@v3
+        with:
+          repository: vegaprotocol/vega.xyz
+          path: './vega-xyz'
+          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+
+      - name: Update hash on interstitial page
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        env:
+          GH_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
         run: |
           curl -L https://dist.ipfs.tech/kubo/v0.20.0/kubo_v0.20.0_linux-amd64.tar.gz -o kubo.tgz
           tar -xzf kubo.tgz
           export PATH="$PATH:$PWD/kubo"
           which ipfs
           new_hash=$(cat ${{ matrix.app }}-ipfs-hash)
-          new_cid=$(ipfs cid format -v 1 -b base32 $new_hash)
-
-          # Generate console URL
-          new_console_url_type=ipfs
-          # new_console_url_type=ipns
-          new_console_url_domain=cf-ipfs.com
-          # new_console_url_domain=dweb.link
-          new_console_url="https://${new_cid}.${new_console_url_type}.${new_console_url_domain}/"
-          echo "new_console_url=${new_console_url}"
-
-          # Update record in DNSimple
-          # docs: https://developer.dnsimple.com/v2/zones/records/#updateZoneRecord
-          dnsimple_account_id=84895
-          dnsimple_zone_name=vega.trading
-          dnsimple_record_id=44409591
-          # see: https://dnsimple.com/a/84895/domains/vega.trading/records/44409591/edit
-
-          curl  -H 'Authorization: Bearer ${{ secrets.DNSIMPLE_API_TOKEN }}' \
-                -H 'Accept: application/json' \
-                -H 'Content-Type: application/json' \
-                -X PATCH \
-                -d "{
-                      \"content\": \"${new_console_url}\"
-                }" \
-                https://api.dnsimple.com/v2/${dnsimple_account_id}/zones/${dnsimple_zone_name}/records/${dnsimple_record_id}
+          cd vega-xyz
+          ./interstital-allow-update.sh ${new_hash}
+          git config --global user.email "vega-ci-bot@vega.xyz"
+          git config --global user.name "vega-ci-bot"
+          branch_name=${{ github.ref_name }}-hash-update
+          git checkout -b "${branch_name}"
+          git add interstitial-allow.json netlify.toml
+          commit_msg="feat(ci): Update CID for console release @ ${{ github.ref }}"
+          git commit -m "${commit_msg}"
+          git push -u origin "${branch_name}"
+          pr_url="$(gh pr create --title "${commit_msg}" --body 'update ipfs hash for console @ ${{ github.ref }}')"
+          echo $pr_url
+          gh pr merge --auto $pr_url

apps/explorer/src/app/components/header/header.spec.tsx

@@ -3,7 +3,6 @@ import { Header } from './header';
 import { MemoryRouter } from 'react-router-dom';
 
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
   NetworkSwitcher: () => (
     <div data-testid="network-switcher">NetworkSwitcher</div>
   ),

apps/governance-e2e/src/integration/view/rewards.cy.ts

@@ -63,6 +63,7 @@ context(
       });
 
       it('should have option to go to last and newest page', function () {
+        waitForBeginningOfEpoch();
         cy.getByTestId('goto-last-page').click();
         cy.getByTestId('epoch-total-rewards-table')
           .last()

apps/governance-e2e/src/support/wallet-teardown.functions.ts

@@ -3,6 +3,7 @@ import {
   StakingBridge,
   Token,
   TokenVesting,
+  TokenFaucetable,
   CollateralBridge,
 } from '@vegaprotocol/smart-contracts';
 import { ethers, Wallet } from 'ethers';
@@ -40,7 +41,7 @@ export async function depositAsset(
   decimalPlaces: number
 ) {
   // Approve asset
-  const faucet = new Token(assetEthAddress, signer);
+  const faucet = new TokenFaucetable(assetEthAddress, signer);
   cy.wrap(
     faucet.approve(Erc20BridgeAddress, amount + '0'.repeat(decimalPlaces + 1)),
     {
@@ -61,7 +62,7 @@ export async function depositAsset(
 }
 
 export async function faucetAsset(assetEthAddress: string) {
-  const faucet = new Token(assetEthAddress, signer);
+  const faucet = new TokenFaucetable(assetEthAddress, signer);
   await promiseWithTimeout(faucet.faucet(), 10 * 60 * 1000, 'faucet asset');
 }
 

apps/governance/src/app.tsx

@@ -204,44 +204,31 @@ const AppContainer = () => {
   ]);
 
   useEffect(() => {
-    if (ENV.dsn && telemetryOn === 'true') {
+    if (ENV.dsn && telemetryOn) {
       Sentry.init({
         dsn: ENV.dsn,
         tracesSampleRate: 0.1,
         enabled: true,
         environment: VEGA_ENV,
         release: GIT_COMMIT_HASH,
-        beforeSend(event, hint) {
-          const error = hint?.originalException;
-          const errorIsString = typeof error === 'string';
-          const errorIsObject = error instanceof Error;
+        beforeSend(event) {
           const requestUrl = event.request?.url;
           const transaction = event.transaction;
 
-          if (
-            (errorIsString && error.includes('failed to get party ID')) ||
-            (errorIsObject &&
-              error?.message?.includes('failed to get party ID'))
-          ) {
-            // This error is caused by a pubkey making an API request before
-            // it has interacted with the chain. This isn't needed in Sentry.
-            return null;
-          }
-
           const updatedRequest =
-            requestUrl && requestUrl.includes('/claim?')
+            requestUrl && requestUrl.includes('/test?')
               ? { ...event.request, url: removeQueryParams(requestUrl) }
               : event.request;
 
           const updatedTransaction =
-            transaction && transaction.includes('/claim?')
+            transaction && transaction.includes('/test?')
               ? removeQueryParams(transaction)
               : transaction;
 
           const updatedBreadcrumbs = event.breadcrumbs?.map((breadcrumb) => {
             if (
               breadcrumb.type === 'navigation' &&
-              breadcrumb.data?.to?.includes('/claim?')
+              breadcrumb.data?.to?.includes('/test?')
             ) {
               return {
                 ...breadcrumb,

apps/governance/src/components/eth-connect-prompt/eth-connect-promp.tsx

@@ -1,14 +1,23 @@
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
-import { useWeb3ConnectStore } from '@vegaprotocol/web3';
+
+import {
+  AppStateActionType,
+  useAppState,
+} from '../../contexts/app-state/app-state-context';
 
 export const EthConnectPrompt = () => {
   const { t } = useTranslation();
-  const { open } = useWeb3ConnectStore();
+  const { appDispatch } = useAppState();
   return (
     <Button
       variant="default"
-      onClick={open}
+      onClick={() =>
+        appDispatch({
+          type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
+          isOpen: true,
+        })
+      }
       fill={true}
       data-testid="connect-to-eth-btn"
     >

apps/governance/src/components/eth-wallet-container/eth-wallet-container.tsx

@@ -2,7 +2,10 @@ import { Button } from '@vegaprotocol/ui-toolkit';
 import { useWeb3React } from '@web3-react/core';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useWeb3ConnectStore } from '@vegaprotocol/web3';
+import {
+  AppStateActionType,
+  useAppState,
+} from '../../contexts/app-state/app-state-context';
 
 export const EthWalletContainer = ({
   children,
@@ -11,12 +14,21 @@ export const EthWalletContainer = ({
 }) => {
   const { account } = useWeb3React();
   const { t } = useTranslation();
-  const { open } = useWeb3ConnectStore();
+  const { appDispatch } = useAppState();
 
   if (!account) {
     return (
       <div className="w-full text-center">
-        <Button onClick={open}>{t('connectEthWallet')}</Button>
+        <Button
+          onClick={() =>
+            appDispatch({
+              type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
+              isOpen: true,
+            })
+          }
+        >
+          {t('connectEthWallet')}
+        </Button>
       </div>
     );
   }

apps/governance/src/components/eth-wallet/eth-wallet.tsx

@@ -27,11 +27,7 @@ import {
 import { Loader } from '@vegaprotocol/ui-toolkit';
 import colors from 'tailwindcss/colors';
 import { useBalances } from '../../lib/balances/balances-store';
-import {
-  useEthereumConfig,
-  useWeb3ConnectStore,
-  useWeb3Disconnect,
-} from '@vegaprotocol/web3';
+import { useEthereumConfig, useWeb3Disconnect } from '@vegaprotocol/web3';
 import { getChainName } from '@vegaprotocol/web3';
 
 const removeLeadingAddressSymbol = (key: string) => {
@@ -193,7 +189,6 @@ export const EthWallet = () => {
   const pendingTxs = usePendingTransactions();
   const disconnect = useWeb3Disconnect(connector);
   const { config } = useEthereumConfig();
-  const { open } = useWeb3ConnectStore();
 
   return (
     <WalletCard>
@@ -238,7 +233,12 @@ export const EthWallet = () => {
           ) : (
             <Button
               fill={true}
-              onClick={open}
+              onClick={() =>
+                appDispatch({
+                  type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
+                  isOpen: true,
+                })
+              }
               data-testid="connect-to-eth-wallet-button"
             >
               {t('connectEthWalletToAssociate')}

apps/governance/src/components/vega-wallet/download-wallet-prompt.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
-import { ExternalLinks } from '@vegaprotocol/environment';
+import { ExternalLinks } from '@vegaprotocol/utils';
 
 export const DownloadWalletPrompt = () => {
   const { t } = useTranslation();

apps/governance/src/components/web3-connector/web3-connector.tsx

@@ -25,26 +25,20 @@ export function Web3Connector({
   connectors,
   chainId,
 }: Web3ConnectorProps) {
-  const { open, close, isOpen } = useWeb3ConnectStore();
-
+  const { appState, appDispatch } = useAppState();
   const setDialogOpen = useCallback(
     (isOpen: boolean) => {
-      if (isOpen) {
-        open();
-      } else {
-        close();
-      }
+      appDispatch({ type: AppStateActionType.SET_ETH_WALLET_OVERLAY, isOpen });
     },
-    [open, close]
+    [appDispatch]
   );
-
   const appChainId = Number(chainId);
   return (
     <>
       <Web3Content appChainId={appChainId}>{children}</Web3Content>
       <Web3ConnectDialog
         connectors={connectors}
-        dialogOpen={isOpen}
+        dialogOpen={appState.ethConnectOverlay}
         setDialogOpen={setDialogOpen}
         desiredChainId={appChainId}
       />

apps/governance/src/contexts/app-state/app-state-context.ts

@@ -34,6 +34,9 @@ export interface AppState {
   /** Whether or not the manage VEGA wallet overlay is open */
   vegaWalletManageOverlay: boolean;
 
+  /** Whether or not the connect to Ethereum wallet overlay is open */
+  ethConnectOverlay: boolean;
+
   /**  Whether or not the transaction modal is open */
   transactionOverlay: boolean;
   /**
@@ -54,6 +57,7 @@ export enum AppStateActionType {
   REFRESH_BALANCES,
   SET_VEGA_WALLET_OVERLAY,
   SET_VEGA_WALLET_MANAGE_OVERLAY,
+  SET_ETH_WALLET_OVERLAY,
   SET_DRAWER,
   REFRESH_ASSOCIATED_BALANCES,
   SET_ASSOCIATION_BREAKDOWN,
@@ -77,6 +81,10 @@ export type AppStateAction =
       type: AppStateActionType.SET_VEGA_WALLET_MANAGE_OVERLAY;
       isOpen: boolean;
     }
+  | {
+      type: AppStateActionType.SET_ETH_WALLET_OVERLAY;
+      isOpen: boolean;
+    }
   | {
       type: AppStateActionType.SET_DRAWER;
       isOpen: boolean;

apps/governance/src/contexts/app-state/app-state-provider.tsx

@@ -16,6 +16,7 @@ const initialAppState: AppState = {
   totalSupply: new BigNumber(0),
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
+  ethConnectOverlay: false,
   transactionOverlay: false,
   bannerMessage: '',
   disconnectNotice: false,
@@ -44,6 +45,12 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
         vegaWalletOverlay: action.isOpen ? false : state.vegaWalletOverlay,
       };
     }
+    case AppStateActionType.SET_ETH_WALLET_OVERLAY: {
+      return {
+        ...state,
+        ethConnectOverlay: action.isOpen,
+      };
+    }
     case AppStateActionType.SET_DRAWER: {
       return {
         ...state,

apps/governance/src/i18n/translations/dev.json

@@ -594,9 +594,7 @@
   "numberOfAgainstVotes": "Number of votes against",
   "yesPercentage": "Yes percentage",
   "noPercentage": "No percentage",
-  "proposalJson": "Full proposal JSON",
-  "proposalDetails": "Proposal details",
-  "proposalDescription": "Description",
+  "proposalTerms": "Proposal terms",
   "currentlySetTo": "Currently expected to ",
   "currently": "currently",
   "finalOutcomeMayDiffer": "Final outcome may differ",

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

@@ -12,8 +12,7 @@ import { useRefreshAfterEpoch } from '../../hooks/use-refresh-after-epoch';
 import { ProposalsListItem } from '../proposals/components/proposals-list-item';
 import { ProtocolUpgradeProposalsListItem } from '../proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item';
 import Routes from '../routes';
-import { ExternalLinks } from '@vegaprotocol/environment';
-import { removePaginationWrapper } from '@vegaprotocol/utils';
+import { ExternalLinks, removePaginationWrapper } from '@vegaprotocol/utils';
 import { useNodesQuery } from '../staking/home/__generated__/Nodes';
 import { useProposalsQuery } from '../proposals/proposals/__generated__/Proposals';
 import {

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

@@ -53,6 +53,7 @@ const mockAppState: AppState = {
   totalSupply: new BigNumber(65000000),
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
+  ethConnectOverlay: false,
   transactionOverlay: false,
   bannerMessage: '',
   disconnectNotice: false,

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

@@ -1 +0,0 @@
-export { ProposalDescription } from './proposal-description';

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

@@ -1,51 +0,0 @@
-import ReactMarkdown from 'react-markdown';
-import classnames from 'classnames';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Icon, RoundedWrapper } from '@vegaprotocol/ui-toolkit';
-import { SubHeading } from '../../../../components/heading';
-
-export const ProposalDescription = ({
-  description,
-}: {
-  description: string;
-}) => {
-  const { t } = useTranslation();
-  const [showDescription, setShowDescription] = useState(false);
-  const showDescriptionIconClasses = classnames('mb-4', {
-    'rotate-180': showDescription,
-  });
-
-  return (
-    <section data-testid="proposal-description">
-      <button
-        onClick={() => setShowDescription(!showDescription)}
-        data-testid="proposal-description-toggle"
-      >
-        <div className="flex items-center gap-3">
-          <SubHeading title={t('proposalDescription')} />
-          <div className={showDescriptionIconClasses}>
-            <Icon name="chevron-down" size={8} />
-          </div>
-        </div>
-      </button>
-
-      {showDescription && (
-        <RoundedWrapper paddingBottom={true} marginBottomLarge={true}>
-          <div className="p-2">
-            <ReactMarkdown
-              className="react-markdown-container"
-              /* Prevents HTML embedded in the description from rendering */
-              skipHtml={true}
-              /* Stops users embedding images which could be used for tracking  */
-              disallowedElements={['img']}
-              linkTarget="_blank"
-            >
-              {description}
-            </ReactMarkdown>
-          </div>
-        </RoundedWrapper>
-      )}
-    </section>
-  );
-};

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

@@ -206,6 +206,28 @@ describe('Proposal header', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('Renders Freeform proposal - long rationale (105 chars) - details', () => {
+    renderComponent(
+      generateProposal({
+        id: 'long',
+        rationale: {
+          title: '0x0',
+          description:
+            'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dolor.',
+        },
+        terms: {
+          change: {
+            __typename: 'NewFreeform',
+          },
+        },
+      }),
+      false
+    );
+    expect(screen.getByTestId('proposal-description')).toHaveTextContent(
+      /Class aptent/
+    );
+  });
+
   // Remove once proposals have rationale and re-enable above tests
   it('Renders Freeform proposal - id for title', () => {
     renderComponent(

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

@@ -5,6 +5,7 @@ import { Heading, SubHeading } from '../../../../components/heading';
 import type { ReactNode } from 'react';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import ReactMarkdown from 'react-markdown';
 import { truncateMiddle } from '../../../../lib/truncate-middle';
 import { CurrentProposalState } from '../current-proposal-state';
 import { ProposalInfoLabel } from '../proposal-info-label';
@@ -22,7 +23,12 @@ export const ProposalHeader = ({
   let details: ReactNode;
   let proposalType = '';
 
-  const title = proposal?.rationale.title.trim();
+  let title = proposal?.rationale.title.trim();
+  let description = proposal?.rationale.description.trim();
+  if (title?.length === 0 && description && description.length > 0) {
+    title = description;
+    description = '';
+  }
 
   const titleContent = shorten(title ?? '', 100);
 
@@ -139,6 +145,23 @@ export const ProposalHeader = ({
           {details}
         </div>
       )}
+
+      {description && !isListItem && (
+        <div data-testid="proposal-description">
+          {/*<div className="uppercase mr-2">{t('ProposalDescription')}:</div>*/}
+          <SubHeading title={t('ProposalDescription')} />
+          <ReactMarkdown
+            className="react-markdown-container"
+            /* Prevents HTML embedded in the description from rendering */
+            skipHtml={true}
+            /* Stops users embedding images which could be used for tracking  */
+            disallowedElements={['img']}
+            linkTarget="_blank"
+          >
+            {description}
+          </ReactMarkdown>
+        </div>
+      )}
     </>
   );
 };

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

@@ -1 +0,0 @@
-export { ProposalJson } from './proposal-json';

apps/governance/src/routes/proposals/components/proposal-terms-json/index.tsx

@@ -0,0 +1 @@
+export { ProposalTermsJson } from './proposal-terms-json';

apps/governance/src/routes/proposals/components/proposal-terms-json/proposal-terms-json.tsx

@@ -1,15 +1,15 @@
-import classnames from 'classnames';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
-import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { PartialDeep } from 'type-fest';
+import type * as Schema from '@vegaprotocol/types';
+import { useState } from 'react';
+import classnames from 'classnames';
 
-export const ProposalJson = ({
-  proposal,
+export const ProposalTermsJson = ({
+  terms,
 }: {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  terms: PartialDeep<Schema.ProposalTerms>;
 }) => {
   const { t } = useTranslation();
   const [showDetails, setShowDetails] = useState(false);
@@ -18,20 +18,20 @@ export const ProposalJson = ({
   });
 
   return (
-    <section data-testid="proposal-json">
+    <section>
       <button
         onClick={() => setShowDetails(!showDetails)}
-        data-testid="proposal-json-toggle"
+        data-testid="proposal-terms-toggle"
       >
         <div className="flex items-center gap-3">
-          <SubHeading title={t('proposalJson')} />
+          <SubHeading title={t('proposalTerms')} />
           <div className={showDetailsIconClasses}>
             <Icon name="chevron-down" size={8} />
           </div>
         </div>
       </button>
 
-      {showDetails && <SyntaxHighlighter data={proposal} />}
+      {showDetails && <SyntaxHighlighter data={terms} />}
     </section>
   );
 };

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

@@ -1 +0,0 @@
-export { ProposalTerms } from './proposal-terms';

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

@@ -1,142 +0,0 @@
-import {
-  RoundedWrapper,
-  KeyValueTable,
-  KeyValueTableRow,
-  Icon,
-} from '@vegaprotocol/ui-toolkit';
-import { BigNumber } from '../../../../lib/bignumber';
-import { SubHeading } from '../../../../components/heading';
-import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import classnames from 'classnames';
-
-interface ProposalTermsProps {
-  data: Record<string, unknown>;
-}
-
-const getParsedValue = (value: unknown) => {
-  if (typeof value === 'string') {
-    try {
-      // Check if value is a number string - if so use bignumber to maintain precision
-      if (/^\d+(\.\d+)?$/.test(value)) {
-        return new BigNumber(value).toString();
-      } else {
-        // This would convert, for example, a JSON object ('{"key":"value"}')
-        // into an actual JS object ({key: "value"})
-        return JSON.parse(value);
-      }
-    } catch (error) {
-      return value;
-    }
-  } else {
-    return value;
-  }
-};
-
-const RenderKeyValue = ({
-  title,
-  value,
-}: {
-  title: string;
-  value: string | number;
-}) => (
-  <KeyValueTable>
-    <KeyValueTableRow>
-      {title}
-      {value}
-    </KeyValueTableRow>
-  </KeyValueTable>
-);
-
-const RenderArray = ({ title, array }: { title: string; array: unknown[] }) => {
-  if (array.every((item) => typeof item === 'string')) {
-    return <RenderKeyValue title={title} value={array.join(', ')} />;
-  } else {
-    return (
-      <div>
-        <div className="mb-2">{title}</div>
-        {array.map((item, index) => (
-          <div key={index}>
-            <ProposalTermsRenderer data={item as Record<string, unknown>} />
-          </div>
-        ))}
-      </div>
-    );
-  }
-};
-
-// Working with 'unknown' type as a proposal's terms can be in many shapes
-const RenderTerm = ({ title, value }: { title: string; value: unknown }) => {
-  const parsedValue = getParsedValue(value);
-
-  if (parsedValue === null || typeof parsedValue === 'boolean') {
-    return <RenderKeyValue title={title} value={String(parsedValue)} />;
-  } else if (
-    typeof parsedValue === 'string' ||
-    typeof parsedValue === 'number'
-  ) {
-    return <RenderKeyValue title={title} value={parsedValue} />;
-  } else if (typeof parsedValue === 'object') {
-    if (Array.isArray(parsedValue)) {
-      return <RenderArray title={title} array={parsedValue} />;
-    } else {
-      return (
-        <div>
-          <div className="my-2">{title}</div>
-          <ProposalTermsRenderer
-            data={parsedValue as Record<string, unknown>}
-          />
-        </div>
-      );
-    }
-  } else if (parsedValue === undefined) {
-    return <span>{'undefined'}</span>;
-  } else {
-    return <span>{String(parsedValue)}</span>;
-  }
-};
-
-const ProposalTermsRenderer = ({ data }: ProposalTermsProps) => {
-  return (
-    <RoundedWrapper paddingBottom={true}>
-      {Object.keys(data)
-        .filter(
-          (key) =>
-            !['__typename', 'closingDatetime', 'enactmentDatetime'].includes(
-              key
-            )
-        )
-        .map((key, index) => (
-          <div key={index}>
-            <RenderTerm title={key} value={data[key]} />
-          </div>
-        ))}
-    </RoundedWrapper>
-  );
-};
-
-export const ProposalTerms = ({ data }: ProposalTermsProps) => {
-  const { t } = useTranslation();
-  const [showTerms, setShowTerms] = useState(false);
-  const showTermsIconClasses = classnames('mb-4', {
-    'rotate-180': showTerms,
-  });
-
-  return (
-    <section data-testid="proposal-terms">
-      <button
-        onClick={() => setShowTerms(!showTerms)}
-        data-testid="proposal-terms-toggle"
-      >
-        <div className="flex items-center gap-3">
-          <SubHeading title={t('proposalDetails')} />
-          <div className={showTermsIconClasses}>
-            <Icon name="chevron-down" size={8} />
-          </div>
-        </div>
-      </button>
-
-      {showTerms && <ProposalTermsRenderer data={data} />}
-    </section>
-  );
-};

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

@@ -25,11 +25,8 @@ jest.mock('../proposal-detail-header/proposal-header', () => ({
 jest.mock('../proposal-change-table', () => ({
   ProposalChangeTable: () => <div data-testid="proposal-change-table"></div>,
 }));
-jest.mock('../proposal-json', () => ({
-  ProposalJson: () => <div data-testid="proposal-json"></div>,
-}));
-jest.mock('../proposal-terms/proposal-terms', () => ({
-  ProposalTerms: () => <div data-testid="proposal-terms"></div>,
+jest.mock('../proposal-terms-json', () => ({
+  ProposalTermsJson: () => <div data-testid="proposal-terms-json"></div>,
 }));
 jest.mock('../proposal-votes-table', () => ({
   ProposalVotesTable: () => <div data-testid="proposal-votes-table"></div>,
@@ -52,8 +49,7 @@ it('renders each section', async () => {
   render(<Proposal proposal={proposal as ProposalQuery['proposal']} />);
   expect(await screen.findByTestId('proposal-header')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-change-table')).toBeInTheDocument();
-  expect(screen.getByTestId('proposal-json')).toBeInTheDocument();
-  expect(screen.getByTestId('proposal-terms')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-terms-json')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-votes-table')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-vote-details')).toBeInTheDocument();
   expect(screen.queryByTestId('proposal-list-asset')).not.toBeInTheDocument();

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

@@ -6,10 +6,8 @@ import { AsyncRenderer, RoundedWrapper } from '@vegaprotocol/ui-toolkit';
 import { ProposalHeader } from '../proposal-detail-header/proposal-header';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import { ProposalDescription } from '../proposal-description';
 import { ProposalChangeTable } from '../proposal-change-table';
-import { ProposalJson } from '../proposal-json';
-import { ProposalTerms } from '../proposal-terms';
+import { ProposalTermsJson } from '../proposal-terms-json';
 import { ProposalVotesTable } from '../proposal-votes-table';
 import { VoteDetails } from '../vote-details';
 import { ListAsset } from '../list-asset';
@@ -22,7 +20,7 @@ export enum ProposalType {
   PROPOSAL_NETWORK_PARAMETER = 'PROPOSAL_NETWORK_PARAMETER',
   PROPOSAL_FREEFORM = 'PROPOSAL_FREEFORM',
 }
-export interface ProposalProps {
+interface ProposalProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }
 
@@ -80,11 +78,9 @@ export const Proposal = ({ proposal }: ProposalProps) => {
     <AsyncRenderer data={params} loading={loading} error={error}>
       <section data-testid="proposal">
         <ProposalHeader proposal={proposal} isListItem={false} />
-
         <div className="my-10">
           <ProposalChangeTable proposal={proposal} />
         </div>
-
         {proposal.terms.change.__typename === 'NewAsset' &&
         proposal.terms.change.source.__typename === 'ERC20' &&
         proposal.id ? (
@@ -94,20 +90,7 @@ export const Proposal = ({ proposal }: ProposalProps) => {
             lifetimeLimit={proposal.terms.change.source.lifetimeLimit}
           />
         ) : null}
-
-        <div className="mb-4">
-          <ProposalDescription description={proposal.rationale.description} />
-        </div>
-
-        <div className="mb-4">
-          <ProposalTerms data={proposal.terms} />
-        </div>
-
-        <div className="mb-6">
-          <ProposalJson proposal={proposal} />
-        </div>
-
-        <div className="mb-10">
+        <div className="mb-12">
           <RoundedWrapper paddingBottom={true}>
             <VoteDetails
               proposal={proposal}
@@ -119,10 +102,10 @@ export const Proposal = ({ proposal }: ProposalProps) => {
             />
           </RoundedWrapper>
         </div>
-
         <div className="mb-4">
           <ProposalVotesTable proposal={proposal} proposalType={proposalType} />
         </div>
+        <ProposalTermsJson terms={proposal.terms} />
       </section>
     </AsyncRenderer>
   );

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

@@ -8,11 +8,12 @@ import { ProposalsListFilter } from '../proposals-list-filter';
 import Routes from '../../../routes';
 import { Button, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { Link } from 'react-router-dom';
+import { createDocsLinks, ExternalLinks } from '@vegaprotocol/utils';
 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 { DocsLinks, ExternalLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 interface ProposalsListProps {
   proposals: Array<ProposalFieldsFragment | ProposalQuery['proposal']>;
@@ -35,6 +36,7 @@ export const ProposalsList = ({
   protocolUpgradeProposals,
   lastBlockHeight,
 }: ProposalsListProps) => {
+  const { VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const [filterString, setFilterString] = useState('');
   const sortedProposals = proposals.reduce(
@@ -81,9 +83,9 @@ export const ProposalsList = ({
           marginBottom={false}
           title={t('pageTitleProposals')}
         />
-        {DocsLinks && (
+        {VEGA_DOCS_URL && (
           <div className="xs:justify-self-end" data-testid="new-proposal-link">
-            <ExternalLink href={DocsLinks.PROPOSALS_GUIDE}>
+            <ExternalLink href={createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE}>
               <Button variant="primary" size="sm">
                 <div className="flex items-center gap-1">
                   {t('NewProposal')}

apps/governance/src/routes/proposals/components/propose/proposal-form-terms.spec.tsx

@@ -2,10 +2,9 @@ import { render, screen } from '@testing-library/react';
 import { ProposalFormTerms } from './proposal-form-terms';
 
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  DocsLinks: {
-    PROPOSALS_GUIDE: 'https://docs.vega.xyz/tutorials/proposals',
-  },
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
 }));
 
 const renderComponent = () => {

apps/governance/src/routes/proposals/components/propose/proposal-form-terms.tsx

@@ -5,7 +5,8 @@ import {
   ExternalLink,
   TextArea,
 } from '@vegaprotocol/ui-toolkit';
-import { DocsLinks } from '@vegaprotocol/environment';
+import { createDocsLinks } from '@vegaprotocol/utils';
+import { useEnvironment } from '@vegaprotocol/environment';
 import type { UseFormRegisterReturn } from 'react-hook-form';
 
 interface ProposalFormTermsProps {
@@ -21,20 +22,23 @@ export const ProposalFormTerms = ({
   labelOverride,
   docsLink,
 }: ProposalFormTermsProps) => {
+  const { VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   return (
     <FormGroup
       label={labelOverride || t('ProposalTerms')}
       labelFor="proposal-terms"
     >
-      {docsLink && DocsLinks && (
+      {docsLink && VEGA_DOCS_URL && (
         <div className="mt-[-4px] mb-2 text-sm font-light">
           <span className="mr-1">{t('ProposalTermsText')}</span>
           <ExternalLink
-            href={`${DocsLinks.PROPOSALS_GUIDE}${docsLink}`}
+            href={`${
+              createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+            }${docsLink}`}
             target="_blank"
           >
-            {`${DocsLinks.PROPOSALS_GUIDE}${docsLink}`}
+            {`${createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE}${docsLink}`}
           </ExternalLink>
         </div>
       )}

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

@@ -16,6 +16,7 @@ const mockAppState: AppState = {
   totalSupply: mockTotalSupply,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
+  ethConnectOverlay: false,
   transactionOverlay: false,
   bannerMessage: '',
   disconnectNotice: false,

apps/governance/src/routes/proposals/propose/freeform/propose-freeform.spec.tsx

@@ -10,10 +10,9 @@ import type { MockedResponse } from '@apollo/client/testing';
 import { NetworkParamsDocument } from '@vegaprotocol/network-parameters';
 
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  DocsLinks: {
-    PROPOSALS_GUIDE: 'https://docs.vega.xyz/tutorials/proposals',
-  },
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
 }));
 
 const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {

apps/governance/src/routes/proposals/propose/freeform/propose-freeform.tsx

@@ -5,7 +5,7 @@ import {
   useProposalSubmit,
   deadlineToRoundedHours,
 } from '@vegaprotocol/proposals';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 import {
   ProposalFormDescription,
   ProposalFormSubheader,
@@ -17,6 +17,7 @@ import {
 import { ProposalMinRequirements } from '../../components/shared';
 import { AsyncRenderer, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { Heading } from '../../../../components/heading';
+import { createDocsLinks } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -41,7 +42,7 @@ export const ProposeFreeform = () => {
     NetworkParams.governance_proposal_freeform_minProposerBalance,
     NetworkParams.spam_protection_proposal_min_tokens,
   ]);
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_DOCS_URL, VEGA_EXPLORER_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     register,
@@ -110,13 +111,17 @@ export const ProposeFreeform = () => {
             userAction={ProposalUserAction.CREATE}
           />
 
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p className="text-sm" data-testid="proposal-docs-link">
               <span className="mr-1">{t('ProposalTermsText')}</span>
               <ExternalLink
-                href={`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}
+                href={`${
+                  createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+                }${DOCS_LINK}`}
                 target="_blank"
-              >{`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}</ExternalLink>
+              >{`${
+                createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+              }${DOCS_LINK}`}</ExternalLink>
             </p>
           )}
 

apps/governance/src/routes/proposals/propose/network-parameter/propose-network-parameter.spec.tsx

@@ -10,10 +10,9 @@ import { NetworkParamsDocument } from '@vegaprotocol/network-parameters';
 import type { MockedResponse } from '@apollo/client/testing';
 
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  DocsLinks: {
-    PROPOSALS_GUIDE: 'https://docs.vega.xyz/tutorials/proposals',
-  },
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
 }));
 
 const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {

apps/governance/src/routes/proposals/propose/network-parameter/propose-network-parameter.tsx

@@ -1,7 +1,10 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useForm } from 'react-hook-form';
-import { suitableForSyntaxHighlighter } from '@vegaprotocol/utils';
+import {
+  createDocsLinks,
+  suitableForSyntaxHighlighter,
+} from '@vegaprotocol/utils';
 import { useNetworkParams } from '@vegaprotocol/network-parameters';
 import {
   getClosingTimestamp,
@@ -9,7 +12,7 @@ import {
   useProposalSubmit,
   doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 import {
   ProposalFormDescription,
   ProposalFormSubheader,
@@ -81,7 +84,7 @@ export const ProposeNetworkParameter = () => {
     loading: networkParamsLoading,
     error: networkParamsError,
   } = useNetworkParams();
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     register,
@@ -172,13 +175,17 @@ export const ProposeNetworkParameter = () => {
             userAction={ProposalUserAction.CREATE}
           />
 
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p className="text-sm" data-testid="proposal-docs-link">
               <span className="mr-1">{t('ProposalTermsText')}</span>
               <ExternalLink
-                href={`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}
+                href={`${
+                  createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+                }${DOCS_LINK}`}
                 target="_blank"
-              >{`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}</ExternalLink>
+              >{`${
+                createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+              }${DOCS_LINK}`}</ExternalLink>
             </p>
           )}
 

apps/governance/src/routes/proposals/propose/new-asset/propose-new-asset.spec.tsx

@@ -10,10 +10,9 @@ import type { MockedResponse } from '@apollo/client/testing';
 import { NetworkParamsDocument } from '@vegaprotocol/network-parameters';
 
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  DocsLinks: {
-    PROPOSALS_GUIDE: 'https://docs.vega.xyz/tutorials/proposals',
-  },
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
 }));
 
 const newAssetNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {

apps/governance/src/routes/proposals/propose/new-asset/propose-new-asset.tsx

@@ -7,8 +7,8 @@ import {
   useProposalSubmit,
   doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { createDocsLinks, validateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -53,7 +53,7 @@ export const ProposeNewAsset = () => {
     NetworkParams.governance_proposal_asset_minProposerBalance,
     NetworkParams.spam_protection_proposal_min_tokens,
   ]);
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     register,
@@ -142,13 +142,17 @@ export const ProposeNewAsset = () => {
             userAction={ProposalUserAction.CREATE}
           />
 
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p className="text-sm" data-testid="proposal-docs-link">
               <span className="mr-1">{t('ProposalTermsText')}</span>
               <ExternalLink
-                href={`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}
+                href={`${
+                  createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+                }${DOCS_LINK}`}
                 target="_blank"
-              >{`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}</ExternalLink>
+              >{`${
+                createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+              }${DOCS_LINK}`}</ExternalLink>
             </p>
           )}
 

apps/governance/src/routes/proposals/propose/new-market/propose-new-market.spec.tsx

@@ -10,10 +10,9 @@ import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
 import { NetworkParamsDocument } from '@vegaprotocol/network-parameters';
 
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  DocsLinks: {
-    PROPOSALS_GUIDE: 'https://docs.vega.xyz/tutorials/proposals',
-  },
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
 }));
 
 const newMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {

apps/governance/src/routes/proposals/propose/new-market/propose-new-market.tsx

@@ -6,8 +6,8 @@ import {
   useProposalSubmit,
   doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { createDocsLinks, validateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -51,7 +51,7 @@ export const ProposeNewMarket = () => {
     NetworkParams.governance_proposal_market_minProposerBalance,
     NetworkParams.spam_protection_proposal_min_tokens,
   ]);
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     register,
@@ -132,13 +132,17 @@ export const ProposeNewMarket = () => {
             userAction={ProposalUserAction.CREATE}
           />
 
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p className="text-sm" data-testid="proposal-docs-link">
               <span className="mr-1">{t('ProposalTermsText')}</span>
               <ExternalLink
-                href={`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}
+                href={`${
+                  createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+                }${DOCS_LINK}`}
                 target="_blank"
-              >{`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}</ExternalLink>
+              >{`${
+                createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+              }${DOCS_LINK}`}</ExternalLink>
             </p>
           )}
 

apps/governance/src/routes/proposals/propose/propose.tsx

@@ -2,11 +2,12 @@ import Routes from '../../routes';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 import { Heading } from '../../../components/heading';
+import { createDocsLinks } from '@vegaprotocol/utils';
 
 export const Propose = () => {
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_DOCS_URL, VEGA_EXPLORER_URL } = useEnvironment();
   const { t } = useTranslation();
 
   return (
@@ -14,11 +15,14 @@ export const Propose = () => {
       <section className="pb-6">
         <Heading title={t('NewProposal')} />
         <div className="text-sm">
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p>
               <span className="mr-1">{t('ProposalTermsText')}</span>
-              <ExternalLink href={DocsLinks.PROPOSALS_GUIDE} target="_blank">
-                {DocsLinks.PROPOSALS_GUIDE}
+              <ExternalLink
+                href={createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE}
+                target="_blank"
+              >
+                {createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE}
               </ExternalLink>
             </p>
           )}

apps/governance/src/routes/proposals/propose/raw/propose-raw.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 import { Heading } from '../../../../components/heading';
 import {
   AsyncRenderer,
@@ -9,7 +9,7 @@ import {
   InputError,
   TextArea,
 } from '@vegaprotocol/ui-toolkit';
-import { validateJson } from '@vegaprotocol/utils';
+import { createDocsLinks, validateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -39,7 +39,7 @@ export const ProposeRaw = () => {
     NetworkParams.governance_proposal_freeform_minProposerBalance,
     NetworkParams.spam_protection_proposal_min_tokens,
   ]);
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     register,
@@ -79,11 +79,14 @@ export const ProposeRaw = () => {
             spamProtectionMin={params.spam_protection_proposal_min_tokens}
           />
 
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p className="text-sm" data-testid="proposal-docs-link">
               <span className="mr-1">{t('ProposalTermsText')}</span>
-              <ExternalLink href={DocsLinks.PROPOSALS_GUIDE} target="_blank">
-                {DocsLinks.PROPOSALS_GUIDE}
+              <ExternalLink
+                href={createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE}
+                target="_blank"
+              >
+                {createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE}
               </ExternalLink>
             </p>
           )}

apps/governance/src/routes/proposals/propose/update-asset/propose-update-asset.spec.tsx

@@ -10,10 +10,9 @@ import type { MockedResponse } from '@apollo/client/testing';
 import { NetworkParamsDocument } from '@vegaprotocol/network-parameters';
 
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  DocsLinks: {
-    PROPOSALS_GUIDE: 'https://docs.vega.xyz/tutorials/proposals',
-  },
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
 }));
 
 const updateAssetNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {

apps/governance/src/routes/proposals/propose/update-asset/propose-update-asset.tsx

@@ -6,8 +6,8 @@ import {
   useProposalSubmit,
   doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { createDocsLinks, validateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -51,7 +51,7 @@ export const ProposeUpdateAsset = () => {
     NetworkParams.governance_proposal_updateAsset_minProposerBalance,
     NetworkParams.spam_protection_proposal_min_tokens,
   ]);
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     register,
@@ -132,13 +132,17 @@ export const ProposeUpdateAsset = () => {
             userAction={ProposalUserAction.CREATE}
           />
 
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p className="text-sm" data-testid="proposal-docs-link">
               <span className="mr-1">{t('ProposalTermsText')}</span>
               <ExternalLink
-                href={`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}
+                href={`${
+                  createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+                }${DOCS_LINK}`}
                 target="_blank"
-              >{`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}</ExternalLink>
+              >{`${
+                createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+              }${DOCS_LINK}`}</ExternalLink>
             </p>
           )}
 

apps/governance/src/routes/proposals/propose/update-market/propose-update-market.tsx

@@ -7,8 +7,8 @@ import {
   getEnactmentTimestamp,
   useProposalSubmit,
 } from '@vegaprotocol/proposals';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { createDocsLinks, validateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -98,7 +98,7 @@ export const ProposeUpdateMarket = () => {
   const [selectedMarket, setSelectedMarket] = useState<string | undefined>(
     undefined
   );
-  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     register,
@@ -181,13 +181,17 @@ export const ProposeUpdateMarket = () => {
             userAction={ProposalUserAction.CREATE}
           />
 
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <p className="text-sm" data-testid="proposal-docs-link">
               <span className="mr-1">{t('ProposalTermsText')}</span>
               <ExternalLink
-                href={`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}
+                href={`${
+                  createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+                }${DOCS_LINK}`}
                 target="_blank"
-              >{`${DocsLinks.PROPOSALS_GUIDE}${DOCS_LINK}`}</ExternalLink>
+              >{`${
+                createDocsLinks(VEGA_DOCS_URL).PROPOSALS_GUIDE
+              }${DOCS_LINK}`}</ExternalLink>
             </p>
           )}
 

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards-table.spec.tsx

@@ -25,7 +25,7 @@ const mockData = {
           amount: '0',
           percentageOfTotal: '0',
         },
-        ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES: {
+        ACCOUNT_TYPE_FEES_LIQUIDITY: {
           amount: '0',
           percentageOfTotal: '0',
         },
@@ -55,9 +55,7 @@ describe('EpochIndividualRewardsTable', () => {
     expect(
       getByTestId('ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES')
     ).toBeInTheDocument();
-    expect(
-      getByTestId('ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES')
-    ).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_FEES_LIQUIDITY')).toBeInTheDocument();
     expect(
       getByTestId('ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS')
     ).toBeInTheDocument();

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.spec.ts

@@ -24,7 +24,7 @@ describe('generateEpochIndividualRewardsList', () => {
   };
 
   const reward3: RewardFieldsFragment = {
-    rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+    rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
     amount: '200',
     percentageOfTotal: '0.2',
     receivedAt: new Date(),
@@ -34,7 +34,7 @@ describe('generateEpochIndividualRewardsList', () => {
   };
 
   const reward4: RewardFieldsFragment = {
-    rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+    rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
     amount: '100',
     percentageOfTotal: '0.1',
     receivedAt: new Date(),
@@ -44,7 +44,7 @@ describe('generateEpochIndividualRewardsList', () => {
   };
 
   const reward5: RewardFieldsFragment = {
-    rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+    rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
     amount: '150',
     percentageOfTotal: '0.15',
     receivedAt: new Date(),
@@ -105,7 +105,7 @@ describe('generateEpochIndividualRewardsList', () => {
               amount: '0',
               percentageOfTotal: '0',
             },
-            [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+            [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
               amount: '0',
               percentageOfTotal: '0',
             },
@@ -172,7 +172,7 @@ describe('generateEpochIndividualRewardsList', () => {
                 amount: '0',
                 percentageOfTotal: '0',
               },
-              [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
                 amount: '200',
                 percentageOfTotal: '0.2',
               },
@@ -202,7 +202,7 @@ describe('generateEpochIndividualRewardsList', () => {
                 amount: '0',
                 percentageOfTotal: '0',
               },
-              [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
                 amount: '0',
                 percentageOfTotal: '0',
               },
@@ -237,7 +237,7 @@ describe('generateEpochIndividualRewardsList', () => {
                 amount: '0',
                 percentageOfTotal: '0',
               },
-              [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
                 amount: '100',
                 percentageOfTotal: '0.1',
               },
@@ -285,7 +285,7 @@ describe('generateEpochIndividualRewardsList', () => {
                 amount: '0',
                 percentageOfTotal: '0',
               },
-              [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
                 amount: '150',
                 percentageOfTotal: '0.15',
               },
@@ -320,7 +320,7 @@ describe('generateEpochIndividualRewardsList', () => {
                 amount: '0',
                 percentageOfTotal: '0',
               },
-              [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
                 amount: '200',
                 percentageOfTotal: '0.2',
               },
@@ -350,7 +350,7 @@ describe('generateEpochIndividualRewardsList', () => {
                 amount: '0',
                 percentageOfTotal: '0',
               },
-              [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
                 amount: '0',
                 percentageOfTotal: '0',
               },
@@ -395,7 +395,7 @@ describe('generateEpochIndividualRewardsList', () => {
                 amount: '0',
                 percentageOfTotal: '0',
               },
-              [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
                 amount: '100',
                 percentageOfTotal: '0.1',
               },

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.ts

@@ -79,24 +79,7 @@ export const generateEpochIndividualRewardsList = ({
       epoch?.rewards.push(asset);
     }
 
-    if (!asset.rewardTypes[rewardType]) {
-      asset.rewardTypes[rewardType] = { amount, percentageOfTotal };
-    } else {
-      const previousAmount = asset.rewardTypes[rewardType]?.amount;
-      const previousPercentageOfTotal =
-        asset.rewardTypes[rewardType]?.percentageOfTotal;
-
-      asset.rewardTypes[rewardType] = {
-        amount: previousAmount
-          ? new BigNumber(previousAmount).plus(amount).toString()
-          : amount,
-        percentageOfTotal: previousPercentageOfTotal
-          ? new BigNumber(previousPercentageOfTotal)
-              .plus(percentageOfTotal)
-              .toString()
-          : percentageOfTotal,
-      };
-    }
+    asset.rewardTypes[rewardType] = { amount, percentageOfTotal };
 
     // totalAmount is the sum of all rewardTypes amounts
     asset.totalAmount = Object.values(asset.rewardTypes).reduce(

apps/governance/src/routes/rewards/epoch-total-rewards/epoch-total-rewards-table.spec.tsx

@@ -29,7 +29,7 @@ const rewardsList = [
     amount: '0',
   },
   {
-    rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+    rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
     amount: '0',
   },
   {
@@ -78,9 +78,7 @@ describe('EpochTotalRewardsTable', () => {
     expect(
       getByTestId('ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES')
     ).toBeInTheDocument();
-    expect(
-      getByTestId('ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES')
-    ).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_FEES_LIQUIDITY')).toBeInTheDocument();
     expect(
       getByTestId('ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS')
     ).toBeInTheDocument();

apps/governance/src/routes/rewards/epoch-total-rewards/generate-epoch-total-rewards-list.spec.ts

@@ -162,10 +162,9 @@ describe('generateEpochAssetRewardsList', () => {
                       },
                     ],
                     [
-                      AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                      AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                       {
-                        rewardType:
-                          AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                        rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                         amount: '0',
                       },
                     ],
@@ -228,7 +227,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 2,
               assetId: '1',
-              rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
               amount: '5',
             },
           },
@@ -288,10 +287,9 @@ describe('generateEpochAssetRewardsList', () => {
                       },
                     ],
                     [
-                      AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                      AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                       {
-                        rewardType:
-                          AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                        rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                         amount: '0',
                       },
                     ],
@@ -353,10 +351,9 @@ describe('generateEpochAssetRewardsList', () => {
                       },
                     ],
                     [
-                      AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                      AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                       {
-                        rewardType:
-                          AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                        rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                         amount: '5',
                       },
                     ],
@@ -419,7 +416,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 2,
               assetId: '1',
-              rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
               amount: '6',
             },
           },
@@ -427,7 +424,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 2,
               assetId: '1',
-              rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
               amount: '27',
             },
           },
@@ -500,10 +497,9 @@ describe('generateEpochAssetRewardsList', () => {
                       },
                     ],
                     [
-                      AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                      AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                       {
-                        rewardType:
-                          AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                        rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                         amount: '33',
                       },
                     ],
@@ -565,10 +561,9 @@ describe('generateEpochAssetRewardsList', () => {
                       },
                     ],
                     [
-                      AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                      AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                       {
-                        rewardType:
-                          AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                        rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                         amount: '0',
                       },
                     ],
@@ -642,10 +637,9 @@ describe('generateEpochAssetRewardsList', () => {
                       },
                     ],
                     [
-                      AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                      AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                       {
-                        rewardType:
-                          AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+                        rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                         amount: '0',
                       },
                     ],

apps/governance/src/routes/rewards/home/rewards-page.tsx

@@ -11,6 +11,7 @@ import {
   ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { createDocsLinks } from '@vegaprotocol/utils';
 import {
   useNetworkParams,
   NetworkParams,
@@ -20,7 +21,7 @@ import { EpochCountdown } from '../../../components/epoch-countdown';
 import { Heading, SubHeading } from '../../../components/heading';
 import { EpochIndividualRewards } from '../epoch-individual-rewards/epoch-individual-rewards';
 import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
-import { DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 import { ConnectToSeeRewards } from '../connect-to-see-rewards';
 import { EpochTotalRewards } from '../epoch-total-rewards/epoch-total-rewards';
 
@@ -28,6 +29,7 @@ type RewardsView = 'total' | 'individual';
 
 export const RewardsPage = () => {
   const { t } = useTranslation();
+  const { VEGA_DOCS_URL } = useEnvironment();
   const { pubKey, pubKeys } = useVegaWallet();
   const [toggleRewardsView, setToggleRewardsView] =
     useState<RewardsView>('total');
@@ -66,9 +68,9 @@ export const RewardsPage = () => {
           <Heading title={t('pageTitleRewards')} />
           <p className="mb-12">
             {t('rewardsIntro')}{' '}
-            {DocsLinks && (
+            {VEGA_DOCS_URL && (
               <ExternalLink
-                href={DocsLinks.REWARDS_GUIDE}
+                href={createDocsLinks(VEGA_DOCS_URL).REWARDS_GUIDE}
                 target="_blank"
                 data-testid="rewards-guide-link"
                 className="text-white"

apps/governance/src/routes/rewards/shared-rewards-table-assets/shared-rewards-table-assets.tsx

@@ -26,7 +26,7 @@ export const RowAccountTypes = {
     columnTitle: 'rewardsColPriceMakingHeader',
     description: 'rewardsColPriceMakingTooltip',
   },
-  [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+  [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
     columnTitle: 'rewardsColLiquidityProvisionHeader',
     description: 'rewardsColLiquidityProvisionTooltip',
   },

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

@@ -1,12 +1,14 @@
 import { useTranslation } from 'react-i18next';
 import { EpochData } from './epoch-data';
-import { DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { createDocsLinks } from '@vegaprotocol/utils';
 import { Heading } from '../../../components/heading';
 import React from 'react';
 
 export const Staking = () => {
   const { t } = useTranslation();
+  const { VEGA_DOCS_URL } = useEnvironment();
 
   return (
     <>
@@ -14,9 +16,9 @@ export const Staking = () => {
       <section>
         <p className="mb-12">
           {t('stakingIntro')}{' '}
-          {DocsLinks && (
+          {VEGA_DOCS_URL && (
             <ExternalLink
-              href={DocsLinks.STAKING_GUIDE}
+              href={createDocsLinks(VEGA_DOCS_URL).STAKING_GUIDE}
               target="_blank"
               data-testid="staking-guide-link"
               className="text-white"

apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -131,25 +131,20 @@ export const ConsensusValidatorsTable = ({
 
   const gridRef = useRef<AgGridReact | null>(null);
 
-  const thirdOfTotalStake = useMemo(
-    () => new BigNumber(totalStake).dividedBy(3),
-    [totalStake]
-  );
-
   const nodes = useMemo(() => {
     if (!data) return [];
     let canonisedNodes = data
       .sort((a, b) => {
-        const aStakedTotal = new BigNumber(a.stakedTotal);
-        const bStakedTotal = new BigNumber(b.stakedTotal);
-        return bStakedTotal.minus(aStakedTotal).toNumber();
+        const aVotingPower = new BigNumber(a.rankingScore.votingPower);
+        const bVotingPower = new BigNumber(b.rankingScore.votingPower);
+        return bVotingPower.minus(aVotingPower).toNumber();
       })
       .map((node, index) => {
-        const stakedTotalRanking = index + 1;
+        const votingPowerRanking = index + 1;
 
         return {
           ...node,
-          stakedTotalRanking,
+          votingPowerRanking,
         };
       })
       .map(
@@ -162,7 +157,7 @@ export const ConsensusValidatorsTable = ({
           stakedTotal,
           rankingScore: { stakeScore, votingPower },
           pendingStake,
-          stakedTotalRanking,
+          votingPowerRanking,
           stakedByUser,
           pendingUserStake,
           userStakeShare,
@@ -180,7 +175,7 @@ export const ConsensusValidatorsTable = ({
 
           return {
             id,
-            [ValidatorFields.RANKING_INDEX]: stakedTotalRanking,
+            [ValidatorFields.RANKING_INDEX]: votingPowerRanking,
             [ValidatorFields.VALIDATOR]: {
               avatarUrl: logo,
               name,
@@ -241,12 +236,16 @@ export const ConsensusValidatorsTable = ({
       return canonisedNodes;
     }
 
+    // The point of identifying and hiding the group that could halt the network
+    // is that we assume the top 1/3 of stake is held by considerably less than
+    // 1/3 of the validators and we really want people not to stake any more to
+    // that group, because we want to make it require as many difference
+    // validators to collude as possible to halt the network, so we hide them.
     const { topThird, remaining } = canonisedNodes.reduce(
       (acc, node) => {
-        if (acc.cumulativeScore.isLessThan(thirdOfTotalStake)) {
-          const prev = acc.cumulativeScore;
-          acc.cumulativeScore = prev.plus(
-            new BigNumber(node[ValidatorFields.STAKE])
+        if (acc.cumulativeScore < 100 / 3) {
+          acc.cumulativeScore += parseFloat(
+            node[ValidatorFields.NORMALISED_VOTING_POWER]
           );
           acc.topThird.push(node);
           return acc;
@@ -254,70 +253,61 @@ export const ConsensusValidatorsTable = ({
         acc.remaining.push(node);
         return acc;
       },
-      { topThird: [], remaining: [], cumulativeScore: new BigNumber(0) } as {
+      { topThird: [], remaining: [], cumulativeScore: 0 } as {
         topThird: CanonisedConsensusNodeProps[];
         remaining: CanonisedConsensusNodeProps[];
-        cumulativeScore: BigNumber;
+        cumulativeScore: number;
       }
     );
 
     // We need to combine the top third of validators into a single node, this
     // way the combined values can be passed to AG grid so that the combined cell's
     // values are correct for ordering.
-    const combinedTopThird = topThird.reduce(
-      (acc, node) => {
-        const {
-          [ValidatorFields.STAKE]: stake,
-          [ValidatorFields.STAKE_SHARE]: stakeShare,
-          [ValidatorFields.PENDING_STAKE]: pendingStake,
-          [ValidatorFields.NORMALISED_VOTING_POWER]: normalisedVotingPower,
-          [ValidatorFields.TOTAL_PENALTIES]: totalPenalties,
-        } = node;
+    const combinedTopThird = topThird.reduce((acc, node) => {
+      const {
+        [ValidatorFields.STAKE]: stake,
+        [ValidatorFields.STAKE_SHARE]: stakeShare,
+        [ValidatorFields.PENDING_STAKE]: pendingStake,
+        [ValidatorFields.NORMALISED_VOTING_POWER]: normalisedVotingPower,
+        [ValidatorFields.TOTAL_PENALTIES]: totalPenalties,
+      } = node;
 
-        const {
-          [ValidatorFields.STAKE]: accStake,
-          [ValidatorFields.STAKE_SHARE]: accStakeShare,
-          [ValidatorFields.PENDING_STAKE]: accPendingStake,
-          [ValidatorFields.NORMALISED_VOTING_POWER]: accNormalisedVotingPower,
-          [ValidatorFields.TOTAL_PENALTIES]: accTotalPenalties,
-        } = acc;
+      const {
+        [ValidatorFields.STAKE]: accStake,
+        [ValidatorFields.STAKE_SHARE]: accStakeShare,
+        [ValidatorFields.PENDING_STAKE]: accPendingStake,
+        [ValidatorFields.NORMALISED_VOTING_POWER]: accNormalisedVotingPower,
+        [ValidatorFields.TOTAL_PENALTIES]: accTotalPenalties,
+      } = acc;
 
-        return {
-          ...acc,
-          [ValidatorFields.STAKE]: new BigNumber(accStake)
-            .plus(new BigNumber(stake))
-            .toString(),
-          [ValidatorFields.STAKE_SHARE]: formatNumberPercentage(
-            new BigNumber(parseFloat(accStakeShare)).plus(
-              new BigNumber(parseFloat(stakeShare))
-            ),
-            2
+      return {
+        ...acc,
+        [ValidatorFields.STAKE]: toBigNum(accStake, decimals)
+          .plus(toBigNum(stake, decimals))
+          .toString(),
+        [ValidatorFields.STAKE_SHARE]: formatNumberPercentage(
+          new BigNumber(parseFloat(accStakeShare)).plus(
+            new BigNumber(parseFloat(stakeShare))
           ),
-          [ValidatorFields.PENDING_STAKE]: toBigNum(accPendingStake, decimals)
-            .plus(toBigNum(pendingStake, decimals))
-            .toString(),
-          [ValidatorFields.NORMALISED_VOTING_POWER]: formatNumberPercentage(
-            new BigNumber(parseFloat(accNormalisedVotingPower)).plus(
-              new BigNumber(parseFloat(normalisedVotingPower))
-            ),
-            2
+          2
+        ),
+        [ValidatorFields.PENDING_STAKE]: toBigNum(accPendingStake, decimals)
+          .plus(toBigNum(pendingStake, decimals))
+          .toString(),
+        [ValidatorFields.NORMALISED_VOTING_POWER]: formatNumberPercentage(
+          new BigNumber(parseFloat(accNormalisedVotingPower)).plus(
+            new BigNumber(parseFloat(normalisedVotingPower))
           ),
-          [ValidatorFields.TOTAL_PENALTIES]: formatNumberPercentage(
-            new BigNumber(parseFloat(accTotalPenalties)).plus(
-              new BigNumber(parseFloat(totalPenalties))
-            ),
-            2
+          2
+        ),
+        [ValidatorFields.TOTAL_PENALTIES]: formatNumberPercentage(
+          new BigNumber(parseFloat(accTotalPenalties)).plus(
+            new BigNumber(parseFloat(totalPenalties))
           ),
-        };
-      },
-      {
-        [ValidatorFields.STAKE]: '0',
-        [ValidatorFields.STAKE_SHARE]: '0',
-        [ValidatorFields.PENDING_STAKE]: '0',
-        [ValidatorFields.NORMALISED_VOTING_POWER]: '0',
-        [ValidatorFields.TOTAL_PENALTIES]: '0',
-      }
-    );
+          2
+        ),
+      };
+    });
 
     return [
       {
@@ -332,7 +322,6 @@ export const ConsensusValidatorsTable = ({
     decimals,
     hideTopThird,
     previousEpochData,
-    thirdOfTotalStake,
     totalStake,
     validatorsView,
   ]);
@@ -363,7 +352,6 @@ export const ConsensusValidatorsTable = ({
           headerTooltip: t('StakeDescription').toString(),
           cellRenderer: TotalStakeRenderer,
           width: 120,
-          sort: 'desc',
         },
         {
           field: ValidatorFields.PENDING_STAKE,
@@ -385,6 +373,7 @@ export const ConsensusValidatorsTable = ({
           headerTooltip: t('NormalisedVotingPowerDescription').toString(),
           cellRenderer: VotingPowerRenderer,
           width: 200,
+          sort: 'desc',
         },
         {
           field: ValidatorFields.TOTAL_PENALTIES,

apps/governance/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx

@@ -57,16 +57,16 @@ export const StandbyPendingValidatorsTable = ({
 
     return data
       .sort((a, b) => {
-        const aStakedTotal = new BigNumber(a.stakedTotal);
-        const bStakedTotal = new BigNumber(b.stakedTotal);
-        return bStakedTotal.minus(aStakedTotal).toNumber();
+        const aVotingPower = new BigNumber(a.rankingScore.votingPower);
+        const bVotingPower = new BigNumber(b.rankingScore.votingPower);
+        return bVotingPower.minus(aVotingPower).toNumber();
       })
       .map((node, index) => {
-        const stakedTotalRanking = index + 1;
+        const votingPowerRanking = index + 1;
 
         return {
           ...node,
-          stakedTotalRanking,
+          votingPowerRanking,
         };
       })
       .map(
@@ -79,7 +79,7 @@ export const StandbyPendingValidatorsTable = ({
           stakedTotal,
           rankingScore: { stakeScore },
           pendingStake,
-          stakedTotalRanking,
+          votingPowerRanking,
           stakedByUser,
           pendingUserStake,
           userStakeShare,
@@ -125,7 +125,7 @@ export const StandbyPendingValidatorsTable = ({
 
           return {
             id,
-            [ValidatorFields.RANKING_INDEX]: stakedTotalRanking,
+            [ValidatorFields.RANKING_INDEX]: votingPowerRanking,
             [ValidatorFields.VALIDATOR]: {
               avatarUrl,
               name,
@@ -166,7 +166,7 @@ export const StandbyPendingValidatorsTable = ({
               : undefined,
             [ValidatorFields.PENDING_USER_STAKE]: pendingUserStake,
             [ValidatorFields.USER_STAKE_SHARE]: userStakeShare
-              ? formatNumberPercentage(new BigNumber(userStakeShare), 2)
+              ? formatNumberPercentage(new BigNumber(userStakeShare))
               : undefined,
           };
         }
@@ -210,7 +210,6 @@ export const StandbyPendingValidatorsTable = ({
           headerTooltip: t('StakeDescription').toString(),
           cellRenderer: TotalStakeRenderer,
           width: 120,
-          sort: 'desc',
         },
         {
           field: ValidatorFields.PENDING_STAKE,
@@ -234,6 +233,7 @@ export const StandbyPendingValidatorsTable = ({
           }),
           cellRenderer: StakeNeededForPromotionRenderer,
           width: 210,
+          sort: 'asc',
         },
         {
           field: ValidatorFields.TOTAL_PENALTIES,

apps/governance/src/routes/staking/home/validator-tables/validator-tables.tsx

@@ -2,8 +2,12 @@ import { useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import BigNumber from 'bignumber.js';
 import * as Schema from '@vegaprotocol/types';
-import { removePaginationWrapper, toBigNum } from '@vegaprotocol/utils';
-import { DocsLinks } from '@vegaprotocol/environment';
+import {
+  createDocsLinks,
+  removePaginationWrapper,
+  toBigNum,
+} from '@vegaprotocol/utils';
+import { useEnvironment } from '@vegaprotocol/environment';
 import { Link as UTLink, Toggle } from '@vegaprotocol/ui-toolkit';
 
 import { formatNumber } from '../../../../lib/format-number';
@@ -38,6 +42,7 @@ export const ValidatorTables = ({
   previousEpochData,
 }: ValidatorsTableProps) => {
   const { t } = useTranslation();
+  const { VEGA_DOCS_URL } = useEnvironment();
   const {
     appState: { decimals },
   } = useAppState();
@@ -208,12 +213,12 @@ export const ValidatorTables = ({
         <>
           <SubHeading title={t('status-pending')} />
           <p>
-            {DocsLinks && (
+            {VEGA_DOCS_URL && (
               <>
                 <span>{t('pendingDescription1')} </span>
                 <span>
                   <UTLink
-                    href={DocsLinks.STAKING_GUIDE}
+                    href={createDocsLinks(VEGA_DOCS_URL).STAKING_GUIDE}
                     target="_blank"
                     data-testid="validator-forum-link"
                   >

apps/governance/src/routes/staking/node/nodes-container.tsx

@@ -28,7 +28,6 @@ export const NodeContainer = ({
   const { t } = useTranslation();
   const { pubKey } = useVegaWallet();
   const { delegationsPagination } = ENV;
-
   const { data, loading, error, refetch } = useStakingQuery({
     variables: {
       partyId: pubKey || '',
@@ -38,9 +37,7 @@ export const NodeContainer = ({
           }
         : undefined,
     },
-    errorPolicy: 'all',
   });
-
   const { data: previousEpochData } = usePreviousEpochQuery({
     variables: {
       epochId: (Number(data?.epoch.id) - 1).toString(),
@@ -50,7 +47,7 @@ export const NodeContainer = ({
 
   useRefreshAfterEpoch(data?.epoch.timestamps.expiry, refetch);
 
-  if (error && !error.message.includes('failed to get party for ID')) {
+  if (error) {
     return (
       <Callout intent={Intent.Danger} title={t('Something went wrong')}>
         <pre>

apps/governance/src/routes/staking/node/validator-table.tsx

@@ -1,11 +1,7 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useEnvironment,
-  DocsLinks,
-  ExternalLinks,
-} from '@vegaprotocol/environment';
-import { toBigNum } from '@vegaprotocol/utils';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { createDocsLinks, ExternalLinks, toBigNum } from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';
 import {
   Link as UTLink,
@@ -68,7 +64,7 @@ export const ValidatorTable = ({
   stakedTotal,
   previousEpochData,
 }: ValidatorTableProps) => {
-  const { ETHERSCAN_URL } = useEnvironment();
+  const { ETHERSCAN_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     appState: { decimals },
@@ -94,9 +90,9 @@ export const ValidatorTable = ({
     <>
       <p className="mb-12">
         {t('validatorFormIntro')}{' '}
-        {DocsLinks && (
+        {VEGA_DOCS_URL && (
           <ExternalLink
-            href={DocsLinks.STAKING_GUIDE}
+            href={createDocsLinks(VEGA_DOCS_URL).STAKING_GUIDE}
             target="_blank"
             data-testid="validator-table-staking-guide-link"
             className="text-white"

apps/governance/src/routes/staking/shared.ts

@@ -60,14 +60,9 @@ export const getOverstakingPenalty = (
   }
 
   return formatNumberPercentage(
-    BigNumber.max(
-      new BigNumber(1)
-        .minus(
-          new BigNumber(validatorScore).dividedBy(new BigNumber(stakeScore))
-        )
-        .times(100),
-      new BigNumber(0)
-    ),
+    new BigNumber(1)
+      .minus(new BigNumber(validatorScore).dividedBy(new BigNumber(stakeScore)))
+      .times(100),
     2
   );
 };

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

@@ -3,8 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { Heading, SubHeading } from '../../components/heading';
-import { ExternalLinks } from '@vegaprotocol/environment';
-import { toBigNum } from '@vegaprotocol/utils';
+import { ExternalLinks, toBigNum } from '@vegaprotocol/utils';
 import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import type { RouteChildProps } from '..';

apps/static/src/assets/mainnet-tranches.json

@@ -81,8 +81,8 @@
     "tranche_start": "2023-04-20T00:00:00.000Z",
     "tranche_end": "2023-05-20T00:00:00.000Z",
     "total_added": "19242.125",
-    "total_removed": "2667.900599530005",
-    "locked_amount": "1598.3806680652007360625",
+    "total_removed": "2249.511113406525",
+    "locked_amount": "4805.928581211419705575",
     "deposits": [
       {
         "amount": "188",
@@ -276,16 +276,6 @@
         "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
         "tx": "0x156ef84c345adecdf7b1c55756b1f4326716d1b0191ce1a208f614fc807ce033"
       },
-      {
-        "amount": "219.675555560475",
-        "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
-        "tx": "0x682c6453a6c681312a81e15f244e4885c0ceaab35c7dc041c02d536ff42ca62f"
-      },
-      {
-        "amount": "198.713930563005",
-        "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
-        "tx": "0x9cdddebcfa4f7e189e435c3a0b5f69ecc6240d59b4d9f959739458f610d8fa95"
-      },
       {
         "amount": "202.093666077975",
         "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
@@ -365,12 +355,6 @@
             "tranche_id": 56,
             "tx": "0x156ef84c345adecdf7b1c55756b1f4326716d1b0191ce1a208f614fc807ce033"
           },
-          {
-            "amount": "219.675555560475",
-            "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
-            "tranche_id": 56,
-            "tx": "0x682c6453a6c681312a81e15f244e4885c0ceaab35c7dc041c02d536ff42ca62f"
-          },
           {
             "amount": "202.093666077975",
             "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
@@ -397,8 +381,8 @@
           }
         ],
         "total_tokens": "1207.5",
-        "withdrawn_tokens": "1086.548284142475",
-        "remaining_tokens": "120.951715857525"
+        "withdrawn_tokens": "866.872728582",
+        "remaining_tokens": "340.627271418"
       },
       {
         "address": "0x33Ce1D9E53AFb7367E34749517C086405a651a95",
@@ -438,12 +422,6 @@
             "tranche_id": 56,
             "tx": "0x47f5bf2c758c5270dd1b6519ac649ddabef8199f8a0bae319e36f8ac5c9c142e"
           },
-          {
-            "amount": "198.713930563005",
-            "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
-            "tranche_id": 56,
-            "tx": "0x9cdddebcfa4f7e189e435c3a0b5f69ecc6240d59b4d9f959739458f610d8fa95"
-          },
           {
             "amount": "195.89040769089",
             "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
@@ -452,8 +430,8 @@
           }
         ],
         "total_tokens": "914.25",
-        "withdrawn_tokens": "822.79078616853",
-        "remaining_tokens": "91.45921383147"
+        "withdrawn_tokens": "624.076855605525",
+        "remaining_tokens": "290.173144394475"
       },
       {
         "address": "0x9573BDF7FfC5519912d293e4D1f750eab2E471E7",
@@ -965,7 +943,7 @@
     "tranche_start": "2023-04-06T00:00:00.000Z",
     "tranche_end": "2023-05-06T00:00:00.000Z",
     "total_added": "14610",
-    "total_removed": "7227.45090157707",
+    "total_removed": "6675.45090157707",
     "locked_amount": "0",
     "deposits": [
       {
@@ -1170,26 +1148,6 @@
         "user": "0x2586bA83696a92b5467Aaa0CF9EEC052F28F2c02",
         "tx": "0x5aa922056cad64f97a7dfa750da57d63abfdaea4499192d4d57958bfb4fba2ea"
       },
-      {
-        "amount": "33",
-        "user": "0xBf1AaB792D729fA125e6D7122D4b916a1E1C44B1",
-        "tx": "0xd2c2f11c150797924c49f6022957d701052268c7335ef3927597fca4f1b544a2"
-      },
-      {
-        "amount": "114",
-        "user": "0x8D416A61bCccf4E6aF5598302BC4e41f97401652",
-        "tx": "0x619088e473d63826e10d3516619b505cb0a82884a5b8158146ff8ab79307967d"
-      },
-      {
-        "amount": "96",
-        "user": "0x6324334064d1d807940191C658d925DA7d323b12",
-        "tx": "0xd4d9926de15e6dc4992c47e9fbb9d25bf873d7e331524994bb6139a2953ea96a"
-      },
-      {
-        "amount": "309",
-        "user": "0xf9c6C5F942B94Db9dedC550956865cf99D743959",
-        "tx": "0x4fa5d02d920d90835694cbab1e41a66d317b2bc35860d07a5ccd70d12182116b"
-      },
       {
         "amount": "106.53500000286",
         "user": "0x6F32AA5A6198329c16e438512F992a0548C856f9",
@@ -1335,17 +1293,10 @@
             "tx": "0xc7736d362d5ffdd16dc26f25047f52fa6238f60837e831b149b6ebb25a0d9281"
           }
         ],
-        "withdrawals": [
-          {
-            "amount": "33",
-            "user": "0xBf1AaB792D729fA125e6D7122D4b916a1E1C44B1",
-            "tranche_id": 54,
-            "tx": "0xd2c2f11c150797924c49f6022957d701052268c7335ef3927597fca4f1b544a2"
-          }
-        ],
+        "withdrawals": [],
         "total_tokens": "33",
-        "withdrawn_tokens": "33",
-        "remaining_tokens": "0"
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "33"
       },
       {
         "address": "0xB0Dbf35C0918536B62a2FbcCC852bCffDB41d6aF",
@@ -1492,17 +1443,10 @@
             "tx": "0x96b16197328b59556848409bcc4ebf1f71648485fabedde2848461247aa4be32"
           }
         ],
-        "withdrawals": [
-          {
-            "amount": "96",
-            "user": "0x6324334064d1d807940191C658d925DA7d323b12",
-            "tranche_id": 54,
-            "tx": "0xd4d9926de15e6dc4992c47e9fbb9d25bf873d7e331524994bb6139a2953ea96a"
-          }
-        ],
+        "withdrawals": [],
         "total_tokens": "96",
-        "withdrawn_tokens": "96",
-        "remaining_tokens": "0"
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "96"
       },
       {
         "address": "0x268070d5EEd5b24E34a5F4C17B5482178b18089D",
@@ -1673,17 +1617,10 @@
             "tx": "0x09d7342bca4e0fdc9f5a40e18e402b0328991d0df5da17b834c67b149e270808"
           }
         ],
-        "withdrawals": [
-          {
-            "amount": "114",
-            "user": "0x8D416A61bCccf4E6aF5598302BC4e41f97401652",
-            "tranche_id": 54,
-            "tx": "0x619088e473d63826e10d3516619b505cb0a82884a5b8158146ff8ab79307967d"
-          }
-        ],
+        "withdrawals": [],
         "total_tokens": "114",
-        "withdrawn_tokens": "114",
-        "remaining_tokens": "0"
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "114"
       },
       {
         "address": "0x9E53F72210479BF46aE7ABF77c48B0d611b3c3dB",
@@ -1821,17 +1758,10 @@
             "tx": "0x8a0328460c26941859c8ce400e7b18d41701fd620535f757f17e4c1d2c930831"
           }
         ],
-        "withdrawals": [
-          {
-            "amount": "309",
-            "user": "0xf9c6C5F942B94Db9dedC550956865cf99D743959",
-            "tranche_id": 54,
-            "tx": "0x4fa5d02d920d90835694cbab1e41a66d317b2bc35860d07a5ccd70d12182116b"
-          }
-        ],
+        "withdrawals": [],
         "total_tokens": "309",
-        "withdrawn_tokens": "309",
-        "remaining_tokens": "0"
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "309"
       },
       {
         "address": "0xB12Cdb63E38f9a6ff2C0F68aBC3CA9beFCb7148c",
@@ -1974,7 +1904,7 @@
     "tranche_start": "2023-03-06T00:00:00.000Z",
     "tranche_end": "2023-04-06T00:00:00.000Z",
     "total_added": "14099",
-    "total_removed": "4373.49002352036",
+    "total_removed": "4343.49002352036",
     "locked_amount": "0",
     "deposits": [
       {
@@ -2749,11 +2679,6 @@
         "user": "0xA7f89FF809549F4577993de3d1B3017241a53F40",
         "tx": "0x84e5ff587c312b578fa946e2dce386cdf19c7638602b12eceaaab7de563f8394"
       },
-      {
-        "amount": "30",
-        "user": "0x8D416A61bCccf4E6aF5598302BC4e41f97401652",
-        "tx": "0x6a6dc596ec40beefbe40b32666cbef8ea31d1ce73c0c11f57a1e60f9ea242b8d"
-      },
       {
         "amount": "30",
         "user": "0xBe9F912Ad481C61B653463E8F1D2b2b310D49861",
@@ -3985,17 +3910,10 @@
             "tx": "0xecbb3424e425019a8ebdb9326f662c3520f220fbecdfdaa4770c282001a0f5eb"
           }
         ],
-        "withdrawals": [
-          {
-            "amount": "30",
-            "user": "0x8D416A61bCccf4E6aF5598302BC4e41f97401652",
-            "tranche_id": 53,
-            "tx": "0x6a6dc596ec40beefbe40b32666cbef8ea31d1ce73c0c11f57a1e60f9ea242b8d"
-          }
-        ],
+        "withdrawals": [],
         "total_tokens": "30",
-        "withdrawn_tokens": "30",
-        "remaining_tokens": "0"
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "30"
       },
       {
         "address": "0x83D7eD53E7CB97b542F1F71f40561d51F8019C8B",
@@ -5045,7 +4963,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "47842.6457965491129318687",
+    "locked_amount": "49030.0504645820725222068",
     "deposits": [
       {
         "amount": "86666.297",
@@ -5111,7 +5029,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "199.06596586284075",
+    "locked_amount": "267.758572446072375",
     "deposits": [
       {
         "amount": "2500",
@@ -5144,7 +5062,7 @@
     "tranche_end": "2023-11-01T00:00:00.000Z",
     "total_added": "15000.000000000000015",
     "total_removed": "0",
-    "locked_amount": "13654.239319142511013654239319142511",
+    "locked_amount": "14061.9150060386475140619150060386475",
     "deposits": [
       {
         "amount": "1.5e-14",
@@ -5252,7 +5170,7 @@
     "tranche_end": "2023-09-01T00:00:00.000Z",
     "total_added": "17500",
     "total_removed": "0",
-    "locked_amount": "10128.3154375503205",
+    "locked_amount": "10603.93707226247975",
     "deposits": [
       {
         "amount": "12500",
@@ -5518,8 +5436,8 @@
     "tranche_start": "2023-02-01T00:00:00.000Z",
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
-    "total_removed": "18500.56159815",
-    "locked_amount": "15640.6082143953375",
+    "total_removed": "18302.01762945",
+    "locked_amount": "16676.690070595455",
     "deposits": [
       {
         "amount": "7500",
@@ -5538,11 +5456,6 @@
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
         "tx": "0x0a46fa3cc0154727ae4c7abca97bd7e26e6835018f96cf3a3860a9fcc791b9a4"
       },
-      {
-        "amount": "198.5439687",
-        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
-        "tx": "0xc25a025176872981def8433ef0982ba306737aaf2cf0867f2259fd19492af2b5"
-      },
       {
         "amount": "164.727209925",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -5727,12 +5640,6 @@
             "tranche_id": 34,
             "tx": "0x0a46fa3cc0154727ae4c7abca97bd7e26e6835018f96cf3a3860a9fcc791b9a4"
           },
-          {
-            "amount": "198.5439687",
-            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
-            "tranche_id": 34,
-            "tx": "0xc25a025176872981def8433ef0982ba306737aaf2cf0867f2259fd19492af2b5"
-          },
           {
             "amount": "164.727209925",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -5915,8 +5822,8 @@
           }
         ],
         "total_tokens": "7500",
-        "withdrawn_tokens": "4290.80292735",
-        "remaining_tokens": "3209.19707265"
+        "withdrawn_tokens": "4092.25895865",
+        "remaining_tokens": "3407.74104135"
       },
       {
         "address": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -5960,7 +5867,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "47798.995402052288763222",
+    "locked_amount": "48985.316712730632200127",
     "deposits": [
       {
         "amount": "129999.45",
@@ -5993,7 +5900,7 @@
     "tranche_end": "2024-04-01T00:00:00.000Z",
     "total_added": "54144.7663",
     "total_removed": "0",
-    "locked_amount": "47264.53497282707304506298",
+    "locked_amount": "48004.33914075889629566061",
     "deposits": [
       {
         "amount": "54144.7663",
@@ -6026,7 +5933,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "18607.12149289700607",
+    "locked_amount": "19464.79667681379966",
     "deposits": [
       {
         "amount": "10000",
@@ -6219,7 +6126,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "1677.97263444951825",
+    "locked_amount": "1746.4770421106035",
     "deposits": [
       {
         "amount": "5000",
@@ -7288,7 +7195,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "1709370.7872515768348",
-    "locked_amount": "82338.0135713287122219002",
+    "locked_amount": "108916.74248669465746918748",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -41160,7 +41067,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "715655.108029600523393",
-    "locked_amount": "151026.184536881782105898921",
+    "locked_amount": "191868.437149237997353062585",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -42552,8 +42459,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
-    "total_removed": "886751.39142845377669352",
-    "locked_amount": "5835216.73920078782616266076155334761097596",
+    "total_removed": "875570.57907812695176852",
+    "locked_amount": "5980040.74464094540876136852099906476290886",
     "deposits": [
       {
         "amount": "16249.93",
@@ -43077,31 +42984,6 @@
         "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
         "tx": "0xa515dafd399b366ba7f510ea6314587eb19e83fa92dbd5c2a212f3541a0cc4ef"
       },
-      {
-        "amount": "6626.72344",
-        "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
-        "tx": "0xdedcbf90e8f19c2a732ba2da663f59b5a19ad94800ddca6a3575019f19e9ca20"
-      },
-      {
-        "amount": "856.50757224183006",
-        "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
-        "tx": "0xc8835acd2e148eeaacde2a0df0ecad19c22717c7c51b207fdeac9a1af3f98c88"
-      },
-      {
-        "amount": "2186.689752850926125",
-        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
-        "tx": "0xb048cb2dcdfc30508770a3a112ddbacd63210f740cc887559660522bd506612c"
-      },
-      {
-        "amount": "1007.907542",
-        "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
-        "tx": "0x6a0d503d78cb1fd2291064c2d876cb8d2d91ad87c23ea6ff0b87b6443f8b434e"
-      },
-      {
-        "amount": "502.98404323406874",
-        "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
-        "tx": "0x34f5294e12b0fcbfe0be234ce712cfbc52d4d75b159ca4e55610eb75efe43286"
-      },
       {
         "amount": "10150.87581603206683",
         "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -45288,12 +45170,6 @@
             "tranche_id": 2,
             "tx": "0x989d22d5ba66353cb132b5643100a99e78133e5d40aef1ac91ed6ab0a2290299"
           },
-          {
-            "amount": "2186.689752850926125",
-            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
-            "tranche_id": 2,
-            "tx": "0xb048cb2dcdfc30508770a3a112ddbacd63210f740cc887559660522bd506612c"
-          },
           {
             "amount": "913.910324501590625",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -46850,8 +46726,8 @@
           }
         ],
         "total_tokens": "259998.8875",
-        "withdrawn_tokens": "163472.318146307289625",
-        "remaining_tokens": "96526.569353692710375"
+        "withdrawn_tokens": "161285.6283934563635",
+        "remaining_tokens": "98713.2591065436365"
       },
       {
         "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@@ -47084,18 +46960,6 @@
             "tranche_id": 2,
             "tx": "0xa515dafd399b366ba7f510ea6314587eb19e83fa92dbd5c2a212f3541a0cc4ef"
           },
-          {
-            "amount": "856.50757224183006",
-            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
-            "tranche_id": 2,
-            "tx": "0xc8835acd2e148eeaacde2a0df0ecad19c22717c7c51b207fdeac9a1af3f98c88"
-          },
-          {
-            "amount": "502.98404323406874",
-            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
-            "tranche_id": 2,
-            "tx": "0x34f5294e12b0fcbfe0be234ce712cfbc52d4d75b159ca4e55610eb75efe43286"
-          },
           {
             "amount": "10150.87581603206683",
             "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -47386,8 +47250,8 @@
           }
         ],
         "total_tokens": "150551.801",
-        "withdrawn_tokens": "95132.09101929755535",
-        "remaining_tokens": "55419.70998070244465"
+        "withdrawn_tokens": "93772.59940382165655",
+        "remaining_tokens": "56779.20159617834345"
       },
       {
         "address": "0x4d982Ab0823fD2f48e934a7be2bb0a5374a26148",
@@ -47607,18 +47471,6 @@
           }
         ],
         "withdrawals": [
-          {
-            "amount": "6626.72344",
-            "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
-            "tranche_id": 2,
-            "tx": "0xdedcbf90e8f19c2a732ba2da663f59b5a19ad94800ddca6a3575019f19e9ca20"
-          },
-          {
-            "amount": "1007.907542",
-            "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
-            "tranche_id": 2,
-            "tx": "0x6a0d503d78cb1fd2291064c2d876cb8d2d91ad87c23ea6ff0b87b6443f8b434e"
-          },
           {
             "amount": "1784.722222",
             "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
@@ -47879,8 +47731,8 @@
           }
         ],
         "total_tokens": "200000",
-        "withdrawn_tokens": "126376.871282",
-        "remaining_tokens": "73623.128718"
+        "withdrawn_tokens": "118742.2403",
+        "remaining_tokens": "81257.7597"
       },
       {
         "address": "0x1b956E6c00E238194B331eddEFF72Cb5f28A8d01",
@@ -59405,8 +59257,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
-    "total_removed": "45451.7934047643416",
-    "locked_amount": "23930.947264046135033247067681392",
+    "total_removed": "44730.9909821383416",
+    "locked_amount": "30402.650633041581093917170877724",
     "deposits": [
       {
         "amount": "3000",
@@ -66040,46 +65892,6 @@
         "user": "0x0003423D0A1858B6Eaf9a67914aBc67cDF989c2F",
         "tx": "0x7f120bd664d54bdabddad1ddb7ffdd84fbaa2630f1657289e3a7b11503ec4018"
       },
-      {
-        "amount": "65.737747336",
-        "user": "0xAc5bd5a3890B12B0da7cF1Ad846F6b8b260B60CC",
-        "tx": "0x8a4862b1fdacb7e24492397fac234152aae4146d9cca2f0a476e918cbe130af7"
-      },
-      {
-        "amount": "84.67351598",
-        "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
-        "tx": "0x891254ca1ea63a87ea7e14c3a985f58a403f4a0baf9fba86582785da6d2ae806"
-      },
-      {
-        "amount": "84.673820396",
-        "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
-        "tx": "0x26941fa486bf2aa16da2748a2326f87c3491c4f6f939f4329bd1eb3171ce6c3d"
-      },
-      {
-        "amount": "189.69504693",
-        "user": "0xC198534Ee3D619770C21FFAF5e9F067F8bbC07FD",
-        "tx": "0x803ba71987573a0ab20d4da7eb1dc7fe5e2fd8184199f0ee5d7a949b3d9f4e3e"
-      },
-      {
-        "amount": "189.696721206",
-        "user": "0xf0d681c15447dCfaa6002f17078944FCe75B5e26",
-        "tx": "0xed29b9b07eff1d6c43d586e545bf5557390f5c6040924718d0f28968fa34a8d5"
-      },
-      {
-        "amount": "0.005555556",
-        "user": "0xf0d681c15447dCfaa6002f17078944FCe75B5e26",
-        "tx": "0xca745232557385fff568386375d868633bd9542981dd07a6c471b4633dd5c9b8"
-      },
-      {
-        "amount": "69.499619482",
-        "user": "0x8c951C54F9cd08Cf81F770248e835D7A4F491a46",
-        "tx": "0xfee87c40eeb3d6681eaa844b65ddb52756356c3612e2c2c8606b96f4965bc195"
-      },
-      {
-        "amount": "36.82039574",
-        "user": "0x4eD2b3c68BB4fda084ce1591a210F4aC8b71234A",
-        "tx": "0xebbec73307d5d44428f791ad28622e6a075fa9a02d627f028db45a1042af473a"
-      },
       {
         "amount": "182.662252664",
         "user": "0xb1169C6daAc76bAcaf0D8f87641Fc38fbabe569F",
@@ -71066,23 +70878,10 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [
-          {
-            "amount": "189.696721206",
-            "user": "0xf0d681c15447dCfaa6002f17078944FCe75B5e26",
-            "tranche_id": 5,
-            "tx": "0xed29b9b07eff1d6c43d586e545bf5557390f5c6040924718d0f28968fa34a8d5"
-          },
-          {
-            "amount": "0.005555556",
-            "user": "0xf0d681c15447dCfaa6002f17078944FCe75B5e26",
-            "tranche_id": 5,
-            "tx": "0xca745232557385fff568386375d868633bd9542981dd07a6c471b4633dd5c9b8"
-          }
-        ],
+        "withdrawals": [],
         "total_tokens": "200",
-        "withdrawn_tokens": "189.702276762",
-        "remaining_tokens": "10.297723238"
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "200"
       },
       {
         "address": "0x7Cb540c27E6cAD1133a4942293B9293489A2Df19",
@@ -71139,17 +70938,10 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [
-          {
-            "amount": "189.69504693",
-            "user": "0xC198534Ee3D619770C21FFAF5e9F067F8bbC07FD",
-            "tranche_id": 5,
-            "tx": "0x803ba71987573a0ab20d4da7eb1dc7fe5e2fd8184199f0ee5d7a949b3d9f4e3e"
-          }
-        ],
+        "withdrawals": [],
         "total_tokens": "200",
-        "withdrawn_tokens": "189.69504693",
-        "remaining_tokens": "10.30495307"
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "200"
       },
       {
         "address": "0xFFDAE9319517529E0081710bF5A018E06C841eFf",
@@ -71686,12 +71478,6 @@
           }
         ],
         "withdrawals": [
-          {
-            "amount": "65.737747336",
-            "user": "0xAc5bd5a3890B12B0da7cF1Ad846F6b8b260B60CC",
-            "tranche_id": 5,
-            "tx": "0x8a4862b1fdacb7e24492397fac234152aae4146d9cca2f0a476e918cbe130af7"
-          },
           {
             "amount": "309.708054284",
             "user": "0xAc5bd5a3890B12B0da7cF1Ad846F6b8b260B60CC",
@@ -71700,8 +71486,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "375.44580162",
-        "remaining_tokens": "24.55419838"
+        "withdrawn_tokens": "309.708054284",
+        "remaining_tokens": "90.291945716"
       },
       {
         "address": "0x71bA18Cb18d7Cd338CF6E911882E717A8dEf8041",
@@ -80181,12 +79967,6 @@
           }
         ],
         "withdrawals": [
-          {
-            "amount": "36.82039574",
-            "user": "0x4eD2b3c68BB4fda084ce1591a210F4aC8b71234A",
-            "tranche_id": 5,
-            "tx": "0xebbec73307d5d44428f791ad28622e6a075fa9a02d627f028db45a1042af473a"
-          },
           {
             "amount": "26.662404872",
             "user": "0x4eD2b3c68BB4fda084ce1591a210F4aC8b71234A",
@@ -80291,8 +80071,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "379.711555048",
-        "remaining_tokens": "20.288444952"
+        "withdrawn_tokens": "342.891159308",
+        "remaining_tokens": "57.108840692"
       },
       {
         "address": "0x5c90765F50629570738fEe7b7FA82ae118f81Ed1",
@@ -86740,12 +86520,6 @@
           }
         ],
         "withdrawals": [
-          {
-            "amount": "69.499619482",
-            "user": "0x8c951C54F9cd08Cf81F770248e835D7A4F491a46",
-            "tranche_id": 5,
-            "tx": "0xfee87c40eeb3d6681eaa844b65ddb52756356c3612e2c2c8606b96f4965bc195"
-          },
           {
             "amount": "26.330974124",
             "user": "0x8c951C54F9cd08Cf81F770248e835D7A4F491a46",
@@ -86766,8 +86540,8 @@
           }
         ],
         "total_tokens": "200",
-        "withdrawn_tokens": "189.75159183",
-        "remaining_tokens": "10.24840817"
+        "withdrawn_tokens": "120.251972348",
+        "remaining_tokens": "79.748027652"
       },
       {
         "address": "0x3437f6ED844013852650851D769ae7939B5e0aec",
@@ -88896,12 +88670,6 @@
           }
         ],
         "withdrawals": [
-          {
-            "amount": "84.673820396",
-            "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
-            "tranche_id": 5,
-            "tx": "0x26941fa486bf2aa16da2748a2326f87c3491c4f6f939f4329bd1eb3171ce6c3d"
-          },
           {
             "amount": "191.520738204",
             "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
@@ -88916,8 +88684,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "378.390702688",
-        "remaining_tokens": "21.609297312"
+        "withdrawn_tokens": "293.716882292",
+        "remaining_tokens": "106.283117708"
       },
       {
         "address": "0x256274a216e0a349dC18cae08Ca45631176AF437",
@@ -88930,12 +88698,6 @@
           }
         ],
         "withdrawals": [
-          {
-            "amount": "84.67351598",
-            "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
-            "tranche_id": 5,
-            "tx": "0x891254ca1ea63a87ea7e14c3a985f58a403f4a0baf9fba86582785da6d2ae806"
-          },
           {
             "amount": "191.524581432",
             "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
@@ -88950,8 +88712,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "378.389028408",
-        "remaining_tokens": "21.610971592"
+        "withdrawn_tokens": "293.715512428",
+        "remaining_tokens": "106.284487572"
       },
       {
         "address": "0xB0473C4FeBd722a6d7eE561329d3134030318132",
@@ -89308,7 +89070,7 @@
     "tranche_start": "2021-12-05T00:00:00.000Z",
     "tranche_end": "2022-06-05T00:00:00.000Z",
     "total_added": "171288.42",
-    "total_removed": "72069.2365096947989",
+    "total_removed": "71890.5995794947989",
     "locked_amount": "0",
     "deposits": [
       {
@@ -93568,11 +93330,6 @@
         "user": "0x2A6Ea2aBEf3D7d7A76CBeF3c297eE0eF9a86BBA8",
         "tx": "0x163b699e8a25073ad1ad45c8a8f9b1348eb0b648d3f4bc6f3f64648e0ad726bf"
       },
-      {
-        "amount": "178.6369302",
-        "user": "0xC3d15bD936DDCb45b87BFF3Ff13445284a6c9d43",
-        "tx": "0x7381b77de572d356ae185a760ff839dbdc85cb97bf408b110f7779bb095ea293"
-      },
       {
         "amount": "250",
         "user": "0x0E3407C9A94effa675471afe7A9D37e687C32141",
@@ -110069,12 +109826,6 @@
           }
         ],
         "withdrawals": [
-          {
-            "amount": "178.6369302",
-            "user": "0xC3d15bD936DDCb45b87BFF3Ff13445284a6c9d43",
-            "tranche_id": 6,
-            "tx": "0x7381b77de572d356ae185a760ff839dbdc85cb97bf408b110f7779bb095ea293"
-          },
           {
             "amount": "71.3630698",
             "user": "0xC3d15bD936DDCb45b87BFF3Ff13445284a6c9d43",
@@ -110083,8 +109834,8 @@
           }
         ],
         "total_tokens": "250",
-        "withdrawn_tokens": "250",
-        "remaining_tokens": "0"
+        "withdrawn_tokens": "71.3630698",
+        "remaining_tokens": "178.6369302"
       },
       {
         "address": "0x4A13d4dC5e06ACdA81C011D55a7DaAc332bC5Dbf",

apps/trading-e2e/cypress.config.js

@@ -20,7 +20,7 @@ module.exports = defineConfig({
     chromeWebSecurity: false,
     projectId: 'et4snf',
     defaultCommandTimeout: 10000,
-    viewportWidth: 1800,
+    viewportWidth: 1440,
     viewportHeight: 900,
     responseTimeout: 50000,
     requestTimeout: 20000,

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -7,9 +7,6 @@ const marketTitle = 'accordion-title';
 const externalLink = 'external-link';
 const accordionContent = 'accordion-content';
 const providerName = 'provider-name';
-const oracleBannerStatus = 'oracle-banner-status';
-const oracleBannerDialogTrigger = 'oracle-banner-dialog-trigger';
-const oracleFullProfile = 'oracle-full-profile';
 
 describe('market info is displayed', { tags: '@smoke' }, () => {
   beforeEach(() => {
@@ -32,11 +29,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
 
   it('show oracle banner', () => {
     cy.getByTestId(marketTitle).contains('Oracle').click();
-    cy.getByTestId(oracleBannerStatus).should('contain.text', 'COMPROMISED');
-    cy.getByTestId(oracleBannerDialogTrigger)
-      .should('contain.text', 'Show more')
-      .click();
-    cy.getByTestId(oracleFullProfile).should('exist');
+    cy.getByTestId('oracle-status').should('contain.text', 'COMPROMISED');
   });
 
   it('current fees displayed', () => {
@@ -199,6 +192,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
       .within(() => {
         cy.getByTestId('block-explorer-link').contains('Block explorer');
         cy.getByTestId('github-link').contains('Oracle repository');
+        cy.getByTestId('verified-accounts').contains('0 proofs of ownership');
       });
     cy.getByTestId('dialog-close').click();
 

apps/trading-e2e/src/integration/market-selector.cy.ts

@@ -1,105 +0,0 @@
-import {
-  AuctionTrigger,
-  MarketState,
-  MarketTradingMode,
-} from '@vegaprotocol/types';
-
-describe('markets selector', { tags: '@smoke' }, () => {
-  const list = 'market-selector-list';
-  const searchInput = 'search-term';
-
-  beforeEach(() => {
-    cy.window().then((window) => {
-      window.localStorage.setItem('marketId', 'market-1');
-    });
-    cy.mockTradingPage(
-      MarketState.STATE_ACTIVE,
-      MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-      AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
-    );
-    cy.mockSubscription();
-    cy.visit('/');
-
-    cy.wait('@Markets');
-    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandles');
-  });
-
-  it('can toggle the sidebar', () => {
-    cy.getByTestId('market-selector').should('be.visible');
-    cy.getByTestId('sidebar-toggle').click();
-    cy.getByTestId('market-selector').should('not.exist');
-    cy.getByTestId('sidebar-toggle').click();
-    cy.getByTestId('market-selector').should('be.visible');
-  });
-
-  // need function keyword as we need 'this' to access market data
-  it('displays data as expected', () => {
-    // TODO: load data from mocks in. Using alias and wrap intermittently fails
-    const data = [
-      {
-        code: 'AAPL.MF21',
-        name: 'Apple Monthly (30 Jun 2022)',
-        markPrice: '46,126.90058',
-        change: '+200.00%',
-      },
-      {
-        code: 'BTCUSD.MF21',
-        name: 'ACTIVE MARKET',
-        markPrice: '46,126.90058',
-        change: '+200.00%',
-      },
-      {
-        code: 'ETHBTC.QM21',
-        name: 'ETHBTC Quarterly (30 Jun 2022)',
-        markPrice: '46,126.90058',
-        change: '+200.00%',
-      },
-      {
-        code: 'SOLUSD',
-        name: 'SUSPENDED MARKET',
-        markPrice: '84.41',
-        change: '+200.00%',
-      },
-    ];
-    cy.getByTestId(list)
-      .find('a')
-      .each((item, i) => {
-        const market = data[i];
-        // 6001-MARK-021
-        expect(item.find('h3').text()).equals(market.code);
-        // 6001-MARK-022
-        expect(item.find('h4').text()).equals(market.name);
-        // 6001-MARK-024
-        expect(item.find('[data-testid="market-item-price"]').text()).equals(
-          market.markPrice
-        );
-        // 6001-MARK-023
-        expect(item.find('[data-testid="market-item-change"]').text()).equals(
-          market.change
-        );
-        // 6001-MARK-025
-        expect(item.find('[data-testid="sparkline-svg"]')).to.exist;
-      });
-  });
-
-  // 6001-MARK-27
-  it('can use the filter options', () => {
-    // product type
-    cy.getByTestId('product-Spot').click();
-    cy.getByTestId(list).contains('Spot markets coming soon.');
-    cy.getByTestId('product-Perpetual').click();
-    cy.getByTestId(list).contains('Perpetual markets coming soon.');
-    cy.getByTestId('product-Future').click();
-    cy.getByTestId(list).find('a').should('have.length', 4);
-
-    // 6001-MARK-29
-    cy.getByTestId(searchInput).clear().type('btc');
-    cy.getByTestId(list).find('a').should('have.length', 2);
-    cy.getByTestId(list).find('a').eq(0).contains('BTCUSD.MF21');
-    cy.getByTestId(list).find('a').eq(1).contains('ETHBTC.QM21');
-
-    cy.getByTestId(searchInput).clear();
-    cy.getByTestId(list).find('a').should('have.length', 4);
-  });
-});

apps/trading-e2e/src/integration/market-summary.cy.ts

@@ -31,7 +31,7 @@ describe('Market trading page', () => {
     // 7002-SORD-001
     // 7002-SORD-002
     it('must display market name', () => {
-      cy.getByTestId('header-title').should('not.be.empty');
+      cy.getByTestId('popover-trigger').should('not.be.empty');
     });
 
     it('must see market expiry', () => {

apps/trading-e2e/src/integration/markets.cy.ts

@@ -4,6 +4,7 @@ import { marketsQuery } from '@vegaprotocol/mock';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 
 const dialogCloseBtn = 'dialog-close';
+const popoverTrigger = 'popover-trigger';
 
 describe('markets table', { tags: '@smoke' }, () => {
   beforeEach(() => {
@@ -30,6 +31,36 @@ describe('markets table', { tags: '@smoke' }, () => {
     cy.getByTestId('sparkline-svg').should('be.visible');
   });
 
+  it('renders market list drop down', () => {
+    openMarketDropDown();
+    cy.getByTestId('price').invoke('text').should('not.be.empty');
+    cy.getByTestId('trading-mode-col').should('not.be.empty');
+    cy.getByTestId('taker-fee').should('contain.text', '%');
+    cy.getByTestId('market-volume').should('not.be.empty');
+    cy.getByTestId('market-name').should('not.be.empty');
+
+    cy.getByTestId('trading-mode-col')
+      .contains('Monitoring auction - liquidity')
+      .eq(0)
+      .realHover();
+    cy.get('[data-testid="trading-mode-tooltip"] p').should('have.class', '');
+    cy.get(
+      '[data-testid="market-trading-mode"] [data-testid="item-value"]'
+    ).realHover();
+    cy.get('[data-testid="trading-mode-tooltip"] p').should(
+      'have.class',
+      'mb-4'
+    );
+  });
+
+  it('able to select market from dropdown', () => {
+    openMarketDropDown();
+    cy.getByTestId('market-link-market-0').first().should('be.visible').click();
+    cy.contains('ACTIVE MARKET').should('be.visible');
+    cy.url().should('include', '/markets/market-0');
+    cy.getByTestId('popover-trigger').should('not.be.empty');
+  });
+
   it('able to open and sort full market list - market page', () => {
     const ExpectedSortedMarkets = [
       'AAPL.MF21',
@@ -222,3 +253,15 @@ describe('markets table', { tags: '@smoke' }, () => {
     });
   });
 });
+
+function openMarketDropDown() {
+  cy.getByTestId(dialogCloseBtn).then((button) => {
+    if (button.is(':visible')) {
+      cy.get('[data-testid^="market-link-"]').should('not.be.empty');
+      cy.getByTestId(dialogCloseBtn).click();
+    }
+    cy.get('[data-testid^="ask-vol-"]').should('be.visible');
+    cy.getByTestId(popoverTrigger).click({ force: true });
+    cy.contains('Loading market data...').should('not.exist');
+  });
+}

apps/trading-e2e/src/integration/trading-orders.cy.ts

@@ -291,58 +291,12 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       .should('have.text', '200.00');
   });
 
-  it('must see a pegged order - ask', () => {
-    updateOrder({
-      id: orderId,
-      side: Schema.Side.SIDE_BUY,
-      peggedOrder: {
-        __typename: 'PeggedOrder',
-        reference: Schema.PeggedReference.PEGGED_REFERENCE_BEST_ASK,
-        offset: '250000',
-      },
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find('[col-id="type"]')
-      .should('have.text', 'Ask - 2.50 Peg limit');
-  });
-
-  it('must see a pegged order - bid', () => {
-    updateOrder({
-      id: orderId,
-      side: Schema.Side.SIDE_SELL,
-      peggedOrder: {
-        __typename: 'PeggedOrder',
-        reference: Schema.PeggedReference.PEGGED_REFERENCE_BEST_BID,
-        offset: '100',
-      },
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find('[col-id="type"]')
-      .should('have.text', 'Bid + 0.001 Peg limit');
-  });
-
-  it('must see a pegged order - mid', () => {
-    updateOrder({
-      id: orderId,
-      side: Schema.Side.SIDE_SELL,
-      peggedOrder: {
-        __typename: 'PeggedOrder',
-        reference: Schema.PeggedReference.PEGGED_REFERENCE_MID,
-        offset: '0.5',
-      },
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find('[col-id="type"]')
-      .should('have.text', 'Mid + 0.00001 Peg limit');
-  });
-
   it('for market typy must not see a price for active or parked orders', () => {
     // 7003-MORD-005
     updateOrder({
       id: orderId,
       type: Schema.OrderType.TYPE_MARKET,
       status: Schema.OrderStatus.STATUS_PARKED,
-      peggedOrder: null,
     });
     cy.get(`[row-id=${orderId}]`)
       .find('[col-id="price"]')
@@ -383,7 +337,6 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
     updateOrder({
       id: orderId,
       status: Schema.OrderStatus.STATUS_ACTIVE,
-      peggedOrder: {},
       liquidityProvisionId: '6536',
     });
     cy.get(`[row-id=${orderId}]`)

apps/trading-e2e/src/support/trading.ts

@@ -1,7 +1,7 @@
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import * as Schema from '@vegaprotocol/types';
 import type { CyHttpMessages } from 'cypress/types/net-stubbing';
-import type { Provider, Status } from '@vegaprotocol/market-info';
+import type { Provider, Status } from '@vegaprotocol/oracles';
 import {
   accountsQuery,
   assetQuery,

apps/trading/__mocks__/react-markdown.js

@@ -1,6 +0,0 @@
-function ReactMarkdown({ children }) {
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{children}</>;
-}
-
-export default ReactMarkdown;

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

@@ -8,6 +8,7 @@ import {
 import { tooltipMapping } from '@vegaprotocol/market-info';
 import {
   addDecimalsFormatNumber,
+  createDocsLinks,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -38,7 +39,7 @@ import { Link, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 
 import { useMarket, useStaticMarketData } from '@vegaprotocol/market-list';
-import { DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -146,6 +147,7 @@ const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
     market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
   const symbol =
     market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+  const { VEGA_DOCS_URL } = useEnvironment();
 
   const { params } = useNetworkParams([
     NetworkParams.market_liquidity_stakeToCcyVolume,
@@ -214,12 +216,10 @@ const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
         <div className="break-word">{marketId}</div>
       </HeaderStat>
       <HeaderStat heading={t('Learn more')}>
-        {DocsLinks ? (
-          <ExternalLink href={DocsLinks.LIQUIDITY}>
+        {VEGA_DOCS_URL && (
+          <ExternalLink href={createDocsLinks(VEGA_DOCS_URL).LIQUIDITY}>
             {t('Providing liquidity')}
           </ExternalLink>
-        ) : (
-          (null as React.ReactNode)
         )}
       </HeaderStat>
     </Header>

apps/trading/client-pages/market/asset-dropdown.spec.tsx

@@ -1,83 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { AssetDropdown } from './asset-dropdown';
-
-const createAssets = (count = 3) => {
-  return new Array(count).fill(null).map((_, i) => ({
-    id: i.toString(),
-    symbol: 'asset-1',
-  }));
-};
-
-describe('AssetDropdown', () => {
-  const assets = createAssets();
-
-  it('renders and selects chosen assets', async () => {
-    const mockOnSelect = jest.fn();
-    render(
-      <AssetDropdown
-        checkedAssets={[]}
-        assets={assets}
-        onSelect={mockOnSelect}
-        onReset={jest.fn()}
-      />
-    );
-    await userEvent.click(screen.getByRole('button'));
-    const items = screen.getAllByRole('menuitemcheckbox');
-    expect(items).toHaveLength(assets.length);
-    expect(items.map((i) => i.textContent)).toEqual(
-      assets.map((a) => a.symbol)
-    );
-    await userEvent.click(items[0]);
-    expect(mockOnSelect).toHaveBeenCalledWith(assets[0].id, true);
-  });
-
-  it('unselects already selected assets', async () => {
-    const mockOnSelect = jest.fn();
-    render(
-      <AssetDropdown
-        checkedAssets={[assets[0].id]}
-        assets={assets}
-        onSelect={mockOnSelect}
-        onReset={jest.fn()}
-      />
-    );
-    await userEvent.click(screen.getByRole('button'));
-    const items = screen.getAllByRole('menuitemcheckbox');
-    await userEvent.click(items[0]);
-    expect(mockOnSelect).toHaveBeenCalledWith(assets[0].id, false);
-  });
-
-  it('can be reset clearing all assets', async () => {
-    const mockOnSelect = jest.fn();
-    const mockOnReset = jest.fn();
-    render(
-      <AssetDropdown
-        checkedAssets={assets.map((a) => a.id)}
-        assets={assets}
-        onSelect={mockOnSelect}
-        onReset={mockOnReset}
-      />
-    );
-    await userEvent.click(screen.getByRole('button'));
-    const items = screen.getAllByRole('menuitemcheckbox');
-    // all should be checked
-    items.forEach((item) => {
-      expect(item).toBeChecked();
-    });
-    await userEvent.click(screen.getByText('Reset'));
-    expect(mockOnReset).toHaveBeenCalled();
-  });
-
-  it('doesnt render if no assets provided', async () => {
-    const { container } = render(
-      <AssetDropdown
-        checkedAssets={[]}
-        assets={[]}
-        onSelect={jest.fn()}
-        onReset={jest.fn()}
-      />
-    );
-    expect(container).toBeEmptyDOMElement();
-  });
-});

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

@@ -1,58 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemIndicator,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from '@vegaprotocol/ui-toolkit';
-
-export const AssetDropdown = ({
-  assets,
-  checkedAssets,
-  onSelect,
-  onReset,
-}: {
-  assets: Array<{ id: string; symbol: string }> | undefined;
-  checkedAssets: string[];
-  onSelect: (id: string, checked: boolean) => void;
-  onReset: () => void;
-}) => {
-  if (!assets?.length) {
-    return null;
-  }
-
-  return (
-    <DropdownMenu
-      trigger={
-        <DropdownMenuTrigger data-testid="asset-trigger">
-          <span className="px-1">$</span>
-        </DropdownMenuTrigger>
-      }
-    >
-      <DropdownMenuContent>
-        <DropdownMenuItem onClick={onReset}>{t('Reset')}</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        {assets?.map((a) => {
-          return (
-            <DropdownMenuCheckboxItem
-              key={a.id}
-              checked={checkedAssets.includes(a.id)}
-              onCheckedChange={(checked) => {
-                if (typeof checked === 'boolean') {
-                  onSelect(a.id, checked);
-                }
-              }}
-              data-testid={`asset-id-${a.id}`}
-            >
-              {a.symbol}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

apps/trading/client-pages/market/market-selector-item.spec.tsx

@@ -1,111 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { createMarketFragment } from '@vegaprotocol/mock';
-import { MarketSelectorItem } from './market-selector-item';
-import { MemoryRouter } from 'react-router-dom';
-import type { MockedResponse } from '@apollo/client/testing';
-import { MockedProvider } from '@apollo/client/testing';
-import type {
-  MarketDataUpdateFieldsFragment,
-  MarketDataUpdateSubscription,
-} from '@vegaprotocol/market-list';
-import { MarketDataUpdateDocument } from '@vegaprotocol/market-list';
-import {
-  AuctionTrigger,
-  MarketState,
-  MarketTradingMode,
-} from '@vegaprotocol/types';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-
-describe('MarketSelectorItem', () => {
-  const market = createMarketFragment({
-    id: 'market-0',
-    decimalPlaces: 2,
-    // @ts-ignore fragment doesn't contain candles
-    candles: [{ close: '5' }, { close: '10' }],
-  });
-  const marketData: MarketDataUpdateFieldsFragment = {
-    __typename: 'ObservableMarketData',
-    marketId: market.id,
-    auctionEnd: null,
-    auctionStart: null,
-    bestBidPrice: '100',
-    bestBidVolume: '100',
-    bestOfferPrice: '100',
-    bestOfferVolume: '100',
-    bestStaticBidPrice: '100',
-    bestStaticBidVolume: '100',
-    bestStaticOfferPrice: '100',
-    bestStaticOfferVolume: '100',
-    indicativePrice: '100',
-    indicativeVolume: '100',
-    marketState: MarketState.STATE_ACTIVE,
-    marketTradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
-    marketValueProxy: '100',
-    markPrice: '50000',
-    midPrice: '100',
-    staticMidPrice: '100',
-    openInterest: '100',
-    suppliedStake: '1000000',
-    targetStake: '1000000',
-    trigger: AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED,
-    priceMonitoringBounds: null,
-  };
-  const mock: MockedResponse<MarketDataUpdateSubscription> = {
-    request: {
-      query: MarketDataUpdateDocument,
-      variables: {
-        marketId: market.id,
-      },
-    },
-    result: {
-      data: {
-        marketsData: [marketData],
-      },
-    },
-  };
-
-  const mockOnSelect = jest.fn();
-
-  const renderJsx = () => {
-    return render(
-      <MemoryRouter>
-        <MockedProvider mocks={[mock]}>
-          <MarketSelectorItem
-            market={market}
-            currentMarketId={market.id}
-            style={{}}
-            onSelect={mockOnSelect}
-          />
-        </MockedProvider>
-      </MemoryRouter>
-    );
-  };
-
-  it('renders market information', async () => {
-    renderJsx();
-
-    const link = screen.getByRole('link');
-    // link renders and is styled
-    expect(link).toHaveAttribute('href', '/markets/' + market.id);
-
-    expect(link).toHaveClass('ring-1');
-
-    expect(screen.getByTestId('market-item-price')).toHaveTextContent('-');
-
-    // candles are loaded immediately
-    expect(screen.getByTestId('market-item-change')).toHaveTextContent(
-      '+100.00%'
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('market-item-price')).toHaveTextContent(
-        addDecimalsFormatNumber(marketData.markPrice, market.decimalPlaces)
-      );
-    });
-
-    await userEvent.click(link);
-
-    expect(mockOnSelect).toHaveBeenCalledWith(market.id);
-  });
-});

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

@@ -1,115 +0,0 @@
-import type { CSSProperties } from 'react';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import {
-  addDecimalsFormatNumber,
-  formatNumber,
-  priceChangePercentage,
-} from '@vegaprotocol/utils';
-import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list';
-import { useMarketDataUpdateSubscription } from '@vegaprotocol/market-list';
-import { Sparkline } from '@vegaprotocol/ui-toolkit';
-
-export const MarketSelectorItem = ({
-  market,
-  style,
-  currentMarketId,
-  onSelect,
-}: {
-  market: MarketMaybeWithDataAndCandles;
-  style: CSSProperties;
-  currentMarketId?: string;
-  onSelect?: (marketId: string) => void;
-}) => {
-  const wrapperClasses = classNames(
-    'block bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg p-4',
-    'min-h-[120px]',
-    {
-      'ring-1 ring-vega-light-300 dark:ring-vega-dark-300':
-        currentMarketId === market.id,
-    }
-  );
-  return (
-    <div style={style} className="my-0.5 px-4">
-      <Link
-        to={`/markets/${market.id}`}
-        className={wrapperClasses}
-        onClick={() => {
-          onSelect && onSelect(market.id);
-        }}
-      >
-        <h3>{market.tradableInstrument.instrument.code}</h3>
-        <h4
-          title={market.tradableInstrument.instrument.name}
-          className="text-sm text-vega-light-300 dark:text-vega-dark-300 text-ellipsis whitespace-nowrap overflow-hidden"
-        >
-          {market.tradableInstrument.instrument.name}
-        </h4>
-        <MarketData market={market} />
-      </Link>
-    </div>
-  );
-};
-
-const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
-  const { data } = useMarketDataUpdateSubscription({
-    variables: {
-      marketId: market.id,
-    },
-  });
-
-  const marketData = data?.marketsData[0];
-
-  // use market data price if available as this is comes from
-  // the subscription
-  const price = marketData
-    ? addDecimalsFormatNumber(marketData.markPrice, market.decimalPlaces)
-    : market.data
-    ? addDecimalsFormatNumber(market.data.markPrice, market.decimalPlaces)
-    : '-';
-
-  return (
-    <div className="flex flex-nowrap justify-between items-center mt-1">
-      <div className="w-1/2">
-        <div
-          className="text-ellipsis whitespace-nowrap overflow-hidden"
-          data-testid="market-item-price"
-        >
-          {price}
-        </div>
-        {market.candles && (
-          <PriceChange candles={market.candles.map((c) => c.close)} />
-        )}
-      </div>
-      <div className="w-1/2 max-w-[120px]">
-        {market.candles ? (
-          <Sparkline
-            width={120}
-            height={20}
-            data={market.candles.filter(Boolean).map((c) => Number(c.close))}
-          />
-        ) : (
-          '-'
-        )}
-      </div>
-    </div>
-  );
-};
-
-const PriceChange = ({ candles }: { candles: string[] }) => {
-  const priceChange = candles ? priceChangePercentage(candles) : undefined;
-  const priceChangeClasses = classNames('text-xs', {
-    'text-vega-pink': priceChange && priceChange < 0,
-    'text-vega-green': priceChange && priceChange > 0,
-  });
-  let prefix = '';
-  if (priceChange && priceChange > 0) {
-    prefix = '+';
-  }
-  const formattedChange = formatNumber(Number(priceChange), 2);
-  return (
-    <div className={priceChangeClasses} data-testid="market-item-change">
-      {priceChange ? `${prefix}${formattedChange}%` : '-'}
-    </div>
-  );
-};

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

@@ -1,289 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MarketSelector } from './market-selector';
-import { useMarketList } from '@vegaprotocol/market-list';
-import { createMarketFragment } from '@vegaprotocol/mock';
-import { MarketState } from '@vegaprotocol/types';
-import { MemoryRouter } from 'react-router-dom';
-import type { ReactNode } from 'react';
-import type { SortType } from './sort-dropdown';
-import { SortTypeMapping } from './sort-dropdown';
-import { Sort } from './sort-dropdown';
-import { subDays } from 'date-fns';
-
-jest.mock('@vegaprotocol/market-list');
-const mockUseMarketList = useMarketList as jest.Mock;
-
-// mock market list items to avoid subscriptions starting
-jest.mock('./market-selector-item', () => ({
-  MarketSelectorItem: (props: { market: { id: string } }) => (
-    <div data-testid={props.market.id} />
-  ),
-}));
-
-// without a real DOM autosize won't render with an actual height or width
-jest.mock('react-virtualized-auto-sizer', () => {
-  // eslint-disable-next-line react/display-name
-  return ({
-    children,
-  }: {
-    children: (size: { width: number; height: number }) => ReactNode;
-  }) => <div>{children({ width: 300, height: 1000 })}</div>;
-});
-
-describe('MarketSelector', () => {
-  const markets = [
-    createMarketFragment({
-      id: 'market-0',
-      tradableInstrument: {
-        instrument: {
-          code: 'a',
-          name: 'a',
-          product: {
-            settlementAsset: {
-              id: 'asset-0',
-            },
-          },
-        },
-      },
-      // @ts-ignore candles get joined outside this type
-      candles: [{ close: '100' }, { close: '200' }],
-      marketTimestamps: {
-        open: subDays(new Date(), 1).toISOString(),
-      },
-    }),
-    createMarketFragment({
-      id: 'market-1',
-      state: MarketState.STATE_SUSPENDED,
-      tradableInstrument: {
-        instrument: {
-          code: 'b',
-          name: 'b',
-          product: {
-            settlementAsset: {
-              id: 'asset-0',
-            },
-          },
-        },
-      },
-      // @ts-ignore candles get joined outside this type
-      candles: [{ close: '100' }, { close: '400' }],
-      marketTimestamps: {
-        open: subDays(new Date(), 2).toISOString(),
-      },
-    }),
-    createMarketFragment({
-      id: 'market-2',
-      state: MarketState.STATE_CLOSED,
-      tradableInstrument: {
-        instrument: {
-          product: {
-            settlementAsset: {
-              id: 'asset-1',
-            },
-          },
-        },
-      },
-    }),
-    createMarketFragment({
-      id: 'market-3',
-      state: MarketState.STATE_ACTIVE,
-      tradableInstrument: {
-        instrument: {
-          code: 'c',
-          name: 'c',
-          product: {
-            settlementAsset: {
-              id: 'asset-1',
-            },
-          },
-        },
-      },
-      // @ts-ignore candles get joined outside this type
-      candles: [{ close: '100' }, { close: '1000' }],
-      marketTimestamps: {
-        open: subDays(new Date(), 0).toISOString(),
-      },
-    }),
-    createMarketFragment({
-      id: 'market-4',
-      tradableInstrument: {
-        instrument: {
-          code: 'cd',
-          name: 'cd',
-          product: {
-            settlementAsset: {
-              id: 'asset-2',
-            },
-          },
-        },
-      },
-      // @ts-ignore candles get joined outside this type
-      candles: [{ close: '100' }, { close: '300' }],
-      marketTimestamps: {
-        open: subDays(new Date(), 3).toISOString(),
-      },
-    }),
-  ];
-
-  const activeMarkets = markets.filter((m) =>
-    [MarketState.STATE_ACTIVE, MarketState.STATE_SUSPENDED].includes(m.state)
-  );
-  mockUseMarketList.mockReturnValue({
-    data: markets,
-    loading: false,
-    error: undefined,
-  });
-
-  it('renders only active markets', () => {
-    render(
-      <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
-      </MemoryRouter>
-    );
-    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(
-      activeMarkets.length
-    );
-    expect(screen.getByRole('link')).toHaveTextContent('All markets');
-  });
-
-  it('filters by product type', async () => {
-    render(
-      <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
-      </MemoryRouter>
-    );
-
-    await userEvent.click(screen.getByTestId('product-Spot'));
-    expect(screen.queryAllByTestId(/market-\d/)).toHaveLength(0);
-    expect(screen.getByTestId('no-items')).toHaveTextContent(
-      'Spot markets coming soon.'
-    );
-
-    await userEvent.click(screen.getByTestId('product-Perpetual'));
-    expect(screen.queryAllByTestId(/market-\d/)).toHaveLength(0);
-    expect(screen.getByTestId('no-items')).toHaveTextContent(
-      'Perpetual markets coming soon.'
-    );
-
-    await userEvent.click(screen.getByTestId('product-Future'));
-    expect(screen.queryAllByTestId(/market-\d/)).toHaveLength(
-      activeMarkets.length
-    );
-    expect(screen.queryByTestId('no-items')).not.toBeInTheDocument();
-  });
-
-  it('filters by search term', async () => {
-    render(
-      <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
-      </MemoryRouter>
-    );
-
-    await userEvent.type(screen.getByTestId('search-term'), 'zzz');
-    expect(screen.getByTestId('no-items')).toHaveTextContent('No markets');
-    const input = screen.getByTestId('search-term');
-    await userEvent.clear(input);
-    await userEvent.type(input, 'a');
-    expect(input).toHaveValue('a');
-    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(1);
-    expect(screen.getByTestId('market-0')).toBeInTheDocument();
-
-    await userEvent.clear(input);
-    await userEvent.type(input, 'b');
-    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(1);
-    expect(screen.getByTestId('market-1')).toBeInTheDocument();
-
-    await userEvent.clear(input);
-    await userEvent.type(input, 'c');
-    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(2);
-    expect(screen.getByTestId('market-3')).toBeInTheDocument();
-    expect(screen.getByTestId('market-4')).toBeInTheDocument();
-  });
-
-  it('filters by asset', async () => {
-    render(
-      <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
-      </MemoryRouter>
-    );
-
-    await userEvent.click(screen.getByTestId('asset-trigger'));
-    expect(screen.getAllByTestId(/asset-id/)).toHaveLength(3);
-    await userEvent.click(screen.getByTestId('asset-id-asset-0'));
-    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(2);
-    expect(screen.getByTestId('market-0')).toBeInTheDocument();
-    expect(screen.getByTestId('market-1')).toBeInTheDocument();
-
-    // reopen asset dropdown and add asset-1
-    await userEvent.click(screen.getByTestId('asset-trigger'));
-    await userEvent.click(screen.getByTestId('asset-id-asset-1'));
-
-    // all markets with asset-0 or asset-1 shown (no market id as market is closed)
-    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(3);
-    expect(screen.getByTestId('market-0')).toBeInTheDocument();
-    expect(screen.getByTestId('market-1')).toBeInTheDocument();
-    expect(screen.getByTestId('market-3')).toBeInTheDocument();
-
-    // reopen and uncheck asset-0
-    await userEvent.click(screen.getByTestId('asset-trigger'));
-    await userEvent.click(screen.getByTestId('asset-id-asset-0'));
-
-    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(1);
-    expect(screen.getByTestId('market-3')).toBeInTheDocument();
-  });
-
-  it('sorts by gained', async () => {
-    render(
-      <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
-      </MemoryRouter>
-    );
-
-    await userEvent.click(screen.getByTestId('sort-trigger'));
-    const options = screen.getAllByTestId(/sort-item/);
-    expect(options.map((o) => o.textContent)).toEqual(
-      Object.entries(Sort)
-        .filter(([key]) => key !== Sort.None)
-        .map(([key]) => SortTypeMapping[key as SortType])
-    );
-    await userEvent.click(screen.getByTestId('sort-item-Gained'));
-    expect(
-      screen
-        .getAllByTestId(/market-\d/)
-        .map((el) => el.getAttribute('data-testid'))
-    ).toEqual([markets[3].id, markets[1].id, markets[4].id, markets[0].id]);
-  });
-
-  it('sorts by lost', async () => {
-    render(
-      <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
-      </MemoryRouter>
-    );
-
-    await userEvent.click(screen.getByTestId('sort-trigger'));
-    await userEvent.click(screen.getByTestId('sort-item-Lost'));
-    expect(
-      screen
-        .getAllByTestId(/market-\d/)
-        .map((el) => el.getAttribute('data-testid'))
-    ).toEqual([markets[0].id, markets[4].id, markets[1].id, markets[3].id]);
-  });
-
-  it('sorts by new', async () => {
-    render(
-      <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
-      </MemoryRouter>
-    );
-
-    await userEvent.click(screen.getByTestId('sort-trigger'));
-    await userEvent.click(screen.getByTestId('sort-item-New'));
-    expect(
-      screen
-        .getAllByTestId(/market-\d/)
-        .map((el) => el.getAttribute('data-testid'))
-    ).toEqual([markets[3].id, markets[0].id, markets[1].id, markets[4].id]);
-  });
-});

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

@@ -1,276 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import uniqBy from 'lodash/uniqBy';
-import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list';
-import {
-  Input,
-  TinyScroll,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import type { CSSProperties } from 'react';
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { FixedSizeList } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { useMarketSelectorList } from './use-market-selector-list';
-import type { ProductType } from './product-selector';
-import { Product, ProductSelector } from './product-selector';
-import { AssetDropdown } from './asset-dropdown';
-import type { SortType } from './sort-dropdown';
-import { Sort, SortDropdown } from './sort-dropdown';
-import { MarketSelectorItem } from './market-selector-item';
-
-export type Filter = {
-  searchTerm: string;
-  product: ProductType;
-  sort: SortType;
-  assets: string[];
-};
-
-/**
- * Fetches market data and filters it given a set of filter properties
- * defined in Filter
- */
-export const MarketSelector = ({
-  currentMarketId,
-  onSelect,
-}: {
-  currentMarketId?: string;
-  onSelect?: (marketId: string) => void;
-}) => {
-  const [filter, setFilter] = useState<Filter>({
-    searchTerm: '',
-    product: Product.Future,
-    sort: Sort.None,
-    assets: [],
-  });
-
-  const { markets, data, loading, error } = useMarketSelectorList(filter);
-
-  return (
-    <div
-      className="grid grid-rows-[min-content_1fr_min-content] h-full"
-      data-testid="market-selector"
-    >
-      <div className="px-4 pt-2 pb-4">
-        <ProductSelector
-          product={filter.product}
-          onSelect={(product) => {
-            setFilter((curr) => ({ ...curr, product }));
-          }}
-        />
-        <div className="text-sm flex gap-1 items-stretch">
-          <div className="flex-1">
-            <Input
-              onChange={(e) =>
-                setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
-              }
-              value={filter.searchTerm}
-              type="text"
-              placeholder={t('Search')}
-              data-testid="search-term"
-              className="w-full"
-              appendElement={
-                filter.searchTerm.length ? (
-                  <button
-                    onClick={() =>
-                      setFilter((curr) => ({ ...curr, searchTerm: '' }))
-                    }
-                    className="text-vega-light-200 dark:text-vega-dark-200"
-                  >
-                    <VegaIcon name={VegaIconNames.CROSS} />
-                  </button>
-                ) : (
-                  <span />
-                )
-              }
-            />
-          </div>
-          <AssetDropdown
-            assets={uniqBy(
-              data?.map(
-                (d) => d.tradableInstrument.instrument.product.settlementAsset
-              ),
-              'id'
-            )}
-            checkedAssets={filter.assets}
-            onSelect={(id: string, checked) => {
-              setFilter((curr) => {
-                if (checked) {
-                  if (curr.assets.includes(id)) {
-                    return curr;
-                  } else {
-                    return { ...curr, assets: [...curr.assets, id] };
-                  }
-                } else {
-                  if (curr.assets.includes(id)) {
-                    return {
-                      ...curr,
-                      assets: curr.assets.filter((x) => x !== id),
-                    };
-                  }
-                }
-                return curr;
-              });
-            }}
-            onReset={() => setFilter((curr) => ({ ...curr, assets: [] }))}
-          />
-          <SortDropdown
-            currentSort={filter.sort}
-            onSelect={(sort) => {
-              setFilter((curr) => {
-                if (curr.sort === sort) {
-                  return { ...curr, sort: Sort.None };
-                }
-                return {
-                  ...curr,
-                  sort,
-                };
-              });
-            }}
-            onReset={() => setFilter((curr) => ({ ...curr, sort: Sort.None }))}
-          />
-        </div>
-      </div>
-      <div data-testid="market-selector-list">
-        <MarketList
-          data={markets}
-          loading={loading}
-          error={error}
-          searchTerm={filter.searchTerm}
-          currentMarketId={currentMarketId}
-          onSelect={onSelect}
-          noItems={
-            filter.product === Product.Perpetual
-              ? t('Perpetual markets coming soon.')
-              : filter.product === Product.Spot
-              ? t('Spot markets coming soon.')
-              : t('No markets')
-          }
-        />
-      </div>
-      <div className="px-4 py-2">
-        <span className="inline-block border-b border-black dark:border-white">
-          <Link to={'/markets/all'} className="flex items-center gap-x-2">
-            {t('All markets')}
-            <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
-          </Link>
-        </span>
-      </div>
-    </div>
-  );
-};
-
-const MarketList = ({
-  data,
-  error,
-  loading,
-  currentMarketId,
-  onSelect,
-  noItems,
-}: {
-  data: MarketMaybeWithDataAndCandles[];
-  error: Error | undefined;
-  loading: boolean;
-  searchTerm: string;
-  currentMarketId?: string;
-  onSelect?: (marketId: string) => void;
-  noItems: string;
-}) => {
-  if (error) {
-    return <div>{error.message}</div>;
-  }
-
-  return (
-    <AutoSizer>
-      {({ width, height }) => (
-        <TinyScroll>
-          <List
-            data={data}
-            loading={loading}
-            width={width}
-            height={height}
-            currentMarketId={currentMarketId}
-            onSelect={onSelect}
-            noItems={noItems}
-          />
-        </TinyScroll>
-      )}
-    </AutoSizer>
-  );
-};
-
-const List = ({
-  data,
-  loading,
-  width,
-  height,
-  onSelect,
-  noItems,
-  currentMarketId,
-}: {
-  data: MarketMaybeWithDataAndCandles[];
-  loading: boolean;
-  width: number;
-  height: number;
-  noItems: string;
-  onSelect?: (marketId: string) => void;
-  currentMarketId?: string;
-}) => {
-  const row = ({ index, style }: { index: number; style: CSSProperties }) => {
-    const market = data[index];
-
-    return (
-      <MarketSelectorItem
-        market={market}
-        currentMarketId={currentMarketId}
-        style={style}
-        onSelect={onSelect}
-      />
-    );
-  };
-
-  if (!data || loading) {
-    return (
-      <div style={{ width, height }}>
-        <Skeleton />
-        <Skeleton />
-      </div>
-    );
-  }
-
-  if (!data.length) {
-    return (
-      <div style={{ width, height }} data-testid="no-items">
-        <div className="mb-2 px-4">
-          <div className="text-sm bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg px-4 py-2">
-            {noItems}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <FixedSizeList
-      className="virtualized-list"
-      itemCount={data.length}
-      itemSize={130}
-      width={width}
-      height={height}
-    >
-      {row}
-    </FixedSizeList>
-  );
-};
-
-const Skeleton = () => {
-  return (
-    <div className="mb-2 px-2">
-      <div className="bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg p-4">
-        <div className="w-full h-3 bg-vega-light-200 dark:bg-vega-dark-200 mb-2" />
-        <div className="w-2/3 h-3 bg-vega-light-200 dark:bg-vega-dark-200" />
-      </div>
-    </div>
-  );
-};

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

@@ -9,8 +9,7 @@ import {
 import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
 import { marketProvider, marketDataProvider } from '@vegaprotocol/market-list';
 import { useGlobalStore, usePageTitleStore } from '../../stores';
-import { TradeGrid } from './trade-grid';
-import { TradePanels } from './trade-panels';
+import { TradeGrid, TradePanels } from './trade-grid';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
@@ -101,7 +100,6 @@ export const MarketPage = () => {
       />
     );
   }, [largeScreen, data, onSelect, navigate]);
-
   if (!data && marketId) {
     return (
       <Splash>

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

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-
-// Make sure these match the available __typename properties on product
-export const Product = {
-  Spot: 'Spot',
-  Future: 'Future',
-  Perpetual: 'Perpetual',
-} as const;
-
-export type ProductType = keyof typeof Product;
-
-const ProductTypeMapping: {
-  [key in ProductType]: string;
-} = {
-  [Product.Spot]: 'Spot',
-  [Product.Future]: 'Futures',
-  [Product.Perpetual]: 'Perpetuals',
-};
-
-export const ProductSelector = ({
-  product,
-  onSelect,
-}: {
-  product: ProductType;
-  onSelect: (product: ProductType) => void;
-}) => {
-  return (
-    <div className="flex gap-3 mb-3">
-      {Object.keys(Product).map((t) => {
-        const classes = classNames('py-1 border-b-2', {
-          'border-vega-yellow text-black dark:text-white': t === product,
-          'border-transparent text-vega-light-300 dark:text-vega-dark-300':
-            t !== product,
-        });
-        return (
-          <button
-            key={t}
-            onClick={() => {
-              onSelect(t as ProductType);
-            }}
-            className={classes}
-            data-testid={`product-${t}`}
-          >
-            {ProductTypeMapping[t as ProductType]}
-          </button>
-        );
-      })}
-    </div>
-  );
-};

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

@@ -1,76 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-
-export const Sort = {
-  None: 'None',
-  Gained: 'Gained',
-  Lost: 'Lost',
-  New: 'New',
-} as const;
-
-export type SortType = keyof typeof Sort;
-
-export const SortTypeMapping: {
-  [key in SortType]: string;
-} = {
-  [Sort.None]: 'None',
-  [Sort.Gained]: 'Top gaining',
-  [Sort.Lost]: 'Top losing',
-  [Sort.New]: 'New markets',
-};
-
-export const SortDropdown = ({
-  currentSort,
-  onSelect,
-  onReset,
-}: {
-  currentSort: SortType;
-  onSelect: (sort: SortType) => void;
-  onReset: () => void;
-}) => {
-  return (
-    <DropdownMenu
-      trigger={
-        <DropdownMenuTrigger data-testid="sort-trigger">
-          <VegaIcon name={VegaIconNames.TREND_UP} />
-        </DropdownMenuTrigger>
-      }
-    >
-      <DropdownMenuContent>
-        <DropdownMenuRadioGroup
-          value={currentSort}
-          onValueChange={(value) => onSelect(value as SortType)}
-        >
-          <DropdownMenuItem onClick={onReset}>{t('Reset')}</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          {Object.keys(Sort)
-            .filter((s) => s !== Sort.None)
-            .map((key) => {
-              return (
-                <DropdownMenuRadioItem
-                  inset
-                  key={key}
-                  value={key}
-                  data-testid={`sort-item-${key}`}
-                >
-                  {SortTypeMapping[key as SortType]}
-                  <DropdownMenuItemIndicator />
-                </DropdownMenuRadioItem>
-              );
-            })}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

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

@@ -1,37 +1,120 @@
-import { memo, useState } from 'react';
-import type { ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
+import { MarketInfoAccordionContainer } from '@vegaprotocol/market-info';
+import { OrderbookContainer } from '@vegaprotocol/market-depth';
+import { OrderListContainer, Filter } from '@vegaprotocol/orders';
+import type { OrderListContainerProps } from '@vegaprotocol/orders';
+import { FillsContainer } from '@vegaprotocol/fills';
+import { PositionsContainer } from '@vegaprotocol/positions';
+import { TradesContainer } from '@vegaprotocol/trades';
 import { LayoutPriority } from 'allotment';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import type { PinnedAsset } from '@vegaprotocol/accounts';
+import { memo, useState } from 'react';
+import type { ReactNode, ComponentProps } from 'react';
+import { DepthChartContainer } from '@vegaprotocol/market-depth';
+import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
+import { OracleBanner } from '../../components/banner';
+import {
+  Tab,
+  LocalStoragePersistTabs as Tabs,
+  Splash,
+} from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { OracleBanner } from '@vegaprotocol/market-info';
+import { AccountsContainer } from '../../components/accounts-container';
 import type { Market } from '@vegaprotocol/market-list';
-import { Filter } from '@vegaprotocol/orders';
+import { VegaWalletContainer } from '../../components/vega-wallet-container';
+import { TradeMarketHeader } from './trade-market-header';
+import { NO_MARKET } from './constants';
+import { LiquidityContainer } from '../liquidity/liquidity';
+import { useNavigate } from 'react-router-dom';
+import type { PinnedAsset } from '@vegaprotocol/accounts';
 import {
   usePaneLayout,
   useScreenDimensions,
 } from '@vegaprotocol/react-helpers';
-import {
-  Tab,
-  LocalStoragePersistTabs as Tabs,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
 import {
   useMarketClickHandler,
   useMarketLiquidityClickHandler,
 } from '../../lib/hooks/use-market-click-handler';
-import { VegaWalletContainer } from '../../components/vega-wallet-container';
-import { HeaderTitle } from '../../components/header';
 import {
   ResizableGrid,
   ResizableGridPanel,
 } from '../../components/resizable-grid';
-import { TradingViews } from './trade-views';
-import { MarketSelector } from './market-selector';
-import { HeaderStats } from './header-stats';
+
+type MarketDependantView =
+  | typeof CandlesChartContainer
+  | typeof DepthChartContainer
+  | typeof DealTicketContainer
+  | typeof MarketInfoAccordionContainer
+  | typeof OrderbookContainer
+  | typeof TradesContainer;
+
+type MarketDependantViewProps = ComponentProps<MarketDependantView>;
+
+const requiresMarket = (View: MarketDependantView) => {
+  const WrappedComponent = (props: MarketDependantViewProps) =>
+    props.marketId ? <View {...props} /> : <Splash>{NO_MARKET}</Splash>;
+  WrappedComponent.displayName = `RequiresMarket(${View.name})`;
+  return WrappedComponent;
+};
+
+const TradingViews = {
+  candles: {
+    label: 'Candles',
+    component: requiresMarket(CandlesChartContainer),
+  },
+  depth: {
+    label: 'Depth',
+    component: requiresMarket(DepthChartContainer),
+  },
+  liquidity: {
+    label: 'Liquidity',
+    component: requiresMarket(LiquidityContainer),
+  },
+  ticket: {
+    label: 'Ticket',
+    component: requiresMarket(DealTicketContainer),
+  },
+  info: {
+    label: 'Info',
+    component: requiresMarket(MarketInfoAccordionContainer),
+  },
+  orderbook: {
+    label: 'Orderbook',
+    component: requiresMarket(OrderbookContainer),
+  },
+  trades: {
+    label: 'Trades',
+    component: requiresMarket(TradesContainer),
+  },
+  positions: { label: 'Positions', component: PositionsContainer },
+  activeOrders: {
+    label: 'Active',
+    component: (props: OrderListContainerProps) => (
+      <OrderListContainer {...props} filter={Filter.Open} />
+    ),
+  },
+  closedOrders: {
+    label: 'Closed',
+    component: (props: OrderListContainerProps) => (
+      <OrderListContainer {...props} filter={Filter.Closed} />
+    ),
+  },
+  rejectedOrders: {
+    label: 'Rejected',
+    component: (props: OrderListContainerProps) => (
+      <OrderListContainer {...props} filter={Filter.Rejected} />
+    ),
+  },
+  orders: {
+    label: 'All',
+    component: OrderListContainer,
+  },
+  collateral: { label: 'Collateral', component: AccountsContainer },
+  fills: { label: 'Fills', component: FillsContainer },
+};
+
+type TradingView = keyof typeof TradingViews;
 
 interface TradeGridProps {
   market: Market | null;
@@ -327,57 +410,18 @@ const MainGrid = memo(
 );
 MainGrid.displayName = 'MainGrid';
 
-export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-  const wrapperClasses = classNames(
-    'h-full grid',
-    'grid-rows-[min-content_min-content_1fr]',
-    'grid-cols-[320px_1fr]'
-  );
-  const paneWrapperClasses = classNames('min-h-0', {
-    'col-span-2 col-start-1': !sidebarOpen,
-  });
-
+export const TradeGrid = ({
+  market,
+  onSelect,
+  pinnedAsset,
+}: TradeGridProps) => {
   return (
-    <div className={wrapperClasses}>
-      <div className="border-b border-r border-default">
-        <div className="flex gap-2 justify-between items-center px-4 py-2">
-          <HeaderTitle
-            primaryContent={market?.tradableInstrument.instrument.code}
-            secondaryContent={market?.tradableInstrument.instrument.name}
-          />
-          <button
-            onClick={() => setSidebarOpen((x) => !x)}
-            className="p-2"
-            data-testid="sidebar-toggle"
-          >
-            <span
-              className={classNames('block', {
-                'rotate-90 translate-x-1': !sidebarOpen,
-                '-rotate-90 -translate-x-1': sidebarOpen,
-              })}
-            >
-              <VegaIcon name={VegaIconNames.CHEVRON_UP} />
-            </span>
-          </button>
-        </div>
-      </div>
-      <div className="border-b border-default min-w-0">
-        <HeaderStats market={market} />
-      </div>
-      <div className="col-span-2 bg-vega-green">
+    <div className="h-full grid grid-rows-[min-content_1fr]">
+      <div>
+        <TradeMarketHeader market={market} onSelect={onSelect} />
         <OracleBanner marketId={market?.id || ''} />
       </div>
-      {sidebarOpen && (
-        <div className="border-r border-default min-h-0">
-          <div className="h-full pb-8">
-            <MarketSelector currentMarketId={market?.id} />
-          </div>
-        </div>
-      )}
-      <div className={paneWrapperClasses}>
-        <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
-      </div>
+      <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
     </div>
   );
 };
@@ -395,3 +439,88 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
     </section>
   );
 };
+
+interface TradePanelsProps {
+  market: Market | null;
+  onSelect: (marketId: string, metaKey?: boolean) => void;
+  onMarketClick?: (marketId: string) => void;
+  onOrderTypeClick?: (marketId: string) => void;
+  onClickCollateral: () => void;
+  pinnedAsset?: PinnedAsset;
+}
+
+export const TradePanels = ({
+  market,
+  onSelect,
+  onClickCollateral,
+  pinnedAsset,
+}: TradePanelsProps) => {
+  const onMarketClick = useMarketClickHandler(true);
+  const onOrderTypeClick = useMarketLiquidityClickHandler(true);
+
+  const [view, setView] = useState<TradingView>('candles');
+  const renderView = () => {
+    const Component = memo<{
+      marketId: string;
+      onSelect: (marketId: string, metaKey?: boolean) => void;
+      onMarketClick?: (marketId: string) => void;
+      onOrderTypeClick?: (marketId: string) => void;
+      onClickCollateral: () => void;
+      pinnedAsset?: PinnedAsset;
+    }>(TradingViews[view].component);
+
+    if (!Component) {
+      throw new Error(`No component for view: ${view}`);
+    }
+
+    if (!market) return <Splash>{NO_MARKET}</Splash>;
+
+    return (
+      <Component
+        marketId={market?.id}
+        onSelect={onSelect}
+        onClickCollateral={onClickCollateral}
+        pinnedAsset={pinnedAsset}
+        onMarketClick={onMarketClick}
+        onOrderTypeClick={onOrderTypeClick}
+      />
+    );
+  };
+
+  return (
+    <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
+      <div>
+        <TradeMarketHeader market={market} onSelect={onSelect} />
+        <OracleBanner marketId={market?.id || ''} />
+      </div>
+      <div className="h-full">
+        <AutoSizer>
+          {({ width, height }) => (
+            <div style={{ width, height }} className="overflow-auto">
+              {renderView()}
+            </div>
+          )}
+        </AutoSizer>
+      </div>
+      <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
+        {Object.keys(TradingViews).map((key) => {
+          const isActive = view === key;
+          const className = classNames('p-4 min-w-[100px] capitalize', {
+            'text-black dark:text-vega-yellow': isActive,
+            'bg-neutral-200 dark:bg-neutral-800': isActive,
+          });
+          return (
+            <button
+              data-testid={key}
+              onClick={() => setView(key as TradingView)}
+              className={className}
+              key={key}
+            >
+              {TradingViews[key as keyof typeof TradingViews].label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

@@ -5,7 +5,13 @@ import { MarketProposalNotification } from '@vegaprotocol/proposals';
 import type { Market } from '@vegaprotocol/market-list';
 import { getExpiryDate, getMarketExpiryDate } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { HeaderStat } from '../../components/header';
+import {
+  ColumnKind,
+  SelectMarketPopover,
+} from '../../components/select-market';
+import type { OnCellClickHandler } from '../../components/select-market';
+import { Header, HeaderStat } from '../../components/header';
+import { NO_MARKET } from './constants';
 import { MarketMarkPrice } from '../../components/market-mark-price';
 import { Last24hPriceChange, Last24hVolume } from '@vegaprotocol/market-info';
 import { MarketState } from '../../components/market-state';
@@ -13,90 +19,102 @@ import { HeaderStatMarketTradingMode } from '../../components/market-trading-mod
 import { MarketLiquiditySupplied } from '../../components/liquidity-supplied';
 import { MarketState as State } from '@vegaprotocol/types';
 
-interface HeaderStatsProps {
+interface TradeMarketHeaderProps {
   market: Market | null;
+  onSelect: (marketId: string, metaKey?: boolean) => void;
 }
 
-export const HeaderStats = ({ market }: HeaderStatsProps) => {
+export const TradeMarketHeader = ({
+  market,
+  onSelect,
+}: TradeMarketHeaderProps) => {
   const { VEGA_EXPLORER_URL } = useEnvironment();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
 
   const asset = market?.tradableInstrument.instrument.product?.settlementAsset;
 
+  const onCellClick: OnCellClickHandler = (e, kind, value) => {
+    if (value && kind === ColumnKind.Asset) {
+      openAssetDetailsDialog(value, e.target as HTMLElement);
+    }
+  };
+
   return (
-    <div className="flex flex-col justify-end lg:pt-4">
-      <div className="xl:flex xl:gap-4 items-end">
-        <div
-          data-testid="header-summary"
-          className="flex flex-nowrap items-end xl:flex-1 w-full overflow-x-auto text-xs"
+    <Header
+      title={
+        <SelectMarketPopover
+          marketCode={market?.tradableInstrument.instrument.code || NO_MARKET}
+          marketName={market?.tradableInstrument.instrument.name || NO_MARKET}
+          onSelect={onSelect}
+          onCellClick={onCellClick}
+        />
+      }
+    >
+      <HeaderStat
+        heading={t('Expiry')}
+        description={
+          market && (
+            <ExpiryTooltipContent
+              market={market}
+              explorerUrl={VEGA_EXPLORER_URL}
+            />
+          )
+        }
+        testId="market-expiry"
+      >
+        <ExpiryLabel market={market} />
+      </HeaderStat>
+      <HeaderStat heading={t('Price')} testId="market-price">
+        <MarketMarkPrice
+          marketId={market?.id}
+          decimalPlaces={market?.decimalPlaces}
+        />
+      </HeaderStat>
+      <HeaderStat heading={t('Change (24h)')} testId="market-change">
+        <Last24hPriceChange
+          marketId={market?.id}
+          decimalPlaces={market?.decimalPlaces}
+        />
+      </HeaderStat>
+      <HeaderStat
+        heading={t('Volume (24h)')}
+        testId="market-volume"
+        description={t(
+          'The total number of contracts traded in the last 24 hours.'
+        )}
+      >
+        <Last24hVolume
+          marketId={market?.id}
+          positionDecimalPlaces={market?.positionDecimalPlaces}
+        />
+      </HeaderStat>
+      <HeaderStatMarketTradingMode
+        marketId={market?.id}
+        initialTradingMode={market?.tradingMode}
+      />
+      <MarketState market={market} />
+      {asset ? (
+        <HeaderStat
+          heading={t('Settlement asset')}
+          testId="market-settlement-asset"
         >
-          <HeaderStat
-            heading={t('Expiry')}
-            description={
-              market && (
-                <ExpiryTooltipContent
-                  market={market}
-                  explorerUrl={VEGA_EXPLORER_URL}
-                />
-              )
-            }
-            testId="market-expiry"
-          >
-            <ExpiryLabel market={market} />
-          </HeaderStat>
-          <HeaderStat heading={t('Price')} testId="market-price">
-            <MarketMarkPrice
-              marketId={market?.id}
-              decimalPlaces={market?.decimalPlaces}
-            />
-          </HeaderStat>
-          <HeaderStat heading={t('Change (24h)')} testId="market-change">
-            <Last24hPriceChange
-              marketId={market?.id}
-              decimalPlaces={market?.decimalPlaces}
-            />
-          </HeaderStat>
-          <HeaderStat
-            heading={t('Volume (24h)')}
-            testId="market-volume"
-            description={t(
-              'The total number of contracts traded in the last 24 hours.'
-            )}
-          >
-            <Last24hVolume
-              marketId={market?.id}
-              positionDecimalPlaces={market?.positionDecimalPlaces}
-            />
-          </HeaderStat>
-          <HeaderStatMarketTradingMode
-            marketId={market?.id}
-            initialTradingMode={market?.tradingMode}
-          />
-          <MarketState market={market} />
-          {asset ? (
-            <HeaderStat
-              heading={t('Settlement asset')}
-              testId="market-settlement-asset"
+          <div>
+            <ButtonLink
+              onClick={(e) => {
+                openAssetDetailsDialog(asset.id, e.target as HTMLElement);
+              }}
             >
-              <div>
-                <ButtonLink
-                  onClick={(e) => {
-                    openAssetDetailsDialog(asset.id, e.target as HTMLElement);
-                  }}
-                >
-                  {asset.symbol}
-                </ButtonLink>
-              </div>
-            </HeaderStat>
-          ) : null}
-          <MarketLiquiditySupplied
-            marketId={market?.id}
-            assetDecimals={asset?.decimals || 0}
-          />
-          <MarketProposalNotification marketId={market?.id} />
-        </div>
-      </div>
-    </div>
+              {asset.symbol}
+            </ButtonLink>
+          </div>
+        </HeaderStat>
+      ) : null}
+      <MarketLiquiditySupplied
+        marketId={market?.id}
+        assetDecimals={asset?.decimals || 0}
+      />
+      <MarketProposalNotification marketId={market?.id} />
+    </Header>
   );
 };
 

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

@@ -1,146 +0,0 @@
-import type { PinnedAsset } from '@vegaprotocol/accounts';
-import type { Market } from '@vegaprotocol/market-list';
-import { OracleBanner } from '@vegaprotocol/market-info';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
-import type { TradingView } from './trade-views';
-import { TradingViews } from './trade-views';
-import { memo, useState } from 'react';
-import {
-  Icon,
-  Splash,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import { NO_MARKET } from './constants';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import classNames from 'classnames';
-import { HeaderStats } from './header-stats';
-import * as DialogPrimitives from '@radix-ui/react-dialog';
-import { HeaderTitle } from '../../components/header';
-import { MarketSelector } from './market-selector';
-
-interface TradePanelsProps {
-  market: Market | null;
-  onSelect: (marketId: string, metaKey?: boolean) => void;
-  onMarketClick?: (marketId: string) => void;
-  onOrderTypeClick?: (marketId: string) => void;
-  onClickCollateral: () => void;
-  pinnedAsset?: PinnedAsset;
-}
-
-export const TradePanels = ({
-  market,
-  onSelect,
-  onClickCollateral,
-  pinnedAsset,
-}: TradePanelsProps) => {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const onMarketClick = useMarketClickHandler(true);
-  const onOrderTypeClick = useMarketLiquidityClickHandler(true);
-
-  const [view, setView] = useState<TradingView>('candles');
-  const renderView = () => {
-    const Component = memo<{
-      marketId: string;
-      onSelect: (marketId: string, metaKey?: boolean) => void;
-      onMarketClick?: (marketId: string) => void;
-      onOrderTypeClick?: (marketId: string) => void;
-      onClickCollateral: () => void;
-      pinnedAsset?: PinnedAsset;
-    }>(TradingViews[view].component);
-
-    if (!Component) {
-      throw new Error(`No component for view: ${view}`);
-    }
-
-    if (!market) return <Splash>{NO_MARKET}</Splash>;
-
-    return (
-      <Component
-        marketId={market?.id}
-        onSelect={onSelect}
-        onClickCollateral={onClickCollateral}
-        pinnedAsset={pinnedAsset}
-        onMarketClick={onMarketClick}
-        onOrderTypeClick={onOrderTypeClick}
-      />
-    );
-  };
-
-  return (
-    <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
-      <div className="border-b border-default min-w-0">
-        <div className="flex gap-4 items-center px-4 py-2">
-          <HeaderTitle
-            primaryContent={market?.tradableInstrument.instrument.code}
-            secondaryContent={market?.tradableInstrument.instrument.name}
-          />
-          <button onClick={() => setDrawerOpen((x) => !x)} className="p-2">
-            <span
-              className={classNames('block', {
-                'rotate-90 translate-x-1': !drawerOpen,
-                '-rotate-90 -translate-x-1': drawerOpen,
-              })}
-            >
-              <VegaIcon name={VegaIconNames.CHEVRON_UP} />
-            </span>
-          </button>
-        </div>
-        <HeaderStats market={market} />
-      </div>
-      <div>
-        <OracleBanner marketId={market?.id || ''} />
-      </div>
-      <div className="h-full">
-        <AutoSizer>
-          {({ width, height }) => (
-            <div style={{ width, height }} className="overflow-auto">
-              {renderView()}
-            </div>
-          )}
-        </AutoSizer>
-      </div>
-      <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
-        {Object.keys(TradingViews).map((key) => {
-          const isActive = view === key;
-          const className = classNames('p-4 min-w-[100px] capitalize', {
-            'text-black dark:text-vega-yellow': isActive,
-            'bg-neutral-200 dark:bg-neutral-800': isActive,
-          });
-          return (
-            <button
-              data-testid={key}
-              onClick={() => setView(key as TradingView)}
-              className={className}
-              key={key}
-            >
-              {TradingViews[key as keyof typeof TradingViews].label}
-            </button>
-          );
-        })}
-      </div>
-      <DialogPrimitives.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
-        <DialogPrimitives.Portal>
-          <DialogPrimitives.Overlay />
-          <DialogPrimitives.Content
-            className={classNames(
-              'fixed h-full max-w-[500px] w-[90vw] z-10 top-0 left-0 transition-transform',
-              'bg-white dark:bg-black',
-              'border-r border-default'
-            )}
-          >
-            <DialogPrimitives.Close className="absolute top-0 right-0 p-2">
-              <Icon name="cross" />
-            </DialogPrimitives.Close>
-            {drawerOpen && (
-              <MarketSelector onSelect={() => setDrawerOpen(false)} />
-            )}
-          </DialogPrimitives.Content>
-        </DialogPrimitives.Portal>
-      </DialogPrimitives.Root>
-    </div>
-  );
-};

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

@@ -1,90 +0,0 @@
-import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
-import { MarketInfoAccordionContainer } from '@vegaprotocol/market-info';
-import { OrderbookContainer } from '@vegaprotocol/market-depth';
-import { OrderListContainer, Filter } from '@vegaprotocol/orders';
-import type { OrderListContainerProps } from '@vegaprotocol/orders';
-import { FillsContainer } from '@vegaprotocol/fills';
-import { PositionsContainer } from '@vegaprotocol/positions';
-import { TradesContainer } from '@vegaprotocol/trades';
-import type { ComponentProps } from 'react';
-import { DepthChartContainer } from '@vegaprotocol/market-depth';
-import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { AccountsContainer } from '../../components/accounts-container';
-import { NO_MARKET } from './constants';
-import { LiquidityContainer } from '../liquidity/liquidity';
-
-type MarketDependantView =
-  | typeof CandlesChartContainer
-  | typeof DepthChartContainer
-  | typeof DealTicketContainer
-  | typeof MarketInfoAccordionContainer
-  | typeof OrderbookContainer
-  | typeof TradesContainer;
-
-type MarketDependantViewProps = ComponentProps<MarketDependantView>;
-
-const requiresMarket = (View: MarketDependantView) => {
-  const WrappedComponent = (props: MarketDependantViewProps) =>
-    props.marketId ? <View {...props} /> : <Splash>{NO_MARKET}</Splash>;
-  WrappedComponent.displayName = `RequiresMarket(${View.name})`;
-  return WrappedComponent;
-};
-
-export type TradingView = keyof typeof TradingViews;
-
-export const TradingViews = {
-  candles: {
-    label: 'Candles',
-    component: requiresMarket(CandlesChartContainer),
-  },
-  depth: {
-    label: 'Depth',
-    component: requiresMarket(DepthChartContainer),
-  },
-  liquidity: {
-    label: 'Liquidity',
-    component: requiresMarket(LiquidityContainer),
-  },
-  ticket: {
-    label: 'Ticket',
-    component: requiresMarket(DealTicketContainer),
-  },
-  info: {
-    label: 'Info',
-    component: requiresMarket(MarketInfoAccordionContainer),
-  },
-  orderbook: {
-    label: 'Orderbook',
-    component: requiresMarket(OrderbookContainer),
-  },
-  trades: {
-    label: 'Trades',
-    component: requiresMarket(TradesContainer),
-  },
-  positions: { label: 'Positions', component: PositionsContainer },
-  activeOrders: {
-    label: 'Active',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Open} />
-    ),
-  },
-  closedOrders: {
-    label: 'Closed',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Closed} />
-    ),
-  },
-  rejectedOrders: {
-    label: 'Rejected',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Rejected} />
-    ),
-  },
-  orders: {
-    label: 'All',
-    component: OrderListContainer,
-  },
-  collateral: { label: 'Collateral', component: AccountsContainer },
-  fills: { label: 'Fills', component: FillsContainer },
-};

apps/trading/client-pages/market/use-market-selector-list.spec.tsx

@@ -1,473 +0,0 @@
-import merge from 'lodash/merge';
-import { renderHook } from '@testing-library/react';
-import { useMarketSelectorList } from './use-market-selector-list';
-import { Product } from './product-selector';
-import { Sort } from './sort-dropdown';
-import { createMarketFragment } from '@vegaprotocol/mock';
-import { MarketState } from '@vegaprotocol/types';
-import { useMarketList } from '@vegaprotocol/market-list';
-import type { Filter } from './market-selector';
-import { subDays } from 'date-fns';
-
-jest.mock('@vegaprotocol/market-list');
-const mockUseMarketList = useMarketList as jest.Mock;
-
-describe('useMarketSelectorList', () => {
-  const setup = (initialArgs?: Partial<Filter>) => {
-    const defaultArgs: Filter = {
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    };
-    return renderHook((args) => useMarketSelectorList(args), {
-      initialProps: merge(defaultArgs, initialArgs),
-    });
-  };
-
-  it('returns all markets active and suspended markets', () => {
-    const markets = [
-      createMarketFragment({ id: 'market-0' }),
-      createMarketFragment({
-        id: 'market-1',
-        state: MarketState.STATE_SUSPENDED,
-      }),
-      createMarketFragment({
-        id: 'market-2',
-        state: MarketState.STATE_CLOSED,
-      }),
-      createMarketFragment({
-        id: 'market-3',
-        state: MarketState.STATE_PENDING,
-      }),
-    ];
-    mockUseMarketList.mockReturnValue({
-      data: markets,
-      loading: false,
-      error: undefined,
-    });
-    const { result } = setup();
-    const expectedFilteredMarkets = markets.filter((m) =>
-      [MarketState.STATE_ACTIVE, MarketState.STATE_SUSPENDED].includes(m.state)
-    );
-    expect(result.current).toEqual({
-      data: markets,
-      markets: expectedFilteredMarkets,
-      loading: false,
-      error: undefined,
-    });
-  });
-
-  it('filters by product', () => {
-    const markets = [
-      createMarketFragment({
-        id: 'market-0',
-        tradableInstrument: {
-          instrument: {
-            product: {
-              __typename: 'Future',
-            },
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-1',
-        tradableInstrument: {
-          instrument: {
-            product: {
-              __typename: 'Spot' as 'Future', // spot isn't in schema yet
-            },
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-2',
-        tradableInstrument: {
-          instrument: {
-            product: {
-              __typename: 'Perpetual' as 'Future', // spot isn't in schema yet
-            },
-          },
-        },
-      }),
-    ];
-
-    mockUseMarketList.mockReturnValue({
-      data: markets,
-      loading: false,
-      error: undefined,
-    });
-    const { result, rerender } = setup();
-    expect(result.current.markets).toEqual([markets[0]]);
-    rerender({
-      searchTerm: '',
-      product: Product.Spot as 'Future',
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([markets[1]]);
-    rerender({
-      searchTerm: '',
-      product: Product.Perpetual as 'Future',
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([markets[2]]);
-  });
-
-  it('filters by asset', () => {
-    const markets = [
-      createMarketFragment({
-        id: 'market-0',
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                id: 'asset-0',
-              },
-            },
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-1',
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                id: 'asset-0',
-              },
-            },
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-2',
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                id: 'asset-1',
-              },
-            },
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-3',
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                id: 'asset-2',
-              },
-            },
-          },
-        },
-      }),
-    ];
-
-    mockUseMarketList.mockReturnValue({
-      data: markets,
-      loading: false,
-      error: undefined,
-    });
-    const { result, rerender } = setup({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: ['asset-0'],
-    });
-    expect(result.current.markets).toEqual([markets[0], markets[1]]);
-
-    rerender({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: ['asset-0', 'asset-1'],
-    });
-
-    expect(result.current.markets).toEqual([
-      markets[0],
-      markets[1],
-      markets[2],
-    ]);
-
-    rerender({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: ['asset-0', 'asset-1', 'asset-2'],
-    });
-
-    // all assets selected
-    expect(result.current.markets).toEqual(markets);
-
-    rerender({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: ['asset-invalid'],
-    });
-
-    expect(result.current.markets).toEqual([]);
-  });
-
-  it('filters by search term', () => {
-    const markets = [
-      createMarketFragment({
-        id: 'market-0',
-        tradableInstrument: {
-          instrument: {
-            code: 'abc',
-            name: 'aaa',
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-1',
-        tradableInstrument: {
-          instrument: {
-            code: 'def',
-            name: 'ggg',
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-2',
-        tradableInstrument: {
-          instrument: {
-            code: 'defg',
-            name: 'gggh',
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-3',
-        tradableInstrument: {
-          instrument: {
-            code: 'ggg',
-            name: 'foo',
-          },
-        },
-      }),
-    ];
-
-    mockUseMarketList.mockReturnValue({
-      data: markets,
-      loading: false,
-      error: undefined,
-    });
-    const { result, rerender } = setup({
-      searchTerm: 'abc',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([markets[0]]);
-    rerender({
-      searchTerm: 'def',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([markets[1], markets[2]]);
-    rerender({
-      searchTerm: 'defg',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([markets[2]]);
-    rerender({
-      searchTerm: 'zzz',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([]);
-
-    // by name
-    rerender({
-      searchTerm: 'aaa',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([markets[0]]);
-    rerender({
-      searchTerm: 'ggg',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([
-      markets[1],
-      markets[2],
-      markets[3],
-    ]);
-  });
-
-  it('sorts albphabetically', () => {
-    const markets = [
-      createMarketFragment({
-        id: 'market-0',
-        tradableInstrument: {
-          instrument: {
-            code: 'd',
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-1',
-        tradableInstrument: {
-          instrument: {
-            code: 'b',
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-2',
-        tradableInstrument: {
-          instrument: {
-            code: 'a',
-          },
-        },
-      }),
-      createMarketFragment({
-        id: 'market-3',
-        tradableInstrument: {
-          instrument: {
-            code: 'c',
-          },
-        },
-      }),
-    ];
-
-    mockUseMarketList.mockReturnValue({
-      data: markets,
-      loading: false,
-      error: undefined,
-    });
-
-    const { result } = setup({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.None,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([
-      markets[2],
-      markets[1],
-      markets[3],
-      markets[0],
-    ]);
-  });
-
-  it('sorts by gained', () => {
-    const markets = [
-      createMarketFragment({
-        id: 'market-0',
-        // @ts-ignore actual fragment doesnt contain candles and is joined later
-        candles: [
-          {
-            close: '100',
-          },
-          {
-            close: '200',
-          },
-        ],
-      }),
-      createMarketFragment({
-        id: 'market-1',
-        // @ts-ignore actual fragment doesnt contain candles and is joined later
-        candles: [
-          {
-            close: '100',
-          },
-          {
-            close: '1000',
-          },
-        ],
-      }),
-      createMarketFragment({
-        id: 'market-2',
-        // @ts-ignore actual fragment doesnt contain candles and is joined later
-        candles: [
-          {
-            close: '100',
-          },
-          {
-            close: '400',
-          },
-        ],
-      }),
-    ];
-    mockUseMarketList.mockReturnValue({
-      data: markets,
-      loading: false,
-      error: undefined,
-    });
-    const { result, rerender } = setup({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.Gained,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([
-      markets[1],
-      markets[2],
-      markets[0],
-    ]);
-    rerender({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.Lost as 'Gained',
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([
-      markets[0],
-      markets[2],
-      markets[1],
-    ]);
-  });
-
-  it('sorts by open timestamp', () => {
-    const markets = [
-      createMarketFragment({
-        id: 'market-0',
-        marketTimestamps: {
-          open: subDays(new Date(), 3).toISOString(),
-        },
-      }),
-      createMarketFragment({
-        id: 'market-1',
-        marketTimestamps: {
-          open: subDays(new Date(), 1).toISOString(),
-        },
-      }),
-      createMarketFragment({
-        id: 'market-2',
-        marketTimestamps: {
-          open: subDays(new Date(), 2).toISOString(),
-        },
-      }),
-    ];
-    mockUseMarketList.mockReturnValue({
-      data: markets,
-      loading: false,
-      error: undefined,
-    });
-    const { result } = setup({
-      searchTerm: '',
-      product: Product.Future,
-      sort: Sort.New,
-      assets: [],
-    });
-    expect(result.current.markets).toEqual([
-      markets[1],
-      markets[2],
-      markets[0],
-    ]);
-  });
-});

apps/trading/client-pages/market/use-market-selector-list.ts

@@ -1,82 +0,0 @@
-import { useMemo } from 'react';
-import orderBy from 'lodash/orderBy';
-import { MarketState } from '@vegaprotocol/types';
-import { useMarketList } from '@vegaprotocol/market-list';
-import { priceChangePercentage } from '@vegaprotocol/utils';
-import type { Filter } from './market-selector';
-import { Sort } from './sort-dropdown';
-
-export const useMarketSelectorList = ({
-  product,
-  assets,
-  sort,
-  searchTerm,
-}: Filter) => {
-  const { data, loading, error } = useMarketList();
-
-  const markets = useMemo(() => {
-    if (!data?.length) return [];
-    const markets = data
-      // only active
-      .filter((m) => {
-        return [MarketState.STATE_ACTIVE, MarketState.STATE_SUSPENDED].includes(
-          m.state
-        );
-      })
-      // only selected product type
-      .filter((m) => {
-        if (m.tradableInstrument.instrument.product.__typename === product) {
-          return true;
-        }
-        return false;
-      })
-      .filter((m) => {
-        if (assets.length === 0) return true;
-        return assets.includes(
-          m.tradableInstrument.instrument.product.settlementAsset.id
-        );
-      })
-      // filter based on search term
-      .filter((m) => {
-        const code = m.tradableInstrument.instrument.code.toLowerCase();
-        const name = m.tradableInstrument.instrument.name.toLowerCase();
-        if (
-          code.includes(searchTerm.toLowerCase()) ||
-          name.includes(searchTerm.toLowerCase())
-        ) {
-          return true;
-        }
-        return false;
-      });
-
-    if (sort === Sort.None) {
-      return orderBy(markets, ['tradableInstrument.instrument.code'], ['asc']);
-    }
-
-    if (sort === Sort.Gained || sort === Sort.Lost) {
-      const dir = sort === Sort.Gained ? 'desc' : 'asc';
-      return orderBy(
-        markets,
-        [
-          (m) => {
-            if (!m.candles?.length) return 0;
-            return Number(priceChangePercentage(m.candles.map((c) => c.close)));
-          },
-        ],
-        [dir]
-      );
-    }
-
-    if (sort === Sort.New) {
-      return orderBy(
-        markets,
-        [(m) => new Date(m.marketTimestamps.open).getTime()],
-        ['desc']
-      );
-    }
-
-    return markets;
-  }, [data, product, searchTerm, assets, sort]);
-
-  return { markets, data, loading, error };
-};

apps/trading/client-pages/markets/closed.spec.tsx

@@ -6,8 +6,8 @@ import { MarketState } from '@vegaprotocol/types';
 import { subDays } from 'date-fns';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
-import type { OracleSpecDataConnectionQuery } from '@vegaprotocol/market-info';
-import { OracleSpecDataConnectionDocument } from '@vegaprotocol/market-info';
+import type { OracleSpecDataConnectionQuery } from '@vegaprotocol/oracles';
+import { OracleSpecDataConnectionDocument } from '@vegaprotocol/oracles';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import type {

apps/trading/client-pages/markets/settlement-price-cell.spec.tsx

@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react';
 import type { Property } from '@vegaprotocol/types';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
-import type { OracleSpecDataConnectionQuery } from '@vegaprotocol/market-info';
-import { OracleSpecDataConnectionDocument } from '@vegaprotocol/market-info';
+import type { OracleSpecDataConnectionQuery } from '@vegaprotocol/oracles';
+import { OracleSpecDataConnectionDocument } from '@vegaprotocol/oracles';
 import type { SettlementPriceCellProps } from './settlement-price-cell';
 import { SettlementPriceCell } from './settlement-price-cell';
 

apps/trading/client-pages/markets/settlement-price-cell.tsx

@@ -1,6 +1,6 @@
 import { DApp, EXPLORER_ORACLE, useLinks } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
-import { useOracleSpecBindingData } from '@vegaprotocol/market-info';
+import { useOracleSpecBindingData } from '@vegaprotocol/oracles';
 import { Link } from '@vegaprotocol/ui-toolkit';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 

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

@@ -1,7 +1,7 @@
 import { Icon, NavigationLink } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { Links, Routes } from '../../pages/client-router';
-import { IconNames } from '@blueprintjs/icons';
+import { COG } from '@blueprintjs/icons/src/generated/iconNames';
 
 export const SettingsButton = ({ withMobile }: { withMobile?: boolean }) => {
   return (
@@ -9,7 +9,7 @@ export const SettingsButton = ({ withMobile }: { withMobile?: boolean }) => {
       {withMobile ? (
         t('Settings')
       ) : (
-        <Icon name={IconNames.COG} className="!align-middle" />
+        <Icon name={COG} className="!align-middle" />
       )}
     </NavigationLink>
   );

apps/trading/components/banner/index.tsx

@@ -1 +1,2 @@
 export * from './announcement-banner';
+export * from './oracle-banner';

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

@@ -0,0 +1,45 @@
+import { t } from '@vegaprotocol/i18n';
+import { useMarketOracle } from '@vegaprotocol/market-info';
+import ReactMarkdown from 'react-markdown';
+import { Intent, NotificationBanner } from '@vegaprotocol/ui-toolkit';
+
+const oracleStatuses = {
+  UNKNOWN: t(
+    "This public key's proofs have not been verified yet, or no proofs have been provided yet."
+  ),
+  GOOD: t("This public key's proofs have been verified."),
+  SUSPICIOUS: t(
+    'This public key is suspected to be acting in bad faith, pending investigation.'
+  ),
+  MALICIOUS: t('This public key has been observed acting in bad faith.'),
+  RETIRED: t('This public key is no longer in use.'),
+  COMPROMISED: t(
+    'This public key is no longer in the control of its original owners.'
+  ),
+};
+
+export const OracleBanner = ({ marketId }: { marketId: string }) => {
+  const oracle = useMarketOracle(marketId);
+  if (!oracle || oracle.status === 'GOOD') {
+    return null;
+  }
+  return (
+    <NotificationBanner intent={Intent.Danger}>
+      <div>
+        Oracle status for this market is{' '}
+        <span data-testId="oracle-status">{oracle.status}</span>.{' '}
+        {oracleStatuses[oracle.status]}
+      </div>
+      {oracle.status_reason ? (
+        <ReactMarkdown
+          className="react-markdown-container"
+          skipHtml={true}
+          disallowedElements={['img']}
+          linkTarget="_blank"
+        >
+          {oracle.status_reason}
+        </ReactMarkdown>
+      ) : null}
+    </NotificationBanner>
+  );
+};

apps/trading/components/header/header.tsx

@@ -43,7 +43,7 @@ export const HeaderStat = ({
   testId?: string;
 }) => {
   const itemClass =
-    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-default first:border-none text-neutral-500 dark:text-neutral-400';
+    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-default text-neutral-500 dark:text-neutral-400';
   const itemHeading = 'text-black dark:text-white';
 
   return (
@@ -72,7 +72,7 @@ export const HeaderTitle = ({
   secondaryContent: ReactNode;
 }) => {
   return (
-    <div className="text-left" data-testid="header-title">
+    <div className="text-left">
       <div className="text-sm md:text-md lg:text-lg whitespace-nowrap leading-4">
         {primaryContent}
       </div>

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -19,10 +19,11 @@ import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
 import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
 import {
   addDecimalsFormatNumber,
+  createDocsLinks,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { DocsLinks } from '@vegaprotocol/environment';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 interface Props {
   marketId?: string;
@@ -46,6 +47,8 @@ export const MarketLiquiditySupplied = ({
     params.market_liquidity_targetstake_triggering_ratio
   );
 
+  const { VEGA_DOCS_URL } = useEnvironment();
+
   const variables = useMemo(
     () => ({
       marketId: marketId || '',
@@ -128,8 +131,11 @@ export const MarketLiquiditySupplied = ({
       <Link href={`/#/liquidity/${marketId}`} data-testid="view-liquidity-link">
         {t('View liquidity provision table')}
       </Link>
-      {DocsLinks && (
-        <ExternalLink href={DocsLinks.LIQUIDITY} className="mt-2">
+      {VEGA_DOCS_URL && (
+        <ExternalLink
+          href={createDocsLinks(VEGA_DOCS_URL).LIQUIDITY}
+          className="mt-2"
+        >
           {t('Learn about providing liquidity')}
         </ExternalLink>
       )}

apps/trading/components/navbar/navbar.spec.tsx

@@ -1,42 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { MockedProvider } from '@apollo/client/testing';
-import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
-import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { Navbar } from './navbar';
-
-describe('Navbar', () => {
-  const pubKey = 'pubKey';
-  it('should be properly rendered', () => {
-    render(
-      <MockedProvider>
-        <MemoryRouter>
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
-          >
-            <Navbar theme="dark" />
-          </VegaWalletContext.Provider>
-        </MemoryRouter>
-      </MockedProvider>
-    );
-    expect(screen.getByTestId('Markets')).toBeInTheDocument();
-    expect(screen.getByTestId('Trading')).toBeInTheDocument();
-    expect(screen.getByTestId('Portfolio')).toBeInTheDocument();
-  });
-
-  it('Markets page route should not match empty market page', () => {
-    render(
-      <MockedProvider>
-        <MemoryRouter initialEntries={['/markets/all']}>
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
-          >
-            <Navbar theme="dark" />
-          </VegaWalletContext.Provider>
-        </MemoryRouter>
-      </MockedProvider>
-    );
-    expect(screen.getByTestId('Markets')).toHaveClass('active');
-    expect(screen.getByTestId('Trading')).not.toHaveClass('active');
-  });
-});

apps/trading/components/navbar/navbar.tsx

@@ -5,7 +5,6 @@ import {
   TOKEN_GOVERNANCE,
   useEnvironment,
   useLinks,
-  DocsLinks,
 } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import { useGlobalStore } from '../../stores';
@@ -23,6 +22,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 
 import { Links, Routes } from '../../pages/client-router';
+import { createDocsLinks } from '@vegaprotocol/utils';
 import { SettingsButton } from '../../client-pages/settings';
 import {
   ProtocolUpgradeCountdown,
@@ -34,7 +34,7 @@ export const Navbar = ({
 }: {
   theme: ComponentProps<typeof Navigation>['theme'];
 }) => {
-  const { GITHUB_FEEDBACK_URL } = useEnvironment();
+  const { VEGA_DOCS_URL, GITHUB_FEEDBACK_URL } = useEnvironment();
   const tokenLink = useLinks(DApp.Token);
   const { marketId } = useGlobalStore((store) => ({
     marketId: store.marketId,
@@ -75,7 +75,7 @@ export const Navbar = ({
           </NavigationLink>
         </NavigationItem>
         <NavigationItem>
-          <NavigationLink data-testid="Trading" to={tradingPath} end>
+          <NavigationLink data-testid="Trading" to={tradingPath}>
             {t('Trading')}
           </NavigationLink>
         </NavigationItem>
@@ -92,13 +92,15 @@ export const Navbar = ({
             {t('Governance')}
           </NavExternalLink>
         </NavigationItem>
-        {DocsLinks?.NEW_TO_VEGA && GITHUB_FEEDBACK_URL && (
+        {VEGA_DOCS_URL && GITHUB_FEEDBACK_URL && (
           <NavigationItem>
             <NavigationTrigger>{t('Resources')}</NavigationTrigger>
             <NavigationContent>
               <NavigationList>
                 <NavigationItem>
-                  <NavExternalLink href={DocsLinks.NEW_TO_VEGA}>
+                  <NavExternalLink
+                    href={createDocsLinks(VEGA_DOCS_URL).NEW_TO_VEGA}
+                  >
                     {t('Docs')}
                   </NavExternalLink>
                 </NavigationItem>

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

@@ -1,2 +1,3 @@
 export * from './select-market-columns';
 export * from './select-market-table';
+export * from './select-market';

apps/trading/components/select-market/select-market-columns.tsx

@@ -7,7 +7,7 @@ import {
 } from '@vegaprotocol/market-list';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { PriceCell } from '@vegaprotocol/datagrid';
+import { PriceCell, signedNumberCssClass } from '@vegaprotocol/datagrid';
 import { Link as UILink, Sparkline, Tooltip } from '@vegaprotocol/ui-toolkit';
 import isNil from 'lodash/isNil';
 import type { CandleClose } from '@vegaprotocol/types';
@@ -341,3 +341,187 @@ export const columns = (
   ];
   return selectMarketColumns;
 };
+
+export const columnsPositionMarkets = (
+  market: MarketMaybeWithDataAndCandles,
+  onSelect: (id: string, metaKey?: boolean) => void,
+  inViewRoot?: RefObject<HTMLElement>,
+  openVolume?: string,
+  onCellClick?: OnCellClickHandler
+) => {
+  const candlesClose = market.candles
+    ?.map((candle) => candle?.close)
+    .filter((c: string | undefined): c is CandleClose => !isNil(c));
+  const candleLow = market.candles && calcCandleLow(market.candles);
+  const candleHigh = market.candles && calcCandleHigh(market.candles);
+  const candleVolume = market.candles && calcCandleVolume(market.candles);
+  const selectMarketColumns: Column[] = [
+    {
+      kind: ColumnKind.Market,
+      value: (
+        <Link
+          to={Links[Routes.MARKET](market.id)}
+          data-testid={`market-link-${market.id}`}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect(market.id, e.metaKey || e.ctrlKey);
+          }}
+        >
+          <UILink>{market.tradableInstrument.instrument.code}</UILink>
+        </Link>
+      ),
+      className: cellClassNames,
+      onlyOnDetailed: false,
+    },
+    {
+      kind: ColumnKind.ProductType,
+      value: market.tradableInstrument.instrument.product.__typename,
+      className: `py-2 first:text-left hidden sm:table-cell`,
+      onlyOnDetailed: false,
+    },
+    {
+      kind: ColumnKind.LastPrice,
+      value: (
+        <MarketMarkPrice
+          marketId={market.id}
+          decimalPlaces={market?.decimalPlaces}
+          inViewRoot={inViewRoot}
+          initialValue={market.data?.markPrice}
+          asPriceCell
+        />
+      ),
+      className: cellClassNames,
+      onlyOnDetailed: false,
+    },
+    {
+      kind: ColumnKind.Change24,
+      value: (
+        <Last24hPriceChange
+          marketId={market.id}
+          decimalPlaces={market?.decimalPlaces}
+          inViewRoot={inViewRoot}
+          initialValue={candlesClose}
+        />
+      ),
+      className: cellClassNames,
+      onlyOnDetailed: false,
+    },
+    {
+      kind: ColumnKind.Sparkline,
+      value: candlesClose && (
+        <Sparkline
+          width={100}
+          height={20}
+          muted={false}
+          data={candlesClose.map((c: string) => Number(c))}
+        />
+      ),
+      className: `${cellClassNames} hidden lg:table-cell`,
+      onlyOnDetailed: false,
+    },
+    {
+      kind: ColumnKind.Asset,
+      value: (
+        <button
+          data-dialog-trigger
+          className="inline underline"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (!onCellClick) return;
+            onCellClick(
+              e,
+              ColumnKind.Asset,
+              market.tradableInstrument.instrument.product.settlementAsset.id
+            );
+          }}
+        >
+          {market.tradableInstrument.instrument.product.settlementAsset.symbol}
+        </button>
+      ),
+      className: `${cellClassNames} hidden sm:table-cell`,
+      onlyOnDetailed: false,
+    },
+    {
+      kind: ColumnKind.High24,
+      value: candleHigh ? (
+        <PriceCell
+          value={Number(candleHigh)}
+          valueFormatted={addDecimalsFormatNumber(
+            candleHigh.toString(),
+            market.decimalPlaces,
+            2
+          )}
+        />
+      ) : (
+        '-'
+      ),
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
+      onlyOnDetailed: true,
+    },
+    {
+      kind: ColumnKind.Low24,
+      value: candleLow ? (
+        <PriceCell
+          value={Number(candleLow)}
+          valueFormatted={addDecimalsFormatNumber(
+            candleLow.toString(),
+            market.decimalPlaces,
+            2
+          )}
+        />
+      ) : (
+        '-'
+      ),
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
+      onlyOnDetailed: true,
+    },
+    {
+      kind: ColumnKind.Volume,
+      value: (
+        <Last24hVolume
+          marketId={market.id}
+          inViewRoot={inViewRoot}
+          positionDecimalPlaces={market.positionDecimalPlaces}
+          initialValue={candleVolume}
+          formatDecimals={2}
+        />
+      ),
+      className: `${cellClassNames} hidden lg:table-cell font-mono`,
+      onlyOnDetailed: true,
+      dataTestId: 'market-volume',
+    },
+    {
+      kind: ColumnKind.TradingMode,
+      value: (
+        <MarketTradingMode
+          marketId={market?.id}
+          inViewRoot={inViewRoot}
+          initialTradingMode={market.tradingMode}
+          initialTrigger={market.data?.trigger}
+        />
+      ),
+      className: `${cellClassNames} hidden lg:table-cell`,
+      onlyOnDetailed: true,
+      dataTestId: 'trading-mode-col',
+    },
+    {
+      kind: ColumnKind.Fee,
+      value: <FeesCell feeFactors={market.fees.factors} />,
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
+      onlyOnDetailed: true,
+    },
+    {
+      kind: ColumnKind.Position,
+      value: (
+        <p className={signedNumberCssClass(openVolume || '')}>
+          {openVolume &&
+            addDecimalsFormatNumber(openVolume, market.positionDecimalPlaces)}
+        </p>
+      ),
+      className: `${cellClassNames} hidden xxl:table-cell font-mono`,
+      onlyOnDetailed: true,
+    },
+  ];
+  return selectMarketColumns;
+};

apps/trading/components/select-market/select-market-table.tsx

@@ -1,6 +1,7 @@
 import { columnHeaders } from './select-market-columns';
 import classNames from 'classnames';
 import type { Column } from './select-market-columns';
+import type { ReactNode } from 'react';
 
 export const SelectMarketTableHeader = ({
   detailed = false,
@@ -61,3 +62,23 @@ export const SelectMarketTableRow = ({
     </tr>
   );
 };
+
+export const SelectMarketTableRowSplash = ({
+  children,
+  colSpan,
+}: {
+  children: ReactNode;
+  colSpan: number;
+}) => {
+  return (
+    <tr className={`relative`}>
+      <td
+        className="text-center p-10 pt-14 text-xs"
+        key="splash"
+        colSpan={colSpan}
+      >
+        {children}
+      </td>
+    </tr>
+  );
+};

apps/trading/components/select-market/select-market.spec.tsx

@@ -0,0 +1,203 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as Schema from '@vegaprotocol/types';
+
+import { SelectAllMarketsTableBody } from './select-market';
+
+import type {
+  MarketMaybeWithCandles,
+  MarketMaybeWithData,
+  MarketData,
+} from '@vegaprotocol/market-list';
+import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+type Market = MarketMaybeWithCandles & MarketMaybeWithData;
+
+type PartialMarket = Partial<
+  Omit<Market, 'data'> & { data: Partial<MarketData> }
+>;
+
+const MARKET_A: PartialMarket = {
+  __typename: 'Market',
+  id: '1',
+  decimalPlaces: 2,
+  tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+  tradableInstrument: {
+    __typename: 'TradableInstrument',
+    instrument: {
+      __typename: 'Instrument',
+      id: '1',
+      code: 'ABCDEF',
+      name: 'ABCDEF 1-Day',
+      product: {
+        __typename: 'Future',
+        quoteName: 'ABCDEF',
+        settlementAsset: {
+          __typename: 'Asset',
+          id: 'asset-ABC',
+          name: '',
+          decimals: 2,
+          symbol: 'ABC',
+        },
+        dataSourceSpecForTradingTermination: {
+          __typename: 'DataSourceSpec',
+          id: 'oracleId',
+        },
+        dataSourceSpecForSettlementData: {
+          __typename: 'DataSourceSpec',
+          id: 'oracleId',
+        },
+        dataSourceSpecBinding: {
+          __typename: 'DataSourceSpecToFutureBinding',
+          tradingTerminationProperty: 'trading-termination-property',
+          settlementDataProperty: 'settlement-data-property',
+        },
+      },
+      metadata: {
+        __typename: 'InstrumentMetadata',
+        tags: ['ABC', 'DEF'],
+      },
+    },
+  },
+  fees: {
+    __typename: 'Fees',
+    factors: {
+      __typename: 'FeeFactors',
+      infrastructureFee: '0.01',
+      liquidityFee: '0.01',
+      makerFee: '0.01',
+    },
+  },
+  data: {
+    __typename: 'MarketData',
+    market: {
+      __typename: 'Market',
+      id: '1',
+    },
+    markPrice: '90',
+    trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING,
+    marketState: Schema.MarketState.STATE_PENDING,
+    marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
+    indicativeVolume: '1000',
+  },
+  candles: [
+    {
+      __typename: 'Candle',
+      high: '100',
+      low: '10',
+      open: '10',
+      close: '80',
+      volume: '1000',
+      periodStart: '2022-11-01T15:49:00Z',
+    },
+    {
+      __typename: 'Candle',
+      high: '10',
+      low: '1',
+      open: '1',
+      close: '100',
+      volume: '1000',
+      periodStart: '2022-11-01T15:50:00Z',
+    },
+  ],
+};
+
+const MARKET_B: PartialMarket = {
+  __typename: 'Market',
+  id: '2',
+  decimalPlaces: 2,
+  positionDecimalPlaces: 0,
+  tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+  tradableInstrument: {
+    __typename: 'TradableInstrument',
+    instrument: {
+      __typename: 'Instrument',
+      id: '2',
+      code: 'XYZ',
+      name: 'XYZ 1-Day',
+      product: {
+        __typename: 'Future',
+        quoteName: 'XYZ',
+        settlementAsset: {
+          __typename: 'Asset',
+          id: 'asset-XYZ',
+          name: 'asset-XYZ',
+          decimals: 2,
+          symbol: 'XYZ',
+        },
+        dataSourceSpecForTradingTermination: {
+          __typename: 'DataSourceSpec',
+          id: 'oracleId',
+        },
+        dataSourceSpecForSettlementData: {
+          __typename: 'DataSourceSpec',
+          id: 'oracleId',
+        },
+        dataSourceSpecBinding: {
+          __typename: 'DataSourceSpecToFutureBinding',
+          tradingTerminationProperty: 'trading-termination-property',
+          settlementDataProperty: 'settlement-data-property',
+        },
+      },
+      metadata: {
+        __typename: 'InstrumentMetadata',
+        tags: ['XYZ'],
+      },
+    },
+  },
+  fees: {
+    __typename: 'Fees',
+    factors: {
+      __typename: 'FeeFactors',
+      infrastructureFee: '0.01',
+      liquidityFee: '0.01',
+      makerFee: '0.01',
+    },
+  },
+  data: {
+    __typename: 'MarketData',
+    market: {
+      __typename: 'Market',
+      id: '2',
+    },
+    markPrice: '123.123',
+    trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING,
+    marketState: Schema.MarketState.STATE_PENDING,
+    marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
+    indicativeVolume: '2000',
+  },
+  candles: [
+    {
+      __typename: 'Candle',
+      high: '100',
+      low: '10',
+      open: '10',
+      close: '80',
+      volume: '1000',
+      periodStart: '2022-11-01T15:49:00Z',
+    },
+  ],
+};
+
+describe('SelectMarket', () => {
+  const table = document.createElement('table');
+
+  it('should render the SelectAllMarketsTableBody', () => {
+    const onSelect = jest.fn();
+    const onCellClick = jest.fn();
+    const { container } = render(
+      <MemoryRouter>
+        <SelectAllMarketsTableBody
+          markets={[MARKET_A as Market, MARKET_B as Market]}
+          onCellClick={onCellClick}
+          onSelect={onSelect}
+        />
+      </MemoryRouter>,
+      { wrapper: MockedProvider, container: document.body.appendChild(table) }
+    );
+    expect(screen.getByText('ABCDEF')).toBeTruthy(); // name
+    expect(screen.getByText('25.00%')).toBeTruthy(); // price change
+    expect(container).toHaveTextContent(/1,000/); // volume
+    fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
+    expect(onSelect).toHaveBeenCalledWith('1', false);
+  });
+});

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

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import type { RefObject } from 'react';
+import { useMarketList } from '@vegaprotocol/market-list';
+import { positionsDataProvider } from '@vegaprotocol/positions';
+import { t } from '@vegaprotocol/i18n';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { ExternalLink, Icon, Loader, Popover } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import {
+  columnHeaders,
+  columnHeadersPositionMarkets,
+  columns,
+  columnsPositionMarkets,
+} from './select-market-columns';
+import {
+  SelectMarketTableHeader,
+  SelectMarketTableRow,
+  SelectMarketTableRowSplash,
+} from './select-market-table';
+import type { ReactNode } from 'react';
+import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list';
+import type { PositionFieldsFragment } from '@vegaprotocol/positions';
+import type { Column, OnCellClickHandler } from './select-market-columns';
+import {
+  DApp,
+  TOKEN_NEW_MARKET_PROPOSAL,
+  useLinks,
+} from '@vegaprotocol/environment';
+import { HeaderTitle } from '../header';
+
+export const SelectAllMarketsTableBody = ({
+  markets,
+  positions,
+  onSelect,
+  onCellClick,
+  inViewRoot,
+  headers = columnHeaders,
+  tableColumns = (market) => columns(market, onSelect, onCellClick, inViewRoot),
+}: {
+  markets?: MarketMaybeWithDataAndCandles[] | null;
+  positions?: PositionFieldsFragment[];
+  title?: string;
+  onSelect: (id: string, metaKey?: boolean) => void;
+  onCellClick: OnCellClickHandler;
+  headers?: Column[];
+  tableColumns?: (
+    market: MarketMaybeWithDataAndCandles,
+    inViewRoot?: RefObject<HTMLDivElement>,
+    openVolume?: string
+  ) => Column[];
+  inViewRoot?: RefObject<HTMLDivElement>;
+}) => {
+  const tokenLink = useLinks(DApp.Token);
+  if (!markets) return null;
+  return (
+    <>
+      <thead className="bg-neutral-100 dark:bg-neutral-800">
+        <SelectMarketTableHeader detailed={true} headers={headers} />
+      </thead>
+      {/* Border styles required to create space between tbody elements margin/padding don't work */}
+      <tbody className="border-b-[10px] border-transparent">
+        {markets.length > 0 ? (
+          markets?.map((market, i) => (
+            <SelectMarketTableRow
+              marketId={market.id}
+              key={i}
+              detailed
+              onSelect={onSelect}
+              columns={tableColumns(
+                market,
+                inViewRoot,
+                positions &&
+                  positions.find((p) => p.market.id === market.id)?.openVolume
+              )}
+            />
+          ))
+        ) : (
+          <SelectMarketTableRowSplash colSpan={12}>
+            {t('No markets ')}
+            <ExternalLink href={tokenLink(TOKEN_NEW_MARKET_PROPOSAL)}>
+              {t('Propose a new market')}
+            </ExternalLink>
+          </SelectMarketTableRowSplash>
+        )}
+      </tbody>
+    </>
+  );
+};
+
+export const SelectMarketPopover = ({
+  marketCode,
+  marketName,
+  onSelect,
+  onCellClick,
+}: {
+  marketCode: string;
+  marketName: string;
+  onSelect: (id: string, metaKey?: boolean) => void;
+  onCellClick: OnCellClickHandler;
+}) => {
+  const { pubKey } = useVegaWallet();
+  const [open, setOpen] = useState(false);
+  const inViewRoot = useRef<HTMLDivElement>(null);
+  const {
+    data,
+    loading: marketsLoading,
+    reload: marketListReload,
+  } = useMarketList();
+  const {
+    data: positions,
+    loading: positionsLoading,
+    reload,
+  } = useDataProvider({
+    dataProvider: positionsDataProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const onSelectMarket = useCallback(
+    (marketId: string, metaKey?: boolean) => {
+      onSelect(marketId, metaKey);
+      setOpen(false);
+    },
+    [onSelect]
+  );
+
+  const iconClass = open ? 'rotate-180' : '';
+  const markets = useMemo(
+    () =>
+      data?.filter((market) =>
+        positions?.find((node) => node.market.id === market.id)
+      ),
+    [data, positions]
+  );
+
+  useEffect(() => {
+    if (open) {
+      reload();
+      marketListReload();
+    }
+  }, [open, marketListReload, reload]);
+
+  return (
+    <Popover
+      open={open}
+      onChange={setOpen}
+      trigger={
+        <div className="flex items-center gap-2">
+          <HeaderTitle
+            primaryContent={marketCode}
+            secondaryContent={marketName}
+          />
+          <Icon name="chevron-down" className={iconClass} size={6} />
+        </div>
+      }
+    >
+      <div
+        className="w-[90vw] max-h-[80vh] overflow-y-auto"
+        data-testid="select-market-list"
+        ref={inViewRoot}
+      >
+        {marketsLoading || (pubKey && positionsLoading) ? (
+          <div className="flex items-center gap-4">
+            <Loader size="small" />
+            {t('Loading market data')}
+          </div>
+        ) : (
+          <table className="relative text-sm w-full whitespace-nowrap">
+            {pubKey && (positions?.length ?? 0) && (markets?.length ?? 0) ? (
+              <>
+                <TableTitle>{t('My markets')}</TableTitle>
+                <SelectAllMarketsTableBody
+                  inViewRoot={inViewRoot}
+                  markets={markets}
+                  positions={positions || undefined}
+                  onSelect={onSelectMarket}
+                  onCellClick={onCellClick}
+                  headers={columnHeadersPositionMarkets}
+                  tableColumns={(market, inViewRoot, openVolume) =>
+                    columnsPositionMarkets(
+                      market,
+                      onSelectMarket,
+                      inViewRoot,
+                      openVolume,
+                      onCellClick
+                    )
+                  }
+                />
+              </>
+            ) : null}
+            <TableTitle>{t('All markets')}</TableTitle>
+            <SelectAllMarketsTableBody
+              inViewRoot={inViewRoot}
+              markets={data}
+              onSelect={onSelectMarket}
+              onCellClick={onCellClick}
+            />
+          </table>
+        )}
+      </div>
+    </Popover>
+  );
+};
+
+const TableTitle = ({ children }: { children: ReactNode }) => {
+  return (
+    <thead>
+      <tr>
+        <th className="font-normal text-left">
+          <h3 className="text-lg">{children}</h3>
+        </th>
+      </tr>
+    </thead>
+  );
+};

apps/trading/components/welcome-dialog/risk-notice-dialog.tsx

@@ -8,10 +8,11 @@ import {
 import { RISK_ACCEPTED_KEY } from '../constants';
 import { TelemetryApproval } from './telemetry-approval';
 import {
+  DOCS_VEGA_WALLET,
+  GET_VEGA_WALLET_URL,
   Networks,
+  useDocsLink,
   useEnvironment,
-  DocsLinks,
-  ExternalLinks,
 } from '@vegaprotocol/environment';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 
@@ -52,6 +53,8 @@ export const RiskNoticeDialog = ({ onClose, network }: Props) => {
 
 const TestnetContent = ({ network }: { network: Networks }) => {
   const { GITHUB_FEEDBACK_URL } = useEnvironment();
+  const docsLink = useDocsLink();
+
   return (
     <>
       <p className="mb-4">
@@ -66,16 +69,16 @@ const TestnetContent = ({ network }: { network: Networks }) => {
           [network]
         )}
       </p>
-      {GITHUB_FEEDBACK_URL && DocsLinks && (
+      {GITHUB_FEEDBACK_URL && GET_VEGA_WALLET_URL && docsLink && (
         <ul className="list-disc pl-4">
           <li className="mb-1">
-            <Link href={ExternalLinks.VEGA_WALLET_URL} target="_blank">
+            <Link href={GET_VEGA_WALLET_URL} target="_blank">
               <span className="underline">{t('Get a Vega Wallet')}</span>{' '}
               <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
             </Link>
           </li>
           <li className="mb-1">
-            <Link href={DocsLinks.VEGA_WALLET_TOOLS_URL} target="_blank">
+            <Link href={docsLink(DOCS_VEGA_WALLET)} target="_blank">
               <span className="underline">{t('Learn about Vega Wallet')}</span>{' '}
               <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
             </Link>

apps/trading/components/welcome-dialog/welcome-notice-dialog.tsx

@@ -1,13 +1,13 @@
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import {
+  BLOG,
   DApp,
   Networks,
   TOKEN_NEW_MARKET_PROPOSAL,
   TOKEN_PROPOSALS,
   useEnvironment,
   useLinks,
-  ExternalLinks,
 } from '@vegaprotocol/environment';
 import { ProposedMarkets } from './proposed-markets';
 
@@ -52,7 +52,7 @@ export const WelcomeNoticeDialog = () => {
           </ExternalLink>
         </li>
         <li>
-          <ExternalLink target="_blank" href={ExternalLinks.BLOG}>
+          <ExternalLink target="_blank" href={BLOG}>
             {t('Read about the mainnet launch')}
           </ExternalLink>
         </li>