chore: fix type error

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
Co-authored-by: dalebennett1992 <dalebennett1992@hotmail.co.uk>

.eslintrc.json

@@ -73,7 +73,8 @@
           "error",
           {
             "prefer": "type-imports",
-            "disallowTypeAnnotations": true
+            "disallowTypeAnnotations": true,
+            "fixStyle": "inline-type-imports"
           }
         ],
         "curly": ["error", "multi-line"]

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

@@ -34,7 +34,7 @@ jobs:
             ${{ runner.os }}-cache-node-modules-
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         if: steps.cache.outputs.cache-hit != 'true'
         with:
           node-version-file: '.nvmrc'
@@ -57,7 +57,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
@@ -96,7 +96,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: yarn
@@ -128,7 +128,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: yarn
@@ -182,7 +182,7 @@ jobs:
         run: |
           if [[ "${{ github.base_ref }}" == "develop" ]]; then
             echo "e2e-needed=true" >> $GITHUB_OUTPUT
-          elif [[ "${{ github.base_ref }}" == "main" ]]; then 
+          elif [[ "${{ github.base_ref }}" == "main" ]]; then
             echo "e2e-needed=true" >> $GITHUB_OUTPUT
           elif [[ "${{ github.event_name }}" == "push"  &&  "${{ github.ref_name }}" == *"release/"* ]]; then
             echo "e2e-needed=true" >> $GITHUB_OUTPUT
@@ -205,7 +205,7 @@ jobs:
 
   console-e2e:
     needs: [build-sources, check-e2e-needed]
-    name: '(CI) console python'
+    name: '(CI) trading e2e python'
     uses: ./.github/workflows/console-test-run.yml
     secrets: inherit
     if: needs.check-e2e-needed.outputs.run-tests == 'true' && contains(needs.build-sources.outputs.projects, 'trading')

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

@@ -10,7 +10,7 @@ on:
     inputs:
       console-test-branch:
         type: choice
-        description: 'main: v0.72.14, develop: v0.73.0-preview7'
+        description: 'main: v0.72.14, develop: v0.73.4'
         options:
           - main
           - develop
@@ -32,9 +32,9 @@ jobs:
       #       cache node modules
       #----------------------------------------------
       - name: setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
           cache: yarn
 
       - name: Cache node modules
@@ -153,25 +153,19 @@ jobs:
         run: |
           docker load --input /tmp/console-image.tar
           docker image ls -a
-
       #----------------------------------------------
-      #       check-out tests repo
+      #       check-out frontend-monorepo
       #----------------------------------------------
-      - name: Checkout console test repo
+      - name: Checkout frontend-monorepo
         uses: actions/checkout@v3
         with:
-          repository: vegaprotocol/console-test
-          ref: ${{ needs.console-test-branch.outputs.console-branch }}
-
-      - name: Load console test envs
-        id: console-test-env
-        uses: falti/dotenv-action@v1.0.4
-        with:
-          path: '.env.${{ needs.console-test-branch.outputs.console-branch  }}'
-          export-variables: true
-          keys-case: upper
-          log-variables: true
-
+          ref: ${{ inputs.github-sha || github.sha }}
+      #----------------------------------------------
+      #       get vega version
+      #----------------------------------------------
+      - name: Set VEGA_VERSION from .env
+        id: set_vega_version
+        run: echo "VEGA_VERSION=$(grep VEGA_VERSION apps/trading/e2e/.env | cut -d '=' -f2)" >> $GITHUB_ENV
       #----------------------------------------------
       #  -----  Setup python  -----
       #----------------------------------------------
@@ -194,22 +188,25 @@ jobs:
       #----------------------------------------------
       - name: Install dependencies
         run: poetry install --no-interaction --no-root
+        working-directory: apps/trading/e2e
       #----------------------------------------------
       # install vega binaries
       #----------------------------------------------
       - name: Install vega binaries
         run: poetry run python -m vega_sim.tools.load_binaries --force --version ${{ env.VEGA_VERSION }}
+        working-directory: apps/trading/e2e
       #----------------------------------------------
-      # install playwright
+      # install playwrightworking-directory: apps/trading/e2e
       #----------------------------------------------
       - name: install playwright
         run: poetry run playwright install --with-deps chromium
+        working-directory: apps/trading/e2e
       #----------------------------------------------
       # run tests
       #----------------------------------------------
       - name: Run tests
         run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 4 --dist loadfile --durations=15
-
+        working-directory: apps/trading/e2e
       #----------------------------------------------
       # upload traces
       #----------------------------------------------

.github/workflows/cypress-live-test.yml

@@ -18,11 +18,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node.js 16
+      - name: Use Node.js 20
         id: Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.15.1
+          node-version-file: '.nvmrc'
 
       - name: Run Cypress tests
         uses: cypress-io/github-action@v4

.github/workflows/cypress-run.yml

@@ -57,6 +57,14 @@ jobs:
           path: './frontend-monorepo'
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: './frontend-monorepo/.nvmrc'
+          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
+          cache: yarn
+          cache-dependency-path: './frontend-monorepo/yarn.lock'
+
       # Restore node_modules from cache if possible
       - name: Restore node_modules from cache
         id: cache-node-modules

.github/workflows/generate-queries.yml

@@ -15,7 +15,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions

.github/workflows/lint-pr.yml

@@ -18,13 +18,13 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version-file: '.nvmrc'
 
       - name: Install dependencies
         run: |
-          rm package.json 
+          rm package.json
           npm install --no-save @commitlint/cli @commitlint/config-conventional @commitlint/config-nx-scopes nx
 
       - name: Check PR title

.github/workflows/publish-dist.yml

@@ -93,7 +93,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions

.github/workflows/publish-npm.yml

@@ -29,7 +29,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions

.gitignore

@@ -52,3 +52,12 @@ cypress.env.json
 /apps/**/cypress/reports/
 /apps/**/cypress/downloads/
 /apps/**/fixtures/wallet/node**
+
+#console-test
+__pycache__/
+apps/trading/e2e/logs/
+apps/trading/e2e/.pytest_cache/
+apps/trading/e2e/traces/
+
+.nx/cache
+

.nvmrc

@@ -1 +1 @@
-16.20.2
+20.9.0

.prettierignore

@@ -8,3 +8,8 @@ __generated___
 apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json
 apps/static/src/assets/testnet-tranches.json
+
+/apps/**/cypress/reports/
+/apps/**/cypress/downloads/
+
+/.nx/cache

CODEOWNERS

@@ -1,2 +1,4 @@
 * @vegaprotocol/frontend
+apps/ @vegaprotocol/frontend-qa
+libs/ @vegaprotocol/frontend-qa
 *.graphql @vegaprotocol/core

README.md

@@ -136,7 +136,7 @@ The [`docker`](./docker) subfolder has some docker configurations for easily set
 Using multistage dockerfile dist is compiled using [node](https://hub.docker.com/_/node) image and later packed to nginx as in [dist build](#dist-build). The multistage builds ensures consistent CPU architecture and build toolchains are used so that the result will be identical.
 
 ```bash
-docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=16.5.1 --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
+docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=20.9.1 --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
 ```
 
 ### Computing ipfs-hash of the build

apps/explorer-e2e/.eslintrc.json

@@ -4,7 +4,9 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "cypress/unsafe-to-chain-command": 0
+      }
     }
   ]
 }

apps/explorer-e2e/project.json

@@ -17,7 +17,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/explorer-e2e/**/*.{js,ts}"]

apps/explorer/project.json

@@ -53,7 +53,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/explorer/**/*.{ts,tsx,js,jsx}"]
@@ -63,14 +63,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/explorer"],
       "options": {
-        "jestConfig": "apps/explorer/jest.config.ts",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "jestConfig": "apps/explorer/jest.config.ts"
       }
     },
     "generate-types": {

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

@@ -1,20 +1,25 @@
 import { useMemo } from 'react';
-import type { AssetFieldsFragment } from '@vegaprotocol/assets';
-import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
+import {
+  useAssetTypeMapping,
+  useAssetStatusMapping,
+  type AssetFieldsFragment,
+} from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import type { AgGridReact } from 'ag-grid-react';
+import { type AgGridReact } from 'ag-grid-react';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import type { VegaICellRendererParams } 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, ColDef } from 'ag-grid-community';
+import { type RowClickedEvent, ColDef } from 'ag-grid-community';
 
 type AssetsTableProps = {
   data: AssetFieldsFragment[] | null;
 };
 export const AssetsTable = ({ data }: AssetsTableProps) => {
+  const assetTypeMapping = useAssetTypeMapping();
+  const assetStatusMapping = useAssetStatusMapping();
   const navigate = useNavigate();
   const ref = useRef<AgGridReact>(null);
   const showColumnsOnDesktop = () => {
@@ -47,14 +52,14 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
         field: 'source.__typename',
         hide: window.innerWidth < BREAKPOINT_MD,
         valueFormatter: ({ value }: { value?: string }) =>
-          value ? AssetTypeMapping[value].value : '',
+          value ? assetTypeMapping[value].value : '',
       },
       {
         headerName: t('Status'),
         field: 'status',
         hide: window.innerWidth < BREAKPOINT_MD,
         valueFormatter: ({ value }: { value?: string }) =>
-          value ? AssetStatusMapping[value].value : '',
+          value ? assetStatusMapping[value].value : '',
       },
       {
         colId: 'actions',
@@ -69,7 +74,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
         }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
           value ? (
             <ButtonLink
-              onClick={(e) => {
+              onClick={() => {
                 navigate(value);
               }}
             >
@@ -80,7 +85,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
           ),
       },
     ],
-    [navigate]
+    [navigate, assetStatusMapping, assetTypeMapping]
   );
 
   return (

apps/explorer/src/app/components/links/market-link/market-link.spec.tsx

@@ -91,6 +91,6 @@ describe('Market link component', () => {
     };
 
     const res = render(renderComponent('123', [mock]));
-    expect(await res.findByText('123')).toBeInTheDocument();
+    expect(await res.findByTitle('123')).toBeInTheDocument();
   });
 });

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

@@ -2,18 +2,18 @@ import { useMemo } from 'react';
 import { getAsset, type MarketFieldsFragment } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import type { AgGridReact } from 'ag-grid-react';
