fix: update gov and explor. metadata & remove second side

Co-authored-by: asiaznik <artur@vegaprotocol.io>

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

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

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

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

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

@@ -1,6 +1,9 @@
 import { t } from '@vegaprotocol/i18n';
 import type { MarketInfoWithData } from '@vegaprotocol/markets';
-import { PriceMonitoringBoundsInfoPanel } from '@vegaprotocol/markets';
+import {
+  PriceMonitoringBoundsInfoPanel,
+  SuccessionLineInfoPanel,
+} from '@vegaprotocol/markets';
 import {
   LiquidityInfoPanel,
   LiquidityMonitoringParametersInfoPanel,
@@ -103,6 +106,8 @@ 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,6 +10,8 @@ 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'];
@@ -53,7 +55,11 @@ export function proposalTypeLabel(terms?: ProposalTerms): string {
   } else if (has(terms, 'updateAsset')) {
     return t('Update asset proposal');
   } else if (has(terms, 'newMarket')) {
-    return t('New market proposal');
+    if (terms?.newMarket?.changes?.successor) {
+      return t('Successor market proposal');
+    } else {
+      return t('New market proposal');
+    }
   } else if (has(terms, 'updateMarket')) {
     return t('Update market proposal');
   } else if (has(terms, 'updateNetworkParameter')) {
@@ -85,6 +91,13 @@ 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
@@ -111,6 +124,30 @@ 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,7 +78,11 @@ export function getLabelForProposal(
   } else if (proposal.terms?.updateAsset) {
     return t('Proposal: Update asset');
   } else if (proposal.terms?.newMarket) {
-    return t('Proposal: New market');
+    if (proposal.terms?.newMarket.changes?.successor) {
+      return t('Proposal: Successor market');
+    } else {
+      return t('Proposal: New market');
+    }
   } else if (proposal.terms?.updateMarket) {
     return t('Proposal: Update market');
   } else if (proposal.terms?.updateNetworkParameter) {

apps/explorer/src/assets/manifest.json

@@ -0,0 +1,20 @@
+{
+  "short_name": "Mainnet Stats",
+  "name": "Vega Mainnet statistics",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

apps/explorer/src/assets/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

apps/explorer/src/index.html

@@ -1,23 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>Explorer</title>
-    <base href="/" />
-    <link
-      rel="preload"
-      href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
     <link
       rel="icon"
       type="image/x-icon"
       href="https://static.vega.xyz/favicon.ico"
     />
-    <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Vega Protocol - VEGA Explorer" />
+    <meta name="og:type" content="website" />
+    <meta name="og:url" content="https://explorer.vega.xyz/" />
+    <meta name="og:title" content="Vega Protocol - Explorer" />
+    <meta name="og:site_name" content="Vega Protocol - Explorer" />
+    <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Vega Protocol - Explorer" />
+    <meta name="twitter:description" content="Vega Protocol - Explorer" />
+    <meta name="twitter:image" content="https://static.vega.xyz/favicon.ico" />
+    <meta name="twitter:image:alt" content="VEGA logo" />
+    <meta name="twitter:site" content="@vegaprotocol" />
+
+    <meta name="description" content="Vega Protocol - Explorer" />
+    <link rel="apple-touch-icon" href="assets/apple-touch-icon.png" />
+    <link rel="manifest" href="assets/manifest.json" />
+    <link
+      rel="preload"
+      href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
+      as="font"
+      type="font/woff2"
+    />
+    <title>VEGA Explorer</title>
     <script src="./assets/env-config.js"></script>
   </head>
   <body class="dark:bg-black h-full w-full">

apps/governance-e2e/.env

@@ -18,6 +18,7 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_VEGA_REST_URL=http://localhost:3008/api/v2/
+NX_SUCCESSOR_MARKETS=true
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

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

@@ -11,7 +11,9 @@ import {
   getDateFormatForSpecifiedDays,
   getProposalFromTitle,
   getProposalInformationFromTable,
+  proposalChangeType,
   submitUniqueRawProposal,
+  validateProposalDetailsDiff,
   voteForProposal,
 } from '../../../../governance-e2e/src/support/governance.functions';
 import {
@@ -26,7 +28,9 @@ import {
 } from '../../support/wallet-functions';
 import type { testFreeformProposal } from '../../support/common-interfaces';
 import { formatDateWithLocalTimezone } from '@vegaprotocol/utils';
+import { createSuccessorMarketProposalTxBody } from '../../support/proposal.functions';
 
+const proposalListItem = '[data-testid="proposals-list-item"]';
 const proposalVoteProgressForPercentage =
   'vote-progress-indicator-percentage-for';
 const proposalVoteProgressAgainstPercentage =
@@ -42,6 +46,7 @@ const viewProposalButton = 'view-proposal-btn';
 const proposalDescriptionToggle = 'proposal-description-toggle';
 const voteBreakdownToggle = 'vote-breakdown-toggle';
 const proposalTermsToggle = 'proposal-json-toggle';
+const marketDataToggle = 'proposal-market-data-toggle';
 
 describe(
   'Governance flow for proposal details',
@@ -354,5 +359,98 @@ describe(
       switchVegaWalletPubKey();
       stakingPageDisassociateAllTokens();
     });
+
+    it('Able to see successor market details with new and updated values', function () {
+      cy.createMarket();
+      cy.reload();
+      waitForSpinner();
+      cy.getByTestId('closed-proposals').within(() => {
+        cy.contains('Add Lorem Ipsum market')
+          .parentsUntil(proposalListItem)
+          .last()
+          .within(() => {
+            cy.getByTestId(viewProposalButton).click();
+          });
+      });
+      getProposalInformationFromTable('ID')
+        .invoke('text')
+        .as('parentMarketId')
+        .then(() => {
+          cy.VegaWalletSubmitProposal(
+            createSuccessorMarketProposalTxBody(this.parentMarketId)
+          );
+        });
+      navigateTo(navigation.proposals);
+      cy.reload();
+      getProposalFromTitle('Test successor market proposal details').within(
+        () => cy.getByTestId(viewProposalButton).click()
+      );
+      // #3003-PMAN-010
+      cy.getByTestId(proposalTermsToggle).click();
+      cy.get('.language-json').within(() => {
+        cy.get('.hljs-attr').should('contain.text', 'parentMarketId');
+        cy.get('.hljs-string').should('contain.text', this.parentMarketId);
+        cy.get('.hljs-attr').should('contain.text', 'insurancePoolFraction');
+        cy.get('.hljs-string').should('contain.text', '0.75');
+      });
+      // 3003-PMAN-011 3003-PMAN-012
+      cy.getByTestId(marketDataToggle).click();
+      cy.getByTestId('proposal-market-data').within(() => {
+        cy.contains('Key details').click();
+        validateProposalDetailsDiff(
+          'Name',
+          proposalChangeType.UPDATED,
+          'Token test market',
+          'Test market 1'
+        );
+        validateProposalDetailsDiff(
+          'Parent Market ID',
+          proposalChangeType.ADDED,
+          this.parentMarketId
+        );
+        validateProposalDetailsDiff(
+          'Insurance Pool Fraction',
+          proposalChangeType.ADDED,
+          '0.75'
+        );
+        validateProposalDetailsDiff(
+          'Trading Mode',
+          proposalChangeType.UPDATED,
+          'No trading',
+          'Opening auction'
+        );
+
+        cy.contains('Instrument').click();
+        validateProposalDetailsDiff(
+          'Market Name',
+          proposalChangeType.UPDATED,
+          'Token test market',
+          'Test market 1'
+        );
+
+        cy.contains('Metadata').click();
+        validateProposalDetailsDiff(
+          'Sector',
+          proposalChangeType.UPDATED,
+          'materials',
+          'tech'
+        );
+      });
+
+      // 3003-PMAN-011
+      cy.get('.underline').contains('Parent Market ID').realHover();
+      cy.getByTestId('tooltip-content', { timeout: 8000 }).should(
+        'contain.text',
+        'The ID of the market this market succeeds.'
+      );
+      cy.get('.underline')
+        .contains('Insurance Pool Fraction')
+        .realMouseUp()
+        .realHover();
+      cy.getByTestId('tooltip-content', { timeout: 8000 }).should(
+        'contain.text',
+        'The fraction of the insurance pool balance that is carried over from the parent market to the successor.'
+      );
+    });
   }
 );

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

@@ -654,44 +654,7 @@ context(
           .find('a')
           .should('have.attr', 'href')
           .and('contain', this.parentMarketId);
-        cy.getByTestId('view-proposal-btn').click();
       });
-      // #3003-PMAN-010
-      cy.getByTestId(proposalJsonToggle).click();
-      cy.get('.language-json').within(() => {
-        cy.get('.hljs-attr').should('contain.text', 'parentMarketId');
-        cy.get('.hljs-string').should('contain.text', this.parentMarketId);
-        cy.get('.hljs-attr').should('contain.text', 'insurancePoolFraction');
-        cy.get('.hljs-string').should('contain.text', '0.75');
-      });
-      cy.getByTestId('proposal-market-data').within(() => {
-        cy.getByTestId('proposal-market-data-toggle').click();
-        cy.contains('Key details').click();
-        // 3003-PMAN-009
-        getMarketProposalDetailsFromTable('Parent Market ID').should(
-          'have.text',
-          this.parentMarketId
-        );
-        getMarketProposalDetailsFromTable('Insurance Pool Fraction').should(
-          'have.text',
-          '0.75'
-        );
-        getMarketProposalDetailsFromTable('Trading Mode').should(
-          'have.text',
-          'No trading'
-        );
-      });
-      // 3003-PMAN-011
-      cy.contains('Parent Market ID').realHover();
-      cy.getByTestId('tooltip-content').should(
-        'contain.text',
-        'The ID of the market this market succeeds.'
-      );
-      cy.contains('Insurance Pool Fraction').realHover();
-      cy.getByTestId('tooltip-content').should(
-        'contain.text',
-        'The fraction of the insurance pool balance that is carried over from the parent market to the successor.'
-      );
     });
 
     after('Disassociate from second wallet key if present', function () {
@@ -730,6 +693,7 @@ context(
         .getByTestId('key-value-table-row')
         .contains(heading)
         .parent()
+        .parent()
         .siblings();
     }
   }

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

@@ -25,6 +25,9 @@ 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';
@@ -55,6 +58,10 @@ 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();
@@ -65,6 +72,10 @@ 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,6 +6,8 @@ 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';
@@ -42,12 +44,20 @@ 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,6 +11,7 @@ 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';
@@ -33,11 +34,22 @@ 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', function () {
+  before('navigate to validators page', () => {
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'ChainId', chainIdQuery());
+      aliasGQLQuery(req, 'Statistics', statisticsQuery());
+    });
     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 () {
@@ -177,6 +189,11 @@ 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);
       });
