Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown

fix(accounts): rmeove grid actions dropdown grid prop
feat(trading): settings page quick adjust a css (#3558 )
2023-04-27 11:23:48 +03:00 · 2023-04-27 11:23:13 +03:00 · 2023-04-27 07:38:57 +00:00 · 2023-04-27 06:10:10 +00:00 · 2023-04-27 00:16:39 +00:00 · 2023-04-26 18:07:54 +00:00
92 changed files with 2013 additions and 384 deletions
@@ -105,19 +105,44 @@ jobs:
          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)"
          echo -n "Affected projects: $affected"

+          branch_slug="$(echo ${{ github.head_ref || github.ref_name }} | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g )"
          projects_e2e=""
-          if [[ $affected == *"governance"* ]]; then projects_e2e+='"governance-e2e" '; fi
-          if [[ $affected == *"trading"* ]]; then projects_e2e+='"trading-e2e" '; fi
-          if [[ $affected == *"explorer"* ]]; then projects_e2e+='"explorer-e2e" '; fi
-          if [[ -z "$projects_e2e" ]]; then projects_e2e+='"governance-e2e" "trading-e2e" "explorer-e2e" '; fi
+          preview_governance="not deployed"
+          preview_trading="not deployed"
+          preview_explorer="not deployed"
+          if [[ -z "$projects_e2e" ]]; then
+            projects_e2e+='"governance-e2e" "trading-e2e" "explorer-e2e" '
+            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
+            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
+            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
+          else
+            if [[ $affected == *"governance"* ]]; then
+              projects_e2e+='"governance-e2e" '
+              preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
+            fi
+            if [[ $affected == *"trading"* ]]; then
+              projects_e2e+='"trading-e2e" '
+              preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
+            fi
+            if [[ $affected == *"explorer"* ]]; then
+              projects_e2e+='"explorer-e2e" '
+              preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
+            fi
+          fi
          projects_e2e=${projects_e2e%?}
          projects_e2e=[${projects_e2e// /,}]
          echo PROJECTS_E2E=$projects_e2e >> $GITHUB_ENV
          echo PROJECTS=$(echo $projects_e2e | sed 's|-e2e||g') >> $GITHUB_ENV
+          echo PREVIEW_GOVERNANCE=$preview_governance >> $GITHUB_ENV
+          echo PREVIEW_TRADING=$preview_trading >> $GITHUB_ENV
+          echo PREVIEW_EXPLORER=$preview_explorer >> $GITHUB_ENV

    outputs:
      projects: ${{ env.PROJECTS }}
      projects-e2e: ${{ env.PROJECTS_E2E }}
+      preview_governance: ${{ env.PREVIEW_GOVERNANCE }}
+      preview_trading: ${{ env.PREVIEW_TRADING }}
+      preview_explorer: ${{ env.PREVIEW_EXPLORER }}

  cypress:
    needs: lint-test-build
@@ -140,7 +165,9 @@ jobs:

  dist-check:
    runs-on: ubuntu-latest
-    needs: publish-dist
+    needs:
+      - publish-dist
+      - lint-test-build
    if: ${{ github.event_name == 'pull_request' }}
    name: '(CD) comment preview links'
    steps:
@@ -151,22 +178,16 @@ jobs:
          issue-number: ${{ github.event.pull_request.number }}
          body-includes: Previews

-      - name: Inject slug/short variables
-        if: ${{ steps.fc.outputs.comment-id == 0 }}
-        uses: rlespinasse/github-slug-action@v4
-        with:
-          prefix: CI_
-
      - name: Create comment
-        if: ${{ steps.fc.outputs.comment-id == 0 }}
        uses: peter-evans/create-or-update-comment@v3
+        if: ${{ steps.fc.outputs.comment-id == 0 }}
        with:
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            Previews
-            - explorer https://explorer.${{ env.CI_GITHUB_REF_NAME }}.vega.rocks
-            - trading https://trading.${{ env.CI_GITHUB_REF_NAME }}.vega.rocks
-            - governance https://governance.${{ env.CI_GITHUB_REF_NAME }}.vega.rocks
+            Previews:
+            * governance: ${{ needs.lint-test-build.outputs.preview_governance }}
+            * explorer: ${{ needs.lint-test-build.outputs.preview_explorer  }}
+            * trading: ${{ needs.lint-test-build.outputs.preview_trading }}

  cypress-check:
    name: '(CI) cypress - check'
@@ -91,7 +91,11 @@ jobs:
      - uses: actions/upload-artifact@v3
        if: ${{ failure() }}
        with:
-          name: test-report-and-logs-${{ matrix.project }}
-          path: |
-            /home/runner/.vegacapsule/testnet/logs
-            frontend-monorepo/apps/trading-e2e/cypress/reports
+          name: logs-${{ matrix.project }}
+          path: /home/runner/.vegacapsule/testnet/logs
+
+      - uses: actions/upload-artifact@v3
+        if: ${{ failure() }}
+        with:
+          name: test-report-${{ matrix.project }}
+          path: frontend-monorepo/apps/trading-e2e/cypress/reports
@@ -1,20 +1,2 @@
@Library('vega-shared-library') _
-
-def commitHash = 'UNKNOWN'
-
-pipeline {
-  agent any
-  options {
-    skipDefaultCheckout true
-    parallelsAlwaysFailFast()
-  }
-  stages {
-    stage('approbation') {
-      steps {
-        sh 'printenv'
-        checkout scm
-        runApprobation ignoreFailure: false, frontendBranch: env.BRANCH_NAME, type: 'frontend'
-      }
-    }
-  }
-}
+runApprobation ignoreFailure: false, frontendBranch: env.BRANCH_NAME, type: 'frontend'
@@ -72,7 +72,7 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<
 In order to generate the schemas for your GraphQL queries, you can run `GRAPHQL_SCHEMA_PATH=[YOUR SCHEMA FILE / API URL HERE] nx run types:generate`.

 ```bash
-export  GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql
+export  GRAPHQL_SCHEMA_PATH=https://api.n07.testnet.vega.xyz/graphql
 yarn nx run types:generate
 ```

@@ -2,7 +2,7 @@
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
 NX_TENDERMINT_URL=https://tm.n07.testnet.vega.xyz/tm
 NX_TENDERMINT_WEBSOCKET_URL=wss://lb.testnet.vega.xyz/tm/websocket
-NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_VEGA_ENV=TESTNET
 NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest

@@ -1,5 +1,5 @@
 # App configuration variables
 NX_VEGA_ENV=TESTNET
-NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
@@ -54,6 +54,7 @@ export function stakingValidatorPageRemoveStake(stake: string) {
    .and('contain', `Remove ${stake} $VEGA tokens at the end of epoch`)
    .and('be.visible')
    .click();
+  cy.contains('been removed from validator').should('be.visible');
  closeDialog();
 }

@@ -1,7 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV=TESTNET
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
-NX_VEGA_URL=https://api.n08.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
@@ -3,7 +3,7 @@ import './i18n';
 import React, { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import { Integrations } from '@sentry/tracing';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import { AppLoader } from './app-loader';
 import { NetworkInfo } from '@vegaprotocol/network-info';
 import { BalanceManager } from './components/balance-manager';
@@ -149,6 +149,20 @@ const Web3Container = ({
  );
 };

+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // "document.documentElement.scrollTo" is the magic for React Router Dom v6
+    document.documentElement.scrollTo({
+      top: 0,
+      left: 0,
+    });
+  }, [pathname]);
+
+  return null;
+};
+
 const AppContainer = () => {
  const { config, loading, error } = useEthereumConfig();
  const { VEGA_ENV, GIT_COMMIT_HASH, GIT_BRANCH, ETHEREUM_PROVIDER_URL } =
@@ -183,6 +197,7 @@ const AppContainer = () => {

  return (
    <Router>
+      <ScrollToTop />
      <AppStateProvider>
        <div className="grid min-h-full text-white">
          <AsyncRenderer<EthereumConfig | null>
@@ -6,6 +6,7 @@ import { usePreviousEpochQuery } from '../__generated__/PreviousEpoch';
 import { ValidatorTables } from './validator-tables';
 import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { ENV } from '../../../config';

 export const EpochData = () => {
  // errorPolicy due to vegaprotocol/vega issue 5898
@@ -14,11 +15,23 @@ export const EpochData = () => {
    data: nodesData,
    error: nodesError,
    loading: nodesLoading,
-    refetch,
+    refetch: nodesRefetch,
  } = useNodesQuery();
-  const { data: userStakingData } = useStakingQuery({
+
+  const { delegationsPagination } = ENV;
+  const {
+    data: userStakingData,
+    error: userStakingError,
+    loading: userStakingLoading,
+    refetch: userStakingRefetch,
+  } = useStakingQuery({
    variables: {
      partyId: pubKey || '',
+      delegationsPagination: delegationsPagination
+        ? {
+            first: Number(delegationsPagination),
+          }
+        : undefined,
    },
  });
  const { data: previousEpochData } = usePreviousEpochQuery({
@@ -28,10 +41,17 @@ export const EpochData = () => {
    skip: !nodesData?.epoch.id,
  });

-  useRefreshAfterEpoch(nodesData?.epoch.timestamps.expiry, refetch);
+  useRefreshAfterEpoch(nodesData?.epoch.timestamps.expiry, () => {
+    nodesRefetch();
+    userStakingRefetch();
+  });

  return (
-    <AsyncRenderer loading={nodesLoading} error={nodesError} data={nodesData}>
+    <AsyncRenderer
+      loading={nodesLoading || userStakingLoading}
+      error={nodesError || userStakingError}
+      data={nodesData}
+    >
      {nodesData?.epoch &&
        nodesData.epoch.timestamps.start &&
        nodesData?.epoch.timestamps.expiry && (
@@ -211,7 +211,7 @@ export const ConsensusValidatorsTable = ({
              : undefined,
            [ValidatorFields.PENDING_USER_STAKE]: pendingUserStake,
            [ValidatorFields.USER_STAKE_SHARE]: userStakeShare
-              ? stakedTotalPercentage(userStakeShare)
+              ? formatNumberPercentage(new BigNumber(userStakeShare))
              : undefined,
          };
        }
@@ -59,9 +59,9 @@ export const addUserDataToValidator = (
      : undefined,
    [ValidatorFields.USER_STAKE_SHARE]:
      currentEpochUserStaking && Number(currentEpochUserStaking.amount) > 0
-        ? new BigNumber(currentEpochUserStaking.amount).dividedBy(
-            new BigNumber(currentUserStakeAvailable)
-          )
+        ? new BigNumber(currentEpochUserStaking.amount)
+            .dividedBy(new BigNumber(currentUserStakeAvailable))
+            .times(100)
        : undefined,
  };
 };
@@ -26,7 +26,11 @@ import {
 import type { AgGridReact } from 'ag-grid-react';
 import type { ColDef } from 'ag-grid-community';
 import type { ValidatorsTableProps } from './shared';
-import { formatNumber, toBigNum } from '@vegaprotocol/utils';
+import {
+  formatNumber,
+  formatNumberPercentage,
+  toBigNum,
+} from '@vegaprotocol/utils';

 interface StandbyPendingValidatorsTableProps extends ValidatorsTableProps {
  stakeNeededForPromotion: string | undefined;
@@ -163,7 +167,7 @@ export const StandbyPendingValidatorsTable = ({
              : undefined,
            [ValidatorFields.PENDING_USER_STAKE]: pendingUserStake,
            [ValidatorFields.USER_STAKE_SHARE]: userStakeShare
-              ? stakedTotalPercentage(userStakeShare)
+              ? formatNumberPercentage(new BigNumber(userStakeShare))
              : undefined,
          };
        }
@@ -19,7 +19,7 @@ NX_DEPLOY_URL=$DEPLOY_URL
 NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
 NX_VEGA_ENV = 'TESTNET'
-NX_VEGA_URL="https://api.n11.testnet.vega.xyz/graphql"
+NX_VEGA_URL="https://api.n07.testnet.vega.xyz/graphql"
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
@@ -1,6 +1,6 @@
 # App configuration variables
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
-NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_VEGA_ENV=TESTNET
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\"}
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
@@ -1,5 +1,5 @@
 # App configuration variables
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
-NX_VEGA_URL=https://api.n09.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_VEGA_NETWORKS='{"TESTNET":"https://multisig-signer.fairground.wtf","MAINNET":"https://multisig-signer.vega.xyz"}'
 NX_VEGA_ENV=TESTNET
@@ -1,17 +1,3 @@
 {
-  "hosts": [
-    "https://vega-data-graphql.chorus.one/query",
-    "https://vega.xprv.io/datanode/query",
-    "http://nala.mainnet.vega.community:3008/query",
-    "http://commodum.mainnet.vega.community:3008/query",
-    "http://lovali.mainnet.vega.community:3008/query",
-    "http://b-harvest.mainnet.vega.community:3008/query",
-    "http://staking-facilities.mainnet.vega.community:3008/query",
-    "http://figment.mainnet.vega.community:3008/query",
-    "http://nodes-guru.mainnet.vega.community:3008/query",
-    "http://p2p.mainnet.vega.community:3008/query",
-    "http://rockaway.mainnet.vega.community:3008/query",
-    "http://greenfield-one.mainnet.vega.community:3008/query",
-    "http://ryabina.mainnet.vega.community:3008/query"
-  ]
+  "hosts": ["https://vega.xprv.io/datanode/query"]
 }
@@ -1,11 +1,7 @@
 {
  "hosts": [
+    "https://api-n00.testnet.vega.rocks/graphql",
    "https://api-n06.testnet.vega.rocks/graphql",
-    "https://api-n07.testnet.vega.rocks/graphql",
-    "https://api-n08.testnet.vega.rocks/graphql",
-    "https://api-n09.testnet.vega.rocks/graphql",
-    "https://api-n10.testnet.vega.rocks/graphql",
-    "https://api-n11.testnet.vega.rocks/graphql",
-    "https://api-n12.testnet.vega.rocks/graphql"
+    "https://api-n07.testnet.vega.rocks/graphql"
  ]
 }
@@ -32,7 +32,7 @@ describe('Navbar', { tags: '@smoke' }, () => {
    });

    it('Resources dropdown should be correctly rendered', () => {
-      const resourceSelector = 'ul li:last-child';
+      const resourceSelector = 'ul li:contains(Resources)';
      ['Docs', 'Give Feedback'].forEach((text, index) => {
        cy.get('nav').find(resourceSelector).contains('Resources').click();
        cy.get('nav')
@@ -91,7 +91,7 @@ describe('Navbar', { tags: '@smoke' }, () => {
        cy.getByTestId('button-menu-drawer').click();
        cy.getByTestId('menu-drawer').should('be.visible');
        cy.getByTestId('menu-drawer')
-          .find('[data-testid="theme-switcher"]')
+          .find('[data-testid="Settings"]')
          .should('be.visible');
        cy.getByTestId('button-menu-drawer').click();
        cy.getByTestId('menu-drawer').should('not.be.visible');
@@ -0,0 +1,45 @@
+describe('Settings page', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.clearLocalStorage().then(() => {
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.visit('/');
+      cy.get('[role=dialog]').within(() => {
+        cy.getByTestId('dialog-close').click();
+      });
+      cy.get('[aria-label="cog icon"]').click();
+    });
+  });
+  it('telemetry checkbox should work well', () => {
+    cy.location('hash').should('equal', '#/settings');
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'unchecked'
+    );
+    cy.get('[for="telemetry-approval"]').click();
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'checked'
+    );
+    cy.reload();
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'checked'
+    );
+    cy.get('[for="telemetry-approval"]').click();
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'unchecked'
+    );
+    cy.reload();
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'unchecked'
+    );
+  });
+});
@@ -25,17 +25,12 @@ describe('accounts', { tags: '@smoke' }, () => {
    cy.getByTestId('tab-accounts')
      .get(tradingAccountRowId)
      .find('[col-id="accounts-actions"]')
-      .should('have.text', 'DepositWithdraw');
+      .should('have.text', '');

    cy.getByTestId('tab-accounts')
      .get(tradingAccountRowId)
-      .find('[data-testid="deposit"]')
-      .should('have.text', 'Deposit');
-
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="accounts-actions"] [data-testid="withdraw"]')
-      .should('have.text', 'Withdraw');
+      .find('[col-id="accounts-actions"]')
+      .should('have.text', '');

    cy.getByTestId('tab-accounts')
      .get(tradingAccountRowId)
@@ -1,7 +1,18 @@
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { fillsQuery } from '@vegaprotocol/mock';

+const tabFills = 'tab-fills';
+
 describe('fills', { tags: '@regression' }, () => {
+  // 7005-FILL-001
+  // 7005-FILL-002
+  // 7005-FILL-003
+  // 7005-FILL-004
+  // 7005-FILL-005
+  // 7005-FILL-006
+  // 7005-FILL-007
+  // 7005-FILL-008
+
  beforeEach(() => {
    // Ensure page loads with correct key
    cy.window().then((window) => {
@@ -38,31 +49,37 @@ describe('fills', { tags: '@regression' }, () => {
  });

  function validateFillsDisplayed() {
-    cy.getByTestId('tab-fills').should('be.visible');
-
-    cy.getByTestId('tab-fills')
+    cy.getByTestId(tabFills).should('be.visible');
+    cy.getByTestId(tabFills).contains('Market');
+    cy.getByTestId(tabFills)
      .get(
        '[role="gridcell"][col-id="market.tradableInstrument.instrument.name"]'
      )
      .each(($marketSymbol) => {
        cy.wrap($marketSymbol).invoke('text').should('not.be.empty');
      });
-    cy.getByTestId('tab-fills')
+    cy.getByTestId(tabFills).contains('Size');
+    cy.get(`[col-id='size']`).eq(1).should('contain.text', '+');
+    cy.get(`[col-id='size']`).eq(2).should('contain.text', '-');
+    cy.getByTestId(tabFills)
      .get('[role="gridcell"][col-id="size"]')
      .each(($amount) => {
        cy.wrap($amount).invoke('text').should('not.be.empty');
      });
-    cy.getByTestId('tab-fills')
+    cy.getByTestId(tabFills).contains('Price');
+    cy.getByTestId(tabFills)
      .get('[role="gridcell"][col-id="price"]')
      .each(($prices) => {
        cy.wrap($prices).invoke('text').should('not.be.empty');
      });
-    cy.getByTestId('tab-fills')
+    cy.getByTestId(tabFills).contains('Notional');
+    cy.getByTestId(tabFills)
      .get('[role="gridcell"][col-id="price_1"]')
      .each(($total) => {
        cy.wrap($total).invoke('text').should('not.be.empty');
      });
-    cy.getByTestId('tab-fills')
+    cy.getByTestId(tabFills).contains('Role');
+    cy.getByTestId(tabFills)
      .get('[role="gridcell"][col-id="aggressor"]')
      .each(($role) => {
        cy.wrap($role)
@@ -72,13 +89,15 @@ describe('fills', { tags: '@regression' }, () => {
            expect(roles.indexOf(text.trim())).to.be.greaterThan(-1);
          });
      });
-    cy.getByTestId('tab-fills')
+    cy.getByTestId(tabFills).contains('Fee');
+    cy.getByTestId(tabFills)
      .get(
        '[role="gridcell"][col-id="market.tradableInstrument.instrument.product"]'
      )
      .each(($fees) => {
        cy.wrap($fees).invoke('text').should('not.be.empty');
      });
+    cy.getByTestId(tabFills).contains('Date');
    const dateTimeRegex =
      /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
    cy.get('[col-id="createdAt"]').each(($tradeDateTime, index) => {
@@ -11,4 +11,4 @@ NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
-NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
@@ -0,0 +1,2 @@
+export { Settings as default } from './settings';
+export { SettingsButton } from './settings-button';
@@ -0,0 +1,16 @@
+import { Icon, NavigationLink } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+import { Links, Routes } from '../../pages/client-router';
+import { COG } from '@blueprintjs/icons/src/generated/iconNames';
+
+export const SettingsButton = ({ withMobile }: { withMobile?: boolean }) => {
+  return (
+    <NavigationLink data-testid="Settings" to={Links[Routes.SETTINGS]()}>
+      {withMobile ? (
+        t('Settings')
+      ) : (
+        <Icon name={COG} className="!align-middle" />
+      )}
+    </NavigationLink>
+  );
+};
@@ -0,0 +1,45 @@
+import { t } from '@vegaprotocol/i18n';
+import { TelemetryApproval } from '../../components/welcome-dialog/telemetry-approval';
+import {
+  Divider,
+  RoundedWrapper,
+  Switch,
+  ThemeSwitcher,
+} from '@vegaprotocol/ui-toolkit';
+import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
+
+export const Settings = () => {
+  const { theme, setTheme } = useThemeSwitcher();
+  const text = t(theme === 'dark' ? 'Light mode' : 'Dark mode');
+  return (
+    <div className="py-16 px-8 flex w-full justify-center">
+      <div className="lg:min-w-[700px] min-w-[300px]">
+        <h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
+          {t('Settings')}
+        </h1>
+        <div className="mt-8 text-base text-neutral-500 dark:text-neutral-400">
+          {t('Changes are applied automatically.')}
+        </div>
+        <div className="mt-10 w-full">
+          <RoundedWrapper paddingBottom>
+            <div className="flex justify-between py-3">
+              <div className="flex shrink">
+                <ThemeSwitcher />
+                <label htmlFor="theme-switcher" className="self-center text-lg">
+                  {text}
+                </label>
+              </div>
+              <Switch
+                name="settings-theme-switch"
+                onCheckedChange={() => setTheme()}
+                checked={theme === 'dark'}
+              />
+            </div>
+            <Divider />
+            <TelemetryApproval isSettingsPage />
+          </RoundedWrapper>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -10,7 +10,6 @@ import { t } from '@vegaprotocol/i18n';
 import { useGlobalStore } from '../../stores';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import {
-  ThemeSwitcher,
  Navigation,
  NavigationList,
  NavigationItem,
@@ -24,6 +23,7 @@ import {

 import { Links, Routes } from '../../pages/client-router';
 import { createDocsLinks } from '@vegaprotocol/utils';
+import { SettingsButton } from '../../client-pages/settings';

 export const Navbar = ({
  theme = 'system',
@@ -45,7 +45,7 @@ export const Navbar = ({
      theme={theme}
      actions={
        <>
-          <ThemeSwitcher />
+          <SettingsButton />
          <VegaWalletConnectButton />
        </>
      }
@@ -108,15 +108,15 @@ export const Navbar = ({
        )}
      </NavigationList>
      <NavigationList
-        className="[.drawer-content_&]:border-t [.drawer-content_&]:border-t-vega-light-200 dark:[.drawer-content_&]:border-t-vega-dark-200 [.drawer-content_&]:pt-8 [.drawer-content_&]:mt-4"
+        className="[.drawer-content_&]:border-t [.drawer-content_&]:border-t-vega-light-200 dark:[.drawer-content_&]:border-t-vega-dark-200 [.drawer-content_&]:pt-4 [.drawer-content_&]:mt-4"
        hide={[
          NavigationBreakpoint.Small,
          NavigationBreakpoint.Narrow,
          NavigationBreakpoint.Full,
        ]}
      >
-        <NavigationItem className="[.drawer-content_&]:w-full text-black dark:text-white">
-          <ThemeSwitcher withMobile />
+        <NavigationItem className="[.drawer-content_&]:w-full">
+          <SettingsButton withMobile />
        </NavigationItem>
      </NavigationList>
    </Navigation>
@@ -21,12 +21,12 @@ describe('Risk notice dialog', () => {
  });

  it.each`
-    assertion             | network
-    ${'displays'}         | ${Networks.MAINNET}
-    ${'does not display'} | ${Networks.CUSTOM}
-    ${'does not display'} | ${Networks.DEVNET}
-    ${'does not display'} | ${Networks.STAGNET3}
-    ${'does not display'} | ${Networks.TESTNET}
+    assertion     | network
+    ${'displays'} | ${Networks.MAINNET}
+    ${'displays'} | ${Networks.CUSTOM}
+    ${'displays'} | ${Networks.DEVNET}
+    ${'displays'} | ${Networks.STAGNET3}
+    ${'displays'} | ${Networks.TESTNET}
  `(
    '$assertion the risk notice on $network',
    async ({ assertion, network }) => {
@@ -43,13 +43,7 @@ describe('Risk notice dialog', () => {
        { wrapper: BrowserRouter }
      );

-      if (assertion === 'displays') {
-        // eslint-disable-next-line jest/no-conditional-expect
-        expect(screen.queryByText(introText)).toBeInTheDocument();
-      } else {
-        // eslint-disable-next-line jest/no-conditional-expect
-        expect(screen.queryByText(introText)).not.toBeInTheDocument();
-      }
+      expect(screen.queryByText(introText)).toBeInTheDocument();
    }
  );

@@ -3,6 +3,7 @@ import { t } from '@vegaprotocol/i18n';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { LocalStorage } from '@vegaprotocol/utils';
 import { RISK_ACCEPTED_KEY } from '../constants';
+import { TelemetryApproval } from './telemetry-approval';

 interface Props {
  onClose: () => void;
@@ -32,6 +33,9 @@ export const RiskNoticeDialog = ({ onClose }: Props) => {
        )}
      </p>
      <Button onClick={handleAcceptRisk}>{t('I understand, Continue')}</Button>
+      <div className="text-base mt-8">
+        <TelemetryApproval />
+      </div>
    </>
  );
 };
@@ -0,0 +1,19 @@
+import { render, screen, act } from '@testing-library/react';
+import { TelemetryApproval } from './telemetry-approval';
+
+describe('TelemetryApproval', () => {
+  it('click on checkbox should be properly handled', () => {
+    render(<TelemetryApproval />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'data-state',
+      'unchecked'
+    );
+    act(() => {
+      screen.getByRole('checkbox').click();
+    });
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+});
@@ -0,0 +1,32 @@
+import { Checkbox } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
+
+export const TelemetryApproval = ({
+  isSettingsPage,
+}: {
+  isSettingsPage?: boolean;
+}) => {
+  const [isApproved, setIsApproved] = useTelemetryApproval();
+  return (
+    <div className="flex flex-col px-2 py-3">
+      <div className="mr-4" role="form">
+        <Checkbox
+          label={<span className="text-lg pl-1">{t('Share usage data')}</span>}
+          checked={isApproved}
+          name="telemetry-approval"
+          onCheckedChange={() => setIsApproved(!isApproved)}
+        />
+      </div>
+      <div className="text-sm text-vega-light-300 dark:text-vega-dark-300 ml-6">
+        <span>
+          {t(
+            'Help identify bugs and improve the service by sharing anonymous usage data.'
+          )}
+          {!isSettingsPage &&
+            ' ' + t('You can change this in your settings at any time.')}
+        </span>
+      </div>
+    </div>
+  );
+};
@@ -4,7 +4,6 @@ import { Dialog } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider, useLocalStorage } from '@vegaprotocol/react-helpers';
 import { activeMarketsProvider } from '@vegaprotocol/market-list';
-import { useEnvironment, Networks } from '@vegaprotocol/environment';
 import * as constants from '../constants';
 import { RiskNoticeDialog } from './risk-notice-dialog';
 import { WelcomeNoticeDialog } from './welcome-notice-dialog';
@@ -13,37 +12,38 @@ import { useGlobalStore } from '../../stores';

 export const WelcomeDialog = () => {
  const { pathname } = useLocation();
-  const { VEGA_ENV } = useEnvironment();
-  let dialogContent: React.ReactNode = null;
+  let dialogContent: React.ReactNode;
  let title = '';
  let size: 'small' | 'medium' = 'small';
+  let onClose: ((open: boolean) => void) | undefined = undefined;
  const [riskAccepted] = useLocalStorage(constants.RISK_ACCEPTED_KEY);
  const { data } = useDataProvider({
    dataProvider: activeMarketsProvider,
    variables: undefined,
  });

-  const { update, shouldDisplayWelcomeDialog } = useGlobalStore((store) => ({
-    update: store.update,
-    shouldDisplayWelcomeDialog: store.shouldDisplayWelcomeDialog,
-  }));
-  const isRiskDialogNeeded =
-    riskAccepted !== 'true' && VEGA_ENV === Networks.MAINNET;
+  const update = useGlobalStore((store) => store.update);
+  const shouldDisplayWelcomeDialog = useGlobalStore(
+    (store) => store.shouldDisplayWelcomeDialog
+  );
+  const isRiskDialogNeeded = riskAccepted !== 'true' && !('Cypress' in window);
  const isWelcomeDialogNeeded = pathname === '/' || shouldDisplayWelcomeDialog;
-  const onClose = useCallback(() => {
+  const onCloseDialog = useCallback(() => {
    update({ shouldDisplayWelcomeDialog: isRiskDialogNeeded });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    dialogContent = null;
  }, [update, isRiskDialogNeeded]);

  if (isRiskDialogNeeded) {
-    dialogContent = <RiskNoticeDialog onClose={onClose} />;
+    dialogContent = <RiskNoticeDialog onClose={onCloseDialog} />;
    title = t('WARNING');
    size = 'medium';
  } else if (isWelcomeDialogNeeded && data?.length === 0) {
    dialogContent = <WelcomeNoticeDialog />;
+    onClose = onCloseDialog;
  } else if (isWelcomeDialogNeeded && (data?.length || 0) > 0) {
-    dialogContent = <WelcomeLandingDialog onClose={onClose} />;
+    dialogContent = <WelcomeLandingDialog onClose={onCloseDialog} />;
+    onClose = onCloseDialog;
+  } else {
+    dialogContent = null as React.ReactNode;
  }

  return (
@@ -0,0 +1,48 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useLocalStorage } from '@vegaprotocol/react-helpers';
+import { SentryInit, SentryClose } from '@vegaprotocol/utils';
+import { STORAGE_KEY, useTelemetryApproval } from './use-telemetry-approval';
+
+const mockSetValue = jest.fn();
+const mockRemoveValue = jest.fn();
+jest.mock('@vegaprotocol/utils');
+jest.mock('@vegaprotocol/react-helpers', () => ({
+  ...jest.requireActual('@vegaprotocol/react-helpers'),
+  useLocalStorage: jest
+    .fn()
+    .mockImplementation(() => [false, mockSetValue, mockRemoveValue]),
+}));
+
+describe('useTelemetryApproval', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('hook should return proper array', () => {
+    const res = renderHook(() => useTelemetryApproval());
+    expect(res.result.current[0]).toEqual(false);
+    expect(res.result.current[1]).toEqual(expect.any(Function));
+    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
+  });
+
+  it('hook should init stuff properly', async () => {
+    const res = renderHook(() => useTelemetryApproval());
+    await act(() => {
+      res.result.current[1](true);
+    });
+    await waitFor(() => {
+      expect(SentryInit).toHaveBeenCalled();
+      expect(mockSetValue).toHaveBeenCalledWith('1');
+    });
+  });
+
+  it('hook should close stuff properly', async () => {
+    const res = renderHook(() => useTelemetryApproval());
+    await act(() => {
+      res.result.current[1](false);
+    });
+    await waitFor(() => {
+      expect(SentryClose).toHaveBeenCalled();
+      expect(mockRemoveValue).toHaveBeenCalledWith();
+    });
+  });
+});
@@ -0,0 +1,24 @@
+import { useLocalStorage } from '@vegaprotocol/react-helpers';
+import { useCallback } from 'react';
+import { SentryInit, SentryClose } from '@vegaprotocol/utils';
+import { ENV } from '../config';
+export const STORAGE_KEY = 'vega_telemetry_approval';
+
+export const useTelemetryApproval = (): [
+  value: boolean,
+  setValue: (value: boolean) => void
+] => {
+  const [value, setValue, removeValue] = useLocalStorage(STORAGE_KEY);
+  const setApprove = useCallback(
+    (value: boolean) => {
+      if (value) {
+        SentryInit(ENV.dsn, ENV.envName);
+        return setValue('1');
+      }
+      SentryClose();
+      removeValue();
+    },
+    [setValue, removeValue]
+  );
+  return [Boolean(value), setApprove];
+};
@@ -36,6 +36,7 @@ import { Navbar } from '../components/navbar';
 import { ENV } from '../lib/config';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
+import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';

 const DEFAULT_TITLE = t('Welcome to Vega trading!');

@@ -145,7 +146,10 @@ const PartyData = () => {

 const MaybeConnectEagerly = () => {
  useVegaEagerConnect(Connectors);
-  useEthereumEagerConnect(ENV.dsn);
+  const [isTelemetryApproved] = useTelemetryApproval();
+  useEthereumEagerConnect(
+    isTelemetryApproved ? { dsn: ENV.dsn, env: ENV.envName } : {}
+  );

  const { pubKey, connect } = useVegaWallet();
  const [searchParams] = useSearchParams();
@@ -26,12 +26,17 @@ const LazyPortfolio = dynamic(() => import('../client-pages/portfolio'), {
  ssr: false,
 });

+const LazySettings = dynamic(() => import('../client-pages/settings'), {
+  ssr: false,
+});
+
 export enum Routes {
  HOME = '/',
  MARKET = '/markets',
  MARKETS = '/markets/all',
  PORTFOLIO = '/portfolio',
-  LIQUIDITY = '/liquidity',
+  LIQUIDITY = 'liquidity/:marketId',
+  SETTINGS = 'settings',
 }

 type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
@@ -45,6 +50,7 @@ export const Links: ConsoleLinks = {
    marketId
      ? trimEnd(`${Routes.LIQUIDITY}/${marketId}`, '/')
      : Routes.LIQUIDITY,
+  [Routes.SETTINGS]: () => Routes.SETTINGS,
 };

 const routerConfig: RouteObject[] = [
@@ -87,6 +93,10 @@ const routerConfig: RouteObject[] = [
    path: Routes.PORTFOLIO,
    element: <LazyPortfolio />,
  },
+  {
+    path: Routes.SETTINGS,
+    element: <LazySettings />,
+  },
  {
    path: '*',
    element: (
@@ -1,14 +1,9 @@
-import * as Sentry from '@sentry/nextjs';
-import { BrowserTracing } from '@sentry/tracing';
 import { ENV } from './lib/config/env';
+import { LocalStorage, SentryInit } from '@vegaprotocol/utils';
+import { STORAGE_KEY } from './lib/hooks/use-telemetry-approval';

-const { dsn } = ENV;
-
-if (dsn) {
-  Sentry.init({
-    dsn,
-    integrations: [new BrowserTracing()],
-    tracesSampleRate: 1,
-    environment: ENV.envName,
-  });
+const { dsn, envName } = ENV;
+const isTelemetryApproved = !!LocalStorage.getItem(STORAGE_KEY);
+if (dsn && isTelemetryApproved) {
+  SentryInit(dsn, envName);
 }
@@ -61,14 +61,7 @@ describe('AccountsTable', () => {
      );
    });
    const cells = await screen.findAllByRole('gridcell');
-    const expectedValues = [
-      'tBTC',
-      '1,256.00',
-      '1,256.00',
-      '2,512.00',
-      'Deposit',
-      'Withdraw',
-    ];
+    const expectedValues = ['tBTC', '1,256.00', '1,256.00', '2,512.00', ''];
    cells.forEach((cell, i) => {
      expect(cell).toHaveTextContent(expectedValues[i]);
    });
@@ -9,7 +9,17 @@ import type {
  VegaICellRendererParams,
  VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
-import { Button, ButtonLink, Dialog } from '@vegaprotocol/ui-toolkit';
+import {
+  Button,
+  ButtonLink,
+  Dialog,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
 import {
  AgGridDynamic as AgGrid,
@@ -122,7 +132,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
        params.data.asset.id === pinnedAssetId &&
        new BigNumber(params.data.total).isLessThanOrEqualTo(0)
          ? 32
-          : 22,
+          : 24,
      [pinnedAssetId]
    );

@@ -256,7 +266,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
              colId="accounts-actions"
              headerName=""
              sortable={false}
-              minWidth={200}
+              maxWidth={200}
              type="rightAligned"
              cellRenderer={({
                data,
@@ -283,30 +293,65 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                    );
                  }
                  return (
-                    <>
-                      <span className="mx-1" />
-                      {!props.isReadOnly && (
-                        <ButtonLink
-                          data-testid="deposit"
-                          onClick={() => {
-                            onClickDeposit && onClickDeposit(data.asset.id);
-                          }}
-                        >
-                          {t('Deposit')}
-                        </ButtonLink>
-                      )}
-                      <span className="mx-1" />
-                      {!props.isReadOnly && (
-                        <ButtonLink
-                          data-testid="withdraw"
-                          onClick={() =>
-                            onClickWithdraw && onClickWithdraw(data.asset.id)
-                          }
-                        >
-                          {t('Withdraw')}
-                        </ButtonLink>
-                      )}
-                    </>
+                    !props.isReadOnly && (
+                      <DropdownMenu
+                        trigger={
+                          <DropdownMenuTrigger
+                            iconName="more"
+                            className="hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 p-0.5 focus:rounded-full hover:rounded-full"
+                          ></DropdownMenuTrigger>
+                        }
+                      >
+                        <DropdownMenuContent>
+                          <DropdownMenuItem
+                            key={'deposit'}
+                            data-testid="deposit"
+                            onClick={() => {
+                              onClickDeposit && onClickDeposit(data.asset.id);
+                            }}
+                          >
+                            <span>
+                              <VegaIcon
+                                name={VegaIconNames.DEPOSIT}
+                                size={16}
+                              />
+                              {t('Deposit')}
+                            </span>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            key={'withdraw'}
+                            data-testid="withdraw"
+                            onClick={() =>
+                              onClickWithdraw && onClickWithdraw(data.asset.id)
+                            }
+                          >
+                            <span>
+                              <VegaIcon
+                                name={VegaIconNames.WITHDRAW}
+                                size={16}
+                              />
+                              {t('Withdraw')}
+                            </span>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            key={'breakdown'}
+                            data-testid="breakdown"
+                            onClick={() => {
+                              setOpenBreakdown(!openBreakdown);
+                              setRow(data);
+                            }}
+                          >
+                            <span>
+                              <VegaIcon
+                                name={VegaIconNames.BREAKDOWN}
+                                size={16}
+                              />
+                              {t('Breakdown')}
+                            </span>
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )
                  );
                }
              }}
@@ -70,7 +70,7 @@ const NetworkLabel = ({
  isCurrent = false,
  isAvailable = false,
 }: NetworkLabelProps) => (
-  <span className="text-neutral-800">
+  <span className="text-vega-dark-300 dark:text-vega-light-300">
    {getLabelText({ isCurrent, isAvailable })}
  </span>
 );
@@ -111,9 +111,12 @@ export const NetworkSwitcher = ({
      trigger={
        <DropdownMenuTrigger
          ref={menuRef}
-          className={classNames('flex justify-between items-center', className)}
+          className={classNames(
+            'flex justify-between items-center text-sm text-vega-dark-600 dark:text-vega-light-600 py-1 px-2 rounded border border-vega-dark-200 whitespace-nowrap dark:hover:bg-vega-dark-500 hover:bg-vega-light-500',
+            className
+          )}
        >
-          {envTriggerMapping[current]}
+          <span className="mr-2"> {envTriggerMapping[current]}</span>
        </DropdownMenuTrigger>
      }
    >
@@ -120,6 +120,40 @@ describe('FillsTable', () => {
    expect(amountCell).toHaveClass('text-vega-pink');
  });

+  it('should format cells correctly for side unspecified', async () => {
+    const partyId = 'party-id';
+    const buyerFill = generateFill({
+      ...defaultFill,
+      seller: {
+        id: partyId,
+      },
+      aggressor: Schema.Side.SIDE_UNSPECIFIED,
+      sellerFee: {
+        makerFee: '1',
+        infrastructureFee: '1',
+        liquidityFee: '1',
+      },
+    });
+    render(<FillsTable partyId={partyId} rowData={[buyerFill]} />);
+
+    const cells = screen.getAllByRole('gridcell');
+    const expectedValues = [
+      buyerFill.market?.tradableInstrument.instrument.name || '',
+      '-3.00',
+      '1.00 BTC',
+      '3.00 BTC',
+      '-',
+      '0.03 BTC',
+      getDateTimeFormat().format(new Date(buyerFill.createdAt)),
+    ];
+    cells.forEach((cell, i) => {
+      expect(cell).toHaveTextContent(expectedValues[i]);
+    });
+
+    const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
+    expect(amountCell).toHaveClass('text-vega-pink');
+  });
+
  it('should render correct maker or taker role', async () => {
    const partyId = 'party-id';
    const takerFill = generateFill({
@@ -190,7 +224,7 @@ describe('FillsTable', () => {
        makerFee: '1000',
        totalFee: '6000',
      };
-      expect(getFeesBreakdown('TAKER', fees)).toEqual(expectedBreakdown);
+      expect(getFeesBreakdown('Taker', fees)).toEqual(expectedBreakdown);
    });

    it('should return correct fees breakdown for a maker', () => {
@@ -205,7 +239,7 @@ describe('FillsTable', () => {
        makerFee: '-1000',
        totalFee: '4000',
      };
-      expect(getFeesBreakdown('MAKER', fees)).toEqual(expectedBreakdown);
+      expect(getFeesBreakdown('Maker', fees)).toEqual(expectedBreakdown);
    });
  });
 });
@@ -26,8 +26,10 @@ import BigNumber from 'bignumber.js';
 import type { Trade } from './fills-data-provider';
 import type { FillFieldsFragment } from './__generated__/Fills';

-const TAKER = 'TAKER';
-const MAKER = 'MAKER';
+const TAKER = 'Taker';
+const MAKER = 'Maker';
+
+export type Role = typeof TAKER | typeof MAKER | '-';

 export type Props = (AgGridReactProps | AgReactUiProps) & {
  partyId: string;
@@ -180,24 +182,10 @@ const formatTotal = ({
 };

 const formatRole = (partyId: string) => {
-  return ({ value, data }: VegaValueFormatterParams<Trade, 'aggressor'>) => {
-    const taker = t('Taker');
-    const maker = t('Maker');
-    if (data?.buyer.id === partyId) {
-      if (value === Schema.Side.SIDE_BUY) {
-        return taker;
-      } else {
-        return maker;
-      }
-    } else if (data?.seller.id === partyId) {
-      if (value === Schema.Side.SIDE_SELL) {
-        return taker;
-      } else {
-        return maker;
-      }
-    } else {
-      return '-';
-    }
+  return ({ data }: VegaValueFormatterParams<Trade, 'aggressor'>) => {
+    if (!data) return '-';
+    const { role } = getRoleAndFees({ data, partyId });
+    return role;
  };
 };

@@ -222,6 +210,15 @@ const formatFee = (partyId: string) => {
  };
 };

+export const isEmptyFeeObj = (feeObj: Schema.TradeFee) => {
+  if (!feeObj) return true;
+  return (
+    feeObj.liquidityFee === '0' &&
+    feeObj.makerFee === '0' &&
+    feeObj.infrastructureFee === '0'
+  );
+};
+
 export const getRoleAndFees = ({
  data,
  partyId,
@@ -232,14 +229,30 @@ export const getRoleAndFees = ({
  >;
  partyId?: string;
 }) => {
-  let role;
+  let role: Role;
  let feesObj;
  if (data?.buyer.id === partyId) {
-    role = data.aggressor === Schema.Side.SIDE_BUY ? TAKER : MAKER;
-    feesObj = role === TAKER ? data?.buyerFee : data.sellerFee;
+    if (data.aggressor === Schema.Side.SIDE_BUY) {
+      role = TAKER;
+      feesObj = data?.buyerFee;
+    } else if (data.aggressor === Schema.Side.SIDE_SELL) {
+      role = MAKER;
+      feesObj = data?.sellerFee;
+    } else {
+      role = '-';
+      feesObj = !isEmptyFeeObj(data?.buyerFee) ? data.buyerFee : data.sellerFee;
+    }
  } else if (data?.seller.id === partyId) {
-    role = data.aggressor === Schema.Side.SIDE_SELL ? TAKER : MAKER;
-    feesObj = role === TAKER ? data?.sellerFee : data.buyerFee;
+    if (data.aggressor === Schema.Side.SIDE_SELL) {
+      role = TAKER;
+      feesObj = data?.sellerFee;
+    } else if (data.aggressor === Schema.Side.SIDE_BUY) {
+      role = MAKER;
+      feesObj = data?.buyerFee;
+    } else {
+      role = '-';
+      feesObj = !isEmptyFeeObj(data.sellerFee) ? data.sellerFee : data.buyerFee;
+    }
  } else {
    return { role: '-', feesObj: '-' };
  }
@@ -270,11 +283,6 @@ const FeesBreakdownTooltip = ({
      {role === MAKER && (
        <>
          <p className="mb-1">{t('The maker will receive the maker fee.')}</p>
-          <p className="mb-1">
-            {t(
-              'If the market is in monitoring auction the maker will pay half of the infrastructure and liquidity fees.'
-            )}
-          </p>
          <p className="mb-1">
            {t(
              'If the market is active the maker will pay zero infrastructure and liquidity fees.'
@@ -283,14 +291,14 @@ const FeesBreakdownTooltip = ({
        </>
      )}
      {role === TAKER && (
-        <>
-          <p className="mb-1">{t('Fees to be paid by the taker.')}</p>
-          <p className="mb-1">
-            {t(
-              'If the market is in monitoring auction the taker will pay half of the infrastructure and liquidity fees.'
-            )}
-          </p>
-        </>
+        <p className="mb-1">{t('Fees to be paid by the taker.')}</p>
+      )}
+      {role === '-' && (
+        <p className="mb-1">
+          {t(
+            'If the market is in monitoring auction, half of the infrastructure and liquidity fees will be paid.'
+          )}
+        </p>
      )}
      <dl className="grid grid-cols-2 gap-x-1">
        <dt className="col-span-1">{t('Infrastructure fee')}</dt>
@@ -316,7 +324,7 @@ const FeesBreakdownTooltip = ({
 };

 export const getFeesBreakdown = (
-  role: string,
+  role: Role,
  feesObj: {
    __typename?: 'TradeFee' | undefined;
    makerFee: string;
@@ -328,6 +336,7 @@ export const getFeesBreakdown = (
    role === MAKER
      ? new BigNumber(feesObj.makerFee).times(-1).toString()
      : feesObj.makerFee;
+
  const infrastructureFee = feesObj.infrastructureFee;
  const liquidityFee = feesObj.liquidityFee;

@@ -1,5 +1,5 @@
 {
  "name": "@vegaprotocol/i18n",
-  "version": "0.0.1",
+  "version": "0.0.2",
  "type": "commonjs"
 }
@@ -6,6 +6,7 @@
    "build": {
      "executor": "@nrwl/js:tsc",
      "outputs": ["{options.outputPath}"],
+      "format": ["esm", "cjs"],
      "options": {
        "outputPath": "dist/libs/i18n",
        "main": "libs/i18n/src/index.ts",
@@ -1,4 +1,4 @@
 {
  "name": "@vegaprotocol/react-helpers",
-  "version": "0.2.1"
+  "version": "0.2.2"
 }
@@ -1,24 +1,18 @@
 import { useRef } from 'react';
-import { BrowserTracing } from '@sentry/tracing';
-import * as Sentry from '@sentry/browser';
 import type { LocalLogger, LoggerConf } from '@vegaprotocol/utils';
-import { localLoggerFactory } from '@vegaprotocol/utils';
+import { localLoggerFactory, SentryInit } from '@vegaprotocol/utils';

-interface Props extends LoggerConf {
+export interface LoggerProps extends LoggerConf {
  dsn?: string;
+  env?: string;
 }

-export const useLogger = ({ dsn, ...props }: Props) => {
+export const useLogger = ({ dsn, env, ...props }: LoggerProps) => {
  const logger = useRef<LocalLogger | null>(null);
  if (!logger.current) {
    logger.current = localLoggerFactory(props);
    if (dsn) {
-      Sentry.init({
-        dsn,
-        integrations: [new BrowserTracing()],
-        tracesSampleRate: 1,
-        defaultIntegrations: false,
-      });
+      SentryInit(dsn, env);
    }
  }
  return logger.current;
@@ -1,4 +1,4 @@
 {
  "name": "@vegaprotocol/types",
-  "version": "0.0.1"
+  "version": "0.0.2"
 }
@@ -15,6 +15,7 @@
        "external": ["react/jsx-runtime"],
        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
        "compiler": "babel",
+        "format": ["esm", "cjs"],
        "assets": [
          {
            "glob": "libs/types/README.md",
@@ -796,6 +796,67 @@ export type ETHAddress = {
  address?: Maybe<Scalars['String']>;
 };

+/** List of all entities created by transaction hash */
+export type Entities = {
+  __typename?: 'Entities';
+  /** List of accounts created by the transaction hash */
+  accounts?: Maybe<Array<Maybe<AccountEvent>>>;
+  /** List of assets created by the transaction hash */
+  assets?: Maybe<Array<Maybe<Asset>>>;
+  /** List of balance changes created by the transaction hash */
+  balanceChanges?: Maybe<Array<Maybe<AccountBalance>>>;
+  /** List of delegations created by the transaction hash */
+  delegations?: Maybe<Array<Maybe<Delegation>>>;
+  /** List of deposits created by the transaction hash */
+  deposits?: Maybe<Array<Maybe<Deposit>>>;
+  /** List of ERC-20 multisig signer added bundles created by the transaction hash */
+  erc20MultiSigSignerAddedBundles?: Maybe<Array<Maybe<ERC20MultiSigSignerAddedBundle>>>;
+  /** List of ERC-20 multisig signer removed bundles created by the transaction hash */
+  erc20MultiSigSignerRemovedBundles?: Maybe<Array<Maybe<ERC20MultiSigSignerRemovedBundle>>>;
+  /** List of ethereum key rotations created by the transaction hash */
+  ethereumKeyRotations?: Maybe<Array<Maybe<EthereumKeyRotation>>>;
+  /** List of key rotations created by the transaction hash */
+  keyRotations?: Maybe<Array<Maybe<KeyRotation>>>;
+  /** List of ledger entries created by the transaction hash */
+  ledgerEntries?: Maybe<Array<Maybe<LedgerEntry>>>;
+  /** List of liquidity provisions created by the transaction hash */
+  liquidityProvisions?: Maybe<Array<Maybe<LiquidityProvision>>>;
+  /** List of margin levels created by the transaction hash */
+  marginLevels?: Maybe<Array<Maybe<MarginLevels>>>;
+  /** List of markets created by the transaction hash */
+  markets?: Maybe<Array<Maybe<Market>>>;
+  /** List of network parameters created by the transaction hash */
+  networkParameters?: Maybe<Array<Maybe<NetworkParameter>>>;
+  /** List of node signatures created by the transaction hash */
+  nodeSignatures?: Maybe<Array<Maybe<NodeSignature>>>;
+  /** List of nodes created by the transaction hash */
+  nodes?: Maybe<Array<Maybe<NodeBasic>>>;
+  /** List of oracle data created by the transaction hash */
+  oracleData?: Maybe<Array<Maybe<OracleData>>>;
+  /** List of oracle specs created by the transaction hash */
+  oracleSpecs?: Maybe<Array<Maybe<OracleSpec>>>;
+  /** List of orders created by the transaction hash */
+  orders?: Maybe<Array<Maybe<Order>>>;
+  /** List of parties created by the transaction hash */
+  parties?: Maybe<Array<Maybe<Party>>>;
+  /** List of positions created by the transaction hash */
+  positions?: Maybe<Array<Maybe<Position>>>;
+  /** List of proposals created by the transaction hash */
+  proposals?: Maybe<Array<Maybe<ProposalDetail>>>;
+  /** List of protocol upgrade proposals created by the transaction hash */
+  protocolUpgradeProposals?: Maybe<Array<Maybe<ProtocolUpgradeProposal>>>;
+  /** List of rewards created by the transaction hash */
+  rewards?: Maybe<Array<Maybe<Reward>>>;
+  /** List of trades created by the transaction hash */
+  trades?: Maybe<Array<Maybe<Trade>>>;
+  /** List of transfers created by the transaction hash */
+  transfers?: Maybe<Array<Maybe<Transfer>>>;
+  /** List of votes created by the transaction hash */
+  votes?: Maybe<Array<Maybe<Vote>>>;
+  /** List of withdrawals created by the transaction hash */
+  withdrawals?: Maybe<Array<Maybe<Withdrawal>>>;
+};
+
 /** Epoch describes a specific period of time in the Vega network */
 export type Epoch = {
  __typename?: 'Epoch';
@@ -988,6 +1049,15 @@ export type ExternalDataSourceSpec = {
  spec: DataSourceSpec;
 };

+/** An estimate of the fee to be paid for the order */
+export type FeeEstimate = {
+  __typename?: 'FeeEstimate';
+  /** The estimated fees if the order was to trade */
+  fees: TradeFee;
+  /** The total estimated amount of fees if the order was to trade */
+  totalFeeAmount: Scalars['String'];
+};
+
 /** The factors applied to calculate the fees */
 export type FeeFactors = {
  __typename?: 'FeeFactors';
@@ -1178,6 +1248,26 @@ export type LedgerEntryFilter = {
  TransferTypes?: InputMaybe<Array<InputMaybe<TransferType>>>;
 };

+/** Liquidation estimate for both worst and best case possible */
+export type LiquidationEstimate = {
+  __typename?: 'LiquidationEstimate';
+  /** Liquidation price estimate assuming no slippage */
+  bestCase: LiquidationPrice;
+  /** Liquidation price estimate assuming slippage cap is applied */
+  worstCase: LiquidationPrice;
+};
+
+/** Liquidation price estimate for either only the current open volume and position given some or all buy orders get filled, or position given some or all sell orders get filled */
+export type LiquidationPrice = {
+  __typename?: 'LiquidationPrice';
+  /** Liquidation price assuming buy orders start getting filled */
+  including_buy_orders: Scalars['String'];
+  /** Liquidation price assuming sell orders start getting filled */
+  including_sell_orders: Scalars['String'];
+  /** Liquidation price for current open volume ignoring any active orders */
+  open_volume_only: Scalars['String'];
+};
+
 /** Configuration of a market liquidity monitoring parameters */
 export type LiquidityMonitoringParameters = {
  __typename?: 'LiquidityMonitoringParameters';
@@ -1367,6 +1457,15 @@ export type MarginEdge = {
  node: MarginLevels;
 };

+/** Margin level estimate for both worst and best case possible */
+export type MarginEstimate = {
+  __typename?: 'MarginEstimate';
+  /** Margin level estimate assuming no slippage */
+  bestCase: MarginLevels;
+  /** Margin level estimate assuming slippage cap is applied */
+  worstCase: MarginLevels;
+};
+
 /** Margins for a given a party */
 export type MarginLevels = {
  __typename?: 'MarginLevels';
@@ -1377,7 +1476,7 @@ export type MarginLevels = {
   * the general account of the party for the given asset.
   */
  collateralReleaseLevel: Scalars['String'];
-  /** This is the minimum margin required for a party to place a new order on the network (unsigned integer) */
+  /** This is the minimum margin required for a party to place a new order on the network, expressed as unsigned integer */
  initialLevel: Scalars['String'];
  /** Minimal margin for the position to be maintained in the network (unsigned integer) */
  maintenanceLevel: Scalars['String'];
@@ -1385,7 +1484,7 @@ export type MarginLevels = {
  market: Market;
  /** The party for this margin */
  party: Party;
-  /** If the margin is between maintenance and search, the network will initiate a collateral search (unsigned integer) */
+  /** If the margin is between maintenance and search, the network will initiate a collateral search, expressed as unsigned integer */
  searchLevel: Scalars['String'];
  /** RFC3339Nano time from at which this margin level was relevant */
  timestamp: Scalars['Timestamp'];
@@ -1483,6 +1582,7 @@ export type Market = {
  state: MarketState;
  /** An instance of, or reference to, a tradable instrument. */
  tradableInstrument: TradableInstrument;
+  /** @deprecated Simplify and consolidate trades query and remove nesting. Use trades query instead */
  tradesConnection?: Maybe<TradeConnection>;
  /** Current mode of execution of the market */
  tradingMode: MarketTradingMode;
@@ -1894,6 +1994,28 @@ export type NodedelegationsConnectionArgs = {
  partyId?: InputMaybe<Scalars['ID']>;
 };

+export type NodeBasic = {
+  __typename?: 'NodeBasic';
+  /** The URL of an avatar */
+  avatarUrl?: Maybe<Scalars['String']>;
+  /** Ethereum public key of the node */
+  ethereumAddress: Scalars['String'];
+  /** The node URL, for example n01.vega.xyz */
+  id: Scalars['ID'];
+  /** URL that provides more information about the node */
+  infoUrl: Scalars['String'];
+  /** Country code for the location of the node */
+  location: Scalars['String'];
+  /** The name of the node operator */
+  name: Scalars['String'];
+  /** Public key of the node operator */
+  pubkey: Scalars['String'];
+  /** Validator status of the node */
+  status: NodeStatus;
+  /** Tendermint public key of the node */
+  tmPubkey: Scalars['String'];
+};
+
 /** Summary of data across all nodes */
 export type NodeData = {
  __typename?: 'NodeData';
@@ -2107,18 +2229,6 @@ export type ObservableMarketDepthUpdate = {
  sequenceNumber: Scalars['String'];
 };

-export type OffsetPagination = {
-  /**
-   * Descending reverses the order of the records returned
-   * default is true, if false the results will be returned in ascending order
-   */
-  descending: Scalars['Boolean'];
-  /** Limit the number of returned records to the value specified, default is 50 */
-  limit: Scalars['Int'];
-  /** Skip the number of records specified, default is 0 */
-  skip: Scalars['Int'];
-};
-
 /** The specific details for a one-off transfer */
 export type OneOffTransfer = {
  __typename?: 'OneOffTransfer';
@@ -2213,7 +2323,10 @@ export type Order = {
  status: OrderStatus;
  /** The timeInForce of order (determines how and if it executes, and whether it persists on the book) */
  timeInForce: OrderTimeInForce;
-  /** Trades relating to this order */
+  /**
+   * Trades relating to this order
+   * @deprecated Simplify and consolidate trades query and remove nesting. Use trades query instead
+   */
  tradesConnection?: Maybe<TradeConnection>;
  /** The order type */
  type?: Maybe<OrderType>;
@@ -2279,11 +2392,28 @@ export type OrderFilter = {
  /** Date range to retrieve orders from/to. Start and end time should be expressed as an integer value of nano-seconds past the Unix epoch */
  dateRange?: InputMaybe<DateRange>;
  excludeLiquidity?: InputMaybe<Scalars['Boolean']>;
+  /**
+   * If true, only orders that are live will be returned. Orders are live if they have STATUS_ACTIVE or STATUS_PARKED
+   * as per https://github.com/vegaprotocol/specs-internal/blob/master/protocol/0024-OSTA-order_status.md
+   */
+  liveOnly?: InputMaybe<Scalars['Boolean']>;
  status?: InputMaybe<Array<OrderStatus>>;
  timeInForce?: InputMaybe<Array<OrderTimeInForce>>;
  types?: InputMaybe<Array<OrderType>>;
 };

+/** Basic description of an order */
+export type OrderInfo = {
+  /** Boolean indicating a market order */
+  isMarketOrder: Scalars['Boolean'];
+  /** Price for the order */
+  price: Scalars['String'];
+  /** Number of units remaining of the total that have not yet been bought or sold (uint64) */
+  remaining: Scalars['String'];
+  /** Whether the order is to buy or sell */
+  side: Side;
+};
+
 /** Why the order was rejected by the core node */
 export enum OrderRejectionReason {
  /** Amending the order failed */
@@ -2304,6 +2434,8 @@ export enum OrderRejectionReason {
  ORDER_ERROR_CANNOT_HAVE_GTC_AND_EXPIRYAT = 'ORDER_ERROR_CANNOT_HAVE_GTC_AND_EXPIRYAT',
  /** Cannot send FOK orders during an auction */
  ORDER_ERROR_CANNOT_SEND_FOK_ORDER_DURING_AUCTION = 'ORDER_ERROR_CANNOT_SEND_FOK_ORDER_DURING_AUCTION',
+  /** Good for Auction order received during continuous trading */
+  ORDER_ERROR_CANNOT_SEND_GFA_ORDER_DURING_CONTINUOUS_TRADING = 'ORDER_ERROR_CANNOT_SEND_GFA_ORDER_DURING_CONTINUOUS_TRADING',
  /** Good for Normal order received during an auction */
  ORDER_ERROR_CANNOT_SEND_GFN_ORDER_DURING_AN_AUCTION = 'ORDER_ERROR_CANNOT_SEND_GFN_ORDER_DURING_AN_AUCTION',
  /** Cannot send IOC orders during an auction */
@@ -2312,8 +2444,8 @@ export enum OrderRejectionReason {
  ORDER_ERROR_EDIT_NOT_ALLOWED = 'ORDER_ERROR_EDIT_NOT_ALLOWED',
  /** Attempt to amend expiry time to a value before time order was created */
  ORDER_ERROR_EXPIRYAT_BEFORE_CREATEDAT = 'ORDER_ERROR_EXPIRYAT_BEFORE_CREATEDAT',
-  /** Good for Auction order received during continuous trading */
-  ORDER_ERROR_GFA_CANNOT_SEND_ORDER_DURING_CONTINUOUS_TRADING = 'ORDER_ERROR_GFA_CANNOT_SEND_ORDER_DURING_CONTINUOUS_TRADING',
+  /** Order was submitted with an incorrect or invalid market type */
+  ORDER_ERROR_INCORRECT_MARKET_TYPE = 'ORDER_ERROR_INCORRECT_MARKET_TYPE',
  /** Insufficient balance to submit the order (no deposit made) */
  ORDER_ERROR_INSUFFICIENT_ASSET_BALANCE = 'ORDER_ERROR_INSUFFICIENT_ASSET_BALANCE',
  /** Insufficient funds to pay fees */
@@ -2360,6 +2492,10 @@ export enum OrderRejectionReason {
  ORDER_ERROR_OFFSET_MUST_BE_GREATER_THAN_ZERO = 'ORDER_ERROR_OFFSET_MUST_BE_GREATER_THAN_ZERO',
  /** Order is out of sequence */
  ORDER_ERROR_OUT_OF_SEQUENCE = 'ORDER_ERROR_OUT_OF_SEQUENCE',
+  /** A post-only order would produce an aggressive trade and thus it has been rejected */
+  ORDER_ERROR_POST_ONLY_ORDER_WOULD_TRADE = 'ORDER_ERROR_POST_ONLY_ORDER_WOULD_TRADE',
+  /** A reduce-ony order would not reduce the party's position and thus it has been rejected */
+  ORDER_ERROR_REDUCE_ONLY_ORDER_WOULD_NOT_REDUCE = 'ORDER_ERROR_REDUCE_ONLY_ORDER_WOULD_NOT_REDUCE',
  /** Unable to remove the order */
  ORDER_ERROR_REMOVAL_FAILURE = 'ORDER_ERROR_REMOVAL_FAILURE',
  /** Order cannot be filled because it would require self trading */
@@ -2368,6 +2504,8 @@ export enum OrderRejectionReason {
  ORDER_ERROR_SELL_CANNOT_REFERENCE_BEST_BID_PRICE = 'ORDER_ERROR_SELL_CANNOT_REFERENCE_BEST_BID_PRICE',
  /** Time has failed us */
  ORDER_ERROR_TIME_FAILURE = 'ORDER_ERROR_TIME_FAILURE',
+  /** Unable to submit pegged order, temporarily too many pegged orders across all markets */
+  ORDER_ERROR_TOO_MANY_PEGGED_ORDERS = 'ORDER_ERROR_TOO_MANY_PEGGED_ORDERS',
  /** Unable to amend pegged order price */
  ORDER_ERROR_UNABLE_TO_AMEND_PRICE_ON_PEGGED_ORDER = 'ORDER_ERROR_UNABLE_TO_AMEND_PRICE_ON_PEGGED_ORDER',
  /** Unable to reprice a pegged order */
@@ -2526,6 +2664,7 @@ export type Party = {
  rewardsConnection?: Maybe<RewardsConnection>;
  /** The staking information for this Party */
  stakingSummary: StakingSummary;
+  /** @deprecated Simplify and consolidate trades query and remove nesting. Use trades query instead */
  tradesConnection?: Maybe<TradeConnection>;
  /** All transfers for a public key */
  transfersConnection?: Maybe<TransferConnection>;
@@ -2754,6 +2893,15 @@ export type PositionEdge = {
  node: Position;
 };

+/** Response for the estimate of the margin level and, if available, collateral was provided in the request, liqudation price for the specified position */
+export type PositionEstimate = {
+  __typename?: 'PositionEstimate';
+  /** Liquidation price range estimate for the specified position. Only populated if available collateral was specified in the request */
+  liquidation?: Maybe<LiquidationEstimate>;
+  /** Margin level range estimate for the specified position */
+  margin: MarginEstimate;
+};
+
 export type PositionResolution = {
  __typename?: 'PositionResolution';
  /** Number of parties closed out */
@@ -2770,6 +2918,8 @@ export type PositionResolution = {
 export enum PositionStatus {
  /** The position was distressed, and had to be closed out entirely - orders were removed from the book, and the open volume was closed out by the network */
  POSITION_STATUS_CLOSED_OUT = 'POSITION_STATUS_CLOSED_OUT',
+  /** The position was distressed, but could not be closed out - orders were removed from the book, and the open volume will be closed out once there is sufficient volume on the book */
+  POSITION_STATUS_DISTRESSED = 'POSITION_STATUS_DISTRESSED',
  /** The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained */
  POSITION_STATUS_ORDERS_CLOSED = 'POSITION_STATUS_ORDERS_CLOSED',
  /** The position is either healthy, or if closed out, was closed out normally */
@@ -2923,9 +3073,9 @@ export type Proposal = {
  reference: Scalars['String'];
  /** Why the proposal was rejected by the core */
  rejectionReason?: Maybe<ProposalRejectionReason>;
-  /** Required liquidity provider equity like share majority for this proposal to succeed */
+  /** Equity-like share required for a market amendment proposal to be enacted (if not met, the proposal will not be enacted), represented as a fraction that can be converted to a percentage */
  requiredLpMajority?: Maybe<Scalars['String']>;
-  /** Required liquidity provider equity like share participation for this proposal to succeed */
+  /** The market share of LPs' equity-like share that must take part in the market amendment vote for the proposal to pass. This means the votes of LPs that have submitted more liquidity to that market, or have been LPs from the start carry more weight. If it requires 50% of a market's equity-like share for a majority, and the proposal receives only YES votes but only LPs with 49% of the equity-like share voted, the proposal will not pass */
  requiredLpParticipation?: Maybe<Scalars['String']>;
  /** Required majority for this proposal to succeed */
  requiredMajority: Scalars['String'];
@@ -2941,6 +3091,36 @@ export type Proposal = {

 export type ProposalChange = NewAsset | NewFreeform | NewMarket | UpdateAsset | UpdateMarket | UpdateNetworkParameter;

+export type ProposalDetail = {
+  __typename?: 'ProposalDetail';
+  /** RFC3339Nano time and date when the proposal reached the Vega network */
+  datetime: Scalars['Timestamp'];
+  /** Error details of the rejectionReason */
+  errorDetails?: Maybe<Scalars['String']>;
+  /** Proposal ID that is provided by Vega once proposal reaches the network */
+  id?: Maybe<Scalars['ID']>;
+  /** Party that prepared the proposal */
+  party: Party;
+  /** Rationale behind the proposal */
+  rationale: ProposalRationale;
+  /** A UUID reference to aid tracking proposals on Vega */
+  reference: Scalars['String'];
+  /** Why the proposal was rejected by the core */
+  rejectionReason?: Maybe<ProposalRejectionReason>;
+  /** Equity-like share required for a market amendment proposal to be enacted (if not met, the proposal will not be enacted), represented as a fraction that can be converted to a percentage */
+  requiredLpMajority?: Maybe<Scalars['String']>;
+  /** The market share of LPs' equity-like share that must take part in the market amendment vote for the proposal to pass. This means the votes of LPs that have submitted more liquidity to that market, or have been LPs from the start carry more weight. If it requires 50% of a market's equity-like share for a majority, and the proposal receives only YES votes but only LPs with 49% of the equity-like share voted, the proposal will not pass */
+  requiredLpParticipation?: Maybe<Scalars['String']>;
+  /** Required majority for this proposal to succeed */
+  requiredMajority: Scalars['String'];
+  /** Required participation for this proposal to succeed */
+  requiredParticipation: Scalars['String'];
+  /** State of the proposal */
+  state: ProposalState;
+  /** Terms of the proposal */
+  terms: ProposalTerms;
+};
+
 /** Edge type containing the proposals and cursor information returned by a ProposalsConnection */
 export type ProposalEdge = {
  __typename?: 'ProposalEdge';
@@ -3234,6 +3414,8 @@ export type Query = {
  deposit?: Maybe<Deposit>;
  /** Fetch all deposits */
  deposits?: Maybe<DepositsConnection>;
+  /** Fetch all entities for a given transaction hash */
+  entities: Entities;
  /** Get data for a specific epoch, if ID omitted it gets the current epoch. If the string is 'next', fetch the next epoch */
  epoch: Epoch;
  /** List reward summary per epoch by asset, market, reward type */
@@ -3249,15 +3431,17 @@ export type Query = {
  /** Find an erc20 withdrawal approval using its withdrawal ID */
  erc20WithdrawalApproval?: Maybe<Erc20WithdrawalApproval>;
  /** Return an estimation of the potential cost for a new order */
+  estimateFees: FeeEstimate;
+  /**
+   * Return an estimation of the potential cost for a new order
+   * @deprecated Use estimateFees and estimatePosition instead
+   */
  estimateOrder: OrderEstimate;
+  /** Return a margin range for the specified position and liquidation price range if available collateral is supplied */
+  estimatePosition?: Maybe<PositionEstimate>;
  /** Query for historic ethereum key rotations */
  ethereumKeyRotations: EthereumKeyRotationsConnection;
-  /**
-   * Get market data history for a specific market. If no dates are given, the latest snapshot will be returned. If only the start date is provided, all history from the given date will be provided, and if only the end date is provided, all history from the start up to and including the end date will be provided.
-   * @deprecated Use getMarketDataHistoryConnectionByID instead
-   */
-  getMarketDataHistoryByID?: Maybe<Array<Maybe<MarketData>>>;
-  /** Get market data history for a specific market. If no dates are given, the latest snapshot will be returned. If only the start date is provided all history from the given date will be provided, and if only the end date is provided, all history from the start up to and including the end date will be provided. Pagination is provided using a cursor based pagination model */
+  /** Get market data history for a specific market. If no dates are given, the latest snapshot will be returned. If only the start date is provided all history from the given date will be provided, and if only the end date is provided, all history from the start up to and including the end date will be provided. */
  getMarketDataHistoryConnectionByID?: Maybe<MarketDataConnection>;
  /** Query for historic key rotations */
  keyRotationsConnection: KeyRotationConnection;
@@ -3315,6 +3499,8 @@ export type Query = {
  protocolUpgradeStatus?: Maybe<ProtocolUpgradeStatus>;
  /** Get statistics about the Vega node */
  statistics: Statistics;
+  /** Get a list of all trades and apply any given filters to the results */
+  trades?: Maybe<TradeConnection>;
  /** Get a list of all transfers for a public key */
  transfersConnection?: Maybe<TransferConnection>;
  /** Find a withdrawal using its ID */
@@ -3364,6 +3550,12 @@ export type QuerydepositsArgs = {
 };


+/** Queries allow a caller to read data and filter data via GraphQL. */
+export type QueryentitiesArgs = {
+  txHash: Scalars['String'];
+};
+
+
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QueryepochArgs = {
  id?: InputMaybe<Scalars['ID']>;
@@ -3413,6 +3605,19 @@ export type Queryerc20WithdrawalApprovalArgs = {
 };


+/** Queries allow a caller to read data and filter data via GraphQL. */
+export type QueryestimateFeesArgs = {
+  expiration?: InputMaybe<Scalars['Timestamp']>;
+  marketId: Scalars['ID'];
+  partyId: Scalars['ID'];
+  price?: InputMaybe<Scalars['String']>;
+  side: Side;
+  size: Scalars['String'];
+  timeInForce: OrderTimeInForce;
+  type: OrderType;
+};
+
+
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QueryestimateOrderArgs = {
  expiration?: InputMaybe<Scalars['Timestamp']>;
@@ -3427,19 +3632,17 @@ export type QueryestimateOrderArgs = {


 /** Queries allow a caller to read data and filter data via GraphQL. */
-export type QueryethereumKeyRotationsArgs = {
-  nodeId?: InputMaybe<Scalars['ID']>;
+export type QueryestimatePositionArgs = {
+  collateralAvailable?: InputMaybe<Scalars['String']>;
+  marketId: Scalars['ID'];
+  openVolume: Scalars['String'];
+  orders?: InputMaybe<Array<OrderInfo>>;
 };


 /** Queries allow a caller to read data and filter data via GraphQL. */
-export type QuerygetMarketDataHistoryByIDArgs = {
-  end?: InputMaybe<Scalars['Timestamp']>;
-  first?: InputMaybe<Scalars['Int']>;
-  id: Scalars['ID'];
-  last?: InputMaybe<Scalars['Int']>;
-  skip?: InputMaybe<Scalars['Int']>;
-  start?: InputMaybe<Scalars['Timestamp']>;
+export type QueryethereumKeyRotationsArgs = {
+  nodeId?: InputMaybe<Scalars['ID']>;
 };


@@ -3600,6 +3803,14 @@ export type QueryprotocolUpgradeProposalsArgs = {
 };


+/** Queries allow a caller to read data and filter data via GraphQL. */
+export type QuerytradesArgs = {
+  dateRange?: InputMaybe<DateRange>;
+  filter?: InputMaybe<TradesFilter>;
+  pagination?: InputMaybe<Pagination>;
+};
+
+
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QuerytransfersConnectionArgs = {
  direction?: InputMaybe<TransferDirection>;
@@ -3798,7 +4009,9 @@ export enum Side {
  /** The placer of the order is aiming to buy */
  SIDE_BUY = 'SIDE_BUY',
  /** The placer of the order is aiming to sell */
-  SIDE_SELL = 'SIDE_SELL'
+  SIDE_SELL = 'SIDE_SELL',
+  /** Unspecified is only used for trades at the end of an auction, where neither party acts as the aggressor. */
+  SIDE_UNSPECIFIED = 'SIDE_UNSPECIFIED'
 }

 /** Signer is the authorized signature used for the data. */
@@ -3978,8 +4191,6 @@ export type Subscription = {
  busEvents?: Maybe<Array<BusEvent>>;
  /** Subscribe to the candles updates */
  candles: Candle;
-  /** Subscribe to delegation data */
-  delegations: Delegation;
  /** Subscribe to liquidity provisioning data */
  liquidityProvisions?: Maybe<Array<LiquidityProvisionUpdate>>;
  /** Subscribe to the margin changes */
@@ -3996,10 +4207,13 @@ export type Subscription = {
  positions: Array<PositionUpdate>;
  /** Subscribe to proposals. Leave out all arguments to receive all proposals */
  proposals: Proposal;
-  /** Subscribe to reward details data */
-  rewards: Reward;
-  /** Subscribe to the trades updates */
+  /**
+   * Subscribe to the trades updates
+   * @deprecated Use tradesStream instead as it allows for filtering multiple markets and/or parties at once
+   */
  trades?: Maybe<Array<TradeUpdate>>;
+  /** Subscribe to the trades updates */
+  tradesStream?: Maybe<Array<TradeUpdate>>;
  /** Subscribe to votes, either by proposal ID or party ID */
  votes: ProposalVote;
 };
@@ -4030,13 +4244,6 @@ export type SubscriptioncandlesArgs = {
 };


-/** Subscriptions allow a caller to receive new information as it is available from the Vega network. */
-export type SubscriptiondelegationsArgs = {
-  nodeId?: InputMaybe<Scalars['ID']>;
-  partyId?: InputMaybe<Scalars['ID']>;
-};
-
-
 /** Subscriptions allow a caller to receive new information as it is available from the Vega network. */
 export type SubscriptionliquidityProvisionsArgs = {
  marketId?: InputMaybe<Scalars['ID']>;
@@ -4089,16 +4296,15 @@ export type SubscriptionproposalsArgs = {


 /** Subscriptions allow a caller to receive new information as it is available from the Vega network. */
-export type SubscriptionrewardsArgs = {
-  assetId?: InputMaybe<Scalars['ID']>;
+export type SubscriptiontradesArgs = {
+  marketId?: InputMaybe<Scalars['ID']>;
  partyId?: InputMaybe<Scalars['ID']>;
 };


 /** Subscriptions allow a caller to receive new information as it is available from the Vega network. */
-export type SubscriptiontradesArgs = {
-  marketId?: InputMaybe<Scalars['ID']>;
-  partyId?: InputMaybe<Scalars['ID']>;
+export type SubscriptiontradesStreamArgs = {
+  filter: TradesSubscriptionFilter;
 };


@@ -4251,6 +4457,19 @@ export type TradeUpdate = {
  type: TradeType;
 };

+/** Filter to apply to the trade connection query */
+export type TradesFilter = {
+  marketIds?: InputMaybe<Array<Scalars['ID']>>;
+  orderIds?: InputMaybe<Array<Scalars['ID']>>;
+  partyIds?: InputMaybe<Array<Scalars['ID']>>;
+};
+
+/** Filter to apply to the trade subscription request */
+export type TradesSubscriptionFilter = {
+  marketIds?: InputMaybe<Array<Scalars['ID']>>;
+  partyIds?: InputMaybe<Array<Scalars['ID']>>;
+};
+
 /** The result from processing a transaction */
 export type TransactionResult = {
  __typename?: 'TransactionResult';
@@ -172,7 +172,7 @@ export const OrderRejectionReasonMapping: {
    'Cannot send IOC order during auction',
  ORDER_ERROR_EDIT_NOT_ALLOWED: 'Edit not allowed',
  ORDER_ERROR_EXPIRYAT_BEFORE_CREATEDAT: 'Expiry time before creation time',
-  ORDER_ERROR_GFA_CANNOT_SEND_ORDER_DURING_CONTINUOUS_TRADING:
+  ORDER_ERROR_CANNOT_SEND_GFA_ORDER_DURING_CONTINUOUS_TRADING:
    'Cannot send GFA order during continuous trading',
  ORDER_ERROR_INSUFFICIENT_ASSET_BALANCE: 'Insufficient asset balance',
  ORDER_ERROR_INSUFFICIENT_FUNDS_TO_PAY_FEES: 'Insufficient funds to pay fees',
@@ -209,6 +209,11 @@ export const OrderRejectionReasonMapping: {
    'Unable to amend price on pegged order',
  ORDER_ERROR_UNABLE_TO_REPRICE_PEGGED_ORDER: 'Unable to reprice pegged order',
  ORDER_ERROR_WITHOUT_REFERENCE_PRICE: 'Without reference price',
+  ORDER_ERROR_INCORRECT_MARKET_TYPE: 'Incorrect market type',
+  ORDER_ERROR_POST_ONLY_ORDER_WOULD_TRADE: 'Post only order would trade',
+  ORDER_ERROR_REDUCE_ONLY_ORDER_WOULD_NOT_REDUCE:
+    'Reduce only order would not reduce',
+  ORDER_ERROR_TOO_MANY_PEGGED_ORDERS: 'Too many pegged orders',
 };

 /**
@@ -345,6 +350,7 @@ export const SideMapping: {
 } = {
  SIDE_BUY: 'Long',
  SIDE_SELL: 'Short',
+  SIDE_UNSPECIFIED: 'Unspecified',
 };

 /**
@@ -458,6 +464,7 @@ export const PositionStatusMapping: {
  POSITION_STATUS_CLOSED_OUT: 'Closed by network',
  POSITION_STATUS_ORDERS_CLOSED: 'Maintained by network',
  POSITION_STATUS_UNSPECIFIED: 'Normal',
+  POSITION_STATUS_DISTRESSED: 'Distressed',
 };

 export const ConditionOperatorMapping: { [C in ConditionOperator]: string } = {
@@ -1,4 +1,4 @@
 {
  "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.11.1"
+  "version": "0.12.1"
 }
@@ -57,7 +57,7 @@ export const Checkbox = ({
      </CheckboxPrimitive.Root>
      <label
        htmlFor={name}
-        className={classNames('text-sm', {
+        className={classNames('text-sm flex-1', {
          'dark:text-neutral-400 text-neutral-600': disabled,
        })}
      >
@@ -62,7 +62,7 @@ export function Dialog({
    <DialogPrimitives.Root open={open} onOpenChange={(x) => onChange?.(x)}>
      <DialogPrimitives.Portal>
        <DialogPrimitives.Overlay
-          className="fixed inset-0 bg-black/50 z-20"
+          className="fixed inset-0 dark:bg-black/80 bg-black/50 z-20"
          data-testid="dialog-overlay"
        />
        <DialogPrimitives.Content
@@ -0,0 +1,41 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import className from 'classnames';
+import { Divider } from './divider';
+
+export default {
+  title: 'Divider',
+  component: Divider,
+} as ComponentMeta<typeof Divider>;
+
+const Template: ComponentStory<typeof Divider> = (args) => {
+  return (
+    <div
+      className={className('flex', {
+        'flex-col': args?.orientation !== 'vertical',
+        'h-[50px]': args?.orientation === 'vertical',
+      })}
+    >
+      <div
+        className={className(
+          'h-[50px]',
+          args?.orientation !== 'vertical' ? 'w-full' : 'w-1/2'
+        )}
+      />
+      <Divider orientation={args?.orientation} />
+      <div
+        className={className(
+          'h-[50px]',
+          args?.orientation !== 'vertical' ? 'w-full' : 'w-2/2'
+        )}
+      />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  orientation: 'vertical',
+};
@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import * as Separator from '@radix-ui/react-separator';
+
+interface DividerProps {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ orientation = 'horizontal', decorative }, ref) => {
+    return (
+      <Separator.Root
+        ref={ref}
+        className="bg-neutral-700 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px data-[orientation=vertical]:mx-3 data-[orientation=horizontal]:my-3"
+        {...{ orientation, decorative }}
+      />
+    );
+  }
+);
@@ -0,0 +1 @@
+export { Divider } from './divider';
@@ -2,13 +2,14 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
+import type { IconName } from '../icon';
 import { Icon } from '../icon';

 const itemClass = classNames(
  'relative flex items-center justify-between rounded-sm p-2 text-sm',
  'cursor-default hover:cursor-pointer',
-  'hover:bg-white dark:hover:bg-neutral-200',
-  'focus:bg-white dark:focus:bg-neutral-200',
+  'hover:bg-white dark:hover:bg-vega-dark-200',
+  'focus:bg-white dark:focus:bg-vega-dark-200',
  'select-none',
  'whitespace-nowrap'
 );
@@ -16,6 +17,11 @@ const itemClass = classNames(
 type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps & {
  trigger: ReactNode;
 };
+
+type DropdownTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps & {
+  iconName?: IconName;
+};
+
 /**
 * Contains all the parts of a dropdown menu.
 */
@@ -37,22 +43,20 @@ export const DropdownMenu = ({
 */
 export const DropdownMenuTrigger = forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-  React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>
->(({ className, children, ...props }, forwardedRef) => {
-  const triggerClasses = classNames(
-    className,
-    'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500 whitespace-nowrap',
-    'hover:bg-neutral-500/20 dark:hover:bg-neutral-500/40'
-  );
+  DropdownTriggerProps
+>(({ className, children, iconName, ...props }, forwardedRef) => {
+  const defaultClasses =
+    'text-sm py-1 px-2 rounded bg-transparent border border-vega-dark-200 whitespace-nowrap dark:hover:bg-vega-dark-500/20 hover:bg-vega-light-500/40';
+
  return (
    <DropdownMenuPrimitive.Trigger
      asChild={true}
      ref={forwardedRef}
-      className={triggerClasses}
+      className={className || defaultClasses}
      {...props}
    >
      <button>
-        {children} <Icon name="chevron-down" className="ml-2" />
+        {children} <Icon name={iconName || 'chevron-down'} />
      </button>
    </DropdownMenuPrimitive.Trigger>
  );
@@ -73,7 +77,7 @@ export const DropdownMenuContent = forwardRef<
  <DropdownMenuPrimitive.Content
    {...contentProps}
    ref={forwardedRef}
-    className="min-w-[290px] bg-neutral-200 dark:bg-white p-2 rounded z-20 dark:text-black"
+    className="min-w-[290px] bg-vega-light-100 dark:bg-vega-dark-100 p-2 rounded z-20 text-black dark:text-white border-vega-light-200 dark:border-vega-dark-200"
    align="start"
    sideOffset={10}
  />
@@ -115,9 +119,9 @@ export const DropdownMenuRadioItem = forwardRef<
  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
    inset?: boolean;
  }
->(({ className, inset = false, ...radioItemprops }, forwardedRef) => (
+>(({ className, inset = false, ...radioItemProps }, forwardedRef) => (
  <DropdownMenuPrimitive.RadioItem
-    {...radioItemprops}
+    {...radioItemProps}
    ref={forwardedRef}
    className={classNames(itemClass, className)}
  />
@@ -151,7 +155,7 @@ export const DropdownMenuSeparator = forwardRef<
    {...separatorProps}
    ref={forwardedRef}
    className={classNames(
-      'h-px my-1 mx-2 bg-neutral-400 dark:bg-neutral-300',
+      'h-px my-1 mx-2 bg-vega-dark-400 dark:bg-vega-dark-300',
      className
    )}
  />
@@ -0,0 +1 @@
+export * from './icon';
@@ -1 +1,2 @@
-export * from './icon';
+export * from './blueprint-icons';
+export * from './vega-icons';
@@ -0,0 +1,3 @@
+export * from './vega-icon';
+export * from './vega-icon.stories';
+export * from './vega-icon-record';
@@ -0,0 +1,29 @@
+export const IconBreakdown = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="8" cy="8" r="6.5" stroke="stroke-current" />
+      <rect
+        x="8.5"
+        y="11"
+        width="1"
+        height="4"
+        transform="rotate(-180 8.5 11)"
+        fill="white"
+      />
+      <rect
+        x="8.5"
+        y="6"
+        width="1"
+        height="1"
+        transform="rotate(-180 8.5 6)"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconCopy = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4.47021 1.46997H14.5302V11.53H12.5002V10.47H13.4702V2.52997H5.53021V3.49997H4.47021V1.46997ZM1.47021 4.46997H11.5302V14.53H1.47021V4.46997ZM2.53021 5.52997V13.47H10.4702V5.52997H2.53021Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,17 @@
+export const IconDeposit = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="13" width="8" height="1" fill="white" />
+      <path
+        d="M8.52977 8.72048L11.625 5.62524L12.3745 6.37478L7.99977 10.7495L3.625 6.37478L4.37453 5.62524L7.46977 8.72048V2H8.52977V8.72048Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconEdit = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.31 10.44L1.5 14.5L5.56 13.69L14.5 4.75L11.25 1.5V1.51L9.97784 2.78074L9.97356 2.77646L9.26645 3.48357L9.27033 3.48745L2.31 10.44ZM11.25 2.92L13.08 4.75L12.5135 5.31645L10.6835 3.48645L11.25 2.92ZM9.97644 4.19356L11.8064 6.02356L6.02355 11.8064L4.19355 9.97645L9.97644 4.19356ZM5.31644 12.5136L5.07 12.76L2.78 13.22L3.24 10.93L3.48644 10.6836L5.31644 12.5136Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconForum = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.20755 15.7736H6V4H8.20755V15.7736ZM10.4151 17.8585V15.7736H8.20755V17.9811H10.4151V20.066H12.6226V17.9811H14.8302V15.7736H12.6226V17.8585H10.4151ZM16.7925 13.566H14.5849V4H16.7925V13.566ZM16.7925 13.566H19V15.7736H16.7925V13.566Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconGlobe = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.9946 3C10.2165 3.00106 8.47842 3.52883 6.99987 4.51677C5.51983 5.5057 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12C21 9.61305 20.0518 7.32386 18.364 5.63604C16.6761 3.94821 14.3869 3 12 3C12.0001 3 11.9999 3 12 3M11.9959 3.936C11.9972 3.936 11.9985 3.936 11.9999 3.936C13.2976 3.93617 14.3772 5.83592 14.9515 8.22998H9.04712C9.62068 5.83664 10.6991 3.93971 11.9959 3.936ZM9.8073 4.24157C9.05208 5.16925 8.44481 6.56185 8.07534 8.22998H4.87438C5.24741 7.52551 5.72602 6.87397 6.3 6.3C7.28288 5.31711 8.49319 4.61388 9.8073 4.24157ZM4.42885 9.22998C4.10667 10.1091 3.93685 11.0458 3.936 12C3.936 12.9499 4.10378 13.8872 4.42669 14.77H7.88922C7.75324 13.8973 7.67969 12.9663 7.67969 12C7.67969 11.0336 7.7527 10.1027 7.8879 9.22998H4.42885ZM4.87153 15.77C5.00006 16.013 5.14133 16.2501 5.29503 16.4801C6.18112 17.8062 7.44054 18.8398 8.91404 19.4502C9.20977 19.5727 9.51146 19.677 9.81744 19.763C9.06048 18.8354 8.44956 17.4409 8.07765 15.77H4.87153ZM14.1834 19.7628C15.5101 19.3896 16.7227 18.6815 17.7021 17.7021C18.2744 17.1298 18.7541 16.4778 19.1285 15.77H15.9224C15.5508 17.4416 14.9402 18.8355 14.1834 19.7628ZM19.5733 14.77C19.7153 14.3819 19.8278 13.9819 19.9091 13.5732C20.1981 12.12 20.0808 10.6174 19.5733 9.22998H16.1106C16.2463 10.1024 16.3197 11.0333 16.3197 12C16.3197 12.9667 16.2463 13.8976 16.1106 14.77H19.5733ZM19.1285 8.22998C18.5047 7.05058 17.596 6.04063 16.4801 5.29503C15.7711 4.82129 14.9955 4.46564 14.1834 4.23723C14.9402 5.16453 15.5508 6.55844 15.9224 8.22998H19.1285ZM8.60129 12C8.60129 11.0806 8.68603 10.1352 8.84194 9.22998H15.1569C15.3132 10.1358 15.3981 11.0814 15.3981 12C15.3981 12.9186 15.314 13.8642 15.1588 14.77H8.84003C8.68519 13.8648 8.60129 12.9194 8.60129 12ZM11.9997 20.064C10.6916 20.064 9.61486 18.1657 9.04394 15.77H14.9547C14.3836 18.1642 13.3072 20.064 11.9997 20.064Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,16 @@
+export const IconLinkedIn = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 4.32353V19.6765C21 20.0275 20.8606 20.3641 20.6123 20.6123C20.3641 20.8606 20.0275 21 19.6765 21H4.32353C3.97251 21 3.63586 20.8606 3.38765 20.6123C3.13944 20.3641 3 20.0275 3 19.6765V4.32353C3 3.97251 3.13944 3.63586 3.38765 3.38765C3.63586 3.13944 3.97251 3 4.32353 3H19.6765C20.0275 3 20.3641 3.13944 20.6123 3.38765C20.8606 3.63586 21 3.97251 21 4.32353V4.32353ZM8.29412 9.88235H5.64706V18.3529H8.29412V9.88235ZM8.53235 6.97059C8.53375 6.77036 8.49569 6.57182 8.42035 6.3863C8.34502 6.20078 8.23387 6.03191 8.09328 5.88935C7.95268 5.74678 7.78537 5.6333 7.60091 5.5554C7.41646 5.47749 7.21846 5.43668 7.01824 5.43529H6.97059C6.5634 5.43529 6.1729 5.59705 5.88497 5.88497C5.59705 6.1729 5.43529 6.5634 5.43529 6.97059C5.43529 7.37777 5.59705 7.76828 5.88497 8.05621C6.1729 8.34413 6.5634 8.50588 6.97059 8.50588V8.50588C7.17083 8.51081 7.37008 8.47623 7.55696 8.40413C7.74383 8.33202 7.91467 8.2238 8.0597 8.08565C8.20474 7.94749 8.32113 7.78212 8.40223 7.59897C8.48333 7.41582 8.52755 7.21848 8.53235 7.01824V6.97059ZM18.3529 13.2071C18.3529 10.6606 16.7329 9.67059 15.1235 9.67059C14.5966 9.6442 14.0719 9.75644 13.6019 9.9961C13.1318 10.2358 12.7328 10.5945 12.4447 11.0365H12.3706V9.88235H9.88235V18.3529H12.5294V13.8476C12.4911 13.3862 12.6365 12.9283 12.9339 12.5735C13.2313 12.2186 13.6567 11.9954 14.1176 11.9524H14.2182C15.06 11.9524 15.6847 12.4818 15.6847 13.8159V18.3529H18.3318L18.3529 13.2071Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,23 @@
+export const IconMoon = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 1C4.13 1 1 4.13 1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1ZM8.66 12.44H7.32V11.1H8.66V12.44ZM10.38 6.78C10.29 7.01 10.18 7.2 10.05 7.36C9.92 7.52 9.75 7.7 9.53 7.91C9.3 8.14 9.11 8.34 8.98 8.51C8.85 8.68 8.73 8.89 8.64 9.14C8.55 9.37 8.51 9.65 8.51 9.96V10.04V10.13H7.3V10.04C7.3 9.61 7.36 9.24 7.47 8.92C7.58 8.61 7.71 8.34 7.87 8.13C8.03 7.92 8.22 7.69 8.47 7.43C8.75 7.13 8.96 6.87 9.09 6.66C9.22 6.46 9.28 6.2 9.28 5.88C9.28 5.47 9.16 5.16 8.93 4.93C8.7 4.7 8.38 4.58 7.96 4.58C7.6 4.58 7.28 4.68 7.01 4.89C6.75 5.09 6.56 5.44 6.45 5.96C6.34 6.48 6.43 6.06 6.43 6.06L5.26 5.62L5.28 5.54C5.47 4.87 5.81 4.35 6.29 4.02C6.77 3.69 7.34 3.53 8 3.53C8.75 3.53 9.37 3.75 9.82 4.18C10.28 4.62 10.5 5.22 10.5 5.97C10.5 6.27 10.46 6.53 10.37 6.76L10.38 6.78Z"
+        fill="white"
+      />
+      <circle cx="8" cy="8" r="7" fill="white" />
+      <path
+        d="M6.15393 5.69232C6.15393 5.10304 6.24054 4.5075 6.46161 4C4.99179 4.63982 4 6.14089 4 7.84607C4 10.1402 5.85982 12 8.15393 12C9.85911 12 11.3602 11.0082 12 9.53839C11.4925 9.75946 10.8964 9.84607 10.3077 9.84607C8.01357 9.84607 6.15393 7.98643 6.15393 5.69232Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,16 @@
+export const IconOpenExternal = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.9605 4.28998H3.76002V3.22998H12.77V12.24H11.71V5.03952L4.13479 12.6148L3.38525 11.8652L10.9605 4.28998Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconQuestionMark = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 1C4.13 1 1 4.13 1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1ZM8.66 12.44H7.32V11.1H8.66V12.44ZM10.38 6.78C10.29 7.01 10.18 7.2 10.05 7.36C9.92 7.52 9.75 7.7 9.53 7.91C9.3 8.14 9.11 8.34 8.98 8.51C8.85 8.68 8.73 8.89 8.64 9.14C8.55 9.37 8.51 9.65 8.51 9.96V10.04V10.13H7.3V10.04C7.3 9.61 7.36 9.24 7.47 8.92C7.58 8.61 7.71 8.34 7.87 8.13C8.03 7.92 8.22 7.69 8.47 7.43C8.75 7.13 8.96 6.87 9.09 6.66C9.22 6.46 9.28 6.2 9.28 5.88C9.28 5.47 9.16 5.16 8.93 4.93C8.7 4.7 8.38 4.58 7.96 4.58C7.6 4.58 7.28 4.68 7.01 4.89C6.75 5.09 6.56 5.44 6.45 5.96L6.43 6.06L5.26 5.62L5.28 5.54C5.47 4.87 5.81 4.35 6.29 4.02C6.77 3.69 7.34 3.53 8 3.53C8.75 3.53 9.37 3.75 9.82 4.18C10.28 4.62 10.5 5.22 10.5 5.97C10.5 6.27 10.46 6.53 10.37 6.76L10.38 6.78Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,20 @@
+export const IconTransfer = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.27952 5.90477L5.37476 8L4.62522 8.74953L1.25046 5.37477L4.62522 2L5.37476 2.74953L3.27952 4.84477L9 4.84477L9 5.90477L3.27952 5.90477Z"
+        fill="white"
+      />
+      <path
+        d="M12.7205 10.0952L10.6252 8L11.3748 7.25047L14.7495 10.6252L11.3748 14L10.6252 13.2505L12.7205 11.1552L7 11.1552L7 10.0952L12.7205 10.0952Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,16 @@
+export const IconTwitter = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.28743 20.2575C15.8423 20.2575 19.9641 14 19.9641 8.58084C19.9641 8.4012 19.9641 8.22156 19.9541 8.0519C20.7525 7.47305 21.4511 6.74451 22 5.92615C21.2615 6.25549 20.4731 6.47505 19.6447 6.57485C20.493 6.06587 21.1417 5.26747 21.4511 4.2994C20.6627 4.76846 19.7844 5.10778 18.8463 5.29741C18.0978 4.499 17.0299 4 15.8523 4C13.5868 4 11.7505 5.83633 11.7505 8.1018C11.7505 8.42116 11.7904 8.74052 11.8603 9.03992C8.43713 8.86028 5.40319 7.22355 3.38723 4.7485C3.02794 5.34731 2.82834 6.05589 2.82834 6.80439C2.82834 8.23154 3.55689 9.48902 4.65469 10.2176C3.97605 10.2076 3.34731 10.018 2.7984 9.70858C2.7984 9.72854 2.7984 9.73852 2.7984 9.75848C2.7984 11.7445 4.21557 13.4112 6.09182 13.7804C5.74251 13.8703 5.38323 13.9202 5.01397 13.9202C4.75449 13.9202 4.49501 13.8902 4.24551 13.8503C4.76447 15.477 6.28144 16.6647 8.07784 16.7046C6.67066 17.8024 4.90419 18.4611 2.97804 18.4611C2.6487 18.4611 2.31936 18.4411 2 18.4012C3.80639 19.5788 5.96208 20.2575 8.28743 20.2575Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,17 @@
+export const IconWithdraw = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.47023 4.0291L4.375 7.12433L3.62547 6.37479L8.00023 2.00003L12.375 6.3748L11.6255 7.12433L8.53023 4.0291L8.53023 10.7496L7.47023 10.7496L7.47023 4.0291Z"
+        fill="white"
+      />
+      <rect x="4" y="13" width="8" height="1" fill="white" />
+    </svg>
+  );
+};
@@ -0,0 +1,48 @@
+import { IconBreakdown } from './svg-icons/icon-breakdown';
+import { IconCopy } from './svg-icons/icon-copy';
+import { IconDeposit } from './svg-icons/icon-deposit';
+import { IconWithdraw } from './svg-icons/icon-withdraw';
+import { IconTransfer } from './svg-icons/icon-transfer';
+import { IconEdit } from './svg-icons/icon-edit';
+import { IconMoon } from './svg-icons/icon-moon';
+import { IconGlobe } from './svg-icons/icon-globe';
+import { IconLinkedIn } from './svg-icons/icon-linkedin';
+import { IconTwitter } from './svg-icons/icon-twitter';
+import { IconQuestionMark } from './svg-icons/icon-question-mark';
+import { IconForum } from './svg-icons/icon-forum';
+import { IconOpenExternal } from './svg-icons/icon-open-external';
+
+export enum VegaIconNames {
+  BREAKDOWN = 'breakdown',
+  COPY = 'copy',
+  DEPOSIT = 'deposit',
+  WITHDRAW = 'withdraw',
+  EDIT = 'edit',
+  TRANSFER = 'transfer',
+  FORUM = 'forum',
+  GLOBE = 'globe',
+  LINKEDIN = 'linkedin',
+  TWITTER = 'twitter',
+  MOON = 'moon',
+  OPEN_EXTERNAL = 'open-external',
+  QUESTION_MARK = 'question-mark',
+}
+
+export const VegaIconNameMap: Record<
+  VegaIconNames,
+  ({ size }: { size: number }) => JSX.Element
+> = {
+  breakdown: IconBreakdown,
+  copy: IconCopy,
+  deposit: IconDeposit,
+  withdraw: IconWithdraw,
+  transfer: IconTransfer,
+  edit: IconEdit,
+  moon: IconMoon,
+  globe: IconGlobe,
+  linkedin: IconLinkedIn,
+  twitter: IconTwitter,
+  'question-mark': IconQuestionMark,
+  forum: IconForum,
+  'open-external': IconOpenExternal,
+};
@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import { VegaIcon } from './vega-icon';
+import { VegaIconNames } from './vega-icon-record';
+
+describe('VegaIcon', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<VegaIcon name={VegaIconNames.TWITTER} />);
+    expect(baseElement).toBeTruthy();
+  });
+});
@@ -0,0 +1,28 @@
+import type { Story, Meta } from '@storybook/react';
+import type { VegaIconProps } from './vega-icon';
+import { VegaIcon } from './vega-icon';
+import { VegaIconNames } from './vega-icon-record';
+
+export default {
+  component: VegaIcon,
+  title: 'VegaIcon',
+} as Meta;
+
+const Template: Story<VegaIconProps> = (args) => <VegaIcon {...args} />;
+
+export const Small = Template.bind({});
+Small.args = {
+  name: VegaIconNames.BREAKDOWN,
+};
+
+export const Bigger = Template.bind({});
+Bigger.args = {
+  name: VegaIconNames.DEPOSIT,
+  size: 24,
+};
+
+export const EvenBigger = Template.bind({});
+EvenBigger.args = {
+  name: VegaIconNames.GLOBE,
+  size: 32,
+};
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+import type { VegaIconNames } from './vega-icon-record';
+import { VegaIconNameMap } from './vega-icon-record';
+
+export interface VegaIconProps {
+  name: VegaIconNames;
+  size?: 16 | 24 | 32;
+}
+
+export const VegaIcon = ({ size = 16, name }: VegaIconProps) => {
+  const effectiveClassName = classNames(
+    'inline-block',
+    'align-text-bottom',
+    'pr-1',
+    'stroke-current'
+  );
+  const Element = VegaIconNameMap[name];
+  return (
+    <span className={effectiveClassName}>
+      <Element size={size} />
+    </span>
+  );
+};
@@ -9,6 +9,7 @@ export * from './callout';
 export * from './checkbox';
 export * from './copy-with-tooltip';
 export * from './dialog';
+export * from './divider';
 export * from './drawer';
 export * from './dropdown-menu';
 export * from './form-group';
@@ -37,6 +38,7 @@ export * from './simple-grid';
 export * from './slider';
 export * from './sparkline';
 export * from './splash';
+export * from './switch';
 export * from './syntax-highlighter';
 export * from './tabs';
 export * from './text-area';
@@ -0,0 +1 @@
+export { Switch } from './switch';
@@ -0,0 +1,31 @@
+import type { Story, ComponentMeta } from '@storybook/react';
+import type { SwitchProps } from './switch';
+import { Switch } from './switch';
+import { useState } from 'react';
+
+export default {
+  component: Switch,
+  title: 'Switch',
+} as ComponentMeta<typeof Switch>;
+
+const Template: Story<SwitchProps> = (args) => {
+  const [checked, setChecked] = useState(args.checked || false);
+  return (
+    <Switch
+      {...args}
+      checked={checked}
+      onCheckedChange={(checked) => setChecked(checked)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'switch',
+};
+
+export const WithTextLabel = Template.bind({});
+WithTextLabel.args = {
+  name: 'switch',
+  labelText: 'Light mode',
+};
@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+import * as RootSwitch from '@radix-ui/react-switch';
+
+export interface SwitchProps {
+  name?: string;
+  onCheckedChange?: (checked: boolean) => void;
+  checked?: boolean;
+  disabled?: boolean;
+  labelText?: ReactNode | string;
+}
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    { name = 'switch', labelText, onCheckedChange, checked = false, disabled },
+    ref
+  ) => {
+    return (
+      <div className="flex items-center justify-start">
+        <RootSwitch.Root
+          className="w-[41px] h-[18px] rounded bg-vega-light-200 dark:bg-neutral-700 rounded-full relative data-[state=checked]:bg-vega-light-200 dark:data-[state=checked]:bg-neutral-700 outline-none cursor-default"
+          id={`switch-${name}`}
+          onCheckedChange={onCheckedChange}
+          checked={checked}
+          disabled={disabled}
+          ref={ref}
+        >
+          <RootSwitch.Thumb className="block w-[18px] h-[18px] bg-black dark:bg-white rounded-full transition-transform duration-100 translate-x-0.3 will-change-transform data-[state=checked]:translate-x-[23px]" />
+        </RootSwitch.Root>
+        {labelText && (
+          <label htmlFor={`switch-${name}`} className="ml-2">
+            {labelText}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
@@ -17,6 +17,7 @@ export const ThemeSwitcher = ({
      onClick={() => setTheme()}
      className={className}
      data-testid="theme-switcher"
+      id="theme-switcher"
    >
      {theme === 'dark' && <SunIcon />}
      {theme === 'light' && <MoonIcon />}
@@ -17,3 +17,4 @@ export * from './lib/remove-0x';
 export * from './lib/remove-pagination-wrapper';
 export * from './lib/time';
 export * from './lib/validate';
+export * from './lib/sentry-utils';
@@ -0,0 +1,26 @@
+import * as Sentry from '@sentry/nextjs';
+import { SentryInit, SentryClose } from './sentry-utils';
+
+jest.mock('@sentry/nextjs');
+
+describe('Sentry utlis', () => {
+  describe('SentryInit', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should initialize', () => {
+      SentryInit('sentry.dsn');
+      expect(Sentry.init).toHaveBeenCalled();
+    });
+    it('should do nothing', () => {
+      SentryInit('');
+      expect(Sentry.init).not.toHaveBeenCalled();
+    });
+
+    it('should close', () => {
+      SentryClose();
+      expect(Sentry.close).toHaveBeenCalled();
+    });
+  });
+});
@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/nextjs';
+import { BrowserTracing } from '@sentry/tracing';
+
+export const SentryInit = (dsn: string, env?: string) => {
+  if (dsn) {
+    Sentry.init({
+      dsn,
+      integrations: [new BrowserTracing()],
+      tracesSampleRate: 1,
+      environment: env || '',
+    });
+  }
+};
+
+export const SentryClose = () => Sentry.close();
@@ -1,3 +1,4 @@
+import type { LoggerProps } from '@vegaprotocol/react-helpers';
 import { useLocalStorage, useLogger } from '@vegaprotocol/react-helpers';
 import type { Web3ReactHooks } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
@@ -8,12 +9,12 @@ import { useWeb3ConnectStore } from './web3-connect-store';

 export const ETHEREUM_EAGER_CONNECT = 'ethereum-eager-connect';

-export const useEagerConnect = (sentryDsn?: string) => {
+export const useEagerConnect = (loggerConf: LoggerProps) => {
  const connectors = useWeb3ConnectStore((store) => store.connectors);
  const [eagerConnector] = useLocalStorage(ETHEREUM_EAGER_CONNECT);
  const attemptedRef = useRef(false);

-  const logger = useLogger({ dsn: sentryDsn });
+  const logger = useLogger(loggerConf);

  useEffect(() => {
    if (attemptedRef.current || 'Cypress' in window) return;
@@ -31,7 +31,9 @@
    "@radix-ui/react-popover": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.1",
    "@radix-ui/react-select": "^1.2.0",
+    "@radix-ui/react-separator": "^1.0.2",
    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-switch": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.3",
    "@sentry/nextjs": "^6.19.3",
@@ -202,6 +204,8 @@
    "*.{ts,tsx,js,jsx}": "yarn eslint --fix"
  },
  "resolutions": {
-    "graphql": "15.8.0"
+    "graphql": "15.8.0",
+    "//": "workaround storybook issue: https://github.com/storybookjs/storybook/issues/21642",
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  }
 }
@@ -4609,6 +4609,14 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-slot" "1.0.1"

+"@radix-ui/react-primitive@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
+  integrity sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/react-radio-group@^1.1.1":
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.1.1.tgz#564549b3e0a5905367dfe9adfe7b0e245cbdb640"
@@ -4670,6 +4678,14 @@
    aria-hidden "^1.1.1"
    react-remove-scroll "2.5.5"

+"@radix-ui/react-separator@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.2.tgz#52417c8bfae1e4ef87356b2f7bffbc3dbbeddf23"
+  integrity sha512-lZoAG/rS2jzb/OSvyBrpN3dmikw20ewmWx1GkM1VldbDyD0DACCbH9LIXSrqyS/2mE1VYKOHmyq5W90Dx4ryqA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.2"
+
 "@radix-ui/react-slider@^1.1.0":
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.0.tgz#b3fdaca27619150e9e6067ad9f979a4535f68d5e"
@@ -4696,6 +4712,20 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.0"

+"@radix-ui/react-switch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.2.tgz#e3d1b9fe18b6b1173aadc8b8e6efdc96a28a70f8"
+  integrity sha512-BcG/LKehxt36NXG0wPnoCitIfSMtU9Xo7BmythYA1PAMLtsMvW7kALfBzmduQoHTWcKr0AVcFyh0gChBUp9TiQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+
 "@radix-ui/react-tabs@^1.0.2":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz#8f5ec73ca41b151a413bdd6e00553408ff34ce07"
@@ -6266,17 +6296,17 @@
    unfetch "^4.2.0"
    util-deprecate "^1.0.2"

-"@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0":
-  version "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0"
-  resolved "https://registry.yarnpkg.com/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0.tgz#3103532ff494fb7dc3cf835f10740ecf6a26c0f9"
-  integrity sha512-eVg3BxlOm2P+chijHBTByr90IZVUtgRW56qEOLX7xlww2NBuKrcavBlcmn+HH7GIUktquWkMPtvy6e0W0NgA5w==
+"@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", "@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.cd77847.0":
+  version "1.0.6--canary.9.cd77847.0"
+  resolved "https://registry.yarnpkg.com/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.6--canary.9.cd77847.0.tgz#35beed1bd0813569fc8852b372c92069fe74a448"
+  integrity sha512-I4oBYmnUCX5IsrZhg+ST72dubSIV4wdwY+SfqJiJ3NHvDpdb240ZjdHAmjIy/yJh5rh42Fl4jbG8Tr4SzwV53Q==
  dependencies:
    debug "^4.1.1"
    endent "^2.0.1"
    find-cache-dir "^3.3.1"
    flat-cache "^3.0.4"
    micromatch "^4.0.2"
-    react-docgen-typescript "^2.1.1"
+    react-docgen-typescript "^2.2.2"
    tslib "^2.0.0"

 "@storybook/react@6.5.10":
@@ -20701,7 +20731,7 @@ react-copy-to-clipboard@^5.0.4:
    copy-to-clipboard "^3.3.1"
    prop-types "^15.8.1"

-react-docgen-typescript@^2.1.1:
+react-docgen-typescript@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
  integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
Author	SHA1	Message	Date
Madalina Raicu	73485101af	Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown	2023-04-27 11:23:48 +03:00
Madalina Raicu	10dac0c254	fix(accounts): rmeove grid actions dropdown grid prop	2023-04-27 11:23:13 +03:00
Maciek	6593bbf37b	feat(trading): settings page quick adjust a css (#3558 )	2023-04-27 07:38:57 +00:00
dexturr	1e5e57b978	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-27 06:10:10 +00:00
dexturr	5394b00349	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-27 00:16:39 +00:00
dexturr	32f5eaade5	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-26 18:07:54 +00:00
Maciek	b7a440132d	feat(trading): make Sentry only after opt in (#3448 )	2023-04-26 15:17:23 +00:00
m.ray	d6ecdf80fa	fix(fills): handle side_unspecified added for the aggresor (#3550 )	2023-04-26 13:34:56 +00:00
dexturr	21e545d941	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-26 12:09:35 +00:00
Sam Keen	ef5fa7cba6	feat(governance): ensure the data node urls in the monorepo are valid (#3549 )	2023-04-26 11:10:40 +00:00
Mikołaj Młodzikowski	d1f465e2af	Update Jenkinsfile	2023-04-26 12:54:34 +02:00
Mikołaj MłodzikowskiandMikołaj Młodzikowski	2740df48a3	fix(ci): urls in comments (#3539 ) Co-authored-by: Mikołaj Młodzikowski <mikolaj.mlodzikowski@github.com>	2023-04-26 12:45:02 +02:00
Dexter Edwards	cf1f10e324	chore(static): remove unusable mainnet data nodes (#3003 )	2023-04-26 08:09:50 +01:00
dexturr	f09a1abcfa	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-26 06:07:25 +00:00
dexturr	3de83c6eb8	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-26 00:15:38 +00:00
Madalina Raicu	79f007e3bf	fix(ui-toolkit): dropdown focus background on item	2023-04-26 01:23:19 +03:00
Madalina Raicu	3161d7b7a7	Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown	2023-04-26 01:17:25 +03:00
dexturr	e6545c13af	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-25 18:06:59 +00:00
Sam Keen	613582ee00	fix(governance): validator tables - user staking fixes (#3533 )	2023-04-25 14:17:27 +00:00
dexturr	77582a62a8	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-25 12:08:28 +00:00
Madalina Raicu	d6a57280bd	Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown	2023-04-25 15:02:29 +03:00
Madalina Raicu	2b9bfd7707	fix: network switcher text color	2023-04-25 15:02:06 +03:00
Sam KeenandJoe	384c96376a	fix(governance): scroll to top on route change (#3481 ) Co-authored-by: Joe <joe@vega.xyz>	2023-04-25 12:31:34 +01:00
Dexter	0a92f62a66	ci: publish esm and cjs	2023-04-25 10:11:55 +01:00
daro-maj	f589f4a9fa	test(trading): tests for ac - 7005-FILL-fills (#3529 )	2023-04-25 09:19:37 +01:00
Madalina Raicu	e39ecdd77a	fix(accounts): add grid actions dropdown trigger prop	2023-04-25 11:15:26 +03:00
Madalina Raicu	058ed8a717	fix: add stroke current svgs	2023-04-25 09:40:14 +03:00
dexturr	b9869da492	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-25 06:07:52 +00:00
dexturr	653fec7025	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-25 00:15:25 +00:00
Madalina Raicu	50908772fc	Merge branch 'feat/data-grid-dropdown-icons' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown	2023-04-25 00:13:57 +03:00
Madalina Raicu	303097acc6	fix: fix gray scale vega	2023-04-25 00:13:38 +03:00
Madalina Raicu	a452a4cad3	feat(icons): add icon components	2023-04-24 23:41:04 +03:00
dexturr	8bf948578c	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-24 18:09:08 +00:00
Dexter	11b08d16e4	ci: bump version	2023-04-24 15:56:05 +01:00
daro-maj	5081b11c93	test(trading): separated artifacts for logs and html report (#3519 )	2023-04-24 15:28:42 +02:00
Madalina Raicu	32e87d75a0	Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown	2023-04-24 15:33:12 +03:00
Dexter Edwards	a1366e59ec	fix(ui-toolkit): box size being wrong for multiline check boxes (#3527 )	2023-04-24 12:10:52 +00:00
dexturr	0b035d5064	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-24 12:07:43 +00:00
Madalina Raicu	8539343f9a	fix(ui-toolkit): storybook build on icons	2023-04-24 14:24:17 +03:00
dexturr	e1a38f2197	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-24 06:07:22 +00:00
dexturr	8201e87050	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-24 00:16:56 +00:00
dexturr	3aaf4e724d	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-23 18:07:11 +00:00
dexturr	6fe06e9f62	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-23 12:07:53 +00:00
dexturr	cd8b0e7caf	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-23 06:06:56 +00:00
dexturr	4282faa9d9	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-23 00:16:16 +00:00
dexturr	a24846fd06	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-22 18:07:13 +00:00
dexturr	72de53cf10	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-22 12:09:27 +00:00
dexturr	f3c0313a59	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-22 06:07:33 +00:00
dexturr	4c0de8f22b	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-22 00:16:38 +00:00
Madalina Raicu	40e8942011	Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown	2023-04-21 21:46:13 +03:00
dexturr	254fb57af0	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-21 18:09:06 +00:00
Madalina Raicu	2a884ac95a	fix(icons): vega icon records	2023-04-21 18:15:33 +03:00
Madalina Raicu	15a7fe8cff	fix(icons): add svg vega icons	2023-04-21 17:54:27 +03:00
Madalina Raicu	b616aee978	fix(trdaing): trading accounts test	2023-04-21 15:28:08 +03:00
Madalina Raicu	9b975157cc	Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/data-grid-dropdown	2023-04-20 15:01:37 +03:00
Madalina Raicu	78a88cbb90	fix(trading): trading-accounts.cy.ts accounts actions empty text	2023-04-20 11:42:53 +03:00
Madalina Raicu	d2c3c263a0	fix(trading): trading-accounts.cy.ts accounts actions empty text	2023-04-20 11:18:22 +03:00
Madalina Raicu	b3cce4b9e9	fix(accounts): update test	2023-04-19 21:11:20 +03:00
Madalina Raicu	3a5f03ac55	feat(trading): add data grid dropdown	2023-04-19 18:19:57 +03:00