fix(4661): updated unit tests

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

@@ -21,6 +21,7 @@ jobs:
         uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
       - name: Cache node modules
         id: cache
         uses: actions/cache@v3
@@ -38,6 +39,7 @@ jobs:
           node-version-file: '.nvmrc'
           # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
           cache: yarn
+
       - name: yarn install
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn install --pure-lockfile
@@ -49,11 +51,11 @@ jobs:
     uses: ./.github/workflows/lint-pr.yml
     secrets: inherit
 
-  lint-format:
-    timeout-minutes: 20
+  lint-test-build:
+    timeout-minutes: 60
     needs: node-modules
     runs-on: ubuntu-22.04
-    name: '(CI) lint + format check'
+    name: '(CI) lint + unit test + build'
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -79,76 +81,6 @@ jobs:
         with:
           main-branch-name: develop
 
-      - name: Check formatting
-        run: yarn nx format:check
-
-      - name: Lint affected
-        run: yarn nx affected:lint --max-warnings=0
-
-      - name: Build affected spec
-        run: yarn nx affected --target=build-spec
-
-  test-affected:
-    timeout-minutes: 30
-    needs: build-sources
-    runs-on: ubuntu-22.04
-    name: 'run unit test of affected apps'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v3
-        with:
-          main-branch-name: develop
-
-      - name: Test affected
-        run: yarn nx affected:test
-
-  build-sources:
-    timeout-minutes: 30
-    needs: lint-format
-    runs-on: ubuntu-22.04
-    name: 'Build sources of affected apps'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v3
-        with:
-          main-branch-name: develop
-
       # See affected apps
       - name: See affected apps
         run: |
@@ -165,8 +97,21 @@ jobs:
           echo "preview_explorer: ${{ env.PREVIEW_EXPLORER }}"
           echo "preview_tools: ${{ env.PREVIEW_TOOLS }}"
 
+      - name: Check formatting
+        run: yarn nx format:check
+
+      - name: Lint affected
+        run: yarn nx affected:lint --max-warnings=0
+
+      - name: Build affected spec
+        run: yarn nx affected --target=build-spec
+
+      - name: Test affected
+        run: yarn nx affected:test
+
       - name: Build affected
         run: yarn nx affected:build || (yarn install && yarn nx affected:build)
+
     outputs:
       projects: ${{ env.PROJECTS }}
       projects-e2e: ${{ env.PROJECTS_E2E }}
@@ -176,38 +121,38 @@ jobs:
       preview_tools: ${{ env.PREVIEW_TOOLS }}
 
   console-e2e:
-    needs: build-sources
+    needs: lint-test-build
     name: '(CI) console python'
     uses: ./.github/workflows/console-test-run.yml
     secrets: inherit
-    if: ${{ contains(fromJSON(needs.build-sources.outputs.projects), 'trading') && github.event_name == 'pull_request' }}
+    if: ${{ contains(fromJSON(needs.lint-test-build.outputs.projects), 'trading') && github.event_name == 'pull_request' }}
     with:
       github-sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
   cypress:
-    needs: build-sources
+    needs: lint-test-build
     name: '(CI) cypress'
-    # if: ${{ needs.build-sources.outputs.projects-e2e != '[]' }}
+    # if: ${{ needs.lint-test-build.outputs.projects-e2e != '[]' }}
     uses: ./.github/workflows/cypress-run.yml
     secrets: inherit
     with:
-      projects: ${{ needs.build-sources.outputs.projects-e2e }}
+      projects: ${{ needs.lint-test-build.outputs.projects-e2e }}
       tags: '@smoke'
 
   publish-dist:
-    needs: build-sources
+    needs: lint-test-build
     name: '(CD) publish dist'
     if: ${{ (github.event_name == 'pull_request' &&  github.event.pull_request.head.repo.full_name == 'vegaprotocol/frontend-monorepo') || github.event_name == 'push' }}
     uses: ./.github/workflows/publish-dist.yml
     secrets: inherit
     with:
-      projects: ${{ needs.build-sources.outputs.projects }}
+      projects: ${{ needs.lint-test-build.outputs.projects }}
 
   dist-check:
     runs-on: ubuntu-latest
     needs:
       - publish-dist
-      - build-sources
+      - lint-test-build
     if: ${{ github.event_name == 'pull_request' &&  github.event.pull_request.head.repo.full_name == 'vegaprotocol/frontend-monorepo' }}
     timeout-minutes: 60
     name: '(CD) comment preview links'
@@ -223,27 +168,27 @@ jobs:
         run: |
           # https://stackoverflow.com/questions/3183444/check-for-valid-link-url
           regex='(https?|ftp|file)://[-[:alnum:]\+&@#/%?=~_|!:,.;]*[-[:alnum:]\+&@#/%=~_|]'
-          if [[ "${{ needs.build-sources.outputs.preview_governance }}" =~ $regex ]]; then
-            until curl --insecure --location --fail "${{ needs.build-sources.outputs.preview_governance }}"; do
-              echo "waiting for governance preview: ${{ needs.build-sources.outputs.preview_governance }}"
+          if [[ "${{ needs.lint-test-build.outputs.preview_governance }}" =~ $regex ]]; then
+            until curl --insecure --location --fail "${{ needs.lint-test-build.outputs.preview_governance }}"; do
+              echo "waiting for governance preview: ${{ needs.lint-test-build.outputs.preview_governance }}"
               sleep 5
             done
           fi
-          if [[ "${{ needs.build-sources.outputs.preview_explorer }}" =~ $regex ]]; then
-            until curl --insecure --location --fail "${{ needs.build-sources.outputs.preview_explorer }}"; do
-              echo "waiting for explorer preview: ${{ needs.build-sources.outputs.preview_explorer }}"
+          if [[ "${{ needs.lint-test-build.outputs.preview_explorer }}" =~ $regex ]]; then
+            until curl --insecure --location --fail "${{ needs.lint-test-build.outputs.preview_explorer }}"; do
+              echo "waiting for explorer preview: ${{ needs.lint-test-build.outputs.preview_explorer }}"
               sleep 5
             done
           fi
-          if [[ "${{ needs.build-sources.outputs.preview_trading }}" =~ $regex ]]; then
-            until curl --insecure --location --fail "${{ needs.build-sources.outputs.preview_trading }}"; do
-              echo "waiting for trading preview: ${{ needs.build-sources.outputs.preview_trading }}"
+          if [[ "${{ needs.lint-test-build.outputs.preview_trading }}" =~ $regex ]]; then
+            until curl --insecure --location --fail "${{ needs.lint-test-build.outputs.preview_trading }}"; do
+              echo "waiting for trading preview: ${{ needs.lint-test-build.outputs.preview_trading }}"
               sleep 5
             done
           fi
-          if [[ "${{ needs.build-sources.outputs.preview_tools }}" =~ $regex ]]; then
-            until curl --insecure --location --fail "${{ needs.build-sources.outputs.preview_tools }}"; do
-              echo "waiting for tools preview: ${{ needs.build-sources.outputs.preview_tools }}"
+          if [[ "${{ needs.lint-test-build.outputs.preview_tools }}" =~ $regex ]]; then
+            until curl --insecure --location --fail "${{ needs.lint-test-build.outputs.preview_tools }}"; do
+              echo "waiting for tools preview: ${{ needs.lint-test-build.outputs.preview_tools }}"
               sleep 5
             done
           fi
@@ -255,10 +200,10 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body: |
             Previews
-            * governance: ${{ needs.build-sources.outputs.preview_governance }}
-            * explorer: ${{ needs.build-sources.outputs.preview_explorer  }}
-            * trading: ${{ needs.build-sources.outputs.preview_trading }}
-            * tools: ${{ needs.build-sources.outputs.preview_tools }}
+            * governance: ${{ needs.lint-test-build.outputs.preview_governance }}
+            * explorer: ${{ needs.lint-test-build.outputs.preview_explorer  }}
+            * trading: ${{ needs.lint-test-build.outputs.preview_trading }}
+            * tools: ${{ needs.lint-test-build.outputs.preview_tools }}
 
   # Report single result at the end, to avoid mess with required checks in PR
   cypress-check:

.github/workflows/cypress-run.yml

@@ -37,7 +37,6 @@ jobs:
 
       # Restore node_modules from cache if possible
       - name: Restore node_modules from cache
-        id: cache-node-modules
         uses: actions/cache@v3
         with:
           path: |
@@ -47,7 +46,6 @@ jobs:
 
       # Install frontend dependencies
       - name: Install root dependencies
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile
         working-directory: frontend-monorepo
 
@@ -69,7 +67,7 @@ jobs:
       ######
 
       - name: Run Cypress tests
-        run: yarn nx run ${{ matrix.project }}:e2e ${{ env.SKIP_CACHE }} --browser chrome --env.grepTags="${{ inputs.tags }}"
+        run: yarn nx run ${{ matrix.project }}:e2e ${{ env.SKIP_CACHE }}  --browser chrome --env.grepTags="${{ inputs.tags }}"
         working-directory: frontend-monorepo
         env:
           CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}

.husky/commit-msg

@@ -3,3 +3,6 @@
 
 # Lint commit messages to ensure they follow conventional commit standards
 yarn commitlint --edit "${1}"
+
+# Lint all staged files
+yarn lint-staged

.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-# Lint all staged files
-yarn lint-staged

.husky/pre-push

@@ -1,8 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-# Lint all staged files
-yarn nx format:check
-
-# Test all projects with changes
-yarn nx affected -t test --exclude trading

.nvmrc

@@ -1 +1 @@
-16.20.2
+16.15.1

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

@@ -1,68 +0,0 @@
-context('Oracle page', { tags: '@smoke' }, () => {
-  describe('Verify elements on page', () => {
-    before('create market and navigate to oracle page', () => {
-      cy.createMarket();
-      cy.visit('/oracles');
-    });
-    it('should see oracle data', () => {
-      cy.getByTestId('oracle-details').should('have.length.at.least', 2);
-      cy.getByTestId('oracle-details')
-        .should('exist')
-        .eq(0)
-        .within(() => {
-          cy.get('tr')
-            .eq(0)
-            .within(() => {
-              cy.get('th').should('have.text', 'ID');
-              cy.get('a').invoke('text').should('have.length', 64);
-              cy.get('a')
-                .should('have.attr', 'href')
-                .and('contain', '/oracles/');
-            });
-          cy.get('tr')
-            .eq(1)
-            .within(() => {
-              cy.get('th').should('have.text', 'Type');
-              cy.get('td').should('have.text', 'External data');
-            });
-          cy.get('tr')
-            .eq(2)
-            .within(() => {
-              cy.get('th').should('have.text', 'Signer');
-              cy.getByTestId('keytype').should('have.text', 'Vega');
-              cy.get('a').invoke('text').should('have.length', 64);
-              cy.get('a')
-                .should('have.attr', 'href')
-                .and('contain', '/parties/');
-            });
-          cy.get('tr')
-            .eq(3)
-            .within(() => {
-              cy.get('th').should('have.text', 'Settlement for');
-              cy.get('a').invoke('text').should('have.length', 64);
-              cy.get('a')
-                .should('have.attr', 'href')
-                .and('contain', '/markets/');
-            });
-          cy.get('tr')
-            .eq(4)
-            .within(() => {
-              cy.get('th').should('have.text', 'Matched data');
-              cy.get('td').should('have.text', '❌');
-            });
-          cy.get('details')
-            .eq(0)
-            .within(() => {
-              cy.contains('Filter').click();
-              cy.get('.language-json').should('exist');
-            });
-          cy.get('details')
-            .eq(1)
-            .within(() => {
-              cy.contains('JSON').click();
-              cy.get('.language-json').should('exist');
-            });
-        });
-    });
-  });
-});

apps/explorer/src/app/routes/network-parameters/index.tsx

@@ -1,2 +1 @@
 export * from './network-parameters';
-export * from './structure-network-params';

apps/explorer/src/app/routes/network-parameters/network-parameters.spec.tsx

@@ -1,105 +1,82 @@
 import { render, screen } from '@testing-library/react';
 import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
 import { NetworkParametersTable } from './network-parameters';