@@ -263,7 +280,7 @@ context('Validators Page - verify elements on page', function () {
 
         cy.getByTestId(epochCountDown).within(() => {
           cy.get(epochTitle).should('not.be.empty');
-          cy.get(nextEpochInfo).should('contain.text', 'Next epoch');
+          cy.get(nextEpochInfo, txTimeout).should('contain.text', 'Next epoch');
         });
       });
     }

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

@@ -4,6 +4,8 @@ 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';
@@ -14,10 +16,6 @@ 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';
@@ -69,7 +67,7 @@ context(
         cy.get(dialog).within(() => {
           cy.getByTestId(walletDialogHeader)
             .should('be.visible')
-            .and('have.text', 'Connect');
+            .and('have.text', 'Get a Vega wallet');
         });
       });
 
@@ -77,10 +75,7 @@ context(
         cy.getByTestId(connectorsList).within(() => {
           cy.getByTestId('connector-jsonRpc')
             .should('be.visible')
-            .and('have.text', 'Connect Vega wallet');
-          cy.getByTestId('connector-rest')
-            .should('be.visible')
-            .and('have.text', 'Hosted Fairground wallet');
+            .and('have.text', 'Use the Desktop App/CLI');
         });
       });
 
@@ -91,48 +86,14 @@ 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();
       });
@@ -315,6 +276,10 @@ 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-e2e/src/support/governance.functions.ts

@@ -232,6 +232,23 @@ export function getDownloadedProposalJsonPath(proposalType: string) {
   return filepath;
 }
 
