test: fix lint

Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>

.github/workflows/add-ipfs-notes-to-release.yml

@@ -9,6 +9,11 @@ jobs:
     runs-on: ubuntu-22.04
     timeout-minutes: 30
     steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
 
@@ -27,14 +32,16 @@ jobs:
 
       - name: resolve ipfs hashes for release
         run: |
-          echo "Tag name: ${{ github.event.release.tag_name }}"
           echo "Name: ${{ github.event.release.name }}"
           echo "Description: ${{ github.event.release.body }}"
-          until docker pull vegaprotocol/trading:${{ github.event.release.tag_name }}; do
+          echo "Tag: ${{ github.event.release.tag_name }}"
+          commit="$(git rev-list -n 1 ${{ github.event.release.tag_name }})"
+          echo "Commit: $commit"
+          until docker pull vegaprotocol/trading:$commit; do
             echo "Image not pushed yet, waiting 60 seconds"
             sleep 60
           done
-          docker run --rm vegaprotocol/trading:${{ github.event.release.tag_name }} cat /ipfs-hash > ipfs-hash
+          docker run --rm vegaprotocol/trading:$commit cat /ipfs-hash > ipfs-hash
           curl -L https://dist.ipfs.tech/kubo/v0.20.0/kubo_v0.20.0_linux-amd64.tar.gz -o kubo.tgz
           tar -xzf kubo.tgz
           export PATH="$PATH:$PWD/kubo"

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

@@ -6,8 +6,6 @@ on:
       - release/*
       - develop
       - main
-    tags:
-      - v*
   pull_request:
     types:
       - opened
@@ -152,10 +150,15 @@ jobs:
               projects+=' "multisig-signer" '
             fi
             if echo "$affected" | grep -q static; then
-              echo "Static are affected"
+              echo "static is affected"
               echo "Deploying static on s3"
               projects+=' "static" '
             fi
+            if echo "$affected" | grep -q ui-toolkit; then
+              echo "ui-toolkit is affected"
+              echo "Deploying ui-toolkit on s3"
+              projects+=' "ui-toolkit" '
+            fi
           fi
 
           projects_e2e=${projects_e2e%?}

.github/workflows/publish-dist.yml

@@ -31,6 +31,7 @@ jobs:
         uses: docker/setup-buildx-action@v2
 
       - name: Log in to the Container registry (ghcr)
+        if: ${{ github.event_name == 'pull_request' }}
         uses: docker/login-action@v2
         with:
           registry: ghcr.io
@@ -39,7 +40,7 @@ jobs:
 
       - name: Log in to the Container registry (docker hub)
         uses: docker/login-action@v2
-        if: ${{ startsWith(github.ref, 'refs/tags/v') }}
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && ( endsWith(github.ref, 'main') || endsWith(github.ref, 'release/testnet') ) }}
         with:
           # registry: registry.hub.docker.com
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -78,10 +79,12 @@ jobs:
               envName="mainnet"
               bucketName="static.vega.xyz"
             fi
+            if [[ "${{ matrix.app }}" = "ui-toolkit" ]]; then
+              envName="mainnet"
+              bucketName="ui.vega.rocks"
+            fi
           elif [[ "${{ github.ref }}" =~ .*main$ ]]; then
             envName="mainnet"
-          elif [[ "${{ matrix.app}}" = "trading" ]] && [[ "${{ startsWith(github.ref, 'refs/tags/v') && 'true' || 'false' }}" = "true" ]]; then
-            envName="mainnet"
           fi
 
           if [[ "${envName}" = "mainnet" ]]; then
@@ -110,14 +113,15 @@ jobs:
         run: |
           flags=""
           if [[ ! -z "${{ env.ENV_NAME }}" ]]; then
-            if [[ "${{ env.ENV_NAME }}" != "ops-vega" ]]; then
-              flags="--env=${{ env.ENV_NAME }}"
-            fi
+            flags="--env=${{ env.ENV_NAME }}"
           fi
 
           if [ "${{ matrix.app }}" = "trading" ]; then
             yarn nx export trading $flags || (yarn install && yarn nx export trading $flags)
             DIST_LOCATION=dist/apps/trading/exported
+          elif [ "${{ matrix.app }}" = "ui-toolkit" ]; then
+            NODE_ENV=production yarn nx run ui-toolkit:build-storybook
+            DIST_LOCATION=dist/storybook/ui-toolkit
           else
             yarn nx build ${{ matrix.app }} $flags || (yarn install && yarn nx build ${{ matrix.app }} $flags)
             DIST_LOCATION=dist/apps/${{ matrix.app }}
@@ -152,7 +156,9 @@ jobs:
 
       - name: Publish dist as docker image (ghcr)
         uses: docker/build-push-action@v3
-        if: ${{ github.event_name == 'pull_request' || (matrix.app == 'trading' && github.event_name == 'push' && !startsWith(github.ref, 'refs/tags/v') ) }}
+        continue-on-error: true
+        id: ghcr-push
+        if: ${{ github.event_name == 'pull_request' }}
         with:
           context: .
           file: docker/node-outside-docker.Dockerfile
@@ -165,7 +171,9 @@ jobs:
 
       - name: Publish dist as docker image (docker hub)
         uses: docker/build-push-action@v3
-        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        continue-on-error: true
+        id: dockerhub-push
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && ( endsWith(github.ref, 'main') || endsWith(github.ref, 'release/testnet') ) }}
         with:
           context: .
           file: docker/node-outside-docker.Dockerfile
@@ -174,13 +182,41 @@ jobs:
             APP=${{ matrix.app }}
             ENV_NAME=${{ env.ENV_NAME }}
           tags: |
-            vegaprotocol/${{ matrix.app }}:${{ github.ref_name }}
-            vegaprotocol/${{ matrix.app }}:mainnet
+            vegaprotocol/${{ matrix.app }}:${{ github.sha }}
+            vegaprotocol/${{ matrix.app }}:${{ endsWith(github.ref, 'main') && 'mainnet' || endsWith(github.ref, 'release/testnet') && 'testnet' || '' }}
+
+      - name: Publish dist as docker image (ghcr - retry)
+        uses: docker/build-push-action@v3
+        if: ${{ steps.ghcr-push.outcome == 'failure' }}
+        with:
+          context: .
+          file: docker/node-outside-docker.Dockerfile
+          push: true
+          build-args: |
+            APP=${{ matrix.app }}
+            ENV_NAME=${{ env.ENV_NAME }}
+          tags: |
+            ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:${{ github.event.pull_request.head.sha || github.sha }}
+
+      - name: Publish dist as docker image (docker hub - retry)
+        uses: docker/build-push-action@v3
+        if: ${{ steps.dockerhub-push.outcome == 'failure' }}
+        with:
+          context: .
+          file: docker/node-outside-docker.Dockerfile
+          push: true
+          build-args: |
+            APP=${{ matrix.app }}
+            ENV_NAME=${{ env.ENV_NAME }}
+          tags: |
+            vegaprotocol/${{ matrix.app }}:${{ github.sha }}
+            vegaprotocol/${{ matrix.app }}:${{ endsWith(github.ref, 'main') && 'mainnet' || endsWith(github.ref, 'release/testnet') && 'testnet' || '' }}
 
       # bucket creation in github.com/vegaprotocol/terraform//frontend
       - name: Publish dist to s3
         uses: jakejarvis/s3-sync-action@master
-        if: ${{ github.event_name == 'push' && !startsWith(github.ref, 'refs/tags/v') && ( matrix.app != 'trading' || (matrix.app == 'trading' && !endsWith(github.ref, 'main') ) ) }}
+        # s3 releases are not happening for trading on mainnet - it's IPFS
+        if: ${{ github.event_name == 'push' && ( matrix.app != 'trading' || (matrix.app == 'trading' && !( endsWith(github.ref, 'main') || endsWith(github.ref, 'release/testnet') ) ) ) }}
         with:
           args: --acl private --follow-symlinks --delete
         env:
@@ -198,22 +234,38 @@ jobs:
           number: ${{ github.event.number }}
 
       - name: Trigger fleek deployment
-        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        # release to ipfs happens only on mainnet (represented by main branch) for trading
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && ( endsWith(github.ref, 'main') || endsWith(github.ref, 'release/testnet') ) }}
         run: |
-          # display info about app
-          curl -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
-            -H "Content-Type: application/json" \
-            -d '{"query": "query{getSiteById(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id latestDeploy{id status}}}"}' \
-            https://api.fleek.co/graphql
+          if echo ${{ github.ref }} | grep -q main; then
+            # display info about app
+            curl --fail -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
+              -H "Content-Type: application/json" \
+              -d '{"query": "query{getSiteById(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id latestDeploy{id status}}}"}' \
+              https://api.fleek.co/graphql
 
-          # trigger new deployment as base image is always set to vegaprotocol/trading:mainnet
-          curl -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
-            -H "Content-Type: application/json" \
-            -d '{"query": "mutation{triggerDeploy(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id status}}"}' \
-            https://api.fleek.co/graphql
+            # trigger new deployment as base image is always set to vegaprotocol/trading:mainnet
+            curl --fail -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
+              -H "Content-Type: application/json" \
+              -d '{"query": "mutation{triggerDeploy(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id status}}"}' \
+              https://api.fleek.co/graphql
+
+          elif echo ${{ github.ref }} | grep -q release/testnet; then
+            # display info about app
+            curl --fail -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
+              -H "Content-Type: application/json" \
+              -d '{"query": "query{getSiteById(siteId:\"79baaeca-1952-4ae7-a256-f668cfc1d68e\"){id latestDeploy{id status}}}"}' \
+              https://api.fleek.co/graphql
+
+            # trigger new deployment as base image is always set to vegaprotocol/trading:mainnet
+            curl --fail -H "Authorization: ${{ secrets.FLEEK_API_KEY }}" \
+              -H "Content-Type: application/json" \
+              -d '{"query": "mutation{triggerDeploy(siteId:\"79baaeca-1952-4ae7-a256-f668cfc1d68e\"){id status}}"}' \
+              https://api.fleek.co/graphql
+          fi
 
       - name: Check out ipfs-redirect
-        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && endsWith(github.ref, 'main') }}
         uses: actions/checkout@v3
         with:
           repository: 'vegaprotocol/ipfs-redirect'
@@ -222,7 +274,7 @@ jobs:
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
 
       - name: Update console.vega.xyz DNS to redirect to the new console
-        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && endsWith(github.ref, 'main') }}
         env:
           GH_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
         run: |
@@ -259,26 +311,49 @@ jobs:
             gh pr merge "${pr_url}" --delete-branch --squash --admin
           )
 
-          # # Generate console URL
-          # new_console_url_type=ipfs
-          # # new_console_url_type=ipns
-          # new_console_url_domain=cf-ipfs.com
-          # # new_console_url_domain=dweb.link
-          # new_console_url="https://${new_cid}.${new_console_url_type}.${new_console_url_domain}/"
-          # echo "new_console_url=${new_console_url}"
+      - name: Update console.fairground.wtf DNS to redirect to the new console
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && endsWith(github.ref, 'testnet') }}
+        run: |
+          curl -L https://dist.ipfs.tech/kubo/v0.20.0/kubo_v0.20.0_linux-amd64.tar.gz -o kubo.tgz
+          tar -xzf kubo.tgz
+          export PATH="$PATH:$PWD/kubo"
+          which ipfs
+          new_hash=$(cat ${{ matrix.app }}-ipfs-hash)
+          new_cid=$(ipfs cid format -v 1 -b base32 $new_hash)
 
-          # # Update record in DNSimple
-          # # docs: https://developer.dnsimple.com/v2/zones/records/#updateZoneRecord
-          # dnsimple_account_id=84895
-          # dnsimple_zone_name=console.vega.xyz
-          # dnsimple_record_id=44409591
-          # # see: https://dnsimple.com/a/84895/domains/console.vega.xyz/records/44409591/edit
+          # Generate console URL
 
-          # curl  -H 'Authorization: Bearer ${{ secrets.DNSIMPLE_API_TOKEN }}' \
-          #       -H 'Accept: application/json' \
-          #       -H 'Content-Type: application/json' \
-          #       -X PATCH \
-          #       -d "{
-          #             \"content\": \"${new_console_url}\"
-          #       }" \
-          #       https://api.dnsimple.com/v2/${dnsimple_account_id}/zones/${dnsimple_zone_name}/records/${dnsimple_record_id}
+          new_console_url_type=ipfs
+          # new_console_url_type=ipns
+
+          new_console_url_domain=cf-ipfs.com
+          # new_console_url_domain=dweb.link
+
+          new_console_url="http://${new_cid}.${new_console_url_type}.${new_console_url_domain}/"
+          echo "new_console_url=${new_console_url}"
+
+          # Update record in DNSimple
+          # docs: https://developer.dnsimple.com/v2/zones/records/#updateZoneRecord
+          dnsimple_account_id=84895
+          dnsimple_zone_name=fairground.wtf
+          dnsimple_record_id=45300615
+          # see: https://dnsimple.com/a/84895/domains/fairground.wtf/records/45300615/edit
+          curl --fail -H 'Authorization: Bearer ${{ secrets.DNSIMPLE_API_TOKEN }}' \
+                -H 'Accept: application/json' \
+                -H 'Content-Type: application/json' \
+                -X PATCH \
+                -d "{
+                      \"content\": \"${new_console_url}\"
+                }" \
+                https://api.dnsimple.com/v2/${dnsimple_account_id}/zones/${dnsimple_zone_name}/records/${dnsimple_record_id}
+
+          # trading.fairground.wtf
+          dnsimple_record_id=45302531
+          curl --fail -H 'Authorization: Bearer ${{ secrets.DNSIMPLE_API_TOKEN }}' \
+                -H 'Accept: application/json' \
+                -H 'Content-Type: application/json' \
+                -X PATCH \
+                -d "{
+                      \"content\": \"${new_console_url}\"
+                }" \
+                https://api.dnsimple.com/v2/${dnsimple_account_id}/zones/${dnsimple_zone_name}/records/${dnsimple_record_id}

apps/explorer/.env.mainnet

@@ -5,7 +5,7 @@ NX_SENTRY_DSN=https://b3a56b03eda842faad731f3ea9dfd1bc@o286262.ingest.sentry.io/
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_URL=https://api.vega.community/graphql
 NX_VEGA_ENV=MAINNET
-NX_BLOCK_EXPLORER=https://be.vega.community/rest/
+NX_BLOCK_EXPLORER=https://be.vega.community/rest
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json

apps/explorer/project.json

@@ -70,7 +70,7 @@
       "executor": "@nrwl/workspace:run-commands",
       "options": {
         "commands": [
-          "npx openapi-typescript https://raw.githubusercontent.com/vegaprotocol/documentation/main/specs/v0.67.3/blockexplorer.openapi.json --output apps/explorer/src/types/explorer.d.ts --immutable-types"
+          "npx openapi-typescript https://raw.githubusercontent.com/vegaprotocol/documentation/main/specs/v0.71.4/blockexplorer.openapi.json --output apps/explorer/src/types/explorer.d.ts --immutable-types"
         ]
       }
     },

apps/explorer/src/app/components/blocks/blocks-refetch.spec.tsx

@@ -1,29 +1,13 @@
 import WS from 'jest-websocket-mock';
-import useWebSocket from 'react-use-websocket';
-import {
-  render,
-  screen,
-  fireEvent,
-  act,
-  waitFor,
-} from '@testing-library/react';
-import { TendermintWebsocketContext } from '../../contexts/websocket/tendermint-websocket-context';
+import { render, screen } from '@testing-library/react';
 import { BlocksRefetch } from './blocks-refetch';
 
 const BlocksRefetchInWebsocketProvider = ({
   callback,
-  mocketLocation,
 }: {
   callback: () => null;
-  mocketLocation: string;
 }) => {
-  const contextShape = useWebSocket(mocketLocation);
-
-  return (
-    <TendermintWebsocketContext.Provider value={{ ...contextShape }}>
-      <BlocksRefetch refetch={callback} />
-    </TendermintWebsocketContext.Provider>
-  );
+  return <BlocksRefetch refetch={callback} />;
 };
 
 describe('Blocks refetch', () => {
@@ -32,111 +16,8 @@ describe('Blocks refetch', () => {
     const mocket = new WS(mocketLocation, { jsonProtocol: true });
     new WebSocket(mocketLocation);
 
-    render(
-      <BlocksRefetchInWebsocketProvider
-        callback={() => null}
-        mocketLocation={mocketLocation}
-      />
-    );
-    await mocket.connected;
-    expect(screen.getByTestId('new-blocks')).toHaveTextContent('new blocks');
+    render(<BlocksRefetchInWebsocketProvider callback={() => null} />);
     expect(screen.getByTestId('refresh')).toBeInTheDocument();
     mocket.close();
   });
-
-  it('should initiate callback when the button is clicked', async () => {
-    const mocketLocation = 'wss:localhost:3003';
-    const mocket = new WS(mocketLocation, { jsonProtocol: true });
-    new WebSocket(mocketLocation);
-
-    const callback = jest.fn();
-    render(
-      <BlocksRefetchInWebsocketProvider
-        callback={callback}
-        mocketLocation={mocketLocation}
-      />
-    );
-    await mocket.connected;
-    const button = screen.getByTestId('refresh');
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    expect(callback.mock.calls.length).toEqual(1);
-    mocket.close();
-  });
-
-  it('should show new blocks as websocket is correctly updated', async () => {
-    const mocketLocation = 'wss:localhost:3004';
-    const mocket = new WS(mocketLocation, { jsonProtocol: true });
-    new WebSocket(mocketLocation);
-    render(
-      <BlocksRefetchInWebsocketProvider
-        callback={() => null}
-        mocketLocation={mocketLocation}
-      />
-    );
-    await mocket.connected;
-
-    // Ensuring we send an ID equal to the one the client subscribed with.
-    await waitFor(() => expect(mocket.messages.length).toEqual(1));
-    // @ts-ignore id on messages
-    const id = mocket.messages[0].id;
-
-    const newBlockMessage = {
-      id,
-      result: {
-        query: "tm.event = 'NewBlock'",
-      },
-    };
-
-    expect(screen.getByTestId('new-blocks')).toHaveTextContent('0 new blocks');
-
-    act(() => {
-      mocket.send(newBlockMessage);
-    });
-
-    expect(screen.getByTestId('new-blocks')).toHaveTextContent('1 new blocks');
-
-    act(() => {
-      mocket.send(newBlockMessage);
-    });
-
-    expect(screen.getByTestId('new-blocks')).toHaveTextContent('2 new blocks');
-    mocket.close();
-  });
-
-  it('will not show new blocks if websocket has wrong ID', async () => {
-    const mocketLocation = 'wss:localhost:3005';
-    const mocket = new WS(mocketLocation, { jsonProtocol: true });
-    new WebSocket(mocketLocation);
-
-    render(
-      <BlocksRefetchInWebsocketProvider
-        callback={() => null}
-        mocketLocation={mocketLocation}
-      />
-    );
-    await mocket.connected;
-
-    // Ensuring we send an ID equal to the one the client subscribed with.
-    await waitFor(() => expect(mocket.messages.length).toEqual(1));
-
-    const newBlockMessageBadId = {
-      id: 'blahblahblah',
-      result: {
-        query: "tm.event = 'NewBlock'",
-      },
-    };
-
-    expect(screen.getByTestId('new-blocks')).toHaveTextContent('0 new blocks');
-
-    act(() => {
-      mocket.send(newBlockMessageBadId);
-    });
-
-    expect(screen.getByTestId('new-blocks')).toHaveTextContent('0 new blocks');
-    mocket.close();
-  });
 });

apps/explorer/src/app/components/blocks/blocks-refetch.tsx

@@ -1,36 +1,19 @@
-import { useState, useEffect } from 'react';
-import { useTendermintWebsocket } from '../../hooks/use-tendermint-websocket';
 import { t } from '@vegaprotocol/i18n';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import { Button, Icon } from '@vegaprotocol/ui-toolkit';
 
 interface BlocksRefetchProps {
   refetch: () => void;
 }
 
 export const BlocksRefetch = ({ refetch }: BlocksRefetchProps) => {
-  const [blocksToLoad, setBlocksToLoad] = useState<number>(0);
-
-  const { messages } = useTendermintWebsocket({
-    query: "tm.event = 'NewBlock'",
-  });
-
-  useEffect(() => {
-    if (messages.length > 0) {
-      setBlocksToLoad((prev) => prev + 1);
-    }
-  }, [messages]);
-
   const refresh = () => {
     refetch();
-    setBlocksToLoad(0);
   };
 
   return (
-    <div className="mb-4">
-      <span data-testid="new-blocks">{blocksToLoad} new blocks - </span>
-      <ButtonLink onClick={refresh} data-testid="refresh">
-        {t('refresh to see latest')}
-      </ButtonLink>
-    </div>
+    <Button onClick={refresh} data-testid="refresh" size="xs">
+      <Icon name="refresh" className="!align-baseline mr-2" size={3} />
+      {t('Load new')}
+    </Button>
   );
 };

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

@@ -77,7 +77,7 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
         hide={window.innerWidth <= BREAKPOINT_MD}
         valueGetter={({
           data,
-        }: VegaValueGetterParams<MarketFieldsFragment, 'state'>) => {
+        }: VegaValueGetterParams<MarketFieldsFragment>) => {
           return data?.state ? MarketStateMapping[data?.state] : '-';
         }}
       />

apps/explorer/src/app/components/txs/tx-filter-label.tsx

@@ -0,0 +1,24 @@
+import { t } from '@vegaprotocol/i18n';
+
+export interface FilterLabelProps {
+  filters: Set<string>;
+}
+
+/**
+ * Renders the list (currently limited to 1) of filters set by the
+ * Transaction Filter
+ */
+export function FilterLabel({ filters }: FilterLabelProps) {
+  if (!filters || filters.size !== 1) {
+    return <span className="uppercase">{t('Filter')}</span>;
+  }
+
+  return (
+    <div>
+      <span className="uppercase">{t('Filters')}:</span>&nbsp;
+      <code className="bg-vega-light-150 px-2 rounded-md capitalize">
+        {Array.from(filters)[0]}
+      </code>
+    </div>
+  );
+}

apps/explorer/src/app/components/txs/tx-filter.tsx

