feat(3742): tweak to imports after merge from develop

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

.github/workflows/cypress-live-test.yml

@@ -33,5 +33,4 @@ jobs:
           config: baseUrl=${{ github.event.inputs.url }}
           env: grepTags=@live
         env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/cypress-run.yml

@@ -66,7 +66,7 @@ jobs:
       ######
 
       - name: Run Cypress tests
-        run: yarn nx run ${{ matrix.project }}:e2e ${{ env.SKIP_CACHE }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome --env.grepTags="${{ inputs.tags }}"
+        run: yarn nx run ${{ matrix.project }}:e2e ${{ env.SKIP_CACHE }}  --browser chrome --env.grepTags="${{ inputs.tags }}"
         working-directory: frontend-monorepo
         env:
           CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}

.github/workflows/publish-dist.yml

@@ -148,6 +148,7 @@ jobs:
             ENV_NAME=${{ env.ENV_NAME }}
           tags: |
             vegaprotocol/${{ matrix.app }}:${{ github.ref_name }}
+            vegaprotocol/${{ matrix.app }}:mainnet
 
       # bucket creation in github.com/vegaprotocol/terraform//frontend
       - name: Publish dist to s3
@@ -174,3 +175,53 @@ jobs:
         if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
         with:
           files: ${{ matrix.app }}-ipfs-hash
+
+      - name: Trigger fleek deployment
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        run: |
+          # display info about app
+          curl -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
+            -H "Content-Type: application/json" \
+            -d '{"query": "query{getSiteById(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id latestDeploy{id status}}}"}' \
+            https://api.fleek.co/graphql
+
+          # trigger new deployment as base image is always set to vegaprotocol/trading:mainnet
+          curl -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
+            -H "Content-Type: application/json" \
+            -d '{"query": "mutation{triggerDeploy(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id status}}"}' \
+            https://api.fleek.co/graphql
+
+      - 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)
+          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"
+          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 origin main
+
+          # branch_name=${{ github.ref_name }}-hash-update
+          # git checkout -b "${branch_name}"
+          # git add interstitial-allow.json netlify.toml
+          # 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 --admin --auto $pr_url

Makefile

@@ -11,7 +11,7 @@ recalculate-ipfs:
 	echo "ipfs hash inside the image"
 	docker run --rm ${TAG} cat /ipfs-hash
 	echo "recalculating ipfs hash"
-	docker run --rm ${TAG} ipfs add -rw /usr/share/nginx/html
+	docker run --rm ${TAG} ipfs add -r /usr/share/nginx/html
 
 .PHONY: eject-ipfs-hash
 unpack:

apps/explorer/src/app/components/txs/details/chain-response-code/chain-reponse.code.tsx

