Merge remote-tracking branch 'origin/feat/3709-use-generated-transaction-types' into feat/3709-use-generated-transaction-types

.github/workflows/ci-cd-trigger.yml

@@ -6,7 +6,7 @@ on:
       - release/*
       - develop
       - main
-  pull_request_target:
+  pull_request:
     types:
       - opened
       - ready_for_review
@@ -20,8 +20,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - name: Cache node modules
         id: cache
@@ -62,7 +60,6 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/cypress-run.yml

@@ -33,7 +33,6 @@ jobs:
         with:
           fetch-depth: 0
           path: './frontend-monorepo'
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       # Restore node_modules from cache if possible
       - name: Restore node_modules from cache

.github/workflows/lint-pr.yml

@@ -11,8 +11,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/publish-dist.yml

@@ -19,8 +19,6 @@ jobs:
     steps:
       - name: Check out code
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - name: Set up QEMU
         id: quemu

apps/explorer-e2e/cypress.config.js

@@ -1,4 +1,10 @@
 const { defineConfig } = require('cypress');
+const webpack = require('webpack');
+const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
+const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config();
 
 module.exports = defineConfig({
   reporter: '../../node_modules/cypress-mochawesome-reporter',
@@ -7,6 +13,36 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       require('cypress-mochawesome-reporter/plugin')(on);
       require('@cypress/grep/src/plugin')(config);
+
+      const defaultConfig = webpackPreprocessor.defaultOptions;
+      defaultConfig.webpackOptions.context = path.resolve(__dirname, './');
+      defaultConfig.webpackOptions.module.rules[1].test = /(\.tsx?|\.jsx?)$/;
+      defaultConfig.webpackOptions.module.rules[1].exclude = [
+        /node_modules\/(?!(@vegaprotocol\/protos|protobuf-codec))/,
+        /browserslist/,
+      ];
+      defaultConfig.webpackOptions.module.rules.push({
+        test: /(\.css|\.s[ac]ss)$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      });
+      defaultConfig.webpackOptions.plugins =
+        defaultConfig.webpackOptions.plugins || [];
+      defaultConfig.webpackOptions.plugins.push(
+        new webpack.DefinePlugin({
+          'process.env': JSON.stringify(process.env),
+        })
+      );
+      defaultConfig.webpackOptions.cache = {
+        type: 'filesystem',
+        allowCollectingMemory: true,
+        buildDependencies: {
+          config: [__filename],
+        },
+      };
+      defaultConfig.typescript = require.resolve('typescript');
+
+      on('file:preprocessor', webpackPreprocessor(defaultConfig));
+
       return config;
     },
     baseUrl: 'http://localhost:3000',

apps/explorer/src/app/components/order-details/amend-order-details.spec.tsx

@@ -32,6 +32,7 @@ function renderExistingAmend(id: string, version: number, amend: Amend) {
         query: ExplorerDeterministicOrderDocument,
         variables: {
           orderId: '123',
+          version: 1,
         },
       },
       result: {

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

@@ -34,9 +34,13 @@ export function getSideDeltaColour(delta: string): string {
  * @param param0
  * @returns
  */
-const AmendOrderDetails = ({ id, amend }: AmendOrderDetailsProps) => {
+const AmendOrderDetails = ({
+  id,
+  version = 0,
+  amend,
+}: AmendOrderDetailsProps) => {
   const { data, error } = useExplorerDeterministicOrderQuery({
-    variables: { orderId: id },
+    variables: { orderId: id, version },
   });
 
   if (error || (data && !data.orderByID)) {

apps/explorer/src/app/components/txs/details/tx-liquidity-amend.test.tsx

@@ -1,86 +0,0 @@
-import { render } from '@testing-library/react';
-import { TxDetailsLiquidityAmendment } from './tx-liquidity-amend';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import { MockedProvider } from '@apollo/client/testing';
-import { MemoryRouter } from 'react-router-dom';
-
-describe('TxDetailsLiquidityAmendment', () => {
-  const mockTxData = {
-    hash: 'test',
-    command: {
-      liquidityProvisionAmendment: {
-        marketId: 'BTC-USD',
-        commitmentAmount: 100,
-        fee: '0.01',
-      },
-    },
-  };
-  const mockPubKey = '123';
-  const mockBlockData = {
-    result: {
-      block: {
-        header: {
-          height: '123',
-        },
-      },
-    },
-  };
-
-  it('should render the component with correct data', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <MemoryRouter>
-          <TxDetailsLiquidityAmendment
-            txData={mockTxData as BlockExplorerTransactionResult}
-            pubKey={mockPubKey}
-            blockData={mockBlockData as TendermintBlocksResponse}
-          />
-        </MemoryRouter>
-      </MockedProvider>
-    );
-
-    expect(getByText('Market')).toBeInTheDocument();
-    expect(getByText('BTC-USD')).toBeInTheDocument();
-    expect(getByText('Commitment amount')).toBeInTheDocument();
-    expect(getByText('100')).toBeInTheDocument();
-    expect(getByText('Fee')).toBeInTheDocument();
-    expect(getByText('1%')).toBeInTheDocument();
-  });
-
-  it('should display awaiting message when tx data is undefined', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <MemoryRouter>
-          <TxDetailsLiquidityAmendment
-            txData={undefined}
-            pubKey={mockPubKey}
-            blockData={mockBlockData as TendermintBlocksResponse}
-          />
-        </MemoryRouter>
-      </MockedProvider>
-    );
-
-    expect(
-      getByText('Awaiting Block Explorer transaction details')
-    ).toBeInTheDocument();
-  });
-
-  it('should display awaiting message when liquidityProvisionAmendment is undefined', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <MemoryRouter>
-          <TxDetailsLiquidityAmendment
-            txData={{ command: {} } as BlockExplorerTransactionResult}
-            pubKey={mockPubKey}
-            blockData={mockBlockData as TendermintBlocksResponse}
-          />
-        </MemoryRouter>
-      </MockedProvider>
-    );
-
-    expect(
-      getByText('Awaiting Block Explorer transaction details')
-    ).toBeInTheDocument();
-  });
-});

apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx

@@ -7,7 +7,6 @@ import { TableCell, TableRow, TableWithTbody } from '../../table';
 import type { components } from '../../../../types/explorer';
 import { LiquidityProvisionDetails } from './liquidity-provision/liquidity-provision-details';
 import PriceInMarket from '../../price-in-market/price-in-market';
-import BigNumber from 'bignumber.js';
 
 export type LiquidityAmendment =
   components['schemas']['v1LiquidityProvisionAmendment'];