@@ -0,0 +1,164 @@
+import { t } from '@vegaprotocol/i18n';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  DropdownMenuSubContent,
+  Icon,
+  Button,
+} from '@vegaprotocol/ui-toolkit';
+import type { Dispatch, SetStateAction } from 'react';
+import { FilterLabel } from './tx-filter-label';
+
+// All possible transaction types. Should be generated.
+export type FilterOption =
+  | 'Amend LiquidityProvision Order'
+  | 'Amend Order'
+  | 'Batch Market Instructions'
+  | 'Cancel LiquidityProvision Order'
+  | 'Cancel Order'
+  | 'Cancel Transfer Funds'
+  | 'Chain Event'
+  | 'Delegate'
+  | 'Ethereum Key Rotate Submission'
+  | 'Issue Signatures'
+  | 'Key Rotate Submission'
+  | 'Liquidity Provision Order'
+  | 'Node Signature'
+  | 'Node Vote'
+  | 'Proposal'
+  | 'Protocol Upgrade'
+  | 'Register new Node'
+  | 'State Variable Proposal'
+  | 'Submit Oracle Data'
+  | 'Submit Order'
+  | 'Transfer Funds'
+  | 'Undelegate'
+  | 'Validator Heartbeat'
+  | 'Vote on Proposal'
+  | 'Withdraw';
+
+// Alphabetised list of transaction types to appear at the top level
+export const PrimaryFilterOptions: FilterOption[] = [
+  'Amend LiquidityProvision Order',
+  'Amend Order',
+  'Batch Market Instructions',
+  'Cancel LiquidityProvision Order',
+  'Cancel Order',
+  'Cancel Transfer Funds',
+  'Delegate',
+  'Liquidity Provision Order',
+  'Proposal',
+  'Submit Oracle Data',
+  'Submit Order',
+  'Transfer Funds',
+  'Undelegate',
+  'Vote on Proposal',
+  'Withdraw',
+];
+
+// Alphabetised list of transaction types to nest under a 'More...' submenu
+export const SecondaryFilterOptions: FilterOption[] = [
+  'Chain Event',
+  'Ethereum Key Rotate Submission',
+  'Issue Signatures',
+  'Key Rotate Submission',
+  'Node Signature',
+  'Node Vote',
+  'Protocol Upgrade',
+  'Register new Node',
+  'State Variable Proposal',
+  'Validator Heartbeat',
+];
+
+export const AllFilterOptions: FilterOption[] = [
+  ...PrimaryFilterOptions,
+  ...SecondaryFilterOptions,
+];
+
+export interface TxFilterProps {
+  filters: Set<FilterOption>;
+  setFilters: Dispatch<SetStateAction<Set<FilterOption>>>;
+}
+
+/**
+ * Renders a structured dropdown menu of all of the available transaction
+ * types. It allows a user to select one transaction type to view. Later
+ * it will support multiple selection, but until the API supports that it is
+ * one or all.
+ * @param filters null or Set of tranaction types
+ * @param setFilters A function to update the filters prop
+ * @returns
+ */
+export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
+  return (
+    <DropdownMenu
+      modal={false}
+      trigger={
+        <DropdownMenuTrigger className="ml-2">
+          <Button size="xs">
+            <FilterLabel filters={filters} />
+          </Button>
+        </DropdownMenuTrigger>
+      }
+    >
+      <DropdownMenuContent>
+        {filters.size > 1 ? null : (
+          <>
+            <DropdownMenuCheckboxItem
+              onCheckedChange={() => setFilters(new Set(AllFilterOptions))}
+            >
+              {t('Clear filters')} <Icon name="cross" />
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {PrimaryFilterOptions.map((f) => (
+          <DropdownMenuCheckboxItem
+            key={f}
+            checked={filters.has(f)}
+            onCheckedChange={() => {
+              // NOTE: These act like radio buttons until the API supports multiple filters
+              setFilters(new Set([f]));
+            }}
+            id={`radio-${f}`}
+          >
+            {f}
+            <DropdownMenuItemIndicator>
+              <Icon name="tick-circle" />
+            </DropdownMenuItemIndicator>
+          </DropdownMenuCheckboxItem>
+        ))}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            {t('More Types')}
+            <Icon name="chevron-right" />
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            {SecondaryFilterOptions.map((f) => (
+              <DropdownMenuCheckboxItem
+                key={f}
+                checked={filters.has(f)}
+                onCheckedChange={(checked) => {
+                  // NOTE: These act like radio buttons until the API supports multiple filters
+                  setFilters(new Set([f]));
+                }}
+                id={`radio-${f}`}
+              >
+                {f}
+                <DropdownMenuItemIndicator>
+                  <Icon name="tick-circle" className="inline" />
+                </DropdownMenuItemIndicator>
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

apps/explorer/src/app/components/txs/txs-infinite-list.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { t } from '@vegaprotocol/i18n';
@@ -69,6 +69,17 @@ export const TxsInfiniteList = ({
 }: TxsInfiniteListProps) => {
   const { screenSize } = useScreenDimensions();
   const isStacked = ['xs', 'sm'].includes(screenSize);
+  const infiniteLoaderRef = useRef<InfiniteLoader>(null);
+  const hasMountedRef = useRef(false);
+
+  useEffect(() => {
+    if (hasMountedRef.current) {
+      if (infiniteLoaderRef.current) {
+        infiniteLoaderRef.current.resetloadMoreItemsCache(true);
+      }
+    }
+    hasMountedRef.current = true;
+  }, [loadMoreTxs]);
 
   if (!txs) {
     if (!areTxsLoading) {
@@ -110,6 +121,7 @@ export const TxsInfiniteList = ({
           isItemLoaded={isItemLoaded}
           itemCount={itemCount}
           loadMoreItems={loadMoreItems}
+          ref={infiniteLoaderRef}
         >
           {({ onItemsRendered, ref }) => (
             <List

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

@@ -33,7 +33,7 @@ export const getTxsDataUrl = ({ limit, filters }: IGetTxsDataUrl) => {
   // Hacky fix for param as array
   let urlAsString = url.toString();
   if (filters) {
-    urlAsString += '&' + filters;
+    urlAsString += '&' + filters.replace(' ', '%20');
   }
 
   return urlAsString;
@@ -65,6 +65,14 @@ export const useTxsData = ({ limit, filters }: IUseTxsData) => {
     }
   }, [setTxsState, data]);
 
+  useEffect(() => {
+    setTxsState((prev) => ({
+      txsData: [],
+      hasMoreTxs: true,
+      lastCursor: '',
+    }));
+  }, [filters]);
+
   const loadTxs = useCallback(() => {
     return refetch({
       limit: limit,

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

@@ -5,17 +5,43 @@ import { TxsInfiniteList } from '../../../components/txs';
 import { useTxsData } from '../../../hooks/use-txs-data';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 
-const BE_TXS_PER_REQUEST = 20;
+import { useState } from 'react';
+import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
+
+const BE_TXS_PER_REQUEST = 15;
 
 export const TxsList = () => {
   useDocumentTitle(['Transactions']);
 
-  const { hasMoreTxs, loadTxs, error, txsData, refreshTxs, loading } =
-    useTxsData({ limit: BE_TXS_PER_REQUEST });
   return (
-    <section className="md:p-2 lg:p-4 xl:p-6">
+    <section className="md:p-2 lg:p-4 xl:p-6 relative">
       <RouteTitle>{t('Transactions')}</RouteTitle>
-      <BlocksRefetch refetch={refreshTxs} />
+      <TxsListFiltered />
+    </section>
+  );
+};
+
+export const TxsListFiltered = () => {
+  const [filters, setFilters] = useState(new Set(AllFilterOptions));
+
+  const f =
+    filters && filters.size === 1
+      ? `filters[cmd.type]=${Array.from(filters)[0]}`
+      : '';
+
+  const { hasMoreTxs, loadTxs, error, txsData, refreshTxs, loading } =
+    useTxsData({
+      limit: BE_TXS_PER_REQUEST,
+      filters: f,
+    });
+
+  return (
+    <>
+      <menu className="mb-2">
+        <BlocksRefetch refetch={refreshTxs} />
+        <TxsFilter filters={filters} setFilters={setFilters} />
+      </menu>
+
       <TxsInfiniteList
         hasMoreTxs={hasMoreTxs}
         areTxsLoading={loading}
@@ -24,6 +50,6 @@ export const TxsList = () => {
         error={error}
         className="mb-28"
       />
-    </section>
+    </>
   );
 };

apps/governance-e2e/cypress.config.js

@@ -49,7 +49,7 @@ module.exports = defineConfig({
     vegaTokenContractAddress: '0xF41bD86d462D36b997C0bbb4D97a0a3382f205B7',
     vegaTokenAddress: '0x67175Da1D5e966e40D11c4B2519392B2058373de',
     txTimeout: { timeout: 70000 },
-    epochTimeout: { timeout: 6000 },
+    epochTimeout: { timeout: 10000 },
     blockConfirmations: 3,
     grepTags: '@regression @smoke @slow',
     grepFilterSpecs: true,

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

@@ -205,29 +205,33 @@ context(
     });
 
     // 3003-PMAN-001
-    it('Able to submit valid new market proposal', function () {
-      goToMakeNewProposal(governanceProposalType.NEW_MARKET);
-      cy.get(newProposalTitle).type('Test new market proposal');
-      cy.get(newProposalDescription).type('E2E test for proposals');
-      cy.fixture('/proposals/new-market').then((newMarketProposal) => {
-        const newMarketPayload = JSON.stringify(newMarketProposal);
-        cy.get(newProposalTerms).type(newMarketPayload, {
-          parseSpecialCharSequences: false,
-          delay: 2,
-        });
-      });
-      cy.get(proposalDownloadBtn)
-        .should('be.visible')
-        .click()
-        .then(() => {
-          cy.wrap(
-            getDownloadedProposalJsonPath('vega-new-market-proposal-')
-          ).then((filePath) => {
-            goToMakeNewProposal(governanceProposalType.RAW);
-            submitUniqueRawProposal({ proposalBody: filePath }); // 3003-PMAN-003
+    it(
+      'Able to submit valid new market proposal',
+      { tags: '@smoke' },
+      function () {
+        goToMakeNewProposal(governanceProposalType.NEW_MARKET);
+        cy.get(newProposalTitle).type('Test new market proposal');
+        cy.get(newProposalDescription).type('E2E test for proposals');
+        cy.fixture('/proposals/new-market').then((newMarketProposal) => {
+          const newMarketPayload = JSON.stringify(newMarketProposal);
+          cy.get(newProposalTerms).type(newMarketPayload, {
+            parseSpecialCharSequences: false,
+            delay: 2,
           });
         });
-    });
+        cy.get(proposalDownloadBtn)
+          .should('be.visible')
+          .click()
+          .then(() => {
+            cy.wrap(
+              getDownloadedProposalJsonPath('vega-new-market-proposal-')
+            ).then((filePath) => {
+              goToMakeNewProposal(governanceProposalType.RAW);
+              submitUniqueRawProposal({ proposalBody: filePath }); // 3003-PMAN-003
+            });
+          });
+      }
+    );
 
     it('Unable to submit new market proposal with missing/invalid fields', function () {
       const errorMsg =

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

@@ -54,7 +54,7 @@ context(
   'Staking Tab - with eth and vega wallets connected',
   { tags: '@slow' },
   function () {
-    // 2001-STKE-002, 2001-STKE-032
+    // 1002-STKE-002, 1002-STKE-032
     before('visit staking tab and connect vega wallet', function () {
       cy.visit('/');
       ethereumWalletConnect();
@@ -63,7 +63,7 @@ context(
       vegaWalletSetSpecifiedApprovalAmount('1000');
     });
 
-    describe.skip('Eth wallet - contains VEGA tokens', function () {
+    describe('Eth wallet - contains VEGA tokens', function () {
       beforeEach(
         'teardown wallet & drill into a specific validator',
         function () {
@@ -77,25 +77,41 @@ context(
         }
       );
 
+      // 1002-STKE-035 1002-STKE-036
+      it('Unable to stake against a validator with less than minimum and more than associated amount', function () {
+        ensureSpecifiedUnstakedTokensAreAssociated('3');
+        verifyUnstakedBalance(3.0);
+        verifyEthWalletTotalAssociatedBalance('3.0');
+        verifyEthWalletAssociatedBalance('3.0');
+        cy.get('button').contains('Select a validator to nominate').click();
+        clickOnValidatorFromList(0);
+        cy.getByTestId(stakeAddStakeRadioButton, epochTimeout).click({
+          force: true,
+        });
+        cy.getByTestId(stakeTokenAmountInputBox).type('0.001');
+        cy.getByTestId(stakeTokenSubmitButton).should('be.disabled');
+        cy.getByTestId(stakeTokenAmountInputBox).clear().type('4');
+        cy.getByTestId(stakeTokenSubmitButton).should('be.disabled');
+      });
       it('Able to stake against a validator - using vega from wallet', function () {
         ensureSpecifiedUnstakedTokensAreAssociated('3');
         verifyUnstakedBalance(3.0);
         verifyEthWalletTotalAssociatedBalance('3.0');
         verifyEthWalletAssociatedBalance('3.0');
         cy.get('button').contains('Select a validator to nominate').click();
-        // 2001-STKE-031
+        // 1002-STKE-031
         clickOnValidatorFromList(0);
-        // 2001-STKE-033, 2001-STKE-034, 2001-STKE-037
+        // 1002-STKE-033, 1002-STKE-034, 1002-STKE-037
         stakingValidatorPageAddStake('2');
         verifyUnstakedBalance(1.0);
-        // 2001-STKE-039
+        // 1002-STKE-039
         verifyStakedBalance(2.0);
-        verifyNextEpochValue(2.0); // 2001-STKE-016 2001-STKE-038
-        verifyThisEpochValue(2.0); // 2001-STKE-013
+        verifyNextEpochValue(2.0); // 1002-STKE-016 1002-STKE-038
+        verifyThisEpochValue(2.0); // 1002-STKE-013
         closeStakingDialog();
         navigateTo(navigation.validators);
 
-        // 2002-SINC-007
+        // 2002-SINC-007 1002-STKE-015 1002-STKE-017 1002-STKE-052
         validateValidatorListTotalStakeAndShare('0', '3,002.00', '50.02%');
       });
 
@@ -218,7 +234,7 @@ context(
           });
       });
 
-      // 2001-STKE-041
+      // 1002-STKE-041 1002-STKE-053
       it(
         'Able to remove part of a stake against a validator',
         { tags: '@smoke' },
@@ -231,11 +247,11 @@ context(
           verifyUnstakedBalance(1.0);
           closeStakingDialog();
           navigateTo(navigation.validators);
-          // 2001-STKE-040
+          // 1002-STKE-040
           clickOnValidatorFromList(0);
-          // 2001-STKE-044, 2001-STKE-048
+          // 1002-STKE-044, 1002-STKE-048
           stakingValidatorPageRemoveStake('1');
-          // 2001-STKE-049
+          // 1002-STKE-049
           verifyNextEpochValue(2.0);
           verifyUnstakedBalance(2.0);
           verifyStakedBalance(2.0);
@@ -255,7 +271,7 @@ context(
         }
       );
 
-      // 2001-STKE-045
+      // 1002-STKE-045
       it('Able to remove a full stake against a validator', function () {
         stakingPageAssociateTokens('3');
         verifyUnstakedBalance(3.0);
@@ -303,6 +319,7 @@ context(
           .and('be.visible');
       });
 
+      // 1002-STKE-046 1002-STKE-047
       it('Unable to remove a stake greater than staked amount next epoch for a validator', function () {
         stakingPageAssociateTokens('3');
         verifyUnstakedBalance(3.0);
@@ -381,6 +398,8 @@ context(
 
       it('Disassociating some tokens - prioritizes unstaked tokens', function () {
         vegaWalletSetSpecifiedApprovalAmount('1000');
+        cy.reload();
+        ethereumWalletConnect();
         stakingPageAssociateTokens('3');
         verifyUnstakedBalance(3.0);
         cy.get('button').contains('Select a validator to nominate').click();
@@ -403,7 +422,7 @@ context(
       });
 
       it('Associating wallet tokens - when some already staked - auto stakes tokens to staked validator', function () {
-        // 2001-STKE-004
+        // 1002-STKE-004
         stakingPageAssociateTokens('3');
         verifyUnstakedBalance(3.0);
         cy.get('button').contains('Select a validator to nominate').click();
@@ -417,7 +436,7 @@ context(
       });
 
       it('Associating vesting contract tokens - when some already staked - auto stakes tokens to staked validator', function () {
-        // 2001-STKE-004
+        // 1002-STKE-004
         stakingPageAssociateTokens('3', { type: 'contract' });
         verifyUnstakedBalance(3.0);
         cy.get('button').contains('Select a validator to nominate').click();
@@ -431,7 +450,7 @@ context(
       });
 
       it('Associating vesting contract tokens - when wallet tokens already staked - auto stakes tokens to staked validator', function () {
-        // 2001-STKE-004
+        // 1002-STKE-004
         stakingPageAssociateTokens('3', { type: 'wallet' });
         verifyUnstakedBalance(3.0);
         cy.get('button').contains('Select a validator to nominate').click();
@@ -445,7 +464,7 @@ context(
       });
 
       it('Associating tokens - with multiple validators already staked - auto stakes to staked validators - abiding by existing stake ratio', function () {
-        // 2001-STKE-004
+        // 1002-STKE-004
         stakingPageAssociateTokens('6');
         verifyUnstakedBalance(6.0);
         cy.get('button').contains('Select a validator to nominate').click();
@@ -498,7 +517,7 @@ context(
       }
 
       function verifyThisEpochValue(amount: number) {
-        cy.getByTestId('stake-this-epoch', epochTimeout) // 2001-STKE-013
+        cy.getByTestId('stake-this-epoch', epochTimeout) // 1002-STKE-013
           .contains(amount, epochTimeout)
           .should('be.visible');
       }

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

@@ -64,31 +64,38 @@ context(
         }
       );
 
-      it('Able to associate tokens - from wallet', function () {
-        //1004-ASSO-003
-        //1004-ASSO-005
-        //1004-ASSO-009
-        //1004-ASSO-030
-        //1004-ASSO-012
-        //1004-ASSO-013
-        //1004-ASSO-014
-        //1004-ASSO-015
-        //1004-ASSO-030
-        //0005-ETXN-006
-        //0005-ETXN-003
-        //0005-ETXN-005
-        stakingPageAssociateTokens('2', { skipConfirmation: true });
-        validateWalletCurrency('Associated', '0.00');
-        validateWalletCurrency('Pending association', '2.00');
-        validateWalletCurrency('Total associated after pending', '2.00');
-        // 0005-ETXN-002
-        verifyEthWalletAssociatedBalance('2.0');
-        verifyEthWalletTotalAssociatedBalance('2.0');
-        cy.get(vegaWallet).within(() => {
-          cy.get(vegaWalletAssociatedBalance, txTimeout).should('contain', 2.0);
-        });
-        cy.get(vegaWalletUnstakedBalance, txTimeout).should('contain', 2.0);
-      });
+      it(
+        'Able to associate tokens - from wallet',
+        { tags: '@smoke' },
+        function () {
+          //1004-ASSO-003
+          //1004-ASSO-005
+          //1004-ASSO-009
+          //1004-ASSO-030
+          //1004-ASSO-012
+          //1004-ASSO-013
+          //1004-ASSO-014
+          //1004-ASSO-015
+          //1004-ASSO-030
+          //0005-ETXN-006
+          //0005-ETXN-003
+          //0005-ETXN-005
+          stakingPageAssociateTokens('2', { skipConfirmation: true });
+          validateWalletCurrency('Associated', '0.00');
+          validateWalletCurrency('Pending association', '2.00');
+          validateWalletCurrency('Total associated after pending', '2.00');
+          // 0005-ETXN-002
+          verifyEthWalletAssociatedBalance('2.0');
+          verifyEthWalletTotalAssociatedBalance('2.0');
+          cy.get(vegaWallet).within(() => {
+            cy.get(vegaWalletAssociatedBalance, txTimeout).should(
+              'contain',
+              2.0
+            );
+          });
+          cy.get(vegaWalletUnstakedBalance, txTimeout).should('contain', 2.0);
+        }
+      );
 
       it('Able to disassociate all associated tokens - manually', function () {
         // 1004-ASSO-025

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

@@ -55,6 +55,10 @@ context(
       navigateTo(navigation.withdraw);
       cy.connectVegaWallet();
       ethereumWalletConnect();
+      cy.getByTestId('currency-title', txTimeout).should(
+        'contain.text',
+        usdtName
+      );
     });
 
     it('Able to open withdrawal form with vega wallet connected', function () {
@@ -69,7 +73,10 @@ context(
     it('Unable to submit withdrawal with invalid fields', function () {
       cy.getByTestId(withdraw).should('be.visible').click();
       cy.getByTestId(withdrawalForm, txTimeout).within(() => {
-        cy.get('select').select(usdtSelectValue, { force: true });
+        cy.getByTestId('select-asset').click();
+        cy.get('select')
+          .select(usdtSelectValue, { force: true })
+          .should('have.value', usdtSelectValue);
         cy.getByTestId(balanceAvailable, txTimeout).should('exist');
         cy.getByTestId(submitWithdrawalButton).click();
         cy.getByTestId(formValidationError).should('have.length', 1);
@@ -89,68 +96,75 @@ context(
       });
     });
 
-    it('Able to withdraw asset: -eth wallet connected -withdraw funds button', function () {
-      // fill in withdrawal form
-      cy.getByTestId(withdraw).should('be.visible').click();
-      cy.getByTestId(withdrawalForm, txTimeout).within(() => {
-        cy.get('select').select(usdtSelectValue, { force: true });
-        cy.getByTestId(balanceAvailable, txTimeout).should('exist');
-        cy.getByTestId(withdrawalThreshold).should(
-          'have.text',
-          '100,000.00000T'
-        );
-        cy.getByTestId(delayTime).should('have.text', 'None');
-        cy.getByTestId(amountInput).click().type('120');
-        cy.getByTestId(submitWithdrawalButton).click();
-      });
-      // assert withdrawal request
-      cy.getByTestId(toast)
-        .first(txTimeout)
-        .should('contain.text', 'Funds unlocked')
-        .within(() => {
-          cy.getByTestId('external-link').should('exist');
-          cy.getByTestId(toastPanel).should(
-            'contain.text',
-            'Withdraw 120.00 tUSDC'
+    it(
+      'Able to withdraw asset: -eth wallet connected -withdraw funds button',
+      { tags: '@smoke' },
+      function () {
+        // fill in withdrawal form
+        cy.getByTestId(withdraw).should('be.visible').click();
+        cy.getByTestId(withdrawalForm, txTimeout).within(() => {
+          cy.getByTestId('select-asset').click();
+          cy.get('select')
+            .select(usdtSelectValue, { force: true })
+            .should('have.value', usdtSelectValue);
+          cy.getByTestId(balanceAvailable, txTimeout).should('exist');
+          cy.getByTestId(withdrawalThreshold).should(
+            'have.text',
+            '100,000.00000T'
           );
-          cy.getByTestId(toastCompleteWithdrawal).click();
-          cy.getByTestId(toastClose).click();
+          cy.getByTestId(delayTime).should('have.text', 'None');
+          cy.getByTestId(amountInput).click().type('120');
+          cy.getByTestId(submitWithdrawalButton).click();
         });
-      // withdrawal complete
-      cy.getByTestId(toast)
-        .first(txTimeout)
-        .should('contain.text', 'The withdrawal has been approved.')
-        .within(() => {
-          cy.getByTestId(toastPanel).should(
-            'contain.text',
-            'Withdraw 120.00 tUSDC'
-          );
-        });
-      cy.getByTestId(toast)
-        .last(txTimeout)
-        .should('contain.text', 'Transaction confirmed')
-        .within(() => {
-          cy.getByTestId('external-link').should('exist');
-        });
-      // withdrawal history for complete withdrawal displayed
-      cy.get(tableWithdrawnStatus)
-        .eq(1, txTimeout)
-        .should('have.text', 'Completed')
-        .parent()
-        .within(() => {
-          cy.get(tableAssetSymbol).should('have.text', usdcSymbol);
-          cy.get(tableAmount).should('have.text', '120.00');
-          cy.get(tableReceiverAddress)
-            .find('a')
-            .should('have.attr', 'href')
-            .and('contain', 'https://sepolia.etherscan.io/address/');
-          cy.get(tableWithdrawnTimeStamp).should('not.be.empty');
-          cy.get(tableTxHash)
-            .find('a')
-            .should('have.attr', 'href')
-            .and('contain', 'https://sepolia.etherscan.io/tx/');
-        });
-    });
+        // assert withdrawal request
+        cy.getByTestId(toast)
+          .first(txTimeout)
+          .should('contain.text', 'Funds unlocked')
+          .within(() => {
+            cy.getByTestId('external-link').should('exist');
+            cy.getByTestId(toastPanel).should(
+              'contain.text',
+              'Withdraw 120.00 tUSDC'
+            );
+            cy.getByTestId(toastCompleteWithdrawal).click();
+            cy.getByTestId(toastClose).click();
+          });
+        // withdrawal complete
+        cy.getByTestId(toast)
+          .first(txTimeout)
+          .should('contain.text', 'The withdrawal has been approved.')
+          .within(() => {
+            cy.getByTestId(toastPanel).should(
+              'contain.text',
+              'Withdraw 120.00 tUSDC'
+            );
+          });
+        cy.getByTestId(toast)
+          .last(txTimeout)
+          .should('contain.text', 'Transaction confirmed')
+          .within(() => {
+            cy.getByTestId('external-link').should('exist');
+          });
+        // withdrawal history for complete withdrawal displayed
+        cy.get(tableWithdrawnStatus)
+          .eq(1, txTimeout)
+          .should('have.text', 'Completed')
+          .parent()
+          .within(() => {
+            cy.get(tableAssetSymbol).should('have.text', usdcSymbol);
+            cy.get(tableAmount).should('have.text', '120.00');
+            cy.get(tableReceiverAddress)
+              .find('a')
+              .should('have.attr', 'href')
+              .and('contain', 'https://sepolia.etherscan.io/address/');
+            cy.get(tableWithdrawnTimeStamp).should('not.be.empty');
+            cy.get(tableTxHash)
+              .find('a')
+              .should('have.attr', 'href')
+              .and('contain', 'https://sepolia.etherscan.io/tx/');
+          });
+      }
+    );
 
     it('Able to withdraw asset: -eth wallet not connected', function () {
       const ethWalletAddress = Cypress.env('ethWalletPublicKey');
@@ -159,7 +173,10 @@ context(
       // fill in withdrawal form
       cy.getByTestId(withdraw).should('be.visible').click();
       cy.getByTestId(withdrawalForm, txTimeout).within(() => {
-        cy.get('select').select(usdtSelectValue, { force: true });
+        cy.getByTestId('select-asset').click();
+        cy.get('select')
+          .select(usdtSelectValue, { force: true })
+          .should('have.value', usdtSelectValue);
         cy.getByTestId(ethAddressInput).should('be.empty');
         cy.getByTestId(amountInput).click().type('110');
         cy.getByTestId(submitWithdrawalButton).click();
@@ -219,7 +236,10 @@ context(
     it('Should be able to see withdrawal details from toast', function () {
       cy.getByTestId(withdraw).click();
       cy.getByTestId(withdrawalForm, txTimeout).within(() => {
-        cy.get('select').select(usdtSelectValue, { force: true });
+        cy.getByTestId('select-asset').click();
+        cy.get('select')
+          .select(usdtSelectValue, { force: true })
+          .should('have.value', usdtSelectValue);
         cy.getByTestId(balanceAvailable, txTimeout).should('exist');
         cy.getByTestId(withdrawalThreshold).should(
           'have.text',
@@ -274,7 +294,10 @@ context(
       cy.connectPublicKey(vegaWalletPubKey);
       cy.getByTestId(withdraw).should('be.visible').click();
       cy.getByTestId(withdrawalForm, txTimeout).within(() => {
-        cy.get('select').select(usdtSelectValue, { force: true });
+        cy.getByTestId('select-asset').click();
+        cy.get('select')
+          .select(usdtSelectValue, { force: true })
+          .should('have.value', usdtSelectValue);
         cy.getByTestId(balanceAvailable, txTimeout).should('exist');
         cy.getByTestId(amountInput).click().type('100');
         cy.pause();

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

@@ -5,7 +5,10 @@ import {
   verifyPageHeader,
   verifyTabHighlighted,
 } from '../../support/common.functions';
-import { clickOnValidatorFromList } from '../../support/staking.functions';
+import {
+  clickOnValidatorFromList,
+  waitForBeginningOfEpoch,
+} from '../../support/staking.functions';
 
 const guideLink = '[data-testid="staking-guide-link"]';
 const validatorTitle = '[data-testid="validator-node-title"]';
@@ -37,206 +40,213 @@ context('Validators Page - verify elements on page', function () {
   });
 
   describe('with wallets disconnected', { tags: '@smoke' }, function () {
-    describe('description section', function () {
-      it('Should have validators tab highlighted', function () {
-        verifyTabHighlighted(navigation.validators);
-      });
-
-      it('Should have validators ON VEGA header visible', function () {
-        verifyPageHeader('Validators');
-      });
-
-      it('Should have Staking Guide link visible', function () {
-        // 2001-STKE-003
-        cy.get(guideLink)
-          .should('be.visible')
-          .and('have.text', 'Read more about staking on Vega')
-          .and(
-            'have.attr',
-            'href',
-            'https://docs.vega.xyz/mainnet/concepts/vega-chain/#staking-on-vega'
-          );
-      });
+    it('Should have validators tab highlighted', function () {
+      verifyTabHighlighted(navigation.validators);
     });
-    describe(
-      'Should be able to see validator list from the staking page',
-      { tags: '@regression' },
-      function () {
-        // 2001-STKE-050
-        it('Should be able to see validator names', function () {
-          cy.get('[col-id="validator"] > div > span')
-            .should('have.length.at.least', 1)
-            .each(($name) => {
-              cy.wrap($name).should('not.be.empty');
-            });
-        });
 
-        it('Should be able to see validator stake', function () {
-          cy.getByTestId('total-stake')
-            .should('have.length.at.least', 1)
-            .each(($stake) => {
-              cy.wrap($stake).should('not.be.empty');
-            });
-        });
+    it('Should have validators ON VEGA header visible', function () {
+      verifyPageHeader('Validators');
+    });
 
-        it('Should be able to see validator stake tooltip', function () {
-          cy.getByTestId('total-stake').first().realHover();
+    it('Should have Staking Guide link visible', function () {
+      // 1002-STKE-003
+      cy.get(guideLink)
+        .should('be.visible')
+        .and('have.text', 'Read more about staking on Vega')
+        .and(
+          'have.attr',
+          'href',
+          'https://docs.vega.xyz/mainnet/concepts/vega-chain/#staking-on-vega'
+        );
+    });
 
-          cy.get(stakedByOperatorToolTip)
-            .invoke('text')
-            .should('contain', 'Staked by operator: 3,000.00');
-          cy.get(stakedByDelegatesToolTip)
-            .invoke('text')
-            .should('contain', 'Staked by delegates: 0.00');
-          cy.get(totalStakedToolTip)
-            .invoke('text')
-            .should('contain', 'Total stake: 3,000.00');
-        });
-
-        it('Should be able to see validator normalised voting power', function () {
-          cy.getByTestId('normalised-voting-power')
-            .should('have.length.at.least', 1)
-            .each(($vPower) => {
-              cy.wrap($vPower).should('not.be.empty');
-            });
-        });
-
-        it('Should be able to see validator normalised voting power tooltip', function () {
-          cy.getByTestId('normalised-voting-power').first().realHover();
-
-          cy.get(unnormalisedVotingPowerToolTip)
-            .invoke('text')
-            .should('contain', 'Unnormalised voting power: 20.00%');
-          cy.get(normalisedVotingPowerToolTip)
-            .invoke('text')
-            .should('contain', 'Normalised voting power: 50.00%');
-        });
-
-        // 2002-SINC-018
-        it('Should be able to see validator total penalties', function () {
-          cy.getByTestId('total-penalty')
-            .should('have.length.at.least', 1)
-            .each(($penalties) => {
-              cy.wrap($penalties).should('contain.text', '0%');
-            });
-        });
-
-        it('Should be able to see validator penalties tooltip', function () {
-          cy.getByTestId('total-penalty').realHover();
-
-          cy.get(performancePenaltyToolTip)
-            .invoke('text')
-            .should('contain', 'Performance penalty: 0.00%');
-          cy.get(overstakedPenaltyToolTip)
-            .invoke('text')
-            .should('contain', 'Overstaked penalty: 60.00%'); // value not asserted due to #2886
-          cy.get(totalPenaltyToolTip)
-            .invoke('text')
-            .should('contain', 'Total penalties: 60.00%');
-        });
-
-        it('Should be able to see validator pending stake', function () {
-          cy.getByTestId('total-pending-stake')
-            .should('have.length.at.least', 1)
-            .each(($pendingStake) => {
-              cy.wrap($pendingStake).should('contain.text', '0.00');
-            });
-        });
-      }
-    );
-
-    // 2001-STKE-050
-    describe(
-      'Should be able to see static information about a validator',
-      { tags: '@smoke' },
-      function () {
-        before('connect wallets and click on validator', function () {
-          cy.connectVegaWallet();
-          clickOnValidatorFromList(0);
-        });
-
-        // 2001-STKE-006
-        it('Should be able to see validator name', function () {
-          cy.get(validatorTitle).should('not.be.empty');
-        });
-
-        // 2001-STKE-007
-        it('Should be able to see validator id', function () {
-          cy.get(validatorId).should('not.be.empty');
-        });
-
-        // 2001-STKE-008
-        it('Should be able to see validator public key', function () {
-          cy.get(validatorPubKey).should('not.be.empty');
-        });
-
-        // 2001-STKE-010
-        it('Should be able to see Ethereum address', function () {
-          cy.get(ethAddressLink)
-            .should('not.be.empty')
-            .and('have.attr', 'href');
-        });
-        // TODO validators missing url for more information about them 2001-STKE-09
-
-        it('Should be able to see validator status', function () {
-          cy.get(validatorStatus).should('have.text', 'Consensus');
-        });
-
-        // 2001-STKE-012
-        it('Should be able to see total stake', function () {
-          cy.get(totalStake).invoke('text').should('match', stakeNumberRegex);
-        });
-
-        it('Should be able to see pending stake', function () {
-          cy.get(pendingStake).invoke('text').should('match', stakeNumberRegex);
-        });
-
-        it('Should be able to see staked by operator', function () {
-          cy.get(stakedByOperator)
-            .invoke('text')
-            .should('match', stakeNumberRegex);
-        });
-
-        it('Should be able to see staked by delegates', function () {
-          cy.get(stakedByDelegates)
-            .invoke('text')
-            .should('match', stakeNumberRegex);
-        });
-
-        // 2001-STKE-051
-        it('Should be able to see stake share in percentage', function () {
-          cy.get(stakeShare)
-            .invoke('text')
-            .then(($stakePercentage) => {
-              // The pattern must start at a word boundary (\b).
-              // The pattern cannot be immediately preceded by a dot ((?<!\.)).
-              // The pattern can be one of the following:
-              // A percentage value of zero (0%), or
-              // A non-zero percentage value that can be:
-              // A single digit (\d) between 0 and 9, or
-              // A two-digit number between 0 and 99 (\d{1,2}), or
-              // The number 100.
-              // The pattern can optionally include a decimal point and one or more digits after the decimal point ((?:(?<!100)\.\d+)?). However, if the number is 100, it cannot have a decimal point.
-              // The pattern must end with a percentage sign (%).
-
-              cy.wrap($stakePercentage).should(
-                'match',
-                /\b(?<!\.)(?:0+(?:\.0+)?%|(?:\d|\d{1,2}|100)(?:(?<!100)\.\d+)?)%/
-              );
-            });
-        });
-
-        // 2001-STKE-011 2002-SINC-001 2002-SINC-002
-        it('Should be able to see epoch information', function () {
-          const epochTitle = 'h3';
-          const nextEpochInfo = 'p';
-
-          cy.get(epochCountDown).within(() => {
-            cy.get(epochTitle).should('not.be.empty');
-            cy.get(nextEpochInfo).should('contain.text', 'Next epoch');
-          });
-        });
-      }
-    );
+    // 1002-STKE-032
+    it('Should have button to connect vega wallet in validator page', function () {
+      clickOnValidatorFromList(0);
+      cy.getByTestId('connect-to-vega-wallet-btn').should('be.visible');
+      cy.visit('/validators');
+    });
   });
+  // 1002-STKE-020 1002-STKE-021 1002-STKE-022 1002-STKE-023 1002-STKE-024
+  describe(
+    'Should be able to see validator list from the staking page',
+    { tags: '@regression' },
+    function () {
+      // 1002-STKE-050
+      it('Should be able to see validator names', function () {
+        cy.get('[col-id="validator"] > div > span')
+          .should('have.length.at.least', 1)
+          .each(($name) => {
+            cy.wrap($name).should('not.be.empty');
+          });
+      });
+
+      it('Should be able to see validator stake', function () {
+        cy.getByTestId('total-stake')
+          .should('have.length.at.least', 1)
+          .each(($stake) => {
+            cy.wrap($stake).should('not.be.empty');
+          });
+      });
+
+      it('Should be able to see validator stake tooltip', function () {
+        waitForBeginningOfEpoch();
+        cy.getByTestId('total-stake').first().realHover();
+
+        cy.get(stakedByOperatorToolTip)
+          .invoke('text')
+          .should('contain', 'Staked by operator: 3,000.00');
+        cy.get(stakedByDelegatesToolTip)
+          .invoke('text')
+          .should('contain', 'Staked by delegates: 0.00');
+        cy.get(totalStakedToolTip)
+          .invoke('text')
+          .should('contain', 'Total stake: 3,000.00');
+      });
+
+      it('Should be able to see validator normalised voting power', function () {
+        cy.getByTestId('normalised-voting-power')
+          .should('have.length.at.least', 1)
+          .each(($vPower) => {
+            cy.wrap($vPower).should('not.be.empty');
+          });
+      });
+
+      it('Should be able to see validator normalised voting power tooltip', function () {
+        waitForBeginningOfEpoch();
+        cy.getByTestId('normalised-voting-power').first().realHover();
+
+        cy.get(unnormalisedVotingPowerToolTip)
+          .invoke('text')
+          .should('contain', 'Unnormalised voting power: 20.00%');
+        cy.get(normalisedVotingPowerToolTip)
+          .invoke('text')
+          .should('contain', 'Normalised voting power: 50.00%');
+      });
+
+      // 2002-SINC-018
+      it('Should be able to see validator total penalties', function () {
+        cy.getByTestId('total-penalty')
+          .should('have.length.at.least', 1)
+          .each(($penalties) => {
+            cy.wrap($penalties).should('contain.text', '0%');
+          });
+      });
+
+      it('Should be able to see validator penalties tooltip', function () {
+        waitForBeginningOfEpoch();
+        cy.getByTestId('total-penalty').realHover();
+
+        cy.get(performancePenaltyToolTip)
+          .invoke('text')
+          .should('contain', 'Performance penalty: 0.00%');
+        cy.get(overstakedPenaltyToolTip)
+          .invoke('text')
+          .should('contain', 'Overstaked penalty: 60.00%'); // value not asserted due to #2886
+        cy.get(totalPenaltyToolTip)
+          .invoke('text')
+          .should('contain', 'Total penalties: 60.00%');
+      });
+
+      it('Should be able to see validator pending stake', function () {
+        cy.getByTestId('total-pending-stake')
+          .should('have.length.at.least', 1)
+          .each(($pendingStake) => {
+            cy.wrap($pendingStake).should('contain.text', '0.00');
+          });
+      });
+    }
+  );
+
+  // 1002-STKE-050
+  describe(
+    'Should be able to see static information about a validator',
+    { tags: '@smoke' },
+    function () {
+      before('connect wallets and click on validator', function () {
+        cy.connectVegaWallet();
+        clickOnValidatorFromList(0);
+      });
+
+      // 1002-STKE-006
+      it('Should be able to see validator name', function () {
+        cy.get(validatorTitle).should('not.be.empty');
+      });
+
+      // 1002-STKE-007
+      it('Should be able to see validator id', function () {
+        cy.get(validatorId).should('not.be.empty');
+      });
+
+      // 1002-STKE-008
+      it('Should be able to see validator public key', function () {
+        cy.get(validatorPubKey).should('not.be.empty');
+      });
+
+      // 1002-STKE-010
+      it('Should be able to see Ethereum address', function () {
+        cy.get(ethAddressLink).should('not.be.empty').and('have.attr', 'href');
+      });
+      // TODO validators missing url for more information about them 1002-STKE-09
+
+      it('Should be able to see validator status', function () {
+        cy.get(validatorStatus).should('have.text', 'Consensus');
+      });
+
+      // 1002-STKE-012
+      it('Should be able to see total stake', function () {
+        cy.get(totalStake).invoke('text').should('match', stakeNumberRegex);
+      });
+
+      it('Should be able to see pending stake', function () {
+        cy.get(pendingStake).invoke('text').should('match', stakeNumberRegex);
+      });
+
+      it('Should be able to see staked by operator', function () {
+        cy.get(stakedByOperator)
+          .invoke('text')
+          .should('match', stakeNumberRegex);
+      });
+
+      it('Should be able to see staked by delegates', function () {
+        cy.get(stakedByDelegates)
+          .invoke('text')
+          .should('match', stakeNumberRegex);
+      });
+
+      // 1002-STKE-051
+      it('Should be able to see stake share in percentage', function () {
+        cy.get(stakeShare)
+          .invoke('text')
+          .then(($stakePercentage) => {
+            // The pattern must start at a word boundary (\b).
+            // The pattern cannot be immediately preceded by a dot ((?<!\.)).
+            // The pattern can be one of the following:
+            // A percentage value of zero (0%), or
+            // A non-zero percentage value that can be:
+            // A single digit (\d) between 0 and 9, or
+            // A two-digit number between 0 and 99 (\d{1,2}), or
+            // The number 100.
+            // The pattern can optionally include a decimal point and one or more digits after the decimal point ((?:(?<!100)\.\d+)?). However, if the number is 100, it cannot have a decimal point.
+            // The pattern must end with a percentage sign (%).
+
+            cy.wrap($stakePercentage).should(
+              'match',
+              /\b(?<!\.)(?:0+(?:\.0+)?%|(?:\d|\d{1,2}|100)(?:(?<!100)\.\d+)?)%/
+            );
+          });
+      });
+
+      // 1002-STKE-011 2002-SINC-001 2002-SINC-002
+      it('Should be able to see epoch information', function () {
+        const epochTitle = 'h3';
+        const nextEpochInfo = 'p';
+
+        cy.get(epochCountDown).within(() => {
+          cy.get(epochTitle).should('not.be.empty');
+          cy.get(nextEpochInfo).should('contain.text', 'Next epoch');
+        });
+      });
+    }
+  );
 });

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

@@ -337,6 +337,7 @@ context(
                 .parent()
                 .siblings()
                 .invoke('text')
+                .should('have.length.at.least', 4)
                 .then(parseFloat)
                 .should('be.gte', parseFloat(expectedAmount));
 

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

@@ -596,6 +596,8 @@
   "noPercentage": "No percentage",
   "proposalJson": "Full proposal JSON",
   "proposalDetails": "Proposal details",
+  "marketSpecification": "Market specification",
+  "viewMarketJson": "View market JSON",
   "proposalDescription": "Description",
   "currentlySetTo": "Currently expected to ",
   "currently": "currently",
@@ -729,7 +731,11 @@
   "ThisWillSetValidationDeadlineTo": "This will set the validation deadline to",
   "Hours": "hours",
   "ThisWillAdd2MinutesToAllowTimeToConfirmInWallet": "Note: 2 minutes of extra time are added when you choose the minimum value. This gives you time to confirm the proposal in your wallet.",
-  "ProposalWillFailIfEnactmentIsEarlierThanVotingDeadline": "Proposal will fail if enactment is earlier than the voting deadline",
+  "ProposalWillFailIfEnactmentIsEarlierThanVotingDeadline": "The proposal will fail if enactment is earlier than the voting deadline",
+  "ProposalWillFailIfEnactmentIsBelowTheMinimumDeadline": "The proposal will fail if enactment deadline is below the minimum",
+  "ProposalWillFailIfVotingIsBelowTheMinimumDeadline": "The proposal will fail if voting deadline is below the minimum",
+  "ProposalWillFailIfEnactmentIsAboveTheMaximumDeadline": "The proposal will fail if enactment deadline is above the maximum",
+  "ProposalWillFailIfVotingIsAboveTheMaximumDeadline": "The proposal will fail if voting deadline is above the maximum",
   "SelectAMarketToChange": "Select a market to change",
   "MarketName": "Market name",
   "MarketCode": "Market code",
@@ -824,5 +830,7 @@
   "disclaimer5": "No developer of the Vega Governance App accepts any responsibility for, or liability to users in connection with their use of the Vega Governance App.",
   "multisigContractLink": "Ethereum Multisig Contract",
   "multisigContractIncorrect": "is incorrectly configured. Validator and delegator rewards will be penalised until this is resolved.",
-  "learnMore": "Learn more"
+  "learnMore": "Learn more",
+  "AllValidators": "All validators",
+  "AllProposals": "All proposals"
 }

apps/governance/src/lib/collapsible-toggle-styles.ts

@@ -0,0 +1,6 @@
+import classnames from 'classnames';
+
+export const collapsibleToggleStyles = (toggleState: boolean) =>
+  classnames('mb-4 transition-transform ease-in-out duration-300', {
+    'rotate-180': toggleState,
+  });

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

@@ -1,9 +1,9 @@
 import ReactMarkdown from 'react-markdown';
-import classnames from 'classnames';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon, RoundedWrapper } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
+import { collapsibleToggleStyles } from '../../../../lib/collapsible-toggle-styles';
 
 export const ProposalDescription = ({
   description,
@@ -12,9 +12,6 @@ export const ProposalDescription = ({
 }) => {
   const { t } = useTranslation();
   const [showDescription, setShowDescription] = useState(false);
-  const showDescriptionIconClasses = classnames('mb-4', {
-    'rotate-180': showDescription,
-  });
 
   return (
     <section data-testid="proposal-description">
@@ -24,7 +21,7 @@ export const ProposalDescription = ({
       >
         <div className="flex items-center gap-3">
           <SubHeading title={t('proposalDescription')} />
-          <div className={showDescriptionIconClasses}>
+          <div className={collapsibleToggleStyles(showDescription)}>
             <Icon name="chevron-down" size={8} />
           </div>
         </div>

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

@@ -1,8 +1,8 @@
-import classnames from 'classnames';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
+import { collapsibleToggleStyles } from '../../../../lib/collapsible-toggle-styles';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
@@ -13,9 +13,6 @@ export const ProposalJson = ({
 }) => {
   const { t } = useTranslation();
   const [showDetails, setShowDetails] = useState(false);
-  const showDetailsIconClasses = classnames('mb-4', {
-    'rotate-180': showDetails,
-  });
 
   return (
     <section data-testid="proposal-json">
@@ -25,7 +22,7 @@ export const ProposalJson = ({
       >
         <div className="flex items-center gap-3">
           <SubHeading title={t('proposalJson')} />
-          <div className={showDetailsIconClasses}>
+          <div className={collapsibleToggleStyles(showDetails)}>
             <Icon name="chevron-down" size={8} />
           </div>
         </div>

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

@@ -0,0 +1 @@
+export * from './proposal-market-data';

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

@@ -0,0 +1,222 @@
+import isEqual from 'lodash/isEqual';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  InstrumentInfoPanel,
+  KeyDetailsInfoPanel,
+  LiquidityMonitoringParametersInfoPanel,
+  LiquidityPriceRangeInfoPanel,
+  MetadataInfoPanel,
+  OracleInfoPanel,
+  PriceMonitoringBoundsInfoPanel,
+  RiskFactorsInfoPanel,
+  RiskModelInfoPanel,
+  RiskParametersInfoPanel,
+  SettlementAssetInfoPanel,
+} from '@vegaprotocol/markets';
+import {
+  Accordion,
+  AccordionItem,
+  Button,
+  CopyWithTooltip,
+  Dialog,
+  Icon,
+  SyntaxHighlighter,
+} from '@vegaprotocol/ui-toolkit';
+import { SubHeading } from '../../../../components/heading';
+import { collapsibleToggleStyles } from '../../../../lib/collapsible-toggle-styles';
+import type { MarketInfoWithData } from '@vegaprotocol/markets';
+import type { DataSourceDefinition } from '@vegaprotocol/types';
+import { create } from 'zustand';
+
+type MarketDataDialogState = {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+};
+
+export const useMarketDataDialogStore = create<MarketDataDialogState>(
+  (set) => ({
+    isOpen: false,
+    open: () => set({ isOpen: true }),
+    close: () => set({ isOpen: false }),
+  })
+);
+
+export const ProposalMarketData = ({
+  marketData,
+}: {
+  marketData: MarketInfoWithData;
+}) => {
+  const { t } = useTranslation();
+  const { isOpen, open, close } = useMarketDataDialogStore();
+  const [showDetails, setShowDetails] = useState(false);
+
+  if (!marketData) {
+    return null;
+  }
+
+  const settlementData = marketData.tradableInstrument.instrument.product
+    .dataSourceSpecForSettlementData.data as DataSourceDefinition;
+  const terminationData = marketData.tradableInstrument.instrument.product
+    .dataSourceSpecForTradingTermination.data as DataSourceDefinition;
+
+  const getSigners = (data: DataSourceDefinition) => {
+    if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
+      const signers = data.sourceType.sourceType.signers || [];
+
+      return signers.map(({ signer }) => {
+        return (
+          (signer.__typename === 'ETHAddress' && signer.address) ||
+          (signer.__typename === 'PubKey' && signer.key)
+        );
+      });
+    }
+    return [];
+  };
+
+  return (
+    <section className="relative" data-testid="proposal-market-data">
+      <button
+        onClick={() => setShowDetails(!showDetails)}
+        data-testid="proposal-market-data-toggle"
+      >
+        <div className="flex items-center gap-3">
+          <SubHeading title={t('marketSpecification')} />
+          <div className={collapsibleToggleStyles(showDetails)}>
+            <Icon name="chevron-down" size={8} />
+          </div>
+        </div>
+      </button>
+
+      {showDetails && (
+        <>
+          <div className="float-right">
+            <Button onClick={open} data-testid="view-market-json">
+              {t('viewMarketJson')}
+            </Button>
+          </div>
+          <div className="mb-10">
+            <Accordion>
+              <AccordionItem
+                itemId="key-details"
+                title={t('Key details')}
+                content={<KeyDetailsInfoPanel market={marketData} />}
+              />
+              <AccordionItem
+                itemId="instrument"
+                title={t('Instrument')}
+                content={<InstrumentInfoPanel market={marketData} />}
+              />
+              {isEqual(
+                getSigners(settlementData),
+                getSigners(terminationData)
+              ) ? (
+                <AccordionItem
+                  itemId="oracles"
+                  title={t('Oracle')}
+                  content={
+                    <OracleInfoPanel
+                      market={marketData}
+                      type="settlementData"
+                    />
+                  }
+                />
+              ) : (
+                <>
+                  <AccordionItem
+                    itemId="settlement-oracle"
+                    title={t('Settlement Oracle')}
+                    content={
+                      <OracleInfoPanel
+                        market={marketData}
+                        type="settlementData"
+                      />
+                    }
+                  />
+
+                  <AccordionItem
+                    itemId="termination-oracle"
+                    title={t('Termination Oracle')}
+                    content={
+                      <OracleInfoPanel market={marketData} type="termination" />
+                    }
+                  />
+                </>
+              )}
+              <AccordionItem
+                itemId="settlement-asset"
+                title={t('Settlement asset')}
+                content={<SettlementAssetInfoPanel market={marketData} />}
+              />
+              <AccordionItem
+                itemId="metadata"
+                title={t('Metadata')}
+                content={<MetadataInfoPanel market={marketData} />}
+              />
+              <AccordionItem
+                itemId="risk-model"
+                title={t('Risk model')}
+                content={<RiskModelInfoPanel market={marketData} />}
+              />
+              <AccordionItem
+                itemId="risk-parameters"
+                title={t('Risk parameters')}
+                content={<RiskParametersInfoPanel market={marketData} />}
+              />
+              <AccordionItem
+                itemId="risk-factors"
+                title={t('Risk factors')}
+                content={<RiskFactorsInfoPanel market={marketData} />}
+              />
+              {(
+                marketData.priceMonitoringSettings?.parameters?.triggers || []
+              ).map((_, triggerIndex) => (
+                <AccordionItem
+                  itemId={`trigger-${triggerIndex}`}
+                  title={t(`Price monitoring bounds ${triggerIndex + 1}`)}
+                  content={
+                    <PriceMonitoringBoundsInfoPanel
+                      market={marketData}
+                      triggerIndex={triggerIndex}
+                    />
+                  }
+                />
+              ))}
+              <AccordionItem
+                itemId="liqudity-monitoring-parameters"
+                title={t('Liquidity monitoring parameters')}
+                content={
+                  <LiquidityMonitoringParametersInfoPanel market={marketData} />
+                }
+              />
+              <AccordionItem
+                itemId="liquidity-price-range"
+                title={t('Liquidity price range')}
+                content={<LiquidityPriceRangeInfoPanel market={marketData} />}
+              />
+            </Accordion>
+          </div>
+        </>
+      )}
+
+      <Dialog
+        title={marketData.tradableInstrument.instrument.code}
+        open={isOpen}
+        onChange={(isOpen) => (isOpen ? open() : close())}
+        size="medium"
+        dataTestId="market-json-dialog"
+      >
+        <CopyWithTooltip text={JSON.stringify(marketData)}>
+          <button className="bg-vega-dark-100 rounded-sm py-2 px-3 mb-4 text-white">
+            <span>
+              <Icon name="duplicate" />
+            </span>
+            <span className="ml-2">Copy</span>
+          </button>
+        </CopyWithTooltip>
+        <SyntaxHighlighter data={marketData} />
+      </Dialog>
+    </section>
+  );
+};

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

@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -13,6 +12,7 @@ import { SubHeading } from '../../../../components/heading';
 import { useVoteInformation } from '../../hooks';
 import { useAppState } from '../../../../contexts/app-state/app-state-context';
 import { ProposalType } from '../proposal/proposal';
+import { collapsibleToggleStyles } from '../../../../lib/collapsible-toggle-styles';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 
@@ -57,10 +57,6 @@ export const ProposalVotesTable = ({
     ? t('byTokenVote')
     : t('byLiquidityVote');
 
-  const showDetailsIconClasses = classnames('mb-4', {
-    'rotate-180': showDetails,
-  });
-
   return (
     <>
       <button
@@ -69,7 +65,7 @@ export const ProposalVotesTable = ({
       >
         <div className="flex items-center gap-3">
           <SubHeading title={t('voteBreakdown')} />
-          <div className={showDetailsIconClasses}>
+          <div className={collapsibleToggleStyles(showDetails)}>
             <Icon name="chevron-down" size={8} />
           </div>
         </div>

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

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import { generateProposal } from '../../test-helpers/generate-proposals';
 import { Proposal } from './proposal';
@@ -28,9 +29,6 @@ jest.mock('../proposal-change-table', () => ({
 jest.mock('../proposal-json', () => ({
   ProposalJson: () => <div data-testid="proposal-json"></div>,
 }));
-jest.mock('../proposal-terms/proposal-terms', () => ({
-  ProposalTerms: () => <div data-testid="proposal-terms"></div>,
-}));
 jest.mock('../proposal-votes-table', () => ({
   ProposalVotesTable: () => <div data-testid="proposal-votes-table"></div>,
 }));
@@ -41,23 +39,38 @@ jest.mock('../list-asset', () => ({
   ListAsset: () => <div data-testid="proposal-list-asset"></div>,
 }));
 
+const renderComponent = (proposal: ProposalQuery['proposal']) => {
+  render(
+    <MemoryRouter>
+      <Proposal
+        restData={{}}
+        proposal={proposal as ProposalQuery['proposal']}
+      />
+    </MemoryRouter>
+  );
+};
+
 it('Renders with data-testid', async () => {
   const proposal = generateProposal();
-  render(
-    <Proposal restData={{}} proposal={proposal as ProposalQuery['proposal']} />
-  );
+  renderComponent(proposal);
+
   expect(await screen.findByTestId('proposal')).toBeInTheDocument();
 });
 
+it('Renders with a link back to "all proposals"', async () => {
+  const proposal = generateProposal();
+  renderComponent(proposal);
+
+  expect(await screen.findByTestId('all-proposals-link')).toBeInTheDocument();
+});
+
 it('renders each section', async () => {
   const proposal = generateProposal();
-  render(
-    <Proposal restData={{}} proposal={proposal as ProposalQuery['proposal']} />
-  );
+  renderComponent(proposal);
+
   expect(await screen.findByTestId('proposal-header')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-change-table')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-json')).toBeInTheDocument();
-  expect(screen.getByTestId('proposal-terms')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-votes-table')).toBeInTheDocument();
   expect(screen.getByTestId('proposal-vote-details')).toBeInTheDocument();
   expect(screen.queryByTestId('proposal-list-asset')).not.toBeInTheDocument();
@@ -80,8 +93,7 @@ it('renders whitelist section if proposal is new asset and source is erc20', asy
       },
     },
   });
-  render(
-    <Proposal restData={{}} proposal={proposal as ProposalQuery['proposal']} />
-  );
+  renderComponent(proposal);
+
   expect(screen.getByTestId('proposal-list-asset')).toBeInTheDocument();
 });

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

@@ -1,18 +1,22 @@
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import {
   NetworkParams,
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
-import { AsyncRenderer, RoundedWrapper } from '@vegaprotocol/ui-toolkit';
+import { AsyncRenderer, Icon, RoundedWrapper } from '@vegaprotocol/ui-toolkit';
 import { ProposalHeader } from '../proposal-detail-header/proposal-header';
-import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { ProposalDescription } from '../proposal-description';
 import { ProposalChangeTable } from '../proposal-change-table';
 import { ProposalJson } from '../proposal-json';
-import { ProposalTerms } from '../proposal-terms';
 import { ProposalVotesTable } from '../proposal-votes-table';
 import { VoteDetails } from '../vote-details';
 import { ListAsset } from '../list-asset';
+import Routes from '../../../routes';
+import { ProposalMarketData } from '../proposal-market-data';
+import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { MarketInfoWithData } from '@vegaprotocol/markets';
 
 export enum ProposalType {
   PROPOSAL_NEW_MARKET = 'PROPOSAL_NEW_MARKET',
@@ -24,11 +28,17 @@ export enum ProposalType {
 }
 export interface ProposalProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
+  newMarketData?: MarketInfoWithData | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   restData: any;
 }
 
-export const Proposal = ({ proposal, restData }: ProposalProps) => {
+export const Proposal = ({
+  proposal,
+  restData,
+  newMarketData,
+}: ProposalProps) => {
+  const { t } = useTranslation();
   const { params, loading, error } = useNetworkParams([
     NetworkParams.governance_proposal_market_minVoterBalance,
     NetworkParams.governance_proposal_updateMarket_minVoterBalance,
@@ -81,53 +91,69 @@ export const Proposal = ({ proposal, restData }: ProposalProps) => {
   return (
     <AsyncRenderer data={params} loading={loading} error={error}>
       <section data-testid="proposal">
+        <div
+          className="flex items-center gap-1"
+          data-testid="all-proposals-link"
+        >
+          <Icon name={'chevron-left'} />
+          <Link className="underline" to={Routes.PROPOSALS}>
+            {t('AllProposals')}
+          </Link>
+        </div>
         <ProposalHeader proposal={proposal} isListItem={false} />
 
-        <div className="my-10">
-          <ProposalChangeTable proposal={proposal} />
-        </div>
+        <div id="details">
+          <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}
+          {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>
+          <div className="mb-4">
+            <ProposalDescription description={proposal.rationale.description} />
+          </div>
 
-        {proposal.terms.change.__typename !== 'NewMarket' &&
-          proposal.terms.change.__typename !== 'UpdateMarket' &&
-          proposal.terms.change.__typename !== 'NewFreeform' && (
+          {newMarketData && (
             <div className="mb-4">
-              <ProposalTerms data={proposal.terms} />
+              <ProposalMarketData marketData={newMarketData} />
             </div>
           )}
 
-        <div className="mb-6">
-          <ProposalJson proposal={restData?.data?.proposal} />
+          <div className="mb-6">
+            <ProposalJson proposal={restData?.data?.proposal} />
+          </div>
         </div>
 
-        <div className="mb-10">
-          <RoundedWrapper paddingBottom={true}>
-            <VoteDetails
+        <div id="voting">
+          <div className="mb-10">
+            <RoundedWrapper paddingBottom={true}>
+              <VoteDetails
+                proposal={proposal}
+                proposalType={proposalType}
+                minVoterBalance={minVoterBalance}
+                spamProtectionMinTokens={
+                  params?.spam_protection_voting_min_tokens
+                }
+              />
+            </RoundedWrapper>
+          </div>
+
+          <div className="mb-4">
+            <ProposalVotesTable
               proposal={proposal}
               proposalType={proposalType}
-              minVoterBalance={minVoterBalance}
-              spamProtectionMinTokens={
-                params?.spam_protection_voting_min_tokens
-              }
             />
-          </RoundedWrapper>
-        </div>
-
-        <div className="mb-4">
-          <ProposalVotesTable proposal={proposal} proposalType={proposalType} />
+          </div>
         </div>
       </section>
     </AsyncRenderer>

apps/governance/src/routes/proposals/components/propose/proposal-form-vote-and-enactment-deadline.spec.tsx

@@ -224,7 +224,47 @@ describe('Proposal form vote, validation and enactment deadline', () => {
     expect(
       screen.getByTestId('enactment-before-voting-deadline')
     ).toHaveTextContent(
-      'Proposal will fail if enactment is earlier than the voting deadline'
+      'The proposal will fail if enactment is earlier than the voting deadline'
+    );
+  });
+
+  it('displays error text if the vote deadline is set earlier than the minimum allowed', () => {
+    renderComponent();
+    const voteDeadlineInput = screen.getByTestId('proposal-vote-deadline');
+    fireEvent.change(voteDeadlineInput, { target: { value: 0.01 } });
+    expect(screen.getByTestId('voting-less-than-min')).toHaveTextContent(
+      'The proposal will fail if voting deadline is below the minimum'
+    );
+  });
+
+  it('displays error text if the vote deadline is set later than the maximum allowed', () => {
+    renderComponent();
+    const voteDeadlineInput = screen.getByTestId('proposal-vote-deadline');
+    fireEvent.change(voteDeadlineInput, { target: { value: 100000 } });
+    expect(screen.getByTestId('voting-greater-than-max')).toHaveTextContent(
+      'The proposal will fail if voting deadline is above the maximum'
+    );
+  });
+
+  it('displays error text if the enactment deadline is set earlier than the minimum allowed', () => {
+    renderComponent();
+    const enactmentDeadlineInput = screen.getByTestId(
+      'proposal-enactment-deadline'
+    );
+    fireEvent.change(enactmentDeadlineInput, { target: { value: 0.01 } });
+    expect(screen.getByTestId('enactment-less-than-min')).toHaveTextContent(
+      'The proposal will fail if enactment deadline is below the minimum'
+    );
+  });
+
+  it('displays error text if the enactment deadline is set later than the maximum allowed', () => {
+    renderComponent();
+    const enactmentDeadlineInput = screen.getByTestId(
+      'proposal-enactment-deadline'
+    );
+    fireEvent.change(enactmentDeadlineInput, { target: { value: 100000 } });
+    expect(screen.getByTestId('enactment-greater-than-max')).toHaveTextContent(
+      'The proposal will fail if enactment deadline is above the maximum'
     );
   });
 });

apps/governance/src/routes/proposals/components/propose/proposal-form-vote-and-enactment-deadline.tsx

@@ -220,21 +220,41 @@ const EnactmentForm = ({
           <span data-testid="enactment-date" className="pl-2">
             {getDateTimeFormat().format(deadlineDates.enactment)}
           </span>
-          {deadlines.enactment === minEnactmentHours && (
-            <span
-              data-testid="enactment-2-mins-extra"
-              className="block mt-4 font-light"
-            >
-              {t('ThisWillAdd2MinutesToAllowTimeToConfirmInWallet')}
-            </span>
-          )}
-          {deadlines.enactment && deadlines.enactment < deadlines.vote && (
-            <span
-              data-testid="enactment-before-voting-deadline"
-              className="block mt-4 text-vega-pink"
-            >
-              {t('ProposalWillFailIfEnactmentIsEarlierThanVotingDeadline')}
-            </span>
+          {deadlines.enactment && (
+            <>
+              {deadlines.enactment === minEnactmentHours && (
+                <span
+                  data-testid="enactment-2-mins-extra"
+                  className="block mt-4 font-light"
+                >
+                  {t('ThisWillAdd2MinutesToAllowTimeToConfirmInWallet')}
+                </span>
+              )}
+              {deadlines.enactment < deadlines.vote && (
+                <span
+                  data-testid="enactment-before-voting-deadline"
+                  className="block mt-4 text-vega-pink"
+                >
+                  {t('ProposalWillFailIfEnactmentIsEarlierThanVotingDeadline')}
+                </span>
+              )}
+              {deadlines.enactment < minEnactmentHours && (
+                <span
+                  data-testid="enactment-less-than-min"
+                  className="block mt-4 text-vega-pink"
+                >
+                  {t('ProposalWillFailIfEnactmentIsBelowTheMinimumDeadline')}
+                </span>
+              )}
+              {deadlines.enactment > maxEnactmentHours && (
+                <span
+                  data-testid="enactment-greater-than-max"
+                  className="block mt-4 text-vega-pink"
+                >
+                  {t('ProposalWillFailIfEnactmentIsAboveTheMaximumDeadline')}
+                </span>
+              )}
+            </>
           )}
         </p>
       )}
@@ -500,13 +520,33 @@ export function ProposalFormVoteAndEnactmentDeadline({
             <span data-testid="voting-date" className="pl-2">
               {getDateTimeFormat().format(deadlineDates.vote)}
             </span>
-            {deadlines.vote === minVoteHours && (
-              <span
-                data-testid="voting-2-mins-extra"
-                className="block mt-4 font-light"
-              >
-                {t('ThisWillAdd2MinutesToAllowTimeToConfirmInWallet')}
-              </span>
+            {deadlines.vote && (
+              <>
+                {deadlines.vote === minVoteHours && (
+                  <span
+                    data-testid="voting-2-mins-extra"
+                    className="block mt-4 font-light"
+                  >
+                    {t('ThisWillAdd2MinutesToAllowTimeToConfirmInWallet')}
+                  </span>
+                )}
+                {deadlines.vote < minVoteHours && (
+                  <span
+                    data-testid="voting-less-than-min"
+                    className="block mt-4 text-vega-pink"
+                  >
+                    {t('ProposalWillFailIfVotingIsBelowTheMinimumDeadline')}
+                  </span>
+                )}
+                {deadlines.vote > maxVoteHours && (
+                  <span
+                    data-testid="voting-greater-than-max"
+                    className="block mt-4 text-vega-pink"
+                  >
+                    {t('ProposalWillFailIfVotingIsAboveTheMaximumDeadline')}
+                  </span>
+                )}
+              </>
             )}
           </p>
         )}

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

@@ -1,11 +1,10 @@
 import { captureMessage } from '@sentry/minimal';
-
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { VoteValue } from '@vegaprotocol/types';
 import { useEffect, useState } from 'react';
 import { useUserVoteQuery } from './__generated__/Vote';
-import type { FinalizedVote } from '@vegaprotocol/proposals';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
+import type { FinalizedVote } from '@vegaprotocol/proposals';
 
 export enum VoteState {
   NotCast = 'NotCast',
@@ -45,21 +44,23 @@ export function useUserVote(
   );
 
   useEffect(() => {
-    if (finalizedVote?.vote.value) {
+    if (finalizedVote?.vote.value && finalizedVote.pubKey === pubKey) {
       setUserVote(finalizedVote);
-    } else if (data?.party?.votesConnection?.edges) {
-      // This sets the vote (if any) when the user first loads the page
-      setUserVote(
-        removePaginationWrapper(data?.party?.votesConnection?.edges).find(
-          ({ proposalId: pId }) => proposalId === pId
-        )
-      );
+    } else if (data?.party?.votesConnection?.edges && pubKey) {
+      const vote = removePaginationWrapper(
+        data?.party?.votesConnection?.edges
+      ).find(({ proposalId: pId }) => proposalId === pId);
+
+      if (vote) {
+        setUserVote({ ...vote, pubKey });
+      }
     }
   }, [
     finalizedVote?.vote.value,
     data?.party?.votesConnection?.edges,
     finalizedVote,
     proposalId,
+    pubKey,
   ]);
 
   // If user vote changes update the vote state
@@ -94,6 +95,8 @@ export function useUserVote(
   return {
     voteState,
     userVote,
-    voteDatetime: userVote ? new Date(userVote.vote.datetime) : null,
+    voteDatetime: userVote?.vote?.datetime
+      ? new Date(userVote.vote.datetime)
+      : null,
   };
 }

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

@@ -7,6 +7,8 @@ import { ProposalNotFound } from '../components/proposal-not-found';
 import { useProposalQuery } from './__generated__/Proposal';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import { ENV } from '../../../config';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { marketInfoWithDataProvider } from '@vegaprotocol/markets';
 
 export const ProposalContainer = () => {
   const params = useParams<{ proposalId: string }>();
@@ -20,15 +22,36 @@ export const ProposalContainer = () => {
     skip: !params.proposalId,
   });
 
+  const {
+    data: newMarketData,
+    loading: newMarketLoading,
+    error: newMarketError,
+  } = useDataProvider({
+    dataProvider: marketInfoWithDataProvider,
+    skipUpdates: true,
+    variables: {
+      marketId: data?.proposal?.id || '',
+      skip: !data?.proposal?.id,
+    },
+  });
+
   useEffect(() => {
-    const interval = setInterval(refetch, 1000);
+    const interval = setInterval(refetch, 2000);
     return () => clearInterval(interval);
   }, [refetch]);
 
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer
+      loading={loading || newMarketLoading}
+      error={error || newMarketError}
+      data={newMarketData ? { newMarketData, data } : data}
+    >
       {data?.proposal ? (
-        <Proposal proposal={data.proposal} restData={restData} />
+        <Proposal
+          proposal={data.proposal}
+          restData={restData}
+          newMarketData={newMarketData}
+        />
       ) : (
         <ProposalNotFound />
       )}

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards.tsx

@@ -48,15 +48,22 @@ export const EpochIndividualRewards = ({
     return removePaginationWrapper(data.party.rewardsConnection.edges);
   }, [data]);
 
+  const epochRewardSummaries = useMemo(() => {
+    if (!data?.epochRewardSummaries) return [];
+
+    return removePaginationWrapper(data.epochRewardSummaries.edges);
+  }, [data]);
+
   const epochIndividualRewardSummaries = useMemo(() => {
     if (!data?.party) return [];
     return generateEpochIndividualRewardsList({
       rewards,
       epochId,
+      epochRewardSummaries,
       page,
       size: EPOCHS_PAGE_SIZE,
     });
-  }, [data?.party, epochId, page, rewards]);
+  }, [data?.party, epochId, epochRewardSummaries, page, rewards]);
 
   const refetchData = useCallback(
     async (toPage?: number) => {

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.spec.ts

@@ -65,7 +65,11 @@ describe('generateEpochIndividualRewardsList', () => {
 
   it('should return an empty array if no rewards are provided', () => {
     expect(
-      generateEpochIndividualRewardsList({ rewards: [], epochId: 1 })
+      generateEpochIndividualRewardsList({
+        rewards: [],
+        epochId: 1,
+        epochRewardSummaries: [],
+      })
     ).toEqual([
       {
         epoch: 1,
@@ -78,6 +82,7 @@ describe('generateEpochIndividualRewardsList', () => {
     const result = generateEpochIndividualRewardsList({
       rewards: [rewardWrongType],
       epochId: 1,
+      epochRewardSummaries: [],
     });
 
     expect(result).toEqual([
@@ -92,6 +97,15 @@ describe('generateEpochIndividualRewardsList', () => {
     const result = generateEpochIndividualRewardsList({
       rewards: [reward1],
       epochId: 1,
+      epochRewardSummaries: [
+        {
+          __typename: 'EpochRewardSummary',
+          epoch: 1,
+          assetId: 'usd',
+          amount: '100000',
+          rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+        },
+      ],
     });
 
     expect(result[0]).toEqual({
@@ -134,7 +148,11 @@ describe('generateEpochIndividualRewardsList', () => {
 
   it('should return an array sorted by epoch descending', () => {
     const rewards = [reward1, reward2, reward3, reward4];
-    const result1 = generateEpochIndividualRewardsList({ rewards, epochId: 2 });
+    const result1 = generateEpochIndividualRewardsList({
+      rewards,
+      epochId: 2,
+      epochRewardSummaries: [],
+    });
 
     expect(result1[0].epoch).toEqual(2);
     expect(result1[1].epoch).toEqual(1);
@@ -143,6 +161,7 @@ describe('generateEpochIndividualRewardsList', () => {
     const result2 = generateEpochIndividualRewardsList({
       rewards: reorderedRewards,
       epochId: 2,
+      epochRewardSummaries: [],
     });
 
     expect(result2[0].epoch).toEqual(2);
@@ -151,7 +170,11 @@ describe('generateEpochIndividualRewardsList', () => {
 
   it('correctly calculates the total value of rewards for an asset', () => {
     const rewards = [reward1, reward4];
-    const result = generateEpochIndividualRewardsList({ rewards, epochId: 1 });
+    const result = generateEpochIndividualRewardsList({
+      rewards,
+      epochId: 1,
+      epochRewardSummaries: [],
+    });
 
     expect(result[0].rewards[0].totalAmount).toEqual('200');
   });
@@ -159,7 +182,11 @@ describe('generateEpochIndividualRewardsList', () => {
   it('returns data in the expected shape', () => {
     // Just sanity checking the whole structure here
     const rewards = [reward1, reward2, reward3, reward4];
-    const result = generateEpochIndividualRewardsList({ rewards, epochId: 2 });
+    const result = generateEpochIndividualRewardsList({
+      rewards,
+      epochId: 2,
+      epochRewardSummaries: [],
+    });
 
     expect(result).toEqual([
       {
@@ -273,6 +300,7 @@ describe('generateEpochIndividualRewardsList', () => {
     const resultPageOne = generateEpochIndividualRewardsList({
       rewards,
       epochId: 3,
+      epochRewardSummaries: [],
       page: 1,
       size: 2,
     });
@@ -386,6 +414,7 @@ describe('generateEpochIndividualRewardsList', () => {
     const resultPageTwo = generateEpochIndividualRewardsList({
       rewards,
       epochId: 3,
+      epochRewardSummaries: [],
       page: 2,
       size: 2,
     });
@@ -429,4 +458,69 @@ describe('generateEpochIndividualRewardsList', () => {
       },
     ]);
   });
+
+  it('correctly calculates the percentage of two or more rewards by referencing the total rewards amount', () => {
+    const result = generateEpochIndividualRewardsList({
+      rewards: [
+        // reward1 is 100 usd, which is 10% of the total rewards amount
+        reward1,
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+          amount: '200',
+          percentageOfTotal: '0.2',
+          receivedAt: new Date(),
+          asset: { id: 'usd', symbol: 'USD', name: 'USD', decimals: 6 },
+          party: { id: 'blah' },
+          epoch: { id: '1' },
+        },
+      ],
+      epochId: 1,
+      epochRewardSummaries: [
+        {
+          __typename: 'EpochRewardSummary',
+          epoch: 1,
+          assetId: 'usd',
+          amount: '1000',
+          rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+        },
+      ],
+    });
+
+    expect(result[0]).toEqual({
+      epoch: 1,
+      rewards: [
+        {
+          asset: 'USD',
+          decimals: 6,
+          totalAmount: '300',
+          rewardTypes: {
+            [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+              amount: '300',
+              percentageOfTotal: '30',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+          },
+        },
+      ],
+    });
+  });
 });

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.ts

@@ -1,6 +1,9 @@
 import { BigNumber } from '../../../lib/bignumber';
 import { RowAccountTypes } from '../shared-rewards-table-assets/shared-rewards-table-assets';
-import type { RewardFieldsFragment } from '../home/__generated__/Rewards';
+import type {
+  EpochRewardSummaryFieldsFragment,
+  RewardFieldsFragment,
+} from '../home/__generated__/Rewards';
 import type { AccountType } from '@vegaprotocol/types';
 import { calculateEpochOffset } from '../../../lib/epoch-pagination';
 
@@ -32,11 +35,13 @@ const emptyRowAccountTypes = accountTypes.map((type) => [
 export const generateEpochIndividualRewardsList = ({
   rewards,
   epochId,
+  epochRewardSummaries,
   page = 1,
   size = 10,
 }: {
   rewards: RewardFieldsFragment[];
   epochId: number;
+  epochRewardSummaries: EpochRewardSummaryFieldsFragment[];
   page?: number;
   size?: number;
 }) => {
@@ -54,6 +59,7 @@ export const generateEpochIndividualRewardsList = ({
   const epochIndividualRewards = rewards.reduce((acc, reward) => {
     const epochId = reward.epoch.id;
     const assetName = reward.asset.name;
+    const assetId = reward.asset.id;
     const assetDecimals = reward.asset.decimals;
     const rewardType = reward.rewardType;
     const amount = reward.amount;
@@ -70,6 +76,14 @@ export const generateEpochIndividualRewardsList = ({
 
     const epoch = acc.get(epochId);
 
+    // matchingTotalReward is the total awarded for all users for the reward type in the epoch of the asset
+    const matchingTotalRewardAmount = epochRewardSummaries.find(
+      (summary) =>
+        summary.epoch === Number(epochId) &&
+        summary.assetId === assetId &&
+        summary.rewardType === rewardType
+    )?.amount;
+
     let asset = epoch?.rewards.find((r) => r.asset === assetName);
 
     if (!asset) {
@@ -86,22 +100,24 @@ export const generateEpochIndividualRewardsList = ({
       asset.rewardTypes[rewardType] = { amount, percentageOfTotal };
     } else {
       const previousAmount = asset.rewardTypes[rewardType]?.amount;
-      const previousPercentageOfTotal =
-        asset.rewardTypes[rewardType]?.percentageOfTotal;
+      const newAmount = previousAmount
+        ? new BigNumber(previousAmount).plus(amount).toString()
+        : amount;
 
       asset.rewardTypes[rewardType] = {
-        amount: previousAmount
-          ? new BigNumber(previousAmount).plus(amount).toString()
-          : amount,
-        percentageOfTotal: previousPercentageOfTotal
-          ? new BigNumber(previousPercentageOfTotal)
-              .plus(percentageOfTotal)
+        amount: newAmount,
+        percentageOfTotal: matchingTotalRewardAmount
+          ? new BigNumber(newAmount)
+              .dividedBy(matchingTotalRewardAmount)
+              .multipliedBy(100)
               .toString()
-          : percentageOfTotal,
+          : // this should never be reached, if there's an individual reward there should
+            // always be a reward total from the api too, but set it as a fallback just in case
+            percentageOfTotal,
       };
     }
 
-    // totalAmount is the sum of all rewardTypes amounts
+    // totalAmount is the sum of all individual rewardTypes amounts
     asset.totalAmount = Object.values(asset.rewardTypes).reduce(
       (sum, rewardType) => {
         return new BigNumber(sum).plus(rewardType.amount).toString();

apps/governance/src/routes/rewards/home/Rewards.graphql

@@ -22,6 +22,13 @@ fragment DelegationFields on Delegation {
   epoch
 }
 
+fragment EpochRewardSummaryFields on EpochRewardSummary {
+  epoch
+  assetId
+  amount
+  rewardType
+}
+
 query Rewards(
   $partyId: ID!
   $fromEpoch: Int
@@ -50,13 +57,16 @@ query Rewards(
       }
     }
   }
-}
-
-fragment EpochRewardSummaryFields on EpochRewardSummary {
-  epoch
-  assetId
-  amount
-  rewardType
+  epochRewardSummaries(
+    filter: { fromEpoch: $fromEpoch, toEpoch: $toEpoch }
+    pagination: $rewardsPagination
+  ) {
+    edges {
+      node {
+        ...EpochRewardSummaryFields
+      }
+    }
+  }
 }
 
 query EpochAssetsRewards(

apps/governance/src/routes/rewards/home/__generated__/Rewards.ts

@@ -7,6 +7,8 @@ export type RewardFieldsFragment = { __typename?: 'Reward', rewardType: Types.Ac
 
 export type DelegationFieldsFragment = { __typename?: 'Delegation', amount: string, epoch: number };
 
+export type EpochRewardSummaryFieldsFragment = { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType };
+
 export type RewardsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
   fromEpoch?: Types.InputMaybe<Types.Scalars['Int']>;
@@ -16,9 +18,7 @@ export type RewardsQueryVariables = Types.Exact<{
 }>;
 
 
-export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null };
-
-export type EpochRewardSummaryFieldsFragment = { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType };
+export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null, epochRewardSummaries?: { __typename?: 'EpochRewardSummaryConnection', edges?: Array<{ __typename?: 'EpochRewardSummaryEdge', node: { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType } } | null> | null } | null };
 
 export type EpochAssetsRewardsQueryVariables = Types.Exact<{
   epochRewardSummariesFilter?: Types.InputMaybe<Types.RewardSummaryFilter>;
@@ -102,9 +102,20 @@ export const RewardsDocument = gql`
       }
     }
   }
+  epochRewardSummaries(
+    filter: {fromEpoch: $fromEpoch, toEpoch: $toEpoch}
+    pagination: $rewardsPagination
+  ) {
+    edges {
+      node {
+        ...EpochRewardSummaryFields
+      }
+    }
+  }
 }
     ${RewardFieldsFragmentDoc}
-${DelegationFieldsFragmentDoc}`;
+${DelegationFieldsFragmentDoc}
+${EpochRewardSummaryFieldsFragmentDoc}`;
 
 /**
  * __useRewardsQuery__

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

@@ -107,7 +107,7 @@ export const StakingNode = ({ data, previousEpochData }: StakingNodeProps) => {
       <div className="flex items-center gap-1">
         <Icon name={'chevron-left'} />
         <Link className="underline" to={Routes.VALIDATORS}>
-          {t('All validators')}
+          {t('AllValidators')}
         </Link>
       </div>
       <Heading

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

@@ -7,31 +7,30 @@ import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import {
   getFeeLevels,
   sumLiquidityCommitted,
-  marketLiquidityDataProvider,
   lpAggregatedDataProvider,
 } from '@vegaprotocol/liquidity';
-import type { MarketLpQuery } from '@vegaprotocol/liquidity';
+import { marketWithDataProvider } from '@vegaprotocol/markets';
+import type { MarketWithData } from '@vegaprotocol/markets';
 
 import { Market } from './market';
 import { Header } from './header';
 import { LPProvidersGrid } from './providers';
 
-const formatMarket = (data: MarketLpQuery) => {
+const formatMarket = (market: MarketWithData) => {
   return {
-    name: data?.market?.tradableInstrument.instrument.name,
+    name: market?.tradableInstrument.instrument.name,
     symbol:
-      data?.market?.tradableInstrument.instrument.product.settlementAsset
-        .symbol,
+      market?.tradableInstrument.instrument.product.settlementAsset.symbol,
     settlementAsset:
-      data?.market?.tradableInstrument.instrument.product.settlementAsset,
-    targetStake: data?.market?.data?.targetStake,
-    tradingMode: data?.market?.data?.marketTradingMode,
-    trigger: data?.market?.data?.trigger,
+      market?.tradableInstrument.instrument.product.settlementAsset,
+    targetStake: market?.data?.targetStake,
+    tradingMode: market?.data?.marketTradingMode,
+    trigger: market?.data?.trigger,
   };
 };
 
 export const lpDataProvider = makeDerivedDataProvider(
-  [marketLiquidityDataProvider, lpAggregatedDataProvider],
+  [marketWithDataProvider, lpAggregatedDataProvider],
   ([market, lpAggregatedData]) => ({
     market: { ...formatMarket(market) },
     liquidityProviders: lpAggregatedData || [],

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

@@ -1,5 +1,5 @@
 // #region consts
-const asset = 'asset';
+const assetColId = '[col-id="asset.symbol"]';
 const assetDetailsDialog = 'dialog-content';
 const assetRow = 'key-value-table-row';
 const contractAddress = '7_value';
@@ -108,7 +108,7 @@ beforeEach(() => {
 
 const visitPortfolioAndClickAsset = (assetName: string) => {
   cy.visit('/#/portfolio');
-  cy.getByTestId(asset).contains(assetName).click();
+  cy.get(assetColId).contains(assetName).click();
 };
 
 const testTooltip = (index: number, testId: string, tooltip: string) => {

apps/trading-e2e/src/integration/closed-markets.cy.ts

@@ -450,3 +450,17 @@ describe('Closed markets', { tags: '@smoke' }, () => {
       .should('have.text', 'View on Explorer');
   });
 });
+
+describe('no closed markets', { tags: '@smoke', testIsolation: true }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Closed markets"]').click();
+  });
+
+  it('can see no markets message', () => {
+    // 6001-MARK-034
+    cy.getByTestId('tab-closed-markets').should('contain.text', 'No markets');
+  });
+});

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

@@ -1,10 +1,8 @@
 const dialogContent = 'dialog-content';
 const nodeHealth = 'node-health';
-const statusIncidentsLink = 'footer [data-testid=external-link]';
 
 describe('home', { tags: '@regression' }, () => {
   before(() => {
-    cy.clearAllLocalStorage();
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/');
@@ -76,23 +74,14 @@ describe('home', { tags: '@regression' }, () => {
       cy.visit('/');
     });
 
-    // 0006-NETW-002
-    // 0006-NETW-003
-    // 0006-NETW-011
     it('switch to fairground network and check status & incidents link', () => {
+      // 0006-NETW-002
+      // 0006-NETW-003
       cy.getByTestId('navigation')
         .find('[data-testid="network-switcher"]')
+        .should('have.text', 'Custom')
         .click();
-      cy.getByTestId('network-item').contains('Fairground testnet').click();
-      cy.get('[aria-haspopup="menu"]').should('contain.text', 'Fairground');
-      cy.url().should('include', 'fairground.wtf');
-      cy.contains('Continue').click();
-      cy.get(statusIncidentsLink)
-        .children('span')
-        .should('have.text', 'Mainnet status & incidents');
-      cy.get(statusIncidentsLink)
-        .should('have.attr', 'href')
-        .and('contain', 'https://blog.vega.xyz/tagged/vega-incident-reports');
+      cy.getByTestId('network-item').contains('Fairground testnet');
     });
   });
 });

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

@@ -1,7 +1,10 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import type { MarketsQuery } from '@vegaprotocol/markets';
 import * as Schema from '@vegaprotocol/types';
 
 const rowSelector =
   '[data-testid="tab-all-markets"] .ag-center-cols-container .ag-row';
+const colInstrumentCode = '[col-id="tradableInstrument.instrument.code"]';
 
 describe('markets all table', { tags: '@smoke' }, () => {
   beforeEach(() => {
@@ -60,7 +63,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
     // 6001-MARK-035
     cy.get(rowSelector)
       .first()
-      .find('[col-id="tradableInstrument.instrument.code"]')
+      .find(colInstrumentCode)
       .should('have.text', 'SOLUSD');
 
     //  6001-MARK-036
@@ -155,6 +158,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
   });
 
   it('able to open and sort full market list - market page', () => {
+    // 6001-MARK-064
     const ExpectedSortedMarkets = [
       'AAPL.MF21',
       'BTCUSD.MF21',
@@ -167,8 +171,38 @@ describe('markets all table', { tags: '@smoke' }, () => {
     cy.get('.ag-header-cell-label').contains('Market').click(); // sort by market name
     for (let i = 0; i < ExpectedSortedMarkets.length; i++) {
       cy.get(`[row-index=${i}]`)
-        .find('[col-id="tradableInstrument.instrument.code"]')
+        .find(colInstrumentCode)
         .should('have.text', ExpectedSortedMarkets[i]);
     }
   });
+
+  it('can drag and drop columns', () => {
+    // 6001-MARK-065
+    cy.get('.ag-overlay-loading-wrapper').should('not.be.visible');
+    cy.get(colInstrumentCode)
+      .realMouseDown()
+      .realMouseMove(700, 15)
+      .realMouseUp();
+    cy.get(colInstrumentCode).should(($element) => {
+      const attributeValue = $element.attr('aria-colindex');
+      expect(attributeValue).not.to.equal('1');
+    });
+  });
+});
+
+describe('no all markets', { tags: '@smoke', testIsolation: true }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    const markets: MarketsQuery = {};
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'Markets', markets);
+    });
+    cy.mockSubscription();
+    cy.visit('/#/markets/all');
+  });
+
+  it('can see no markets message', () => {
+    // 6001-MARK-048
+    cy.getByTestId('tab-all-markets').should('contain.text', 'No markets');
+  });
 });

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

@@ -0,0 +1,326 @@
+import { checkSorting } from '@vegaprotocol/cypress';
+import * as Schema from '@vegaprotocol/types';
+
+const liquidityTab = 'Liquidity';
+const rowSelector =
+  '[data-testid="tab-liquidity"] .ag-center-cols-container .ag-row';
+const rowSelectorLiquidityActive =
+  '[data-testid="tab-active"] .ag-center-cols-container .ag-row';
+const rowSelectorLiquidityInactive =
+  '[data-testid="tab-inactive"] .ag-center-cols-container .ag-row';
+const marketSummaryBlock = 'header-summary';
+const itemValue = 'item-value';
+const itemHeader = 'item-header';
+const colCommitmentAmount = '[col-id="commitmentAmount"]';
+const colAverageEntryValuation = '[col-id="averageEntryValuation"]';
+const colEquityLikeShare = '[col-id="equityLikeShare"]';
+const colFee = '[col-id="fee"]';
+const colCommitmentAmount_1 = '[col-id="commitmentAmount_1"]';
+const colBalance = '[col-id="balance"]';
+const colStatus = '[col-id="status"]';
+const colCreatedAt = '[col-id="createdAt"] button';
+const colUpdatedAt = '[col-id="updatedAt"] button';
+
+const headers = [
+  'Party',
+  'Commitment (tDAI)',
+  'Share',
+  'Proposed fee',
+  'Market valuation at entry',
+  'Obligation',
+  'Supplied',
+  'Status',
+  'Created',
+  'Updated',
+];
+
+describe('liquidity table - trading', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockSubscription();
+    cy.mockTradingPage(
+      Schema.MarketState.STATE_ACTIVE,
+      Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
+    );
+    cy.visit('/#/markets/market-0');
+    cy.wait('@MarketData');
+    cy.getByTestId(liquidityTab).click();
+    cy.wait('@LiquidityProvisions');
+  });
+
+  it('can see table headers', () => {
+    // 5002-LIQP-001
+    cy.getByTestId('tab-liquidity').within(($headers) => {
+      cy.wrap($headers)
+        .get('.ag-header-cell-text')
+        .each(($header, i) => {
+          cy.wrap($header).should('have.text', headers[i]);
+        });
+    });
+  });
+
+  it('renders liquidity table correctly', () => {
+    // 5002-LIQP-002
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="party.id"]')
+      .should(
+        'have.text',
+        '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f'
+      );
+
+    cy.get(rowSelector)
+      .first()
+      .find(colCommitmentAmount)
+      .should('have.text', '4,000.00');
+
+    cy.get(rowSelector)
+      .first()
+      .find(colEquityLikeShare)
+      .should('have.text', '100.00%');
+
+    cy.get(rowSelector).first().find(colFee).should('have.text', '0.09%');
+
+    cy.get(rowSelector)
+      .first()
+      .find(colAverageEntryValuation)
+      .should('have.text', '685,852.93692');
+
+    cy.get(rowSelector)
+      .first()
+      .find(colCommitmentAmount_1)
+      .should('have.text', '4,000.00');
+
+    cy.get(rowSelector)
+      .first()
+      .find(colBalance)
+      .scrollIntoView()
+      .should('have.text', '4,000.00');
+
+    cy.get(rowSelector).first().find(colStatus).should('have.text', 'Active');
+
+    cy.get(rowSelector).first().find(colCreatedAt).should('not.be.empty');
+    cy.get(rowSelector).first().find(colUpdatedAt).should('not.be.empty');
+  });
+  it.skip('liquidity status column should be sorted properly', () => {
+    // 5002-LIQP-003
+    const liquidityColDefault = ['Active', 'Pending'];
+    const liquidityColAsc = ['Active', 'Pending'];
+    const liquidityColDesc = ['Pending', 'Active'];
+    checkSorting(
+      'status',
+      liquidityColDefault,
+      liquidityColAsc,
+      liquidityColDesc
+    );
+  });
+});
+
+describe('liquidity table view', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockSubscription();
+    cy.mockTradingPage(
+      Schema.MarketState.STATE_ACTIVE,
+      Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
+    );
+    cy.visit('/#/liquidity/market-0');
+    cy.wait('@LiquidityProvisions');
+  });
+
+  it('can see header title', () => {
+    // 5002-LIQP-004
+    // 5002-LIQP-005
+    cy.getByTestId('header-title')
+      .should('contain.text', 'BTCUSD.MF21 liquidity provision')
+      .and('contain.text', 'Go to trading');
+  });
+
+  it('can see target stake', () => {
+    // 5002-LIQP-006
+    cy.getByTestId(marketSummaryBlock).within(() => {
+      cy.getByTestId('target-stake').within(() => {
+        cy.getByTestId(itemHeader).should('have.text', 'Target stake');
+        cy.getByTestId(itemValue).should('have.text', '10.00 tDAI').realHover();
+      });
+    });
+    cy.getByTestId('tooltip-content').should(
+      'contain.text',
+      `The market's liquidity requirement which is derived from the maximum open interest observed over a rolling time window.The market's liquidity requirement which is derived from the maximum open interest observed over a rolling time window.`
+    );
+  });
+
+  it('can see supplied stake', () => {
+    // 5002-LIQP-007
+    cy.getByTestId(marketSummaryBlock).within(() => {
+      cy.getByTestId('supplied-stake').within(() => {
+        cy.getByTestId(itemHeader).should('have.text', 'Supplied stake');
+        cy.getByTestId(itemValue).should('have.text', '0.01 tDAI').realHover();
+      });
+    });
+    cy.getByTestId('tooltip-content').should(
+      'contain.text',
+      'The current amount of liquidity supplied for this market.'
+    );
+  });
+
+  it('can see liquidity supplied', () => {
+    //// 5002-LIQP-008
+    cy.getByTestId(marketSummaryBlock).within(() => {
+      cy.getByTestId('liquidity-supplied').within(() => {
+        cy.getByTestId(itemHeader).should('have.text', 'Liquidity supplied');
+        cy.getByTestId('indicator').should('be.visible');
+        cy.getByTestId(itemValue).should('have.text', '0.10%').realHover();
+      });
+    });
+  });
+
+  it('can see market id', () => {
+    // 5002-LIQP-009
+    cy.getByTestId(marketSummaryBlock).within(() => {
+      cy.getByTestId('liquidity-market-id').within(() => {
+        cy.getByTestId(itemHeader).should('have.text', 'Market ID');
+        cy.getByTestId(itemValue).should('have.text', 'market-0');
+      });
+    });
+  });
+
+  it('can see market id', () => {
+    // 5002-LIQP-010
+    cy.getByTestId(marketSummaryBlock).within(() => {
+      cy.getByTestId('liquidity-learn-more').within(() => {
+        cy.getByTestId(itemHeader).should('have.text', 'Learn more');
+        cy.getByTestId(itemValue).should('have.text', 'Providing liquidity');
+        cy.getByTestId('external-link')
+          .should('have.attr', 'href')
+          .and(
+            'include',
+            'https://docs.vega.xyz/testnet/concepts/liquidity/provision'
+          );
+      });
+    });
+  });
+
+  describe('liquidity table view', { tags: '@smoke' }, () => {
+    it('can see table headers', () => {
+      cy.getByTestId('tab-active').within(($headers) => {
+        cy.wrap($headers)
+          .get('.ag-header-cell-text')
+          .each(($header, i) => {
+            cy.wrap($header).should('have.text', headers[i]);
+          });
+      });
+    });
+
+    it('renders liquidity active table correctly', () => {
+      // 5002-LIQP-011
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find('[col-id="party.id"]')
+        .should(
+          'have.text',
+          '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f'
+        );
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colCommitmentAmount)
+        .should('have.text', '4,000.00');
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colEquityLikeShare)
+        .should('have.text', '100.00%');
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colFee)
+        .should('have.text', '0.09%');
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colAverageEntryValuation)
+        .should('have.text', '685,852.93692');
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colCommitmentAmount_1)
+        .should('have.text', '4,000.00');
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colBalance)
+        .should('have.text', '4,000.00');
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colStatus)
+        .should('have.text', 'Active');
+
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colCreatedAt)
+        .should('not.be.empty');
+      cy.get(rowSelectorLiquidityActive)
+        .first()
+        .find(colUpdatedAt)
+        .should('not.be.empty');
+    });
+
+    it('renders liquidity inactive table correctly', () => {
+      //// 5002-LIQP-012
+      cy.getByTestId('Inactive').click();
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find('[col-id="party.id"]')
+        .should(
+          'have.text',
+          'cc464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f'
+        );
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colCommitmentAmount)
+        .should('have.text', '4,000.00');
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colEquityLikeShare)
+        .should('have.text', '100.00%');
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colFee)
+        .should('have.text', '0.40%');
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colAverageEntryValuation)
+        .should('have.text', '685,852.93692');
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colCommitmentAmount_1)
+        .should('have.text', '4,000.00');
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colBalance)
+        .should('have.text', '2,000.00');
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colStatus)
+        .should('have.text', 'Pending');
+
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colCreatedAt)
+        .should('not.be.empty');
+      cy.get(rowSelectorLiquidityInactive)
+        .first()
+        .find(colUpdatedAt)
+        .should('not.be.empty');
+    });
+  });
+});

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

@@ -25,6 +25,7 @@ describe('markets selector', { tags: '@smoke' }, () => {
     cy.wait('@MarketsCandles');
   });
 
+  // 6001-MARK-066
   it('can toggle the sidebar', () => {
     cy.getByTestId('market-selector').should('be.visible');
     cy.getByTestId('sidebar-toggle').click();
@@ -67,6 +68,7 @@ describe('markets selector', { tags: '@smoke' }, () => {
       .each((item, i) => {
         const market = data[i];
         // 6001-MARK-021
+        // 6001-MARK-022
         expect(item.find('h3').text()).equals(market.code);
         expect(
           item.find('[data-testid="market-selector-data-row"]').eq(0).text()
@@ -84,8 +86,19 @@ describe('markets selector', { tags: '@smoke' }, () => {
       });
   });
 
-  // 6001-MARK-27
+  it('can see all markets link', () => {
+    // 6001-MARK-026
+    cy.getByTestId('market-selector').within(() => {
+      cy.getByTestId('all-markets-link')
+        .should('be.visible')
+        .and('have.text', 'All markets')
+        .and('have.attr', 'href')
+        .and('contain', '#/markets/all');
+    });
+  });
+
   it('can use the filter options', () => {
+    // 6001-MARK-027
     // product type
     cy.getByTestId('product-Spot').click();
     cy.getByTestId(list).contains('Spot markets coming soon.');
@@ -94,7 +107,7 @@ describe('markets selector', { tags: '@smoke' }, () => {
     cy.getByTestId('product-Future').click();
     cy.getByTestId(list).find('a').should('have.length', 4);
 
-    // 6001-MARK-29
+    // 6001-MARK-029
     cy.getByTestId(searchInput).clear().type('btc');
     cy.getByTestId(list).find('a').should('have.length', 2);
     cy.getByTestId(list).find('a').eq(1).contains('BTCUSD.MF21');
@@ -103,4 +116,29 @@ describe('markets selector', { tags: '@smoke' }, () => {
     cy.getByTestId(searchInput).clear();
     cy.getByTestId(list).find('a').should('have.length', 4);
   });
+
+  it('can sort by by top gaining and top losing market', () => {
+    // 6001-MARK-030
+    // 6001-MARK-031
+    // 6001-MARK-032
+    // 6001-MARK-033
+    cy.getByTestId(' sort-trigger').click();
+    cy.getByTestId('sort-item-Gained')
+      .contains('Top gaining')
+      .should('be.visible');
+    cy.getByTestId('sort-item-Lost')
+      .contains('Top losing')
+      .should('be.visible');
+    cy.getByTestId('sort-item-New')
+      .contains('New markets')
+      .should('be.visible');
+  });
+
+  it('can filter by settlement asset', () => {
+    // 6001-MARK-028
+    cy.getByTestId('asset-trigger').click();
+    cy.getByTestId('asset-id-asset-3').contains('tBTC').click();
+    cy.getByTestId(list).find('a').should('have.length', 1);
+    cy.getByTestId(list).find('a').eq(0).contains('ETHBTC.QM21');
+  });
 });

apps/trading-e2e/src/integration/markets-proposed.cy.ts

@@ -1,16 +1,16 @@
-import { checkSorting } from '@vegaprotocol/cypress';
+import { aliasGQLQuery, checkSorting } from '@vegaprotocol/cypress';
+import type { ProposalsListQuery } from '@vegaprotocol/proposals';
 
 const rowSelector =
   '[data-testid="tab-proposed-markets"] .ag-center-cols-container .ag-row';
+const colMarketId = '[col-id="market"]';
 
 describe('markets proposed table', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.clearLocalStorage().then(() => {
-      cy.mockTradingPage();
-      cy.mockSubscription();
-      cy.visit('/#/markets/all');
-      cy.get('[data-testid="Proposed markets"]').click();
-    });
+  before(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
   });
 
   it('can see table headers', () => {
@@ -35,10 +35,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
 
   it('renders markets correctly', () => {
     // 6001-MARK-049
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="market"]')
-      .should('have.text', 'ETHUSD');
+    cy.get(rowSelector).first().find(colMarketId).should('have.text', 'ETHUSD');
 
     //  6001-MARK-050
     cy.get(rowSelector)
@@ -119,6 +116,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
       );
   });
   it('proposed markets tab should be sorted properly', () => {
+    // 6001-MARK-062
     cy.get('[data-testid="Proposed markets"]').click({ force: true });
     const marketColDefault = [
       'ETHUSD',
@@ -196,4 +194,31 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
     ];
     checkSorting('state', stateColDefault, stateColAsc, stateColDesc);
   });
+
+  it('can drag and drop columns', () => {
+    // 6001-MARK-063
+    cy.get(colMarketId).realMouseDown().realMouseMove(700, 15).realMouseUp();
+    cy.get(colMarketId).should(($element) => {
+      const attributeValue = $element.attr('aria-colindex');
+      expect(attributeValue).not.to.equal('1');
+    });
+  });
+});
+
+describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    const proposal: ProposalsListQuery = {};
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'ProposalsList', proposal);
+    });
+    cy.mockSubscription();
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
+  });
+
+  it('can see no markets message', () => {
+    // 6001-MARK-061
+    cy.getByTestId('tab-proposed-markets').should('contain.text', 'No markets');
+  });
 });

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

@@ -0,0 +1,102 @@
+const orderbookTab = 'Orderbook';
+const orderbookTable = 'tab-orderbook';
+const askPrice = 'price-9894585';
+const bidPrice = 'price-9889001';
+const askVolume = 'ask-vol-9894585';
+const bidVolume = 'bid-vol-9889001';
+const askCumulative = 'cumulative-vol-9894585';
+const bidCumulative = 'cumulative-vol-9889001';
+const midPrice = 'middle-mark-price-4612690000';
+const priceResolution = 'resolution';
+const dealTicketPrice = 'order-price';
+const resPrice = 'price-990';
+
+describe('order book', { tags: '@smoke' }, () => {
+  before(() => {
+    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.94585');
+    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', '39');
+    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.94585');
+  });
+
+  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)
+      .find('option')
+      .each(($el, index) => {
+        expect($el.text()).to.equal(resolutions[index]);
+      });
+
+    cy.getByTestId(priceResolution).select('0.0');
+    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-accounts.cy.ts

@@ -20,6 +20,7 @@ describe('accounts', { tags: '@smoke' }, () => {
     // 7001-COLL-006
     // 7001-COLL-007
     // 1003-TRAN-001
+    // 7001-COLL-012
 
     const tradingAccountRowId = '[row-id="t-0"]';
     cy.getByTestId('Collateral').click();
@@ -34,28 +35,23 @@ describe('accounts', { tags: '@smoke' }, () => {
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="used"]')
-      .should('have.text', '1.010.00%');
+      .should('have.text', '1.01' + '1.00%');
 
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="available"]')
-      .should('have.text', '100,000.00');
+      .should('have.text', '100.00');
 
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="total"]')
-      .should('have.text', '100,001.01');
+      .should('have.text', '101.01');
 
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="accounts-actions"]')
       .should('have.text', '');
 
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="total"]')
-      .should('have.text', '100,001.01');
-
     cy.getByTestId('tab-accounts')
       .get('[col-id="accounts-actions"]')
       .find('[data-testid="dropdown-menu"]')
@@ -101,7 +97,7 @@ describe('accounts', { tags: '@smoke' }, () => {
       'Liquidity provision fee reward account balance',
       'Market proposer reward account balance',
     ];
-    cy.getByTestId('asset').contains('tEURO').click();
+    cy.get('[col-id="asset.symbol"]').contains('tEURO').click();
     cy.get('[data-testid$="_label"]').should('have.length', 16);
     cy.get('[data-testid$="_label"]').each((element, index) => {
       cy.wrap(element).should('have.text', titles[index]);
@@ -112,8 +108,8 @@ describe('accounts', { tags: '@smoke' }, () => {
 
   it('should open usage breakdown dialog when clicked on used', () => {
     // 7001-COLL-009
-    cy.getByTestId('breakdown').contains('1.01').click();
-    const headers = ['Market', 'Account type', 'Balance'];
+    cy.get('[col-id="used"]').contains('1.01').click();
+    const headers = ['Market', 'Account type', 'Balance', 'Margin health'];
     cy.getByTestId('usage-breakdown').within(($headers) => {
       cy.wrap($headers)
         .get('.ag-header-cell-text')
@@ -133,11 +129,12 @@ describe('accounts', { tags: '@smoke' }, () => {
         });
       }
     });
+    // 7001-COLL-010
     it('sorting by asset', () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = ['tBTC', 'tEURO', 'tDAI', 'tBTC'];
       const marketsSortedAsc = ['tBTC', 'tBTC', 'tDAI', 'tEURO'];
-      const marketsSortedDesc = ['tEURO', 'tDAI', 'tBTC', 'tBTC'];
+      const marketsSortedDesc = Array.from(marketsSortedAsc).reverse();
       checkSorting(
         'asset.symbol',
         marketsSortedDefault,
@@ -149,23 +146,14 @@ describe('accounts', { tags: '@smoke' }, () => {
     it('sorting by total', () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
-        '1,000.00002',
+        '1,000.00',
         '1,000.01',
         '1,000.00',
-        '1,000.00001',
-      ];
-      const marketsSortedAsc = [
-        '1,000.00',
-        '1,000.00001',
-        '1,000.00002',
-        '1,000.01',
-      ];
-      const marketsSortedDesc = [
-        '1,000.01',
-        '1,000.00002',
-        '1,000.00001',
         '1,000.00',
       ];
+      const marketsSortedAsc = ['1,000.00', '1,000.00', '1,000.00', '1,000.01'];
+      const marketsSortedDesc = Array.from(marketsSortedAsc).reverse();
+
       checkSorting(
         'total',
         marketsSortedDefault,
@@ -176,24 +164,22 @@ describe('accounts', { tags: '@smoke' }, () => {
 
     it('sorting by used', () => {
       cy.getByTestId('Collateral').click();
+      // concat actual value with percentage value
+      // as cypress will pick up the entire cell contes
+      // textContent
       const marketsSortedDefault = [
-        '0.000.00%',
-        '0.010.00%',
-        '0.000.00%',
-        '0.000.00%',
+        '0.00' + '0.00%',
+        '0.01' + '0.00%',
+        '0.00' + '0.00%',
+        '0.00' + '0.00%',
       ];
       const marketsSortedAsc = [
-        '0.000.00%',
-        '0.000.00%',
-        '0.000.00%',
-        '0.010.00%',
-      ];
-      const marketsSortedDesc = [
-        '0.010.00%',
-        '0.000.00%',
-        '0.000.00%',
-        '0.000.00%',
+        '0.00' + '0.00%',
+        '0.00' + '0.00%',
+        '0.00' + '0.00%',
+        '0.01' + '0.00%',
       ];
+      const marketsSortedDesc = Array.from(marketsSortedAsc).reverse();
       checkSorting(
         'used',
         marketsSortedDefault,
@@ -205,23 +191,13 @@ describe('accounts', { tags: '@smoke' }, () => {
     it('sorting by total', () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
-        '1,000.00002',
+        '1,000.00',
         '1,000.01',
         '1,000.00',
-        '1,000.00001',
-      ];
-      const marketsSortedAsc = [
-        '1,000.00',
-        '1,000.00001',
-        '1,000.00002',
-        '1,000.01',
-      ];
-      const marketsSortedDesc = [
-        '1,000.01',
-        '1,000.00002',
-        '1,000.00001',
         '1,000.00',
       ];
+      const marketsSortedAsc = ['1,000.00', '1,000.00', '1,000.00', '1,000.01'];
+      const marketsSortedDesc = Array.from(marketsSortedAsc).reverse();
 
       checkSorting(
         'total',

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

@@ -81,7 +81,7 @@ describe(
           cy.visit('/#/markets/market-0');
         });
         it('must display that market is not accepting orders', function () {
-          cy.getByTestId('dealticket-error-message-summary').should(
+          cy.getByTestId('deal-ticket-error-message-summary').should(
             'have.text',
             `This market is ${marketState
               .split('_')

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

@@ -45,7 +45,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
 
       cy.getByTestId(placeOrderBtn).click();
 
-      cy.getByTestId('dealticket-error-message-expiry').should(
+      cy.getByTestId('deal-ticket-error-message-expiry').should(
         'have.text',
         'The expiry date that you have entered appears to be in the past'
       );
@@ -57,7 +57,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderTIFDropDown).select('TIME_IN_FORCE_GTC');
       cy.getByTestId(orderSizeField).clear().type('1');
       cy.getByTestId(orderPriceField).clear().type('1.123456');
-      cy.getByTestId('dealticket-error-message-price-limit').should(
+      cy.getByTestId('deal-ticket-error-message-price-limit').should(
         'have.text',
         'Price accepts up to 5 decimal places'
       );
@@ -79,7 +79,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderSizeField).clear().type('1.234');
       // 7002-SORD-060
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('dealticket-error-message-size-market').should(
+      cy.getByTestId('deal-ticket-error-message-size-market').should(
         'have.text',
         'Size must be whole numbers for this market'
       );
@@ -88,7 +88,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
     it('must warn if order size is set to 0', function () {
       cy.getByTestId(orderSizeField).clear().type('0');
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('dealticket-error-message-size-market').should(
+      cy.getByTestId('deal-ticket-error-message-size-market').should(
         'have.text',
         'Size cannot be lower than 1'
       );
@@ -96,15 +96,29 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
 
     it('must have total margin available', () => {
       // 7001-COLL-011
-      cy.getByTestId('tab-ticket')
-        .find('.text-xs')
-        .eq(5)
-        .within(() => {
-          cy.get('[data-state="closed"]').should(
-            'have.text',
-            'Total margin available100,000.01 tDAI'
-          );
-        });
+      cy.getByTestId('deal-ticket-fee-total-margin-available').within(() => {
+        cy.get('[data-state="closed"]').should(
+          'have.text',
+          'Total margin available100.01 tDAI'
+        );
+      });
+    });
+
+    it('must have current margin allocation', () => {
+      cy.getByTestId('deal-ticket-fee-current-margin-allocation').within(() => {
+        cy.get('[data-state="closed"]:first').should(
+          'have.text',
+          'Current margin allocation'
+        );
+      });
+    });
+
+    it('should open usage breakdown dialog when clicked on current margin allocation', () => {
+      cy.getByTestId('deal-ticket-fee-current-margin-allocation').within(() => {
+        cy.get('button').click();
+      });
+      cy.getByTestId('usage-breakdown').should('exist');
+      cy.getByTestId('dialog-close').click();
     });
   });
 });

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

@@ -1,6 +1,10 @@
 import * as Schema from '@vegaprotocol/types';
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import { accountsQuery, amendGeneralAccountBalance } from '@vegaprotocol/mock';
+import {
+  accountsQuery,
+  amendGeneralAccountBalance,
+  amendMarginAccountBalance,
+} from '@vegaprotocol/mock';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
 
@@ -12,8 +16,9 @@ describe(
       beforeEach(() => {
         cy.setVegaWallet();
         cy.mockTradingPage();
-        const accounts = accountsQuery();
-        amendGeneralAccountBalance(accounts, 'market-0', '0');
+        let accounts = accountsQuery();
+        accounts = amendMarginAccountBalance(accounts, 'market-0', '1000');
+        accounts = amendGeneralAccountBalance(accounts, 'market-0', '0');
         cy.mockGQL((req) => {
           aliasGQLQuery(req, 'Accounts', accounts);
         });
@@ -23,10 +28,15 @@ describe(
       });
 
       it('should show an error if your balance is zero', () => {
+        const accounts = accountsQuery();
+        amendMarginAccountBalance(accounts, 'market-0', '0');
+        cy.mockGQL((req) => {
+          aliasGQLQuery(req, 'Accounts', accounts);
+        });
         // 7002-SORD-060
         cy.getByTestId('place-order').should('be.enabled');
         // 7002-SORD-003
-        cy.getByTestId('dealticket-error-message-zero-balance').should(
+        cy.getByTestId('deal-ticket-error-message-zero-balance').should(
           'have.text',
           'You need ' +
             'tDAI' +
@@ -40,8 +50,9 @@ describe(
       beforeEach(() => {
         cy.setVegaWallet();
         cy.mockTradingPage();
-        const accounts = accountsQuery();
-        amendGeneralAccountBalance(accounts, 'market-0', '1');
+        let accounts = accountsQuery();
+        accounts = amendMarginAccountBalance(accounts, 'market-0', '1000');
+        accounts = amendGeneralAccountBalance(accounts, 'market-0', '1');
         cy.mockGQL((req) => {
           aliasGQLQuery(req, 'Accounts', accounts);
         });
@@ -54,11 +65,11 @@ describe(
         // 7002-SORD-003
 
         // warning should show immediately
-        cy.getByTestId('dealticket-warning-margin').should(
+        cy.getByTestId('deal-ticket-warning-margin').should(
           'contain.text',
           'You may not have enough margin available to open this position'
         );
-        cy.getByTestId('dealticket-warning-margin').should(
+        cy.getByTestId('deal-ticket-warning-margin').should(
           'contain.text',
           'You may not have enough margin available to open this position. 5.00 tDAI is currently required. You have only 0.01001 tDAI available.'
         );

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

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

apps/trading-e2e/src/integration/trading-deal-ticket-time-in-force.cy.ts

@@ -5,6 +5,10 @@ import {
   toggleMarket,
 } from '../support/deal-ticket';
 
+const tooltipContent = 'tooltip-content';
+const reduceOnly = 'reduce-only';
+const postOnly = 'post-only';
+
 describe('time in force validation', { tags: '@smoke' }, () => {
   before(() => {
     cy.setVegaWallet();
@@ -122,13 +126,18 @@ describe('time in force validation', { tags: '@smoke' }, () => {
       // 7002-SORD-026
 
       it(`post and reduce order market for ${tif.code}`, function () {
+        // 7003-SORD-054
+        // 7003-SORD-055
+        // 7003-SORD-056
+        // 7003-SORD-057
+
         cy.getByTestId(orderTIFDropDown).select(tif.value);
         cy.get(`[data-testid=${orderTIFDropDown}] option:selected`).should(
           'have.text',
           tif.text
         );
-        cy.getByTestId('post-only').should('be.disabled');
-        cy.getByTestId('reduce-only').should('be.enabled');
+        cy.getByTestId(postOnly).should('be.disabled');
+        cy.getByTestId(reduceOnly).should('be.enabled');
       });
     });
   });
@@ -144,14 +153,33 @@ describe('time in force validation', { tags: '@smoke' }, () => {
 
     validTIFLimit.forEach((tif) => {
       it(`post and reduce order for limit ${tif.code}`, function () {
+        // 7003-SORD-054
+        // 7003-SORD-055
+        // 7003-SORD-056
+        // 7003-SORD-057
         cy.getByTestId(orderTIFDropDown).select(tif.value);
         cy.get(`[data-testid=${orderTIFDropDown}] option:selected`).should(
           'have.text',
           tif.text
         );
-        cy.getByTestId('post-only').should('be.enabled');
-        cy.getByTestId('reduce-only').should('be.disabled');
+        cy.getByTestId(postOnly).should('be.enabled');
+        cy.getByTestId(reduceOnly).should('be.disabled');
       });
     });
+    it(`can see explanation of what post only and reduce only is/does`, function () {
+      // 7003-SORD-058
+      cy.get('[for="post-only"]').should('have.text', 'Post only').realHover();
+      cy.getByTestId(tooltipContent).should(
+        'contain.text',
+        `"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.`
+      );
+      cy.get('[for="reduce-only"]')
+        .should('have.text', 'Reduce only')
+        .realHover();
+      cy.getByTestId(tooltipContent).should(
+        'contain.text',
+        `"Reduce only" can be used only with non-persistent orders, such as "Fill or Kill" or "Immediate or Cancel".`
+      );
+    });
   });
 });

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

@@ -293,43 +293,36 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
 });
 function validatePositionsDisplayed(multiKey = false) {
   cy.getByTestId('tab-positions').should('be.visible');
-  cy.getByTestId('tab-positions').within(() => {
-    cy.get('[col-id="marketName"]')
-      .should('be.visible')
-      .each(($marketSymbol) => {
-        cy.wrap($marketSymbol).invoke('text').should('not.be.empty');
-      });
+  cy.getByTestId('tab-positions')
+    .get('.ag-center-cols-container .ag-row')
+    .first()
+    .within(() => {
+      cy.get('[col-id="marketName"]')
+        .should('be.visible')
+        .invoke('text')
+        .should('not.be.empty');
 
-    cy.get('.ag-center-cols-container [col-id="openVolume"]').each(
-      ($openVolume) => {
-        cy.wrap($openVolume).invoke('text').should('not.be.empty');
+      cy.get('[col-id="openVolume"]').should('not.be.empty');
+
+      // includes average entry price, mark price, realised PNL & leverage
+      cy.getByTestId('flash-cell').should('not.be.empty');
+
+      if (!multiKey) {
+        cy.get('[col-id="currentLeverage"]').should('contain.text', '2,767.3');
+        cy.get('[col-id="marginAccountBalance"]') // margin allocated
+          .should('contain.text', '0.01');
       }
-    );
 
-    // includes average entry price, mark price, realised PNL & leverage
-    cy.getByTestId('flash-cell').each(($prices) => {
-      cy.wrap($prices).invoke('text').should('not.be.empty');
+      cy.get('[col-id="unrealisedPNL"]').should('not.be.empty');
+      cy.get('[col-id="notional"]').should('contain.text', '276,761.40348'); // Total tDAI position
+      cy.get('[col-id="realisedPNL"]').should('contain.text', '2.30'); // Total Realised PNL
+      cy.get('[col-id="unrealisedPNL"]').should('contain.text', '8.95'); // Total Unrealised PNL
     });
 
-    if (!multiKey) {
-      cy.get('[col-id="currentLeverage"]').should('contain.text', '2.846.1');
-      cy.get('[col-id="marginAccountBalance"]') // margin allocated
-        .should('contain.text', '0.01');
-    }
-
-    cy.get('[col-id="unrealisedPNL"]').each(($unrealisedPnl) => {
-      cy.wrap($unrealisedPnl).invoke('text').should('not.be.empty');
-    });
-
-    cy.get('[col-id="notional"]').should('contain.text', '276,761.40348'); // Total tDAI position
-    cy.get('[col-id="realisedPNL"]').should('contain.text', '2.30'); // Total Realised PNL
-    cy.get('[col-id="unrealisedPNL"]').should('contain.text', '8.95'); // Total Unrealised PNL
-
-    cy.get('.ag-header-row [col-id="notional"]')
-      .should('contain.text', 'Notional')
-      .realHover();
-    cy.get('.ag-popup').should('contain.text', 'Mark price x open volume');
-  });
+  cy.get('.ag-header-row [col-id="notional"]')
+    .should('contain.text', 'Notional')
+    .realHover();
+  cy.get('.ag-popup').should('contain.text', 'Mark price x open volume');
 
   cy.getByTestId('close-position').should('be.visible').and('have.length', 3);
 }

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

@@ -1,32 +1,79 @@
-beforeEach(() => {
-  cy.mockTradingPage();
-  cy.mockSubscription();
-  cy.visit('/#/markets/market-0');
-});
+const colHeader = '.ag-header-cell-text';
+const colIdPrice = '[col-id=price]';
+const colIdSize = '[col-id=size]';
+const colIdCreatedAt = '[col-id=createdAt]';
+const tradesTab = 'Trades';
+const tradesTable = 'tab-trades';
 
 describe('trades', { tags: '@smoke' }, () => {
-  const colIdPrice = 'price';
-  const colIdSize = 'size';
-  const colIdCreatedAt = 'createdAt';
+  beforeEach(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+  });
+  before(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId(tradesTab).click();
+  });
 
-  it('renders trades', () => {
-    cy.getByTestId('Trades').click();
-    cy.getByTestId('tab-trades').should('be.visible');
+  it('show trades', () => {
+    // 6005-THIS-001
+    // 6005-THIS-002
+    cy.getByTestId(tradesTab).should('be.visible');
+    cy.getByTestId(tradesTable).should('be.visible');
+    cy.getByTestId(tradesTable).should('not.be.empty');
+  });
 
-    cy.get(`[col-id=${colIdPrice}]`).each(($tradePrice) => {
+  it('show trades prices', () => {
+    // 6005-THIS-003
+    cy.get(`${colIdPrice} ${colHeader}`).first().should('have.text', 'Price');
+    cy.get(colIdPrice).each(($tradePrice) => {
       cy.wrap($tradePrice).invoke('text').should('not.be.empty');
     });
-    cy.get(`[col-id=${colIdSize}]`).each(($tradeSize) => {
+  });
+
+  it('show trades sizes', () => {
+    // 6005-THIS-004
+    cy.get(`${colIdSize} ${colHeader}`).first().should('have.text', 'Size');
+    cy.get(colIdSize).each(($tradeSize) => {
       cy.wrap($tradeSize).invoke('text').should('not.be.empty');
     });
+  });
 
+  it('show trades date and time', () => {
+    // 6005-THIS-005
+    cy.get(`${colIdCreatedAt} ${colHeader}`).should('have.text', 'Created at');
     const dateTimeRegex =
       /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
-    cy.get(`[col-id=${colIdCreatedAt}]`).each(($tradeDateTime, index) => {
+    cy.get(colIdCreatedAt).each(($tradeDateTime, index) => {
       if (index != 0) {
         //ignore header
         cy.wrap($tradeDateTime).invoke('text').should('match', dateTimeRegex);
       }
     });
   });
+
+  it('trades are sorted descending by datetime', () => {
+    // 6005-THIS-006
+    const dateTimes: Date[] = [];
+    cy.get(colIdCreatedAt)
+      .each(($tradeDateTime, index) => {
+        if (index != 0) {
+          //ignore header
+          dateTimes.push(new Date($tradeDateTime.text()));
+        }
+      })
+      .then(() => {
+        expect(dateTimes).to.deep.equal(
+          dateTimes.sort((a, b) => b.getTime() - a.getTime())
+        );
+      });
+  });
+
+  it('copy price to deal ticket form', () => {
+    // 6005-THIS-007
+    cy.get(colIdPrice).last().click();
+    cy.getByTestId('order-price').should('have.value', '171.16898');
+  });
 });

apps/trading-e2e/src/support/trading.ts

@@ -31,6 +31,8 @@ import {
   protocolUpgradeProposalsQuery,
   blockStatisticsQuery,
   networkParamQuery,
+  liquidityProvisionsQuery,
+  liquidityProviderFeeShareQuery,
 } from '@vegaprotocol/mock';
 import type { PartialDeep } from 'type-fest';
 import type { MarketDataQuery, MarketsQuery } from '@vegaprotocol/markets';
@@ -158,6 +160,12 @@ const mockTradingPage = (
   );
   aliasGQLQuery(req, 'Trades', tradesQuery());
   aliasGQLQuery(req, 'Chart', chartQuery());
+  aliasGQLQuery(req, 'LiquidityProvisions', liquidityProvisionsQuery());
+  aliasGQLQuery(
+    req,
+    'LiquidityProviderFeeShare',
+    liquidityProviderFeeShareQuery
+  );
   aliasGQLQuery(req, 'Candles', candlesQuery());
   aliasGQLQuery(req, 'Withdrawals', withdrawalsQuery());
   aliasGQLQuery(req, 'NetworkParams', networkParamsQuery());

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

@@ -150,6 +150,7 @@ const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
       <HeaderStat
         heading={t('Target stake')}
         description={tooltipMapping['targetStake']}
+        testId="target-stake"
       >
         <div>
           {targetStake
@@ -163,6 +164,7 @@ const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
       <HeaderStat
         heading={t('Supplied stake')}
         description={tooltipMapping['suppliedStake']}
+        testId="supplied-stake"
       >
         <div>
           {suppliedStake
@@ -178,10 +180,10 @@ const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
 
         {formatNumberPercentage(percentage, 2)}
       </HeaderStat>
-      <HeaderStat heading={t('Market ID')}>
+      <HeaderStat heading={t('Market ID')} testId="liquidity-market-id">
         <div className="break-word">{marketId}</div>
       </HeaderStat>
-      <HeaderStat heading={t('Learn more')}>
+      <HeaderStat heading={t('Learn more')} testId="liquidity-learn-more">
         {DocsLinks ? (
           <ExternalLink href={DocsLinks.LIQUIDITY}>
             {t('Providing liquidity')}

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

@@ -151,7 +151,11 @@ export const MarketSelector = ({
       </div>
       <div className="px-4 py-2">
         <span className="inline-block border-b border-black dark:border-white">
-          <Link to={'/markets/all'} className="flex items-center gap-x-2">
+          <Link
+            to={'/markets/all'}
+            data-testid="all-markets-link"
+            className="flex items-center gap-x-2"
+          >
             {t('All markets')}
             <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
           </Link>

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

@@ -143,7 +143,7 @@ const MarketBottomPanel = memo(
                 <VegaWalletContainer>
                   <TradingViews.collateral.component
                     pinnedAsset={pinnedAsset}
-                    noBottomPlaceholder
+                    onMarketClick={onMarketClick}
                     hideButtons
                     storeKey="marketCollateral"
                   />
@@ -224,6 +224,7 @@ const MarketBottomPanel = memo(
             <VegaWalletContainer>
               <TradingViews.collateral.component
                 pinnedAsset={pinnedAsset}
+                onMarketClick={onMarketClick}
                 hideButtons
                 storeKey="marketCollateral"
               />
@@ -249,6 +250,7 @@ const MainGrid = memo(
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
       id: 'middle-1',
     });
+    const onMarketClick = useMarketClickHandler(true);
 
     return (
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
@@ -267,6 +269,7 @@ const MainGrid = memo(
                   <Tab id="ticket" name={t('Ticket')}>
                     <TradingViews.ticket.component
                       marketId={marketId}
+                      onMarketClick={onMarketClick}
                       onClickCollateral={() => navigate('/portfolio')}
                     />
                   </Tab>

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

@@ -22,7 +22,7 @@ export const DepositsContainer = () => {
     <div className="h-full">
       <div className="h-full relative">
         <DepositsTable
-          rowData={data || []}
+          rowData={data}
           ref={gridRef}
           {...bottomPlaceholderProps}
           overlayNoRowsTemplate={error ? error.message : t('No deposits')}

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

@@ -92,7 +92,10 @@ export const Portfolio = () => {
             <Tabs storageKey="console-portfolio-bottom">
               <Tab id="collateral" name={t('Collateral')}>
                 <VegaWalletContainer>
-                  <AccountsContainer storeKey="portfolioCollateral" />
+                  <AccountsContainer
+                    storeKey="portfolioCollateral"
+                    onMarketClick={onMarketClick}
+                  />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="deposits" name={t('Deposits')}>

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

@@ -12,13 +12,13 @@ import { useDepositDialog } from '@vegaprotocol/deposits';
 export const AccountsContainer = ({
   pinnedAsset,
   hideButtons,
-  noBottomPlaceholder,
   storeKey,
+  onMarketClick,
 }: {
   pinnedAsset?: PinnedAsset;
   hideButtons?: boolean;
-  noBottomPlaceholder?: boolean;
   storeKey?: string;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
@@ -48,9 +48,9 @@ export const AccountsContainer = ({
         onClickAsset={onClickAsset}
         onClickWithdraw={openWithdrawalDialog}
         onClickDeposit={openDepositDialog}
+        onMarketClick={onMarketClick}
         isReadOnly={isReadOnly}
         pinnedAsset={pinnedAsset}
-        noBottomPlaceholder={noBottomPlaceholder}
         storeKey={storeKey}
       />
       {!isReadOnly && !hideButtons && (

apps/trading/components/app-loader/app-loader.tsx

@@ -49,6 +49,9 @@ export const AppLoader = ({ children }: { children: ReactNode }) => {
 
 const cacheConfig: InMemoryCacheConfig = {
   typePolicies: {
+    Statistics: {
+      merge: true,
+    },
     Account: {
       keyFields: false,
       fields: {
@@ -80,12 +83,6 @@ const cacheConfig: InMemoryCacheConfig = {
     ERC20: {
       keyFields: ['contractAddress'],
     },
-    PositionUpdate: {
-      keyFields: false,
-    },
-    AccountUpdate: {
-      keyFields: false,
-    },
     Party: {
       keyFields: false,
     },
@@ -95,8 +92,16 @@ const cacheConfig: InMemoryCacheConfig = {
     Fees: {
       keyFields: false,
     },
-    // Don't cache order update as this subscription result gets merged into the main order cache
-    // We don't need to write these to the cache at all
+    // The folling types are cached by the data provider and not by apollo
+    PositionUpdate: {
+      keyFields: false,
+    },
+    TradeUpdate: {
+      keyFields: false,
+    },
+    AccountUpdate: {
+      keyFields: false,
+    },
     OrderUpdate: {
       keyFields: false,
     },

libs/accounts/src/lib/Margins.graphql

@@ -0,0 +1,38 @@
+fragment MarginFields on MarginLevels {
+  maintenanceLevel
+  searchLevel
+  initialLevel
+  collateralReleaseLevel
+  asset {
+    id
+  }
+  market {
+    id
+  }
+}
+
+query Margins($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    marginsConnection {
+      edges {
+        node {
+          ...MarginFields
+        }
+      }
+    }
+  }
+}
+
+subscription MarginsSubscription($partyId: ID!) {
+  margins(partyId: $partyId) {
+    marketId
+    asset
+    partyId
+    maintenanceLevel
+    searchLevel
+    initialLevel
+    collateralReleaseLevel
+    timestamp
+  }
+}

libs/accounts/src/lib/__generated__/Margins.ts

@@ -0,0 +1,114 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarginFieldsFragment = { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } };
+
+export type MarginsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type MarginsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, marginsConnection?: { __typename?: 'MarginConnection', edges?: Array<{ __typename?: 'MarginEdge', node: { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } } }> | null } | null } | null };
+
+export type MarginsSubscriptionSubscriptionVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type MarginsSubscriptionSubscription = { __typename?: 'Subscription', margins: { __typename?: 'MarginLevelsUpdate', marketId: string, asset: string, partyId: string, maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, timestamp: any } };
+
+export const MarginFieldsFragmentDoc = gql`
+    fragment MarginFields on MarginLevels {
+  maintenanceLevel
+  searchLevel
+  initialLevel
+  collateralReleaseLevel
+  asset {
+    id
+  }
+  market {
+    id
+  }
+}
+    `;
+export const MarginsDocument = gql`
+    query Margins($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    marginsConnection {
+      edges {
+        node {
+          ...MarginFields
+        }
+      }
+    }
+  }
+}
+    ${MarginFieldsFragmentDoc}`;
+
+/**
+ * __useMarginsQuery__
+ *
+ * To run a query within a React component, call `useMarginsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarginsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarginsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useMarginsQuery(baseOptions: Apollo.QueryHookOptions<MarginsQuery, MarginsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarginsQuery, MarginsQueryVariables>(MarginsDocument, options);
+      }
+export function useMarginsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarginsQuery, MarginsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarginsQuery, MarginsQueryVariables>(MarginsDocument, options);
+        }
+export type MarginsQueryHookResult = ReturnType<typeof useMarginsQuery>;
+export type MarginsLazyQueryHookResult = ReturnType<typeof useMarginsLazyQuery>;
+export type MarginsQueryResult = Apollo.QueryResult<MarginsQuery, MarginsQueryVariables>;
+export const MarginsSubscriptionDocument = gql`
+    subscription MarginsSubscription($partyId: ID!) {
+  margins(partyId: $partyId) {
+    marketId
+    asset
+    partyId
+    maintenanceLevel
+    searchLevel
+    initialLevel
+    collateralReleaseLevel
+    timestamp
+  }
+}
+    `;
+
+/**
+ * __useMarginsSubscriptionSubscription__
+ *
+ * To run a query within a React component, call `useMarginsSubscriptionSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useMarginsSubscriptionSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarginsSubscriptionSubscription({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useMarginsSubscriptionSubscription(baseOptions: Apollo.SubscriptionHookOptions<MarginsSubscriptionSubscription, MarginsSubscriptionSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<MarginsSubscriptionSubscription, MarginsSubscriptionSubscriptionVariables>(MarginsSubscriptionDocument, options);
+      }
+export type MarginsSubscriptionSubscriptionHookResult = ReturnType<typeof useMarginsSubscriptionSubscription>;
+export type MarginsSubscriptionSubscriptionResult = Apollo.SubscriptionResult<MarginsSubscriptionSubscription>;

libs/accounts/src/lib/accounts-data-provider.ts

@@ -94,6 +94,7 @@ export const accountsOnlyDataProvider = makeDataProvider<
   update,
   getData,
   getDelta,
+  fetchPolicy: 'no-cache',
 });
 
 export interface AccountFields extends Account {

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

@@ -1,31 +1,39 @@
-import { useRef, memo, useCallback, useState } from 'react';
+import { useRef, memo, useState, useCallback } from 'react';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { AgGridReact } from 'ag-grid-react';
-import type { AccountFields } from './accounts-data-provider';
 import {
   aggregatedAccountsDataProvider,
   aggregatedAccountDataProvider,
 } from './accounts-data-provider';
 import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
-import isEqual from 'lodash/isEqual';
 import { Dialog } from '@vegaprotocol/ui-toolkit';
 import BreakdownTable from './breakdown-table';
 
 const AccountBreakdown = ({
   assetId,
   partyId,
+  onMarketClick,
 }: {
   assetId: string;
   partyId: string;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }) => {
+  const gridRef = useRef<AgGridReact>(null);
   const { data } = useDataProvider({
     dataProvider: aggregatedAccountDataProvider,
     variables: { partyId, assetId },
+    update: ({ data }) => {
+      if (gridRef.current?.api && data?.breakdown) {
+        gridRef.current?.api.setRowData(data?.breakdown);
+        return true;
+      }
+      return false;
+    },
   });
+
   return (
     <div
       className="h-[35vh] w-full m-auto flex flex-col"
@@ -42,19 +50,59 @@ const AccountBreakdown = ({
           ])}
         </p>
       )}
-      <BreakdownTable data={data?.breakdown || null} domLayout="autoHeight" />
+      <BreakdownTable
+        ref={gridRef}
+        data={data?.breakdown || null}
+        domLayout="autoHeight"
+        onMarketClick={onMarketClick}
+      />
     </div>
   );
 };
 
+export const AccountBreakdownDialog = memo(
+  ({
+    assetId,
+    partyId,
+    onClose,
+    onMarketClick,
+  }: {
+    assetId?: string;
+    partyId: string;
+    onClose: () => void;
+    onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  }) => {
+    console.log('render');
+    return (
+      <Dialog
+        size="medium"
+        open={Boolean(assetId)}
+        onChange={(isOpen) => {
+          if (!isOpen) {
+            onClose();
+          }
+        }}
+      >
+        {assetId && (
+          <AccountBreakdown
+            assetId={assetId}
+            partyId={partyId}
+            onMarketClick={onMarketClick}
+          />
+        )}
+      </Dialog>
+    );
+  }
+);
+
 interface AccountManagerProps {
   partyId: string;
   onClickAsset: (assetId: string) => void;
   onClickWithdraw?: (assetId?: string) => void;
   onClickDeposit?: (assetId?: string) => void;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
-  noBottomPlaceholder?: boolean;
   storeKey?: string;
 }
 
@@ -65,50 +113,27 @@ export const AccountManager = ({
   partyId,
   isReadOnly,
   pinnedAsset,
-  noBottomPlaceholder,
   storeKey,
+  onMarketClick,
 }: AccountManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
-  const update = useCallback(
-    ({ data }: { data: AccountFields[] | null }) => {
-      if (!data || !gridRef.current?.api) {
-        return false;
-      }
-      const pinnedAssetRowData =
-        pinnedAsset && data.find((d) => d.asset.id === pinnedAsset.id);
 
-      if (pinnedAssetRowData) {
-        const pinnedTopRow = gridRef.current.api.getPinnedTopRow(0);
-        if (
-          pinnedTopRow?.data?.balance === '0' &&
-          pinnedAssetRowData.balance !== '0'
-        ) {
-          return false;
-        }
-        if (!isEqual(pinnedTopRow?.data, pinnedAssetRowData)) {
-          gridRef.current.api.setPinnedTopRowData([pinnedAssetRowData]);
-        }
-      }
-      gridRef.current.api.setRowData(
-        pinnedAssetRowData
-          ? data?.filter((d) => d !== pinnedAssetRowData)
-          : data
-      );
-      return true;
-    },
-    [gridRef, pinnedAsset]
-  );
   const { data, error } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
     variables: { partyId },
-    update,
-  });
-  const bottomPlaceholderProps = useBottomPlaceholder({
-    gridRef,
-    disabled: noBottomPlaceholder,
   });
 
+  const onMarketClickInternal = useCallback(
+    (...args: Parameters<NonNullable<typeof onMarketClick>>) => {
+      setBreakdownAssetId(undefined);
+      if (onMarketClick) {
+        onMarketClick(...args);
+      }
+    },
+    [onMarketClick]
+  );
+
   return (
     <div className="relative h-full">
       <AccountTable
@@ -121,22 +146,14 @@ export const AccountManager = ({
         isReadOnly={isReadOnly}
         pinnedAsset={pinnedAsset}
         storeKey={storeKey}
-        {...bottomPlaceholderProps}
         overlayNoRowsTemplate={error ? error.message : t('No accounts')}
       />
-      <Dialog
-        size="medium"
-        open={Boolean(breakdownAssetId)}
-        onChange={(isOpen) => {
-          if (!isOpen) {
-            setBreakdownAssetId(undefined);
-          }
-        }}
-      >
-        {breakdownAssetId && (
-          <AccountBreakdown assetId={breakdownAssetId} partyId={partyId} />
-        )}
-      </Dialog>
+      <AccountBreakdownDialog
+        assetId={breakdownAssetId}
+        partyId={partyId}
+        onClose={useCallback(() => setBreakdownAssetId(undefined), [])}
+        onMarketClick={onMarketClick ? onMarketClickInternal : undefined}
+      />
     </div>
   );
 };

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

@@ -1,6 +1,7 @@
 import { forwardRef, useMemo, useCallback } from 'react';
 import {
   addDecimalsFormatNumber,
+  addDecimalsFormatNumberQuantum,
   isNumeric,
   toBigNum,
 } from '@vegaprotocol/utils';
@@ -10,21 +11,15 @@ import type {
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import { COL_DEFS } from '@vegaprotocol/datagrid';
-import {
-  ButtonLink,
-  Button,
-  VegaIcon,
-  VegaIconNames,
-} 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 { AgGridColumn } from 'ag-grid-react';
 import type {
-  IDatasource,
   IGetRowsParams,
   RowNode,
   RowHeightParams,
+  ColDef,
 } from 'ag-grid-community';
 import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import type { AccountFields } from './accounts-data-provider';
@@ -35,29 +30,16 @@ import classNames from 'classnames';
 import { AccountsActionsDropdown } from './accounts-actions-dropdown';
 
 const colorClass = (percentageUsed: number, neutral = false) => {
-  return classNames({
+  return classNames('text-right', {
     'text-neutral-500 dark:text-neutral-400': percentageUsed < 75 && !neutral,
     'text-vega-orange': percentageUsed >= 75 && percentageUsed < 90,
     'text-vega-pink': percentageUsed >= 90,
   });
 };
 
-export const percentageValue = (part?: string, total?: string) =>
-  new BigNumber(part || 0)
-    .dividedBy(total || 1)
-    .multipliedBy(100)
-    .toNumber();
-
-const formatWithAssetDecimals = (
-  data: AccountFields | undefined,
-  value: string | undefined
-) => {
-  return (
-    data &&
-    data.asset &&
-    isNumeric(value) &&
-    addDecimalsFormatNumber(value, data.asset.decimals)
-  );
+export const percentageValue = (part: string, total: string) => {
+  total = !total || total === '0' ? '1' : total;
+  return new BigNumber(part).dividedBy(total).multipliedBy(100).toNumber();
 };
 
 export const accountValuesComparator = (
@@ -81,15 +63,10 @@ export interface GetRowsParams extends Omit<IGetRowsParams, 'successCallback'> {
   successCallback(rowsThisBlock: AccountFields[], lastRow?: number): void;
 }
 
-export interface Datasource extends IDatasource {
-  getRows(params: GetRowsParams): void;
-}
-
 export type PinnedAsset = Pick<Asset, 'symbol' | 'name' | 'id' | 'decimals'>;
 
 export interface AccountTableProps extends AgGridReactProps {
   rowData?: AccountFields[] | null;
-  datasource?: Datasource;
   onClickAsset: (assetId: string) => void;
   onClickWithdraw?: (assetId: string) => void;
   onClickDeposit?: (assetId: string) => void;
@@ -148,83 +125,55 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
 
     const showDepositButton = pinnedAsset?.balance === '0';
 
-    return (
-      <AgGrid
-        {...props}
-        style={{ width: '100%', height: '100%' }}
-        overlayNoRowsTemplate={t('No accounts')}
-        getRowId={({
-          data,
-        }: {
-          data: AccountFields & { isLastPlaceholder?: boolean; id?: string };
-        }) => (data.isLastPlaceholder && data.id ? data.id : data.asset.id)}
-        ref={ref}
-        tooltipShowDelay={500}
-        rowData={rowData?.filter(
-          (data) => data.asset.id !== props.pinnedAsset?.id
-        )}
-        defaultColDef={{
-          resizable: true,
-          tooltipComponent: TooltipCellComponent,
-          sortable: true,
-          comparator: accountValuesComparator,
-        }}
-        getRowHeight={getPinnedAssetRowHeight}
-        pinnedTopRowData={pinnedAsset ? [pinnedAsset] : undefined}
-      >
-        <AgGridColumn
-          headerName={t('Asset')}
-          field="asset.symbol"
-          headerTooltip={t(
+    const colDefs = useMemo(() => {
+      const defs: ColDef[] = [
+        {
+          headerName: t('Asset'),
+          field: 'asset.symbol',
+          headerTooltip: t(
             'Asset is the collateral that is deposited into the Vega protocol.'
-          )}
-          cellRenderer={({
-            value,
-            data,
-          }: VegaICellRendererParams<AccountFields, 'asset.symbol'>) => {
-            return (
-              <ButtonLink
-                data-testid="asset"
-                onClick={() => {
-                  if (data) {
-                    onClickAsset(data.asset.id);
-                  }
-                }}
-              >
-                {value}
-              </ButtonLink>
-            );
-          }}
-        />
-        <AgGridColumn
-          headerName={t('Used')}
-          type="rightAligned"
-          field="used"
-          headerTooltip={t(
+          ),
+          cellClass: 'underline',
+          onCellClicked: ({ data }) => {
+            if (data) {
+              onClickAsset(data.asset.id);
+            }
+          },
+        },
+        {
+          headerName: t('Used'),
+          type: 'rightAligned',
+          field: 'used',
+          headerTooltip: t(
             'Currently allocated to a market as margin or bond. Check the breakdown for details.'
-          )}
-          cellRenderer={({
+          ),
+          tooltipValueGetter: ({ value, data }) => {
+            if (!value || !data) return null;
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          },
+          onCellClicked: ({ data }) => {
+            if (!data || !onClickBreakdown) return;
+            onClickBreakdown(data.asset.id);
+          },
+          cellRenderer: ({
             data,
             value,
           }: VegaICellRendererParams<AccountFields, 'used'>) => {
-            if (!data) return null;
+            if (!value || !data) return '-';
             const percentageUsed = percentageValue(value, data.total);
-            const valueFormatted = formatWithAssetDecimals(data, value);
+            const valueFormatted = addDecimalsFormatNumberQuantum(
+              value,
+              data.asset.decimals,
+              data.asset.quantum
+            );
 
             return data.breakdown ? (
               <>
-                <ButtonLink
-                  data-testid="breakdown"
-                  onClick={() => {
-                    onClickBreakdown && onClickBreakdown(data.asset.id);
-                  }}
-                >
-                  <span>{valueFormatted}</span>
-                </ButtonLink>
+                <span className="underline">{valueFormatted}</span>
                 <span
                   className={classNames(
                     colorClass(percentageUsed),
-                    'ml-2 inline-block w-14'
+                    'ml-1 inline-block w-14'
                   )}
                 >
                   {percentageUsed.toFixed(2)}%
@@ -232,59 +181,77 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
               </>
             ) : (
               <>
-                <span>{valueFormatted}</span>
-                <span className="ml-2 inline-block w-14 text-neutral-500 dark:text-neutral-400">
-                  0.00%
+                <span className="underline">{valueFormatted}</span>
+                <span className="ml-2 inline-block w-14 text-vega-light-200 dark:text-vega-dark-200">
+                  {t('0.00%')}'
                 </span>
               </>
             );
-          }}
-        />
-        <AgGridColumn
-          headerName={t('Available')}
-          field="available"
-          type="rightAligned"
-          headerTooltip={t(
+          },
+        },
+        {
+          headerName: t('Available'),
+          field: 'available',
+          type: 'rightAligned',
+          headerTooltip: t(
             'Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.'
-          )}
-          cellRenderer={({
+          ),
+          tooltipValueGetter: ({ value, data }) => {
+            if (!value || !data) return null;
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          },
+          cellClass: ({ data }) => {
+            const percentageUsed = percentageValue(data?.used, data?.total);
+            return colorClass(percentageUsed, true);
+          },
+          valueFormatter: ({
             value,
             data,
-          }: VegaICellRendererParams<AccountFields, 'available'>) => {
-            const percentageUsed = percentageValue(data?.used, data?.total);
-
-            return (
-              <span className={colorClass(percentageUsed, true)}>
-                {formatWithAssetDecimals(data, value)}
-              </span>
+          }: VegaValueFormatterParams<AccountFields, 'available'>) => {
+            if (!value || !data) return '-';
+            return addDecimalsFormatNumberQuantum(
+              value,
+              data.asset.decimals,
+              data.asset.quantum
             );
-          }}
-        />
-        <AgGridColumn
-          headerName={t('Total')}
-          type="rightAligned"
-          field="total"
-          headerTooltip={t(
+          },
+        },
+
+        {
+          headerName: t('Total'),
+          type: 'rightAligned',
+          field: 'total',
+          headerTooltip: t(
             'The total amount of each asset on this key. Includes used and available collateral.'
-          )}
-          valueFormatter={({
+          ),
+          tooltipValueGetter: ({ value, data }) => {
+            if (!value || !data) return null;
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          },
+          valueFormatter: ({
             data,
-          }: VegaValueFormatterParams<AccountFields, 'total'>) =>
-            formatWithAssetDecimals(data, data?.total)
-          }
-        />
-        <AgGridColumn
-          colId="accounts-actions"
-          field="asset.id"
-          {...COL_DEFS.actions}
-          minWidth={showDepositButton ? 130 : COL_DEFS.actions.minWidth}
-          maxWidth={showDepositButton ? 130 : COL_DEFS.actions.maxWidth}
-          cellRenderer={({
+            value,
+          }: VegaValueFormatterParams<AccountFields, 'total'>) => {
+            if (!data || !value) return '-';
+            return addDecimalsFormatNumberQuantum(
+              value,
+              data.asset.decimals,
+              data.asset.quantum
+            );
+          },
+        },
+        {
+          colId: 'accounts-actions',
+          field: 'asset.id',
+          ...COL_DEFS.actions,
+          minWidth: showDepositButton ? 130 : COL_DEFS.actions.minWidth,
+          maxWidth: showDepositButton ? 130 : COL_DEFS.actions.maxWidth,
+          cellRenderer: ({
             value: assetId,
             node,
           }: VegaICellRendererParams<AccountFields, 'asset.id'>) => {
             if (!assetId) return null;
-            if (node.rowPinned && node.data?.balance === '0') {
+            if (node.rowPinned && node.data?.total === '0') {
               return (
                 <CenteredGridCellWrapper className="h-[30px] justify-end py-1">
                   <Button
@@ -319,9 +286,42 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                 }}
               />
             );
-          }}
-        />
-      </AgGrid>
+          },
+        },
+      ];
+      return defs;
+    }, [
+      onClickAsset,
+      onClickBreakdown,
+      onClickDeposit,
+      onClickWithdraw,
+      props.isReadOnly,
+      showDepositButton,
+    ]);
+
+    const data = rowData?.filter(
+      (data) => data.asset.id !== props.pinnedAsset?.id
+    );
+
+    return (
+      <AgGrid
+        {...props}
+        style={{ width: '100%', height: '100%' }}
+        overlayNoRowsTemplate={t('No accounts')}
+        getRowId={({ data }: { data: AccountFields }) => data.asset.id}
+        ref={ref}
+        tooltipShowDelay={500}
+        rowData={data}
+        defaultColDef={{
+          resizable: true,
+          tooltipComponent: TooltipCellComponent,
+          sortable: true,
+          comparator: accountValuesComparator,
+        }}
+        columnDefs={colDefs}
+        getRowHeight={getPinnedAssetRowHeight}
+        pinnedTopRowData={pinnedAsset ? [pinnedAsset] : undefined}
+      />
     );
   }
 );

libs/accounts/src/lib/accounts.mock.ts

@@ -35,6 +35,7 @@ export const accountFields: AccountFieldsFragment[] = [
     balance: '100000000',
     market: null,
     asset: {
+      // tEURO
       __typename: 'Asset',
       id: 'asset-id',
     },
@@ -44,6 +45,7 @@ export const accountFields: AccountFieldsFragment[] = [
     type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
     balance: '100000000',
     asset: {
+      // tDAI
       __typename: 'Asset',
       id: 'asset-id-2',
     },
@@ -57,6 +59,7 @@ export const accountFields: AccountFieldsFragment[] = [
       id: 'market-2',
     },
     asset: {
+      // tEURO
       __typename: 'Asset',
       id: 'asset-id',
     },
@@ -70,6 +73,7 @@ export const accountFields: AccountFieldsFragment[] = [
       id: 'market-0',
     },
     asset: {
+      // AST0
       __typename: 'Asset',
       id: 'asset-0',
     },
@@ -83,6 +87,7 @@ export const accountFields: AccountFieldsFragment[] = [
       id: 'market-3',
     },
     asset: {
+      // AST0
       __typename: 'Asset',
       id: 'asset-0',
     },
@@ -90,9 +95,10 @@ export const accountFields: AccountFieldsFragment[] = [
   {
     __typename: 'AccountBalance',
     type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
-    balance: '10000000000',
+    balance: '10000000',
     market: null,
     asset: {
+      // AST0
       __typename: 'Asset',
       id: 'asset-0',
     },
@@ -104,6 +110,7 @@ export const accountFields: AccountFieldsFragment[] = [
     balance: '100000001',
     market: null,
     asset: {
+      // tBTC (sepolia)
       __typename: 'Asset',
       id: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
     },
@@ -114,6 +121,7 @@ export const accountFields: AccountFieldsFragment[] = [
     balance: '100000002',
     market: null,
     asset: {
+      // tBTC (test)
       __typename: 'Asset',
       id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
     },
@@ -143,19 +151,53 @@ export const amendGeneralAccountBalance = (
   marketId: string,
   balance: string
 ) => {
-  if (accounts.party?.accountsConnection?.edges) {
-    const marginAccount = accounts.party.accountsConnection.edges.find(
-      (edge) => edge?.node.market?.id === marketId
-    );
-    if (marginAccount) {
-      const generalAccount = accounts.party.accountsConnection.edges.find(
-        (edge) =>
-          edge?.node.asset.id === marginAccount.node.asset.id &&
-          !edge?.node.market
-      );
-      if (generalAccount) {
-        generalAccount.node.balance = balance;
-      }
-    }
+  if (!accounts.party?.accountsConnection?.edges) {
+    return accounts;
   }
+  const marginAccount = accounts.party?.accountsConnection?.edges?.find(
+    (edge) => edge?.node.market?.id === marketId
+  );
+  if (marginAccount) {
+    const edges = accounts.party.accountsConnection.edges.map((edge) =>
+      edge?.node.asset.id === marginAccount.node.asset.id && !edge?.node.market
+        ? { ...edge, node: { ...edge.node, balance } }
+        : edge
+    );
+    return {
+      ...accounts,
+      party: {
+        ...accounts.party,
+        accountsConnection: {
+          ...accounts.party.accountsConnection,
+          edges,
+        },
+      },
+    };
+  }
+  return accounts;
+};
+
+export const amendMarginAccountBalance = (
+  accounts: AccountsQuery,
+  marketId: string,
+  balance: string
+) => {
+  if (!accounts.party?.accountsConnection?.edges) {
+    return accounts;
+  }
+  const edges = accounts.party?.accountsConnection?.edges?.map((edge) =>
+    edge?.node.market?.id === marketId
+      ? { ...edge, node: { ...edge?.node, balance } }
+      : edge
+  );
+  return {
+    ...accounts,
+    party: {
+      ...accounts.party,
+      accountsConnection: {
+        ...accounts.party.accountsConnection,
+        edges,
+      },
+    },
+  };
 };

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

@@ -4,6 +4,14 @@ import * as Types from '@vegaprotocol/types';
 import type { AccountFields } from './accounts-data-provider';
 import { getAccountData } from './accounts-data-provider';
 
+const marginHealthChartTestId = 'margin-health-chart';
+
+jest.mock('./margin-health-chart', () => ({
+  MarginHealthChart: () => {
+    return <div data-testid={marginHealthChartTestId}></div>;
+  },
+}));
+
 const singleRow = {
   __typename: 'AccountBalance',
   type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
@@ -37,10 +45,10 @@ describe('BreakdownTable', () => {
       render(<BreakdownTable data={singleRowData} />);
     });
     const headers = await screen.findAllByRole('columnheader');
-    expect(headers).toHaveLength(3);
+    expect(headers).toHaveLength(4);
     expect(
       headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
-    ).toEqual(['Market', 'Account type', 'Balance']);
+    ).toEqual(['Market', 'Account type', 'Balance', 'Margin health']);
   });
 
   it('should apply correct formatting', async () => {
@@ -55,9 +63,27 @@ describe('BreakdownTable', () => {
       '1,256.00',
       '1,256.00',
     ];
-    cells.forEach((cell, i) => {
+    cells.slice(0, -1).forEach((cell, i) => {
       expect(cell).toHaveTextContent(expectedValues[i]);
     });
+    expect(screen.getByTestId(marginHealthChartTestId)).toBeInTheDocument();
+  });
+
+  it('displays margin health chart only for margin account', async () => {
+    await act(async () => {
+      render(
+        <BreakdownTable
+          data={[
+            {
+              ...singleRow,
+              type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
+              market: null,
+            },
+          ]}
+        />
+      );
+    });
+    expect(screen.queryByTestId(marginHealthChartTestId)).toBeNull();
   });
 
   it('should get correct account data', () => {

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

@@ -1,67 +1,38 @@
-import { forwardRef } from 'react';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { forwardRef, useMemo } from 'react';
+import {
+  addDecimalsFormatNumber,
+  addDecimalsFormatNumberQuantum,
+} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Intent } from '@vegaprotocol/ui-toolkit';
-import { AgGridColumn } from 'ag-grid-react';
+import { Intent, TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import type { AccountFields } from './accounts-data-provider';
 import { AccountTypeMapping } from '@vegaprotocol/types';
 import type {
-  ValueProps,
   VegaValueFormatterParams,
+  VegaICellRendererParams,
 } from '@vegaprotocol/datagrid';
-import { progressBarCellRendererSelector } from '@vegaprotocol/datagrid';
+import { ProgressBarCell } from '@vegaprotocol/datagrid';
 import { AgGridLazy as AgGrid, PriceCell } from '@vegaprotocol/datagrid';
-import type { ValueFormatterParams } from 'ag-grid-community';
+import type { ColDef } from 'ag-grid-community';
 import { accountValuesComparator } from './accounts-table';
-
-export const progressBarValueFormatter = ({
-  data,
-  node,
-}: ValueFormatterParams): ValueProps['valueFormatted'] | undefined => {
-  if (!data || node?.rowPinned) {
-    return undefined;
-  }
-  const min = BigInt(data.used);
-  const mid = BigInt(data.available);
-  const max = BigInt(data.total);
-  const range = max > min ? max : min;
-  return {
-    low: addDecimalsFormatNumber(min.toString(), data.asset.decimals),
-    high: addDecimalsFormatNumber(mid.toString(), data.asset.decimals),
-    value: range ? Number((min * BigInt(100)) / range) : 0,
-    intent: Intent.Warning,
-  };
-};
+import { MarginHealthChart } from './margin-health-chart';
+import { MarketNameCell } from '@vegaprotocol/datagrid';
+import { AccountType } from '@vegaprotocol/types';
 
 interface BreakdownTableProps extends AgGridReactProps {
   data: AccountFields[] | null;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }
 
 const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
   ({ data }, ref) => {
-    return (
-      <AgGrid
-        style={{ width: '100%', height: '100%' }}
-        overlayNoRowsTemplate={t('Collateral not used')}
-        rowData={data}
-        getRowId={({ data }: { data: AccountFields }) =>
-          `${data.asset.id}-${data.type}-${data.market?.id}`
-        }
-        ref={ref}
-        rowHeight={34}
-        components={{ PriceCell }}
-        tooltipShowDelay={500}
-        defaultColDef={{
-          flex: 1,
-          resizable: true,
-          sortable: true,
-        }}
-      >
-        <AgGridColumn
-          headerName={t('Market')}
-          field="market.tradableInstrument.instrument.name"
-          valueFormatter={({
+    const coldefs = useMemo(() => {
+      const defs: ColDef[] = [
+        {
+          headerName: t('Market'),
+          field: 'market.tradableInstrument.instrument.name',
+          valueFormatter: ({
             value,
           }: VegaValueFormatterParams<
             AccountFields,
@@ -69,32 +40,101 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
           >) => {
             if (!value) return 'None';
             return value;
-          }}
-          minWidth={200}
-        />
-        <AgGridColumn
-          headerName={t('Account type')}
-          field="type"
-          maxWidth={300}
-          valueFormatter={({
+          },
+          minWidth: 200,
+        },
+        {
+          headerName: t('Account type'),
+          field: 'type',
+          maxWidth: 300,
+          valueFormatter: ({
             value,
-          }: VegaValueFormatterParams<AccountFields, 'type'>) =>
-            value
+          }: VegaValueFormatterParams<AccountFields, 'type'>) => {
+            return value
               ? AccountTypeMapping[value as keyof typeof AccountTypeMapping]
-              : ''
-          }
-        />
+              : '';
+          },
+        },
+        {
+          headerName: t('Balance'),
+          field: 'used',
+          flex: 2,
+          maxWidth: 500,
+          type: 'rightAligned',
+          tooltipComponent: TooltipCellComponent,
+          tooltipValueGetter: ({ value, data }) => {
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          },
+          cellRenderer: ({
+            data,
+            node,
+          }: VegaICellRendererParams<AccountFields, 'used'>) => {
+            if (!data || node?.rowPinned) {
+              return undefined;
+            }
+            const min = BigInt(data.used);
+            const mid = BigInt(data.available);
+            const max = BigInt(data.total);
+            const range = max > min ? max : min;
+            const formattedData = {
+              low: addDecimalsFormatNumberQuantum(
+                min.toString(),
+                data.asset.decimals,
+                data.asset.quantum
+              ),
+              high: addDecimalsFormatNumberQuantum(
+                mid.toString(),
+                data.asset.decimals,
+                data.asset.quantum
+              ),
+              value: range ? Number((min * BigInt(100)) / range) : 0,
+              intent: Intent.Warning,
+            };
+            return <ProgressBarCell valueFormatted={formattedData} />;
+          },
+          comparator: accountValuesComparator,
+        },
+        {
+          headerName: t('Margin health'),
+          field: 'market.id',
+          flex: 2,
+          maxWidth: 500,
+          sortable: false,
+          cellRenderer: ({
+            data,
+          }: VegaICellRendererParams<AccountFields, 'market.id'>) =>
+            data?.market?.id &&
+            data.type === AccountType['ACCOUNT_TYPE_MARGIN'] &&
+            data?.asset.id ? (
+              <MarginHealthChart
+                marketId={data.market.id}
+                assetId={data.asset.id}
+              />
+            ) : null,
+        },
+      ];
+      return defs;
+    }, []);
 
-        <AgGridColumn
-          headerName={t('Balance')}
-          field="used"
-          flex={2}
-          maxWidth={500}
-          cellRendererSelector={progressBarCellRendererSelector}
-          valueFormatter={progressBarValueFormatter}
-          comparator={accountValuesComparator}
-        />
-      </AgGrid>
+    return (
+      <AgGrid
+        style={{ width: '100%', height: '100%' }}
+        overlayNoRowsTemplate={t('Collateral not used')}
+        rowData={data}
+        getRowId={({ data }: { data: AccountFields }) =>
+          `${data.asset.id}:${data.type}:${data.market?.id}`
+        }
+        ref={ref}
+        rowHeight={34}
+        components={{ PriceCell, MarketNameCell, ProgressBarCell }}
+        tooltipShowDelay={500}
+        defaultColDef={{
+          flex: 1,
+          resizable: true,
+          sortable: true,
+        }}
+        columnDefs={coldefs}
+      />
     );
   }
 );

libs/accounts/src/lib/index.ts

@@ -8,3 +8,6 @@ export * from './use-account-balance';
 export * from './get-settlement-account';
 export * from './use-market-account-balance';
 export * from './transfer-dialog';
+export * from './__generated__/Margins';
+export { MarginHealthChart } from './margin-health-chart';
+export * from './margin-data-provider';

libs/accounts/src/lib/margin-data-provider.ts

@@ -7,13 +7,13 @@ import {
 import {
   MarginsSubscriptionDocument,
   MarginsDocument,
-} from './__generated__/Positions';
+} from './__generated__/Margins';
 import type {
   MarginsQuery,
   MarginFieldsFragment,
   MarginsSubscriptionSubscription,
   MarginsQueryVariables,
-} from './__generated__/Positions';
+} from './__generated__/Margins';
 
 const update = (
   data: MarginFieldsFragment[] | null,

libs/accounts/src/lib/margin-health-chart.tsx

@@ -0,0 +1,242 @@
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { Tooltip, ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { marketMarginDataProvider } from './margin-data-provider';
+import { useAssetsMapProvider } from '@vegaprotocol/assets';
+import { t } from '@vegaprotocol/i18n';
+import { useAccountBalance } from './use-account-balance';
+import { useMarketAccountBalance } from './use-market-account-balance';
+
+const MarginHealthChartTooltipRow = ({
+  label,
+  value,
+  decimals,
+  href,
+}: {
+  label: string;
+  value: string;
+  decimals: number;
+  href?: string;
+}) => (
+  <>
+    <div
+      className="float-left clear-left"
+      key="label"
+      data-testid="margin-health-tooltip-label"
+    >
+      {href ? (
+        <ExternalLink href={href} target="_blank">
+          {label}
+        </ExternalLink>
+      ) : (
+        label
+      )}
+    </div>
+    <div
+      className="float-right"
+      key="value"
+      data-testid="margin-health-tooltip-value"
+    >
+      {addDecimalsFormatNumber(value, decimals)}
+    </div>
+  </>
+);
+
+export const MarginHealthChartTooltip = ({
+  maintenanceLevel,
+  searchLevel,
+  initialLevel,
+  collateralReleaseLevel,
+  decimals,
+  marginAccountBalance,
+}: {
+  maintenanceLevel: string;
+  searchLevel: string;
+  initialLevel: string;
+  collateralReleaseLevel: string;
+  decimals: number;
+  marginAccountBalance?: string;
+}) => {
+  const tooltipContent = [
+    <MarginHealthChartTooltipRow
+      key={'maintenance'}
+      label={t('maintenance level')}
+      href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/positions-margin#margin-level-maintenance"
+      value={maintenanceLevel}
+      decimals={decimals}
+    />,
+    <MarginHealthChartTooltipRow
+      key={'search'}
+      label={t('search level')}
+      href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/positions-margin#margin-level-searching-for-collateral"
+      value={searchLevel}
+      decimals={decimals}
+    />,
+    <MarginHealthChartTooltipRow
+      key={'initial'}
+      label={t('initial level')}
+      href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/positions-margin#margin-level-initial"
+      value={initialLevel}
+      decimals={decimals}
+    />,
+    <MarginHealthChartTooltipRow
+      key={'release'}
+      label={t('release level')}
+      href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/positions-margin#margin-level-releasing-collateral"
+      value={collateralReleaseLevel}
+      decimals={decimals}
+    />,
+  ];
+
+  if (marginAccountBalance) {
+    const balance = (
+      <MarginHealthChartTooltipRow
+        key={'balance'}
+        label={t('balance')}
+        value={marginAccountBalance}
+        decimals={decimals}
+      />
+    );
+    if (BigInt(marginAccountBalance) < BigInt(searchLevel)) {
+      tooltipContent.splice(1, 0, balance);
+    } else if (BigInt(marginAccountBalance) < BigInt(initialLevel)) {
+      tooltipContent.splice(2, 0, balance);
+    } else if (BigInt(marginAccountBalance) < BigInt(collateralReleaseLevel)) {
+      tooltipContent.splice(3, 0, balance);
+    } else {
+      tooltipContent.push(balance);
+    }
+  }
+  return (
+    <div className="overflow-hidden" data-testid="margin-health-tooltip">
+      {tooltipContent}
+    </div>
+  );
+};
+
+export const MarginHealthChart = ({
+  marketId,
+  assetId,
+}: {
+  marketId: string;
+  assetId: string;
+}) => {
+  const { data: assetsMap } = useAssetsMapProvider();
+  const { pubKey: partyId } = useVegaWallet();
+  const { data } = useDataProvider({
+    dataProvider: marketMarginDataProvider,
+    variables: { marketId, partyId: partyId ?? '' },
+    skip: !partyId,
+  });
+  const { accountBalance: rawGeneralAccountBalance } =
+    useAccountBalance(assetId);
+  const { accountBalance: rawMarginAccountBalance } =
+    useMarketAccountBalance(marketId);
+  const asset = assetsMap && assetsMap[assetId];
+  if (!data || !asset) {
+    return null;
+  }
+  const { decimals } = asset;
+
+  const collateralReleaseLevel = Number(data.collateralReleaseLevel);
+  const initialLevel = Number(data.initialLevel);
+  const maintenanceLevel = Number(data.maintenanceLevel);
+  const searchLevel = Number(data.searchLevel);
+  const marginAccountBalance = Number(rawMarginAccountBalance);
+  const generalAccountBalance = Number(rawGeneralAccountBalance);
+  const max = Math.max(
+    marginAccountBalance + generalAccountBalance,
+    collateralReleaseLevel
+  );
+
+  const red = maintenanceLevel / max;
+  const orange = (searchLevel - maintenanceLevel) / max;
+  const yellow = ((searchLevel + initialLevel) / 2 - searchLevel) / max;
+  const green = (collateralReleaseLevel - initialLevel) / max + yellow;
+  const balanceMarker = marginAccountBalance / max;
+
+  const tooltip = (
+    <MarginHealthChartTooltip
+      maintenanceLevel={data.maintenanceLevel}
+      searchLevel={data.searchLevel}
+      initialLevel={data.initialLevel}
+      collateralReleaseLevel={data.collateralReleaseLevel}
+      marginAccountBalance={rawMarginAccountBalance}
+      decimals={decimals}
+    />
+  );
+
+  return (
+    <div data-testid="margin-health-chart">
+      {addDecimalsFormatNumber(
+        (BigInt(marginAccountBalance) - BigInt(maintenanceLevel)).toString(),
+        decimals
+      )}{' '}
+      {t('above')}{' '}
+      <ExternalLink href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/positions-margin#margin-level-maintenance">
+        {t('maintenance level')}
+      </ExternalLink>
+      <Tooltip description={tooltip}>
+        <div
+          data-testid="margin-health-chart-track"
+          className="relative bg-vega-green-650"
+          style={{
+            height: '6px',
+            marginBottom: '1px',
+            display: 'flex',
+          }}
+        >
+          <div
+            data-testid="margin-health-chart-red"
+            className="bg-vega-pink-550"
+            style={{
+              height: '100%',
+              width: `${red * 100}%`,
+            }}
+          ></div>
+          <div
+            data-testid="margin-health-chart-orange"
+            className="bg-vega-orange"
+            style={{
+              height: '100%',
+              width: `${orange * 100}%`,
+            }}
+          ></div>
+          <div
+            data-testid="margin-health-chart-yellow"
+            className="bg-vega-yellow"
+            style={{
+              height: '100%',
+              width: `${yellow * 100}%`,
+            }}
+          ></div>
+          <div
+            data-testid="margin-health-chart-green"
+            className="bg-vega-green-600"
+            style={{
+              height: '100%',
+              width: `${green * 100}%`,
+            }}
+          ></div>
+          {balanceMarker > 0 && balanceMarker < 100 && (
+            <div
+              data-testid="margin-health-chart-balance"
+              className="absolute bg-vega-blue"
+              style={{
+                height: '8px',
+                width: '8px',
+                top: '-1px',
+                transform: 'translate(-4px, 0px)',
+                borderRadius: '50%',
+                border: '1px solid white',
+                backgroundColor: 'blue',
+                left: `${balanceMarker * 100}%`,
+              }}
+            ></div>
+          )}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};

libs/accounts/src/lib/margin-heath-chart.spec.tsx

@@ -0,0 +1,154 @@
+import {
+  MarginHealthChart,
+  MarginHealthChartTooltip,
+} from './margin-health-chart';
+import { act, render, screen } from '@testing-library/react';
+import type { MarginFieldsFragment } from './__generated__/Margins';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+
+const asset: AssetFieldsFragment = {
+  id: 'assetId',
+  decimals: 2,
+} as AssetFieldsFragment;
+const margins: MarginFieldsFragment = {
+  asset: {
+    id: 'assetId',
+  },
+  collateralReleaseLevel: '1000',
+  initialLevel: '800',
+  searchLevel: '600',
+  maintenanceLevel: '400',
+  market: {
+    id: 'marketId',
+  },
+};
+
+const getMargins = jest.fn(() => margins);
+const getBalance = jest.fn(() => '0');
+
+jest.mock('./margin-data-provider', () => ({}));
+
+jest.mock('@vegaprotocol/assets', () => ({
+  useAssetsMapProvider: () => {
+    return {
+      data: {
+        assetId: asset,
+      },
+    };
+  },
+}));
+
+jest.mock('@vegaprotocol/wallet', () => ({
+  useVegaWallet: () => {
+    return {
+      pubKey: 'partyId',
+    };
+  },
+}));
+
+jest.mock('@vegaprotocol/data-provider', () => ({
+  useDataProvider: () => {
+    return {
+      data: getMargins(),
+    };
+  },
+}));
+
+jest.mock('./use-account-balance', () => ({
+  useAccountBalance: () => {
+    return {
+      accountBalance: getBalance(),
+    };
+  },
+}));
+
+jest.mock('./use-market-account-balance', () => ({
+  useMarketAccountBalance: () => {
+    return {
+      accountBalance: '700',
+    };
+  },
+}));
+
+describe('MarginHealthChart', () => {
+  it('should render correct values', async () => {
+    render(<MarginHealthChart marketId="marketId" assetId="assetId" />);
+    const chart = screen.getByTestId('margin-health-chart');
+    expect(chart).toHaveTextContent('3.00 above maintenance level');
+    const red = screen.getByTestId('margin-health-chart-red');
+    const orange = screen.getByTestId('margin-health-chart-orange');
+    const yellow = screen.getByTestId('margin-health-chart-yellow');
+    const green = screen.getByTestId('margin-health-chart-green');
+    const balance = screen.getByTestId('margin-health-chart-balance');
+    expect(parseInt(red.style.width)).toBe(40);
+    expect(parseInt(orange.style.width)).toBe(20);
+    expect(parseInt(yellow.style.width)).toBe(10);
+    expect(parseInt(green.style.width)).toBe(30);
+    expect(parseInt(balance.style.left)).toBe(70);
+  });
+
+  it('should use correct scale', async () => {
+    getBalance.mockReturnValueOnce('1300');
+    await act(async () => {
+      render(<MarginHealthChart marketId="marketId" assetId="assetId" />);
+    });
+    await screen.findByTestId('margin-health-chart');
+    const red = screen.getByTestId('margin-health-chart-red');
+    expect(parseInt(red.style.width)).toBe(20);
+  });
+});
+
+describe('MarginHealthChartTooltip', () => {
+  it('renders correct values and labels', async () => {
+    await act(async () => {
+      render(
+        <MarginHealthChartTooltip
+          {...margins}
+          decimals={asset.decimals}
+          marginAccountBalance="500"
+        />
+      );
+    });
+    const labels = await screen.findAllByTestId('margin-health-tooltip-label');
+    const expectedLabels = [
+      'maintenance level',
+      'balance',
+      'search level',
+      'initial level',
+      'release level',
+    ];
+    labels.forEach((value, i) => {
+      expect(value).toHaveTextContent(expectedLabels[i]);
+    });
+    const values = await screen.findAllByTestId('margin-health-tooltip-value');
+    const expectedValues = ['4.00', '5.00', '6.00', '8.00', '10.00'];
+    values.forEach((value, i) => {
+      expect(value).toHaveTextContent(expectedValues[i]);
+    });
+  });
+
+  it('renders balance in correct place', async () => {
+    const { rerender } = render(
+      <MarginHealthChartTooltip
+        {...margins}
+        decimals={asset.decimals}
+        marginAccountBalance="700"
+      />
+    );
+
+    let values = await screen.findAllByTestId('margin-health-tooltip-value');
+    expect(values[2]).toHaveTextContent('7.00');
+
+    rerender(
+      <MarginHealthChartTooltip
+        {...margins}
+        decimals={asset.decimals}
+        marginAccountBalance="900"
+      />
+    );
+
+    values = await screen.findAllByTestId('margin-health-tooltip-value');
+    expect(values.length).toBe(5);
+    expect(values[3]).toHaveTextContent('9.00');
+  });
+});

libs/accounts/src/lib/use-account-balance.tsx

@@ -23,7 +23,6 @@ export const useAccountBalance = (assetId?: string) => {
     },
     [assetId]
   );
-
   useDataProvider({
     dataProvider: accountsDataProvider,
     variables,

libs/accounts/src/lib/use-market-account-balance.tsx

@@ -22,7 +22,6 @@ export const useMarketAccountBalance = (marketId: string) => {
     },
     [marketId]
   );
-
   useDataProvider({
     dataProvider: accountsDataProvider,
     variables: { partyId: pubKey || '' },

libs/cypress/mock.ts

@@ -28,3 +28,4 @@ export * from '../trades/src/lib/trades.mock';
 export * from '../withdraws/src/lib/withdrawal.mock';
 export * from '../proposals/src/lib/protocol-upgrade-proposals/protocol-statistics-proposals.mock';
 export * from '../proposals/src/lib/protocol-upgrade-proposals/block-statistics.mock';
+export * from '../liquidity/src/lib/liquidity.mock';

libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx

@@ -26,6 +26,7 @@ export const AgGridThemed = ({
     enableCellTextSelection: true,
     overlayLoadingTemplate: t('Loading...'),
     overlayNoRowsTemplate: t('No data'),
+    suppressCellFocus: true,
   };
 
   const wrapperClasses = classNames('vega-ag-grid', {

libs/datagrid/src/lib/cells/grid-progress-bar.tsx

@@ -1,9 +1,5 @@
 import type { Intent } from '@vegaprotocol/ui-toolkit';
 import { ProgressBar } from '@vegaprotocol/ui-toolkit';
-import type {
-  CellRendererSelectorResult,
-  ICellRendererParams,
-} from 'ag-grid-community';
 
 export interface ValueProps {
   valueFormatted?: {
@@ -19,7 +15,7 @@ export const EmptyCell = () => '';
 export const ProgressBarCell = ({ valueFormatted }: ValueProps) => {
   return valueFormatted ? (
     <>
-      <div className="flex justify-between leading-tight font-mono">
+      <div className="text-right leading-tight font-mono">
         <div>
           {valueFormatted.low} ({valueFormatted.value}%)
         </div>
@@ -32,11 +28,3 @@ export const ProgressBarCell = ({ valueFormatted }: ValueProps) => {
     </>
   ) : null;
 };
-
-export const progressBarCellRendererSelector = (
-  params: ICellRendererParams
-): CellRendererSelectorResult => {
-  return {
-    component: ProgressBarCell,
-  };
-};

libs/datagrid/src/lib/cells/market-name-cell.tsx

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 import { useCallback } from 'react';
 import get from 'lodash/get';
 
@@ -7,6 +7,7 @@ interface MarketNameCellProps {
   data?: { id?: string; marketId?: string; market?: { id: string } };
   idPath?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  defaultValue?: ReactNode;
 }
 
 export const MarketNameCell = ({
@@ -26,10 +27,13 @@ export const MarketNameCell = ({
     },
     [id, onMarketClick]
   );
-  if (!data) return null;
-  return (
+  if (!value || !data) return null;
+  return onMarketClick ? (
     <button onClick={handleOnClick} tabIndex={0}>
       {value}
     </button>
+  ) : (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>{value}</>
   );
 };

libs/datagrid/src/lib/type-helpers.ts

@@ -24,11 +24,13 @@ export type VegaValueFormatterParams<TRow, TField extends Field> = RowHelper<
   TField
 >;
 
-export type VegaValueGetterParams<TRow, TField extends Field> = RowHelper<
+export type VegaValueGetterParams<TRow> = Omit<
   ValueGetterParams,
-  TRow,
-  TField
->;
+  'data' | 'node'
+> & {
+  data?: TRow;
+  node: (Omit<RowNode, 'data'> & { data?: TRow }) | null;
+};
 
 export type VegaICellRendererParams<TRow, TField extends Field = string> = Omit<
   RowHelper<ICellRendererParams, TRow, TField>,

libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx

@@ -18,7 +18,7 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => {
   return (
     <Notification
       intent={Intent.Warning}
-      testId="dealticket-warning-margin"
+      testId="deal-ticket-warning-margin"
       message={`You may not have enough margin available to open this position. ${addDecimalsFormatNumber(
         margin,
         asset.decimals

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

@@ -18,7 +18,7 @@ export const ZeroBalanceError = ({
   return (
     <Notification
       intent={Intent.Warning}
-      testId="dealticket-error-message-zero-balance"
+      testId="deal-ticket-error-message-zero-balance"
       message={
         <>
           {t(

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

@@ -7,11 +7,13 @@ import { DealTicket } from './deal-ticket';
 
 export interface DealTicketContainerProps {
   marketId: string;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   onClickCollateral?: () => void;
 }
 
 export const DealTicketContainer = ({
   marketId,
+  onMarketClick,
   onClickCollateral,
 }: DealTicketContainerProps) => {
   const {
@@ -47,6 +49,7 @@ export const DealTicketContainer = ({
           marketData={marketData}
           submit={(orderSubmission) => create({ orderSubmission })}
           onClickCollateral={onClickCollateral}
+          onMarketClick={onMarketClick}
         />
       ) : (
         <Splash>

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

@@ -1,14 +1,40 @@
+import { useCallback, useState } from 'react';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import classnames from 'classnames';
 import type { ReactNode } from 'react';
-import { getFeeDetailsValues } from '../../hooks/use-fee-deal-ticket-details';
-import type { FeeDetails } from '../../hooks/use-fee-deal-ticket-details';
+import { t } from '@vegaprotocol/i18n';
+import { FeesBreakdown } from '@vegaprotocol/markets';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 
-export interface DealTicketFeeDetailProps {
+import type { Market } from '@vegaprotocol/markets';
+import type { EstimatePositionQuery } from '@vegaprotocol/positions';
+import type { EstimateFeesQuery } from '../../hooks/__generated__/EstimateOrder';
+import { AccountBreakdownDialog } from '@vegaprotocol/accounts';
+
+import { formatRange, formatValue } from '@vegaprotocol/utils';
+import { marketMarginDataProvider } from '@vegaprotocol/accounts';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+
+import {
+  NOTIONAL_SIZE_TOOLTIP_TEXT,
+  MARGIN_DIFF_TOOLTIP_TEXT,
+  DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
+  TOTAL_MARGIN_AVAILABLE,
+  LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT,
+  EST_TOTAL_MARGIN_TOOLTIP_TEXT,
+  MARGIN_ACCOUNT_TOOLTIP_TEXT,
+} from '../../constants';
+
+const emptyValue = '-';
+
+export interface DealTicketFeeDetailPros {
   label: string;
-  value?: string | number | null;
-  labelDescription?: string | ReactNode;
-  symbol?: string;
+  value?: string | null | undefined;
+  symbol: string;
+  indent?: boolean | undefined;
+  labelDescription?: ReactNode;
+  formattedValue?: string;
+  onClick?: () => void;
 }
 
 export const DealTicketFeeDetail = ({
@@ -16,51 +42,310 @@ export const DealTicketFeeDetail = ({
   value,
   labelDescription,
   symbol,
-}: DealTicketFeeDetailProps) => (
-  <div className="text-xs mt-2 flex justify-between items-center gap-4 flex-wrap">
-    <div>
+  indent,
+  onClick,
+  formattedValue,
+}: DealTicketFeeDetailPros) => {
+  const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`;
+  const valueElement = onClick ? (
+    <button
+      onClick={onClick}
+      className="text-neutral-500 dark:text-neutral-300"
+    >
+      {displayValue}
+    </button>
+  ) : (
+    <div className="text-neutral-500 dark:text-neutral-300">{displayValue}</div>
+  );
+  return (
+    <div
+      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',
+        { 'ml-2': indent }
+      )}
+    >
       <Tooltip description={labelDescription}>
         <div>{label}</div>
       </Tooltip>
+      <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
+        {valueElement}
+      </Tooltip>
     </div>
-    <div className="text-neutral-500 dark:text-neutral-300">{`${value ?? '-'} ${
-      symbol || ''
-    }`}</div>
-  </div>
-);
+  );
+};
+
+export interface DealTicketFeeDetailsProps {
+  generalAccountBalance?: string;
+  marginAccountBalance?: string;
+  market: Market;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  assetSymbol: string;
+  notionalSize: string | null;
+  feeEstimate: EstimateFeesQuery['estimateFees'] | undefined;
+  positionEstimate: EstimatePositionQuery['estimatePosition'];
+}
+
+export const DealTicketFeeDetails = ({
+  marginAccountBalance,
+  generalAccountBalance,
+  assetSymbol,
+  feeEstimate,
+  market,
+  onMarketClick,
+  notionalSize,
+  positionEstimate,
+}: DealTicketFeeDetailsProps) => {
+  const [breakdownDialog, setBreakdownDialog] = useState(false);
+  const { pubKey: partyId } = useVegaWallet();
+  const { data: currentMargins } = useDataProvider({
+    dataProvider: marketMarginDataProvider,
+    variables: { marketId: market.id, partyId: partyId || '' },
+    skip: !partyId,
+  });
+  const liquidationEstimate = positionEstimate?.liquidation;
+  const marginEstimate = positionEstimate?.margin;
+  const totalBalance =
+    BigInt(generalAccountBalance || '0') + BigInt(marginAccountBalance || '0');
+  const { settlementAsset: asset } =
+    market.tradableInstrument.instrument.product;
+  const { decimals: assetDecimals, quantum } = asset;
+  let marginRequiredBestCase: string | undefined = undefined;
+  let marginRequiredWorstCase: string | undefined = undefined;
+  if (marginEstimate) {
+    if (currentMargins) {
+      marginRequiredBestCase = (
+        BigInt(marginEstimate.bestCase.initialLevel) -
+        BigInt(currentMargins.initialLevel)
+      ).toString();
+      if (marginRequiredBestCase.startsWith('-')) {
+        marginRequiredBestCase = '0';
+      }
+      marginRequiredWorstCase = (
+        BigInt(marginEstimate.worstCase.initialLevel) -
+        BigInt(currentMargins.initialLevel)
+      ).toString();
+      if (marginRequiredWorstCase.startsWith('-')) {
+        marginRequiredWorstCase = '0';
+      }
+    } else {
+      marginRequiredBestCase = marginEstimate.bestCase.initialLevel;
+      marginRequiredWorstCase = marginEstimate.worstCase.initialLevel;
+    }
+  }
+
+  const totalMarginAvailable = (
+    currentMargins
+      ? totalBalance - BigInt(currentMargins.maintenanceLevel)
+      : totalBalance
+  ).toString();
+
+  let deductionFromCollateral = null;
+  let projectedMargin = null;
+  if (marginAccountBalance) {
+    const deductionFromCollateralBestCase =
+      BigInt(marginEstimate?.bestCase.initialLevel ?? 0) -
+      BigInt(marginAccountBalance);
+
+    const deductionFromCollateralWorstCase =
+      BigInt(marginEstimate?.worstCase.initialLevel ?? 0) -
+      BigInt(marginAccountBalance);
+
+    deductionFromCollateral = (
+      <DealTicketFeeDetail
+        indent
+        label={t('Deduction from collateral')}
+        value={formatRange(
+          deductionFromCollateralBestCase > 0
+            ? deductionFromCollateralBestCase.toString()
+            : '0',
+          deductionFromCollateralWorstCase > 0
+            ? deductionFromCollateralWorstCase.toString()
+            : '0',
+          assetDecimals
+        )}
+        formattedValue={formatRange(
+          deductionFromCollateralBestCase > 0
+            ? deductionFromCollateralBestCase.toString()
+            : '0',
+          deductionFromCollateralWorstCase > 0
+            ? deductionFromCollateralWorstCase.toString()
+            : '0',
+          assetDecimals,
+          quantum
+        )}
+        symbol={assetSymbol}
+        labelDescription={DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT(assetSymbol)}
+      />
+    );
+    projectedMargin = (
+      <DealTicketFeeDetail
+        label={t('Projected margin')}
+        value={formatRange(
+          marginEstimate?.bestCase.initialLevel,
+          marginEstimate?.worstCase.initialLevel,
+          assetDecimals
+        )}
+        formattedValue={formatRange(
+          marginEstimate?.bestCase.initialLevel,
+          marginEstimate?.worstCase.initialLevel,
+          assetDecimals,
+          quantum
+        )}
+        symbol={assetSymbol}
+        labelDescription={EST_TOTAL_MARGIN_TOOLTIP_TEXT}
+      />
+    );
+  }
+
+  let liquidationPriceEstimate = emptyValue;
+
+  if (liquidationEstimate) {
+    const liquidationEstimateBestCaseIncludingBuyOrders = BigInt(
+      liquidationEstimate.bestCase.including_buy_orders.replace(/\..*/, '')
+    );
+    const liquidationEstimateBestCaseIncludingSellOrders = BigInt(
+      liquidationEstimate.bestCase.including_sell_orders.replace(/\..*/, '')
+    );
+    const liquidationEstimateBestCase =
+      liquidationEstimateBestCaseIncludingBuyOrders >
+      liquidationEstimateBestCaseIncludingSellOrders
+        ? liquidationEstimateBestCaseIncludingBuyOrders
+        : liquidationEstimateBestCaseIncludingSellOrders;
+
+    const liquidationEstimateWorstCaseIncludingBuyOrders = BigInt(
+      liquidationEstimate.worstCase.including_buy_orders.replace(/\..*/, '')
+    );
+    const liquidationEstimateWorstCaseIncludingSellOrders = BigInt(
+      liquidationEstimate.worstCase.including_sell_orders.replace(/\..*/, '')
+    );
+    const liquidationEstimateWorstCase =
+      liquidationEstimateWorstCaseIncludingBuyOrders >
+      liquidationEstimateWorstCaseIncludingSellOrders
+        ? liquidationEstimateWorstCaseIncludingBuyOrders
+        : liquidationEstimateWorstCaseIncludingSellOrders;
+    liquidationPriceEstimate = formatRange(
+      (liquidationEstimateBestCase < liquidationEstimateWorstCase
+        ? liquidationEstimateBestCase
+        : liquidationEstimateWorstCase
+      ).toString(),
+      (liquidationEstimateBestCase > liquidationEstimateWorstCase
+        ? liquidationEstimateBestCase
+        : liquidationEstimateWorstCase
+      ).toString(),
+      assetDecimals,
+      undefined,
+      market.decimalPlaces
+    );
+  }
+
+  const onAccountBreakdownDialogClose = useCallback(
+    () => setBreakdownDialog(false),
+    []
+  );
 
-export const DealTicketFeeDetails = (props: FeeDetails) => {
-  const details = getFeeDetailsValues(props);
   return (
     <div>
-      {details.map(
-        ({
-          label,
-          value,
-          labelDescription,
-          symbol,
-          indent,
-          formattedValue,
-        }) => (
-          <div
-            key={typeof label === 'string' ? label : 'value-dropdown'}
-            className={classnames(
-              'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',
-              { 'ml-2': indent }
-            )}
-          >
-            <div>
-              <Tooltip description={labelDescription}>
-                <div>{label}</div>
-              </Tooltip>
-            </div>
-            <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
-              <div className="text-neutral-500 dark:text-neutral-300">{`${
-                formattedValue ?? '-'
-              } ${symbol || ''}`}</div>
-            </Tooltip>
-          </div>
-        )
+      <DealTicketFeeDetail
+        label={t('Notional')}
+        value={formatValue(notionalSize, assetDecimals)}
+        formattedValue={formatValue(notionalSize, assetDecimals, quantum)}
+        symbol={assetSymbol}
+        labelDescription={NOTIONAL_SIZE_TOOLTIP_TEXT(assetSymbol)}
+      />
+      <DealTicketFeeDetail
+        label={t('Fees')}
+        value={
+          feeEstimate?.totalFeeAmount &&
+          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals)}`
+        }
+        formattedValue={
+          feeEstimate?.totalFeeAmount &&
+          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals, quantum)}`
+        }
+        labelDescription={
+          <>
+            <span>
+              {t(
+                `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
+              )}
+            </span>
+            <FeesBreakdown
+              fees={feeEstimate?.fees}
+              feeFactors={market.fees.factors}
+              symbol={assetSymbol}
+              decimals={assetDecimals}
+            />
+          </>
+        }
+        symbol={assetSymbol}
+      />
+      <DealTicketFeeDetail
+        label={t('Margin required')}
+        value={formatRange(
+          marginRequiredBestCase,
+          marginRequiredWorstCase,
+          assetDecimals
+        )}
+        formattedValue={formatRange(
+          marginRequiredBestCase,
+          marginRequiredWorstCase,
+          assetDecimals,
+          quantum
+        )}
+        labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
+        symbol={assetSymbol}
+      />
+      <DealTicketFeeDetail
+        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}
+      <DealTicketFeeDetail
+        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}
+      <DealTicketFeeDetail
+        label={t('Liquidation price estimate')}
+        formattedValue={liquidationPriceEstimate}
+        symbol={assetSymbol}
+        labelDescription={LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}
+      />
+      {partyId && (
+        <AccountBreakdownDialog
+          assetId={breakdownDialog ? asset.id : undefined}
+          partyId={partyId}
+          onMarketClick={onMarketClick}
+          onClose={onAccountBreakdownDialogClose}
+        />
       )}
     </div>
   );

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

@@ -25,7 +25,7 @@ export const DealTicketLimitAmount = ({
   const renderError = () => {
     if (sizeError) {
       return (
-        <InputError testId="dealticket-error-message-size-limit">
+        <InputError testId="deal-ticket-error-message-size-limit">
           {sizeError}
         </InputError>
       );
@@ -33,7 +33,7 @@ export const DealTicketLimitAmount = ({
 
     if (priceError) {
       return (
-        <InputError testId="dealticket-error-message-price-limit">
+        <InputError testId="deal-ticket-error-message-price-limit">
           {priceError}
         </InputError>
       );

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

@@ -90,7 +90,7 @@ export const DealTicketMarketAmount = ({
       {sizeError && (
         <InputError
           intent="danger"
-          testId="dealticket-error-message-size-market"
+          testId="deal-ticket-error-message-size-market"
         >
           {sizeError}
         </InputError>

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

@@ -31,7 +31,7 @@ import {
 } from '@vegaprotocol/positions';
 import { toBigNum, removeDecimal } from '@vegaprotocol/utils';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
-import { useEstimateFees } from '../../hooks/use-fee-deal-ticket-details';
+import { useEstimateFees } from '../../hooks/use-estimate-fees';
 import { getDerivedPrice } from '../../utils/get-price';
 import type { OrderInfo } from '@vegaprotocol/types';
 
@@ -55,17 +55,17 @@ import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
 import { useOrderForm } from '../../hooks/use-order-form';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 
-import { marketMarginDataProvider } from '@vegaprotocol/positions';
-
 export interface DealTicketProps {
   market: Market;
   marketData: MarketData;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   submit: (order: OrderSubmission) => void;
   onClickCollateral?: () => void;
 }
 
 export const DealTicket = ({
   market,
+  onMarketClick,
   marketData,
   submit,
   onClickCollateral,
@@ -176,12 +176,6 @@ export const DealTicket = ({
   const assetSymbol =
     market.tradableInstrument.instrument.product.settlementAsset.symbol;
 
-  const { data: currentMargins } = useDataProvider({
-    dataProvider: marketMarginDataProvider,
-    variables: { marketId: market.id, partyId: pubKey || '' },
-    skip: !pubKey,
-  });
-
   useEffect(() => {
     if (!pubKey) {
       setError('summary', {
@@ -200,7 +194,8 @@ export const DealTicket = ({
       return;
     }
 
-    const hasNoBalance = !BigInt(generalAccountBalance);
+    const hasNoBalance =
+      !BigInt(generalAccountBalance) && !BigInt(marginAccountBalance);
     if (hasNoBalance) {
       setError('summary', {
         message: SummaryValidationType.NoCollateral,
@@ -224,6 +219,7 @@ export const DealTicket = ({
     marketState,
     marketTradingMode,
     generalAccountBalance,
+    marginAccountBalance,
     pubKey,
     setError,
     clearErrors,
@@ -487,6 +483,7 @@ export const DealTicket = ({
           }
         />
         <DealTicketFeeDetails
+          onMarketClick={onMarketClick}
           feeEstimate={feeEstimate}
           notionalSize={notionalSize}
           assetSymbol={assetSymbol}
@@ -494,8 +491,6 @@ export const DealTicket = ({
           generalAccountBalance={generalAccountBalance}
           positionEstimate={positionEstimate?.estimatePosition}
           market={market}
-          currentInitialMargin={currentMargins?.initialLevel}
-          currentMaintenanceMargin={currentMargins?.maintenanceLevel}
         />
       </form>
     </TinyScroll>
@@ -536,7 +531,7 @@ const SummaryMessage = memo(
     if (isReadOnly) {
       return (
         <div className="mb-2">
-          <InputError testId="dealticket-error-message-summary">
+          <InputError testId="deal-ticket-error-message-summary">
             {
               'You need to connect your own wallet to start trading on this market'
             }
@@ -585,7 +580,7 @@ const SummaryMessage = memo(
     if (errorMessage) {
       return (
         <div className="mb-2">
-          <InputError testId="dealticket-error-message-summary">
+          <InputError testId="deal-ticket-error-message-summary">
             {errorMessage}
           </InputError>
         </div>
@@ -613,7 +608,7 @@ const SummaryMessage = memo(
         <div className="mb-2">
           <Notification
             intent={Intent.Warning}
-            testId={'dealticket-warning-auction'}
+            testId={'deal-ticket-warning-auction'}
             message={t(
               'Any orders placed now will not trade until the auction ends'
             )}

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

@@ -31,7 +31,7 @@ export const ExpirySelector = ({
         min={minDate}
       />
       {errorMessage && (
-        <InputError testId="dealticket-error-message-expiry">
+        <InputError testId="deal-ticket-error-message-expiry">
           {errorMessage}
         </InputError>
       )}

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

@@ -108,7 +108,7 @@ export const TimeInForceSelector = ({
         ))}
       </Select>
       {errorMessage && (
-        <InputError testId="dealticket-error-message-tif">
+        <InputError testId="deal-ticket-error-message-tif">
           {renderError(errorMessage)}
         </InputError>
       )}

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

@@ -83,7 +83,7 @@ export const TypeSelector = ({
         onChange={(e) => onSelect(e.target.value as Schema.OrderType)}
       />
       {errorMessage && (
-        <InputError testId="dealticket-error-message-type">
+        <InputError testId="deal-ticket-error-message-type">
           {renderError(errorMessage as MarketModeValidationType)}
         </InputError>
       )}

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

@@ -1,2 +1,2 @@
 export * from './__generated__/EstimateOrder';
-export * from './use-fee-deal-ticket-details';
+export * from './use-estimate-fees';

libs/deal-ticket/src/hooks/use-estimate-fees.tsx

@@ -0,0 +1,25 @@
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
+
+import { useEstimateFeesQuery } from './__generated__/EstimateOrder';
+
+export const useEstimateFees = (
+  order?: OrderSubmissionBody['orderSubmission']
+) => {
+  const { pubKey } = useVegaWallet();
+
+  const { data } = useEstimateFeesQuery({
+    variables: order && {
+      marketId: order.marketId,
+      partyId: pubKey || '',
+      price: order.price,
+      size: order.size,
+      side: order.side,
+      timeInForce: order.timeInForce,
+      type: order.type,
+    },
+    fetchPolicy: 'no-cache',
+    skip: !pubKey || !order?.size || !order?.price,
+  });
+  return data?.estimateFees;
+};

libs/deal-ticket/src/hooks/use-fee-deal-ticket-details.tsx

@@ -1,327 +0,0 @@
-import { FeesBreakdown } from '@vegaprotocol/markets';
-import {
-  addDecimalsFormatNumber,
-  addDecimalsFormatNumberQuantum,
-  isNumeric,
-} from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { Market } from '@vegaprotocol/markets';
-import type { EstimatePositionQuery } from '@vegaprotocol/positions';
-import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
-import {
-  EST_TOTAL_MARGIN_TOOLTIP_TEXT,
-  NOTIONAL_SIZE_TOOLTIP_TEXT,
-  MARGIN_ACCOUNT_TOOLTIP_TEXT,
-  MARGIN_DIFF_TOOLTIP_TEXT,
-  DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
-  TOTAL_MARGIN_AVAILABLE,
-  LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT,
-} from '../constants';
-
-import { useEstimateFeesQuery } from './__generated__/EstimateOrder';
-import type { EstimateFeesQuery } from './__generated__/EstimateOrder';
-
-export const useEstimateFees = (
-  order?: OrderSubmissionBody['orderSubmission']
-) => {
-  const { pubKey } = useVegaWallet();
-
-  const { data } = useEstimateFeesQuery({
-    variables: order && {
-      marketId: order.marketId,
-      partyId: pubKey || '',
-      price: order.price,
-      size: order.size,
-      side: order.side,
-      timeInForce: order.timeInForce,
-      type: order.type,
-    },
-    skip: !pubKey || !order?.size || !order?.price,
-    fetchPolicy: 'no-cache',
-  });
-  return data?.estimateFees;
-};
-
-export interface FeeDetails {
-  generalAccountBalance?: string;
-  marginAccountBalance?: string;
-  market: Market;
-  assetSymbol: string;
-  notionalSize: string | null;
-  feeEstimate: EstimateFeesQuery['estimateFees'] | undefined;
-  currentInitialMargin?: string;
-  currentMaintenanceMargin?: string;
-  positionEstimate: EstimatePositionQuery['estimatePosition'];
-}
-
-const emptyValue = '-';
-
-export const formatValue = (
-  value: string | number | null | undefined,
-  formatDecimals: number,
-  quantum?: string
-): string => {
-  if (!isNumeric(value)) return emptyValue;
-  if (!quantum) return addDecimalsFormatNumber(value, formatDecimals);
-  return addDecimalsFormatNumberQuantum(value, formatDecimals, quantum);
-};
-
-export const formatRange = (
-  min: string | number | null | undefined,
-  max: string | number | null | undefined,
-  formatDecimals: number,
-  quantum?: string
-) => {
-  const minFormatted = formatValue(min, formatDecimals, quantum);
-  const maxFormatted = formatValue(max, formatDecimals, quantum);
-  if (minFormatted !== maxFormatted) {
-    return `${minFormatted} - ${maxFormatted}`;
-  }
-  if (minFormatted !== emptyValue) {
-    return minFormatted;
-  }
-  return maxFormatted;
-};
-
-export const getFeeDetailsValues = ({
-  marginAccountBalance,
-  generalAccountBalance,
-  assetSymbol,
-  feeEstimate,
-  market,
-  notionalSize,
-  currentInitialMargin,
-  currentMaintenanceMargin,
-  positionEstimate,
-}: FeeDetails) => {
-  const liquidationEstimate = positionEstimate?.liquidation;
-  const marginEstimate = positionEstimate?.margin;
-  const totalBalance =
-    BigInt(generalAccountBalance || '0') + BigInt(marginAccountBalance || '0');
-  const assetDecimals =
-    market.tradableInstrument.instrument.product.settlementAsset.decimals;
-  const quantum =
-    market.tradableInstrument.instrument.product.settlementAsset.quantum;
-  const details: {
-    label: string;
-    value?: string | null;
-    formattedValue?: string | null;
-    symbol: string;
-    indent?: boolean;
-    labelDescription?: React.ReactNode;
-  }[] = [
-    {
-      label: t('Notional'),
-      value: formatValue(notionalSize, assetDecimals),
-      formattedValue: formatValue(notionalSize, assetDecimals, quantum),
-      symbol: assetSymbol,
-      labelDescription: NOTIONAL_SIZE_TOOLTIP_TEXT(assetSymbol),
-    },
-    {
-      label: t('Fees'),
-      value:
-        feeEstimate?.totalFeeAmount &&
-        `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals)}`,
-      formattedValue:
-        feeEstimate?.totalFeeAmount &&
-        `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals, quantum)}`,
-      labelDescription: (
-        <>
-          <span>
-            {t(
-              `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
-            )}
-          </span>
-          <FeesBreakdown
-            fees={feeEstimate?.fees}
-            feeFactors={market.fees.factors}
-            symbol={assetSymbol}
-            decimals={assetDecimals}
-          />
-        </>
-      ),
-      symbol: assetSymbol,
-    },
-  ];
-  let marginRequiredBestCase: string | undefined = undefined;
-  let marginRequiredWorstCase: string | undefined = undefined;
-  if (marginEstimate) {
-    if (currentInitialMargin) {
-      marginRequiredBestCase = (
-        BigInt(marginEstimate.bestCase.initialLevel) -
-        BigInt(currentInitialMargin)
-      ).toString();
-      if (marginRequiredBestCase.startsWith('-')) {
-        marginRequiredBestCase = '0';
-      }
-      marginRequiredWorstCase = (
-        BigInt(marginEstimate.worstCase.initialLevel) -
-        BigInt(currentInitialMargin)
-      ).toString();
-      if (marginRequiredWorstCase.startsWith('-')) {
-        marginRequiredWorstCase = '0';
-      }
-    } else {
-      marginRequiredBestCase = marginEstimate.bestCase.initialLevel;
-      marginRequiredWorstCase = marginEstimate.worstCase.initialLevel;
-    }
-  }
-  details.push({
-    label: t('Margin required'),
-    formattedValue: formatRange(
-      marginRequiredBestCase,
-      marginRequiredWorstCase,
-      assetDecimals,
-      quantum
-    ),
-    value: formatRange(
-      marginRequiredBestCase,
-      marginRequiredWorstCase,
-      assetDecimals
-    ),
-    symbol: assetSymbol,
-    labelDescription: MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol),
-  });
-
-  const totalMarginAvailable = (
-    currentMaintenanceMargin
-      ? totalBalance - BigInt(currentMaintenanceMargin)
-      : totalBalance
-  ).toString();
-
-  details.push({
-    indent: true,
-    label: t('Total margin available'),
-    formattedValue: formatValue(totalMarginAvailable, assetDecimals, quantum),
-    value: formatValue(totalMarginAvailable, assetDecimals),
-    symbol: assetSymbol,
-    labelDescription: TOTAL_MARGIN_AVAILABLE(
-      formatValue(generalAccountBalance, assetDecimals, quantum),
-      formatValue(marginAccountBalance, assetDecimals, quantum),
-      formatValue(currentMaintenanceMargin, assetDecimals, quantum),
-      assetSymbol
-    ),
-  });
-
-  if (marginAccountBalance) {
-    const deductionFromCollateralBestCase =
-      BigInt(marginEstimate?.bestCase.initialLevel ?? 0) -
-      BigInt(marginAccountBalance);
-
-    const deductionFromCollateralWorstCase =
-      BigInt(marginEstimate?.worstCase.initialLevel ?? 0) -
-      BigInt(marginAccountBalance);
-
-    details.push({
-      indent: true,
-      label: t('Deduction from collateral'),
-      value: formatRange(
-        deductionFromCollateralBestCase > 0
-          ? deductionFromCollateralBestCase.toString()
-          : '0',
-        deductionFromCollateralWorstCase > 0
-          ? deductionFromCollateralWorstCase.toString()
-          : '0',
-        assetDecimals
-      ),
-      formattedValue: formatRange(
-        deductionFromCollateralBestCase > 0
-          ? deductionFromCollateralBestCase.toString()
-          : '0',
-        deductionFromCollateralWorstCase > 0
-          ? deductionFromCollateralWorstCase.toString()
-          : '0',
-        assetDecimals,
-        quantum
-      ),
-      symbol: assetSymbol,
-      labelDescription: DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT(assetSymbol),
-    });
-
-    details.push({
-      label: t('Projected margin'),
-      value: formatRange(
-        marginEstimate?.bestCase.initialLevel,
-        marginEstimate?.worstCase.initialLevel,
-        assetDecimals
-      ),
-      formattedValue: formatRange(
-        marginEstimate?.bestCase.initialLevel,
-        marginEstimate?.worstCase.initialLevel,
-        assetDecimals,
-        quantum
-      ),
-      symbol: assetSymbol,
-      labelDescription: EST_TOTAL_MARGIN_TOOLTIP_TEXT,
-    });
-  }
-  details.push({
-    label: t('Current margin allocation'),
-    value: formatValue(marginAccountBalance, assetDecimals),
-    symbol: assetSymbol,
-    labelDescription: MARGIN_ACCOUNT_TOOLTIP_TEXT,
-    formattedValue: formatValue(marginAccountBalance, assetDecimals, quantum),
-  });
-
-  let liquidationPriceEstimate = emptyValue;
-  let liquidationPriceEstimateFormatted;
-
-  if (liquidationEstimate) {
-    const liquidationEstimateBestCaseIncludingBuyOrders = BigInt(
-      liquidationEstimate.bestCase.including_buy_orders.replace(/\..*/, '')
-    );
-    const liquidationEstimateBestCaseIncludingSellOrders = BigInt(
-      liquidationEstimate.bestCase.including_sell_orders.replace(/\..*/, '')
-    );
-    const liquidationEstimateBestCase =
-      liquidationEstimateBestCaseIncludingBuyOrders >
-      liquidationEstimateBestCaseIncludingSellOrders
-        ? liquidationEstimateBestCaseIncludingBuyOrders
-        : liquidationEstimateBestCaseIncludingSellOrders;
-
-    const liquidationEstimateWorstCaseIncludingBuyOrders = BigInt(
-      liquidationEstimate.worstCase.including_buy_orders.replace(/\..*/, '')
-    );
-    const liquidationEstimateWorstCaseIncludingSellOrders = BigInt(
-      liquidationEstimate.worstCase.including_sell_orders.replace(/\..*/, '')
-    );
-    const liquidationEstimateWorstCase =
-      liquidationEstimateWorstCaseIncludingBuyOrders >
-      liquidationEstimateWorstCaseIncludingSellOrders
-        ? liquidationEstimateWorstCaseIncludingBuyOrders
-        : liquidationEstimateWorstCaseIncludingSellOrders;
-    liquidationPriceEstimate = formatRange(
-      (liquidationEstimateBestCase < liquidationEstimateWorstCase
-        ? liquidationEstimateBestCase
-        : liquidationEstimateWorstCase
-      ).toString(),
-      (liquidationEstimateBestCase > liquidationEstimateWorstCase
-        ? liquidationEstimateBestCase
-        : liquidationEstimateWorstCase
-      ).toString(),
-      assetDecimals
-    );
-    liquidationPriceEstimateFormatted = formatRange(
-      (liquidationEstimateBestCase < liquidationEstimateWorstCase
-        ? liquidationEstimateBestCase
-        : liquidationEstimateWorstCase
-      ).toString(),
-      (liquidationEstimateBestCase > liquidationEstimateWorstCase
-        ? liquidationEstimateBestCase
-        : liquidationEstimateWorstCase
-      ).toString(),
-      assetDecimals,
-      quantum
-    );
-  }
-
-  details.push({
-    label: t('Liquidation price estimate'),
-    value: liquidationPriceEstimate,
-    formattedValue: liquidationPriceEstimateFormatted,
-    symbol: assetSymbol,
-    labelDescription: LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT,
-  });
-  return details;
-};

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

@@ -6,7 +6,6 @@ import {
   truncateByChars,
   isNumeric,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type {
@@ -25,7 +24,6 @@ export const DepositsTable = forwardRef<
   return (
     <AgGrid
       ref={ref}
-      overlayNoRowsTemplate={t('No deposits')}
       defaultColDef={{ resizable: true }}
       style={{ width: '100%', height: '100%' }}
       suppressCellFocus={true}

libs/liquidity/src/lib/MarketLiquidity.graphql

@@ -1,39 +1,3 @@
-# MarketLp
-
-query MarketLp($marketId: ID!) {
-  market(id: $marketId) {
-    id
-    decimalPlaces
-    positionDecimalPlaces
-    tradableInstrument {
-      instrument {
-        code
-        name
-        product {
-          ... on Future {
-            settlementAsset {
-              id
-              symbol
-              decimals
-            }
-          }
-        }
-      }
-    }
-    data {
-      market {
-        id
-      }
-      marketTradingMode
-      suppliedStake
-      openInterest
-      targetStake
-      trigger
-      marketValueProxy
-    }
-  }
-}
-
 # Liquidity Provisions
 
 fragment LiquidityProvisionFields on LiquidityProvision {

libs/liquidity/src/lib/__generated__/MarketLiquidity.ts

@@ -3,13 +3,6 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type MarketLpQueryVariables = Types.Exact<{
-  marketId: Types.Scalars['ID'];
-}>;
-
-
-export type MarketLpQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string, name: string, product: { __typename?: 'Future', settlementAsset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } } } }, data?: { __typename?: 'MarketData', marketTradingMode: Types.MarketTradingMode, suppliedStake?: string | null, openInterest: string, targetStake?: string | null, trigger: Types.AuctionTrigger, marketValueProxy: string, market: { __typename?: 'Market', id: string } } | null } | null };
-
 export type LiquidityProvisionFieldsFragment = { __typename?: 'LiquidityProvision', createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } };
 
 export type LiquidityProvisionsQueryVariables = Types.Exact<{
@@ -65,69 +58,6 @@ export const LiquidityProviderFeeShareFieldsFragmentDoc = gql`
   averageEntryValuation
 }
     `;
-export const MarketLpDocument = gql`
-    query MarketLp($marketId: ID!) {
-  market(id: $marketId) {
-    id
-    decimalPlaces
-    positionDecimalPlaces
-    tradableInstrument {
-      instrument {
-        code
-        name
-        product {
-          ... on Future {
-            settlementAsset {
-              id
-              symbol
-              decimals
-            }
-          }
-        }
-      }
-    }
-    data {
-      market {
-        id
-      }
-      marketTradingMode
-      suppliedStake
-      openInterest
-      targetStake
-      trigger
-      marketValueProxy
-    }
-  }
-}
-    `;
-
-/**
- * __useMarketLpQuery__
- *
- * To run a query within a React component, call `useMarketLpQuery` and pass it any options that fit your needs.
- * When your component renders, `useMarketLpQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useMarketLpQuery({
- *   variables: {
- *      marketId: // value for 'marketId'
- *   },
- * });
- */
-export function useMarketLpQuery(baseOptions: Apollo.QueryHookOptions<MarketLpQuery, MarketLpQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MarketLpQuery, MarketLpQueryVariables>(MarketLpDocument, options);
-      }
-export function useMarketLpLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketLpQuery, MarketLpQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MarketLpQuery, MarketLpQueryVariables>(MarketLpDocument, options);
-        }
-export type MarketLpQueryHookResult = ReturnType<typeof useMarketLpQuery>;
-export type MarketLpLazyQueryHookResult = ReturnType<typeof useMarketLpLazyQuery>;
-export type MarketLpQueryResult = Apollo.QueryResult<MarketLpQuery, MarketLpQueryVariables>;
 export const LiquidityProvisionsDocument = gql`
     query LiquidityProvisions($marketId: ID!) {
   market(id: $marketId) {