chore: run and remove migrations.json

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx", "eslint-plugin-unicorn", "jsx-a11y", "jest"],
+  "plugins": ["@nx", "eslint-plugin-unicorn", "jsx-a11y", "jest"],
   "settings": {
     "jsx-a11y": {
       "components": {
@@ -18,7 +18,7 @@
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "extends": ["plugin:jsx-a11y/strict"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -56,7 +56,7 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {
         "@typescript-eslint/ban-ts-comment": [
           "error",
@@ -80,14 +80,19 @@
     },
     {
       "files": ["*.spec.ts", "*.spec.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript", "plugin:jest/recommended"],
+      "extends": ["plugin:@nx/typescript", "plugin:jest/recommended"],
       "rules": {
-        "jest/consistent-test-it": ["error", { "fn": "it" }]
+        "jest/consistent-test-it": [
+          "error",
+          {
+            "fn": "it"
+          }
+        ]
       }
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     }
   ]

.github/workflows/publish-dist.yml

@@ -113,19 +113,19 @@ jobs:
 
       - name: Build local dist
         run: |
-          flags=""
+          envCmd=""
           if [[ ! -z "${{ env.ENV_NAME }}" ]]; then
-            flags="--env=${{ env.ENV_NAME }}"
+            envCmd="yarn env-cmd -f ./apps/${{ matrix.app }}/.env.${{ env.ENV_NAME }}"
           fi
 
           if [ "${{ matrix.app }}" = "trading" ]; then
-            yarn nx export trading $flags || (yarn install && yarn nx export trading $flags)
+            $envCmd yarn nx export trading || (yarn install && $envCmd yarn nx export trading)
             DIST_LOCATION=dist/apps/trading/exported
           elif [ "${{ matrix.app }}" = "ui-toolkit" ]; then
             NODE_ENV=production yarn nx run ui-toolkit:build-storybook
             DIST_LOCATION=dist/storybook/ui-toolkit
           else
-            yarn nx build ${{ matrix.app }} $flags || (yarn install && yarn nx build ${{ matrix.app }} $flags)
+            $envCmd yarn nx build ${{ matrix.app }} || (yarn install && $envCmd yarn nx build ${{ matrix.app }})
             DIST_LOCATION=dist/apps/${{ matrix.app }}
           fi
           mv $DIST_LOCATION dist-result
@@ -228,6 +228,22 @@ jobs:
           AWS_REGION: 'eu-west-1'
           SOURCE_DIR: 'dist-result'
 
+      - name: Install aws CLI
+        if: ${{ github.event_name == 'push' && ( matrix.app != 'trading' || (matrix.app == 'trading' && !( endsWith(github.ref, 'main') || endsWith(github.ref, 'release/testnet') ) ) ) }}
+        uses: unfor19/install-aws-cli-action@master
+
+      - name: Perform cache invalidation
+        if: ${{ github.event_name == 'push' && ( matrix.app != 'trading' || (matrix.app == 'trading' && !( endsWith(github.ref, 'main') || endsWith(github.ref, 'release/testnet') ) ) ) }}
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: 'eu-west-1'
+        run: |
+          echo "Looking for distribution for bucket: ${{ env.BUCKET_NAME }}"
+          id=$(aws cloudfront list-distributions | jq -Mrc '.DistributionList.Items | .[] | select(.DefaultCacheBehavior.TargetOriginId == "${{ env.BUCKET_NAME }}") | .Id')
+          echo "Found id is: ${id}"
+          aws cloudfront create-invalidation --distribution-id $id --paths "/*"
+
       - name: Add preview label
         uses: actions-ecosystem/action-add-labels@v1
         if: ${{ github.event_name == 'pull_request' || github.event_name == 'pull_request_target' }}

.storybook/main.js

@@ -1,29 +0,0 @@
-module.exports = {
-  stories: [],
-  addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-viewport',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: null,
-        transcludeMarkdown: true,
-      },
-    },
-    '@storybook/addon-controls',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-toolbars',
-    '@storybook/addon-measure',
-    '@storybook/addon-outline',
-    '@storybook/addon-a11y',
-  ],
-  // uncomment the property below if you want to apply some webpack config globally
-  // webpackFinal: async (config, { configType }) => {
-  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
-
-  //   // Return the altered config
-  //   return config;
-  // },
-};

.storybook/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "exclude": [
-    "../**/*.spec.js",
-    "../**/*.test.js",
-    "../**/*.spec.ts",
-    "../**/*.test.ts",
-    "../**/*.spec.tsx",
-    "../**/*.test.tsx",
-    "../**/*.spec.jsx",
-    "../**/*.test.jsx"
-  ],
-  "include": ["../**/*"]
-}

apps/explorer-e2e/project.json

@@ -1,10 +1,11 @@
 {
+  "name": "explorer-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/explorer-e2e/src",
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/explorer-e2e/cypress.config.js",
         "devServerTarget": "explorer:serve"
@@ -16,14 +17,14 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/explorer-e2e/**/*.{js,ts}"]
       }
     },
     "build": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/explorer-e2e/"

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