@@ -35,10 +34,6 @@ export const TxDetailsLiquidityAmendment = ({
     txData.command.liquidityProvisionAmendment;
   const marketId: string = amendment.marketId || '-';
 
-  const fee = amendment.fee
-    ? new BigNumber(amendment.fee).times(100).toString()
-    : '-';
-
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
@@ -68,7 +63,7 @@ export const TxDetailsLiquidityAmendment = ({
         {amendment.fee ? (
           <TableRow modifier="bordered">
             <TableCell>{t('Fee')}</TableCell>
-            <TableCell>{fee}%</TableCell>
+            <TableCell>{amendment.fee}%</TableCell>
           </TableRow>
         ) : null}
       </TableWithTbody>

apps/explorer/src/app/setup-tests.ts

@@ -3,6 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import '../../../../setup-test';
 
 Object.defineProperty(window, 'ResizeObserver', {
   writable: false,

apps/governance-e2e/cypress.config.js

@@ -1,4 +1,10 @@
 const { defineConfig } = require('cypress');
+const webpack = require('webpack');
+const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
+const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config();
 
 module.exports = defineConfig({
   reporter: '../../node_modules/cypress-mochawesome-reporter',
@@ -7,6 +13,36 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       require('cypress-mochawesome-reporter/plugin')(on);
       require('@cypress/grep/src/plugin')(config);
+
+      const defaultConfig = webpackPreprocessor.defaultOptions;
+      defaultConfig.webpackOptions.context = path.resolve(__dirname, './');
+      defaultConfig.webpackOptions.module.rules[1].test = /(\.tsx?|\.jsx?)$/;
+      defaultConfig.webpackOptions.module.rules[1].exclude = [
+        /node_modules\/(?!(@vegaprotocol\/protos|protobuf-codec))/,
+        /browserslist/,
+      ];
+      defaultConfig.webpackOptions.module.rules.push({
+        test: /(\.css|\.s[ac]ss)$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      });
+      defaultConfig.webpackOptions.plugins =
+        defaultConfig.webpackOptions.plugins || [];
+      defaultConfig.webpackOptions.plugins.push(
+        new webpack.DefinePlugin({
+          'process.env': JSON.stringify(process.env),
+        })
+      );
+      defaultConfig.webpackOptions.cache = {
+        type: 'filesystem',
+        allowCollectingMemory: true,
+        buildDependencies: {
+          config: [__filename],
+        },
+      };
+      defaultConfig.typescript = require.resolve('typescript');
+
+      on('file:preprocessor', webpackPreprocessor(defaultConfig));
+
       return config;
     },
     baseUrl: 'http://localhost:4210',
@@ -49,7 +85,7 @@ module.exports = defineConfig({
     vegaTokenContractAddress: '0xF41bD86d462D36b997C0bbb4D97a0a3382f205B7',
     vegaTokenAddress: '0x67175Da1D5e966e40D11c4B2519392B2058373de',
     txTimeout: { timeout: 70000 },
-    epochTimeout: { timeout: 12000 },
+    epochTimeout: { timeout: 10000 },
     blockConfirmations: 3,
     grepTags: '@regression @smoke @slow',
     grepFilterSpecs: true,

apps/governance-e2e/src/fixtures/mocks/previous-epoch.ts

@@ -1,63 +0,0 @@
-export const previousEpochData = {
-  epoch: {
-    id: '7611',
-    validatorsConnection: {
-      edges: [
-        {
-          node: {
-            id: 'cd96782bc0ad5679869cf69fe7838a92212da7f53b4a214bed68067117494122',
-            stakedTotal: '3154229668720612941799',
-            rewardScore: {
-              rawValidatorScore: '0.2',
-              performanceScore: '1',
-              multisigScore: '0',
-              validatorScore: '0.2',
-              normalisedScore: '0.2007216887087119',
-              validatorStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
-              __typename: 'RewardScore',
-            },
-            rankingScore: {
-              status: 'VALIDATOR_NODE_STATUS_TENDERMINT',
-              previousStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
-              rankingScore: '0.211713765544955625',
-              stakeScore: '0.2016321576618625',
-              performanceScore: '1',
-              votingPower: '2007',
-              __typename: 'RankingScore',
-            },
-            __typename: 'Node',
-          },
-          __typename: 'NodeEdge',
-        },
-        {
-          node: {
-            id: '887d936f797a47032eceb572a13b69b581d3b1fa595a7d021a3e3cf2a5d2acfd',
-            stakedTotal: '3151161904761904764551',
-            rewardScore: {
-              rawValidatorScore: '0.2',
-              performanceScore: '1',
-              multisigScore: '1',
-              validatorScore: '0.2',
-              normalisedScore: '0.2007216887087119',
-              validatorStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
-              __typename: 'RewardScore',
-            },
-            rankingScore: {
-              status: 'VALIDATOR_NODE_STATUS_TENDERMINT',
-              previousStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
-              rankingScore: '0.211507855409133255',
-              stakeScore: '0.2014360527706031',
-              performanceScore: '1',
-              votingPower: '2007',
-              __typename: 'RankingScore',
-            },
-            __typename: 'Node',
-          },
-          __typename: 'NodeEdge',
-        },
-      ],
-      __typename: 'NodesConnection',
-    },
-    __typename: 'Epoch',
-  },
-};

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

@@ -58,6 +58,8 @@ context(
     before('visit staking tab and connect vega wallet', function () {
       cy.visit('/');
       ethereumWalletConnect();
+      // this is a workaround for #2422 which can be removed once issue is resolved
+      cy.associateTokensToVegaWallet('4');
       vegaWalletSetSpecifiedApprovalAmount('1000');
     });
 

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

@@ -1,6 +1,5 @@
 /// <reference types="cypress" />
 
-import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import {
   navigation,
   verifyPageHeader,
@@ -10,7 +9,6 @@ import {
   clickOnValidatorFromList,
   waitForBeginningOfEpoch,
 } from '../../support/staking.functions';
-import { previousEpochData } from '../../fixtures/mocks/previous-epoch';
 
 const guideLink = '[data-testid="staking-guide-link"]';
 const validatorTitle = '[data-testid="validator-node-title"]';
@@ -32,7 +30,6 @@ const normalisedVotingPowerToolTip =
   '[data-testid="normalised-voting-power-tooltip"]';
 const performancePenaltyToolTip = '[data-testid="performance-penalty-tooltip"]';
 const overstakedPenaltyToolTip = '[data-testid="overstaked-penalty-tooltip"]';
-const multisigPenaltyToolTip = '[data-testid="multisig-error-tooltip"]';
 const epochCountDown = '[data-testid="epoch-countdown"]';
 const stakeNumberRegex = /^\d{1,3}(,\d{3})*(\.\d+)?$/;
 
@@ -154,22 +151,6 @@ context('Validators Page - verify elements on page', function () {
             cy.wrap($pendingStake).should('contain.text', '0.00');
           });
       });
-
-      it('Should be able to see multisig error', function () {
-        cy.mockGQL((req) => {
-          aliasGQLQuery(req, 'PreviousEpoch', previousEpochData);
-        });
-        waitForBeginningOfEpoch();
-        cy.getByTestId('total-penalty').first().realHover();
-        cy.get(multisigPenaltyToolTip)
-          .invoke('text')
-          .should('contain', 'Multisig penalty: 100%');
-
-        cy.getByTestId('total-penalty').eq(1).realHover();
-        cy.get(multisigPenaltyToolTip)
-          .invoke('text')
-          .should('contain', 'Multisig penalty: 100%');
-      });
     }
   );
 

apps/governance-e2e/src/integration/view/wallet-vega.cy.ts

@@ -282,33 +282,33 @@ context(
       // 2002-SINC-016
       describe('Vega wallet with assets', function () {
         const assets = [
-          {
-            id: '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc',
-            name: 'USDC (fake)',
-            symbol: 'fUSDC',
-            amount: '1000000',
-            expectedAmount: 10.0,
-          },
           {
             id: '8566db7257222b5b7ef2886394ad28b938b28680a54a169bbc795027b89d6665',
             name: 'DAI (fake)',
             symbol: 'fDAI',
             amount: '200000',
-            expectedAmount: 2.0,
+            expectedAmount: '2.00',
           },
           {
             id: '73174a6fb1d5802ba0ac7bd7ab79e0a3a4837b262de0a4e80815a55442692bd0',
             name: 'BTC (fake)',
             symbol: 'fBTC',
             amount: '600000',
-            expectedAmount: 6.0,
+            expectedAmount: '6.00',
           },
           {
             id: 'e02d4c15d790d1d2dffaf2dcd1cf06a1fe656656cf4ed18c8ce99f9e83643567',
             name: 'EURO (fake)',
             symbol: 'fEURO',
             amount: '800000',
-            expectedAmount: 8.0,
+            expectedAmount: '8.00',
+          },
+          {
+            id: '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc',
+            name: 'USDC (fake)',
+            symbol: 'fUSDC',
+            amount: '1000000',
+            expectedAmount: '10.00',
           },
         ];
 
@@ -319,6 +319,12 @@ context(
           cy.reload();
           waitForSpinner();
           cy.connectVegaWallet();
+          cy.get(walletContainer).within(() => {
+            cy.getByTestId('currency-title', txTimeout).should(
+              'have.length.at.least',
+              5
+            );
+          });
         });
 
         for (const { name, symbol, expectedAmount } of assets) {
@@ -332,10 +338,10 @@ context(
                 .contains(name)
                 .parent()
                 .siblings()
-                .then((elementAmount) => {
-                  const displayedAmount = parseFloat(elementAmount.text());
-                  expect(displayedAmount).be.gte(expectedAmount);
-                });
+                .invoke('text')
+                .should('have.length.at.least', 4)
+                .then(parseFloat)
+                .should('be.gte', parseFloat(expectedAmount));
 
               cy.get(vegaWalletCurrencyTitle)
                 .contains(name)

apps/governance-e2e/src/support/common.functions.ts

@@ -37,7 +37,7 @@ export function navigateTo(page: navigation) {
       });
   } else {
     return cy.get(navigation.section, { timeout: 10000 }).within(() => {
-      cy.get(page).eq(0).click({ force: true });
+      cy.get(page).eq(0).click();
     });
   }
 }

apps/governance/src/routes/staking/node/pending-stake.tsx

@@ -7,6 +7,7 @@ import type { BigNumber } from '../../../lib/bignumber';
 import type { UndelegateSubmissionBody } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { removeDecimal } from '@vegaprotocol/utils';
+import { vega as VegaProtos } from '@vegaprotocol/protos';
 
 interface PendingStakeProps {
   pendingAmount: BigNumber;
@@ -38,7 +39,7 @@ export const PendingStake = ({
         undelegateSubmission: {
           nodeId,
           amount: removeDecimal(pendingAmount.toString(), appState.decimals),
-          method: 'METHOD_NOW',
+          method: VegaProtos.commands.v1.UndelegateSubmission.Method.METHOD_NOW,
         },
       };
       await sendTx(pubKey, command);

apps/governance/src/routes/staking/node/staking-form.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { ENV } from '../../../config';
+import { vega as VegaProtos } from '@vegaprotocol/protos';
 import { usePartyDelegationsLazyQuery } from './__generated__/PartyDelegations';
 import { TokenInput } from '../../../components/token-input';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
@@ -128,8 +129,9 @@ export const StakingForm = ({
         amount: removeDecimal(amount, appState.decimals),
         method:
           removeType === RemoveType.Now
-            ? 'METHOD_NOW'
-            : 'METHOD_AT_END_OF_EPOCH',
+            ? VegaProtos.commands.v1.UndelegateSubmission.Method.METHOD_NOW
+            : VegaProtos.commands.v1.UndelegateSubmission.Method
+                .METHOD_AT_END_OF_EPOCH,
       },
     };
     try {

apps/governance/src/setup-tests.ts

@@ -7,6 +7,7 @@ import dev from './i18n/translations/dev.json';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import ResizeObserver from 'resize-observer-polyfill';
+import '../../../setup-test';
 
 // Set up i18n instance so that components have the correct default
 // en translations

apps/trading-e2e/.env

@@ -14,7 +14,6 @@ NX_VEGA_WALLET_URL=http://localhost:1789
 NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supply green clown session"
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
-NX_SENTRY_DSN=https://dummy@o999999.ingest.sentry.io/9999999
 
 # Expose some env vars to cypress environment for market setup
 CYPRESS_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit supply green clown session

apps/trading-e2e/cypress.config.js

@@ -1,4 +1,10 @@
 const { defineConfig } = require('cypress');
+const webpack = require('webpack');
+const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
+const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config();
 
 module.exports = defineConfig({
   reporter: '../../node_modules/cypress-mochawesome-reporter',
@@ -6,6 +12,36 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       require('cypress-mochawesome-reporter/plugin')(on);
       require('@cypress/grep/src/plugin')(config);
+
+      const defaultConfig = webpackPreprocessor.defaultOptions;
+      defaultConfig.webpackOptions.context = path.resolve(__dirname, './');
+      defaultConfig.webpackOptions.module.rules[1].test = /(\.tsx?|\.jsx?)$/;
+      defaultConfig.webpackOptions.module.rules[1].exclude = [
+        /node_modules\/(?!(@vegaprotocol\/protos|protobuf-codec))/,
+        /browserslist/,
+      ];
+      defaultConfig.webpackOptions.module.rules.push({
+        test: /(\.css|\.s[ac]ss)$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      });
+      defaultConfig.webpackOptions.plugins =
+        defaultConfig.webpackOptions.plugins || [];
+      defaultConfig.webpackOptions.plugins.push(
+        new webpack.DefinePlugin({
+          'process.env': JSON.stringify(process.env),
+        })
+      );
+      defaultConfig.webpackOptions.cache = {
+        type: 'filesystem',
+        allowCollectingMemory: true,
+        buildDependencies: {
+          config: [__filename],
+        },
+      };
+      defaultConfig.typescript = require.resolve('typescript');
+
+      on('file:preprocessor', webpackPreprocessor(defaultConfig));
+
       return config;
     },
     baseUrl: 'http://localhost:4200',

apps/trading-e2e/src/integration/charts-depth.cy.ts

@@ -1,15 +0,0 @@
-describe('charts', { tags: '@smoke' }, () => {
-  before(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/#/markets/market-0');
-    cy.wait('@Markets');
-    cy.getByTestId('Depth').click();
-  });
-
-  it('can see market depth chart', () => {
-    // 6006-DEPC-001
-    cy.getByTestId('tab-depth').should('be.visible');
-    cy.get('.depth-chart-module_canvas__260De').should('be.visible');
-  });
-});

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

@@ -154,7 +154,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
       .find(dropdownContentItem)
       .eq(2)
       .should('have.text', 'View asset');
-    cy.getByTestId('market-actions-content').click();
+    cy.getByTestId('market-actions-content').should('be.visible');
   });
 
   it('able to open and sort full market list - market page', () => {
@@ -197,8 +197,8 @@ describe('no all markets', { tags: '@smoke', testIsolation: true }, () => {
     cy.mockGQL((req) => {
       aliasGQLQuery(req, 'Markets', markets);
     });
-    cy.mockSubscription();
     cy.visit('/#/markets/all');
+    cy.wait('@Markets');
   });
 
   it('can see no markets message', () => {

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

@@ -182,7 +182,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
       .contains('Liquidity monitoring parameters')
       .click();
 
-    validateMarketDataRow(0, 'Triggering Ratio', '0.7');
+    validateMarketDataRow(0, 'Triggering Ratio', '0');
     validateMarketDataRow(1, 'Time Window', '3,600');
     validateMarketDataRow(2, 'Scaling Factor', '10');
   });

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

@@ -1,7 +1,7 @@
 import * as Schema from '@vegaprotocol/types';
 import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
+import type { OrderObj } from '@vegaprotocol/orders';
 
 describe('must submit order', { tags: '@smoke' }, () => {
   // 7002-SORD-039
@@ -22,7 +22,7 @@ describe('must submit order', { tags: '@smoke' }, () => {
     // 0003-WTXN-012
     // 0003-WTXN-003
     cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
+    const order: OrderObj = {
       marketId: 'market-0',
       type: Schema.OrderType.TYPE_MARKET,
       side: Schema.Side.SIDE_BUY,
@@ -37,7 +37,7 @@ describe('must submit order', { tags: '@smoke' }, () => {
 
   it('successfully places market sell order', () => {
     cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
+    const order: OrderObj = {
       marketId: 'market-0',
       type: Schema.OrderType.TYPE_MARKET,
       side: Schema.Side.SIDE_SELL,
@@ -53,7 +53,7 @@ describe('must submit order', { tags: '@smoke' }, () => {
   it('successfully places limit buy order', () => {
     // 7002-SORD-017
     cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
+    const order: OrderObj = {
       marketId: 'market-0',
       type: Schema.OrderType.TYPE_LIMIT,
       side: Schema.Side.SIDE_BUY,
@@ -69,7 +69,7 @@ describe('must submit order', { tags: '@smoke' }, () => {
 
   it('successfully places limit sell order', () => {
     cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
+    const order: OrderObj = {
       marketId: 'market-0',
       type: Schema.OrderType.TYPE_LIMIT,
       side: Schema.Side.SIDE_SELL,
@@ -86,7 +86,7 @@ describe('must submit order', { tags: '@smoke' }, () => {
   it('successfully places GTT limit buy order', () => {
     cy.mockVegaWalletTransaction();
     const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000);
-    const order: OrderSubmission = {
+    const order: OrderObj = {
       marketId: 'market-0',
       type: Schema.OrderType.TYPE_LIMIT,
       side: Schema.Side.SIDE_SELL,
@@ -97,12 +97,10 @@ describe('must submit order', { tags: '@smoke' }, () => {
       postOnly: false,
       reduceOnly: false,
     };
-
     createOrder(order);
     testOrderSubmission(order, {
       price: '100000',
-      expiresAt:
-        new Date(order.expiresAt as string).getTime().toString() + '000000',
+      expiresAt: order.expiresAt as string,
       postOnly: false,
       reduceOnly: false,
     });

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

@@ -5,8 +5,8 @@ import {
   amendGeneralAccountBalance,
   amendMarginAccountBalance,
 } from '@vegaprotocol/mock';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
+import type { OrderObj } from '@vegaprotocol/orders';
 
 describe(
   'account validation',
@@ -94,7 +94,7 @@ describe(
       it('must see a prompt to check connected vega wallet to approve transaction', () => {
         // 0003-WTXN-002
         cy.mockVegaWalletTransaction(1000);
-        const order: OrderSubmission = {
+        const order: OrderObj = {
           marketId: 'market-0',
           type: Schema.OrderType.TYPE_MARKET,
           side: Schema.Side.SIDE_BUY,
@@ -124,7 +124,7 @@ describe(
           });
         });
 
-        const order: OrderSubmission = {
+        const order: OrderObj = {
           marketId: 'market-0',
           type: Schema.OrderType.TYPE_MARKET,
           side: Schema.Side.SIDE_BUY,
@@ -160,7 +160,7 @@ describe(
           });
         });
 
-        const order: OrderSubmission = {
+        const order: OrderObj = {
           marketId: 'market-0',
           type: Schema.OrderType.TYPE_MARKET,
           side: Schema.Side.SIDE_BUY,

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

@@ -1,7 +1,7 @@
 import * as Schema from '@vegaprotocol/types';
 import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
+import type { OrderObj } from '@vegaprotocol/orders';
 
 const displayTomorrow = () => {
   const tomorrow = new Date();
@@ -31,7 +31,7 @@ describe(
 
     it('successfully places limit buy order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_BUY,
@@ -47,7 +47,7 @@ describe(
 
     it('successfully places limit sell order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_SELL,
@@ -63,7 +63,7 @@ describe(
 
     it('successfully places GTT limit buy order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_SELL,
@@ -79,8 +79,7 @@ describe(
         price: '100000',
         postOnly: false,
         reduceOnly: false,
-        expiresAt:
-          new Date(order.expiresAt as string).getTime().toString() + '000000',
+        expiresAt: order.expiresAt as string,
       });
     });
   }

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

@@ -1,7 +1,7 @@
 import * as Schema from '@vegaprotocol/types';
 import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
+import type { OrderObj } from '@vegaprotocol/orders';
 
 const displayTomorrow = () => {
   const tomorrow = new Date();
@@ -31,7 +31,7 @@ describe(
 
     it('successfully places limit buy order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_BUY,
@@ -47,7 +47,7 @@ describe(
 
     it('successfully places limit sell order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_SELL,
@@ -63,7 +63,7 @@ describe(
 
     it('successfully places GTT limit buy order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_SELL,
@@ -77,8 +77,7 @@ describe(
       createOrder(order);
       testOrderSubmission(order, {
         price: '100000',
-        expiresAt:
-          new Date(order.expiresAt as string).getTime().toString() + '000000',
+        expiresAt: order.expiresAt as string,
       });
     });
   }

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

@@ -1,7 +1,7 @@
 import * as Schema from '@vegaprotocol/types';
 import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
+import type { OrderObj } from '@vegaprotocol/orders';
 
 const displayTomorrow = () => {
   const tomorrow = new Date();
@@ -31,7 +31,7 @@ describe(
 
     it('successfully places limit buy order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_BUY,
@@ -47,7 +47,7 @@ describe(
 
     it('successfully places limit sell order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_SELL,
@@ -63,7 +63,7 @@ describe(
 
     it('successfully places GTT limit buy order', () => {
       cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
+      const order: OrderObj = {
         marketId: 'market-0',
         type: Schema.OrderType.TYPE_LIMIT,
         side: Schema.Side.SIDE_SELL,
@@ -77,8 +77,7 @@ describe(
       createOrder(order);
       testOrderSubmission(order, {
         price: '100000',
-        expiresAt:
-          new Date(order.expiresAt as string).getTime().toString() + '000000',
+        expiresAt: order.expiresAt as string,
       });
     });
   }

apps/trading-e2e/src/integration/trading-order-list.cy.ts

@@ -0,0 +1,406 @@
+import {
+  getSubscriptionMocks,
+  updateOrder,
+} from '../support/order-update-subscription';
+import * as Schema from '@vegaprotocol/types';
+
+const orderSymbol = 'market.tradableInstrument.instrument.code';
+const orderSize = 'size';
+const orderType = 'type';
+const orderStatus = 'status';
+const orderRemaining = 'remaining';
+const orderPrice = 'price';
+const orderTimeInForce = 'timeInForce';
+const orderCreatedAt = 'createdAt';
+const cancelOrderBtn = 'cancel';
+const cancelAllOrdersBtn = 'cancelAll';
+const editOrderBtn = 'edit';
+
+describe('orders list', { tags: '@smoke', testIsolation: true }, () => {
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.wait('@Markets');
+  });
+
+  it('renders orders', () => {
+    cy.getByTestId('tab-orders').should('be.visible');
+    cy.getByTestId(cancelAllOrdersBtn).should('be.visible');
+    cy.getByTestId(cancelOrderBtn).should('have.length.at.least', 1);
+    cy.getByTestId(editOrderBtn).should('have.length.at.least', 1);
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get(`[role='rowgroup']`)
+        .first()
+        .within(() => {
+          cy.get(`[col-id='${orderSymbol}']`).each(($symbol) => {
+            cy.wrap($symbol).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderSize}']`).each(($size) => {
+            cy.wrap($size).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderType}']`).each(($type) => {
+            cy.wrap($type).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderStatus}']`).each(($status) => {
+            cy.wrap($status).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderRemaining}']`).each(($remaining) => {
+            cy.wrap($remaining).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderPrice}']`).each(($price) => {
+            cy.wrap($price).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderTimeInForce}']`).each(($timeInForce) => {
+            cy.wrap($timeInForce).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderCreatedAt}']`).each(($dateTime) => {
+            cy.wrap($dateTime).invoke('text').should('not.be.empty');
+          });
+        });
+    });
+  });
+
+  it('partially filled orders should not show close/edit buttons', () => {
+    const partiallyFilledId =
+      '94aead3ca92dc932efcb503631b03a410e2a5d4606cae6083e2406dc38e52f78';
+
+    cy.getByTestId('tab-orders').should('be.visible');
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Partially Filled').click();
+    cy.getByTestId('All').click();
+
+    cy.get(`[row-id="${partiallyFilledId}"]`)
+      .eq(1)
+      .within(() => {
+        cy.get(`[col-id='${orderStatus}']`).should(
+          'have.text',
+          'Partially Filled'
+        );
+        cy.get(`[col-id='${orderRemaining}']`).should('have.text', '7/10');
+        cy.getByTestId(cancelOrderBtn).should('not.exist');
+        cy.getByTestId(editOrderBtn).should('not.exist');
+      });
+  });
+
+  it('orders are sorted by most recent order', () => {
+    // 7003-MORD-002
+    const expectedOrderList = [
+      'BTCUSD.MF21',
+      'SOLUSD',
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'BTCUSD.MF21',
+    ];
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Reset').click();
+    cy.getByTestId('All').click();
+
+    cy.getByTestId('tab-orders')
+      .get(`.ag-center-cols-container [col-id='${orderSymbol}']`)
+      .should('have.length.at.least', expectedOrderList.length)
+      .then(($symbols) => {
+        const symbolNames: string[] = [];
+        cy.wrap($symbols)
+          .each(($symbol) => {
+            cy.wrap($symbol)
+              .invoke('text')
+              .then((text) => {
+                symbolNames.push(text);
+              });
+          })
+          .then(() => {
+            expect(symbolNames).to.include.ordered.members(expectedOrderList);
+          });
+      });
+  });
+});
+
+describe('subscribe orders', { tags: '@smoke' }, () => {
+  let orderId = '0';
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get('[col-id="status"][role="columnheader"]')
+        .focus()
+        .find('.ag-header-cell-menu-button')
+        .click();
+      cy.get('.ag-filter-apply-panel-button').click();
+    });
+    orderId = (parseInt(orderId, 10) + 1).toString();
+  });
+  // 7002-SORD-053
+  // 7002-SORD-040
+  // 7003-MORD-001
+
+  it('must see an active order', () => {
+    // 7002-SORD-041
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Active');
+  });
+
+  it('must see an expired order', () => {
+    // 7002-SORD-042
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_EXPIRED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Expired');
+  });
+
+  it('must see a cancelled order', () => {
+    // 7002-SORD-043
+    // NOT COVERED:  see the txn that cancelled it and a link to the block explorer, if cancelled by a user transaction.
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_CANCELLED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Cancelled');
+  });
+
+  it('must see a stopped order', () => {
+    // 7002-SORD-044
+    // NOT COVERED:  see an explanation of why stopped
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_STOPPED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Stopped');
+  });
+
+  it('must see a partially filled order', () => {
+    // 7002-SORD-045
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_PARTIALLY_FILLED,
+      size: '5',
+      remaining: '1',
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Partially Filled'
+    );
+    cy.getByTestId(`order-status-${orderId}`)
+      .parentsUntil(`.ag-row`)
+      .siblings(`[col-id=${orderRemaining}]`)
+      .should('have.text', '4/5');
+  });
+
+  it('must see a filled order', () => {
+    // 7002-SORD-046
+    // NOT COVERED:  Must be able to see/link to all trades that were created from this order
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_FILLED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled');
+  });
+
+  it('must see a rejected order', () => {
+    // 7002-SORD-047
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_REJECTED,
+      rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_INTERNAL_ERROR,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Rejected: Internal error'
+    );
+  });
+
+  it('must see a parked order', () => {
+    // 7002-SORD-048
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_PARKED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Parked: Internal error'
+    );
+  });
+
+  it('must see the size of the order and direction/side -', () => {
+    // 7003-MORD-003
+    // 7003-MORD-004
+    updateOrder({
+      id: orderId,
+      size: '15',
+      side: Schema.Side.SIDE_SELL,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="size"]')
+      .should('have.text', '-15');
+  });
+
+  it('must see the size of the order and direction/side +', () => {
+    // 7003-MORD-003
+    // 7003-MORD-004
+    updateOrder({
+      id: orderId,
+      size: '5',
+      side: Schema.Side.SIDE_BUY,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="size"]')
+      .should('have.text', '+5');
+  });
+
+  it('for limit typy must see the Limit price that was set on the order', () => {
+    // 7003-MORD-005
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="price"]')
+      .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"]')
+      .should('have.text', '-');
+  });
+
+  it('must see the time in force applied to the order', () => {
+    // 7003-MORD-006
+    updateOrder({
+      id: orderId,
+      type: Schema.OrderType.TYPE_MARKET,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[col-id='${orderTimeInForce}']`)
+      .should('have.text', "Good 'til Cancelled (GTC)");
+  });
+
+  it('for Active order when is part of a liquidity or peg shape, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+      liquidityProvisionId: '6536',
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+
+  it('for Active order when is part of a liquidity, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+      liquidityProvisionId: '6536',
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+
+  it('for Active order when is part of a peg shape, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+});

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

@@ -8,407 +8,7 @@ import {
   testOrderCancellation,
   testOrderAmendment,
 } from '../support/order-validation';
-
-const orderSymbol = 'market.tradableInstrument.instrument.code';
-const orderSize = 'size';
-const orderType = 'type';
-const orderStatus = 'status';
-const orderRemaining = 'remaining';
-const orderPrice = 'price';
-const orderTimeInForce = 'timeInForce';
-const orderCreatedAt = 'createdAt';
-const cancelOrderBtn = 'cancel';
-const cancelAllOrdersBtn = 'cancelAll';
-const editOrderBtn = 'edit';
-
-describe('orders list', { tags: '@smoke', testIsolation: true }, () => {
-  beforeEach(() => {
-    const subscriptionMocks = getSubscriptionMocks();
-    cy.spy(subscriptionMocks, 'OrdersUpdate');
-    cy.mockTradingPage();
-    cy.mockSubscription(subscriptionMocks);
-    cy.setVegaWallet();
-    cy.visit('/#/markets/market-0');
-    cy.getByTestId('All').click();
-    cy.wait('@Markets');
-  });
-
-  it('renders orders', () => {
-    cy.getByTestId('tab-orders').should('be.visible');
-    cy.getByTestId(cancelAllOrdersBtn).should('be.visible');
-    cy.getByTestId(cancelOrderBtn).should('have.length.at.least', 1);
-    cy.getByTestId(editOrderBtn).should('have.length.at.least', 1);
-    cy.getByTestId('tab-orders').within(() => {
-      cy.get(`[role='rowgroup']`)
-        .first()
-        .within(() => {
-          cy.get(`[col-id='${orderSymbol}']`).each(($symbol) => {
-            cy.wrap($symbol).invoke('text').should('not.be.empty');
-          });
-
-          cy.get(`[col-id='${orderSize}']`).each(($size) => {
-            cy.wrap($size).invoke('text').should('not.be.empty');
-          });
-
-          cy.get(`[col-id='${orderType}']`).each(($type) => {
-            cy.wrap($type).invoke('text').should('not.be.empty');
-          });
-
-          cy.get(`[col-id='${orderStatus}']`).each(($status) => {
-            cy.wrap($status).invoke('text').should('not.be.empty');
-          });
-
-          cy.get(`[col-id='${orderRemaining}']`).each(($remaining) => {
-            cy.wrap($remaining).invoke('text').should('not.be.empty');
-          });
-
-          cy.get(`[col-id='${orderPrice}']`).each(($price) => {
-            cy.wrap($price).invoke('text').should('not.be.empty');
-          });
-
-          cy.get(`[col-id='${orderTimeInForce}']`).each(($timeInForce) => {
-            cy.wrap($timeInForce).invoke('text').should('not.be.empty');
-          });
-
-          cy.get(`[col-id='${orderCreatedAt}']`).each(($dateTime) => {
-            cy.wrap($dateTime).invoke('text').should('not.be.empty');
-          });
-        });
-    });
-  });
-
-  it('partially filled orders should not show close/edit buttons', () => {
-    const partiallyFilledId =
-      '94aead3ca92dc932efcb503631b03a410e2a5d4606cae6083e2406dc38e52f78';
-
-    cy.getByTestId('tab-orders').should('be.visible');
-    cy.get('.ag-header-container').within(() => {
-      cy.get('[col-id="status"]').realHover();
-      cy.get('[col-id="status"] .ag-icon-menu').click();
-    });
-    cy.contains('Partially Filled').click();
-    cy.getByTestId('All').click();
-
-    cy.get(`[row-id="${partiallyFilledId}"]`)
-      .eq(1)
-      .within(() => {
-        cy.get(`[col-id='${orderStatus}']`).should(
-          'have.text',
-          'Partially Filled'
-        );
-        cy.get(`[col-id='${orderRemaining}']`).should('have.text', '7/10');
-        cy.getByTestId(cancelOrderBtn).should('not.exist');
-        cy.getByTestId(editOrderBtn).should('not.exist');
-      });
-  });
-
-  it('orders are sorted by most recent order', () => {
-    // 7003-MORD-002
-    const expectedOrderList = [
-      'BTCUSD.MF21',
-      'SOLUSD',
-      'AAPL.MF21',
-      'BTCUSD.MF21',
-      'BTCUSD.MF21',
-    ];
-    cy.get('.ag-header-container').within(() => {
-      cy.get('[col-id="status"]').realHover();
-      cy.get('[col-id="status"] .ag-icon-menu').click();
-    });
-    cy.contains('Reset').click();
-    cy.getByTestId('All').click();
-
-    cy.getByTestId('tab-orders')
-      .get(`.ag-center-cols-container [col-id='${orderSymbol}']`)
-      .should('have.length.at.least', expectedOrderList.length)
-      .then(($symbols) => {
-        const symbolNames: string[] = [];
-        cy.wrap($symbols)
-          .each(($symbol) => {
-            cy.wrap($symbol)
-              .invoke('text')
-              .then((text) => {
-                symbolNames.push(text);
-              });
-          })
-          .then(() => {
-            expect(symbolNames).to.include.ordered.members(expectedOrderList);
-          });
-      });
-  });
-});
-
-describe('subscribe orders', { tags: '@smoke' }, () => {
-  let orderId = '0';
-  beforeEach(() => {
-    const subscriptionMocks = getSubscriptionMocks();
-    cy.spy(subscriptionMocks, 'OrdersUpdate');
-    cy.mockTradingPage();
-    cy.mockSubscription(subscriptionMocks);
-    cy.setVegaWallet();
-    cy.visit('/#/markets/market-0');
-    cy.getByTestId('All').click();
-    cy.getByTestId('tab-orders').within(() => {
-      cy.get('[col-id="status"][role="columnheader"]')
-        .focus()
-        .find('.ag-header-cell-menu-button')
-        .click();
-      cy.get('.ag-filter-apply-panel-button').click();
-    });
-    orderId = (parseInt(orderId, 10) + 1).toString();
-  });
-  // 7002-SORD-053
-  // 7002-SORD-040
-  // 7003-MORD-001
-
-  it('must see an active order', () => {
-    // 7002-SORD-041
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-    });
-    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Active');
-  });
-
-  it('must see an expired order', () => {
-    // 7002-SORD-042
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_EXPIRED,
-    });
-    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Expired');
-  });
-
-  it('must see a cancelled order', () => {
-    // 7002-SORD-043
-    // NOT COVERED:  see the txn that cancelled it and a link to the block explorer, if cancelled by a user transaction.
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_CANCELLED,
-    });
-    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Cancelled');
-  });
-
-  it('must see a stopped order', () => {
-    // 7002-SORD-044
-    // NOT COVERED:  see an explanation of why stopped
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_STOPPED,
-    });
-    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Stopped');
-  });
-
-  it('must see a partially filled order', () => {
-    // 7002-SORD-045
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_PARTIALLY_FILLED,
-      size: '5',
-      remaining: '1',
-    });
-    cy.getByTestId(`order-status-${orderId}`).should(
-      'have.text',
-      'Partially Filled'
-    );
-    cy.getByTestId(`order-status-${orderId}`)
-      .parentsUntil(`.ag-row`)
-      .siblings(`[col-id=${orderRemaining}]`)
-      .should('have.text', '4/5');
-  });
-
-  it('must see a filled order', () => {
-    // 7002-SORD-046
-    // NOT COVERED:  Must be able to see/link to all trades that were created from this order
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_FILLED,
-    });
-    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled');
-  });
-
-  it('must see a rejected order', () => {
-    // 7002-SORD-047
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_REJECTED,
-      rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_INTERNAL_ERROR,
-    });
-    cy.getByTestId(`order-status-${orderId}`).should(
-      'have.text',
-      'Rejected: Internal error'
-    );
-  });
-
-  it('must see a parked order', () => {
-    // 7002-SORD-048
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_PARKED,
-    });
-    cy.getByTestId(`order-status-${orderId}`).should(
-      'have.text',
-      'Parked: Internal error'
-    );
-  });
-
-  it('must see the size of the order and direction/side -', () => {
-    // 7003-MORD-003
-    // 7003-MORD-004
-    updateOrder({
-      id: orderId,
-      size: '15',
-      side: Schema.Side.SIDE_SELL,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find('[col-id="size"]')
-      .should('have.text', '-15');
-  });
-
-  it('must see the size of the order and direction/side +', () => {
-    // 7003-MORD-003
-    // 7003-MORD-004
-    updateOrder({
-      id: orderId,
-      size: '5',
-      side: Schema.Side.SIDE_BUY,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find('[col-id="size"]')
-      .should('have.text', '+5');
-  });
-
-  it('for limit typy must see the Limit price that was set on the order', () => {
-    // 7003-MORD-005
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find('[col-id="price"]')
-      .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"]')
-      .should('have.text', '-');
-  });
-
-  it('must see the time in force applied to the order', () => {
-    // 7003-MORD-006
-    updateOrder({
-      id: orderId,
-      type: Schema.OrderType.TYPE_MARKET,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find(`[col-id='${orderTimeInForce}']`)
-      .should('have.text', "Good 'til Cancelled (GTC)");
-  });
-
-  it('for Active order when is part of a liquidity or peg shape, must not see an option to amend the individual order ', () => {
-    // 7003-MORD-008
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-      peggedOrder: {},
-      liquidityProvisionId: '6536',
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find(`[data-testid="cancel"]`)
-      .should('not.exist');
-    cy.get(`[row-id=${orderId}]`)
-      .find(`[data-testid="edit"]`)
-      .should('not.exist');
-  });
-
-  it('for Active order when is part of a liquidity, must not see an option to amend the individual order ', () => {
-    // 7003-MORD-008
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-      peggedOrder: {},
-      liquidityProvisionId: '6536',
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find(`[data-testid="cancel"]`)
-      .should('not.exist');
-    cy.get(`[row-id=${orderId}]`)
-      .find(`[data-testid="edit"]`)
-      .should('not.exist');
-  });
-
-  it('for Active order when is part of a peg shape, must not see an option to amend the individual order ', () => {
-    // 7003-MORD-008
-    updateOrder({
-      id: orderId,
-      status: Schema.OrderStatus.STATUS_ACTIVE,
-      peggedOrder: {},
-    });
-    cy.get(`[row-id=${orderId}]`)
-      .find(`[data-testid="cancel"]`)
-      .should('not.exist');
-    cy.get(`[row-id=${orderId}]`)
-      .find(`[data-testid="edit"]`)
-      .should('not.exist');
-  });
-});
+import { vega as vegaProtos } from '@vegaprotocol/protos';
 
 describe('amend and cancel order', { tags: '@smoke' }, () => {
   beforeEach(() => {
@@ -453,8 +53,8 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
           orderId: orderId,
           marketId: 'market-0',
           price: '10000000',
-          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-          sizeDelta: 0,
+          timeInForce: vegaProtos.Order.TimeInForce.TIME_IN_FORCE_GTC,
+          sizeDelta: BigInt(0),
         };
         testOrderAmendment(order);
       });

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

@@ -1,4 +1,5 @@
-import { checkSorting, aliasGQLQuery } from '@vegaprotocol/cypress';
+import { checkSorting } from '@vegaprotocol/cypress';
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { marketsDataQuery } from '@vegaprotocol/mock';
 import { positionsQuery } from '@vegaprotocol/mock';
 
@@ -14,12 +15,13 @@ const toastContent = 'toast-content';
 const tooltipContent = 'tooltip-content';
 // #endregion
 
+beforeEach(() => {
+  cy.mockTradingPage();
+  cy.mockSubscription();
+  cy.setVegaWallet();
+});
+
 describe('positions', { tags: '@smoke', testIsolation: true }, () => {
-  beforeEach(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-  });
   it('renders positions on trading page', () => {
     visitAndClickPositions();
     // 7004-POSI-001
@@ -62,14 +64,7 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
     );
   });
 });
-
 describe('positions', { tags: '@regression', testIsolation: true }, () => {
-  beforeEach(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-  });
-
   it('rows should be displayed despite errors', () => {
     const errors = [
       {
@@ -169,9 +164,8 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
     );
   });
 
-  // let elementWidth: number;
-
   it('Resize column', () => {
+    let elementWidth: number;
     visitAndClickPositions();
     cy.get('.ag-overlay-loading-wrapper').should('not.be.visible');
     cy.get('.ag-header-container').within(() => {
@@ -186,33 +180,29 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
     cy.get(`[col-id="marketName"]`)
       .invoke('width')
       .should('be.greaterThan', 250);
-  });
+    cy.get(`[col-id="marketName"]`)
+      .invoke('width')
+      .then((width) => {
+        elementWidth = width as number;
+      })
+      .then(() => {
+        let localStorageCopy: Record<string, string>;
+        cy.window().then((win) => {
+          localStorageCopy = { ...win.localStorage };
+        });
 
-  // This test depends on the previous one
-  it('Has persisted column widths', () => {
-    const width = 400;
+        cy.reload();
+        cy.window().then((win) => {
+          Object.keys(localStorageCopy).forEach((key) => {
+            win.localStorage.setItem(key, localStorageCopy[key]);
+          });
+        });
 
-    cy.window().then((win) => {
-      win.localStorage.setItem(
-        'vega_positions_store',
-        JSON.stringify({
-          state: {
-            gridStore: {
-              columnState: [{ colId: 'marketName', width }],
-            },
-          },
-        })
-      );
-    });
-
-    visitAndClickPositions();
-
-    // 7004-POSI-012
-    cy.get('.ag-center-cols-container .ag-row')
-      .first()
-      .find('[col-id="marketName"]')
-      .invoke('outerWidth')
-      .should('equal', width);
+        // 7004-POSI-012
+        cy.get('[col-id="marketName"]')
+          .invoke('width')
+          .should('equal', elementWidth);
+      });
   });
 
   it('Scroll horizontally', () => {
@@ -301,7 +291,6 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
     cy.getByTestId(dialogContent).should('be.visible');
   });
 });
-
 function validatePositionsDisplayed(multiKey = false) {
   cy.getByTestId('tab-positions').should('be.visible');
   cy.getByTestId('tab-positions')
@@ -337,7 +326,6 @@ function validatePositionsDisplayed(multiKey = false) {
 
   cy.getByTestId('close-position').should('be.visible').and('have.length', 3);
 }
-
 function assertPNLColor(
   pnlSelector: string,
   positiveClass: string,
@@ -359,7 +347,6 @@ function assertPNLColor(
     }
   });
 }
-
 function visitAndClickPositions() {
   cy.visit('/#/markets/market-0');
   cy.getByTestId(positions).click();

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

@@ -1,11 +1,11 @@
-import type { OrderSubmission } from '@vegaprotocol/wallet';
+import type { OrderObj } from '@vegaprotocol/orders';
 
 const orderSizeField = 'order-size';
 const orderPriceField = 'order-price';
 const orderTIFDropDown = 'order-tif';
 const placeOrderBtn = 'place-order';
 
-export const createOrder = (order: OrderSubmission): void => {
+export const createOrder = (order: OrderObj): void => {
   cy.log('Placing order', order);
   const { type, side, size, price, timeInForce, expiresAt } = order;
 

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

@@ -3,14 +3,15 @@ import type {
   OrderAmendmentBody,
   OrderCancellation,
   OrderCancellationBody,
-  OrderSubmission,
   OrderSubmissionBody,
   Transaction,
 } from '@vegaprotocol/wallet';
+import { normalizeOrderSubmission } from '@vegaprotocol/deal-ticket';
+import type { OrderObj } from '@vegaprotocol/orders';
 
 export const testOrderSubmission = (
-  order: OrderSubmission,
-  expected?: Partial<OrderSubmission>
+  order: OrderObj,
+  expected?: Partial<OrderObj>
 ) => {
   const expectedOrder = {
     ...order,
@@ -18,7 +19,7 @@ export const testOrderSubmission = (
   };
 
   const transaction: OrderSubmissionBody = {
-    orderSubmission: expectedOrder,
+    orderSubmission: normalizeOrderSubmission(expectedOrder, 0, 0),
   };
   vegaWalletTransaction(transaction);
   verifyToast();
@@ -63,7 +64,7 @@ const vegaWalletTransaction = (transaction: Transaction) => {
       expect(req.body.params).to.deep.equal({
         publicKey: Cypress.env('VEGA_PUBLIC_KEY'),
         sendingMode: 'TYPE_SYNC',
-        transaction,
+        transaction: JSON.parse(JSON.stringify(transaction)), // this is because BigInt needs to be serialized
       });
       expect(req.headers.authorization).to.equal(
         `VWT ${Cypress.env('VEGA_WALLET_API_TOKEN')}`

apps/trading/.env.devnet

@@ -2,7 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
 NX_VEGA_ENV=DEVNET
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz

apps/trading/.env.mainnet

@@ -1,7 +1,7 @@
 NX_ETHEREUM_PROVIDER_URL=https://eth-mainnet.gateway.pokt.network/v1/lb/af6a2d529a11f8158bc8ca2a
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
-NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_ENV=MAINNET
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz

apps/trading/.env.stagnet1

@@ -2,7 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_ENV=STAGNET1
 NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks

apps/trading/.env.testnet

@@ -2,7 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
 NX_VEGA_ENV=TESTNET
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

apps/trading/.env.validators-testnet

@@ -2,7 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_EXPLORER_URL=https://explorer.validators-testnet.vega.rocks

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

@@ -1,5 +1,7 @@
 import {
   matchFilter,
+  liquidityProvisionsDataProvider,
+  LiquidityTable,
   lpAggregatedDataProvider,
   useCheckLiquidityStatus,
 } from '@vegaprotocol/liquidity';
@@ -22,16 +24,18 @@ import {
   ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 
 import { Header, HeaderStat, HeaderTitle } from '../../components/header';
 
+import type { AgGridReact } from 'ag-grid-react';
+
+import type { Filter } from '@vegaprotocol/liquidity';
 import { Link, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 
 import { useMarket, useStaticMarketData } from '@vegaprotocol/markets';
 import { DocsLinks } from '@vegaprotocol/environment';
-import { LiquidityContainer } from '../../components/liquidity-container';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -45,6 +49,65 @@ export const Liquidity = () => {
   return <LiquidityViewContainer marketId={marketId} />;
 };
 
+const useReloadLiquidityData = (marketId: string | undefined) => {
+  const { reload } = useDataProvider({
+    dataProvider: liquidityProvisionsDataProvider,
+    variables: { marketId: marketId || '' },
+    update: () => true,
+    skip: !marketId,
+  });
+  useEffect(() => {
+    const interval = setInterval(reload, 30000);
+    return () => clearInterval(interval);
+  }, [reload]);
+};
+
+export const LiquidityContainer = ({
+  marketId,
+  filter,
+}: {
+  marketId: string | undefined;
+  filter?: Filter;
+}) => {
+  const gridRef = useRef<AgGridReact | null>(null);
+  const { data: market } = useMarket(marketId);
+
+  // To be removed when liquidityProvision subscriptions are working
+  useReloadLiquidityData(marketId);
+
+  const { data, error } = useDataProvider({
+    dataProvider: lpAggregatedDataProvider,
+    variables: { marketId: marketId || '', filter },
+    skip: !marketId,
+  });
+
+  const assetDecimalPlaces =
+    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
+  const quantum =
+    market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
+  const symbol =
+    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+
+  const { params } = useNetworkParams([
+    NetworkParams.market_liquidity_stakeToCcyVolume,
+  ]);
+  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
+
+  return (
+    <div className="h-full relative">
+      <LiquidityTable
+        ref={gridRef}
+        rowData={data}
+        symbol={symbol}
+        assetDecimalPlaces={assetDecimalPlaces}
+        quantum={quantum}
+        stakeToCcyVolume={stakeToCcyVolume}
+        overlayNoRowsTemplate={error ? error.message : t('No data')}
+      />
+    </div>
+  );
+};
+
 const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
   const { data: market } = useMarket(marketId);
   const { data: marketData } = useStaticMarketData(marketId);

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

@@ -8,7 +8,7 @@ import {
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
-import { useCallback, useState, useMemo } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -184,6 +184,7 @@ const MarketList = ({
   if (error) {
     return <div>{error.message}</div>;
   }
+
   return (
     <AutoSizer>
       {({ width, height }) => (
@@ -203,29 +204,6 @@ const MarketList = ({
   );
 };
 
-interface ListItemData {
-  data: MarketMaybeWithDataAndCandles[];
-  onSelect?: (marketId: string) => void;
-  currentMarketId?: string;
-}
-
-const ListItem = ({
-  index,
-  style,
-  data,
-}: {
-  index: number;
-  style: CSSProperties;
-  data: ListItemData;
-}) => (
-  <MarketSelectorItem
-    market={data.data[index]}
-    currentMarketId={data.currentMarketId}
-    style={style}
-    onSelect={data.onSelect}
-  />
-);
-
 const List = ({
   data,
   loading,
@@ -234,20 +212,28 @@ const List = ({
   onSelect,
   noItems,
   currentMarketId,
-}: ListItemData & {
+}: {
+  data: MarketMaybeWithDataAndCandles[];
   loading: boolean;
   width: number;
   height: number;
   noItems: string;
+  onSelect?: (marketId: string) => void;
+  currentMarketId?: string;
 }) => {
-  const itemKey = useCallback(
-    (index: number, data: ListItemData) => data.data[index].id,
-    []
-  );
-  const itemData = useMemo(
-    () => ({ data, onSelect, currentMarketId }),
-    [data, onSelect, currentMarketId]
-  );
+  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 }}>
@@ -273,13 +259,11 @@ const List = ({
     <FixedSizeList
       className="virtualized-list"
       itemCount={data.length}
-      itemData={itemData}
       itemSize={130}
-      itemKey={itemKey}
       width={width}
       height={height}
     >
-      {ListItem}
+      {row}
     </FixedSizeList>
   );
 };

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

@@ -19,7 +19,10 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import {
+  useMarketClickHandler,
+  useMarketLiquidityClickHandler,
+} from '../../lib/hooks/use-market-click-handler';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { HeaderTitle } from '../../components/header';
 import {
@@ -46,6 +49,7 @@ const MarketBottomPanel = memo(
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'bottom' });
     const { screenSize } = useScreenDimensions();
     const onMarketClick = useMarketClickHandler(true);
+    const onOrderTypeClick = useMarketLiquidityClickHandler();
 
     return 'xxxl' === screenSize ? (
       <ResizableGrid
@@ -65,6 +69,10 @@ const MarketBottomPanel = memo(
                   <TradingViews.orders.component
                     marketId={marketId}
                     filter={Filter.Open}
+                    onMarketClick={onMarketClick}
+                    onOrderTypeClick={onOrderTypeClick}
+                    enforceBottomPlaceholder
+                    storeKey="marketOpenOrders"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -73,6 +81,10 @@ const MarketBottomPanel = memo(
                   <TradingViews.orders.component
                     marketId={marketId}
                     filter={Filter.Closed}
+                    onMarketClick={onMarketClick}
+                    onOrderTypeClick={onOrderTypeClick}
+                    enforceBottomPlaceholder
+                    storeKey="marketClosedOrders"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -81,12 +93,22 @@ const MarketBottomPanel = memo(
                   <TradingViews.orders.component
                     marketId={marketId}
                     filter={Filter.Rejected}
+                    onMarketClick={onMarketClick}
+                    onOrderTypeClick={onOrderTypeClick}
+                    enforceBottomPlaceholder
+                    storeKey="marketRejectOrders"
                   />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="orders" name={t('All')}>
                 <VegaWalletContainer>
-                  <TradingViews.orders.component marketId={marketId} />
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    onMarketClick={onMarketClick}
+                    onOrderTypeClick={onOrderTypeClick}
+                    enforceBottomPlaceholder
+                    storeKey="marketAllOrders"
+                  />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="fills" name={t('Fills')}>
@@ -94,6 +116,7 @@ const MarketBottomPanel = memo(
                   <TradingViews.fills.component
                     marketId={marketId}
                     onMarketClick={onMarketClick}
+                    storeKey="marketFills"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -111,6 +134,8 @@ const MarketBottomPanel = memo(
                 <VegaWalletContainer>
                   <TradingViews.positions.component
                     onMarketClick={onMarketClick}
+                    noBottomPlaceholder
+                    storeKey="marketPositions"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -120,6 +145,7 @@ const MarketBottomPanel = memo(
                     pinnedAsset={pinnedAsset}
                     onMarketClick={onMarketClick}
                     hideButtons
+                    storeKey="marketCollateral"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -132,7 +158,10 @@ const MarketBottomPanel = memo(
         <Tabs storageKey="console-trade-grid-bottom">
           <Tab id="positions" name={t('Positions')}>
             <VegaWalletContainer>
-              <TradingViews.positions.component onMarketClick={onMarketClick} />
+              <TradingViews.positions.component
+                onMarketClick={onMarketClick}
+                storeKey="marketPositions"
+              />
             </VegaWalletContainer>
           </Tab>
           <Tab id="open-orders" name={t('Open')}>
@@ -140,6 +169,10 @@ const MarketBottomPanel = memo(
               <TradingViews.orders.component
                 marketId={marketId}
                 filter={Filter.Open}
+                onMarketClick={onMarketClick}
+                onOrderTypeClick={onOrderTypeClick}
+                enforceBottomPlaceholder
+                storeKey="marketOpenOrders"
               />
             </VegaWalletContainer>
           </Tab>
@@ -148,6 +181,10 @@ const MarketBottomPanel = memo(
               <TradingViews.orders.component
                 marketId={marketId}
                 filter={Filter.Closed}
+                onMarketClick={onMarketClick}
+                onOrderTypeClick={onOrderTypeClick}
+                enforceBottomPlaceholder
+                storeKey="marketClosedOrders"
               />
             </VegaWalletContainer>
           </Tab>
@@ -156,12 +193,22 @@ const MarketBottomPanel = memo(
               <TradingViews.orders.component
                 marketId={marketId}
                 filter={Filter.Rejected}
+                onMarketClick={onMarketClick}
+                onOrderTypeClick={onOrderTypeClick}
+                enforceBottomPlaceholder
+                storeKey="marketRejectedOrders"
               />
             </VegaWalletContainer>
           </Tab>
           <Tab id="orders" name={t('All')}>
             <VegaWalletContainer>
-              <TradingViews.orders.component marketId={marketId} />
+              <TradingViews.orders.component
+                marketId={marketId}
+                onMarketClick={onMarketClick}
+                onOrderTypeClick={onOrderTypeClick}
+                enforceBottomPlaceholder
+                storeKey="marketAllOrders"
+              />
             </VegaWalletContainer>
           </Tab>
           <Tab id="fills" name={t('Fills')}>
@@ -169,6 +216,7 @@ const MarketBottomPanel = memo(
               <TradingViews.fills.component
                 marketId={marketId}
                 onMarketClick={onMarketClick}
+                storeKey="marketFills"
               />
             </VegaWalletContainer>
           </Tab>
@@ -178,6 +226,7 @@ const MarketBottomPanel = memo(
                 pinnedAsset={pinnedAsset}
                 onMarketClick={onMarketClick}
                 hideButtons
+                storeKey="marketCollateral"
               />
             </VegaWalletContainer>
           </Tab>

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

@@ -1,19 +1,18 @@
-import type { ComponentProps } from 'react';
-import { Splash } from '@vegaprotocol/ui-toolkit';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
 import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
+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 { OrderbookContainer } from '@vegaprotocol/market-depth';
-import { Filter } from '@vegaprotocol/orders';
-import { NO_MARKET } from './constants';
-import { FillsContainer } from '../../components/fills-container';
-import { PositionsContainer } from '../../components/positions-container';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { AccountsContainer } from '../../components/accounts-container';
-import { LiquidityContainer } from '../../components/liquidity-container';
-import type { OrderContainerProps } from '../../components/orders-container';
-import { OrdersContainer } from '../../components/orders-container';
+import { NO_MARKET } from './constants';
+import { LiquidityContainer } from '../liquidity/liquidity';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -66,25 +65,25 @@ export const TradingViews = {
   positions: { label: 'Positions', component: PositionsContainer },
   activeOrders: {
     label: 'Active',
-    component: (props: OrderContainerProps) => (
-      <OrdersContainer {...props} filter={Filter.Open} />
+    component: (props: OrderListContainerProps) => (
+      <OrderListContainer {...props} filter={Filter.Open} />
     ),
   },
   closedOrders: {
     label: 'Closed',
-    component: (props: OrderContainerProps) => (
-      <OrdersContainer {...props} filter={Filter.Closed} />
+    component: (props: OrderListContainerProps) => (
+      <OrderListContainer {...props} filter={Filter.Closed} />
     ),
   },
   rejectedOrders: {
     label: 'Rejected',
-    component: (props: OrderContainerProps) => (
-      <OrdersContainer {...props} filter={Filter.Rejected} />
+    component: (props: OrderListContainerProps) => (
+      <OrderListContainer {...props} filter={Filter.Rejected} />
     ),
   },
   orders: {
     label: 'All',
-    component: OrdersContainer,
+    component: OrderListContainer,
   },
   collateral: { label: 'Collateral', component: AccountsContainer },
   fills: { label: 'Fills', component: FillsContainer },

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

@@ -313,6 +313,7 @@ const ClosedMarketsDataGrid = ({
         minWidth: 100,
       }}
       overlayNoRowsTemplate={error ? error.message : t('No markets')}
+      storeKey="closedMarkets"
     />
   );
 };

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

@@ -2,6 +2,7 @@ import { Button } from '@vegaprotocol/ui-toolkit';
 import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useRef } from 'react';
@@ -16,13 +17,17 @@ export const DepositsContainer = () => {
     skip: !pubKey,
   });
   const openDepositDialog = useDepositDialog((state) => state.open);
+  const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
   return (
     <div className="h-full">
-      <DepositsTable
-        rowData={data}
-        ref={gridRef}
-        overlayNoRowsTemplate={error ? error.message : t('No deposits')}
-      />
+      <div className="h-full relative">
+        <DepositsTable
+          rowData={data}
+          ref={gridRef}
+          {...bottomPlaceholderProps}
+          overlayNoRowsTemplate={error ? error.message : t('No deposits')}
+        />
+      </div>
       {!isReadOnly && (
         <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-3 absolute dark:bg-black/75 bg-white/75 rounded">
           <Button

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

@@ -1,39 +1,29 @@
-import { useEffect } from 'react';
-import type { ReactNode } from 'react';
-import { LayoutPriority } from 'allotment';
 import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
-import { usePaneLayout } from '@vegaprotocol/react-helpers';
+import { PositionsContainer } from '@vegaprotocol/positions';
+import { OrderListContainer } from '@vegaprotocol/orders';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
-import { usePageTitleStore } from '../../stores';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
-import { AccountsContainer } from '../../components/accounts-container';
-import { DepositsContainer } from './deposits-container';
-import { FillsContainer } from '../../components/fills-container';
-import { PositionsContainer } from '../../components/positions-container';
 import { WithdrawalsContainer } from './withdrawals-container';
-import { OrdersContainer } from '../../components/orders-container';
+import { FillsContainer } from '@vegaprotocol/fills';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { usePaneLayout } from '@vegaprotocol/react-helpers';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
-import { LedgerContainer } from '../../components/ledger-container';
+import { DepositsContainer } from './deposits-container';
+import { LayoutPriority } from 'allotment';
+import { usePageTitleStore } from '../../stores';
+import { LedgerContainer } from '@vegaprotocol/ledger';
+import { AccountsContainer } from '../../components/accounts-container';
 import { AccountHistoryContainer } from './account-history-container';
+import {
+  useMarketClickHandler,
+  useMarketLiquidityClickHandler,
+} from '../../lib/hooks/use-market-click-handler';
 import {
   ResizableGrid,
   ResizableGridPanel,
 } from '../../components/resizable-grid';
 
-const WithdrawalsIndicator = () => {
-  const { ready } = useIncompleteWithdrawals();
-  if (!ready || ready.length === 0) {
-    return null;
-  }
-  return (
-    <span className="bg-vega-blue-450 text-white text-[10px] rounded p-[3px] pb-[2px] leading-none">
-      {ready.length}
-    </span>
-  );
-};
-
 export const Portfolio = () => {
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
@@ -44,6 +34,7 @@ export const Portfolio = () => {
   }, [updateTitle]);
 
   const onMarketClick = useMarketClickHandler(true);
+  const onOrderTypeClick = useMarketLiquidityClickHandler();
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'h-full max-h-full flex flex-col';
   return (
@@ -59,17 +50,29 @@ export const Portfolio = () => {
               </Tab>
               <Tab id="positions" name={t('Positions')}>
                 <VegaWalletContainer>
-                  <PositionsContainer onMarketClick={onMarketClick} allKeys />
+                  <PositionsContainer
+                    onMarketClick={onMarketClick}
+                    noBottomPlaceholder
+                    storeKey="portfolioPositions"
+                    allKeys
+                  />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="orders" name={t('Orders')}>
                 <VegaWalletContainer>
-                  <OrdersContainer />
+                  <OrderListContainer
+                    onMarketClick={onMarketClick}
+                    onOrderTypeClick={onOrderTypeClick}
+                    storeKey="portfolioOrders"
+                  />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="fills" name={t('Fills')}>
                 <VegaWalletContainer>
-                  <FillsContainer onMarketClick={onMarketClick} />
+                  <FillsContainer
+                    onMarketClick={onMarketClick}
+                    storeKey="portfolioFills"
+                  />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
@@ -89,7 +92,10 @@ export const Portfolio = () => {
             <Tabs storageKey="console-portfolio-bottom">
               <Tab id="collateral" name={t('Collateral')}>
                 <VegaWalletContainer>
-                  <AccountsContainer />
+                  <AccountsContainer
+                    storeKey="portfolioCollateral"
+                    onMarketClick={onMarketClick}
+                  />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="deposits" name={t('Deposits')}>
@@ -97,11 +103,7 @@ export const Portfolio = () => {
                   <DepositsContainer />
                 </VegaWalletContainer>
               </Tab>
-              <Tab
-                id="withdrawals"
-                name={t('Withdrawals')}
-                indicator={<WithdrawalsIndicator />}
-              >
+              <Tab id="withdrawals" name={t('Withdrawals')}>
                 <WithdrawalsContainer />
               </Tab>
             </Tabs>

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

@@ -3,7 +3,6 @@ import {
   withdrawalProvider,
   useWithdrawalDialog,
   WithdrawalsTable,
-  useIncompleteWithdrawals,
 } from '@vegaprotocol/withdraws';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
@@ -18,7 +17,6 @@ export const WithdrawalsContainer = () => {
     skip: !pubKey,
   });
   const openWithdrawDialog = useWithdrawalDialog((state) => state.open);
-  const { ready, delayed } = useIncompleteWithdrawals();
 
   return (
     <VegaWalletContainer>
@@ -27,8 +25,6 @@ export const WithdrawalsContainer = () => {
           data-testid="withdrawals-history"
           rowData={data}
           overlayNoRowsTemplate={error ? error.message : t('No withdrawals')}
-          ready={ready}
-          delayed={delayed}
         />
       </div>
       {!isReadOnly && (

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

@@ -8,19 +8,16 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
 import { AccountManager, useTransferDialog } from '@vegaprotocol/accounts';
 import { useDepositDialog } from '@vegaprotocol/deposits';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import type { DataGridSlice } from '../../stores/datagrid-store-slice';
-import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 
 export const AccountsContainer = ({
   pinnedAsset,
   hideButtons,
+  storeKey,
   onMarketClick,
 }: {
   pinnedAsset?: PinnedAsset;
   hideButtons?: boolean;
+  storeKey?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }) => {
   const { pubKey, isReadOnly } = useVegaWallet();
@@ -29,12 +26,6 @@ export const AccountsContainer = ({
   const openDepositDialog = useDepositDialog((store) => store.open);
   const openTransferDialog = useTransferDialog((store) => store.open);
 
-  const gridStore = useAccountStore((store) => store.gridStore);
-  const updateGridStore = useAccountStore((store) => store.updateGridStore);
-  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
-    updateGridStore(colState);
-  });
-
   const onClickAsset = useCallback(
     (assetId?: string) => {
       assetId && openAssetDetailsDialog(assetId);
@@ -60,7 +51,7 @@ export const AccountsContainer = ({
         onMarketClick={onMarketClick}
         isReadOnly={isReadOnly}
         pinnedAsset={pinnedAsset}
-        gridProps={gridStoreCallbacks}
+        storeKey={storeKey}
       />
       {!isReadOnly && !hideButtons && (
         <div className="flex gap-2 justify-end p-2 px-[11px] absolute lg:fixed bottom-0 right-3 dark:bg-black/75 bg-white/75 rounded">
@@ -84,9 +75,3 @@ export const AccountsContainer = ({
     </div>
   );
 };
-
-const useAccountStore = create<DataGridSlice>()(
-  persist(createDataGridSlice, {
-    name: 'vega_accounts_store',
-  })
-);

apps/trading/components/app-loader/web3-provider.tsx

@@ -1,16 +1,13 @@
-import type { DefaultWeb3ProviderContextShape } from '@vegaprotocol/web3';
 import {
   useEthereumConfig,
   createConnectors,
   Web3Provider as Web3ProviderInternal,
   useWeb3ConnectStore,
-  createDefaultProvider,
 } from '@vegaprotocol/web3';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
-import { useState } from 'react';
 import { useEffect } from 'react';
 
 export const Web3Provider = ({ children }: { children: ReactNode }) => {
@@ -20,13 +17,10 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
 
   const connectors = useWeb3ConnectStore((store) => store.connectors);
   const initializeConnectors = useWeb3ConnectStore((store) => store.initialize);
-  const [defaultProvider, setDefaultProvider] = useState<
-    DefaultWeb3ProviderContextShape['provider'] | undefined
-  >(undefined);
 
   useEffect(() => {
     if (config?.chain_id) {
-      initializeConnectors(
+      return initializeConnectors(
         createConnectors(
           ETHEREUM_PROVIDER_URL,
           Number(config?.chain_id),
@@ -35,11 +29,6 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
         ),
         Number(config.chain_id)
       );
-      const defaultProvider = createDefaultProvider(
-        ETHEREUM_PROVIDER_URL,
-        Number(config?.chain_id)
-      );
-      setDefaultProvider(defaultProvider);
     }
   }, [
     config?.chain_id,
@@ -60,10 +49,7 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
       }}
       noDataMessage={t('Could not fetch Ethereum configuration')}
     >
-      <Web3ProviderInternal
-        connectors={connectors}
-        defaultProvider={defaultProvider}
-      >
+      <Web3ProviderInternal connectors={connectors}>
         <>{children}</>
       </Web3ProviderInternal>
     </AsyncRenderer>

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

@@ -1,49 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { FillsManager } from '@vegaprotocol/fills';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import type { DataGridSlice } from '../../stores/datagrid-store-slice';
-import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-
-export const FillsContainer = ({
-  marketId,
-  onMarketClick,
-}: {
-  marketId?: string;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-}) => {
-  const { pubKey } = useVegaWallet();
-
-  const gridStore = useFillsStore((store) => store.gridStore);
-  const updateGridStore = useFillsStore((store) => store.updateGridStore);
-
-  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
-    updateGridStore(colState);
-  });
-
-  if (!pubKey) {
-    return (
-      <Splash>
-        <p>{t('Please connect Vega wallet')}</p>
-      </Splash>
-    );
-  }
-
-  return (
-    <FillsManager
-      partyId={pubKey}
-      marketId={marketId}
-      onMarketClick={onMarketClick}
-      gridProps={gridStoreCallbacks}
-    />
-  );
-};
-
-const useFillsStore = create<DataGridSlice>()(
-  persist(createDataGridSlice, {
-    name: 'vega_fills_store',
-  })
-);

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

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

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

@@ -1 +0,0 @@
-export * from './ledger-container';

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

@@ -1,36 +0,0 @@
-import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
-import { LedgerManager } from '@vegaprotocol/ledger';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { DataGridSlice } from '../../stores/datagrid-store-slice';
-import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-export const LedgerContainer = () => {
-  const { pubKey } = useVegaWallet();
-
-  const gridStore = useLedgerStore((store) => store.gridStore);
-  const updateGridStore = useLedgerStore((store) => store.updateGridStore);
-
-  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
-    updateGridStore(colState);
-  });
-
-  if (!pubKey) {
-    return (
-      <Splash>
-        <p>{t('Please connect Vega wallet')}</p>
-      </Splash>
-    );
-  }
-
-  return <LedgerManager partyId={pubKey} gridProps={gridStoreCallbacks} />;
-};
-
-const useLedgerStore = create<DataGridSlice>()(
-  persist(createDataGridSlice, {
-    name: 'vega_ledger_store',
-  })
-);

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

@@ -1 +0,0 @@
-export * from './liquidity-container';

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

@@ -1,93 +0,0 @@
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
-import {
-  lpAggregatedDataProvider,
-  type Filter,
-  LiquidityTable,
-  liquidityProvisionsDataProvider,
-} from '@vegaprotocol/liquidity';
-import { useMarket } from '@vegaprotocol/markets';
-import {
-  NetworkParams,
-  useNetworkParams,
-} from '@vegaprotocol/network-parameters';
-import type { AgGridReact } from 'ag-grid-react';
-import type { DataGridSlice } from '../../stores/datagrid-store-slice';
-import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-import { useEffect, useRef } from 'react';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-export const LiquidityContainer = ({
-  marketId,
-  filter,
-}: {
-  marketId: string | undefined;
-  filter?: Filter;
-}) => {
-  const gridRef = useRef<AgGridReact | null>(null);
-
-  const gridStore = useLiquidityStore((store) => store.gridStore);
-  const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
-
-  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
-    updateGridStore(colState);
-  });
-  const { data: market } = useMarket(marketId);
-
-  // To be removed when liquidityProvision subscriptions are working
-  useReloadLiquidityData(marketId);
-
-  const { data, error } = useDataProvider({
-    dataProvider: lpAggregatedDataProvider,
-    variables: { marketId: marketId || '', filter },
-    skip: !marketId,
-  });
-
-  const assetDecimalPlaces =
-    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
-  const quantum =
-    market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
-  const symbol =
-    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
-
-  const { params } = useNetworkParams([
-    NetworkParams.market_liquidity_stakeToCcyVolume,
-  ]);
-  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
-
-  return (
-    <div className="h-full relative">
-      <LiquidityTable
-        ref={gridRef}
-        rowData={data}
-        symbol={symbol}
-        assetDecimalPlaces={assetDecimalPlaces}
-        quantum={quantum}
-        stakeToCcyVolume={stakeToCcyVolume}
-        overlayNoRowsTemplate={error ? error.message : t('No data')}
-        {...gridStoreCallbacks}
-      />
-    </div>
-  );
-};
-
-const useReloadLiquidityData = (marketId: string | undefined) => {
-  const { reload } = useDataProvider({
-    dataProvider: liquidityProvisionsDataProvider,
-    variables: { marketId: marketId || '' },
-    update: () => true,
-    skip: !marketId,
-  });
-  useEffect(() => {
-    const interval = setInterval(reload, 30000);
-    return () => clearInterval(interval);
-  }, [reload]);
-};
-
-const useLiquidityStore = create<DataGridSlice>()(
-  persist(createDataGridSlice, {
-    name: 'vega_ledger_store',
-  })
-);

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

@@ -1 +0,0 @@
-export * from './orders-container';

apps/trading/components/orders-container/orders-container.spec.tsx

@@ -1,106 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import {
-  FilterStatusValue,
-  STORAGE_KEY,
-  useOrderListGridState,
-} from './orders-container';
-import { Filter } from '@vegaprotocol/orders';
-import { OrderType } from '@vegaprotocol/types';
-
-describe('useOrderListGridState', () => {
-  afterAll(() => {
-    localStorage.clear();
-  });
-
-  const setup = (filter: Filter | undefined) => {
-    return renderHook(() => useOrderListGridState(filter));
-  };
-
-  it.each(Object.values(Filter))(
-    'providers correct AgGrid filter for %s',
-    (filter) => {
-      const { result } = setup(filter);
-      expect(typeof result.current.updateGridState).toBe('function');
-      expect(result.current.gridState).toEqual({
-        columnState: undefined,
-        filterModel: {
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        },
-      });
-    }
-  );
-
-  it('provides correct AgGrid filter for all', () => {
-    const { result } = setup(undefined);
-    expect(typeof result.current.updateGridState).toBe('function');
-    expect(result.current.gridState).toEqual({
-      columnState: undefined,
-      filterModel: undefined,
-    });
-  });
-
-  it.each(Object.values(Filter))(
-    'sets and stores column state and filters for %s',
-    (filter) => {
-      const filterModel = {
-        type: {
-          value: [OrderType.TYPE_LIMIT],
-        },
-      };
-      const { result } = setup(filter);
-
-      act(() => {
-        result.current.updateGridState(filter, {
-          filterModel,
-        });
-      });
-
-      expect(result.current.gridState).toEqual({
-        columnState: undefined,
-        filterModel: {
-          ...filterModel,
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        },
-      });
-
-      const columnState = [{ colId: 'status', width: 200 }];
-
-      act(() => {
-        result.current.updateGridState(filter, {
-          columnState,
-        });
-      });
-
-      expect(result.current.gridState).toEqual({
-        columnState,
-        filterModel: {
-          ...filterModel,
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        },
-      });
-
-      const storeKeyMap = {
-        [Filter.Open]: 'open',
-        [Filter.Rejected]: 'rejected',
-        [Filter.Closed]: 'closed',
-      };
-
-      expect(JSON.parse(localStorage.getItem(STORAGE_KEY) || '')).toMatchObject(
-        {
-          state: {
-            [storeKeyMap[filter]]: {
-              columnState,
-              filterModel, // no need to check that status is set, hook will return status
-            },
-          },
-        }
-      );
-    }
-  );
-});

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

@@ -1,166 +0,0 @@
-import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
-import { Filter } from '@vegaprotocol/orders';
-import { OrderListManager } from '@vegaprotocol/orders';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import type { DataGridStore } from '../../stores/datagrid-store-slice';
-import { OrderStatus } from '@vegaprotocol/types';
-
-export const FilterStatusValue = {
-  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
-  [Filter.Closed]: [
-    OrderStatus.STATUS_CANCELLED,
-    OrderStatus.STATUS_EXPIRED,
-    OrderStatus.STATUS_FILLED,
-    OrderStatus.STATUS_PARTIALLY_FILLED,
-    OrderStatus.STATUS_STOPPED,
-  ],
-  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
-};
-
-export interface OrderContainerProps {
-  marketId?: string;
-  filter?: Filter;
-}
-
-export const OrdersContainer = ({ marketId, filter }: OrderContainerProps) => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const onMarketClick = useMarketClickHandler(true);
-  const onOrderTypeClick = useMarketLiquidityClickHandler();
-  const { gridState, updateGridState } = useOrderListGridState(filter);
-  const gridStoreCallbacks = useDataGridEvents(gridState, (newState) => {
-    updateGridState(filter, newState);
-  });
-
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-
-  return (
-    <OrderListManager
-      partyId={pubKey}
-      marketId={marketId}
-      filter={filter}
-      onMarketClick={onMarketClick}
-      onOrderTypeClick={onOrderTypeClick}
-      isReadOnly={isReadOnly}
-      gridProps={gridStoreCallbacks}
-    />
-  );
-};
-
-export const STORAGE_KEY = 'vega_order_list_store';
-const useOrderListStore = create<{
-  open: DataGridStore;
-  closed: DataGridStore;
-  rejected: DataGridStore;
-  all: DataGridStore;
-  update: (filter: Filter | undefined, gridStore: DataGridStore) => void;
-}>()(
-  persist(
-    (set) => ({
-      open: {},
-      closed: {},
-      rejected: {},
-      all: {},
-      update: (filter, newStore) => {
-        switch (filter) {
-          case Filter.Open: {
-            set((curr) => ({
-              open: {
-                ...curr.open,
-                ...newStore,
-              },
-            }));
-            return;
-          }
-          case Filter.Closed: {
-            set((curr) => ({
-              closed: {
-                ...curr.closed,
-                ...newStore,
-              },
-            }));
-            return;
-          }
-          case Filter.Rejected: {
-            set((curr) => ({
-              rejected: {
-                ...curr.rejected,
-                ...newStore,
-              },
-            }));
-            return;
-          }
-          case undefined: {
-            set((curr) => ({
-              all: {
-                ...curr.all,
-                ...newStore,
-              },
-            }));
-            return;
-          }
-        }
-      },
-    }),
-    {
-      name: STORAGE_KEY,
-    }
-  )
-);
-
-export const useOrderListGridState = (filter: Filter | undefined) => {
-  const updateGridState = useOrderListStore((store) => store.update);
-  const gridState = useOrderListStore((store) => {
-    // Return the column/filter state for the given filter but ensuring that
-    // each filter controlled by the tab is always applied
-    switch (filter) {
-      case Filter.Open: {
-        return {
-          columnState: store.open.columnState,
-          filterModel: {
-            ...store.open.filterModel,
-            status: {
-              value: FilterStatusValue[Filter.Open],
-            },
-          },
-        };
-      }
-      case Filter.Closed: {
-        return {
-          columnState: store.closed.columnState,
-          filterModel: {
-            ...store.closed.filterModel,
-            status: {
-              value: FilterStatusValue[Filter.Closed],
-            },
-          },
-        };
-      }
-      case Filter.Rejected: {
-        return {
-          columnState: store.rejected.columnState,
-          filterModel: {
-            ...store.rejected.filterModel,
-            status: {
-              value: FilterStatusValue[Filter.Rejected],
-            },
-          },
-        };
-      }
-      default: {
-        return store.all;
-      }
-    }
-  });
-
-  return { gridState, updateGridState };
-};

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

@@ -1 +0,0 @@
-export * from './positions-container';

apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx

@@ -1,25 +1,17 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen, act } from '@testing-library/react';
 import { TelemetryApproval } from './telemetry-approval';
 
-jest.mock('@vegaprotocol/logger', () => ({
-  SentryInit: () => undefined,
-  SentryClose: () => undefined,
-}));
-
-jest.mock('@vegaprotocol/environment', () => ({
-  useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }),
-}));
-
 describe('TelemetryApproval', () => {
-  it('click on checkbox should be properly handled', async () => {
+  it('click on checkbox should be properly handled', () => {
     const helpText = 'My help text';
     render(<TelemetryApproval helpText={helpText} />);
     expect(screen.getByRole('checkbox')).toHaveAttribute(
       'data-state',
       'unchecked'
     );
-    await userEvent.click(screen.getByRole('checkbox'));
+    act(() => {
+      screen.getByRole('checkbox').click();
+    });
     expect(screen.getByRole('checkbox')).toHaveAttribute(
       'data-state',
       'checked'

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

@@ -11,7 +11,6 @@ import { WelcomeNoticeDialog } from './welcome-notice-dialog';
 import { useGlobalStore } from '../../stores';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { Networks } from '@vegaprotocol/environment';
-import { isTestEnv } from '@vegaprotocol/utils';
 
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
@@ -32,7 +31,9 @@ export const WelcomeDialog = () => {
   );
 
   const isRiskDialogNeeded =
-    riskAccepted !== 'true' && VEGA_ENV !== Networks.MAINNET && !isTestEnv();
+    riskAccepted !== 'true' &&
+    VEGA_ENV !== Networks.MAINNET &&
+    !('Cypress' in window);
 
   const isWelcomeDialogNeeded = pathname === '/' || shouldDisplayWelcomeDialog;
 

apps/trading/lib/config/env.ts

@@ -0,0 +1,20 @@
+const windowOrDefault = (key: string, defaultValue?: string) => {
+  if (typeof window !== 'undefined') {
+    if (window._env_ && window._env_[key]) {
+      return window._env_[key];
+    }
+  }
+  return defaultValue || '';
+};
+
+/**
+ * Need to have default value as next in-lines environment variables. Cannot figure out dynamic keys.
+ * So must provide the default with the key so that next can figure it out.
+ */
+export const ENV = {
+  envName: windowOrDefault('NX_VEGA_ENV', process.env['NX_VEGA_ENV']),
+  dsn: windowOrDefault(
+    'NX_TRADING_SENTRY_DSN',
+    process.env['NX_TRADING_SENTRY_DSN']
+  ),
+};

apps/trading/lib/config/index.ts

@@ -0,0 +1 @@
+export * from './env';

apps/trading/lib/hooks/use-telemetry-approval.spec.ts

@@ -12,26 +12,22 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
     .fn()
     .mockImplementation(() => [false, mockSetValue, mockRemoveValue]),
 }));
-jest.mock('@vegaprotocol/environment', () => ({
-  useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }),
-}));
 
 describe('useTelemetryApproval', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-
   it('hook should return proper array', () => {
-    const { result } = renderHook(() => useTelemetryApproval());
-    expect(result.current[0]).toEqual(false);
-    expect(result.current[1]).toEqual(expect.any(Function));
+    const res = renderHook(() => useTelemetryApproval());
+    expect(res.result.current[0]).toEqual(false);
+    expect(res.result.current[1]).toEqual(expect.any(Function));
     expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
   });
 
   it('hook should init stuff properly', async () => {
-    const { result } = renderHook(() => useTelemetryApproval());
+    const res = renderHook(() => useTelemetryApproval());
     await act(() => {
-      result.current[1](true);
+      res.result.current[1](true);
     });
     await waitFor(() => {
       expect(SentryInit).toHaveBeenCalled();
@@ -40,9 +36,9 @@ describe('useTelemetryApproval', () => {
   });
 
   it('hook should close stuff properly', async () => {
-    const { result } = renderHook(() => useTelemetryApproval());
+    const res = renderHook(() => useTelemetryApproval());
     await act(() => {
-      result.current[1](false);
+      res.result.current[1](false);
     });
     await waitFor(() => {
       expect(SentryClose).toHaveBeenCalled();

apps/trading/lib/hooks/use-telemetry-approval.ts

@@ -1,25 +1,24 @@
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { useCallback } from 'react';
 import { SentryInit, SentryClose } from '@vegaprotocol/logger';
-import { useEnvironment } from '@vegaprotocol/environment';
+import { ENV } from '../config';
 export const STORAGE_KEY = 'vega_telemetry_approval';
 
 export const useTelemetryApproval = (): [
   value: boolean,
   setValue: (value: boolean) => void
 ] => {
-  const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
   const [value, setValue, removeValue] = useLocalStorage(STORAGE_KEY);
   const setApprove = useCallback(
     (value: boolean) => {
-      if (value && SENTRY_DSN) {
-        SentryInit(SENTRY_DSN, VEGA_ENV);
+      if (value) {
+        SentryInit(ENV.dsn, ENV.envName);
         return setValue('1');
       }
       SentryClose();
       removeValue();
     },
-    [setValue, removeValue, SENTRY_DSN, VEGA_ENV]
+    [setValue, removeValue]
   );
   return [Boolean(value), setApprove];
 };

apps/trading/pages/_app.page.tsx

@@ -34,6 +34,7 @@ import { ViewingBanner } from '../components/viewing-banner';
 import { AnnouncementBanner, UpgradeBanner } from '../components/banner';
 import { AppLoader, DynamicLoader } from '../components/app-loader';
 import { Navbar } from '../components/navbar';
+import { ENV } from '../lib/config';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
@@ -154,11 +155,10 @@ const PartyData = () => {
 };
 
 const MaybeConnectEagerly = () => {
-  const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
   useVegaEagerConnect(Connectors);
   const [isTelemetryApproved] = useTelemetryApproval();
   useEthereumEagerConnect(
-    isTelemetryApproved ? { dsn: SENTRY_DSN, env: VEGA_ENV } : {}
+    isTelemetryApproved ? { dsn: ENV.dsn, env: ENV.envName } : {}
   );
 
   const { pubKey, connect } = useVegaWallet();

apps/trading/pages/_document.page.tsx

@@ -20,6 +20,10 @@ export default function Document() {
           href="https://static.vega.xyz/favicon.ico"
         />
         <script src="/theme-setter.js" type="text/javascript" async />
+        {['1', 'true'].includes(process.env['NX_USE_ENV_OVERRIDES'] || '') ? (
+          /* eslint-disable-next-line @next/next/no-sync-scripts */
+          <script src="/assets/env-config.js" type="text/javascript" />
+        ) : null}
       </Head>
       <body className="font-alpha dark:bg-black dark:text-white">
         <Main />

apps/trading/pages/toasts-manager.tsx

@@ -3,17 +3,12 @@ import { useUpdateNetworkParametersToasts } from '@vegaprotocol/proposals';
 import { useVegaTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
-import { Routes } from './client-router';
-import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws';
 
 export const ToastsManager = () => {
   useUpdateNetworkParametersToasts();
   useVegaTransactionToasts();
   useEthereumTransactionToasts();
   useEthereumWithdrawApprovalsToasts();
-  useReadyToWithdrawalToasts({
-    withdrawalsLink: `${Routes.PORTFOLIO}`,
-  });
 
   const toasts = useToasts((store) => store.toasts);
   return <ToastsContainer order="desc" toasts={toasts} />;

apps/trading/setup-tests.ts

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
 import ResizeObserver from 'resize-observer-polyfill';
 import { defaultFallbackInView } from 'react-intersection-observer';
+import '../../setup-test';
 
 defaultFallbackInView(true);
 global.ResizeObserver = ResizeObserver;

apps/trading/stores/datagrid-store-slice.ts

@@ -1,25 +0,0 @@
-import type { ColumnState } from 'ag-grid-community';
-import type { StateCreator } from 'zustand';
-
-export type DataGridStore = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterModel?: { [key: string]: any };
-  columnState?: ColumnState[];
-};
-
-export type DataGridSlice = {
-  gridStore: DataGridStore;
-  updateGridStore: (gridStore: DataGridStore) => void;
-};
-
-export const createDataGridSlice: StateCreator<DataGridSlice> = (set) => ({
-  gridStore: {},
-  updateGridStore: (newStore) => {
-    set((curr) => ({
-      gridStore: {
-        ...curr.gridStore,
-        ...newStore,
-      },
-    }));
-  },
-});

babel.config.json

@@ -1,3 +1,11 @@
 {
-  "babelrcRoots": ["*"]
+  "babelrcRoots": ["*"],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", { "targets": { "node": "current" } }],
+        "@babel/preset-typescript"
+      ]
+    }
+  }
 }

jest.preset.js

@@ -1,3 +1,9 @@
 const nxPreset = require('@nrwl/jest/preset').default;
 
-module.exports = { ...nxPreset };
+module.exports = {
+  ...nxPreset,
+  transformIgnorePatterns: [
+    ...(nxPreset?.transformIgnorePatterns || []),
+    'node_modules/(?!(@vegaprotocol/protos|protobuf-codec))',
+  ],
+};

libs/accounts/jest.config.ts

@@ -8,7 +8,7 @@ export default {
     },
   },
   transform: {
-    '^.+\\.[tj]sx?$': 'ts-jest',
+    '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/positions',

libs/accounts/src/lib/accounts-manager.spec.tsx

@@ -7,7 +7,6 @@ import {
 } from '@testing-library/react';
 import * as helpers from '@vegaprotocol/data-provider';
 import { AccountManager } from './accounts-manager';
-import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 
 const mockedUseDataProvider = jest.fn();
 jest.mock('@vegaprotocol/data-provider', () => ({
@@ -15,13 +14,6 @@ jest.mock('@vegaprotocol/data-provider', () => ({
   useDataProvider: jest.fn(() => mockedUseDataProvider()),
 }));
 
-const gridProps = {
-  onGridReady: jest.fn(),
-  onColumnResized: jest.fn(),
-  onFilterChanged: jest.fn(),
-  onSortChanged: jest.fn(),
-} as unknown as ReturnType<typeof useDataGridEvents>;
-
 describe('AccountManager', () => {
   describe('when rerender', () => {
     beforeEach(() => {
@@ -51,7 +43,6 @@ describe('AccountManager', () => {
           partyId="partyOne"
           onClickAsset={jest.fn}
           isReadOnly={false}
-          gridProps={gridProps}
         />
       );
       expect(
@@ -64,7 +55,6 @@ describe('AccountManager', () => {
             partyId="partyTwo"
             onClickAsset={jest.fn}
             isReadOnly={false}
-            gridProps={gridProps}
           />
         );
       });
@@ -82,7 +72,6 @@ describe('AccountManager', () => {
             partyId="partyOne"
             onClickAsset={jest.fn}
             isReadOnly={false}
-            gridProps={gridProps}
           />
         );
         rerenderer = rerender;
@@ -96,7 +85,6 @@ describe('AccountManager', () => {
             partyId="partyOne"
             onClickAsset={jest.fn}
             isReadOnly={false}
-            gridProps={gridProps}
           />
         );
       });
@@ -122,7 +110,6 @@ describe('AccountManager', () => {
           partyId="partyOne"
           onClickAsset={jest.fn}
           isReadOnly={false}
-          gridProps={gridProps}
         />
       );
     });

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

@@ -11,7 +11,6 @@ import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
 import { Dialog } from '@vegaprotocol/ui-toolkit';
 import BreakdownTable from './breakdown-table';
-import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 
 const AccountBreakdown = ({
   assetId,
@@ -103,7 +102,7 @@ interface AccountManagerProps {
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
-  gridProps?: ReturnType<typeof useDataGridEvents>;
+  storeKey?: string;
 }
 
 export const AccountManager = ({
@@ -113,11 +112,12 @@ export const AccountManager = ({
   partyId,
   isReadOnly,
   pinnedAsset,
+  storeKey,
   onMarketClick,
-  gridProps,
 }: AccountManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
+
   const { data, error } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
     variables: { partyId },
@@ -144,8 +144,8 @@ export const AccountManager = ({
         onClickBreakdown={setBreakdownAssetId}
         isReadOnly={isReadOnly}
         pinnedAsset={pinnedAsset}
+        storeKey={storeKey}
         overlayNoRowsTemplate={error ? error.message : t('No accounts')}
-        {...gridProps}
       />
       <AccountBreakdownDialog
         assetId={breakdownAssetId}

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

@@ -73,6 +73,7 @@ export interface AccountTableProps extends AgGridReactProps {
   onClickBreakdown?: (assetId: string) => void;
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
+  storeKey?: string;
 }
 
 export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
@@ -306,6 +307,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
       <AgGrid
         {...props}
         style={{ width: '100%', height: '100%' }}
+        overlayNoRowsTemplate={t('No accounts')}
         getRowId={({ data }: { data: AccountFields }) => data.asset.id}
         ref={ref}
         tooltipShowDelay={500}

libs/accounts/src/lib/margin-heath-chart.spec.tsx

@@ -23,8 +23,8 @@ const margins: MarginFieldsFragment = {
   },
 };
 
-const getMargins = jest.fn(() => margins);
-const getBalance = jest.fn(() => '0');
+const mockGetMargins = jest.fn(() => margins);
+const mockGetBalance = jest.fn(() => '0');
 
 jest.mock('./margin-data-provider', () => ({}));
 
@@ -49,7 +49,7 @@ jest.mock('@vegaprotocol/wallet', () => ({
 jest.mock('@vegaprotocol/data-provider', () => ({
   useDataProvider: () => {
     return {
-      data: getMargins(),
+      data: mockGetMargins(),
     };
   },
 }));
@@ -57,7 +57,7 @@ jest.mock('@vegaprotocol/data-provider', () => ({
 jest.mock('./use-account-balance', () => ({
   useAccountBalance: () => {
     return {
-      accountBalance: getBalance(),
+      accountBalance: mockGetBalance(),
     };
   },
 }));
@@ -88,7 +88,7 @@ describe('MarginHealthChart', () => {
   });
 
   it('should use correct scale', async () => {
-    getBalance.mockReturnValueOnce('1300');
+    mockGetBalance.mockReturnValueOnce('1300');
     await act(async () => {
       render(<MarginHealthChart marketId="marketId" assetId="assetId" />);
     });

libs/accounts/src/lib/transfer-form.spec.tsx

@@ -7,10 +7,13 @@ import {
 } from '@testing-library/react';
 import BigNumber from 'bignumber.js';
 import { AddressField, TransferFee, TransferForm } from './transfer-form';
-import { AccountType } from '@vegaprotocol/types';
+import { vega as vegaProtos } from '@vegaprotocol/protos';
 import { formatNumber, removeDecimal } from '@vegaprotocol/utils';
 
 describe('TransferForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   const submit = () => fireEvent.submit(screen.getByTestId('transfer-form'));
   const amount = '100';
   const pubKey =
@@ -126,12 +129,14 @@ describe('TransferForm', () => {
     await waitFor(() => {
       expect(props.submitTransfer).toHaveBeenCalledTimes(1);
       expect(props.submitTransfer).toHaveBeenCalledWith({
-        fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-        toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+        fromAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GENERAL,
+        toAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GENERAL,
         to: props.pubKeys[1],
         asset: asset.id,
         amount: removeDecimal(amount, asset.decimals),
         oneOff: {},
+        kind: null,
+        reference: '',
       });
     });
   });
@@ -149,21 +154,23 @@ describe('TransferForm', () => {
       ]);
 
       submit();
+
       expect(await screen.findAllByText('Required')).toHaveLength(3);
 
-      // Select a pubkey
-      fireEvent.change(screen.getByLabelText('Vega key'), {
-        target: { value: props.pubKeys[1] },
+      await act(() => {
+        // Select a pubkey
+        fireEvent.change(screen.getByLabelText('Vega key'), {
+          target: { value: props.pubKeys[1] },
+        });
+
+        // Select asset
+        fireEvent.change(
+          // Bypass RichSelect and target hidden native select
+          // eslint-disable-next-line
+          document.querySelector('select[name="asset"]')!,
+          { target: { value: asset.id } }
+        );
       });
-
-      // Select asset
-      fireEvent.change(
-        // Bypass RichSelect and target hidden native select
-        // eslint-disable-next-line
-        document.querySelector('select[name="asset"]')!,
-        { target: { value: asset.id } }
-      );
-
       // assert rich select as updated
       expect(await screen.findByTestId('select-asset')).toHaveTextContent(
         asset.name
@@ -175,7 +182,7 @@ describe('TransferForm', () => {
       const amountInput = screen.getByLabelText('Amount');
       const checkbox = screen.getByTestId('include-transfer-fee');
       expect(checkbox).not.toBeChecked();
-      act(() => {
+      await act(() => {
         /* fire events that update state */
         // set valid amount
         fireEvent.change(amountInput, {
@@ -197,18 +204,20 @@ describe('TransferForm', () => {
       expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
         amount
       );
-
+      expect(props.submitTransfer).toHaveBeenCalledTimes(0);
       submit();
 
       await waitFor(() => {
         expect(props.submitTransfer).toHaveBeenCalledTimes(1);
         expect(props.submitTransfer).toHaveBeenCalledWith({
-          fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-          toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+          fromAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GENERAL,
+          toAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GENERAL,
           to: props.pubKeys[1],
           asset: asset.id,
-          amount: removeDecimal(amount, asset.decimals),
+          amount: removeDecimal(expectedAmount, asset.decimals),
           oneOff: {},
+          kind: null,
+          reference: '',
         });
       });
     });
@@ -226,20 +235,21 @@ describe('TransferForm', () => {
 
       submit();
       expect(await screen.findAllByText('Required')).toHaveLength(3);
+      await act(() => {
+        // Select a pubkey
+        fireEvent.change(screen.getByLabelText('Vega key'), {
+          target: { value: props.pubKeys[1] },
+        });
 
-      // Select a pubkey
-      fireEvent.change(screen.getByLabelText('Vega key'), {
-        target: { value: props.pubKeys[1] },
+        // Select asset
+        fireEvent.change(
+          // Bypass RichSelect and target hidden native select
+          // eslint-disable-next-line
+          document.querySelector('select[name="asset"]')!,
+          { target: { value: asset.id } }
+        );
       });
 
-      // Select asset
-      fireEvent.change(
-        // Bypass RichSelect and target hidden native select
-        // eslint-disable-next-line
-        document.querySelector('select[name="asset"]')!,
-        { target: { value: asset.id } }
-      );
-
       // assert rich select as updated
       expect(await screen.findByTestId('select-asset')).toHaveTextContent(
         asset.name
@@ -251,7 +261,7 @@ describe('TransferForm', () => {
       const amountInput = screen.getByLabelText('Amount');
       const checkbox = screen.getByTestId('include-transfer-fee');
       expect(checkbox).not.toBeChecked();
-      act(() => {
+      await act(() => {
         /* fire events that update state */
         // set valid amount
         fireEvent.change(amountInput, {

libs/accounts/src/lib/transfer-form.tsx

@@ -5,6 +5,7 @@ import {
   vegaPublicKey,
   addDecimal,
   formatNumber,
+  removeDecimal,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -19,11 +20,12 @@ import {
   Checkbox,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
-import { normalizeTransfer } from '@vegaprotocol/wallet';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import type { Exact } from 'type-fest';
+import { vega as vegaProtos } from '@vegaprotocol/protos';
 
 interface FormFields {
   toAddress: string;
@@ -46,6 +48,29 @@ interface TransferFormProps {
   submitTransfer: (transfer: Transfer) => void;
 }
 
+export const normalizeTransfer = <T extends Exact<Transfer, T>>(
+  address: string,
+  amount: string,
+  asset: {
+    id: string;
+    decimals: number;
+  }
+): Transfer => {
+  return {
+    fromAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GENERAL,
+    to: address,
+    toAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GENERAL,
+    asset: asset.id,
+    amount: removeDecimal(amount, asset.decimals),
+    // oneOff or recurring required otherwise wallet will error
+    // default oneOff is immediate transfer
+    oneOff: {},
+    // to be consistent with proto types
+    kind: null,
+    reference: '',
+  };
+};
+
 export const TransferForm = ({
   pubKey,
   pubKeys,

libs/accounts/src/setup-tests.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import ResizeObserver from 'resize-observer-polyfill';
 import { defaultFallbackInView } from 'react-intersection-observer';
+import '../../../setup-test';
 
 defaultFallbackInView(true);
 global.ResizeObserver = ResizeObserver;

libs/assets/src/setup-tests.ts

@@ -1 +1,2 @@
 import '@testing-library/jest-dom';
+import '../../../setup-test';

libs/candles-chart/src/setup-tests.ts

@@ -1,5 +1,7 @@
 import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
+import '../../../setup-test';
+
 import ResizeObserver from 'resize-observer-polyfill';
 
 global.ResizeObserver = ResizeObserver;

libs/cypress/src/lib/capsule/create-market.ts

@@ -1,4 +1,4 @@
-import * as Schema from '@vegaprotocol/types';
+import { vega as vegaProtos } from '@vegaprotocol/protos';
 import { determineId } from '../utils';
 import { setGraphQLEndpoint } from './request';
 import { vote } from './vote';
@@ -63,7 +63,7 @@ export async function createMarket(cfg: {
   const proposal = await waitForProposal(proposalId);
 
   // Vote on new market proposal
-  await vote(proposal.id, Schema.VoteValue.VALUE_YES, cfg.vegaPubKey);
+  await vote(proposal.id, vegaProtos.Vote.Value.VALUE_YES, cfg.vegaPubKey);
 
   // Wait for the market to be enacted and go into opening auction
   await waitForEnactment();

libs/cypress/src/lib/capsule/vote.ts

@@ -1,4 +1,4 @@
-import type * as Schema from '@vegaprotocol/types';
+import type { Value as ProtoOrderTypeValue } from '@vegaprotocol/protos/dist/vega/Vote/Value';
 import { createLog } from './logging';
 import { sendVegaTx } from './wallet-client';
 
@@ -6,7 +6,7 @@ const log = createLog('vote');
 
 export async function vote(
   proposalId: string,
-  voteValue: Schema.VoteValue,
+  voteValue: ProtoOrderTypeValue,
   publicKey: string
 ) {
   log(`voting ${voteValue} on ${proposalId}`);
@@ -17,7 +17,7 @@ export async function vote(
   return voteResult.result;
 }
 
-function createVote(proposalId: string, value: Schema.VoteValue) {
+function createVote(proposalId: string, value: ProtoOrderTypeValue) {
   return {
     voteSubmission: {
       value,

libs/cypress/src/lib/commands/vega-wallet-submit-liquidity-provision.ts

@@ -1,4 +1,4 @@
-import { PeggedReference } from '@vegaprotocol/types';
+import { vega as vegaProtos } from '@vegaprotocol/protos';
 import type { LiquidityProvisionSubmission } from '@vegaprotocol/wallet';
 import { createWalletClient, sendVegaTx } from '../capsule/wallet-client';
 
@@ -31,27 +31,28 @@ export const addVegaWalletSubmitLiquidityProvision = () => {
           buys: [
             {
               offset: '10',
-              proportion: '1',
-              reference: PeggedReference.PEGGED_REFERENCE_MID,
+              proportion: 1,
+              reference: vegaProtos.PeggedReference.PEGGED_REFERENCE_MID,
             },
             {
               offset: '12',
-              proportion: '2',
-              reference: PeggedReference.PEGGED_REFERENCE_MID,
+              proportion: 2,
+              reference: vegaProtos.PeggedReference.PEGGED_REFERENCE_MID,
             },
           ],
           sells: [
             {
               offset: '10',
-              proportion: '2',
-              reference: PeggedReference.PEGGED_REFERENCE_MID,
+              proportion: 2,
+              reference: vegaProtos.PeggedReference.PEGGED_REFERENCE_MID,
             },
             {
               offset: '12',
-              proportion: '2',
-              reference: PeggedReference.PEGGED_REFERENCE_MID,
+              proportion: 2,
+              reference: vegaProtos.PeggedReference.PEGGED_REFERENCE_MID,
             },
           ],
+          reference: '',
         },
         pubKey: vegaPubKey,
         propagate: true,

libs/cypress/src/lib/commands/vega-wallet-top-up-rewards-pool.ts

@@ -1,4 +1,4 @@
-import { AccountType } from '@vegaprotocol/types';
+import { vega as vegaProtos } from '@vegaprotocol/protos';
 import type { TransferBody } from '@vegaprotocol/wallet';
 import { createWalletClient, sendVegaTx } from '../capsule/wallet-client';
 
@@ -39,15 +39,15 @@ export function addVegaWalletTopUpRewardsPool() {
 
         const transactionBody: TransferBody = {
           transfer: {
-            fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-            toAccountType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+            fromAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GENERAL,
+            toAccountType: vegaProtos.AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
             to: '0000000000000000000000000000000000000000000000000000000000000000',
             asset: assetAddress,
             amount: '1000000000000000000',
             recurring: {
               factor: '1',
-              startEpoch: transferStartEpoch,
-              endEpoch: transferEndEpoch,
+              startEpoch: BigInt(transferStartEpoch),
+              endEpoch: BigInt(transferEndEpoch),
             },
           },
         };

libs/datagrid/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/ag-grid/ag-grid-lazy';
+export * from './lib/ag-grid/use-column-sizes';
 
 export * from './lib/column-definitions';
 
@@ -23,4 +24,4 @@ export * from './lib/type-helpers';
 export * from './lib/cells/grid-progress-bar';
 
 export * from './lib/ag-grid-update';
-export * from './lib/use-datagrid-events';
+export * from './lib/use-bottom-placeholder';

libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx

@@ -2,16 +2,23 @@ import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
 import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
+import { useColumnSizes } from './use-column-sizes';
 import classNames from 'classnames';
 
 export const AgGridThemed = ({
   style,
   gridRef,
+  storeKey,
   ...props
 }: (AgGridReactProps | AgReactUiProps) & {
   style?: React.CSSProperties;
   gridRef?: React.ForwardedRef<AgGridReact>;
+  storeKey?: string;
 }) => {
+  const commonColumnCallbacks = useColumnSizes({
+    storeKey,
+    props,
+  });
   const { theme } = useThemeSwitcher();
   const defaultProps = {
     rowHeight: 22,
@@ -29,7 +36,12 @@ export const AgGridThemed = ({
 
   return (
     <div className={wrapperClasses} style={style}>
-      <AgGridReact {...defaultProps} {...props} ref={gridRef} />
+      <AgGridReact
+        {...defaultProps}
+        {...props}
+        {...commonColumnCallbacks}
+        ref={gridRef}
+      />
     </div>
   );
 };

libs/datagrid/src/lib/ag-grid/ag-grid-lazy.tsx

@@ -4,6 +4,7 @@ import type { AgGridReactProps, AgGridReact } from 'ag-grid-react';
 type Props = AgGridReactProps & {
   style?: React.CSSProperties;
   gridRef?: React.Ref<AgGridReact>;
+  storeKey?: string;
 };
 
 export const AgGridLazyInternal = lazy(() =>

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

@@ -0,0 +1,122 @@
+import type {
+  Column,
+  ColumnResizedEvent,
+  GridSizeChangedEvent,
+  GridReadyEvent,
+} from 'ag-grid-community';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useColumnSizes } from './use-column-sizes';
+import * as reactHelpers from '@vegaprotocol/react-helpers';
+
+const mockApis = {
+  api: {
+    sizeColumnsToFit: jest.fn(),
+  },
+  columnApi: {
+    setColumnWidths: jest.fn(),
+  },
+};
+
+const mockValueSetter = jest.fn();
+const mockStore = {
+  sizes: { testid: { col1: 100 } },
+  valueSetter: mockValueSetter,
+};
+jest.mock('zustand', () => ({
+  ...jest.requireActual('zustand'),
+  create: () =>
+    jest.fn(() =>
+      jest.fn().mockImplementation((creator) => {
+        return creator(mockStore);
+      })
+    ),
+}));
+describe('UseColumnSizes hook', () => {
+  const storeKey = 'testid';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should return proper methods', () => {
+    const { result } = renderHook(() =>
+      useColumnSizes({ storeKey, props: {} })
+    );
+    expect(Object.keys(result.current)).toHaveLength(3);
+    expect(result.current).toStrictEqual({
+      onColumnResized: expect.any(Function),
+      onGridReady: expect.any(Function),
+      onGridSizeChanged: expect.any(Function),
+    });
+  });
+
+  it('onGridSizeChanged should call setSize', async () => {
+    jest
+      .spyOn(reactHelpers, 'useScreenDimensions')
+      .mockReturnValue({ screenSize: 'xxl' });
+    const { result } = renderHook(() =>
+      useColumnSizes({ storeKey, props: {} })
+    );
+    await act(() => {
+      result.current.onGridSizeChanged?.({
+        clientWidth: 1000,
+        ...mockApis,
+      } as GridSizeChangedEvent);
+    });
+    await waitFor(() => {
+      expect(mockApis.columnApi.setColumnWidths).toHaveBeenCalledWith([
+        { key: 'col1', newWidth: 100 },
+      ]);
+    });
+  });
+
+  it('onColumnResized should fill up store', async () => {
+    const columns: Column[] = [
+      { getColId: () => 'col1', getActualWidth: () => 100 },
+      { getColId: () => 'col2', getActualWidth: () => 200 },
+    ] as Column[];
+    const sizeObj = { col1: 100, col2: 200, clientWidth: 1000 };
+    const { result } = renderHook(() =>
+      useColumnSizes({ storeKey, props: {} })
+    );
+    await act(() => {
+      result.current.onGridSizeChanged?.({
+        clientWidth: 1000,
+        ...mockApis,
+      } as GridSizeChangedEvent);
+    });
+    await act(() => {
+      result.current.onColumnResized?.({
+        columns,
+        finished: true,
+        source: 'uiColumnDragged',
+        ...mockApis,
+      } as ColumnResizedEvent);
+    });
+    await waitFor(() => {
+      expect(mockValueSetter).toHaveBeenCalledWith(storeKey, sizeObj);
+    });
+  });
+
+  it('onGridReady should call setSizes', async () => {
+    const props = { onGridReady: jest.fn() };
+
+    const { result } = renderHook(() => useColumnSizes({ storeKey, props }));
+    const obTest = { cool: 1, ...mockApis };
+    await act(() => {
+      result.current.onGridReady?.(obTest as GridReadyEvent);
+    });
+    expect(props.onGridReady).toHaveBeenCalledWith(obTest);
+    expect(mockApis.api.sizeColumnsToFit).toHaveBeenCalledWith();
+  });
+
+  it('if no storeKey should be transparent', () => {
+    const { result } = renderHook(() =>
+      useColumnSizes({ storeKey: '', props: {} })
+    );
+    expect(result.current).toStrictEqual({
+      onColumnResized: undefined,
+      onGridReady: undefined,
+      onGridSizeChanged: undefined,
+    });
+  });
+});

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

@@ -0,0 +1,145 @@
+import { useCallback, useRef } from 'react';
+import type {
+  GridSizeChangedEvent,
+  GridReadyEvent,
+  ColumnResizedEvent,
+} from 'ag-grid-community';
+import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+
+const STORAGE_KEY = 'vega_columns_sizes_store';
+
+export const useColumnSizesStore = create<{
+  sizes: Record<string, Record<string, number>>;
+  valueSetter: (storeKey: string, value: Record<string, number>) => void;
+}>()(
+  persist(
+    immer((set) => ({
+      sizes: {},
+      valueSetter: (storeKey, value) =>
+        set((state) => {
+          state.sizes[storeKey] = {
+            ...(state.sizes[storeKey] || {}),
+            ...value,
+          };
+          return state;
+        }),
+    })),
+    { name: STORAGE_KEY }
+  )
+);
+
+interface UseColumnSizesProps {
+  props: AgGridReactProps | AgReactUiProps;
+  storeKey?: string;
+}
+
+export const useColumnSizes = ({
+  storeKey = '',
+  props,
+}: UseColumnSizesProps): {
+  onColumnResized?: (event: ColumnResizedEvent) => void;
+  onGridReady?: (event: GridReadyEvent) => void;
+  onGridSizeChanged?: (event: GridSizeChangedEvent) => void;
+} => {
+  const sizes = useColumnSizesStore((store) => store.sizes[storeKey] || {});
+  const valueSetter = useColumnSizesStore((store) => store.valueSetter);
+  const widthRef = useRef(sizes['clientWidth'] || 0);
+  const {
+    onColumnResized: parentOnColumnResized,
+    onGridReady: parentOnGridReady,
+    onGridSizeChanged: parentOnGridSizeChanged,
+  } = props;
+  const recalculateSizes = useCallback((sizes: Record<string, number>) => {
+    if (
+      widthRef.current &&
+      sizes['clientWidth'] &&
+      widthRef.current !== sizes['clientWidth']
+    ) {
+      const oldWidth = sizes['clientWidth'];
+      const ratio = widthRef.current / oldWidth;
+      return {
+        ...Object.entries(sizes).reduce((agg, [key, value]) => {
+          agg[key] = value * ratio;
+          return agg;
+        }, {} as Record<string, number>),
+        width: widthRef.current,
+      } as Record<string, number>;
+    }
+    return sizes;
+  }, []);
+
+  const onColumnResized = useCallback(
+    (event: ColumnResizedEvent) => {
+      parentOnColumnResized?.(event);
+      if (
+        storeKey &&
+        event.source === 'uiColumnDragged' &&
+        event.finished &&
+        widthRef.current
+      ) {
+        const { columns } = event;
+        if (columns?.length) {
+          const sizesObj = columns.reduce((aggr, column) => {
+            aggr[column.getColId()] = column.getActualWidth();
+            return aggr;
+          }, {} as Record<string, number>);
+          sizesObj['clientWidth'] = widthRef.current;
+          valueSetter(storeKey, sizesObj);
+        }
+      }
+    },
+    [valueSetter, storeKey, parentOnColumnResized]
+  );
+  const { screenSize } = useScreenDimensions();
+  const largeScreen = ['xl', 'xxl', 'xxxl'].includes(screenSize);
+  const setSizes = useCallback(
+    (apiEvent: GridReadyEvent | GridSizeChangedEvent) => {
+      if (!storeKey || !Object.keys(sizes).length || !widthRef.current) {
+        largeScreen && apiEvent?.api.sizeColumnsToFit();
+      } else {
+        const recalculatedSizes = recalculateSizes(sizes);
+        const newSizes = Object.entries(recalculatedSizes).map(
+          ([key, size]) => ({
+            key,
+            newWidth: size,
+          })
+        );
+        apiEvent.columnApi.setColumnWidths(newSizes);
+      }
+    },
+    [storeKey, recalculateSizes, sizes, largeScreen]
+  );
+
+  const onGridReady = useCallback(
+    (event: GridReadyEvent) => {
+      parentOnGridReady?.(event);
+      setSizes(event);
+    },
+    [setSizes, parentOnGridReady]
+  );
+
+  const onGridSizeChanged = useCallback(
+    (event: GridSizeChangedEvent) => {
+      parentOnGridSizeChanged?.(event);
+      widthRef.current = event.clientWidth;
+      setSizes(event);
+    },
+    [parentOnGridSizeChanged, setSizes]
+  );
+  if (storeKey) {
+    return {
+      onGridReady,
+      onGridSizeChanged,
+      onColumnResized,
+    };
+  }
+  return {
+    onGridReady: parentOnGridReady,
+    onGridSizeChanged: parentOnGridSizeChanged,
+    onColumnResized: parentOnColumnResized,
+  };
+};

libs/datagrid/src/lib/use-bottom-placeholder.tsx

@@ -0,0 +1,68 @@
+import type { RefObject } from 'react';
+import { useCallback, useMemo } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+import type { IsFullWidthRowParams, RowHeightParams } from 'ag-grid-community';
+
+const NO_HOVER_CSS_RULE = { 'no-hover': 'data?.isLastPlaceholder' };
+const ROW_ID = 'bottom-placeholder';
+const fullWidthCellRenderer = () => null;
+const isFullWidthRow = (params: IsFullWidthRowParams) =>
+  params.rowNode.data?.isLastPlaceholder;
+
+interface Props {
+  gridRef: RefObject<AgGridReact>;
+  disabled?: boolean;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const useBottomPlaceholder = ({ gridRef, disabled }: Props) => {
+  const onBodyScrollEnd = useCallback(() => {
+    const rowCont = gridRef.current?.api.getDisplayedRowCount() ?? 0;
+    if (rowCont) {
+      const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(rowCont - 1);
+      if (lastRow && lastRow.data) {
+        const placeholderRow = {
+          ...lastRow.data,
+          isLastPlaceholder: true,
+          id: ROW_ID,
+        };
+        const transaction = gridRef.current?.api.getRowNode(ROW_ID)
+          ? { update: [placeholderRow] }
+          : { add: [placeholderRow] };
+        gridRef.current?.api.applyTransaction(transaction);
+      }
+    }
+  }, [gridRef]);
+
+  const onRowsChanged = useCallback(() => {
+    const placeholderNode = gridRef.current?.api.getRowNode(ROW_ID);
+    if (placeholderNode) {
+      const transaction = {
+        remove: [placeholderNode.data],
+      };
+      gridRef.current?.api.applyTransaction(transaction);
+    }
+    onBodyScrollEnd();
+  }, [gridRef, onBodyScrollEnd]);
+
+  const getRowHeight = useCallback(
+    (params: RowHeightParams) =>
+      params.data?.isLastPlaceholder ? 50 : undefined,
+    []
+  );
+
+  return useMemo(
+    () =>
+      !disabled
+        ? {
+            onBodyScrollEnd,
+            rowClassRules: NO_HOVER_CSS_RULE,
+            isFullWidthRow,
+            fullWidthCellRenderer,
+            onSortChanged: onRowsChanged,
+            onFilterChanged: onRowsChanged,
+            getRowHeight,
+          }
+        : {},
+    [onBodyScrollEnd, onRowsChanged, disabled, getRowHeight]
+  );
+};

libs/datagrid/src/lib/use-datagrid-events.spec.tsx

@@ -1,185 +0,0 @@
-import { act, render, waitFor } from '@testing-library/react';
-import {
-  useDataGridEvents,
-  GRID_EVENT_DEBOUNCE_TIME,
-} from './use-datagrid-events';
-import { AgGridThemed } from './ag-grid/ag-grid-lazy-themed';
-import type { MutableRefObject } from 'react';
-import { useRef } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
-
-const gridProps = {
-  rowData: [{ id: 1 }],
-  columnDefs: [
-    {
-      field: 'id',
-      width: 100,
-      resizable: true,
-      filter: 'agNumberColumnFilter',
-    },
-  ],
-  style: { width: 500, height: 300 },
-};
-
-// Not using render hook so I can pass event callbacks
-// to a rendered grid
-function setup(...args: Parameters<typeof useDataGridEvents>) {
-  let gridRef;
-
-  function TestComponent() {
-    const hookCallbacks = useDataGridEvents(...args);
-    gridRef = useRef<AgGridReact | null>(null);
-    return <AgGridThemed gridRef={gridRef} {...gridProps} {...hookCallbacks} />;
-  }
-  render(<TestComponent />);
-  return gridRef as unknown as MutableRefObject<AgGridReact>;
-}
-
-describe('useDataGridEvents', () => {
-  const originalWarn = console.warn;
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-
-    // disabling some ag grid warnings that are caused by test setup only
-    console.warn = () => undefined;
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-    console.warn = originalWarn;
-  });
-
-  it('default state is set and callback is called on column or filter event', async () => {
-    const callback = jest.fn();
-    const initialState = {
-      filterModel: undefined,
-      columnState: undefined,
-    };
-
-    const result = setup(initialState, callback);
-
-    // column state was not updated, so the default width provided by the
-    // col def should be set
-    expect(result.current.columnApi.getColumnState()[0].width).toEqual(
-      gridProps.columnDefs[0].width
-    );
-    // no filters set
-    expect(result.current.api.getFilterModel()).toEqual({});
-
-    const newWidth = 400;
-
-    // Set col width
-    await act(async () => {
-      result.current.columnApi.setColumnWidth('id', newWidth);
-    });
-
-    act(() => {
-      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
-    });
-
-    expect(callback).toHaveBeenCalledWith({
-      columnState: [expect.objectContaining({ colId: 'id', width: newWidth })],
-      filterModel: {},
-    });
-    callback.mockClear();
-    expect(result.current.columnApi.getColumnState()[0].width).toEqual(
-      newWidth
-    );
-
-    // Set filter
-    await act(async () => {
-      result.current.columnApi.applyColumnState({
-        state: [{ colId: 'id', sort: 'asc' }],
-        applyOrder: true,
-      });
-    });
-
-    act(() => {
-      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
-    });
-
-    expect(callback).toHaveBeenCalledWith({
-      columnState: [expect.objectContaining({ colId: 'id', sort: 'asc' })],
-      filterModel: {},
-    });
-    callback.mockClear();
-    expect(result.current.columnApi.getColumnState()[0].sort).toEqual('asc');
-
-    // Set filter
-    const idFilter = {
-      filter: 1,
-      filterType: 'number',
-      type: 'equals',
-    };
-    await act(async () => {
-      result.current.api.setFilterModel({
-        id: idFilter,
-      });
-    });
-
-    act(() => {
-      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
-    });
-
-    expect(callback).toHaveBeenCalledWith({
-      columnState: expect.any(Object),
-      filterModel: {
-        id: idFilter,
-      },
-    });
-    callback.mockClear();
-    expect(result.current.api.getFilterModel()['id']).toEqual(idFilter);
-  });
-
-  it('applies grid state on ready', async () => {
-    const idFilter = {
-      filter: 1,
-      filterType: 'number',
-      type: 'equals',
-    };
-    const colState = { colId: 'id', width: 300, sort: 'desc' as const };
-    const initialState = {
-      filterModel: {
-        id: idFilter,
-      },
-      columnState: [colState],
-    };
-
-    const result = setup(initialState, jest.fn());
-
-    await waitFor(() => {
-      expect(result.current.api.getFilterModel()['id']).toEqual(idFilter);
-      expect(result.current.columnApi.getColumnState()[0]).toEqual(
-        expect.objectContaining(colState)
-      );
-    });
-  });
-
-  it('debounces events', async () => {
-    const callback = jest.fn();
-    const initialState = {
-      filterModel: undefined,
-      columnState: undefined,
-    };
-
-    const result = setup(initialState, callback);
-
-    const newWidth = 400;
-
-    // Set col width multiple times
-    await act(async () => {
-      result.current.columnApi.setColumnWidth('id', newWidth);
-      result.current.columnApi.setColumnWidth('id', newWidth);
-      result.current.columnApi.setColumnWidth('id', newWidth);
-    });
-
-    expect(callback).not.toHaveBeenCalled();
-
-    act(() => {
-      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
-    });
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-});

libs/datagrid/src/lib/use-datagrid-events.ts

@@ -1,66 +0,0 @@
-import debounce from 'lodash/debounce';
-import type {
-  ColumnResizedEvent,
-  ColumnState,
-  FilterChangedEvent,
-  GridReadyEvent,
-  SortChangedEvent,
-} from 'ag-grid-community';
-import { useCallback, useMemo } from 'react';
-
-type State = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterModel?: { [key: string]: any };
-  columnState?: ColumnState[];
-};
-
-type Event = ColumnResizedEvent | FilterChangedEvent | SortChangedEvent;
-
-export const GRID_EVENT_DEBOUNCE_TIME = 300;
-
-export const useDataGridEvents = (
-  state: State,
-  callback: (data: State) => void
-) => {
-  // This function can be called very frequently by the onColumnResized
-  // grid callback, so its memoized to only update after resizing is finished
-  const onGridChange = useMemo(
-    () =>
-      debounce(({ api, columnApi }: Event) => {
-        if (!api || !columnApi) return;
-        const columnState = columnApi.getColumnState();
-        const filterModel = api.getFilterModel();
-        callback({ columnState, filterModel });
-      }, GRID_EVENT_DEBOUNCE_TIME),
-    [callback]
-  );
-
-  // check if we have stored column states or filter models and apply if we do
-  const onGridReady = useCallback(
-    ({ api, columnApi }: GridReadyEvent) => {
-      if (!api || !columnApi) return;
-
-      if (state.columnState) {
-        columnApi.applyColumnState({
-          state: state.columnState,
-          applyOrder: true,
-        });
-      } else {
-        // ensure columns fit available space if no widths are set
-        api.sizeColumnsToFit();
-      }
-
-      if (state.filterModel) {
-        api.setFilterModel(state.filterModel);
-      }
-    },
-    [state]
-  );
-
-  return {
-    onGridReady,
-    onColumnResized: onGridChange,
-    onFilterChanged: onGridChange,
-    onSortChanged: onGridChange,
-  };
-};

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

@@ -1,6 +1,7 @@
 import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
+import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import { useMarket, marketDataProvider } from '@vegaprotocol/markets';
 import { DealTicket } from './deal-ticket';
@@ -47,7 +48,11 @@ export const DealTicketContainer = ({
         <DealTicket
           market={market}
           marketData={marketData}
-          submit={(orderSubmission) => create({ orderSubmission })}
+          submit={(dealTicketOrder: OrderSubmission) =>
+            create({
+              orderSubmission: dealTicketOrder,
+            })
+          }
           onClickCollateral={onClickCollateral}
           onMarketClick={onMarketClick}
         />

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

@@ -3,10 +3,11 @@ import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket, generateMarketData } from '../../test-helpers';
-import { DealTicket } from './deal-ticket';
+import { DealTicket, normalizeOrderSubmission } from './deal-ticket';
 import * as Schema from '@vegaprotocol/types';
 import { MockedProvider } from '@apollo/client/testing';
 import { addDecimal } from '@vegaprotocol/utils';
+import type { OrderObj } from '@vegaprotocol/orders';
 import { useOrderStore } from '@vegaprotocol/orders';
 
 jest.mock('zustand');
@@ -335,4 +336,57 @@ describe('DealTicket', () => {
       Object.keys(Schema.OrderTimeInForce).length
     );
   });
+
+  describe('normalizeOrderSubmission', () => {
+    it('sets and formats price only for limit orders', () => {
+      expect(
+        normalizeOrderSubmission({ price: '100' } as unknown as OrderObj, 2, 1)
+          .price
+      ).toEqual('');
+      expect(
+        normalizeOrderSubmission(
+          {
+            price: '100',
+            type: Schema.OrderType.TYPE_LIMIT,
+          } as unknown as OrderObj,
+          2,
+          1
+        ).price
+      ).toEqual('10000');
+    });
+
+    it('sets and formats expiresAt only for time in force orders', () => {
+      expect(
+        normalizeOrderSubmission(
+          {
+            expiresAt: '2022-01-01T00:00:00.000Z',
+          } as OrderObj,
+          2,
+          1
+        ).expiresAt
+      ).toEqual(BigInt(0));
+      expect(
+        normalizeOrderSubmission(
+          {
+            expiresAt: '2022-01-01T00:00:00.000Z',
+            timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
+          } as OrderObj,
+          2,
+          1
+        ).expiresAt
+      ).toEqual(BigInt('1640995200000000000'));
+    });
+
+    it('formats size', () => {
+      expect(
+        normalizeOrderSubmission(
+          {
+            size: '100',
+          } as OrderObj,
+          2,
+          1
+        ).size
+      ).toEqual(BigInt('1000'));
+    });
+  });
 });

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

@@ -1,5 +1,5 @@
-import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
+import { t } from '@vegaprotocol/i18n';
 import { memo, useCallback, useEffect, useState, useRef, useMemo } from 'react';
 import { Controller } from 'react-hook-form';
 import { DealTicketAmount } from './deal-ticket-amount';
@@ -11,7 +11,10 @@ import { TimeInForceSelector } from './time-in-force-selector';
 import { TypeSelector } from './type-selector';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
 import {
-  normalizeOrderSubmission,
+  SideMap,
+  SideRevertMap,
+  TimeInForceMap,
+  TypeMap,
   useVegaWallet,
   useVegaWalletDialogStore,
 } from '@vegaprotocol/wallet';
@@ -24,17 +27,21 @@ import {
   Tooltip,
   TinyScroll,
 } from '@vegaprotocol/ui-toolkit';
-
 import {
   useEstimatePositionQuery,
   useOpenVolume,
 } from '@vegaprotocol/positions';
-import { toBigNum, removeDecimal } from '@vegaprotocol/utils';
+import {
+  toBigNum,
+  removeDecimal,
+  toNanoSeconds,
+  isNumeric,
+} from '@vegaprotocol/utils';
+import type { OrderObj } from '@vegaprotocol/orders';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { useEstimateFees } from '../../hooks/use-estimate-fees';
 import { getDerivedPrice } from '../../utils/get-price';
 import type { OrderInfo } from '@vegaprotocol/types';
-
 import {
   validateExpiration,
   validateMarketState,
@@ -50,10 +57,40 @@ import {
   useMarketAccountBalance,
   useAccountBalance,
 } from '@vegaprotocol/accounts';
-
 import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
 import { useOrderForm } from '../../hooks/use-order-form';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { vega as vegaProtos } from '@vegaprotocol/protos';
+
+export const normalizeOrderSubmission = (
+  order: OrderObj,
+  decimalPlaces: number,
+  positionDecimalPlaces: number
+): OrderSubmission => ({
+  marketId: order.marketId,
+  type: TypeMap[order.type],
+  side: SideMap[order.side],
+  timeInForce: TimeInForceMap[order.timeInForce],
+  price:
+    order.type === OrderType.TYPE_LIMIT && order.price
+      ? removeDecimal(order.price, decimalPlaces)
+      : '',
+  size: BigInt(removeDecimal(order.size, positionDecimalPlaces)),
+  expiresAt: BigInt(
+    order.expiresAt &&
+      order.timeInForce === OrderTimeInForce.TIME_IN_FORCE_GTT &&
+      isNumeric(new Date(order.expiresAt).getTime())
+      ? toNanoSeconds(order.expiresAt)
+      : 0
+  ),
+  postOnly: Boolean(order.postOnly),
+  reduceOnly: Boolean(order.reduceOnly),
+  peggedOrder: {
+    offset: '',
+    reference: vegaProtos.PeggedReference.PEGGED_REFERENCE_UNSPECIFIED,
+  },
+  reference: '',
+});
 
 export interface DealTicketProps {
   market: Market;
@@ -121,10 +158,10 @@ export const DealTicket = ({
     if (price && normalizedOrder?.size) {
       return removeDecimal(
         toBigNum(
-          normalizedOrder.size,
+          String(normalizedOrder.size),
           market.positionDecimalPlaces
         ).multipliedBy(toBigNum(price, market.decimalPlaces)),
-        market.decimalPlaces
+        asset.decimals
       );
     }
     return null;
@@ -133,11 +170,10 @@ export const DealTicket = ({
     normalizedOrder?.size,
     market.decimalPlaces,
     market.positionDecimalPlaces,
+    asset.decimals,
   ]);
 
-  const feeEstimate = useEstimateFees(
-    normalizedOrder && { ...normalizedOrder, price }
-  );
+  const feeEstimate = useEstimateFees(order && { ...order, price });
   const { data: activeOrders } = useDataProvider({
     dataProvider: activeOrdersProvider,
     variables: { partyId: pubKey || '' },
@@ -154,10 +190,10 @@ export const DealTicket = ({
     : [];
   if (normalizedOrder) {
     orders.push({
-      isMarketOrder: normalizedOrder.type === OrderType.TYPE_MARKET,
+      isMarketOrder: normalizedOrder.type === TypeMap[OrderType.TYPE_MARKET],
       price: normalizedOrder.price ?? '0',
-      remaining: normalizedOrder.size,
-      side: normalizedOrder.side,
+      remaining: String(normalizedOrder.size),
+      side: SideRevertMap[normalizedOrder.side],
     });
   }
   const { data: positionEstimate } = useEstimatePositionQuery({
@@ -245,7 +281,7 @@ export const DealTicket = ({
   }, [order]);
 
   const onSubmit = useCallback(
-    (order: OrderSubmission) => {
+    (order: OrderObj) => {
       const now = new Date().getTime();
       if (lastSubmitTime.current && now - lastSubmitTime.current < 1000) {
         return;

libs/deal-ticket/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './__generated__/EstimateOrder';
 export * from './use-estimate-fees';
+export * from './use-order-form';

libs/deal-ticket/src/hooks/use-estimate-fees.tsx

@@ -1,11 +1,9 @@
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 
 import { useEstimateFeesQuery } from './__generated__/EstimateOrder';
+import type { OrderObj } from '@vegaprotocol/orders';
 
-export const useEstimateFees = (
-  order?: OrderSubmissionBody['orderSubmission']
-) => {
+export const useEstimateFees = (order?: OrderObj) => {
   const { pubKey } = useVegaWallet();
 
   const { data } = useEstimateFeesQuery({

libs/deal-ticket/src/hooks/use-order-form.ts

@@ -3,8 +3,6 @@ import type { OrderObj } from '@vegaprotocol/orders';
 import { getDefaultOrder, useOrder } from '@vegaprotocol/orders';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
-import type { Exact } from 'type-fest';
 
 export type OrderFormFields = OrderObj & {
   summary: string;
@@ -51,9 +49,7 @@ export const useOrderForm = (marketId: string) => {
     }
   }, [order, isSubmitted, getValues, setValue]);
 
-  const handleSubmitWrapper = (
-    cb: <T>(o: Exact<OrderSubmission, T>) => void
-  ) => {
+  const handleSubmitWrapper = (cb: (o: OrderObj) => void) => {
     return handleSubmit(() => {
       // remove the persist key from the order in the store, the wallet will reject
       // an order that contains unrecognized additional keys