fix(4276): fixes settlement oracle not showing in governance, brings data request inline with trading

Co-authored-by: Joe <joe@vega.xyz>

.github/ISSUE_TEMPLATE/feature-epic.md

@@ -1,7 +1,6 @@
 ---
 name: Feature Epic
-about: 
-  A template to capture and scope user requirements, high level process, and basic mockups for an upcoming feature as part of the initial core spec review process.
+about: A template to capture and scope user requirements, high level process, and basic mockups for an upcoming feature as part of the initial core spec review process.
 title: 'Epic: '
 labels: feature-epic
 ---

.github/workflows/console-test-run.yml

@@ -10,8 +10,8 @@ on:
 jobs:
   run-tests:
     name: run-tests
-    runs-on: ubuntu-22.04
-    timeout-minutes: 25
+    runs-on: 8-cores
+    timeout-minutes: 20
     steps:
       #----------------------------------------------
       #       check-out frontend-monorepo
@@ -125,7 +125,7 @@ jobs:
       #----------------------------------------------
       - name: Run tests
         working-directory: ./console-test
-        run: poetry run pytest --numprocesses auto
+        run: poetry run pytest -s --numprocesses auto
       - name: Check files
         run: |
           ls -al .

apps/explorer-e2e/src/integration/proposal.cy.js

@@ -0,0 +1,46 @@
+context('Proposal page', { tags: '@smoke' }, function () {
+  describe('Verify elements on page', function () {
+    const proposalHeading = 'proposals-heading';
+    const dateTimeRegex =
+      /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
+    const proposalTitle = 'Add Lorem Ipsum market';
+
+    before('Create market proposal', function () {
+      cy.visit('/');
+      cy.createMarket();
+    });
+
+    it('Able to view proposal', function () {
+      cy.navigate_to('governanceProposals');
+      cy.getByTestId(proposalHeading).should('be.visible');
+      // get first proposal in list
+      cy.get('[row-index="0"]').within(() => {
+        cy.get_element_by_col_id('title').should('have.text', proposalTitle);
+        cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
+        cy.get_element_by_col_id('state').should('have.text', 'Enacted');
+        cy.getByTestId('vote-progress').should('be.visible');
+        cy.get('[col-id="cDate"]')
+          .invoke('text')
+          .should('match', dateTimeRegex);
+        cy.get('[col-id="eDate"]')
+          .invoke('text')
+          .should('match', dateTimeRegex);
+        cy.getByTestId('external-link')
+          .should('have.attr', 'href')
+          .and('contains', 'https://governance.fairground.wtf/proposals/');
+        cy.contains('View terms').should('exist').click();
+      });
+      cy.getByTestId('dialog-title').should('have.text', proposalTitle);
+      cy.get('.language-json').should('exist');
+    });
+
+    it('Proposal page displayed on mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.navigate_to('governanceProposals', true);
+      cy.getByTestId(proposalHeading).should('be.visible');
+      cy.get('[row-index="0"]').within(() => {
+        cy.get_element_by_col_id('title').should('have.text', proposalTitle);
+      });
+    });
+  });
+});

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