-import type { ColDef } from 'ag-grid-community';
+import { type AgGridReact } from 'ag-grid-react';
+import { type ColDef } from 'ag-grid-community';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import type {
-  VegaICellRendererParams,
-  VegaValueGetterParams,
+import {
+  type VegaICellRendererParams,
+  type VegaValueGetterParams,
 } from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { MarketStateMapping } from '@vegaprotocol/types';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
-import type { RowClickedEvent } from 'ag-grid-community';
+import { type RowClickedEvent } from 'ag-grid-community';
 import { Link, useNavigate } from 'react-router-dom';
 
 type MarketsTableProps = {

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

@@ -17,7 +17,7 @@ function renderAmendOrderDetails(
   mocks: MockedResponse[]
 ) {
   return render(
-    <MockedProvider mocks={mocks} addTypename={false}>
+    <MockedProvider mocks={mocks}>
       <MemoryRouter>
         <AmendOrderDetails version={version} id={id} amend={amend} />
       </MemoryRouter>
@@ -44,18 +44,18 @@ function renderExistingAmend(
           orderByID: {
             __typename: 'Order',
             id: '123',
-            type: 'GTT',
+            type: Schema.OrderType.TYPE_LIMIT,
             status: Schema.OrderStatus.STATUS_ACTIVE,
-            version: version,
+            version: version ? version.toString() : '',
             createdAt: '123',
             updatedAt: '456',
             expiresAt: '789',
             timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
             price: '200',
-            side: 'BUY',
+            side: Schema.Side.SIDE_BUY,
             peggedOrder: null,
             remaining: '99',
-            rejectionReason: 'rejection',
+            rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_NOT_FOUND,
             reference: '123',
             size: '100',
             party: {
@@ -65,18 +65,15 @@ function renderExistingAmend(
             market: {
               __typename: 'Market',
               id: '789',
-              state: 'STATUS_ACTIVE',
+              state: Schema.MarketState.STATE_ACTIVE,
               positionDecimalPlaces: 2,
-              decimalPlaces: '5',
+              decimalPlaces: 0,
               tradableInstrument: {
                 instrument: {
                   name: 'test',
                   product: {
                     __typename: 'Future',
                     quoteName: '123',
-                    settlementAsset: {
-                      decimals: 8,
-                    },
                   },
                 },
               },
@@ -97,18 +94,18 @@ function renderExistingAmend(
           orderByID: {
             __typename: 'Order',
             id: '123',
-            type: 'GTT',
+            type: Schema.OrderType.TYPE_LIMIT,
             status: Schema.OrderStatus.STATUS_ACTIVE,
-            version: 100,
+            version: '100',
             createdAt: '123',
             updatedAt: '456',
             expiresAt: '789',
             timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
             peggedOrder: null,
             price: '200',
-            side: 'BUY',
+            side: Schema.Side.SIDE_BUY,
             remaining: '99',
-            rejectionReason: 'rejection',
+            rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_NOT_FOUND,
             reference: '123',
             size: '200',
             party: {
@@ -117,19 +114,16 @@ function renderExistingAmend(
             },
             market: {
               __typename: 'Market',
-              id: 'amend-to-order-latest-version',
-              state: 'STATUS_ACTIVE',
+              id: '8888',
+              state: Schema.MarketState.STATE_ACTIVE,
               positionDecimalPlaces: 2,
-              decimalPlaces: '5',
+              decimalPlaces: 0,
               tradableInstrument: {
                 instrument: {
                   name: 'amend-to-order-latest-version-test',
                   product: {
                     __typename: 'Future',
                     quoteName: '123',
-                    settlementAsset: {
-                      decimals: 8,
-                    },
                   },
                 },
               },
@@ -142,13 +136,13 @@ function renderExistingAmend(
       request: {
         query: ExplorerMarketDocument,
         variables: {
-          id: '789',
+          id: '8888',
         },
       },
       result: {
         data: {
           market: {
-            id: '789',
+            id: '8888',
             decimalPlaces: 5,
             positionDecimalPlaces: 2,
             state: 'irrelevant-test-data',
@@ -225,12 +219,10 @@ describe('Amend order details', () => {
 
   it('Fetches latest version when version is not specified', async () => {
     const amend: Amend = {
-      price: '-7879',
+      price: '123',
     };
 
     const res = renderExistingAmend('123', undefined, amend);
-    expect(
-      await res.findByText('amend-to-order-latest-version')
-    ).toBeInTheDocument();
+    expect(await res.findByText('test-label')).toBeInTheDocument();
   });
 });

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

@@ -46,10 +46,10 @@ const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
       <div className={wrapperClasses}>
         <div className="mb-12 lg:mb-0">
           <div className="relative block rounded-lg px-3 py-6 md:px-6 lg:-mr-7">
-            <h2 className="text-3xl font-bold mb-4 display-5">
+            <h2 className="display-5 mb-4 text-3xl font-bold">
               {t('Order not found')}
             </h2>
-            <p className="text-gray-500 mb-12">
+            <p className="mb-12 text-gray-500">
               {t('No order created from this transaction')}
             </p>
           </div>
@@ -68,24 +68,24 @@ const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
     <div className={wrapperClasses}>
       <div className="mb-12 lg:mb-0">
         <div className="relative block px-3 py-6 md:px-6 lg:-mr-7">
-          <h2 className="text-3xl font-bold mb-4 display-5">
+          <h2 className="display-5 mb-4 text-3xl font-bold">
             {t('Edits to ')}
             {sideText[o.side]}
             {t(' order')}
           </h2>
-          <p className="text-gray-500 mb-4">
+          <div className="mb-4 text-gray-500">
             In <MarketLink id={o.market.id} />, updated at{' '}
             <Time date={o.updatedAt} />.
-          </p>
+          </div>
 
-          <div className="grid md:grid-cols-4 gap-x-6">
+          <div className="grid gap-x-6 md:grid-cols-4">
             {amend.sizeDelta && amend.sizeDelta !== '0' ? (
               <div className="mb-12 md:mb-0">
-                <h2 className="text-2xl font-bold text-dark mb-4">
+                <h2 className="text-dark mb-4 text-2xl font-bold">
                   {t('New size')}
                 </h2>
                 <h5
-                  className={`text-lg font-medium text-gray-500 mb-0 capitalize ${getSideDeltaColour(
+                  className={`mb-0 text-lg font-medium capitalize text-gray-500 ${getSideDeltaColour(
                     amend.sizeDelta
                   )}`}
                 >
@@ -96,10 +96,10 @@ const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
 
             {amend.price && amend.price !== '0' ? (
               <div className="">
-                <h2 className="text-2xl font-bold text-dark mb-4">
+                <h2 className="text-dark mb-4 text-2xl font-bold">
                   {t('New price')}
                 </h2>
-                <h5 className="text-lg font-medium text-gray-500 mb-0">
+                <h5 className="mb-0 text-lg font-medium text-gray-500">
                   <PriceInMarket price={amend.price} marketId={o.market.id} />
                 </h5>
               </div>
@@ -108,10 +108,10 @@ const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
             {amend.peggedReference &&
             amend.peggedReference !== 'PEGGED_REFERENCE_UNSPECIFIED' ? (
               <div className="">
-                <h2 className="text-2xl font-bold text-dark mb-4">
+                <h2 className="text-dark mb-4 text-2xl font-bold">
                   {t('New reference')}
                 </h2>
-                <h5 className="text-lg font-medium text-gray-500 mb-0">
+                <h5 className="mb-0 text-lg font-medium text-gray-500">
                   {peggedReference[amend.peggedReference]}
                 </h5>
               </div>
@@ -119,10 +119,10 @@ const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
 
             {amend.peggedOffset ? (
               <div className="">
-                <h2 className="text-2xl font-bold text-dark mb-4">
+                <h2 className="text-dark mb-4 text-2xl font-bold">
                   {t('New offset')}
                 </h2>
-                <h5 className="text-lg font-medium text-gray-500 mb-0">
+                <h5 className="mb-0 text-lg font-medium text-gray-500">
                   {amend.peggedOffset}
                 </h5>
               </div>

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

@@ -1,14 +1,14 @@
-import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
+import { type ProposalListFieldsFragment } from '@vegaprotocol/proposals';
 import { VoteProgress } from '@vegaprotocol/proposals';
-import type { AgGridReact } from 'ag-grid-react';
+import { type AgGridReact } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import type {
-  VegaICellRendererParams,
-  VegaValueFormatterParams,
+import {
+  type VegaICellRendererParams,
+  type VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import type { RowClickedEvent, ColDef } from 'ag-grid-community';
+import { type RowClickedEvent, ColDef } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -105,7 +105,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
               ? new BigNumber(0)
               : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
             return (
-              <div className="flex items-center justify-center h-full pt-2 uppercase">
+              <div className="flex h-full items-center justify-center pt-2 uppercase">
                 <VoteProgress
                   threshold={requiredMajorityPercentage}
                   progress={yesPercentage}

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

@@ -3,8 +3,8 @@ import { DATA_SOURCES } from '../../../config';
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import { TxDetailsOrder } from './tx-order';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { type BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import { type TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
 import { TxDetailsHeartbeat } from './tx-hearbeat';
 import { TxDetailsGeneric } from './tx-generic';
 import { TxDetailsBatch } from './tx-batch';

apps/explorer/src/app/components/txs/txs-per-block.tsx

@@ -1,7 +1,7 @@
 import { Table, TableRow } from '../table';
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
-import type { BlockExplorerTransactions } from '../../routes/types/block-explorer-response';
+import { type BlockExplorerTransactions } from '../../routes/types/block-explorer-response';
 import { getTxsDataUrl } from '../../hooks/get-txs-data-url';
 import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
 import EmptyList from '../empty-list/empty-list';
@@ -22,7 +22,7 @@ export const TxsPerBlock = ({ blockHeight, txCount }: TxsPerBlockProps) => {
   return (
     <AsyncRenderer data={data} error={error} loading={!!loading}>
       {data && data.transactions.length > 0 ? (
-        <div className="overflow-x-auto whitespace-nowrap mb-28">
+        <div className="mb-28 overflow-x-auto whitespace-nowrap">
           <Table>
             <thead>
               <TableRow modifier="bordered" className="font-mono">

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -1,14 +1,14 @@
 import { useSearchParams } from 'react-router-dom';
-import type { URLSearchParamsInit } from 'react-router-dom';
+import { type URLSearchParamsInit } from 'react-router-dom';
 import { useCallback } from 'react';
 import { useFetch } from '@vegaprotocol/react-helpers';
-import type {
-  BlockExplorerTransactionResult,
-  BlockExplorerTransactions,
+import {
+  type BlockExplorerTransactionResult,
+  type BlockExplorerTransactions,
 } from '../routes/types/block-explorer-response';
 import isNumber from 'lodash/isNumber';
 import { AllFilterOptions } from '../components/txs/tx-filter';
-import type { FilterOption } from '../components/txs/tx-filter';
+import { type FilterOption } from '../components/txs/tx-filter';
 import { BE_TXS_PER_REQUEST, getTxsDataUrl } from './get-txs-data-url';
 
 export function getTypeFilters(filters?: Set<FilterOption>) {

apps/explorer/src/app/routes/assets/asset-page.tsx

@@ -9,11 +9,13 @@ import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { useState } from 'react';
 import { PageTitle } from '../../components/page-helpers/page-title';
 
+type Params = { assetId: string };
+
 export const AssetPage = () => {
   useDocumentTitle(['Assets']);
   useScrollToLocation();
 
-  const { assetId } = useParams<{ assetId: string }>();
+  const { assetId } = useParams<Params>();
   const { data, loading, error } = useAssetDataProvider(assetId || '');
 
   const title = data ? data.name : error ? t('Asset not found') : '';
@@ -41,7 +43,7 @@ export const AssetPage = () => {
           loading={loading}
           error={error}
         >
-          <div className="h-full relative">
+          <div className="relative h-full">
             <AssetDetailsTable asset={data as AssetFieldsFragment} />
           </div>
         </AsyncRenderer>

apps/explorer/src/app/routes/blocks/home/index.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 import { DATA_SOURCES } from '../../../config';
-import type {
-  BlockMeta,
-  TendermintBlockchainResponse,
+import {
+  type BlockMeta,
+  type TendermintBlockchainResponse,
 } from '../tendermint-blockchain-response';
 import { RouteTitle } from '../../../components/route-title';
 import { BlocksRefetch } from '../../../components/blocks';

apps/explorer/src/app/routes/blocks/id/block.tsx

@@ -17,8 +17,10 @@ import { NodeLink } from '../../../components/links';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 import EmptyList from '../../../components/empty-list/empty-list';
 
+type Params = { block: string };
+
 const Block = () => {
-  const { block } = useParams<{ block: string }>();
+  const { block } = useParams<Params>();
   useDocumentTitle(['Blocks', `Block #${block}`]);
   const {
     state: { data: blockData, loading, error },
@@ -29,7 +31,7 @@ const Block = () => {
       <RouteTitle data-testid="block-header">{t(`BLOCK ${block}`)}</RouteTitle>
       <AsyncRenderer data={blockData} error={error} loading={!!loading}>
         <>
-          <div className="grid grid-cols-2 gap-2 mb-8">
+          <div className="mb-8 grid grid-cols-2 gap-2">
             <Link
               data-testid="previous-block"
               to={`/${Routes.BLOCKS}/${Number(block) - 1}`}

apps/explorer/src/app/routes/genesis/index.tsx

@@ -3,7 +3,7 @@ import { useFetch } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../components/route-title';
 import { AsyncRenderer, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { DATA_SOURCES } from '../../config';
-import type { TendermintGenesisResponse } from './tendermint-genesis-response';
+import { type TendermintGenesisResponse } from './tendermint-genesis-response';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 
 const Genesis = () => {

apps/explorer/src/app/routes/markets/market-page.tsx

@@ -11,10 +11,12 @@ import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { marketInfoWithDataProvider } from '@vegaprotocol/markets';
 import { PageTitle } from '../../components/page-helpers/page-title';
 
+type Params = { marketId: string };
+
 export const MarketPage = () => {
   useScrollToLocation();
 
-  const { marketId } = useParams<{ marketId: string }>();
+  const { marketId } = useParams<Params>();
 
   const { data, loading, error } = useDataProvider({
     dataProvider: marketInfoWithDataProvider,

apps/explorer/src/app/routes/oracles/components/oracle-markets.tsx

@@ -1,8 +1,10 @@
 import { getNodes } from '@vegaprotocol/utils';
 import { MarketLink } from '../../../components/links';
 import { TableRow, TableCell, TableHeader } from '../../../components/table';
-import type { ExplorerOracleForMarketsMarketFragment } from '../__generated__/OraclesForMarkets';
-import { useExplorerOracleFormMarketsQuery } from '../__generated__/OraclesForMarkets';
+import {
+  useExplorerOracleFormMarketsQuery,
+  type ExplorerOracleForMarketsMarketFragment,
+} from '../__generated__/OraclesForMarkets';
 
 interface OracleMarketsProps {
   id: string;

apps/explorer/src/app/routes/oracles/id/index.tsx

@@ -9,8 +9,10 @@ import { AsyncRenderer, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import filter from 'recursive-key-filter';
 import { TruncateInline } from '../../../components/truncate/truncate';
 
+type Params = { id: string };
+
 export const Oracle = () => {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<Params>();
 
   useDocumentTitle(['Oracle', `Oracle #${truncateByChars(id || '1', 5, 5)}`]);
 

apps/explorer/src/app/routes/parties/id/accounts/index.tsx

@@ -6,8 +6,10 @@ import { useDocumentTitle } from '../../../../hooks/use-document-title';
 
 import { PartyAccounts } from '../components/party-accounts';
 
+type Params = { party: string };
+
 const PartyAccountsByAsset = () => {
-  const { party } = useParams<{ party: string }>();
+  const { party } = useParams<Params>();
 
   useDocumentTitle(['Public keys', party || '-']);
   const partyId = toNonHex(party ? party : '');

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -19,11 +19,13 @@ import type { FilterOption } from '../../../components/txs/tx-filter';
 import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
 import { useSearchParams } from 'react-router-dom';
 
+type Params = { party: string };
+
 const Party = () => {
   const [params] = useSearchParams();
 
   const [filters, setFilters] = useState(new Set(AllFilterOptions));
-  const { party } = useParams<{ party: string }>();
+  const { party } = useParams<Params>();
 
   useDocumentTitle(['Public keys', party || '-']);
   const navigate = useNavigate();
@@ -60,7 +62,7 @@ const Party = () => {
 
   if (!isValidPartyId(partyId)) {
     return (
-      <div className="max-w-sm mx-auto">
+      <div className="mx-auto max-w-sm">
         <Notification
           message={t('Invalid party ID')}
           intent={Intent.Danger}
@@ -84,7 +86,7 @@ const Party = () => {
         truncateEnd={visibleChars}
       />
 
-      <div className="grid md:grid-flow-col grid-flow-row md:space-x-4 grid-cols-1 md:grid-cols-2 w-full">
+      <div className="grid w-full grid-flow-row grid-cols-1 md:grid-flow-col md:grid-cols-2 md:space-x-4">
         <PartyBlockAccounts
           accountError={AccountError}
           accountLoading={AccountLoading}

apps/explorer/src/app/routes/txs/id/index.tsx

@@ -4,13 +4,15 @@ import { useFetch } from '@vegaprotocol/react-helpers';
 import { DATA_SOURCES } from '../../../config';
 import { RenderFetched } from '../../../components/render-fetched';
 import { TxDetails } from './tx-details';
-import type { BlockExplorerTransaction } from '../../../routes/types/block-explorer-response';
+import { type BlockExplorerTransaction } from '../../../routes/types/block-explorer-response';
 import { toNonHex } from '../../../components/search/detect-search';
 import { PageHeader } from '../../../components/page-header';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 
+type Params = { txHash: string };
+
 const Tx = () => {
-  const { txHash } = useParams<{ txHash: string }>();
+  const { txHash } = useParams<Params>();
   const hash = txHash ? toNonHex(txHash) : '';
   let errorMessage: string | undefined = undefined;
 

apps/explorer/tsconfig.app.json

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "files": [
     "../../node_modules/@nx/react/typings/cssmodule.d.ts",

apps/explorer/tsconfig.spec.json

@@ -3,7 +3,13 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": [
+      "jest",
+      "node",
+      "@testing-library/jest-dom",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "include": [
     "**/*.test.ts",

apps/governance-e2e/.eslintrc.json

@@ -1,10 +1,12 @@
 {
   "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "cypress"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "cypress/unsafe-to-chain-command": 0
+      }
     }
   ]
 }

apps/governance-e2e/project.json

@@ -17,7 +17,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/governance-e2e/**/*.{js,ts}"]

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

@@ -31,7 +31,7 @@ import {
   switchVegaWalletPubKey,
   vegaWalletSetSpecifiedApprovalAmount,
 } from '../../support/wallet-functions';
-import type { testFreeformProposal } from '../../support/common-interfaces';
+import { type testFreeformProposal } from '../../support/common-interfaces';
 import { formatDateWithLocalTimezone } from '@vegaprotocol/utils';
 import {
   createGovernanceTransferProposalTxBody,
@@ -61,6 +61,7 @@ const marketProposalType = 'proposal-type';
 describe(
   'Governance flow for proposal details',
   { tags: '@slow' },
+  // @ts-ignore clash between jest and cypress
   function () {
     before('connect wallets and set approval limit', function () {
       cy.visit('/');
@@ -78,6 +79,7 @@ describe(
       getProposalInformationFromTable('ID').invoke('text').as('parentMarketId');
     });
 
+    // @ts-ignore clash between jest and cypress
     beforeEach('visit proposals tab', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();
@@ -323,6 +325,7 @@ describe(
           });
       });
       cy.VegaWalletSubmitProposal(
+        // @ts-ignore this is any
         createSuccessorMarketProposalTxBody(this.parentMarketId)
       );
       navigateTo(navigation.proposals);
@@ -334,6 +337,7 @@ describe(
       cy.getByTestId(proposalTermsToggle).click();
       cy.get('.language-json').within(() => {
         cy.get('.hljs-attr').should('contain.text', 'parentMarketId');
+        // @ts-ignore this is any
         cy.get('.hljs-string').should('contain.text', this.parentMarketId);
         cy.get('.hljs-attr').should('contain.text', 'insurancePoolFraction');
         cy.get('.hljs-string').should('contain.text', '0.75');
@@ -352,6 +356,7 @@ describe(
         validateProposalDetailsDiff(
           'Parent Market ID',
           proposalChangeType.ADDED,
+          // @ts-ignore this is any
           this.parentMarketId
         );
         validateProposalDetailsDiff(
@@ -450,6 +455,7 @@ describe(
       const closingTimestamp = createTenDigitUnixTimeStampForSpecifiedDays(2);
       submitUniqueRawProposal({
         proposalBody: proposalPath,
+        // @ts-ignore this is any
         updateMarketId: this.parentMarketId,
         enactmentTimestamp: enactmentTimestamp,
         closingTimestamp: closingTimestamp,
@@ -466,6 +472,7 @@ describe(
       cy.getByTestId('proposal-update-market-state').within(() => {
         getProposalInformationFromTable('Market ID')
           .invoke('text')
+          // @ts-ignore this is any
           .and('eq', this.parentMarketId);
       });
     });
@@ -476,6 +483,7 @@ describe(
       const closingTimestamp = createTenDigitUnixTimeStampForSpecifiedDays(2);
       submitUniqueRawProposal({
         proposalBody: proposalPath,
+        // @ts-ignore this is any
         updateMarketId: this.parentMarketId,
         enactmentTimestamp: enactmentTimestamp,
         closingTimestamp: closingTimestamp,
@@ -489,6 +497,7 @@ describe(
       cy.getByTestId('proposal-update-market-state').within(() => {
         getProposalInformationFromTable('Market ID')
           .invoke('text')
+          // @ts-ignore this is any
           .and('eq', this.parentMarketId);
       });
     });
@@ -499,6 +508,7 @@ describe(
       const closingTimestamp = createTenDigitUnixTimeStampForSpecifiedDays(2);
       submitUniqueRawProposal({
         proposalBody: proposalPath,
+        // @ts-ignore this is any
         updateMarketId: this.parentMarketId,
         enactmentTimestamp: enactmentTimestamp,
         closingTimestamp: closingTimestamp,
@@ -518,6 +528,7 @@ describe(
       cy.getByTestId('proposal-update-market-state').within(() => {
         getProposalInformationFromTable('Market ID')
           .invoke('text')
+          // @ts-ignore this is any
           .and('eq', this.parentMarketId);
         getProposalDetailsValue('Termination Price').should(
           'contain.text',

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

@@ -37,6 +37,7 @@ context(
       vegaWalletSetSpecifiedApprovalAmount('1000');
     });
 
+    // @ts-ignore clash between jest and cypress
     beforeEach('visit proposals', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();

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

@@ -34,7 +34,7 @@ import {
   vegaWalletTeardown,
 } from '../../support/wallet-functions';
 import { ethereumWalletConnect } from '../../support/wallet-eth.functions';
-import type { testFreeformProposal } from '../../support/common-interfaces';
+import { type testFreeformProposal } from '../../support/common-interfaces';
 
 const vegaWalletStakedBalances = 'vega-wallet-balance-staked-validators';
 const vegaWalletAssociatedBalance = 'associated-amount';
@@ -78,6 +78,7 @@ context(
       vegaWalletSetSpecifiedApprovalAmount('1000');
     });
 
+    // @ts-ignore clash between jest and cypress
     beforeEach('visit governance tab', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();
@@ -301,6 +302,7 @@ context(
       cy.getByTestId(voteButtons).should('not.exist');
       cy.getByTestId('min-proposal-requirements').should(
         'have.text',
+        // @ts-ignore this is any
         `You must have at least ${this.minVoterBalance} VEGA associated to vote on this proposal`
       );
     });

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

@@ -70,6 +70,7 @@ context(
       vegaWalletSetSpecifiedApprovalAmount('1000');
     });
 
+    // @ts-ignore clash between jest and cypress
     beforeEach('visit governance tab', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();
@@ -216,6 +217,7 @@ context(
     // 3003-PMAN-001
     it(
       'Able to submit valid new market proposal',
+      // @ts-ignore clash between jest and cypress
       { tags: '@smoke' },
       function () {
         const proposalTitle = 'Test new market proposal';
@@ -631,6 +633,7 @@ context(
       );
       cy.fixture('/proposals/successor-market').then((newMarketProposal) => {
         newMarketProposal.changes.successor.parentMarketId =
+          // @ts-ignore clash between jest and cypress
           this.parentMarketId;
         const newMarketPayload = JSON.stringify(newMarketProposal);
         cy.getByTestId(newProposalTerms).type(newMarketPayload, {
@@ -658,6 +661,7 @@ context(
           .should('have.text', 'Successor market to: TEST.24h')
           .find('a')
           .should('have.attr', 'href')
+          // @ts-ignore clash between jest and cypress
           .and('contain', this.parentMarketId);
       });
     });

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

@@ -1,4 +1,4 @@
-import type { testFreeformProposal } from '../../support/common-interfaces';
+import { type testFreeformProposal } from '../../support/common-interfaces';
 import {
   navigateTo,
   navigation,
@@ -33,12 +33,14 @@ const voteMajorityNotMet = 'token-majority-not-met';
 const voteMajorityMet = 'token-majority-met';
 const votesForPercentage = 'votes-for-percentage';
 
+// @ts-ignore clash between jest and cypress
 describe('Governance flow for proposal list', { tags: '@slow' }, function () {
   before('connect wallets and set approval limit', function () {
     vegaWalletSetSpecifiedApprovalAmount('1000');
     cy.visit('/');
   });
 
+  // @ts-ignore clash between jest and cypress
   beforeEach('visit proposals tab', function () {
     cy.clearLocalStorage();
     turnTelemetryOff();
@@ -106,6 +108,7 @@ describe('Governance flow for proposal list', { tags: '@slow' }, function () {
   it('Newly created proposals list - shows open proposals in an open state', function () {
     // 3001-VOTE-004
     // 3001-VOTE-035
+    // @ts-ignore clash between jest and cypress
     createRawProposal(this.minProposerBalance);
     cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
       getProposalFromTitle(rawProposal.rationale.title).within(() => {

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

@@ -64,6 +64,7 @@ context(
 
     describe('Eth wallet - contains VEGA tokens', function () {
       beforeEach(
+        // @ts-ignore clash between jest and cypress
         'teardown wallet & drill into a specific validator',
         function () {
           cy.clearLocalStorage();
@@ -237,6 +238,7 @@ context(
       // 1002-STKE-041 1002-STKE-053
       it(
         'Able to remove part of a stake against a validator',
+        // @ts-ignore clash between jest and cypress
         { tags: '@smoke' },
         function () {
           ensureSpecifiedUnstakedTokensAreAssociated('4');

apps/governance-e2e/src/integration/flow/token-association-flow.cy.ts

@@ -52,6 +52,7 @@ context(
 
     describe('Eth wallet - contains VEGA tokens', function () {
       beforeEach(
+        // @ts-ignore clash between jest and cypress
         'teardown wallet & drill into a specific validator',
         function () {
           cy.clearLocalStorage();
@@ -67,6 +68,7 @@ context(
 
       it(
         'Able to associate tokens - from wallet',
+        // @ts-ignore clash between jest and cypress
         { tags: '@smoke' },
         function () {
           //1004-ASSO-003

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

@@ -48,6 +48,7 @@ context(
       depositAsset(usdcEthAddress, '1000', 5);
     });
 
+    // @ts-ignore clash between jest and cypress
     beforeEach('Navigate to withdrawal page', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();
@@ -101,6 +102,7 @@ context(
     // eslint-disable-next-line
     it.skip(
       'Able to withdraw asset: -eth wallet connected -withdraw funds button',
+      // @ts-ignore clash between jest and cypress
       { tags: '@smoke' },
       function () {
         // fill in withdrawal form

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

@@ -25,6 +25,7 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
     );
   });
 
+  // @ts-ignore clash between jest and cypress
   beforeEach('visit home page', function () {
     cy.clearLocalStorage();
     turnTelemetryOff();

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

@@ -52,6 +52,7 @@ context(
               .invoke('text')
               .then(($newPageNumber) => {
                 const newPageNumber = Number($newPageNumber.slice(5));
+                // @ts-ignore clash between jest and cypress
                 expect(newPageNumber).to.be.greaterThan(currentPageNumber);
                 cy.getByTestId('goto-previous-page').click();
                 cy.getByTestId('page-info').should(

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

@@ -44,6 +44,7 @@ context('Validators Page - verify elements on page', function () {
     cy.mockChainId();
   });
 
+  // @ts-ignore clash between jest and cypress
   describe('with wallets disconnected', { tags: '@smoke' }, function () {
     it('Should have validators tab highlighted', function () {
       verifyTabHighlighted(navigation.validators);
@@ -76,6 +77,7 @@ context('Validators Page - verify elements on page', function () {
   describe(
     'Should be able to see validator list from the staking page',
     { tags: '@regression' },
+    // @ts-ignore clash between jest and cypress
     function () {
       // 1002-STKE-050
       it('Should be able to see validator names', function () {
@@ -180,6 +182,7 @@ context('Validators Page - verify elements on page', function () {
   describe(
     'Should be able to see static information about a validator',
     { tags: '@smoke' },
+    // @ts-ignore clash between jest and cypress
     function () {
       before('connect wallets and click on validator', function () {
         cy.mockChainId();

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

@@ -198,6 +198,7 @@ context(
                 });
             })
             .then(function () {
+              // @ts-ignore clash between jest and cypress
               expect(parseFloat(this.value).toFixed(1)).to.equal(
                 (Math.round((this.locked + this.unlocked) * 100) / 100).toFixed(
                   1
@@ -270,6 +271,7 @@ context(
                 });
             })
             .then(function () {
+              // @ts-ignore clash between jest and cypress
               expect(this.value).to.equal(this.locked + this.unlocked);
             });
         });

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

@@ -105,6 +105,7 @@ context(
       // 0002-WCON-008
       it(
         'should have truncated account number visible',
+        // @ts-ignore clash between jest and cypress
         { tags: '@smoke' },
         function () {
           cy.get(walletContainer).within(() => {
@@ -125,6 +126,7 @@ context(
 
       it(
         'should have Vega Associated currency value visible',
+        // @ts-ignore clash between jest and cypress
         { tags: '@smoke' },
         function () {
           cy.get(walletContainer).within(() => {
@@ -135,14 +137,19 @@ context(
         }
       );
 
-      it('should have Unstaked value visible', { tags: '@smoke' }, function () {
-        cy.get(walletContainer).within(() => {
-          cy.get(vegaUnstaked)
-            .should('be.visible')
-            .invoke('text')
-            .and('not.be.empty');
-        });
-      });
+      it(
+        'should have Unstaked value visible',
+        // @ts-ignore clash between jest and cypress
+        { tags: '@smoke' },
+        function () {
+          cy.get(walletContainer).within(() => {
+            cy.get(vegaUnstaked)
+              .should('be.visible')
+              .invoke('text')
+              .and('not.be.empty');
+          });
+        }
+      );
 
       it('should have Governance button visible', function () {
         cy.get(walletContainer).within(() => {
@@ -299,6 +306,7 @@ context(
                 .siblings(txTimeout)
                 .should((elementAmount) => {
                   const displayedAmount = parseFloat(elementAmount.text());
+                  // @ts-ignore clash between jest and cypress
                   expect(displayedAmount).be.gte(expectedAmount);
                 });
 

apps/governance/project.json

@@ -56,7 +56,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/governance/**/*.{ts,tsx,js,jsx}"]
@@ -66,14 +66,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/governance"],
       "options": {
-        "jestConfig": "apps/governance/jest.config.ts",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "jestConfig": "apps/governance/jest.config.ts"
       }
     },
     "build-netlify": {

apps/governance/src/app-loader.tsx

@@ -4,7 +4,7 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useEagerConnect } from '@vegaprotocol/wallet';
 import { FLAGS, useEnvironment } from '@vegaprotocol/environment';
 import { useWeb3React } from '@web3-react/core';
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SplashError } from './components/splash-error';
@@ -164,13 +164,14 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
     );
   }
 
-  if (!loaded) {
-    return (
-      <Splash>
-        <SplashLoader />
-      </Splash>
-    );
-  }
+  const loading = (
+    <Splash>
+      <SplashLoader />
+    </Splash>
+  );
 
-  return children;
+  if (!loaded) {
+    return loading;
+  }
+  return <Suspense fallback={loading}>{children}</Suspense>;
 };

apps/governance/src/app.tsx

@@ -42,6 +42,7 @@ import {
   useNodeSwitcherStore,
   DocsLinks,
   NodeFailure,
+  AppLoader as Loader,
 } from '@vegaprotocol/environment';
 import { ENV } from './config';
 import type { InMemoryCacheConfig } from '@apollo/client';
@@ -352,9 +353,11 @@ function App() {
   useInitializeEnv();
 
   return (
-    <NetworkLoader cache={cache}>
-      <AppContainer />
-    </NetworkLoader>
+    <React.Suspense fallback={<Loader />}>
+      <NetworkLoader cache={cache}>
+        <AppContainer />
+      </NetworkLoader>
+    </React.Suspense>
   );
 }
 

apps/governance/src/assets/locales

@@ -0,0 +1 @@
+../../../../libs/i18n/src/locales

apps/governance/src/components/vega-wallet/hooks.ts

@@ -8,8 +8,9 @@ import { ENV } from '../../config';
 
 import noIcon from '../../images/token-no-icon.png';
 import vegaBlack from '../../images/vega_black.png';
+import vegaVesting from '../../images/vega_vesting.png';
 import { BigNumber } from '../../lib/bignumber';
-import type { WalletCardAssetProps } from '../wallet-card';
+import { type WalletCardAssetProps } from '../wallet-card';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useContracts } from '../../contexts/contracts/contracts-context';
 import * as Schema from '@vegaprotocol/types';
@@ -20,12 +21,12 @@ import {
   toBigNum,
 } from '@vegaprotocol/utils';
 import { useAppState } from '../../contexts/app-state/app-state-context';
-import type {
-  DelegationsQuery,
-  DelegationsQueryVariables,
-  WalletDelegationFieldsFragment,
+import {
+  DelegationsDocument,
+  type DelegationsQuery,
+  type DelegationsQueryVariables,
+  type WalletDelegationFieldsFragment,
 } from './__generated__/Delegations';
-import { DelegationsDocument } from './__generated__/Delegations';
 import { isPartyNotFoundError } from '../../lib/party';
 
 export const usePollForDelegations = () => {
@@ -43,6 +44,7 @@ export const usePollForDelegations = () => {
   const [delegatedNodes, setDelegatedNodes] = React.useState<
     {
       nodeId: string;
+      // eslint-disable-next-line
       name: string;
       hasStakePending: boolean;
       currentEpochStake?: BigNumber;
@@ -102,7 +104,10 @@ export const usePollForDelegations = () => {
             setAccounts(
               accounts
                 .filter(
-                  (a) => a.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL
+                  (a) =>
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL ||
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS
                 )
                 .map((a) => {
                   const isVega =
@@ -115,14 +120,23 @@ export const usePollForDelegations = () => {
                     subheading: isVega ? t('collateral') : a.asset.symbol,
                     symbol: a.asset.symbol,
                     decimals: a.asset.decimals,
+                    assetId: a.asset.id,
                     balance: new BigNumber(
                       addDecimal(a.balance, a.asset.decimals)
                     ),
-                    image: isVega ? vegaBlack : noIcon,
+                    image: isVega
+                      ? vegaBlack
+                      : a.type ===
+                          Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
+                        a.type ===
+                          Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS
+                      ? vegaVesting
+                      : noIcon,
                     border: isVega,
                     address: isAssetTypeERC20(a.asset)
                       ? a.asset.source.contractAddress
                       : undefined,
+                    type: a.type,
                   };
                 })
                 .sort((a, b) => {

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

@@ -1,9 +1,18 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useAnimateValue } from '../../hooks/use-animate-value';
 import type { BigNumber } from '../../lib/bignumber';
 import { useNumberParts } from '@vegaprotocol/react-helpers';
+import * as Schema from '@vegaprotocol/types';
+import { useTranslation } from 'react-i18next';
+import { AnchorButton, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  CONSOLE_TRANSFER_ASSET,
+  DApp,
+  useLinks,
+} from '@vegaprotocol/environment';
+import { useNetworkParam } from '@vegaprotocol/network-parameters';
 
 interface WalletCardProps {
   children: React.ReactNode;
@@ -100,8 +109,10 @@ export interface WalletCardAssetProps {
   symbol: string;
   balance: BigNumber;
   decimals: number;
+  assetId?: string;
   border?: boolean;
   subheading?: string;
+  type?: Schema.AccountType;
 }
 
 export const WalletCardAsset = ({
@@ -110,16 +121,37 @@ export const WalletCardAsset = ({
   symbol,
   balance,
   decimals,
+  assetId,
   border,
   subheading,
+  type,
 }: WalletCardAssetProps) => {
   const [integers, decimalsPlaces, separator] = useNumberParts(
     balance,
     decimals
   );
+  const { t } = useTranslation();
+  const consoleLink = useLinks(DApp.Console);
+  const transferAssetLink = (assetId: string) =>
+    consoleLink(CONSOLE_TRANSFER_ASSET.replace(':assetId', assetId));
+  const { param: baseRate } = useNetworkParam('rewards_vesting_baseRate');
+
+  const isRedeemable =
+    type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS && assetId;
+
+  const accountTypeTooltip = useMemo(() => {
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS) {
+      return t('VestedRewardsTooltip');
+    }
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS && baseRate) {
+      return t('VestingRewardsTooltip', { baseRate });
+    }
+
+    return null;
+  }, [baseRate, t, type]);
 
   return (
-    <div className="flex flex-nowrap mt-2 mb-4">
+    <div className="flex flex-nowrap gap-2 mt-2 mb-4">
       <img
         alt="Vega"
         src={image}
@@ -129,15 +161,37 @@ export const WalletCardAsset = ({
       />
       <div>
         <div
-          className="flex align-center text-base"
+          className="flex align-center items-baseline text-base gap-2"
           data-testid="currency-title"
         >
-          <div className="mb-0 px-2 uppercase">{name}</div>
+          <div className="mb-0 uppercase">{name}</div>
           <div className="mb-0 uppercase text-neutral-400">
             {subheading || symbol}
           </div>
         </div>
-        <div className="px-2 basis-full font-mono" data-testid="currency-value">
+        {type ? (
+          <div className="mb-[2px] flex gap-2 items-baseline">
+            <Tooltip description={accountTypeTooltip}>
+              <span className="px-2 py-1 leading-none text-xs bg-vega-cdark-700 rounded">
+                {Schema.AccountTypeMapping[type]}
+              </span>
+            </Tooltip>
+            {isRedeemable ? (
+              <Tooltip description={t('RedeemRewardsTooltip')}>
+                <AnchorButton
+                  variant="primary"
+                  size="xs"
+                  href={transferAssetLink(assetId)}
+                  target="_blank"
+                  className="px-2 py-1 leading-none text-xs bg-vega-yellow text-black rounded"
+                >
+                  {t('Redeem')}
+                </AnchorButton>
+              </Tooltip>
+            ) : null}
+          </div>
+        ) : null}
+        <div className="basis-full font-mono" data-testid="currency-value">
           <span>
             {integers}
             {separator}

apps/governance/src/contexts/contracts/contracts-provider.tsx

@@ -9,7 +9,7 @@ import { useWeb3React } from '@web3-react/core';
 import React from 'react';
 
 import { SplashLoader } from '../../components/splash-loader';
-import type { ContractsContextShape } from './contracts-context';
+import { type ContractsContextShape } from './contracts-context';
 import { ContractsContext } from './contracts-context';
 import { createDefaultProvider } from '../../lib/web3-connectors';
 import { useEthereumConfig } from '@vegaprotocol/web3';

apps/governance/src/i18n/index.ts

@@ -1,29 +1,41 @@
+import type { Module } from 'i18next';
 import i18n from 'i18next';
+import HttpBackend from 'i18next-http-backend';
+import LocizeBackend from 'i18next-locize-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
-import dev from './translations/dev.json';
+const isInDev = process.env.NODE_ENV === 'development';
+const useLocize = isInDev && !!process.env.NX_USE_LOCIZE;
+
+const backend = useLocize
+  ? {
+      projectId: '96ac1231-4bdd-455a-b9d7-f5322a2e7430',
+      apiKey: process.env.NX_LOCIZE_API_KEY,
+      referenceLng: 'en',
+    }
+  : {
+      loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
+    };
+
+const Backend: Module = useLocize ? LocizeBackend : HttpBackend;
 
 i18n
+  .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    // we init with resources
-    resources: {
-      en: {
-        translations: {
-          ...dev,
-        },
-      },
-    },
-    lng: undefined,
+    lng: 'en',
     fallbackLng: 'en',
-    debug: true,
+    supportedLngs: ['en'],
+    load: 'languageOnly',
+    debug: isInDev,
     // have a common namespace used around the full app
-    ns: ['translations'],
-    defaultNS: 'translations',
+    ns: ['governance'],
+    defaultNS: 'governance',
     keySeparator: false, // we use content as keys
-
+    backend,
+    saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY,
     interpolation: {
       escapeValue: false,
     },

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

@@ -1,4 +1,4 @@
-import type { CollateralBridge } from '@vegaprotocol/smart-contracts';
+import { type CollateralBridge } from '@vegaprotocol/smart-contracts';
 import * as Schema from '@vegaprotocol/types';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { useBridgeContract, useEthereumTransaction } from '@vegaprotocol/web3';
@@ -88,7 +88,7 @@ export const ListAsset = ({
     assetData.erc20ListAssetBundle;
   return (
     <div className="mb-8">
-      <h3 className="text-xl mb-2">{t('ListAsset')}</h3>
+      <h3 className="mb-2 text-xl">{t('ListAsset')}</h3>
       <p className="pr-8">{t('ListAssetDescription')}</p>
       <EthWalletContainer>
         <Button

apps/governance/src/routes/proposals/components/vote-details/use-user-vote.tsx

@@ -4,7 +4,7 @@ import { VoteValue } from '@vegaprotocol/types';
 import { useEffect, useState } from 'react';
 import { useUserVoteQuery } from './__generated__/Vote';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
-import type { FinalizedVote } from '@vegaprotocol/proposals';
+import { type FinalizedVote } from '@vegaprotocol/proposals';
 
 export enum VoteState {
   NotCast = 'NotCast',

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

@@ -5,15 +5,17 @@ import { useTranslation } from 'react-i18next';
 
 import { SplashLoader } from '../../../components/splash-loader';
 import { ProposalsList } from '../components/proposals-list';
-import { useProposalsQuery } from './__generated__/Proposals';
 import { getNodes, removePaginationWrapper } from '@vegaprotocol/utils';
 import {
   ProposalState,
   ProtocolUpgradeProposalStatus,
 } from '@vegaprotocol/types';
-import type { NodeConnection, NodeEdge } from '@vegaprotocol/utils';
-import type { ProposalFieldsFragment } from './__generated__/Proposals';
-import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { type NodeConnection, type NodeEdge } from '@vegaprotocol/utils';
+import {
+  useProposalsQuery,
+  type ProposalFieldsFragment,
+} from './__generated__/Proposals';
+import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
 import { FLAGS } from '@vegaprotocol/environment';
 

apps/governance/src/routes/proposals/test-helpers/generate-proposals.ts

@@ -5,9 +5,9 @@ import * as faker from 'faker';
 import isArray from 'lodash/isArray';
 import mergeWith from 'lodash/mergeWith';
 
-import type { PartialDeep } from 'type-fest';
-import type { ProposalQuery } from '../proposal/__generated__/Proposal';
-import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { type PartialDeep } from 'type-fest';
+import { type ProposalQuery } from '../proposal/__generated__/Proposal';
+import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 export function generateProtocolUpgradeProposal(
   override: PartialDeep<ProtocolUpgradeProposalFieldsFragment> = {}

apps/governance/src/routes/redemption/home/redemption-information.tsx

@@ -22,11 +22,13 @@ interface UserBalances {
   balance: BigNumber;
 }
 
+type Params = { address: string };
+
 export const RedemptionInformation = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const tranches = useTranches((state) => state.tranches);
-  const { address } = useParams<{ address: string }>();
+  const { address } = useParams<Params>();
   const [userBalances, setUserBalances] = useState<null | UserBalances>();
   const getUsersBalances = useGetUserBalances(address);
   useEffect(() => {
@@ -84,7 +86,7 @@ export const RedemptionInformation = () => {
               i18nKey="noVestingTokens"
               components={{
                 tranchesLink: (
-                  <Link className="underline text-white" to={Routes.SUPPLY} />
+                  <Link className="text-white underline" to={Routes.SUPPLY} />
                 ),
               }}
             />
@@ -160,7 +162,7 @@ export const RedemptionInformation = () => {
         intent={Intent.Warning}
       >
         <p>{t('Find out more about Staking.')}</p>
-        <Link to={Routes.VALIDATORS} className="underline text-white">
+        <Link to={Routes.VALIDATORS} className="text-white underline">
           {t('Stake VEGA tokens')}
         </Link>
       </Callout>

apps/governance/src/routes/redemption/redemption.tsx

@@ -21,9 +21,10 @@ import RoutesConfig from '../routes';
 interface FormFields {
   address: string;
 }
+type Params = { address: string };
 
 const RedemptionRouter = () => {
-  const { address } = useParams<{ address: string }>();
+  const { address } = useParams<Params>();
   const navigate = useNavigate();
   const { t } = useTranslation();
   const validatePubkey = useCallback(
@@ -89,7 +90,7 @@ const RedemptionRouter = () => {
             {t('View connected Eth Wallet')}
           </Button>
         )}
-        <p className="py-4 flex justify-center">{t('OR')}</p>
+        <p className="flex justify-center py-4">{t('OR')}</p>
         <form
           onSubmit={handleSubmit(onSubmit)}
           data-testid="view-connector-form"

apps/governance/src/routes/redemption/tranche/index.tsx

@@ -21,6 +21,8 @@ import { EthConnectPrompt } from '../../../components/eth-connect-prompt';
 import { useUserTrancheBalances } from '../hooks';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 
+type Params = { id: string };
+
 export const RedeemFromTranche = () => {
   const { account: address } = useWeb3React();
   const { vesting } = useContracts();
@@ -34,7 +36,7 @@ export const RedeemFromTranche = () => {
     tranches: state.tranches,
     getTranches: state.getTranches,
   }));
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<Params>();
   const numberId = Number(id);
   const tranche = React.useMemo(
     () => tranches?.find(({ tranche_id }) => tranche_id === numberId) || null,
@@ -86,7 +88,7 @@ export const RedeemFromTranche = () => {
             i18nKey="noVestingTokens"
             components={{
               tranchesLink: (
-                <Link className="underline text-white" to={Routes.SUPPLY} />
+                <Link className="text-white underline" to={Routes.SUPPLY} />
               ),
             }}
           />
@@ -128,13 +130,13 @@ export const RedeemFromTranche = () => {
                   components={{
                     stakingLink: (
                       <Link
-                        className="underline text-white"
+                        className="text-white underline"
                         to={Routes.VALIDATORS}
                       />
                     ),
                     governanceLink: (
                       <Link
-                        className="underline text-white"
+                        className="text-white underline"
                         to={Routes.PROPOSALS}
                       />
                     ),

apps/governance/src/routes/staking/associate/hooks.ts

@@ -11,12 +11,12 @@ import { useTransaction } from '../../../hooks/use-transaction';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { removeDecimal, removePaginationWrapper } from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';
-import type {
-  LinkingsFieldsFragment,
-  PartyStakeLinkingsQuery,
-  PartyStakeLinkingsQueryVariables,
+import {
+  PartyStakeLinkingsDocument,
+  type LinkingsFieldsFragment,
+  type PartyStakeLinkingsQuery,
+  type PartyStakeLinkingsQueryVariables,
 } from './__generated__/PartyStakeLinkings';
-import { PartyStakeLinkingsDocument } from './__generated__/PartyStakeLinkings';
 
 export const useAddStake = (
   address: string,

apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -26,9 +26,9 @@ import {
   ValidatorRenderer,
   VotingPowerRenderer,
 } from './shared';
-import type { AgGridReact } from 'ag-grid-react';
-import type { ColDef, RowHeightParams } from 'ag-grid-community';
-import type { ValidatorsTableProps } from './shared';
+import { type AgGridReact } from 'ag-grid-react';
+import { type ColDef, type RowHeightParams } from 'ag-grid-community';
+import { type ValidatorsTableProps } from './shared';
 import {
   formatNumber,
   formatNumberPercentage,
@@ -83,19 +83,19 @@ const TopThirdCellRenderer = (
         e.preventDefault();
         setHideTopThird(false);
       }}
-      className="grid grid-cols-[60px_1fr] w-full h-full py-4 px-0 text-sm text-white text-center overflow-scroll"
+      className="grid h-full w-full grid-cols-[60px_1fr] overflow-scroll px-0 py-4 text-center text-sm text-white"
     >
-      <div className="px-3 text-xs text-left">
+      <div className="px-3 text-left text-xs">
         {params?.data?.rankingDisplay}
       </div>
-      <div className="px-3 whitespace-normal">
+      <div className="whitespace-normal px-3">
         <div className="mb-4">
           <Button
             data-testid="show-all-validators"
             rightIcon={
               <Icon
                 name="arrow-right"
-                className="mr-2 align-text-top fill-current"
+                className="mr-2 fill-current align-text-top"
               />
             }
             className="inline-flex items-center"

apps/governance/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx

@@ -22,9 +22,9 @@ import {
   PendingStakeRenderer,
   VotingPowerRenderer,
 } from './shared';
-import type { AgGridReact } from 'ag-grid-react';
-import type { ColDef } from 'ag-grid-community';
-import type { ValidatorsTableProps } from './shared';
+import { type AgGridReact } from 'ag-grid-react';
+import { type ColDef } from 'ag-grid-community';
+import { type ValidatorsTableProps } from './shared';
 import {
   formatNumber,
   formatNumberPercentage,

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

@@ -28,12 +28,14 @@ interface StakingNodeProps {
   previousEpochData?: PreviousEpochQuery;
 }
 
+type Params = { node: string };
+
 export const StakingNode = ({ data, previousEpochData }: StakingNodeProps) => {
   const { pubKey: vegaKey } = useVegaWallet();
   const {
     appState: { decimals },
   } = useAppState();
-  const { node } = useParams<{ node: string }>();
+  const { node } = useParams<Params>();
   const { t } = useTranslation();
 
   const { nodeInfo, currentEpoch, delegations } = React.useMemo(

apps/governance/src/routes/tranches/tranche.tsx

@@ -16,10 +16,12 @@ import Routes from '../routes';
 import { TrancheLabel } from './tranche-label';
 import { useTranches } from '../../lib/tranches/tranches-store';
 
+type Params = { trancheId: string; address: string };
+
 export const Tranche = () => {
   const tranches = useTranches((state) => state.tranches);
   const { t } = useTranslation();
-  const { trancheId } = useParams<{ trancheId: string; address: string }>();
+  const { trancheId } = useParams<Params>();
   const { chainId } = useWeb3React();
   const tranche = tranches?.find(
     (tranche) => trancheId && parseInt(trancheId) === tranche.tranche_id
@@ -41,7 +43,7 @@ export const Tranche = () => {
         }
       />
       <div
-        className="flex justify-between gap-x-4 py-2 px-4"
+        className="flex justify-between gap-x-4 px-4 py-2"
         data-testid="redeemed-tranche-tokens"
       >
         <span>{t('alreadyRedeemed')}</span>

apps/governance/src/setup-tests.ts

@@ -3,7 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
-import dev from './i18n/translations/dev.json';
+import { locales } from '@vegaprotocol/i18n';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -12,16 +12,10 @@ import ResizeObserver from 'resize-observer-polyfill';
 // en translations
 i18n.use(initReactI18next).init({
   // we init with resources
-  resources: {
-    en: {
-      translations: {
-        ...dev,
-      },
-    },
-  },
+  resources: locales,
   fallbackLng: 'en',
-  ns: ['translations'],
-  defaultNS: 'translations',
+  ns: ['governance'],
+  defaultNS: 'governance',
 });
 
 global.ResizeObserver = ResizeObserver;

apps/governance/tsconfig.app.json

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "files": [
     "../../node_modules/@nx/react/typings/cssmodule.d.ts",

apps/governance/tsconfig.spec.json

@@ -3,7 +3,13 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": [
+      "jest",
+      "node",
+      "@testing-library/jest-dom",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "include": [
     "**/*.test.ts",

apps/liquidity-provision-dashboard/.env

@@ -3,20 +3,20 @@
 
 # Netlify Environment Variables
 # https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
+NX_VERSION=\$npm_package_version
+NX_REPOSITORY_URL=\$REPOSITORY_URL
+NX_BRANCH=\$BRANCH
+NX_PULL_REQUEST=\$PULL_REQUEST
+NX_HEAD=\$HEAD
+NX_COMMIT_REF=\$COMMIT_REF
+NX_CONTEXT=\$CONTEXT
+NX_REVIEW_ID=\$REVIEW_ID
+NX_INCOMING_HOOK_TITLE=\$INCOMING_HOOK_TITLE
+NX_INCOMING_HOOK_URL=\$INCOMING_HOOK_URL
+NX_INCOMING_HOOK_BODY=\$INCOMING_HOOK_BODY
+NX_URL=\$URL
+NX_DEPLOY_URL=\$DEPLOY_URL
+NX_DEPLOY_PRIME_URL=\$DEPLOY_PRIME_URL
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
 NX_VEGA_ENV = 'TESTNET'
 NX_VEGA_URL="https://api.n07.testnet.vega.xyz/graphql"

apps/liquidity-provision-dashboard/project.json

@@ -65,7 +65,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": [
@@ -79,14 +79,7 @@
         "{workspaceRoot}/coverage/apps/liquidity-provision-dashboard"
       ],
       "options": {
-        "jestConfig": "apps/liquidity-provision-dashboard/jest.config.ts",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "jestConfig": "apps/liquidity-provision-dashboard/jest.config.ts"
       }
     },
     "build-netlify": {

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

@@ -1,5 +1,5 @@
 import { DApp, useLinks } from '@vegaprotocol/environment';
-import type { Market } from '@vegaprotocol/liquidity';
+import { type Market } from '@vegaprotocol/liquidity';
 import {
   displayChange,
   formatWithAsset,
@@ -12,7 +12,7 @@ import {
   toBigNum,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import type { VegaValueFormatterParams } from '@vegaprotocol/datagrid';
+import { type VegaValueFormatterParams } from '@vegaprotocol/datagrid';
 import { PriceChangeCell } from '@vegaprotocol/datagrid';
 import type * as Schema from '@vegaprotocol/types';
 import {
@@ -21,10 +21,10 @@ import {
   HealthBar,
   TooltipCellComponent,
 } from '@vegaprotocol/ui-toolkit';
-import type {
-  GetRowIdParams,
-  RowClickedEvent,
-  ColDef,
+import {
+  type GetRowIdParams,
+  type RowClickedEvent,
+  type ColDef,
 } from 'ag-grid-community';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
@@ -253,7 +253,7 @@ export const MarketList = () => {
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
       <div
-        className="grow w-full"
+        className="w-full grow"
         style={{ minHeight: 500, overflow: 'hidden' }}
       >
         <Grid

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

@@ -60,19 +60,21 @@ const useMarketDetails = (marketId: string | undefined) => {
   };
 };
 
+type Params = { marketId: string };
+
 export const Detail = () => {
-  const { marketId } = useParams<{ marketId: string }>();
+  const { marketId } = useParams<Params>();
   const { data, loading, error } = useMarketDetails(marketId);
 
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
-      <div className="px-16 pt-14 pb-12 bg-greys-light-100">
-        <div className="max-w-screen-xl mx-auto">
+      <div className="bg-greys-light-100 px-16 pb-12 pt-14">
+        <div className="mx-auto max-w-screen-xl">
           <Header name={data.name} symbol={data.symbol} />
         </div>
       </div>
       <div className="px-16">
-        <div className="max-w-screen-xl mx-auto">
+        <div className="mx-auto max-w-screen-xl">
           <div className="py-12">
             {marketId && (
               <Market
@@ -86,7 +88,7 @@ export const Detail = () => {
             )}
           </div>
           <div>
-            <h2 className="font-alpha calt text-2xl mb-4">
+            <h2 className="font-alpha calt mb-4 text-2xl">
               {t('Current Liquidity Provision')}
             </h2>
             <LPProvidersGrid

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

@@ -1,11 +1,11 @@
 import { useCallback, useMemo } from 'react';
 
-import type { GetRowIdParams, ColDef } from 'ag-grid-community';
+import { type GetRowIdParams, type ColDef } from 'ag-grid-community';
 import { t } from '@vegaprotocol/i18n';
 
-import type {
-  LiquidityProviderFeeShareFieldsFragment,
-  LiquidityProvisionFieldsFragment,
+import {
+  type LiquidityProviderFeeShareFieldsFragment,
+  type LiquidityProvisionFieldsFragment,
 } from '@vegaprotocol/liquidity';
 import { formatWithAsset } from '@vegaprotocol/liquidity';
 

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

@@ -1,9 +1,9 @@
 import { useRef, useCallback, useEffect } from 'react';
 import { AgGridReact } from 'ag-grid-react';
-import type {
-  AgGridReactProps,
-  AgReactUiProps,
-  AgGridReact as AgGridReactType,
+import {
+  type AgGridReactProps,
+  type AgReactUiProps,
+  type AgGridReact as AgGridReactType,
 } from 'ag-grid-react';
 import classNames from 'classnames';
 import 'ag-grid-community/styles/ag-grid.css';
@@ -34,7 +34,7 @@ export const Grid = ({ isRowClickable, ...props }: Props) => {
 
   return (
     <AgGridReact
-      className={classNames('ag-theme-alpine h-full font-alpha calt', {
+      className={classNames('ag-theme-alpine font-alpha calt h-full', {
         'row-hover': isRowClickable,
       })}
       rowHeight={92}

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

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "files": [
     "../../node_modules/@nx/react/typings/cssmodule.d.ts",

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

@@ -3,7 +3,13 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "types": [
+      "jest",
+      "node",
+      "@testing-library/jest-dom",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
     "jsx": "react",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true

apps/multisig-signer/project.json

@@ -53,7 +53,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/multisig-signer/**/*.{ts,tsx,js,jsx}"]
@@ -63,14 +63,7 @@
       "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
-        }
+        "jestConfig": "apps/multisig-signer/jest.config.ts"
       }
     },
     "build-netlify": {

apps/multisig-signer/src/app/components/add-signer-form/add-signer-form.tsx

@@ -11,12 +11,12 @@ import {
   Loader,
 } from '@vegaprotocol/ui-toolkit';
 import { useContracts } from '../../config/contracts/contracts-context';
-import type { FormEvent } from 'react';
-import type {
-  AddSignerBundle,
-  AddSignerBundleVariables,
+import { type FormEvent } from 'react';
+import {
+  type AddSignerBundle,
+  type AddSignerBundleVariables,
 } from '../__generated__/AddSignerBundle';
-import type { MultisigControl } from '@vegaprotocol/smart-contracts';
+import { type MultisigControl } from '@vegaprotocol/smart-contracts';
 
 export const ADD_SIGNER_QUERY = gql`
   query AddSignerBundle($nodeId: ID!) {

apps/multisig-signer/src/app/components/remove-signer-form/remove-signer-form.tsx

@@ -11,12 +11,12 @@ import {
   Loader,
 } from '@vegaprotocol/ui-toolkit';
 import { useContracts } from '../../config/contracts/contracts-context';
-import type { FormEvent } from 'react';
-import type {
-  RemoveSignerBundle,
-  RemoveSignerBundleVariables,
+import { type FormEvent } from 'react';
+import {
+  type RemoveSignerBundle,
+  type RemoveSignerBundleVariables,
 } from '../__generated__/RemoveSignerBundle';
-import type { MultisigControl } from '@vegaprotocol/smart-contracts';
+import { type MultisigControl } from '@vegaprotocol/smart-contracts';
 
 const REMOVE_SIGNER_QUERY = gql`
   query RemoveSignerBundle($nodeId: ID!) {

apps/multisig-signer/src/app/config/contracts/contracts-provider.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { MultisigControl } from '@vegaprotocol/smart-contracts';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-import type { ContractsContextShape } from './contracts-context';
+import { type ContractsContextShape } from './contracts-context';
 import { ContractsContext } from './contracts-context';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import { useEnvironment } from '@vegaprotocol/environment';

apps/multisig-signer/tsconfig.app.json

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "files": [
     "../../node_modules/@nx/react/typings/cssmodule.d.ts",

apps/multisig-signer/tsconfig.spec.json

@@ -3,7 +3,13 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": [
+      "jest",
+      "node",
+      "@testing-library/jest-dom",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "include": [
     "**/*.test.ts",

apps/trading-e2e/.eslintrc.json

@@ -4,7 +4,9 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "cypress/unsafe-to-chain-command": 0
+      }
     },
     {
       "files": ["src/plugins/index.js"],

apps/trading-e2e/project.json

@@ -20,7 +20,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/trading-e2e/**/*.{js,ts}"]

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

@@ -26,7 +26,7 @@ describe('ethereum wallet', { tags: '@smoke', testIsolation: true }, () => {
     cy.getByTestId('tab-deposits').should('not.be.empty');
   });
 
-  it('should see QR code modal for WalletConnect', () => {
+  it.skip('should see QR code modal for WalletConnect', () => {
     // 0004-EWAL-003
 
     cy.getByTestId('Deposits').click();
@@ -35,7 +35,7 @@ describe('ethereum wallet', { tags: '@smoke', testIsolation: true }, () => {
     cy.getByTestId('web3-connector-list').should('exist');
     cy.getByTestId('web3-connector-WalletConnect').click();
     // testing if exists rather than visible because of the long loading time
-    cy.get('w3m-modal').should('exist');
+    cy.get('#w3m-modal').should('exist');
   });
 
   it('able to disconnect eth wallet', () => {

apps/trading/.eslintrc.json

@@ -5,7 +5,7 @@
     "next",
     "next/core-web-vitals"
   ],
-  "ignorePatterns": ["!**/*", "__generated__", ".next"],
+  "ignorePatterns": ["!**/*", "__generated__", ".next", "setup-tests.ts"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/trading/__mocks__/react-i18next.ts

@@ -0,0 +1,14 @@
+export const useTranslation = () => ({
+  t: (label: string, replacements?: Record<string, string>) => {
+    let translatedLabel = label;
+    if (typeof replacements === 'object' && replacements !== null) {
+      Object.keys(replacements).forEach((key) => {
+        translatedLabel = translatedLabel.replace(
+          `{{${key}}}`,
+          replacements[key]
+        );
+      });
+    }
+    return translatedLabel;
+  },
+});

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -17,7 +17,7 @@ import { useReferral } from './hooks/use-referral';
 import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
 import { t } from '@vegaprotocol/i18n';
-import { Statistics } from './referral-statistics';
+import { Statistics, useStats } from './referral-statistics';
 import { useReferralProgram } from './hooks/use-referral-program';
 
 const RELOAD_DELAY = 3000;
@@ -132,6 +132,8 @@ export const ApplyCodeForm = () => {
       }),
   });
 
+  const { epochsValue, nextBenefitTierValue } = useStats({ program });
+
   // go to main page when successfully applied
   useEffect(() => {
     if (status === 'successful') {
@@ -196,6 +198,10 @@ export const ApplyCodeForm = () => {
     };
   };
 
+  const nextBenefitTierEpochsValue = nextBenefitTierValue
+    ? nextBenefitTierValue.epochs - epochsValue
+    : 0;
+
   return (
     <>
       <div className="w-2/3 max-w-md mx-auto bg-vega-clight-800 dark:bg-vega-cdark-800 p-8 rounded-lg">
@@ -238,7 +244,12 @@ export const ApplyCodeForm = () => {
       ) : null}
       {previewData ? (
         <div className="mt-10">
-          <h2 className="text-2xl mb-5">{t('You are joining')}</h2>
+          <h2 className="text-2xl mb-5">
+            {t(
+              'You are joining the group shown, but will not have access to benefits until you have completed at least %s epochs.',
+              [nextBenefitTierEpochsValue.toString()]
+            )}
+          </h2>
           <Statistics data={previewData} program={program} as="referee" />
         </div>
       ) : null}

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -25,7 +25,7 @@ import compact from 'lodash/compact';
 import { useReferralProgram } from './hooks/use-referral-program';
 import { useStakeAvailable } from './hooks/use-stake-available';
 import sortBy from 'lodash/sortBy';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
 import { t } from '@vegaprotocol/i18n';
@@ -59,21 +59,20 @@ export const ReferralStatistics = () => {
   return <CreateCodeContainer />;
 };
 
-export const Statistics = ({
+export const useStats = ({
   data,
   program,
   as,
 }: {
-  data: NonNullable<ReturnType<typeof useReferral>['data']>;
+  data?: NonNullable<ReturnType<typeof useReferral>['data']>;
   program: ReturnType<typeof useReferralProgram>;
-  as: 'referrer' | 'referee';
+  as?: 'referrer' | 'referee';
 }) => {
-  const { benefitTiers, details } = program;
+  const { benefitTiers } = program;
   const { data: epochData } = useCurrentEpochInfoQuery();
-  const { stakeAvailable } = useStakeAvailable();
   const { data: statsData } = useReferralSetStatsQuery({
     variables: {
-      code: data.code,
+      code: data?.code || '',
     },
     skip: !data?.code,
     fetchPolicy: 'cache-and-network',
@@ -81,19 +80,12 @@ export const Statistics = ({
 
   const currentEpoch = Number(epochData?.epoch.id);
 
-  const compactNumFormat = new Intl.NumberFormat(getUserLocale(), {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-    notation: 'compact',
-    compactDisplay: 'short',
-  });
-
   const stats =
     statsData?.referralSetStats.edges &&
     compact(removePaginationWrapper(statsData.referralSetStats.edges));
-  const refereeInfo = data.referee;
+  const refereeInfo = data?.referee;
   const refereeStats = stats?.find(
-    (r) => r.partyId === data.referee?.refereeId
+    (r) => r.partyId === data?.referee?.refereeId
   );
 
   const statsAvailable = stats && stats.length > 0 && stats[0];
@@ -136,6 +128,60 @@ export const Statistics = ({
     ? nextBenefitTierValue.epochs - epochsValue
     : 0;
 
+  return {
+    baseCommissionValue,
+    runningVolumeValue,
+    referrerVolumeValue,
+    multiplier,
+    finalCommissionValue,
+    discountFactorValue,
+    currentBenefitTierValue,
+    nextBenefitTierValue,
+    epochsValue,
+    nextBenefitTierVolumeValue,
+    nextBenefitTierEpochsValue,
+  };
+};
+
+export const Statistics = ({
+  data,
+  program,
+  as,
+}: {
+  data: NonNullable<ReturnType<typeof useReferral>['data']>;
+  program: ReturnType<typeof useReferralProgram>;
+  as: 'referrer' | 'referee';
+}) => {
+  const {
+    baseCommissionValue,
+    runningVolumeValue,
+    referrerVolumeValue,
+    multiplier,
+    finalCommissionValue,
+    discountFactorValue,
+    currentBenefitTierValue,
+    epochsValue,
+    nextBenefitTierVolumeValue,
+    nextBenefitTierEpochsValue,
+  } = useStats({ data, program, as });
+
+  const isApplyCodePreview = useMemo(
+    () => data.referee === null,
+    [data.referee]
+  );
+
+  const { benefitTiers } = useReferralProgram();
+
+  const { stakeAvailable } = useStakeAvailable();
+  const { details } = program;
+
+  const compactNumFormat = new Intl.NumberFormat(getUserLocale(), {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    notation: 'compact',
+    compactDisplay: 'short',
+  });
+
   const baseCommissionTile = (
     <StatTile
       title={t('Base commission rate')}
@@ -229,11 +275,18 @@ export const Statistics = ({
 
   const currentBenefitTierTile = (
     <StatTile title={t('Current tier')}>
-      {currentBenefitTierValue?.tier || 'None'}
+      {isApplyCodePreview
+        ? currentBenefitTierValue?.tier || benefitTiers[0]?.tier || 'None'
+        : currentBenefitTierValue?.tier || 'None'}
     </StatTile>
   );
   const discountFactorTile = (
-    <StatTile title={t('Discount')}>{discountFactorValue * 100}%</StatTile>
+    <StatTile title={t('Discount')}>
+      {isApplyCodePreview
+        ? benefitTiers[0].discountFactor * 100
+        : discountFactorValue * 100}
+      %
+    </StatTile>
   );
   const runningVolumeTile = (
     <StatTile
@@ -265,11 +318,11 @@ export const Statistics = ({
     <>
       <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
         {currentBenefitTierTile}
-        {discountFactorTile}
+        {runningVolumeTile}
         {codeTile}
       </div>
       <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
-        {runningVolumeTile}
+        {discountFactorTile}
         {nextTierVolumeTile}
         {epochsTile}
         {nextTierEpochsTile}

apps/trading/client-pages/transfer/transfer.spec.tsx

@@ -8,7 +8,7 @@ jest.mock('@vegaprotocol/accounts', () => ({
   ),
 }));
 
-jest.mock('../../components/welcome-dialog/get-started.ts', () => ({
+jest.mock('../../components/welcome-dialog/get-started', () => ({
   GetStarted: () => <div>GetStarted</div>,
 }));
 

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

@@ -1,6 +1,6 @@
 import { useSearchParams } from 'react-router-dom';
 import { TransferContainer } from '@vegaprotocol/accounts';
-import { GetStarted } from '../../components/welcome-dialog';
+import { GetStarted } from '../../components/welcome-dialog/get-started';
 
 export const Transfer = () => {
   const [searchParams] = useSearchParams();

apps/trading/client-pages/withdraw/withdraw.spec.tsx

@@ -8,7 +8,7 @@ jest.mock('../../components/withdraw-container', () => ({
   ),
 }));
 
-jest.mock('../../components/welcome-dialog/get-started.ts', () => ({
+jest.mock('../../components/welcome-dialog/get-started', () => ({
   GetStarted: () => <div>GetStarted</div>,
 }));