-import { MemoryRouter } from 'react-router-dom';
-
-const renderComponent = (data: NetworkParamsQuery | undefined) => {
-  return render(
-    <MemoryRouter>
-      <NetworkParametersTable data={data} loading={false} />
-    </MemoryRouter>
-  );
-};
-
-const mockData = {
-  networkParametersConnection: {
-    edges: [
-      {
-        node: {
-          key: 'spam.protection.delegation.min.tokens',
-          value: '3',
-        },
-      },
-      {
-        node: {
-          key: 'spam.protection.voting.min.tokens',
-          value: '1',
-        },
-      },
-      {
-        node: {
-          key: 'reward.staking.delegation.minimumValidatorStake',
-          value: '2',
-        },
-      },
-      {
-        node: {
-          key: 'reward.asset',
-          value:
-            'fc7fd956078fb1fc9db5c19b88f0874c4299b2a7639ad05a47a28c0aef291b55',
-        },
-      },
-    ],
-  },
-};
 
 describe('NetworkParametersTable', () => {
-  it('renders headers correctly', () => {
-    renderComponent(mockData);
-
-    const allHeadings = screen.getAllByRole('heading');
-    expect(
-      allHeadings.map((h) => {
-        return {
-          text: h.textContent,
-          level: h.tagName,
-          testId: h.getAttribute('data-testid'),
-        };
-      })
-    ).toEqual([
-      {
-        text: 'Network Parameters',
-        level: 'H1',
-        testId: 'network-param-header',
+  it('renders correctly when it has network params', () => {
+    const data: NetworkParamsQuery = {
+      networkParametersConnection: {
+        edges: [
+          {
+            node: {
+              __typename: 'NetworkParameter',
+              key: 'market.liquidityProvision.minLpStakeQuantumMultiple',
+              value: '1',
+            },
+          },
+          {
+            node: {
+              __typename: 'NetworkParameter',
+              key: 'market.fee.factors.infrastructureFee',
+              value: '0.0005',
+            },
+          },
+        ],
       },
-      { text: 'Spam', level: 'H1', testId: 'spam' },
-      { text: 'Protection', level: 'H2', testId: 'spam-protection' },
-      { text: 'Delegation', level: 'H3', testId: 'spam-protection-delegation' },
-      { text: 'Min', level: 'H4', testId: 'spam-protection-delegation-min' },
-      { text: 'Voting', level: 'H3', testId: 'spam-protection-voting' },
-      { text: 'Min', level: 'H4', testId: 'spam-protection-voting-min' },
-      { text: 'Reward', level: 'H1', testId: 'reward' },
-      { text: 'Staking', level: 'H2', testId: 'reward-staking' },
-      { text: 'Delegation', level: 'H3', testId: 'reward-staking-delegation' },
-    ]);
+    };
+    render(<NetworkParametersTable data={data} loading={false} />);
+    expect(screen.getByTestId('network-param-header')).toHaveTextContent(
+      'Network Parameters'
+    );
+    const rows = screen.getAllByTestId('key-value-table-row');
+    expect(rows[0].children[0]).toHaveTextContent(
+      'market.fee.factors.infrastructureFee'
+    );
+    expect(rows[1].children[0]).toHaveTextContent(
+      'market.liquidityProvision.minLpStakeQuantumMultiple'
+    );
+    expect(rows[0].children[1]).toHaveTextContent('0.0005');
+    expect(rows[1].children[1]).toHaveTextContent('1');
   });
 
-  it('renders network params correctly', () => {
-    renderComponent(mockData);
-
-    const delegationMinTokensRow = screen.getByTestId(
-      'spam-protection-delegation-min-tokens'
+  it('renders the rows in ascending order', () => {
+    const data: NetworkParamsQuery = {
+      networkParametersConnection: {
+        edges: [
+          {
+            node: {
+              __typename: 'NetworkParameter',
+              key: 'market.fee.factors.infrastructureFee',
+              value: '0.0005',
+            },
+          },
+          {
+            node: {
+              __typename: 'NetworkParameter',
+              key: 'market.liquidityProvision.minLpStakeQuantumMultiple',
+              value: '1',
+            },
+          },
+        ],
+      },
+    };
+    render(<NetworkParametersTable data={data} loading={false} />);
+    expect(screen.getByTestId('network-param-header')).toHaveTextContent(
+      'Network Parameters'
     );
-    expect(delegationMinTokensRow).toHaveTextContent('0.000000000000000003');
-
-    const votingMinTokensRow = screen.getByTestId(
-      'spam-protection-voting-min-tokens'
+    const rows = screen.getAllByTestId('key-value-table-row');
+    expect(rows[0].children[0]).toHaveTextContent(
+      'market.fee.factors.infrastructureFee'
     );
-    expect(votingMinTokensRow).toHaveTextContent('0.000000000000000001');
-
-    const minimumValidatorStakeRow = screen.getByTestId(
-      'reward-staking-delegation-minimumValidatorStake'
-    );
-    expect(minimumValidatorStakeRow).toHaveTextContent('2');
-
-    const assetRow = screen.getByTestId('reward-asset');
-    expect(assetRow).toHaveTextContent(
-      'fc7fd956078fb1fc9db5c19b88f0874c4299b2a7639ad05a47a28c0aef291b55'
+    expect(rows[1].children[0]).toHaveTextContent(
+      'market.liquidityProvision.minLpStakeQuantumMultiple'
     );
+    expect(rows[0].children[1]).toHaveTextContent('0.0005');
+    expect(rows[1].children[1]).toHaveTextContent('1');
   });
 
   it('does not render rows when is loading', () => {
-    renderComponent(undefined);
+    render(<NetworkParametersTable data={undefined} loading={true} />);
     expect(screen.getByTestId('network-param-header')).toHaveTextContent(
       'Network Parameters'
     );

apps/explorer/src/app/routes/network-parameters/network-parameters.tsx

@@ -1,8 +1,6 @@
-import startCase from 'lodash/startCase';
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
 import {
   AsyncRenderer,
+  KeyValueTable,
   KeyValueTableRow,
   SyntaxHighlighter,
 } from '@vegaprotocol/ui-toolkit';
@@ -14,12 +12,11 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { RouteTitle } from '../../components/route-title';
+import orderBy from 'lodash/orderBy';
 import { useNetworkParamsQuery } from '@vegaprotocol/network-parameters';
+import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
 import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
-import { structureNetworkParams } from './structure-network-params';
-import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
-import type { GroupedParams } from './structure-network-params';
 
 const PERCENTAGE_PARAMS = [
   'governance.proposal.asset.requiredMajority',
@@ -61,54 +58,6 @@ const BIG_NUMBER_PARAMS = [
   'governance.proposal.updateAsset.minVoterBalance',
 ];
 
-export const renderGroupedParams = (
-  group: GroupedParams,
-  level: number,
-  parentKeys: string[] = []
-) => {
-  const Header = `h${level}` as keyof JSX.IntrinsicElements;
-  const headerStyles = classNames('uppercase font-semibold', {
-    'pt-6 text-3xl underline': level === 1,
-    'pt-3 text-2xl': level === 2,
-    'pt-2 text-lg': level === 3,
-    'pt-2 text-default': level === 4,
-  });
-
-  return Object.entries(group).map(([key, value]) => {
-    const fullPath = [...parentKeys, key].join('.');
-    const isLeafNode = typeof value !== 'object';
-    const id = parentKeys.concat([key]).join('-');
-
-    return (
-      <div key={key}>
-        {!isLeafNode && (
-          <div id={id}>
-            <Link to={`#${id}`}>
-              <Header className={headerStyles} data-testid={id}>
-                {startCase(key)}
-              </Header>
-            </Link>
-          </div>
-        )}
-        {isLeafNode ? (
-          typeof value === 'string' ? (
-            <div data-testid={id}>
-              <NetworkParameterRow
-                key={fullPath}
-                row={{ key: fullPath, value: value }}
-              />
-            </div>
-          ) : null
-        ) : (
-          <div className="pb-1">
-            {renderGroupedParams(value, level + 1, [...parentKeys, key])}
-          </div>
-        )}
-      </div>
-    );
-  });
-};
-
 export const NetworkParameterRow = ({
   row: { key, value },
 }: {
@@ -128,9 +77,7 @@ export const NetworkParameterRow = ({
     >
       {key}
       {isSyntaxRow ? (
-        <div className="pb-2">
-          <SyntaxHighlighter data={JSON.parse(value)} />
-        </div>
+        <SyntaxHighlighter data={JSON.parse(value)} />
       ) : isNaN(Number(value)) ? (
         value
       ) : BIG_NUMBER_PARAMS.includes(key) ? (
@@ -166,12 +113,17 @@ export const NetworkParametersTable = ({
       loading={loading}
       error={error}
       render={(data) => {
-        const flatParams = removePaginationWrapper(
-          data.networkParametersConnection.edges
+        const ascParams = orderBy(
+          removePaginationWrapper(data.networkParametersConnection.edges),
+          (param) => param.key,
+          'asc'
         );
-        const groupedParams = structureNetworkParams(flatParams);
         return (
-          <div className="-mt-6">{renderGroupedParams(groupedParams, 1)}</div>
+          <KeyValueTable data-testid="parameters">
+            {(ascParams || []).map((row) => (
+              <NetworkParameterRow key={row.key} row={row} />
+            ))}
+          </KeyValueTable>
         );
       }}
     />

apps/explorer/src/app/routes/network-parameters/structure-network-params.spec.tsx

@@ -1,109 +0,0 @@
-import type { GroupedParams } from './structure-network-params';
-import {
-  structureParams,
-  sortGroupedParams,
-  structureNetworkParams,
-} from './structure-network-params';
-
-describe('structureParams', () => {
-  it('should correctly structure params', () => {
-    const input = [
-      { key: 'spam.protection.delegation.min.tokens', value: '10' },
-      { key: 'spam.protection.voting.min.tokens', value: '5' },
-    ];
-    const output: GroupedParams = {
-      spam: {
-        protection: {
-          delegation: {
-            min: {
-              tokens: '10',
-            },
-          },
-          voting: {
-            min: {
-              tokens: '5',
-            },
-          },
-        },
-      },
-    };
-    expect(structureParams(input)).toEqual(output);
-  });
-
-  it('should handle top-level keys correctly', () => {
-    const input = [{ key: 'levelOne', value: '10' }];
-    const output = {
-      levelOne: '10',
-    };
-    expect(structureParams(input)).toEqual(output);
-  });
-});
-
-describe('sortGroupedParams', () => {
-  it('should correctly sort grouped params', () => {
-    const input: GroupedParams = {
-      spam: {
-        protection: {
-          delegation: {
-            min: {
-              tokens: '10',
-            },
-          },
-        },
-      },
-      reward: '50',
-    };
-    const output: GroupedParams = {
-      reward: '50',
-      spam: {
-        protection: {
-          delegation: {
-            min: {
-              tokens: '10',
-            },
-          },
-        },
-      },
-    };
-    expect(sortGroupedParams(input)).toEqual(output);
-  });
-
-  it('should handle already sorted keys', () => {
-    const input = {
-      a: '10',
-      b: {
-        c: '5',
-        d: '6',
-      },
-    };
-    expect(sortGroupedParams(input)).toEqual(input);
-  });
-});
-
-describe('structureNetworkParams', () => {
-  it('should structure and sort network params correctly', () => {
-    const input = [
-      { key: 'spam.protection.delegation.min.tokens', value: '10' },
-      { key: 'reward.asset', value: '50' },
-    ];
-    const output: GroupedParams = {
-      reward: {
-        asset: '50',
-      },
-      spam: {
-        protection: {
-          delegation: {
-            min: {
-              tokens: '10',
-            },
-          },
-        },
-      },
-    };
-    expect(structureNetworkParams(input)).toEqual(output);
-  });
-
-  it('should return an empty object if no params are provided', () => {
-    expect(structureNetworkParams([])).toEqual({});
-  });
-});

apps/explorer/src/app/routes/network-parameters/structure-network-params.tsx

@@ -1,107 +0,0 @@
-/**
- * Categorizes and sorts an array of key-value pairs of network params into a nested object structure.
- *
- * The function takes an array of network params where keys are dot-delimited
- * strings representing nested categories (e.g., 'spam.protection.delegation.min.tokens').
- *
- * Why this is necessary:
- * A flat key-value structure wouldn't provide the hierarchical information needed.
- * Organizing network parameters like this allows the rendering of nested headers
- * and their corresponding network params.
- *
- * It also ensures that items with the minimum amount of nesting are ordered first. This
- * allows us to render these items first, before more deeply nested items are rendered with
- * subheaders. This creates a more intuitive UI.
- *
- * For example, given the input:
- * [
- *   { key: 'spam.protection.delegation.min.tokens', value: '10' },
- *   { key: 'spam.protection.voting.min.tokens', value: '5' },
- *   { key: 'reward.staking.delegation.minimumValidatorStake', value: '2' }
- *   { key: 'reward.asset', value: 'fc7fd956078fb1fc9db5c19b88f0874c4299b2a7639ad05a47a28c0aef291b55' }
- * ]
- *
- * The output will be:
- * {
- *   spam: {
- *     protection: {
- *       delegation: {
- *         min: {
- *           tokens: '10'
- *         }
- *       },
- *       voting: {
- *         min: {
- *           tokens: '5'
- *         }
- *       }
- *     }
- *   },
- *   reward: {
- *     asset: 'fc7fd956078fb1fc9db5c19b88f0874c4299b2a7639ad05a47a28c0aef291b55',
- *     staking: {
- *       delegation: {
- *         minimumValidatorStake: '2'
- *       }
- *     }
- *   }
- * }
- *
- * @param {Array} params - An array of key-value pairs to categorize and sort.
- * @returns {GroupedParams} - A nested object that groups the key-value pairs.
- */
-
-export type GroupedParams = {
-  [key: string]: string | GroupedParams;
-};
-
-export const structureParams = (
-  params: { key: string; value: string }[]
-): GroupedParams => {
-  const grouped: GroupedParams = {};
-
-  params.forEach(({ key, value }) => {
-    const parts = key.split('.');
-    let node: GroupedParams = grouped;
-
-    parts.forEach((part, i) => {
-      if (typeof node[part] === 'undefined') {
-        node[part] = i === parts.length - 1 ? value : {};
-      }
-
-      if (typeof node[part] === 'object') {
-        node = node[part] as GroupedParams;
-      }
-    });
-  });
-
-  return grouped;
-};
-
-export const sortGroupedParams = (
-  groupedParams: GroupedParams
-): GroupedParams => {
-  const sorted: GroupedParams = {};
-
-  // Sort top-level keys first
-  Object.entries(groupedParams).forEach(([key, value]) => {
-    if (typeof value === 'string') {
-      sorted[key] = value;
-    }
-  });
-
-  Object.entries(groupedParams).forEach(([key, value]) => {
-    if (typeof value === 'object') {
-      sorted[key] = sortGroupedParams(value);
-    }
-  });
-
-  return sorted;
-};
-
-export const structureNetworkParams = (
-  params: { key: string; value: string }[]
-) => {
-  const grouped = structureParams(params);
-  return sortGroupedParams(grouped);
-};

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

@@ -38,12 +38,7 @@ const Oracles = () => {
               const dataConnection = o?.node.dataConnection;
 
               return (
-                <div
-                  id={id}
-                  key={id}
-                  className="mb-10"
-                  data-testid="oracle-details"
-                >
+                <div id={id} key={id} className="mb-10">
                   <OracleDetails
                     id={id}
                     dataSource={o?.node}

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

@@ -183,7 +183,7 @@ context(
         .first()
         .find('[data-testid="view-proposal-btn"]')
         .click();
-      cy.url().should('contain', '/protocol-upgrades/v1/2015942');
+      cy.url().should('contain', '/protocol-upgrades/v1');
       cy.getByTestId('protocol-upgrade-proposal').within(() => {
         cy.get('h1').should('have.text', 'Vega Release v1');
         cy.getByTestId('protocol-upgrade-block-height').should(
@@ -243,7 +243,7 @@ context(
           );
         cy.getByTestId('external-link')
           .should('have.attr', 'href')
-          .and('contain', '/proposals/protocol-upgrade/v1/2015942');
+          .and('contain', '/proposals/protocol-upgrade/v1');
       });
 
       // estimate does not display possibly due to mocks or Cypress unless the proposal is clicked on several times

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

@@ -201,8 +201,6 @@
   "STATE_WAITING_FOR_NODE_VOTE": "Waiting for node vote",
   "UpdateNetworkParameter": "Network parameter",
   "NewFreeform": "Freeform",
-  "setToPass": "Set to pass",
-  "setToFail": "Set to fail",
   "tokenVotes": "Token votes",
   "liquidityVotes": "Liquidity votes",
   "castYourVote": "Cast your vote",
@@ -211,23 +209,13 @@
   "against": "Against",
   "majorityRequired": "Majority Required",
   "participation": "Participation",
-  "majorityThreshold": "majority threshold",
-  "participationThreshold": "participation threshold",
-  "met": "met",
-  "notMet": "not met",
+  "met": "Met",
+  "notMet": "Not Met",
   "governanceRequired": "Required",
   "daysLeft": "{{daysLeft}} left to vote.",
   "toVote": "to vote",
   "voteFor": "Vote for",
   "voteAgainst": "Vote against",
-  "tokenVote": "Token vote",
-  "tokenVotesFor": "Token votes for",
-  "tokenVotesAgainst": "Token votes against",
-  "totalTokensVoted": "Total tokens voted",
-  "liquidityProviderVote": "Liquidity provider vote",
-  "liquidityProviderVotesFor": "LP votes for",
-  "liquidityProviderVotesAgainst": "LP votes against",
-  "totalLiquidityProviderTokensVoted": "Total LP tokens voted",
   "votingThresholdInfo": "If the token vote passes the participation threshold it will be the deciding vote. If not, the outcome will be determined by liquidity providers on this market.",
   "noGovernanceTokens": "You need some VEGA tokens to participate in governance",
   "youVoted": "You voted",

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

@@ -31,6 +31,10 @@ import {
   orderByDate,
   orderByUpgradeBlockHeight,
 } from '../proposals/components/proposals-list/proposals-list';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
 import { BigNumber } from '../../lib/bignumber';
 
 const nodesToShow = 6;
@@ -43,34 +47,57 @@ const HomeProposals = ({
   protocolUpgradeProposals: ProtocolUpgradeProposalFieldsFragment[];
 }) => {
   const { t } = useTranslation();
+  const {
+    params: networkParams,
+    loading: networkParamsLoading,
+    error: networkParamsError,
+  } = useNetworkParams([
+    NetworkParams.governance_proposal_market_requiredMajority,
+    NetworkParams.governance_proposal_updateMarket_requiredMajority,
+    NetworkParams.governance_proposal_updateMarket_requiredMajorityLP,
+    NetworkParams.governance_proposal_asset_requiredMajority,
+    NetworkParams.governance_proposal_updateAsset_requiredMajority,
+    NetworkParams.governance_proposal_updateNetParam_requiredMajority,
+    NetworkParams.governance_proposal_freeform_requiredMajority,
+  ]);
 
   return (
-    <section className="mb-16" data-testid="home-proposals">
-      <Heading title={t('vegaGovernance')} />
-      <h3 className="mb-6">{t('homeProposalsIntro')}</h3>
-      <div className="mb-8">
-        <ExternalLink href={ExternalLinks.GOVERNANCE_PAGE}>
-          {t(`readMoreGovernance`)}
-        </ExternalLink>
-      </div>
+    <AsyncRenderer
+      loading={networkParamsLoading}
+      error={networkParamsError}
+      data={networkParams}
+    >
+      <section className="mb-16" data-testid="home-proposals">
+        <Heading title={t('vegaGovernance')} />
+        <h3 className="mb-6">{t('homeProposalsIntro')}</h3>
+        <div className="mb-8">
+          <ExternalLink href={ExternalLinks.GOVERNANCE_PAGE}>
+            {t(`readMoreGovernance`)}
+          </ExternalLink>
+        </div>
 
-      <SubHeading title={t('latestProposals')} />
-      <ul data-testid="home-proposal-list" className="grid gap-6">
-        {protocolUpgradeProposals.map((proposal, index) => (
-          <ProtocolUpgradeProposalsListItem key={index} proposal={proposal} />
-        ))}
+        <SubHeading title={t('latestProposals')} />
+        <ul data-testid="home-proposal-list" className="grid gap-6">
+          {protocolUpgradeProposals.map((proposal, index) => (
+            <ProtocolUpgradeProposalsListItem key={index} proposal={proposal} />
+          ))}
 
-        {proposals.map((proposal) => (
-          <ProposalsListItem key={proposal.id} proposal={proposal} />
-        ))}
-      </ul>
+          {proposals.map((proposal) => (
+            <ProposalsListItem
+              key={proposal.id}
+              proposal={proposal}
+              networkParams={networkParams}
+            />
+          ))}
+        </ul>
 
-      <div className="mt-6">
-        <Link to={`${Routes.PROPOSALS}`}>
-          <Button size="md">{t('homeProposalsButtonText')}</Button>
-        </Link>
-      </div>
-    </section>
+        <div className="mt-6">
+          <Link to={`${Routes.PROPOSALS}`}>
+            <Button size="md">{t('homeProposalsButtonText')}</Button>
+          </Link>
+        </div>
+      </section>
+    </AsyncRenderer>
   );
 };
 

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.spec.tsx

@@ -16,6 +16,7 @@ import { ProposalHeader } from './proposal-header';
 import {
   lastWeek,
   nextWeek,
+  mockNetworkParams,
   mockWalletContext,
   createUserVoteQueryMock,
 } from '../../test-helpers/mocks';
@@ -47,6 +48,7 @@ const renderComponent = (
             <ProposalHeader
               proposal={proposal}
               isListItem={isListItem}
+              networkParams={mockNetworkParams}
               voteState={voteState}
             />
           </VegaWalletContext.Provider>

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -8,19 +8,22 @@ import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { truncateMiddle } from '../../../../lib/truncate-middle';
 import { CurrentProposalState } from '../current-proposal-state';
 import { ProposalInfoLabel } from '../proposal-info-label';
+import { ProposalVotingStatus } from '../proposal-voting-status';
+import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
 import { useSuccessorMarketProposalDetails } from '@vegaprotocol/proposals';
 import { FLAGS } from '@vegaprotocol/environment';
 import Routes from '../../../routes';
 import { Link } from 'react-router-dom';
 import type { VoteState } from '../vote-details/use-user-vote';
-import { VoteBreakdown } from '../vote-breakdown';
 
 export const ProposalHeader = ({
   proposal,
+  networkParams,
   isListItem = true,
   voteState,
 }: {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  networkParams: Partial<NetworkParamsResult>;
   isListItem?: boolean;
   voteState?: VoteState | null;
 }) => {
@@ -143,7 +146,7 @@ export const ProposalHeader = ({
               className="flex items-center gap-2"
               data-testid={`user-voted-${voteState.toLowerCase()}`}
             >
-              <div data-testid="you-voted-icon">
+              <div className="text-vega-green" data-testid="you-voted-icon">
                 <VegaIcon name={VegaIconNames.VOTE} size={24} />
               </div>
               <div>
@@ -182,7 +185,7 @@ export const ProposalHeader = ({
         </div>
       )}
 
-      <VoteBreakdown proposal={proposal} />
+      <ProposalVotingStatus proposal={proposal} networkParams={networkParams} />
     </>
   );
 };

apps/governance/src/routes/proposals/components/proposal-votes-table/index.tsx

@@ -0,0 +1 @@
+export { ProposalVotesTable } from './proposal-votes-table';

apps/governance/src/routes/proposals/components/proposal-votes-table/proposal-votes-table.spec.tsx

@@ -0,0 +1,119 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
+import { ProposalVotesTable } from './proposal-votes-table';
+import { ProposalType } from '../proposal/proposal';
+import {
+  generateNoVotes,
+  generateProposal,
+  generateYesVotes,
+} from '../../test-helpers/generate-proposals';
+
+const defaultProposal = generateProposal();
+const defaultProposalType = ProposalType.PROPOSAL_NETWORK_PARAMETER;
+const updateMarketProposal = generateProposal({
+  terms: {
+    change: {
+      __typename: 'UpdateMarket',
+      marketId: '12345',
+    },
+  },
+  votes: {
+    __typename: 'ProposalVotes',
+    yes: generateYesVotes(10),
+    no: generateNoVotes(0),
+  },
+});
+const updateMarketProposalType = ProposalType.PROPOSAL_UPDATE_MARKET;
+
+const renderComponent = (
+  proposal = defaultProposal,
+  proposalType = defaultProposalType
+) =>
+  render(
+    <MockedProvider>
+      <AppStateProvider>
+        <ProposalVotesTable proposal={proposal} proposalType={proposalType} />
+      </AppStateProvider>
+    </MockedProvider>
+  );
+
+describe('Proposal Votes Table', () => {
+  it('should render successfully', () => {
+    const { baseElement } = renderComponent();
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should show vote breakdown fields, excluding custom update market fields', () => {
+    renderComponent();
+    fireEvent.click(screen.getByTestId('vote-breakdown-toggle'));
+    expect(screen.getByText('Expected to pass')).toBeInTheDocument();
+    expect(screen.getByText('Token majority met')).toBeInTheDocument();
+    expect(screen.getByText('Token participation met')).toBeInTheDocument();
+    expect(screen.getByText('Tokens for proposal')).toBeInTheDocument();
+    expect(screen.getByText('Total Supply')).toBeInTheDocument();
+    expect(screen.getByText('Tokens against proposal')).toBeInTheDocument();
+    expect(screen.getByText('Participation required')).toBeInTheDocument();
+    expect(screen.getByText('Majority Required')).toBeInTheDocument();
+    expect(screen.getByText('Number of voting parties')).toBeInTheDocument();
+    expect(screen.getByText('Total tokens voted')).toBeInTheDocument();
+    expect(
+      screen.getByText('Total tokens voted percentage')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Number of votes for')).toBeInTheDocument();
+    expect(screen.getByText('Number of votes against')).toBeInTheDocument();
+    expect(screen.getByText('Yes percentage')).toBeInTheDocument();
+    expect(screen.getByText('No percentage')).toBeInTheDocument();
+    expect(screen.queryByText('Liquidity majority met')).toBeNull();
+    expect(screen.queryByText('Liquidity participation met')).toBeNull();
+    expect(screen.queryByText('Liquidity shares for proposal')).toBeNull();
+  });
+
+  it('displays different breakdown fields for update market proposal', () => {
+    renderComponent(updateMarketProposal, updateMarketProposalType);
+    fireEvent.click(screen.getByTestId('vote-breakdown-toggle'));
+    expect(screen.getByText('Liquidity majority met')).toBeInTheDocument();
+    expect(screen.getByText('Liquidity participation met')).toBeInTheDocument();
+    expect(
+      screen.getByText('Liquidity shares for proposal')
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Number of voting parties')).toBeNull();
+    expect(screen.queryByText('Total tokens voted')).toBeNull();
+    expect(screen.queryByText('Total tokens voted percentage')).toBeNull();
+    expect(screen.queryByText('Number of votes for')).toBeNull();
+    expect(screen.queryByText('Number of votes against')).toBeNull();
+    expect(screen.queryByText('Yes percentage')).toBeNull();
+    expect(screen.queryByText('No percentage')).toBeNull();
+  });
+
+  it('displays if an update market proposal will pass by token vote', () => {
+    renderComponent(updateMarketProposal, updateMarketProposalType);
+    fireEvent.click(screen.getByTestId('vote-breakdown-toggle'));
+    expect(screen.getByText('👍 by token vote')).toBeInTheDocument();
+  });
+
+  it('displays if an update market proposal will pass by LP vote', () => {
+    renderComponent(
+      generateProposal({
+        terms: {
+          change: {
+            __typename: 'UpdateMarket',
+            marketId: '12345',
+          },
+        },
+        votes: {
+          __typename: 'ProposalVotes',
+          yes: {
+            ...generateYesVotes(0, 1, '10'),
+          },
+          no: {
+            ...generateNoVotes(0, 1, '0'),
+          },
+        },
+      }),
+      updateMarketProposalType
+    );
+    fireEvent.click(screen.getByTestId('vote-breakdown-toggle'));
+    expect(screen.getByText('👍 by liquidity vote')).toBeInTheDocument();
+  });
+});

apps/governance/src/routes/proposals/components/proposal-votes-table/proposal-votes-table.tsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  KeyValueTable,
+  KeyValueTableRow,
+  Thumbs,
+  RoundedWrapper,
+} from '@vegaprotocol/ui-toolkit';
+import { formatNumber, formatNumberPercentage } from '@vegaprotocol/utils';
+import { SubHeading } from '../../../../components/heading';
+import { useVoteInformation } from '../../hooks';
+import { useAppState } from '../../../../contexts/app-state/app-state-context';
+import { ProposalType } from '../proposal/proposal';
+import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+
+interface ProposalVotesTableProps {
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  proposalType: ProposalType | null;
+}
+
+export const ProposalVotesTable = ({
+  proposal,
+  proposalType,
+}: ProposalVotesTableProps) => {
+  const { t } = useTranslation();
+  const {
+    appState: { totalSupply },
+  } = useAppState();
+  const [showDetails, setShowDetails] = useState(false);
+  const {
+    willPassByTokenVote,
+    willPassByLPVote,
+    totalTokensPercentage,
+    participationMet,
+    participationLPMet,
+    totalTokensVoted,
+    noPercentage,
+    yesPercentage,
+    noTokens,
+    yesTokens,
+    yesEquityLikeShareWeight,
+    yesVotes,
+    noVotes,
+    totalVotes,
+    requiredMajorityPercentage,
+    requiredParticipation,
+    majorityMet,
+    majorityLPMet,
+  } = useVoteInformation({ proposal });
+
+  const isUpdateMarket = proposalType === ProposalType.PROPOSAL_UPDATE_MARKET;
+  const updateMarketWillPass = willPassByTokenVote || willPassByLPVote;
+  const updateMarketVotePassMethod = willPassByTokenVote
+    ? t('byTokenVote')
+    : t('byLiquidityVote');
+
+  return (
+    <>
+      <CollapsibleToggle
+        toggleState={showDetails}
+        setToggleState={setShowDetails}
+        dataTestId="vote-breakdown-toggle"
+      >
+        <SubHeading title={t('voteBreakdown')} />
+      </CollapsibleToggle>
+
+      {showDetails && (
+        <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
+          <KeyValueTable
+            data-testid="proposal-votes-table"
+            numerical={true}
+            headingLevel={4}
+          >
+            <KeyValueTableRow>
+              {t('expectedToPass')}
+              {isUpdateMarket ? (
+                updateMarketWillPass ? (
+                  <Thumbs up={true} text={updateMarketVotePassMethod} />
+                ) : (
+                  <Thumbs up={false} />
+                )
+              ) : willPassByTokenVote ? (
+                <Thumbs up={true} />
+              ) : (
+                <Thumbs up={false} />
+              )}
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              {t('majorityMet')}
+              {majorityMet ? <Thumbs up={true} /> : <Thumbs up={false} />}
+            </KeyValueTableRow>
+            {isUpdateMarket && (
+              <KeyValueTableRow>
+                {t('majorityLPMet')}
+                {majorityLPMet ? <Thumbs up={true} /> : <Thumbs up={false} />}
+              </KeyValueTableRow>
+            )}
+            <KeyValueTableRow>
+              {t('participationMet')}
+              {participationMet ? <Thumbs up={true} /> : <Thumbs up={false} />}
+            </KeyValueTableRow>
+            {isUpdateMarket && (
+              <KeyValueTableRow>
+                {t('participationLPMet')}
+                {participationLPMet ? (
+                  <Thumbs up={true} />
+                ) : (
+                  <Thumbs up={false} />
+                )}
+              </KeyValueTableRow>
+            )}
+            <KeyValueTableRow>
+              {t('tokenForProposal')}
+              {formatNumber(yesTokens, 2)}
+            </KeyValueTableRow>
+            {isUpdateMarket && (
+              <KeyValueTableRow>
+                {t('tokenLPForProposal')}
+                {formatNumber(yesEquityLikeShareWeight, 2)}
+              </KeyValueTableRow>
+            )}
+            <KeyValueTableRow>
+              {t('totalSupply')}
+              {formatNumber(totalSupply, 2)}
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              {t('tokensAgainstProposal')}
+              {formatNumber(noTokens, 2)}
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              {t('participationRequired')}
+              {formatNumberPercentage(requiredParticipation)}
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              {t('majorityRequired')}
+              {formatNumberPercentage(requiredMajorityPercentage)}
+            </KeyValueTableRow>
+            {!isUpdateMarket && (
+              <>
+                <KeyValueTableRow>
+                  {t('numberOfVotingParties')}
+                  {formatNumber(totalVotes, 0)}
+                </KeyValueTableRow>
+                <KeyValueTableRow>
+                  {t('totalTokensVotes')}
+                  {formatNumber(totalTokensVoted, 2)}
+                </KeyValueTableRow>
+                <KeyValueTableRow>
+                  {t('totalTokenVotedPercentage')}
+                  {formatNumberPercentage(totalTokensPercentage, 2)}
+                </KeyValueTableRow>
+                <KeyValueTableRow>
+                  {t('numberOfForVotes')}
+                  {formatNumber(yesVotes, 0)}
+                </KeyValueTableRow>
+                <KeyValueTableRow>
+                  {t('numberOfAgainstVotes')}
+                  {formatNumber(noVotes, 0)}
+                </KeyValueTableRow>
+                <KeyValueTableRow>
+                  {t('yesPercentage')}
+                  {formatNumberPercentage(yesPercentage, 2)}
+                </KeyValueTableRow>
+                <KeyValueTableRow noBorder={true}>
+                  {t('noPercentage')}
+                  {formatNumberPercentage(noPercentage, 2)}
+                </KeyValueTableRow>
+              </>
+            )}
+          </KeyValueTable>
+        </RoundedWrapper>
+      )}
+    </>
+  );
+};

apps/governance/src/routes/proposals/components/proposal-voting-status/index.tsx

@@ -0,0 +1 @@
+export * from './proposal-voting-status';

apps/governance/src/routes/proposals/components/proposal-voting-status/proposal-voting-status.spec.tsx

@@ -0,0 +1,153 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import {
+  lastWeek,
+  mockWalletContext,
+  networkParamsQueryMock,
+  nextWeek,
+  mockNetworkParams,
+} from '../../test-helpers/mocks';
+import { ProposalVotingStatus } from './proposal-voting-status';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { MockedResponse } from '@apollo/client/testing';
+import {
+  generateNoVotes,
+  generateProposal,
+  generateYesVotes,
+} from '../../test-helpers/generate-proposals';
+import { ProposalState } from '@vegaprotocol/types';
+import { BigNumber } from '../../../../lib/bignumber';
+import type { AppState } from '../../../../contexts/app-state/app-state-context';
+
+const mockTotalSupply = new BigNumber(100);
+// Note - giving a fixedTokenValue of 1 means a ratio of 1:1 votes to tokens, making sums easier :)
+const fixedTokenValue = 1000000000000000000;
+
+const mockAppState: AppState = {
+  totalAssociated: new BigNumber('50063005'),
+  decimals: 18,
+  totalSupply: mockTotalSupply,
+  vegaWalletManageOverlay: false,
+  transactionOverlay: false,
+  bannerMessage: '',
+  disconnectNotice: false,
+};
+
+jest.mock('../../../../contexts/app-state/app-state-context', () => ({
+  useAppState: () => ({
+    appState: mockAppState,
+  }),
+}));
+
+const renderComponent = (
+  proposal: ProposalQuery['proposal'],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mocks: MockedResponse<any>[] = [networkParamsQueryMock]
+) =>
+  render(
+    <Router>
+      <MockedProvider mocks={mocks}>
+        <VegaWalletContext.Provider value={mockWalletContext}>
+          <ProposalVotingStatus
+            proposal={proposal}
+            networkParams={mockNetworkParams}
+          />
+        </VegaWalletContext.Provider>
+      </MockedProvider>
+    </Router>
+  );
+
+describe('ProposalVotingStatus', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(0);
+  });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('Renders majority reached', () => {
+    const yesVotes = 100;
+    const noVotes = 0;
+
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_PASSED,
+        terms: {
+          closingDatetime: lastWeek.toString(),
+          enactmentDatetime: nextWeek.toString(),
+        },
+        votes: {
+          __typename: 'ProposalVotes',
+          yes: generateYesVotes(yesVotes, fixedTokenValue),
+          no: generateNoVotes(noVotes, fixedTokenValue),
+        },
+      })
+    );
+    expect(screen.getByTestId('majority-reached')).toBeInTheDocument();
+  });
+
+  it('Renders majority not reached', () => {
+    const yesVotes = 20;
+    const noVotes = 80;
+
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_PASSED,
+        terms: {
+          closingDatetime: lastWeek.toString(),
+          enactmentDatetime: nextWeek.toString(),
+        },
+        votes: {
+          __typename: 'ProposalVotes',
+          yes: generateYesVotes(yesVotes, fixedTokenValue),
+          no: generateNoVotes(noVotes, fixedTokenValue),
+        },
+      })
+    );
+    expect(screen.getByTestId('majority-not-reached')).toBeInTheDocument();
+  });
+
+  it('Renders participation reached', () => {
+    const yesVotes = 1000;
+    const noVotes = 0;
+
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_PASSED,
+        terms: {
+          closingDatetime: lastWeek.toString(),
+          enactmentDatetime: nextWeek.toString(),
+        },
+        votes: {
+          __typename: 'ProposalVotes',
+          yes: generateYesVotes(yesVotes, fixedTokenValue),
+          no: generateNoVotes(noVotes, fixedTokenValue),
+        },
+      })
+    );
+    expect(screen.getByTestId('participation-reached')).toBeInTheDocument();
+  });
+
+  it('Renders participation not reached', () => {
+    const yesVotes = 0;
+    const noVotes = 0;
+
+    renderComponent(
+      generateProposal({
+        terms: {
+          closingDatetime: lastWeek.toString(),
+          enactmentDatetime: nextWeek.toString(),
+        },
+        votes: {
+          __typename: 'ProposalVotes',
+          yes: generateYesVotes(yesVotes, fixedTokenValue),
+          no: generateNoVotes(noVotes, fixedTokenValue),
+        },
+      })
+    );
+    expect(screen.getByTestId('participation-not-reached')).toBeInTheDocument();
+  });
+});

apps/governance/src/routes/proposals/components/proposal-voting-status/proposal-voting-status.tsx

@@ -0,0 +1,174 @@
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import { useVoteInformation } from '../../hooks';
+import { BigNumber } from '../../../../lib/bignumber';
+import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+
+const statusClasses = (reached: boolean) =>
+  classNames('flex items-center gap-2 px-4 py-2 rounded-md', {
+    'bg-vega-green-700': reached,
+    'bg-vega-red-700': !reached,
+  });
+
+const MajorityStatus = ({
+  reached,
+  requiredMajority,
+}: {
+  reached: boolean;
+  requiredMajority: string | null | undefined;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={statusClasses(reached)}
+      data-testid="proposal-majority-status"
+    >
+      {reached ? <Icon name="tick" /> : <Icon name="cross" />}
+      {reached ? (
+        <div data-testid="majority-reached">
+          {requiredMajority ? (
+            <>
+              {new BigNumber(requiredMajority).times(100).toString()}%{' '}
+              {t('majorityVotedForProposal')}
+            </>
+          ) : (
+            t('requiredMajorityVotedForProposal')
+          )}
+        </div>
+      ) : (
+        <div data-testid="majority-not-reached">
+          {requiredMajority ? (
+            <>
+              {new BigNumber(requiredMajority).times(100).toString()}%{' '}
+              {t('majorityNotVotedForProposal')}
+            </>
+          ) : (
+            t('requiredMajorityNotVotedForProposal')
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ParticipationStatus = ({ reached }: { reached: boolean }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={statusClasses(reached)}>
+      {reached ? (
+        <>
+          <Icon name="tick" />
+          <div data-testid="participation-reached">
+            {t('minParticipationReached')}
+          </div>
+        </>
+      ) : (
+        <>
+          <Icon name="cross" />
+          <div data-testid="participation-not-reached">
+            {t('minParticipationNotReached')}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const ProposalVotingStatus = ({
+  proposal,
+  networkParams,
+}: {
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  networkParams: Partial<NetworkParamsResult>;
+}) => {
+  const { t } = useTranslation();
+  const { majorityMet, majorityLPMet, participationMet, participationLPMet } =
+    useVoteInformation({
+      proposal,
+    });
+
+  if (!proposal) {
+    return null;
+  }
+
+  const isUpdateMarket = proposal?.terms.change.__typename === 'UpdateMarket';
+
+  let requiredVotingMajority = null;
+  let requiredVotingMajorityLP = null;
+
+  if (networkParams) {
+    switch (proposal.terms.change.__typename) {
+      case 'NewMarket':
+        requiredVotingMajority =
+          networkParams.governance_proposal_market_requiredMajority;
+        break;
+      case 'UpdateMarket':
+        requiredVotingMajority =
+          networkParams.governance_proposal_updateMarket_requiredMajority;
+        requiredVotingMajorityLP =
+          networkParams.governance_proposal_updateMarket_requiredMajorityLP;
+        break;
+      case 'NewAsset':
+        requiredVotingMajority =
+          networkParams.governance_proposal_asset_requiredMajority;
+        break;
+      case 'UpdateAsset':
+        requiredVotingMajority =
+          networkParams.governance_proposal_updateAsset_requiredMajority;
+        break;
+      case 'UpdateNetworkParameter':
+        requiredVotingMajority =
+          networkParams.governance_proposal_updateNetParam_requiredMajority;
+        break;
+      case 'NewFreeform':
+        requiredVotingMajority =
+          networkParams.governance_proposal_freeform_requiredMajority;
+        break;
+    }
+  }
+
+  if (isUpdateMarket) {
+    return (
+      <div className="mb-6">
+        <p>{t('Token vote')}</p>
+        <div
+          className="grid grid-cols-2 gap-4 items-center"
+          data-testid="token-vote-statuses"
+        >
+          <MajorityStatus
+            reached={majorityMet}
+            requiredMajority={requiredVotingMajority}
+          />{' '}
+          <ParticipationStatus reached={participationMet} />
+        </div>
+
+        <p className="mt-4">{t('Liquidity provider vote')}</p>
+        <div
+          className="grid grid-cols-2 gap-4 items-center"
+          data-testid="lp-vote-statuses"
+        >
+          <MajorityStatus
+            reached={majorityLPMet}
+            requiredMajority={requiredVotingMajorityLP}
+          />{' '}
+          <ParticipationStatus reached={participationLPMet} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-4 items-center mb-6">
+      <MajorityStatus
+        reached={majorityMet}
+        requiredMajority={requiredVotingMajority}
+      />{' '}
+      <ParticipationStatus reached={participationMet} />
+    </div>
+  );
+};

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

@@ -34,6 +34,12 @@ jest.mock('../proposal-change-table', () => ({
 jest.mock('../proposal-json', () => ({
   ProposalJson: () => <div data-testid="proposal-json"></div>,
 }));
+jest.mock('../proposal-votes-table', () => ({
+  ProposalVotesTable: () => <div data-testid="proposal-votes-table"></div>,
+}));
+jest.mock('../vote-details', () => ({
+  VoteDetails: () => <div data-testid="proposal-vote-details"></div>,
+}));
 jest.mock('../list-asset', () => ({
   ListAsset: () => <div data-testid="proposal-list-asset"></div>,
 }));
@@ -98,6 +104,8 @@ it('renders each section', async () => {
   expect(await screen.findByTestId('proposal-header')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-change-table')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-json')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-votes-table')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-vote-details')).toBeInTheDocument();
   expect(screen.queryByTestId('proposal-list-asset')).not.toBeInTheDocument();
 });
 

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

@@ -5,8 +5,9 @@ import { ProposalHeader } from '../proposal-detail-header/proposal-header';
 import { ProposalDescription } from '../proposal-description';
 import { ProposalChangeTable } from '../proposal-change-table';
 import { ProposalJson } from '../proposal-json';
+import { ProposalVotesTable } from '../proposal-votes-table';
 import { ProposalAssetDetails } from '../proposal-asset-details';
-import { UserVote } from '../vote-details';
+import { VoteDetails } from '../vote-details';
 import { ListAsset } from '../list-asset';
 import Routes from '../../../routes';
 import { ProposalMarketData } from '../proposal-market-data';
@@ -21,6 +22,14 @@ import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
 import { useVoteSubmit } from '@vegaprotocol/proposals';
 import { useUserVote } from '../vote-details/use-user-vote';
 
+export enum ProposalType {
+  PROPOSAL_NEW_MARKET = 'PROPOSAL_NEW_MARKET',
+  PROPOSAL_UPDATE_MARKET = 'PROPOSAL_UPDATE_MARKET',
+  PROPOSAL_NEW_ASSET = 'PROPOSAL_NEW_ASSET',
+  PROPOSAL_UPDATE_ASSET = 'PROPOSAL_UPDATE_ASSET',
+  PROPOSAL_NETWORK_PARAMETER = 'PROPOSAL_NETWORK_PARAMETER',
+  PROPOSAL_FREEFORM = 'PROPOSAL_FREEFORM',
+}
 export interface ProposalProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
   networkParams: Partial<NetworkParamsResult>;
@@ -71,32 +80,39 @@ export const Proposal = ({
   }
 
   let minVoterBalance = null;
+  let proposalType = null;
 
   if (networkParams) {
     switch (proposal.terms.change.__typename) {
       case 'NewMarket':
         minVoterBalance =
           networkParams.governance_proposal_market_minVoterBalance;
+        proposalType = ProposalType.PROPOSAL_NEW_MARKET;
         break;
       case 'UpdateMarket':
         minVoterBalance =
           networkParams.governance_proposal_updateMarket_minVoterBalance;
+        proposalType = ProposalType.PROPOSAL_UPDATE_MARKET;
         break;
       case 'NewAsset':
         minVoterBalance =
           networkParams.governance_proposal_asset_minVoterBalance;
+        proposalType = ProposalType.PROPOSAL_NEW_ASSET;
         break;
       case 'UpdateAsset':
         minVoterBalance =
           networkParams.governance_proposal_updateAsset_minVoterBalance;
+        proposalType = ProposalType.PROPOSAL_UPDATE_ASSET;
         break;
       case 'UpdateNetworkParameter':
         minVoterBalance =
           networkParams.governance_proposal_updateNetParam_minVoterBalance;
+        proposalType = ProposalType.PROPOSAL_NETWORK_PARAMETER;
         break;
       case 'NewFreeform':
         minVoterBalance =
           networkParams.governance_proposal_freeform_minVoterBalance;
+        proposalType = ProposalType.PROPOSAL_FREEFORM;
         break;
     }
   }
@@ -124,81 +140,91 @@ export const Proposal = ({
       <ProposalHeader
         proposal={proposal}
         isListItem={false}
+        networkParams={networkParams}
         voteState={voteState}
       />
 
-      <div className="my-10">
-        <ProposalChangeTable proposal={proposal} />
-      </div>
-
-      {proposal.terms.change.__typename === 'NewAsset' &&
-      proposal.terms.change.source.__typename === 'ERC20' &&
-      proposal.id ? (
-        <ListAsset
-          assetId={proposal.id}
-          withdrawalThreshold={proposal.terms.change.source.withdrawThreshold}
-          lifetimeLimit={proposal.terms.change.source.lifetimeLimit}
-        />
-      ) : null}
-
-      <div className="mb-4">
-        <ProposalDescription description={proposal.rationale.description} />
-      </div>
-
-      {newMarketData && (
-        <div className="mb-4">
-          <ProposalMarketData
-            marketData={newMarketData}
-            parentMarketData={parentMarketData ? parentMarketData : undefined}
-          />
+      <div id="details">
+        <div className="my-10">
+          <ProposalChangeTable proposal={proposal} />
         </div>
-      )}
 
-      {proposal.terms.change.__typename === 'UpdateMarket' && (
-        <div className="mb-4">
-          <ProposalMarketChanges
-            originalProposal={
-              originalMarketProposalRestData?.data?.proposal?.terms?.newMarket
-                ?.changes || {}
-            }
-            latestEnactedProposal={
-              mostRecentlyEnactedAssociatedMarketProposal?.node?.proposal?.terms
-                ?.updateMarket?.changes || {}
-            }
-            updatedProposal={
-              restData?.data?.proposal?.terms?.updateMarket?.changes || {}
-            }
+        {proposal.terms.change.__typename === 'NewAsset' &&
+        proposal.terms.change.source.__typename === 'ERC20' &&
+        proposal.id ? (
+          <ListAsset
+            assetId={proposal.id}
+            withdrawalThreshold={proposal.terms.change.source.withdrawThreshold}
+            lifetimeLimit={proposal.terms.change.source.lifetimeLimit}
           />
-        </div>
-      )}
+        ) : null}
 
-      {(proposal.terms.change.__typename === 'NewAsset' ||
-        proposal.terms.change.__typename === 'UpdateAsset') &&
-        asset && (
+        <div className="mb-4">
+          <ProposalDescription description={proposal.rationale.description} />
+        </div>
+
+        {newMarketData && (
           <div className="mb-4">
-            <ProposalAssetDetails asset={asset} />
+            <ProposalMarketData
+              marketData={newMarketData}
+              parentMarketData={parentMarketData ? parentMarketData : undefined}
+            />
           </div>
         )}
 
-      <div className="mb-10">
-        <RoundedWrapper paddingBottom={true}>
-          <UserVote
-            proposal={proposal}
-            minVoterBalance={minVoterBalance}
-            spamProtectionMinTokens={
-              networkParams?.spam_protection_voting_min_tokens
-            }
-            submit={submit}
-            dialog={Dialog}
-            transaction={transaction}
-            voteState={voteState}
-            voteDatetime={voteDatetime}
-          />
-        </RoundedWrapper>
+        {proposal.terms.change.__typename === 'UpdateMarket' && (
+          <div className="mb-4">
+            <ProposalMarketChanges
+              originalProposal={
+                originalMarketProposalRestData?.data?.proposal?.terms?.newMarket
+                  ?.changes || {}
+              }
+              latestEnactedProposal={
+                mostRecentlyEnactedAssociatedMarketProposal?.node?.proposal
+                  ?.terms?.updateMarket?.changes || {}
+              }
+              updatedProposal={
+                restData?.data?.proposal?.terms?.updateMarket?.changes || {}
+              }
+            />
+          </div>
+        )}
+
+        {(proposal.terms.change.__typename === 'NewAsset' ||
+          proposal.terms.change.__typename === 'UpdateAsset') &&
+          asset && (
+            <div className="mb-4">
+              <ProposalAssetDetails asset={asset} />
+            </div>
+          )}
+
+        <div className="mb-6">
+          <ProposalJson proposal={restData?.data?.proposal} />
+        </div>
       </div>
 
-      <div className="mb-6">
-        <ProposalJson proposal={restData?.data?.proposal} />
+      <div id="voting">
+        <div className="mb-10">
+          <RoundedWrapper paddingBottom={true}>
+            <VoteDetails
+              proposal={proposal}
+              proposalType={proposalType}
+              minVoterBalance={minVoterBalance}
+              spamProtectionMinTokens={
+                networkParams?.spam_protection_voting_min_tokens
+              }
+              submit={submit}
+              dialog={Dialog}
+              transaction={transaction}
+              voteState={voteState}
+              voteDatetime={voteDatetime}
+            />
+          </RoundedWrapper>
+        </div>
+
+        <div className="mb-4">
+          <ProposalVotesTable proposal={proposal} proposalType={proposalType} />
+        </div>
       </div>
     </section>
   );

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

@@ -6,7 +6,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import { render, screen } from '@testing-library/react';
 import { format } from 'date-fns';
 import { ProposalRejectionReason, ProposalState } from '@vegaprotocol/types';
-import { generateProposal } from '../../test-helpers/generate-proposals';
+import {
+  generateNoVotes,
+  generateProposal,
+  generateYesVotes,
+} from '../../test-helpers/generate-proposals';
 import { ProposalsListItemDetails } from './proposals-list-item-details';
 import { DATE_FORMAT_DETAILED } from '../../../../lib/date-formats';
 import {
@@ -89,6 +93,84 @@ describe('Proposals list item details', () => {
     );
   });
 
+  it('Renders proposal state: Update market proposal - Currently expected to pass by LP vote', () => {
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_OPEN,
+        terms: {
+          change: {
+            __typename: 'UpdateMarket',
+          },
+        },
+        votes: {
+          yes: {
+            ...generateYesVotes(0),
+            totalEquityLikeShareWeight: '1000',
+          },
+          no: {
+            ...generateNoVotes(0),
+            totalEquityLikeShareWeight: '0',
+          },
+        },
+      })
+    );
+    expect(screen.getByTestId('vote-status')).toHaveTextContent(
+      'Currently expected to pass by LP vote'
+    );
+  });
+
+  it('Renders proposal state: Update market proposal - Currently expected to pass by token vote', () => {
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_OPEN,
+        terms: {
+          change: {
+            __typename: 'UpdateMarket',
+          },
+        },
+        votes: {
+          yes: {
+            ...generateYesVotes(1000, 1000),
+            totalEquityLikeShareWeight: '0',
+          },
+          no: {
+            ...generateNoVotes(0),
+            totalEquityLikeShareWeight: '0',
+          },
+        },
+      })
+    );
+    expect(screen.getByTestId('vote-status')).toHaveTextContent(
+      'Currently expected to pass by token vote'
+    );
+  });
+
+  it('Renders proposal state: Update market proposal - Currently expected to fail', () => {
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_OPEN,
+        terms: {
+          change: {
+            __typename: 'UpdateMarket',
+          },
+        },
+        votes: {
+          yes: {
+            ...generateYesVotes(0),
+            totalEquityLikeShareWeight: '0',
+          },
+          no: {
+            ...generateNoVotes(0),
+            totalEquityLikeShareWeight: '0',
+          },
+        },
+      })
+    );
+    expect(screen.getByTestId('vote-status')).toHaveTextContent(
+      'Currently expected to fail'
+    );
+  });
+
   it('Renders proposal state: Open - 5 minutes left to vote', () => {
     renderComponent(
       generateProposal({
@@ -131,6 +213,43 @@ describe('Proposals list item details', () => {
     );
   });
 
+  it('Renders proposal state: Open - majority not reached', () => {
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_OPEN,
+        terms: {
+          enactmentDatetime: nextWeek.toString(),
+        },
+        votes: {
+          no: generateNoVotes(1, 1000000000000000000),
+          yes: generateYesVotes(1, 1000000000000000000),
+        },
+      })
+    );
+    expect(screen.getByTestId('vote-status')).toHaveTextContent(
+      'Currently expected to fail'
+    );
+  });
+
+  it('Renders proposal state: Open - will pass', () => {
+    renderComponent(
+      generateProposal({
+        state: ProposalState.STATE_OPEN,
+        votes: {
+          __typename: 'ProposalVotes',
+          yes: generateYesVotes(3000, 1000000000000000000),
+          no: generateNoVotes(0),
+        },
+        terms: {
+          closingDatetime: nextWeek.toString(),
+        },
+      })
+    );
+    expect(screen.getByTestId('vote-status')).toHaveTextContent(
+      'Currently expected to pass'
+    );
+  });
+
   it('Renders proposal state: Rejected', () => {
     renderComponent(
       generateProposal({

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

@@ -11,6 +11,7 @@ import {
 import Routes from '../../../routes';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { useVoteInformation } from '../../hooks';
 
 export const ProposalsListItemDetails = ({
   proposal,
@@ -19,10 +20,18 @@ export const ProposalsListItemDetails = ({
 }) => {
   const { t } = useTranslation();
   const state = proposal?.state;
+  const { willPassByTokenVote, willPassByLPVote } = useVoteInformation({
+    proposal,
+  });
+  const updateMarketWillPass = willPassByTokenVote || willPassByLPVote;
+  const updateMarketVotePassMethod = willPassByTokenVote
+    ? t('byTokenVote')
+    : t('byLPVote');
   const nowToEnactmentInHours = differenceInHours(
     new Date(proposal?.terms.closingDatetime),
     new Date()
   );
+  const isUpdateMarket = proposal?.terms.change.__typename === 'UpdateMarket';
 
   let voteDetails: ReactNode;
   let voteStatus: ReactNode;
@@ -69,11 +78,31 @@ export const ProposalsListItemDetails = ({
     }
     case ProposalState.STATE_OPEN: {
       voteDetails = (
-        <span className={nowToEnactmentInHours < 6 ? 'text-vega-orange' : ''}>
+        <span className={nowToEnactmentInHours < 6 ? 'text-vega-pink' : ''}>
           {formatDistanceToNowStrict(new Date(proposal?.terms.closingDatetime))}{' '}
           {t('left to vote')}
         </span>
       );
+      voteStatus =
+        (isUpdateMarket &&
+          (updateMarketWillPass ? (
+            <>
+              {t('currentlySetTo')} {t('pass')} {updateMarketVotePassMethod}
+            </>
+          ) : (
+            <>
+              {t('currentlySetTo')} {t('fail')}
+            </>
+          ))) ||
+        (willPassByTokenVote ? (
+          <>
+            {t('currentlySetTo')} {t('pass')}
+          </>
+        ) : (
+          <>
+            {t('currentlySetTo')} {t('fail')}
+          </>
+        ));
       break;
     }
     case ProposalState.STATE_REJECTED: {

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

@@ -4,19 +4,28 @@ import { ProposalsListItemDetails } from './proposals-list-item-details';
 import { useUserVote } from '../vote-details/use-user-vote';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
 
 interface ProposalsListItemProps {
   proposal?: ProposalFieldsFragment | ProposalQuery['proposal'] | null;
+  networkParams: Partial<NetworkParamsResult> | null;
 }
 
-export const ProposalsListItem = ({ proposal }: ProposalsListItemProps) => {
+export const ProposalsListItem = ({
+  proposal,
+  networkParams,
+}: ProposalsListItemProps) => {
   const { voteState } = useUserVote(proposal?.id);
-  if (!proposal || !proposal.id) return null;
+  if (!proposal || !proposal.id || !networkParams) return null;
 
   return (
     <li id={proposal.id} data-testid="proposals-list-item">
       <RoundedWrapper paddingBottom={true} heightFull={true}>
-        <ProposalHeader proposal={proposal} voteState={voteState} />
+        <ProposalHeader
+          proposal={proposal}
+          networkParams={networkParams}
+          voteState={voteState}
+        />
         <ProposalsListItemDetails proposal={proposal} />
       </RoundedWrapper>
     </li>

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

@@ -8,6 +8,7 @@ import { ProtocolUpgradeProposalsListItem } from '../protocol-upgrade-proposals-
 import { ProposalsListFilter } from '../proposals-list-filter';
 import Routes from '../../../routes';
 import {
+  AsyncRenderer,
   Button,
   Toggle,
   VegaIcon,
@@ -19,6 +20,10 @@ import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 import { DocsLinks, ExternalLinks } from '@vegaprotocol/environment';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
 
 interface ProposalsListProps {
   proposals: Array<ProposalFieldsFragment | ProposalQuery['proposal']>;
@@ -70,6 +75,20 @@ export const ProposalsList = ({
   lastBlockHeight,
 }: ProposalsListProps) => {
   const { t } = useTranslation();
+  const {
+    params: networkParams,
+    loading: networkParamsLoading,
+    error: networkParamsError,
+  } = useNetworkParams([
+    NetworkParams.governance_proposal_market_requiredMajority,
+    NetworkParams.governance_proposal_updateMarket_requiredMajority,
+    NetworkParams.governance_proposal_updateMarket_requiredMajorityLP,
+    NetworkParams.governance_proposal_asset_requiredMajority,
+    NetworkParams.governance_proposal_updateAsset_requiredMajority,
+    NetworkParams.governance_proposal_updateNetParam_requiredMajority,
+    NetworkParams.governance_proposal_freeform_requiredMajority,
+  ]);
+
   const [filterString, setFilterString] = useState('');
   const [closedProposalsView, setClosedProposalsView] =
     useState<ClosedProposalsViewOptions>(
@@ -134,166 +153,181 @@ export const ProposalsList = ({
     p?.party?.id?.toString().includes(filterString);
 
   return (
-    <div data-testid="proposals-list">
-      <div className="grid xs:grid-cols-2 items-center">
-        <Heading
-          centerContent={false}
-          marginBottom={false}
-          title={t('pageTitleProposals')}
-        />
+    <AsyncRenderer
+      loading={networkParamsLoading}
+      error={networkParamsError}
+      data={networkParams}
+    >
+      <div data-testid="proposals-list">
+        <div className="grid xs:grid-cols-2 items-center">
+          <Heading
+            centerContent={false}
+            marginBottom={false}
+            title={t('pageTitleProposals')}
+          />
 
-        {DocsLinks && (
-          <div className="xs:justify-self-end" data-testid="new-proposal-link">
-            <ExternalLink href={DocsLinks.PROPOSALS_GUIDE}>
-              <Button variant="primary" size="sm">
-                <div className="flex items-center gap-1">
-                  {t('NewProposal')}
-                  <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />
-                </div>
-              </Button>
-            </ExternalLink>
-          </div>
+          {DocsLinks && (
+            <div
+              className="xs:justify-self-end"
+              data-testid="new-proposal-link"
+            >
+              <ExternalLink href={DocsLinks.PROPOSALS_GUIDE}>
+                <Button variant="primary" size="sm">
+                  <div className="flex items-center gap-1">
+                    {t('NewProposal')}
+                    <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />
+                  </div>
+                </Button>
+              </ExternalLink>
+            </div>
+          )}
+        </div>
+
+        <p className="mb-8">
+          {t(
+            `The Vega network is governed by the community. View active proposals, vote on them or propose changes to the network. Network upgrades are proposed and approved by validators.`
+          )}{' '}
+          <ExternalLink
+            data-testid="proposal-documentation-link"
+            href={ExternalLinks.GOVERNANCE_PAGE}
+            className="text-white"
+          >
+            {t(`Find out more about Vega governance`)}
+          </ExternalLink>
+        </p>
+
+        {proposals.length > 0 && (
+          <ProposalsListFilter
+            filterString={filterString}
+            setFilterString={(value) => {
+              setFilterString(value);
+              if (value.length > 0) {
+                // If the filter is engaged, ensure the user is viewing governance proposals,
+                // as network upgrades do not have IDs to filter by and will be excluded.
+                setClosedProposalsView(
+                  ClosedProposalsViewOptions.NetworkGovernance
+                );
+              }
+            }}
+          />
         )}
-      </div>
 
-      <p className="mb-8">
-        {t(
-          `The Vega network is governed by the community. View active proposals, vote on them or propose changes to the network. Network upgrades are proposed and approved by validators.`
-        )}{' '}
-        <ExternalLink
-          data-testid="proposal-documentation-link"
-          href={ExternalLinks.GOVERNANCE_PAGE}
-          className="text-white"
-        >
-          {t(`Find out more about Vega governance`)}
-        </ExternalLink>
-      </p>
+        <section className="-mx-4 p-4 mb-8 bg-vega-dark-100">
+          <SubHeading title={t('openProposals')} />
 
-      {proposals.length > 0 && (
-        <ProposalsListFilter
-          filterString={filterString}
-          setFilterString={(value) => {
-            setFilterString(value);
-            if (value.length > 0) {
-              // If the filter is engaged, ensure the user is viewing governance proposals,
-              // as network upgrades do not have IDs to filter by and will be excluded.
-              setClosedProposalsView(
-                ClosedProposalsViewOptions.NetworkGovernance
-              );
-            }
-          }}
-        />
-      )}
+          {sortedProposals.open.length > 0 ||
+          sortedProtocolUpgradeProposals.open.length > 0 ? (
+            <ul data-testid="open-proposals">
+              {filterString.length < 1 &&
+                sortedProtocolUpgradeProposals.open.map((proposal) => (
+                  <ProtocolUpgradeProposalsListItem
+                    key={proposal.upgradeBlockHeight}
+                    proposal={proposal}
+                  />
+                ))}
 
-      <section className="-mx-4 p-4 mb-8 bg-vega-dark-100">
-        <SubHeading title={t('openProposals')} />
-
-        {sortedProposals.open.length > 0 ||
-        sortedProtocolUpgradeProposals.open.length > 0 ? (
-          <ul data-testid="open-proposals">
-            {filterString.length < 1 &&
-              sortedProtocolUpgradeProposals.open.map((proposal) => (
-                <ProtocolUpgradeProposalsListItem
-                  key={proposal.upgradeBlockHeight}
+              {sortedProposals.open.filter(filterPredicate).map((proposal) => (
+                <ProposalsListItem
+                  key={proposal?.id}
                   proposal={proposal}
+                  networkParams={networkParams}
                 />
               ))}
+            </ul>
+          ) : (
+            <p className="mb-0" data-testid="no-open-proposals">
+              {t('noOpenProposals')}
+            </p>
+          )}
+        </section>
 
-            {sortedProposals.open.filter(filterPredicate).map((proposal) => (
-              <ProposalsListItem key={proposal?.id} proposal={proposal} />
-            ))}
-          </ul>
-        ) : (
-          <p className="mb-0" data-testid="no-open-proposals">
-            {t('noOpenProposals')}
-          </p>
-        )}
-      </section>
-
-      <section className="relative">
-        <SubHeading title={t('closedProposals')} />
-        {sortedProposals.closed.length > 0 ||
-        sortedProtocolUpgradeProposals.closed.length > 0 ? (
-          <>
-            {
-              // We need both the closed proposals and closed protocol upgrade
-              // proposals to be present for there to be a toggle. It also gets
-              // hidden if the user has filtered the list, as the upgrade proposals
-              // do not have the necessary fields for filtering.
-              sortedProposals.closed.length > 0 &&
-                sortedProtocolUpgradeProposals.closed.length > 0 &&
-                filterString.length < 1 && (
-                  <div
-                    className="grid w-full justify-end xl:-mt-12 pb-6"
-                    data-testid="toggle-closed-proposals"
-                  >
-                    <div className="w-[440px]">
-                      <Toggle
-                        name="closed-proposals-toggle"
-                        toggles={[
-                          {
-                            label: t(
-                              ClosedProposalsViewOptions.NetworkGovernance
-                            ),
-                            value: ClosedProposalsViewOptions.NetworkGovernance,
-                          },
-                          {
-                            label: t(
-                              ClosedProposalsViewOptions.NetworkUpgrades
-                            ),
-                            value: ClosedProposalsViewOptions.NetworkUpgrades,
-                          },
-                        ]}
-                        checkedValue={closedProposalsView}
-                        onChange={(e) =>
-                          setClosedProposalsView(
-                            e.target.value as ClosedProposalsViewOptions
-                          )
-                        }
-                      />
+        <section className="relative">
+          <SubHeading title={t('closedProposals')} />
+          {sortedProposals.closed.length > 0 ||
+          sortedProtocolUpgradeProposals.closed.length > 0 ? (
+            <>
+              {
+                // We need both the closed proposals and closed protocol upgrade
+                // proposals to be present for there to be a toggle. It also gets
+                // hidden if the user has filtered the list, as the upgrade proposals
+                // do not have the necessary fields for filtering.
+                sortedProposals.closed.length > 0 &&
+                  sortedProtocolUpgradeProposals.closed.length > 0 &&
+                  filterString.length < 1 && (
+                    <div
+                      className="grid w-full justify-end xl:-mt-12 pb-6"
+                      data-testid="toggle-closed-proposals"
+                    >
+                      <div className="w-[440px]">
+                        <Toggle
+                          name="closed-proposals-toggle"
+                          toggles={[
+                            {
+                              label: t(
+                                ClosedProposalsViewOptions.NetworkGovernance
+                              ),
+                              value:
+                                ClosedProposalsViewOptions.NetworkGovernance,
+                            },
+                            {
+                              label: t(
+                                ClosedProposalsViewOptions.NetworkUpgrades
+                              ),
+                              value: ClosedProposalsViewOptions.NetworkUpgrades,
+                            },
+                          ]}
+                          checkedValue={closedProposalsView}
+                          onChange={(e) =>
+                            setClosedProposalsView(
+                              e.target.value as ClosedProposalsViewOptions
+                            )
+                          }
+                        />
+                      </div>
                     </div>
-                  </div>
-                )
-            }
+                  )
+              }
 
-            <ul data-testid="closed-proposals">
-              {closedProposalsView ===
-                ClosedProposalsViewOptions.NetworkUpgrades && (
-                <div data-testid="closed-upgrade-proposals">
-                  {sortedProtocolUpgradeProposals.closed.map((proposal) => (
-                    <ProtocolUpgradeProposalsListItem
-                      key={proposal.upgradeBlockHeight}
-                      proposal={proposal}
-                    />
-                  ))}
-                </div>
-              )}
-
-              {closedProposalsView ===
-                ClosedProposalsViewOptions.NetworkGovernance && (
-                <div data-testid="closed-governance-proposals">
-                  {sortedProposals.closed
-                    .filter(filterPredicate)
-                    .map((proposal) => (
-                      <ProposalsListItem
-                        key={proposal?.id}
+              <ul data-testid="closed-proposals">
+                {closedProposalsView ===
+                  ClosedProposalsViewOptions.NetworkUpgrades && (
+                  <div data-testid="closed-upgrade-proposals">
+                    {sortedProtocolUpgradeProposals.closed.map((proposal) => (
+                      <ProtocolUpgradeProposalsListItem
+                        key={proposal.upgradeBlockHeight}
                         proposal={proposal}
                       />
                     ))}
-                </div>
-              )}
-            </ul>
-          </>
-        ) : (
-          <p className="mb-0" data-testid="no-closed-proposals">
-            {t('noClosedProposals')}
-          </p>
-        )}
-      </section>
+                  </div>
+                )}
 
-      <Link className="underline" to={Routes.PROPOSALS_REJECTED}>
-        {t('seeRejectedProposals')}
-      </Link>
-    </div>
+                {closedProposalsView ===
+                  ClosedProposalsViewOptions.NetworkGovernance && (
+                  <div data-testid="closed-governance-proposals">
+                    {sortedProposals.closed
+                      .filter(filterPredicate)
+                      .map((proposal) => (
+                        <ProposalsListItem
+                          key={proposal?.id}
+                          proposal={proposal}
+                          networkParams={networkParams}
+                        />
+                      ))}
+                  </div>
+                )}
+              </ul>
+            </>
+          ) : (
+            <p className="mb-0" data-testid="no-closed-proposals">
+              {t('noClosedProposals')}
+            </p>
+          )}
+        </section>
+
+        <Link className="underline" to={Routes.PROPOSALS_REJECTED}>
+          {t('seeRejectedProposals')}
+        </Link>
+      </div>
+    </AsyncRenderer>
   );
 };

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

@@ -1,10 +1,15 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { Heading } from '../../../../components/heading';
 import { ProposalsListItem } from '../proposals-list-item';
 import { ProposalsListFilter } from '../proposals-list-filter';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
 
 interface ProposalsListProps {
   proposals: Array<ProposalQuery['proposal'] | ProposalFieldsFragment>;
@@ -12,6 +17,19 @@ interface ProposalsListProps {
 
 export const RejectedProposalsList = ({ proposals }: ProposalsListProps) => {
   const { t } = useTranslation();
+  const {
+    params: networkParams,
+    loading: networkParamsLoading,
+    error: networkParamsError,
+  } = useNetworkParams([
+    NetworkParams.governance_proposal_market_requiredMajority,
+    NetworkParams.governance_proposal_updateMarket_requiredMajority,
+    NetworkParams.governance_proposal_updateMarket_requiredMajorityLP,
+    NetworkParams.governance_proposal_asset_requiredMajority,
+    NetworkParams.governance_proposal_updateAsset_requiredMajority,
+    NetworkParams.governance_proposal_updateNetParam_requiredMajority,
+    NetworkParams.governance_proposal_freeform_requiredMajority,
+  ]);
   const [filterString, setFilterString] = useState('');
 
   const filterPredicate = (
@@ -21,7 +39,11 @@ export const RejectedProposalsList = ({ proposals }: ProposalsListProps) => {
     p?.party?.id?.toString().includes(filterString);
 
   return (
-    <>
+    <AsyncRenderer
+      loading={networkParamsLoading}
+      error={networkParamsError}
+      data={networkParams}
+    >
       <Heading title={t('pageTitleRejectedProposals')} />
       <ProposalsListFilter
         filterString={filterString}
@@ -31,7 +53,11 @@ export const RejectedProposalsList = ({ proposals }: ProposalsListProps) => {
         {proposals.length > 0 ? (
           <ul data-testid="rejected-proposals">
             {proposals.filter(filterPredicate).map((proposal) => (
-              <ProposalsListItem key={proposal?.id} proposal={proposal} />
+              <ProposalsListItem
+                key={proposal?.id}
+                proposal={proposal}
+                networkParams={networkParams}
+              />
             ))}
           </ul>
         ) : (
@@ -40,6 +66,6 @@ export const RejectedProposalsList = ({ proposals }: ProposalsListProps) => {
           </p>
         )}
       </section>
-    </>
+    </AsyncRenderer>
   );
 };

apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.tsx

@@ -67,7 +67,7 @@ export const ProtocolUpgradeProposalsListItem = ({
         <Link
           to={`${Routes.PROTOCOL_UPGRADES}/${stripFullStops(
             proposal.vegaReleaseTag
-          )}/${proposal.upgradeBlockHeight}`}
+          )}`}
         >
           <Button data-testid="view-proposal-btn">{t('viewDetails')}</Button>
         </Link>

apps/governance/src/routes/proposals/components/vote-breakdown/index.ts

@@ -1 +0,0 @@
-export * from './vote-breakdown';

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.spec.tsx

@@ -1,348 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { MockedProvider } from '@apollo/client/testing';
-import { VegaWalletContext } from '@vegaprotocol/wallet';
-import {
-  lastWeek,
-  mockWalletContext,
-  networkParamsQueryMock,
-  nextWeek,
-} from '../../test-helpers/mocks';
-import { VoteBreakdown } from './vote-breakdown';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { MockedResponse } from '@apollo/client/testing';
-import {
-  generateNoVotes,
-  generateProposal,
-  generateYesVotes,
-} from '../../test-helpers/generate-proposals';
-import { ProposalState } from '@vegaprotocol/types';
-import { BigNumber } from '../../../../lib/bignumber';
-import type { AppState } from '../../../../contexts/app-state/app-state-context';
-
-const mockTotalSupply = new BigNumber(100);
-// Note - giving a fixedTokenValue of 1 means a ratio of 1:1 votes to tokens, making sums easier :)
-const fixedTokenValue = 1000000000000000000;
-
-const mockAppState: AppState = {
-  totalAssociated: new BigNumber('50063005'),
-  decimals: 18,
-  totalSupply: mockTotalSupply,
-  vegaWalletManageOverlay: false,
-  transactionOverlay: false,
-  bannerMessage: '',
-  disconnectNotice: false,
-};
-
-jest.mock('../../../../contexts/app-state/app-state-context', () => ({
-  useAppState: () => ({
-    appState: mockAppState,
-  }),
-}));
-
-const renderComponent = (
-  proposal: ProposalQuery['proposal'],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  mocks: MockedResponse<any>[] = [networkParamsQueryMock]
-) =>
-  render(
-    <Router>
-      <MockedProvider mocks={mocks}>
-        <VegaWalletContext.Provider value={mockWalletContext}>
-          <VoteBreakdown proposal={proposal} />
-        </VegaWalletContext.Provider>
-      </MockedProvider>
-    </Router>
-  );
-
-describe('VoteBreakdown', () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-    jest.setSystemTime(0);
-  });
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it('Renders majority reached', () => {
-    const yesVotes = 100;
-    const noVotes = 0;
-
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_PASSED,
-        terms: {
-          closingDatetime: lastWeek.toString(),
-          enactmentDatetime: nextWeek.toString(),
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: generateYesVotes(yesVotes, fixedTokenValue),
-          no: generateNoVotes(noVotes, fixedTokenValue),
-        },
-      })
-    );
-    expect(screen.getByTestId('token-majority-met')).toBeInTheDocument();
-  });
-
-  it('Renders majority not reached', () => {
-    const yesVotes = 20;
-    const noVotes = 80;
-
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_PASSED,
-        terms: {
-          closingDatetime: lastWeek.toString(),
-          enactmentDatetime: nextWeek.toString(),
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: generateYesVotes(yesVotes, fixedTokenValue),
-          no: generateNoVotes(noVotes, fixedTokenValue),
-        },
-      })
-    );
-    expect(screen.getByTestId('token-majority-not-met')).toBeInTheDocument();
-  });
-
-  it('Renders participation reached', () => {
-    const yesVotes = 1000;
-    const noVotes = 0;
-
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_PASSED,
-        terms: {
-          closingDatetime: lastWeek.toString(),
-          enactmentDatetime: nextWeek.toString(),
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: generateYesVotes(yesVotes, fixedTokenValue),
-          no: generateNoVotes(noVotes, fixedTokenValue),
-        },
-      })
-    );
-    expect(screen.getByTestId('token-participation-met')).toBeInTheDocument();
-  });
-
-  it('Renders participation not reached', () => {
-    const yesVotes = 0;
-    const noVotes = 0;
-
-    renderComponent(
-      generateProposal({
-        terms: {
-          closingDatetime: lastWeek.toString(),
-          enactmentDatetime: nextWeek.toString(),
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: generateYesVotes(yesVotes, fixedTokenValue),
-          no: generateNoVotes(noVotes, fixedTokenValue),
-        },
-      })
-    );
-    expect(
-      screen.getByTestId('token-participation-not-met')
-    ).toBeInTheDocument();
-  });
-
-  it('Renders proposal state: Update market proposal - Currently expected to pass by LP vote', () => {
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_OPEN,
-        terms: {
-          change: {
-            __typename: 'UpdateMarket',
-          },
-        },
-        votes: {
-          yes: {
-            ...generateYesVotes(0),
-            totalEquityLikeShareWeight: '1000',
-          },
-          no: {
-            ...generateNoVotes(0),
-            totalEquityLikeShareWeight: '0',
-          },
-        },
-      })
-    );
-    expect(screen.getByTestId('vote-status')).toHaveTextContent(
-      'Currently expected to pass by liquidity vote'
-    );
-  });
-
-  it('Renders proposal state: Update market proposal - Currently expected to pass by token vote', () => {
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_OPEN,
-        terms: {
-          change: {
-            __typename: 'UpdateMarket',
-          },
-        },
-        votes: {
-          yes: {
-            ...generateYesVotes(1000, fixedTokenValue),
-            totalEquityLikeShareWeight: '0',
-          },
-          no: {
-            ...generateNoVotes(0, fixedTokenValue),
-            totalEquityLikeShareWeight: '0',
-          },
-        },
-      })
-    );
-    expect(screen.getByTestId('vote-status')).toHaveTextContent(
-      'Currently expected to pass by token vote'
-    );
-  });
-
-  it('Renders proposal state: Update market proposal - Currently expected to fail', () => {
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_OPEN,
-        terms: {
-          change: {
-            __typename: 'UpdateMarket',
-          },
-        },
-        votes: {
-          yes: {
-            ...generateYesVotes(0),
-            totalEquityLikeShareWeight: '0',
-          },
-          no: {
-            ...generateNoVotes(0),
-            totalEquityLikeShareWeight: '0',
-          },
-        },
-      })
-    );
-    expect(screen.getByTestId('vote-status')).toHaveTextContent(
-      'Currently expected to fail'
-    );
-  });
-
-  it('Progress bar displays status - token majority', () => {
-    const yesVotes = 80;
-    const noVotes = 20;
-
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_PASSED,
-        terms: {
-          closingDatetime: lastWeek.toString(),
-          enactmentDatetime: nextWeek.toString(),
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: generateYesVotes(yesVotes, fixedTokenValue),
-          no: generateNoVotes(noVotes, fixedTokenValue),
-        },
-      })
-    );
-
-    const element = screen.getByTestId('token-majority-progress');
-    const style = window.getComputedStyle(element);
-
-    expect(style.width).toBe(`${yesVotes}%`);
-  });
-
-  it('Progress bar displays status - token participation', () => {
-    const yesVotes = 40;
-    const noVotes = 20;
-    const totalVotes = yesVotes + noVotes;
-    const totalSupplyValue = mockTotalSupply.toNumber();
-    const expectedProgress = (totalVotes / totalSupplyValue) * 100; // Here it should be 60%
-
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_PASSED,
-        terms: {
-          closingDatetime: lastWeek.toString(),
-          enactmentDatetime: nextWeek.toString(),
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: generateYesVotes(yesVotes, fixedTokenValue),
-          no: generateNoVotes(noVotes, fixedTokenValue),
-        },
-      })
-    );
-
-    const element = screen.getByTestId('token-participation-progress');
-    const style = window.getComputedStyle(element);
-
-    expect(style.width).toBe(`${expectedProgress}%`);
-  });
-
-  it('Progress bar displays status -  LP majority', () => {
-    const yesVotesLP = 800;
-    const noVotesLP = 200;
-    const expectedProgress = (yesVotesLP / (yesVotesLP + noVotesLP)) * 100; // 80%
-
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_PASSED,
-        terms: {
-          change: {
-            __typename: 'UpdateMarket',
-          },
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: {
-            ...generateYesVotes(0),
-            totalEquityLikeShareWeight: `${yesVotesLP}`,
-          },
-          no: {
-            ...generateNoVotes(0),
-            totalEquityLikeShareWeight: `${noVotesLP}`,
-          },
-        },
-      })
-    );
-
-    const element = screen.getByTestId('lp-majority-progress');
-    const style = window.getComputedStyle(element);
-    expect(style.width).toBe(`${expectedProgress}%`);
-  });
-
-  it('Progress bar displays status - LP participation', () => {
-    const yesVotesLP = 400;
-    const noVotesLP = 600;
-    const totalVotesLP = yesVotesLP + noVotesLP;
-    const totalLPSupply = 1000;
-    const expectedProgress = (totalVotesLP / totalLPSupply) * 100; // 100%
-
-    renderComponent(
-      generateProposal({
-        state: ProposalState.STATE_PASSED,
-        terms: {
-          change: {
-            __typename: 'UpdateMarket',
-          },
-        },
-        votes: {
-          __typename: 'ProposalVotes',
-          yes: {
-            ...generateYesVotes(0),
-            totalEquityLikeShareWeight: `${yesVotesLP}`,
-          },
-          no: {
-            ...generateNoVotes(0),
-            totalEquityLikeShareWeight: `${noVotesLP}`,
-          },
-        },
-      })
-    );
-
-    const element = screen.getByTestId('lp-participation-progress');
-    const style = window.getComputedStyle(element);
-    expect(style.width).toBe(`${expectedProgress}%`);
-  });
-});

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx

@@ -1,378 +0,0 @@
-import classNames from 'classnames';
-import BigNumber from 'bignumber.js';
-import { useTranslation } from 'react-i18next';
-import { useVoteInformation } from '../../hooks';
-import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { formatNumber, toBigNum } from '@vegaprotocol/utils';
-import { ProposalState } from '@vegaprotocol/types';
-import type { ReactNode } from 'react';
-import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-
-interface VoteBreakdownProps {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
-}
-
-interface VoteProgressProps {
-  percentageFor: BigNumber;
-  colourfulBg?: boolean;
-  testId?: string;
-  children?: ReactNode;
-}
-
-const VoteProgress = ({
-  percentageFor,
-  colourfulBg,
-  testId,
-  children,
-}: VoteProgressProps) => {
-  const containerClasses = classNames(
-    'relative h-10 rounded-md border border-vega-dark-300 overflow-hidden',
-    colourfulBg ? 'bg-vega-pink' : 'bg-vega-dark-400'
-  );
-
-  const progressClasses = classNames(
-    'absolute h-full top-0 left-0',
-    colourfulBg ? 'bg-vega-green' : 'bg-white'
-  );
-
-  const textClasses = classNames(
-    'absolute top-0 left-0 w-full h-full flex items-center justify-start px-3 text-black'
-  );
-
-  return (
-    <div className={containerClasses}>
-      <div
-        className={progressClasses}
-        style={{ width: `${percentageFor}%` }}
-        data-testid={testId}
-      ></div>
-      <div className={textClasses}>{children}</div>
-    </div>
-  );
-};
-
-interface StatusProps {
-  reached: boolean;
-  threshold: BigNumber;
-  text: string;
-  testId?: string;
-}
-
-const Status = ({ reached, threshold, text, testId }: StatusProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <div data-testid={testId}>
-      {reached ? (
-        <div className="flex items-center gap-2">
-          <Icon name="tick" size={4} />
-          <span>
-            {threshold.toString()}% {text} {t('met')}
-          </span>
-        </div>
-      ) : (
-        <div className="flex items-center gap-2">
-          <Icon name="cross" size={4} />
-          <span>
-            {threshold.toString()}% {text} {t('not met')}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
-  const {
-    totalTokensPercentage,
-    participationMet,
-    totalTokensVoted,
-    totalLPTokensPercentage,
-    noPercentage,
-    noLPPercentage,
-    yesPercentage,
-    yesLPPercentage,
-    yesTokens,
-    noTokens,
-    yesEquityLikeShareWeight,
-    noEquityLikeShareWeight,
-    totalEquityLikeShareWeight,
-    requiredMajorityPercentage,
-    requiredMajorityLPPercentage,
-    requiredParticipation,
-    requiredParticipationLP,
-    participationLPMet,
-    majorityMet,
-    majorityLPMet,
-    willPassByTokenVote,
-    willPassByLPVote,
-  } = useVoteInformation({ proposal });
-
-  const { t } = useTranslation();
-  const defaultDP = 2;
-  const isProposalOpen = proposal?.state === ProposalState.STATE_OPEN;
-  const isUpdateMarket = proposal?.terms?.change?.__typename === 'UpdateMarket';
-  const participationThresholdProgress = BigNumber.min(
-    totalTokensPercentage.dividedBy(requiredParticipation).multipliedBy(100),
-    new BigNumber(100)
-  );
-  const lpParticipationThresholdProgress =
-    requiredParticipationLP &&
-    BigNumber.min(
-      totalLPTokensPercentage
-        .dividedBy(requiredParticipationLP)
-        .multipliedBy(100),
-      new BigNumber(100)
-    );
-  const willPass = willPassByTokenVote || willPassByLPVote;
-  const updateMarketVotePassMethod = willPassByTokenVote
-    ? t('byTokenVote')
-    : t('byLiquidityVote');
-
-  const sectionWrapperClasses = classNames('grid sm:grid-cols-2 gap-6');
-  const headingClasses = classNames('mb-2 text-vega-dark-400');
-  const progressDetailsClasses = classNames(
-    'flex justify-between flex-wrap mt-2 text-sm'
-  );
-
-  return (
-    <div className="mb-6">
-      {isProposalOpen && (
-        <div
-          data-testid="vote-status"
-          className="flex items-center gap-1 mb-2 text-bold"
-        >
-          <span>
-            {willPass ? (
-              <Icon name="tick" size={5} className="text-vega-green" />
-            ) : (
-              <Icon name="cross" size={5} className="text-vega-pink" />
-            )}
-          </span>
-          <span>{t('currentlySetTo')} </span>
-          {willPass ? (
-            <span>
-              <span className="text-vega-green">{t('pass')}</span>
-              {isUpdateMarket && <span> {updateMarketVotePassMethod}</span>}
-            </span>
-          ) : (
-            <span className="text-vega-pink">{t('fail')}</span>
-          )}
-        </div>
-      )}
-
-      {isUpdateMarket && (
-        <div className="mb-4">
-          <h3 className={headingClasses}>{t('liquidityProviderVote')}</h3>
-          <div className={sectionWrapperClasses}>
-            <section data-testid="lp-majority-breakdown">
-              <VoteProgress
-                percentageFor={yesLPPercentage}
-                colourfulBg={true}
-                testId="lp-majority-progress"
-              >
-                <Status
-                  reached={majorityLPMet}
-                  threshold={requiredMajorityLPPercentage}
-                  text={t('majorityThreshold')}
-                  testId={
-                    majorityLPMet ? 'lp-majority-met' : 'lp-majority-not-met'
-                  }
-                />
-              </VoteProgress>
-
-              <div className={progressDetailsClasses}>
-                <div className="flex items-center gap-1">
-                  <span>{t('liquidityProviderVotesFor')}:</span>
-                  <Tooltip
-                    description={formatNumber(
-                      yesEquityLikeShareWeight,
-                      defaultDP
-                    )}
-                  >
-                    <button>
-                      {yesEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
-                    </button>
-                  </Tooltip>
-                  <span>
-                    (
-                    <Tooltip
-                      description={
-                        <span>{yesLPPercentage.toFixed(defaultDP)}%</span>
-                      }
-                    >
-                      <button>{yesLPPercentage.toFixed(0)}%</button>
-                    </Tooltip>
-                    )
-                  </span>
-                </div>
-
-                <div className="flex items-center gap-1">
-                  <span>{t('liquidityProviderVotesAgainst')}:</span>
-                  <Tooltip
-                    description={formatNumber(
-                      noEquityLikeShareWeight,
-                      defaultDP
-                    )}
-                  >
-                    <button>
-                      {noEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
-                    </button>
-                  </Tooltip>
-                  <span>
-                    (
-                    <Tooltip
-                      description={
-                        <span>{noLPPercentage.toFixed(defaultDP)}%</span>
-                      }
-                    >
-                      <button>{noLPPercentage.toFixed(0)}%</button>
-                    </Tooltip>
-                    )
-                  </span>
-                </div>
-              </div>
-            </section>
-
-            <section data-testid="lp-participation-breakdown">
-              <VoteProgress
-                percentageFor={
-                  lpParticipationThresholdProgress || new BigNumber(0)
-                }
-                testId="lp-participation-progress"
-              >
-                <Status
-                  reached={participationLPMet}
-                  threshold={requiredParticipationLP || new BigNumber(1)}
-                  text={t('participationThreshold')}
-                  testId={
-                    participationLPMet
-                      ? 'lp-participation-met'
-                      : 'lp-participation-not-met'
-                  }
-                />
-              </VoteProgress>
-
-              <div className="flex mt-2 text-sm">
-                <div className="flex items-center gap-1">
-                  <span>{t('totalLiquidityProviderTokensVoted')}:</span>
-                  <Tooltip
-                    description={formatNumber(
-                      totalEquityLikeShareWeight,
-                      defaultDP
-                    )}
-                  >
-                    <button>
-                      {totalEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
-                    </button>
-                  </Tooltip>
-                  <span>
-                    ({totalEquityLikeShareWeight.toFixed(defaultDP)}%)
-                  </span>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      )}
-
-      {isUpdateMarket && <h3 className={headingClasses}>{t('tokenVote')}</h3>}
-      <div className={sectionWrapperClasses}>
-        <section data-testid="token-majority-breakdown">
-          <VoteProgress
-            percentageFor={yesPercentage}
-            colourfulBg={true}
-            testId="token-majority-progress"
-          >
-            <Status
-              reached={majorityMet}
-              threshold={requiredMajorityPercentage}
-              text={t('majorityThreshold')}
-              testId={
-                majorityMet ? 'token-majority-met' : 'token-majority-not-met'
-              }
-            />
-          </VoteProgress>
-
-          <div className={progressDetailsClasses}>
-            <div className="flex items-center gap-1">
-              <span>{t('tokenVotesFor')}:</span>
-              <Tooltip description={formatNumber(yesTokens, defaultDP)}>
-                <button>
-                  {yesTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
-                </button>
-              </Tooltip>
-              <span>
-                (
-                <Tooltip
-                  description={<span>{yesPercentage.toFixed(defaultDP)}%</span>}
-                >
-                  <button>{yesPercentage.toFixed(0)}%</button>
-                </Tooltip>
-                )
-              </span>
-            </div>
-
-            <div className="flex items-center gap-1">
-              <span>{t('tokenVotesAgainst')}:</span>
-              <Tooltip description={formatNumber(noTokens, defaultDP)}>
-                <button>
-                  {noTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
-                </button>
-              </Tooltip>
-              <span>
-                (
-                <Tooltip
-                  description={<span>{noPercentage.toFixed(defaultDP)}%</span>}
-                >
-                  <button>{noPercentage.toFixed(0)}%</button>
-                </Tooltip>
-                )
-              </span>
-            </div>
-          </div>
-        </section>
-
-        <section data-testid="token-participation-breakdown">
-          <VoteProgress
-            percentageFor={participationThresholdProgress}
-            testId="token-participation-progress"
-          >
-            <Status
-              reached={participationMet}
-              threshold={requiredParticipation}
-              text={t('participationThreshold')}
-              testId={
-                participationMet
-                  ? 'token-participation-met'
-                  : 'token-participation-not-met'
-              }
-            />
-          </VoteProgress>
-
-          <div className="flex mt-2 text-sm">
-            <div className="flex items-center gap-1">
-              <span>{t('totalTokensVoted')}:</span>
-              <Tooltip description={formatNumber(totalTokensVoted, defaultDP)}>
-                <button>
-                  {totalTokensVoted.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
-                </button>
-              </Tooltip>
-              <span>({totalTokensPercentage.toFixed(defaultDP)}%)</span>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};

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

@@ -1 +1 @@
-export { UserVote } from './user-vote';
+export { VoteDetails } from './vote-details';

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

@@ -1,78 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Icon, ExternalLink } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { ProposalState } from '@vegaprotocol/types';
-import { ConnectToVega } from '../../../../components/connect-to-vega';
-import { VoteButtonsContainer } from './vote-buttons';
-import { SubHeading } from '../../../../components/heading';
-import type { VoteValue } from '@vegaprotocol/types';
-import type { DialogProps, VegaTxState } from '@vegaprotocol/wallet';
-import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { VoteState } from './use-user-vote';
-
-interface UserVoteProps {
-  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
-  minVoterBalance: string | null | undefined;
-  spamProtectionMinTokens: string | null | undefined;
-  transaction: VegaTxState | null;
-  submit: (voteValue: VoteValue, proposalId: string | null) => Promise<void>;
-  dialog: (props: DialogProps) => JSX.Element;
-  voteState: VoteState | null;
-  voteDatetime: Date | null;
-}
-
-export const UserVote = ({
-  proposal,
-  minVoterBalance,
-  spamProtectionMinTokens,
-  submit,
-  transaction,
-  dialog,
-  voteState,
-  voteDatetime,
-}: UserVoteProps) => {
-  const { pubKey } = useVegaWallet();
-
-  const { t } = useTranslation();
-
-  return (
-    <section data-testid="user-vote">
-      {proposal?.state === ProposalState.STATE_OPEN ? (
-        <SubHeading title={t('castYourVote')} />
-      ) : (
-        <SubHeading title={t('yourVote')} />
-      )}
-
-      {pubKey ? (
-        proposal && (
-          <VoteButtonsContainer
-            voteState={voteState}
-            voteDatetime={voteDatetime}
-            proposalState={proposal.state}
-            proposalId={proposal.id ?? ''}
-            minVoterBalance={minVoterBalance}
-            spamProtectionMinTokens={spamProtectionMinTokens}
-            className="flex"
-            submit={submit}
-            transaction={transaction}
-            dialog={dialog}
-          />
-        )
-      ) : (
-        <div className="pb-2">
-          <div className="mb-4">
-            <div className="flex items-center gap-2 mb-2">
-              <Icon name={'info-sign'} />
-              <div>{t('connectAVegaWalletToVote')}</div>
-            </div>
-            <ExternalLink href="https://blog.vega.xyz/how-to-vote-on-vega-2195d1e52ec5">
-              {t('findOutMoreAboutHowToVote')}
-            </ExternalLink>
-          </div>
-          <ConnectToVega />
-        </div>
-      )}
-    </section>
-  );
-};

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

@@ -190,15 +190,14 @@ export const VoteButtons = ({
         (voteState === VoteState.Yes || voteState === VoteState.No) && (
           <p data-testid="you-voted">
             <span>{t('youVoted')}:</span>{' '}
-            <span className="mx-1 text-white font-bold uppercase">
+            <span className="text-white font-bold">
               {t(`voteState_${voteState}`)}
             </span>{' '}
             {voteDatetime ? (
-              <span>on {format(voteDatetime, DATE_FORMAT_LONG)}. </span>
+              <span>{format(voteDatetime, DATE_FORMAT_LONG)}. </span>
             ) : null}
             {proposalVotable ? (
               <ButtonLink
-                className="text-white"
                 data-testid="change-vote-button"
                 onClick={() => {
                   setChangeVote(true);

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

@@ -0,0 +1,255 @@
+import { useTranslation } from 'react-i18next';
+import { formatDistanceToNow } from 'date-fns';
+import { RoundedWrapper, Icon, ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { ProposalState } from '@vegaprotocol/types';
+import { VoteProgress } from '@vegaprotocol/proposals';
+import { formatNumber } from '../../../../lib/format-number';
+import { ConnectToVega } from '../../../../components/connect-to-vega';
+import { useVoteInformation } from '../../hooks';
+import { CurrentProposalStatus } from '../current-proposal-status';
+import { VoteButtonsContainer } from './vote-buttons';
+import { SubHeading } from '../../../../components/heading';
+import { ProposalType } from '../proposal/proposal';
+import type { VoteValue } from '@vegaprotocol/types';
+import type { DialogProps, VegaTxState } from '@vegaprotocol/wallet';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { VoteState } from './use-user-vote';
+
+interface VoteDetailsProps {
+  proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  minVoterBalance: string | null | undefined;
+  spamProtectionMinTokens: string | null | undefined;
+  proposalType: ProposalType | null;
+  transaction: VegaTxState | null;
+  submit: (voteValue: VoteValue, proposalId: string | null) => Promise<void>;
+  dialog: (props: DialogProps) => JSX.Element;
+  voteState: VoteState | null;
+  voteDatetime: Date | null;
+}
+
+export const VoteDetails = ({
+  proposal,
+  minVoterBalance,
+  spamProtectionMinTokens,
+  proposalType,
+  submit,
+  transaction,
+  dialog,
+  voteState,
+  voteDatetime,
+}: VoteDetailsProps) => {
+  const { pubKey } = useVegaWallet();
+  const {
+    totalTokensPercentage,
+    participationMet,
+    totalTokensVoted,
+    totalLPTokensPercentage,
+    noPercentage,
+    noLPPercentage,
+    yesPercentage,
+    yesLPPercentage,
+    yesTokens,
+    noTokens,
+    requiredMajorityPercentage,
+    requiredMajorityLPPercentage,
+    requiredParticipation,
+    requiredParticipationLP,
+    participationLPMet,
+  } = useVoteInformation({ proposal });
+
+  const { t } = useTranslation();
+
+  const defaultDecimals = 2;
+  const daysLeft = t('daysLeft', {
+    daysLeft: formatDistanceToNow(new Date(proposal?.terms.closingDatetime)),
+  });
+
+  return (
+    <>
+      {proposalType === ProposalType.PROPOSAL_UPDATE_MARKET && (
+        <section>
+          <SubHeading title={t('liquidityVotes')} />
+          <p data-testid="liquidity-votes-status">
+            <span>
+              <CurrentProposalStatus proposal={proposal} />
+            </span>
+            {'. '}
+            {proposal?.state === ProposalState.STATE_OPEN ? daysLeft : null}
+          </p>
+          <table className="w-full mb-8">
+            <thead>
+              <tr>
+                <th className="text-vega-green w-[18%] text-left">
+                  {t('for')}
+                </th>
+                <th>
+                  <VoteProgress
+                    threshold={requiredMajorityLPPercentage}
+                    progress={yesLPPercentage}
+                  />
+                </th>
+                <th className="text-danger w-[18%] text-right">
+                  {t('against')}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td
+                  className="text-left"
+                  data-testid="vote-progress-indicator-percentage-for"
+                >
+                  {yesLPPercentage.toFixed(defaultDecimals)}%
+                </td>
+                <td className="text-center text-white">
+                  {t('majorityRequired')}{' '}
+                  {requiredMajorityLPPercentage.toFixed(defaultDecimals)}%
+                </td>
+                <td
+                  className="text-right"
+                  data-testid="vote-progress-indicator-percentage-against"
+                >
+                  {noLPPercentage.toFixed(defaultDecimals)}%
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p className="mb-6">
+            {t('participation')}
+            {': '}
+            {participationLPMet ? (
+              <span className="text-vega-green mx-4">{t('met')}</span>
+            ) : (
+              <span className="text-danger mx-4">{t('notMet')}</span>
+            )}{' '}
+            {formatNumber(totalLPTokensPercentage, defaultDecimals)}%
+            <span className="ml-4">
+              {requiredParticipationLP && (
+                <>
+                  ({formatNumber(requiredParticipationLP, defaultDecimals)}%{' '}
+                  {t('governanceRequired')})
+                </>
+              )}
+            </span>
+          </p>
+        </section>
+      )}
+      <section data-testid="votes-table">
+        <SubHeading title={t('tokenVotes')} />
+        <p data-testid="token-votes-status">
+          <span>
+            <CurrentProposalStatus proposal={proposal} />
+          </span>
+          {'. '}
+          {proposal?.state === ProposalState.STATE_OPEN ? daysLeft : null}
+        </p>
+        <table className="w-full mb-4">
+          <thead>
+            <tr>
+              <th className="text-vega-green w-[18%] text-left">{t('for')}</th>
+              <th>
+                <VoteProgress
+                  threshold={requiredMajorityPercentage}
+                  progress={yesPercentage}
+                />
+              </th>
+              <th className="text-danger w-[18%] text-right">{t('against')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td
+                className="text-left"
+                data-testid="vote-progress-indicator-percentage-for"
+              >
+                {yesPercentage.toFixed(defaultDecimals)}%
+              </td>
+              <td className="text-center text-white">
+                {t('majorityRequired')}{' '}
+                {requiredMajorityPercentage.toFixed(defaultDecimals)}%
+              </td>
+              <td
+                className="text-right"
+                data-testid="vote-progress-indicator-percentage-against"
+              >
+                {noPercentage.toFixed(defaultDecimals)}%
+              </td>
+            </tr>
+            <tr>
+              <td data-testid="vote-progress-indicator-tokens-for">
+                {' '}
+                {formatNumber(yesTokens, defaultDecimals)}{' '}
+              </td>
+              <td></td>
+              <td
+                data-testid="vote-progress-indicator-tokens-against"
+                className="text-right"
+              >
+                {formatNumber(noTokens, defaultDecimals)}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p className="mb-6">
+          {t('participation')}
+          {': '}
+          {participationMet ? (
+            <span className="text-vega-green mx-4">{t('met')}</span>
+          ) : (
+            <span className="text-danger mx-4">{t('notMet')}</span>
+          )}{' '}
+          {formatNumber(totalTokensVoted, defaultDecimals)}{' '}
+          {formatNumber(totalTokensPercentage, defaultDecimals)}%
+          <span className="ml-4">
+            ({formatNumber(requiredParticipation, defaultDecimals)}%{' '}
+            {t('governanceRequired')})
+          </span>
+        </p>
+        {proposalType === ProposalType.PROPOSAL_UPDATE_MARKET && (
+          <p>{t('votingThresholdInfo')}</p>
+        )}
+
+        <section className="mt-10">
+          {proposal?.state === ProposalState.STATE_OPEN ? (
+            <SubHeading title={t('castYourVote')} />
+          ) : (
+            <SubHeading title={t('yourVote')} />
+          )}
+
+          {pubKey ? (
+            proposal && (
+              <VoteButtonsContainer
+                voteState={voteState}
+                voteDatetime={voteDatetime}
+                proposalState={proposal.state}
+                proposalId={proposal.id ?? ''}
+                minVoterBalance={minVoterBalance}
+                spamProtectionMinTokens={spamProtectionMinTokens}
+                className="flex"
+                submit={submit}
+                transaction={transaction}
+                dialog={dialog}
+              />
+            )
+          ) : (
+            <RoundedWrapper paddingBottom={true}>
+              <div className="mb-4">
+                <div className="flex items-center gap-2 mb-2">
+                  <Icon name={'info-sign'} />
+                  <div>{t('connectAVegaWalletToVote')}</div>
+                </div>
+                <ExternalLink href="https://blog.vega.xyz/how-to-vote-on-vega-2195d1e52ec5">
+                  {t('findOutMoreAboutHowToVote')}
+                </ExternalLink>
+              </div>
+              <ConnectToVega />
+            </RoundedWrapper>
+          )}
+        </section>
+      </section>
+    </>
+  );
+};

apps/governance/src/routes/router-config.tsx

@@ -279,7 +279,7 @@ const routerConfig = [
     ],
   },
   {
-    path: `${Routes.PROTOCOL_UPGRADES}/:proposalReleaseTag/:proposalBlockHeight`,
+    path: `${Routes.PROTOCOL_UPGRADES}/:proposalReleaseTag`,
     element: <LazyProtocolUpgradeProposal />,
   },
   {

apps/trading-e2e/src/integration/order-book.cy.ts

@@ -0,0 +1,117 @@
+const orderbookTab = 'Orderbook';
+const orderbookTable = 'tab-orderbook';
+const askPrice = 'price-9894185';
+const bidPrice = 'price-9889001';
+const askVolume = 'ask-vol-9894185';
+const bidVolume = 'bid-vol-9889001';
+const askCumulative = 'cumulative-vol-9894185';
+const bidCumulative = 'cumulative-vol-9889001';
+const midPrice = 'last-traded-4612690000';
+const priceResolution = 'resolution';
+const dealTicketPrice = 'order-price';
+const dealTicketSize = 'order-size';
+const resPrice = 'price-990';
+
+describe('order book', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.setOnBoardingViewed();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/#/markets/market-0');
+    cy.wait('@Markets');
+  });
+
+  beforeEach(() => {
+    cy.mockTradingPage();
+  });
+
+  it('show order book', () => {
+    // 6003-ORDB-001
+    // 6003-ORDB-002
+    cy.getByTestId(orderbookTab).click();
+    cy.getByTestId(orderbookTable).should('be.visible');
+    cy.getByTestId(orderbookTable).should('not.be.empty');
+  });
+
+  it('show orders prices', () => {
+    // 6003-ORDB-003
+    cy.getByTestId(askPrice).should('have.text', '98.94185');
+    cy.getByTestId(bidPrice).should('have.text', '98.89001');
+  });
+
+  it('show prices volumes', () => {
+    // 6003-ORDB-004
+    cy.getByTestId(askVolume).should('have.text', '1');
+    cy.getByTestId(bidVolume).should('have.text', '1');
+  });
+
+  it('show prices cumulative volumes', () => {
+    // 6003-ORDB-005
+    cy.getByTestId(askCumulative).should('have.text', '38');
+    cy.getByTestId(bidCumulative).should('have.text', '7');
+  });
+
+  it('show mid price', () => {
+    // 6003-ORDB-006
+    cy.getByTestId(midPrice).should('have.text', '46,126.90');
+  });
+
+  it('sort prices descending', () => {
+    // 6003-ORDB-007
+    const prices: number[] = [];
+    cy.getByTestId(orderbookTable).within(() => {
+      cy.get('[data-testid*=price]')
+        .each(($el) => {
+          prices.push(Number($el.text()));
+        })
+        .then(() => {
+          expect(prices).to.deep.equal(prices.sort((a, b) => b - a));
+        });
+    });
+  });
+
+  it('copy price to deal ticket form', () => {
+    // 6003-ORDB-009
+    cy.getByTestId(askPrice).click();
+    cy.getByTestId(dealTicketPrice).should('have.value', '98.94185');
+  });
+
+  it('copy size to deal ticket form', () => {
+    // 6003-ORDB-009
+    cy.getByTestId(bidCumulative).click();
+    cy.getByTestId(dealTicketSize).should('have.value', '7');
+  });
+
+  it('copy size to deal ticket form', () => {
+    // 6003-ORDB-009
+    cy.getByTestId(bidVolume).click();
+    cy.getByTestId(dealTicketSize).should('have.value', '1');
+  });
+
+  it('change price resolution', () => {
+    // 6003-ORDB-008
+    const resolutions = [
+      '0.00000',
+      '0.0000',
+      '0.000',
+      '0.00',
+      '0.0',
+      '0',
+      '10',
+      '100',
+      '1,000',
+      '10,000',
+    ];
+    cy.getByTestId(priceResolution).click();
+    cy.get('[role="menu"]')
+      .find('[role="menuitem"]')
+      .each(($el, index) => {
+        expect($el.text()).to.equal(resolutions[index]);
+      });
+
+    cy.get('[role="menuitem"]').eq(4).click();
+    cy.getByTestId(resPrice).should('have.text', '99.0');
+    cy.getByTestId(askPrice).should('not.exist');
+    cy.getByTestId(bidPrice).should('not.exist');
+  });
+});

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

@@ -24,9 +24,6 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
 
   beforeEach(() => {
     cy.mockTradingPage();
-    cy.getByTestId('deal-ticket-fee-margin-required').within(() => {
-      cy.get('button').click();
-    });
   });
 
   describe('limit order', () => {

apps/trading/.env.mainnet

@@ -16,12 +16,12 @@ NX_VEGA_CONSOLE_URL=https://console.vega.xyz
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-mainnet/codfcglpplgmmlokgilfkpcjnmkbfiel
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-mainnet
 # TAG name of the current app version - TODO: bump to the latest upon release
-NX_APP_VERSION=v0.21.0-core-0.72.14
+NX_APP_VERSION=v0.20.21-core-0.71.6
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
-NX_STOP_ORDERS=true
-NX_ICEBERG_ORDERS=true
+NX_SUCCESSOR_MARKETS=false
+NX_STOP_ORDERS=false
+# NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false
 

apps/trading/.env.mainnet-mirror

@@ -19,9 +19,9 @@ NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-ma
 NX_APP_VERSION=v0.20.19-core-0.71.6
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
-NX_STOP_ORDERS=true
-NX_ICEBERG_ORDERS=true
+NX_SUCCESSOR_MARKETS=false
+NX_STOP_ORDERS=false
+# NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false
 

apps/trading/.env.stagnet1

@@ -19,6 +19,6 @@ NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fa
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-NX_ICEBERG_ORDERS=true
+# NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true

apps/trading/.env.validators-testnet

@@ -19,9 +19,9 @@ NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fa
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
-NX_STOP_ORDERS=true
-NX_ICEBERG_ORDERS=true
+NX_SUCCESSOR_MARKETS=false
+NX_STOP_ORDERS=false
+# NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false
 

apps/trading/client-pages/markets/markets-page.tsx

@@ -1,49 +1,27 @@
 import React, { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import {
-  LocalStoragePersistTabs as Tabs,
-  Tab,
-  TradingAnchorButton,
-} from '@vegaprotocol/ui-toolkit';
+import { LocalStoragePersistTabs as Tabs, Tab } from '@vegaprotocol/ui-toolkit';
 import { Markets } from './markets';
 import { Proposed } from './proposed';
 import { usePageTitleStore } from '../../stores';
 import { Closed } from './closed';
-import {
-  DApp,
-  TOKEN_NEW_MARKET_PROPOSAL,
-  useLinks,
-} from '@vegaprotocol/environment';
 
 export const MarketsPage = () => {
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
-
-  const tokenLink = useLinks(DApp.Token);
-  const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
-
   useEffect(() => {
     updateTitle(titlefy(['Markets']));
   }, [updateTitle]);
-
   return (
     <div className="h-full pt-0.5 pb-3 px-1.5">
-      <div className="h-full my-1 border rounded-sm border-default">
+      <div className="h-full my-1 border border-default rounded-sm">
         <Tabs storageKey="console-markets">
           <Tab id="open-markets" name={t('Open markets')}>
             <Markets />
           </Tab>
-          <Tab
-            id="proposed-markets"
-            name={t('Proposed markets')}
-            menu={
-              <TradingAnchorButton size="extra-small" href={externalLink}>
-                {t('Propose a new market')}
-              </TradingAnchorButton>
-            }
-          >
+          <Tab id="proposed-markets" name={t('Proposed markets')}>
             <Proposed />
           </Tab>
           <Tab id="closed-markets" name={t('Closed markets')}>

apps/trading/client-pages/markets/proposed.tsx

@@ -1,6 +1,24 @@
+import { t } from '@vegaprotocol/i18n';
+import {
+  DApp,
+  TOKEN_NEW_MARKET_PROPOSAL,
+  useLinks,
+} from '@vegaprotocol/environment';
 import { ProposalsList } from '@vegaprotocol/proposals';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { SuccessorMarketRenderer } from './successor-market-cell';
 
 export const Proposed = () => {
-  return <ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />;
+  const tokenLink = useLinks(DApp.Token);
+  const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
+  return (
+    <>
+      <div className="h-[400px]">
+        <ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />
+      </div>
+      <ExternalLink className="py-4 px-[11px] text-sm" href={externalLink}>
+        {t('Propose a new market')}
+      </ExternalLink>
+    </>
+  );
 };

apps/trading/client-pages/portfolio/account-history-container.tsx

@@ -4,7 +4,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import compact from 'lodash/compact';
 import uniqBy from 'lodash/uniqBy';
 import type { ChangeEvent } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { AccountHistoryQuery } from './__generated__/AccountHistory';
 import { useAccountHistoryQuery } from './__generated__/AccountHistory';
 import * as Schema from '@vegaprotocol/types';
@@ -12,13 +12,12 @@ import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 import { useAssetsDataProvider } from '@vegaprotocol/assets';
 import {
   AsyncRenderer,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   Splash,
   Toggle,
-  TradingButton,
-  TradingDropdown,
-  TradingDropdownContent,
-  TradingDropdownItem,
-  TradingDropdownTrigger,
 } from '@vegaprotocol/ui-toolkit';
 import { AccountTypeMapping } from '@vegaprotocol/types';
 import { PriceChart } from 'pennant';
@@ -151,7 +150,6 @@ const AccountHistoryManager = ({
         )
       : null;
   }, [accounts, marketFilterCb]);
-
   const resolveMarket = useCallback(
     (m: Market) => {
       setMarket(m);
@@ -176,114 +174,111 @@ const AccountHistoryManager = ({
     }),
     [pubKey, asset, accountType, range, market?.id]
   );
-
   const { data } = useAccountHistoryQuery({
     variables,
     skip: !asset || !pubKey,
   });
 
+  const accountTypeMenu = useMemo(() => {
+    return (
+      <DropdownMenu
+        trigger={
+          <DropdownMenuTrigger>
+            {accountType
+              ? `${
+                  AccountTypeMapping[
+                    accountType as keyof typeof Schema.AccountType
+                  ]
+                } Account`
+              : t('Select account type')}
+          </DropdownMenuTrigger>
+        }
+      >
+        <DropdownMenuContent>
+          {[
+            Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+            Schema.AccountType.ACCOUNT_TYPE_BOND,
+            Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+          ].map((type) => (
+            <DropdownMenuItem
+              key={type}
+              onClick={() => setAccountType(type as Schema.AccountType)}
+            >
+              {AccountTypeMapping[type as keyof typeof Schema.AccountType]}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }, [accountType]);
+  const assetsMenu = useMemo(() => {
+    return (
+      <DropdownMenu
+        trigger={
+          <DropdownMenuTrigger>
+            {asset ? asset.symbol : t('Select asset')}
+          </DropdownMenuTrigger>
+        }
+      >
+        <DropdownMenuContent>
+          {assets.map((a) => (
+            <DropdownMenuItem key={a.id} onClick={() => setAssetId(a.id)}>
+              {a.symbol}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }, [asset, assets, setAssetId]);
+  const marketsMenu = useMemo(() => {
+    return accountType === Schema.AccountType.ACCOUNT_TYPE_MARGIN &&
+      markets?.length ? (
+      <DropdownMenu
+        trigger={
+          <DropdownMenuTrigger>
+            {market
+              ? market.tradableInstrument.instrument.code
+              : t('Select market')}
+          </DropdownMenuTrigger>
+        }
+      >
+        <DropdownMenuContent>
+          {market && (
+            <DropdownMenuItem key="0" onClick={() => setMarket(null)}>
+              {t('All markets')}
+            </DropdownMenuItem>
+          )}
+          {markets?.map((m) => (
+            <DropdownMenuItem key={m.id} onClick={() => resolveMarket(m)}>
+              {m.tradableInstrument.instrument.code}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ) : null;
+  }, [markets, market, accountType, resolveMarket]);
+
+  useEffect(() => {
+    if (
+      accountType !== Schema.AccountType.ACCOUNT_TYPE_MARGIN ||
+      market?.tradableInstrument.instrument.product.settlementAsset.id !==
+        asset?.id
+    ) {
+      setMarket(null);
+    }
+  }, [accountType, asset?.id, market]);
+
   return (
-    <div className="flex flex-col h-full gap-2">
-      <div className="flex flex-wrap justify-between px-1 pt-2 gap-2">
-        <div className="flex items-center gap-1 shrink-0">
-          <TradingDropdown
-            trigger={
-              <TradingDropdownTrigger>
-                <TradingButton size="small">
-                  {accountType
-                    ? `${
-                        AccountTypeMapping[
-                          accountType as keyof typeof Schema.AccountType
-                        ]
-                      } Account`
-                    : t('Select account type')}
-                </TradingButton>
-              </TradingDropdownTrigger>
-            }
-          >
-            <TradingDropdownContent>
-              {[
-                Schema.AccountType.ACCOUNT_TYPE_GENERAL,
-                Schema.AccountType.ACCOUNT_TYPE_BOND,
-                Schema.AccountType.ACCOUNT_TYPE_MARGIN,
-              ].map((type) => (
-                <TradingDropdownItem
-                  key={type}
-                  onClick={() => {
-                    setAccountType(type as Schema.AccountType);
-
-                    // if not a margin account clear any market selection
-                    if (type !== Schema.AccountType.ACCOUNT_TYPE_MARGIN) {
-                      setMarket(null);
-                    }
-                  }}
-                >
-                  {AccountTypeMapping[type as keyof typeof Schema.AccountType]}
-                </TradingDropdownItem>
-              ))}
-            </TradingDropdownContent>
-          </TradingDropdown>
-
-          <TradingDropdown
-            trigger={
-              <TradingDropdownTrigger>
-                <TradingButton size="small">
-                  {asset ? asset.symbol : t('Select asset')}
-                </TradingButton>
-              </TradingDropdownTrigger>
-            }
-          >
-            <TradingDropdownContent>
-              {assets.map((a) => (
-                <TradingDropdownItem
-                  key={a.id}
-                  onClick={() => {
-                    setAssetId(a.id);
-
-                    // if the selected asset is different to the selected market clear the market
-                    if (
-                      a.id !==
-                      market?.tradableInstrument.instrument.product
-                        .settlementAsset.id
-                    ) {
-                      setMarket(null);
-                    }
-                  }}
-                >
-                  {a.symbol}
-                </TradingDropdownItem>
-              ))}
-            </TradingDropdownContent>
-          </TradingDropdown>
-          <TradingDropdown
-            trigger={
-              <TradingDropdownTrigger>
-                <TradingButton size="small">
-                  {market
-                    ? market.tradableInstrument.instrument.code
-                    : t('Select market')}
-                </TradingButton>
-              </TradingDropdownTrigger>
-            }
-          >
-            <TradingDropdownContent>
-              {market && (
-                <TradingDropdownItem key="0" onClick={() => setMarket(null)}>
-                  {t('All markets')}
-                </TradingDropdownItem>
-              )}
-              {markets?.map((m) => (
-                <TradingDropdownItem
-                  key={m.id}
-                  onClick={() => resolveMarket(m)}
-                >
-                  {m.tradableInstrument.instrument.code}
-                </TradingDropdownItem>
-              ))}
-            </TradingDropdownContent>
-          </TradingDropdown>
+    <div className="h-full w-full flex flex-col gap-8">
+      <div className="w-full flex flex-col-reverse lg:flex-row items-start lg:items-center justify-between gap-4 px-2">
+        <div className="flex items-center gap-4 shrink-0">
+          <>
+            {accountTypeMenu}
+            {assetsMenu}
+            {marketsMenu}
+          </>
         </div>
-        <div className="justify-items-end">
+        <div className="pt-1 justify-items-end">
           <Toggle
             id="account-history-date-range"
             name="account-history-date-range"
@@ -292,19 +287,16 @@ const AccountHistoryManager = ({
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               setRange(e.target.value as keyof typeof DateRange)
             }
-            size="sm"
           />
         </div>
       </div>
-      <div className="flex-1">
+      <div className="h-5/6 px-4">
         {asset && (
-          <div className="h-full">
-            <AccountHistoryChart
-              data={data}
-              accountType={accountType}
-              asset={asset}
-            />
-          </div>
+          <AccountHistoryChart
+            data={data}
+            accountType={accountType}
+            asset={asset}
+          />
         )}
       </div>
     </div>

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

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

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

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

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

@@ -1,12 +1,13 @@
 import { t } from '@vegaprotocol/i18n';
 import {
-  TradingDropdown,
-  TradingDropdownCheckboxItem,
-  TradingDropdownContent,
-  TradingDropdownItemIndicator,
-  TradingDropdownTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuTrigger,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import { MarketSelectorButton } from './market-selector-button';
 
 type Assets = Array<{ id: string; symbol: string }>;
 
@@ -24,19 +25,17 @@ export const AssetDropdown = ({
   }
 
   return (
-    <TradingDropdown
+    <DropdownMenu
       trigger={
-        <TradingDropdownTrigger data-testid="asset-trigger">
-          <MarketSelectorButton>
-            {triggerText({ assets, checkedAssets })}
-          </MarketSelectorButton>
-        </TradingDropdownTrigger>
+        <DropdownMenuTrigger data-testid="asset-trigger">
+          <TriggerText assets={assets} checkedAssets={checkedAssets} />
+        </DropdownMenuTrigger>
       }
     >
-      <TradingDropdownContent>
+      <DropdownMenuContent>
         {assets?.map((a) => {
           return (
-            <TradingDropdownCheckboxItem
+            <DropdownMenuCheckboxItem
               key={a.id}
               checked={checkedAssets.includes(a.id)}
               onCheckedChange={(checked) => {
@@ -47,16 +46,16 @@ export const AssetDropdown = ({
               data-testid={`asset-id-${a.id}`}
             >
               {a.symbol}
-              <TradingDropdownItemIndicator />
-            </TradingDropdownCheckboxItem>
+              <DropdownMenuItemIndicator />
+            </DropdownMenuCheckboxItem>
           );
         })}
-      </TradingDropdownContent>
-    </TradingDropdown>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };
 
-const triggerText = ({
+const TriggerText = ({
   assets,
   checkedAssets,
 }: {
@@ -73,5 +72,9 @@ const triggerText = ({
     text = t(`${checkedAssets.length} Assets`);
   }
 
-  return text;
+  return (
+    <span className="flex justify-between items-center">
+      {text} <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+    </span>
+  );
 };

apps/trading/components/market-selector/index.ts

@@ -1,3 +1,2 @@
 export * from './market-selector';
 export * from './market-selector-item';
-export * from './market-selector-button';

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

@@ -1,23 +0,0 @@
-import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-import type { ButtonHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-export const MarketSelectorButton = forwardRef<
-  HTMLButtonElement,
-  ButtonHTMLAttributes<HTMLButtonElement>
->((props, ref) => (
-  <button
-    {...props}
-    className={classNames(
-      'flex items-center justify-between px-2 border rounded gap-1',
-      'border-vega-clight-600 dark:border-vega-cdark-600 bg-vega-clight-700 dark:bg-vega-cdark-700',
-      'text-secondary data-[state=open]:text-vega-clight-50 dark:data-[state=open]:text-vega-cdark-50'
-    )}
-    ref={ref}
-  >
-    {props.children}
-    <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
-  </button>
-));
-MarketSelectorButton.displayName = 'MarketSelectorButton';

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

@@ -31,7 +31,7 @@ export const MarketSelectorItem = ({
     <div style={style} role="row">
       <Link
         to={`/markets/${market.id}`}
-        className={classNames('h-full flex items-center gap-2 mx-2 px-2', {
+        className={classNames('h-full flex items-center gap-2 px-4', {
           'hover:bg-vega-clight-700 dark:hover:bg-vega-cdark-700':
             market.id !== currentMarketId,
           'bg-vega-clight-600 dark:bg-vega-cdark-600':
@@ -94,7 +94,7 @@ const MarketData = ({
   return (
     <>
       <div className="w-2/5" role="gridcell">
-        <h3 className="overflow-hidden text-sm text-ellipsis lg:text-base whitespace-nowrap">
+        <h3 className="text-ellipsis text-sm lg:text-base whitespace-nowrap overflow-hidden">
           {market.tradableInstrument.instrument.code}{' '}
           {allProducts && productType && (
             <MarketProductPill productType={productType} />
@@ -107,7 +107,7 @@ const MarketData = ({
         )}
       </div>
       <div
-        className="w-1/5 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis"
+        className="w-1/5 text-xs lg:text-sm whitespace-nowrap text-ellipsis overflow-hidden"
         title={instrument.product.settlementAsset.symbol}
         data-testid="market-selector-price"
         role="gridcell"
@@ -115,14 +115,14 @@ const MarketData = ({
         {price} {instrument.product.settlementAsset.symbol}
       </div>
       <div
-        className="w-1/5 overflow-hidden text-xs text-right lg:text-sm whitespace-nowrap text-ellipsis"
+        className="w-1/5 text-xs lg:text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden"
         title={t('24h vol')}
         data-testid="market-selector-volume"
         role="gridcell"
       >
         {volume}
       </div>
-      <div className="flex justify-end w-1/5" role="gridcell">
+      <div className="w-1/5 flex justify-end" role="gridcell">
         {oneDayCandles && (
           <Sparkline
             width={64}

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

@@ -262,7 +262,9 @@ describe('MarketSelector', () => {
     await userEvent.click(screen.getByTestId('sort-trigger'));
     const options = screen.getAllByTestId(/sort-item/);
     expect(options.map((o) => o.textContent?.trim())).toEqual(
-      Object.entries(Sort).map(([key]) => SortTypeMapping[key as SortType])
+      Object.entries(Sort)
+        .filter(([key]) => key !== Sort.None)
+        .map(([key]) => SortTypeMapping[key as SortType])
     );
     await userEvent.click(screen.getByTestId('sort-item-Gained'));
     expect(

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

@@ -40,7 +40,7 @@ export const MarketSelector = ({
   const [filter, setFilter] = useState<Filter>({
     searchTerm: '',
     product: Product.All,
-    sort: Sort.TopTraded,
+    sort: Sort.None,
     assets: [],
   });
   const allProducts = filter.product === Product.All;
@@ -52,8 +52,8 @@ export const MarketSelector = ({
   }, [reload]);
 
   return (
-    <div data-testid="market-selector" className="md:w-[580px]">
-      <div className="px-2 pt-2 mb-2">
+    <div data-testid="market-selector">
+      <div className="pt-2 px-2 mb-2">
         <ProductSelector
           product={filter.product}
           onSelect={(product) => {
@@ -106,6 +106,9 @@ export const MarketSelector = ({
             currentSort={filter.sort}
             onSelect={(sort) => {
               setFilter((curr) => {
+                if (curr.sort === sort) {
+                  return { ...curr, sort: Sort.None };
+                }
                 return {
                   ...curr,
                   sort,
@@ -291,9 +294,9 @@ const List = ({
 
 const Skeleton = () => {
   return (
-    <div className="px-2 mb-2">
-      <div className="p-4 rounded-lg bg-vega-light-100 dark:bg-vega-dark-100">
-        <div className="w-full h-3 mb-2 bg-vega-light-200 dark:bg-vega-dark-200" />
+    <div className="mb-2 px-2">
+      <div className="bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg p-4">
+        <div className="w-full h-3 bg-vega-light-200 dark:bg-vega-dark-200 mb-2" />
         <div className="w-2/3 h-3 bg-vega-light-200 dark:bg-vega-dark-200" />
       </div>
     </div>

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

@@ -33,14 +33,11 @@ export const ProductSelector = ({
   return (
     <div className="flex mb-2">
       {Object.keys(Product).map((t) => {
-        const classes = classNames(
-          'text-sm px-3 py-1.5 rounded hover:text-vega-clight-50 dark:hover:text-vega-cdark-50',
-          {
-            'bg-vega-clight-500 dark:bg-vega-cdark-500 text-default':
-              t === product,
-            'text-secondary': t !== product,
-          }
-        );
+        const classes = classNames('px-3 py-1.5 rounded', {
+          'bg-vega-clight-500 dark:bg-vega-cdark-500 text-default':
+            t === product,
+          'text-secondary': t !== product,
+        });
         return (
           <button
             key={t}
@@ -56,7 +53,7 @@ export const ProductSelector = ({
       })}
       <Link
         to={Routes.MARKETS}
-        className="flex items-center ml-auto text-sm gap-2"
+        className="flex items-center gap-2 ml-auto"
         title={t('See all markets')}
       >
         <span className="underline underline-offset-4">{t('Browse')}</span>

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

@@ -1,16 +1,17 @@
+import { t } from '@vegaprotocol/i18n';
 import {
-  TradingDropdown,
-  TradingDropdownContent,
-  TradingDropdownItemIndicator,
-  TradingDropdownRadioGroup,
-  TradingDropdownRadioItem,
-  TradingDropdownTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import { MarketSelectorButton } from './market-selector-button';
 
 export const Sort = {
+  None: 'None',
   Gained: 'Gained',
   Lost: 'Lost',
   New: 'New',
@@ -22,15 +23,17 @@ export type SortType = keyof typeof Sort;
 export const SortTypeMapping: {
   [key in SortType]: string;
 } = {
-  [Sort.TopTraded]: 'Top traded',
+  [Sort.None]: 'None',
   [Sort.Gained]: 'Top gaining',
   [Sort.Lost]: 'Top losing',
   [Sort.New]: 'New markets',
+  [Sort.TopTraded]: 'Top traded',
 };
 
 const SortIconMapping: {
   [key in SortType]: VegaIconNames;
 } = {
+  [Sort.None]: null as unknown as VegaIconNames, // not shown in list
   [Sort.Gained]: VegaIconNames.TREND_UP,
   [Sort.Lost]: VegaIconNames.TREND_DOWN,
   [Sort.New]: VegaIconNames.STAR,
@@ -45,38 +48,43 @@ export const SortDropdown = ({
   onSelect: (sort: SortType) => void;
 }) => {
   return (
-    <TradingDropdown
+    <DropdownMenu
       trigger={
-        <TradingDropdownTrigger data-testid="sort-trigger">
-          <MarketSelectorButton>
-            {SortTypeMapping[currentSort]}
-          </MarketSelectorButton>
-        </TradingDropdownTrigger>
+        <DropdownMenuTrigger data-testid="sort-trigger">
+          <span className="flex justify-between items-center">
+            {currentSort === SortTypeMapping.None
+              ? t('Sort')
+              : SortTypeMapping[currentSort]}{' '}
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+          </span>
+        </DropdownMenuTrigger>
       }
     >
-      <TradingDropdownContent>
-        <TradingDropdownRadioGroup
+      <DropdownMenuContent>
+        <DropdownMenuRadioGroup
           value={currentSort}
           onValueChange={(value) => onSelect(value as SortType)}
         >
-          {Object.keys(Sort).map((key) => {
-            return (
-              <TradingDropdownRadioItem
-                inset
-                key={key}
-                value={key}
-                data-testid={`sort-item-${key}`}
-              >
-                <span className="flex gap-2">
-                  <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
-                  {SortTypeMapping[key as SortType]}
-                </span>
-                <TradingDropdownItemIndicator />
-              </TradingDropdownRadioItem>
-            );
-          })}
-        </TradingDropdownRadioGroup>
-      </TradingDropdownContent>
-    </TradingDropdown>
+          {Object.keys(Sort)
+            .filter((s) => s !== Sort.None)
+            .map((key) => {
+              return (
+                <DropdownMenuRadioItem
+                  inset
+                  key={key}
+                  value={key}
+                  data-testid={`sort-item-${key}`}
+                >
+                  <span className="flex gap-2">
+                    <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
+                    {SortTypeMapping[key as SortType]}
+                  </span>
+                  <DropdownMenuItemIndicator />
+                </DropdownMenuRadioItem>
+              );
+            })}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

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

@@ -12,10 +12,7 @@ import { useMarketList } from '@vegaprotocol/markets';
 import type { Filter } from '../../components/market-selector';
 import { subDays } from 'date-fns';
 
-jest.mock('@vegaprotocol/markets', () => ({
-  ...jest.requireActual('@vegaprotocol/markets'),
-  useMarketList: jest.fn(),
-}));
+jest.mock('@vegaprotocol/markets');
 const mockUseMarketList = useMarketList as jest.Mock;
 
 describe('useMarketSelectorList', () => {
@@ -23,7 +20,7 @@ describe('useMarketSelectorList', () => {
     const defaultArgs: Filter = {
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     };
     return renderHook((args) => useMarketSelectorList(args), {
@@ -112,21 +109,21 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Spot as 'Future',
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[1]]);
     rerender({
       searchTerm: '',
       product: Product.Perpetual as 'Future',
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[2]]);
     rerender({
       searchTerm: '',
       product: Product.All,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual(markets);
@@ -192,7 +189,7 @@ describe('useMarketSelectorList', () => {
     const { result, rerender } = setup({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-0'],
     });
     expect(result.current.markets).toEqual([markets[0], markets[1]]);
@@ -200,7 +197,7 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-0', 'asset-1'],
     });
 
@@ -213,7 +210,7 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-0', 'asset-1', 'asset-2'],
     });
 
@@ -223,7 +220,7 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-invalid'],
     });
 
@@ -278,28 +275,28 @@ describe('useMarketSelectorList', () => {
     const { result, rerender } = setup({
       searchTerm: 'abc',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[0]]);
     rerender({
       searchTerm: 'def',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[1], markets[2]]);
     rerender({
       searchTerm: 'defg',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[2]]);
     rerender({
       searchTerm: 'zzz',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([]);
@@ -308,14 +305,14 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: 'aaa',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[0]]);
     rerender({
       searchTerm: 'ggg',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([
@@ -325,15 +322,11 @@ describe('useMarketSelectorList', () => {
     ]);
   });
 
-  it('sorts by top traded by default', () => {
+  it('sorts by state and volume by default', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
+        state: MarketState.STATE_PENDING,
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -344,10 +337,16 @@ describe('useMarketSelectorList', () => {
       createMarketFragment({
         id: 'market-1',
         state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
+        // @ts-ignore candles not on fragment
+        candles: [
+          {
+            volume: '200',
+          },
+        ],
+      }),
+      createMarketFragment({
+        id: 'market-2',
+        state: MarketState.STATE_ACTIVE,
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -356,30 +355,12 @@ describe('useMarketSelectorList', () => {
         ],
       }),
       createMarketFragment({
-        id: 'market-2',
-        state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
-        // @ts-ignore candles not on fragment
-        candles: [
-          {
-            volume: '300',
-          },
-        ],
-      }),
-      createMarketFragment({
+        state: MarketState.STATE_PENDING,
         id: 'market-3',
-        state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
         // @ts-ignore candles not on fragment
         candles: [
           {
-            volume: '400',
+            volume: '100',
           },
         ],
       }),
@@ -394,15 +375,14 @@ describe('useMarketSelectorList', () => {
     const { result } = setup({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
-
     expect(result.current.markets).toEqual([
-      markets[3],
+      markets[1],
       markets[2],
       markets[0],
-      markets[1],
+      markets[3],
     ]);
   });
 

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

@@ -1,7 +1,11 @@
 import { useMemo } from 'react';
 import orderBy from 'lodash/orderBy';
 import { MarketState } from '@vegaprotocol/types';
-import { calcTradedFactor, useMarketList } from '@vegaprotocol/markets';
+import {
+  calcCandleVolume,
+  calcTradedFactor,
+  useMarketList,
+} from '@vegaprotocol/markets';
 import { priceChangePercentage } from '@vegaprotocol/utils';
 import type { Filter } from '../../components/market-selector/market-selector';
 import { Sort } from './sort-dropdown';
@@ -56,6 +60,22 @@ export const useMarketSelectorList = ({
         return false;
       });
 
+    if (sort === Sort.None) {
+      // Sort by market state primarily and AtoZ secondarily
+      return orderBy(
+        markets,
+        [
+          (m) => MARKET_TEMPLATE.indexOf(m.state),
+          (m) => {
+            if (!m.candles?.length) return 0;
+            const vol = calcCandleVolume(m.candles);
+            return Number(vol || 0);
+          },
+        ],
+        ['asc', 'desc']
+      );
+    }
+
     if (sort === Sort.Gained || sort === Sort.Lost) {
       const dir = sort === Sort.Gained ? 'desc' : 'asc';
       return orderBy(

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

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { TradingButton } from '@vegaprotocol/ui-toolkit';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
 import { usePositionsStore } from '../positions-container';
 
 export const PositionsMenu = () => {
@@ -7,6 +7,7 @@ export const PositionsMenu = () => {
   const toggle = usePositionsStore((store) => store.toggleClosedMarkets);
   return (
     <TradingButton
+      intent={Intent.Primary}
       size="extra-small"
       data-testid="open-transfer"
       onClick={toggle}

apps/trading/components/settings/settings.tsx

@@ -24,8 +24,8 @@ export const Settings = () => {
       >
         <Switch
           name="settings-telemetry-switch"
-          onCheckedChange={(isOn) => setIsApproved(isOn ? 'true' : 'false')}
-          checked={isApproved === 'true'}
+          onCheckedChange={(isOn) => setIsApproved(isOn)}
+          checked={isApproved}
         />
       </SettingsGroup>
       <SettingsGroup label={t('Toast location')}>

apps/trading/components/vega-wallet-container/index.ts

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

apps/trading/components/vega-wallet-container/vega-wallet-container.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { VegaWalletContainer } from './vega-wallet-container';
+import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import type { PartialDeep } from 'type-fest';
+
+const generateJsx = (context: PartialDeep<VegaWalletContextShape>) => {
+  return (
+    <VegaWalletContext.Provider value={context as VegaWalletContextShape}>
+      <VegaWalletContainer>
+        <div data-testid="child" />
+      </VegaWalletContainer>
+    </VegaWalletContext.Provider>
+  );
+};
+
+describe('VegaWalletContainer', () => {
+  it('doesnt render children if not connected', () => {
+    render(generateJsx({ pubKey: null }));
+    expect(screen.queryByTestId('child')).not.toBeInTheDocument();
+  });
+
+  it('renders children if connected', () => {
+    render(generateJsx({ pubKey: '0x123' }));
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+});

apps/trading/components/vega-wallet-container/vega-wallet-container.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { t } from '@vegaprotocol/i18n';
+import { Button, Splash } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+
+interface VegaWalletContainerProps {
+  children: ReactNode;
+}
+
+export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
+  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
+    openVegaWalletDialog: store.openVegaWalletDialog,
+  }));
+  const { pubKey } = useVegaWallet();
+
+  if (!pubKey) {
+    return (
+      <Splash>
+        <div className="text-center">
+          <p className="mb-4" data-testid="connect-vega-wallet-text">
+            {t('Connect your Vega wallet')}
+          </p>
+          <Button
+            onClick={openVegaWalletDialog}
+            data-testid="vega-wallet-connect"
+          >
+            {t('Connect')}
+          </Button>
+        </div>
+      </Splash>
+    );
+  }
+
+  return <>{children}</>;
+};

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

@@ -23,7 +23,6 @@ import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
 import { useSidebar, ViewType } from '../sidebar';
 import * as constants from '../constants';
-import { useOnboardingStore } from './welcome-dialog';
 
 interface Props {
   lead?: string;
@@ -36,7 +35,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
     constants.ONBOARDING_VIEWED_KEY
   );
 
-  const dismiss = useOnboardingStore((store) => store.dismiss);
+  const update = useGlobalStore((store) => store.update);
   const marketId = useGlobalStore((store) => store.marketId);
   const link = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]();
   const openVegaWalletDialog = useVegaWalletDialogStore(
@@ -62,7 +61,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
     onClickHandle = () => {
       navigate(link);
       setView({ type: ViewType.Deposit });
-      dismiss();
+      update({ onBoardingDismissed: true });
     };
   } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) {
     buttonText = t('Dismiss');

apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx

@@ -2,35 +2,29 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TelemetryApproval } from './telemetry-approval';
 
-describe('TelemetryApproval', () => {
-  it('click on buttons should be properly handled', async () => {
-    const mockSetTelemetryValue = jest.fn();
-    render(
-      <TelemetryApproval
-        telemetryValue="false"
-        setTelemetryValue={mockSetTelemetryValue}
-      />
-    );
-    expect(
-      screen.getByRole('button', { name: 'No thanks' })
-    ).toBeInTheDocument();
-    await userEvent.click(screen.getByRole('button', { name: 'No thanks' }));
-    expect(mockSetTelemetryValue).toHaveBeenCalledWith('false');
-    expect(screen.getByText('Share data')).toBeInTheDocument();
-    await userEvent.click(screen.getByText('Share data'));
-    expect(mockSetTelemetryValue).toHaveBeenCalledWith('true');
-  });
+jest.mock('@vegaprotocol/logger', () => ({
+  SentryInit: () => undefined,
+  SentryClose: () => undefined,
+}));
 
-  it('confirm button should have proper text', async () => {
-    const mockSetTelemetryValue = jest.fn();
-    render(
-      <TelemetryApproval
-        telemetryValue="true"
-        setTelemetryValue={mockSetTelemetryValue}
-      />
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }),
+}));
+
+describe('TelemetryApproval', () => {
+  it('click on checkbox should be properly handled', async () => {
+    const helpText = 'My help text';
+    render(<TelemetryApproval helpText={helpText} />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'data-state',
+      'unchecked'
     );
-    expect(screen.getByText('Continue sharing data')).toBeInTheDocument();
-    await userEvent.click(screen.getByText('Continue sharing data'));
-    expect(mockSetTelemetryValue).toHaveBeenCalledWith('true');
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(screen.getByText('Share usage data')).toBeInTheDocument();
+    expect(screen.getByText(helpText)).toBeInTheDocument();
   });
 });

apps/trading/components/welcome-dialog/telemetry-approval.tsx

@@ -1,69 +1,21 @@
-import {
-  Intent,
-  TradingButton,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { TradingCheckbox } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
+import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 
-interface Props {
-  telemetryValue: string;
-  setTelemetryValue: (value: string) => void;
-}
-
-export const TelemetryApproval = ({
-  telemetryValue,
-  setTelemetryValue,
-}: Props) => {
+export const TelemetryApproval = ({ helpText }: { helpText: string }) => {
+  const [isApproved, setIsApproved] = useTelemetryApproval();
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col py-3">
       <div className="mr-4" role="form">
-        <p className="mb-4">
-          {t(
-            'Help us identify bugs and improve Vega Governance by sharing anonymous usage data.'
-          )}
-        </p>
-        <div className="flex items-start mb-2 gap-3">
-          <VegaIcon name={VegaIconNames.EYE_OFF} size={18} />
-          <div className="flex flex-col gap-1">
-            <h6 className="font-semibold">{t('Anonymous')}</h6>
-            <p className="text-muted">
-              {t('Your identity is always anonymous on Vega')}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-start mb-4 gap-3">
-          <VegaIcon name={VegaIconNames.COG} size={18} />
-          <div className="flex flex-col gap-1">
-            <h6 className="font-semibold">{t('Optional')}</h6>
-            <p className="text-muted">
-              {t('You can opt out any time via settings')}
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-col items-center justify-around gap-2">
-          <TradingButton
-            onClick={() => setTelemetryValue('false')}
-            size="small"
-            intent={Intent.None}
-            data-testid="do-not-share-data-button"
-            fill
-          >
-            {t('No thanks')}
-          </TradingButton>
-
-          <TradingButton
-            onClick={() => setTelemetryValue('true')}
-            intent={Intent.Info}
-            data-testid="share-data-button"
-            size="small"
-            fill
-          >
-            {telemetryValue === 'true'
-              ? t('Continue sharing data')
-              : t('Share data')}
-          </TradingButton>
-        </div>
+        <TradingCheckbox
+          label={<span className="text-lg pl-1">{t('Share usage data')}</span>}
+          checked={isApproved}
+          name="telemetry-approval"
+          onCheckedChange={() => setIsApproved(!isApproved)}
+        />
+      </div>
+      <div className="text-sm text-vega-light-300 dark:text-vega-dark-300 ml-6">
+        <span>{helpText}</span>
       </div>
     </div>
   );

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

@@ -5,17 +5,17 @@ import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
-import { useOnboardingStore } from './welcome-dialog';
+import { useGlobalStore } from '../../stores';
 
 export const WelcomeDialogContent = () => {
   const { VEGA_ENV } = useEnvironment();
 
-  const dismiss = useOnboardingStore((store) => store.dismiss);
+  const update = useGlobalStore((store) => store.update);
   const navigate = useNavigate();
   const browseMarkets = () => {
     const link = Links[Routes.MARKETS]();
     navigate(link);
-    dismiss();
+    update({ onBoardingDismissed: true });
   };
   const lead =
     VEGA_ENV === Networks.MAINNET

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

@@ -1,9 +1,7 @@
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { Dialog, Intent, useToasts } from '@vegaprotocol/ui-toolkit';
+import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { WelcomeDialogContent } from './welcome-dialog-content';
@@ -14,41 +12,15 @@ import {
   OnboardingStep,
 } from './use-get-onboarding-step';
 import * as constants from '../constants';
-import { TelemetryApproval } from './telemetry-approval';
-import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
-import { useCallback } from 'react';
 
-const ONBOARDING_STORAGE_KEY = 'vega_onboarding_dismiss_store';
-export const useOnboardingStore = create<{
-  dismissed: boolean;
-  dismiss: () => void;
-}>()(
-  persist(
-    (set) => ({
-      dismissed: false,
-      dismiss: () => set(() => ({ dismissed: true })),
-    }),
-    {
-      name: ONBOARDING_STORAGE_KEY,
-    }
-  )
-);
-
-const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_tost_id';
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  const navigate = useNavigate();
-  const [telemetryValue, setTelemetryValue, isTelemetryNeeded, closeTelemetry] =
-    useTelemetryApproval();
   const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
-  const dismiss = useOnboardingStore((store) => store.dismiss);
-  const dismissed = useOnboardingStore((store) => store.dismissed);
+  const update = useGlobalStore((store) => store.update);
+  const dismissed = useGlobalStore((store) => store.onBoardingDismissed);
   const currentStep = useGetOnboardingStep();
-  const isTelemetryPopupNeeded =
-    isTelemetryNeeded &&
-    (onBoardingViewed === 'true' ||
-      currentStep > OnboardingStep.ONBOARDING_ORDER_STEP);
 
+  const navigate = useNavigate();
   const isOnboardingDialogNeeded =
     onBoardingViewed !== 'true' &&
     currentStep &&
@@ -57,58 +29,12 @@ export const WelcomeDialog = () => {
   const marketId = useGlobalStore((store) => store.marketId);
 
   const onClose = () => {
-    if (isTelemetryPopupNeeded) {
-      closeTelemetry();
-    } else {
-      const link = marketId
-        ? Links[Routes.MARKET](marketId)
-        : Links[Routes.HOME]();
-      navigate(link);
-      dismiss();
-    }
+    const link = marketId
+      ? Links[Routes.MARKET](marketId)
+      : Links[Routes.HOME]();
+    navigate(link);
+    update({ onBoardingDismissed: true });
   };
-
-  const [setToast, hasToast, removeToast] = useToasts((store) => [
-    store.setToast,
-    store.hasToast,
-    store.remove,
-  ]);
-  const onApprovalClose = useCallback(() => {
-    closeTelemetry();
-    removeToast(TELEMETRY_APPROVAL_TOAST_ID);
-  }, [removeToast, closeTelemetry]);
-
-  const setTelemetryApprovalAndClose = useCallback(
-    (value: string) => {
-      setTelemetryValue(value);
-      onApprovalClose();
-    },
-    [setTelemetryValue, onApprovalClose]
-  );
-
-  if (isTelemetryPopupNeeded) {
-    const toast: Toast = {
-      id: TELEMETRY_APPROVAL_TOAST_ID,
-      intent: Intent.Primary,
-      content: (
-        <>
-          <h3 className="mb-1 text-sm uppercase">
-            {t('Improve vega console')}
-          </h3>
-          <TelemetryApproval
-            telemetryValue={telemetryValue}
-            setTelemetryValue={setTelemetryApprovalAndClose}
-          />
-        </>
-      ),
-      onClose: onApprovalClose,
-    };
-    if (!hasToast(TELEMETRY_APPROVAL_TOAST_ID)) {
-      setToast(toast);
-    }
-    return;
-  }
-
   const title = (
     <span className="font-alpha calt" data-testid="welcome-title">
       {t('Console')}{' '}

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

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

apps/trading/lib/hooks/use-telemetry-approval.spec.ts

@@ -1,40 +1,19 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { SentryInit, SentryClose } from '@vegaprotocol/logger';
-import {
-  STORAGE_KEY,
-  STORAGE_SECOND_KEY,
-  useTelemetryApproval,
-} from './use-telemetry-approval';
-import { Networks } from '@vegaprotocol/environment';
+import { STORAGE_KEY, useTelemetryApproval } from './use-telemetry-approval';
 
 const mockSetValue = jest.fn();
-let mockStorageHookApprovalResult: [string | null, jest.Mock] = [
-  null,
-  mockSetValue,
-];
-const mockSetSecondValue = jest.fn();
-let mockStorageHookViewedResult: [string | null, jest.Mock] = [
-  null,
-  mockSetSecondValue,
-];
+const mockRemoveValue = jest.fn();
 jest.mock('@vegaprotocol/logger');
 jest.mock('@vegaprotocol/react-helpers', () => ({
   ...jest.requireActual('@vegaprotocol/react-helpers'),
-  useLocalStorage: jest.fn((key: string) => {
-    if (key === 'vega_telemetry_approval') {
-      return mockStorageHookApprovalResult;
-    }
-    return mockStorageHookViewedResult;
-  }),
+  useLocalStorage: jest
+    .fn()
+    .mockImplementation(() => [false, mockSetValue, mockRemoveValue]),
 }));
-let mockVegaEnv = 'test';
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  useEnvironment: jest.fn(() => ({
-    VEGA_ENV: mockVegaEnv,
-    SENTRY_DSN: 'sentry-dsn',
-  })),
+  useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }),
 }));
 
 describe('useTelemetryApproval', () => {
@@ -42,71 +21,32 @@ describe('useTelemetryApproval', () => {
     jest.clearAllMocks();
   });
 
-  it('when empty hook should return proper array', () => {
+  it('hook should return proper array', () => {
     const { result } = renderHook(() => useTelemetryApproval());
-    expect(result.current[0]).toEqual('');
+    expect(result.current[0]).toEqual(false);
     expect(result.current[1]).toEqual(expect.any(Function));
-    expect(result.current[2]).toEqual(true);
-    expect(result.current[3]).toEqual(expect.any(Function));
     expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_SECOND_KEY);
-    expect(mockSetValue).toHaveBeenCalledWith('true');
-    expect(mockSetSecondValue).not.toHaveBeenCalledWith('true');
-  });
-
-  it('when approval not empty but viewed is empty should return proper array', () => {
-    mockStorageHookApprovalResult = ['false', mockSetValue];
-    const { result } = renderHook(() => useTelemetryApproval());
-    expect(result.current[0]).toEqual('false');
-    expect(result.current[1]).toEqual(expect.any(Function));
-    expect(result.current[2]).toEqual(true);
-    expect(result.current[3]).toEqual(expect.any(Function));
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_SECOND_KEY);
-    expect(mockSetValue).not.toHaveBeenCalled();
-    expect(mockSetSecondValue).not.toHaveBeenCalled();
-  });
-
-  it('when NOT empty hook should return proper array', () => {
-    mockStorageHookApprovalResult = ['false', mockSetValue];
-    mockStorageHookViewedResult = ['true', mockSetSecondValue];
-    const { result } = renderHook(() => useTelemetryApproval());
-    expect(result.current[0]).toEqual('false');
-    expect(result.current[1]).toEqual(expect.any(Function));
-    expect(result.current[2]).toEqual(false);
-    expect(result.current[3]).toEqual(expect.any(Function));
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
-    expect(mockSetValue).not.toHaveBeenCalled();
-  });
-
-  it('on mainnet hook should init properly', () => {
-    mockStorageHookApprovalResult = [null, mockSetValue];
-    mockVegaEnv = Networks.MAINNET;
-    renderHook(() => useTelemetryApproval());
-    expect(mockSetValue).toHaveBeenCalledWith('false');
   });
 
   it('hook should init stuff properly', async () => {
     const { result } = renderHook(() => useTelemetryApproval());
     await act(() => {
-      result.current[1]('true');
+      result.current[1](true);
     });
     await waitFor(() => {
       expect(SentryInit).toHaveBeenCalled();
-      expect(mockSetValue).toHaveBeenCalledWith('true');
-      expect(mockSetSecondValue).toHaveBeenCalledWith('true');
+      expect(mockSetValue).toHaveBeenCalledWith('1');
     });
   });
 
   it('hook should close stuff properly', async () => {
     const { result } = renderHook(() => useTelemetryApproval());
     await act(() => {
-      result.current[1]('false');
+      result.current[1](false);
     });
     await waitFor(() => {
       expect(SentryClose).toHaveBeenCalled();
-      expect(mockSetValue).toHaveBeenCalledWith('false');
-      expect(mockSetSecondValue).toHaveBeenCalledWith('true');
+      expect(mockRemoveValue).toHaveBeenCalledWith();
     });
   });
 });

apps/trading/lib/hooks/use-telemetry-approval.ts

@@ -1,51 +1,25 @@
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import { SentryInit, SentryClose } from '@vegaprotocol/logger';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-
+import { useEnvironment } from '@vegaprotocol/environment';
 export const STORAGE_KEY = 'vega_telemetry_approval';
-export const STORAGE_SECOND_KEY = 'vega_telemetry_viewed';
 
 export const useTelemetryApproval = (): [
-  value: string,
-  setValue: (value: string) => void,
-  shouldOpen: boolean,
-  close: () => void
+  value: boolean,
+  setValue: (value: boolean) => void
 ] => {
   const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
-  const defaultTelemetryValue =
-    VEGA_ENV === Networks.MAINNET ? 'false' : 'true';
-  const [value, setValue] = useLocalStorage(STORAGE_KEY);
-  const [viewedValue, setViewedValue] = useLocalStorage(STORAGE_SECOND_KEY);
-  const [shouldOpen, setShouldOpen] = useState(!value || !viewedValue);
-  const close = useCallback(() => {
-    setShouldOpen(false);
-    setViewedValue('true');
-  }, [setViewedValue]);
-  const manageValue = useCallback(
-    (value: string) => {
-      if (value === 'true' && SENTRY_DSN) {
+  const [value, setValue, removeValue] = useLocalStorage(STORAGE_KEY);
+  const setApprove = useCallback(
+    (value: boolean) => {
+      if (value && SENTRY_DSN) {
         SentryInit(SENTRY_DSN, VEGA_ENV);
-        return setValue('true');
+        return setValue('1');
       }
       SentryClose();
-      setValue('false');
+      removeValue();
     },
-    [setValue, SENTRY_DSN, VEGA_ENV]
+    [setValue, removeValue, SENTRY_DSN, VEGA_ENV]
   );
-  const setTelemetryValue = useCallback(
-    (value: string) => {
-      setShouldOpen(false);
-      setViewedValue('true');
-      manageValue(value);
-    },
-    [manageValue, setViewedValue]
-  );
-  useEffect(() => {
-    if (!value) {
-      manageValue(defaultTelemetryValue);
-    }
-  }, [value, manageValue, defaultTelemetryValue]);
-
-  return [value || '', setTelemetryValue, shouldOpen, close];
+  return [Boolean(value), setApprove];
 };

apps/trading/stores/global.ts

@@ -4,6 +4,7 @@ import produce from 'immer';
 
 interface GlobalStore {
   marketId: string | null;
+  onBoardingDismissed: boolean;
   eagerConnecting: boolean;
   update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
 }
@@ -15,6 +16,7 @@ interface PageTitleStore {
 
 export const useGlobalStore = create<GlobalStore>()((set) => ({
   marketId: LocalStorage.getItem('marketId') || null,
+  onBoardingDismissed: false,
   eagerConnecting: false,
   update: (newState) => {
     set(

libs/accounts/src/lib/accounts-actions-dropdown.tsx

@@ -2,8 +2,8 @@ import { ETHERSCAN_ADDRESS, useEtherscanLink } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import {
   ActionsDropdown,
-  TradingDropdownCopyItem,
-  TradingDropdownItem,
+  DropdownMenuCopyItem,
+  DropdownMenuItem,
   Link,
   VegaIcon,
   VegaIconNames,
@@ -30,49 +30,49 @@ export const AccountsActionsDropdown = ({
 
   return (
     <ActionsDropdown>
-      <TradingDropdownItem
+      <DropdownMenuItem
         key={'deposit'}
         data-testid="deposit"
         onClick={onClickDeposit}
       >
         <VegaIcon name={VegaIconNames.DEPOSIT} size={16} />
         {t('Deposit')}
-      </TradingDropdownItem>
-      <TradingDropdownItem
+      </DropdownMenuItem>
+      <DropdownMenuItem
         key={'withdraw'}
         data-testid="withdraw"
         onClick={onClickWithdraw}
       >
         <VegaIcon name={VegaIconNames.WITHDRAW} size={16} />
         {t('Withdraw')}
-      </TradingDropdownItem>
-      <TradingDropdownItem
+      </DropdownMenuItem>
+      <DropdownMenuItem
         key={'transfer'}
         data-testid="transfer"
         onClick={onClickTransfer}
       >
         <VegaIcon name={VegaIconNames.TRANSFER} size={16} />
         {t('Transfer')}
-      </TradingDropdownItem>
-      <TradingDropdownItem
+      </DropdownMenuItem>
+      <DropdownMenuItem
         key={'breakdown'}
         data-testid="breakdown"
         onClick={onClickBreakdown}
       >
         <VegaIcon name={VegaIconNames.BREAKDOWN} size={16} />
         {t('View usage breakdown')}
-      </TradingDropdownItem>
-      <TradingDropdownItem
+      </DropdownMenuItem>
+      <DropdownMenuItem
         onClick={(e) => {
           openAssetDialog(assetId, e.target as HTMLElement);
         }}
       >
         <VegaIcon name={VegaIconNames.INFO} size={16} />
         {t('View asset details')}
-      </TradingDropdownItem>
-      <TradingDropdownCopyItem value={assetId} text={t('Copy asset ID')} />
+      </DropdownMenuItem>
+      <DropdownMenuCopyItem value={assetId} text={t('Copy asset ID')} />
       {assetContractAddress && (
-        <TradingDropdownItem>
+        <DropdownMenuItem>
           <Link
             href={etherscanLink(
               ETHERSCAN_ADDRESS.replace(':hash', assetContractAddress)
@@ -84,7 +84,7 @@ export const AccountsActionsDropdown = ({
               {t('View on Etherscan')}
             </span>
           </Link>
-        </TradingDropdownItem>
+        </DropdownMenuItem>
       )}
     </ActionsDropdown>
   );

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

@@ -11,13 +11,9 @@ import type {
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import { COL_DEFS } from '@vegaprotocol/datagrid';
-import {
-  Intent,
-  TradingButton,
-  VegaIcon,
-  VegaIconNames,
-  TooltipCellComponent,
-} from '@vegaprotocol/ui-toolkit';
+import { Button, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+
+import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   IGetRowsParams,
@@ -190,7 +186,7 @@ export const AccountTable = ({
           ) : (
             <>
               <span className="underline">{valueFormatted}</span>
-              <span className="inline-block ml-2 w-14 text-muted">
+              <span className="ml-2 inline-block w-14 text-muted">
                 {t('0.00%')}
               </span>
             </>
@@ -252,26 +248,26 @@ export const AccountTable = ({
         colId: 'accounts-actions',
         field: 'asset.id',
         ...COL_DEFS.actions,
-        minWidth: showDepositButton ? 105 : COL_DEFS.actions.minWidth,
-        maxWidth: showDepositButton ? 105 : COL_DEFS.actions.maxWidth,
+        minWidth: showDepositButton ? 130 : COL_DEFS.actions.minWidth,
+        maxWidth: showDepositButton ? 130 : COL_DEFS.actions.maxWidth,
         cellRenderer: ({
           value: assetId,
           node,
         }: VegaICellRendererParams<AccountFields, 'asset.id'>) => {
           if (!assetId) return null;
-          if (node.rowPinned && node.data?.balance === '0') {
+          if (node.rowPinned && node.data?.total === '0') {
             return (
               <CenteredGridCellWrapper className="h-[30px] justify-end py-1">
-                <TradingButton
-                  size="extra-small"
-                  intent={Intent.Primary}
+                <Button
+                  size="xs"
+                  variant="primary"
                   data-testid="deposit"
                   onClick={() => {
                     onClickDeposit && onClickDeposit(assetId);
                   }}
                 >
                   <VegaIcon name={VegaIconNames.DEPOSIT} /> {t('Deposit')}
-                </TradingButton>
+                </Button>
               </CenteredGridCellWrapper>
             );
           }

libs/accounts/src/lib/transfer-form.tsx

@@ -8,6 +8,7 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
+  Button,
   TradingFormGroup,
   TradingInput,
   TradingInputError,
@@ -15,7 +16,6 @@ import {
   TradingSelect,
   Tooltip,
   TradingCheckbox,
-  TradingButton,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
 import { normalizeTransfer } from '@vegaprotocol/wallet';
@@ -276,9 +276,9 @@ export const TransferForm = ({
           decimals={asset?.decimals}
         />
       )}
-      <TradingButton type="submit" fill={true}>
+      <Button type="submit" variant="primary" fill={true}>
         {t('Confirm transfer')}
-      </TradingButton>
+      </Button>
     </form>
   );
 };
@@ -309,8 +309,8 @@ export const TransferFee = ({
   const totalValue = new BigNumber(transferAmount).plus(fee).toString();
 
   return (
-    <div className="flex flex-col mb-4 text-xs gap-2">
-      <div className="flex flex-wrap items-center justify-between gap-1">
+    <div className="mb-4 flex flex-col gap-2 text-xs">
+      <div className="flex justify-between gap-1 items-center flex-wrap">
         <Tooltip
           description={t(
             `The transfer fee is set by the network parameter transfer.fee.factor, currently set to %s`,
@@ -324,7 +324,7 @@ export const TransferFee = ({
           {formatNumber(fee, decimals)}
         </div>
       </div>
-      <div className="flex flex-wrap items-center justify-between gap-1">
+      <div className="flex justify-between gap-1 items-center flex-wrap">
         <Tooltip
           description={t(
             `The total amount to be transferred (without the fee)`
@@ -337,7 +337,7 @@ export const TransferFee = ({
           {formatNumber(amount, decimals)}
         </div>
       </div>
-      <div className="flex flex-wrap items-center justify-between gap-1">
+      <div className="flex justify-between gap-1 items-center flex-wrap">
         <Tooltip
           description={t(
             `The total amount taken from your account. The amount to be transferred plus the fee.`
@@ -384,7 +384,7 @@ export const AddressField = ({
             setIsInput((curr) => !curr);
             onChange();
           }}
-          className="absolute top-0 right-0 ml-auto text-sm underline"
+          className="ml-auto text-sm absolute top-0 right-0 underline"
         >
           {isInput ? t('Select from wallet') : t('Enter manually')}
         </button>

libs/assets/src/lib/asset-details-dialog.tsx

@@ -2,10 +2,9 @@ import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   Dialog,
+  Icon,
   Splash,
   SyntaxHighlighter,
-  VegaIcon,
-  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { create } from 'zustand';
 import { AssetDetailsTable } from './asset-details-table';
@@ -83,7 +82,7 @@ export const AssetDetailsDialog = ({
   return (
     <Dialog
       title={title}
-      icon={<VegaIcon name={VegaIconNames.INFO} />}
+      icon={<Icon name="info-sign"></Icon>}
       open={open}
       onChange={(isOpen) => onChange(isOpen)}
       onCloseAutoFocus={(e) => {
@@ -98,7 +97,7 @@ export const AssetDetailsDialog = ({
       }}
     >
       {content}
-      <p className="my-4 text-xs">
+      <p className="text-xs my-4">
         {t(
           'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
           [assetSymbol]

libs/assets/src/lib/asset-details-table.tsx

@@ -3,8 +3,11 @@ import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type * as Schema from '@vegaprotocol/types';
 import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit';
-import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { CopyWithTooltip, truncateMiddle } from '@vegaprotocol/ui-toolkit';
+import {
+  CopyWithTooltip,
+  Icon,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
 import {
   KeyValueTable,
   KeyValueTableRow,
@@ -115,7 +118,7 @@ export const rows: Rows = [
           </EtherscanLink>{' '}
           <CopyWithTooltip text={asset.source.contractAddress}>
             <button title={t('Copy address to clipboard')}>
-              <VegaIcon size={14} name={VegaIconNames.COPY} />
+              <Icon size={3} name="duplicate" />
             </button>
           </CopyWithTooltip>
         </>

libs/candles-chart/src/lib/candles-menu.spec.tsx

@@ -3,31 +3,15 @@ import userEvent from '@testing-library/user-event';
 import { CandlesMenu } from './candles-menu';
 
 describe('CandlesMenu', () => {
-  it('should render with the correct default studies', async () => {
+  it('should render with volume study showing by default', async () => {
     render(<CandlesMenu />);
 
     await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Studies',
+      screen.getByText('Studies', {
+        selector: '[type="button"]',
       })
     );
     expect(await screen.findByRole('menu')).toBeInTheDocument();
     expect(screen.getByText('Volume')).toHaveAttribute('data-state', 'checked');
-    expect(screen.getByText('MACD')).toHaveAttribute('data-state', 'checked');
-  });
-
-  it('should render with the correct default overlays', async () => {
-    render(<CandlesMenu />);
-
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Overlays',
-      })
-    );
-    expect(await screen.findByRole('menu')).toBeInTheDocument();
-    expect(screen.getByText('Moving average')).toHaveAttribute(
-      'data-state',
-      'checked'
-    );
   });
 });

libs/candles-chart/src/lib/candles-menu.tsx

@@ -10,14 +10,13 @@ import {
   studyLabels,
 } from 'pennant';
 import {
-  TradingButton,
-  TradingDropdown,
-  TradingDropdownCheckboxItem,
-  TradingDropdownContent,
-  TradingDropdownItemIndicator,
-  TradingDropdownRadioGroup,
-  TradingDropdownRadioItem,
-  TradingDropdownTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
   Icon,
 } from '@vegaprotocol/ui-toolkit';
 import type { IconName } from '@blueprintjs/icons';
@@ -45,76 +44,69 @@ export const CandlesMenu = () => {
   } = useCandlesChartSettings();
   const triggerClasses = 'text-xs';
   const contentAlign = 'end';
-  const triggerButtonProps = { size: 'extra-small' } as const;
 
   return (
     <>
-      <TradingDropdown
+      <DropdownMenu
         trigger={
-          <TradingDropdownTrigger className={triggerClasses}>
-            <TradingButton {...triggerButtonProps}>
-              {t(`Interval: ${intervalLabels[interval]}`)}
-            </TradingButton>
-          </TradingDropdownTrigger>
+          <DropdownMenuTrigger className={triggerClasses}>
+            {t(`Interval: ${intervalLabels[interval]}`)}
+          </DropdownMenuTrigger>
         }
       >
-        <TradingDropdownContent align={contentAlign}>
-          <TradingDropdownRadioGroup
+        <DropdownMenuContent align={contentAlign}>
+          <DropdownMenuRadioGroup
             value={interval}
             onValueChange={(value) => {
               setInterval(value as Interval);
             }}
           >
             {Object.values(Interval).map((timeInterval) => (
-              <TradingDropdownRadioItem
+              <DropdownMenuRadioItem
                 key={timeInterval}
                 inset
                 value={timeInterval}
               >
                 {intervalLabels[timeInterval]}
-                <TradingDropdownItemIndicator />
-              </TradingDropdownRadioItem>
+                <DropdownMenuItemIndicator />
+              </DropdownMenuRadioItem>
             ))}
-          </TradingDropdownRadioGroup>
-        </TradingDropdownContent>
-      </TradingDropdown>
-      <TradingDropdown
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu
         trigger={
-          <TradingDropdownTrigger className={triggerClasses}>
-            <TradingButton {...triggerButtonProps}>
-              <Icon name={chartTypeIcon.get(chartType) as IconName} />
-            </TradingButton>
-          </TradingDropdownTrigger>
+          <DropdownMenuTrigger className={triggerClasses}>
+            <Icon name={chartTypeIcon.get(chartType) as IconName} />
+          </DropdownMenuTrigger>
         }
       >
-        <TradingDropdownContent align={contentAlign}>
-          <TradingDropdownRadioGroup
+        <DropdownMenuContent align={contentAlign}>
+          <DropdownMenuRadioGroup
             value={chartType}
             onValueChange={(value) => {
               setType(value as ChartType);
             }}
           >
             {Object.values(ChartType).map((type) => (
-              <TradingDropdownRadioItem key={type} inset value={type}>
+              <DropdownMenuRadioItem key={type} inset value={type}>
                 {chartTypeLabels[type]}
-                <TradingDropdownItemIndicator />
-              </TradingDropdownRadioItem>
+                <DropdownMenuItemIndicator />
+              </DropdownMenuRadioItem>
             ))}
-          </TradingDropdownRadioGroup>
-        </TradingDropdownContent>
-      </TradingDropdown>
-      <TradingDropdown
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu
         trigger={
-          <TradingDropdownTrigger className={triggerClasses}>
-            <TradingButton {...triggerButtonProps}>
-              {t('Overlays')}
-            </TradingButton>
-          </TradingDropdownTrigger>
+          <DropdownMenuTrigger className={triggerClasses}>
+            {t('Overlays')}
+          </DropdownMenuTrigger>
         }
       >
-        <TradingDropdownContent align={contentAlign}>
+        <DropdownMenuContent align={contentAlign}>
           {Object.values(Overlay).map((overlay) => (
-            <TradingDropdownCheckboxItem
+            <DropdownMenuCheckboxItem
               key={overlay}
               checked={overlays.includes(overlay)}
               onCheckedChange={() => {
@@ -129,23 +121,21 @@ export const CandlesMenu = () => {
               }}
             >
               {overlayLabels[overlay]}
-              <TradingDropdownItemIndicator />
-            </TradingDropdownCheckboxItem>
+              <DropdownMenuItemIndicator />
+            </DropdownMenuCheckboxItem>
           ))}
-        </TradingDropdownContent>
-      </TradingDropdown>
-      <TradingDropdown
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu
         trigger={
-          <TradingDropdownTrigger className={triggerClasses}>
-            <TradingButton {...triggerButtonProps}>
-              {t('Studies')}
-            </TradingButton>
-          </TradingDropdownTrigger>
+          <DropdownMenuTrigger className={triggerClasses}>
+            {t('Studies')}
+          </DropdownMenuTrigger>
         }
       >
-        <TradingDropdownContent align={contentAlign}>
+        <DropdownMenuContent align={contentAlign}>
           {Object.values(Study).map((study) => (
-            <TradingDropdownCheckboxItem
+            <DropdownMenuCheckboxItem
               key={study}
               checked={studies.includes(study)}
               onCheckedChange={() => {
@@ -160,11 +150,11 @@ export const CandlesMenu = () => {
               }}
             >
               {studyLabels[study]}
-              <TradingDropdownItemIndicator />
-            </TradingDropdownCheckboxItem>
+              <DropdownMenuItemIndicator />
+            </DropdownMenuCheckboxItem>
           ))}
-        </TradingDropdownContent>
-      </TradingDropdown>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </>
   );
 };

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -15,8 +15,8 @@ interface StoredSettings {
 const DEFAULT_CHART_SETTINGS = {
   interval: Interval.I15M,
   type: ChartType.CANDLE,
-  overlays: [Overlay.MOVING_AVERAGE],
-  studies: [Study.MACD, Study.VOLUME],
+  overlays: [],
+  studies: [Study.VOLUME],
 };
 
 export const useCandlesChartSettingsStore = create<

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

@@ -65,8 +65,6 @@ export function addSetVegaWallet() {
   Cypress.Commands.add('setVegaWallet', () => {
     cy.window().then((win) => {
       win.localStorage.setItem('vega_onboarding_viewed', 'true');
-      win.localStorage.setItem('vega_telemetry_approval', 'false');
-      win.localStorage.setItem('vega_telemetry_viewed', 'true');
       win.localStorage.setItem(
         'vega_wallet_config',
         JSON.stringify({
@@ -83,8 +81,6 @@ export function addSetOnBoardingViewed() {
   Cypress.Commands.add('setOnBoardingViewed', () => {
     cy.window().then((win) => {
       win.localStorage.setItem('vega_onboarding_viewed', 'true');
-      win.localStorage.setItem('vega_telemetry_approval', 'false');
-      win.localStorage.setItem('vega_telemetry_viewed', 'true');
     });
   });
 }

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

@@ -12,8 +12,6 @@ import { formatRange, formatValue } from '@vegaprotocol/utils';
 import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 
-import * as Accordion from '@radix-ui/react-accordion';
-
 import {
   MARGIN_DIFF_TOOLTIP_TEXT,
   DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
@@ -24,7 +22,6 @@ import {
 } from '../../constants';
 import { useEstimateFees } from '../../hooks';
 import { KeyValue } from './key-value';
-import { TOOLTIP_TRIGGER_CLASS_NAME } from '@vegaprotocol/ui-toolkit';
 
 const emptyValue = '-';
 
@@ -247,72 +244,55 @@ export const DealTicketMarginDetails = ({
 
   return (
     <>
-      <Accordion.Root type="single" collapsible>
-        <Accordion.Item value="margin">
-          <KeyValue
-            id="margin-required"
-            label={
-              <Accordion.Trigger className={TOOLTIP_TRIGGER_CLASS_NAME}>
-                {t('Margin required')}
-              </Accordion.Trigger>
-            }
-            value={formatRange(
-              marginRequiredBestCase,
-              marginRequiredWorstCase,
-              assetDecimals
-            )}
-            formattedValue={formatRange(
-              marginRequiredBestCase,
-              marginRequiredWorstCase,
-              assetDecimals,
-              quantum
-            )}
-            labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
-            symbol={assetSymbol}
-          />
-          <Accordion.Content>
-            <KeyValue
-              label={t('Total margin available')}
-              indent
-              value={formatValue(totalMarginAvailable, assetDecimals)}
-              formattedValue={formatValue(
-                totalMarginAvailable,
-                assetDecimals,
-                quantum
-              )}
-              symbol={assetSymbol}
-              labelDescription={TOTAL_MARGIN_AVAILABLE(
-                formatValue(generalAccountBalance, assetDecimals, quantum),
-                formatValue(marginAccountBalance, assetDecimals, quantum),
-                formatValue(
-                  currentMargins?.maintenanceLevel,
-                  assetDecimals,
-                  quantum
-                ),
-                assetSymbol
-              )}
-            />
-            {deductionFromCollateral}
-            <KeyValue
-              label={t('Current margin allocation')}
-              indent
-              onClick={
-                generalAccountBalance
-                  ? () => setBreakdownDialog(true)
-                  : undefined
-              }
-              value={formatValue(marginAccountBalance, assetDecimals)}
-              symbol={assetSymbol}
-              labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
-              formattedValue={formatValue(
-                marginAccountBalance,
-                assetDecimals,
-                quantum
-              )}
-            />
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
+      <KeyValue
+        label={t('Margin required')}
+        value={formatRange(
+          marginRequiredBestCase,
+          marginRequiredWorstCase,
+          assetDecimals
+        )}
+        formattedValue={formatRange(
+          marginRequiredBestCase,
+          marginRequiredWorstCase,
+          assetDecimals,
+          quantum
+        )}
+        labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
+        symbol={assetSymbol}
+      />
+      <KeyValue
+        label={t('Total margin available')}
+        indent
+        value={formatValue(totalMarginAvailable, assetDecimals)}
+        formattedValue={formatValue(
+          totalMarginAvailable,
+          assetDecimals,
+          quantum
+        )}
+        symbol={assetSymbol}
+        labelDescription={TOTAL_MARGIN_AVAILABLE(
+          formatValue(generalAccountBalance, assetDecimals, quantum),
+          formatValue(marginAccountBalance, assetDecimals, quantum),
+          formatValue(currentMargins?.maintenanceLevel, assetDecimals, quantum),
+          assetSymbol
+        )}
+      />
+      {deductionFromCollateral}
+      <KeyValue
+        label={t('Current margin allocation')}
+        indent
+        onClick={
+          generalAccountBalance ? () => setBreakdownDialog(true) : undefined
+        }
+        value={formatValue(marginAccountBalance, assetDecimals)}
+        symbol={assetSymbol}
+        labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
+        formattedValue={formatValue(
+          marginAccountBalance,
+          assetDecimals,
+          quantum
+        )}
+      />
       {projectedMargin}
       <KeyValue
         label={t('Liquidation price estimate')}

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

@@ -21,8 +21,6 @@ import {
 import * as positionsTools from '@vegaprotocol/positions';
 import { OrdersDocument } from '@vegaprotocol/orders';
 import { formatForInput } from '@vegaprotocol/utils';
-import type { PartialDeep } from 'type-fest';
-import type { Market } from '@vegaprotocol/markets';
 
 jest.mock('zustand');
 jest.mock('./deal-ticket-fee-details', () => ({
@@ -38,19 +36,12 @@ const market = generateMarket();
 const marketData = generateMarketData();
 const submit = jest.fn();
 
-function generateJsx(
-  mocks: MockedResponse[] = [],
-  marketOverrides: PartialDeep<Market> = {}
-) {
-  const joinedMarket: Market = {
-    ...market,
-    ...marketOverrides,
-  } as Market;
+function generateJsx(mocks: MockedResponse[] = []) {
   return (
     <MockedProvider mocks={[...mocks]}>
       <VegaWalletContext.Provider value={{ pubKey, isReadOnly: false } as any}>
         <DealTicket
-          market={joinedMarket}
+          market={market}
           marketData={marketData}
           marketPrice={marketPrice}
           submit={submit}
@@ -376,6 +367,7 @@ describe('DealTicket', () => {
     expect(screen.getByTestId('iceberg')).toBeDisabled();
   });
 
+  // eslint-disable-next-line jest/no-disabled-tests
   it('handles TIF select box dependent on order type', async () => {
     render(generateJsx());
 
@@ -541,25 +533,6 @@ describe('DealTicket', () => {
     expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
   });
 
-  it('validates size when positionDecimalPlaces is negative', async () => {
-    render(generateJsx([], { positionDecimalPlaces: -4 }));
-    const sizeErrorMessage = 'deal-ticket-error-message-size';
-    const sizeInput = 'order-size';
-    await userEvent.click(screen.getByTestId('place-order'));
-    // default value should be invalid
-    expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
-    expect(screen.getByTestId(sizeErrorMessage)).toHaveTextContent(
-      'Size cannot be lower than 10000'
-    );
-    await userEvent.type(screen.getByTestId(sizeInput), '10001');
-    expect(screen.getByTestId(sizeErrorMessage)).toHaveTextContent(
-      'Size must be a multiple of 10000 for this market'
-    );
-    await userEvent.clear(screen.getByTestId(sizeInput));
-    await userEvent.type(screen.getByTestId(sizeInput), '10000');
-    expect(screen.queryByTestId(sizeErrorMessage)).toBeNull();
-  });
-
   it('validates iceberg field', async () => {
     const peakSizeErrorMessage = 'deal-ticket-peak-error-message';
     const minimumSizeErrorMessage = 'deal-ticket-minimum-error-message';

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

@@ -3,8 +3,7 @@ import classnames from 'classnames';
 import type { ReactNode } from 'react';
 
 export interface KeyValuePros {
-  id?: string;
-  label: ReactNode;
+  label: string;
   value?: string | null | undefined;
   symbol: string;
   indent?: boolean | undefined;
@@ -14,7 +13,6 @@ export interface KeyValuePros {
 }
 
 export const KeyValue = ({
-  id,
   label,
   value,
   labelDescription,
@@ -33,11 +31,9 @@ export const KeyValue = ({
   );
   return (
     <div
-      data-testid={`deal-ticket-fee-${
-        !id && typeof label === 'string'
-          ? label.toLocaleLowerCase().replace(/\s/g, '-')
-          : id
-      }`}
+      data-testid={
+        'deal-ticket-fee-' + label.toLocaleLowerCase().replace(/\s/g, '-')
+      }
       key={typeof label === 'string' ? label : 'value-dropdown'}
       className={classnames(
         'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',

libs/deposits/src/lib/deposit-form.spec.tsx

@@ -305,7 +305,9 @@ describe('Deposit form', () => {
       target: { value: '8' },
     });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Deposit' }));
+    fireEvent.click(
+      screen.getByText('Deposit', { selector: '[type="submit"]' })
+    );
 
     await waitFor(() => {
       expect(props.submitDeposit).toHaveBeenCalledWith({

libs/deposits/src/lib/deposit-form.tsx

@@ -13,6 +13,7 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import {
+  Button,
   TradingFormGroup,
   TradingInput,
   TradingInputError,
@@ -22,7 +23,6 @@ import {
   ButtonLink,
   TradingSelect,
   truncateMiddle,
-  TradingButton,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useWeb3React } from '@web3-react/core';
@@ -186,14 +186,14 @@ export const DepositForm = ({
               );
             }
             return (
-              <TradingButton
+              <Button
                 onClick={openDialog}
-                intent={Intent.Primary}
+                variant="primary"
                 type="button"
                 data-testid="connect-eth-wallet-btn"
               >
                 {t('Connect')}
-              </TradingButton>
+              </Button>
             );
           }}
         />
@@ -435,14 +435,15 @@ const FormButton = ({ approved, selectedAsset }: FormButtonProps) => {
           />
         </div>
       )}
-      <TradingButton
+      <Button
         type="submit"
         data-testid="deposit-submit"
+        variant={isActive ? 'primary' : 'default'}
         fill
-        disabled={!isActive || invalidChain}
+        disabled={invalidChain}
       >
         {t('Deposit')}
-      </TradingButton>
+      </Button>
     </>
   );
 };
@@ -454,7 +455,7 @@ const UseButton = (props: UseButtonProps) => {
     <button
       {...props}
       type="button"
-      className="absolute top-0 right-0 ml-auto text-sm underline"
+      className="ml-auto text-sm absolute top-0 right-0 underline"
     />
   );
 };
@@ -512,7 +513,7 @@ export const AddressField = ({
             setIsInput((curr) => !curr);
             onChange();
           }}
-          className="absolute top-0 right-0 ml-auto text-sm underline"
+          className="ml-auto text-sm absolute top-0 right-0 underline"
           data-testid="enter-pubkey-manually"
         >
           {isInput ? t('Select from wallet') : t('Enter manually')}

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

@@ -127,7 +127,7 @@ export const TOKEN_GOVERNANCE = '/proposals';
 export const TOKEN_PROPOSALS = '/proposals';
 export const TOKEN_PROPOSAL = '/proposals/:id';
 export const TOKEN_PROTOCOL_UPGRADE_PROPOSAL =
-  '/proposals/protocol-upgrade/:tag/:blockHeight';
+  '/proposals/protocol-upgrade/:tag';
 export const TOKEN_VALIDATOR = '/validators/:id';
 
 /**
@@ -135,12 +135,12 @@ export const TOKEN_VALIDATOR = '/validators/:id';
  */
 export const useProtocolUpgradeProposalLink = () => {
   const governance = useLinks(DApp.Token);
-  return (releaseTag: string, blockHeight: string) =>
+  return (releaseTag: string) =>
     governance(
       TOKEN_PROTOCOL_UPGRADE_PROPOSAL.replace(
         ':tag',
         stripFullStops(releaseTag)
-      ).replace(':blockHeight', blockHeight)
+      )
     );
 };
 

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

@@ -4,6 +4,7 @@ import { getDateTimeFormat } from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
 import type { Trade } from './fills-data-provider';
+
 import { FillsTable, getFeesBreakdown } from './fills-table';
 import { generateFill } from './test-helpers';
 
@@ -214,27 +215,6 @@ describe('FillsTable', () => {
     ).toBeInTheDocument();
   });
 
-  it('negative positionDecimalPoints should be properly rendered in size column', async () => {
-    const partyId = 'party-id';
-    const negativeDecimalPositionFill = generateFill({
-      ...defaultFill,
-      market: {
-        ...defaultFill.market,
-        positionDecimalPlaces: -4,
-      },
-    });
-    await act(async () => {
-      render(
-        <FillsTable partyId={partyId} rowData={[negativeDecimalPositionFill]} />
-      );
-    });
-
-    const sizeCell = screen
-      .getAllByRole('gridcell')
-      .find((c) => c.getAttribute('col-id') === 'size');
-    expect(sizeCell).toHaveTextContent('3,000,000,000');
-  });
-
   describe('getFeesBreakdown', () => {
     it('should return correct fees breakdown for a taker', () => {
       const fees = {

libs/ledger/src/lib/ledger-export-form.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import { z } from 'zod';
 import {
-  TradingButton,
+  Button,
   Loader,
   TradingFormGroup,
   TradingInput,
@@ -157,14 +157,15 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
             <Loader size="small" />
           </div>
         )}
-        <TradingButton
+        <Button
+          variant="primary"
           fill
           disabled={disabled}
           type="submit"
           data-testid="ledger-download-button"
         >
           {t('Download')}
-        </TradingButton>
+        </Button>
       </div>
     </form>
   );

libs/market-depth/src/lib/orderbook-controls.tsx

@@ -7,7 +7,7 @@ import {
   TradingDropdownContent,
   TradingDropdownItem,
 } from '@vegaprotocol/ui-toolkit';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { formatNumberFixed } from '@vegaprotocol/utils';
 
 export const OrderbookControls = ({
   lastTradedPrice,
@@ -15,14 +15,27 @@ export const OrderbookControls = ({
   decimalPlaces,
   setResolution,
 }: {
-  lastTradedPrice: string;
+  lastTradedPrice: string | undefined;
   resolution: number;
   decimalPlaces: number;
   setResolution: (resolution: number) => void;
 }) => {
   const [isOpen, setOpen] = useState(false);
 
-  const resolutions = createResolutions(lastTradedPrice, decimalPlaces);
+  const resolutions = new Array(
+    Math.max(lastTradedPrice?.toString().length ?? 0, decimalPlaces + 1)
+  )
+    .fill(null)
+    .map((v, i) => Math.pow(10, i));
+
+  const formatResolution = (r: number) => {
+    return formatNumberFixed(
+      Math.log10(r) - decimalPlaces > 0
+        ? Math.pow(10, Math.log10(r) - decimalPlaces)
+        : 0,
+      decimalPlaces - Math.log10(r)
+    );
+  };
 
   const increaseResolution = () => {
     const index = resolutions.indexOf(resolution);
@@ -43,7 +56,7 @@ export const OrderbookControls = ({
       <button
         onClick={increaseResolution}
         disabled={resolutions.indexOf(resolution) >= resolutions.length - 1}
-        className="flex items-center px-2 border-r cursor-pointer border-default disabled:cursor-default"
+        className="flex items-center px-2 border-r cursor-pointer border-default"
         data-testid="plus-button"
       >
         <VegaIcon size={12} name={VegaIconNames.PLUS} />
@@ -54,14 +67,12 @@ export const OrderbookControls = ({
         trigger={
           <TradingDropdownTrigger data-testid="resolution">
             <button
-              className="flex items-center justify-between px-2 gap-1"
+              className="flex items-center px-2 text-left gap-1"
               style={{
                 minWidth: `${
                   Math.max.apply(
                     null,
-                    resolutions.map(
-                      (item) => formatResolution(item, decimalPlaces).length
-                    )
+                    resolutions.map((item) => formatResolution(item).length)
                   ) + 5
                 }ch`,
               }}
@@ -72,19 +83,15 @@ export const OrderbookControls = ({
                   isOpen ? VegaIconNames.CHEVRON_UP : VegaIconNames.CHEVRON_DOWN
                 }
               />
-              {formatResolution(resolution, decimalPlaces)}
+              {formatResolution(resolution)}
             </button>
           </TradingDropdownTrigger>
         }
       >
         <TradingDropdownContent align="start">
           {resolutions.map((r) => (
-            <TradingDropdownItem
-              key={r}
-              onClick={() => setResolution(r)}
-              className="justify-end"
-            >
-              {formatResolution(r, decimalPlaces)}
+            <TradingDropdownItem key={r} onClick={() => setResolution(r)}>
+              {formatResolution(r)}
             </TradingDropdownItem>
           ))}
         </TradingDropdownContent>
@@ -92,7 +99,7 @@ export const OrderbookControls = ({
       <button
         onClick={decreaseResolution}
         disabled={resolutions.indexOf(resolution) <= 0}
-        className="flex items-center px-2 cursor-pointer border-x border-default disabled:cursor-default"
+        className="flex items-center px-2 cursor-pointer border-x border-default"
         data-testid="minus-button"
       >
         <VegaIcon size={12} name={VegaIconNames.MINUS} />
@@ -100,49 +107,3 @@ export const OrderbookControls = ({
     </div>
   );
 };
-
-export const formatResolution = (r: number, decimalPlaces: number) => {
-  let num = addDecimalsFormatNumber(r, decimalPlaces);
-
-  // Remove trailing zeroes
-  num = num.replace(/\.?0+$/, '');
-
-  return num;
-};
-
-/**
- * Create a list of resolutions based on the largest and smallest
- * possible values using the last traded price and the market
- * decimal places
- */
-export const createResolutions = (
-  lastTradedPrice: string,
-  decimalPlaces: number
-) => {
-  // number of levels determined by either the number
-  // of digits in the last traded price OR the number of decimal
-  // places. For example:
-  //
-  // last traded = 1 (0.001)
-  // dps = 3
-  // result = 3
-  //
-  // last traded = 100001 (1000.01
-  // dps = 2
-  // result = 6
-  const levelCount = Math.max(lastTradedPrice.length ?? 0, decimalPlaces + 1);
-  const generatedResolutions = new Array(levelCount)
-    .fill(null)
-    .map((_, i) => Math.pow(10, i));
-  const customResolutions = [2, 5, 20, 50, 200, 500];
-  const combined = customResolutions.concat(generatedResolutions);
-  combined.sort((a, b) => a - b);
-
-  // Remove any resolutions higher than the generated ones as
-  // we dont want a custom resolution higher than necessary
-  const resolutions = combined.filter((r) => {
-    return r <= generatedResolutions[generatedResolutions.length - 1];
-  });
-
-  return resolutions;
-};

libs/market-depth/src/lib/orderbook-data.ts

@@ -12,7 +12,7 @@ export interface OrderbookRowData {
   cumulativeVol: number;
 }
 
-export const getPriceLevel = (price: string, resolution: number) => {
+export const getPriceLevel = (price: string | bigint, resolution: number) => {
   const p = BigInt(price);
   const r = BigInt(resolution);
   let priceLevel = (p / r) * r;
@@ -43,7 +43,7 @@ const updateCumulativeVolumeByType = (
 };
 
 export const compactRows = (
-  data: PriceLevelFieldsFragment[],
+  data: PriceLevelFieldsFragment[] | null | undefined,
   dataType: VolumeType,
   resolution: number
 ) => {

libs/market-depth/src/lib/orderbook-row.tsx

@@ -13,7 +13,6 @@ interface OrderbookRowProps {
   cumulativeVolume: number;
   decimalPlaces: number;
   positionDecimalPlaces: number;
-  priceFormatDecimalPlaces: number;
   price: string;
   onClick: (args: { price?: string; size?: string }) => void;
   type: VolumeType;
@@ -27,7 +26,6 @@ export const OrderbookRow = memo(
     cumulativeVolume,
     decimalPlaces,
     positionDecimalPlaces,
-    priceFormatDecimalPlaces,
     price,
     onClick,
     type,
@@ -37,7 +35,6 @@ export const OrderbookRow = memo(
     const txtId = type === VolumeType.bid ? 'bid' : 'ask';
     const cols =
       width >= HIDE_CUMULATIVE_VOL_WIDTH ? 3 : width >= HIDE_VOL_WIDTH ? 2 : 1;
-
     return (
       <div className="relative px-1">
         <CumulationBar
@@ -57,8 +54,7 @@ export const OrderbookRow = memo(
               value={BigInt(price)}
               valueFormatted={addDecimalsFixedFormatNumber(
                 price,
-                decimalPlaces,
-                priceFormatDecimalPlaces
+                decimalPlaces
               )}
               className={classNames({
                 'text-market-red dark:text-market-red': type === VolumeType.ask,

libs/market-depth/src/lib/orderbook.spec.tsx

@@ -3,7 +3,6 @@ import userEvent from '@testing-library/user-event';
 import { generateMockData, VolumeType } from './orderbook-data';
 import { Orderbook, OrderbookMid } from './orderbook';
 import * as orderbookData from './orderbook-data';
-import { createResolutions, formatResolution } from './orderbook-controls';
 
 function mockOffsetSize(width: number, height: number) {
   Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
@@ -38,8 +37,7 @@ describe('Orderbook', () => {
     jest.clearAllMocks();
     mockOffsetSize(800, 768);
   });
-
-  it('lastTradedPrice should be in the middle', async () => {
+  it('markPrice should be in the middle', async () => {
     render(
       <Orderbook
         decimalPlaces={decimalPlaces}
@@ -73,7 +71,6 @@ describe('Orderbook', () => {
     expect(
       await screen.findByTestId(`last-traded-${params.lastTradedPrice}`)
     ).toBeInTheDocument();
-
     // Before resolution change the price is 122.934
     await userEvent.click(screen.getByTestId('price-122901'));
     expect(onClickSpy).toBeCalledWith({ price: '122.901' });
@@ -89,16 +86,15 @@ describe('Orderbook', () => {
     expect(orderbookData.compactRows).toHaveBeenCalledWith(
       mockedData.bids,
       VolumeType.bid,
-      2
+      10
     );
     expect(orderbookData.compactRows).toHaveBeenCalledWith(
       mockedData.asks,
       VolumeType.ask,
-      2
+      10
     );
-
-    await userEvent.click(screen.getByTestId('price-122938'));
-    expect(onClickSpy).toBeCalledWith({ price: '122.938' });
+    await userEvent.click(screen.getByTestId('price-12294'));
+    expect(onClickSpy).toBeCalledWith({ price: '122.94' });
   });
 
   it('plus - minus buttons should change resolution', async () => {
@@ -118,30 +114,26 @@ describe('Orderbook', () => {
       1
     );
     expect(screen.getByTestId('minus-button')).toBeDisabled();
-    await userEvent.click(screen.getByTestId('plus-button'));
-    expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
-      2
-    );
-
-    await userEvent.click(screen.getByTestId('plus-button'));
-    expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
-      5
-    );
-
-    expect(screen.getByTestId('minus-button')).not.toBeDisabled();
-    await userEvent.click(screen.getByTestId('minus-button'));
+    userEvent.click(screen.getByTestId('plus-button'));
     await waitFor(() => {
       expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
-        2
+        10
       );
     });
     expect(screen.getByTestId('minus-button')).not.toBeDisabled();
-
+    userEvent.click(screen.getByTestId('minus-button'));
+    await waitFor(() => {
+      expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
+        1
+      );
+    });
+    expect(screen.getByTestId('minus-button')).toBeDisabled();
     await userEvent.click(screen.getByTestId('resolution'));
+
     await waitFor(() => {
       expect(screen.getByRole('menu')).toBeInTheDocument();
     });
-    await userEvent.click(screen.getAllByRole('menuitem')[11]);
+    await userEvent.click(screen.getAllByRole('menuitem')[5]);
     await waitFor(() => {
       expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
         100000
@@ -231,58 +223,3 @@ describe('OrderbookMid', () => {
     expect(screen.getByTestId('icon-arrow-down')).toBeInTheDocument();
   });
 });
-
-describe('createResolutions', () => {
-  it('create resolutions relative to the market', () => {
-    expect(
-      createResolutions(
-        '1', // 0.001
-        3
-      )
-    ).toEqual([1, 2, 5, 10, 20, 50, 100, 200, 500, 1000]);
-
-    expect(
-      createResolutions(
-        '190017', // 1900.17
-        2
-      )
-    ).toEqual([1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 10000, 100000]);
-
-    expect(
-      createResolutions(
-        '123456789', // 1234.56789
-        5
-      )
-    ).toEqual([
-      1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 10000, 100000, 1000000,
-      10000000, 100000000,
-    ]);
-  });
-
-  it('removes resolutions that arent precise enough for the market', () => {
-    expect(
-      createResolutions(
-        '1', // 0.01
-        2
-      )
-    ).toEqual([1, 2, 5, 10, 20, 50, 100]);
-  });
-});
-
-describe('formatResolution', () => {
-  it('formats less than 1', () => {
-    expect(formatResolution(1, 2)).toEqual('0.01');
-    expect(formatResolution(1, 3)).toEqual('0.001');
-    expect(formatResolution(2, 4)).toEqual('0.0002');
-    expect(formatResolution(5, 8)).toEqual('0.00000005');
-    expect(formatResolution(10000, 5)).toEqual('0.1');
-  });
-
-  it('formats greater than 1', () => {
-    expect(formatResolution(1000, 2)).toEqual('10');
-    expect(formatResolution(100000, 4)).toEqual('10');
-    expect(formatResolution(10000000, 2)).toEqual('100,000');
-    expect(formatResolution(500, 2)).toEqual('5');
-    expect(formatResolution(500, 1)).toEqual('50');
-  });
-});

libs/market-depth/src/lib/orderbook.tsx

@@ -23,7 +23,6 @@ const OrderbookSide = ({
   type,
   decimalPlaces,
   positionDecimalPlaces,
-  priceFormatDecimalPlaces,
   onClick,
   width,
   maxVol,
@@ -32,7 +31,6 @@ const OrderbookSide = ({
   resolution: number;
   decimalPlaces: number;
   positionDecimalPlaces: number;
-  priceFormatDecimalPlaces: number;
   type: VolumeType;
   onClick: (args: { price?: string; size?: string }) => void;
   width: number;
@@ -55,11 +53,10 @@ const OrderbookSide = ({
         {rows.map((data) => (
           <OrderbookRow
             key={data.price}
-            price={data.price}
+            price={(BigInt(data.price) / BigInt(resolution)).toString()}
             onClick={onClick}
-            decimalPlaces={decimalPlaces}
+            decimalPlaces={decimalPlaces - Math.log10(resolution)}
             positionDecimalPlaces={positionDecimalPlaces}
-            priceFormatDecimalPlaces={priceFormatDecimalPlaces}
             volume={data.volume}
             cumulativeVolume={data.cumulativeVol}
             type={type}
@@ -168,12 +165,6 @@ export const Orderbook = ({
   const bestAskPrice = asks[0] ? asks[0].price : '0';
   const bestBidPrice = bids[0] ? bids[0].price : '0';
 
-  // we'll want to only display a relevant number of dps based on the
-  // current resolution selection
-  const priceFormatDecimalPlaces = Math.ceil(
-    decimalPlaces - Math.log10(resolution)
-  );
-
   return (
     <div className="h-full text-xs grid grid-rows-[1fr_min-content]">
       <div>
@@ -212,7 +203,6 @@ export const Orderbook = ({
                       resolution={resolution}
                       decimalPlaces={decimalPlaces}
                       positionDecimalPlaces={positionDecimalPlaces}
-                      priceFormatDecimalPlaces={priceFormatDecimalPlaces}
                       onClick={onClick}
                       width={width}
                       maxVol={maxVol}
@@ -230,7 +220,6 @@ export const Orderbook = ({
                       resolution={resolution}
                       decimalPlaces={decimalPlaces}
                       positionDecimalPlaces={positionDecimalPlaces}
-                      priceFormatDecimalPlaces={priceFormatDecimalPlaces}
                       onClick={onClick}
                       width={width}
                       maxVol={maxVol}

libs/markets/src/lib/markets-provider.ts

@@ -199,7 +199,7 @@ export const allMarketsWithLiveDataProvider = makeDerivedDataProvider<
     return data.find(
       (market) =>
         market.id ===
-        (parts[1].delta as MarketDataUpdateFieldsFragment)?.marketId
+        (parts[1].delta as MarketDataUpdateFieldsFragment).marketId
     );
   }
 );

libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { TradingButton } from '@vegaprotocol/ui-toolkit';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
 import { useVegaTransactionStore, useVegaWallet } from '@vegaprotocol/wallet';
 import { useHasAmendableOrder } from '../../order-hooks';
 
@@ -28,7 +28,12 @@ export const OpenOrdersMenu = ({ marketId }: { marketId: string }) => {
 };
 
 const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
+  <TradingButton
+    intent={Intent.Primary}
+    size="extra-small"
+    onClick={onClick}
+    data-testid="cancelAll"
+  >
     {t('Cancel all')}
   </TradingButton>
 );

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

@@ -12,10 +12,9 @@ import {
   TradingFormGroup,
   TradingInput,
   TradingInputError,
+  Button,
   Dialog,
-  VegaIcon,
-  VegaIconNames,
-  TradingButton,
+  Icon,
 } from '@vegaprotocol/ui-toolkit';
 import { useForm } from 'react-hook-form';
 import type { Order } from '../order-data-provider';
@@ -38,7 +37,7 @@ export const OrderEditDialog = ({
   order,
   onSubmit,
 }: OrderEditDialogProps) => {
-  const headerClassName = 'text-xs font-bold text-black dark:text-white';
+  const headerClassName = 'text-lg font-bold text-black dark:text-white';
   const {
     register,
     formState: { errors },
@@ -58,13 +57,13 @@ export const OrderEditDialog = ({
       open={isOpen}
       onChange={onChange}
       title={t('Edit order')}
-      icon={<VegaIcon name={VegaIconNames.EDIT} />}
+      icon={<Icon name="edit" />}
     >
       <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
         {order.market && (
           <div className="md:col-span-2">
             <p className={headerClassName}>{t(`Market`)}</p>
-            <p>{order.market.tradableInstrument.instrument.code}</p>
+            <p>{t(`${order.market.tradableInstrument.instrument.name}`)}</p>
           </div>
         )}
         {order.type === Schema.OrderType.TYPE_LIMIT && order.market && (
@@ -150,7 +149,9 @@ export const OrderEditDialog = ({
             )}
           </TradingFormGroup>
         </div>
-        <TradingButton type="submit">{t('Update')}</TradingButton>
+        <Button variant="primary" size="md" type="submit">
+          {t('Update')}
+        </Button>
       </form>
     </Dialog>
   );