@@ -23,7 +23,7 @@ export const Footer = () => {
   );
 
   return (
-    <footer className="grid grid-rows-2 lg:grid-cols-[1fr_auto] text-xs md:text-md lg:flex md:col-span-2 px-4 py-2 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
+    <footer className="grid grid-cols-[1fr_auto] items-center text-xs md:text-md lg:flex md:col-span-2 px-4 pt-2 pb-3 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
       <div className="flex justify-between gap-2 align-middle">
         {GIT_COMMIT_HASH && (
           <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
@@ -43,9 +43,12 @@ export const Footer = () => {
           </div>
         )}
 
-        <div className="content-center flex pl-2 md:border-r border-neutral-700 dark:border-neutral-300 pr-4">
-          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
-          <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
+        <div className="content-center flex pr-4 md:border-r border-neutral-700 dark:border-neutral-300">
+          <span className="pr-2">{VEGA_URL && <NodeUrl url={VEGA_URL} />}</span>
+          <Link
+            className="ml-2 underline-offset-4"
+            onClick={() => setNodeSwitcherOpen(true)}
+          >
             {t('Change')}
           </Link>
         </div>
@@ -59,7 +62,10 @@ export const Footer = () => {
         ) : null}
       </div>
       <div className="pl-2 align-center lg:align-right lg:flex lg:justify-end gap-2 align-middle lg:max-w-xs lg:ml-auto">
-        <RouteLink to={`/${Routes.DISCLAIMER}`} className="underline">
+        <RouteLink
+          to={`/${Routes.DISCLAIMER}`}
+          className="underline underline-offset-4"
+        >
           Disclaimer
         </RouteLink>
       </div>

apps/governance-e2e/src/fixtures/proposals/successor-market.json

@@ -0,0 +1,107 @@
+{
+  "changes": {
+    "decimalPlaces": "5",
+    "positionDecimalPlaces": "5",
+    "linearSlippageFactor": "0.001",
+    "quadraticSlippageFactor": "0",
+    "lpPriceRange": "10",
+    "instrument": {
+      "name": "Token test market",
+      "code": "Token.24h",
+      "future": {
+        "settlementAsset": "816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc",
+        "quoteName": "fUSDC",
+        "dataSourceSpecForSettlementData": {
+          "external": {
+            "oracle": {
+              "signers": [
+                {
+                  "pubKey": {
+                    "key": "70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680"
+                  }
+                }
+              ],
+              "filters": [
+                {
+                  "key": {
+                    "name": "prices.BTC.value",
+                    "type": "TYPE_INTEGER",
+                    "numberDecimalPlaces": "0"
+                  },
+                  "conditions": [
+                    {
+                      "operator": "OPERATOR_GREATER_THAN",
+                      "value": "0"
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        },
+        "dataSourceSpecForTradingTermination": {
+          "external": {
+            "oracle": {
+              "signers": [
+                {
+                  "pubKey": {
+                    "key": "70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680"
+                  }
+                }
+              ],
+              "filters": [
+                {
+                  "key": {
+                    "name": "trading.terminated.ETH5",
+                    "type": "TYPE_BOOLEAN"
+                  },
+                  "conditions": [
+                    {
+                      "operator": "OPERATOR_EQUALS",
+                      "value": "true"
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        },
+        "dataSourceSpecBinding": {
+          "settlementDataProperty": "prices.BTC.value",
+          "tradingTerminationProperty": "trading.terminated.ETH5"
+        }
+      }
+    },
+    "metadata": ["sector:food", "sector:materials", "source:docs.vega.xyz"],
+    "priceMonitoringParameters": {
+      "triggers": [
+        {
+          "horizon": "43200",
+          "probability": "0.9999999",
+          "auctionExtension": "600"
+        }
+      ]
+    },
+    "liquidityMonitoringParameters": {
+      "targetStakeParameters": {
+        "timeWindow": "3600",
+        "scalingFactor": 10
+      },
+      "triggeringRatio": "0.7",
+      "auctionExtension": "1"
+    },
+    "logNormal": {
+      "tau": 0.0001140771161,
+      "riskAversionParameter": 0.001,
+      "params": {
+        "mu": 0,
+        "r": 0.016,
+        "sigma": 0.8
+      }
+    },
+    "successor": {
+      "parentMarketId": "",
+      "insurancePoolFraction": "0.75"
+    }
+  }
+}

apps/governance-e2e/src/integration/flow/proposal-forms.cy.ts

@@ -220,7 +220,7 @@ context(
       function () {
         const proposalTitle = 'Test new market proposal';
         goToMakeNewProposal(governanceProposalType.NEW_MARKET);
-        cy.getByTestId(newProposalTitle).type('Test new market proposal');
+        cy.getByTestId(newProposalTitle).type(proposalTitle);
         cy.getByTestId(newProposalDescription).type('E2E test for proposals');
         cy.fixture('/proposals/new-market').then((newMarketProposal) => {
           const newMarketPayload = JSON.stringify(newMarketProposal);
@@ -606,6 +606,94 @@ context(
         });
     });
 
+    it('able to submit successor market proposal', function () {
+      const proposalTitle = 'Test successor market proposal';
+
+      cy.createMarket();
+      cy.reload();
+      waitForSpinner();
+      cy.getByTestId('closed-proposals').within(() => {
+        cy.contains('Add Lorem Ipsum market')
+          .parentsUntil(proposalListItem)
+          .last()
+          .within(() => {
+            cy.getByTestId(viewProposalBtn).click();
+          });
+      });
+      getProposalInformationFromTable('ID').invoke('text').as('parentMarketId');
+      goToMakeNewProposal(governanceProposalType.NEW_MARKET);
+      cy.getByTestId(newProposalTitle).type(proposalTitle);
+      cy.getByTestId(newProposalDescription).type(
+        'E2E test for successor market'
+      );
+      cy.fixture('/proposals/successor-market').then((newMarketProposal) => {
+        newMarketProposal.changes.successor.parentMarketId =
+          this.parentMarketId;
+        const newMarketPayload = JSON.stringify(newMarketProposal);
+        cy.getByTestId(newProposalTerms).type(newMarketPayload, {
+          parseSpecialCharSequences: false,
+          delay: 2,
+        });
+      });
+      cy.getByTestId(proposalDownloadBtn)
+        .should('be.visible')
+        .click()
+        .then(() => {
+          cy.wrap(
+            getDownloadedProposalJsonPath('vega-new-market-proposal-')
+          ).then((filePath) => {
+            goToMakeNewProposal(governanceProposalType.RAW);
+            submitUniqueRawProposal({ proposalBody: filePath });
+          });
+        });
+      navigateTo(navigation.proposals);
+      getProposalFromTitle(proposalTitle).within(() => {
+        // 3003-PMAN-008
+        cy.getByTestId('proposal-successor-info')
+          .should('have.text', 'Successor market to: TEST.24h')
+          .find('a')
+          .should('have.attr', 'href')
+          .and('contain', this.parentMarketId);
+        cy.getByTestId('view-proposal-btn').click();
+      });
+      // #3003-PMAN-010
+      cy.getByTestId(proposalJsonToggle).click();
+      cy.get('.language-json').within(() => {
+        cy.get('.hljs-attr').should('contain.text', 'parentMarketId');
+        cy.get('.hljs-string').should('contain.text', this.parentMarketId);
+        cy.get('.hljs-attr').should('contain.text', 'insurancePoolFraction');
+        cy.get('.hljs-string').should('contain.text', '0.75');
+      });
+      cy.getByTestId('proposal-market-data').within(() => {
+        cy.getByTestId('proposal-market-data-toggle').click();
+        cy.contains('Key details').click();
+        // 3003-PMAN-009
+        getMarketProposalDetailsFromTable('Parent Market ID').should(
+          'have.text',
+          this.parentMarketId
+        );
+        getMarketProposalDetailsFromTable('Insurance Pool Fraction').should(
+          'have.text',
+          '0.75'
+        );
+        getMarketProposalDetailsFromTable('Trading Mode').should(
+          'have.text',
+          'No trading'
+        );
+      });
+      // 3003-PMAN-011
+      cy.contains('Parent Market ID').realHover();
+      cy.getByTestId('tooltip-content').should(
+        'contain.text',
+        'The ID of the market this market succeeds.'
+      );
+      cy.contains('Insurance Pool Fraction').realHover();
+      cy.getByTestId('tooltip-content').should(
+        'contain.text',
+        'The fraction of the insurance pool balance that is carried over from the parent market to the successor.'
+      );
+    });
+
     after('Disassociate from second wallet key if present', function () {
       cy.reload();
       waitForSpinner();
@@ -642,6 +730,7 @@ context(
         .getByTestId('key-value-table-row')
         .contains(heading)
         .parent()
+        .parent()
         .siblings();
     }
   }

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

@@ -96,12 +96,14 @@ context('rewards - flow', { tags: '@slow' }, function () {
       .within(() => {
         cy.get('h2').first().should('contain.text', 'EPOCH');
         cy.getByTestId('individual-rewards-asset').should('have.text', 'Vega');
-        cy.getByTestId('ACCOUNT_TYPE_GLOBAL_REWARD', rewardsTimeOut)
-          .should('contain.text', '0.4415')
-          .and('contain.text', '(44.15%)');
-        cy.getByTestId('ACCOUNT_TYPE_FEES_INFRASTRUCTURE')
-          .should('contain.text', '0.0004')
-          .and('contain.text', '(44.15%)');
+        cy.getByTestId('ACCOUNT_TYPE_GLOBAL_REWARD', rewardsTimeOut).should(
+          'contain.text',
+          '0.4415'
+        );
+        cy.getByTestId('ACCOUNT_TYPE_FEES_INFRASTRUCTURE').should(
+          'contain.text',
+          '0.0004'
+        );
         cy.getByTestId('total').should('have.text', '0.4419');
       });
   });

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

@@ -339,7 +339,7 @@ context(
               cy.getByTestId(vegaWalletCurrencyTitle)
                 .contains(name)
                 .parent()
-                .siblings()
+                .siblings(txTimeout)
                 .should((elementAmount) => {
                   const displayedAmount = parseFloat(elementAmount.text());
                   expect(displayedAmount).be.gte(expectedAmount);

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

@@ -107,7 +107,7 @@ export function dissociateFromSecondWalletKey() {
   cy.getByTestId('vega-in-wallet')
     .first()
     .within(() => {
-      cy.getByTestId('eth-wallet-associated-balances')
+      cy.getByTestId('eth-wallet-associated-balances', txTimeout)
         .last()
         .within(() => {
           cy.getByTestId('associated-key')

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

@@ -78,13 +78,21 @@ export function stakingPageAssociateTokens(
   }
   cy.get(tokenAmountInputBox, epochTimeout).type(amount);
   if (approve) {
-    cy.get(tokenInputApprove, txTimeout).should('be.enabled').click();
-    cy.contains('Approve $VEGA Tokens for staking on Vega').should(
-      'be.visible'
-    );
-    cy.contains('Approve $VEGA Tokens for staking on Vega', txTimeout).should(
-      'not.exist'
-    );
+    cy.getByTestId('wallet-associate').then((walletAssociateField) => {
+      if (
+        walletAssociateField.find('[data-testid="token-input-approve-button"]')
+          .length
+      ) {
+        cy.get(tokenInputApprove, txTimeout).should('be.enabled').click();
+        cy.contains('Approve $VEGA Tokens for staking on Vega').should(
+          'be.visible'
+        );
+        cy.contains(
+          'Approve $VEGA Tokens for staking on Vega',
+          txTimeout
+        ).should('not.exist');
+      }
+    });
   }
   cy.get(tokenSubmitButton, txTimeout).should('be.enabled').click();
 

apps/governance/.env

@@ -9,6 +9,7 @@ NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","STAGNET1":"https:
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
+NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
 
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
@@ -26,4 +27,4 @@ CYPRESS_FAIRGROUND=false
 LC_ALL="en_US.UTF-8"
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
+NX_SUCCESSOR_MARKETS=true

apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx

@@ -1,4 +1,8 @@
-import { VegaConnectDialog, VegaManageDialog } from '@vegaprotocol/wallet';
+import {
+  VegaConnectDialog,
+  VegaManageDialog,
+  ViewAsDialog,
+} from '@vegaprotocol/wallet';
 import {
   AppStateActionType,
   useAppState,
@@ -25,6 +29,8 @@ export const VegaWalletDialogs = () => {
           })
         }
       />
+
+      <ViewAsDialog connector={Connectors.view} />
     </>
   );
 };

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

@@ -1,17 +0,0 @@
-import { Link } from '@vegaprotocol/ui-toolkit';
-import { useTranslation } from 'react-i18next';
-import { ExternalLinks } from '@vegaprotocol/environment';
-
-export const DownloadWalletPrompt = () => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <h3 className="mt-4 mb-2">{t('getWallet')}</h3>
-      <p>
-        <Link className="text-neutral-500" href={ExternalLinks.VEGA_WALLET_URL}>
-          {t('getWalletLink')}
-        </Link>
-      </p>
-    </>
-  );
-};

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

@@ -0,0 +1,25 @@
+import { ButtonLink, Link } from '@vegaprotocol/ui-toolkit';
+import { useTranslation } from 'react-i18next';
+import { ExternalLinks } from '@vegaprotocol/environment';
+import { useViewAsDialog } from '@vegaprotocol/wallet';
+
+export const VegaWalletPrompt = () => {
+  const { t } = useTranslation();
+  const setViewAsDialog = useViewAsDialog((state) => state.setOpen);
+  return (
+    <>
+      <h3 className="mt-4 mb-2">{t('getWallet')}</h3>
+      <div className="flex flex-row gap-4">
+        <Link className="text-neutral-500" href={ExternalLinks.VEGA_WALLET_URL}>
+          {t('getWalletLink')}
+        </Link>
+        <ButtonLink
+          className="text-neutral-500"
+          onClick={() => setViewAsDialog(true)}
+        >
+          {t('viewAsParty')}
+        </ButtonLink>
+      </div>
+    </>
+  );
+};

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

@@ -20,7 +20,7 @@ import {
   WalletCardHeader,
   WalletCardRow,
 } from '../wallet-card';
-import { DownloadWalletPrompt } from './download-wallet-prompt';
+import { VegaWalletPrompt } from './vega-wallet-prompt';
 import { usePollForDelegations } from './hooks';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
@@ -85,7 +85,7 @@ const VegaWalletNotConnected = () => {
       >
         {t('connectVegaWalletToUseAssociated')}
       </Button>
-      <DownloadWalletPrompt />
+      <VegaWalletPrompt />
     </>
   );
 };

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

@@ -855,5 +855,6 @@
   "Estimated time to upgrade": "Estimated time to upgrade",
   "Upgraded at": "Upgraded at",
   "dataIsIdentical": "Data is identical",
-  "updatesToMarket": "Updates to market"
+  "updatesToMarket": "Updates to market",
+  "viewAsParty": "View as party"
 }

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

@@ -25,7 +25,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
 import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
-import type { MarketInfoWithData } from '@vegaprotocol/markets';
+import type { MarketInfo } from '@vegaprotocol/markets';
 import type { DataSourceDefinition } from '@vegaprotocol/types';
 import { create } from 'zustand';
 
@@ -45,8 +45,10 @@ export const useMarketDataDialogStore = create<MarketDataDialogState>(
 
 export const ProposalMarketData = ({
   marketData,
+  parentMarketData,
 }: {
-  marketData: MarketInfoWithData;
+  marketData: MarketInfo;
+  parentMarketData?: MarketInfo;
 }) => {
   const { t } = useTranslation();
   const { isOpen, open, close } = useMarketDataDialogStore();
@@ -58,8 +60,21 @@ export const ProposalMarketData = ({
 
   const settlementData = marketData.tradableInstrument.instrument.product
     .dataSourceSpecForSettlementData.data as DataSourceDefinition;
+  const parentSettlementData =
+    parentMarketData?.tradableInstrument.instrument?.product
+      ?.dataSourceSpecForSettlementData?.data;
   const terminationData = marketData.tradableInstrument.instrument.product
     .dataSourceSpecForTradingTermination.data as DataSourceDefinition;
+  const parentTerminationData =
+    parentMarketData?.tradableInstrument.instrument?.product
+      ?.dataSourceSpecForTradingTermination?.data;
+
+  const isParentSettlementDataEqual =
+    parentSettlementData !== undefined &&
+    isEqual(settlementData, parentSettlementData);
+  const isParentTerminationDataEqual =
+    parentTerminationData !== undefined &&
+    isEqual(terminationData, parentTerminationData);
 
   const getSigners = (data: DataSourceDefinition) => {
     if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
@@ -97,12 +112,22 @@ export const ProposalMarketData = ({
               <AccordionItem
                 itemId="key-details"
                 title={t('Key details')}
-                content={<KeyDetailsInfoPanel market={marketData} />}
+                content={
+                  <KeyDetailsInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
               />
               <AccordionItem
                 itemId="instrument"
                 title={t('Instrument')}
-                content={<InstrumentInfoPanel market={marketData} />}
+                content={
+                  <InstrumentInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
               />
               {isEqual(
                 getSigners(settlementData),
@@ -115,6 +140,11 @@ export const ProposalMarketData = ({
                     <OracleInfoPanel
                       market={marketData}
                       type="settlementData"
+                      parentMarket={
+                        isParentSettlementDataEqual
+                          ? undefined
+                          : parentMarketData
+                      }
                     />
                   }
                 />
@@ -127,6 +157,11 @@ export const ProposalMarketData = ({
                       <OracleInfoPanel
                         market={marketData}
                         type="settlementData"
+                        parentMarket={
+                          isParentSettlementDataEqual
+                            ? undefined
+                            : parentMarketData
+                        }
                       />
                     }
                   />
@@ -135,11 +170,21 @@ export const ProposalMarketData = ({
                     itemId="termination-oracle"
                     title={t('Termination Oracle')}
                     content={
-                      <OracleInfoPanel market={marketData} type="termination" />
+                      <OracleInfoPanel
+                        market={marketData}
+                        type="termination"
+                        parentMarket={
+                          isParentTerminationDataEqual
+                            ? undefined
+                            : parentMarketData
+                        }
+                      />
                     }
                   />
                 </>
               )}
+              {/*Note: successor markets will not differ in their settlement*/}
+              {/*assets, so no need to pass in parent market data for comparison.*/}
               <AccordionItem
                 itemId="settlement-asset"
                 title={t('Settlement asset')}
@@ -148,22 +193,42 @@ export const ProposalMarketData = ({
               <AccordionItem
                 itemId="metadata"
                 title={t('Metadata')}
-                content={<MetadataInfoPanel market={marketData} />}
+                content={
+                  <MetadataInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
               />
               <AccordionItem
                 itemId="risk-model"
                 title={t('Risk model')}
-                content={<RiskModelInfoPanel market={marketData} />}
+                content={
+                  <RiskModelInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
               />
               <AccordionItem
                 itemId="risk-parameters"
                 title={t('Risk parameters')}
-                content={<RiskParametersInfoPanel market={marketData} />}
+                content={
+                  <RiskParametersInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
               />
               <AccordionItem
                 itemId="risk-factors"
                 title={t('Risk factors')}
-                content={<RiskFactorsInfoPanel market={marketData} />}
+                content={
+                  <RiskFactorsInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
               />
               {(
                 marketData.priceMonitoringSettings?.parameters?.triggers || []
@@ -174,6 +239,7 @@ export const ProposalMarketData = ({
                   content={
                     <PriceMonitoringBoundsInfoPanel
                       market={marketData}
+                      parentMarket={parentMarketData}
                       triggerIndex={triggerIndex}
                     />
                   }
@@ -183,13 +249,21 @@ export const ProposalMarketData = ({
                 itemId="liqudity-monitoring-parameters"
                 title={t('Liquidity monitoring parameters')}
                 content={
-                  <LiquidityMonitoringParametersInfoPanel market={marketData} />
+                  <LiquidityMonitoringParametersInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
                 }
               />
               <AccordionItem
                 itemId="liquidity-price-range"
                 title={t('Liquidity price range')}
-                content={<LiquidityPriceRangeInfoPanel market={marketData} />}
+                content={
+                  <LiquidityPriceRangeInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
               />
             </Accordion>
           </div>

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

@@ -13,7 +13,7 @@ import Routes from '../../../routes';
 import { ProposalMarketData } from '../proposal-market-data';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { MarketInfoWithData } from '@vegaprotocol/markets';
+import type { MarketInfo } from '@vegaprotocol/markets';
 import type { AssetQuery } from '@vegaprotocol/assets';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
@@ -31,7 +31,8 @@ export enum ProposalType {
 export interface ProposalProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
   networkParams: Partial<NetworkParamsResult>;
-  newMarketData?: MarketInfoWithData | null;
+  newMarketData?: MarketInfo | null;
+  parentMarketData?: MarketInfo | null;
   assetData?: AssetQuery | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   restData: any;
@@ -46,6 +47,7 @@ export const Proposal = ({
   networkParams,
   restData,
   newMarketData,
+  parentMarketData,
   assetData,
   originalMarketProposalRestData,
   mostRecentlyEnactedAssociatedMarketProposal,
@@ -157,7 +159,10 @@ export const Proposal = ({
 
         {newMarketData && (
           <div className="mb-4">
-            <ProposalMarketData marketData={newMarketData} />
+            <ProposalMarketData
+              marketData={newMarketData}
+              parentMarketData={parentMarketData ? parentMarketData : undefined}
+            />
           </div>
         )}
 

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

@@ -8,12 +8,15 @@ import { useProposalQuery } from './__generated__/Proposal';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import { ENV } from '../../../config';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import { marketInfoWithDataProvider } from '@vegaprotocol/markets';
+import { marketInfoProvider } from '@vegaprotocol/markets';
 import { useAssetQuery } from '@vegaprotocol/assets';
 import {
   NetworkParams,
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
+import { useParentMarketIdQuery } from '@vegaprotocol/markets';
+import { FLAGS } from '@vegaprotocol/environment';
+import { useSuccessorMarketProposalDetails } from '@vegaprotocol/proposals';
 
 export const ProposalContainer = () => {
   const [
@@ -54,6 +57,10 @@ export const ProposalContainer = () => {
     skip: !params.proposalId,
   });
 
+  const successor = useSuccessorMarketProposalDetails(params.proposalId);
+
+  const isSuccessor = !!successor?.parentMarketId || !!successor.code;
+
   const {
     state: {
       data: originalMarketProposalRestData,
@@ -88,7 +95,7 @@ export const ProposalContainer = () => {
     loading: newMarketLoading,
     error: newMarketError,
   } = useDataProvider({
-    dataProvider: marketInfoWithDataProvider,
+    dataProvider: marketInfoProvider,
     skipUpdates: true,
     variables: {
       marketId: data?.proposal?.id || '',
@@ -96,6 +103,33 @@ export const ProposalContainer = () => {
     },
   });
 
+  const {
+    data: parentMarketId,
+    loading: parentMarketIdLoading,
+    error: parentMarketIdError,
+  } = useParentMarketIdQuery({
+    variables: {
+      marketId: newMarketData?.id || '',
+    },
+    skip: !FLAGS.SUCCESSOR_MARKETS || !isSuccessor || !newMarketData?.id,
+  });
+
+  const {
+    data: parentMarketData,
+    loading: parentMarketLoading,
+    error: parentMarketError,
+  } = useDataProvider({
+    dataProvider: marketInfoProvider,
+    skipUpdates: true,
+    variables: {
+      marketId: parentMarketId?.market?.parentMarketID || '',
+      skip:
+        !FLAGS.SUCCESSOR_MARKETS ||
+        !isSuccessor ||
+        !parentMarketId?.market?.parentMarketID,
+    },
+  });
+
   const {
     data: assetData,
     loading: assetLoading,
@@ -160,6 +194,8 @@ export const ProposalContainer = () => {
         newMarketLoading ||
         assetLoading ||
         networkParamsLoading ||
+        parentMarketIdLoading ||
+        parentMarketLoading ||
         (restLoading ? (restLoading as boolean) : false) ||
         (originalMarketProposalRestLoading
           ? (originalMarketProposalRestLoading as boolean)
@@ -172,15 +208,18 @@ export const ProposalContainer = () => {
         error ||
         newMarketError ||
         assetError ||
+        networkParamsError ||
+        parentMarketIdError ||
+        parentMarketError ||
         restError ||
         originalMarketProposalRestError ||
-        previouslyEnactedMarketProposalsRestError ||
-        networkParamsError
+        previouslyEnactedMarketProposalsRestError
       }
       data={{
         ...data,
         ...networkParams,
         ...(newMarketData ? { newMarketData } : {}),
+        ...(parentMarketData ? { parentMarketData } : {}),
         ...(assetData ? { assetData } : {}),
         ...(restData ? { restData } : {}),
         ...(originalMarketProposalRestData
@@ -197,6 +236,7 @@ export const ProposalContainer = () => {
           networkParams={networkParams}
           restData={restData}
           newMarketData={newMarketData}
+          parentMarketData={parentMarketData}
           assetData={assetData}
           originalMarketProposalRestData={originalMarketProposalRestData}
           mostRecentlyEnactedAssociatedMarketProposal={

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

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

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

@@ -104,11 +104,11 @@ describe('deposit actions', { tags: '@smoke' }, () => {
     cy.visit('/#/markets/market-1');
   });
 
-  it('Deposit to trade is visble', () => {
+  it('Deposit to trade is visible', () => {
     cy.getByTestId('Collateral').click();
-    cy.contains('[data-testid="deposit"]', 'Deposit')
-      .should('be.visible')
-      .click();
+    cy.get('[row-id="asset-id"]').contains('tEURO').should('be.visible');
+    cy.contains('[data-testid="deposit"]', 'Deposit').should('be.visible');
+    cy.contains('[data-testid="deposit"]', 'Deposit').click();
     cy.getByTestId('deposit-submit').should('be.visible');
   });
 });

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

@@ -155,7 +155,10 @@ describe(
         { name: 'Volume', infoText: 'Volume: 55,000' },
       ];
       cy.get(indicatorInfo).eq(1).realHover();
-      cy.get('.close-button-module_closeButton__2ifkl').click({ force: true });
+      cy.get('.chart__wrapper [data-testid="split-view-view"]')
+        .last()
+        .find('[role="button"][title="Close"]')
+        .click({ force: true });
       cy.get(indicatorInfo).should('have.length', 1);
 
       checkMenuItemCheckbox('Studies', studyInfo);

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

@@ -22,9 +22,8 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
   it('must show place order button and connect wallet if wallet is not connected', () => {
     // 0003-WTXN-001
     cy.getByTestId('connect-vega-wallet'); // Not connected
-    cy.getByTestId('order-connect-wallet').should('exist');
     cy.getByTestId(placeOrderBtn).should('exist');
-    cy.getByTestId('deal-ticket-connect-wallet').should('exist');
+    cy.getByTestId('get-started-button').should('exist');
   });
 
   it('must be able to select order direction - long/short', function () {
@@ -45,7 +44,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     mockConnectWallet();
     cy.getByTestId(toggleLimit).click();
     cy.getByTestId(orderPriceField).clear().type('101');
-    cy.getByTestId('order-connect-wallet').click();
+    cy.getByTestId('get-started-button').click();
     cy.getByTestId('dialog-content').should('be.visible');
     cy.getByTestId('connectors-list')
       .find('[data-testid="connector-jsonRpc"]')

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

@@ -63,6 +63,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderTIFDropDown).select('TIME_IN_FORCE_GTC');
       cy.getByTestId(orderSizeField).clear().type('1');
       cy.getByTestId(orderPriceField).clear().type('1.123456');
+      cy.getByTestId(placeOrderBtn).click();
       cy.getByTestId('deal-ticket-error-message-price-limit').should(
         'have.text',
         'Price accepts up to 5 decimal places'
@@ -73,6 +74,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
   describe('market order', () => {
     before(() => {
       cy.getByTestId(toggleMarket).click();
+      cy.getByTestId(placeOrderBtn).click();
     });
 
     it('must not see the price unit', function () {

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

@@ -48,6 +48,7 @@ describe('suspended market validation', { tags: '@regression' }, () => {
     cy.getByTestId(orderPriceField).clear().type('0.1');
     cy.getByTestId(orderSizeField).clear().type('1');
     cy.getByTestId(placeOrderBtn).should('be.enabled');
+    cy.getByTestId(placeOrderBtn).click();
     cy.getByTestId('deal-ticket-warning-auction').should(
       'have.text',
       'Any orders placed now will not trade until the auction ends'
@@ -60,6 +61,7 @@ describe('suspended market validation', { tags: '@regression' }, () => {
       TIFlist.filter((item) => item.code === 'FOK')[0].value
     );
     cy.getByTestId(placeOrderBtn).should('be.enabled');
+    cy.getByTestId(placeOrderBtn).click();
     cy.getByTestId('deal-ticket-error-message-tif').should(
       'have.text',
       'This market is in auction until it reaches sufficient liquidity. Until the auction ends, you can only place GFA, GTT, or GTC limit orders'

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

@@ -53,7 +53,7 @@ describe('fills', { tags: '@regression' }, () => {
     cy.getByTestId(tabFills).contains('Market');
     cy.getByTestId(tabFills)
       .get(
-        '[role="gridcell"][col-id="market.tradableInstrument.instrument.name"]'
+        '[role="gridcell"][col-id="market.tradableInstrument.instrument.code"]'
       )
       .each(($marketSymbol) => {
         cy.wrap($marketSymbol).invoke('text').should('not.be.empty');

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

@@ -142,22 +142,22 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
   it('sorting by Market', () => {
     visitAndClickPositions();
     const marketsSortedDefault = [
-      'ACTIVE MARKET',
-      'Apple Monthly (30 Jun 2022)',
-      'ETHBTC Quarterly (30 Jun 2022)',
-      'SUSPENDED MARKET',
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'ETHBTC.QM21',
+      'SOLUSD',
     ];
     const marketsSortedAsc = [
-      'ACTIVE MARKET',
-      'Apple Monthly (30 Jun 2022)',
-      'ETHBTC Quarterly (30 Jun 2022)',
-      'SUSPENDED MARKET',
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'ETHBTC.QM21',
+      'SOLUSD',
     ];
     const marketsSortedDesc = [
-      'SUSPENDED MARKET',
-      'ETHBTC Quarterly (30 Jun 2022)',
-      'Apple Monthly (30 Jun 2022)',
-      'ACTIVE MARKET',
+      'SOLUSD',
+      'ETHBTC.QM21',
+      'BTCUSD.MF21',
+      'AAPL.MF21',
     ];
     cy.getByTestId(positions).click();
     // 7004-POSI-003
@@ -251,11 +251,13 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
   it('I can see warnings', () => {
     visitAndClickPositions();
 
-    cy.get('[col-id="openVolume"]').within(() => {
-      cy.get('[aria-label="warning-sign icon"]')
-        .should('be.visible')
-        .realHover();
-    });
+    cy.get('[col-id="openVolume"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[aria-label="warning-sign icon"]')
+          .should('be.visible')
+          .realHover();
+      });
     // 7004-POSI-011
     cy.getByTestId(tooltipContent).should('be.visible');
   });
@@ -289,9 +291,11 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
 
   it('View settlement asset', () => {
     visitAndClickPositions();
-    cy.get('[col-id="asset"]').within(() => {
-      cy.get('button[type="button"]').first().click();
-    });
+    cy.get('[col-id="asset"]')
+      .eq(3)
+      .within(() => {
+        cy.get('button[type="button"]').click();
+      });
     // 7004-POSI-008
     cy.getByTestId(dialogContent).should('be.visible');
     cy.getByTestId(dialogCloseX).click();
@@ -306,7 +310,7 @@ function validatePositionsDisplayed(multiKey = false) {
   cy.getByTestId('tab-positions').should('be.visible');
   cy.getByTestId('tab-positions')
     .get('.ag-center-cols-container .ag-row')
-    .first()
+    .eq(multiKey ? 3 : 1)
     .within(() => {
       cy.get('[col-id="marketName"]')
         .should('be.visible')

apps/trading-e2e/src/integration/withdraw-key-to-key-validation-fees.cy.ts

@@ -0,0 +1,119 @@
+import { selectAsset } from '../support/helpers';
+
+const amountField = 'input[name="amount"]';
+const includeTransferFeeRadioBtn = 'include-transfer-fee';
+const manageVegaWallet = 'manage-vega-wallet';
+const toAddressField = '[name="toAddress"]';
+const totalTransferfee = 'total-transfer-fee';
+const transferAmount = 'transfer-amount';
+const transferForm = 'transfer-form';
+const transferFee = 'transfer-fee';
+const walletTransfer = 'wallet-transfer';
+
+const ASSET_SEPOLIA_TBTC = 2;
+
+describe.skip(
+  'transfer fees',
+  { tags: '@regression', testIsolation: true },
+  () => {
+    beforeEach(() => {
+      cy.mockWeb3Provider();
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.setVegaWallet();
+
+      cy.visit('/');
+      cy.getByTestId(manageVegaWallet).click();
+      cy.getByTestId(walletTransfer).click();
+
+      cy.wait('@Assets');
+      cy.wait('@Accounts');
+
+      cy.mockVegaWalletTransaction();
+    });
+
+    it('transfer fees tooltips', () => {
+      // 1003-TRAN-015
+      // 1003-TRAN-016
+      // 1003-TRAN-017
+      // 1003-TRAN-018
+      // 1003-TRAN-019
+      cy.getByTestId(transferForm);
+      cy.contains('Enter manually').click();
+      cy.getByTestId(transferForm)
+        .find(toAddressField)
+        .type(
+          '7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535'
+        );
+      selectAsset(ASSET_SEPOLIA_TBTC);
+      cy.getByTestId(transferForm)
+        .find(amountField)
+        .type('1', { delay: 100, force: true });
+
+      /// Check Include Transfer Fee tooltip
+      cy.get('label[for="include-transfer-fee"] div').realHover();
+      cy.get('[data-side="bottom"] div')
+        .should('be.visible')
+        .should('not.be.empty');
+
+      //Check Transfer Fee tooltip
+      cy.contains('div', 'Transfer fee').realHover();
+      cy.get('[data-side="bottom"] div')
+        .should('be.visible')
+        .should('not.be.empty');
+
+      //Check Amount to be transferred tooltip
+      cy.contains('div', 'Amount to be transferred').realHover();
+      cy.get('[data-side="bottom"] div')
+        .should('be.visible')
+        .should('not.be.empty');
+
+      //Check Total amount (with fee) tooltip
+      cy.contains('div', 'Total amount (with fee)').realHover();
+      cy.get('[data-side="bottom"] div')
+        .should('be.visible')
+        .should('not.be.empty');
+    });
+
+    it('transfer fees', () => {
+      // 1003-TRAN-020
+      // 1003-TRAN-021
+      // 1003-TRAN-022
+      // 1003-TRAN-023
+      cy.getByTestId(transferForm);
+      cy.contains('Enter manually').click();
+
+      cy.getByTestId(transferForm)
+        .find(toAddressField)
+        .type(
+          '7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535'
+        );
+      selectAsset(ASSET_SEPOLIA_TBTC);
+      cy.getByTestId(includeTransferFeeRadioBtn).should('be.disabled');
+
+      cy.getByTestId(transferForm)
+        .find(amountField)
+        .type('1', { delay: 100, force: true });
+
+      cy.getByTestId(transferFee)
+        .should('be.visible')
+        .should('contain.text', '0.01');
+      cy.getByTestId(transferAmount)
+        .should('be.visible')
+        .should('contain.text', '1.00');
+      cy.getByTestId(totalTransferfee)
+        .should('be.visible')
+        .should('contain.text', '1.01');
+      cy.getByTestId(includeTransferFeeRadioBtn).click();
+      cy.getByTestId(transferFee)
+        .should('be.visible')
+        .should('contain.text', '0.01');
+      cy.getByTestId(transferAmount)
+        .should('be.visible')
+        .should('contain.text', '0.99');
+      cy.getByTestId(totalTransferfee)
+        .should('be.visible')
+        .should('contain.text', '1.00');
+    });
+  }
+);

apps/trading-e2e/src/integration/withdraw-key-to-key-validation.cy.ts

@@ -0,0 +1,91 @@
+import { selectAsset } from '../support/helpers';
+
+const amountField = 'input[name="amount"]';
+const transferText = 'transfer-intro-text';
+const errorText = 'input-error-text';
+const formFieldError = 'input-error-text';
+const keyID = `[data-testid="${transferText}"] > .rounded-md`;
+const manageVegaWallet = 'manage-vega-wallet';
+const submitTransferBtn = '[type="submit"]';
+const toAddressField = '[name="toAddress"]';
+const transferForm = 'transfer-form';
+const walletTransfer = 'wallet-transfer';
+
+const ASSET_EURO = 1;
+const ASSET_SEPOLIA_TBTC = 2;
+
+describe(
+  'transfer form validation',
+  { tags: '@regression', testIsolation: true },
+  () => {
+    beforeEach(() => {
+      cy.mockWeb3Provider();
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.setVegaWallet();
+
+      cy.visit('/#/portfolio');
+      cy.getByTestId(manageVegaWallet).click();
+      cy.getByTestId(walletTransfer).click();
+
+      cy.wait('@Accounts');
+      cy.wait('@Assets');
+
+      cy.mockVegaWalletTransaction();
+    });
+
+    it('transfer Text', () => {
+      // 1003-TRAN-003
+      cy.getByTestId(transferText)
+        .should('exist')
+        .get(keyID)
+        .invoke('text')
+        .should('match', /[\w.]{6}…[\w.]{6}/);
+    });
+
+    it('invalid vega key validation', () => {
+      //1003-TRAN-013
+      //1003-TRAN-004
+      cy.getByTestId(transferForm).should('be.visible');
+      cy.contains('Enter manually').click();
+      cy.getByTestId(transferForm).find(toAddressField).type('asd');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Invalid Vega key');
+      cy.contains('label', 'Vega key').should('be.visible');
+      cy.contains('label', 'Asset').should('be.visible');
+      cy.contains('label', 'Amount').should('be.visible');
+    });
+
+    it('empty fields', () => {
+      // 1003-TRAN-012
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Required');
+      cy.getByTestId(formFieldError).should('have.length', 3);
+    });
+
+    it('min amount', () => {
+      // 1002-WITH-010
+      // 1003-TRAN-014
+      selectAsset(ASSET_SEPOLIA_TBTC);
+      cy.get(amountField).clear().type('0');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'Value is below minimum'
+      );
+    });
+
+    it('max amount', () => {
+      // 1003-TRAN-002
+      // 1003-TRAN-011
+      // 1003-TRAN-002
+      selectAsset(ASSET_EURO); // Will be above maximum because the vega wallet doesn't have any collateral
+      cy.get(amountField).clear().type('1001', { delay: 100 });
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'You cannot transfer more than your available collateral'
+      );
+    });
+  }
+);

apps/trading-e2e/src/integration/withdraw-key-to-key.cy.ts

@@ -5,206 +5,15 @@ const amountShortName = 'input[name="amount"] + div + span.text-xs';
 const assetSelection = 'select-asset';
 const assetBalance = 'asset-balance';
 const assetOption = 'rich-select-option';
-const transferText = 'transfer-intro-text';
-const errorText = 'input-error-text';
-const formFieldError = 'input-error-text';
-const includeTransferFeeRadioBtn = 'include-transfer-fee';
-const keyID = `[data-testid="${transferText}"] > .rounded-md`;
-const manageVegaWallet = 'manage-vega-wallet';
 const openTransferButton = 'open-transfer';
 const submitTransferBtn = '[type="submit"]';
 const toAddressField = '[name="toAddress"]';
-const totalTransferfee = 'total-transfer-fee';
-const transferAmount = 'transfer-amount';
 const transferForm = 'transfer-form';
-const transferFee = 'transfer-fee';
-const walletTransfer = 'wallet-transfer';
-
-const ASSET_EURO = 1;
 const ASSET_SEPOLIA_TBTC = 2;
-
 const collateralTab = 'Collateral';
 const toastCloseBtn = 'toast-close';
 const toastContent = 'toast-content';
 
-describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
-  beforeEach(() => {
-    cy.mockWeb3Provider();
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-
-    cy.visit('/');
-    cy.getByTestId(manageVegaWallet).click();
-    cy.getByTestId(walletTransfer).click();
-
-    cy.wait('@Assets');
-    cy.wait('@Accounts');
-
-    cy.mockVegaWalletTransaction();
-
-    // Only click if not already active otherwise sidebar will close
-    cy.get('[data-testid="sidebar-content"]').then(($sidebarContent) => {
-      if ($sidebarContent.find('h2').text() !== 'Transfer') {
-        cy.get('[data-testid="sidebar"] [data-testid="Transfer"]').click();
-      }
-    });
-  });
-
-  it('transfer fees tooltips', () => {
-    // 1003-TRAN-015
-    // 1003-TRAN-016
-    // 1003-TRAN-017
-    // 1003-TRAN-018
-    // 1003-TRAN-019
-    cy.getByTestId(transferForm);
-    cy.contains('Enter manually').click();
-    cy.getByTestId(transferForm)
-      .find(toAddressField)
-      .type('7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535');
-    selectAsset(ASSET_SEPOLIA_TBTC);
-    cy.getByTestId(transferForm)
-      .find(amountField)
-      .type('1', { delay: 100, force: true });
-
-    /// Check Include Transfer Fee tooltip
-    cy.get('label[for="include-transfer-fee"] div').realHover();
-    cy.get('[data-side="bottom"] div')
-      .should('be.visible')
-      .should('not.be.empty');
-
-    //Check Transfer Fee tooltip
-    cy.contains('div', 'Transfer fee').realHover();
-    cy.get('[data-side="bottom"] div')
-      .should('be.visible')
-      .should('not.be.empty');
-
-    //Check Amount to be transferred tooltip
-    cy.contains('div', 'Amount to be transferred').realHover();
-    cy.get('[data-side="bottom"] div')
-      .should('be.visible')
-      .should('not.be.empty');
-
-    //Check Total amount (with fee) tooltip
-    cy.contains('div', 'Total amount (with fee)').realHover();
-    cy.get('[data-side="bottom"] div')
-      .should('be.visible')
-      .should('not.be.empty');
-  });
-
-  it('transfer fees', () => {
-    // 1003-TRAN-020
-    // 1003-TRAN-021
-    // 1003-TRAN-022
-    // 1003-TRAN-023
-    cy.getByTestId(transferForm);
-    cy.contains('Enter manually').click();
-
-    cy.getByTestId(transferForm)
-      .find(toAddressField)
-      .type('7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535');
-    selectAsset(ASSET_SEPOLIA_TBTC);
-    cy.getByTestId(includeTransferFeeRadioBtn).should('be.disabled');
-
-    cy.getByTestId(transferForm)
-      .find(amountField)
-      .type('1', { delay: 100, force: true });
-
-    cy.getByTestId(transferFee)
-      .should('be.visible')
-      .should('contain.text', '0.01');
-    cy.getByTestId(transferAmount)
-      .should('be.visible')
-      .should('contain.text', '1.00');
-    cy.getByTestId(totalTransferfee)
-      .should('be.visible')
-      .should('contain.text', '1.01');
-    cy.getByTestId(includeTransferFeeRadioBtn).click();
-    cy.getByTestId(transferFee)
-      .should('be.visible')
-      .should('contain.text', '0.01');
-    cy.getByTestId(transferAmount)
-      .should('be.visible')
-      .should('contain.text', '0.99');
-    cy.getByTestId(totalTransferfee)
-      .should('be.visible')
-      .should('contain.text', '1.00');
-  });
-});
-
-describe(
-  'transfer form validation',
-  { tags: '@regression', testIsolation: true },
-  () => {
-    beforeEach(() => {
-      cy.mockWeb3Provider();
-      cy.mockTradingPage();
-      cy.mockSubscription();
-      cy.setVegaWallet();
-
-      cy.visit('/#/portfolio');
-      cy.getByTestId(manageVegaWallet).click();
-      cy.getByTestId(walletTransfer).click();
-
-      cy.wait('@Accounts');
-      cy.wait('@Assets');
-    });
-
-    it('transfer Text', () => {
-      // 1003-TRAN-003
-      cy.getByTestId(transferText)
-        .should('exist')
-        .get(keyID)
-        .invoke('text')
-        .should('match', /[\w.]{6}…[\w.]{6}/);
-    });
-
-    it('invalid vega key validation', () => {
-      //1003-TRAN-013
-      //1003-TRAN-004
-      cy.getByTestId(transferForm).should('be.visible');
-      cy.contains('Enter manually').click();
-      cy.getByTestId(transferForm).find(toAddressField).type('asd');
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(formFieldError).should('contain.text', 'Invalid Vega key');
-      cy.contains('label', 'Vega key').should('be.visible');
-      cy.contains('label', 'Asset').should('be.visible');
-      cy.contains('label', 'Amount').should('be.visible');
-    });
-
-    it('empty fields', () => {
-      // 1003-TRAN-012
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(formFieldError).should('contain.text', 'Required');
-      cy.getByTestId(formFieldError).should('have.length', 3);
-    });
-
-    it('min amount', () => {
-      // 1002-WITH-010
-      // 1003-TRAN-014
-      selectAsset(ASSET_SEPOLIA_TBTC);
-      cy.get(amountField).clear().type('0');
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(errorText).should(
-        'contain.text',
-        'Value is below minimum'
-      );
-    });
-
-    it('max amount', () => {
-      // 1003-TRAN-002
-      // 1003-TRAN-011
-      // 1003-TRAN-002
-      selectAsset(ASSET_EURO); // Will be above maximum because the vega wallet doesn't have any collateral
-      cy.get(amountField).clear().type('1001', { delay: 100 });
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(errorText).should(
-        'contain.text',
-        'You cannot transfer more than your available collateral'
-      );
-    });
-  }
-);
 describe('withdraw actions', { tags: '@smoke', testIsolation: true }, () => {
   beforeEach(() => {
     cy.mockWeb3Provider();

apps/trading/.env.mainnet

@@ -20,4 +20,4 @@ NX_APP_VERSION=v0.20.21-core-0.71.6
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.testnet

@@ -18,5 +18,5 @@ NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-# NX_ICEBERG_ORDERS
+NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS

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

@@ -0,0 +1,19 @@
+import { DepositContainer } from '@vegaprotocol/deposits';
+import { GetStarted } from '../../components/welcome-dialog';
+import { t } from '@vegaprotocol/i18n';
+
+export const Deposit = () => {
+  return (
+    <div className="py-16 px-8 flex w-full justify-center">
+      <div className="lg:min-w-[700px] min-w-[300px] max-w-[700px]">
+        <h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
+          {t('Deposit')}
+        </h1>
+        <div className="mt-10">
+          <DepositContainer />
+          <GetStarted />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,3 @@
+import { Deposit } from './deposit';
+
+export default Deposit;

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

@@ -44,16 +44,16 @@ const MainGrid = memo(
 
     return (
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
-        <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
-          <ResizableGrid
-            proportionalLayout={false}
-            minSize={200}
-            onChange={handleOnMiddleLayoutChange}
-          >
+        <ResizableGridPanel
+          preferredSize={sizes[0]}
+          priority={LayoutPriority.High}
+          minSize={200}
+        >
+          <ResizableGrid onChange={handleOnMiddleLayoutChange}>
             <ResizableGridPanel
               priority={LayoutPriority.High}
               minSize={200}
-              preferredSize={sizesMiddle[1] || '50%'}
+              preferredSize={sizesMiddle[0] || '75%'}
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-left">
@@ -74,8 +74,8 @@ const MainGrid = memo(
               </TradeGridChild>
             </ResizableGridPanel>
             <ResizableGridPanel
-              preferredSize={sizesMiddle[2] || 300}
               minSize={200}
+              preferredSize={sizesMiddle[1] || 300}
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-right">
@@ -91,9 +91,9 @@ const MainGrid = memo(
           </ResizableGrid>
         </ResizableGridPanel>
         <ResizableGridPanel
-          priority={LayoutPriority.Low}
           preferredSize={sizes[1] || '25%'}
           minSize={50}
+          priority={LayoutPriority.Low}
         >
           <TradeGridChild>
             <Tabs storageKey="console-trade-grid-bottom">

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

@@ -1,15 +1,12 @@
-import { Button } from '@vegaprotocol/ui-toolkit';
+import { Button, Splash } from '@vegaprotocol/ui-toolkit';
 import { DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useRef } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
 import { useSidebar, ViewType } from '../../components/sidebar';
 
 export const DepositsContainer = () => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const { pubKey, isReadOnly } = useVegaWallet();
   const { data, error } = useDataProvider({
     dataProvider: depositsProvider,
@@ -17,11 +14,13 @@ export const DepositsContainer = () => {
     skip: !pubKey,
   });
   const setView = useSidebar((store) => store.setView);
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
   return (
     <div className="h-full">
       <DepositsTable
         rowData={data}
-        ref={gridRef}
         overlayNoRowsTemplate={error ? error.message : t('No deposits')}
       />
       {!isReadOnly && (

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

@@ -1,4 +1,4 @@
-import { Button } from '@vegaprotocol/ui-toolkit';
+import { Button, Splash } from '@vegaprotocol/ui-toolkit';
 import {
   withdrawalProvider,
   WithdrawalsTable,
@@ -18,7 +18,9 @@ export const WithdrawalsContainer = () => {
   });
   const setView = useSidebar((store) => store.setView);
   const { ready, delayed } = useIncompleteWithdrawals();
-
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
   return (
     <>
       <div className="h-full relative">

apps/trading/components/navbar/navbar.tsx

@@ -52,6 +52,9 @@ export const Navbar = ({
           'bg-vega-yellow text-vega-clight-50': theme === 'yellow',
           'text-default': theme === 'system',
         })}
+        style={{
+          background: theme === 'yellow' ? 'url(/testnet-logo-bg.png' : 'none',
+        }}
       >
         <VLogo className="w-4" />
       </NavLink>

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

@@ -1,27 +1,15 @@
 import { OrderbookManager } from '@vegaprotocol/market-depth';
-import { useCreateOrderStore } from '@vegaprotocol/orders';
 import { ViewType, useSidebar } from '../sidebar';
-import { useStopOrderFormValues } from '@vegaprotocol/deal-ticket';
+import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
 
 export const OrderbookContainer = ({ marketId }: { marketId: string }) => {
-  const useOrderStoreRef = useCreateOrderStore();
-  const updateOrder = useOrderStoreRef((store) => store.update);
-  const updateStoredFormValues = useStopOrderFormValues(
-    (state) => state.update
-  );
+  const update = useDealTicketFormValues((state) => state.updateAll);
   const setView = useSidebar((store) => store.setView);
   return (
     <OrderbookManager
       marketId={marketId}
-      onClick={({ price, size }) => {
-        if (price) {
-          updateOrder(marketId, { price });
-          updateStoredFormValues(marketId, { price });
-        }
-        if (size) {
-          updateOrder(marketId, { size });
-          updateStoredFormValues(marketId, { size });
-        }
+      onClick={(values) => {
+        update(marketId, values);
         setView({ type: ViewType.Order });
       }}
     />

apps/trading/components/sidebar/sidebar.spec.tsx

@@ -1,7 +1,15 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Sidebar, SidebarContent, ViewType, useSidebar } from './sidebar';
+import {
+  Sidebar,
+  SidebarButton,
+  SidebarContent,
+  ViewType,
+  useSidebar,
+} from './sidebar';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { VegaWalletProvider } from '@vegaprotocol/wallet';
 
 jest.mock('../node-health', () => ({
   NodeHealthContainer: () => <span data-testid="node-health" />,
@@ -28,11 +36,14 @@ describe('Sidebar', () => {
     'does not render ticket and info',
     (path) => {
       render(
-        <MemoryRouter initialEntries={[path]}>
-          <Sidebar />
-        </MemoryRouter>
+        <VegaWalletProvider>
+          <MemoryRouter initialEntries={[path]}>
+            <Sidebar />
+          </MemoryRouter>
+        </VegaWalletProvider>
       );
 
+      expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
       expect(screen.getByTestId(ViewType.Settings)).toBeInTheDocument();
       expect(screen.getByTestId(ViewType.Transfer)).toBeInTheDocument();
       expect(screen.getByTestId(ViewType.Deposit)).toBeInTheDocument();
@@ -47,11 +58,14 @@ describe('Sidebar', () => {
 
   it('renders ticket and info on market pages', () => {
     render(
-      <MemoryRouter initialEntries={['/markets/ABC']}>
-        <Sidebar />
-      </MemoryRouter>
+      <VegaWalletProvider>
+        <MemoryRouter initialEntries={['/markets/ABC']}>
+          <Sidebar />
+        </MemoryRouter>
+      </VegaWalletProvider>
     );
 
+    expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
     expect(screen.getByTestId(ViewType.Settings)).toBeInTheDocument();
     expect(screen.getByTestId(ViewType.Transfer)).toBeInTheDocument();
     expect(screen.getByTestId(ViewType.Deposit)).toBeInTheDocument();
@@ -65,9 +79,11 @@ describe('Sidebar', () => {
 
   it('renders selected state', async () => {
     render(
-      <MemoryRouter initialEntries={['/markets/ABC']}>
-        <Sidebar />
-      </MemoryRouter>
+      <VegaWalletProvider>
+        <MemoryRouter initialEntries={['/markets/ABC']}>
+          <Sidebar />
+        </MemoryRouter>
+      </VegaWalletProvider>
     );
 
     const settingsButton = screen.getByTestId(ViewType.Settings);
@@ -91,11 +107,13 @@ describe('Sidebar', () => {
 describe('SidebarContent', () => {
   it('renders the correct content', () => {
     const { container } = render(
-      <MemoryRouter initialEntries={['/markets/ABC']}>
-        <Routes>
-          <Route path="/markets/:marketId" element={<SidebarContent />} />
-        </Routes>
-      </MemoryRouter>
+      <VegaWalletProvider>
+        <MemoryRouter initialEntries={['/markets/ABC']}>
+          <Routes>
+            <Route path="/markets/:marketId" element={<SidebarContent />} />
+          </Routes>
+        </MemoryRouter>
+      </VegaWalletProvider>
     );
 
     expect(container).toBeEmptyDOMElement();
@@ -115,11 +133,13 @@ describe('SidebarContent', () => {
 
   it('closes sidebar if market id is required but not present', () => {
     const { container } = render(
-      <MemoryRouter initialEntries={['/portfolio']}>
-        <Routes>
-          <Route path="/portfolio" element={<SidebarContent />} />
-        </Routes>
-      </MemoryRouter>
+      <VegaWalletProvider>
+        <MemoryRouter initialEntries={['/portfolio']}>
+          <Routes>
+            <Route path="/portfolio" element={<SidebarContent />} />
+          </Routes>
+        </MemoryRouter>
+      </VegaWalletProvider>
     );
 
     act(() => {
@@ -141,3 +161,25 @@ describe('SidebarContent', () => {
     expect(container).toBeEmptyDOMElement();
   });
 });
+
+describe('SidebarButton', () => {
+  it.each([ViewType.Info, ViewType.Deposit, ViewType.ViewAs])(
+    'runs given callback regardless of requested view (%s)',
+    async (view) => {
+      const onClick = jest.fn();
+      render(
+        <SidebarButton
+          icon={VegaIconNames.INFO}
+          tooltip="INFO"
+          onClick={onClick}
+          view={view}
+        />
+      );
+
+      const btn = screen.getByTestId(view);
+      await userEvent.click(btn);
+
+      expect(onClick).toBeCalled();
+    }
+  );
+});

apps/trading/components/sidebar/sidebar.tsx

@@ -16,6 +16,7 @@ import { WithdrawContainer } from '../withdraw-container';
 import { Routes as AppRoutes } from '../../pages/client-router';
 import { persist } from 'zustand/middleware';
 import { GetStarted } from '../welcome-dialog';
+import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 
 const STORAGE_KEY = 'vega_sidebar_store';
 
@@ -26,6 +27,7 @@ export enum ViewType {
   Withdraw = 'Withdraw',
   Transfer = 'Transfer',
   Settings = 'Settings',
+  ViewAs = 'ViewAs',
 }
 
 type SidebarView =
@@ -53,6 +55,8 @@ type SidebarView =
 
 export const Sidebar = () => {
   const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
+  const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
+  const { pubKeys } = useVegaWallet();
   return (
     <div className="flex lg:flex-col gap-2 h-full p-1" data-testid="sidebar">
       <nav className={navClasses}>
@@ -105,6 +109,16 @@ export const Sidebar = () => {
         </Routes>
       </nav>
       <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
+        <SidebarButton
+          view={ViewType.ViewAs}
+          onClick={() => {
+            setViewAsDialogOpen(true);
+          }}
+          icon={VegaIconNames.EYE}
+          tooltip={t('View as party')}
+          disabled={Boolean(pubKeys)}
+        />
+
         <SidebarButton
           view={ViewType.Settings}
           icon={VegaIconNames.COG}
@@ -116,25 +130,43 @@ export const Sidebar = () => {
   );
 };
 
-const SidebarButton = ({
+export const SidebarButton = ({
   view,
   icon,
   tooltip,
+  disabled = false,
+  onClick,
 }: {
-  view: ViewType;
+  view?: ViewType;
   icon: VegaIconNames;
   tooltip: string;
+  disabled?: boolean;
+  onClick?: () => void;
 }) => {
   const { currView, setView } = useSidebar((store) => ({
     currView: store.view,
     setView: store.setView,
   }));
-  const buttonClasses = classNames('flex items-center p-1 rounded', {
-    'text-vega-clight-200 dark:text-vega-cdark-200 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500':
-      view !== currView?.type,
-    'bg-vega-yellow hover:bg-vega-yellow-550 text-black':
-      view === currView?.type,
-  });
+
+  const onSelect = (view: SidebarView['type']) => {
+    if (view === currView?.type) {
+      setView(null);
+    } else {
+      setView({ type: view });
+    }
+  };
+
+  const buttonClasses = classNames(
+    'flex items-center p-1 rounded',
+    'disabled:cursor-not-allowed disabled:text-vega-clight-500 dark:disabled:text-vega-cdark-500',
+    {
+      'text-vega-clight-200 dark:text-vega-cdark-200 enabled:hover:bg-vega-clight-500 dark:enabled:hover:bg-vega-cdark-500':
+        !view || view !== currView?.type,
+      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 text-black':
+        view && view === currView?.type,
+    }
+  );
+
   return (
     <Tooltip
       description={tooltip}
@@ -146,13 +178,8 @@ const SidebarButton = ({
       <button
         className={buttonClasses}
         data-testid={view}
-        onClick={() => {
-          if (view === currView?.type) {
-            setView(null);
-          } else {
-            setView({ type: view });
-          }
-        }}
+        onClick={onClick || (() => onSelect(view as SidebarView['type']))}
+        disabled={disabled}
       >
         <VegaIcon name={icon} size={20} />
       </button>
@@ -282,7 +309,7 @@ export const useSidebar = create<{
       view: null,
       setView: (x) =>
         set(() => {
-          if (x === null) {
+          if (x == null) {
             return { view: null, init: false };
           }
 

apps/trading/components/welcome-dialog/get-started.spec.tsx

@@ -0,0 +1,31 @@
+import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { GetStarted } from './get-started';
+import { render, screen } from '@testing-library/react';
+
+describe('GetStarted', () => {
+  const renderComponent = (context: Partial<VegaWalletContextShape> = {}) => {
+    return render(
+      <VegaWalletContext.Provider value={context as VegaWalletContextShape}>
+        <GetStarted />
+      </VegaWalletContext.Provider>
+    );
+  };
+
+  it('renders full get started content if not connected and no browser wallet detected', () => {
+    renderComponent();
+    expect(screen.getByTestId('get-started-banner')).toBeInTheDocument();
+  });
+
+  it('renders connect prompt if no pubKey but wallet installed', () => {
+    globalThis.window.vega = {} as Vega;
+    renderComponent();
+    expect(screen.getByTestId('order-connect-wallet')).toBeInTheDocument();
+    globalThis.window.vega = undefined as unknown as Vega;
+  });
+
+  it('renders nothing if connected', () => {
+    const { container } = renderComponent({ pubKey: 'my-pubkey' });
+    expect(container).toBeEmptyDOMElement();
+  });
+});

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

@@ -16,7 +16,6 @@ interface Props {
 
 export const GetStarted = ({ lead }: Props) => {
   const { pubKey } = useVegaWallet();
-
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
   const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
 
@@ -33,18 +32,18 @@ export const GetStarted = ({ lead }: Props) => {
     setOnboardingViewed('true');
   };
 
+  const wrapperClasses = classNames(
+    'flex flex-col py-4 px-6 gap-4 rounded',
+    'bg-vega-blue-300 dark:bg-vega-blue-700',
+    'border border-vega-blue-350 dark:border-vega-blue-650',
+    { 'mt-8': !lead }
+  );
+
   if (!pubKey && !isBrowserWalletInstalled()) {
     return (
-      <div
-        className={classNames(
-          'flex flex-col bg-vega-blue-300 dark:bg-vega-blue-700 border border-vega-blue-350 dark:border-vega-blue-650 px-6 gap-4',
-          { 'py-4': lead },
-          { 'mt-8 py-6': !lead }
-        )}
-        data-testid="get-started-banner"
-      >
+      <div className={wrapperClasses} data-testid="get-started-banner">
         {lead && <h2>{lead}</h2>}
-        <h3>{t('Get started')}</h3>
+        <h3 className="text-lg">{t('Get started')}</h3>
         <div>
           <ul className="list-decimal list-inside">
             <li>{t('Get a Vega wallet')}</li>
@@ -57,7 +56,6 @@ export const GetStarted = ({ lead }: Props) => {
           <TradingButton
             intent={Intent.Info}
             onClick={onButtonClick}
-            className="block w-full"
             data-testid="get-started-button"
           >
             {t('Get started')}
@@ -82,5 +80,28 @@ export const GetStarted = ({ lead }: Props) => {
       </div>
     );
   }
+
+  if (!pubKey) {
+    return (
+      <div className={wrapperClasses}>
+        <p className="text-sm mb-1">
+          You need a{' '}
+          <ExternalLink href="https://vega.xyz/wallet">
+            Vega wallet
+          </ExternalLink>{' '}
+          to start trading in this market.
+        </p>
+        <TradingButton
+          onClick={openVegaWalletDialog}
+          size="small"
+          data-testid="order-connect-wallet"
+          intent={Intent.Info}
+        >
+          {t('Connect wallet')}
+        </TradingButton>
+      </div>
+    );
+  }
+
   return null;
 };

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

@@ -6,6 +6,7 @@ import { Links, Routes } from '../../pages/client-router';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import * as constants from '../constants';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
+import type { ReactNode } from 'react';
 
 export const WelcomeDialogContent = () => {
   const { VEGA_ENV } = useEnvironment();
@@ -25,206 +26,134 @@ export const WelcomeDialogContent = () => {
           'Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.'
         );
   return (
-    <div className="flex flex-col pb-2">
-      <div className="flex gap-8">
-        <div className="w-1/2 flex flex-col justify-between pt-3">
-          <ul className="ml-0">
-            <li className="my-3 flex gap-3 text-default">
-              <div className="shrink-0 pt-1.5">
-                <svg
-                  width="40"
-                  height="40"
-                  viewBox="0 0 30 30"
-                  fill="currentColor"
-                >
-                  <rect x="14" y="20" width="2" height="2" />
-                  <rect x="12" y="18" width="2" height="2" />
-                  <rect x="10" y="8" width="2" height="10" />
-                  <rect x="16" y="18" width="2" height="2" />
-                  <rect x="20" y="16" width="2" height="2" />
-                  <rect x="18" y="8" width="2" height="8" />
-                  <rect x="28" y="2" width="2" height="26" />
-                  <rect y="2" width="2" height="26" />
-                  <rect
-                    x="28"
-                    width="2"
-                    height="26"
-                    transform="rotate(90 28 0)"
-                  />
-                  <rect
-                    x="28"
-                    y="28"
-                    width="2"
-                    height="26"
-                    transform="rotate(90 28 28)"
-                  />
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg">{t('Trade with no KYC')}</h3>
-                <span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
-                  {t(
-                    'Pseudonomously trade Futures markets. Spot and perps comming soon'
-                  )}
-                </span>
-              </div>
-            </li>
-            <li className="my-3 flex gap-3 text-vega-clight-50 dark:text-vega-cdark-50">
-              <div className="shrink-0 pt-1.5">
-                <svg
-                  width="40"
-                  height="40"
-                  viewBox="0 0 30 30"
-                  fill="currentColor"
-                >
-                  <g clip-path="url(#clip0_5168_49089)">
-                    <path d="M22 7H18V9H22V7Z" />
-                    <path d="M22 13H18V15H22V13Z" />
-                    <path d="M24 17H16V19H24V17Z" />
-                    <path d="M24 9H22V13H24V9Z" />
-                    <path d="M18 9H16V13H18V9Z" />
-                    <path d="M6 19H4V23H6V19Z" />
-                    <path d="M16 19H14V23H16V19Z" />
-                    <path d="M26 19H24V23H26V19Z" />
-                    <path d="M12 7H8V9H12V7Z" />
-                    <path d="M12 13H8V15H12V13Z" />
-                    <path d="M14 17H6V19H14V17Z" />
-                    <path d="M14 9H12V13H14V9Z" />
-                    <path d="M8 9H6V13H8V9Z" />
-                    <path d="M30 2H28V28H30V2Z" />
-                    <path d="M2 2H0V28H2V2Z" />
-                    <path d="M28 0H2V2H28V0Z" />
-                    <path d="M28 28H2V30H28V28Z" />
-                  </g>
-                  <defs>
-                    <clipPath id="clip0_5168_49089">
-                      <rect width="30" height="30" />
-                    </clipPath>
-                  </defs>
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg">
-                  {t('Community generated trading pairs')}
-                </h3>
-                <span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
-                  {t('All markets are proposed and enacted by the community')}
-                </span>
-              </div>
-            </li>
-            <li className="my-3 flex gap-3 text-vega-clight-50 dark:text-vega-cdark-50">
-              <div className="shrink-0 pt-1.5">
-                <svg
-                  width="40"
-                  height="40"
-                  viewBox="0 0 30 30"
-                  fill="currentColor"
-                >
-                  <rect x="6" y="16" width="4" height="2" />
-                  <rect x="10" y="14" width="2" height="2" />
-                  <rect
-                    x="12"
-                    y="24"
-                    width="4"
-                    height="2"
-                    transform="rotate(-90 12 24)"
-                  />
-                  <rect
-                    x="10"
-                    y="20"
-                    width="2"
-                    height="2"
-                    transform="rotate(-90 10 20)"
-                  />
-                  <rect
-                    x="20"
-                    y="18"
-                    width="4"
-                    height="2"
-                    transform="rotate(-180 20 18)"
-                  />
-                  <rect
-                    x="16"
-                    y="20"
-                    width="2"
-                    height="2"
-                    transform="rotate(-180 16 20)"
-                  />
-                  <rect
-                    x="16"
-                    y="14"
-                    width="2"
-                    height="2"
-                    transform="rotate(90 16 14)"
-                  />
-                  <rect
-                    x="22"
-                    y="10"
-                    width="2"
-                    height="2"
-                    transform="rotate(90 22 10)"
-                  />
-                  <rect
-                    x="20"
-                    y="8"
-                    width="2"
-                    height="2"
-                    transform="rotate(90 20 8)"
-                  />
-                  <rect
-                    x="24"
-                    y="8"
-                    width="2"
-                    height="2"
-                    transform="rotate(90 24 8)"
-                  />
-                  <rect
-                    x="22"
-                    y="6"
-                    width="2"
-                    height="2"
-                    transform="rotate(90 22 6)"
-                  />
-                  <rect x="12" y="10" width="2" height="4" />
-                  <rect x="28" y="2" width="2" height="26" />
-                  <rect y="2" width="2" height="26" />
-                  <rect
-                    x="28"
-                    width="2"
-                    height="26"
-                    transform="rotate(90 28 0)"
-                  />
-                  <rect
-                    x="28"
-                    y="28"
-                    width="2"
-                    height="26"
-                    transform="rotate(90 28 28)"
-                  />
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg">{t('Rewards')}</h3>
-                <span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
-                  {t(
-                    'Earn rewards for trading, market making and providing liquidity'
-                  )}
-                </span>
-              </div>
-            </li>
-          </ul>
-          <TradingButton
-            onClick={browseMarkets}
-            className="block w-full"
-            data-testid="browse-markets-button"
-          >
-            {t('Browse the markets')}
-          </TradingButton>
-        </div>
-        <div className="w-1/2 -mr-3 flex flex-grow">
-          <GetStarted lead={lead} />
-        </div>
+    <div className="flex flex-col sm:flex-row gap-8">
+      <div className="sm:w-1/2 flex flex-col justify-between pt-3">
+        <ul className="ml-0">
+          <ListItemContent
+            icon={<NonCustodialIcon />}
+            title={t('Non-custodial and pseudonymous')}
+            text={t('No third party has access to your funds.')}
+          />
+          <ListItemContent
+            icon={<PurposeBuiltIcon />}
+            title={t('Purpose built proof of stake blockchain')}
+            text={t(
+              'Fully decentralised high performance peer-to-network trading.'
+            )}
+          />
+          <ListItemContent
+            icon={<RewardIcon />}
+            title={t('Low fees and no cost to place orders')}
+            text={t(
+              'Fees work like a CEX with no per-transaction gas for orders'
+            )}
+          />
+        </ul>
+        <TradingButton
+          onClick={browseMarkets}
+          className="block w-full"
+          data-testid="browse-markets-button"
+        >
+          {t('Browse the markets')}
+        </TradingButton>
+      </div>
+      <div className="sm:w-1/2">
+        <GetStarted lead={lead} />
       </div>
     </div>
   );
 };
+
+const ListItemContent = ({
+  icon,
+  title,
+  text,
+}: {
+  icon: ReactNode;
+  title: string;
+  text: string;
+}) => {
+  return (
+    <li className="my-4 flex gap-3">
+      <div className="shrink-0 pt-1">{icon}</div>
+      <div>
+        <h3 className="text-lg leading-snug mb-2">{title}</h3>
+        <p className="text-sm text-secondary">{text}</p>
+      </div>
+    </li>
+  );
+};
+
+const PurposeBuiltIcon = () => {
+  return (
+    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor">
+      <rect x="14" y="20" width="2" height="2" />
+      <rect x="12" y="18" width="2" height="2" />
+      <rect x="10" y="8" width="2" height="10" />
+      <rect x="16" y="18" width="2" height="2" />
+      <rect x="20" y="16" width="2" height="2" />
+      <rect x="18" y="8" width="2" height="8" />
+      <rect x="28" y="2" width="2" height="26" />
+      <rect y="2" width="2" height="26" />
+      <rect x="28" width="2" height="26" transform="rotate(90 28 0)" />
+      <rect x="28" y="28" width="2" height="26" transform="rotate(90 28 28)" />
+    </svg>
+  );
+};
+
+const NonCustodialIcon = () => {
+  return (
+    <svg width="40" height="40" viewBox="0 0 30 30" className="fill-current">
+      <rect x="8" y="22" width="14" height="2" />
+      <rect x="8" y="12" width="14" height="2" />
+      <rect
+        x="22"
+        y="24"
+        width="2"
+        height="12"
+        transform="rotate(-180 22 24)"
+      />
+      <rect
+        x="10"
+        y="24"
+        width="2"
+        height="12"
+        transform="rotate(-180 10 24)"
+      />
+      <rect x="12" y="12" width="2" height="2" transform="rotate(-180 12 12)" />
+      <rect x="20" y="12" width="2" height="2" transform="rotate(-180 20 12)" />
+      <rect x="12" y="10" width="2" height="2" transform="rotate(-180 12 10)" />
+      <rect x="20" y="10" width="2" height="2" transform="rotate(-180 20 10)" />
+      <rect x="18" y="8" width="2" height="2" transform="rotate(-180 18 8)" />
+      <rect x="14" y="8" width="2" height="2" transform="rotate(-180 14 8)" />
+      <rect x="16" y="8" width="2" height="2" transform="rotate(-180 16 8)" />
+      <rect x="28" y="2" width="2" height="26" />
+      <rect y="2" width="2" height="26" />
+      <rect x="28" width="2" height="26" transform="rotate(90 28 0)" />
+      <rect x="28" y="28" width="2" height="26" transform="rotate(90 28 28)" />
+    </svg>
+  );
+};
+
+const RewardIcon = () => {
+  return (
+    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor">
+      <rect x="6" y="16" width="4" height="2" />
+      <rect x="10" y="14" width="2" height="2" />
+      <rect x="12" y="24" width="4" height="2" transform="rotate(-90 12 24)" />
+      <rect x="10" y="20" width="2" height="2" transform="rotate(-90 10 20)" />
+      <rect x="20" y="18" width="4" height="2" transform="rotate(-180 20 18)" />
+      <rect x="16" y="20" width="2" height="2" transform="rotate(-180 16 20)" />
+      <rect x="16" y="14" width="2" height="2" transform="rotate(90 16 14)" />
+      <rect x="22" y="10" width="2" height="2" transform="rotate(90 22 10)" />
+      <rect x="20" y="8" width="2" height="2" transform="rotate(90 20 8)" />
+      <rect x="24" y="8" width="2" height="2" transform="rotate(90 24 8)" />
+      <rect x="22" y="6" width="2" height="2" transform="rotate(90 22 6)" />
+      <rect x="12" y="10" width="2" height="4" />
+      <rect x="28" y="2" width="2" height="26" />
+      <rect y="2" width="2" height="26" />
+      <rect x="28" width="2" height="26" transform="rotate(90 28 0)" />
+      <rect x="28" y="28" width="2" height="26" transform="rotate(90 28 28)" />
+    </svg>
+  );
+};

apps/trading/pages/client-router.tsx

@@ -31,6 +31,10 @@ const LazyDisclaimer = dynamic(() => import('../client-pages/disclaimer'), {
   ssr: false,
 });
 
+const LazyDeposit = dynamic(() => import('../client-pages/deposit'), {
+  ssr: false,
+});
+
 export enum Routes {
   HOME = '/',
   MARKET = '/markets/:marketId',
@@ -38,6 +42,7 @@ export enum Routes {
   PORTFOLIO = '/portfolio',
   LIQUIDITY = '/liquidity/:marketId',
   DISCLAIMER = '/disclaimer',
+  DEPOSIT = '/deposit',
 }
 
 type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
@@ -51,6 +56,7 @@ export const Links: ConsoleLinks = {
   [Routes.LIQUIDITY]: (marketId: string) =>
     trimEnd(Routes.LIQUIDITY.replace(':marketId', marketId)),
   [Routes.DISCLAIMER]: () => Routes.DISCLAIMER,
+  [Routes.DEPOSIT]: () => Routes.DEPOSIT,
 };
 
 const routerConfig: RouteObject[] = [
@@ -97,6 +103,7 @@ const routerConfig: RouteObject[] = [
     path: Routes.DISCLAIMER,
     element: <LazyDisclaimer />,
   },
+  { path: Routes.DEPOSIT, element: <LazyDeposit /> },
   {
     path: '*',
     element: (

apps/trading/pages/dialogs-container.tsx

@@ -2,7 +2,7 @@ import {
   AssetDetailsDialog,
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
-import { VegaConnectDialog } from '@vegaprotocol/wallet';
+import { VegaConnectDialog, ViewAsDialog } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/vega-connectors';
 import {
   Web3ConnectUncontrolledDialog,
@@ -19,6 +19,7 @@ const DialogsContainer = () => {
         connectors={Connectors}
         riskMessage={<RiskMessage />}
       />
+      <ViewAsDialog connector={Connectors.view} />
       <AssetDetailsDialog
         assetId={id}
         trigger={trigger || null}

commitlint.config-ci.js

@@ -7,7 +7,7 @@ module.exports = {
     'scope-enum': async (ctx) => [
       2,
       'always',
-      ['ci', 'docs', ...(await utils.getProjects(ctx))],
+      ['ci', 'docs', 'specs', ...(await utils.getProjects(ctx))],
     ],
   },
 };

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

@@ -118,7 +118,6 @@ export const AccountManager = ({
   onMarketClick,
   gridProps,
 }: AccountManagerProps) => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
   const { data, error } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
@@ -138,7 +137,6 @@ export const AccountManager = ({
   return (
     <div className="relative h-full">
       <AccountTable
-        ref={gridRef}
         rowData={data}
         onClickAsset={onClickAsset}
         onClickDeposit={onClickDeposit}

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import {
   addDecimalsFormatNumber,
   addDecimalsFormatNumberQuantum,
@@ -21,7 +21,7 @@ import type {
   RowHeightParams,
   ColDef,
 } from 'ag-grid-community';
-import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import type { AgGridReactProps } from 'ag-grid-react';
 import type { AccountFields } from './accounts-data-provider';
 import type { Asset } from '@vegaprotocol/types';
 import { CenteredGridCellWrapper } from '@vegaprotocol/datagrid';
@@ -75,256 +75,250 @@ export interface AccountTableProps extends AgGridReactProps {
   pinnedAsset?: PinnedAsset;
 }
 
-export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
-  (
-    {
-      onClickAsset,
-      onClickWithdraw,
-      onClickDeposit,
-      onClickBreakdown,
-      onClickTransfer,
-      rowData,
-      isReadOnly,
-      pinnedAsset,
-      ...props
+export const AccountTable = ({
+  onClickAsset,
+  onClickWithdraw,
+  onClickDeposit,
+  onClickBreakdown,
+  onClickTransfer,
+  rowData,
+  isReadOnly,
+  pinnedAsset,
+  ...props
+}: AccountTableProps) => {
+  const pinnedRow = useMemo(() => {
+    if (!pinnedAsset) {
+      return;
+    }
+    const currentPinnedAssetRow = rowData?.find(
+      (row) => row.asset.id === pinnedAsset?.id
+    );
+    if (!currentPinnedAssetRow) {
+      return {
+        asset: pinnedAsset,
+        available: '0',
+        used: '0',
+        total: '0',
+        balance: '0',
+      };
+    }
+    return currentPinnedAssetRow;
+  }, [pinnedAsset, rowData]);
+
+  const { getRowHeight } = props;
+
+  const getPinnedAssetRowHeight = useCallback(
+    (params: RowHeightParams) => {
+      if (
+        params.node.rowPinned &&
+        params.data.asset.id === pinnedAsset?.id &&
+        new BigNumber(params.data.total).isLessThanOrEqualTo(0)
+      ) {
+        return 32;
+      }
+      return getRowHeight ? getRowHeight(params) : undefined;
     },
-    ref
-  ) => {
-    const pinnedRow = useMemo(() => {
-      if (!pinnedAsset) {
-        return;
-      }
-      const currentPinnedAssetRow = rowData?.find(
-        (row) => row.asset.id === pinnedAsset?.id
-      );
-      if (!currentPinnedAssetRow) {
-        return {
-          asset: pinnedAsset,
-          available: '0',
-          used: '0',
-          total: '0',
-          balance: '0',
-        };
-      }
-      return currentPinnedAssetRow;
-    }, [pinnedAsset, rowData]);
+    [pinnedAsset?.id, getRowHeight]
+  );
 
-    const { getRowHeight } = props;
+  const showDepositButton = pinnedRow?.balance === '0';
 
-    const getPinnedAssetRowHeight = useCallback(
-      (params: RowHeightParams) => {
-        if (
-          params.node.rowPinned &&
-          params.data.asset.id === pinnedAsset?.id &&
-          new BigNumber(params.data.total).isLessThanOrEqualTo(0)
-        ) {
-          return 32;
-        }
-        return getRowHeight ? getRowHeight(params) : undefined;
+  const colDefs = useMemo(() => {
+    const defs: ColDef[] = [
+      {
+        headerName: t('Asset'),
+        field: 'asset.symbol',
+        headerTooltip: t(
+          'Asset is the collateral that is deposited into the Vega protocol.'
+        ),
+        cellClass: 'underline',
+        onCellClicked: ({ data }) => {
+          if (data) {
+            onClickAsset(data.asset.id);
+          }
+        },
       },
-      [pinnedAsset?.id, getRowHeight]
-    );
-
-    const showDepositButton = pinnedRow?.balance === '0';
-
-    const colDefs = useMemo(() => {
-      const defs: ColDef[] = [
-        {
-          headerName: t('Asset'),
-          field: 'asset.symbol',
-          headerTooltip: t(
-            'Asset is the collateral that is deposited into the Vega protocol.'
-          ),
-          cellClass: 'underline',
-          onCellClicked: ({ data }) => {
-            if (data) {
-              onClickAsset(data.asset.id);
-            }
-          },
+      {
+        headerName: t('Used'),
+        type: 'rightAligned',
+        field: 'used',
+        headerTooltip: t(
+          'Currently allocated to a market as margin or bond. Check the breakdown for details.'
+        ),
+        tooltipValueGetter: ({ value, data }) => {
+          if (!value || !data) return null;
+          return addDecimalsFormatNumber(value, data.asset.decimals);
         },
-        {
-          headerName: t('Used'),
-          type: 'rightAligned',
-          field: 'used',
-          headerTooltip: t(
-            'Currently allocated to a market as margin or bond. Check the breakdown for details.'
-          ),
-          tooltipValueGetter: ({ value, data }) => {
-            if (!value || !data) return null;
-            return addDecimalsFormatNumber(value, data.asset.decimals);
-          },
-          onCellClicked: ({ data }) => {
-            if (!data || !onClickBreakdown) return;
-            onClickBreakdown(data.asset.id);
-          },
-          cellRenderer: ({
-            data,
+        onCellClicked: ({ data }) => {
+          if (!data || !onClickBreakdown) return;
+          onClickBreakdown(data.asset.id);
+        },
+        cellRenderer: ({
+          data,
+          value,
+        }: VegaICellRendererParams<AccountFields, 'used'>) => {
+          if (!value || !data) return '-';
+          const percentageUsed = percentageValue(value, data.total);
+          const valueFormatted = addDecimalsFormatNumberQuantum(
             value,
-          }: VegaICellRendererParams<AccountFields, 'used'>) => {
-            if (!value || !data) return '-';
-            const percentageUsed = percentageValue(value, data.total);
-            const valueFormatted = addDecimalsFormatNumberQuantum(
-              value,
-              data.asset.decimals,
-              data.asset.quantum
-            );
+            data.asset.decimals,
+            data.asset.quantum
+          );
 
-            return data.breakdown ? (
-              <>
-                <span className="underline">{valueFormatted}</span>
-                <span
-                  className={classNames(
-                    colorClass(percentageUsed),
-                    'ml-1 inline-block w-14'
-                  )}
+          return data.breakdown ? (
+            <>
+              <span className="underline">{valueFormatted}</span>
+              <span
+                className={classNames(
+                  colorClass(percentageUsed),
+                  'ml-1 inline-block w-14'
+                )}
+              >
+                {percentageUsed.toFixed(2)}%
+              </span>
+            </>
+          ) : (
+            <>
+              <span className="underline">{valueFormatted}</span>
+              <span className="ml-2 inline-block w-14 text-muted">
+                {t('0.00%')}
+              </span>
+            </>
+          );
+        },
+      },
+      {
+        headerName: t('Available'),
+        field: 'available',
+        type: 'rightAligned',
+        headerTooltip: t(
+          'Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.'
+        ),
+        tooltipValueGetter: ({ value, data }) => {
+          if (!value || !data) return null;
+          return addDecimalsFormatNumber(value, data.asset.decimals);
+        },
+        cellClass: ({ data }) => {
+          const percentageUsed = percentageValue(data?.used, data?.total);
+          return colorClass(percentageUsed, true);
+        },
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<AccountFields, 'available'>) => {
+          if (!value || !data) return '-';
+          return addDecimalsFormatNumberQuantum(
+            value,
+            data.asset.decimals,
+            data.asset.quantum
+          );
+        },
+      },
+
+      {
+        headerName: t('Total'),
+        type: 'rightAligned',
+        field: 'total',
+        headerTooltip: t(
+          'The total amount of each asset on this key. Includes used and available collateral.'
+        ),
+        tooltipValueGetter: ({ value, data }) => {
+          if (!value || !data) return null;
+          return addDecimalsFormatNumber(value, data.asset.decimals);
+        },
+        valueFormatter: ({
+          data,
+          value,
+        }: VegaValueFormatterParams<AccountFields, 'total'>) => {
+          if (!data || !value) return '-';
+          return addDecimalsFormatNumberQuantum(
+            value,
+            data.asset.decimals,
+            data.asset.quantum
+          );
+        },
+      },
+      {
+        colId: 'accounts-actions',
+        field: 'asset.id',
+        ...COL_DEFS.actions,
+        minWidth: showDepositButton ? 130 : COL_DEFS.actions.minWidth,
+        maxWidth: showDepositButton ? 130 : COL_DEFS.actions.maxWidth,
+        cellRenderer: ({
+          value: assetId,
+          node,
+        }: VegaICellRendererParams<AccountFields, 'asset.id'>) => {
+          if (!assetId) return null;
+          if (node.rowPinned && node.data?.total === '0') {
+            return (
+              <CenteredGridCellWrapper className="h-[30px] justify-end py-1">
+                <Button
+                  size="xs"
+                  variant="primary"
+                  data-testid="deposit"
+                  onClick={() => {
+                    onClickDeposit && onClickDeposit(assetId);
+                  }}
                 >
-                  {percentageUsed.toFixed(2)}%
-                </span>
-              </>
-            ) : (
-              <>
-                <span className="underline">{valueFormatted}</span>
-                <span className="ml-2 inline-block w-14 text-muted">
-                  {t('0.00%')}
-                </span>
-              </>
+                  <VegaIcon name={VegaIconNames.DEPOSIT} /> {t('Deposit')}
+                </Button>
+              </CenteredGridCellWrapper>
             );
-          },
-        },
-        {
-          headerName: t('Available'),
-          field: 'available',
-          type: 'rightAligned',
-          headerTooltip: t(
-            'Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.'
-          ),
-          tooltipValueGetter: ({ value, data }) => {
-            if (!value || !data) return null;
-            return addDecimalsFormatNumber(value, data.asset.decimals);
-          },
-          cellClass: ({ data }) => {
-            const percentageUsed = percentageValue(data?.used, data?.total);
-            return colorClass(percentageUsed, true);
-          },
-          valueFormatter: ({
-            value,
-            data,
-          }: VegaValueFormatterParams<AccountFields, 'available'>) => {
-            if (!value || !data) return '-';
-            return addDecimalsFormatNumberQuantum(
-              value,
-              data.asset.decimals,
-              data.asset.quantum
-            );
-          },
+          }
+          return isReadOnly ? null : (
+            <AccountsActionsDropdown
+              assetId={assetId}
+              assetContractAddress={
+                node.data?.asset.source?.__typename === 'ERC20'
+                  ? node.data.asset.source.contractAddress
+                  : undefined
+              }
+              onClickDeposit={() => {
+                onClickDeposit && onClickDeposit(assetId);
+              }}
+              onClickWithdraw={() => {
+                onClickWithdraw && onClickWithdraw(assetId);
+              }}
+              onClickBreakdown={() => {
+                onClickBreakdown && onClickBreakdown(assetId);
+              }}
+              onClickTransfer={() => {
+                onClickTransfer && onClickTransfer(assetId);
+              }}
+            />
+          );
         },
+      },
+    ];
+    return defs;
+  }, [
+    onClickAsset,
+    onClickBreakdown,
+    onClickDeposit,
+    onClickWithdraw,
+    onClickTransfer,
+    isReadOnly,
+    showDepositButton,
+  ]);
 
-        {
-          headerName: t('Total'),
-          type: 'rightAligned',
-          field: 'total',
-          headerTooltip: t(
-            'The total amount of each asset on this key. Includes used and available collateral.'
-          ),
-          tooltipValueGetter: ({ value, data }) => {
-            if (!value || !data) return null;
-            return addDecimalsFormatNumber(value, data.asset.decimals);
-          },
-          valueFormatter: ({
-            data,
-            value,
-          }: VegaValueFormatterParams<AccountFields, 'total'>) => {
-            if (!data || !value) return '-';
-            return addDecimalsFormatNumberQuantum(
-              value,
-              data.asset.decimals,
-              data.asset.quantum
-            );
-          },
-        },
-        {
-          colId: 'accounts-actions',
-          field: 'asset.id',
-          ...COL_DEFS.actions,
-          minWidth: showDepositButton ? 130 : COL_DEFS.actions.minWidth,
-          maxWidth: showDepositButton ? 130 : COL_DEFS.actions.maxWidth,
-          cellRenderer: ({
-            value: assetId,
-            node,
-          }: VegaICellRendererParams<AccountFields, 'asset.id'>) => {
-            if (!assetId) return null;
-            if (node.rowPinned && node.data?.total === '0') {
-              return (
-                <CenteredGridCellWrapper className="h-[30px] justify-end py-1">
-                  <Button
-                    size="xs"
-                    variant="primary"
-                    data-testid="deposit"
-                    onClick={() => {
-                      onClickDeposit && onClickDeposit(assetId);
-                    }}
-                  >
-                    <VegaIcon name={VegaIconNames.DEPOSIT} /> {t('Deposit')}
-                  </Button>
-                </CenteredGridCellWrapper>
-              );
-            }
-            return isReadOnly ? null : (
-              <AccountsActionsDropdown
-                assetId={assetId}
-                assetContractAddress={
-                  node.data?.asset.source?.__typename === 'ERC20'
-                    ? node.data.asset.source.contractAddress
-                    : undefined
-                }
-                onClickDeposit={() => {
-                  onClickDeposit && onClickDeposit(assetId);
-                }}
-                onClickWithdraw={() => {
-                  onClickWithdraw && onClickWithdraw(assetId);
-                }}
-                onClickBreakdown={() => {
-                  onClickBreakdown && onClickBreakdown(assetId);
-                }}
-                onClickTransfer={() => {
-                  onClickTransfer && onClickTransfer(assetId);
-                }}
-              />
-            );
-          },
-        },
-      ];
-      return defs;
-    }, [
-      onClickAsset,
-      onClickBreakdown,
-      onClickDeposit,
-      onClickWithdraw,
-      onClickTransfer,
-      isReadOnly,
-      showDepositButton,
-    ]);
+  const data = rowData?.filter((data) => data.asset.id !== pinnedAsset?.id);
 
-    const data = rowData?.filter((data) => data.asset.id !== pinnedAsset?.id);
-
-    return (
-      <AgGrid
-        {...props}
-        style={{ width: '100%', height: '100%' }}
-        getRowId={({ data }: { data: AccountFields }) => data.asset.id}
-        ref={ref}
-        tooltipShowDelay={500}
-        rowData={data}
-        defaultColDef={{
-          resizable: true,
-          tooltipComponent: TooltipCellComponent,
-          sortable: true,
-          comparator: accountValuesComparator,
-        }}
-        columnDefs={colDefs}
-        getRowHeight={getPinnedAssetRowHeight}
-        pinnedTopRowData={pinnedRow ? [pinnedRow] : undefined}
-      />
-    );
-  }
-);
+  return (
+    <AgGrid
+      {...props}
+      style={{ width: '100%', height: '100%' }}
+      getRowId={({ data }: { data: AccountFields }) => data.asset.id}
+      tooltipShowDelay={500}
+      rowData={data}
+      defaultColDef={{
+        resizable: true,
+        tooltipComponent: TooltipCellComponent,
+        sortable: true,
+        comparator: accountValuesComparator,
+      }}
+      columnDefs={colDefs}
+      getRowHeight={getPinnedAssetRowHeight}
+      pinnedTopRowData={pinnedRow ? [pinnedRow] : undefined}
+    />
+  );
+};

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

@@ -23,6 +23,7 @@ const singleRow = {
       instrument: {
         __typename: 'Instrument',
         name: 'BTCUSD Monthly (30 Jun 2022)',
+        code: 'BTCUSD.MF21',
       },
     },
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
@@ -57,7 +58,7 @@ describe('BreakdownTable', () => {
     });
     const cells = await screen.findAllByRole('gridcell');
     const expectedValues = [
-      'BTCUSD Monthly (30 Jun 2022)',
+      'BTCUSD.MF21',
       'Margin',
       '1,256.00 (50%)',
       '1,256.00',
@@ -118,6 +119,7 @@ describe('BreakdownTable', () => {
                 instrument: {
                   __typename: 'Instrument',
                   name: 'BTCUSD Monthly (30 Jun 2022)',
+                  code: 'BTCUSD.MF21',
                 },
               },
             },

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

@@ -31,12 +31,12 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
       const defs: ColDef[] = [
         {
           headerName: t('Market'),
-          field: 'market.tradableInstrument.instrument.name',
+          field: 'market.tradableInstrument.instrument.code',
           valueFormatter: ({
             value,
           }: VegaValueFormatterParams<
             AccountFields,
-            'market.tradableInstrument.instrument.name'
+            'market.tradableInstrument.instrument.code'
           >) => {
             if (!value) return 'None';
             return value;

libs/assets/src/lib/asset-data-provider.ts

@@ -28,10 +28,10 @@ export const assetProvider = makeDataProvider<
   getData,
 });
 
-export const useAssetDataProvider = (assetId: string) => {
+export const useAssetDataProvider = (assetId: string, skip?: boolean) => {
   return useDataProvider({
     dataProvider: assetProvider,
     variables: { assetId: assetId || '' },
-    skip: !assetId,
+    skip: !assetId || skip,
   });
 };

libs/candles-chart/jest.config.ts

@@ -4,9 +4,25 @@ export default {
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      {
+        presets: ['@nx/react/babel'],
+        // required for pennant to work in jest, due to having untranspiled exports
+        plugins: [
+          [
+            '@babel/plugin-proposal-private-methods',
+            {
+              loose: true,
+            },
+          ],
+        ],
+      },
+    ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/candles-chart',
   setupFilesAfterEnv: ['./src/setup-tests.ts'],
+  // dont ignore pennant from transpilation
+  transformIgnorePatterns: ['<rootDir>/node_modules/pennant'],
 };

libs/datagrid/src/index.ts

@@ -21,5 +21,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';

libs/datagrid/src/lib/ag-grid-update.ts

@@ -1,20 +0,0 @@
-import type { MutableRefObject, RefObject } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
-
-type AnyArray = Array<any> | null; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-export const isXOrWasEmpty = (prev?: AnyArray, curr?: AnyArray) =>
-  Boolean(Number(!!prev?.length) ^ Number(!!curr?.length));
-
-export const updateGridData = (
-  dataRef: MutableRefObject<AnyArray>,
-  data: AnyArray,
-  gridRef: RefObject<AgGridReact>
-) => {
-  const rerender = isXOrWasEmpty(dataRef.current, data);
-  dataRef.current = data;
-  if (gridRef.current?.api?.getModel().getType() === 'infinite') {
-    gridRef.current?.api?.refreshInfiniteCache();
-  }
-  return !rerender;
-};

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

@@ -3,29 +3,25 @@ import type { Market, StaticMarketData } from '@vegaprotocol/markets';
 import { DealTicketMarketAmount } from './deal-ticket-market-amount';
 import { DealTicketLimitAmount } from './deal-ticket-limit-amount';
 import * as Schema from '@vegaprotocol/types';
-import type { OrderObj } from '@vegaprotocol/orders';
-import type { OrderFormFields } from '../../hooks/use-order-form';
+import type { OrderFormValues } from '../../hooks/use-form-values';
 
 export interface DealTicketAmountProps {
-  control: Control<OrderFormFields>;
-  orderType: Schema.OrderType;
+  control: Control<OrderFormValues>;
+  type: Schema.OrderType;
   marketData: StaticMarketData;
   marketPrice?: string;
   market: Market;
   sizeError?: string;
   priceError?: string;
-  update: (obj: Partial<OrderObj>) => void;
-  size: string;
-  price?: string;
 }
 
 export const DealTicketAmount = ({
-  orderType,
+  type,
   marketData,
   marketPrice,
   ...props
 }: DealTicketAmountProps) => {
-  switch (orderType) {
+  switch (type) {
     case Schema.OrderType.TYPE_MARKET:
       return (
         <DealTicketMarketAmount
@@ -37,7 +33,7 @@ export const DealTicketAmount = ({
     case Schema.OrderType.TYPE_LIMIT:
       return <DealTicketLimitAmount {...props} />;
     default: {
-      throw new Error('Invalid ticket type');
+      throw new Error('Invalid ticket type ' + type);
     }
   }
 };

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

@@ -1,8 +1,8 @@
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import {
-  DealTicketType,
-  useDealTicketTypeStore,
-} from '../../hooks/use-type-store';
+  isStopOrderType,
+  useDealTicketFormValues,
+} from '../../hooks/use-form-values';
 import { StopOrder } from './deal-ticket-stop-order';
 import {
   useStaticMarketData,
@@ -25,7 +25,9 @@ export const DealTicketContainer = ({
   marketId,
   ...props
 }: DealTicketContainerProps) => {
-  const type = useDealTicketTypeStore((state) => state.type[marketId]);
+  const showStopOrder = useDealTicketFormValues((state) =>
+    isStopOrderType(state.formValues[marketId]?.type)
+  );
   const {
     data: market,
     error: marketError,
@@ -48,9 +50,7 @@ export const DealTicketContainer = ({
       reload={reload}
     >
       {market && marketData ? (
-        FLAGS.STOP_ORDERS &&
-        (type === DealTicketType.StopLimit ||
-          type === DealTicketType.StopMarket) ? (
+        FLAGS.STOP_ORDERS && showStopOrder ? (
           <StopOrder
             market={market}
             marketPrice={marketPrice}

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

@@ -5,8 +5,8 @@ import type { DealTicketAmountProps } from './deal-ticket-amount';
 import { Controller } from 'react-hook-form';
 
 export type DealTicketLimitAmountProps = Omit<
-  Omit<DealTicketAmountProps, 'marketData'>,
-  'orderType'
+  DealTicketAmountProps,
+  'marketData' | 'type'
 >;
 
 export const DealTicketLimitAmount = ({
@@ -14,9 +14,6 @@ export const DealTicketLimitAmount = ({
   market,
   sizeError,
   priceError,
-  update,
-  price,
-  size,
 }: DealTicketLimitAmountProps) => {
   const priceStep = toDecimal(market?.decimalPlaces);
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
@@ -62,17 +59,16 @@ export const DealTicketLimitAmount = ({
                 },
                 validate: validateAmount(sizeStep, 'Size'),
               }}
-              render={() => (
+              render={({ field }) => (
                 <Input
                   id="input-order-size-limit"
                   className="w-full"
                   type="number"
-                  value={size}
-                  onChange={(e) => update({ size: e.target.value })}
                   step={sizeStep}
                   min={sizeStep}
                   data-testid="order-size"
                   onWheel={(e) => e.currentTarget.blur()}
+                  {...field}
                 />
               )}
             />
@@ -95,19 +91,17 @@ export const DealTicketLimitAmount = ({
                   value: priceStep,
                   message: t('Price cannot be lower than ' + priceStep),
                 },
-                // @ts-ignore this fulfills the interface but still errors
                 validate: validateAmount(priceStep, 'Price'),
               }}
-              render={() => (
+              render={({ field }) => (
                 <Input
                   id="input-price-quote"
                   className="w-full"
                   type="number"
-                  value={price}
-                  onChange={(e) => update({ price: e.target.value })}
                   step={priceStep}
                   data-testid="order-price"
                   onWheel={(e) => e.currentTarget.blur()}
+                  {...field}
                 />
               )}
             />

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

@@ -10,10 +10,7 @@ import type { DealTicketAmountProps } from './deal-ticket-amount';
 import { Controller } from 'react-hook-form';
 import classNames from 'classnames';
 
-export type DealTicketMarketAmountProps = Omit<
-  DealTicketAmountProps,
-  'orderType'
->;
+export type DealTicketMarketAmountProps = Omit<DealTicketAmountProps, 'type'>;
 
 export const DealTicketMarketAmount = ({
   control,
@@ -21,8 +18,6 @@ export const DealTicketMarketAmount = ({
   marketData,
   marketPrice,
   sizeError,
-  update,
-  size,
 }: DealTicketMarketAmountProps) => {
   const quoteName = market.tradableInstrument.instrument.product.quoteName;
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
@@ -50,17 +45,16 @@ export const DealTicketMarketAmount = ({
               },
               validate: validateAmount(sizeStep, 'Size'),
             }}
-            render={() => (
+            render={({ field }) => (
               <Input
                 id="input-order-size-market"
                 className="w-full"
                 type="number"
-                value={size}
-                onChange={(e) => update({ size: e.target.value })}
                 step={sizeStep}
                 min={sizeStep}
                 onWheel={(e) => e.currentTarget.blur()}
                 data-testid="order-size"
+                {...field}
               />
             )}
           />

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

@@ -1,7 +1,6 @@
 import { Controller, type Control } from 'react-hook-form';
 import type { Market } from '@vegaprotocol/markets';
-import type { OrderObj } from '@vegaprotocol/orders';
-import type { OrderFormFields } from '../../hooks/use-order-form';
+import type { OrderFormValues } from '../../hooks/use-form-values';
 import { toDecimal, validateAmount } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -12,25 +11,21 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 
 export interface DealTicketSizeIcebergProps {
-  control: Control<OrderFormFields>;
+  control: Control<OrderFormValues>;
   market: Market;
   peakSizeError?: string;
   minimumVisibleSizeError?: string;
-  update: (obj: Partial<OrderObj>) => void;
-  peakSize: string;
-  minimumVisibleSize: string;
   size: string;
+  peakSize?: string;
 }
 
 export const DealTicketSizeIceberg = ({
   control,
   market,
-  update,
   peakSizeError,
   minimumVisibleSizeError,
-  peakSize,
-  minimumVisibleSize,
   size,
+  peakSize,
 }: DealTicketSizeIcebergProps) => {
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
 
@@ -80,7 +75,7 @@ export const DealTicketSizeIceberg = ({
             className="!mb-1"
           >
             <Controller
-              name="icebergOpts.peakSize"
+              name="peakSize"
               control={control}
               rules={{
                 required: t('You need to provide a peak size'),
@@ -97,25 +92,17 @@ export const DealTicketSizeIceberg = ({
                 },
                 validate: validateAmount(sizeStep, 'peakSize'),
               }}
-              render={() => (
+              render={({ field }) => (
                 <Input
                   id="input-order-peak-size"
                   className="w-full"
                   type="number"
-                  value={peakSize}
-                  onChange={(e) =>
-                    update({
-                      icebergOpts: {
-                        peakSize: e.target.value,
-                        minimumVisibleSize,
-                      },
-                    })
-                  }
                   step={sizeStep}
                   min={sizeStep}
                   max={size}
                   data-testid="order-peak-size"
                   onWheel={(e) => e.currentTarget.blur()}
+                  {...field}
                 />
               )}
             />
@@ -144,7 +131,7 @@ export const DealTicketSizeIceberg = ({
             className="!mb-1"
           >
             <Controller
-              name="icebergOpts.minimumVisibleSize"
+              name="minimumVisibleSize"
               control={control}
               rules={{
                 required: t('You need to provide a minimum visible size'),
@@ -154,7 +141,7 @@ export const DealTicketSizeIceberg = ({
                     'Minimum visible size cannot be lower than ' + sizeStep
                   ),
                 },
-                max: {
+                max: peakSize && {
                   value: peakSize,
                   message: t(
                     'Minimum visible size cannot be greater than the peak size (%s)',
@@ -163,25 +150,17 @@ export const DealTicketSizeIceberg = ({
                 },
                 validate: validateAmount(sizeStep, 'minimumVisibleSize'),
               }}
-              render={() => (
+              render={({ field }) => (
                 <Input
                   id="input-order-minimum-size"
                   className="w-full"
                   type="number"
-                  value={minimumVisibleSize}
-                  onChange={(e) =>
-                    update({
-                      icebergOpts: {
-                        peakSize,
-                        minimumVisibleSize: e.target.value,
-                      },
-                    })
-                  }
                   step={sizeStep}
                   min={sizeStep}
                   max={peakSize}
                   data-testid="order-minimum-size"
                   onWheel={(e) => e.currentTarget.blur()}
+                  {...field}
                 />
               )}
             />

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

@@ -6,8 +6,11 @@ import { generateMarket } from '../../test-helpers';
 import { StopOrder } from './deal-ticket-stop-order';
 import * as Schema from '@vegaprotocol/types';
 import { MockedProvider } from '@apollo/client/testing';
-import type { StopOrderFormValues } from '../../hooks/use-stop-order-form-values';
-import { useStopOrderFormValues } from '../../hooks/use-stop-order-form-values';
+import type { StopOrderFormValues } from '../../hooks/use-form-values';
+import {
+  DealTicketType,
+  useDealTicketFormValues,
+} from '../../hooks/use-form-values';
 import type { FeatureFlags } from '@vegaprotocol/environment';
 
 jest.mock('zustand');
@@ -131,9 +134,11 @@ describe('StopOrder', () => {
       expiresAt: '2023-07-27T16:43:27.000',
     };
 
-    useStopOrderFormValues.setState({
+    useDealTicketFormValues.setState({
       formValues: {
-        [market.id]: values,
+        [market.id]: {
+          [DealTicketType.StopLimit]: values,
+        },
       },
     });
 
@@ -158,16 +163,13 @@ describe('StopOrder', () => {
     );
   });
 
-  it('shows no wallet warning and do not submit if no wallet connected', async () => {
+  it('does not submit if no wallet connected', async () => {
     render(generateJsx(null));
     await userEvent.type(screen.getByTestId(sizeInput), '1');
     await userEvent.type(screen.getByTestId(priceInput), '1');
     await userEvent.type(screen.getByTestId(triggerPriceInput), '1');
     await userEvent.click(screen.getByTestId(submitButton));
     expect(submit).not.toBeCalled();
-    expect(
-      screen.getByTestId('deal-ticket-connect-wallet')
-    ).toBeInTheDocument();
   });
 
   it('calls submit if form is valid', async () => {
@@ -210,11 +212,13 @@ describe('StopOrder', () => {
     // switch to market order type error should disappear
     await userEvent.click(screen.getByTestId(orderTypeTrigger));
     await userEvent.click(screen.getByTestId(orderTypeMarket));
+    await userEvent.click(screen.getByTestId(submitButton));
     expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
 
     // switch back to limit type
     await userEvent.click(screen.getByTestId(orderTypeTrigger));
     await userEvent.click(screen.getByTestId(orderTypeLimit));
+    await userEvent.click(screen.getByTestId(submitButton));
     expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
 
     // to small value should be invalid

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

@@ -1,4 +1,3 @@
-import type { FormEventHandler } from 'react';
 import { useRef, useCallback, useEffect } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { StopOrdersSubmission } from '@vegaprotocol/wallet';
@@ -8,7 +7,7 @@ import {
   toDecimal,
   validateAmount,
 } from '@vegaprotocol/utils';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, Controller, useController } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
 import {
   Radio,
@@ -24,22 +23,22 @@ import { getDerivedPrice, type Market } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
 import { ExpirySelector } from './expiry-selector';
 import { SideSelector } from './side-selector';
-import { timeInForceLabel, useOrder } from '@vegaprotocol/orders';
+import { timeInForceLabel } from '@vegaprotocol/orders';
 import {
   NoWalletWarning,
   REDUCE_ONLY_TOOLTIP,
-  useNotionalSize,
+  stopSubmit,
+  getNotionalSize,
 } from './deal-ticket';
 import { TypeToggle } from './type-selector';
 import {
-  useStopOrderFormValues,
-  type StopOrderFormValues,
-} from '../../hooks/use-stop-order-form-values';
-import {
+  useDealTicketFormValues,
   DealTicketType,
-  useDealTicketTypeStore,
-} from '../../hooks/use-type-store';
-import { mapFormValuesToStopOrdersSubmission } from '../../utils/map-form-values-to-stop-order-submission';
+  type StopOrderFormValues,
+  dealTicketTypeToOrderType,
+  isStopOrderType,
+} from '../../hooks/use-form-values';
+import { mapFormValuesToStopOrdersSubmission } from '../../utils/map-form-values-to-submission';
 import { DealTicketButton } from './deal-ticket-button';
 import { DealTicketFeeDetails } from './deal-ticket-fee-details';
 import { validateExpiration } from '../../utils';
@@ -50,32 +49,36 @@ export interface StopOrderProps {
   submit: (order: StopOrdersSubmission) => void;
 }
 
-const defaultValues: Partial<StopOrderFormValues> = {
-  type: Schema.OrderType.TYPE_LIMIT,
+const getDefaultValues = (
+  type: Schema.OrderType,
+  storedValues?: Partial<StopOrderFormValues>
+): StopOrderFormValues => ({
+  type,
   side: Schema.Side.SIDE_BUY,
   timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
   triggerType: 'price',
   triggerDirection:
     Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_RISES_ABOVE,
+  expire: false,
   expiryStrategy: Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT,
   size: '0',
-};
-
-const stopSubmit: FormEventHandler = (e) => e.preventDefault();
+  ...storedValues,
+});
 
 export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const setDealTicketType = useDealTicketTypeStore((state) => state.set);
-  const [, updateOrder] = useOrder(market.id);
-  const updateStoredFormValues = useStopOrderFormValues(
-    (state) => state.update
+  const setType = useDealTicketFormValues((state) => state.setType);
+  const updateStoredFormValues = useDealTicketFormValues(
+    (state) => state.updateStopOrder
   );
-  const storedFormValues = useStopOrderFormValues(
+  const storedFormValues = useDealTicketFormValues(
     (state) => state.formValues[market.id]
   );
-  const { handleSubmit, setValue, watch, control, formState } =
+  const dealTicketType = storedFormValues?.type ?? DealTicketType.StopLimit;
+  const type = dealTicketTypeToOrderType(dealTicketType);
+  const { handleSubmit, setValue, watch, control, formState, reset } =
     useForm<StopOrderFormValues>({
-      defaultValues: { ...defaultValues, ...storedFormValues },
+      defaultValues: getDefaultValues(type, storedFormValues?.[dealTicketType]),
     });
   const { errors } = formState;
   const lastSubmitTime = useRef(0);
@@ -102,16 +105,22 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const triggerType = watch('triggerType');
   const triggerPrice = watch('triggerPrice');
   const timeInForce = watch('timeInForce');
-  const type = watch('type');
   const rawPrice = watch('price');
   const rawSize = watch('size');
 
-  if (storedFormValues?.size && rawSize !== storedFormValues?.size) {
-    setValue('size', storedFormValues.size);
-  }
-  if (storedFormValues?.price && rawPrice !== storedFormValues?.price) {
-    setValue('price', storedFormValues.price);
-  }
+  useEffect(() => {
+    const size = storedFormValues?.[dealTicketType]?.size;
+    if (size && rawSize !== size) {
+      setValue('size', size);
+    }
+  }, [storedFormValues, dealTicketType, rawSize, setValue]);
+
+  useEffect(() => {
+    const price = storedFormValues?.[dealTicketType]?.price;
+    if (price && rawPrice !== price) {
+      setValue('price', price);
+    }
+  }, [storedFormValues, dealTicketType, rawPrice, setValue]);
 
   const isPriceTrigger = triggerType === 'price';
   const size = removeDecimal(rawSize, market.positionDecimalPlaces);
@@ -127,7 +136,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
         : marketPrice
     );
 
-  const notionalSize = useNotionalSize(
+  const notionalSize = getNotionalSize(
     price,
     size,
     market.decimalPlaces,
@@ -153,47 +162,28 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
       ? formatNumber(triggerPrice, market.decimalPlaces)
       : undefined;
 
+  useController({
+    name: 'type',
+    control,
+  });
+
   return (
     <form
       onSubmit={isReadOnly || !pubKey ? stopSubmit : handleSubmit(onSubmit)}
       noValidate
     >
-      <Controller
-        name="type"
-        control={control}
-        render={({ field }) => {
-          const { value } = field;
-          return (
-            <TypeToggle
-              value={
-                value === Schema.OrderType.TYPE_LIMIT
-                  ? DealTicketType.StopLimit
-                  : DealTicketType.StopMarket
-              }
-              onValueChange={(value) => {
-                const type = value as DealTicketType;
-                setDealTicketType(market.id, type);
-                if (
-                  type === DealTicketType.Limit ||
-                  type === DealTicketType.Market
-                ) {
-                  updateOrder({
-                    type:
-                      type === DealTicketType.Limit
-                        ? Schema.OrderType.TYPE_LIMIT
-                        : Schema.OrderType.TYPE_MARKET,
-                  });
-                  return;
-                }
-                setValue(
-                  'type',
-                  type === DealTicketType.StopLimit
-                    ? Schema.OrderType.TYPE_LIMIT
-                    : Schema.OrderType.TYPE_MARKET
-                );
-              }}
-            />
-          );
+      <TypeToggle
+        value={dealTicketType}
+        onValueChange={(dealTicketType) => {
+          setType(market.id, dealTicketType);
+          if (isStopOrderType(dealTicketType)) {
+            reset(
+              getDefaultValues(
+                dealTicketTypeToOrderType(dealTicketType),
+                storedFormValues?.[dealTicketType]
+              )
+            );
+          }
         }}
       />
       {errors.type && (
@@ -488,19 +478,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           </InputError>
         )}
       </div>
-      <div className="flex gap-2 pb-2 justify-end">
-        <Checkbox
-          name="reduce-only"
-          checked={true}
-          disabled={true}
-          label={
-            <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
-              <span className="text-xs">{t('Reduce only')}</span>
-            </Tooltip>
-          }
-        />
-      </div>
-      <div className="mb-2">
+      <div className="flex gap-2 pb-2 justify-between">
         <Controller
           name="expire"
           control={control}
@@ -511,11 +489,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 onCheckedChange={onCheckedChange}
                 checked={value}
                 name="expire"
-                label={'Expire'}
+                label={<span className="text-xs">{t('Expire')}</span>}
               />
             );
           }}
         />
+        <Checkbox
+          name="reduce-only"
+          checked={true}
+          disabled={true}
+          label={
+            <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
+              <span className="text-xs">{t('Reduce only')}</span>
+            </Tooltip>
+          }
+        />
       </div>
       {expire && (
         <>
@@ -570,7 +558,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           </div>
         </>
       )}
-      <NoWalletWarning pubKey={pubKey} isReadOnly={isReadOnly} asset={asset} />
+      <NoWalletWarning isReadOnly={isReadOnly} />
       <DealTicketButton side={side} label={t('Submit Stop Order')} />
       <DealTicketFeeDetails
         order={{

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

@@ -1,12 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import {
-  act,
-  render,
-  renderHook,
-  screen,
-  waitFor,
-} from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket, generateMarketData } from '../../test-helpers';
 import { DealTicket } from './deal-ticket';
@@ -15,7 +9,10 @@ import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import { addDecimal } from '@vegaprotocol/utils';
 import type { OrdersQuery } from '@vegaprotocol/orders';
-import { useCreateOrderStore } from '@vegaprotocol/orders';
+import {
+  DealTicketType,
+  useDealTicketFormValues,
+} from '../../hooks/use-form-values';
 import * as positionsTools from '@vegaprotocol/positions';
 import { OrdersDocument } from '@vegaprotocol/orders';
 
@@ -50,9 +47,6 @@ function generateJsx(mocks: MockedResponse[] = []) {
 }
 
 describe('DealTicket', () => {
-  const { result } = renderHook(() => useCreateOrderStore());
-  const useOrderStore = result.current;
-
   beforeEach(() => {
     jest.clearAllMocks();
     localStorage.clear();
@@ -166,9 +160,11 @@ describe('DealTicket', () => {
       persist: true,
     };
 
-    useOrderStore.setState({
-      orders: {
-        [expectedOrder.marketId]: expectedOrder,
+    useDealTicketFormValues.setState({
+      formValues: {
+        [expectedOrder.marketId]: {
+          [DealTicketType.Limit]: expectedOrder,
+        },
       },
     });
 
@@ -204,9 +200,11 @@ describe('DealTicket', () => {
       reduceOnly: true,
       postOnly: false,
     };
-    useOrderStore.setState({
-      orders: {
-        [expectedOrder.marketId]: expectedOrder,
+    useDealTicketFormValues.setState({
+      formValues: {
+        [expectedOrder.marketId]: {
+          [DealTicketType.Limit]: expectedOrder,
+        },
       },
     });
 
@@ -247,9 +245,11 @@ describe('DealTicket', () => {
       postOnly: true,
     };
 
-    useOrderStore.setState({
-      orders: {
-        [expectedOrder.marketId]: expectedOrder,
+    useDealTicketFormValues.setState({
+      formValues: {
+        [expectedOrder.marketId]: {
+          [DealTicketType.Limit]: expectedOrder,
+        },
       },
     });
 
@@ -295,9 +295,11 @@ describe('DealTicket', () => {
       },
     };
 
-    useOrderStore.setState({
-      orders: {
-        [expectedOrder.marketId]: expectedOrder,
+    useDealTicketFormValues.setState({
+      formValues: {
+        [expectedOrder.marketId]: {
+          [DealTicketType.Limit]: expectedOrder,
+        },
       },
     });
 
@@ -339,9 +341,11 @@ describe('DealTicket', () => {
       reduceOnly: false,
       postOnly: false,
     };
-    useOrderStore.setState({
-      orders: {
-        [expectedOrder.marketId]: expectedOrder,
+    useDealTicketFormValues.setState({
+      formValues: {
+        [expectedOrder.marketId]: {
+          [DealTicketType.Limit]: expectedOrder,
+        },
       },
     });
 
@@ -370,6 +374,7 @@ describe('DealTicket', () => {
     expect(screen.getByTestId('iceberg')).not.toBeChecked();
   });
 
+  // eslint-disable-next-line jest/no-disabled-tests
   it('handles TIF select box dependent on order type', async () => {
     render(generateJsx());
 

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

@@ -1,7 +1,8 @@
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
-import { memo, useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { Controller } from 'react-hook-form';
+import type { FormEventHandler } from 'react';
+import { memo, useCallback, useEffect, useRef, useMemo } from 'react';
+import { Controller, useController, useForm } from 'react-hook-form';
 import { DealTicketAmount } from './deal-ticket-amount';
 import { DealTicketButton } from './deal-ticket-button';
 import {
@@ -13,14 +14,10 @@ import { SideSelector } from './side-selector';
 import { TimeInForceSelector } from './time-in-force-selector';
 import { TypeSelector } from './type-selector';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
-import {
-  normalizeOrderSubmission,
-  useVegaWallet,
-  useVegaWalletDialogStore,
-} from '@vegaprotocol/wallet';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
 import {
   Checkbox,
-  ExternalLink,
   InputError,
   Intent,
   Notification,
@@ -56,14 +53,15 @@ import {
   useAccountBalance,
 } from '@vegaprotocol/accounts';
 
-import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
-import { useOrderForm } from '../../hooks/use-order-form';
+import { OrderType } from '@vegaprotocol/types';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import {
   DealTicketType,
-  useDealTicketTypeStore,
-} from '../../hooks/use-type-store';
-import { useStopOrderFormValues } from '../../hooks/use-stop-order-form-values';
+  dealTicketTypeToOrderType,
+  isStopOrderType,
+} from '../../hooks/use-form-values';
+import type { OrderFormValues } from '../../hooks/use-form-values';
+import { useDealTicketFormValues } from '../../hooks/use-form-values';
 import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
 import noop from 'lodash/noop';
 
@@ -80,23 +78,42 @@ export interface DealTicketProps {
   onDeposit: (assetId: string) => void;
 }
 
-export const useNotionalSize = (
+export const getNotionalSize = (
   price: string | null | undefined,
   size: string | undefined,
   decimalPlaces: number,
   positionDecimalPlaces: number
-) =>
-  useMemo(() => {
-    if (price && size) {
-      return removeDecimal(
-        toBigNum(size, positionDecimalPlaces).multipliedBy(
-          toBigNum(price, decimalPlaces)
-        ),
-        decimalPlaces
-      );
-    }
-    return null;
-  }, [price, size, decimalPlaces, positionDecimalPlaces]);
+) => {
+  if (price && size) {
+    return removeDecimal(
+      toBigNum(size, positionDecimalPlaces).multipliedBy(
+        toBigNum(price, decimalPlaces)
+      ),
+      decimalPlaces
+    );
+  }
+  return null;
+};
+
+export const stopSubmit: FormEventHandler = (e) => e.preventDefault();
+
+const getDefaultValues = (
+  type: Schema.OrderType,
+  storedValues?: Partial<OrderFormValues>
+): OrderFormValues => ({
+  type,
+  side: Schema.Side.SIDE_BUY,
+  timeInForce:
+    type === Schema.OrderType.TYPE_LIMIT
+      ? Schema.OrderTimeInForce.TIME_IN_FORCE_GTC
+      : Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+  size: '0',
+  price: '0',
+  expiresAt: undefined,
+  postOnly: false,
+  reduceOnly: false,
+  ...storedValues,
+});
 
 export const DealTicket = ({
   market,
@@ -108,32 +125,29 @@ export const DealTicket = ({
   onDeposit,
 }: DealTicketProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const setDealTicketType = useDealTicketTypeStore((state) => state.set);
-  const updateStopOrderFormValues = useStopOrderFormValues(
-    (state) => state.update
+  const setType = useDealTicketFormValues((state) => state.setType);
+  const storedFormValues = useDealTicketFormValues(
+    (state) => state.formValues[market.id]
   );
-  // store last used tif for market so that when changing OrderType the previous TIF
-  // selection for that type is used when switching back
-
-  const [lastTIF, setLastTIF] = useState({
-    [OrderType.TYPE_MARKET]: OrderTimeInForce.TIME_IN_FORCE_IOC,
-    [OrderType.TYPE_LIMIT]: OrderTimeInForce.TIME_IN_FORCE_GTC,
-  });
+  const updateStoredFormValues = useDealTicketFormValues(
+    (state) => state.updateOrder
+  );
+  const dealTicketType = storedFormValues?.type ?? DealTicketType.Limit;
+  const type = dealTicketTypeToOrderType(dealTicketType);
 
   const {
     control,
-    errors,
-    order,
-    setError,
-    clearErrors,
-    update,
+    reset,
+    formState: { errors },
     handleSubmit,
-  } = useOrderForm(market.id);
-
+    setValue,
+    watch,
+  } = useForm<OrderFormValues>({
+    defaultValues: getDefaultValues(type, storedFormValues?.[dealTicketType]),
+  });
   const lastSubmitTime = useRef(0);
 
   const asset = market.tradableInstrument.instrument.product.settlementAsset;
-
   const {
     accountBalance: marginAccountBalance,
     loading: loadingMarginAccountBalance,
@@ -149,24 +163,54 @@ export const DealTicket = ({
   ).toString();
 
   const { marketState, marketTradingMode } = marketData;
+  const timeInForce = watch('timeInForce');
 
-  const normalizedOrder =
-    order &&
-    normalizeOrderSubmission(
-      order,
-      market.decimalPlaces,
-      market.positionDecimalPlaces
-    );
+  const side = watch('side');
+  const rawSize = watch('size');
+  const rawPrice = watch('price');
+  const iceberg = watch('iceberg');
+  const peakSize = watch('peakSize');
 
-  const price = useMemo(() => {
-    return (
-      normalizedOrder &&
-      marketPrice &&
-      getDerivedPrice(normalizedOrder, marketPrice)
-    );
-  }, [normalizedOrder, marketPrice]);
+  useEffect(() => {
+    const size = storedFormValues?.[dealTicketType]?.size;
+    if (size && rawSize !== size) {
+      setValue('size', size);
+    }
+  }, [storedFormValues, dealTicketType, rawSize, setValue]);
 
-  const notionalSize = useNotionalSize(
+  useEffect(() => {
+    const price = storedFormValues?.[dealTicketType]?.price;
+    if (price && rawPrice !== price) {
+      setValue('price', price);
+    }
+  }, [storedFormValues, dealTicketType, rawPrice, setValue]);
+
+  useEffect(() => {
+    const subscription = watch((value, { name, type }) => {
+      updateStoredFormValues(market.id, value);
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, market.id, updateStoredFormValues]);
+
+  const normalizedOrder = mapFormValuesToOrderSubmission(
+    {
+      price: rawPrice || undefined,
+      side,
+      size: rawSize,
+      timeInForce,
+      type,
+    },
+    market.id,
+    market.decimalPlaces,
+    market.positionDecimalPlaces
+  );
+
+  const price =
+    normalizedOrder &&
+    marketPrice &&
+    getDerivedPrice(normalizedOrder, marketPrice);
+
+  const notionalSize = getNotionalSize(
     price,
     normalizedOrder?.size,
     market.decimalPlaces,
@@ -210,22 +254,20 @@ export const DealTicket = ({
   const assetSymbol =
     market.tradableInstrument.instrument.product.settlementAsset.symbol;
 
-  useEffect(() => {
+  const summaryError = useMemo(() => {
     if (!pubKey) {
-      setError('summary', {
+      return {
         message: t('No public key selected'),
         type: SummaryValidationType.NoPubKey,
-      });
-      return;
+      };
     }
 
     const marketStateError = validateMarketState(marketState);
     if (marketStateError !== true) {
-      setError('summary', {
+      return {
         message: marketStateError,
         type: SummaryValidationType.MarketState,
-      });
-      return;
+      };
     }
 
     const hasNoBalance =
@@ -234,24 +276,21 @@ export const DealTicket = ({
       hasNoBalance &&
       !(loadingMarginAccountBalance || loadingGeneralAccountBalance)
     ) {
-      setError('summary', {
+      return {
         message: SummaryValidationType.NoCollateral,
         type: SummaryValidationType.NoCollateral,
-      });
-      return;
+      };
     }
 
     const marketTradingModeError = validateMarketTradingMode(marketTradingMode);
     if (marketTradingModeError !== true) {
-      setError('summary', {
+      return {
         message: marketTradingModeError,
         type: SummaryValidationType.TradingMode,
-      });
-      return;
+      };
     }
 
-    // No error found above clear the error in case it was active on a previous render
-    clearErrors('summary');
+    return undefined;
   }, [
     marketState,
     marketTradingMode,
@@ -260,156 +299,83 @@ export const DealTicket = ({
     loadingMarginAccountBalance,
     loadingGeneralAccountBalance,
     pubKey,
-    setError,
-    clearErrors,
   ]);
 
-  const disablePostOnlyCheckbox = useMemo(() => {
-    const disabled = order
-      ? [
-          Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
-          Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
-        ].includes(order.timeInForce)
-      : true;
-    return disabled;
-  }, [order]);
+  const disablePostOnlyCheckbox = [
+    Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+    Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+  ].includes(timeInForce);
 
-  const disableReduceOnlyCheckbox = useMemo(() => {
-    const disabled = order
-      ? ![
-          Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
-          Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
-        ].includes(order.timeInForce)
-      : true;
-    return disabled;
-  }, [order]);
+  const disableReduceOnlyCheckbox = !disablePostOnlyCheckbox;
 
   const onSubmit = useCallback(
-    (order: OrderSubmission) => {
+    (formValues: OrderFormValues) => {
       const now = new Date().getTime();
       if (lastSubmitTime.current && now - lastSubmitTime.current < 1000) {
         return;
       }
       submit(
-        normalizeOrderSubmission(
-          order,
+        mapFormValuesToOrderSubmission(
+          formValues,
+          market.id,
           market.decimalPlaces,
           market.positionDecimalPlaces
         )
       );
       lastSubmitTime.current = now;
     },
-    [submit, market.decimalPlaces, market.positionDecimalPlaces]
+    [submit, market.decimalPlaces, market.positionDecimalPlaces, market.id]
   );
-
-  // if an order doesn't exist one will be created by the store immediately
-  if (!order || !normalizedOrder) {
-    return null;
-  }
+  useController({
+    name: 'type',
+    control,
+    rules: {
+      validate: validateType(marketData.marketTradingMode, marketData.trigger),
+    },
+  });
 
   return (
     <form
-      onSubmit={isReadOnly ? noop : handleSubmit(onSubmit)}
+      onSubmit={
+        isReadOnly || !pubKey
+          ? stopSubmit
+          : handleSubmit(summaryError ? noop : onSubmit)
+      }
       noValidate
       data-testid="deal-ticket-form"
     >
-      <Controller
-        name="type"
-        control={control}
-        rules={{
-          validate: validateType(
-            marketData.marketTradingMode,
-            marketData.trigger
-          ),
+      <TypeSelector
+        value={dealTicketType}
+        onValueChange={(dealTicketType) => {
+          setType(market.id, dealTicketType);
+          if (!isStopOrderType(dealTicketType)) {
+            reset(
+              getDefaultValues(
+                dealTicketTypeToOrderType(dealTicketType),
+                storedFormValues?.[dealTicketType]
+              )
+            );
+          }
         }}
-        render={() => (
-          <TypeSelector
-            value={
-              order.type === OrderType.TYPE_LIMIT
-                ? DealTicketType.Limit
-                : DealTicketType.Market
-            }
-            onValueChange={(dealTicketType) => {
-              setDealTicketType(market.id, dealTicketType);
-              if (
-                dealTicketType !== DealTicketType.Limit &&
-                dealTicketType !== DealTicketType.Market
-              ) {
-                updateStopOrderFormValues(market.id, {
-                  type:
-                    dealTicketType === DealTicketType.StopLimit
-                      ? OrderType.TYPE_LIMIT
-                      : OrderType.TYPE_MARKET,
-                });
-                return;
-              }
-              const type =
-                dealTicketType === DealTicketType.Limit
-                  ? OrderType.TYPE_LIMIT
-                  : OrderType.TYPE_MARKET;
-              update({
-                type,
-                // when changing type also update the TIF to what was last used of new type
-                timeInForce: lastTIF[type] || order.timeInForce,
-                postOnly:
-                  type === OrderType.TYPE_MARKET ? false : order.postOnly,
-                iceberg:
-                  type === OrderType.TYPE_MARKET ||
-                  [
-                    OrderTimeInForce.TIME_IN_FORCE_FOK,
-                    OrderTimeInForce.TIME_IN_FORCE_IOC,
-                  ].includes(lastTIF[type] || order.timeInForce)
-                    ? false
-                    : order.iceberg,
-                icebergOpts:
-                  type === OrderType.TYPE_MARKET ||
-                  [
-                    OrderTimeInForce.TIME_IN_FORCE_FOK,
-                    OrderTimeInForce.TIME_IN_FORCE_IOC,
-                  ].includes(lastTIF[type] || order.timeInForce)
-                    ? undefined
-                    : order.icebergOpts,
-                reduceOnly:
-                  type === OrderType.TYPE_LIMIT &&
-                  ![
-                    OrderTimeInForce.TIME_IN_FORCE_FOK,
-                    OrderTimeInForce.TIME_IN_FORCE_IOC,
-                  ].includes(lastTIF[type] || order.timeInForce)
-                    ? false
-                    : order.postOnly,
-                expiresAt: undefined,
-              });
-              clearErrors(['expiresAt', 'price']);
-            }}
-            market={market}
-            marketData={marketData}
-            errorMessage={errors.type?.message}
-          />
-        )}
+        market={market}
+        marketData={marketData}
+        errorMessage={errors.type?.message}
       />
       <Controller
         name="side"
         control={control}
-        render={() => (
-          <SideSelector
-            value={order.side}
-            onValueChange={(side) => {
-              update({ side });
-            }}
-          />
+        render={({ field }) => (
+          <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
       <DealTicketAmount
+        type={type}
         control={control}
-        orderType={order.type}
         market={market}
         marketData={marketData}
         marketPrice={marketPrice || undefined}
         sizeError={errors.size?.message}
         priceError={errors.price?.message}
-        update={update}
-        size={order.size}
-        price={order.price}
       />
       <Controller
         name="timeInForce"
@@ -420,58 +386,29 @@ export const DealTicket = ({
             marketData.trigger
           ),
         }}
-        render={() => (
+        render={({ field }) => (
           <TimeInForceSelector
-            value={order.timeInForce}
-            orderType={order.type}
-            onSelect={(timeInForce) => {
-              // Reset post only and reduce only when changing TIF
-              update({
-                timeInForce,
-                postOnly: [
-                  OrderTimeInForce.TIME_IN_FORCE_FOK,
-                  OrderTimeInForce.TIME_IN_FORCE_IOC,
-                ].includes(timeInForce)
-                  ? false
-                  : order.postOnly,
-                reduceOnly: ![
-                  OrderTimeInForce.TIME_IN_FORCE_FOK,
-                  OrderTimeInForce.TIME_IN_FORCE_IOC,
-                ].includes(timeInForce)
-                  ? false
-                  : order.reduceOnly,
-              });
-              // Set TIF value for the given order type, so that when switching
-              // types we know the last used TIF for the given order type
-              setLastTIF((curr) => ({
-                ...curr,
-                [order.type]: timeInForce,
-                expiresAt: undefined,
-              }));
-              clearErrors('expiresAt');
-            }}
+            value={field.value}
+            orderType={type}
+            onSelect={field.onChange}
             market={market}
             marketData={marketData}
             errorMessage={errors.timeInForce?.message}
           />
         )}
       />
-      {order.type === Schema.OrderType.TYPE_LIMIT &&
-        order.timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT && (
+      {type === Schema.OrderType.TYPE_LIMIT &&
+        timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT && (
           <Controller
             name="expiresAt"
             control={control}
             rules={{
               validate: validateExpiration,
             }}
-            render={() => (
+            render={({ field }) => (
               <ExpirySelector
-                value={order.expiresAt}
-                onSelect={(expiresAt) =>
-                  update({
-                    expiresAt: expiresAt || undefined,
-                  })
-                }
+                value={field.value}
+                onSelect={(expiresAt) => field.onChange(expiresAt)}
                 errorMessage={errors.expiresAt?.message}
               />
             )}
@@ -481,13 +418,14 @@ export const DealTicket = ({
         <Controller
           name="postOnly"
           control={control}
-          render={() => (
+          render={({ field }) => (
             <Checkbox
               name="post-only"
-              checked={order.postOnly}
+              checked={!disablePostOnlyCheckbox && field.value}
               disabled={disablePostOnlyCheckbox}
-              onCheckedChange={() => {
-                update({ postOnly: !order.postOnly, reduceOnly: false });
+              onCheckedChange={(postOnly) => {
+                field.onChange(postOnly);
+                setValue('reduceOnly', false);
               }}
               label={
                 <Tooltip
@@ -512,13 +450,14 @@ export const DealTicket = ({
         <Controller
           name="reduceOnly"
           control={control}
-          render={() => (
+          render={({ field }) => (
             <Checkbox
               name="reduce-only"
-              checked={order.reduceOnly}
+              checked={!disableReduceOnlyCheckbox && field.value}
               disabled={disableReduceOnlyCheckbox}
-              onCheckedChange={() => {
-                update({ postOnly: false, reduceOnly: !order.reduceOnly });
+              onCheckedChange={(reduceOnly) => {
+                field.onChange(reduceOnly);
+                setValue('postOnly', false);
               }}
               label={
                 <Tooltip
@@ -539,53 +478,49 @@ export const DealTicket = ({
           )}
         />
       </div>
-      <div className="flex gap-2 pb-2 justify-between">
-        {order.type === Schema.OrderType.TYPE_LIMIT && (
-          <Controller
-            name="iceberg"
-            control={control}
-            render={() => (
-              <Checkbox
-                name="iceberg"
-                checked={order.iceberg}
-                onCheckedChange={() => {
-                  update({ iceberg: !order.iceberg, icebergOpts: undefined });
-                }}
-                label={
-                  <Tooltip
-                    description={
-                      <p>
-                        {t(`Trade only a fraction of the order size at once.
+      {type === Schema.OrderType.TYPE_LIMIT && (
+        <>
+          <div className="flex gap-2 pb-2 justify-between">
+            <Controller
+              name="iceberg"
+              control={control}
+              render={({ field }) => (
+                <Checkbox
+                  name="iceberg"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                  label={
+                    <Tooltip
+                      description={
+                        <p>
+                          {t(`Trade only a fraction of the order size at once.
                             After the peak size of the order has traded, the size is reset. This is repeated until the order is cancelled, expires, or its full volume trades away.
                             For example, an iceberg order with a size of 1000 and a peak size of 100 will effectively be split into 10 orders with a size of 100 each.
                             Note that the full volume of the order is not hidden and is still reflected in the order book.`)}
-                      </p>
-                    }
-                  >
-                    <span className="text-xs">{t('Iceberg')}</span>
-                  </Tooltip>
-                }
-              />
-            )}
-          />
-        )}
-      </div>
-      {order.iceberg && (
-        <DealTicketSizeIceberg
-          update={update}
-          market={market}
-          peakSizeError={errors.icebergOpts?.peakSize?.message}
-          minimumVisibleSizeError={
-            errors.icebergOpts?.minimumVisibleSize?.message
-          }
-          control={control}
-          size={order.size}
-          peakSize={order.icebergOpts?.peakSize || ''}
-          minimumVisibleSize={order.icebergOpts?.minimumVisibleSize || ''}
-        />
+                        </p>
+                      }
+                    >
+                      <span className="text-xs">{t('Iceberg')}</span>
+                    </Tooltip>
+                  }
+                />
+              )}
+            />
+          </div>
+          {iceberg && (
+            <DealTicketSizeIceberg
+              market={market}
+              peakSizeError={errors.peakSize?.message}
+              minimumVisibleSizeError={errors.minimumVisibleSize?.message}
+              control={control}
+              size={rawSize}
+              peakSize={peakSize}
+            />
+          )}
+        </>
       )}
       <SummaryMessage
-        errorMessage={errors.summary?.message}
+        error={summaryError}
         asset={asset}
         marketTradingMode={marketData.marketTradingMode}
         balance={balance}
@@ -598,7 +533,7 @@ export const DealTicket = ({
         onClickCollateral={onClickCollateral}
         onDeposit={onDeposit}
       />
-      <DealTicketButton side={order.side} />
+      <DealTicketButton side={side} />
       <DealTicketFeeDetails
         order={
           normalizedOrder && { ...normalizedOrder, price: price || undefined }
@@ -624,7 +559,7 @@ export const DealTicket = ({
  * renders warnings about current state of the market
  */
 interface SummaryMessageProps {
-  errorMessage?: string;
+  error?: { message: string; type: string };
   asset: { id: string; symbol: string; name: string; decimals: number };
   marketTradingMode: MarketData['marketTradingMode'];
   balance: string;
@@ -637,13 +572,7 @@ interface SummaryMessageProps {
 
 export const NoWalletWarning = ({
   isReadOnly,
-  pubKey,
-  asset,
-}: Pick<SummaryMessageProps, 'isReadOnly' | 'pubKey' | 'asset'>) => {
-  const assetSymbol = asset.symbol;
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
+}: Pick<SummaryMessageProps, 'isReadOnly'>) => {
   if (isReadOnly) {
     return (
       <div className="mb-2">
@@ -655,37 +584,12 @@ export const NoWalletWarning = ({
       </div>
     );
   }
-  if (!pubKey) {
-    return (
-      <div className="mb-2">
-        <Notification
-          testId={'deal-ticket-connect-wallet'}
-          intent={Intent.Warning}
-          message={
-            <p className="text-sm pb-2">
-              You need a{' '}
-              <ExternalLink href="https://vega.xyz/wallet">
-                Vega wallet
-              </ExternalLink>{' '}
-              with {assetSymbol} to start trading in this market.
-            </p>
-          }
-          buttonProps={{
-            text: t('Connect wallet'),
-            action: openVegaWalletDialog,
-            dataTestId: 'order-connect-wallet',
-            size: 'small',
-          }}
-        />
-      </div>
-    );
-  }
   return null;
 };
 
 const SummaryMessage = memo(
   ({
-    errorMessage,
+    error,
     asset,
     marketTradingMode,
     balance,
@@ -698,16 +602,10 @@ const SummaryMessage = memo(
     // Specific error UI for if balance is so we can
     // render a deposit dialog
     if (isReadOnly || !pubKey) {
-      return (
-        <NoWalletWarning
-          isReadOnly={isReadOnly}
-          asset={asset}
-          pubKey={pubKey}
-        />
-      );
+      return <NoWalletWarning isReadOnly={isReadOnly} />;
     }
 
-    if (errorMessage === SummaryValidationType.NoCollateral) {
+    if (error?.type === SummaryValidationType.NoCollateral) {
       return (
         <div className="mb-2">
           <ZeroBalanceError
@@ -721,11 +619,11 @@ const SummaryMessage = memo(
 
     // If we have any other full error which prevents
     // submission render that first
-    if (errorMessage) {
+    if (error?.message) {
       return (
         <div className="mb-2">
           <InputError testId="deal-ticket-error-message-summary">
-            {errorMessage}
+            {error?.message}
           </InputError>
         </div>
       );

libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx

@@ -21,6 +21,13 @@ interface TimeInForceSelectorProps {
   errorMessage?: string;
 }
 
+const typeLimitOptions = Object.entries(Schema.OrderTimeInForce);
+const typeMarketOptions = typeLimitOptions.filter(
+  ([_, timeInForce]) =>
+    timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_FOK ||
+    timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
+);
+
 export const TimeInForceSelector = ({
   value,
   orderType,
@@ -31,12 +38,8 @@ export const TimeInForceSelector = ({
 }: TimeInForceSelectorProps) => {
   const options =
     orderType === Schema.OrderType.TYPE_LIMIT
-      ? Object.entries(Schema.OrderTimeInForce)
-      : Object.entries(Schema.OrderTimeInForce).filter(
-          ([_, timeInForce]) =>
-            timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_FOK ||
-            timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
-        );
+      ? typeLimitOptions
+      : typeMarketOptions;
 
   const renderError = (errorType: string) => {
     if (errorType === MarketModeValidationType.Auction) {

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

@@ -1,5 +1,4 @@
 import {
-  Icon,
   InputError,
   SimpleGrid,
   Tooltip,
@@ -10,12 +9,14 @@ import {
   TradingDropdownRadioGroup,
   TradingDropdownRadioItem,
   TradingDropdownTrigger,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import type { Market, StaticMarketData } from '@vegaprotocol/markets';
 import { compileGridData } from '../trading-mode-tooltip';
 import { MarketModeValidationType } from '../../constants';
-import { DealTicketType } from '../../hooks/use-type-store';
+import { DealTicketType } from '../../hooks/use-form-values';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import classNames from 'classnames';
 import { FLAGS } from '@vegaprotocol/environment';
@@ -81,11 +82,11 @@ export const TypeToggle = ({
                 }
               )}
             >
-              <button>
+              <button className="flex gap-1">
                 <span className="text-ellipsis whitespace-nowrap shrink overflow-hidden">
                   {t(selectedOption ? selectedOption.label : 'Stop')}
                 </span>
-                <Icon name="chevron-down" className="ml-1" />
+                <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
               </button>
             </TradingDropdownTrigger>
           }

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

@@ -1,4 +1,3 @@
 export * from './__generated__/EstimateOrder';
 export * from './use-estimate-fees';
-export * from './use-type-store';
-export * from './use-stop-order-form-values';
+export * from './use-form-values';

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

@@ -0,0 +1,144 @@
+import { create } from 'zustand';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+import type { OrderTimeInForce, Side, OrderType } from '@vegaprotocol/types';
+import * as Schema from '@vegaprotocol/types';
+import { immer } from 'zustand/middleware/immer';
+
+export enum DealTicketType {
+  Limit = 'Limit',
+  Market = 'Market',
+  StopLimit = 'StopLimit',
+  StopMarket = 'StopMarket',
+}
+
+export interface StopOrderFormValues {
+  side: Side;
+
+  triggerDirection: Schema.StopOrderTriggerDirection;
+
+  triggerType: 'price' | 'trailingPercentOffset';
+  triggerPrice?: string;
+  triggerTrailingPercentOffset?: string;
+
+  type: OrderType;
+  size: string;
+  timeInForce: OrderTimeInForce;
+  price?: string;
+
+  expire: boolean;
+  expiryStrategy?: Schema.StopOrderExpiryStrategy;
+  expiresAt?: string;
+}
+
+export type OrderFormValues = {
+  type: OrderType;
+  side: Side;
+  size: string;
+  timeInForce: OrderTimeInForce;
+  price?: string;
+  expiresAt?: string | undefined;
+  postOnly?: boolean;
+  reduceOnly?: boolean;
+  iceberg?: boolean;
+  peakSize?: string;
+  minimumVisibleSize?: string;
+};
+
+type UpdateOrder = (marketId: string, values: Partial<OrderFormValues>) => void;
+
+type UpdateStopOrder = (
+  marketId: string,
+  values: Partial<StopOrderFormValues>
+) => void;
+
+type Store = {
+  updateOrder: UpdateOrder;
+  updateStopOrder: UpdateStopOrder;
+  setType: (marketId: string, value: DealTicketType) => void;
+  updateAll: (
+    marketId: string,
+    values: { size?: string; price?: string }
+  ) => void;
+  formValues: Record<
+    string,
+    | {
+        [DealTicketType.Limit]?: Partial<OrderFormValues>;
+        [DealTicketType.Market]?: Partial<OrderFormValues>;
+        [DealTicketType.StopLimit]?: Partial<StopOrderFormValues>;
+        [DealTicketType.StopMarket]?: Partial<StopOrderFormValues>;
+        type?: DealTicketType;
+      }
+    | undefined
+  >;
+};
+
+export const dealTicketTypeToOrderType = (dealTicketType?: DealTicketType) =>
+  dealTicketType === DealTicketType.Limit ||
+  dealTicketType === DealTicketType.StopLimit
+    ? Schema.OrderType.TYPE_LIMIT
+    : Schema.OrderType.TYPE_MARKET;
+
+export const isStopOrderType = (dealTicketType?: DealTicketType) =>
+  dealTicketType === DealTicketType.StopLimit ||
+  dealTicketType === DealTicketType.StopMarket;
+
+export const useDealTicketFormValues = create<Store>()(
+  immer(
+    persist(
+      subscribeWithSelector((set) => ({
+        formValues: {},
+        updateStopOrder: (marketId, formValues) => {
+          set((state) => {
+            const type =
+              formValues.type === Schema.OrderType.TYPE_LIMIT
+                ? DealTicketType.StopLimit
+                : DealTicketType.StopMarket;
+            const market = state.formValues[marketId] || {};
+            if (!state.formValues[marketId]) {
+              state.formValues[marketId] = market;
+            }
+            market[type] = Object.assign(market[type] ?? {}, formValues);
+          });
+        },
+        updateOrder: (marketId, formValues) => {
+          set((state) => {
+            const type =
+              formValues.type === Schema.OrderType.TYPE_LIMIT
+                ? DealTicketType.Limit
+                : DealTicketType.Market;
+            const market = state.formValues[marketId] || {};
+            if (!state.formValues[marketId]) {
+              state.formValues[marketId] = market;
+            }
+            market[type] = Object.assign(market[type] ?? {}, formValues);
+          });
+        },
+        updateAll: (
+          marketId: string,
+          formValues: { size?: string; price?: string }
+        ) => {
+          set((state) => {
+            const market = state.formValues[marketId] || {};
+            if (!state.formValues[marketId]) {
+              state.formValues[marketId] = market;
+            }
+            for (const type of Object.values(DealTicketType)) {
+              market[type] = Object.assign(market[type] ?? {}, formValues);
+            }
+          });
+        },
+        setType: (marketId, type) => {
+          set((state) => {
+            state.formValues[marketId] = Object.assign(
+              state.formValues[marketId] ?? {},
+              { type }
+            );
+          });
+        },
+      })),
+      {
+        name: 'vega_deal_ticket_store',
+      }
+    )
+  )
+);

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

@@ -1,68 +0,0 @@
-import omit from 'lodash/omit';
-import { act, renderHook } from '@testing-library/react';
-import { getDefaultOrder, useCreateOrderStore } from '@vegaprotocol/orders';
-import { useOrderForm } from './use-order-form';
-
-jest.mock('zustand');
-
-describe('useOrderForm', () => {
-  const marketId = 'market-id';
-  const setup = (marketId: string) => {
-    return renderHook(() => useOrderForm(marketId));
-  };
-  const { result } = renderHook(() => useCreateOrderStore());
-  const useOrderStore = result.current;
-
-  it('updates form fields when the order changes', async () => {
-    const order = getDefaultOrder(marketId);
-    const { result } = setup(marketId);
-    // expect default values
-    expect(result.current.order).toEqual(order);
-    expect(result.current.getValues()).toEqual(order);
-
-    const priceUpdate = {
-      ...order,
-      price: '100',
-      size: '22',
-    };
-
-    await act(async () => {
-      useOrderStore.setState({
-        orders: {
-          [marketId]: priceUpdate,
-        },
-      });
-    });
-
-    // check order store has updated fields
-    expect(result.current.order).toEqual(priceUpdate);
-    // check react-hook-form has updated fields
-    expect(result.current.getValues()).toEqual(priceUpdate);
-  });
-
-  it('removes persist key on submit', async () => {
-    const order = {
-      ...getDefaultOrder(marketId),
-      price: '99',
-      size: '22',
-    };
-    const onSubmit = jest.fn();
-    const { result } = setup(marketId);
-
-    await act(async () => {
-      useOrderStore.setState({
-        orders: {
-          [marketId]: order,
-        },
-      });
-    });
-
-    await act(async () => {
-      result.current.handleSubmit(onSubmit)();
-    });
-
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-    expect(onSubmit.mock.calls[0][0]).toEqual(omit(order, 'persist'));
-    expect(onSubmit.mock.calls[0][0].persist).toBeUndefined();
-  });
-});

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

@@ -1,71 +0,0 @@
-import omit from 'lodash/omit';
-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';
-
-export type OrderFormFields = OrderObj & {
-  summary: string;
-};
-
-/**
- * Connects the order store to a react-hook-form instance. Any time a field
- * changes in the store the form will be updated so that validation rules
- * for those fields are applied
- */
-export const useOrderForm = (marketId: string) => {
-  const [order, update] = useOrder(marketId);
-  const {
-    control,
-    formState: { errors, isSubmitted },
-    handleSubmit,
-    setError,
-    setValue,
-    clearErrors,
-    getValues,
-  } = useForm<OrderFormFields>({
-    // order can be undefined if there is nothing in the store, it
-    // will be created but the form still needs some default values
-    defaultValues: order || getDefaultOrder(marketId),
-  });
-
-  // Keep form fields in sync with the store values,
-  // inputs are updating the store, fields need updating
-  // to ensure validation rules are applied
-  useEffect(() => {
-    if (!order) return;
-    const currOrder = getValues();
-    for (const k in order) {
-      const key = k as keyof typeof order;
-      const curr = currOrder[key];
-      const value = order[key];
-      if (value !== curr) {
-        setValue(key, value, {
-          shouldValidate: isSubmitted, // only apply validation after the form has been submitted and failed
-          shouldDirty: true,
-          shouldTouch: true,
-        });
-      }
-    }
-  }, [order, isSubmitted, getValues, setValue]);
-
-  const handleSubmitWrapper = (cb: (o: OrderSubmission) => void) => {
-    return handleSubmit(() => {
-      // remove the persist and iceberg key from the order in the store, the wallet will reject
-      // an order that contains unrecognized additional keys
-      cb(omit(order, 'persist', 'iceberg'));
-    });
-  };
-
-  return {
-    order,
-    update,
-    control,
-    errors,
-    setError,
-    clearErrors,
-    getValues, // returned for test purposes only
-    handleSubmit: handleSubmitWrapper,
-  };
-};

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

@@ -1,62 +0,0 @@
-import { create } from 'zustand';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
-import type { OrderTimeInForce, Side, OrderType } from '@vegaprotocol/types';
-import type * as Schema from '@vegaprotocol/types';
-
-export interface StopOrderFormValues {
-  side: Side;
-
-  triggerDirection: Schema.StopOrderTriggerDirection;
-
-  triggerType: 'price' | 'trailingPercentOffset';
-  triggerPrice: string;
-  triggerTrailingPercentOffset: string;
-
-  type: OrderType;
-  size: string;
-  timeInForce: OrderTimeInForce;
-  price?: string;
-
-  expire: boolean;
-  expiryStrategy?: Schema.StopOrderExpiryStrategy;
-  expiresAt?: string;
-}
-
-type StopOrderFormValuesMap = {
-  [marketId: string]: Partial<StopOrderFormValues> | undefined;
-};
-
-type Update = (
-  marketId: string,
-  formValues: Partial<StopOrderFormValues>,
-  persist?: boolean
-) => void;
-
-interface Store {
-  formValues: StopOrderFormValuesMap;
-  update: Update;
-}
-
-export const useStopOrderFormValues = create<Store>()(
-  persist(
-    subscribeWithSelector((set) => ({
-      formValues: {},
-      update: (marketId, formValues, persist = true) => {
-        set((state) => {
-          return {
-            formValues: {
-              ...state.formValues,
-              [marketId]: {
-                ...state.formValues[marketId],
-                ...formValues,
-              },
-            },
-          };
-        });
-      },
-    })),
-    {
-      name: 'vega_stop_order_store',
-    }
-  )
-);

libs/deal-ticket/src/hooks/use-type-store.ts

@@ -1,28 +0,0 @@
-import { create } from 'zustand';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
-
-export enum DealTicketType {
-  Limit = 'Limit',
-  Market = 'Market',
-  StopLimit = 'StopLimit',
-  StopMarket = 'StopMarket',
-}
-
-export const useDealTicketTypeStore = create<{
-  set: (marketId: string, type: DealTicketType) => void;
-  type: Record<string, DealTicketType>;
-}>()(
-  persist(
-    subscribeWithSelector((set) => ({
-      type: {},
-      set: (marketId: string, type: DealTicketType) =>
-        set((state) => ({
-          ...state,
-          type: { ...state.type, [marketId]: type },
-        })),
-    })),
-    {
-      name: 'deal_ticket_type',
-    }
-  )
-);

libs/deal-ticket/src/utils/map-form-values-to-submission.ts

@@ -1,12 +1,64 @@
 import type {
+  OrderSubmission,
   StopOrderSetup,
   StopOrdersSubmission,
 } from '@vegaprotocol/wallet';
-import { normalizeOrderSubmission } from '@vegaprotocol/wallet';
-import type { StopOrderFormValues } from '../hooks/use-stop-order-form-values';
+import type {
+  OrderFormValues,
+  StopOrderFormValues,
+} from '../hooks/use-form-values';
 import * as Schema from '@vegaprotocol/types';
 import { removeDecimal, toNanoSeconds } from '@vegaprotocol/utils';
 
+export const mapFormValuesToOrderSubmission = (
+  order: OrderFormValues,
+  marketId: string,
+  decimalPlaces: number,
+  positionDecimalPlaces: number
+): OrderSubmission => ({
+  marketId: marketId,
+  type: order.type,
+  side: order.side,
+  timeInForce: order.timeInForce,
+  price:
+    order.type === Schema.OrderType.TYPE_LIMIT && order.price
+      ? removeDecimal(order.price, decimalPlaces)
+      : undefined,
+  size: removeDecimal(order.size, positionDecimalPlaces),
+  expiresAt:
+    order.expiresAt &&
+    order.timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT
+      ? toNanoSeconds(order.expiresAt)
+      : undefined,
+  postOnly:
+    order.type === Schema.OrderType.TYPE_MARKET ? false : order.postOnly,
+  reduceOnly:
+    order.type === Schema.OrderType.TYPE_LIMIT &&
+    ![
+      Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+      Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+    ].includes(order.timeInForce)
+      ? false
+      : order.reduceOnly,
+  icebergOpts:
+    (order.type === Schema.OrderType.TYPE_MARKET ||
+      [
+        Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+        Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+      ].includes(order.timeInForce)) &&
+    order.iceberg &&
+    order.peakSize &&
+    order.minimumVisibleSize
+      ? {
+          peakSize: removeDecimal(order.peakSize, positionDecimalPlaces),
+          minimumVisibleSize: removeDecimal(
+            order.minimumVisibleSize,
+            positionDecimalPlaces
+          ),
+        }
+      : undefined,
+});
+
 export const mapFormValuesToStopOrdersSubmission = (
   data: StopOrderFormValues,
   marketId: string,
@@ -15,9 +67,8 @@ export const mapFormValuesToStopOrdersSubmission = (
 ): StopOrdersSubmission => {
   const submission: StopOrdersSubmission = {};
   const stopOrderSetup: StopOrderSetup = {
-    orderSubmission: normalizeOrderSubmission(
+    orderSubmission: mapFormValuesToOrderSubmission(
       {
-        marketId,
         type: data.type,
         side: data.side,
         size: data.size,
@@ -25,12 +76,16 @@ export const mapFormValuesToStopOrdersSubmission = (
         price: data.price,
         reduceOnly: true,
       },
+      marketId,
       decimalPlaces,
       positionDecimalPlaces
     ),
   };
   if (data.triggerType === 'price') {
-    stopOrderSetup.price = removeDecimal(data.triggerPrice, decimalPlaces);
+    stopOrderSetup.price = removeDecimal(
+      data.triggerPrice ?? '',
+      decimalPlaces
+    );
   } else if (data.triggerType === 'trailingPercentOffset') {
     stopOrderSetup.trailingPercentOffset = (
       Number(data.triggerTrailingPercentOffset) / 100

libs/deal-ticket/src/utils/map-form-values-to-submisstion.spec.ts

@@ -0,0 +1,64 @@
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
+import { mapFormValuesToOrderSubmission } from './map-form-values-to-submission';
+import * as Schema from '@vegaprotocol/types';
+
+describe('mapFormValuesToOrderSubmission', () => {
+  it('sets and formats price only for limit orders', () => {
+    expect(
+      mapFormValuesToOrderSubmission(
+        { price: '100' } as unknown as OrderSubmissionBody['orderSubmission'],
+        'marketId',
+        2,
+        1
+      ).price
+    ).toBeUndefined();
+    expect(
+      mapFormValuesToOrderSubmission(
+        {
+          price: '100',
+          type: Schema.OrderType.TYPE_LIMIT,
+        } as unknown as OrderSubmissionBody['orderSubmission'],
+        'marketId',
+        2,
+        1
+      ).price
+    ).toEqual('10000');
+  });
+
+  it('sets and formats expiresAt only for time in force orders', () => {
+    expect(
+      mapFormValuesToOrderSubmission(
+        {
+          expiresAt: '2022-01-01T00:00:00.000Z',
+        } as OrderSubmissionBody['orderSubmission'],
+        'marketId',
+        2,
+        1
+      ).expiresAt
+    ).toBeUndefined();
+    expect(
+      mapFormValuesToOrderSubmission(
+        {
+          expiresAt: '2022-01-01T00:00:00.000Z',
+          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
+        } as OrderSubmissionBody['orderSubmission'],
+        'marketId',
+        2,
+        1
+      ).expiresAt
+    ).toEqual('1640995200000000000');
+  });
+
+  it('formats size', () => {
+    expect(
+      mapFormValuesToOrderSubmission(
+        {
+          size: '100',
+        } as OrderSubmissionBody['orderSubmission'],
+        'marketId',
+        2,
+        1
+      ).size
+    ).toEqual('1000');
+  });
+});

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   addDecimalsFormatNumber,
   getDateTimeFormat,
@@ -6,7 +6,6 @@ import {
   isNumeric,
 } from '@vegaprotocol/utils';
 import type { ColDef } from 'ag-grid-community';
-import type { AgGridReact } from 'ag-grid-react';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   VegaICellRendererParams,
@@ -17,10 +16,9 @@ import type { DepositFieldsFragment } from './__generated__/Deposit';
 import { EtherscanLink } from '@vegaprotocol/environment';
 import { DepositStatusMapping } from '@vegaprotocol/types';
 
-export const DepositsTable = forwardRef<
-  AgGridReact,
-  TypedDataAgGrid<DepositFieldsFragment>
->((props, ref) => {
+export const DepositsTable = (
+  props: TypedDataAgGrid<DepositFieldsFragment>
+) => {
   const columnDefs = useMemo<ColDef[]>(
     () => [
       { headerName: 'Asset', field: 'asset.symbol' },
@@ -79,11 +77,10 @@ export const DepositsTable = forwardRef<
   );
   return (
     <AgGrid
-      ref={ref}
       defaultColDef={{ flex: 1 }}
       columnDefs={columnDefs}
       style={{ width: '100%', height: '100%' }}
       {...props}
     />
   );
-});
+};

libs/fills/src/lib/fills-table.spec.tsx

@@ -20,7 +20,7 @@ describe('FillsTable', () => {
         positionDecimalPlaces: 5,
         tradableInstrument: {
           instrument: {
-            name: 'test market',
+            code: 'test market',
             product: {
               settlementAsset: {
                 decimals: 2,
@@ -71,7 +71,7 @@ describe('FillsTable', () => {
     render(<FillsTable partyId={partyId} rowData={[{ ...buyerFill }]} />);
     const cells = screen.getAllByRole('gridcell');
     const expectedValues = [
-      buyerFill.market?.tradableInstrument.instrument.name || '',
+      buyerFill.market?.tradableInstrument.instrument.code || '',
       '+3.00',
       '1.00 BTC',
       '3.00 BTC',
@@ -106,7 +106,7 @@ describe('FillsTable', () => {
 
     const cells = screen.getAllByRole('gridcell');
     const expectedValues = [
-      buyerFill.market?.tradableInstrument.instrument.name || '',
+      buyerFill.market?.tradableInstrument.instrument.code || '',
       '-3.00',
       '1.00 BTC',
       '3.00 BTC',
@@ -141,7 +141,7 @@ describe('FillsTable', () => {
 
     const cells = screen.getAllByRole('gridcell');
     const expectedValues = [
-      buyerFill.market?.tradableInstrument.instrument.name || '',
+      buyerFill.market?.tradableInstrument.instrument.code || '',
       '-3.00',
       '1.00 BTC',
       '3.00 BTC',

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

@@ -47,7 +47,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
       () => [
         {
           headerName: t('Market'),
-          field: 'market.tradableInstrument.instrument.name',
+          field: 'market.tradableInstrument.instrument.code',
           cellRenderer: 'MarketNameCell',
           cellRendererParams: { idPath: 'market.id', onMarketClick },
         },

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

@@ -1,8 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import type * as Schema from '@vegaprotocol/types';
 import type { FilterChangedEvent } from 'ag-grid-community';
-import type { AgGridReact } from 'ag-grid-react';
-import { useCallback, useRef, useState, useMemo } from 'react';
+import { useCallback, useState, useMemo } from 'react';
 import { subDays, formatRFC3339 } from 'date-fns';
 import { ledgerEntriesProvider } from './ledger-entries-data-provider';
 import type { LedgerEntriesQueryVariables } from './__generated__/LedgerEntries';
@@ -32,7 +31,6 @@ export const LedgerManager = ({
   partyId: string;
   gridProps: ReturnType<typeof useDataGridEvents>;
 }) => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const [filter, setFilter] = useState<Filter>(defaultFilter);
 
   const variables = useMemo<LedgerEntriesQueryVariables>(
@@ -64,7 +62,6 @@ export const LedgerManager = ({
   return (
     <div className="h-full relative">
       <LedgerTable
-        ref={gridRef}
         rowData={data}
         overlayNoRowsTemplate={error ? error.message : t('No entries')}
         {...gridProps}

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

@@ -14,7 +14,6 @@ import {
   DateRangeFilter,
   SetFilter,
 } from '@vegaprotocol/datagrid';
-import type { AgGridReact } from 'ag-grid-react';
 import type * as Types from '@vegaprotocol/types';
 import type { ColDef } from 'ag-grid-community';
 import {
@@ -23,7 +22,7 @@ import {
   TransferTypeMapping,
 } from '@vegaprotocol/types';
 import type { LedgerEntry } from './ledger-entries-data-provider';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { formatRFC3339, subDays } from 'date-fns';
 
 export const TransferTooltipCellComponent = ({
@@ -45,162 +44,159 @@ const dateRangeFilterParams = {
 };
 type LedgerEntryProps = TypedDataAgGrid<LedgerEntry>;
 
-export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
-  (props, ref) => {
-    const columnDefs = useMemo<ColDef[]>(
-      () => [
-        {
-          headerName: t('Sender'),
-          field: 'fromAccountPartyId',
-          cellRenderer: ({
-            value,
-          }: VegaValueFormatterParams<LedgerEntry, 'fromAccountPartyId'>) =>
-            truncateByChars(value || ''),
+export const LedgerTable = (props: LedgerEntryProps) => {
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      {
+        headerName: t('Sender'),
+        field: 'fromAccountPartyId',
+        cellRenderer: ({
+          value,
+        }: VegaValueFormatterParams<LedgerEntry, 'fromAccountPartyId'>) =>
+          truncateByChars(value || ''),
+      },
+      {
+        headerName: t('Account type'),
+        filter: SetFilter,
+        filterParams: {
+          set: AccountTypeMapping,
         },
-        {
-          headerName: t('Account type'),
-          filter: SetFilter,
-          filterParams: {
-            set: AccountTypeMapping,
-          },
-          field: 'fromAccountType',
-          cellRenderer: ({
-            value,
-          }: VegaValueFormatterParams<LedgerEntry, 'fromAccountType'>) =>
-            value ? AccountTypeMapping[value] : '-',
+        field: 'fromAccountType',
+        cellRenderer: ({
+          value,
+        }: VegaValueFormatterParams<LedgerEntry, 'fromAccountType'>) =>
+          value ? AccountTypeMapping[value] : '-',
+      },
+      {
+        headerName: t('Market'),
+        field: 'marketSender.tradableInstrument.instrument.code',
+        cellRenderer: ({
+          value,
+        }: VegaValueFormatterParams<
+          LedgerEntry,
+          'marketSender.tradableInstrument.instrument.code'
+        >) => value || '-',
+      },
+      {
+        headerName: t('Receiver'),
+        field: 'toAccountPartyId',
+        cellRenderer: ({
+          value,
+        }: VegaValueFormatterParams<LedgerEntry, 'toAccountPartyId'>) =>
+          truncateByChars(value || ''),
+      },
+      {
+        headerName: t('Account type'),
+        filter: SetFilter,
+        filterParams: {
+          set: AccountTypeMapping,
         },
-        {
-          headerName: t('Market'),
-          field: 'marketSender.tradableInstrument.instrument.code',
-          cellRenderer: ({
-            value,
-          }: VegaValueFormatterParams<
-            LedgerEntry,
-            'marketSender.tradableInstrument.instrument.code'
-          >) => value || '-',
+        field: 'toAccountType',
+        cellRenderer: ({
+          value,
+        }: VegaValueFormatterParams<LedgerEntry, 'toAccountType'>) =>
+          value ? AccountTypeMapping[value] : '-',
+      },
+      {
+        headerName: t('Market'),
+        field: 'marketReceiver.tradableInstrument.instrument.code',
+        cellRenderer: ({
+          value,
+        }: VegaValueFormatterParams<
+          LedgerEntry,
+          'marketReceiver.tradableInstrument.instrument.code'
+        >) => value || '-',
+      },
+      {
+        headerName: t('Transfer type'),
+        field: 'transferType',
+        tooltipField: 'transferType',
+        filter: SetFilter,
+        filterParams: {
+          set: TransferTypeMapping,
         },
-        {
-          headerName: t('Receiver'),
-          field: 'toAccountPartyId',
-          cellRenderer: ({
-            value,
-          }: VegaValueFormatterParams<LedgerEntry, 'toAccountPartyId'>) =>
-            truncateByChars(value || ''),
+        valueFormatter: ({
+          value,
+        }: VegaValueFormatterParams<LedgerEntry, 'transferType'>) =>
+          value ? TransferTypeMapping[value] : '',
+      },
+      {
+        headerName: t('Quantity'),
+        field: 'quantity',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<LedgerEntry, 'quantity'>) => {
+          const assetDecimalPlaces = data?.asset?.decimals || 0;
+          return value
+            ? addDecimalsFormatNumber(value, assetDecimalPlaces)
+            : '';
         },
-        {
-          headerName: t('Account type'),
-          filter: SetFilter,
-          filterParams: {
-            set: AccountTypeMapping,
-          },
-          field: 'toAccountType',
-          cellRenderer: ({
-            value,
-          }: VegaValueFormatterParams<LedgerEntry, 'toAccountType'>) =>
-            value ? AccountTypeMapping[value] : '-',
+      },
+      {
+        headerName: t('Asset'),
+        field: 'assetId',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<LedgerEntry, 'asset'>) =>
+          data?.asset?.symbol || '',
+      },
+      {
+        headerName: t('Sender account balance'),
+        field: 'fromAccountBalance',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<LedgerEntry, 'fromAccountBalance'>) => {
+          const assetDecimalPlaces = data?.asset?.decimals || 0;
+          return value
+            ? addDecimalsFormatNumber(value, assetDecimalPlaces)
+            : '';
         },
-        {
-          headerName: t('Market'),
-          field: 'marketReceiver.tradableInstrument.instrument.code',
-          cellRenderer: ({
-            value,
-          }: VegaValueFormatterParams<
-            LedgerEntry,
-            'marketReceiver.tradableInstrument.instrument.code'
-          >) => value || '-',
+      },
+      {
+        headerName: t('Receiver account balance'),
+        field: 'toAccountBalance',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<LedgerEntry, 'toAccountBalance'>) => {
+          const assetDecimalPlaces = data?.asset?.decimals || 0;
+          return value
+            ? addDecimalsFormatNumber(value, assetDecimalPlaces)
+            : '';
         },
-        {
-          headerName: t('Transfer type'),
-          field: 'transferType',
-          tooltipField: 'transferType',
-          filter: SetFilter,
-          filterParams: {
-            set: TransferTypeMapping,
-          },
-          valueFormatter: ({
-            value,
-          }: VegaValueFormatterParams<LedgerEntry, 'transferType'>) =>
-            value ? TransferTypeMapping[value] : '',
+      },
+      {
+        headerName: t('Vega time'),
+        field: 'vegaTime',
+        valueFormatter: ({
+          value,
+        }: VegaValueFormatterParams<LedgerEntry, 'vegaTime'>) =>
+          value ? getDateTimeFormat().format(fromNanoSeconds(value)) : '-',
+        filterParams: dateRangeFilterParams,
+        filter: DateRangeFilter,
+        flex: 1,
+      },
+    ],
+    []
+  );
+  return (
+    <AgGrid
+      style={{ width: '100%', height: '100%' }}
+      tooltipShowDelay={500}
+      defaultColDef={{
+        resizable: true,
+        sortable: true,
+        tooltipComponent: TransferTooltipCellComponent,
+        filterParams: {
+          ...dateRangeFilterParams,
+          buttons: ['reset'],
         },
-        {
-          headerName: t('Quantity'),
-          field: 'quantity',
-          valueFormatter: ({
-            value,
-            data,
-          }: VegaValueFormatterParams<LedgerEntry, 'quantity'>) => {
-            const assetDecimalPlaces = data?.asset?.decimals || 0;
-            return value
-              ? addDecimalsFormatNumber(value, assetDecimalPlaces)
-              : '';
-          },
-        },
-        {
-          headerName: t('Asset'),
-          field: 'assetId',
-          valueFormatter: ({
-            value,
-            data,
-          }: VegaValueFormatterParams<LedgerEntry, 'asset'>) =>
-            data?.asset?.symbol || '',
-        },
-        {
-          headerName: t('Sender account balance'),
-          field: 'fromAccountBalance',
-          valueFormatter: ({
-            value,
-            data,
-          }: VegaValueFormatterParams<LedgerEntry, 'fromAccountBalance'>) => {
-            const assetDecimalPlaces = data?.asset?.decimals || 0;
-            return value
-              ? addDecimalsFormatNumber(value, assetDecimalPlaces)
-              : '';
-          },
-        },
-        {
-          headerName: t('Receiver account balance'),
-          field: 'toAccountBalance',
-          valueFormatter: ({
-            value,
-            data,
-          }: VegaValueFormatterParams<LedgerEntry, 'toAccountBalance'>) => {
-            const assetDecimalPlaces = data?.asset?.decimals || 0;
-            return value
-              ? addDecimalsFormatNumber(value, assetDecimalPlaces)
-              : '';
-          },
-        },
-        {
-          headerName: t('Vega time'),
-          field: 'vegaTime',
-          valueFormatter: ({
-            value,
-          }: VegaValueFormatterParams<LedgerEntry, 'vegaTime'>) =>
-            value ? getDateTimeFormat().format(fromNanoSeconds(value)) : '-',
-          filterParams: dateRangeFilterParams,
-          filter: DateRangeFilter,
-          flex: 1,
-        },
-      ],
-      []
-    );
-    return (
-      <AgGrid
-        style={{ width: '100%', height: '100%' }}
-        ref={ref}
-        tooltipShowDelay={500}
-        defaultColDef={{
-          resizable: true,
-          sortable: true,
-          tooltipComponent: TransferTooltipCellComponent,
-          filterParams: {
-            ...dateRangeFilterParams,
-            buttons: ['reset'],
-          },
-        }}
-        columnDefs={columnDefs}
-        {...props}
-      />
-    );
-  }
-);
+      }}
+      columnDefs={columnDefs}
+      {...props}
+    />
+  );
+};

libs/market-depth/jest.config.ts

@@ -4,9 +4,25 @@ export default {
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      {
+        presets: ['@nx/react/babel'],
+        // required for pennant to work in jest, due to having untranspiled exports
+        plugins: [
+          [
+            '@babel/plugin-proposal-private-methods',
+            {
+              loose: true,
+            },
+          ],
+        ],
+      },
+    ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/market-depth',
   setupFilesAfterEnv: ['./src/setup-tests.ts'],
+  // dont ignore pennant from transpilation
+  transformIgnorePatterns: ['<rootDir>/node_modules/pennant'],
 };

libs/markets/src/lib/SuccessorMarket.graphql

@@ -34,5 +34,8 @@ query SuccessorMarket($marketId: ID!) {
         code
       }
     }
+    proposal {
+      id
+    }
   }
 }

libs/markets/src/lib/__generated__/SuccessorMarket.ts

@@ -27,7 +27,7 @@ export type SuccessorMarketQueryVariables = Types.Exact<{
 }>;
 
 
-export type SuccessorMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, state: Types.MarketState, tradingMode: Types.MarketTradingMode, positionDecimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } } } | null };
+export type SuccessorMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, state: Types.MarketState, tradingMode: Types.MarketTradingMode, positionDecimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } }, proposal?: { __typename?: 'Proposal', id?: string | null } | null } | null };
 
 
 export const SuccessorMarketIdDocument = gql`
@@ -153,6 +153,9 @@ export const SuccessorMarketDocument = gql`
         code
       }
     }
+    proposal {
+      id
+    }
   }
 }
     `;

libs/markets/src/lib/components/market-info/info-key-value-table.tsx

@@ -4,8 +4,10 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
+  Intent,
   KeyValueTable,
   KeyValueTableRow,
+  Lozenge,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import BigNumber from 'bignumber.js';
@@ -22,9 +24,11 @@ interface RowProps {
   unformatted?: boolean;
   assetSymbol?: string;
   noBorder?: boolean;
+  parentValue?: ReactNode;
+  hasParentData?: boolean;
 }
 
-const Row = ({
+export const Row = ({
   field,
   value,
   decimalPlaces,
@@ -32,7 +36,14 @@ const Row = ({
   unformatted,
   assetSymbol = '',
   noBorder = true,
+  parentValue,
+  hasParentData,
 }: RowProps) => {
+  // Note: we need both 'parentValue' and 'hasParentData' to do a conditional
+  // check to differentiate between when parentData itself is missing and when
+  // a specific parentValue is missing. These values are only used when we
+  // have successor market parent data.
+
   const className = 'text-sm';
 
   const getFormattedValue = (value: ReactNode) => {
@@ -55,6 +66,10 @@ const Row = ({
   const formattedValue = getFormattedValue(value);
 
   if (!formattedValue) return null;
+
+  const newValueInSuccessorMarket = hasParentData && value && !parentValue;
+  const valueDiffersFromParentMarket = parentValue && parentValue !== value;
+
   return (
     <KeyValueTableRow
       key={field}
@@ -63,10 +78,35 @@ const Row = ({
       dtClassName={className}
       ddClassName={className}
     >
-      <Tooltip description={tooltipMapping[field]} align="start">
-        <div tabIndex={-1}>{startCase(t(field))}</div>
-      </Tooltip>
-      <span style={{ wordBreak: 'break-word' }}>{formattedValue}</span>
+      <div className="flex items-center gap-3">
+        <Tooltip description={tooltipMapping[field]} align="start">
+          <div tabIndex={-1}>{startCase(t(field))}</div>
+        </Tooltip>
+
+        {valueDiffersFromParentMarket && (
+          <Lozenge className="py-0" variant={Intent.Primary}>
+            {t('Updated')}
+          </Lozenge>
+        )}
+
+        {newValueInSuccessorMarket && (
+          <Lozenge className="py-0" variant={Intent.Primary}>
+            {t('Added')}
+          </Lozenge>
+        )}
+      </div>
+      <div style={{ wordBreak: 'break-word' }}>
+        {valueDiffersFromParentMarket ? (
+          <div className="flex items-center gap-3">
+            <span className="line-through">
+              {getFormattedValue(parentValue)}
+            </span>
+            <span>{formattedValue}</span>
+          </div>
+        ) : (
+          formattedValue
+        )}
+      </div>
     </KeyValueTableRow>
   );
 };
@@ -79,6 +119,7 @@ export interface MarketInfoTableProps {
   children?: ReactNode;
   assetSymbol?: string;
   noBorder?: boolean;
+  parentData?: Record<string, ReactNode> | null | undefined;
 }
 
 export const MarketInfoTable = ({
@@ -89,25 +130,33 @@ export const MarketInfoTable = ({
   children,
   assetSymbol,
   noBorder,
+  parentData,
 }: MarketInfoTableProps) => {
   if (!data || typeof data !== 'object') {
     return null;
   }
+
+  const hasParentData = parentData !== undefined;
+
   return (
     <>
       <KeyValueTable>
-        {Object.entries(data).map(([key, value]) => (
-          <Row
-            key={key}
-            field={key}
-            value={value}
-            decimalPlaces={decimalPlaces}
-            assetSymbol={assetSymbol}
-            asPercentage={asPercentage}
-            unformatted={unformatted}
-            noBorder={noBorder}
-          />
-        ))}
+        <>
+          {Object.entries(data).map(([key, value]) => (
+            <Row
+              key={key}
+              field={key}
+              value={value}
+              decimalPlaces={decimalPlaces}
+              assetSymbol={assetSymbol}
+              asPercentage={asPercentage}
+              unformatted={unformatted}
+              noBorder={noBorder}
+              parentValue={parentData?.[key]}
+              hasParentData={hasParentData}
+            />
+          ))}
+        </>
       </KeyValueTable>
       <div className="flex flex-col gap-2">{children}</div>
     </>

libs/markets/src/lib/components/market-info/market-info-accordion.tsx

@@ -1,4 +1,8 @@
-import { TokenStaticLinks, useEnvironment } from '@vegaprotocol/environment';
+import {
+  FLAGS,
+  TokenStaticLinks,
+  useEnvironment,
+} from '@vegaprotocol/environment';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
@@ -34,6 +38,7 @@ import {
   RiskModelInfoPanel,
   RiskParametersInfoPanel,
   SettlementAssetInfoPanel,
+  SuccessionLineInfoPanel,
 } from './market-info-panels';
 import type { DataSourceDefinition } from '@vegaprotocol/types';
 import isEqual from 'lodash/isEqual';
@@ -291,6 +296,13 @@ export const MarketInfoAccordion = ({
                 </>
               }
             />
+            {FLAGS.SUCCESSOR_MARKETS && (
+              <AccordionItem
+                itemId="succession-line"
+                title={t('Succession line')}
+                content={<SuccessionLineInfoPanel market={market} />}
+              />
+            )}
           </Accordion>
         </div>
       )}

libs/markets/src/lib/components/market-info/market-info-panels.spec.tsx

@@ -1,9 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import {
   ConditionOperator,
   ConditionOperatorMapping,
 } from '@vegaprotocol/types';
-import { DataSourceProof } from './market-info-panels';
+import { DataSourceProof, SuccessionLineInfoPanel } from './market-info-panels';
+import { MockedProvider } from '@apollo/react-testing';
+import { SuccessorMarketIdsDocument } from '../../__generated__';
 
 jest.mock('../../hooks/use-oracle-markets', () => ({
   useOracleMarkets: () => [],
@@ -137,3 +139,93 @@ describe('DataSourceProof', () => {
     ).toBeInTheDocument();
   });
 });
+
+describe('SuccessionLineInfoPanel', () => {
+  const mocks = [
+    {
+      request: {
+        query: SuccessorMarketIdsDocument,
+      },
+      result: {
+        data: {
+          __typename: 'Query',
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: [
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'abc',
+                  successorMarketID: 'def',
+                  parentMarketID: null,
+                },
+              },
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'def',
+                  successorMarketID: 'ghi',
+                  parentMarketID: 'abc',
+                },
+              },
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'ghi',
+                  successorMarketID: null,
+                  parentMarketID: 'def',
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  ];
+
+  it.each([
+    ['abc', 1],
+    ['def', 2],
+    ['ghi', 3],
+  ])(
+    'renders succession line for %s (current position %d)',
+    async (id, number) => {
+      render(
+        <MockedProvider mocks={mocks}>
+          <SuccessionLineInfoPanel
+            market={{
+              id,
+            }}
+          />
+        </MockedProvider>
+      );
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('succession-line-item');
+        expect(items.length).toBe(3);
+        expect(
+          items[0].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('abc');
+        expect(
+          items[1].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('def');
+        expect(
+          items[2].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('ghi');
+
+        expect(
+          items[number - 1].querySelector('[data-testid="icon-bullet"]')
+        ).toBeInTheDocument();
+      });
+    }
+  );
+});

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -1,11 +1,18 @@
+import isEqual from 'lodash/isEqual';
 import type { ReactNode } from 'react';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { useMemo } from 'react';
 import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
 import { marketDataProvider } from '../../market-data-provider';
 import { totalFeesPercentage } from '../../market-utils';
-import { ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  ExternalLink,
+  Splash,
+  Tooltip,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import {
   addDecimalsFormatNumber,
   formatNumber,
@@ -23,17 +30,32 @@ import BigNumber from 'bignumber.js';
 import type { DataSourceDefinition, SignerKind } from '@vegaprotocol/types';
 import { ConditionOperatorMapping } from '@vegaprotocol/types';
 import { MarketTradingModeMapping } from '@vegaprotocol/types';
-import { FLAGS, useEnvironment } from '@vegaprotocol/environment';
+import {
+  DApp,
+  FLAGS,
+  TOKEN_PROPOSAL,
+  useEnvironment,
+  useLinks,
+} from '@vegaprotocol/environment';
 import type { Provider } from '../../oracle-schema';
 import { OracleBasicProfile } from '../../components/oracle-basic-profile';
 import { useOracleProofs } from '../../hooks';
 import { OracleDialog } from '../oracle-dialog/oracle-dialog';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import { useParentMarketIdQuery } from '../../__generated__';
+import {
+  useParentMarketIdQuery,
+  useSuccessorMarketIdsQuery,
+  useSuccessorMarketQuery,
+} from '../../__generated__';
 import { useSuccessorMarketProposalDetailsQuery } from '@vegaprotocol/proposals';
+import type { MarketTradingMode } from '@vegaprotocol/types';
+import type { Signer } from '@vegaprotocol/types';
+import classNames from 'classnames';
+import compact from 'lodash/compact';
 
 type MarketInfoProps = {
   market: MarketInfo;
+  parentMarket?: MarketInfo;
   children?: ReactNode;
 };
 
@@ -138,21 +160,43 @@ export const InsurancePoolInfoPanel = ({
   );
 };
 
-export const KeyDetailsInfoPanel = ({ market }: MarketInfoProps) => {
-  const { data: parentData } = useParentMarketIdQuery({
+export const KeyDetailsInfoPanel = ({
+  market,
+  parentMarket,
+}: MarketInfoProps) => {
+  const { data: parentMarketIdData } = useParentMarketIdQuery({
     variables: {
       marketId: market.id,
     },
     skip: !FLAGS.SUCCESSOR_MARKETS,
   });
 
-  const { data: successor } = useSuccessorMarketProposalDetailsQuery({
+  const { data: successorProposalDetails } =
+    useSuccessorMarketProposalDetailsQuery({
+      variables: {
+        proposalId: market.proposal?.id || '',
+      },
+      skip: !FLAGS.SUCCESSOR_MARKETS || !market.proposal?.id,
+    });
+
+  // The following queries are needed as the parent market could also have been a successor market.
+  // Note: the parent market is only passed to this component if the successor markets flag is enabled,
+  // so that check is not needed in the skip.
+  const { data: grandparentMarketIdData } = useParentMarketIdQuery({
     variables: {
-      proposalId: market.proposal?.id || '',
+      marketId: parentMarket?.id || '',
     },
-    skip: !FLAGS.SUCCESSOR_MARKETS || !market.proposal?.id,
+    skip: !parentMarket?.id,
   });
 
+  const { data: parentSuccessorProposalDetails } =
+    useSuccessorMarketProposalDetailsQuery({
+      variables: {
+        proposalId: parentMarket?.proposal?.id || '',
+      },
+      skip: !parentMarket?.proposal?.id,
+    });
+
   const assetDecimals =
     market.tradableInstrument.instrument.product.settlementAsset.decimals;
 
@@ -163,11 +207,12 @@ export const KeyDetailsInfoPanel = ({ market }: MarketInfoProps) => {
           ? {
               name: market.tradableInstrument.instrument.name,
               marketID: market.id,
-              parentMarketID: parentData?.market?.parentMarketID || '-',
+              parentMarketID: parentMarketIdData?.market?.parentMarketID || '-',
               insurancePoolFraction:
-                (successor?.proposal?.terms.change.__typename === 'NewMarket' &&
-                  successor.proposal.terms.change.successorConfiguration
-                    ?.insurancePoolFraction) ||
+                (successorProposalDetails?.proposal?.terms.change.__typename ===
+                  'NewMarket' &&
+                  successorProposalDetails.proposal.terms.change
+                    .successorConfiguration?.insurancePoolFraction) ||
                 '-',
               tradingMode:
                 market.tradingMode &&
@@ -187,11 +232,156 @@ export const KeyDetailsInfoPanel = ({ market }: MarketInfoProps) => {
               settlementAssetDecimalPlaces: assetDecimals,
             }
       }
+      parentData={
+        parentMarket && {
+          name: parentMarket?.tradableInstrument?.instrument?.name,
+          marketID: parentMarket?.id,
+          parentMarketID: grandparentMarketIdData?.market?.parentMarketID,
+          insurancePoolFraction:
+            parentSuccessorProposalDetails?.proposal?.terms.change
+              .__typename === 'NewMarket' &&
+            parentSuccessorProposalDetails.proposal.terms.change
+              .successorConfiguration?.insurancePoolFraction,
+          tradingMode:
+            parentMarket?.tradingMode &&
+            MarketTradingModeMapping[
+              parentMarket.tradingMode as MarketTradingMode
+            ],
+          marketDecimalPlaces: parentMarket?.decimalPlaces,
+          positionDecimalPlaces: parentMarket?.positionDecimalPlaces,
+          settlementAssetDecimalPlaces:
+            parentMarket?.tradableInstrument?.instrument?.product
+              ?.settlementAsset?.decimals,
+        }
+      }
     />
   );
 };
 
-export const InstrumentInfoPanel = ({ market }: MarketInfoProps) => (
+const SuccessionLineItem = ({
+  marketId,
+  isCurrent,
+}: {
+  marketId: string;
+  isCurrent?: boolean;
+}) => {
+  const { data } = useSuccessorMarketQuery({
+    variables: {
+      marketId,
+    },
+  });
+
+  const marketData = data?.market;
+  const governanceLink = useLinks(DApp.Token);
+  const proposalLink = marketData?.proposal?.id
+    ? governanceLink(TOKEN_PROPOSAL.replace(':id', marketData?.proposal?.id))
+    : undefined;
+
+  return (
+    <div
+      data-testid="succession-line-item"
+      className={classNames(
+        'rounded p-2 bg-vega-clight-700 dark:bg-vega-cdark-700',
+        'font-alpha',
+        'flex flex-col '
+      )}
+    >
+      <div className="flex justify-between">
+        <div>
+          {marketData ? (
+            proposalLink ? (
+              <ExternalLink href={proposalLink}>
+                {marketData.tradableInstrument.instrument.code}
+              </ExternalLink>
+            ) : (
+              marketData.tradableInstrument.instrument.code
+            )
+          ) : (
+            <span className="block w-20 h-4 mb-1 bg-vega-clight-500 dark:bg-vega-cdark-500 animate-pulse"></span>
+          )}
+        </div>
+        {isCurrent && (
+          <Tooltip description={t('This market')}>
+            <div className="text-vega-clight-200 dark:text-vega-cdark-200 cursor-help">
+              <VegaIcon name={VegaIconNames.BULLET} size={16} />
+            </div>
+          </Tooltip>
+        )}
+      </div>
+      <div className="text-xs">
+        {marketData ? (
+          marketData.tradableInstrument.instrument.name
+        ) : (
+          <span className="block w-28 h-4 bg-vega-clight-500 dark:bg-vega-cdark-500 animate-pulse"></span>
+        )}
+      </div>
+      <div
+        data-testid="succession-line-item-market-id"
+        className="text-xs truncate mt-1"
+      >
+        {marketId}
+      </div>
+    </div>
+  );
+};
+
+const SuccessionLink = () => (
+  <div className="text-center leading-none" aria-hidden>
+    <VegaIcon name={VegaIconNames.ARROW_DOWN} size={12} />
+  </div>
+);
+
+const buildSuccessionLine = (
+  all: {
+    id: string;
+    successorMarketID?: string | null | undefined;
+    parentMarketID?: string | null | undefined;
+  }[],
+  id: string
+) => {
+  let line = [id];
+  const find = (id: string, dir?: 'up' | 'down') => {
+    const item = all.find((a) => a.id === id);
+    const anc = dir === 'up' && item?.parentMarketID;
+    const des = dir === 'down' && item?.successorMarketID;
+    if (anc) {
+      line = [anc, ...line];
+      find(anc, 'up');
+    }
+    if (des) {
+      line = [...line, des];
+      find(des, 'down');
+    }
+  };
+  find(id, 'up');
+  find(id, 'down');
+  return line;
+};
+export const SuccessionLineInfoPanel = ({
+  market,
+}: {
+  market: Pick<MarketInfo, 'id'>;
+}) => {
+  const { data } = useSuccessorMarketIdsQuery();
+  const ids = compact(data?.marketsConnection?.edges.map((e) => e.node));
+  const line = buildSuccessionLine(ids, market.id);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {line.map((id, i) => (
+        <Fragment key={i}>
+          {i > 0 && <SuccessionLink />}
+          <SuccessionLineItem marketId={id} isCurrent={id === market.id} />
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+export const InstrumentInfoPanel = ({
+  market,
+  parentMarket,
+}: MarketInfoProps) => (
   <MarketInfoTable
     data={{
       marketName: market.tradableInstrument.instrument.name,
@@ -199,6 +389,16 @@ export const InstrumentInfoPanel = ({ market }: MarketInfoProps) => (
       productType: market.tradableInstrument.instrument.product.__typename,
       quoteName: market.tradableInstrument.instrument.product.quoteName,
     }}
+    parentData={
+      parentMarket && {
+        marketName: parentMarket?.tradableInstrument?.instrument?.name,
+        code: parentMarket?.tradableInstrument?.instrument?.code,
+        productType:
+          parentMarket?.tradableInstrument?.instrument?.product?.__typename,
+        quoteName:
+          parentMarket?.tradableInstrument?.instrument?.product?.quoteName,
+      }
+    }
   />
 );
 
@@ -211,6 +411,7 @@ export const SettlementAssetInfoPanel = ({ market }: MarketInfoProps) => {
     () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
     [market]
   );
+
   const { data: asset } = useAssetDataProvider(assetId ?? '');
   return asset ? (
     <>
@@ -233,54 +434,148 @@ export const SettlementAssetInfoPanel = ({ market }: MarketInfoProps) => {
   );
 };
 
-export const MetadataInfoPanel = ({ market }: MarketInfoProps) => (
+const getMarketMetadata = (market: MarketInfo) =>
+  market.tradableInstrument.instrument.metadata.tags
+    ?.map((tag) => {
+      const [key, value] = tag.split(':');
+      return { [key]: value };
+    })
+    .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+
+export const MetadataInfoPanel = ({
+  market,
+  parentMarket,
+}: MarketInfoProps) => (
   <MarketInfoTable
     data={{
       expiryDate: getMarketExpiryDateFormatted(
         market.tradableInstrument.instrument.metadata.tags
       ),
-      ...market.tradableInstrument.instrument.metadata.tags
-        ?.map((tag) => {
-          const [key, value] = tag.split(':');
-          return { [key]: value };
-        })
-        .reduce((acc, curr) => ({ ...acc, ...curr }), {}),
+      ...(getMarketMetadata(market) || {}),
     }}
+    parentData={
+      parentMarket && {
+        expiryDate: getMarketExpiryDateFormatted(
+          parentMarket.tradableInstrument.instrument.metadata.tags
+        ),
+        ...(getMarketMetadata(parentMarket) || {}),
+      }
+    }
   />
 );
 
-export const RiskModelInfoPanel = ({ market }: MarketInfoProps) => {
+export const RiskModelInfoPanel = ({
+  market,
+  parentMarket,
+}: MarketInfoProps) => {
   if (market.tradableInstrument.riskModel.__typename !== 'LogNormalRiskModel') {
     return null;
   }
+
   const { tau, riskAversionParameter } = market.tradableInstrument.riskModel;
-  return <MarketInfoTable data={{ tau, riskAversionParameter }} unformatted />;
+
+  let parentData;
+
+  if (
+    parentMarket?.tradableInstrument?.riskModel?.__typename ===
+    'LogNormalRiskModel'
+  ) {
+    const {
+      tau: parentTau,
+      riskAversionParameter: parentRiskAversionParameter,
+    } = market.tradableInstrument.riskModel;
+
+    parentData = {
+      tau: parentTau,
+      riskAversionParameter: parentRiskAversionParameter,
+    };
+  }
+
+  return (
+    <MarketInfoTable
+      data={{ tau, riskAversionParameter }}
+      parentData={parentData}
+      unformatted
+    />
+  );
 };
 
-export const RiskParametersInfoPanel = ({ market }: MarketInfoProps) => {
-  if (market.tradableInstrument.riskModel.__typename === 'LogNormalRiskModel') {
+export const RiskParametersInfoPanel = ({
+  market,
+  parentMarket,
+}: MarketInfoProps) => {
+  const marketType = market.tradableInstrument.riskModel.__typename;
+
+  let data, parentData;
+
+  if (marketType === 'LogNormalRiskModel') {
     const { r, sigma, mu } = market.tradableInstrument.riskModel.params;
-    return <MarketInfoTable data={{ r, sigma, mu }} unformatted />;
-  }
-  if (market.tradableInstrument.riskModel.__typename === 'SimpleRiskModel') {
+    data = { r, sigma, mu };
+
+    if (
+      parentMarket?.tradableInstrument?.riskModel.__typename ===
+      'LogNormalRiskModel'
+    ) {
+      const parentParams = parentMarket.tradableInstrument.riskModel.params;
+      parentData = {
+        r: parentParams.r,
+        sigma: parentParams.sigma,
+        mu: parentParams.mu,
+      };
+    }
+  } else if (marketType === 'SimpleRiskModel') {
     const { factorLong, factorShort } =
       market.tradableInstrument.riskModel.params;
-    return <MarketInfoTable data={{ factorLong, factorShort }} unformatted />;
+    data = { factorLong, factorShort };
+
+    if (
+      parentMarket?.tradableInstrument?.riskModel.__typename ===
+      'SimpleRiskModel'
+    ) {
+      const parentParams = parentMarket.tradableInstrument.riskModel.params;
+      parentData = {
+        factorLong: parentParams.factorLong,
+        factorShort: parentParams.factorShort,
+      };
+    }
   }
-  return null;
+
+  if (!data) return null;
+
+  return <MarketInfoTable data={data} parentData={parentData} unformatted />;
 };
 
-export const RiskFactorsInfoPanel = ({ market }: MarketInfoProps) => {
+export const RiskFactorsInfoPanel = ({
+  market,
+  parentMarket,
+}: MarketInfoProps) => {
   if (!market.riskFactors) {
     return null;
   }
+
   const { short, long } = market.riskFactors;
-  return <MarketInfoTable data={{ short, long }} unformatted />;
+
+  let parentData;
+
+  if (parentMarket?.riskFactors) {
+    const parentShort = parentMarket.riskFactors.short;
+    const parentLong = parentMarket.riskFactors.long;
+    parentData = { short: parentShort, long: parentLong };
+  }
+
+  return (
+    <MarketInfoTable
+      data={{ short, long }}
+      parentData={parentData}
+      unformatted
+    />
+  );
 };
 
 export const PriceMonitoringBoundsInfoPanel = ({
   market,
   triggerIndex,
+  parentMarket,
 }: MarketInfoProps & {
   triggerIndex: number;
 }) => {
@@ -288,11 +583,35 @@ export const PriceMonitoringBoundsInfoPanel = ({
     dataProvider: marketDataProvider,
     variables: { marketId: market.id },
   });
+
+  const { data: parentData } = useDataProvider({
+    dataProvider: marketDataProvider,
+    variables: { marketId: parentMarket?.id || '' },
+    skip:
+      !parentMarket ||
+      !parentMarket?.priceMonitoringSettings?.parameters?.triggers?.[
+        triggerIndex
+      ],
+  });
+
   const quoteUnit =
     market?.tradableInstrument.instrument.product?.quoteName || '';
+  const parentQuoteUnit =
+    parentMarket?.tradableInstrument.instrument.product?.quoteName || '';
+  const isParentQuoteUnitEqual = quoteUnit === parentQuoteUnit;
+
   const trigger =
     market.priceMonitoringSettings?.parameters?.triggers?.[triggerIndex];
+  const parentTrigger =
+    parentMarket?.priceMonitoringSettings?.parameters?.triggers?.[triggerIndex];
+  const isParentTriggerEqual = isEqual(trigger, parentTrigger);
+
   const bounds = data?.priceMonitoringBounds?.[triggerIndex];
+  const parentBounds = parentData?.priceMonitoringBounds?.[triggerIndex];
+
+  const shouldShowParentData =
+    isParentQuoteUnitEqual && isParentTriggerEqual && !!parentBounds;
+
   if (!trigger) {
     console.error(
       `Could not find data for trigger ${triggerIndex} (market id: ${market.id})`
@@ -319,6 +638,14 @@ export const PriceMonitoringBoundsInfoPanel = ({
             highestPrice: bounds.maxValidPrice,
             lowestPrice: bounds.minValidPrice,
           }}
+          parentData={
+            shouldShowParentData
+              ? {
+                  highestPrice: parentBounds.maxValidPrice,
+                  lowestPrice: parentBounds.minValidPrice,
+                }
+              : undefined
+          }
           decimalPlaces={market.decimalPlaces}
           assetSymbol={quoteUnit}
         />
@@ -334,18 +661,31 @@ export const PriceMonitoringBoundsInfoPanel = ({
 
 export const LiquidityMonitoringParametersInfoPanel = ({
   market,
-}: MarketInfoProps) => (
-  <MarketInfoTable
-    data={{
-      triggeringRatio: market.liquidityMonitoringParameters.triggeringRatio,
-      timeWindow:
-        market.liquidityMonitoringParameters.targetStakeParameters.timeWindow,
-      scalingFactor:
-        market.liquidityMonitoringParameters.targetStakeParameters
-          .scalingFactor,
-    }}
-  />
-);
+  parentMarket,
+}: MarketInfoProps) => {
+  const marketData = {
+    triggeringRatio: market.liquidityMonitoringParameters.triggeringRatio,
+    timeWindow:
+      market.liquidityMonitoringParameters.targetStakeParameters.timeWindow,
+    scalingFactor:
+      market.liquidityMonitoringParameters.targetStakeParameters.scalingFactor,
+  };
+
+  const parentMarketData = parentMarket
+    ? {
+        triggeringRatio:
+          parentMarket.liquidityMonitoringParameters.triggeringRatio,
+        timeWindow:
+          parentMarket.liquidityMonitoringParameters.targetStakeParameters
+            .timeWindow,
+        scalingFactor:
+          parentMarket.liquidityMonitoringParameters.targetStakeParameters
+            .scalingFactor,
+      }
+    : {};
+
+  return <MarketInfoTable data={marketData} parentData={parentMarketData} />;
+};
 
 export const LiquidityInfoPanel = ({ market, children }: MarketInfoProps) => {
   const assetDecimals =
@@ -372,16 +712,61 @@ export const LiquidityInfoPanel = ({ market, children }: MarketInfoProps) => {
   );
 };
 
-export const LiquidityPriceRangeInfoPanel = ({ market }: MarketInfoProps) => {
+export const LiquidityPriceRangeInfoPanel = ({
+  market,
+  parentMarket,
+}: MarketInfoProps) => {
   const quoteUnit =
     market?.tradableInstrument.instrument.product?.quoteName || '';
+  const parentQuoteUnit =
+    parentMarket?.tradableInstrument.instrument.product?.quoteName || '';
+
   const liquidityPriceRange = formatNumberPercentage(
     new BigNumber(market.lpPriceRange).times(100)
   );
+  const parentLiquidityPriceRange = parentMarket
+    ? formatNumberPercentage(
+        new BigNumber(parentMarket.lpPriceRange).times(100)
+      )
+    : null;
+
   const { data } = useDataProvider({
     dataProvider: marketDataProvider,
     variables: { marketId: market.id },
   });
+
+  const { data: parentMarketData } = useDataProvider({
+    dataProvider: marketDataProvider,
+    variables: { marketId: parentMarket?.id || '' },
+    skip: !parentMarket,
+  });
+
+  let parentData;
+
+  if (parentMarket && parentMarketData && quoteUnit === parentQuoteUnit) {
+    parentData = {
+      liquidityPriceRange: `${parentLiquidityPriceRange} of mid price`,
+      lowestPrice:
+        parentMarketData?.midPrice &&
+        `${addDecimalsFormatNumber(
+          new BigNumber(1)
+            .minus(parentMarket.lpPriceRange)
+            .times(parentMarketData.midPrice)
+            .toString(),
+          parentMarket.decimalPlaces
+        )} ${quoteUnit}`,
+      highestPrice:
+        parentMarketData?.midPrice &&
+        `${addDecimalsFormatNumber(
+          new BigNumber(1)
+            .plus(parentMarket.lpPriceRange)
+            .times(parentMarketData.midPrice)
+            .toString(),
+          parentMarket.decimalPlaces
+        )} ${quoteUnit}`,
+    };
+  }
+
   return (
     <>
       <p className="text-sm mb-2">
@@ -414,6 +799,7 @@ export const LiquidityPriceRangeInfoPanel = ({ market }: MarketInfoProps) => {
               market.decimalPlaces
             )} ${quoteUnit}`,
         }}
+        parentData={parentData}
       />
     </>
   );
@@ -422,8 +808,12 @@ export const LiquidityPriceRangeInfoPanel = ({ market }: MarketInfoProps) => {
 export const OracleInfoPanel = ({
   market,
   type,
+  parentMarket,
 }: MarketInfoProps & { type: 'settlementData' | 'termination' }) => {
+  // If this is a successor market, this component will only receive parent market
+  // data if the termination or settlement data is different from the parent.
   const product = market.tradableInstrument.instrument.product;
+  const parentProduct = parentMarket?.tradableInstrument?.instrument?.product;
   const { VEGA_EXPLORER_URL, ORACLE_PROOFS_URL } = useEnvironment();
   const { data } = useOracleProofs(ORACLE_PROOFS_URL);
 
@@ -432,12 +822,33 @@ export const OracleInfoPanel = ({
       ? product.dataSourceSpecForSettlementData.id
       : product.dataSourceSpecForTradingTermination.id;
 
+  const parentDataSourceSpecId =
+    type === 'settlementData'
+      ? parentProduct?.dataSourceSpecForSettlementData?.id
+      : parentProduct?.dataSourceSpecForTradingTermination?.id;
+
   const dataSourceSpec = (
     type === 'settlementData'
       ? product.dataSourceSpecForSettlementData.data
       : product.dataSourceSpecForTradingTermination.data
   ) as DataSourceDefinition;
 
+  const parentDataSourceSpec =
+    type === 'settlementData'
+      ? parentProduct?.dataSourceSpecForSettlementData?.data
+      : (parentProduct?.dataSourceSpecForTradingTermination
+          ?.data as DataSourceDefinition);
+
+  const isParentDataSourceSpecEqual =
+    parentDataSourceSpec !== undefined &&
+    dataSourceSpec === parentDataSourceSpec;
+  const isParentDataSourceSpecIdEqual =
+    parentDataSourceSpecId !== undefined &&
+    dataSourceSpecId === parentDataSourceSpecId;
+
+  // We'll only provide successor parent data (if it differs) to the
+  // DataSourceProof component. Having an old external link struck through
+  // is unlikely to be useful.
   return (
     <div className="flex flex-col gap-2">
       <DataSourceProof
@@ -446,7 +857,14 @@ export const OracleInfoPanel = ({
         providers={data}
         type={type}
         dataSourceSpecId={dataSourceSpecId}
+        parentData={
+          isParentDataSourceSpecEqual ? undefined : parentDataSourceSpec
+        }
+        parentDataSourceSpecId={
+          isParentDataSourceSpecIdEqual ? undefined : parentDataSourceSpecId
+        }
       />
+
       <ExternalLink
         data-testid="oracle-spec-links"
         href={`${VEGA_EXPLORER_URL}/oracles/${
@@ -468,14 +886,28 @@ export const DataSourceProof = ({
   providers,
   type,
   dataSourceSpecId,
+  parentData,
+  parentDataSourceSpecId,
 }: {
   data: DataSourceDefinition;
   providers: Provider[] | undefined;
   type: 'settlementData' | 'termination';
   dataSourceSpecId: string;
+  parentData?: DataSourceDefinition;
+  parentDataSourceSpecId?: string;
 }) => {
+  // If this is a successor market, we'll only pass parent data to child
+  // components for comparison if the data differs from the parent market.
   if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
     const signers = data.sourceType.sourceType.signers || [];
+    let parentSigners: Signer[];
+
+    if (
+      parentData &&
+      parentData.sourceType.__typename === 'DataSourceDefinitionExternal'
+    ) {
+      parentSigners = parentData.sourceType.sourceType?.signers || [];
+    }
 
     if (!providers?.length) {
       return <NoOracleProof type={type} />;
@@ -484,7 +916,14 @@ export const DataSourceProof = ({
     return (
       <div className="flex flex-col gap-2">
         {signers.map(({ signer }, i) => {
-          return (
+          const parentSigner = parentSigners?.find(
+            ({ signer: ParentSigner }) =>
+              ParentSigner.__typename === signer.__typename
+          )?.signer;
+
+          const isParentSignerEqual = isEqual(signer, parentSigner);
+
+          return isParentSignerEqual ? (
             <OracleLink
               key={i}
               providers={providers}
@@ -492,6 +931,16 @@ export const DataSourceProof = ({
               type={type}
               dataSourceSpecId={dataSourceSpecId}
             />
+          ) : (
+            <OracleLink
+              key={i}
+              providers={providers}
+              signer={signer}
+              type={type}
+              dataSourceSpecId={dataSourceSpecId}
+              parentSigner={parentSigner}
+              parentDataSourceSpecId={parentDataSourceSpecId}
+            />
           );
         })}
       </div>
@@ -525,18 +974,8 @@ export const DataSourceProof = ({
   return <div>{t('Invalid data source')}</div>;
 };
 
-const OracleLink = ({
-  providers,
-  signer,
-  type,
-  dataSourceSpecId,
-}: {
-  providers: Provider[];
-  signer: SignerKind;
-  type: 'settlementData' | 'termination';
-  dataSourceSpecId: string;
-}) => {
-  const signerProviders = providers.filter((p) => {
+const getSignerProviders = (signer: SignerKind, providers: Provider[]) =>
+  providers.filter((p) => {
     if (signer.__typename === 'PubKey') {
       if (
         p.oracle.type === 'public_key' &&
@@ -558,19 +997,62 @@ const OracleLink = ({
     return false;
   });
 
+const OracleLink = ({
+  providers,
+  signer,
+  type,
+  dataSourceSpecId,
+  parentSigner,
+  parentDataSourceSpecId,
+}: {
+  providers: Provider[];
+  signer: SignerKind;
+  type: 'settlementData' | 'termination';
+  dataSourceSpecId: string;
+  parentSigner?: SignerKind;
+  parentDataSourceSpecId?: string;
+}) => {
+  // If this is a successor market, the parent market data will only have been passed
+  // in if it differs from the current data.
+  const signerProviders = getSignerProviders(signer, providers);
+  const parentSignerProviders = parentSigner
+    ? getSignerProviders(parentSigner, providers)
+    : [];
+
   if (!signerProviders.length) {
     return <NoOracleProof type={type} />;
   }
 
   return (
     <div className="mt-2">
-      {signerProviders.map((provider) => (
-        <OracleProfile
-          key={dataSourceSpecId}
-          provider={provider}
-          dataSourceSpecId={dataSourceSpecId}
-        />
-      ))}
+      {signerProviders.map((provider) => {
+        // Making the assumption here that if the provider name is the same,
+        // that it is the same provider that the parent market used.
+        const parentProvider = parentSignerProviders.find(
+          (p) => p.name === provider.name
+        );
+
+        const isParentProviderEqual =
+          parentProvider !== undefined && isEqual(provider, parentProvider);
+
+        // We only want to pass the parent data to the child component if the
+        // data differs from the parent market.
+        return isParentProviderEqual ? (
+          <OracleProfile
+            key={dataSourceSpecId}
+            provider={provider}
+            dataSourceSpecId={dataSourceSpecId}
+          />
+        ) : (
+          <OracleProfile
+            key={dataSourceSpecId}
+            provider={provider}
+            dataSourceSpecId={dataSourceSpecId}
+            parentProvider={parentProvider}
+            parentDataSourceSpecId={parentDataSourceSpecId}
+          />
+        );
+      })}
     </div>
   );
 };
@@ -593,13 +1075,18 @@ const NoOracleProof = ({
 const OracleProfile = (props: {
   provider: Provider;
   dataSourceSpecId: string;
+  parentProvider?: Provider;
+  parentDataSourceSpecId?: string;
 }) => {
+  // If this is a successor market, the parent market data will only have been passed
+  // in if it differs from the current data.
   const [open, onChange] = useState(false);
   return (
     <div key={props.provider.name}>
       <OracleBasicProfile
         provider={props.provider}
         onClick={() => onChange(!open)}
+        parentProvider={props.parentProvider}
       />
       <OracleDialog {...props} open={open} onChange={onChange} />
     </div>

libs/markets/src/lib/components/markets-container/market-list-table.tsx

@@ -1,11 +1,9 @@
-import React, { forwardRef } from 'react';
 import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
 import {
   AgGridLazy as AgGrid,
   PriceFlashCell,
   MarketNameCell,
 } from '@vegaprotocol/datagrid';
-import type { AgGridReact } from 'ag-grid-react';
 import type { MarketMaybeWithData } from '../../markets-provider';
 import { OracleStatus } from './oracle-status';
 import { useColumnDefs } from './use-column-defs';
@@ -43,14 +41,15 @@ const defaultColDef = {
   filterParams: { buttons: ['reset'] },
   minWidth: 100,
 };
-
-export const MarketListTable = forwardRef<
-  AgGridReact,
-  TypedDataAgGrid<MarketMaybeWithData> & {
-    onMarketClick: (marketId: string, metaKey?: boolean) => void;
-    SuccessorMarketRenderer?: React.FC<{ value: string }>;
-  }
->(({ onMarketClick, SuccessorMarketRenderer, ...props }, ref) => {
+type Props = TypedDataAgGrid<MarketMaybeWithData> & {
+  onMarketClick: (marketId: string, metaKey?: boolean) => void;
+  SuccessorMarketRenderer?: React.FC<{ value: string }>;
+};
+export const MarketListTable = ({
+  onMarketClick,
+  SuccessorMarketRenderer,
+  ...props
+}: Props) => {
   const columnDefs = useColumnDefs({ onMarketClick });
   const components = {
     PriceFlashCell,
@@ -61,7 +60,6 @@ export const MarketListTable = forwardRef<
     <AgGrid
       style={{ width: '100%', height: '100%' }}
       getRowId={getRowId}
-      ref={ref}
       defaultColDef={defaultColDef}
       columnDefs={columnDefs}
       suppressCellFocus
@@ -69,6 +67,6 @@ export const MarketListTable = forwardRef<
       {...props}
     />
   );
-});
+};
 
 export default MarketListTable;

libs/markets/src/lib/components/markets-container/markets-container.tsx

@@ -1,6 +1,5 @@
 import type { MouseEvent } from 'react';
-import React, { useEffect, useRef } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
+import React, { useEffect } from 'react';
 import type { CellClickedEvent } from 'ag-grid-community';
 import { t } from '@vegaprotocol/i18n';
 import { MarketListTable } from './market-list-table';
@@ -18,8 +17,6 @@ export const MarketsContainer = ({
   onSelect,
   SuccessorMarketRenderer,
 }: MarketsContainerProps) => {
-  const gridRef = useRef<AgGridReact | null>(null);
-
   const { data, error, reload } = useDataProvider({
     dataProvider,
     variables: undefined,
@@ -37,7 +34,6 @@ export const MarketsContainer = ({
   return (
     <div className="h-full relative">
       <MarketListTable
-        ref={gridRef}
         rowData={data}
         onCellClicked={(cellEvent: CellClickedEvent) => {
           const { data, column, event } = cellEvent;

libs/markets/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx

@@ -5,6 +5,7 @@ import {
   ExternalLink,
   Icon,
   Intent,
+  Lozenge,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
@@ -59,10 +60,12 @@ export const OracleBasicProfile = ({
   provider,
   onClick,
   markets: oracleMarkets,
+  parentProvider,
 }: {
   provider: Provider;
   markets?: OracleMarketSpecFieldsFragment[] | undefined;
   onClick?: (value?: boolean) => void;
+  parentProvider?: Provider;
 }) => {
   const { icon, message, intent } = getVerifiedStatusIcon(provider);
 
@@ -78,8 +81,14 @@ export const OracleBasicProfile = ({
       icon: getLinkIcon(proof.type),
     }));
 
+  // If this is a successor market and there's a different parent provider,
+  // we'll just show that there's been a change, rather than add old data
+  // in alongside the new provider.
   return (
     <>
+      {parentProvider && (
+        <Lozenge variant={Intent.Primary}>{t('Updated')}</Lozenge>
+      )}
       <span className="flex gap-1">
         {provider.url && (
           <span className="flex align-items-bottom text-md gap-1">

libs/markets/src/lib/components/oracle-dialog/oracle-dialog.tsx

@@ -11,16 +11,27 @@ export const OracleDialog = ({
   dataSourceSpecId,
   open,
   onChange,
+  parentProvider,
 }: {
   dataSourceSpecId: string;
   provider: Provider;
   open: boolean;
   onChange?: (isOpen: boolean) => void;
+  parentProvider?: Provider;
 }) => {
+  // If this is a successor market, the parent market data will only have been passed
+  // in if it differs from the current data. We'll pass this on to the title component
+  // to show a change, but the full profile showing changes is unwieldy - it's enough
+  // to know from the title that the oracle has changed.
   const oracleMarkets = useOracleMarkets(provider);
   return (
     <Dialog
-      title={<OracleProfileTitle provider={provider} />}
+      title={
+        <OracleProfileTitle
+          provider={provider}
+          parentProvider={parentProvider}
+        />
+      }
       aria-labelledby="oracle-proof-dialog"
       open={open}
       onChange={onChange}

libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx

@@ -6,6 +6,7 @@ import {
   ExternalLink,
   Icon,
   Intent,
+  Lozenge,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
@@ -18,15 +19,30 @@ import type { OracleMarketSpecFieldsFragment } from '../../__generated__/OracleM
 import ReactMarkdown from 'react-markdown';
 import { useState } from 'react';
 
-export const OracleProfileTitle = ({ provider }: { provider: Provider }) => {
+export const OracleProfileTitle = ({
+  provider,
+  parentProvider,
+}: {
+  provider: Provider;
+  parentProvider?: Provider;
+}) => {
+  // If this is a successor market, the parent provider will only have been passed
+  // in if it differs from the current provider. If it is different, we'll just
+  // show the change in name, not icons and proofs.
   const { icon, intent } = getVerifiedStatusIcon(provider);
   const verifiedProofs = provider.proofs.filter(
     (proof) => proof.available === true
   );
   return (
     <span className="flex gap-1">
+      {parentProvider && (
+        <Lozenge variant={Intent.Primary}>{t('Updated')}</Lozenge>
+      )}
       {provider.url && (
         <span>
+          {parentProvider && parentProvider.name && (
+            <span className="line-through">{parentProvider.name}</span>
+          )}
           <span className="pr-1">{provider.name}</span>
           <span className="dark:text-vega-light-300 text-vega-dark-300">
             ({verifiedProofs.length})

libs/orders/src/lib/components/order-actions-dropdown/index.ts

@@ -1 +0,0 @@
-export * from './order-actions-dropdown';

libs/orders/src/lib/components/order-actions-dropdown/order-actions-dropdown.tsx

@@ -1,13 +0,0 @@
-import {
-  ActionsDropdown,
-  TradingDropdownCopyItem,
-} from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
-
-export const OrderActionsDropdown = ({ id }: { id: string }) => {
-  return (
-    <ActionsDropdown data-testid="order-actions-content">
-      <TradingDropdownCopyItem value={id} text={t('Copy order ID')} />
-    </ActionsDropdown>
-  );
-};

libs/orders/src/lib/components/order-data-provider/Orders.graphql

@@ -150,3 +150,9 @@ query StopOrders($partyId: ID!) {
     }
   }
 }
+
+query StopOrderById($stopOrderId: ID!) {
+  stopOrder(id: $stopOrderId) {
+    ...StopOrderFields
+  }
+}

libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts

@@ -32,7 +32,7 @@ export type OrdersUpdateSubscriptionVariables = Types.Exact<{
 
 export type OrdersUpdateSubscription = { __typename?: 'Subscription', orders?: Array<{ __typename?: 'OrderUpdate', id: string, marketId: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, liquidityProvisionId?: string | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null }> | null };
 
-export type OrderSubmissionFieldsFragment = { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null};
+export type OrderSubmissionFieldsFragment = { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null };
 
 export type StopOrderFieldsFragment = { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger?: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string } | null, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } };
 
@@ -43,6 +43,13 @@ export type StopOrdersQueryVariables = Types.Exact<{
 
 export type StopOrdersQuery = { __typename?: 'Query', stopOrders?: { __typename?: 'StopOrderConnection', edges?: Array<{ __typename?: 'StopOrderEdge', node?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger?: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string } | null, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null }> | null } | null };
 
+export type StopOrderByIdQueryVariables = Types.Exact<{
+  stopOrderId: Types.Scalars['ID'];
+}>;
+
+
+export type StopOrderByIdQuery = { __typename?: 'Query', stopOrder?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger?: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string } | null, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null };
+
 export const OrderFieldsFragmentDoc = gql`
     fragment OrderFields on Order {
   id
@@ -309,4 +316,39 @@ export function useStopOrdersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions
         }
 export type StopOrdersQueryHookResult = ReturnType<typeof useStopOrdersQuery>;
 export type StopOrdersLazyQueryHookResult = ReturnType<typeof useStopOrdersLazyQuery>;
-export type StopOrdersQueryResult = Apollo.QueryResult<StopOrdersQuery, StopOrdersQueryVariables>;
+export type StopOrdersQueryResult = Apollo.QueryResult<StopOrdersQuery, StopOrdersQueryVariables>;
+export const StopOrderByIdDocument = gql`
+    query StopOrderById($stopOrderId: ID!) {
+  stopOrder(id: $stopOrderId) {
+    ...StopOrderFields
+  }
+}
+    ${StopOrderFieldsFragmentDoc}`;
+
+/**
+ * __useStopOrderByIdQuery__
+ *
+ * To run a query within a React component, call `useStopOrderByIdQuery` and pass it any options that fit your needs.
+ * When your component renders, `useStopOrderByIdQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useStopOrderByIdQuery({
+ *   variables: {
+ *      stopOrderId: // value for 'stopOrderId'
+ *   },
+ * });
+ */
+export function useStopOrderByIdQuery(baseOptions: Apollo.QueryHookOptions<StopOrderByIdQuery, StopOrderByIdQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<StopOrderByIdQuery, StopOrderByIdQueryVariables>(StopOrderByIdDocument, options);
+      }
+export function useStopOrderByIdLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<StopOrderByIdQuery, StopOrderByIdQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<StopOrderByIdQuery, StopOrderByIdQueryVariables>(StopOrderByIdDocument, options);
+        }
+export type StopOrderByIdQueryHookResult = ReturnType<typeof useStopOrderByIdQuery>;
+export type StopOrderByIdLazyQueryHookResult = ReturnType<typeof useStopOrderByIdLazyQuery>;
+export type StopOrderByIdQueryResult = Apollo.QueryResult<StopOrderByIdQuery, StopOrderByIdQueryVariables>;

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -14,6 +14,7 @@ import {
 import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
 import { OrderEditDialog } from '../order-list/order-edit-dialog';
 import type { Order } from '../order-data-provider';
+import { OrderViewDialog } from '../order-list/order-view-dialog';
 
 export enum Filter {
   'Open' = 'Open',
@@ -42,6 +43,7 @@ export const OrderListManager = ({
 }: OrderListManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [editOrder, setEditOrder] = useState<Order | null>(null);
+  const [viewOrder, setViewOrder] = useState<Order | null>(null);
   const create = useVegaTransactionStore((state) => state.create);
   const hasAmendableOrder = useHasAmendableOrder(marketId);
   const variables =
@@ -89,6 +91,7 @@ export const OrderListManager = ({
           filter={filter}
           onCancel={cancel}
           onEdit={setEditOrder}
+          onView={setViewOrder}
           onMarketClick={onMarketClick}
           onOrderTypeClick={onOrderTypeClick}
           isReadOnly={isReadOnly}
@@ -134,6 +137,14 @@ export const OrderListManager = ({
           }}
         />
       )}
+      {viewOrder && (
+        <OrderViewDialog
+          isOpen={Boolean(viewOrder)}
+          order={viewOrder}
+          onChange={() => setViewOrder(null)}
+          onMarketClick={onMarketClick}
+        />
+      )}
     </>
   );
 };

libs/orders/src/lib/components/order-list/order-list.spec.tsx

@@ -27,6 +27,7 @@ const defaultProps: OrderListTableProps = {
   rowData: [],
   onEdit: jest.fn(),
   onCancel: jest.fn(),
+  onView: jest.fn(),
   isReadOnly: false,
 };
 
@@ -113,9 +114,11 @@ describe('OrderListTable', () => {
   it('should apply correct formatting applied for an iceberg order', async () => {
     const icebergOrder = {
       ...limitOrder,
+      size: '100',
+      remaining: '50',
       icebergOrder: {
         __typename: 'IcebergOrder',
-        minimumVisibleSize: '100',
+        minimumVisibleSize: '1',
         peakSize: '50',
         reservedRemaining: '50',
       } as OrderFieldsFragment['icebergOrder'],
@@ -126,8 +129,8 @@ describe('OrderListTable', () => {
     const cells = screen.getAllByRole('gridcell');
     const expectedValues: string[] = [
       icebergOrder.market?.tradableInstrument.instrument.code || '',
-      '0.05',
-      '0.10',
+      '0.00',
+      '+1.00',
       Schema.OrderTypeMapping[
         icebergOrder.type || Schema.OrderType.TYPE_LIMIT
       ] + ' (Iceberg)',

libs/orders/src/lib/components/order-list/order-list.stories.tsx

@@ -22,6 +22,9 @@ const Template: Story = (args) => {
         onEdit={() => {
           return;
         }}
+        onView={() => {
+          return;
+        }}
         isReadOnly={false}
       />
     </div>
@@ -49,6 +52,9 @@ const Template2: Story = (args) => {
           rowData={args.data}
           onCancel={cancel}
           onEdit={setEditOrder}
+          onView={() => {
+            return;
+          }}
           isReadOnly={false}
         />
       </div>

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -6,7 +6,14 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import {
+  ActionsDropdown,
+  ButtonLink,
+  TradingDropdownCopyItem,
+  DropdownMenuItem,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import type { ForwardedRef } from 'react';
 import { memo, forwardRef, useMemo } from 'react';
 import {
@@ -27,7 +34,6 @@ import type {
 } from '@vegaprotocol/datagrid';
 import type { AgGridReact } from 'ag-grid-react';
 import type { Order } from '../order-data-provider';
-import { OrderActionsDropdown } from '../order-actions-dropdown';
 import { Filter } from '../order-list-manager';
 import type { ColDef } from 'ag-grid-community';
 
@@ -35,6 +41,7 @@ export type OrderListTableProps = TypedDataAgGrid<Order> & {
   marketId?: string;
   onCancel: (order: Order) => void;
   onEdit: (order: Order) => void;
+  onView: (order: Order) => void;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
   filter?: Filter;
@@ -46,7 +53,15 @@ export const OrderListTable = memo<
 >(
   forwardRef<AgGridReact, OrderListTableProps>(
     (
-      { onCancel, onEdit, onMarketClick, onOrderTypeClick, filter, ...props },
+      {
+        onCancel,
+        onEdit,
+        onView,
+        onMarketClick,
+        onOrderTypeClick,
+        filter,
+        ...props
+      },
       ref
     ) => {
       const showAllActions = props.isReadOnly
@@ -71,21 +86,13 @@ export const OrderListTable = memo<
             valueGetter: ({ data }: VegaValueGetterParams<Order>) => {
               if (data?.icebergOrder) {
                 return data?.size && data.market
-                  ? toBigNum(
-                      (
-                        BigInt(data.size) -
-                        BigInt(data.remaining) -
-                        BigInt(data.icebergOrder.reservedRemaining)
-                      ).toString(),
-                      data.market.positionDecimalPlaces ?? 0
-                    ).toNumber()
+                  ? BigInt(data.size) -
+                      BigInt(data.remaining) -
+                      BigInt(data.icebergOrder.reservedRemaining)
                   : undefined;
               }
               return data?.size && data.market
-                ? toBigNum(
-                    (BigInt(data.size) - BigInt(data.remaining)).toString(),
-                    data.market.positionDecimalPlaces ?? 0
-                  ).toNumber()
+                ? BigInt(data.size) - BigInt(data.remaining)
                 : undefined;
             },
             valueFormatter: ({
@@ -99,8 +106,8 @@ export const OrderListTable = memo<
                 return '-';
               }
               return addDecimalsFormatNumber(
-                (BigInt(data.size) - BigInt(data.remaining)).toString(),
-                data.market.positionDecimalPlaces
+                value,
+                data.market.positionDecimalPlaces ?? 0
               );
             },
             minWidth: 50,
@@ -295,7 +302,20 @@ export const OrderListTable = memo<
                       </ButtonLink>
                     </>
                   )}
-                  <OrderActionsDropdown id={data?.id} />
+                  <ActionsDropdown data-testid="market-actions-content">
+                    <TradingDropdownCopyItem
+                      value={data.id}
+                      text={t('Copy order ID')}
+                    />
+                    <DropdownMenuItem
+                      key={'view-order'}
+                      data-testid="view-order"
+                      onClick={() => onView(data)}
+                    >
+                      <VegaIcon name={VegaIconNames.INFO} size={16} />
+                      {t('View order details')}
+                    </DropdownMenuItem>
+                  </ActionsDropdown>
                 </div>
               );
             },
@@ -305,6 +325,7 @@ export const OrderListTable = memo<
           filter,
           onCancel,
           onEdit,
+          onView,
           onMarketClick,
           onOrderTypeClick,
           props.isReadOnly,