@@ -27,6 +27,11 @@ context('Home Page', function () {
         16: 'Chain ID',
       };
 
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.get('[data-testid="stats-title"]')
         .each(($list, index) => {
           cy.wrap($list).should('contain.text', statTitles[index]);

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

@@ -34,6 +34,11 @@ context('Network parameters page', { tags: '@smoke' }, function () {
           const parameterName = network_parameter[0];
           const parameterValue = network_parameter[1];
           if (this.networkParameterFormat.json.includes(parameterName)) {
+            /**
+             * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+             * You should use .then() to chain commands instead.
+             * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+             **/
             cy.get(tableRows)
               .contains(parameterName)
               .should('be.visible')
@@ -65,6 +70,11 @@ context('Network parameters page', { tags: '@smoke' }, function () {
           if (this.networkParameterFormat.percentage.includes(parameterName)) {
             const formattedPercentageParameter =
               (parseFloat(parameterValue) * 100).toFixed(0) + '%';
+            /**
+             * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+             * You should use .then() to chain commands instead.
+             * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+             **/
             cy.get(tableRows)
               .contains(parameterName)
               .should('be.visible')
@@ -148,6 +158,11 @@ context('Network parameters page', { tags: '@smoke' }, function () {
             cy.convert_number_to_max_four_decimal(parameterValue)
               .add_commas_to_number_if_large_enough()
               .then((parameterValueFormatted) => {
+                /**
+                 * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+                 * You should use .then() to chain commands instead.
+                 * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+                 **/
                 cy.get(tableRows)
                   .contains(parameterName)
                   .should('be.visible')
@@ -179,6 +194,11 @@ context('Network parameters page', { tags: '@smoke' }, function () {
             cy.convert_number_to_max_eighteen_decimal(parameterValue)
               .add_commas_to_number_if_large_enough()
               .then((parameterValueFormatted) => {
+                /**
+                 * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+                 * You should use .then() to chain commands instead.
+                 * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+                 **/
                 cy.get(tableRows)
                   .contains(parameterName)
                   .should('be.visible')

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

@@ -170,6 +170,11 @@ context.skip('Parties page', { tags: '@regression' }, function () {
       const sideMenuBackground = '.absolute';
 
       // Engage dark mode if not allready set
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.get(sideMenuBackground)
         .should('have.css', 'background-color')
         .then((background_color) => {

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

@@ -60,16 +60,31 @@ context.skip('Transactions page', function () {
             });
           cy.get('block').should('not.be.empty');
           cy.get('encoded-tnx').should('not.be.empty');
+          /**
+           * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+           * You should use .then() to chain commands instead.
+           * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+           **/
           cy.get('tx-type')
             .should('not.be.empty')
             .invoke('text')
             .then((txTypeTxt) => {
               if (txTypeTxt == 'Order Submission') {
+                /**
+                 * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+                 * You should use .then() to chain commands instead.
+                 * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+                 **/
                 cy.get('.hljs-attr')
                   .should('have.length.at.least', 8)
                   .each(($propertyName) => {
                     cy.wrap($propertyName).should('not.be.empty');
                   });
+                /**
+                 * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+                 * You should use .then() to chain commands instead.
+                 * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+                 **/
                 cy.get('.hljs-string')
                   .should('have.length.at.least', 8)
                   .each(($propertyValue) => {

apps/explorer/.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     [
-      "@nrwl/react/babel",
+      "@nx/react/babel",
       {
         "runtime": "automatic"
       }

apps/explorer/.eslintrc.json

@@ -1,6 +1,6 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/explorer/README.md

@@ -39,7 +39,7 @@ Example configurations are provided here:
 For convenience, you can boot the app injecting one of the configurations above by running:
 
 ```bash
-yarn nx run explorer:serve --env={env} # e.g. stagnet1
+yarn env-cmd -f .\apps\explorer\.env.{env} yarn nx run explorer:serve # e.g. stagnet1
 ```
 
 There are a few different configuration options offered for this app:

apps/explorer/jest.config.ts

@@ -4,8 +4,8 @@ export default {
   displayName: 'explorer',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': 'babel-jest',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/explorer',

apps/explorer/project.json

@@ -1,10 +1,11 @@
 {
+  "name": "explorer",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/explorer/src",
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "./tools/executors/webpack:build",
+      "executor": "@nx/webpack:webpack",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -38,7 +39,7 @@
       }
     },
     "serve": {
-      "executor": "./tools/executors/webpack:serve",
+      "executor": "@nx/webpack:dev-server",
       "options": {
         "port": 3000,
         "buildTarget": "explorer:build:development",
@@ -52,22 +53,28 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/explorer/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/explorer"],
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/apps/explorer"],
       "options": {
         "jestConfig": "apps/explorer/jest.config.ts",
         "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
       }
     },
     "generate-types": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "npx openapi-typescript https://raw.githubusercontent.com/vegaprotocol/documentation/main/specs/v0.71.4/blockexplorer.openapi.json --output apps/explorer/src/types/explorer.d.ts --immutable-types"
@@ -75,7 +82,7 @@
       }
     },
     "build-netlify": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "cp apps/explorer/netlify.toml netlify.toml",
@@ -84,7 +91,7 @@
       }
     },
     "build-spec": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/explorer/tsconfig.spec.json"

apps/explorer/src/app/components/assets/assets-table.tsx

@@ -1,15 +1,15 @@
+import { useMemo } from 'react';
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
-import { AgGridColumn } from 'ag-grid-react';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type { VegaICellRendererParams } from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { useNavigate } from 'react-router-dom';
-import type { RowClickedEvent } from 'ag-grid-community';
+import type { RowClickedEvent, ColDef } from 'ag-grid-community';
 
 type AssetsTableProps = {
   data: AssetFieldsFragment[] | null;
@@ -31,6 +31,58 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
     };
   }, []);
 
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      { headerName: t('Symbol'), field: 'symbol' },
+      { headerName: t('Name'), field: 'name' },
+      {
+        flex: 2,
+        headerName: t('ID'),
+        field: 'id',
+        hide: window.innerWidth < BREAKPOINT_MD,
+      },
+      {
+        colId: 'type',
+        headerName: t('Type'),
+        field: 'source.__typename',
+        hide: window.innerWidth < BREAKPOINT_MD,
+        valueFormatter: ({ value }: { value?: string }) =>
+          value ? AssetTypeMapping[value].value : '',
+      },
+      {
+        headerName: t('Status'),
+        field: 'status',
+        hide: window.innerWidth < BREAKPOINT_MD,
+        valueFormatter: ({ value }: { value?: string }) =>
+          value ? AssetStatusMapping[value].value : '',
+      },
+      {
+        colId: 'actions',
+        headerName: '',
+        sortable: false,
+        filter: false,
+        resizable: false,
+        wrapText: true,
+        field: 'id',
+        cellRenderer: ({
+          value,
+        }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
+          value ? (
+            <ButtonLink
+              onClick={(e) => {
+                navigate(value);
+              }}
+            >
+              {t('View details')}
+            </ButtonLink>
+          ) : (
+            ''
+          ),
+      },
+    ],
+    [navigate]
+  );
+
   return (
     <AgGrid
       ref={ref}
@@ -46,60 +98,11 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
         filterParams: { buttons: ['reset'] },
         autoHeight: true,
       }}
+      columnDefs={columnDefs}
       suppressCellFocus={true}
       onRowClicked={({ data }: RowClickedEvent) => {
         navigate(data.id);
       }}
-    >
-      <AgGridColumn headerName={t('Symbol')} field="symbol" />
-      <AgGridColumn headerName={t('Name')} field="name" />
-      <AgGridColumn
-        flex="2"
-        headerName={t('ID')}
-        field="id"
-        hide={window.innerWidth < BREAKPOINT_MD}
-      />
-      <AgGridColumn
-        colId="type"
-        headerName={t('Type')}
-        field="source.__typename"
-        hide={window.innerWidth < BREAKPOINT_MD}
-        valueFormatter={({ value }: { value?: string }) =>
-          value && AssetTypeMapping[value].value
-        }
-      />
-      <AgGridColumn
-        headerName={t('Status')}
-        field="status"
-        hide={window.innerWidth < BREAKPOINT_MD}
-        valueFormatter={({ value }: { value?: string }) =>
-          value && AssetStatusMapping[value].value
-        }
-      />
-      <AgGridColumn
-        colId="actions"
-        headerName=""
-        sortable={false}
-        filter={false}
-        resizable={false}
-        wrapText={true}
-        field="id"
-        cellRenderer={({
-          value,
-        }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
-          value ? (
-            <ButtonLink
-              onClick={(e) => {
-                navigate(value);
-              }}
-            >
-              {t('View details')}
-            </ButtonLink>
-          ) : (
-            ''
-          )
-        }
-      />
-    </AgGrid>
+    />
   );
 };

apps/explorer/src/app/components/markets/markets-table.tsx

@@ -1,8 +1,9 @@
+import { useMemo } from 'react';
 import type { MarketFieldsFragment } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
-import { AgGridColumn } from 'ag-grid-react';
+import type { ColDef } from 'ag-grid-community';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   VegaICellRendererParams,
@@ -39,54 +40,34 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
     };
   }, []);
 
-  return (
-    <AgGrid
-      ref={gridRef}
-      rowData={data}
-      getRowId={({ data }: { data: MarketFieldsFragment }) => data.id}
-      overlayNoRowsTemplate={t('This chain has no markets')}
-      domLayout="autoHeight"
-      defaultColDef={{
-        flex: 1,
-        resizable: true,
-        sortable: true,
-        filter: true,
-        filterParams: { buttons: ['reset'] },
-        autoHeight: true,
-      }}
-      suppressCellFocus={true}
-      onRowClicked={({ data, event }: RowClickedEvent) => {
-        if ((event?.target as HTMLElement).tagName.toUpperCase() !== 'BUTTON') {
-          navigate(data.id);
-        }
-      }}
-    >
-      <AgGridColumn
-        colId="code"
-        headerName={t('Code')}
-        field="tradableInstrument.instrument.code"
-      />
-      <AgGridColumn
-        colId="name"
-        headerName={t('Name')}
-        field="tradableInstrument.instrument.name"
-      />
-      <AgGridColumn
-        headerName={t('Status')}
-        field="state"
-        hide={window.innerWidth <= BREAKPOINT_MD}
-        valueGetter={({
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      {
+        colId: 'code',
+        headerName: t('Code'),
+        field: 'tradableInstrument.instrument.code',
+      },
+      {
+        colId: 'name',
+        headerName: t('Name'),
+        field: 'tradableInstrument.instrument.name',
+      },
+      {
+        headerName: t('Status'),
+        field: 'state',
+        hide: window.innerWidth <= BREAKPOINT_MD,
+        valueGetter: ({
           data,
         }: VegaValueGetterParams<MarketFieldsFragment>) => {
           return data?.state ? MarketStateMapping[data?.state] : '-';
-        }}
-      />
-      <AgGridColumn
-        colId="asset"
-        headerName={t('Settlement asset')}
-        field="tradableInstrument.instrument.product.settlementAsset.symbol"
-        hide={window.innerWidth <= BREAKPOINT_MD}
-        cellRenderer={({
+        },
+      },
+      {
+        colId: 'asset',
+        headerName: t('Settlement asset'),
+        field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
+        hide: window.innerWidth <= BREAKPOINT_MD,
+        cellRenderer: ({
           data,
         }: VegaICellRendererParams<
           MarketFieldsFragment,
@@ -105,19 +86,19 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
           ) : (
             ''
           );
-        }}
-      />
-      <AgGridColumn
-        flex={2}
-        headerName={t('Market ID')}
-        field="id"
-        hide={window.innerWidth <= BREAKPOINT_MD}
-      />
-      <AgGridColumn
-        colId="actions"
-        headerName=""
-        field="id"
-        cellRenderer={({
+        },
+      },
+      {
+        flex: 2,
+        headerName: t('Market ID'),
+        field: 'id',
+        hide: window.innerWidth <= BREAKPOINT_MD,
+      },
+      {
+        colId: 'actions',
+        headerName: '',
+        field: 'id',
+        cellRenderer: ({
           value,
         }: VegaICellRendererParams<MarketFieldsFragment, 'id'>) =>
           value ? (
@@ -126,9 +107,34 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
             </Link>
           ) : (
             ''
-          )
+          ),
+      },
+    ],
+    [openAssetDetailsDialog]
+  );
+
+  return (
+    <AgGrid
+      ref={gridRef}
+      rowData={data}
+      getRowId={({ data }: { data: MarketFieldsFragment }) => data.id}
+      overlayNoRowsTemplate={t('This chain has no markets')}
+      domLayout="autoHeight"
+      defaultColDef={{
+        flex: 1,
+        resizable: true,
+        sortable: true,
+        filter: true,
+        filterParams: { buttons: ['reset'] },
+        autoHeight: true,
+      }}
+      columnDefs={columnDefs}
+      suppressCellFocus={true}
+      onRowClicked={({ data, event }: RowClickedEvent) => {
+        if ((event?.target as HTMLElement).tagName.toUpperCase() !== 'BUTTON') {
+          navigate(data.id);
         }
-      />
-    </AgGrid>
+      }}
+    />
   );
 };

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

@@ -12,7 +12,7 @@ type Amend = components['schemas']['v1OrderAmendment'];
 
 function renderAmendOrderDetails(
   id: string,
-  version: number,
+  version: number | undefined,
   amend: Amend,
   mocks: MockedResponse[]
 ) {
@@ -25,7 +25,11 @@ function renderAmendOrderDetails(
   );
 }
 
-function renderExistingAmend(id: string, version: number, amend: Amend) {
+function renderExistingAmend(
+  id: string,
+  version: number | undefined,
+  amend: Amend
+) {
   const mocks = [
     {
       request: {
@@ -77,6 +81,55 @@ function renderExistingAmend(id: string, version: number, amend: Amend) {
         },
       },
     },
+    {
+      request: {
+        query: ExplorerDeterministicOrderDocument,
+        variables: {
+          orderId: '123',
+        },
+      },
+      result: {
+        data: {
+          orderByID: {
+            __typename: 'Order',
+            id: '123',
+            type: 'GTT',
+            status: Schema.OrderStatus.STATUS_ACTIVE,
+            version: 100,
+            createdAt: '123',
+            updatedAt: '456',
+            expiresAt: '789',
+            timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+            price: '200',
+            side: 'BUY',
+            remaining: '99',
+            rejectionReason: 'rejection',
+            reference: '123',
+            size: '200',
+            party: {
+              __typename: 'Party',
+              id: '234',
+            },
+            market: {
+              __typename: 'Market',
+              id: 'amend-to-order-latest-version',
+              state: 'STATUS_ACTIVE',
+              positionDecimalPlaces: 2,
+              decimalPlaces: '5',
+              tradableInstrument: {
+                instrument: {
+                  name: 'amend-to-order-latest-version-test',
+                  product: {
+                    __typename: 'Future',
+                    quoteName: '123',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
     {
       request: {
         query: ExplorerMarketDocument,
@@ -157,4 +210,15 @@ describe('Amend order details', () => {
     expect(await res.findByText('New price')).toBeInTheDocument();
     expect(await res.findByText('-7879')).toBeInTheDocument();
   });
+
+  it('Fetches latest version when version is not specified', async () => {
+    const amend: Amend = {
+      price: '-7879',
+    };
+
+    const res = renderExistingAmend('123', undefined, amend);
+    expect(
+      await res.findByText('amend-to-order-latest-version')
+    ).toBeInTheDocument();
+  });
 });

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

@@ -12,7 +12,7 @@ import { wrapperClasses } from './deterministic-order-details';
 export interface AmendOrderDetailsProps {
   id: string;
   amend: components['schemas']['v1OrderAmendment'];
-  // Version to fetch, with 0 being 'latest' and 1 being 'first'. Defaults to 0
+  // Version to fetch. Latest is provided by default
   version?: number;
 }
 
@@ -34,13 +34,11 @@ export function getSideDeltaColour(delta: string): string {
  * @param param0
  * @returns
  */
-const AmendOrderDetails = ({
-  id,
-  version = 0,
-  amend,
-}: AmendOrderDetailsProps) => {
+const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
+  const variables = version ? { orderId: id, version } : { orderId: id };
+
   const { data, error } = useExplorerDeterministicOrderQuery({
-    variables: { orderId: id, version },
+    variables,
   });
 
   if (error || (data && !data.orderByID)) {

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -1,7 +1,6 @@
 import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
 import { VoteProgress } from '@vegaprotocol/proposals';
 import type { AgGridReact } from 'ag-grid-react';
-import { AgGridColumn } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type {
@@ -9,7 +8,7 @@ import type {
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import type { RowClickedEvent } from 'ag-grid-community';
+import type { RowClickedEvent, ColDef } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -64,7 +63,128 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
     title: '',
     content: null,
   });
-
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      {
+        colId: 'title',
+        headerName: t('Title'),
+        field: 'rationale.title',
+        flex: 2,
+        wrapText: true,
+      },
+      {
+        colId: 'type',
+        maxWidth: 180,
+        hide: window.innerWidth <= BREAKPOINT_MD,
+        headerName: t('Type'),
+        field: 'terms.change.__typename',
+      },
+      {
+        maxWidth: 100,
+        headerName: t('State'),
+        field: 'state',
+        valueFormatter: ({
+          value,
+        }: VegaValueFormatterParams<ProposalListFieldsFragment, 'state'>) => {
+          return value ? ProposalStateMapping[value] : '-';
+        },
+      },
+      {
+        colId: 'voting',
+        maxWidth: 100,
+        hide: window.innerWidth <= BREAKPOINT_MD,
+        headerName: t('Voting'),
+        cellRenderer: ({
+          data,
+        }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
+          if (data) {
+            const yesTokens = new BigNumber(data.votes.yes.totalTokens);
+            const noTokens = new BigNumber(data.votes.no.totalTokens);
+            const totalTokensVoted = yesTokens.plus(noTokens);
+            const yesPercentage = totalTokensVoted.isZero()
+              ? new BigNumber(0)
+              : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
+            return (
+              <div className="uppercase flex h-full items-center justify-center pt-2">
+                <VoteProgress
+                  threshold={requiredMajorityPercentage}
+                  progress={yesPercentage}
+                />
+              </div>
+            );
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'cDate',
+        maxWidth: 150,
+        hide: window.innerWidth <= BREAKPOINT_MD,
+        headerName: t('Closing date'),
+        field: 'terms.closingDatetime',
+        valueFormatter: ({
+          value,
+        }: VegaValueFormatterParams<
+          ProposalListFieldsFragment,
+          'terms.closingDatetime'
+        >) => {
+          return value ? getDateTimeFormat().format(new Date(value)) : '-';
+        },
+      },
+      {
+        colId: 'eDate',
+        maxWidth: 150,
+        hide: window.innerWidth <= BREAKPOINT_MD,
+        headerName: t('Enactment date'),
+        field: 'terms.enactmentDatetime',
+        valueFormatte: ({
+          value,
+        }: VegaValueFormatterParams<
+          ProposalListFieldsFragment,
+          'terms.enactmentDatetime'
+        >) => {
+          return value ? getDateTimeFormat().format(new Date(value)) : '-';
+        },
+      },
+      {
+        colId: 'actions',
+        minWidth: window.innerWidth > BREAKPOINT_MD ? 221 : 80,
+        maxWidth: 221,
+        sortable: false,
+        filter: false,
+        resizable: false,
+        cellRenderer: ({
+          data,
+        }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
+          const proposalPage = tokenLink(
+            TOKEN_PROPOSAL.replace(':id', data?.id || '')
+          );
+          const openDialog = () => {
+            if (!data) return;
+            setDialog({
+              open: true,
+              title: data.rationale.title,
+              content: data.terms,
+            });
+          };
+          return (
+            <div className="pb-1">
+              <button className="underline max-md:hidden" onClick={openDialog}>
+                {t('View terms')}
+              </button>{' '}
+              <ExternalLink className="max-md:hidden" href={proposalPage}>
+                {t('Open in Governance')}
+              </ExternalLink>
+              <ExternalLink className="md:hidden" href={proposalPage}>
+                {t('Open')}
+              </ExternalLink>
+            </div>
+          );
+        },
+      },
+    ],
+    [requiredMajorityPercentage, tokenLink]
+  );
   return (
     <>
       <AgGrid
@@ -83,6 +203,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
           filterParams: { buttons: ['reset'] },
           autoHeight: true,
         }}
+        columnDefs={columnDefs}
         suppressCellFocus={true}
         onRowClicked={({ data, event }: RowClickedEvent) => {
           if (
@@ -94,128 +215,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
             window.open(proposalPage, '_blank');
           }
         }}
-      >
-        <AgGridColumn
-          colId="title"
-          headerName={t('Title')}
-          field="rationale.title"
-          flex={2}
-          wrapText={true}
-        />
-        <AgGridColumn
-          colId="type"
-          maxWidth={180}
-          hide={window.innerWidth <= BREAKPOINT_MD}
-          headerName={t('Type')}
-          field="terms.change.__typename"
-        />
-        <AgGridColumn
-          maxWidth={100}
-          headerName={t('State')}
-          field="state"
-          valueFormatter={({
-            value,
-          }: VegaValueFormatterParams<ProposalListFieldsFragment, 'state'>) => {
-            return value ? ProposalStateMapping[value] : '-';
-          }}
-        />
-        <AgGridColumn
-          colId="voting"
-          maxWidth={100}
-          hide={window.innerWidth <= BREAKPOINT_MD}
-          headerName={t('Voting')}
-          cellRenderer={({
-            data,
-          }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
-            if (data) {
-              const yesTokens = new BigNumber(data.votes.yes.totalTokens);
-              const noTokens = new BigNumber(data.votes.no.totalTokens);
-              const totalTokensVoted = yesTokens.plus(noTokens);
-              const yesPercentage = totalTokensVoted.isZero()
-                ? new BigNumber(0)
-                : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
-              return (
-                <div className="uppercase flex h-full items-center justify-center pt-2">
-                  <VoteProgress
-                    threshold={requiredMajorityPercentage}
-                    progress={yesPercentage}
-                  />
-                </div>
-              );
-            }
-            return '-';
-          }}
-        />
-        <AgGridColumn
-          colId="cDate"
-          maxWidth={150}
-          hide={window.innerWidth <= BREAKPOINT_MD}
-          headerName={t('Closing date')}
-          field="terms.closingDatetime"
-          valueFormatter={({
-            value,
-          }: VegaValueFormatterParams<
-            ProposalListFieldsFragment,
-            'terms.closingDatetime'
-          >) => {
-            return value ? getDateTimeFormat().format(new Date(value)) : '-';
-          }}
-        />
-        <AgGridColumn
-          colId="eDate"
-          maxWidth={150}
-          hide={window.innerWidth <= BREAKPOINT_MD}
-          headerName={t('Enactment date')}
-          field="terms.enactmentDatetime"
-          valueFormatter={({
-            value,
-          }: VegaValueFormatterParams<
-            ProposalListFieldsFragment,
-            'terms.enactmentDatetime'
-          >) => {
-            return value ? getDateTimeFormat().format(new Date(value)) : '-';
-          }}
-        />
-        <AgGridColumn
-          colId="actions"
-          minWidth={window.innerWidth > BREAKPOINT_MD ? 221 : 80}
-          maxWidth={221}
-          sortable={false}
-          filter={false}
-          resizable={false}
-          cellRenderer={({
-            data,
-          }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
-            const proposalPage = tokenLink(
-              TOKEN_PROPOSAL.replace(':id', data?.id || '')
-            );
-            const openDialog = () => {
-              if (!data) return;
-              setDialog({
-                open: true,
-                title: data.rationale.title,
-                content: data.terms,
-              });
-            };
-            return (
-              <div className="pb-1">
-                <button
-                  className="underline max-md:hidden"
-                  onClick={openDialog}
-                >
-                  {t('View terms')}
-                </button>{' '}
-                <ExternalLink className="max-md:hidden" href={proposalPage}>
-                  {t('Open in Governance')}
-                </ExternalLink>
-                <ExternalLink className="md:hidden" href={proposalPage}>
-                  {t('Open')}
-                </ExternalLink>
-              </div>
-            );
-          }}
-        />
-      </AgGrid>
+      />
       <JsonViewerDialog
         open={dialog.open}
         onChange={(isOpen) => setDialog({ ...dialog, open: isOpen })}

apps/explorer/src/styles.css

@@ -1,6 +1,5 @@
-@import 'ag-grid-community/dist/styles/ag-grid.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-balham.css';
 
 /* You can add global styles to this file, and also import other style files */
 @tailwind base;

apps/explorer/tailwind.config.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
 const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 

apps/explorer/tsconfig.app.json

@@ -5,8 +5,8 @@
     "types": ["node"]
   },
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": [
     "**/*.spec.ts",

apps/explorer/tsconfig.spec.json

@@ -18,7 +18,7 @@
     "jest.config.ts"
   ],
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ]
 }

apps/explorer/webpack.config.js

@@ -1,6 +1,8 @@
+const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
 const SentryPlugin = require('@sentry/webpack-plugin');
 
-module.exports = (config, context) => {
+module.exports = composePlugins(withNx(), withReact(), (config) => {
   const additionalPlugins = process.env.SENTRY_AUTH_TOKEN
     ? [
         new SentryPlugin({
@@ -14,4 +16,4 @@ module.exports = (config, context) => {
     ...config,
     plugins: [...additionalPlugins, ...config.plugins],
   };
-};
+});

apps/governance-e2e/project.json

@@ -1,10 +1,11 @@
 {
+  "name": "governance-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/governance-e2e/src",
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/governance-e2e/cypress.config.js",
         "devServerTarget": "governance:serve"
@@ -16,14 +17,14 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/governance-e2e/**/*.{js,ts}"]
       }
     },
     "build": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/governance-e2e/"

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

@@ -98,6 +98,11 @@ describe(
         .and('have.length', 64);
       cy.getByTestId(proposalTermsToggle).click();
       // 3001-VOTE-052 3001-VOTE-010
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.get('code.language-json')
         .should('exist')
         .within(() => {

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

@@ -117,6 +117,11 @@ context(
           cy.getByTestId(submitWithdrawalButton).click();
         });
         // assert withdrawal request
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId(toast)
           .first(txTimeout)
           .should('contain.text', 'Funds unlocked')
@@ -130,6 +135,11 @@ context(
             cy.getByTestId(toastClose).click();
           });
         // withdrawal complete
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId(toast)
           .first(txTimeout)
           .should('contain.text', 'The withdrawal has been approved.')
@@ -139,6 +149,11 @@ context(
               'Withdraw 120.00 tUSDC'
             );
           });
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId(toast)
           .last(txTimeout)
           .should('contain.text', 'Transaction confirmed')
@@ -146,6 +161,11 @@ context(
             cy.getByTestId('external-link').should('exist');
           });
         // withdrawal history for complete withdrawal displayed
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.get(tableWithdrawnStatus)
           .eq(1, txTimeout)
           .should('have.text', 'Completed')
@@ -187,6 +207,11 @@ context(
         cy.getByTestId(submitWithdrawalButton).click();
       });
 
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(toast)
         .first(txTimeout)
         .should('contain.text', 'Funds unlocked')
@@ -198,6 +223,11 @@ context(
           );
           cy.getByTestId(toastClose).click();
         });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.get(tableTxHash)
         .eq(1)
         .should('have.text', 'Complete withdrawal')
@@ -213,18 +243,33 @@ context(
         });
       ethereumWalletConnect();
       cy.getByTestId(completeWithdrawalButton).first().click();
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(toast)
         .last(txTimeout)
         .should('contain.text', 'Awaiting confirmation')
         .within(() => {
           cy.getByTestId('external-link').should('exist');
         });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(toast)
         .first(txTimeout)
         .should('contain.text', 'The withdrawal has been approved.')
         .within(() => {
           cy.getByTestId(toastPanel).should('contain.text', '110.00', 'tUSDC');
         });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(toast)
         .last(txTimeout)
         .should('contain.text', 'Transaction confirmed')
@@ -248,6 +293,11 @@ context(
         cy.getByTestId(amountInput).click().type('50');
         cy.getByTestId(submitWithdrawalButton).click();
       });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(toast)
         .first(txTimeout)
         .should('contain.text', 'Funds unlocked')

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

@@ -16,6 +16,11 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
     });
 
     it('should display announcement banner', function () {
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId('app-announcement')
         .should('contain.text', 'TEST ANNOUNCEMENT!')
         .within(() => {
@@ -35,6 +40,11 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
           waitForSpinner();
         }
       });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId('proposals-list-item')
         .should('have.length.at.least', 1)
         .first()
@@ -94,6 +104,11 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
     });
 
     it('should contain link to specific validators', function () {
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId('validators')
         .should('have.length', '2')
         .each(($validator) => {
@@ -120,6 +135,11 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
     });
 
     it('should display network data', function () {
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId('git-network-data')
         .should('contain.text', 'Reading network data from')
         .within(() => {
@@ -131,6 +151,11 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
     });
 
     it('should display eth data', function () {
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId('git-eth-data')
         .should('contain.text', 'Reading Ethereum data from')
         .within(() => {

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

@@ -139,6 +139,11 @@ context(
       mockNetworkUpgradeProposal();
       navigateTo(navigation.proposals);
       cy.getByTestId('open-proposals').within(() => {
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.get('li')
           .eq(0)
           .should(
@@ -201,6 +206,11 @@ context(
           .should('contain.text', '99.98% approval (% validator voting power)')
           .and('contain.text', '(67% voting power required)');
         cy.get('h2').should('contain.text', 'Approvers (4/4 validators)');
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('validator-name')
           .should('have.length', 4)
           .each(($validator) => {

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

@@ -42,6 +42,11 @@ context(
       // Skipping due to bug #3471 causing flaky failuress
       it.skip('should have option to view go to next and previous page', function () {
         waitForBeginningOfEpoch();
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('page-info')
           .should('contain.text', 'Page ')
           .invoke('text')

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

@@ -21,6 +21,11 @@ context(
     // 1005-VEST-001
     // 1005-VEST-002
     it('Able to view tranches', function () {
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId('tranche-item')
         .should('have.length', 2)
         .first()
@@ -51,6 +56,11 @@ context(
         cy.get('span').eq(1).should('have.text', 0);
       });
       cy.getByTestId('key-value-table').within(() => {
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('link')
           .should('have.length', 8)
           .each((ethLink) => {
@@ -58,6 +68,11 @@ context(
               .should('have.attr', 'href')
               .and('contain', 'https://sepolia.etherscan.io/address/');
           });
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('redeem-link')
           .should('have.length', 8)
           .each((redeemLink) => {
@@ -71,6 +86,11 @@ context(
     it('Able to view tranches with less than 10 vega', function () {
       navigateTo(navigation.supply);
       cy.getByTestId('show-all-tranches').click();
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId('tranche-item')
         .should('have.length', 8)
         .first()

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

@@ -74,6 +74,11 @@ context('Validators Page - verify elements on page', function () {
     function () {
       // 1002-STKE-050
       it('Should be able to see validator names', function () {
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.get('[col-id="validator"] > div > span')
           .should('have.length.at.least', 1)
           .each(($name) => {
@@ -82,6 +87,11 @@ context('Validators Page - verify elements on page', function () {
       });
 
       it('Should be able to see validator stake', function () {
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('total-stake')
           .should('have.length.at.least', 1)
           .each(($stake) => {
@@ -105,6 +115,11 @@ context('Validators Page - verify elements on page', function () {
       });
 
       it('Should be able to see validator normalised voting power', function () {
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('normalised-voting-power')
           .should('have.length.at.least', 1)
           .each(($vPower) => {
@@ -126,6 +141,11 @@ context('Validators Page - verify elements on page', function () {
 
       // 2002-SINC-018
       it('Should be able to see validator total penalties', function () {
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('total-penalty')
           .should('have.length.at.least', 1)
           .each(($penalties) => {
@@ -146,6 +166,11 @@ context('Validators Page - verify elements on page', function () {
       });
 
       it('Should be able to see validator pending stake', function () {
+        /**
+         * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+         * You should use .then() to chain commands instead.
+         * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+         **/
         cy.getByTestId('total-pending-stake')
           .should('have.length.at.least', 1)
           .each(($pendingStake) => {

apps/governance/.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     [
-      "@nrwl/react/babel",
+      "@nx/react/babel",
       {
         "runtime": "automatic"
       }

apps/governance/.eslintrc.json

@@ -1,6 +1,6 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/governance/README.md

@@ -31,7 +31,7 @@ Example configurations are provided here:
 For convenience, you can boot the app injecting one of the configurations above by running:
 
 ```bash
-yarn nx run governance:serve --env={env} # e.g. stagnet1
+yarn env-cmd -f .\apps\governance\.env.{env} yarn nx run governance:serve # e.g. stagnet1
 ```
 
 There are a few different configuration options offered for this app:

apps/governance/__mocks__/react-markdown.js

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

apps/governance/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'governance',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': 'babel-jest',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/governance',
@@ -16,6 +16,5 @@ export default {
     '**/*.{ts,tsx}',
     '!**/node_modules/**',
     '!**/__generated__/**',
-    '!**/__generated___/**',
   ],
 };

apps/governance/project.json

@@ -1,10 +1,11 @@
 {
+  "name": "governance",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/governance/src",
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "./tools/executors/webpack:build",
+      "executor": "@nx/webpack:webpack",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -41,7 +42,7 @@
       }
     },
     "serve": {
-      "executor": "./tools/executors/webpack:serve",
+      "executor": "@nx/webpack:dev-server",
       "options": {
         "port": 4210,
         "buildTarget": "governance:build:development",
@@ -55,22 +56,28 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/governance/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/governance"],
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/apps/governance"],
       "options": {
         "jestConfig": "apps/governance/jest.config.ts",
         "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
       }
     },
     "build-netlify": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "cp apps/governance/netlify.toml netlify.toml",
@@ -79,7 +86,7 @@
       }
     },
     "build-spec": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/governance/tsconfig.spec.json"

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

@@ -836,5 +836,6 @@
   "AllProposals": "All proposals",
   "RejectedProposals": "Rejected proposals",
   "networkGovernance": "Network governance",
-  "networkUpgrades": "Network upgrades"
+  "networkUpgrades": "Network upgrades",
+  "assetSpecification": "Asset specification"
 }

apps/governance/src/routes/proposals/components/list-asset/__generated___/Asset.ts

@@ -1,159 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type ProposalAssetQueryVariables = Types.Exact<{
-  assetId: Types.Scalars['ID'];
-}>;
-
-export type ProposalAssetQuery = {
-  __typename?: 'Query';
-  asset?: {
-    __typename?: 'Asset';
-    status: Types.AssetStatus;
-    source:
-      | { __typename?: 'BuiltinAsset' }
-      | { __typename?: 'ERC20'; contractAddress: string };
-  } | null;
-};
-
-export type AssetListBundleQueryVariables = Types.Exact<{
-  assetId: Types.Scalars['ID'];
-}>;
-
-export type AssetListBundleQuery = {
-  __typename?: 'Query';
-  erc20ListAssetBundle?: {
-    __typename?: 'Erc20ListAssetBundle';
-    assetSource: string;
-    vegaAssetId: string;
-    nonce: string;
-    signatures: string;
-  } | null;
-};
-
-export const ProposalAssetDocument = gql`
-  query ProposalAsset($assetId: ID!) {
-    asset(id: $assetId) {
-      status
-      source {
-        ... on ERC20 {
-          contractAddress
-        }
-      }
-    }
-  }
-`;
-
-/**
- * __useProposalAssetQuery__
- *
- * To run a query within a React component, call `useProposalAssetQuery` and pass it any options that fit your needs.
- * When your component renders, `useProposalAssetQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useProposalAssetQuery({
- *   variables: {
- *      assetId: // value for 'assetId'
- *   },
- * });
- */
-export function useProposalAssetQuery(
-  baseOptions: Apollo.QueryHookOptions<
-    ProposalAssetQuery,
-    ProposalAssetQueryVariables
-  >
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useQuery<ProposalAssetQuery, ProposalAssetQueryVariables>(
-    ProposalAssetDocument,
-    options
-  );
-}
-export function useProposalAssetLazyQuery(
-  baseOptions?: Apollo.LazyQueryHookOptions<
-    ProposalAssetQuery,
-    ProposalAssetQueryVariables
-  >
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useLazyQuery<ProposalAssetQuery, ProposalAssetQueryVariables>(
-    ProposalAssetDocument,
-    options
-  );
-}
-export type ProposalAssetQueryHookResult = ReturnType<
-  typeof useProposalAssetQuery
->;
-export type ProposalAssetLazyQueryHookResult = ReturnType<
-  typeof useProposalAssetLazyQuery
->;
-export type ProposalAssetQueryResult = Apollo.QueryResult<
-  ProposalAssetQuery,
-  ProposalAssetQueryVariables
->;
-export const AssetListBundleDocument = gql`
-  query AssetListBundle($assetId: ID!) {
-    erc20ListAssetBundle(assetId: $assetId) {
-      assetSource
-      vegaAssetId
-      nonce
-      signatures
-    }
-  }
-`;
-
-/**
- * __useAssetListBundleQuery__
- *
- * To run a query within a React component, call `useAssetListBundleQuery` and pass it any options that fit your needs.
- * When your component renders, `useAssetListBundleQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useAssetListBundleQuery({
- *   variables: {
- *      assetId: // value for 'assetId'
- *   },
- * });
- */
-export function useAssetListBundleQuery(
-  baseOptions: Apollo.QueryHookOptions<
-    AssetListBundleQuery,
-    AssetListBundleQueryVariables
-  >
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useQuery<AssetListBundleQuery, AssetListBundleQueryVariables>(
-    AssetListBundleDocument,
-    options
-  );
-}
-export function useAssetListBundleLazyQuery(
-  baseOptions?: Apollo.LazyQueryHookOptions<
-    AssetListBundleQuery,
-    AssetListBundleQueryVariables
-  >
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useLazyQuery<
-    AssetListBundleQuery,
-    AssetListBundleQueryVariables
-  >(AssetListBundleDocument, options);
-}
-export type AssetListBundleQueryHookResult = ReturnType<
-  typeof useAssetListBundleQuery
->;
-export type AssetListBundleLazyQueryHookResult = ReturnType<
-  typeof useAssetListBundleLazyQuery
->;
-export type AssetListBundleQueryResult = Apollo.QueryResult<
-  AssetListBundleQuery,
-  AssetListBundleQueryVariables
->;

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

@@ -5,13 +5,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import type {
   AssetListBundleQuery,
   ProposalAssetQuery,
-} from './__generated___/Asset';
-import { AssetListBundleDocument } from './__generated___/Asset';
-import { ProposalAssetDocument } from './__generated___/Asset';
+} from './__generated__/Asset';
+import { AssetListBundleDocument } from './__generated__/Asset';
+import { ProposalAssetDocument } from './__generated__/Asset';
 import * as Schema from '@vegaprotocol/types';
 import type { useWeb3React } from '@web3-react/core';
-import BigNumber from 'bignumber.js';
-import type { AppState } from '../../../../contexts/app-state/app-state-context';
 
 const mockUseEthTx = {
   perform: jest.fn(),
@@ -47,23 +45,6 @@ jest.mock('@web3-react/core', () => {
   };
 });
 
-const mockAppState: AppState = {
-  totalAssociated: new BigNumber('50063005'),
-  decimals: 18,
-  totalSupply: new BigNumber(65000000),
-  vegaWalletOverlay: false,
-  vegaWalletManageOverlay: false,
-  transactionOverlay: false,
-  bannerMessage: '',
-  disconnectNotice: false,
-};
-
-jest.mock('../../../contexts/app-state/app-state-context', () => ({
-  useAppState: () => ({
-    appState: mockAppState,
-  }),
-}));
-
 const ASSET_ID = 'foo';
 
 const DEFAULT__ASSET: ProposalAssetQuery = {

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

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import {
   useAssetListBundleQuery,
   useProposalAssetQuery,
-} from './__generated___/Asset';
+} from './__generated__/Asset';
 import { EthWalletContainer } from '../../../../components/eth-wallet-container';
 
 const useListAsset = (assetId: string) => {

apps/governance/src/routes/proposals/components/proposal-asset-details/index.tsx

@@ -0,0 +1 @@
+export * from './proposal-asset-details';

apps/governance/src/routes/proposals/components/proposal-asset-details/proposal-asset-details.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SubHeading } from '../../../../components/heading';
+import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
+import { AssetDetail, AssetDetailsTable } from '@vegaprotocol/assets';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+
+export const ProposalAssetDetails = ({
+  asset,
+}: {
+  asset: AssetFieldsFragment;
+}) => {
+  const { t } = useTranslation();
+  const [showAssetDetails, setShowAssetDetails] = useState(false);
+
+  return (
+    <section data-testid="proposal-asset-details">
+      <CollapsibleToggle
+        toggleState={showAssetDetails}
+        setToggleState={setShowAssetDetails}
+        dataTestId={'proposal-asset-details-toggle'}
+      >
+        <SubHeading title={t('assetSpecification')} />
+      </CollapsibleToggle>
+
+      {showAssetDetails && (
+        <div className="mb-10 pb-4">
+          <AssetDetailsTable
+            asset={asset}
+            omitRows={[
+              AssetDetail.STATUS,
+              AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
+              AssetDetail.GLOBAL_REWARD_POOL_ACCOUNT_BALANCE,
+              AssetDetail.MAKER_PAID_FEES_ACCOUNT_BALANCE,
+              AssetDetail.MAKER_RECEIVED_FEES_ACCOUNT_BALANCE,
+              AssetDetail.LP_FEE_REWARD_ACCOUNT_BALANCE,
+              AssetDetail.MARKET_PROPOSER_REWARD_ACCOUNT_BALANCE,
+            ]}
+            inline={true}
+            noBorder={true}
+            dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
+            ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
+          />
+        </div>
+      )}
+    </section>
+  );
+};

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

@@ -10,6 +10,7 @@ import { ProposalDescription } from '../proposal-description';
 import { ProposalChangeTable } from '../proposal-change-table';
 import { ProposalJson } from '../proposal-json';
 import { ProposalVotesTable } from '../proposal-votes-table';
+import { ProposalAssetDetails } from '../proposal-asset-details';
 import { VoteDetails } from '../vote-details';
 import { ListAsset } from '../list-asset';
 import Routes from '../../../routes';
@@ -17,6 +18,8 @@ import { ProposalMarketData } from '../proposal-market-data';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { MarketInfoWithData } from '@vegaprotocol/markets';
+import type { AssetQuery } from '@vegaprotocol/assets';
+import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
 
 export enum ProposalType {
@@ -30,6 +33,7 @@ export enum ProposalType {
 export interface ProposalProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
   newMarketData?: MarketInfoWithData | null;
+  assetData?: AssetQuery | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   restData: any;
 }
@@ -38,6 +42,7 @@ export const Proposal = ({
   proposal,
   restData,
   newMarketData,
+  assetData,
 }: ProposalProps) => {
   const { t } = useTranslation();
   const { params, loading, error } = useNetworkParams([
@@ -54,6 +59,23 @@ export const Proposal = ({
     return null;
   }
 
+  let asset = assetData
+    ? removePaginationWrapper(assetData.assetsConnection?.edges)[0]
+    : undefined;
+
+  if (proposal.terms.change.__typename === 'UpdateAsset' && asset) {
+    asset = {
+      ...asset,
+      quantum: proposal.terms.change.quantum,
+    };
+
+    if (asset.source.__typename === 'ERC20') {
+      asset.source.lifetimeLimit = proposal.terms.change.source.lifetimeLimit;
+      asset.source.withdrawThreshold =
+        proposal.terms.change.source.withdrawThreshold;
+    }
+  }
+
   let minVoterBalance = null;
   let proposalType = null;
 
@@ -138,6 +160,14 @@ export const Proposal = ({
             </div>
           )}
 
+          {(proposal.terms.change.__typename === 'NewAsset' ||
+            proposal.terms.change.__typename === 'UpdateAsset') &&
+            asset && (
+              <div className="mb-4">
+                <ProposalAssetDetails asset={asset} />
+              </div>
+            )}
+
           <div className="mb-6">
             <ProposalJson proposal={restData?.data?.proposal} />
           </div>

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

@@ -191,12 +191,13 @@ export const ProposalsList = ({
         {sortedProposals.open.length > 0 ||
         sortedProtocolUpgradeProposals.open.length > 0 ? (
           <ul data-testid="open-proposals">
-            {sortedProtocolUpgradeProposals.open.map((proposal) => (
-              <ProtocolUpgradeProposalsListItem
-                key={proposal.upgradeBlockHeight}
-                proposal={proposal}
-              />
-            ))}
+            {filterString.length < 1 &&
+              sortedProtocolUpgradeProposals.open.map((proposal) => (
+                <ProtocolUpgradeProposalsListItem
+                  key={proposal.upgradeBlockHeight}
+                  proposal={proposal}
+                />
+              ))}
 
             {sortedProposals.open.filter(filterPredicate).map((proposal) => (
               <ProposalsListItem key={proposal?.id} proposal={proposal} />

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

@@ -9,6 +9,7 @@ import { useFetch } from '@vegaprotocol/react-helpers';
 import { ENV } from '../../../config';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { marketInfoWithDataProvider } from '@vegaprotocol/markets';
+import { useAssetQuery } from '@vegaprotocol/assets';
 
 export const ProposalContainer = () => {
   const params = useParams<{ proposalId: string }>();
@@ -35,6 +36,25 @@ export const ProposalContainer = () => {
     },
   });
 
+  const {
+    data: assetData,
+    loading: assetLoading,
+    error: assetError,
+  } = useAssetQuery({
+    fetchPolicy: 'network-only',
+    variables: {
+      assetId:
+        (data?.proposal?.terms.change.__typename === 'NewAsset' &&
+          data?.proposal?.id) ||
+        (data?.proposal?.terms.change.__typename === 'UpdateAsset' &&
+          data.proposal.terms.change.assetId) ||
+        '',
+    },
+    skip: !['NewAsset', 'UpdateAsset'].includes(
+      data?.proposal?.terms?.change?.__typename || ''
+    ),
+  });
+
   useEffect(() => {
     const interval = setInterval(refetch, 2000);
     return () => clearInterval(interval);
@@ -42,15 +62,20 @@ export const ProposalContainer = () => {
 
   return (
     <AsyncRenderer
-      loading={loading || newMarketLoading}
-      error={error || newMarketError}
-      data={newMarketData ? { newMarketData, data } : data}
+      loading={loading || newMarketLoading || assetLoading}
+      error={error || newMarketError || assetError}
+      data={{
+        ...data,
+        ...(newMarketData ? { newMarketData } : {}),
+        ...(assetData ? { assetData } : {}),
+      }}
     >
       {data?.proposal ? (
         <Proposal
           proposal={data.proposal}
           restData={restData}
           newMarketData={newMarketData}
+          assetData={assetData}
         />
       ) : (
         <ProposalNotFound />

apps/governance/src/routes/staking/associate/components/staking-wallets-container/staking-wallets-container.spec.tsx

@@ -6,7 +6,7 @@ jest.mock('../../../../../components/connect-to-vega', () => ({
   ConnectToVega: () => <div data-testid="connect-to-vega" />,
 }));
 
-jest.mock('../../../../components/eth-connect-prompt', () => ({
+jest.mock('../../../../../components/eth-connect-prompt', () => ({
   EthConnectPrompt: () => <div data-testid="eth-connect-prompt" />,
 }));
 

apps/governance/src/routes/token/__generated___/NodeData.ts

@@ -1,64 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type NodeDataQueryVariables = Types.Exact<{ [key: string]: never }>;
-
-export type NodeDataQuery = {
-  __typename?: 'Query';
-  nodeData?: { __typename?: 'NodeData'; stakedTotal: string } | null;
-};
-
-export const NodeDataDocument = gql`
-  query NodeData {
-    nodeData {
-      stakedTotal
-    }
-  }
-`;
-
-/**
- * __useNodeDataQuery__
- *
- * To run a query within a React component, call `useNodeDataQuery` and pass it any options that fit your needs.
- * When your component renders, `useNodeDataQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useNodeDataQuery({
- *   variables: {
- *   },
- * });
- */
-export function useNodeDataQuery(
-  baseOptions?: Apollo.QueryHookOptions<NodeDataQuery, NodeDataQueryVariables>
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useQuery<NodeDataQuery, NodeDataQueryVariables>(
-    NodeDataDocument,
-    options
-  );
-}
-export function useNodeDataLazyQuery(
-  baseOptions?: Apollo.LazyQueryHookOptions<
-    NodeDataQuery,
-    NodeDataQueryVariables
-  >
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useLazyQuery<NodeDataQuery, NodeDataQueryVariables>(
-    NodeDataDocument,
-    options
-  );
-}
-export type NodeDataQueryHookResult = ReturnType<typeof useNodeDataQuery>;
-export type NodeDataLazyQueryHookResult = ReturnType<
-  typeof useNodeDataLazyQuery
->;
-export type NodeDataQueryResult = Apollo.QueryResult<
-  NodeDataQuery,
-  NodeDataQueryVariables
->;

apps/governance/src/routes/token/index.tsx

@@ -11,7 +11,7 @@ import type { RouteChildProps } from '..';
 import Routes from '../routes';
 import { TokenDetails } from './token-details';
 import { Button } from '@vegaprotocol/ui-toolkit';
-import { useNodeDataQuery } from './__generated___/NodeData';
+import { useNodeDataQuery } from './__generated__/NodeData';
 
 const Home = ({ name }: RouteChildProps) => {
   useDocumentTitle(name);

apps/governance/src/styles.css

@@ -1,6 +1,5 @@
-@import 'ag-grid-community/dist/styles/ag-grid.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-balham.css';
 
 @tailwind base;
 @tailwind components;

apps/governance/tailwind.config.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
 const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 

apps/governance/tsconfig.app.json

@@ -5,8 +5,8 @@
     "types": ["node"]
   },
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": [
     "**/*.spec.ts",

apps/governance/tsconfig.spec.json

@@ -18,7 +18,7 @@
     "jest.config.ts"
   ],
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ]
 }

apps/governance/webpack.config.js

@@ -1,6 +1,8 @@
+const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
 const SentryPlugin = require('@sentry/webpack-plugin');
 
-module.exports = (config, context) => {
+module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   const additionalPlugins = process.env.SENTRY_AUTH_TOKEN
     ? [
         new SentryPlugin({
@@ -13,4 +15,4 @@ module.exports = (config, context) => {
     ...config,
     plugins: [...additionalPlugins, ...config.plugins],
   };
-};
+});

apps/liquidity-provision-dashboard/.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     [
-      "@nrwl/react/babel",
+      "@nx/react/babel",
       {
         "runtime": "automatic"
       }

apps/liquidity-provision-dashboard/.eslintrc.json

@@ -1,6 +1,6 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/liquidity-provision-dashboard/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'liquidity-provision-dashboard',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/liquidity-provision-dashboard',

apps/liquidity-provision-dashboard/project.json

@@ -1,10 +1,11 @@
 {
+  "name": "liquidity-provision-dashboard",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/liquidity-provision-dashboard/src",
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nrwl/web:webpack",
+      "executor": "@nx/webpack:webpack",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -21,7 +22,7 @@
         ],
         "styles": ["apps/liquidity-provision-dashboard/src/styles.scss"],
         "scripts": [],
-        "webpackConfig": "@nrwl/react/plugins/webpack"
+        "webpackConfig": "@nx/react/plugins/webpack"
       },
       "configurations": {
         "development": {
@@ -47,7 +48,7 @@
       }
     },
     "serve": {
-      "executor": "./tools/executors/webpack:serve",
+      "executor": "@nx/webpack:dev-server",
       "options": {
         "buildTarget": "liquidity-provision-dashboard:build",
         "hmr": true,
@@ -64,7 +65,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": [
@@ -73,15 +74,23 @@
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/liquidity-provision-dashboard"],
+      "executor": "@nx/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/apps/liquidity-provision-dashboard"
+      ],
       "options": {
         "jestConfig": "apps/liquidity-provision-dashboard/jest.config.ts",
         "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
       }
     },
     "build-netlify": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "cp apps/liquidity-provision-dashboard/netlify.toml netlify.toml",
@@ -90,7 +99,7 @@
       }
     },
     "build-spec": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/liquidity-provision-dashboard/tsconfig.spec.json"

apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx

@@ -21,11 +21,14 @@ import {
   HealthBar,
   TooltipCellComponent,
 } from '@vegaprotocol/ui-toolkit';
-import type { GetRowIdParams, RowClickedEvent } from 'ag-grid-community';
-import 'ag-grid-community/dist/styles/ag-grid.css';
-import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
-import { AgGridColumn } from 'ag-grid-react';
-import { useCallback, useState } from 'react';
+import type {
+  GetRowIdParams,
+  RowClickedEvent,
+  ColDef,
+} from 'ag-grid-community';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { useCallback, useState, useMemo } from 'react';
 
 import { Grid } from '../../grid';
 import { HealthDialog } from '../../health-dialog';
@@ -39,6 +42,234 @@ export const MarketList = () => {
   const consoleLink = useLinks(DApp.Console);
 
   const getRowId = useCallback(({ data }: GetRowIdParams) => data.id, []);
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      {
+        headerName: t('Market (futures)'),
+        field: 'tradableInstrument.instrument.name',
+        cellRenderer: ({ value, data }: { value: string; data: Market }) => {
+          return (
+            <>
+              <span className="leading-3">{value}</span>
+              <span className="leading-3">
+                {
+                  data?.tradableInstrument?.instrument?.product?.settlementAsset
+                    ?.symbol
+                }
+              </span>
+            </>
+          );
+        },
+        minWidth: 100,
+        flex: 1,
+        headerTooltip: t('The market name and settlement asset'),
+      },
+
+      {
+        headerName: t('Market Code'),
+        headerTooltip: t(
+          'The market code is a unique identifier for this market'
+        ),
+        field: 'tradableInstrument.instrument.code',
+      },
+
+      {
+        headerName: t('Type'),
+        headerTooltip: t('Type'),
+        field: 'tradableInstrument.instrument.product.__typename',
+      },
+
+      {
+        headerName: t('Last Price'),
+        headerTooltip: t('Latest price for this market'),
+        field: 'data.markPrice',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'data.markPrice'>) =>
+          value && data
+            ? formatWithAsset(
+                value,
+                data.tradableInstrument.instrument.product.settlementAsset
+              )
+            : '-',
+      },
+
+      {
+        headerName: t('Change (24h)'),
+        headerTooltip: t('Change in price over the last 24h'),
+        cellRenderer: ({
+          data,
+        }: VegaValueFormatterParams<Market, 'data.candles'>) => {
+          if (data && data.candles) {
+            const prices = data.candles.map((candle) => candle.close);
+            return (
+              <PriceChangeCell
+                candles={prices}
+                decimalPlaces={data?.decimalPlaces}
+              />
+            );
+          } else return <div>{t('-')}</div>;
+        },
+      },
+
+      {
+        headerName: t('Volume (24h)'),
+        field: 'dayVolume',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'dayVolume'>) =>
+          value && data
+            ? `${addDecimalsFormatNumber(
+                value,
+                data.tradableInstrument.instrument.product.settlementAsset
+                  .decimals
+              )} (${displayChange(data.volumeChange)})`
+            : '-',
+        headerTooltip: t('The trade volume over the last 24h'),
+      },
+
+      {
+        headerName: t('Total staked by LPs'),
+        field: 'liquidityCommitted',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'liquidityCommitted'>) =>
+          data && value
+            ? formatWithAsset(
+                value.toString(),
+                data.tradableInstrument.instrument.product.settlementAsset
+              )
+            : '-',
+        headerTooltip: t('The amount of funds allocated to provide liquidity'),
+      },
+
+      {
+        headerName: t('Target stake'),
+        field: 'target',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'target'>) =>
+          data && value
+            ? formatWithAsset(
+                value,
+                data.tradableInstrument.instrument.product.settlementAsset
+              )
+            : '-',
+        headerTooltip: t(
+          'The ideal committed liquidity to operate the market.  If total commitment currently below this level then LPs can set the fee level with new commitment.'
+        ),
+      },
+
+      {
+        headerName: t('% Target stake met'),
+        valueFormatter: ({ data }: VegaValueFormatterParams<Market, ''>) => {
+          if (data) {
+            const roundedPercentage =
+              parseInt(
+                (data.liquidityCommitted / parseFloat(data.target)).toFixed(0)
+              ) * 100;
+            const display = Number.isNaN(roundedPercentage)
+              ? 'N/A'
+              : formatNumberPercentage(toBigNum(roundedPercentage, 0), 0);
+            return display;
+          } else return '-';
+        },
+        headerTooltip: t('% Target stake met'),
+      },
+
+      {
+        headerName: t('Fee levels'),
+        field: 'fees',
+        valueFormatter: ({ value }: VegaValueFormatterParams<Market, 'fees'>) =>
+          value ? `${value.factors.liquidityFee}%` : '-',
+        headerTooltip: t('Fee level for this market'),
+      },
+
+      {
+        headerName: t('Status'),
+        field: 'tradingMode',
+        cellRenderer: ({
+          value,
+          data,
+        }: {
+          value: Schema.MarketTradingMode;
+          data: Market;
+        }) => {
+          return <Status trigger={data.data?.trigger} tradingMode={value} />;
+        },
+        headerTooltip: t(
+          'The current market status - those below the target stake mark are most in need of liquidity'
+        ),
+      },
+
+      {
+        headerComponent: () => {
+          return (
+            <div>
+              <span>{t('Health')}</span>{' '}
+              <button
+                onClick={() => setIsHealthDialogOpen(true)}
+                aria-label={t('open tooltip')}
+              >
+                <Icon name="info-sign" />
+              </button>
+            </div>
+          );
+        },
+        field: 'tradingMode',
+        cellRenderer: ({
+          value,
+          data,
+        }: {
+          value: Schema.MarketTradingMode;
+          data: Market;
+        }) => (
+          <HealthBar
+            target={data.target}
+            decimals={
+              data.tradableInstrument.instrument.product.settlementAsset
+                .decimals
+            }
+            levels={data.feeLevels}
+            intent={intentForStatus(value)}
+          />
+        ),
+        sortable: false,
+        cellStyle: { overflow: 'unset' },
+      },
+      {
+        headerName: t('Age'),
+        field: 'marketTimestamps.open',
+        headerTooltip: t('Age of the market'),
+        valueFormatter: ({
+          value,
+        }: VegaValueFormatterParams<Market, 'marketTimestamps.open'>) => {
+          return value ? formatDistanceToNow(new Date(value)) : '-';
+        },
+      },
+      {
+        headerName: t('Closing Time'),
+        field: 'tradableInstrument.instrument.metadata.tags',
+        headerTooltip: t('Closing time of the market'),
+        valueFormatter: ({ data }: VegaValueFormatterParams<Market, ''>) => {
+          let expiry;
+          if (data?.tradableInstrument.instrument.metadata.tags) {
+            expiry = getExpiryDate(
+              data?.tradableInstrument.instrument.metadata.tags,
+              data?.marketTimestamps.close,
+              data?.state
+            );
+          }
+          return expiry ? expiry : '-';
+        },
+      },
+    ],
+    []
+  );
 
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
@@ -64,258 +295,11 @@ export const MarketList = () => {
             cellClass: ['flex', 'flex-col', 'justify-center'],
             tooltipComponent: TooltipCellComponent,
           }}
+          columnDefs={columnDefs}
           getRowId={getRowId}
           isRowClickable
           tooltipShowDelay={500}
-        >
-          <AgGridColumn
-            headerName={t('Market (futures)')}
-            field="tradableInstrument.instrument.name"
-            cellRenderer={({
-              value,
-              data,
-            }: {
-              value: string;
-              data: Market;
-            }) => {
-              return (
-                <>
-                  <span className="leading-3">{value}</span>
-                  <span className="leading-3">
-                    {
-                      data?.tradableInstrument?.instrument?.product
-                        ?.settlementAsset?.symbol
-                    }
-                  </span>
-                </>
-              );
-            }}
-            minWidth={100}
-            flex="1"
-            headerTooltip={t('The market name and settlement asset')}
-          />
-
-          <AgGridColumn
-            headerName={t('Market Code')}
-            headerTooltip={t(
-              'The market code is a unique identifier for this market'
-            )}
-            field="tradableInstrument.instrument.code"
-          />
-
-          <AgGridColumn
-            headerName={t('Type')}
-            headerTooltip={t('Type')}
-            field="tradableInstrument.instrument.product.__typename"
-          />
-
-          <AgGridColumn
-            headerName={t('Last Price')}
-            headerTooltip={t('Latest price for this market')}
-            field="data.markPrice"
-            valueFormatter={({
-              value,
-              data,
-            }: VegaValueFormatterParams<Market, 'data.markPrice'>) =>
-              value && data
-                ? formatWithAsset(
-                    value,
-                    data.tradableInstrument.instrument.product.settlementAsset
-                  )
-                : '-'
-            }
-          />
-
-          <AgGridColumn
-            headerName={t('Change (24h)')}
-            headerTooltip={t('Change in price over the last 24h')}
-            cellRenderer={({
-              data,
-            }: VegaValueFormatterParams<Market, 'data.candles'>) => {
-              if (data && data.candles) {
-                const prices = data.candles.map((candle) => candle.close);
-                return (
-                  <PriceChangeCell
-                    candles={prices}
-                    decimalPlaces={data?.decimalPlaces}
-                  />
-                );
-              } else return <div>{t('-')}</div>;
-            }}
-          />
-
-          <AgGridColumn
-            headerName={t('Volume (24h)')}
-            field="dayVolume"
-            valueFormatter={({
-              value,
-              data,
-            }: VegaValueFormatterParams<Market, 'dayVolume'>) =>
-              value && data
-                ? `${addDecimalsFormatNumber(
-                    value,
-                    data.tradableInstrument.instrument.product.settlementAsset
-                      .decimals
-                  )} (${displayChange(data.volumeChange)})`
-                : '-'
-            }
-            headerTooltip={t('The trade volume over the last 24h')}
-          />
-
-          <AgGridColumn
-            headerName={t('Total staked by LPs')}
-            field="liquidityCommitted"
-            valueFormatter={({
-              value,
-              data,
-            }: VegaValueFormatterParams<Market, 'liquidityCommitted'>) =>
-              data && value
-                ? formatWithAsset(
-                    value.toString(),
-                    data.tradableInstrument.instrument.product.settlementAsset
-                  )
-                : '-'
-            }
-            headerTooltip={t(
-              'The amount of funds allocated to provide liquidity'
-            )}
-          />
-
-          <AgGridColumn
-            headerName={t('Target stake')}
-            field="target"
-            valueFormatter={({
-              value,
-              data,
-            }: VegaValueFormatterParams<Market, 'target'>) =>
-              data && value
-                ? formatWithAsset(
-                    value,
-                    data.tradableInstrument.instrument.product.settlementAsset
-                  )
-                : '-'
-            }
-            headerTooltip={t(
-              'The ideal committed liquidity to operate the market.  If total commitment currently below this level then LPs can set the fee level with new commitment.'
-            )}
-          />
-
-          <AgGridColumn
-            headerName={t('% Target stake met')}
-            valueFormatter={({
-              data,
-            }: VegaValueFormatterParams<Market, ''>) => {
-              if (data) {
-                const roundedPercentage =
-                  parseInt(
-                    (data.liquidityCommitted / parseFloat(data.target)).toFixed(
-                      0
-                    )
-                  ) * 100;
-                const display = Number.isNaN(roundedPercentage)
-                  ? 'N/A'
-                  : formatNumberPercentage(toBigNum(roundedPercentage, 0), 0);
-                return display;
-              } else return '-';
-            }}
-            headerTooltip={t('% Target stake met')}
-          />
-
-          <AgGridColumn
-            headerName={t('Fee levels')}
-            field="fees"
-            valueFormatter={({
-              value,
-            }: VegaValueFormatterParams<Market, 'fees'>) =>
-              value ? `${value.factors.liquidityFee}%` : '-'
-            }
-            headerTooltip={t('Fee level for this market')}
-          />
-
-          <AgGridColumn
-            headerName={t('Status')}
-            field="tradingMode"
-            cellRenderer={({
-              value,
-              data,
-            }: {
-              value: Schema.MarketTradingMode;
-              data: Market;
-            }) => {
-              return (
-                <Status trigger={data.data?.trigger} tradingMode={value} />
-              );
-            }}
-            headerTooltip={t(
-              'The current market status - those below the target stake mark are most in need of liquidity'
-            )}
-          />
-
-          <AgGridColumn
-            headerComponent={() => {
-              return (
-                <div>
-                  <span>{t('Health')}</span>{' '}
-                  <button
-                    onClick={() => setIsHealthDialogOpen(true)}
-                    aria-label={t('open tooltip')}
-                  >
-                    <Icon name="info-sign" />
-                  </button>
-                </div>
-              );
-            }}
-            field="tradingMode"
-            cellRenderer={({
-              value,
-              data,
-            }: {
-              value: Schema.MarketTradingMode;
-              data: Market;
-            }) => (
-              <HealthBar
-                target={data.target}
-                decimals={
-                  data.tradableInstrument.instrument.product.settlementAsset
-                    .decimals
-                }
-                levels={data.feeLevels}
-                intent={intentForStatus(value)}
-              />
-            )}
-            sortable={false}
-            cellStyle={{ overflow: 'unset' }}
-          />
-          <AgGridColumn
-            headerName={t('Age')}
-            field="marketTimestamps.open"
-            headerTooltip={t('Age of the market')}
-            valueFormatter={({
-              value,
-            }: VegaValueFormatterParams<Market, 'marketTimestamps.open'>) => {
-              return value ? formatDistanceToNow(new Date(value)) : '-';
-            }}
-          />
-          <AgGridColumn
-            headerName={t('Closing Time')}
-            field="tradableInstrument.instrument.metadata.tags"
-            headerTooltip={t('Closing time of the market')}
-            valueFormatter={({
-              data,
-            }: VegaValueFormatterParams<Market, ''>) => {
-              let expiry;
-              if (data?.tradableInstrument.instrument.metadata.tags) {
-                expiry = getExpiryDate(
-                  data?.tradableInstrument.instrument.metadata.tags,
-                  data?.marketTimestamps.close,
-                  data?.state
-                );
-              }
-              return expiry ? expiry : '-';
-            }}
-          />
-        </Grid>
-
+        />
         <HealthDialog
           isOpen={isHealthDialogOpen}
           onChange={() => {

apps/liquidity-provision-dashboard/src/app/components/detail/providers/providers.tsx

@@ -1,7 +1,6 @@
-import { useCallback } from 'react';
-import { AgGridColumn } from 'ag-grid-react';
+import { useCallback, useMemo } from 'react';
 
-import type { GetRowIdParams } from 'ag-grid-community';
+import type { GetRowIdParams, ColDef } from 'ag-grid-community';
 import { t } from '@vegaprotocol/i18n';
 
 import type {
@@ -36,6 +35,75 @@ export const LPProvidersGrid = ({
   };
 }) => {
   const getRowId = useCallback(({ data }: GetRowIdParams) => data.party.id, []);
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      {
+        headerName: t('LPs'),
+        field: 'party.id',
+        flex: 1,
+        minWidth: 100,
+        headerTooltip: t('Liquidity providers'),
+      },
+      {
+        headerName: t('Duration'),
+        valueFormatter: formatToHours,
+        field: 'createdAt',
+        headerTooltip: t('Time in market'),
+      },
+      {
+        headerName: t('Equity-like share'),
+        field: 'equityLikeShare',
+        valueFormatter: ({ value }: { value?: string | null }) => {
+          return value
+            ? `${parseFloat(parseFloat(value).toFixed(2)) * 100}%`
+            : '';
+        },
+        headerTooltip: t(
+          'The share of the markets liquidity held - the earlier you commit liquidity the greater % fees you earn'
+        ),
+        minWidth: 140,
+      },
+      {
+        headerName: t('committed bond'),
+        field: 'commitmentAmount',
+        valueFormatter: ({ value }: { value?: string | null }) =>
+          value ? formatWithAsset(value, settlementAsset) : '0',
+        headerTooltip: t('The amount of funds allocated to provide liquidity'),
+        minWidth: 140,
+      },
+      {
+        headerName: t('Margin Req.'),
+        field: 'margin',
+        headerTooltip: t(
+          'Margin required for arising positions based on liquidity commitment'
+        ),
+      },
+      {
+        headerName: t('24h Fees'),
+        field: 'fees',
+        headerTooltip: t(
+          'Total fees earned by the liquidity provider in the last 24 hours'
+        ),
+      },
+      {
+        headerName: t('Fee level'),
+        valueFormatter: ({ value }: { value?: string | null }) => `${value}%`,
+        field: 'fee',
+        headerTooltip: t(
+          "The market's liquidity fee, or the percentage of a trade's value which is collected from the price taker for every trade"
+        ),
+      },
+
+      {
+        headerName: t('APY'),
+        field: 'apy',
+        headerTooltip: t(
+          'An annualised estimate based on the total liquidity provision fees and maker fees collected by liquidity providers, the maximum margin needed and maximum commitment (bond) over the course of 7 epochs'
+        ),
+      },
+    ],
+    [settlementAsset]
+  );
 
   return (
     <Grid
@@ -49,74 +117,9 @@ export const LPProvidersGrid = ({
         tooltipComponent: TooltipCellComponent,
         minWidth: 100,
       }}
+      columnDefs={columnDefs}
       getRowId={getRowId}
       rowHeight={92}
-    >
-      <AgGridColumn
-        headerName={t('LPs')}
-        field="party.id"
-        flex="1"
-        minWidth={100}
-        headerTooltip={t('Liquidity providers')}
-      />
-      <AgGridColumn
-        headerName={t('Duration')}
-        valueFormatter={formatToHours}
-        field="createdAt"
-        headerTooltip={t('Time in market')}
-      />
-      <AgGridColumn
-        headerName={t('Equity-like share')}
-        field="equityLikeShare"
-        valueFormatter={({ value }: { value?: string | null }) => {
-          return value
-            ? `${parseFloat(parseFloat(value).toFixed(2)) * 100}%`
-            : '';
-        }}
-        headerTooltip={t(
-          'The share of the markets liquidity held - the earlier you commit liquidity the greater % fees you earn'
-        )}
-        minWidth={140}
-      />
-      <AgGridColumn
-        headerName={t('committed bond')}
-        field="commitmentAmount"
-        valueFormatter={({ value }: { value?: string | null }) =>
-          value ? formatWithAsset(value, settlementAsset) : '0'
-        }
-        headerTooltip={t('The amount of funds allocated to provide liquidity')}
-        minWidth={140}
-      />
-      <AgGridColumn
-        headerName={t('Margin Req.')}
-        field="margin"
-        headerTooltip={t(
-          'Margin required for arising positions based on liquidity commitment'
-        )}
-      />
-      <AgGridColumn
-        headerName={t('24h Fees')}
-        field="fees"
-        headerTooltip={t(
-          'Total fees earned by the liquidity provider in the last 24 hours'
-        )}
-      />
-      <AgGridColumn
-        headerName={t('Fee level')}
-        valueFormatter={({ value }: { value?: string | null }) => `${value}%`}
-        field="fee"
-        headerTooltip={t(
-          "The market's liquidity fee, or the percentage of a trade's value which is collected from the price taker for every trade"
-        )}
-      />
-
-      <AgGridColumn
-        headerName={t('APY')}
-        field="apy"
-        headerTooltip={t(
-          'An annualised estimate based on the total liquidity provision fees and maker fees collected by liquidity providers, the maximum margin needed and maximum commitment (bond) over the course of 7 epochs'
-        )}
-      />
-    </Grid>
+    />
   );
 };

apps/liquidity-provision-dashboard/src/app/components/grid/grid.tsx

@@ -1,5 +1,4 @@
 import { useRef, useCallback, useEffect } from 'react';
-import type { ReactNode } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import type {
   AgGridReactProps,
@@ -7,18 +6,17 @@ import type {
   AgGridReact as AgGridReactType,
 } from 'ag-grid-react';
 import classNames from 'classnames';
-import 'ag-grid-community/dist/styles/ag-grid.css';
-import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 
 import './grid.scss';
 
 type Props = (AgGridReactProps | AgReactUiProps) & {
   isRowClickable?: boolean;
   style?: React.CSSProperties;
-  children: ReactNode;
 };
 
-export const Grid = ({ isRowClickable, children, ...props }: Props) => {
+export const Grid = ({ isRowClickable, ...props }: Props) => {
   const gridRef = useRef<AgGridReactType | null>(null);
 
   const resizeGrid = useCallback(() => {
@@ -44,8 +42,6 @@ export const Grid = ({ isRowClickable, children, ...props }: Props) => {
       onGridReady={handleOnGridReady}
       suppressRowClickSelection
       {...props}
-    >
-      {children}
-    </AgGridReact>
+    />
   );
 };

apps/liquidity-provision-dashboard/tailwind.config.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme-lite');
 const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 const vegaCustomClassesLite = require('../../libs/tailwindcss-config/src/vega-custom-classes-lite');

apps/liquidity-provision-dashboard/tsconfig.app.json

@@ -5,8 +5,8 @@
     "types": ["node"]
   },
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": [
     "jest.config.ts",

apps/liquidity-provision-dashboard/tsconfig.spec.json

@@ -21,7 +21,7 @@
     "**/*.d.ts"
   ],
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ]
 }

apps/multisig-signer/.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     [
-      "@nrwl/react/babel",
+      "@nx/react/babel",
       {
         "runtime": "automatic"
       }

apps/multisig-signer/.eslintrc.json

@@ -1,6 +1,6 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/multisig-signer/README.md

@@ -26,7 +26,7 @@ Example configurations are provided here:
 For convenience, you can boot the app injecting one of the configurations above by running:
 
 ```bash
-yarn nx run multisig-signer:serve --env={env} # e.g. stagnet1
+yarn env-cmd -f .\apps\multisig-signer\.env.{env} yarn nx run multisig-signer:serve # e.g. stagnet1
 ```
 
 There are a few different configuration options offered for this app:

apps/multisig-signer/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'multisig-signer',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': 'babel-jest',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/multisig-signer',

apps/multisig-signer/project.json

@@ -1,10 +1,11 @@
 {
+  "name": "multisig-signer",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/multisig-signer/src",
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "./tools/executors/webpack:build",
+      "executor": "@nx/webpack:webpack",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -38,7 +39,7 @@
       }
     },
     "serve": {
-      "executor": "./tools/executors/webpack:serve",
+      "executor": "@nx/webpack:dev-server",
       "options": {
         "port": 3000,
         "buildTarget": "multisig-signer:build:development",
@@ -52,22 +53,28 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/multisig-signer/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/multisig-signer"],
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/apps/multisig-signer"],
       "options": {
         "jestConfig": "apps/multisig-signer/jest.config.ts",
         "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
       }
     },
     "build-netlify": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "cp apps/multisig-signer/netlify.toml netlify.toml",
@@ -76,7 +83,7 @@
       }
     },
     "build-spec": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/multisig-signer/tsconfig.spec.json"

apps/multisig-signer/tailwind.config.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
 const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 

apps/multisig-signer/tsconfig.app.json

@@ -5,8 +5,8 @@
     "types": ["node"]
   },
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": [
     "**/*.spec.ts",

apps/multisig-signer/tsconfig.spec.json

@@ -18,7 +18,7 @@
     "jest.config.ts"
   ],
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ]
 }

apps/multisig-signer/webpack.config.js

@@ -1,6 +1,8 @@
+const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
 const SentryPlugin = require('@sentry/webpack-plugin');
 
-module.exports = (config, context) => {
+module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   const additionalPlugins = process.env.SENTRY_AUTH_TOKEN
     ? [
         new SentryPlugin({
@@ -14,4 +16,4 @@ module.exports = (config, context) => {
     ...config,
     plugins: [...additionalPlugins, ...config.plugins],
   };
-};
+});

apps/static/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@nx/js/babel"]
+}

apps/static/project.json

@@ -1,11 +1,12 @@
 {
+  "name": "static",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/static/src",
   "tags": [],
   "targets": {
     "build": {
-      "executor": "./tools/executors/webpack:build",
+      "executor": "@nx/webpack:webpack",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -36,7 +37,7 @@
       }
     },
     "serve": {
-      "executor": "./tools/executors/webpack:serve",
+      "executor": "@nx/webpack:dev-server",
       "options": {
         "buildTarget": "static:build"
       },
@@ -47,7 +48,7 @@
       }
     },
     "build-netlify": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "cp apps/static/netlify.toml netlify.toml",

apps/trading-e2e/project.json

@@ -1,10 +1,11 @@
 {
+  "name": "trading-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/trading-e2e/src",
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/trading-e2e/cypress.config.js",
         "devServerTarget": "trading:serve"
@@ -19,14 +20,14 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/trading-e2e/**/*.{js,ts}"]
       }
     },
     "build": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/trading-e2e/"

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

@@ -97,6 +97,11 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
     cy.get('.ag-cell-value', txTimeout).should('contain.text', btcSymbol);
     cy.get('[col-id="status"]').should('not.have.text', 'Open', txTimeout);
 
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.get('[col-id="txHash"]')
       .should('have.length.above', 2)
       .eq(1)
@@ -415,6 +420,11 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
       .eq(0, txTimeout)
       .should('contain.text', 'Completed');
 
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.get('[col-id="txHash"]', txTimeout)
       .should('have.length.above', 1)
       .eq(1)
@@ -492,6 +502,11 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
     cy.get('.ag-cell-value', txTimeout).should('contain.text', vegaSymbol);
     cy.get('[col-id="status"]').should('not.have.text', 'Open', txTimeout);
 
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.get('[col-id="txHash"]')
       .should('have.length.above', 2)
       .eq(1)

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

@@ -201,7 +201,7 @@ describe('no all markets', { tags: '@smoke', testIsolation: true }, () => {
     cy.visit('/#/markets/all');
   });
 
-  it('can see no markets message', () => {
+  it.skip('can see no markets message', () => {
     // 6001-MARK-048
     cy.getByTestId('tab-all-markets').should('contain.text', 'No markets');
   });

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

@@ -137,6 +137,11 @@ describe('Market trading page', () => {
             .realHover();
         });
       });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(expirtyTooltip)
         .eq(0)
         .should(
@@ -170,6 +175,11 @@ describe('Market trading page', () => {
             .realHover();
         });
       });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(tradingModeTooltip)
         .should(
           'contain.text',
@@ -196,6 +206,11 @@ describe('Market trading page', () => {
           cy.getByTestId(itemValue).realHover();
         });
       });
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.getByTestId(liquiditySuppliedTooltip)
         .should('contain.text', 'Supplied stake')
         .and('contain.text', 'Target stake')

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

@@ -1,28 +1,180 @@
-describe('chart', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/#/markets/market-0');
-    cy.wait('@Markets');
-  });
-  it('config should persist', () => {
-    cy.getByTestId('Chart').click();
-    cy.get('[data-testid="tab-chart"] button').as('control-buttons');
-    cy.get('@control-buttons').each(($button) => {
-      cy.wrap($button).click();
-      cy.get(
-        '[role="menuitemradio"]:first, [role="menuitemcheckbox"]:first'
-      ).click();
-    });
-    cy.getByTestId('Depth').click();
-    cy.getByTestId('Chart').click();
-    cy.get('@control-buttons').each(($button) => {
-      cy.wrap($button).click();
-      cy.get('[role="menuitemradio"]:first, [role="menuitemcheckbox"]:first')
-        .within(($lastMenuItem) => {
-          expect($lastMenuItem.data('state')).to.equal('checked');
-        })
-        .click();
+interface ItemInfoType {
+  name: string;
+  infoText: string;
+}
+
+type CheckMenuItemsFnType = (
+  triggerSelector: string,
+  validTexts: string[],
+  clickItem?: string
+) => void;
+type CheckMenuItemCheckboxFnType = (
+  buttonText: string,
+  items: ItemInfoType[]
+) => void;
+
+const menuItemRadio = 'div[role="menuitemradio"]';
+const menuItemCheckbox = 'div[role="menuitemcheckbox"]';
+const button = 'button';
+const indicatorInfo = '.indicator-info-wrapper';
+
+const checkMenuItems: CheckMenuItemsFnType = (
+  triggerSelector,
+  validTexts,
+  clickItem
+) => {
+  cy.get(triggerSelector).click();
+
+  cy.get(menuItemRadio)
+    .should('have.length', validTexts.length)
+    .each(($el, index) => {
+      const text = $el.text().trim();
+      expect(text).to.equal(validTexts[index]);
     });
+
+  if (clickItem) {
+    cy.contains(menuItemRadio, clickItem).click();
+    cy.get(triggerSelector).click();
+    cy.get(`${menuItemRadio}[data-state="checked"]`)
+      .invoke('text')
+      .then((text: string) => {
+        expect(text.trim()).to.equal(clickItem);
+      });
+  }
+};
+
+const checkMenuItemCheckbox: CheckMenuItemCheckboxFnType = (
+  buttonText,
+  items
+) => {
+  items.forEach((item) => {
+    cy.contains(button, buttonText).click();
+    cy.contains(menuItemCheckbox, item.name).click();
   });
+
+  cy.contains(button, buttonText).click();
+  cy.get(menuItemCheckbox)
+    .should('have.length', items.length)
+    .each(($el, index) => {
+      const text = $el.text();
+      expect(text).to.equal(items[index].name);
+    });
+
+  items.forEach((item, index) => {
+    cy.get(indicatorInfo)
+      .eq(index + 1)
+      .invoke('text')
+      .should('eq', item.infoText);
+  });
+
+  cy.contains(button, buttonText).click({ force: true });
+};
+
+function getButtonSelectorByText(text: string): string {
+  return `${button}[aria-haspopup="menu"]:contains(${text})`;
+}
+
+beforeEach(() => {
+  cy.mockTradingPage();
+  cy.mockSubscription();
+  cy.visit('/#/markets/market-0');
+  cy.wait('@Markets');
 });
+
+describe(
+  'chart display options',
+  { tags: '@smoke', testIsolation: true },
+  () => {
+    it('change time interval', () => {
+      // 6004-CHAR-001
+      checkMenuItems(
+        getButtonSelectorByText('Interval:'),
+        ['1m', '5m', '15m', '1H', '6H', '1D'],
+        '1m'
+      );
+    });
+
+    it('change display type', () => {
+      // 6004-CHAR-002
+      // 6004-CHAR-003
+      checkMenuItems(
+        '[aria-label$="chart icon"]',
+        ['Mountain', 'Candlestick', 'Line', 'OHLC'],
+        'Mountain'
+      );
+    });
+
+    it('Overlays', () => {
+      // 6004-CHAR-004
+      // 6004-CHAR-008
+      // 6004-CHAR-009
+      // 6004-CHAR-034
+      // 6004-CHAR-037
+      // 6004-CHAR-039
+      // 6004-CHAR-041
+
+      const overlayInfo: ItemInfoType[] = [
+        {
+          name: 'Bollinger bands',
+          infoText: 'Bollinger: Upper 174.78590Lower 173.38014',
+        },
+        {
+          name: 'Envelope',
+          infoText: 'Envelope: Upper 191.29000Lower 156.51000',
+        },
+        { name: 'EMA', infoText: 'EMA: 174.06793' },
+        { name: 'Moving average', infoText: 'Moving average: 174.08302' },
+        {
+          name: 'Price monitoring bounds',
+          infoText: 'Price Monitoring Bounds: Min -Max -Reference -',
+        },
+      ];
+
+      checkMenuItemCheckbox('Overlays', overlayInfo);
+    });
+
+    it('Studies', () => {
+      // 6004-CHAR-005
+      // 6004-CHAR-006
+      // 6004-CHAR-007
+      // 6004-CHAR-042
+      // 6004-CHAR-045
+      // 6004-CHAR-047
+      // 6004-CHAR-049
+      // 6004-CHAR-051
+      const studyInfo: ItemInfoType[] = [
+        {
+          name: 'Eldar-ray',
+          infoText: 'Eldar-ray: Bull -0.08376Bear -0.58376',
+        },
+        { name: 'Force index', infoText: 'Force index: 987.48858' },
+        { name: 'MACD', infoText: 'MACD: S -0.06420D 0.00359MACD -0.06062' },
+        { name: 'RSI', infoText: 'RSI: 47.08648' },
+        { name: 'Volume', infoText: 'Volume: 55,000.00000' },
+      ];
+      cy.get(indicatorInfo).eq(1).realHover();
+      cy.get('.close-button-module_closeButton__2ifkl').click({ force: true });
+      cy.get(indicatorInfo).should('have.length', 1);
+
+      checkMenuItemCheckbox('Studies', studyInfo);
+    });
+
+    it('price details', () => {
+      // 6004-CHAR-010
+      const expectedDateRegex = new RegExp(
+        /^\d{2}:\d{2} \d{2} [A-Za-z]{3} \d{4}$/
+      );
+      const expectedOhlc = `O 173.60000H 174.00000L 173.50000C 173.90000Change −0.60000(−0.34%)`;
+      cy.get(indicatorInfo)
+        .eq(0)
+        .invoke('text')
+        .then((text) => {
+          const actualDate = text.slice(0, -67);
+          console.log(actualDate);
+          const actualOhlc = text.slice(-67);
+          assert.isTrue(expectedDateRegex.test(actualDate));
+          assert.strictEqual(actualOhlc, expectedOhlc);
+        });
+    });
+  }
+);

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

@@ -90,7 +90,7 @@ describe('orders list', { tags: '@smoke', testIsolation: true }, () => {
     cy.getByTestId('All').click();
 
     cy.get(`[row-id="${partiallyFilledId}"]`)
-      .eq(1)
+      .eq(0)
       .within(() => {
         cy.get(`[col-id='${orderStatus}']`).should(
           'have.text',
@@ -118,6 +118,11 @@ describe('orders list', { tags: '@smoke', testIsolation: true }, () => {
     cy.contains('Reset').click();
     cy.getByTestId('All').click();
 
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.getByTestId('tab-orders')
       .get(`.ag-center-cols-container [col-id='${orderSymbol}']`)
       .should('have.length.at.least', expectedOrderList.length)
@@ -441,6 +446,11 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       peggedOrder: null,
       liquidityProvisionId: null,
     });
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.get(`[row-id=${orderId}]`)
       .find('[data-testid="edit"]')
       .should('have.text', 'Edit')
@@ -470,6 +480,11 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       peggedOrder: null,
       liquidityProvisionId: null,
     });
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.get(`[row-id=${orderId}]`)
       .find(`[data-testid="cancel"]`)
       .should('have.text', 'Cancel')
@@ -492,6 +507,11 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       peggedOrder: null,
       liquidityProvisionId: null,
     });
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.get(`[data-testid="cancelAll"]`)
       .should('have.text', 'Cancel all')
       .then(($btn) => {
@@ -508,6 +528,11 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       peggedOrder: null,
       liquidityProvisionId: null,
     });
+    /**
+     * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+     * You should use .then() to chain commands instead.
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+     **/
     cy.get(`[row-id=${orderId}]`)
       .find('[data-testid="edit"]')
       .should('have.text', 'Edit')

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

@@ -47,6 +47,11 @@ describe('Portfolio page', { tags: '@smoke' }, () => {
       cy.get(
         '[role="columnheader"][col-id="fromAccountType"] .ag-header-cell-menu-button'
       ).click();
+      /**
+       * TODO(@nx/cypress): Nesting Cypress commands in a should assertion now throws.
+       * You should use .then() to chain commands instead.
+       * More Info: https://docs.cypress.io/guides/references/migration-guide#-should
+       **/
       cy.get('fieldset.ag-simple-filter-body-wrapper')
         .should('be.visible')
         .within((fields) => {

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

@@ -108,7 +108,7 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
         cy.get(
           '[row-id="02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65-market-2"]'
         )
-          .eq(1)
+          .eq(0)
           .within(() => {
             emptyCells.forEach((cell) => {
               cy.get(`[col-id="${cell}"]`).should('contain.text', '-');

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

@@ -73,7 +73,7 @@ describe('trades', { tags: '@smoke' }, () => {
 
   it('copy price to deal ticket form', () => {
     // 6005-THIS-007
-    cy.get(colIdPrice).last().click();
+    cy.get(colIdPrice).last().should('be.visible').click();
     cy.getByTestId('order-price').should('have.value', '171.16898');
   });
 });

apps/trading/.env.mainnet

@@ -14,4 +14,4 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.vega.xyz
 # TAG name of the current app version - TODO: bump to the latest upon release
-NX_APP_VERSION=v0.20.18-core-0.71.8
+NX_APP_VERSION=v0.20.19-core-0.71.6

apps/trading/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "plugin:@nrwl/nx/react-typescript",
+    "plugin:@nx/react-typescript",
     "../../.eslintrc.json",
     "next",
     "next/core-web-vitals"

apps/trading/README.md

@@ -25,7 +25,7 @@ Example configurations are provided here:
 For convenience, you can boot the app injecting one of the configurations above by running:
 
 ```bash
-yarn nx run token:serve --env={env} # e.g. stagnet1
+yarn env-cmd -f .\apps\token\.env.{env} yarn nx run token:serve # e.g. stagnet1
 ```
 
 There are a few different configuration options offered for this app:

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

@@ -91,10 +91,7 @@ const MarketBottomPanel = memo(
               </Tab>
               <Tab id="fills" name={t('Fills')}>
                 <VegaWalletContainer>
-                  <TradingViews.fills.component
-                    marketId={marketId}
-                    onMarketClick={onMarketClick}
-                  />
+                  <TradingViews.fills.component onMarketClick={onMarketClick} />
                 </VegaWalletContainer>
               </Tab>
             </Tabs>
@@ -166,10 +163,7 @@ const MarketBottomPanel = memo(
           </Tab>
           <Tab id="fills" name={t('Fills')}>
             <VegaWalletContainer>
-              <TradingViews.fills.component
-                marketId={marketId}
-                onMarketClick={onMarketClick}
-              />
+              <TradingViews.fills.component onMarketClick={onMarketClick} />
             </VegaWalletContainer>
           </Tab>
           <Tab id="accounts" name={t('Collateral')}>

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import classNames from 'classnames';
 import { truncateByChars } from '@vegaprotocol/utils';
@@ -12,9 +12,10 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-  Icon,
   Drawer,
   DropdownMenuSeparator,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { PubKey } from '@vegaprotocol/wallet';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
@@ -249,14 +250,14 @@ const KeypairItem = ({ pk }: { pk: PubKey }) => {
             {truncateByChars(pk.publicKey)}
           </span>
         </span>
-        <span>
+        <span className="inline-flex items-center gap-1">
           <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
             <button
               data-testid="copy-vega-public-key"
               onClick={(e) => e.stopPropagation()}
             >
               <span className="sr-only">{t('Copy')}</span>
-              <Icon name="duplicate" className="mr-2" />
+              <VegaIcon name={VegaIconNames.COPY} />
             </button>
           </CopyToClipboard>
           {copied && (
@@ -278,34 +279,20 @@ const KeypairListItem = ({
   isActive: boolean;
   onSelectItem: (pk: string) => void;
 }) => {
-  const [copied, setCopied] = useState(false);
-  useEffect(() => {
-    // eslint-disable-next-line
-    let timeout: any;
-
-    if (copied) {
-      timeout = setTimeout(() => {
-        setCopied(false);
-      }, 800);
-    }
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [copied]);
+  const [copied, setCopied] = useCopyTimeout();
 
   return (
     <div
       className="flex flex-col w-full ml-4 mr-2 mb-4"
       data-testid={`key-${pk.publicKey}-mobile`}
     >
-      <span className="mr-2">
+      <span className="flex gap-2 items-center mr-2">
         <button onClick={() => onSelectItem(pk.publicKey)}>
           <span className="uppercase">{pk.name}</span>
         </button>
-        {isActive && <Icon name="tick" className="ml-2" />}
+        {isActive && <VegaIcon name={VegaIconNames.TICK} />}
       </span>
-      <span className="text-neutral-500 dark:text-neutral-400">
+      <span className="flex gap-2 items-center">
         {truncateByChars(pk.publicKey)}{' '}
         <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
           <button
@@ -313,7 +300,7 @@ const KeypairListItem = ({
             onClick={(e) => e.stopPropagation()}
           >
             <span className="sr-only">{t('Copy')}</span>
-            <Icon name="duplicate" className="mr-2" />
+            <VegaIcon name={VegaIconNames.COPY} />
           </button>
         </CopyToClipboard>
         {copied && (

apps/trading/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'trading',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/trading',

apps/trading/next.config.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const withNx = require('@nrwl/next/plugins/with-nx');
+const withNx = require('@nx/next/plugins/with-nx');
 const { withSentryConfig } = require('@sentry/nextjs');
 
 const SENTRY_AUTH_TOKEN = process.env.SENTRY_AUTH_TOKEN;
@@ -11,7 +11,7 @@ const sentryWebpackOptions = {
 };
 
 /**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
   nx: {

apps/trading/pages/styles.css

@@ -1,6 +1,5 @@
-@import 'ag-grid-community/dist/styles/ag-grid.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-balham.css';
 
 @tailwind base;
 @tailwind components;

apps/trading/project.json

@@ -1,14 +1,14 @@
 {
+  "name": "trading",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/trading",
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "./tools/executors/next:build",
+      "executor": "@nx/next:build",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
-        "root": "apps/trading",
         "outputPath": "dist/apps/trading"
       },
       "configurations": {
@@ -19,7 +19,7 @@
       }
     },
     "serve": {
-      "executor": "./tools/executors/next:serve",
+      "executor": "@nx/next:server",
       "options": {
         "buildTarget": "trading:build",
         "dev": true
@@ -32,28 +32,34 @@
       }
     },
     "export": {
-      "executor": "./tools/executors/next:export",
+      "executor": "@nx/next:export",
       "options": {
         "buildTarget": "trading:build:production"
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/trading"],
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/apps/trading"],
       "options": {
         "jestConfig": "apps/trading/jest.config.ts",
         "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/trading/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "build-netlify": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "cp apps/trading/netlify.toml netlify.toml",
@@ -62,7 +68,7 @@
       }
     },
     "build-spec": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "outputs": [],
       "options": {
         "command": "yarn tsc --project ./apps/trading/tsconfig.spec.json"

apps/trading/tailwind.config.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
 const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 

docker/docker-build.sh

@@ -3,18 +3,19 @@
 export PATH="/app/node_modules/.bin:$PATH"
 
 flags="--network-timeout 100000 --pure-lockfile"
+envCmd=""
 
 if [[ ! -z "${ENV_NAME}" ]]; then
   if [[ "${ENV_NAME}" != "ops-vega" ]]; then
-    flags="--env=${ENV_NAME} $flags"
+    envCmd="envCmd="yarn env-cmd -f ./apps/${APP}/.env.${ENV_NAME}"
   fi
 fi
 
 if [ "${APP}" = "trading" ]; then
-  yarn nx export ${APP} $flags
+  $envCmd yarn nx export ${APP} $flags
   mv /app/dist/apps/trading/exported/ /app/tmp
   rm -rf /app/dist/apps/trading
   mv /app/tmp /app/dist/apps/trading
 else
-  yarn nx build ${APP} $flags
+  $envCmd yarn nx build ${APP} $flags
 fi

docker/prepare-dist.sh

@@ -1,13 +1,13 @@
 #!/bin/bash -e
 yarn --pure-lockfile
 app=${1:-trading}
-flags="--env=${2:-mainnet}"
+envCmd="envCmd="yarn env-cmd -f ./apps/${app}/.env.${2:-mainnet}"
 yarn install
 if [ "${app}" = "trading" ]; then
-  yarn nx export trading $flags
+  $envCmd yarn nx export trading
   DIST_LOCATION=dist/apps/trading/exported
 else
-  yarn nx build ${app} $flags
+  $envCmd yarn nx build ${app}
   DIST_LOCATION=dist/apps/${app}
 fi
 cp -r $DIST_LOCATION dist-result

jest.config.ts

@@ -1,4 +1,4 @@
-const { getJestProjects } = require('@nrwl/jest');
+const { getJestProjects } = require('@nx/jest');
 
 export default {
   projects: getJestProjects(),

jest.preset.js

@@ -1,3 +1,3 @@
-const nxPreset = require('@nrwl/jest/preset').default;
+const nxPreset = require('@nx/jest/preset').default;
 
 module.exports = { ...nxPreset };