@@ -1,3 +1,5 @@
+import { Icon } from '@vegaprotocol/ui-toolkit';
+
 // https://github.com/vegaprotocol/vega/blob/develop/core/blockchain/response.go
 export const ErrorCodes = new Map([
   [51, 'Transaction failed validation'],
@@ -28,7 +30,11 @@ export const ChainResponseCode = ({
 }: ChainResponseCodeProps) => {
   const isSuccess = successCodes.has(code);
 
-  const icon = isSuccess ? '✅' : '❌';
+  const icon = isSuccess ? (
+    <Icon name="tick-circle" className="fill-vega-green-550" />
+  ) : (
+    <Icon name="cross" className="fill-vega-pink-550" />
+  );
   const label = ErrorCodes.get(code) || 'Unknown response code';
 
   // Hack for batches with many errors - see https://github.com/vegaprotocol/vega/issues/7245
@@ -36,7 +42,7 @@ export const ChainResponseCode = ({
     error && error.length > 100 ? error.replace(/,/g, ',\r\n') : error;
 
   return (
-    <div title={`Response code: ${code} - ${label}`} className="inline-block">
+    <div title={`Response code: ${code} - ${label}`} className=" inline-block">
       <span
         className="mr-2"
         aria-label={isSuccess ? 'Success' : 'Warning'}

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

@@ -4,6 +4,7 @@ import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint
 import { TxDetailsShared } from './shared/tx-details-shared';
 import { TableCell, TableRow, TableWithTbody } from '../../table';
 import ProposalLink from '../../links/proposal-link/proposal-link';
+import { VoteIcon } from '../../vote-icon/vote-icon';
 
 interface TxProposalVoteProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -30,27 +31,22 @@ export const TxProposalVote = ({
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
 
-  const vote = txData.command.voteSubmission.value ? '👍' : '👎';
+  const vote = txData.command.voteSubmission.value === 'VALUE_YES';
+
   return (
     <TableWithTbody className="mb-8" allowWrap={true}>
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
-      <TableRow modifier="bordered">
-        <TableCell>{t('Proposal ID')}</TableCell>
-        <TableCell>{txData.command.voteSubmission.proposalId}</TableCell>
-      </TableRow>
       <TableRow modifier="bordered">
         <TableCell>{t('Proposal details')}</TableCell>
         <TableCell>
           <ProposalLink id={txData.command.voteSubmission.proposalId} />
         </TableCell>
       </TableRow>
-      <TableRow modifier="bordered">
-        <TableCell>{t('Proposal')}</TableCell>
-        <TableCell>{txData.command.voteSubmission.proposalId}</TableCell>
-      </TableRow>
       <TableRow modifier="bordered">
         <TableCell>{t('Vote')}</TableCell>
-        <TableCell>{vote}</TableCell>
+        <TableCell>
+          <VoteIcon vote={vote} />
+        </TableCell>
       </TableRow>
     </TableWithTbody>
   );

apps/explorer/src/app/components/txs/tx-order-type.tsx

@@ -1,5 +1,6 @@
 import { t } from '@vegaprotocol/i18n';
 import type { components } from '../../../types/explorer';
+import { VoteIcon } from '../vote-icon/vote-icon';
 
 interface TxOrderTypeProps {
   orderType: string;
@@ -137,12 +138,15 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
   let type = displayString[orderType] || orderType;
 
   let colours =
-    'text-white dark:text-white bg-vega-dark-150 dark:bg-vega-dark-150';
+    'text-white dark:text-white bg-vega-dark-150 dark:bg-vega-dark-250';
 
   // This will get unwieldy and should probably produce a different colour of tag
   if (type === 'Chain Event' && !!command?.chainEvent) {
     type = getLabelForChainEvent(command.chainEvent);
     colours = 'text-white dark-text-white bg-vega-pink dark:bg-vega-pink';
+  } else if (type === 'Validator Heartbeat') {
+    colours =
+      'text-white dark-text-white bg-vega-light-200 dark:bg-vega-dark-100';
   } else if (type === 'Proposal' || type === 'Governance Proposal') {
     if (command && !!command.proposalSubmission) {
       type = getLabelForProposal(command.proposalSubmission);
@@ -150,6 +154,16 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
     colours = 'text-black bg-vega-yellow';
   }
 
+  if (type === 'Vote on Proposal') {
+    return (
+      <VoteIcon
+        vote={command?.voteSubmission?.value === 'VALUE_YES'}
+        yesText="Proposal vote"
+        noText="Proposal vote"
+      />
+    );
+  }
+
   if (type === 'Vote on Proposal' || type === 'Vote Submission') {
     colours = 'text-black bg-vega-yellow';
   }

apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx

@@ -98,6 +98,6 @@ describe('Txs infinite list item', () => {
     expect(screen.getByTestId('pub-key')).toHaveTextContent('testPubKey');
     expect(screen.getByTestId('tx-type')).toHaveTextContent('testType');
     expect(screen.getByTestId('tx-block')).toHaveTextContent('1');
-    expect(screen.getByTestId('tx-success')).toHaveTextContent('Success: ✅');
+    expect(screen.getByTestId('tx-success')).toHaveTextContent('Success');
   });
 });

apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx

@@ -31,7 +31,7 @@ export const TxsInfiniteListItem = ({
   return (
     <div
       data-testid="transaction-row"
-      className="flex items-center h-full border-t border-neutral-600 dark:border-neutral-800 txs-infinite-list-item grid grid-cols-10 py-2"
+      className="flex items-center h-full border-t border-neutral-600 dark:border-neutral-800 txs-infinite-list-item grid grid-cols-10"
     >
       <div
         className="text-sm col-span-10 md:col-span-3 leading-none"
@@ -83,7 +83,7 @@ export const TxsInfiniteListItem = ({
         data-testid="tx-success"
       >
         <span className="md:hidden uppercase text-vega-dark-300">
-          Success:&nbsp;
+          Success&nbsp;
         </span>
         {isNumber(code) ? (
           <ChainResponseCode code={code} hideLabel={true} />

apps/explorer/src/app/components/vote-icon/vote-icon.spec.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import { VoteIcon } from './vote-icon';
+
+describe('Vote TX icon', () => {
+  it('should use the text For by default for yes votes', () => {
+    const yes = render(<VoteIcon vote={true} />);
+    expect(yes.getByTestId('label')).toHaveTextContent('For');
+  });
+
+  it('should use the yesText for yes votes if specified', () => {
+    const yes = render(<VoteIcon vote={true} yesText="Test" />);
+    expect(yes.getByTestId('label')).toHaveTextContent('Test');
+  });
+
+  it('should display the tick icon for yes votes', () => {
+    const no = render(<VoteIcon vote={true} />);
+    expect(no.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'tick-circle icon'
+    );
+  });
+
+  it('should use the text Against by default for no votes', () => {
+    const no = render(<VoteIcon vote={false} />);
+    expect(no.getByTestId('label')).toHaveTextContent('Against');
+  });
+
+  it('should use the noText for no votes if specified', () => {
+    const no = render(<VoteIcon vote={false} noText="Test" />);
+    expect(no.getByTestId('label')).toHaveTextContent('Test');
+  });
+
+  it('should display the delete icon for no votes', () => {
+    const no = render(<VoteIcon vote={false} />);
+    expect(no.getByRole('img')).toHaveAttribute('aria-label', 'delete icon');
+  });
+});

apps/explorer/src/app/components/vote-icon/vote-icon.tsx

@@ -0,0 +1,40 @@
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import type { IconName } from '@vegaprotocol/ui-toolkit';
+
+export interface VoteIconProps {
+  // True is a yes vote, false is undefined or no vorte
+  vote: boolean;
+  // Defaults to 'For', but can be any text
+  yesText?: string;
+  // Defaults to 'Against', but can be any text
+  noText?: string;
+}
+
+/**
+ * Displays a lozenge with an icon representing the way a user voted for a proposal.
+ * The yes and no text can be overridden
+ *
+ * @returns
+ */
+export function VoteIcon({
+  vote,
+  yesText = 'For',
+  noText = 'Against',
+}: VoteIconProps) {
+  const label = vote ? yesText : noText;
+  const bg = vote ? 'bg-vega-green-550' : 'bg-vega-pink-550';
+  const icon: IconName = vote ? 'tick-circle' : 'delete';
+  const fill = vote ? 'vega-green-300' : 'vega-pink-300';
+  const text = vote ? 'vega-green-200' : 'vega-pink-200';
+
+  return (
+    <div
+      className={`voteicon inline-block my-1 py-1 px-2 py rounded-md text-white leading-one sm align-top ${bg}`}
+    >
+      <Icon name={icon} size={3} className={`mr-2 p-0 fill-${fill}`} />
+      <span className={`text-base text-${text}`} data-testid="label">
+        {label}
+      </span>
+    </div>
+  );
+}

apps/explorer/src/styles.css

@@ -60,3 +60,7 @@
   --ag-row-hover-color: theme(colors.neutral[800]);
   --ag-font-size: 12px;
 }
+
+.voteicon svg {
+  vertical-align: baseline;
+}

apps/governance-e2e/src/integration/flow/staking-flow.cy.ts

@@ -57,7 +57,6 @@ context(
     // 2001-STKE-002, 2001-STKE-032
     before('visit staking tab and connect vega wallet', function () {
       cy.visit('/');
-      cy.validatorsSelfDelegate();
       ethereumWalletConnect();
       // this is a workaround for #2422 which can be removed once issue is resolved
       cy.associateTokensToVegaWallet('4');

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

@@ -109,7 +109,7 @@ context(
             );
             cy.getByTestId('protocol-upgrade-proposal-status').should(
               'have.text',
-              'Approved '
+              'Approved by validators '
             );
           });
       });
@@ -136,7 +136,7 @@ context(
         );
         cy.getByTestId('protocol-upgrade-state').should(
           'have.text',
-          'Approved'
+          'Approved by validators'
         );
         cy.getByTestId('protocol-upgrade-release-tag').should(
           'have.text',

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

@@ -31,9 +31,6 @@ const totalPenaltyToolTip = '[data-testid="total-penalty-tooltip"]';
 const epochCountDown = '[data-testid="epoch-countdown"]';
 const stakeNumberRegex = /^\d{1,3}(,\d{3})*(\.\d+)?$/;
 
-// If running locally, validators need to have self-stake to be displayed
-// Run cy.validatorsSelfDelegate() in before hook
-
 context('Validators Page - verify elements on page', function () {
   before('navigate to validators page', function () {
     cy.visit('/validators');

apps/governance-e2e/src/support/index.js

@@ -33,4 +33,6 @@ before(() => {
     aliasGQLQuery(req, 'ChainId', chainIdQuery());
     aliasGQLQuery(req, 'Statistics', statisticsQuery());
   });
+  // Self stake validators so they are displayed
+  cy.validatorsSelfDelegate();
 });

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

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

apps/governance/src/app.tsx

@@ -2,7 +2,6 @@ import './i18n';
 
 import React, { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
-import { Integrations } from '@sentry/tracing';
 import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import { AppLoader } from './app-loader';
 import { NetworkInfo } from '@vegaprotocol/network-info';
@@ -184,6 +183,10 @@ const ScrollToTop = () => {
   return null;
 };
 
+const removeQueryParams = (url: string) => {
+  return url.split('?')[0];
+};
+
 const AppContainer = () => {
   const { config, loading, error } = useEthereumConfig();
   const {
@@ -201,25 +204,62 @@ const AppContainer = () => {
   ]);
 
   useEffect(() => {
-    if (ENV.dsn && telemetryOn) {
+    if (ENV.dsn && telemetryOn === 'true') {
       Sentry.init({
         dsn: ENV.dsn,
-        integrations: [new Integrations.BrowserTracing()],
         tracesSampleRate: 0.1,
         enabled: true,
         environment: VEGA_ENV,
         release: GIT_COMMIT_HASH,
-        beforeSend(event) {
-          if (event.request?.url?.includes('/claim?')) {
-            return {
-              ...event,
-              request: {
-                ...event.request,
-                url: event.request?.url.split('?')[0],
-              },
-            };
+        beforeSend(event, hint) {
+          const error = hint?.originalException;
+          const errorIsString = typeof error === 'string';
+          const errorIsObject = error instanceof Error;
+          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;
           }
-          return event;
+
+          const updatedRequest =
+            requestUrl && requestUrl.includes('/claim?')
+              ? { ...event.request, url: removeQueryParams(requestUrl) }
+              : event.request;
+
+          const updatedTransaction =
+            transaction && transaction.includes('/claim?')
+              ? removeQueryParams(transaction)
+              : transaction;
+
+          const updatedBreadcrumbs = event.breadcrumbs?.map((breadcrumb) => {
+            if (
+              breadcrumb.type === 'navigation' &&
+              breadcrumb.data?.to?.includes('/claim?')
+            ) {
+              return {
+                ...breadcrumb,
+                data: {
+                  ...breadcrumb.data,
+                  to: removeQueryParams(breadcrumb.data.to),
+                },
+              };
+            }
+            return breadcrumb;
+          });
+
+          return {
+            ...event,
+            request: updatedRequest,
+            transaction: updatedTransaction,
+            breadcrumbs: updatedBreadcrumbs ?? event.breadcrumbs,
+          };
         },
       });
       Sentry.setTag('branch', GIT_BRANCH);

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

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

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

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

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

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

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

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

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

@@ -34,9 +34,6 @@ 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;
   /**
@@ -57,7 +54,6 @@ 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,
@@ -81,10 +77,6 @@ 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,7 +16,6 @@ const initialAppState: AppState = {
   totalSupply: new BigNumber(0),
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
-  ethConnectOverlay: false,
   transactionOverlay: false,
   bannerMessage: '',
   disconnectNotice: false,
@@ -45,12 +44,6 @@ 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

@@ -202,6 +202,7 @@
   "tokenVotes": "Token votes",
   "liquidityVotes": "Liquidity votes",
   "castYourVote": "Cast your vote",
+  "yourVote": "Your vote",
   "for": "For",
   "against": "Against",
   "majorityRequired": "Majority Required",
@@ -787,9 +788,9 @@
   "homeVegaTokenButtonText": "Manage tokens",
   "downloadProposalJson": "Download proposal as JSON",
   "networkUpgrade": "Network Upgrade",
-  "PROTOCOL_UPGRADE_PROPOSAL_STATUS_APPROVED": "Approved",
-  "PROTOCOL_UPGRADE_PROPOSAL_STATUS_PENDING": "Pending",
-  "PROTOCOL_UPGRADE_PROPOSAL_STATUS_REJECTED": "Rejected",
+  "PROTOCOL_UPGRADE_PROPOSAL_STATUS_APPROVED": "Approved by validators",
+  "PROTOCOL_UPGRADE_PROPOSAL_STATUS_PENDING": "Waiting for validator votes",
+  "PROTOCOL_UPGRADE_PROPOSAL_STATUS_REJECTED": "Declined by validators",
   "PROTOCOL_UPGRADE_PROPOSAL_STATUS_UNSPECIFIED": "Unspecified",
   "vegaRelease{release}": "Vega Release {{release}}",
   "upgradeBlockHeight": "Upgrade block height",

apps/governance/src/lib/tranches/tranches-store.tsx

@@ -50,7 +50,22 @@ export const useTranches = create<TranchesStore>()((set) => ({
         ?.map((t) => {
           const tranche_progress =
             t.duration !== 0 ? (now - t.cliff_start) / t.duration : 0;
-          const lockedDecimal = tranche_progress < 0 ? 1 : 1 - tranche_progress;
+          let lockedDecimal;
+          if (t.duration !== 0) {
+            if (tranche_progress < 0) {
+              lockedDecimal = 1;
+            } else {
+              lockedDecimal = 1 - tranche_progress;
+            }
+          } else {
+            if (now < t.cliff_start) {
+              lockedDecimal = 1;
+            } else {
+              lockedDecimal = 0;
+            }
+          }
+          const clampedLockedDecimal = Math.max(0, Math.min(1, lockedDecimal));
+
           return {
             tranche_id: t.tranche_id,
             tranche_start: secondsToDate(t.cliff_start),
@@ -60,7 +75,7 @@ export const useTranches = create<TranchesStore>()((set) => ({
               toBigNum(t.current_balance, decimals)
             ),
             locked_amount: toBigNum(t.initial_balance, decimals).times(
-              lockedDecimal
+              clampedLockedDecimal
             ),
             users: t.users,
           };

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

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

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

@@ -24,7 +24,6 @@ const openProposalClosesNextMonth = generateProposal({
   },
   terms: {
     closingDatetime: nextMonth.toString(),
-    enactmentDatetime: nextMonth.toString(),
   },
 });
 
@@ -36,7 +35,6 @@ const openProposalClosesNextWeek = generateProposal({
   },
   terms: {
     closingDatetime: nextWeek.toString(),
-    enactmentDatetime: nextWeek.toString(),
   },
 });
 
@@ -45,7 +43,6 @@ const enactedProposalClosedLastWeek = generateProposal({
   state: ProposalState.STATE_ENACTED,
   terms: {
     closingDatetime: lastWeek.toString(),
-    enactmentDatetime: lastWeek.toString(),
   },
 });
 
@@ -54,7 +51,6 @@ const failedProposalClosedLastMonth = generateProposal({
   state: ProposalState.STATE_FAILED,
   terms: {
     closingDatetime: lastMonth.toString(),
-    enactmentDatetime: lastMonth.toString(),
   },
 });
 

apps/governance/src/routes/proposals/components/protocol-upgrade-proposal-detail-info/protocol-upgrade-proposal-detail-info.spec.tsx

@@ -32,7 +32,9 @@ describe('ProtocolUpgradeProposalDetailInfo', () => {
 
   it('should render the state', () => {
     const { getByTestId } = renderComponent();
-    expect(getByTestId('protocol-upgrade-state')).toHaveTextContent('Pending');
+    expect(getByTestId('protocol-upgrade-state')).toHaveTextContent(
+      'Waiting for validator votes'
+    );
   });
 
   it('should render the vega release tag', () => {

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

@@ -26,28 +26,34 @@ describe('ProtocolUpgradeProposalsListItem', () => {
         status:
           ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_REJECTED,
         icon: 'protocol-upgrade-proposal-status-icon-rejected',
+        text: 'Declined by validators',
       },
       {
         status:
           ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_PENDING,
         icon: 'protocol-upgrade-proposal-status-icon-pending',
+        text: 'Waiting for validator votes',
       },
       {
         status:
           ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_APPROVED,
         icon: 'protocol-upgrade-proposal-status-icon-approved',
+        text: 'Approved by validators',
       },
       {
         status:
           ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_UNSPECIFIED,
         icon: 'protocol-upgrade-proposal-status-icon-unspecified',
+        text: 'Unspecified',
       },
     ];
 
-    statuses.forEach(({ status, icon }) => {
+    statuses.forEach(({ status, icon, text }) => {
       renderComponent({ ...proposal, status });
       const statusIcon = screen.getByTestId(icon);
+      const textContent = screen.getByText(text);
       expect(statusIcon).toBeInTheDocument();
+      expect(textContent).toBeInTheDocument();
     });
   });
 

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

@@ -111,7 +111,9 @@ describe('Vote buttons', () => {
       </AppStateProvider>
     );
     expect(
-      screen.getByText('You need some VEGA tokens to participate in governance')
+      screen.getByText(
+        'You need some VEGA tokens to participate in governance.'
+      )
     ).toBeTruthy();
   });
 

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

@@ -2,7 +2,12 @@ import { format } from 'date-fns';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { AsyncRenderer, Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
+import {
+  AsyncRenderer,
+  Button,
+  ButtonLink,
+  ExternalLink,
+} from '@vegaprotocol/ui-toolkit';
 import { addDecimal, toBigNum } from '@vegaprotocol/utils';
 import { ProposalState, VoteValue } from '@vegaprotocol/types';
 import {
@@ -161,7 +166,12 @@ export const VoteButtons = ({
       {changeVote || (voteState === VoteState.NotCast && proposalVotable) ? (
         <>
           {currentStakeAvailable.isLessThanOrEqualTo(0) && (
-            <p data-testid="no-stake-available">{t('noGovernanceTokens')}</p>
+            <>
+              <p data-testid="no-stake-available">{t('noGovernanceTokens')}.</p>
+              <ExternalLink href="https://blog.vega.xyz/how-to-vote-on-vega-2195d1e52ec5">
+                {t('findOutMoreAboutHowToVote')}
+              </ExternalLink>
+            </>
           )}
 
           <div className="flex gap-4" data-testid="vote-buttons">

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

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { formatDistanceToNow } from 'date-fns';
-import { RoundedWrapper, Icon } from '@vegaprotocol/ui-toolkit';
+import { RoundedWrapper, Icon, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { ProposalState } from '@vegaprotocol/types';
 import { useVoteSubmit, VoteProgress } from '@vegaprotocol/proposals';
@@ -202,7 +202,12 @@ export const VoteDetails = ({
         )}
 
         <section className="mt-10">
-          <SubHeading title={t('castYourVote')} />
+          {proposal?.state === ProposalState.STATE_OPEN ? (
+            <SubHeading title={t('castYourVote')} />
+          ) : (
+            <SubHeading title={t('yourVote')} />
+          )}
+
           {pubKey ? (
             proposal && (
               <VoteButtonsContainer
@@ -224,6 +229,9 @@ export const VoteDetails = ({
                   <Icon name={'info-sign'} />
                   <div>{t('connectAVegaWalletToVote')}</div>
                 </div>
+                <ExternalLink href="https://blog.vega.xyz/how-to-vote-on-vega-2195d1e52ec5">
+                  {t('findOutMoreAboutHowToVote')}
+                </ExternalLink>
               </div>
               <ConnectToVega />
             </RoundedWrapper>

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

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

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

@@ -20,8 +20,11 @@ import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
 const orderByDate = (arr: ProposalFieldsFragment[]) =>
   orderBy(
     arr,
-    [(p) => new Date(p?.terms?.closingDatetime).getTime(), (p) => p.id],
-    ['desc', 'desc']
+    [
+      (p) => new Date(p?.terms?.closingDatetime).getTime(),
+      (p) => new Date(p?.datetime).getTime(),
+    ],
+    ['asc', 'asc']
   );
 
 const orderByUpgradeBlockHeight = (

apps/governance/src/routes/redemption/tranche-item.tsx

@@ -54,22 +54,16 @@ export const TrancheItem = ({
           {formatNumber(total, 2)}
         </span>
       </div>
-      <table className="w-full">
-        <tbody>
-          <tr>
-            <td>{t('Starts unlocking')}</td>
-            <td className="text-right">
-              {format(tranche.tranche_start, DATE_FORMAT_LONG)}
-            </td>
-          </tr>
-          <tr>
-            <td>{t('Fully unlocked')}</td>
-            <td className="text-right">
-              {format(tranche.tranche_end, DATE_FORMAT_LONG)}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div className="grid grid-cols-2 my-2">
+        <div>
+          <span>{t('Starts unlocking')}:</span>{' '}
+          <span>{format(tranche.tranche_start, DATE_FORMAT_LONG)}</span>
+        </div>
+        <div className="justify-self-end">
+          <span>{t('Fully unlocked')}:</span>{' '}
+          <span>{format(tranche.tranche_end, DATE_FORMAT_LONG)}</span>
+        </div>
+      </div>
       <LockedProgress
         locked={locked}
         unlocked={unlocked}

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

@@ -79,7 +79,24 @@ export const generateEpochIndividualRewardsList = ({
       epoch?.rewards.push(asset);
     }
 
-    asset.rewardTypes[rewardType] = { amount, percentageOfTotal };
+    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,
+      };
+    }
 
     // totalAmount is the sum of all rewardTypes amounts
     asset.totalAmount = Object.values(asset.rewardTypes).reduce(

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

@@ -216,7 +216,7 @@ export const ConsensusValidatorsTable = ({
               : undefined,
             [ValidatorFields.PENDING_USER_STAKE]: pendingUserStake,
             [ValidatorFields.USER_STAKE_SHARE]: userStakeShare
-              ? formatNumberPercentage(new BigNumber(userStakeShare))
+              ? formatNumberPercentage(new BigNumber(userStakeShare), 2)
               : undefined,
           };
         }

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

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

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

@@ -1,4 +1,37 @@
 [
+  {
+    "tranche_id": 59,
+    "tranche_start": "2024-05-01T00:00:00.000Z",
+    "tranche_end": "2024-11-01T00:00:00.000Z",
+    "total_added": "15000",
+    "total_removed": "0",
+    "locked_amount": "15000",
+    "deposits": [
+      {
+        "amount": "15000",
+        "user": "0xA530ac2B576eF27C09B7b55C83b3E163D167e9AE",
+        "tx": "0x90af73d7321833fc32445850655a1210f0298845b9222e695e1229801f7a95b0"
+      }
+    ],
+    "withdrawals": [],
+    "users": [
+      {
+        "address": "0xA530ac2B576eF27C09B7b55C83b3E163D167e9AE",
+        "deposits": [
+          {
+            "amount": "15000",
+            "user": "0xA530ac2B576eF27C09B7b55C83b3E163D167e9AE",
+            "tranche_id": 59,
+            "tx": "0x90af73d7321833fc32445850655a1210f0298845b9222e695e1229801f7a95b0"
+          }
+        ],
+        "withdrawals": [],
+        "total_tokens": "15000",
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "15000"
+      }
+    ]
+  },
   {
     "tranche_id": 58,
     "tranche_start": "2023-05-11T00:00:00.000Z",
@@ -48,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": "1979.64045368475",
-    "locked_amount": "6088.8928113908174973875",
+    "total_removed": "2667.900599530005",
+    "locked_amount": "1760.572777247300418465",
     "deposits": [
       {
         "amount": "188",
@@ -238,6 +271,21 @@
         "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
         "tx": "0x47f5bf2c758c5270dd1b6519ac649ddabef8199f8a0bae319e36f8ac5c9c142e"
       },
+      {
+        "amount": "269.870659721775",
+        "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
+        "tx": "0x156ef84c345adecdf7b1c55756b1f4326716d1b0191ce1a208f614fc807ce033"
+      },
+      {
+        "amount": "219.675555560475",
+        "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
+        "tx": "0x682c6453a6c681312a81e15f244e4885c0ceaab35c7dc041c02d536ff42ca62f"
+      },
+      {
+        "amount": "198.713930563005",
+        "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
+        "tx": "0x9cdddebcfa4f7e189e435c3a0b5f69ecc6240d59b4d9f959739458f610d8fa95"
+      },
       {
         "amount": "202.093666077975",
         "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
@@ -311,6 +359,18 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "269.870659721775",
+            "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
+            "tranche_id": 56,
+            "tx": "0x156ef84c345adecdf7b1c55756b1f4326716d1b0191ce1a208f614fc807ce033"
+          },
+          {
+            "amount": "219.675555560475",
+            "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
+            "tranche_id": 56,
+            "tx": "0x682c6453a6c681312a81e15f244e4885c0ceaab35c7dc041c02d536ff42ca62f"
+          },
           {
             "amount": "202.093666077975",
             "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
@@ -337,8 +397,8 @@
           }
         ],
         "total_tokens": "1207.5",
-        "withdrawn_tokens": "597.002068860225",
-        "remaining_tokens": "610.497931139775"
+        "withdrawn_tokens": "1086.548284142475",
+        "remaining_tokens": "120.951715857525"
       },
       {
         "address": "0x33Ce1D9E53AFb7367E34749517C086405a651a95",
@@ -378,6 +438,12 @@
             "tranche_id": 56,
             "tx": "0x47f5bf2c758c5270dd1b6519ac649ddabef8199f8a0bae319e36f8ac5c9c142e"
           },
+          {
+            "amount": "198.713930563005",
+            "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
+            "tranche_id": 56,
+            "tx": "0x9cdddebcfa4f7e189e435c3a0b5f69ecc6240d59b4d9f959739458f610d8fa95"
+          },
           {
             "amount": "195.89040769089",
             "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
@@ -386,8 +452,8 @@
           }
         ],
         "total_tokens": "914.25",
-        "withdrawn_tokens": "624.076855605525",
-        "remaining_tokens": "290.173144394475"
+        "withdrawn_tokens": "822.79078616853",
+        "remaining_tokens": "91.45921383147"
       },
       {
         "address": "0x9573BDF7FfC5519912d293e4D1f750eab2E471E7",
@@ -899,7 +965,7 @@
     "tranche_start": "2023-04-06T00:00:00.000Z",
     "tranche_end": "2023-05-06T00:00:00.000Z",
     "total_added": "14610",
-    "total_removed": "6675.45090157707",
+    "total_removed": "7227.45090157707",
     "locked_amount": "0",
     "deposits": [
       {
@@ -1104,6 +1170,26 @@
         "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",
@@ -1249,10 +1335,17 @@
             "tx": "0xc7736d362d5ffdd16dc26f25047f52fa6238f60837e831b149b6ebb25a0d9281"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "33",
+            "user": "0xBf1AaB792D729fA125e6D7122D4b916a1E1C44B1",
+            "tranche_id": 54,
+            "tx": "0xd2c2f11c150797924c49f6022957d701052268c7335ef3927597fca4f1b544a2"
+          }
+        ],
         "total_tokens": "33",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "33"
+        "withdrawn_tokens": "33",
+        "remaining_tokens": "0"
       },
       {
         "address": "0xB0Dbf35C0918536B62a2FbcCC852bCffDB41d6aF",
@@ -1399,10 +1492,17 @@
             "tx": "0x96b16197328b59556848409bcc4ebf1f71648485fabedde2848461247aa4be32"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "96",
+            "user": "0x6324334064d1d807940191C658d925DA7d323b12",
+            "tranche_id": 54,
+            "tx": "0xd4d9926de15e6dc4992c47e9fbb9d25bf873d7e331524994bb6139a2953ea96a"
+          }
+        ],
         "total_tokens": "96",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "96"
+        "withdrawn_tokens": "96",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x268070d5EEd5b24E34a5F4C17B5482178b18089D",
@@ -1573,10 +1673,17 @@
             "tx": "0x09d7342bca4e0fdc9f5a40e18e402b0328991d0df5da17b834c67b149e270808"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "114",
+            "user": "0x8D416A61bCccf4E6aF5598302BC4e41f97401652",
+            "tranche_id": 54,
+            "tx": "0x619088e473d63826e10d3516619b505cb0a82884a5b8158146ff8ab79307967d"
+          }
+        ],
         "total_tokens": "114",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "114"
+        "withdrawn_tokens": "114",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x9E53F72210479BF46aE7ABF77c48B0d611b3c3dB",
@@ -1714,10 +1821,17 @@
             "tx": "0x8a0328460c26941859c8ce400e7b18d41701fd620535f757f17e4c1d2c930831"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "309",
+            "user": "0xf9c6C5F942B94Db9dedC550956865cf99D743959",
+            "tranche_id": 54,
+            "tx": "0x4fa5d02d920d90835694cbab1e41a66d317b2bc35860d07a5ccd70d12182116b"
+          }
+        ],
         "total_tokens": "309",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "309"
+        "withdrawn_tokens": "309",
+        "remaining_tokens": "0"
       },
       {
         "address": "0xB12Cdb63E38f9a6ff2C0F68aBC3CA9beFCb7148c",
@@ -1860,7 +1974,7 @@
     "tranche_start": "2023-03-06T00:00:00.000Z",
     "tranche_end": "2023-04-06T00:00:00.000Z",
     "total_added": "14099",
-    "total_removed": "3785.49002352036",
+    "total_removed": "4373.49002352036",
     "locked_amount": "0",
     "deposits": [
       {
@@ -2630,6 +2744,16 @@
         "user": "0x2a65Ae527C6Ff4665e048B0E0883c486A7BA4DBc",
         "tx": "0xb0edcc25e422bc3db3ad8027dfdfc0928abd7a8af8957a1699e4cf2dc8cee8f7"
       },
+      {
+        "amount": "558",
+        "user": "0xA7f89FF809549F4577993de3d1B3017241a53F40",
+        "tx": "0x84e5ff587c312b578fa946e2dce386cdf19c7638602b12eceaaab7de563f8394"
+      },
+      {
+        "amount": "30",
+        "user": "0x8D416A61bCccf4E6aF5598302BC4e41f97401652",
+        "tx": "0x6a6dc596ec40beefbe40b32666cbef8ea31d1ce73c0c11f57a1e60f9ea242b8d"
+      },
       {
         "amount": "30",
         "user": "0xBe9F912Ad481C61B653463E8F1D2b2b310D49861",
@@ -3861,10 +3985,17 @@
             "tx": "0xecbb3424e425019a8ebdb9326f662c3520f220fbecdfdaa4770c282001a0f5eb"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "30",
+            "user": "0x8D416A61bCccf4E6aF5598302BC4e41f97401652",
+            "tranche_id": 53,
+            "tx": "0x6a6dc596ec40beefbe40b32666cbef8ea31d1ce73c0c11f57a1e60f9ea242b8d"
+          }
+        ],
         "total_tokens": "30",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "30"
+        "withdrawn_tokens": "30",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x83D7eD53E7CB97b542F1F71f40561d51F8019C8B",
@@ -4446,10 +4577,17 @@
             "tx": "0x46d80a145d2f49ef3152cbfaa6d2bb054deabe21396ab43553a3f076e2db62e1"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "558",
+            "user": "0xA7f89FF809549F4577993de3d1B3017241a53F40",
+            "tranche_id": 53,
+            "tx": "0x84e5ff587c312b578fa946e2dce386cdf19c7638602b12eceaaab7de563f8394"
+          }
+        ],
         "total_tokens": "558",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "558"
+        "withdrawn_tokens": "558",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x363D3d06d70761c34D6EfEB25E409A9549E6970D",
@@ -4907,7 +5045,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "49504.9919953353951513585",
+    "locked_amount": "47902.6878201683513969045",
     "deposits": [
       {
         "amount": "86666.297",
@@ -4973,7 +5111,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "295.23443859381355",
+    "locked_amount": "202.53945996133505",
     "deposits": [
       {
         "amount": "2500",
@@ -5006,7 +5144,7 @@
     "tranche_end": "2023-11-01T00:00:00.000Z",
     "total_added": "15000.000000000000015",
     "total_removed": "0",
-    "locked_amount": "14224.9782986111115142249782986111115",
+    "locked_amount": "13674.853751509662013674853751509662",
     "deposits": [
       {
         "amount": "1.5e-14",
@@ -5048,10 +5186,15 @@
     "tranche_id": 46,
     "tranche_start": "2023-11-01T00:00:00.000Z",
     "tranche_end": "2024-05-01T00:00:00.000Z",
-    "total_added": "7500",
+    "total_added": "22500",
     "total_removed": "0",
-    "locked_amount": "7500",
+    "locked_amount": "22500",
     "deposits": [
+      {
+        "amount": "15000",
+        "user": "0x2539b51EbDE65a75672aBcfE9439a706a99D18D1",
+        "tx": "0x959f5eed214f5376e834c2c20ed2a23a75c4465240c2776452ade80afa11ae2e"
+      },
       {
         "amount": "7500",
         "user": "0xA530ac2B576eF27C09B7b55C83b3E163D167e9AE",
@@ -5060,6 +5203,21 @@
     ],
     "withdrawals": [],
     "users": [
+      {
+        "address": "0x2539b51EbDE65a75672aBcfE9439a706a99D18D1",
+        "deposits": [
+          {
+            "amount": "15000",
+            "user": "0x2539b51EbDE65a75672aBcfE9439a706a99D18D1",
+            "tranche_id": 46,
+            "tx": "0x959f5eed214f5376e834c2c20ed2a23a75c4465240c2776452ade80afa11ae2e"
+          }
+        ],
+        "withdrawals": [],
+        "total_tokens": "15000",
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "15000"
+      },
       {
         "address": "0xA530ac2B576eF27C09B7b55C83b3E163D167e9AE",
         "deposits": [
@@ -5094,7 +5252,7 @@
     "tranche_end": "2023-09-01T00:00:00.000Z",
     "total_added": "17500",
     "total_removed": "0",
-    "locked_amount": "10794.17758026368775",
+    "locked_amount": "10152.36560864532825",
     "deposits": [
       {
         "amount": "12500",
@@ -5360,8 +5518,8 @@
     "tranche_start": "2023-02-01T00:00:00.000Z",
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
-    "total_removed": "18077.0118744",
-    "locked_amount": "17091.10506829343025",
+    "total_removed": "18500.56159815",
+    "locked_amount": "15692.99848449969375",
     "deposits": [
       {
         "amount": "7500",
@@ -5375,6 +5533,16 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "225.00575505",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x0a46fa3cc0154727ae4c7abca97bd7e26e6835018f96cf3a3860a9fcc791b9a4"
+      },
+      {
+        "amount": "198.5439687",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xc25a025176872981def8433ef0982ba306737aaf2cf0867f2259fd19492af2b5"
+      },
       {
         "amount": "164.727209925",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -5553,6 +5721,18 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "225.00575505",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 34,
+            "tx": "0x0a46fa3cc0154727ae4c7abca97bd7e26e6835018f96cf3a3860a9fcc791b9a4"
+          },
+          {
+            "amount": "198.5439687",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 34,
+            "tx": "0xc25a025176872981def8433ef0982ba306737aaf2cf0867f2259fd19492af2b5"
+          },
           {
             "amount": "164.727209925",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -5735,8 +5915,8 @@
           }
         ],
         "total_tokens": "7500",
-        "withdrawn_tokens": "3867.2532036",
-        "remaining_tokens": "3632.7467964"
+        "withdrawn_tokens": "4290.80292735",
+        "remaining_tokens": "3209.19707265"
       },
       {
         "address": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -5780,7 +5960,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "49459.824919096584707505",
+    "locked_amount": "47858.982644879740029465",
     "deposits": [
       {
         "amount": "129999.45",
@@ -5813,7 +5993,7 @@
     "tranche_end": "2024-04-01T00:00:00.000Z",
     "total_added": "54144.7663",
     "total_removed": "0",
-    "locked_amount": "48300.2481374426486922947",
+    "locked_amount": "47301.94373541695517923511",
     "deposits": [
       {
         "amount": "54144.7663",
@@ -5846,7 +6026,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "19807.852061136476024",
+    "locked_amount": "18650.49049340436032",
     "deposits": [
       {
         "amount": "10000",
@@ -6039,7 +6219,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "1773.87763191273475",
+    "locked_amount": "1681.4366121258245",
     "deposits": [
       {
         "amount": "5000",
@@ -7108,7 +7288,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "1709370.7872515768348",
-    "locked_amount": "119547.7788438730317094704",
+    "locked_amount": "83681.9872917193018111752",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -40980,7 +41160,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "715655.108029600523393",
-    "locked_amount": "208204.638696483881349131871",
+    "locked_amount": "153091.4042231713229007715616",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -42372,8 +42552,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
-    "total_removed": "872635.89843522227071852",
-    "locked_amount": "6037967.8664430882362406121449295313314409",
+    "total_removed": "885240.49984321970795352",
+    "locked_amount": "5842539.8756085922637222718130454678926737",
     "deposits": [
       {
         "amount": "16249.93",
@@ -42887,6 +43067,31 @@
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
         "tx": "0x4301fcb38d16c1f6aa4a93a18a277a4e77eb3b4565bf98ca6218f6598b78b90b"
       },
+      {
+        "amount": "739.2861718946715",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x989d22d5ba66353cb132b5643100a99e78133e5d40aef1ac91ed6ab0a2290299"
+      },
+      {
+        "amount": "2195.39447101000955",
+        "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": "10150.87581603206683",
         "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -45067,6 +45272,18 @@
             "tranche_id": 2,
             "tx": "0x4301fcb38d16c1f6aa4a93a18a277a4e77eb3b4565bf98ca6218f6598b78b90b"
           },
+          {
+            "amount": "739.2861718946715",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x989d22d5ba66353cb132b5643100a99e78133e5d40aef1ac91ed6ab0a2290299"
+          },
+          {
+            "amount": "2186.689752850926125",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0xb048cb2dcdfc30508770a3a112ddbacd63210f740cc887559660522bd506612c"
+          },
           {
             "amount": "913.910324501590625",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -46623,8 +46840,8 @@
           }
         ],
         "total_tokens": "259998.8875",
-        "withdrawn_tokens": "160546.342221561692",
-        "remaining_tokens": "99452.545278438308"
+        "withdrawn_tokens": "163472.318146307289625",
+        "remaining_tokens": "96526.569353692710375"
       },
       {
         "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@@ -46851,6 +47068,18 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "2195.39447101000955",
+            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+            "tranche_id": 2,
+            "tx": "0xa515dafd399b366ba7f510ea6314587eb19e83fa92dbd5c2a212f3541a0cc4ef"
+          },
+          {
+            "amount": "856.50757224183006",
+            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+            "tranche_id": 2,
+            "tx": "0xc8835acd2e148eeaacde2a0df0ecad19c22717c7c51b207fdeac9a1af3f98c88"
+          },
           {
             "amount": "10150.87581603206683",
             "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -47141,8 +47370,8 @@
           }
         ],
         "total_tokens": "150551.801",
-        "withdrawn_tokens": "91577.204932811647",
-        "remaining_tokens": "58974.596067188353"
+        "withdrawn_tokens": "94629.10697606348661",
+        "remaining_tokens": "55922.69402393651339"
       },
       {
         "address": "0x4d982Ab0823fD2f48e934a7be2bb0a5374a26148",
@@ -47362,6 +47591,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "6626.72344",
+            "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
+            "tranche_id": 2,
+            "tx": "0xdedcbf90e8f19c2a732ba2da663f59b5a19ad94800ddca6a3575019f19e9ca20"
+          },
           {
             "amount": "1784.722222",
             "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
@@ -47622,8 +47857,8 @@
           }
         ],
         "total_tokens": "200000",
-        "withdrawn_tokens": "118742.2403",
-        "remaining_tokens": "81257.7597"
+        "withdrawn_tokens": "125368.96374",
+        "remaining_tokens": "74631.03626"
       },
       {
         "address": "0x1b956E6c00E238194B331eddEFF72Cb5f28A8d01",
@@ -59148,8 +59383,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
-    "total_removed": "44544.1737890903416",
-    "locked_amount": "32991.215149911803725776786707268",
+    "total_removed": "45345.4733895423416",
+    "locked_amount": "24258.2081069361612058598496600864",
     "deposits": [
       {
         "amount": "3000",
@@ -65778,6 +66013,41 @@
         "user": "0x3F9E884B459a6AaC3f66b72555611AdE68a7F472",
         "tx": "0x4697229c7f272bd3fc06ecdc1b15143d28e20083e15f1b3cadb3fc80e80af180"
       },
+      {
+        "amount": "186.817193048",
+        "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": "182.662252664",
         "user": "0xb1169C6daAc76bAcaf0D8f87641Fc38fbabe569F",
@@ -70764,10 +71034,23 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "189.696721206",
+            "user": "0xf0d681c15447dCfaa6002f17078944FCe75B5e26",
+            "tranche_id": 5,
+            "tx": "0xed29b9b07eff1d6c43d586e545bf5557390f5c6040924718d0f28968fa34a8d5"
+          },
+          {
+            "amount": "0.005555556",
+            "user": "0xf0d681c15447dCfaa6002f17078944FCe75B5e26",
+            "tranche_id": 5,
+            "tx": "0xca745232557385fff568386375d868633bd9542981dd07a6c471b4633dd5c9b8"
+          }
+        ],
         "total_tokens": "200",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "200"
+        "withdrawn_tokens": "189.702276762",
+        "remaining_tokens": "10.297723238"
       },
       {
         "address": "0x7Cb540c27E6cAD1133a4942293B9293489A2Df19",
@@ -70824,10 +71107,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "189.69504693",
+            "user": "0xC198534Ee3D619770C21FFAF5e9F067F8bbC07FD",
+            "tranche_id": 5,
+            "tx": "0x803ba71987573a0ab20d4da7eb1dc7fe5e2fd8184199f0ee5d7a949b3d9f4e3e"
+          }
+        ],
         "total_tokens": "200",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "200"
+        "withdrawn_tokens": "189.69504693",
+        "remaining_tokens": "10.30495307"
       },
       {
         "address": "0xFFDAE9319517529E0081710bF5A018E06C841eFf",
@@ -71033,10 +71323,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "186.817193048",
+            "user": "0x0003423D0A1858B6Eaf9a67914aBc67cDF989c2F",
+            "tranche_id": 5,
+            "tx": "0x7f120bd664d54bdabddad1ddb7ffdd84fbaa2630f1657289e3a7b11503ec4018"
+          }
+        ],
         "total_tokens": "200",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "200"
+        "withdrawn_tokens": "186.817193048",
+        "remaining_tokens": "13.182806952"
       },
       {
         "address": "0x659ce8E49DA0c872AAC44c70496122044CbcA911",
@@ -71357,6 +71654,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "65.737747336",
+            "user": "0xAc5bd5a3890B12B0da7cF1Ad846F6b8b260B60CC",
+            "tranche_id": 5,
+            "tx": "0x8a4862b1fdacb7e24492397fac234152aae4146d9cca2f0a476e918cbe130af7"
+          },
           {
             "amount": "309.708054284",
             "user": "0xAc5bd5a3890B12B0da7cF1Ad846F6b8b260B60CC",
@@ -71365,8 +71668,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "309.708054284",
-        "remaining_tokens": "90.291945716"
+        "withdrawn_tokens": "375.44580162",
+        "remaining_tokens": "24.55419838"
       },
       {
         "address": "0x71bA18Cb18d7Cd338CF6E911882E717A8dEf8041",
@@ -88549,6 +88852,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "84.673820396",
+            "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
+            "tranche_id": 5,
+            "tx": "0x26941fa486bf2aa16da2748a2326f87c3491c4f6f939f4329bd1eb3171ce6c3d"
+          },
           {
             "amount": "191.520738204",
             "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
@@ -88563,8 +88872,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "293.716882292",
-        "remaining_tokens": "106.283117708"
+        "withdrawn_tokens": "378.390702688",
+        "remaining_tokens": "21.609297312"
       },
       {
         "address": "0x256274a216e0a349dC18cae08Ca45631176AF437",
@@ -88577,6 +88886,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "84.67351598",
+            "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
+            "tranche_id": 5,
+            "tx": "0x891254ca1ea63a87ea7e14c3a985f58a403f4a0baf9fba86582785da6d2ae806"
+          },
           {
             "amount": "191.524581432",
             "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
@@ -88591,8 +88906,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "293.715512428",
-        "remaining_tokens": "106.284487572"
+        "withdrawn_tokens": "378.389028408",
+        "remaining_tokens": "21.610971592"
       },
       {
         "address": "0xB0473C4FeBd722a6d7eE561329d3134030318132",
@@ -88949,7 +89264,7 @@
     "tranche_start": "2021-12-05T00:00:00.000Z",
     "tranche_end": "2022-06-05T00:00:00.000Z",
     "total_added": "171288.42",
-    "total_removed": "70140.5995794947989",
+    "total_removed": "71890.5995794947989",
     "locked_amount": "0",
     "deposits": [
       {
@@ -93174,6 +93489,41 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "250",
+        "user": "0xcAEbd70D80D5aB92Ae5A2E1c92F479298826548C",
+        "tx": "0x7ffbc82e96bb7c796feb548a7ca48a7430a47dae3f2e9de859e6d45ac31a4e6c"
+      },
+      {
+        "amount": "250",
+        "user": "0xac494D6eC2CcA7C9BD1caD0c1D0516F3706c6b7c",
+        "tx": "0x85a5d2a4faa6490fc25e080f09dc4d9b5fb3857d762042ba2dcbc0f04de41e0c"
+      },
+      {
+        "amount": "250",
+        "user": "0x4eE1C5ED78143f298ae4E5E17e538a99E8512db7",
+        "tx": "0xcb7b99dc5240cdcaaed2fae06e9fd8172db0387179fe09b5f1e1cefff16c6025"
+      },
+      {
+        "amount": "250",
+        "user": "0x01E41ffFBcBC9DDA6E2e9e7291cA8AcCE1AF2091",
+        "tx": "0x0af2b3703c268eed4532409b52b6fae066207adf80f9dd2fc17b7aacc40f2879"
+      },
+      {
+        "amount": "250",
+        "user": "0xa9C1CA1E66CB3063352433843521861844A2Fd33",
+        "tx": "0x8fad99b8976fff57a099e59351ae96379ec3041e32ccce144727eea29cfffe59"
+      },
+      {
+        "amount": "250",
+        "user": "0x13A01db15250975cE4f7AddF5C20CC1f5056Fc47",
+        "tx": "0xc4bcffd71245b9f2af79e04fd58740f7b4cce50da80a405403c959563d132f2c"
+      },
+      {
+        "amount": "250",
+        "user": "0x2A6Ea2aBEf3D7d7A76CBeF3c297eE0eF9a86BBA8",
+        "tx": "0x163b699e8a25073ad1ad45c8a8f9b1348eb0b648d3f4bc6f3f64648e0ad726bf"
+      },
       {
         "amount": "250",
         "user": "0x0E3407C9A94effa675471afe7A9D37e687C32141",
@@ -95516,10 +95866,17 @@
             "tx": "0x87b7e454992157e175f824cbd5cbfd068ce890b8603edcb70174bae9b5c4afc8"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "250",
+            "user": "0x13A01db15250975cE4f7AddF5C20CC1f5056Fc47",
+            "tranche_id": 6,
+            "tx": "0xc4bcffd71245b9f2af79e04fd58740f7b4cce50da80a405403c959563d132f2c"
+          }
+        ],
         "total_tokens": "250",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "250"
+        "withdrawn_tokens": "250",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x7b4127D262acC0Ff3dB2D0521d1F1f3b602243C2",
@@ -98032,10 +98389,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "250",
+            "user": "0x4eE1C5ED78143f298ae4E5E17e538a99E8512db7",
+            "tranche_id": 6,
+            "tx": "0xcb7b99dc5240cdcaaed2fae06e9fd8172db0387179fe09b5f1e1cefff16c6025"
+          }
+        ],
         "total_tokens": "250",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "250"
+        "withdrawn_tokens": "250",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x1dC24e9601e40013a12CB9976a519860c4eDF359",
@@ -98077,10 +98441,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "250",
+            "user": "0x01E41ffFBcBC9DDA6E2e9e7291cA8AcCE1AF2091",
+            "tranche_id": 6,
+            "tx": "0x0af2b3703c268eed4532409b52b6fae066207adf80f9dd2fc17b7aacc40f2879"
+          }
+        ],
         "total_tokens": "250",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "250"
+        "withdrawn_tokens": "250",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x6EE016F4512C910b401B18087BBAC15412dD97cA",
@@ -98414,10 +98785,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "250",
+            "user": "0xac494D6eC2CcA7C9BD1caD0c1D0516F3706c6b7c",
+            "tranche_id": 6,
+            "tx": "0x85a5d2a4faa6490fc25e080f09dc4d9b5fb3857d762042ba2dcbc0f04de41e0c"
+          }
+        ],
         "total_tokens": "250",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "250"
+        "withdrawn_tokens": "250",
+        "remaining_tokens": "0"
       },
       {
         "address": "0xa7137DA63B53138A6DCdC9D9a010F42F951F1113",
@@ -98459,10 +98837,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "250",
+            "user": "0xa9C1CA1E66CB3063352433843521861844A2Fd33",
+            "tranche_id": 6,
+            "tx": "0x8fad99b8976fff57a099e59351ae96379ec3041e32ccce144727eea29cfffe59"
+          }
+        ],
         "total_tokens": "250",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "250"
+        "withdrawn_tokens": "250",
+        "remaining_tokens": "0"
       },
       {
         "address": "0xbCd93996629B0fFA1DfaE74Bb6e107ddB1CE7934",
@@ -98489,10 +98874,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "250",
+            "user": "0xcAEbd70D80D5aB92Ae5A2E1c92F479298826548C",
+            "tranche_id": 6,
+            "tx": "0x7ffbc82e96bb7c796feb548a7ca48a7430a47dae3f2e9de859e6d45ac31a4e6c"
+          }
+        ],
         "total_tokens": "250",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "250"
+        "withdrawn_tokens": "250",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x64Aac7Cb63317DE77C331686E0b2dAA41303Adf0",
@@ -98571,10 +98963,17 @@
             "tx": "0x1c2c084e3efafb2ffa09c0b259bd229cce0d6da04dd092d911c7e6136a7ac8a9"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "250",
+            "user": "0x2A6Ea2aBEf3D7d7A76CBeF3c297eE0eF9a86BBA8",
+            "tranche_id": 6,
+            "tx": "0x163b699e8a25073ad1ad45c8a8f9b1348eb0b648d3f4bc6f3f64648e0ad726bf"
+          }
+        ],
         "total_tokens": "250",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "250"
+        "withdrawn_tokens": "250",
+        "remaining_tokens": "0"
       },
       {
         "address": "0x5D84C52FEf44a84298422f0F87147F80145e2043",

apps/trading-e2e/cypress.config.js

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

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

@@ -6,6 +6,10 @@ const row = 'key-value-table-row';
 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(() => {
@@ -28,7 +32,11 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
 
   it('show oracle banner', () => {
     cy.getByTestId(marketTitle).contains('Oracle').click();
-    cy.getByTestId('oracle-status').should('contain.text', 'COMPROMISED');
+    cy.getByTestId(oracleBannerStatus).should('contain.text', 'COMPROMISED');
+    cy.getByTestId(oracleBannerDialogTrigger)
+      .should('contain.text', 'Show more')
+      .click();
+    cy.getByTestId(oracleFullProfile).should('exist');
   });
 
   it('current fees displayed', () => {
@@ -181,9 +189,19 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     cy.getByTestId(marketTitle).contains('Oracle').click();
 
     cy.getByTestId(accordionContent)
-      .getByTestId('provider-name')
+      .getByTestId(providerName)
       .and('contain', 'Another oracle');
 
+    cy.getByTestId(providerName).should('be.visible').click();
+
+    cy.getByTestId('dialog-content')
+      .eq(1)
+      .within(() => {
+        cy.getByTestId('block-explorer-link').contains('Block explorer');
+        cy.getByTestId('github-link').contains('Oracle repository');
+      });
+    cy.getByTestId('dialog-close').click();
+
     cy.getByTestId(accordionContent)
       .getByTestId('verified-proofs')
       .and('contain', '1');

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

@@ -0,0 +1,105 @@
+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('popover-trigger').should('not.be.empty');
+      cy.getByTestId('header-title').should('not.be.empty');
     });
 
     it('must see market expiry', () => {

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

@@ -4,7 +4,6 @@ import { marketsQuery } from '@vegaprotocol/mock';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 
 const dialogCloseBtn = 'dialog-close';
-const popoverTrigger = 'popover-trigger';
 
 describe('markets table', { tags: '@smoke' }, () => {
   beforeEach(() => {
@@ -31,36 +30,6 @@ 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',
@@ -253,15 +222,3 @@ 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-deal-ticket-order.cy.ts

@@ -16,6 +16,10 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
     cy.wait('@Markets');
   });
 
+  beforeEach(() => {
+    cy.mockTradingPage();
+  });
+
   describe('limit order', () => {
     before(() => {
       cy.getByTestId(toggleLimit).click();
@@ -98,7 +102,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
             'have.text',
             'Total margin available'
           );
-          cy.get('.text-neutral-500').should('have.text', '~100,000.01 tDAI');
+          cy.get('.text-neutral-500').should('have.text', '100,000.01 tDAI');
         });
     });
   });

apps/trading-e2e/src/integration/trading-deal-ticket-submit-account.cy.ts

@@ -1,10 +1,6 @@
 import * as Schema from '@vegaprotocol/types';
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import {
-  accountsQuery,
-  amendGeneralAccountBalance,
-  estimateOrderQuery,
-} from '@vegaprotocol/mock';
+import { accountsQuery, amendGeneralAccountBalance } from '@vegaprotocol/mock';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
 
@@ -44,13 +40,10 @@ describe(
         cy.setVegaWallet();
         cy.mockTradingPage();
         const accounts = accountsQuery();
-        amendGeneralAccountBalance(accounts, 'market-0', '100000000');
+        amendGeneralAccountBalance(accounts, 'market-0', '1');
         cy.mockGQL((req) => {
           aliasGQLQuery(req, 'Accounts', accounts);
         });
-        cy.mockGQL((req) => {
-          aliasGQLQuery(req, 'EstimateOrder', estimateOrderQuery());
-        });
         cy.mockSubscription();
         cy.visit('/#/markets/market-0');
         cy.wait('@Markets');
@@ -66,7 +59,7 @@ describe(
         );
         cy.getByTestId('dealticket-warning-margin').should(
           'contain.text',
-          'You may not have enough margin available to open this position. 2,354.72283 tDAI is currently required. You have only 1,000.01 tDAI available.'
+          'You may not have enough margin available to open this position. 5.00 tDAI is currently required. You have only 0.01001 tDAI available.'
         );
         cy.getByTestId('deal-ticket-deposit-dialog-button').click();
         cy.getByTestId('dialog-content')

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

@@ -291,12 +291,58 @@ 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"]')
@@ -337,6 +383,7 @@ 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/integration/wallet-eth.cy.ts

@@ -17,7 +17,6 @@ describe('ethereum wallet', { tags: '@smoke', testIsolation: true }, () => {
   it('can connect', () => {
     // 0004-EWAL-001
 
-    cy.wait('@NetworkParams');
     cy.getByTestId('Deposits').click();
     cy.getByTestId('deposit-button').click();
     cy.getByTestId('connect-eth-wallet-btn').click();
@@ -30,7 +29,6 @@ describe('ethereum wallet', { tags: '@smoke', testIsolation: true }, () => {
   it('should see QR code modal for WalletConnect', () => {
     // 0004-EWAL-003
 
-    cy.wait('@NetworkParams');
     cy.getByTestId('Deposits').click();
     cy.getByTestId('deposit-button').click();
     cy.getByTestId('connect-eth-wallet-btn').click();

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/oracles';
+import type { Provider, Status } from '@vegaprotocol/market-info';
 import {
   accountsQuery,
   assetQuery,
@@ -10,7 +10,7 @@ import {
   chainIdQuery,
   chartQuery,
   depositsQuery,
-  estimateOrderQuery,
+  estimateFeesQuery,
   marginsQuery,
   marketCandlesQuery,
   marketDataQuery,
@@ -22,11 +22,14 @@ import {
   networkParamsQuery,
   nodeGuardQuery,
   ordersQuery,
+  estimatePositionQuery,
   positionsQuery,
   proposalListQuery,
   statisticsQuery,
   tradesQuery,
   withdrawalsQuery,
+  protocolUpgradeProposalsQuery,
+  blockStatisticsQuery,
 } from '@vegaprotocol/mock';
 import type { PartialDeep } from 'type-fest';
 import type { MarketDataQuery, MarketsQuery } from '@vegaprotocol/market-list';
@@ -157,9 +160,16 @@ const mockTradingPage = (
   aliasGQLQuery(req, 'Candles', candlesQuery());
   aliasGQLQuery(req, 'Withdrawals', withdrawalsQuery());
   aliasGQLQuery(req, 'NetworkParams', networkParamsQuery());
-  aliasGQLQuery(req, 'EstimateOrder', estimateOrderQuery());
+  aliasGQLQuery(req, 'EstimateFees', estimateFeesQuery());
+  aliasGQLQuery(req, 'EstimatePosition', estimatePositionQuery());
   aliasGQLQuery(req, 'ProposalsList', proposalListQuery());
   aliasGQLQuery(req, 'Deposits', depositsQuery());
+  aliasGQLQuery(
+    req,
+    'ProtocolUpgradeProposals',
+    protocolUpgradeProposalsQuery()
+  );
+  aliasGQLQuery(req, 'BlockStatistics', blockStatisticsQuery());
 };
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

apps/trading/__mocks__/react-markdown.js

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

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

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

@@ -0,0 +1,58 @@
+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/header-stats.tsx

@@ -5,13 +5,7 @@ import { MarketProposalNotification } from '@vegaprotocol/proposals';
 import type { Market } from '@vegaprotocol/market-list';
 import { getExpiryDate, getMarketExpiryDate } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-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 { HeaderStat } from '../../components/header';
 import { MarketMarkPrice } from '../../components/market-mark-price';
 import { Last24hPriceChange, Last24hVolume } from '@vegaprotocol/market-info';
 import { MarketState } from '../../components/market-state';
@@ -19,102 +13,90 @@ import { HeaderStatMarketTradingMode } from '../../components/market-trading-mod
 import { MarketLiquiditySupplied } from '../../components/liquidity-supplied';
 import { MarketState as State } from '@vegaprotocol/types';
 
-interface TradeMarketHeaderProps {
+interface HeaderStatsProps {
   market: Market | null;
-  onSelect: (marketId: string, metaKey?: boolean) => void;
 }
 
-export const TradeMarketHeader = ({
-  market,
-  onSelect,
-}: TradeMarketHeaderProps) => {
+export const HeaderStats = ({ market }: HeaderStatsProps) => {
   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 (
-    <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"
+    <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"
         >
-          <div>
-            <ButtonLink
-              onClick={(e) => {
-                openAssetDetailsDialog(asset.id, e.target as HTMLElement);
-              }}
+          <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"
             >
-              {asset.symbol}
-            </ButtonLink>
-          </div>
-        </HeaderStat>
-      ) : null}
-      <MarketLiquiditySupplied
-        marketId={market?.id}
-        assetDecimals={asset?.decimals || 0}
-      />
-      <MarketProposalNotification marketId={market?.id} />
-    </Header>
+              <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>
   );
 };
 

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

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

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

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

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

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

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

@@ -0,0 +1,76 @@
+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,120 +1,37 @@
-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 { memo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { LayoutPriority } from 'allotment';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
-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 { AccountsContainer } from '../../components/accounts-container';
-import type { Market } from '@vegaprotocol/market-list';
-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 { t } from '@vegaprotocol/i18n';
+import { OracleBanner } from '@vegaprotocol/market-info';
+import type { Market } from '@vegaprotocol/market-list';
+import { Filter } from '@vegaprotocol/orders';
 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';
-
-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;
+import { TradingViews } from './trade-views';
+import { MarketSelector } from './market-selector';
+import { HeaderStats } from './header-stats';
 
 interface TradeGridProps {
   market: Market | null;
@@ -410,18 +327,57 @@ const MainGrid = memo(
 );
 MainGrid.displayName = 'MainGrid';
 
-export const TradeGrid = ({
-  market,
-  onSelect,
-  pinnedAsset,
-}: TradeGridProps) => {
+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,
+  });
+
   return (
-    <div className="h-full grid grid-rows-[min-content_1fr]">
-      <div>
-        <TradeMarketHeader market={market} onSelect={onSelect} />
+    <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">
         <OracleBanner marketId={market?.id || ''} />
       </div>
-      <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
+      {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>
     </div>
   );
 };
@@ -439,88 +395,3 @@ 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-panels.tsx

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

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

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

@@ -0,0 +1,82 @@
+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/oracles';
-import { OracleSpecDataConnectionDocument } from '@vegaprotocol/oracles';
+import type { OracleSpecDataConnectionQuery } from '@vegaprotocol/market-info';
+import { OracleSpecDataConnectionDocument } from '@vegaprotocol/market-info';
 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/oracles';
-import { OracleSpecDataConnectionDocument } from '@vegaprotocol/oracles';
+import type { OracleSpecDataConnectionQuery } from '@vegaprotocol/market-info';
+import { OracleSpecDataConnectionDocument } from '@vegaprotocol/market-info';
 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/oracles';
+import { useOracleSpecBindingData } from '@vegaprotocol/market-info';
 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 { COG } from '@blueprintjs/icons/src/generated/iconNames';
+import { IconNames } from '@blueprintjs/icons';
 
 export const SettingsButton = ({ withMobile }: { withMobile?: boolean }) => {
   return (
@@ -9,7 +9,7 @@ export const SettingsButton = ({ withMobile }: { withMobile?: boolean }) => {
       {withMobile ? (
         t('Settings')
       ) : (
-        <Icon name={COG} className="!align-middle" />
+        <Icon name={IconNames.COG} className="!align-middle" />
       )}
     </NavigationLink>
   );

apps/trading/components/banner/index.tsx

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

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

@@ -1,45 +0,0 @@
-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 text-neutral-500 dark:text-neutral-400';
+    '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';
   const itemHeading = 'text-black dark:text-white';
 
   return (
@@ -72,7 +72,7 @@ export const HeaderTitle = ({
   secondaryContent: ReactNode;
 }) => {
   return (
-    <div className="text-left">
+    <div className="text-left" data-testid="header-title">
       <div className="text-sm md:text-md lg:text-lg whitespace-nowrap leading-4">
         {primaryContent}
       </div>

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

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

@@ -75,7 +75,7 @@ export const Navbar = ({
           </NavigationLink>
         </NavigationItem>
         <NavigationItem>
-          <NavigationLink data-testid="Trading" to={tradingPath}>
+          <NavigationLink data-testid="Trading" to={tradingPath} end>
             {t('Trading')}
           </NavigationLink>
         </NavigationItem>

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

@@ -1,3 +1,2 @@
 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, signedNumberCssClass } from '@vegaprotocol/datagrid';
+import { PriceCell } 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,187 +341,3 @@ 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,7 +1,6 @@
 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,
@@ -62,23 +61,3 @@ 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

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

@@ -1,214 +0,0 @@
-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/pages/_app.page.tsx

@@ -81,7 +81,7 @@ function AppBody({ Component }: AppProps) {
 
   const gridClasses = classNames(
     'h-full relative z-0 grid',
-    'grid-rows-[repeat(3,min-content),1fr]'
+    'grid-rows-[repeat(3,min-content),minmax(0,1fr)]'
   );
 
   return (
@@ -93,7 +93,7 @@ function AppBody({ Component }: AppProps) {
       <Title />
       <div className={gridClasses}>
         <AnnouncementBanner />
-        <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'} />
+        <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
         <div data-testid="banners">
           <ProtocolUpgradeProposalNotification
             mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}

apps/trading/pages/styles.css

@@ -127,3 +127,24 @@ html [data-theme='light'] {
 .ag-theme-balham .ag-row.no-hover:hover {
   background: var(--ag-background-color);
 }
+
+.virtualized-list {
+  /* Works on Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #999 #333;
+}
+
+/* Works on Chrome, Edge, and Safari */
+.virtualized-list::-webkit-scrollbar {
+  width: 6px;
+  background-color: #999;
+}
+
+.virtualized-list::-webkit-scrollbar-thumb {
+  width: 6px;
+  background-color: #333;
+}
+.virtualized-list::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+  background-color: #999;
+}

docker/dist.Dockerfile

@@ -1,6 +0,0 @@
-FROM --platform=amd64 nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a116c34cc7241532d0d94198fb2c9629
-EXPOSE 80
-WORKDIR /usr/share/nginx/html
-COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
-RUN rm -rf /usr/share/nginx/html/*
-COPY ./dist-result/ /usr/share/nginx/html/

docker/ipfs.Dockerfile

@@ -1,29 +0,0 @@
-# Build container
-ARG NODE_VERSION
-FROM --platform=amd64 node:${NODE_VERSION}-alpine3.16 as build
-WORKDIR /app
-# Argument to allow building of different apps
-ARG APP
-ARG ENV_NAME=""
-RUN apk add --update --no-cache \
-  python3 \
-  make \
-  gcc \
-  g++
-COPY . ./
-RUN yarn --network-timeout 100000 --pure-lockfile
-# work around for different build process in trading
-RUN sh docker/docker-build.sh
-
-# Server environment
-# if this fails you need to docker pull nginx:1.23-alpine and pin new SHA
-# this is to ensure that we run always same version of alpine to make sure ipfs is indempotent
-FROM --platform=amd64 nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a116c34cc7241532d0d94198fb2c9629
-# configuration of system
-EXPOSE 80
-# Copy dist
-WORKDIR /usr/share/nginx/html
-COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=build /app/dist/apps/${APP}/* /usr/share/nginx/html
-RUN apk add --no-cache go-ipfs; ipfs init && echo "$(ipfs add -rQ .)" > /ipfs-hash; apk del go-ipfs

docker/node-inside-docker.Dockerfile

@@ -27,5 +27,5 @@ RUN rm -rf /usr/share/nginx/html/*
 COPY --from=build /app/dist/apps/${APP}/* /usr/share/nginx/html
 RUN apk add --no-cache go-ipfs==0.16.0-r6 \
       && ipfs init \
-      && echo "$(ipfs add -rwQ /usr/share/nginx/html)" > /ipfs-hash \
+      && echo "$(ipfs add -rQ /usr/share/nginx/html)" > /ipfs-hash \
       && echo "ipfs hash of this build: $(cat /ipfs-hash)"

docker/node-outside-docker.Dockerfile

@@ -5,6 +5,6 @@ RUN rm -rf /usr/share/nginx/html/*
 COPY ./dist-result/ /usr/share/nginx/html/
 RUN apk add --no-cache go-ipfs==0.16.0-r6 \
       && ipfs init \
-      && echo "$(ipfs add -rwQ /usr/share/nginx/html)" > /ipfs-hash \
+      && echo "$(ipfs add -rQ /usr/share/nginx/html)" > /ipfs-hash \
       && echo "ipfs hash of this build: $(cat /ipfs-hash)"
 

libs/accounts/src/lib/accounts-table.tsx

@@ -316,7 +316,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                               onClickDeposit && onClickDeposit(data.asset.id);
                             }}
                           >
-                            <span>
+                            <span className="flex gap-2">
                               <VegaIcon
                                 name={VegaIconNames.DEPOSIT}
                                 size={16}
@@ -331,7 +331,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                               onClickWithdraw && onClickWithdraw(data.asset.id)
                             }
                           >
-                            <span>
+                            <span className="flex gap-2">
                               <VegaIcon
                                 name={VegaIconNames.WITHDRAW}
                                 size={16}
@@ -347,7 +347,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                               setRow(data);
                             }}
                           >
-                            <span>
+                            <span className="flex gap-2">
                               <VegaIcon
                                 name={VegaIconNames.BREAKDOWN}
                                 size={16}

libs/accounts/src/lib/use-account-balance.tsx

@@ -33,9 +33,9 @@ export const useAccountBalance = (assetId?: string) => {
 
   return useMemo(
     () => ({
-      accountBalance,
-      accountDecimals,
+      accountBalance: pubKey ? accountBalance : '',
+      accountDecimals: pubKey ? accountDecimals : null,
     }),
-    [accountBalance, accountDecimals]
+    [accountBalance, accountDecimals, pubKey]
   );
 };

libs/accounts/src/lib/use-market-account-balance.tsx

@@ -32,9 +32,9 @@ export const useMarketAccountBalance = (marketId: string) => {
 
   return useMemo(
     () => ({
-      accountBalance,
-      accountDecimals,
+      accountBalance: pubKey ? accountBalance : '',
+      accountDecimals: pubKey ? accountDecimals : null,
     }),
-    [accountBalance, accountDecimals]
+    [accountBalance, accountDecimals, pubKey]
   );
 };

libs/cypress/mock.ts

@@ -12,16 +12,19 @@ export * from '../fills/src/lib/fills.mock';
 export * from '../proposals/src/lib/proposals-data-provider/proposals.mock';
 export * from '../ledger/src/lib/ledger-entries.mock';
 export * from '../market-depth/src/lib/market-depth.mock';
-export * from '../market-info/src/components/market-info/market-info.mock';
+export * from '../market-info/src/lib/components/market-info/market-info.mock';
 export * from '../market-list/src/lib/market-candles.mock';
 export * from '../market-list/src/lib/market-data.mock';
 export * from '../market-list/src/lib/markets-candles.mock';
 export * from '../market-list/src/lib/markets-data.mock';
 export * from '../market-list/src/lib/markets.mock';
-export * from '../oracles/src/lib/oracle-spec-data-connection.mock';
+export * from '../market-info/src/lib/oracle-spec-data-connection.mock';
 export * from '../orders/src/lib/components/order-data-provider/orders.mock';
 export * from '../positions/src/lib/positions.mock';
 export * from '../network-parameters/src/network-params.mock';
 export * from '../wallet/src/connect-dialog/chain-id.mock';
+export * from '../positions/src/lib/estimate-position.mock';
 export * from '../trades/src/lib/trades.mock';
 export * from '../withdraws/src/lib/withdrawal.mock';
+export * from '../proposals/src/lib/protocol-upgrade-proposals/protocol-statistics-proposals.mock';
+export * from '../proposals/src/lib/protocol-upgrade-proposals/block-statistics.mock';

libs/cypress/src/lib/commands/validators-self-delegate.ts

@@ -1,4 +1,6 @@
+import { gql } from 'graphql-request';
 import { selfDelegate } from '../capsule/self-delegate';
+import { requestGQL, setGraphQLEndpoint } from '../capsule/request';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -19,112 +21,143 @@ export const addValidatorsSelfDelegate = () => {
       vegaUrl: Cypress.env('VEGA_URL'),
       faucetUrl: Cypress.env('FAUCET_URL'),
     };
+    setGraphQLEndpoint(config.vegaUrl);
+    cy.wrap(getStakedByOperator()).as('selfStakeAmount');
+    cy.get('@selfStakeAmount').then((selfStakeAmount) => {
+      if (String(selfStakeAmount) == '0') {
+        // Get node wallet recovery phrases
+        cy.exec('vegacapsule nodes ls --home-path ~/.vegacapsule/testnet/')
+          .its('stdout')
+          .then((result) => {
+            const obj = JSON.parse(result);
+            console.log(obj);
+            cy.writeFile(
+              './src/fixtures/wallet/node0RecoveryPhrase',
+              obj['testnet-nodeset-validators-0-validator'].Vega.NodeWalletInfo
+                .VegaWalletRecoveryPhrase
+            );
+            cy.writeFile(
+              './src/fixtures/wallet/node1RecoveryPhrase',
+              obj['testnet-nodeset-validators-1-validator'].Vega.NodeWalletInfo
+                .VegaWalletRecoveryPhrase
+            );
+            cy.wrap(
+              obj['testnet-nodeset-validators-0-validator'].Vega.NodeWalletInfo
+                .VegaWalletPublicKey
+            ).as('node0PubKey');
+            cy.wrap(
+              obj['testnet-nodeset-validators-1-validator'].Vega.NodeWalletInfo
+                .VegaWalletPublicKey
+            ).as('node1PubKey');
 
-    // Get node wallet recovery phrases
-    cy.exec('vegacapsule nodes ls --home-path ~/.vegacapsule/testnet/')
-      .its('stdout')
-      .then((result) => {
-        const obj = JSON.parse(result);
-        console.log(obj);
-        cy.writeFile(
-          './src/fixtures/wallet/node0RecoveryPhrase',
-          obj['testnet-nodeset-validators-0-validator'].Vega.NodeWalletInfo
-            .VegaWalletRecoveryPhrase
+            cy.wrap(
+              obj['testnet-nodeset-validators-0-validator'].Vega.NodeWalletInfo
+                .VegaWalletID
+            ).as('node0Id');
+            cy.wrap(
+              obj['testnet-nodeset-validators-1-validator'].Vega.NodeWalletInfo
+                .VegaWalletID
+            ).as('node1Id');
+          });
+
+        // Import node wallets
+        cy.exec(
+          'vega wallet import -w node0_wallet --recovery-phrase-file ./src/fixtures/wallet/node0RecoveryPhrase -p ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
         );
-        cy.writeFile(
-          './src/fixtures/wallet/node1RecoveryPhrase',
-          obj['testnet-nodeset-validators-1-validator'].Vega.NodeWalletInfo
-            .VegaWalletRecoveryPhrase
+        cy.exec(
+          'vega wallet import -w node1_wallet --recovery-phrase-file ./src/fixtures/wallet/node1RecoveryPhrase -p ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
         );
-        cy.wrap(
-          obj['testnet-nodeset-validators-0-validator'].Vega.NodeWalletInfo
-            .VegaWalletPublicKey
-        ).as('node0PubKey');
-        cy.wrap(
-          obj['testnet-nodeset-validators-1-validator'].Vega.NodeWalletInfo
-            .VegaWalletPublicKey
-        ).as('node1PubKey');
 
-        cy.wrap(
-          obj['testnet-nodeset-validators-0-validator'].Vega.NodeWalletInfo
-            .VegaWalletID
-        ).as('node0Id');
-        cy.wrap(
-          obj['testnet-nodeset-validators-1-validator'].Vega.NodeWalletInfo
-            .VegaWalletID
-        ).as('node1Id');
-      });
+        // Initialise api token
+        cy.exec(
+          'vega wallet api-token init --home ~/.vegacapsule/testnet/wallet --passphrase-file ./src/fixtures/wallet/passphrase'
+        );
 
-    // Import node wallets
-    cy.exec(
-      'vega wallet import -w node0_wallet --recovery-phrase-file ./src/fixtures/wallet/node0RecoveryPhrase -p ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
-    );
-    cy.exec(
-      'vega wallet import -w node1_wallet --recovery-phrase-file ./src/fixtures/wallet/node1RecoveryPhrase -p ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
-    );
+        // Generate api tokens for wallets
+        cy.exec(
+          'vega wallet api-token generate --wallet-name node0_wallet --tokens-passphrase-file ./src/fixtures/wallet/passphrase  --wallet-passphrase-file ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
+        )
+          .its('stdout')
+          .then((result) => {
+            const apiToken = result.match('[a-zA-Z0-9]{64}');
+            if (apiToken) {
+              cy.wrap(apiToken[0]).as('node0ApiToken');
+            }
+          });
 
-    // Initialise api token
-    cy.exec(
-      'vega wallet api-token init --home ~/.vegacapsule/testnet/wallet --passphrase-file ./src/fixtures/wallet/passphrase'
-    );
+        cy.exec(
+          'vega wallet api-token generate --wallet-name node1_wallet --tokens-passphrase-file ./src/fixtures/wallet/passphrase  --wallet-passphrase-file ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
+        )
+          .its('stdout')
+          .then((result) => {
+            const apiToken = result.match('[a-zA-Z0-9]{64}');
+            if (apiToken) {
+              cy.wrap(apiToken[0]).as('node1ApiToken');
+            }
+          });
 
-    // Generate api tokens for wallets
-    cy.exec(
-      'vega wallet api-token generate --wallet-name node0_wallet --tokens-passphrase-file ./src/fixtures/wallet/passphrase  --wallet-passphrase-file ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
-    )
-      .its('stdout')
-      .then((result) => {
-        const apiToken = result.match('[a-zA-Z0-9]{64}');
-        if (apiToken) {
-          cy.wrap(apiToken[0]).as('node0ApiToken');
-        }
-      });
+        cy.updateCapsuleMultiSig();
+        cy.highlight('Validators self-delegating');
 
-    cy.exec(
-      'vega wallet api-token generate --wallet-name node1_wallet --tokens-passphrase-file ./src/fixtures/wallet/passphrase  --wallet-passphrase-file ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet'
-    )
-      .its('stdout')
-      .then((result) => {
-        const apiToken = result.match('[a-zA-Z0-9]{64}');
-        if (apiToken) {
-          cy.wrap(apiToken[0]).as('node1ApiToken');
-        }
-      });
-
-    cy.updateCapsuleMultiSig();
-    cy.highlight('Validators self-delegating');
-
-    // Self delegating Node 0 wallet
-    cy.get('@node0PubKey').then((node0PubKey) => {
-      cy.get('@node0ApiToken').then((node0ApiToken) => {
-        cy.get('@node0Id').then((node0Id) => {
-          cy.wrap(
-            selfDelegate(
-              config,
-              String(node0PubKey),
-              String(node0ApiToken),
-              String(node0Id)
-            ),
-            { timeout: 60000 }
-          );
-          // Self delegating Node 1 wallet
-          cy.get('@node1PubKey').then((node1PubKey) => {
-            cy.get('@node1ApiToken').then((node1ApiToken) => {
-              cy.get('@node1Id').then((node1Id) => {
-                cy.wrap(
-                  selfDelegate(
-                    config,
-                    String(node1PubKey),
-                    String(node1ApiToken),
-                    String(node1Id)
-                  ),
-                  { timeout: 60000 }
-                );
+        // Self delegating Node 0 wallet
+        cy.get('@node0PubKey').then((node0PubKey) => {
+          cy.get('@node0ApiToken').then((node0ApiToken) => {
+            cy.get('@node0Id').then((node0Id) => {
+              cy.wrap(
+                selfDelegate(
+                  config,
+                  String(node0PubKey),
+                  String(node0ApiToken),
+                  String(node0Id)
+                ),
+                { timeout: 60000 }
+              );
+              // Self delegating Node 1 wallet
+              cy.get('@node1PubKey').then((node1PubKey) => {
+                cy.get('@node1ApiToken').then((node1ApiToken) => {
+                  cy.get('@node1Id').then((node1Id) => {
+                    cy.wrap(
+                      selfDelegate(
+                        config,
+                        String(node1PubKey),
+                        String(node1ApiToken),
+                        String(node1Id)
+                      ),
+                      { timeout: 60000 }
+                    );
+                  });
+                });
               });
             });
           });
         });
-      });
+      }
     });
   });
 };
+
+async function getStakedByOperator() {
+  const query = gql`
+    query ExplorerNodes {
+      nodesConnection {
+        edges {
+          node {
+            stakedByOperator
+          }
+        }
+      }
+    }
+  `;
+
+  const res = await requestGQL<{
+    nodesConnection: {
+      edges: Array<{
+        node: {
+          stakedByOperator: string;
+        };
+      }>;
+    };
+  }>(query);
+
+  return res.nodesConnection.edges[0].node.stakedByOperator;
+}

libs/cypress/src/lib/mock-gql.ts

@@ -17,7 +17,12 @@ const hasOperationName = (
   operationName: string
 ) => {
   const { body } = req;
-  return 'operationName' in body && body.operationName === operationName;
+  return (
+    typeof body === 'object' &&
+    body !== null &&
+    'operationName' in body &&
+    body.operationName === operationName
+  );
 };
 
 export function addMockGQLCommand() {

libs/cypress/src/lib/mock-ws.ts

@@ -20,8 +20,12 @@ const mockSocketServer = Cypress.env('VEGA_URL')
   : null;
 
 // DO NOT REMOVE: PASSTHROUGH for walletconnect
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const relayServer = new Server('wss://relay.walletconnect.com', {
+new Server('wss://relay.walletconnect.com', {
+  mock: false,
+});
+
+// DO NOT REMOVE: PASSTHROUGH for hot module reload
+new Server('ws://localhost:4200/_next/webpack-hmr', {
   mock: false,
 });
 

libs/datagrid/src/lib/ag-grid/use-column-sizes.ts

@@ -97,7 +97,7 @@ export const useColumnSizes = ({
   const setSizes = useCallback(
     (apiEvent: GridReadyEvent | GridSizeChangedEvent) => {
       if (!storeKey || !Object.keys(sizes).length || !widthRef.current) {
-        apiEvent.api.sizeColumnsToFit();
+        apiEvent?.api.sizeColumnsToFit();
       } else {
         const recalculatedSizes = recalculateSizes(sizes);
         const newSizes = Object.entries(recalculatedSizes).map(

libs/datagrid/src/lib/cells/order-type-cell.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useCallback } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 
 interface OrderTypeCellProps {
   value?: Schema.OrderType;
@@ -23,7 +24,15 @@ export const OrderTypeCell = ({
     }
     if (!value) return '-';
     if (order?.peggedOrder) {
-      return t('Pegged');
+      const reference =
+        Schema.PeggedReferenceMapping[order.peggedOrder?.reference];
+      // the offset (e.g. + 0.001 for a Sell, or -1231.023 for a Buy)
+      const side = order.side === Schema.Side.SIDE_BUY ? '-' : '+';
+      const offset = addDecimalsFormatNumber(
+        order.peggedOrder?.offset,
+        order.market.decimalPlaces
+      );
+      return t('%s %s %s Peg limit', [reference, side, offset]);
     }
     if (order?.liquidityProvision) {
       return t('Liquidity provision');

libs/datagrid/src/lib/cells/price-change-cell.tsx

@@ -1,6 +1,8 @@
 import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
+  priceChange,
+  priceChangePercentage,
 } from '@vegaprotocol/utils';
 import BigNumber from 'bignumber.js';
 import { memo, forwardRef } from 'react';
@@ -13,29 +15,6 @@ export interface PriceChangeCellProps {
   decimalPlaces?: number;
 }
 
-export const priceChangePercentage = (candles: string[]) => {
-  const change = priceChange(candles);
-  if (change && candles && candles.length > 0) {
-    const yesterdayLastPrice = candles[0] && BigInt(candles[0]);
-    if (yesterdayLastPrice) {
-      return new BigNumber(change.toString())
-        .dividedBy(new BigNumber(yesterdayLastPrice.toString()))
-        .multipliedBy(100)
-        .toNumber();
-    }
-    return 0;
-  }
-  return 0;
-};
-
-export const priceChange = (candles: string[]) => {
-  return candles &&
-    candles[candles.length - 1] !== undefined &&
-    candles[0] !== undefined
-    ? BigInt(candles[candles.length - 1] ?? 0) - BigInt(candles[0] ?? 0)
-    : 0;
-};
-
 export const PriceChangeCell = memo(
   forwardRef<HTMLSpanElement, PriceChangeCellProps>(
     ({ candles, decimalPlaces }: PriceChangeCellProps, ref) => {

libs/deal-ticket/__mocks__/react-markdown.js

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

libs/deal-ticket/src/components/deal-ticket-estimates.tsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import type { ReactNode } from 'react';
-import { t } from '@vegaprotocol/i18n';
-import { Icon, Tooltip, TrafficLight } from '@vegaprotocol/ui-toolkit';
-import { IconNames } from '@blueprintjs/icons';
-import * as constants from '../constants';
-
-interface DealTicketEstimatesProps {
-  quoteName?: string;
-  price?: string;
-  estCloseOut?: string;
-  estMargin?: string;
-  fees?: string;
-  notionalSize?: string;
-  size?: string;
-  slippage?: string;
-}
-
-export const DealTicketEstimates = ({
-  price,
-  quoteName,
-  estCloseOut,
-  estMargin,
-  fees,
-  notionalSize,
-  size,
-  slippage,
-}: DealTicketEstimatesProps) => (
-  <dl className="text-black dark:text-white">
-    {size && (
-      <div className="flex justify-between mb-2">
-        <DataTitle>{t('Contracts')}</DataTitle>
-        <ValueTooltipRow
-          value={size}
-          description={constants.CONTRACTS_MARGIN_TOOLTIP_TEXT}
-          id="contracts_tooltip_trigger"
-        />
-      </div>
-    )}
-    {price && (
-      <div className="flex justify-between mb-2">
-        <DataTitle>{t('Est. Price')}</DataTitle>
-        <dd>{price}</dd>
-      </div>
-    )}
-    {notionalSize && (
-      <div className="flex justify-between mb-2">
-        <DataTitle quoteName={quoteName}>{t('Est. Position Size')}</DataTitle>
-        <ValueTooltipRow
-          value={notionalSize}
-          description={constants.NOTIONAL_SIZE_TOOLTIP_TEXT(quoteName || '')}
-        />
-      </div>
-    )}
-    {fees && (
-      <div className="flex justify-between mb-2">
-        <DataTitle quoteName={quoteName}>{t('Est. Fees')}</DataTitle>
-        <ValueTooltipRow
-          value={fees}
-          description={constants.EST_FEES_TOOLTIP_TEXT}
-        />
-      </div>
-    )}
-    {estMargin && (
-      <div className="flex justify-between mb-2">
-        <DataTitle quoteName={quoteName}>{t('Est. Margin')}</DataTitle>
-        <ValueTooltipRow
-          value={estMargin}
-          description={constants.EST_MARGIN_TOOLTIP_TEXT(quoteName || '')}
-        />
-      </div>
-    )}
-    {estCloseOut && (
-      <div className="flex justify-between mb-2">
-        <DataTitle quoteName={quoteName}>{t('Est. Close out')}</DataTitle>
-        <ValueTooltipRow
-          value={estCloseOut}
-          description={constants.EST_CLOSEOUT_TOOLTIP_TEXT(quoteName || '')}
-        />
-      </div>
-    )}
-    {slippage && (
-      <div className="flex justify-between mb-2">
-        <DataTitle>{t('Est. Price Impact / Slippage')}</DataTitle>
-        <ValueTooltipRow description={constants.EST_SLIPPAGE}>
-          <TrafficLight value={parseFloat(slippage)} q1={1} q2={5}>
-            {slippage}%
-          </TrafficLight>
-        </ValueTooltipRow>
-      </div>
-    )}
-  </dl>
-);
-
-interface DataTitleProps {
-  children: ReactNode;
-  quoteName?: string;
-}
-
-export const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
-  <dt>
-    {children}
-    {quoteName && <small> ({quoteName})</small>}
-  </dt>
-);
-
-interface ValueTooltipProps {
-  value?: string;
-  children?: ReactNode;
-  description: string;
-  id?: string;
-}
-
-export const ValueTooltipRow = ({
-  value,
-  children,
-  description,
-  id,
-}: ValueTooltipProps) => (
-  <dd className="flex gap-x-2 items-center">
-    {value || children}
-    <Tooltip align="center" description={description}>
-      <div className="cursor-help" id={id || ''} tabIndex={-1}>
-        <Icon
-          name={IconNames.ISSUE}
-          className="block rotate-180"
-          ariaLabel={description}
-        />
-      </div>
-    </Tooltip>
-  </dd>
-);

libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx

@@ -1,24 +1,8 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import classnames from 'classnames';
 import type { ReactNode } from 'react';
-import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
-import type { Market, MarketData } from '@vegaprotocol/market-list';
-import {
-  getFeeDetailsValues,
-  useFeeDealTicketDetails,
-} from '../../hooks/use-fee-deal-ticket-details';
-
-interface DealTicketFeeDetailsProps {
-  order: OrderSubmissionBody['orderSubmission'];
-  market: Market;
-  marketData: MarketData;
-  currentInitialMargin?: string;
-  currentMaintenanceMargin?: string;
-  estimatedInitialMargin: string;
-  estimatedTotalInitialMargin: string;
-  marginAccountBalance: string;
-  generalAccountBalance: string;
-}
+import { getFeeDetailsValues } from '../../hooks/use-fee-deal-ticket-details';
+import type { FeeDetails } from '../../hooks/use-fee-deal-ticket-details';
 
 export interface DealTicketFeeDetailProps {
   label: string;
@@ -45,17 +29,8 @@ export const DealTicketFeeDetail = ({
   </div>
 );
 
-export const DealTicketFeeDetails = ({
-  order,
-  market,
-  marketData,
-  ...args
-}: DealTicketFeeDetailsProps) => {
-  const feeDetails = useFeeDealTicketDetails(order, market, marketData);
-  const details = getFeeDetailsValues({
-    ...feeDetails,
-    ...args,
-  });
+export const DealTicketFeeDetails = (props: FeeDetails) => {
+  const details = getFeeDetailsValues(props);
   return (
     <div>
       {details.map(({ label, value, labelDescription, symbol, indent }) => (

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -25,6 +25,16 @@ import {
   TinyScroll,
 } from '@vegaprotocol/ui-toolkit';
 
+import {
+  useEstimatePositionQuery,
+  useOpenVolume,
+} from '@vegaprotocol/positions';
+import { toBigNum, removeDecimal } from '@vegaprotocol/utils';
+import { activeOrdersProvider } from '@vegaprotocol/orders';
+import { useEstimateFees } from '../../hooks/use-fee-deal-ticket-details';
+import { getDerivedPrice } from '../../utils/get-price';
+import type { OrderInfo } from '@vegaprotocol/types';
+
 import {
   validateExpiration,
   validateMarketState,
@@ -34,7 +44,6 @@ import {
 } from '../../utils';
 import { ZeroBalanceError } from '../deal-ticket-validation/zero-balance-error';
 import { SummaryValidationType } from '../../constants';
-import { useInitialMargin } from '../../hooks/use-initial-margin';
 import type { Market, MarketData } from '@vegaprotocol/market-list';
 import { MarginWarning } from '../deal-ticket-validation/margin-warning';
 import {
@@ -104,7 +113,67 @@ export const DealTicket = ({
       market.positionDecimalPlaces
     );
 
-  const { margin, totalMargin } = useInitialMargin(market.id, normalizedOrder);
+  const price = useMemo(() => {
+    return normalizedOrder && getDerivedPrice(normalizedOrder, marketData);
+  }, [normalizedOrder, marketData]);
+
+  const notionalSize = useMemo(() => {
+    if (price && normalizedOrder?.size) {
+      return removeDecimal(
+        toBigNum(
+          normalizedOrder.size,
+          market.positionDecimalPlaces
+        ).multipliedBy(toBigNum(price, market.decimalPlaces)),
+        asset.decimals
+      );
+    }
+    return null;
+  }, [
+    price,
+    normalizedOrder?.size,
+    market.decimalPlaces,
+    market.positionDecimalPlaces,
+    asset.decimals,
+  ]);
+
+  const feeEstimate = useEstimateFees(
+    normalizedOrder && { ...normalizedOrder, price }
+  );
+  const { data: activeOrders } = useDataProvider({
+    dataProvider: activeOrdersProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const openVolume = useOpenVolume(pubKey, market.id) ?? '0';
+  const orders = activeOrders
+    ? activeOrders.map<OrderInfo>(({ node: order }) => ({
+        isMarketOrder: order.type === OrderType.TYPE_MARKET,
+        price: order.price,
+        remaining: order.remaining,
+        side: order.side,
+      }))
+    : [];
+  if (normalizedOrder) {
+    orders.push({
+      isMarketOrder: normalizedOrder.type === OrderType.TYPE_MARKET,
+      price: normalizedOrder.price ?? '0',
+      remaining: normalizedOrder.size,
+      side: normalizedOrder.side,
+    });
+  }
+  const { data: positionEstimate } = useEstimatePositionQuery({
+    variables: {
+      marketId: market.id,
+      openVolume,
+      orders,
+      collateralAvailable:
+        marginAccountBalance || generalAccountBalance ? balance : undefined,
+    },
+    skip: !normalizedOrder,
+  });
+
+  const assetSymbol =
+    market.tradableInstrument.instrument.product.settlementAsset.symbol;
 
   const { data: currentMargins } = useDataProvider({
     dataProvider: marketMarginDataProvider,
@@ -401,7 +470,10 @@ export const DealTicket = ({
           asset={asset}
           marketTradingMode={marketData.marketTradingMode}
           balance={balance}
-          margin={totalMargin}
+          margin={
+            positionEstimate?.estimatePosition?.margin.bestCase.initialLevel ||
+            '0'
+          }
           isReadOnly={isReadOnly}
           pubKey={pubKey}
           onClickCollateral={onClickCollateral}
@@ -413,15 +485,15 @@ export const DealTicket = ({
           }
         />
         <DealTicketFeeDetails
-          order={normalizedOrder}
-          market={market}
-          marketData={marketData}
-          estimatedInitialMargin={margin}
-          estimatedTotalInitialMargin={totalMargin}
-          currentInitialMargin={currentMargins?.initialLevel}
-          currentMaintenanceMargin={currentMargins?.maintenanceLevel}
+          feeEstimate={feeEstimate}
+          notionalSize={notionalSize}
+          assetSymbol={assetSymbol}
           marginAccountBalance={marginAccountBalance}
           generalAccountBalance={generalAccountBalance}
+          positionEstimate={positionEstimate?.estimatePosition}
+          market={market}
+          currentInitialMargin={currentMargins?.initialLevel}
+          currentMaintenanceMargin={currentMargins?.maintenanceLevel}
         />
       </form>
     </TinyScroll>