+export function validateProposalDetailsDiff(
+  RowName: string,
+  changeType: proposalChangeType,
+  newValue: string,
+  oldValue?: string
+) {
+  cy.contains(RowName)
+    .parentsUntil(proposalInformationTableRows)
+    .parent()
+    .first()
+    .within(() => {
+      cy.contains(changeType).should('be.visible');
+      cy.contains(newValue).should('be.visible');
+      if (oldValue) cy.contains(oldValue).should('have.class', 'line-through');
+    });
+}
+
 function getFormattedTime() {
   const now = new Date();
   const day = now.getDate().toString().padStart(2, '0');
@@ -252,3 +269,8 @@ export enum governanceProposalType {
   FREEFORM = 'Freeform',
   RAW = 'raw proposal',
 }
+
+export enum proposalChangeType {
+  UPDATED = 'Updated',
+  ADDED = 'Added',
+}

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

@@ -211,6 +211,143 @@ export function createNewMarketProposalTxBody(): ProposalSubmissionBody {
   };
 }
 
+// Requires cy.createMarket() to be run to set up parent market
+export function createSuccessorMarketProposalTxBody(
+  parentMarketId: string
+): ProposalSubmissionBody {
+  const MIN_CLOSE_SEC = 10000;
+  const MIN_ENACT_SEC = 10000;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
+  return {
+    proposalSubmission: {
+      rationale: {
+        title: 'Test successor market proposal details',
+        description: 'E2E test for successor market',
+      },
+      terms: {
+        newMarket: {
+          changes: {
+            decimalPlaces: '5',
+            positionDecimalPlaces: '5',
+            linearSlippageFactor: '0.001',
+            quadraticSlippageFactor: '0',
+            lpPriceRange: '10',
+            instrument: {
+              name: 'Token test market',
+              code: 'TEST.24h',
+              future: {
+                settlementAsset:
+                  '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc',
+                quoteName: 'fUSDC',
+                dataSourceSpecForSettlementData: {
+                  external: {
+                    oracle: {
+                      signers: [
+                        {
+                          pubKey: {
+                            key: '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680',
+                          },
+                        },
+                      ],
+                      filters: [
+                        {
+                          key: {
+                            name: 'prices.BTC.value',
+                            type: 'TYPE_INTEGER' as const,
+                            numberDecimalPlaces: '0',
+                          },
+                          conditions: [
+                            {
+                              operator: 'OPERATOR_GREATER_THAN' as const,
+                              value: '0',
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  },
+                },
+                dataSourceSpecForTradingTermination: {
+                  external: {
+                    oracle: {
+                      signers: [
+                        {
+                          pubKey: {
+                            key: '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680',
+                          },
+                        },
+                      ],
+                      filters: [
+                        {
+                          key: {
+                            name: 'trading.terminated.ETH5',
+                            type: 'TYPE_BOOLEAN' as const,
+                          },
+                          conditions: [
+                            {
+                              operator: 'OPERATOR_EQUALS' as const,
+                              value: 'true',
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  },
+                },
+                dataSourceSpecBinding: {
+                  settlementDataProperty: 'prices.BTC.value',
+                  tradingTerminationProperty: 'trading.terminated.ETH5',
+                },
+              },
+            },
+            metadata: [
+              'sector:food',
+              'sector:materials',
+              'source:docs.vega.xyz',
+            ],
+            priceMonitoringParameters: {
+              triggers: [
+                {
+                  horizon: '43200',
+                  probability: '0.9999999',
+                  auctionExtension: '600',
+                },
+              ],
+            },
+            liquidityMonitoringParameters: {
+              targetStakeParameters: {
+                timeWindow: '3600',
+                scalingFactor: 10,
+              },
+              triggeringRatio: '0.7',
+              auctionExtension: '1',
+            },
+            logNormal: {
+              tau: 0.0001140771161,
+              riskAversionParameter: 0.01,
+              params: {
+                mu: 0,
+                r: 0.016,
+                sigma: 0.5,
+              },
+            },
+            successor: {
+              parentMarketId: parentMarketId,
+              insurancePoolFraction: '0.75',
+            },
+          },
+        },
+        closingTimestamp,
+        enactmentTimestamp,
+      },
+    },
+  };
+}
+
 export function mockNetworkUpgradeProposal() {
   cy.mockGQL((req) => {
     aliasGQLQuery(req, 'Nodes', nodeData);

apps/governance/.env

@@ -21,9 +21,12 @@ 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/vega-wallet-dialogs/vega-wallet-dialogs.tsx

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

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

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

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

@@ -0,0 +1,26 @@
+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 { DownloadWalletPrompt } from './download-wallet-prompt';
+import { VegaWalletPrompt } from './vega-wallet-prompt';
 import { usePollForDelegations } from './hooks';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
@@ -85,7 +85,7 @@ const VegaWalletNotConnected = () => {
       >
         {t('connectVegaWalletToUseAssociated')}
       </Button>
-      <DownloadWalletPrompt />
+      <VegaWalletPrompt />
     </>
   );
 };

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

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

apps/governance/src/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en" class="dark bg-black w-full h-full">
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="//static.vega.xyz/fonts.css" />
     <link
       rel="icon"
       type="image/x-icon"
@@ -10,35 +10,42 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Vega Protocol - VEGA Token Vesting" />
+    <meta name="description" content="Vega Protocol - VEGA Governance" />
+    <meta name="og:type" content="website" />
+    <meta name="og:url" content="https://governance.vega.xyz/" />
+    <meta name="og:title" content="Vega Protocol - Governance" />
+    <meta name="og:site_name" content="Vega Protocol - Governance" />
+    <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Vega Protocol - Governance" />
+    <meta name="twitter:description" content="Vega Protocol - Governance" />
+    <meta name="twitter:image" content="https://static.vega.xyz/favicon.ico" />
+    <meta name="twitter:image:alt" content="VEGA logo" />
+    <meta name="twitter:site" content="@vegaprotocol" />
+
+    <meta name="description" content="Vega Protocol - Governance" />
     <link rel="apple-touch-icon" href="assets/apple-touch-icon.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="assets/manifest.json" />
     <link
       rel="preload"
       href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
       as="font"
       type="font/woff2"
-      crossorigin="anonymous"
     />
-    <title>Vega Governance dApp</title>
+    <title>VEGA Governance</title>
     <script src="./assets/env-config.js"></script>
   </head>
   <body class="h-full">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root" class="h-full"></div>
-    <!--
-      This HTML file is a template.
+    <!-- This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
 
       To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+      To create a production bundle, use `npm run build` or `yarn build`. -->
   </body>
 </html>

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

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

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

@@ -32,6 +32,7 @@ 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;
@@ -46,6 +47,7 @@ export const Proposal = ({
   networkParams,
   restData,
   newMarketData,
+  parentMarketData,
   assetData,
   originalMarketProposalRestData,
   mostRecentlyEnactedAssociatedMarketProposal,
@@ -157,7 +159,10 @@ export const Proposal = ({
 
         {newMarketData && (
           <div className="mb-4">
-            <ProposalMarketData marketData={newMarketData} />
+            <ProposalMarketData
+              marketData={newMarketData}
+              parentMarketData={parentMarketData ? parentMarketData : undefined}
+            />
           </div>
         )}
 

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

@@ -14,6 +14,9 @@ import {
   NetworkParams,
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
+import { useParentMarketIdQuery } from '@vegaprotocol/markets';
+import { FLAGS } from '@vegaprotocol/environment';
+import { useSuccessorMarketProposalDetails } from '@vegaprotocol/proposals';
 
 export const ProposalContainer = () => {
   const [
@@ -54,6 +57,10 @@ export const ProposalContainer = () => {
     skip: !params.proposalId,
   });
 
+  const successor = useSuccessorMarketProposalDetails(params.proposalId);
+
+  const isSuccessor = !!successor?.parentMarketId || !!successor.code;
+
   const {
     state: {
       data: originalMarketProposalRestData,
@@ -96,6 +103,36 @@ 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,
@@ -160,6 +197,8 @@ export const ProposalContainer = () => {
         newMarketLoading ||
         assetLoading ||
         networkParamsLoading ||
+        parentMarketIdLoading ||
+        parentMarketLoading ||
         (restLoading ? (restLoading as boolean) : false) ||
         (originalMarketProposalRestLoading
           ? (originalMarketProposalRestLoading as boolean)
@@ -172,15 +211,18 @@ export const ProposalContainer = () => {
         error ||
         newMarketError ||
         assetError ||
+        networkParamsError ||
+        parentMarketIdError ||
+        parentMarketError ||
         restError ||
         originalMarketProposalRestError ||
-        previouslyEnactedMarketProposalsRestError ||
-        networkParamsError
+        previouslyEnactedMarketProposalsRestError
       }
       data={{
         ...data,
         ...networkParams,
         ...(newMarketData ? { newMarketData } : {}),
+        ...(parentMarketData ? { parentMarketData } : {}),
         ...(assetData ? { assetData } : {}),
         ...(restData ? { restData } : {}),
         ...(originalMarketProposalRestData
@@ -197,6 +239,7 @@ export const ProposalContainer = () => {
           networkParams={networkParams}
           restData={restData}
           newMarketData={newMarketData}
+          parentMarketData={parentMarketData}
           assetData={assetData}
           originalMarketProposalRestData={originalMarketProposalRestData}
           mostRecentlyEnactedAssociatedMarketProposal={

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

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

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

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

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

@@ -169,14 +169,13 @@ 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) => {
-        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
-          'true'
-        );
+        // @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');
       });
-      cy.getByTestId('wallet-dialog-title').should('contain.text', 'Connect');
     });
   });
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,118 +5,8 @@ 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
@@ -196,8 +86,6 @@ 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(
-      'Choose wallet app to connect, or to change port or server URL enter a custom wallet location first'
-    );
+    cy.contains('Enter a custom wallet location');
   });
 });

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

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

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

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

apps/trading/.env

@@ -1,4 +1,3 @@
-NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
@@ -13,9 +12,11 @@ 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_PRODUCT_PERPETUALS

apps/trading/assets/env-config.js

@@ -0,0 +1 @@
+window._env_ = {};

apps/trading/assets/manifest.json

@@ -0,0 +1,20 @@
+{
+  "short_name": "Mainnet Stats",
+  "name": "Vega Mainnet statistics",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

apps/trading/assets/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

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

@@ -10,7 +10,6 @@ import { TradeGrid } from './trade-grid';
 import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { ViewType, useSidebar } from '../../components/sidebar';
 
 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
@@ -65,8 +64,6 @@ export const MarketPage = () => {
   const update = useGlobalStore((store) => store.update);
   const lastMarketId = useGlobalStore((store) => store.marketId);
 
-  const onSelect = useMarketClickHandler();
-
   const { data, error, loading } = useMarket(marketId);
 
   useEffect(() => {
@@ -87,7 +84,6 @@ export const MarketPage = () => {
       return (
         <TradeGrid
           market={data}
-          onSelect={onSelect}
           pinnedAsset={
             data?.tradableInstrument.instrument.product.settlementAsset
           }
@@ -97,11 +93,12 @@ export const MarketPage = () => {
     return (
       <TradePanels
         market={data}
-        onSelect={onSelect}
-        onClickCollateral={() => navigate('/portfolio')}
+        pinnedAsset={
+          data?.tradableInstrument.instrument.product.settlementAsset
+        }
       />
     );
-  }, [largeScreen, data, onSelect, navigate]);
+  }, [largeScreen, data]);
 
   if (!data && marketId) {
     return (

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

@@ -9,7 +9,6 @@ import { OracleBanner } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import {
   ResizableGrid,
   ResizableGridPanel,
@@ -24,7 +23,6 @@ import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradeGridProps {
   market: Market | null;
-  onSelect: (marketId: string, metaKey?: boolean) => void;
   pinnedAsset?: PinnedAsset;
 }
 
@@ -40,20 +38,19 @@ const MainGrid = memo(
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
       id: 'middle-1',
     });
-    const onMarketClick = useMarketClickHandler(true);
 
     return (
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
-        <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
-          <ResizableGrid
-            proportionalLayout={false}
-            minSize={200}
-            onChange={handleOnMiddleLayoutChange}
-          >
+        <ResizableGridPanel
+          preferredSize={sizes[0]}
+          priority={LayoutPriority.High}
+          minSize={200}
+        >
+          <ResizableGrid onChange={handleOnMiddleLayoutChange}>
             <ResizableGridPanel
               priority={LayoutPriority.High}
               minSize={200}
-              preferredSize={sizesMiddle[1] || '50%'}
+              preferredSize={sizesMiddle[0] || '75%'}
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-left">
@@ -74,8 +71,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,37 +88,34 @@ 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">
               <Tab id="positions" name={t('Positions')}>
-                <TradingViews.positions.component
-                  onMarketClick={onMarketClick}
-                />
+                <TradingViews.positions.component />
               </Tab>
-              <Tab id="open-orders" name={t('Open')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Open}
-                />
+              <Tab
+                id="open-orders"
+                name={t('Open')}
+                menu={<TradingViews.activeOrders.menu marketId={marketId} />}
+              >
+                <TradingViews.orders.component filter={Filter.Open} />
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Closed}
-                />
+                <TradingViews.orders.component filter={Filter.Closed} />
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Rejected}
-                />
+                <TradingViews.orders.component filter={Filter.Rejected} />
               </Tab>
-              <Tab id="orders" name={t('All')}>
-                <TradingViews.orders.component marketId={marketId} />
+              <Tab
+                id="orders"
+                name={t('All')}
+                menu={<TradingViews.orders.menu marketId={marketId} />}
+              >
+                <TradingViews.orders.component />
               </Tab>
               {FLAGS.STOP_ORDERS ? (
                 <Tab id="stop-orders" name={t('Stop orders')}>
@@ -129,17 +123,14 @@ const MainGrid = memo(
                 </Tab>
               ) : null}
               <Tab id="fills" name={t('Fills')}>
-                <TradingViews.fills.component
-                  marketId={marketId}
-                  onMarketClick={onMarketClick}
-                />
+                <TradingViews.fills.component marketId={marketId} />
               </Tab>
-              <Tab id="accounts" name={t('Collateral')}>
-                <TradingViews.collateral.component
-                  pinnedAsset={pinnedAsset}
-                  onMarketClick={onMarketClick}
-                  hideButtons
-                />
+              <Tab
+                id="accounts"
+                name={t('Collateral')}
+                menu={<TradingViews.collateral.menu />}
+              >
+                <TradingViews.collateral.component pinnedAsset={pinnedAsset} />
               </Tab>
             </Tabs>
           </TradeGridChild>

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

@@ -1,13 +1,9 @@
 import type { PinnedAsset } from '@vegaprotocol/accounts';
 import type { Market } from '@vegaprotocol/markets';
 import { OracleBanner } from '@vegaprotocol/markets';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
 import type { TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
-import { memo, useState } from 'react';
+import { useState } from 'react';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,33 +16,14 @@ import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
   market: Market | null;
-  onSelect: (marketId: string, metaKey?: boolean) => void;
-  onMarketClick?: (marketId: string) => void;
-  onOrderTypeClick?: (marketId: string) => void;
-  onClickCollateral: () => void;
   pinnedAsset?: PinnedAsset;
 }
 
-export const TradePanels = ({
-  market,
-  onSelect,
-  onClickCollateral,
-  pinnedAsset,
-}: TradePanelsProps) => {
-  const onMarketClick = useMarketClickHandler(true);
-  const onOrderTypeClick = useMarketLiquidityClickHandler();
-
+export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
   const [view, setView] = useState<TradingView>('candles');
 
   const renderView = () => {
-    const Component = memo<{
-      marketId: string;
-      onSelect: (marketId: string, metaKey?: boolean) => void;
-      onMarketClick?: (marketId: string) => void;
-      onOrderTypeClick?: (marketId: string) => void;
-      onClickCollateral: () => void;
-      pinnedAsset?: PinnedAsset;
-    }>(TradingViews[view].component);
+    const Component = TradingViews[view].component;
 
     if (!Component) {
       throw new Error(`No component for view: ${view}`);
@@ -54,16 +31,7 @@ export const TradePanels = ({
 
     if (!market) return <Splash>{NO_MARKET}</Splash>;
 
-    return (
-      <Component
-        marketId={market?.id}
-        onSelect={onSelect}
-        onClickCollateral={onClickCollateral}
-        pinnedAsset={pinnedAsset}
-        onMarketClick={onMarketClick}
-        onOrderTypeClick={onOrderTypeClick}
-      />
-    );
+    return <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
   };
 
   const renderMenu = () => {
@@ -71,9 +39,10 @@ export const TradePanels = ({
 
     if ('menu' in viewCfg) {
       const Menu = viewCfg.menu;
+
       return (
         <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          <Menu />
+          <Menu marketId={market?.id || ''} />
         </div>
       );
     }

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

@@ -6,7 +6,7 @@ import {
   CandlesChartContainer,
   CandlesMenu,
 } from '@vegaprotocol/candles-chart';
-import { Filter } from '@vegaprotocol/orders';
+import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
 import { OrderbookContainer } from '../../components/orderbook-container';
 import { FillsContainer } from '../../components/fills-container';
@@ -16,6 +16,7 @@ import { LiquidityContainer } from '../../components/liquidity-container';
 import type { OrderContainerProps } from '../../components/orders-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { StopOrdersContainer } from '../../components/stop-orders-container';
+import { AccountsMenu } from '../../components/accounts-menu';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -62,6 +63,7 @@ export const TradingViews = {
     component: (props: OrderContainerProps) => (
       <OrdersContainer {...props} filter={Filter.Open} />
     ),
+    menu: OpenOrdersMenu,
   },
   closedOrders: {
     label: 'Closed',
@@ -78,11 +80,16 @@ export const TradingViews = {
   orders: {
     label: 'All',
     component: OrdersContainer,
+    menu: OpenOrdersMenu,
   },
   stopOrders: {
     label: 'Stop',
     component: StopOrdersContainer,
   },
-  collateral: { label: 'Collateral', component: AccountsContainer },
+  collateral: {
+    label: 'Collateral',
+    component: AccountsContainer,
+    menu: AccountsMenu,
+  },
   fills: { label: 'Fills', component: FillsContainer },
 };

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

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

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

@@ -1,44 +0,0 @@
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
-import { DepositsTable } from '@vegaprotocol/deposits';
-import { depositsProvider } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/i18n';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useRef } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
-import { useSidebar, ViewType } from '../../components/sidebar';
-
-export const DepositsContainer = () => {
-  const gridRef = useRef<AgGridReact | null>(null);
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, error } = useDataProvider({
-    dataProvider: depositsProvider,
-    variables: { partyId: pubKey || '' },
-    skip: !pubKey,
-  });
-  const setView = useSidebar((store) => store.setView);
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-  return (
-    <div className="h-full">
-      <DepositsTable
-        rowData={data}
-        ref={gridRef}
-        overlayNoRowsTemplate={error ? error.message : t('No deposits')}
-      />
-      {!isReadOnly && (
-        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => setView({ type: ViewType.Deposit })}
-            data-testid="deposit-button"
-          >
-            {t('Deposit')}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};

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

@@ -6,12 +6,11 @@ import { t } from '@vegaprotocol/i18n';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { AccountsContainer } from '../../components/accounts-container';
-import { DepositsContainer } from './deposits-container';
+import { DepositsContainer } from '../../components/deposits-container';
 import { FillsContainer } from '../../components/fills-container';
 import { PositionsContainer } from '../../components/positions-container';
-import { WithdrawalsContainer } from './withdrawals-container';
+import { WithdrawalsContainer } from '../../components/withdrawals-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
 import { AccountHistoryContainer } from './account-history-container';
@@ -21,6 +20,9 @@ import {
   usePaneLayout,
 } from '../../components/resizable-grid';
 import { ViewType, useSidebar } from '../../components/sidebar';
+import { AccountsMenu } from '../../components/accounts-menu';
+import { DepositsMenu } from '../../components/deposits-menu';
+import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -51,7 +53,6 @@ export const Portfolio = () => {
     }
   }, [init, view, setView]);
 
-  const onMarketClick = useMarketClickHandler(true);
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';
   return (
@@ -64,13 +65,13 @@ export const Portfolio = () => {
                 <AccountHistoryContainer />
               </Tab>
               <Tab id="positions" name={t('Positions')}>
-                <PositionsContainer onMarketClick={onMarketClick} allKeys />
+                <PositionsContainer allKeys />
               </Tab>
               <Tab id="orders" name={t('Orders')}>
                 <OrdersContainer />
               </Tab>
               <Tab id="fills" name={t('Fills')}>
-                <FillsContainer onMarketClick={onMarketClick} />
+                <FillsContainer />
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
                 <LedgerContainer />
@@ -85,16 +86,21 @@ export const Portfolio = () => {
         >
           <PortfolioGridChild>
             <Tabs storageKey="console-portfolio-bottom">
-              <Tab id="collateral" name={t('Collateral')}>
+              <Tab
+                id="collateral"
+                name={t('Collateral')}
+                menu={<AccountsMenu />}
+              >
                 <AccountsContainer />
               </Tab>
-              <Tab id="deposits" name={t('Deposits')}>
+              <Tab id="deposits" name={t('Deposits')} menu={<DepositsMenu />}>
                 <DepositsContainer />
               </Tab>
               <Tab
                 id="withdrawals"
                 name={t('Withdrawals')}
                 indicator={<WithdrawalsIndicator />}
+                menu={<WithdrawalsMenu />}
               >
                 <WithdrawalsContainer />
               </Tab>

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

@@ -1,49 +0,0 @@
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
-import {
-  withdrawalProvider,
-  WithdrawalsTable,
-  useIncompleteWithdrawals,
-} from '@vegaprotocol/withdraws';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { t } from '@vegaprotocol/i18n';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { ViewType, useSidebar } from '../../components/sidebar';
-
-export const WithdrawalsContainer = () => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, error } = useDataProvider({
-    dataProvider: withdrawalProvider,
-    variables: { partyId: pubKey || '' },
-    skip: !pubKey,
-  });
-  const setView = useSidebar((store) => store.setView);
-  const { ready, delayed } = useIncompleteWithdrawals();
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-  return (
-    <>
-      <div className="h-full relative">
-        <WithdrawalsTable
-          data-testid="withdrawals-history"
-          rowData={data}
-          overlayNoRowsTemplate={error ? error.message : t('No withdrawals')}
-          ready={ready}
-          delayed={delayed}
-        />
-      </div>
-      {!isReadOnly && (
-        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => setView({ type: ViewType.Withdraw })}
-            data-testid="withdraw-dialog-button"
-          >
-            {t('Make withdrawal')}
-          </Button>
-        </div>
-      )}
-    </>
-  );
-};

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

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
@@ -12,16 +11,14 @@ import { useDataGridEvents } from '@vegaprotocol/datagrid';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { ViewType, useSidebar } from '../sidebar';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
 export const AccountsContainer = ({
   pinnedAsset,
-  hideButtons,
-  onMarketClick,
 }: {
   pinnedAsset?: PinnedAsset;
-  hideButtons?: boolean;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }) => {
+  const onMarketClick = useMarketClickHandler(true);
   const { pubKey, isReadOnly } = useVegaWallet();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   const setView = useSidebar((store) => store.setView);
@@ -48,44 +45,23 @@ export const AccountsContainer = ({
   }
 
   return (
-    <div className="h-full relative">
-      <AccountManager
-        partyId={pubKey}
-        onClickAsset={onClickAsset}
-        onClickWithdraw={(assetId) => {
-          setView({ type: ViewType.Withdraw, assetId });
-        }}
-        onClickDeposit={(assetId) => {
-          setView({ type: ViewType.Deposit, assetId });
-        }}
-        onClickTransfer={(assetId) => {
-          setView({ type: ViewType.Transfer, assetId });
-        }}
-        onMarketClick={onMarketClick}
-        isReadOnly={isReadOnly}
-        pinnedAsset={pinnedAsset}
-        gridProps={gridStoreCallbacks}
-      />
-      {!isReadOnly && !hideButtons && (
-        <div className="flex gap-2 justify-end p-2 absolute bottom-0 right-0 dark:bg-black/75 bg-white/75 rounded">
-          <Button
-            variant="primary"
-            size="sm"
-            data-testid="open-transfer"
-            onClick={() => setView({ type: ViewType.Transfer })}
-          >
-            {t('Transfer')}
-          </Button>
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => setView({ type: ViewType.Deposit })}
-          >
-            {t('Deposit')}
-          </Button>
-        </div>
-      )}
-    </div>
+    <AccountManager
+      partyId={pubKey}
+      onClickAsset={onClickAsset}
+      onClickWithdraw={(assetId) => {
+        setView({ type: ViewType.Withdraw, assetId });
+      }}
+      onClickDeposit={(assetId) => {
+        setView({ type: ViewType.Deposit, assetId });
+      }}
+      onClickTransfer={(assetId) => {
+        setView({ type: ViewType.Transfer, assetId });
+      }}
+      onMarketClick={onMarketClick}
+      isReadOnly={isReadOnly}
+      pinnedAsset={pinnedAsset}
+      gridProps={gridStoreCallbacks}
+    />
   );
 };
 

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

@@ -0,0 +1,27 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const AccountsMenu = () => {
+  const setView = useSidebar((store) => store.setView);
+
+  return (
+    <>
+      <TradingButton
+        intent={Intent.Primary}
+        size="extra-small"
+        data-testid="open-transfer"
+        onClick={() => setView({ type: ViewType.Transfer })}
+      >
+        {t('Transfer')}
+      </TradingButton>
+      <TradingButton
+        intent={Intent.Primary}
+        size="extra-small"
+        onClick={() => setView({ type: ViewType.Deposit })}
+      >
+        {t('Deposit')}
+      </TradingButton>
+    </>
+  );
+};

apps/trading/components/accounts-menu/index.ts

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

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

@@ -0,0 +1,24 @@
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { DepositsTable } from '@vegaprotocol/deposits';
+import { depositsProvider } from '@vegaprotocol/deposits';
+import { t } from '@vegaprotocol/i18n';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+
+export const DepositsContainer = () => {
+  const { pubKey } = useVegaWallet();
+  const { data, error } = useDataProvider({
+    dataProvider: depositsProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+  return (
+    <DepositsTable
+      rowData={data}
+      overlayNoRowsTemplate={error ? error.message : t('No deposits')}
+    />
+  );
+};

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

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

apps/trading/components/deposits-menu/deposits-menu.tsx

@@ -0,0 +1,18 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const DepositsMenu = () => {
+  const setView = useSidebar((store) => store.setView);
+
+  return (
+    <TradingButton
+      intent={Intent.Primary}
+      size="extra-small"
+      onClick={() => setView({ type: ViewType.Deposit })}
+      data-testid="deposit-button"
+    >
+      {t('Deposit')}
+    </TradingButton>
+  );
+};

apps/trading/components/deposits-menu/index.ts

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

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

@@ -7,14 +7,10 @@ import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
-export const FillsContainer = ({
-  marketId,
-  onMarketClick,
-}: {
-  marketId?: string;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-}) => {
+export const FillsContainer = ({ marketId }: { marketId?: string }) => {
+  const onMarketClick = useMarketClickHandler(true);
   const { pubKey } = useVegaWallet();
 
   const gridStore = useFillsStore((store) => store.gridStore);

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

@@ -134,6 +134,20 @@ describe('MarketSelector', () => {
     error: undefined,
   });
 
+  it('Button "All" should be selected by default', () => {
+    const buttons = ['All', 'Futures', 'Spot', 'Perpetuals'];
+    render(
+      <MemoryRouter>
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+      </MemoryRouter>
+    );
+    screen
+      .getAllByTestId(/^product-(All|Future|Spot|Perpetual)$/)
+      .forEach((elem, i) => {
+        expect(elem.textContent).toEqual(buttons[i]);
+      });
+  });
+
   it('renders only active markets', () => {
     render(
       <MemoryRouter>
@@ -169,6 +183,12 @@ describe('MarketSelector', () => {
       activeMarkets.length
     );
     expect(screen.queryByTestId('no-items')).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId('product-All'));
+    expect(screen.queryAllByTestId(/market-\d/)).toHaveLength(
+      activeMarkets.length
+    );
+    expect(screen.queryByTestId('no-items')).not.toBeInTheDocument();
   });
 
   it('filters by search term', async () => {

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

@@ -39,7 +39,7 @@ export const MarketSelector = ({
 }) => {
   const [filter, setFilter] = useState<Filter>({
     searchTerm: '',
-    product: Product.Future,
+    product: Product.All,
     sort: Sort.None,
     assets: [],
   });

apps/trading/components/market-selector/product-selector.tsx

@@ -6,6 +6,7 @@ import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 
 // Make sure these match the available __typename properties on product
 export const Product = {
+  All: 'All',
   Future: 'Future',
   Spot: 'Spot',
   Perpetual: 'Perpetual',
@@ -16,6 +17,7 @@ export type ProductType = keyof typeof Product;
 const ProductTypeMapping: {
   [key in ProductType]: string;
 } = {
+  [Product.All]: 'All',
   [Product.Future]: 'Futures',
   [Product.Spot]: 'Spot',
   [Product.Perpetual]: 'Perpetuals',
@@ -49,8 +51,12 @@ export const ProductSelector = ({
           </button>
         );
       })}
-      <Link to={Routes.MARKETS} className="flex items-center gap-2 ml-auto">
-        <span className="underline underline-offset-4">{t('All markets')}</span>
+      <Link
+        to={Routes.MARKETS}
+        className="flex items-center gap-2 ml-auto"
+        title={t('See all markets')}
+      >
+        <span className="underline underline-offset-4">{t('Browse')}</span>
         <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
       </Link>
     </div>

apps/trading/components/market-selector/use-market-selector-list.spec.tsx

@@ -120,6 +120,13 @@ describe('useMarketSelectorList', () => {
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[2]]);
+    rerender({
+      searchTerm: '',
+      product: Product.All,
+      sort: Sort.None,
+      assets: [],
+    });
+    expect(result.current.markets).toEqual(markets);
   });
 
   it('filters by asset', () => {

apps/trading/components/market-selector/use-market-selector-list.ts

@@ -5,6 +5,7 @@ import { calcCandleVolume, useMarketList } from '@vegaprotocol/markets';
 import { priceChangePercentage } from '@vegaprotocol/utils';
 import type { Filter } from '../../components/market-selector/market-selector';
 import { Sort } from './sort-dropdown';
+import { Product } from './product-selector';
 
 // Used for sort order and filter
 const MARKET_TEMPLATE = [
@@ -28,7 +29,10 @@ export const useMarketSelectorList = ({
       .filter((m) => isMarketActive(m.state))
       // only selected product type
       .filter((m) => {
-        if (m.tradableInstrument.instrument.product.__typename === product) {
+        if (
+          product === Product.All ||
+          m.tradableInstrument.instrument.product.__typename === product
+        ) {
           return true;
         }
         return false;

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

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

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

@@ -25,11 +25,10 @@ export const FilterStatusValue = {
 };
 
 export interface OrderContainerProps {
-  marketId?: string;
   filter?: Filter;
 }
 
-export const OrdersContainer = ({ marketId, filter }: OrderContainerProps) => {
+export const OrdersContainer = ({ filter }: OrderContainerProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const onMarketClick = useMarketClickHandler(true);
   const onOrderTypeClick = useMarketLiquidityClickHandler();
@@ -45,7 +44,6 @@ export const OrdersContainer = ({ marketId, filter }: OrderContainerProps) => {
   return (
     <OrderListManager
       partyId={pubKey}
-      marketId={marketId}
       filter={filter}
       onMarketClick={onMarketClick}
       onOrderTypeClick={onOrderTypeClick}

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

@@ -7,14 +7,10 @@ import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
-export const PositionsContainer = ({
-  onMarketClick,
-  allKeys,
-}: {
-  onMarketClick?: (marketId: string) => void;
-  allKeys?: boolean;
-}) => {
+export const PositionsContainer = ({ allKeys }: { allKeys?: boolean }) => {
+  const onMarketClick = useMarketClickHandler(true);
   const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
 
   const gridStore = usePositionsStore((store) => store.gridStore);

apps/trading/components/sidebar/sidebar.tsx

@@ -156,14 +156,16 @@ export const SidebarButton = ({
     }
   };
 
-  const buttonClasses = classNames('flex items-center p-1 rounded', {
-    'text-vega-clight-200 dark:text-vega-cdark-200 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500':
-      !view || view !== currView?.type,
-    'bg-vega-yellow hover:bg-vega-yellow-550 text-black':
-      view && view === currView?.type,
-    'cursor-not-allowed text-vega-clight-500 hover:bg-inherit dark:text-vega-cdark-500 dark:hover:bg-inherit':
-      disabled,
-  });
+  const buttonClasses = classNames(
+    'flex items-center p-1 rounded',
+    'disabled:cursor-not-allowed disabled:text-vega-clight-500 dark:disabled:text-vega-cdark-500',
+    {
+      'text-vega-clight-200 dark:text-vega-cdark-200 enabled:hover:bg-vega-clight-500 dark:enabled:hover:bg-vega-cdark-500':
+        !view || view !== currView?.type,
+      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 text-black':
+        view && view === currView?.type,
+    }
+  );
 
   return (
     <Tooltip

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  withdrawalProvider,
+  WithdrawalsTable,
+  useIncompleteWithdrawals,
+} from '@vegaprotocol/withdraws';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { t } from '@vegaprotocol/i18n';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+
+export const WithdrawalsContainer = () => {
+  const { pubKey } = useVegaWallet();
+  const { data, error } = useDataProvider({
+    dataProvider: withdrawalProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const { ready, delayed } = useIncompleteWithdrawals();
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+  return (
+    <WithdrawalsTable
+      data-testid="withdrawals-history"
+      rowData={data}
+      overlayNoRowsTemplate={error ? error.message : t('No withdrawals')}
+      ready={ready}
+      delayed={delayed}
+    />
+  );
+};

apps/trading/components/withdrawals-menu/index.ts

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

apps/trading/components/withdrawals-menu/withdrawals-menu.tsx

@@ -0,0 +1,18 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const WithdrawalsMenu = () => {
+  const setView = useSidebar((store) => store.setView);
+
+  return (
+    <TradingButton
+      intent={Intent.Primary}
+      size="extra-small"
+      onClick={() => setView({ type: ViewType.Withdraw })}
+      data-testid="withdraw-dialog-button"
+    >
+      {t('Make withdrawal')}
+    </TradingButton>
+  );
+};

apps/trading/lib/vega-connectors.ts

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

apps/trading/pages/index.page.tsx

@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { ClientRouter } from './client-router';
 
 /**
@@ -6,5 +7,30 @@ import { ClientRouter } from './client-router';
  * have to serve a static site via next export
  */
 export default function Index() {
-  return <ClientRouter />;
+  return (
+    <>
+      <Head>
+        <meta charSet="utf-8" />
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Vega Protocol - Console" />
+
+        <link rel="apple-touch-icon" href="assets/apple-touch-icon.png" />
+        <link rel="manifest" href="assets/manifest.json" />
+        <link
+          rel="preload"
+          href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
+          as="font"
+          type="font/woff2"
+        />
+        <title>VEGA Console dApp</title>
+      </Head>
+      <ClientRouter />
+    </>
+  );
 }

commitlint.config-ci.js

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

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

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

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

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

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

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

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

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

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

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

libs/candles-chart/jest.config.ts

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

libs/cypress/src/lib/commands/add-connect-public-key.ts

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

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

@@ -62,10 +62,27 @@ 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
+  req: CyHttpMessages.IncomingHttpRequest,
+  token: string
 ) => {
   if (hasMethod(req, 'client.connect_wallet')) {
     req.alias = 'client.connect_wallet';
@@ -82,4 +99,20 @@ 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,5 +21,4 @@ export * from './lib/type-helpers';
 
 export * from './lib/cells/grid-progress-bar';
 
-export * from './lib/ag-grid-update';
 export * from './lib/use-datagrid-events';

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

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

libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx

@@ -1,4 +1,4 @@
-import { Intent, Notification, Link } from '@vegaprotocol/ui-toolkit';
+import { Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 
 interface ZeroBalanceErrorProps {
@@ -6,13 +6,11 @@ interface ZeroBalanceErrorProps {
     id: string;
     symbol: string;
   };
-  onClickCollateral?: () => void;
   onDeposit: (assetId: string) => void;
 }
 
 export const ZeroBalanceError = ({
   asset,
-  onClickCollateral,
   onDeposit,
 }: ZeroBalanceErrorProps) => {
   return (
@@ -25,12 +23,6 @@ export const ZeroBalanceError = ({
             'You need %s in your wallet to trade in this market. ',
             asset.symbol
           )}
-          {onClickCollateral && (
-            <>
-              {t('See all your')}{' '}
-              <Link onClick={onClickCollateral}>collateral</Link>.
-            </>
-          )}
         </>
       }
       buttonProps={{

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

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

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

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

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

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