fix: remove hover state from disabled view as button

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

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

apps/explorer/.env.capsule

@@ -1,4 +1,6 @@
 # App configuration variables
+NX_TENDERMINT_URL=http://localhost:26617
+NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 NX_VEGA_ENV=CUSTOM
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
@@ -6,6 +8,3 @@ NX_VEGA_EXPLORER_URL=/
 
 # App flags
 NX_EXPLORER_TXS_LIST=0
-
-NX_TENDERMINT_URL=http://localhost:26617
-NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket

apps/explorer/.env.devnet

@@ -1,4 +1,6 @@
 # App configuration variables
+NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
 NX_VEGA_ENV=DEVNET
 NX_BLOCK_EXPLORER=https://be.devnet1.vega.xyz/rest
@@ -8,6 +10,3 @@ NX_VEGA_URL=https://api.devnet1.vega.xyz/graphql
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_EXPLORER_URL=/
-
-NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket

apps/explorer/.env.mainnet

@@ -1,4 +1,6 @@
 # App configuration variables
+NX_TENDERMINT_URL=https://be.vega.community
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 NX_SENTRY_DSN=https://b3a56b03eda842faad731f3ea9dfd1bc@o286262.ingest.sentry.io/6242427
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_URL=https://api.vega.community/graphql
@@ -9,6 +11,3 @@ NX_VEGA_GOVERNANCE_URL=https://governance.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz/
 NX_VEGA_CONSOLE_URL=https://console.vega.xyz
-
-NX_TENDERMINT_URL=https://be.vega.community
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket

apps/explorer/.env.mainnet-mirror

@@ -1,4 +1,6 @@
 # App configuration variables
+NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
 NX_VEGA_URL=https://api.mainnet-mirror.vega.rocks/graphql
@@ -8,7 +10,4 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.mainnet-mirror.vega.rocks
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_EXPLORER_URL=https://explorer.mainnet-mirror.vega.rocks/
-NX_VEGA_CONSOLE_URL=https://console.mainnet-mirror.vega.rocks
-
-NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
+NX_VEGA_CONSOLE_URL=https://console.mainnet-mirror.vega.rocks

apps/explorer/.env.testnet

@@ -1,5 +1,7 @@
 # App configuration variables
+NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
 NX_VEGA_ENV=TESTNET
 NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
@@ -9,6 +11,3 @@ NX_VEGA_GOVERNANCE_URL=https://governance.fairground.wtf
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
-
-NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket

apps/explorer/.env.validators-testnet

@@ -7,10 +7,9 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 
+NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.rocks/rest
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket
 NX_VEGA_GOVERNANCE_URL=https://governance.validators-testnet.vega.rocks
 NX_VEGA_EXPLORER_URL=https://explorer.validators-testnet.vega.rocks/
 NX_VEGA_CONSOLE_URL=https://trading.validators-testnet.vega.rocks/
-
-NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket

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

@@ -23,7 +23,7 @@ export const Footer = () => {
   );
 
   return (
-    <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">
+    <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">
       <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,12 +43,9 @@ export const Footer = () => {
           </div>
         )}
 
-        <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)}
-          >
+        <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)}>
             {t('Change')}
           </Link>
         </div>
@@ -62,10 +59,7 @@ 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 underline-offset-4"
-        >
+        <RouteLink to={`/${Routes.DISCLAIMER}`} className="underline">
           Disclaimer
         </RouteLink>
       </div>

apps/explorer/src/app/components/markets/market-details.tsx

@@ -1,9 +1,6 @@
 import { t } from '@vegaprotocol/i18n';
 import type { MarketInfoWithData } from '@vegaprotocol/markets';
-import {
-  PriceMonitoringBoundsInfoPanel,
-  SuccessionLineInfoPanel,
-} from '@vegaprotocol/markets';
+import { PriceMonitoringBoundsInfoPanel } from '@vegaprotocol/markets';
 import {
   LiquidityInfoPanel,
   LiquidityMonitoringParametersInfoPanel,
@@ -106,8 +103,6 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
           <OracleInfoPanel market={market} type="settlementData" />
         </>
       )}
-      <h2 className={`${headerClassName} mb-4`}>{t('Succession line')}</h2>
-      <SuccessionLineInfoPanel market={market} />
     </div>
   );
 };

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

@@ -10,8 +10,6 @@ import Hash from '../../links/hash';
 import { t } from '@vegaprotocol/i18n';
 import { ProposalSignatureBundleNewAsset } from './proposal/signature-bundle-new';
 import { ProposalSignatureBundleUpdateAsset } from './proposal/signature-bundle-update';
-import { MarketLink } from '../../links';
-import { formatNumber } from '@vegaprotocol/utils';
 
 export type Proposal = components['schemas']['v1ProposalSubmission'];
 export type ProposalTerms = components['schemas']['vegaProposalTerms'];
@@ -55,11 +53,7 @@ export function proposalTypeLabel(terms?: ProposalTerms): string {
   } else if (has(terms, 'updateAsset')) {
     return t('Update asset proposal');
   } else if (has(terms, 'newMarket')) {
-    if (terms?.newMarket?.changes?.successor) {
-      return t('Successor market proposal');
-    } else {
-      return t('New market proposal');
-    }
+    return t('New market proposal');
   } else if (has(terms, 'updateMarket')) {
     return t('Update market proposal');
   } else if (has(terms, 'updateNetworkParameter')) {
@@ -91,13 +85,6 @@ export const TxProposal = ({ txData, pubKey, blockData }: TxProposalProps) => {
   }
 
   const tx = proposal.terms?.newAsset || proposal.terms?.updateAsset;
-  const isSuccessorMarketProposal =
-    proposal?.terms?.newMarket?.changes?.successor;
-  const parentMarketId =
-    isSuccessorMarketProposal &&
-    proposal?.terms.newMarket?.changes?.successor?.parentMarketId;
-  const insurancePoolFraction =
-    proposal?.terms?.newMarket?.changes?.successor?.insurancePoolFraction;
 
   // This component is not rendered if no bundle is required
   const SignatureBundleComponent = proposal.terms?.newAsset
@@ -124,30 +111,6 @@ export const TxProposal = ({ txData, pubKey, blockData }: TxProposalProps) => {
             <Hash text={deterministicId} />
           </TableCell>
         </TableRow>
-        {isSuccessorMarketProposal ? (
-          <>
-            {parentMarketId ? (
-              <TableRow modifier="bordered">
-                <TableCell>{t('Previous market')}</TableCell>
-                <TableCell>
-                  <MarketLink
-                    id={
-                      proposal.terms?.newMarket.changes.successor.parentMarketId
-                    }
-                  />
-                </TableCell>
-              </TableRow>
-            ) : null}
-            {insurancePoolFraction ? (
-              <TableRow modifier="bordered">
-                <TableCell>{t('Insurance pool fraction')}</TableCell>
-                <TableCell>
-                  {formatNumber(Number(insurancePoolFraction) * 100, 0)}%
-                </TableCell>
-              </TableRow>
-            ) : null}
-          </>
-        ) : null}
       </TableWithTbody>
       <ProposalSummary
         id={deterministicId}

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

@@ -78,11 +78,7 @@ export function getLabelForProposal(
   } else if (proposal.terms?.updateAsset) {
     return t('Proposal: Update asset');
   } else if (proposal.terms?.newMarket) {
-    if (proposal.terms?.newMarket.changes?.successor) {
-      return t('Proposal: Successor market');
-    } else {
-      return t('Proposal: New market');
-    }
+    return t('Proposal: New market');
   } else if (proposal.terms?.updateMarket) {
     return t('Proposal: Update market');
   } else if (proposal.terms?.updateNetworkParameter) {

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

@@ -22,11 +22,6 @@ import { Footer } from '../components/footer/footer';
 import { Header } from '../components/header';
 import { Routes } from './route-names';
 import { useExplorerNodeNamesLazyQuery } from './validators/__generated__/NodeNames';
-import {
-  ProtocolUpgradeCountdownMode,
-  ProtocolUpgradeInProgressNotification,
-  ProtocolUpgradeProposalNotification,
-} from '@vegaprotocol/proposals';
 
 const DialogsContainer = () => {
   const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
@@ -67,10 +62,6 @@ export const Layout = () => {
             />
           )}
           <Header />
-          <ProtocolUpgradeProposalNotification
-            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
-          />
-          <ProtocolUpgradeInProgressNotification />
         </div>
         <div className={fixedWidthClasses}>
           <main className="p-4">

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

@@ -730,7 +730,6 @@ context(
         .getByTestId('key-value-table-row')
         .contains(heading)
         .parent()
-        .parent()
         .siblings();
     }
   }

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

@@ -25,9 +25,6 @@ import {
   vegaWalletSetSpecifiedApprovalAmount,
   vegaWalletTeardown,
 } from '../../support/wallet-functions';
-import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
-
 const stakeValidatorListTotalStake = 'total-stake';
 const stakeValidatorListTotalShare = 'total-stake-share';
 const stakeValidatorListStakePercentage = 'stake-percentage';
@@ -58,10 +55,6 @@ context(
   function () {
     // 1002-STKE-002, 1002-STKE-032
     before('visit staking tab and connect vega wallet', function () {
-      cy.mockGQL((req) => {
-        aliasGQLQuery(req, 'ChainId', chainIdQuery());
-        aliasGQLQuery(req, 'Statistics', statisticsQuery());
-      });
       cy.visit('/');
       ethereumWalletConnect();
       cy.connectVegaWallet();
@@ -72,10 +65,6 @@ context(
       beforeEach(
         'teardown wallet & drill into a specific validator',
         function () {
-          cy.mockGQL((req) => {
-            aliasGQLQuery(req, 'ChainId', chainIdQuery());
-            aliasGQLQuery(req, 'Statistics', statisticsQuery());
-          });
           cy.clearLocalStorage();
           turnTelemetryOff();
           // Go to homepage to allow wallet teardown without epoch timer refreshing page

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

@@ -6,8 +6,6 @@ import {
 } from '../../support/common.functions';
 import { ethereumWalletConnect } from '../../support/wallet-eth.functions';
 import { depositAsset } from '../../support/wallet-functions';
-import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
 
 const withdraw = 'withdraw';
 const withdrawalForm = 'withdraw-form';
@@ -44,20 +42,12 @@ context(
   { tags: '@slow' },
   function () {
     before('visit withdrawals and connect vega wallet', function () {
-      cy.mockGQL((req) => {
-        aliasGQLQuery(req, 'ChainId', chainIdQuery());
-        aliasGQLQuery(req, 'Statistics', statisticsQuery());
-      });
       cy.visit('/');
       ethereumWalletConnect();
       depositAsset(usdcEthAddress, '1000', 5);
     });
 
     beforeEach('Navigate to withdrawal page', function () {
-      cy.mockGQL((req) => {
-        aliasGQLQuery(req, 'ChainId', chainIdQuery());
-        aliasGQLQuery(req, 'Statistics', statisticsQuery());
-      });
       cy.clearLocalStorage();
       turnTelemetryOff();
       cy.reload();

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

@@ -11,7 +11,6 @@ import {
   waitForBeginningOfEpoch,
 } from '../../support/staking.functions';
 import { previousEpochData } from '../../fixtures/mocks/previous-epoch';
-import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
 
 const guideLink = 'staking-guide-link';
 const validatorTitle = 'validator-node-title';
@@ -34,22 +33,11 @@ const overstakedPenaltyToolTip = 'overstaked-penalty-tooltip';
 const multisigPenaltyToolTip = 'multisig-error-tooltip';
 const epochCountDown = 'epoch-countdown';
 const stakeNumberRegex = /^\d{1,3}(,\d{3})*(\.\d+)?$/;
-const txTimeout = Cypress.env('txTimeout');
 
 context('Validators Page - verify elements on page', function () {
-  before('navigate to validators page', () => {
-    cy.mockGQL((req) => {
-      aliasGQLQuery(req, 'ChainId', chainIdQuery());
-      aliasGQLQuery(req, 'Statistics', statisticsQuery());
-    });
+  before('navigate to validators page', function () {
     cy.visit('/validators');
   });
-  beforeEach(() => {
-    cy.mockGQL((req) => {
-      aliasGQLQuery(req, 'ChainId', chainIdQuery());
-      aliasGQLQuery(req, 'Statistics', statisticsQuery());
-    });
-  });
 
   describe('with wallets disconnected', { tags: '@smoke' }, function () {
     it('Should have validators tab highlighted', function () {
@@ -189,11 +177,6 @@ context('Validators Page - verify elements on page', function () {
     { tags: '@smoke' },
     function () {
       before('connect wallets and click on validator', function () {
-        cy.mockGQL((req) => {
-          aliasGQLQuery(req, 'ChainId', chainIdQuery());
-          aliasGQLQuery(req, 'Statistics', statisticsQuery());
-        });
-        cy.visit('/validators');
         cy.connectVegaWallet();
         clickOnValidatorFromList(0);
       });
@@ -280,7 +263,7 @@ context('Validators Page - verify elements on page', function () {
 
         cy.getByTestId(epochCountDown).within(() => {
           cy.get(epochTitle).should('not.be.empty');
-          cy.get(nextEpochInfo, txTimeout).should('contain.text', 'Next epoch');
+          cy.get(nextEpochInfo).should('contain.text', 'Next epoch');
         });
       });
     }

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

@@ -4,8 +4,6 @@ import {
   vegaWalletFaucetAssetsWithoutCheck,
   vegaWalletTeardown,
 } from '../../support/wallet-functions';
-import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
 
 const walletContainer = 'aside [data-testid="vega-wallet"]';
 const walletHeader = '[data-testid="wallet-header"] h1';
@@ -16,6 +14,10 @@ const dialogHeader = 'dialog-title';
 const walletDialogHeader = 'wallet-dialog-title';
 const connectorsList = 'connectors-list';
 const dialogCloseBtn = 'dialog-close';
+const restConnectorForm = 'rest-connector-form';
+const restWallet = '#wallet';
+const restPassphrase = '#passphrase';
+const restConnectBtn = '[type="submit"]';
 const accountNo = 'vega-account-truncated';
 const currencyTitle = 'currency-title';
 const currencyValue = 'currency-value';
@@ -67,7 +69,7 @@ context(
         cy.get(dialog).within(() => {
           cy.getByTestId(walletDialogHeader)
             .should('be.visible')
-            .and('have.text', 'Get a Vega wallet');
+            .and('have.text', 'Connect');
         });
       });
 
@@ -75,7 +77,10 @@ context(
         cy.getByTestId(connectorsList).within(() => {
           cy.getByTestId('connector-jsonRpc')
             .should('be.visible')
-            .and('have.text', 'Use the Desktop App/CLI');
+            .and('have.text', 'Connect Vega wallet');
+          cy.getByTestId('connector-rest')
+            .should('be.visible')
+            .and('have.text', 'Hosted Fairground wallet');
         });
       });
 
@@ -86,14 +91,48 @@ context(
       });
     });
 
+    describe('when rest connector form opened', function () {
+      before('click hosted wallet app button', function () {
+        cy.getByTestId(connectorsList).within(() => {
+          cy.getByTestId('connector-rest').click();
+        });
+      });
+
+      // 0002-WCON-002
+      it('should have wallet field visible', function () {
+        cy.getByTestId(restConnectorForm).within(() => {
+          cy.get(restWallet).should('be.visible');
+        });
+      });
+
+      it('should have password field visible', function () {
+        cy.getByTestId(restConnectorForm).within(() => {
+          cy.get(restPassphrase).should('be.visible');
+        });
+      });
+
+      it('should have connect button visible', function () {
+        cy.getByTestId(restConnectorForm).within(() => {
+          cy.get(restConnectBtn)
+            .should('be.visible')
+            .and('have.text', 'Connect');
+        });
+      });
+
+      it('should have close button visible', function () {
+        cy.get(dialog).within(() => {
+          cy.getByTestId(dialogCloseBtn).should('be.visible');
+        });
+      });
+
+      after('close dialog', function () {
+        cy.getByTestId(dialogCloseBtn).click().should('not.exist');
+      });
+    });
+
     describe('when vega wallet connected', function () {
       before('connect vega wallet', function () {
-        cy.mockGQL((req) => {
-          aliasGQLQuery(req, 'ChainId', chainIdQuery());
-          aliasGQLQuery(req, 'Statistics', statisticsQuery());
-        });
         cy.visit('/');
-        cy.wait('@ChainId');
         cy.connectVegaWallet();
         vegaWalletTeardown();
       });
@@ -276,10 +315,6 @@ context(
         ];
 
         before('faucet assets to connected vega wallet', function () {
-          cy.mockGQL((req) => {
-            aliasGQLQuery(req, 'ChainId', chainIdQuery());
-            aliasGQLQuery(req, 'Statistics', statisticsQuery());
-          });
           for (const { id, amount } of assets) {
             vegaWalletFaucetAssetsWithoutCheck(id, amount, vegaWalletPublicKey);
           }

apps/governance/.env

@@ -21,12 +21,9 @@ NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 
-NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
-NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
-
 #Test configuration variables
 CYPRESS_FAIRGROUND=false
 LC_ALL="en_US.UTF-8"
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
+NX_SUCCESSOR_MARKETS=true

apps/governance/src/components/page-templates/app-layout.tsx

@@ -6,7 +6,6 @@ import { Nav } from '../nav';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import {
   ProtocolUpgradeCountdownMode,
-  ProtocolUpgradeInProgressNotification,
   ProtocolUpgradeProposalNotification,
 } from '@vegaprotocol/proposals';
 import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
@@ -50,7 +49,6 @@ const NotificationsContainer = () => {
       <ProtocolUpgradeProposalNotification
         mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
       />
-      <ProtocolUpgradeInProgressNotification />
       {isReadOnly ? (
         <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
       ) : null}

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

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

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

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

@@ -1,26 +0,0 @@
-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"
-          data-testid="view-as-user"
-          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 { VegaWalletPrompt } from './vega-wallet-prompt';
+import { DownloadWalletPrompt } from './download-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>
-      <VegaWalletPrompt />
+      <DownloadWalletPrompt />
     </>
   );
 };

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

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

apps/governance/src/lib/vega-connectors.ts

@@ -1,4 +1,5 @@
 import {
+  RestConnector,
   JsonRpcConnector,
   ViewConnector,
   InjectedConnector,
@@ -7,11 +8,13 @@ import {
 const urlParams = new URLSearchParams(window.location.search);
 
 export const injected = new InjectedConnector();
+export const rest = new RestConnector();
 export const jsonRpc = new JsonRpcConnector();
 export const view = new ViewConnector(urlParams.get('address'));
 
 export const Connectors = {
   injected,
+  rest,
   jsonRpc,
   view,
 };

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

@@ -45,10 +45,8 @@ export const useMarketDataDialogStore = create<MarketDataDialogState>(
 
 export const ProposalMarketData = ({
   marketData,
-  parentMarketData,
 }: {
   marketData: MarketInfoWithData;
-  parentMarketData?: MarketInfoWithData;
 }) => {
   const { t } = useTranslation();
   const { isOpen, open, close } = useMarketDataDialogStore();
@@ -60,21 +58,8 @@ 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') {
@@ -112,22 +97,12 @@ export const ProposalMarketData = ({
               <AccordionItem
                 itemId="key-details"
                 title={t('Key details')}
-                content={
-                  <KeyDetailsInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
+                content={<KeyDetailsInfoPanel market={marketData} />}
               />
               <AccordionItem
                 itemId="instrument"
                 title={t('Instrument')}
-                content={
-                  <InstrumentInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
+                content={<InstrumentInfoPanel market={marketData} />}
               />
               {isEqual(
                 getSigners(settlementData),
@@ -140,11 +115,6 @@ export const ProposalMarketData = ({
                     <OracleInfoPanel
                       market={marketData}
                       type="settlementData"
-                      parentMarket={
-                        isParentSettlementDataEqual
-                          ? undefined
-                          : parentMarketData
-                      }
                     />
                   }
                 />
@@ -157,11 +127,6 @@ export const ProposalMarketData = ({
                       <OracleInfoPanel
                         market={marketData}
                         type="settlementData"
-                        parentMarket={
-                          isParentSettlementDataEqual
-                            ? undefined
-                            : parentMarketData
-                        }
                       />
                     }
                   />
@@ -170,21 +135,11 @@ export const ProposalMarketData = ({
                     itemId="termination-oracle"
                     title={t('Termination Oracle')}
                     content={
-                      <OracleInfoPanel
-                        market={marketData}
-                        type="termination"
-                        parentMarket={
-                          isParentTerminationDataEqual
-                            ? undefined
-                            : parentMarketData
-                        }
-                      />
+                      <OracleInfoPanel market={marketData} type="termination" />
                     }
                   />
                 </>
               )}
-              {/*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')}
@@ -193,42 +148,22 @@ export const ProposalMarketData = ({
               <AccordionItem
                 itemId="metadata"
                 title={t('Metadata')}
-                content={
-                  <MetadataInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
+                content={<MetadataInfoPanel market={marketData} />}
               />
               <AccordionItem
                 itemId="risk-model"
                 title={t('Risk model')}
-                content={
-                  <RiskModelInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
+                content={<RiskModelInfoPanel market={marketData} />}
               />
               <AccordionItem
                 itemId="risk-parameters"
                 title={t('Risk parameters')}
-                content={
-                  <RiskParametersInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
+                content={<RiskParametersInfoPanel market={marketData} />}
               />
               <AccordionItem
                 itemId="risk-factors"
                 title={t('Risk factors')}
-                content={
-                  <RiskFactorsInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
+                content={<RiskFactorsInfoPanel market={marketData} />}
               />
               {(
                 marketData.priceMonitoringSettings?.parameters?.triggers || []
@@ -239,7 +174,6 @@ export const ProposalMarketData = ({
                   content={
                     <PriceMonitoringBoundsInfoPanel
                       market={marketData}
-                      parentMarket={parentMarketData}
                       triggerIndex={triggerIndex}
                     />
                   }
@@ -249,21 +183,13 @@ export const ProposalMarketData = ({
                 itemId="liqudity-monitoring-parameters"
                 title={t('Liquidity monitoring parameters')}
                 content={
-                  <LiquidityMonitoringParametersInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
+                  <LiquidityMonitoringParametersInfoPanel market={marketData} />
                 }
               />
               <AccordionItem
                 itemId="liquidity-price-range"
                 title={t('Liquidity price range')}
-                content={
-                  <LiquidityPriceRangeInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
+                content={<LiquidityPriceRangeInfoPanel market={marketData} />}
               />
             </Accordion>
           </div>

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

@@ -32,7 +32,6 @@ export interface ProposalProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
   networkParams: Partial<NetworkParamsResult>;
   newMarketData?: MarketInfoWithData | null;
-  parentMarketData?: MarketInfoWithData | null;
   assetData?: AssetQuery | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   restData: any;
@@ -47,7 +46,6 @@ export const Proposal = ({
   networkParams,
   restData,
   newMarketData,
-  parentMarketData,
   assetData,
   originalMarketProposalRestData,
   mostRecentlyEnactedAssociatedMarketProposal,
@@ -159,10 +157,7 @@ export const Proposal = ({
 
         {newMarketData && (
           <div className="mb-4">
-            <ProposalMarketData
-              marketData={newMarketData}
-              parentMarketData={parentMarketData ? parentMarketData : undefined}
-            />
+            <ProposalMarketData marketData={newMarketData} />
           </div>
         )}
 

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

@@ -14,9 +14,6 @@ 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 [
@@ -57,10 +54,6 @@ export const ProposalContainer = () => {
     skip: !params.proposalId,
   });
 
-  const successor = useSuccessorMarketProposalDetails(params.proposalId);
-
-  const isSuccessor = !!successor?.parentMarketId || !!successor.code;
-
   const {
     state: {
       data: originalMarketProposalRestData,
@@ -103,36 +96,6 @@ export const ProposalContainer = () => {
     },
   });
 
-  const {
-    data: parentMarketId,
-    loading: parentMarketIdLoading,
-    error: parentMarketIdError,
-  } = useParentMarketIdQuery({
-    variables: {
-      marketId: newMarketData?.data?.market?.id || '',
-    },
-    skip:
-      !FLAGS.SUCCESSOR_MARKETS ||
-      !isSuccessor ||
-      !newMarketData?.data?.market?.id,
-  });
-
-  const {
-    data: parentMarketData,
-    loading: parentMarketLoading,
-    error: parentMarketError,
-  } = useDataProvider({
-    dataProvider: marketInfoWithDataProvider,
-    skipUpdates: true,
-    variables: {
-      marketId: parentMarketId?.market?.parentMarketID || '',
-      skip:
-        !FLAGS.SUCCESSOR_MARKETS ||
-        !isSuccessor ||
-        !parentMarketId?.market?.parentMarketID,
-    },
-  });
-
   const {
     data: assetData,
     loading: assetLoading,
@@ -197,8 +160,6 @@ export const ProposalContainer = () => {
         newMarketLoading ||
         assetLoading ||
         networkParamsLoading ||
-        parentMarketIdLoading ||
-        parentMarketLoading ||
         (restLoading ? (restLoading as boolean) : false) ||
         (originalMarketProposalRestLoading
           ? (originalMarketProposalRestLoading as boolean)
@@ -211,18 +172,15 @@ export const ProposalContainer = () => {
         error ||
         newMarketError ||
         assetError ||
-        networkParamsError ||
-        parentMarketIdError ||
-        parentMarketError ||
         restError ||
         originalMarketProposalRestError ||
-        previouslyEnactedMarketProposalsRestError
+        previouslyEnactedMarketProposalsRestError ||
+        networkParamsError
       }
       data={{
         ...data,
         ...networkParams,
         ...(newMarketData ? { newMarketData } : {}),
-        ...(parentMarketData ? { parentMarketData } : {}),
         ...(assetData ? { assetData } : {}),
         ...(restData ? { restData } : {}),
         ...(originalMarketProposalRestData
@@ -239,7 +197,6 @@ 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,11 +5,12 @@ 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 visible', () => {
+  it('Deposit to trade is visble', () => {
     cy.getByTestId('Collateral').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.contains('[data-testid="deposit"]', 'Deposit')
+      .should('be.visible')
+      .click();
     cy.getByTestId('deposit-submit').should('be.visible');
   });
 });

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

@@ -169,13 +169,14 @@ describe('home', { tags: '@regression' }, () => {
 
     it('click get started button should open connect dialog', () => {
       cy.getByTestId('welcome-dialog').should('be.visible');
+      cy.getByTestId('get-started-button').click();
       cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
       cy.window().then((window) => {
-        // @ts-ignore stub it out just for test case
-        window.vega = {};
-        cy.getByTestId('get-started-button').click();
-        cy.getByTestId('wallet-dialog-title').should('contain.text', 'Connect');
+        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
+          'true'
+        );
       });
+      cy.getByTestId('wallet-dialog-title').should('contain.text', 'Connect');
     });
   });
 

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

@@ -155,10 +155,7 @@ describe(
         { name: 'Volume', infoText: 'Volume: 55,000' },
       ];
       cy.get(indicatorInfo).eq(1).realHover();
-      cy.get('.chart__wrapper [data-testid="split-view-view"]')
-        .last()
-        .find('[role="button"][title="Close"]')
-        .click({ force: true });
+      cy.get('.close-button-module_closeButton__2ifkl').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,8 +22,9 @@ 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('get-started-button').should('exist');
+    cy.getByTestId('deal-ticket-connect-wallet').should('exist');
   });
 
   it('must be able to select order direction - long/short', function () {
@@ -44,7 +45,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     mockConnectWallet();
     cy.getByTestId(toggleLimit).click();
     cy.getByTestId(orderPriceField).clear().type('101');
-    cy.getByTestId('get-started-button').click();
+    cy.getByTestId('order-connect-wallet').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,7 +63,6 @@ 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'
@@ -74,7 +73,6 @@ 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,7 +48,6 @@ 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'
@@ -61,7 +60,6 @@ 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.code"]'
+        '[role="gridcell"][col-id="market.tradableInstrument.instrument.name"]'
       )
       .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 = [
-      'AAPL.MF21',
-      'BTCUSD.MF21',
-      'ETHBTC.QM21',
-      'SOLUSD',
+      'ACTIVE MARKET',
+      'Apple Monthly (30 Jun 2022)',
+      'ETHBTC Quarterly (30 Jun 2022)',
+      'SUSPENDED MARKET',
     ];
     const marketsSortedAsc = [
-      'AAPL.MF21',
-      'BTCUSD.MF21',
-      'ETHBTC.QM21',
-      'SOLUSD',
+      'ACTIVE MARKET',
+      'Apple Monthly (30 Jun 2022)',
+      'ETHBTC Quarterly (30 Jun 2022)',
+      'SUSPENDED MARKET',
     ];
     const marketsSortedDesc = [
-      'SOLUSD',
-      'ETHBTC.QM21',
-      'BTCUSD.MF21',
-      'AAPL.MF21',
+      'SUSPENDED MARKET',
+      'ETHBTC Quarterly (30 Jun 2022)',
+      'Apple Monthly (30 Jun 2022)',
+      'ACTIVE MARKET',
     ];
     cy.getByTestId(positions).click();
     // 7004-POSI-003
@@ -251,13 +251,11 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
   it('I can see warnings', () => {
     visitAndClickPositions();
 
-    cy.get('[col-id="openVolume"]')
-      .eq(3)
-      .within(() => {
-        cy.get('[aria-label="warning-sign icon"]')
-          .should('be.visible')
-          .realHover();
-      });
+    cy.get('[col-id="openVolume"]').within(() => {
+      cy.get('[aria-label="warning-sign icon"]')
+        .should('be.visible')
+        .realHover();
+    });
     // 7004-POSI-011
     cy.getByTestId(tooltipContent).should('be.visible');
   });
@@ -291,11 +289,9 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
 
   it('View settlement asset', () => {
     visitAndClickPositions();
-    cy.get('[col-id="asset"]')
-      .eq(3)
-      .within(() => {
-        cy.get('button[type="button"]').click();
-      });
+    cy.get('[col-id="asset"]').within(() => {
+      cy.get('button[type="button"]').first().click();
+    });
     // 7004-POSI-008
     cy.getByTestId(dialogContent).should('be.visible');
     cy.getByTestId(dialogCloseX).click();
@@ -310,7 +306,7 @@ function validatePositionsDisplayed(multiKey = false) {
   cy.getByTestId('tab-positions').should('be.visible');
   cy.getByTestId('tab-positions')
     .get('.ag-center-cols-container .ag-row')
-    .eq(multiKey ? 3 : 1)
+    .first()
     .within(() => {
       cy.get('[col-id="marketName"]')
         .should('be.visible')

apps/trading-e2e/src/integration/wallet-vega.cy.ts

@@ -5,8 +5,118 @@ import {
 
 const connectVegaBtn = 'connect-vega-wallet';
 const manageVegaBtn = 'manage-vega-wallet';
+const form = 'rest-connector-form';
 const dialogContent = 'dialog-content';
 
+describe(
+  'connect hosted wallet',
+  { tags: '@smoke', testIsolation: true },
+  () => {
+    beforeEach(() => {
+      // Using portfolio page as it requires vega wallet connection
+      cy.visit('/#/portfolio');
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.setOnBoardingViewed();
+      cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    });
+
+    it('can connect', () => {
+      // 0002-WCON-002
+      // 0002-WCON-003
+      // 0002-WCON-039
+      // 0002-WCON-017
+      // 0002-WCON-018
+      // 0002-WCON-019
+
+      // Mock authentication
+      cy.intercept(
+        'POST',
+        'https://wallet.testnet.vega.xyz/api/v1/auth/token',
+        {
+          body: {
+            token: 'test-token',
+          },
+        }
+      );
+      // Mock getting keys from wallet
+      cy.intercept('GET', 'https://wallet.testnet.vega.xyz/api/v1/keys', {
+        body: {
+          keys: [
+            {
+              algorithm: {
+                name: 'algo',
+                version: 1,
+              },
+              index: 0,
+              meta: [],
+              pub: 'HOSTED_PUBKEY',
+              tainted: false,
+            },
+          ],
+        },
+      });
+      cy.getByTestId(connectVegaBtn).click();
+      cy.contains(
+        'Choose wallet app to connect, or to change port or server URL enter a custom wallet location first'
+      );
+      cy.contains('Connect Vega wallet');
+      cy.contains('Hosted Fairground wallet');
+
+      cy.getByTestId('connectors-list')
+        .find('[data-testid="connector-rest"]')
+        .click();
+      cy.getByTestId(form).find('#wallet').click().type('user');
+      cy.getByTestId(form).find('#passphrase').click().type('pass');
+      cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
+      cy.getByTestId(manageVegaBtn).should('exist');
+      cy.getByTestId('manage-vega-wallet').click();
+      cy.getByTestId('keypair-list').should('exist');
+    });
+
+    it('doesnt connect with invalid credentials', () => {
+      // 0002-WCON-020
+
+      // Mock incorrect username/password
+      cy.intercept(
+        'POST',
+        'https://wallet.testnet.vega.xyz/api/v1/auth/token',
+        {
+          body: {
+            error: 'No wallet',
+          },
+          statusCode: 403, // 403 forbidden invalid crednetials
+        }
+      );
+      cy.getByTestId(connectVegaBtn).click();
+      cy.getByTestId('connectors-list')
+        .find('[data-testid="connector-rest"]')
+        .click();
+      cy.getByTestId(form).find('#wallet').click().type('invalid name');
+      cy.getByTestId(form).find('#passphrase').click().type('invalid password');
+      cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
+      cy.getByTestId('form-error').should('have.text', 'Invalid credentials');
+    });
+
+    it('doesnt connect with empty fields', () => {
+      cy.getByTestId(connectVegaBtn).click();
+      cy.getByTestId('connectors-list')
+        .find('[data-testid="connector-rest"]')
+        .click();
+
+      cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
+      cy.getByTestId(form)
+        .find('#wallet')
+        .next('[data-testid="input-error-text"]')
+        .should('have.text', 'Required');
+      cy.getByTestId(form)
+        .find('#passphrase')
+        .next('[data-testid="input-error-text"]')
+        .should('have.text', 'Required');
+    });
+  }
+);
+
 describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
   beforeEach(() => {
     // Using portfolio page as it requires vega wallet connection
@@ -86,6 +196,8 @@ describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
     cy.getByTestId('connect-vega-wallet').should('exist');
     cy.getByTestId('manage-vega-wallet').should('not.exist');
     cy.getByTestId('connect-vega-wallet').click();
-    cy.contains('Enter a custom wallet location');
+    cy.contains(
+      'Choose wallet app to connect, or to change port or server URL enter a custom wallet location first'
+    );
   });
 });

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

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

@@ -4,16 +4,118 @@ const amountField = 'input[name="amount"]';
 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 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;
 
+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();
+  });
+
+  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 },
@@ -30,8 +132,6 @@ describe(
 
       cy.wait('@Accounts');
       cy.wait('@Assets');
-
-      cy.mockVegaWalletTransaction();
     });
 
     it('transfer Text', () => {

apps/trading/.env

@@ -13,14 +13,9 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
-NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
-NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
-
-NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.capsule

@@ -20,7 +20,4 @@ NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supp
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
-
-NX_TENDERMINT_URL=http://localhost:26617
-NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.devnet

@@ -18,7 +18,4 @@ NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
-
-NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.mainnet

@@ -21,6 +21,3 @@ NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-
-NX_TENDERMINT_URL=https://be.vega.community
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket

apps/trading/.env.mainnet-mirror

@@ -20,7 +20,4 @@ NX_APP_VERSION=v0.20.19-core-0.71.6
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
-
-NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.testnet

@@ -19,7 +19,4 @@ NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
-# NX_PRODUCT_PERPETUALS
-
-NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.validators-testnet

@@ -19,7 +19,4 @@ NX_VEGA_CONSOLE_URL=https://trading.validators-testnet.vega.rocks
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
-
-NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket
+# NX_PRODUCT_PERPETUALS

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

@@ -44,16 +44,16 @@ const MainGrid = memo(
 
     return (
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
-        <ResizableGridPanel
-          preferredSize={sizes[0]}
-          priority={LayoutPriority.High}
-          minSize={200}
-        >
-          <ResizableGrid onChange={handleOnMiddleLayoutChange}>
+        <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
+          <ResizableGrid
+            proportionalLayout={false}
+            minSize={200}
+            onChange={handleOnMiddleLayoutChange}
+          >
             <ResizableGridPanel
               priority={LayoutPriority.High}
               minSize={200}
-              preferredSize={sizesMiddle[0] || '75%'}
+              preferredSize={sizesMiddle[1] || '50%'}
             >
               <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/markets/closed.spec.tsx

@@ -411,26 +411,24 @@ describe('Closed', () => {
         },
       },
     };
-    await act(() => {
-      render(
-        <MemoryRouter>
-          <MockedProvider
-            mocks={[
-              mixedMarketsMock,
-              marketsDataMock,
-              oracleDataMock,
-              successorMarketsMock,
-            ]}
+    render(
+      <MemoryRouter>
+        <MockedProvider
+          mocks={[
+            mixedMarketsMock,
+            marketsDataMock,
+            oracleDataMock,
+            successorMarketsMock,
+          ]}
+        >
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
           >
-            <VegaWalletContext.Provider
-              value={{ pubKey } as VegaWalletContextShape}
-            >
-              <Closed />
-            </VegaWalletContext.Provider>
-          </MockedProvider>
-        </MemoryRouter>
-      );
-    });
+            <Closed />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
+      </MemoryRouter>
+    );
 
     await waitFor(() => {
       expect(

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

@@ -4,9 +4,12 @@ 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,
@@ -21,6 +24,7 @@ export const DepositsContainer = () => {
     <div className="h-full">
       <DepositsTable
         rowData={data}
+        ref={gridRef}
         overlayNoRowsTemplate={error ? error.message : t('No deposits')}
       />
       {!isReadOnly && (

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

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

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

@@ -1,31 +0,0 @@
-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,6 +16,7 @@ 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';
 
@@ -32,18 +33,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={wrapperClasses} data-testid="get-started-banner">
+      <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"
+      >
         {lead && <h2>{lead}</h2>}
-        <h3 className="text-lg">{t('Get started')}</h3>
+        <h3>{t('Get started')}</h3>
         <div>
           <ul className="list-decimal list-inside">
             <li>{t('Get a Vega wallet')}</li>
@@ -56,6 +57,7 @@ export const GetStarted = ({ lead }: Props) => {
           <TradingButton
             intent={Intent.Info}
             onClick={onButtonClick}
+            className="block w-full"
             data-testid="get-started-button"
           >
             {t('Get started')}
@@ -80,28 +82,5 @@ 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

@@ -31,12 +31,12 @@ export const WelcomeDialogContent = () => {
         <ul className="ml-0">
           <ListItemContent
             icon={<NonCustodialIcon />}
-            title={t('Non-custodial and pseudonymous')}
+            title={t('Non-cutodial and pseudonymous')}
             text={t('No third party has access to your funds.')}
           />
           <ListItemContent
             icon={<PurposeBuiltIcon />}
-            title={t('Purpose built proof of stake blockchain')}
+            title={t('Purpose built proof of stake blockhain')}
             text={t(
               'Fully decentralised high performance peer-to-network trading.'
             )}

apps/trading/lib/vega-connectors.ts

@@ -1,9 +1,11 @@
 import {
+  RestConnector,
   JsonRpcConnector,
   ViewConnector,
   InjectedConnector,
 } from '@vegaprotocol/wallet';
 
+export const rest = new RestConnector();
 export const jsonRpc = new JsonRpcConnector();
 export const injected = new InjectedConnector();
 
@@ -17,6 +19,7 @@ if (typeof window !== 'undefined') {
 
 export const Connectors = {
   injected,
+  rest,
   jsonRpc,
   view,
 };

apps/trading/pages/_app.page.tsx

@@ -43,7 +43,6 @@ import { Navbar } from '../components/navbar';
 import classNames from 'classnames';
 import {
   ProtocolUpgradeCountdownMode,
-  ProtocolUpgradeInProgressNotification,
   ProtocolUpgradeProposalNotification,
 } from '@vegaprotocol/proposals';
 import { ViewingBanner } from '../components/viewing-banner';
@@ -112,7 +111,6 @@ function AppBody({ Component }: AppProps) {
           <ProtocolUpgradeProposalNotification
             mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
           />
-          <ProtocolUpgradeInProgressNotification />
           <ViewingBanner />
           <UpgradeBanner showVersionChange={true} />
         </div>

commitlint.config-ci.js

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

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

@@ -118,6 +118,7 @@ export const AccountManager = ({
   onMarketClick,
   gridProps,
 }: AccountManagerProps) => {
+  const gridRef = useRef<AgGridReact | null>(null);
   const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
   const { data, error } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
@@ -137,6 +138,7 @@ 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 { useMemo, useCallback } from 'react';
+import { forwardRef, useMemo, useCallback } from 'react';
 import {
   addDecimalsFormatNumber,
   addDecimalsFormatNumberQuantum,
@@ -21,7 +21,7 @@ import type {
   RowHeightParams,
   ColDef,
 } from 'ag-grid-community';
-import type { AgGridReactProps } from 'ag-grid-react';
+import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import type { AccountFields } from './accounts-data-provider';
 import type { Asset } from '@vegaprotocol/types';
 import { CenteredGridCellWrapper } from '@vegaprotocol/datagrid';
@@ -75,250 +75,256 @@ export interface AccountTableProps extends AgGridReactProps {
   pinnedAsset?: PinnedAsset;
 }
 
-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;
+export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
+  (
+    {
+      onClickAsset,
+      onClickWithdraw,
+      onClickDeposit,
+      onClickBreakdown,
+      onClickTransfer,
+      rowData,
+      isReadOnly,
+      pinnedAsset,
+      ...props
     },
-    [pinnedAsset?.id, getRowHeight]
-  );
+    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]);
 
-  const showDepositButton = pinnedRow?.balance === '0';
+    const { getRowHeight } = props;
 
-  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);
-          }
-        },
+    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;
       },
-      {
-        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);
+      [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);
+            }
+          },
         },
-        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(
+        {
+          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,
             value,
-            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'
-                )}
-              >
-                {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);
-                  }}
-                >
-                  <VegaIcon name={VegaIconNames.DEPOSIT} /> {t('Deposit')}
-                </Button>
-              </CenteredGridCellWrapper>
+          }: VegaICellRendererParams<AccountFields, 'used'>) => {
+            if (!value || !data) return '-';
+            const percentageUsed = percentageValue(value, data.total);
+            const valueFormatted = 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 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
+            );
+          },
         },
-      },
-    ];
-    return defs;
-  }, [
-    onClickAsset,
-    onClickBreakdown,
-    onClickDeposit,
-    onClickWithdraw,
-    onClickTransfer,
-    isReadOnly,
-    showDepositButton,
-  ]);
 
-  const data = rowData?.filter((data) => data.asset.id !== pinnedAsset?.id);
+        {
+          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,
+    ]);
 
-  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}
-    />
-  );
-};
+    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}
+      />
+    );
+  }
+);

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

@@ -23,7 +23,6 @@ const singleRow = {
       instrument: {
         __typename: 'Instrument',
         name: 'BTCUSD Monthly (30 Jun 2022)',
-        code: 'BTCUSD.MF21',
       },
     },
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
@@ -58,7 +57,7 @@ describe('BreakdownTable', () => {
     });
     const cells = await screen.findAllByRole('gridcell');
     const expectedValues = [
-      'BTCUSD.MF21',
+      'BTCUSD Monthly (30 Jun 2022)',
       'Margin',
       '1,256.00 (50%)',
       '1,256.00',
@@ -119,7 +118,6 @@ 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.code',
+          field: 'market.tradableInstrument.instrument.name',
           valueFormatter: ({
             value,
           }: VegaValueFormatterParams<
             AccountFields,
-            'market.tradableInstrument.instrument.code'
+            'market.tradableInstrument.instrument.name'
           >) => {
             if (!value) return 'None';
             return value;

libs/apollo-client/src/lib/apollo-client.ts

@@ -121,12 +121,9 @@ export function createClient({
     // called on startup, NodeCheck and NodeCheckTimeUpdate are called
     // by the NodeSwitcher component and the useNodeHealth hook
     if (
-      [
-        'NodeGuard',
-        'NodeCheck',
-        'NodeCheckTimeUpdate',
-        'BlockStatistics',
-      ].includes(operation.operationName)
+      ['NodeGuard', 'NodeCheck', 'NodeCheckTimeUpdate'].includes(
+        operation.operationName
+      )
     ) {
       return;
     }

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

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

libs/candles-chart/jest.config.ts

@@ -4,25 +4,9 @@ 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'],
-        // required for pennant to work in jest, due to having untranspiled exports
-        plugins: [
-          [
-            '@babel/plugin-proposal-private-methods',
-            {
-              loose: true,
-            },
-          ],
-        ],
-      },
-    ],
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   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/cypress/src/lib/commands/add-connect-public-key.ts

@@ -10,11 +10,14 @@ declare global {
 
 export const addConnectPublicKey = () => {
   Cypress.Commands.add('connectPublicKey', (publicKey) => {
-    const connectVegaWaletBtn = Cypress.$(`[data-testid="view-as-user"]`);
+    const connectVegaWaletBtn = Cypress.$(
+      `[data-testid="connect-vega-wallet"]`
+    );
     if (connectVegaWaletBtn.length > 0) {
-      cy.get('aside button').contains('View as party').click();
-      cy.getByTestId('address').should('be.visible').focus();
-      cy.getByTestId('address').type(publicKey, { delay: 50 });
+      cy.get('aside [data-testid="connect-vega-wallet"]').click();
+      cy.getByTestId('connector-view').should('be.visible').click();
+      cy.getByTestId('address').click();
+      cy.getByTestId('address').type(publicKey);
       cy.getByTestId('connect').click();
     }
   });

libs/cypress/src/lib/commands/vega-wallet-connect.ts

@@ -29,7 +29,7 @@ export const mockConnectWallet = () => {
 
 export const mockConnectWalletWithUserError = () => {
   cy.mockWallet((req) => {
-    aliasWalletConnectWithUserError(req, Cypress.env('VEGA_WALLET_API_TOKEN'));
+    aliasWalletConnectWithUserError(req);
   });
 };
 

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

@@ -62,27 +62,10 @@ export const aliasWalletConnectQuery = (
       },
     });
   }
-  if (hasMethod(req, 'client.get_chain_id')) {
-    req.reply({
-      statusCode: 200,
-      headers: {
-        'Access-Control-Expose-Headers': 'Authorization',
-        Authorization: `VWT ${token}`,
-      },
-      body: {
-        jsonrpc: '2.0',
-        result: {
-          chainID: 'test-id',
-        },
-        id: '1',
-      },
-    });
-  }
 };
 
 export const aliasWalletConnectWithUserError = (
-  req: CyHttpMessages.IncomingHttpRequest,
-  token: string
+  req: CyHttpMessages.IncomingHttpRequest
 ) => {
   if (hasMethod(req, 'client.connect_wallet')) {
     req.alias = 'client.connect_wallet';
@@ -99,20 +82,4 @@ export const aliasWalletConnectWithUserError = (
       },
     });
   }
-  if (hasMethod(req, 'client.get_chain_id')) {
-    req.reply({
-      statusCode: 200,
-      headers: {
-        'Access-Control-Expose-Headers': 'Authorization',
-        Authorization: `VWT ${token}`,
-      },
-      body: {
-        jsonrpc: '2.0',
-        result: {
-          chainID: 'test-id',
-        },
-        id: '1',
-      },
-    });
-  }
 };

libs/datagrid/src/index.ts

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

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

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

@@ -1,8 +1,8 @@
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import {
-  isStopOrderType,
-  useDealTicketFormValues,
-} from '../../hooks/use-form-values';
+  DealTicketType,
+  useDealTicketTypeStore,
+} from '../../hooks/use-type-store';
 import { StopOrder } from './deal-ticket-stop-order';
 import {
   useStaticMarketData,
@@ -25,9 +25,7 @@ export const DealTicketContainer = ({
   marketId,
   ...props
 }: DealTicketContainerProps) => {
-  const showStopOrder = useDealTicketFormValues((state) =>
-    isStopOrderType(state.formValues[marketId]?.type)
-  );
+  const type = useDealTicketTypeStore((state) => state.type[marketId]);
   const {
     data: market,
     error: marketError,
@@ -50,7 +48,9 @@ export const DealTicketContainer = ({
       reload={reload}
     >
       {market && marketData ? (
-        FLAGS.STOP_ORDERS && showStopOrder ? (
+        FLAGS.STOP_ORDERS &&
+        (type === DealTicketType.StopLimit ||
+          type === DealTicketType.StopMarket) ? (
           <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<
-  DealTicketAmountProps,
-  'marketData' | 'type'
+  Omit<DealTicketAmountProps, 'marketData'>,
+  'orderType'
 >;
 
 export const DealTicketLimitAmount = ({
@@ -14,6 +14,9 @@ export const DealTicketLimitAmount = ({
   market,
   sizeError,
   priceError,
+  update,
+  price,
+  size,
 }: DealTicketLimitAmountProps) => {
   const priceStep = toDecimal(market?.decimalPlaces);
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
@@ -59,16 +62,17 @@ export const DealTicketLimitAmount = ({
                 },
                 validate: validateAmount(sizeStep, 'Size'),
               }}
-              render={({ field }) => (
+              render={() => (
                 <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}
                 />
               )}
             />
@@ -91,17 +95,19 @@ 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={({ field }) => (
+              render={() => (
                 <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,7 +10,10 @@ import type { DealTicketAmountProps } from './deal-ticket-amount';
 import { Controller } from 'react-hook-form';
 import classNames from 'classnames';
 
-export type DealTicketMarketAmountProps = Omit<DealTicketAmountProps, 'type'>;
+export type DealTicketMarketAmountProps = Omit<
+  DealTicketAmountProps,
+  'orderType'
+>;
 
 export const DealTicketMarketAmount = ({
   control,
@@ -18,6 +21,8 @@ export const DealTicketMarketAmount = ({
   marketData,
   marketPrice,
   sizeError,
+  update,
+  size,
 }: DealTicketMarketAmountProps) => {
   const quoteName = market.tradableInstrument.instrument.product.quoteName;
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
@@ -45,16 +50,17 @@ export const DealTicketMarketAmount = ({
               },
               validate: validateAmount(sizeStep, 'Size'),
             }}
-            render={({ field }) => (
+            render={() => (
               <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,6 +1,7 @@
 import { Controller, type Control } from 'react-hook-form';
 import type { Market } from '@vegaprotocol/markets';
-import type { OrderFormValues } from '../../hooks/use-form-values';
+import type { OrderObj } from '@vegaprotocol/orders';
+import type { OrderFormFields } from '../../hooks/use-order-form';
 import { toDecimal, validateAmount } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -11,21 +12,25 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 
 export interface DealTicketSizeIcebergProps {
-  control: Control<OrderFormValues>;
+  control: Control<OrderFormFields>;
   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,
-  size,
   peakSize,
+  minimumVisibleSize,
+  size,
 }: DealTicketSizeIcebergProps) => {
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
 
@@ -75,7 +80,7 @@ export const DealTicketSizeIceberg = ({
             className="!mb-1"
           >
             <Controller
-              name="peakSize"
+              name="icebergOpts.peakSize"
               control={control}
               rules={{
                 required: t('You need to provide a peak size'),
@@ -92,17 +97,25 @@ export const DealTicketSizeIceberg = ({
                 },
                 validate: validateAmount(sizeStep, 'peakSize'),
               }}
-              render={({ field }) => (
+              render={() => (
                 <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}
                 />
               )}
             />
@@ -131,7 +144,7 @@ export const DealTicketSizeIceberg = ({
             className="!mb-1"
           >
             <Controller
-              name="minimumVisibleSize"
+              name="icebergOpts.minimumVisibleSize"
               control={control}
               rules={{
                 required: t('You need to provide a minimum visible size'),
@@ -141,7 +154,7 @@ export const DealTicketSizeIceberg = ({
                     'Minimum visible size cannot be lower than ' + sizeStep
                   ),
                 },
-                max: peakSize && {
+                max: {
                   value: peakSize,
                   message: t(
                     'Minimum visible size cannot be greater than the peak size (%s)',
@@ -150,17 +163,25 @@ export const DealTicketSizeIceberg = ({
                 },
                 validate: validateAmount(sizeStep, 'minimumVisibleSize'),
               }}
-              render={({ field }) => (
+              render={() => (
                 <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,11 +6,8 @@ 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-form-values';
-import {
-  DealTicketType,
-  useDealTicketFormValues,
-} from '../../hooks/use-form-values';
+import type { StopOrderFormValues } from '../../hooks/use-stop-order-form-values';
+import { useStopOrderFormValues } from '../../hooks/use-stop-order-form-values';
 import type { FeatureFlags } from '@vegaprotocol/environment';
 
 jest.mock('zustand');
@@ -134,11 +131,9 @@ describe('StopOrder', () => {
       expiresAt: '2023-07-27T16:43:27.000',
     };
 
-    useDealTicketFormValues.setState({
+    useStopOrderFormValues.setState({
       formValues: {
-        [market.id]: {
-          [DealTicketType.StopLimit]: values,
-        },
+        [market.id]: values,
       },
     });
 
@@ -163,13 +158,16 @@ describe('StopOrder', () => {
     );
   });
 
-  it('does not submit if no wallet connected', async () => {
+  it('shows no wallet warning and do 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 () => {
@@ -212,13 +210,11 @@ 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,3 +1,4 @@
+import type { FormEventHandler } from 'react';
 import { useRef, useCallback, useEffect } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { StopOrdersSubmission } from '@vegaprotocol/wallet';
@@ -7,7 +8,7 @@ import {
   toDecimal,
   validateAmount,
 } from '@vegaprotocol/utils';
-import { useForm, Controller, useController } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
 import {
   Radio,
@@ -23,22 +24,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 } from '@vegaprotocol/orders';
+import { timeInForceLabel, useOrder } from '@vegaprotocol/orders';
 import {
   NoWalletWarning,
   REDUCE_ONLY_TOOLTIP,
-  stopSubmit,
-  getNotionalSize,
+  useNotionalSize,
 } from './deal-ticket';
 import { TypeToggle } from './type-selector';
 import {
-  useDealTicketFormValues,
-  DealTicketType,
+  useStopOrderFormValues,
   type StopOrderFormValues,
-  dealTicketTypeToOrderType,
-  isStopOrderType,
-} from '../../hooks/use-form-values';
-import { mapFormValuesToStopOrdersSubmission } from '../../utils/map-form-values-to-submission';
+} from '../../hooks/use-stop-order-form-values';
+import {
+  DealTicketType,
+  useDealTicketTypeStore,
+} from '../../hooks/use-type-store';
+import { mapFormValuesToStopOrdersSubmission } from '../../utils/map-form-values-to-stop-order-submission';
 import { DealTicketButton } from './deal-ticket-button';
 import { DealTicketFeeDetails } from './deal-ticket-fee-details';
 import { validateExpiration } from '../../utils';
@@ -49,36 +50,32 @@ export interface StopOrderProps {
   submit: (order: StopOrdersSubmission) => void;
 }
 
-const getDefaultValues = (
-  type: Schema.OrderType,
-  storedValues?: Partial<StopOrderFormValues>
-): StopOrderFormValues => ({
-  type,
+const defaultValues: Partial<StopOrderFormValues> = {
+  type: Schema.OrderType.TYPE_LIMIT,
   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',
-  ...storedValues,
-});
+};
+
+const stopSubmit: FormEventHandler = (e) => e.preventDefault();
 
 export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const setType = useDealTicketFormValues((state) => state.setType);
-  const updateStoredFormValues = useDealTicketFormValues(
-    (state) => state.updateStopOrder
+  const setDealTicketType = useDealTicketTypeStore((state) => state.set);
+  const [, updateOrder] = useOrder(market.id);
+  const updateStoredFormValues = useStopOrderFormValues(
+    (state) => state.update
   );
-  const storedFormValues = useDealTicketFormValues(
+  const storedFormValues = useStopOrderFormValues(
     (state) => state.formValues[market.id]
   );
-  const dealTicketType = storedFormValues?.type ?? DealTicketType.StopLimit;
-  const type = dealTicketTypeToOrderType(dealTicketType);
-  const { handleSubmit, setValue, watch, control, formState, reset } =
+  const { handleSubmit, setValue, watch, control, formState } =
     useForm<StopOrderFormValues>({
-      defaultValues: getDefaultValues(type, storedFormValues?.[dealTicketType]),
+      defaultValues: { ...defaultValues, ...storedFormValues },
     });
   const { errors } = formState;
   const lastSubmitTime = useRef(0);
@@ -105,22 +102,16 @@ 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');
 
-  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]);
+  if (storedFormValues?.size && rawSize !== storedFormValues?.size) {
+    setValue('size', storedFormValues.size);
+  }
+  if (storedFormValues?.price && rawPrice !== storedFormValues?.price) {
+    setValue('price', storedFormValues.price);
+  }
 
   const isPriceTrigger = triggerType === 'price';
   const size = removeDecimal(rawSize, market.positionDecimalPlaces);
@@ -136,7 +127,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
         : marketPrice
     );
 
-  const notionalSize = getNotionalSize(
+  const notionalSize = useNotionalSize(
     price,
     size,
     market.decimalPlaces,
@@ -162,28 +153,47 @@ 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
     >
-      <TypeToggle
-        value={dealTicketType}
-        onValueChange={(dealTicketType) => {
-          setType(market.id, dealTicketType);
-          if (isStopOrderType(dealTicketType)) {
-            reset(
-              getDefaultValues(
-                dealTicketTypeToOrderType(dealTicketType),
-                storedFormValues?.[dealTicketType]
-              )
-            );
-          }
+      <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
+                );
+              }}
+            />
+          );
         }}
       />
       {errors.type && (
@@ -558,7 +568,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           </div>
         </>
       )}
-      <NoWalletWarning isReadOnly={isReadOnly} />
+      <NoWalletWarning pubKey={pubKey} isReadOnly={isReadOnly} asset={asset} />
       <DealTicketButton side={side} label={t('Submit Stop Order')} />
       <DealTicketFeeDetails
         order={{

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

@@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket, generateMarketData } from '../../test-helpers';
 import { DealTicket } from './deal-ticket';
@@ -9,10 +15,7 @@ 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 {
-  DealTicketType,
-  useDealTicketFormValues,
-} from '../../hooks/use-form-values';
+import { useCreateOrderStore } from '@vegaprotocol/orders';
 import * as positionsTools from '@vegaprotocol/positions';
 import { OrdersDocument } from '@vegaprotocol/orders';
 
@@ -47,6 +50,9 @@ function generateJsx(mocks: MockedResponse[] = []) {
 }
 
 describe('DealTicket', () => {
+  const { result } = renderHook(() => useCreateOrderStore());
+  const useOrderStore = result.current;
+
   beforeEach(() => {
     jest.clearAllMocks();
     localStorage.clear();
@@ -160,11 +166,9 @@ describe('DealTicket', () => {
       persist: true,
     };
 
-    useDealTicketFormValues.setState({
-      formValues: {
-        [expectedOrder.marketId]: {
-          [DealTicketType.Limit]: expectedOrder,
-        },
+    useOrderStore.setState({
+      orders: {
+        [expectedOrder.marketId]: expectedOrder,
       },
     });
 
@@ -200,11 +204,9 @@ describe('DealTicket', () => {
       reduceOnly: true,
       postOnly: false,
     };
-    useDealTicketFormValues.setState({
-      formValues: {
-        [expectedOrder.marketId]: {
-          [DealTicketType.Limit]: expectedOrder,
-        },
+    useOrderStore.setState({
+      orders: {
+        [expectedOrder.marketId]: expectedOrder,
       },
     });
 
@@ -245,11 +247,9 @@ describe('DealTicket', () => {
       postOnly: true,
     };
 
-    useDealTicketFormValues.setState({
-      formValues: {
-        [expectedOrder.marketId]: {
-          [DealTicketType.Limit]: expectedOrder,
-        },
+    useOrderStore.setState({
+      orders: {
+        [expectedOrder.marketId]: expectedOrder,
       },
     });
 
@@ -295,11 +295,9 @@ describe('DealTicket', () => {
       },
     };
 
-    useDealTicketFormValues.setState({
-      formValues: {
-        [expectedOrder.marketId]: {
-          [DealTicketType.Limit]: expectedOrder,
-        },
+    useOrderStore.setState({
+      orders: {
+        [expectedOrder.marketId]: expectedOrder,
       },
     });
 
@@ -341,11 +339,9 @@ describe('DealTicket', () => {
       reduceOnly: false,
       postOnly: false,
     };
-    useDealTicketFormValues.setState({
-      formValues: {
-        [expectedOrder.marketId]: {
-          [DealTicketType.Limit]: expectedOrder,
-        },
+    useOrderStore.setState({
+      orders: {
+        [expectedOrder.marketId]: expectedOrder,
       },
     });
 
@@ -374,7 +370,6 @@ 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,8 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
-import type { FormEventHandler } from 'react';
-import { memo, useCallback, useEffect, useRef, useMemo } from 'react';
-import { Controller, useController, useForm } from 'react-hook-form';
+import { memo, useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import { Controller } from 'react-hook-form';
 import { DealTicketAmount } from './deal-ticket-amount';
 import { DealTicketButton } from './deal-ticket-button';
 import {
@@ -14,10 +13,14 @@ import { SideSelector } from './side-selector';
 import { TimeInForceSelector } from './time-in-force-selector';
 import { TypeSelector } from './type-selector';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
+import {
+  normalizeOrderSubmission,
+  useVegaWallet,
+  useVegaWalletDialogStore,
+} from '@vegaprotocol/wallet';
 import {
   Checkbox,
+  ExternalLink,
   InputError,
   Intent,
   Notification,
@@ -53,15 +56,14 @@ import {
   useAccountBalance,
 } from '@vegaprotocol/accounts';
 
-import { OrderType } from '@vegaprotocol/types';
+import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
+import { useOrderForm } from '../../hooks/use-order-form';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import {
   DealTicketType,
-  dealTicketTypeToOrderType,
-  isStopOrderType,
-} from '../../hooks/use-form-values';
-import type { OrderFormValues } from '../../hooks/use-form-values';
-import { useDealTicketFormValues } from '../../hooks/use-form-values';
+  useDealTicketTypeStore,
+} from '../../hooks/use-type-store';
+import { useStopOrderFormValues } from '../../hooks/use-stop-order-form-values';
 import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
 import noop from 'lodash/noop';
 
@@ -78,42 +80,23 @@ export interface DealTicketProps {
   onDeposit: (assetId: string) => void;
 }
 
-export const getNotionalSize = (
+export const useNotionalSize = (
   price: string | null | undefined,
   size: string | undefined,
   decimalPlaces: number,
   positionDecimalPlaces: number
-) => {
-  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,
-});
+) =>
+  useMemo(() => {
+    if (price && size) {
+      return removeDecimal(
+        toBigNum(size, positionDecimalPlaces).multipliedBy(
+          toBigNum(price, decimalPlaces)
+        ),
+        decimalPlaces
+      );
+    }
+    return null;
+  }, [price, size, decimalPlaces, positionDecimalPlaces]);
 
 export const DealTicket = ({
   market,
@@ -125,29 +108,32 @@ export const DealTicket = ({
   onDeposit,
 }: DealTicketProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const setType = useDealTicketFormValues((state) => state.setType);
-  const storedFormValues = useDealTicketFormValues(
-    (state) => state.formValues[market.id]
+  const setDealTicketType = useDealTicketTypeStore((state) => state.set);
+  const updateStopOrderFormValues = useStopOrderFormValues(
+    (state) => state.update
   );
-  const updateStoredFormValues = useDealTicketFormValues(
-    (state) => state.updateOrder
-  );
-  const dealTicketType = storedFormValues?.type ?? DealTicketType.Limit;
-  const type = dealTicketTypeToOrderType(dealTicketType);
+  // 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 {
     control,
-    reset,
-    formState: { errors },
+    errors,
+    order,
+    setError,
+    clearErrors,
+    update,
     handleSubmit,
-    setValue,
-    watch,
-  } = useForm<OrderFormValues>({
-    defaultValues: getDefaultValues(type, storedFormValues?.[dealTicketType]),
-  });
+  } = useOrderForm(market.id);
+
   const lastSubmitTime = useRef(0);
 
   const asset = market.tradableInstrument.instrument.product.settlementAsset;
+
   const {
     accountBalance: marginAccountBalance,
     loading: loadingMarginAccountBalance,
@@ -163,54 +149,24 @@ export const DealTicket = ({
   ).toString();
 
   const { marketState, marketTradingMode } = marketData;
-  const timeInForce = watch('timeInForce');
 
-  const side = watch('side');
-  const rawSize = watch('size');
-  const rawPrice = watch('price');
-  const iceberg = watch('iceberg');
-  const peakSize = watch('peakSize');
+  const normalizedOrder =
+    order &&
+    normalizeOrderSubmission(
+      order,
+      market.decimalPlaces,
+      market.positionDecimalPlaces
+    );
 
-  useEffect(() => {
-    const size = storedFormValues?.[dealTicketType]?.size;
-    if (size && rawSize !== size) {
-      setValue('size', size);
-    }
-  }, [storedFormValues, dealTicketType, rawSize, setValue]);
+  const price = useMemo(() => {
+    return (
+      normalizedOrder &&
+      marketPrice &&
+      getDerivedPrice(normalizedOrder, marketPrice)
+    );
+  }, [normalizedOrder, marketPrice]);
 
-  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(
+  const notionalSize = useNotionalSize(
     price,
     normalizedOrder?.size,
     market.decimalPlaces,
@@ -254,20 +210,22 @@ export const DealTicket = ({
   const assetSymbol =
     market.tradableInstrument.instrument.product.settlementAsset.symbol;
 
-  const summaryError = useMemo(() => {
+  useEffect(() => {
     if (!pubKey) {
-      return {
+      setError('summary', {
         message: t('No public key selected'),
         type: SummaryValidationType.NoPubKey,
-      };
+      });
+      return;
     }
 
     const marketStateError = validateMarketState(marketState);
     if (marketStateError !== true) {
-      return {
+      setError('summary', {
         message: marketStateError,
         type: SummaryValidationType.MarketState,
-      };
+      });
+      return;
     }
 
     const hasNoBalance =
@@ -276,21 +234,24 @@ export const DealTicket = ({
       hasNoBalance &&
       !(loadingMarginAccountBalance || loadingGeneralAccountBalance)
     ) {
-      return {
+      setError('summary', {
         message: SummaryValidationType.NoCollateral,
         type: SummaryValidationType.NoCollateral,
-      };
+      });
+      return;
     }
 
     const marketTradingModeError = validateMarketTradingMode(marketTradingMode);
     if (marketTradingModeError !== true) {
-      return {
+      setError('summary', {
         message: marketTradingModeError,
         type: SummaryValidationType.TradingMode,
-      };
+      });
+      return;
     }
 
-    return undefined;
+    // No error found above clear the error in case it was active on a previous render
+    clearErrors('summary');
   }, [
     marketState,
     marketTradingMode,
@@ -299,83 +260,156 @@ export const DealTicket = ({
     loadingMarginAccountBalance,
     loadingGeneralAccountBalance,
     pubKey,
+    setError,
+    clearErrors,
   ]);
 
-  const disablePostOnlyCheckbox = [
-    Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
-    Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
-  ].includes(timeInForce);
+  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 disableReduceOnlyCheckbox = !disablePostOnlyCheckbox;
+  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 onSubmit = useCallback(
-    (formValues: OrderFormValues) => {
+    (order: OrderSubmission) => {
       const now = new Date().getTime();
       if (lastSubmitTime.current && now - lastSubmitTime.current < 1000) {
         return;
       }
       submit(
-        mapFormValuesToOrderSubmission(
-          formValues,
-          market.id,
+        normalizeOrderSubmission(
+          order,
           market.decimalPlaces,
           market.positionDecimalPlaces
         )
       );
       lastSubmitTime.current = now;
     },
-    [submit, market.decimalPlaces, market.positionDecimalPlaces, market.id]
+    [submit, market.decimalPlaces, market.positionDecimalPlaces]
   );
-  useController({
-    name: 'type',
-    control,
-    rules: {
-      validate: validateType(marketData.marketTradingMode, marketData.trigger),
-    },
-  });
+
+  // if an order doesn't exist one will be created by the store immediately
+  if (!order || !normalizedOrder) {
+    return null;
+  }
 
   return (
     <form
-      onSubmit={
-        isReadOnly || !pubKey
-          ? stopSubmit
-          : handleSubmit(summaryError ? noop : onSubmit)
-      }
+      onSubmit={isReadOnly ? noop : handleSubmit(onSubmit)}
       noValidate
       data-testid="deal-ticket-form"
     >
-      <TypeSelector
-        value={dealTicketType}
-        onValueChange={(dealTicketType) => {
-          setType(market.id, dealTicketType);
-          if (!isStopOrderType(dealTicketType)) {
-            reset(
-              getDefaultValues(
-                dealTicketTypeToOrderType(dealTicketType),
-                storedFormValues?.[dealTicketType]
-              )
-            );
-          }
+      <Controller
+        name="type"
+        control={control}
+        rules={{
+          validate: validateType(
+            marketData.marketTradingMode,
+            marketData.trigger
+          ),
         }}
-        market={market}
-        marketData={marketData}
-        errorMessage={errors.type?.message}
+        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}
+          />
+        )}
       />
       <Controller
         name="side"
         control={control}
-        render={({ field }) => (
-          <SideSelector value={field.value} onValueChange={field.onChange} />
+        render={() => (
+          <SideSelector
+            value={order.side}
+            onValueChange={(side) => {
+              update({ side });
+            }}
+          />
         )}
       />
       <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"
@@ -386,29 +420,58 @@ export const DealTicket = ({
             marketData.trigger
           ),
         }}
-        render={({ field }) => (
+        render={() => (
           <TimeInForceSelector
-            value={field.value}
-            orderType={type}
-            onSelect={field.onChange}
+            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');
+            }}
             market={market}
             marketData={marketData}
             errorMessage={errors.timeInForce?.message}
           />
         )}
       />
-      {type === Schema.OrderType.TYPE_LIMIT &&
-        timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT && (
+      {order.type === Schema.OrderType.TYPE_LIMIT &&
+        order.timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT && (
           <Controller
             name="expiresAt"
             control={control}
             rules={{
               validate: validateExpiration,
             }}
-            render={({ field }) => (
+            render={() => (
               <ExpirySelector
-                value={field.value}
-                onSelect={(expiresAt) => field.onChange(expiresAt)}
+                value={order.expiresAt}
+                onSelect={(expiresAt) =>
+                  update({
+                    expiresAt: expiresAt || undefined,
+                  })
+                }
                 errorMessage={errors.expiresAt?.message}
               />
             )}
@@ -418,14 +481,13 @@ export const DealTicket = ({
         <Controller
           name="postOnly"
           control={control}
-          render={({ field }) => (
+          render={() => (
             <Checkbox
               name="post-only"
-              checked={!disablePostOnlyCheckbox && field.value}
+              checked={order.postOnly}
               disabled={disablePostOnlyCheckbox}
-              onCheckedChange={(postOnly) => {
-                field.onChange(postOnly);
-                setValue('reduceOnly', false);
+              onCheckedChange={() => {
+                update({ postOnly: !order.postOnly, reduceOnly: false });
               }}
               label={
                 <Tooltip
@@ -450,14 +512,13 @@ export const DealTicket = ({
         <Controller
           name="reduceOnly"
           control={control}
-          render={({ field }) => (
+          render={() => (
             <Checkbox
               name="reduce-only"
-              checked={!disableReduceOnlyCheckbox && field.value}
+              checked={order.reduceOnly}
               disabled={disableReduceOnlyCheckbox}
-              onCheckedChange={(reduceOnly) => {
-                field.onChange(reduceOnly);
-                setValue('postOnly', false);
+              onCheckedChange={() => {
+                update({ postOnly: false, reduceOnly: !order.reduceOnly });
               }}
               label={
                 <Tooltip
@@ -478,49 +539,53 @@ export const DealTicket = ({
           )}
         />
       </div>
-      {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.
+      <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.
                             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>
-          {iceberg && (
-            <DealTicketSizeIceberg
-              market={market}
-              peakSizeError={errors.peakSize?.message}
-              minimumVisibleSizeError={errors.minimumVisibleSize?.message}
-              control={control}
-              size={rawSize}
-              peakSize={peakSize}
-            />
-          )}
-        </>
+                      </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 || ''}
+        />
       )}
       <SummaryMessage
-        error={summaryError}
+        errorMessage={errors.summary?.message}
         asset={asset}
         marketTradingMode={marketData.marketTradingMode}
         balance={balance}
@@ -533,7 +598,7 @@ export const DealTicket = ({
         onClickCollateral={onClickCollateral}
         onDeposit={onDeposit}
       />
-      <DealTicketButton side={side} />
+      <DealTicketButton side={order.side} />
       <DealTicketFeeDetails
         order={
           normalizedOrder && { ...normalizedOrder, price: price || undefined }
@@ -559,7 +624,7 @@ export const DealTicket = ({
  * renders warnings about current state of the market
  */
 interface SummaryMessageProps {
-  error?: { message: string; type: string };
+  errorMessage?: string;
   asset: { id: string; symbol: string; name: string; decimals: number };
   marketTradingMode: MarketData['marketTradingMode'];
   balance: string;
@@ -572,7 +637,13 @@ interface SummaryMessageProps {
 
 export const NoWalletWarning = ({
   isReadOnly,
-}: Pick<SummaryMessageProps, 'isReadOnly'>) => {
+  pubKey,
+  asset,
+}: Pick<SummaryMessageProps, 'isReadOnly' | 'pubKey' | 'asset'>) => {
+  const assetSymbol = asset.symbol;
+  const openVegaWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
   if (isReadOnly) {
     return (
       <div className="mb-2">
@@ -584,12 +655,37 @@ 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(
   ({
-    error,
+    errorMessage,
     asset,
     marketTradingMode,
     balance,
@@ -602,10 +698,16 @@ const SummaryMessage = memo(
     // Specific error UI for if balance is so we can
     // render a deposit dialog
     if (isReadOnly || !pubKey) {
-      return <NoWalletWarning isReadOnly={isReadOnly} />;
+      return (
+        <NoWalletWarning
+          isReadOnly={isReadOnly}
+          asset={asset}
+          pubKey={pubKey}
+        />
+      );
     }
 
-    if (error?.type === SummaryValidationType.NoCollateral) {
+    if (errorMessage === SummaryValidationType.NoCollateral) {
       return (
         <div className="mb-2">
           <ZeroBalanceError
@@ -619,11 +721,11 @@ const SummaryMessage = memo(
 
     // If we have any other full error which prevents
     // submission render that first
-    if (error?.message) {
+    if (errorMessage) {
       return (
         <div className="mb-2">
           <InputError testId="deal-ticket-error-message-summary">
-            {error?.message}
+            {errorMessage}
           </InputError>
         </div>
       );

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

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

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

@@ -16,7 +16,7 @@ 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-form-values';
+import { DealTicketType } from '../../hooks/use-type-store';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import classNames from 'classnames';
 import { FLAGS } from '@vegaprotocol/environment';

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+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-stop-order-submission.ts

@@ -1,64 +1,12 @@
 import type {
-  OrderSubmission,
   StopOrderSetup,
   StopOrdersSubmission,
 } from '@vegaprotocol/wallet';
-import type {
-  OrderFormValues,
-  StopOrderFormValues,
-} from '../hooks/use-form-values';
+import { normalizeOrderSubmission } from '@vegaprotocol/wallet';
+import type { StopOrderFormValues } from '../hooks/use-stop-order-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,
@@ -67,8 +15,9 @@ export const mapFormValuesToStopOrdersSubmission = (
 ): StopOrdersSubmission => {
   const submission: StopOrdersSubmission = {};
   const stopOrderSetup: StopOrderSetup = {
-    orderSubmission: mapFormValuesToOrderSubmission(
+    orderSubmission: normalizeOrderSubmission(
       {
+        marketId,
         type: data.type,
         side: data.side,
         size: data.size,
@@ -76,16 +25,12 @@ 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

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

libs/environment/src/hooks/use-environment.ts

@@ -371,14 +371,6 @@ function compileEnvVars() {
       'NX_TENDERMINT_WEBSOCKET_URL',
       process.env['NX_TENDERMINT_WEBSOCKET_URL']
     ),
-    CHROME_EXTENSION_URL: windowOrDefault(
-      'NX_CHROME_EXTENSION_URL',
-      process.env['NX_CHROME_EXTENSION_URL']
-    ),
-    MOZILLA_EXTENSION_URL: windowOrDefault(
-      'NX_MOZILLA_EXTENSION_URL',
-      process.env['NX_MOZILLA_EXTENSION_URL']
-    ),
   };
 
   return env;

libs/environment/src/hooks/use-links.ts

@@ -29,7 +29,6 @@ const EmptyLinks: DAppLinks = {
 
 const ExplorerLinks = {
   ...EmptyLinks,
-  [Networks.STAGNET1]: 'https://explorer.stagnet1.vega.rocks',
   [Networks.TESTNET]: 'https://explorer.fairground.wtf',
   [Networks.VALIDATOR_TESTNET]:
     'https://explorer.validators-testnet.vega.rocks',
@@ -41,18 +40,17 @@ const ConsoleLinks = {
   ...EmptyLinks,
   [Networks.STAGNET1]: 'https://trading.stagnet1.vega.rocks',
   [Networks.TESTNET]: 'https://console.fairground.wtf',
-  [Networks.MAINNET]: 'https://vega.trading',
-  [Networks.MAINNET_MIRROR]: 'https://console.mainnet-mirror.vega.rocks',
+  [Networks.MAINNET]: 'https://console.vega.xyz',
+  [Networks.MAINNET_MIRROR]: 'https://console.mainnet-mirror.vega.rocks/',
 };
 
 const TokenLinks = {
   ...EmptyLinks,
   [Networks.DEVNET]: 'https://dev.governance.vega.xyz',
-  [Networks.STAGNET1]: 'https://governance.stagnet1.vega.rocks',
   [Networks.TESTNET]: 'https://governance.fairground.wtf',
   [Networks.VALIDATOR_TESTNET]:
     'https://governance.validators-testnet.vega.rocks',
-  [Networks.MAINNET_MIRROR]: 'https://governance.mainnet-mirror.vega.rocks',
+  [Networks.MAINNET_MIRROR]: 'https://governance.mainnet-mirror.vega.rocks/',
   [Networks.MAINNET]: 'https://governance.vega.xyz',
 };
 
@@ -162,9 +160,7 @@ export const ExternalLinks = {
   MARGIN_CREDIT_RISK:
     'https://vega.xyz/papers/margins-and-credit-risk.pdf#page=7',
   VEGA_WALLET_URL: 'https://vega.xyz/wallet',
-  VEGA_WALLET_URL_ABOUT: 'https://vega.xyz/wallet/#overview',
   VEGA_WALLET_HOSTED_URL: 'https://vega-hosted-wallet.on.fleek.co/',
-  VEGA_WALLET_BROWSER_LIST: '',
   BLOG: 'https://blog.vega.xyz/',
 };
 

libs/environment/src/utils/validate-environment.ts

@@ -59,8 +59,6 @@ export const envSchema = z
     SENTRY_DSN: z.optional(z.string()),
     TENDERMINT_URL: z.optional(z.string()),
     TENDERMINT_WEBSOCKET_URL: z.optional(z.string()),
-    CHROME_EXTENSION_URL: z.optional(z.string()),
-    MOZILLA_EXTENSION_URL: z.optional(z.string()),
   })
   .refine(
     (data) => {

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

@@ -20,7 +20,7 @@ describe('FillsTable', () => {
         positionDecimalPlaces: 5,
         tradableInstrument: {
           instrument: {
-            code: 'test market',
+            name: '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.code || '',
+      buyerFill.market?.tradableInstrument.instrument.name || '',
       '+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.code || '',
+      buyerFill.market?.tradableInstrument.instrument.name || '',
       '-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.code || '',
+      buyerFill.market?.tradableInstrument.instrument.name || '',
       '-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.code',
+          field: 'market.tradableInstrument.instrument.name',
           cellRenderer: 'MarketNameCell',
           cellRendererParams: { idPath: 'market.id', onMarketClick },
         },

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

@@ -1,7 +1,8 @@
 import { t } from '@vegaprotocol/i18n';
 import type * as Schema from '@vegaprotocol/types';
 import type { FilterChangedEvent } from 'ag-grid-community';
-import { useCallback, useState, useMemo } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+import { useCallback, useRef, useState, useMemo } from 'react';
 import { subDays, formatRFC3339 } from 'date-fns';
 import { ledgerEntriesProvider } from './ledger-entries-data-provider';
 import type { LedgerEntriesQueryVariables } from './__generated__/LedgerEntries';
@@ -31,6 +32,7 @@ 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>(
@@ -62,6 +64,7 @@ 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,6 +14,7 @@ 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 {
@@ -22,7 +23,7 @@ import {
   TransferTypeMapping,
 } from '@vegaprotocol/types';
 import type { LedgerEntry } from './ledger-entries-data-provider';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { formatRFC3339, subDays } from 'date-fns';
 
 export const TransferTooltipCellComponent = ({
@@ -44,159 +45,162 @@ const dateRangeFilterParams = {
 };
 type LedgerEntryProps = TypedDataAgGrid<LedgerEntry>;
 
-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,
+export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
+  (props, ref) => {
+    const columnDefs = useMemo<ColDef[]>(
+      () => [
+        {
+          headerName: t('Sender'),
+          field: 'fromAccountPartyId',
+          cellRenderer: ({
+            value,
+          }: VegaValueFormatterParams<LedgerEntry, 'fromAccountPartyId'>) =>
+            truncateByChars(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('Account type'),
+          filter: SetFilter,
+          filterParams: {
+            set: AccountTypeMapping,
+          },
+          field: 'fromAccountType',
+          cellRenderer: ({
+            value,
+          }: VegaValueFormatterParams<LedgerEntry, 'fromAccountType'>) =>
+            value ? AccountTypeMapping[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('Market'),
+          field: 'marketSender.tradableInstrument.instrument.code',
+          cellRenderer: ({
+            value,
+          }: VegaValueFormatterParams<
+            LedgerEntry,
+            'marketSender.tradableInstrument.instrument.code'
+          >) => 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('Receiver'),
+          field: 'toAccountPartyId',
+          cellRenderer: ({
+            value,
+          }: VegaValueFormatterParams<LedgerEntry, 'toAccountPartyId'>) =>
+            truncateByChars(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('Account type'),
+          filter: SetFilter,
+          filterParams: {
+            set: AccountTypeMapping,
+          },
+          field: 'toAccountType',
+          cellRenderer: ({
+            value,
+          }: VegaValueFormatterParams<LedgerEntry, 'toAccountType'>) =>
+            value ? AccountTypeMapping[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('Market'),
+          field: 'marketReceiver.tradableInstrument.instrument.code',
+          cellRenderer: ({
+            value,
+          }: VegaValueFormatterParams<
+            LedgerEntry,
+            'marketReceiver.tradableInstrument.instrument.code'
+          >) => 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('Transfer type'),
+          field: 'transferType',
+          tooltipField: 'transferType',
+          filter: SetFilter,
+          filterParams: {
+            set: TransferTypeMapping,
+          },
+          valueFormatter: ({
+            value,
+          }: VegaValueFormatterParams<LedgerEntry, 'transferType'>) =>
+            value ? TransferTypeMapping[value] : '',
         },
-      }}
-      columnDefs={columnDefs}
-      {...props}
-    />
-  );
-};
+        {
+          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}
+      />
+    );
+  }
+);

libs/market-depth/jest.config.ts

@@ -4,25 +4,9 @@ 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'],
-        // required for pennant to work in jest, due to having untranspiled exports
-        plugins: [
-          [
-            '@babel/plugin-proposal-private-methods',
-            {
-              loose: true,
-            },
-          ],
-        ],
-      },
-    ],
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   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,8 +34,5 @@ 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 } }, proposal?: { __typename?: 'Proposal', id?: string | null } | null } | 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 } } } | null };
 
 
 export const SuccessorMarketIdDocument = gql`
@@ -153,9 +153,6 @@ export const SuccessorMarketDocument = gql`
         code
       }
     }
-    proposal {
-      id
-    }
   }
 }
     `;

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

@@ -4,10 +4,8 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
-  Intent,
   KeyValueTable,
   KeyValueTableRow,
-  Lozenge,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import BigNumber from 'bignumber.js';
@@ -24,11 +22,9 @@ interface RowProps {
   unformatted?: boolean;
   assetSymbol?: string;
   noBorder?: boolean;
-  parentValue?: ReactNode;
-  hasParentData?: boolean;
 }
 
-export const Row = ({
+const Row = ({
   field,
   value,
   decimalPlaces,
@@ -36,14 +32,7 @@ export 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) => {
@@ -66,10 +55,6 @@ export const Row = ({
   const formattedValue = getFormattedValue(value);
 
   if (!formattedValue) return null;
-
-  const newValueInSuccessorMarket = hasParentData && value && !parentValue;
-  const valueDiffersFromParentMarket = parentValue && parentValue !== value;
-
   return (
     <KeyValueTableRow
       key={field}
@@ -78,35 +63,10 @@ export const Row = ({
       dtClassName={className}
       ddClassName={className}
     >
-      <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>
+      <Tooltip description={tooltipMapping[field]} align="start">
+        <div tabIndex={-1}>{startCase(t(field))}</div>
+      </Tooltip>
+      <span style={{ wordBreak: 'break-word' }}>{formattedValue}</span>
     </KeyValueTableRow>
   );
 };
@@ -119,7 +79,6 @@ export interface MarketInfoTableProps {
   children?: ReactNode;
   assetSymbol?: string;
   noBorder?: boolean;
-  parentData?: Record<string, ReactNode> | null | undefined;
 }
 
 export const MarketInfoTable = ({
@@ -130,33 +89,25 @@ 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}
-              parentValue={parentData?.[key]}
-              hasParentData={hasParentData}
-            />
-          ))}
-        </>
+        {Object.entries(data).map(([key, value]) => (
+          <Row
+            key={key}
+            field={key}
+            value={value}
+            decimalPlaces={decimalPlaces}
+            assetSymbol={assetSymbol}
+            asPercentage={asPercentage}
+            unformatted={unformatted}
+            noBorder={noBorder}
+          />
+        ))}
       </KeyValueTable>
       <div className="flex flex-col gap-2">{children}</div>
     </>