fix: remove calt from nav and toasts

fix(trading): condense deal ticket & market info price range snags (#3012 )
chore(ui-toolkit): revert: loader no rerender version only
2023-02-27 13:16:25 -08:00 · 2023-02-27 18:04:13 +00:00 · 2023-02-27 07:51:50 -08:00 · 2023-02-27 16:44:48 +01:00 · 2023-02-27 12:10:43 +00:00 · 2023-02-27 09:17:23 +00:00
75 changed files with 1558 additions and 775 deletions
@@ -8,7 +8,7 @@ context('Asset page', { tags: '@regression' }, () => {

    it('should be able to see full assets list', () => {
      cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
        });
      });
@@ -25,7 +25,7 @@ context('Asset page', { tags: '@regression' }, () => {
      });

      cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
        });
      });
@@ -33,7 +33,7 @@ context('Asset page', { tags: '@regression' }, () => {

    it('should open details page when clicked on "View details"', () => {
      cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
          cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
            .eq(0)
            .should('contain.text', 'View details');
@@ -1,303 +1,15 @@
 context('Validator page', { tags: '@smoke' }, function () {
-  const validatorMenuHeading = 'a[href="/validators"]';
-  const tendermintDataHeader = '[data-testid="tendermint-header"]';
-  const vegaDataHeader = '[data-testid="vega-header"]';
-  const jsonSection = '.language-json';
-
  before('Visit validators page and obtain data', function () {
-    cy.visit('/');
-    cy.get(validatorMenuHeading).click();
-    cy.get_validators().as('validators');
-    cy.get_nodes().as('nodes');
+    cy.visit('/validators');
  });

  describe('Verify elements on page', function () {
-    before('Ensure at least two validators are present', function () {
-      assert.isAtLeast(
-        this.validators.length,
-        2,
-        'Ensuring at least two validators exist'
-      );
-    });
-
-    it('should be able to see validator page sections', function () {
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-    });
-
-    it('should be able to see relevant validator information in tendermint section', function () {
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .next()
-        .within(() => {
-          cy.get(jsonSection)
-            .invoke('text')
-            .convert_string_json_to_js_object()
-            .then((validatorsInJson) => {
-              this.validators.forEach((validator, index) => {
-                const validatorInJson =
-                  validatorsInJson.result.validators[index];
-
-                assert.equal(
-                  validatorInJson.address,
-                  validator.address,
-                  `Checking that validator address shown in json matches system data`
-                );
-                cy.contains(validator.address).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.pub_key.type,
-                  validator.pub_key.type,
-                  `Checking that validator public key type shown in json matches system data`
-                );
-                cy.contains(validator.pub_key.type).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.pub_key.value,
-                  validator.pub_key.value,
-                  `Checking that validator public key value shown in json matches system data`
-                );
-                cy.contains(validator.pub_key.value).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.voting_power,
-                  validator.voting_power,
-                  `Checking that validator voting power in json matches system data`
-                );
-                cy.contains(validator.voting_power).should('be.visible');
-
-                // Proposer priority can change frequently mid test
-                // Therefore only checking the field name is present.
-                cy.contains('proposer_priority').should('be.visible');
-              });
-            });
-        });
-    });
-
-    // Test disabled 2022/11/15 during the 0.62.1 upgrade. The JSON structure changed, and
-    // this test failed. Rather than fix it, it will be replaced when the validator view displays
-    // something useful rather than just dumping out the JSON.
-    xit('should be able to see relevant node information in vega data section', function () {
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .next()
-        .within(() => {
-          cy.get(jsonSection)
-            .invoke('text')
-            .convert_string_json_to_js_object()
-            .then((nodesInJson) => {
-              this.nodes.forEach((node, index) => {
-                const nodeInJson = nodesInJson.edges[index].node;
-
-                // Vegacapsule shows no info or null for following fields:
-                // name, infoURL, avatarUrl, location, epoch data
-                // Therefore, these values remain unchecked.
-
-                assert.equal(
-                  nodeInJson.__typename,
-                  node.__typename,
-                  `Checking that node __typename shown in json matches system data`
-                );
-                cy.contains(node.__typename).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.id,
-                  node.id,
-                  `Checking that node id shown in json matches system data`
-                );
-                cy.contains(node.id).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.pubkey,
-                  node.pubkey,
-                  `Checking that node pubkey shown in json matches system data`
-                );
-                cy.contains(node.pubkey).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.tmPubkey,
-                  node.tmPubkey,
-                  `Checking that node tmPubkey shown in json matches system data`
-                );
-                cy.contains(node.tmPubkey).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.ethereumAddress,
-                  node.ethereumAddress,
-                  `Checking that node ethereumAddress shown in json matches system data`
-                );
-                cy.contains(node.ethereumAddress).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedByOperator,
-                  node.stakedByOperator,
-                  `Checking that node stakedByOperator value shown in json matches system data`
-                );
-                cy.contains(node.stakedByOperator).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedByDelegates,
-                  node.stakedByDelegates,
-                  `Checking that node stakedByDelegates value shown in json matches system data`
-                );
-                cy.contains(node.stakedByDelegates).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedTotal,
-                  node.stakedTotal,
-                  `Checking that node stakedTotal shown in json matches system data`
-                );
-                cy.contains(node.stakedTotal).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.pendingStake,
-                  node.pendingStake,
-                  `Checking that node pendingStake shown in json matches system data`
-                );
-                cy.contains(node.pendingStake).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.status,
-                  node.status,
-                  `Checking that node status shown in json matches system data`
-                );
-                cy.contains(node.status).should('be.visible');
-              });
-            });
-        });
-    });
-
-    it('should be able to see validator page displayed on mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.get(validatorMenuHeading).click();
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .next()
-        .within(() => {
-          this.validators.forEach((validator) => {
-            cy.contains(validator.address).should('be.visible');
-            cy.contains(validator.pub_key.type).should('be.visible');
-            cy.contains(validator.pub_key.value).should('be.visible');
-            cy.contains(validator.voting_power).should('be.visible');
-            // Proposer priority can change frequently mid test
-            // Therefore only checking the field name is present.
-            cy.contains('proposer_priority').should('be.visible');
-          });
-        });
-    });
-
-    it('should be able to switch validator page between light and dark mode', function () {
-      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
-      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
-      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
-      const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
-      const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
-      const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
-      const themeSwitcher = '[data-testid="theme-switcher"]';
-      const jsonFields = '.hljs';
-      const sideMenuBackground = '.absolute';
-
-      // Engage dark mode if not allready set
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .then((background_color) => {
-          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
-            cy.get(themeSwitcher).click();
-        });
-
-      // Engage white mode
-      cy.get(themeSwitcher).click();
-
-      // White Mode
-      cy.get(validatorMenuHeading)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSideMenuBackgroundColor);
-
-      // Dark Mode
-      cy.get(themeSwitcher).click();
-      cy.get(validatorMenuHeading)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSideMenuBackgroundColor);
-    });
-
-    Cypress.Commands.add('get_validators', () => {
-      cy.request({
-        method: 'GET',
-        url: `http://localhost:26617/validators`,
-        headers: { 'content-type': 'application/json' },
-      })
-        .its(`body.result.validators`)
-        .then(function (response) {
-          let validators = [];
-          response.forEach((account, index) => {
-            validators[index] = account;
-          });
-          return validators;
-        });
-    });
-
-    Cypress.Commands.add('get_nodes', () => {
-      const mutation =
-        '{nodesConnection { edges { node { id name infoUrl avatarUrl pubkey tmPubkey ethereumAddress \
-          location stakedByOperator stakedByDelegates stakedTotal pendingStake \
-          epochData { total offline online __typename } status name __typename}}}}';
-      cy.request({
-        method: 'POST',
-        url: `http://localhost:3028/query`,
-        body: {
-          query: mutation,
-        },
-        headers: { 'content-type': 'application/json' },
-      })
-        .its(`body.data.nodesConnection.edges`)
-        .then(function (response) {
-          let nodes = [];
-          response.forEach((node) => {
-            nodes.push(node);
-          });
-          return nodes;
+    it('should be able to see validator tiles', function () {
+      cy.getNodes().then((nodes) => {
+        nodes.forEach((node) => {
+          cy.get(`[validator-id="${node.id}"]`).should('be.visible');
        });
+      });
    });
  });
 });
@@ -19,12 +19,12 @@ const EmptyList = ({ heading, label }: EmptyListProps) => {

      <div className="mt-4">
        {heading ? (
-          <h1 className="font-alpha text-xl uppercase text-center leading-relaxed">
+          <h1 className="font-alpha calt text-xl uppercase text-center leading-relaxed">
            {heading}
          </h1>
        ) : null}
        {label ? (
-          <p className="font-alpha text-gray-500 text-center">{label}</p>
+          <p className="font-alpha calt text-gray-500 text-center">{label}</p>
        ) : null}
      </div>
    </div>
@@ -184,9 +184,8 @@ export const MarketDetails = ({
      content: (
        <>
          <p className="text-xs mb-4">
-            {`For liquidity orders count towards a commitment they have to be
-        within either the liquidity or price monitoring bounds (whichever is
-        tighter).`}
+            {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
          </p>
          <p className="text-xs mb-4">
            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
@@ -249,7 +248,7 @@ export const MarketDetails = ({
    <>
      {panels.map((p) => (
        <div className="mb-3">
-          <h2 className="font-alpha text-xl">{p.title}</h2>
+          <h2 className="font-alpha calt text-xl">{p.title}</h2>
          {p.content}
        </div>
      ))}
@@ -83,7 +83,7 @@ const NestedDataListItem = ({
  });

  const titleClasses = classNames({
-    'text-xl pl-4 border-l-4 font-alpha': hasChildren,
+    'text-xl pl-4 border-l-4 font-alpha calt': hasChildren,
    'text-base font-medium whitespace-nowrap': !hasChildren,
  });

@@ -20,7 +20,7 @@ export const PageHeader = ({
  copy = false,
  className,
 }: PageHeaderProps) => {
-  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha';
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha calt';
  return (
    <header className={className}>
      <span className={`${titleClasses} block`}>{prefix}</span>
@@ -0,0 +1 @@
+export * from './page-actions';
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export const PageActions = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className="flex flex-row items-start gap-1" {...props}>
+    {children}
+  </div>
+);
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import { RouteTitle } from '../route-title';
+import { PageActions } from './page-actions';
+
+type PageTitleProps = {
+  /**
+   * The page title
+   * (also sets the document title unless overwritten by
+   * `documentTitle` property)
+   */
+  title: string;
+  /**
+   * The react node that consists of CTA buttons, links, etc.
+   */
+  actions?: ReactNode;
+  /**
+   * Overwrites the document title
+   */
+  documentTitle?: Parameters<typeof useDocumentTitle>[0];
+} & Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
+
+export const PageTitle = ({
+  title,
+  actions,
+  documentTitle,
+  className,
+  ...props
+}: PageTitleProps) => {
+  useDocumentTitle(
+    documentTitle && documentTitle.length > 0 ? documentTitle : [title]
+  );
+  return (
+    <div
+      className="flex flex-col md:flex-row gap-1 justify-between content-start mb-8"
+      data-testid="page-title"
+    >
+      <RouteTitle className={classNames('mb-1', className)} {...props}>
+        {title}
+      </RouteTitle>
+      {actions && <PageActions>{actions}</PageActions>}
+    </div>
+  );
+};
@@ -13,7 +13,7 @@ export const RouteTitle = ({
  ...props
 }: RouteTitleProps) => {
  const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
    'text-4xl',
    'uppercase',
    'mb-8',
@@ -11,7 +11,7 @@ export const StatusMessage = ({
  className,
  ...props
 }: StatusMessageProps) => {
-  const classes = classnames('font-alpha text-2xl mb-28', className);
+  const classes = classnames('font-alpha calt text-2xl mb-28', className);
  return (
    <h3 className={classes} {...props}>
      {children}
@@ -12,7 +12,7 @@ export const SubHeading = ({
  ...props
 }: SubHeadingProps) => {
  const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
    'text-2xl',
    'uppercase',
    'mt-8 mb-2',
@@ -9,7 +9,7 @@ export type Metric = components['schemas']['vegaDispatchMetric'];
 export const wrapperClasses =
  'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
 export const headerClasses =
-  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha';
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';

 export type Transfer = components['schemas']['commandsv1Transfer'];

@@ -0,0 +1,55 @@
+import { useFetch } from '@vegaprotocol/react-helpers';
+import { useEffect, useRef } from 'react';
+import { DATA_SOURCES } from '../config';
+
+type PubKey = {
+  type: string;
+  value: string;
+};
+
+type Validator = {
+  address: string;
+  pub_key: PubKey;
+  voting_power: string;
+  proposer_priority: string;
+};
+
+type Result = {
+  block_height: string;
+  validators: Validator[];
+  count: string;
+  total: string;
+};
+
+type TendermintValidatorsResponse = {
+  jsonrpc: string;
+  id: number;
+  result: Result;
+};
+
+export const useTendermintValidators = (pollInterval?: number) => {
+  const {
+    state: { data, loading, error },
+    refetch,
+  } = useFetch<TendermintValidatorsResponse>(
+    `${DATA_SOURCES.tendermintUrl}/validators`
+  );
+
+  const ref = useRef<TendermintValidatorsResponse | undefined>(undefined);
+  useEffect(() => {
+    if (data) ref.current = data;
+  }, [data]);
+
+  useEffect(() => {
+    const interval =
+      pollInterval &&
+      setInterval(() => {
+        refetch();
+      }, pollInterval);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [pollInterval, refetch]);
+
+  return { data: ref.current, loading, error, refetch };
+};
@@ -1,5 +1,4 @@
 import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
@@ -8,6 +7,7 @@ import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { useParams } from 'react-router-dom';
 import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { useState } from 'react';
+import { PageTitle } from '../../components/page-helpers/page-title';

 export const AssetPage = () => {
  useDocumentTitle(['Assets']);
@@ -22,18 +22,25 @@ export const AssetPage = () => {
  return (
    <>
      <section className="relative">
-        <RouteTitle data-testid="asset-header">{title}</RouteTitle>
+        <PageTitle
+          data-testid="asset-header"
+          title={title}
+          actions={
+            <Button
+              disabled={!data}
+              size="xs"
+              onClick={() => setDialogOpen(true)}
+            >
+              {t('View JSON')}
+            </Button>
+          }
+        />
        <AsyncRenderer
          noDataMessage={t('Asset not found')}
          data={data}
          loading={loading}
          error={error}
        >
-          <div className="absolute top-0 right-0">
-            <Button size="xs" onClick={() => setDialogOpen(true)}>
-              {t('View JSON')}
-            </Button>
-          </div>
          <div className="h-full relative">
            <AssetDetailsTable asset={data as AssetFieldsFragment} />
          </div>
@@ -3,12 +3,12 @@ import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { MarketDetails } from '../../components/markets/market-details';
-import { RouteTitle } from '../../components/route-title';
 import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import compact from 'lodash/compact';
 import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { marketInfoNoCandlesDataProvider } from '@vegaprotocol/market-info';
+import { PageTitle } from '../../components/page-helpers/page-title';

 export const MarketPage = () => {
  useScrollToLocation();
@@ -40,20 +40,25 @@ export const MarketPage = () => {
  return (
    <>
      <section className="relative">
-        <RouteTitle data-testid="markets-heading">
-          {data?.market?.tradableInstrument.instrument.name}
-        </RouteTitle>
+        <PageTitle
+          data-testid="markets-heading"
+          title={data?.market?.tradableInstrument.instrument.name || ''}
+          actions={
+            <Button
+              disabled={!data?.market}
+              size="xs"
+              onClick={() => setDialogOpen(true)}
+            >
+              {t('View JSON')}
+            </Button>
+          }
+        />
        <AsyncRenderer
          noDataMessage={t('This chain has no markets')}
          data={data}
          loading={loading}
          error={error}
        >
-          <div className="absolute top-0 right-0">
-            <Button size="xs" onClick={() => setDialogOpen(true)}>
-              {t('View JSON')}
-            </Button>
-          </div>
          <MarketDetails market={data?.market} />
        </AsyncRenderer>
      </section>
@@ -68,7 +68,7 @@ const Party = () => {
  return (
    <section>
      <h1
-        className="font-alpha uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
+        className="font-alpha calt uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
        data-testid="parties-header"
      >
        {t('Public key')}
@@ -9,7 +9,7 @@ import Party from './parties';
 import { Parties } from './parties/home';
 import { Party as PartySingle } from './parties/id';
 import Txs from './txs';
-import Validators from './validators';
+import { ValidatorsPage } from './validators';
 import Genesis from './genesis';
 import { Block } from './blocks/id';
 import { Blocks } from './blocks/home';
@@ -125,7 +125,7 @@ const validators: Route[] = flags.validators
        path: Routes.VALIDATORS,
        name: 'Validators',
        text: t('Validators'),
-        element: <Validators />,
+        element: <ValidatorsPage />,
      },
    ]
  : [];
@@ -1,47 +1 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
-import { SubHeading } from '../../components/sub-heading';
-import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import { DATA_SOURCES } from '../../config';
-import { useFetch } from '@vegaprotocol/react-helpers';
-import type { TendermintValidatorsResponse } from './tendermint-validator-response';
-import { useExplorerNodesQuery } from './__generated__/Nodes';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-
-const Validators = () => {
-  const {
-    state: { data: validators },
-  } = useFetch<TendermintValidatorsResponse>(
-    `${DATA_SOURCES.tendermintUrl}/validators`
-  );
-
-  useDocumentTitle(['Validators']);
-
-  const { data } = useExplorerNodesQuery();
-
-  return (
-    <section>
-      <RouteTitle data-testid="validators-header">{t('Validators')}</RouteTitle>
-      {data ? (
-        <>
-          <SubHeading data-testid="vega-header">{t('Vega data')}</SubHeading>
-          <SyntaxHighlighter data-testid="vega-data" data={data} />
-        </>
-      ) : (
-        <Loader />
-      )}
-      {validators ? (
-        <>
-          <SubHeading data-testid="tendermint-header">
-            {t('Tendermint data')}
-          </SubHeading>
-          <SyntaxHighlighter data-testid="tendermint-data" data={validators} />
-        </>
-      ) : (
-        <Loader />
-      )}
-    </section>
-  );
-};
-
-export default Validators;
+export * from './validators-page';
@@ -1,24 +0,0 @@
-export interface PubKey {
-  type: string;
-  value: string;
-}
-
-export interface Validator {
-  address: string;
-  pub_key: PubKey;
-  voting_power: string;
-  proposer_priority: string;
-}
-
-export interface Result {
-  block_height: string;
-  validators: Validator[];
-  count: string;
-  total: string;
-}
-
-export interface TendermintValidatorsResponse {
-  jsonrpc: string;
-  id: number;
-  result: Result;
-}
@@ -0,0 +1,340 @@
+import { countryCodeToFlagEmoji, t } from '@vegaprotocol/react-helpers';
+import {
+  AsyncRenderer,
+  Button,
+  CopyWithTooltip,
+  ExternalLink,
+  Icon,
+  KeyValueTable,
+  KeyValueTableRow,
+  Tooltip,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
+
+import { useExplorerNodesQuery } from './__generated__/Nodes';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import compact from 'lodash/compact';
+import { useTendermintValidators } from '../../hooks/use-tendermint-validators';
+import { useMemo, useState } from 'react';
+import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
+import { PageTitle } from '../../components/page-helpers/page-title';
+import BigNumber from 'bignumber.js';
+import {
+  ContractAddressLink,
+  DApp,
+  TOKEN_VALIDATOR,
+  useLinks,
+} from '@vegaprotocol/environment';
+import classNames from 'classnames';
+import { NodeStatus, NodeStatusMapping } from '@vegaprotocol/types';
+
+type RateProps = {
+  value: BigNumber | number | undefined;
+  className?: string;
+  colour?: 'green' | 'blue' | 'pink' | 'orange';
+  asPoint?: boolean;
+  zero?: boolean;
+};
+const Rate = ({
+  value,
+  className,
+  colour = 'blue',
+  asPoint = false,
+}: RateProps) => {
+  const val =
+    typeof value === 'undefined'
+      ? new BigNumber(0)
+      : typeof value === 'number'
+      ? new BigNumber(value)
+      : value;
+  const bar = asPoint
+    ? {
+        right: `${val.times(100).toFixed(2)}%`,
+      }
+    : { width: `${val.times(100).toFixed(2)}%` };
+  return (
+    <div
+      className={classNames(
+        'overflow-hidden rounded h-[9px] flex w-full bg-vega-light-100 dark:bg-vega-dark-150',
+        { 'pl-[9px]': asPoint },
+        {
+          'bg-gradient-to-l to-vega-orange-500 dark:to-vega-orange-550 from-vega-light-100 dark:from-vega-dark-150':
+            asPoint && colour === 'orange',
+        }
+      )}
+    >
+      <div className="relative w-full">
+        <div
+          className={classNames(
+            'w-[9px] h-[9px] absolute top-0 right-0 transition-all rounded',
+            {
+              'bg-vega-green-550 dark:bg-vega-green-500': colour === 'green',
+              'bg-vega-blue-550 dark:bg-vega-blue-500': colour === 'blue',
+              'bg-vega-pink-550 dark:bg-vega-pink-500': colour === 'pink',
+              'bg-vega-orange-550 dark:bg-vega-orange-500': colour === 'orange',
+            },
+            'bg-vega',
+            className
+          )}
+          style={bar}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export const ValidatorsPage = () => {
+  useDocumentTitle(['Validators']);
+
+  const { data: tmData } = useTendermintValidators(5000);
+  const { data, loading, error, refetch } = useExplorerNodesQuery();
+
+  const validators = compact(data?.nodesConnection.edges?.map((e) => e?.node));
+
+  // voting power
+  const powers = compact(tmData?.result.validators).map(
+    (v) => new BigNumber(v.voting_power)
+  );
+  const totalVotingPower = BigNumber.sum(...powers);
+
+  // proposer priority
+  const priorities = compact(tmData?.result.validators).map(
+    (v) => new BigNumber(v.proposer_priority)
+  );
+  const absoluteProposerPriority = BigNumber.max(
+    ...priorities.map((p) => p.abs())
+  );
+
+  const tmValidators = useMemo(() => {
+    return tmData?.result.validators.map((v) => {
+      const data = {
+        key: v.pub_key.value,
+        votingPower: new BigNumber(v.voting_power),
+        proposerPriority: new BigNumber(v.proposer_priority),
+      };
+      return {
+        ...data,
+        votingPowerRatio: data.votingPower.dividedBy(totalVotingPower),
+        proposerPriorityRatio: absoluteProposerPriority
+          .plus(data.proposerPriority)
+          .dividedBy(absoluteProposerPriority.times(2)),
+      };
+    });
+  }, [tmData?.result.validators, totalVotingPower, absoluteProposerPriority]);
+
+  const totalStaked = BigNumber.sum(
+    ...validators.map((v) => new BigNumber(v.stakedTotal))
+  );
+
+  const [vegaDialog, setVegaDialog] = useState<boolean>(false);
+  const [tmDialog, setTmDialog] = useState<boolean>(false);
+
+  const tokenLink = useLinks(DApp.Token);
+
+  return (
+    <>
+      <section>
+        <PageTitle
+          title={t('Validators')}
+          actions={
+            <>
+              <Button
+                disabled={Boolean(!data)}
+                size="xs"
+                onClick={() => setVegaDialog(true)}
+              >
+                {t('View JSON')}
+              </Button>
+              {
+                <Button
+                  disabled={Boolean(!tmData)}
+                  size="xs"
+                  onClick={() => setTmDialog(true)}
+                >
+                  {t('View tendermint as JSON')}
+                </Button>
+              }
+            </>
+          }
+        />
+        <AsyncRenderer
+          data={validators}
+          loading={loading}
+          error={error}
+          reload={refetch}
+        >
+          <ul className="md:columns-2">
+            {validators.map((v) => {
+              const tm = tmValidators?.find((tmv) => tmv.key === v.tmPubkey);
+              const stakedRatio = new BigNumber(v.stakedTotal).dividedBy(
+                totalStaked
+              );
+              const validatorPage = tokenLink(
+                TOKEN_VALIDATOR.replace(':id', v.id)
+              );
+              const validatorName =
+                v.name && v.name.length > 0 ? v.name : truncateMiddle(v.id);
+              return (
+                <li className="mb-5" key={v.id}>
+                  <div
+                    data-testid="validator-tile"
+                    validator-id={v.id}
+                    className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden relative flex gap-2 items-start justify-between"
+                  >
+                    {v.avatarUrl && (
+                      <div className="w-20">
+                        <ExternalLink href={validatorPage}>
+                          <img
+                            className="w-full"
+                            src={v.avatarUrl}
+                            alt={validatorName}
+                          />
+                        </ExternalLink>
+                      </div>
+                    )}
+                    <div className="w-full">
+                      <h2 className="font-alpha text-2xl">
+                        <ExternalLink href={validatorPage}>
+                          {validatorName}
+                        </ExternalLink>
+                      </h2>
+                      <KeyValueTable>
+                        <KeyValueTableRow>
+                          <div>{t('ID')}</div>
+                          <div className="break-all text-xs">{v.id}</div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Status')}</div>
+                          <div className="break-all text-xs">
+                            <span
+                              className={classNames('mr-1', {
+                                'text-vega-green-550 dark:vega-green-500':
+                                  v.status === NodeStatus.NODE_STATUS_VALIDATOR,
+                                'text-vega-pink-550 dark:vega-pink-500':
+                                  v.status ===
+                                  NodeStatus.NODE_STATUS_NON_VALIDATOR,
+                              })}
+                            >
+                              <Icon name="tick-circle" size={3} />
+                            </span>
+                            {NodeStatusMapping[v.status]}
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Location')}</div>
+                          <div>
+                            {countryCodeToFlagEmoji(v.location)}{' '}
+                            <span className="text-[10px]">{v.location}</span>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Public key')}</div>
+                          <div className="break-all text-xs">{v.pubkey}</div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Ethereum address')}</div>
+                          <div className="break-all text-xs">
+                            <ContractAddressLink address={v.ethereumAddress} />{' '}
+                            <CopyWithTooltip text={v.ethereumAddress}>
+                              <button title={t('Copy address to clipboard')}>
+                                <Icon size={3} name="duplicate" />
+                              </button>
+                            </CopyWithTooltip>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Tendermint public key')}</div>
+                          <div className="break-all text-xs">{v.tmPubkey}</div>
+                        </KeyValueTableRow>
+
+                        <KeyValueTableRow>
+                          <div>{t('Voting power')}</div>
+                          <div className="w-44 text-right">
+                            <Rate value={tm?.votingPowerRatio} />
+                            <div className="text-[10px] leading-3">
+                              {tm?.votingPowerRatio.times(100).toFixed(2)}
+                              {'% '}({tm?.votingPower.toString()})
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Proposer priority')}</div>
+                          <div className="w-44 text-right">
+                            <Rate
+                              value={tm?.proposerPriorityRatio}
+                              colour="orange"
+                              asPoint={true}
+                              zero={true}
+                            />
+                            <div className="text-[10px] leading-3">
+                              {tm?.proposerPriority.toString()}
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+
+                        <KeyValueTableRow>
+                          <div>{t('Stake share')}</div>
+                          <div className="w-44 text-right">
+                            <Rate value={stakedRatio} colour="green" />
+                            <div className="text-[10px] leading-3">
+                              <Tooltip
+                                description={
+                                  <KeyValueTable
+                                    numerical={true}
+                                    className="mb-1"
+                                  >
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked by operator')}</div>
+                                      <div>{v.stakedByOperator}</div>
+                                    </KeyValueTableRow>
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked by delegates')}</div>
+                                      <div>{v.stakedByDelegates}</div>
+                                    </KeyValueTableRow>
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked (total)')}</div>
+                                      <div>{v.stakedTotal}</div>
+                                    </KeyValueTableRow>
+                                  </KeyValueTable>
+                                }
+                              >
+                                <span>
+                                  {stakedRatio.times(100).toFixed(2)}%
+                                </span>
+                              </Tooltip>
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+                      </KeyValueTable>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </AsyncRenderer>
+      </section>
+      <JsonViewerDialog
+        open={vegaDialog}
+        onChange={(isOpen) => setVegaDialog(isOpen)}
+        title={t('Vega Validators')}
+        content={data}
+      />
+      <JsonViewerDialog
+        open={tmDialog}
+        onChange={(isOpen) => setTmDialog(isOpen)}
+        title={t('Tendermint Validators')}
+        content={tmData}
+      />
+    </>
+  );
+};
@@ -8,7 +8,7 @@ export function Dashboard() {
    <>
      <div className="px-16 pt-20 pb-12 bg-greys-light-100">
        <div className="max-w-screen-xl mx-auto">
-          <h1 className="font-alpha uppercase text-5xl mb-8">
+          <h1 className="font-alpha calt uppercase text-5xl mb-8">
            {t('Top liquidity opportunities')}
          </h1>

@@ -30,7 +30,7 @@ type Network = 'testnet' | 'mainnet';
 export const Intro = ({ network = 'testnet' }: { network?: Network }) => {
  return (
    <div>
-      <p className="font-alpha text-2xl font-medium mb-2">
+      <p className="font-alpha calt text-2xl font-medium mb-2">
        {t(
          'Become a liquidity provider and earn a cut of the fees paid during trading.'
        )}
@@ -92,7 +92,7 @@ export const Detail = () => {
            )}
          </div>
          <div>
-            <h2 className="font-alpha text-2xl mb-4">
+            <h2 className="font-alpha calt text-2xl mb-4">
              {t('Current Liquidity Provision')}
            </h2>
            <LPProvidersGrid
@@ -14,13 +14,13 @@ export const Header = ({
      <div className="mb-6">
        <Link to="/">
          <Icon name="chevron-left" className="mr-2" />
-          <span className="underline font-alpha text-lg font-medium">
+          <span className="underline font-alpha calt text-lg font-medium">
            {t('Liquidity opportunities')}
          </span>
        </Link>
      </div>
-      <h1 className="font-alpha text-5xl mb-6">{name}</h1>
-      <p className="font-alpha text-4xl">{symbol}</p>
+      <h1 className="font-alpha calt text-5xl mb-6">{name}</h1>
+      <p className="font-alpha calt text-4xl">{symbol}</p>
    </div>
  );
 };
@@ -44,7 +44,7 @@ export const Market = ({
        <table className="w-full">
          <thead>
            <tr
-              className="text-sm text-greys-light-400 text-left font-alpha"
+              className="text-sm text-greys-light-400 text-left font-alpha calt"
              style={{ fontFeatureSettings: "'liga' off, 'calt' off" }}
            >
              <th className="font-medium px-4">{t('Volume (24h)')}</th>
@@ -36,7 +36,7 @@ export const Grid = ({ isRowClickable, children, ...props }: Props) => {

  return (
    <AgGridReact
-      className={classNames('ag-theme-alpine h-full font-alpha', {
+      className={classNames('ag-theme-alpine h-full font-alpha calt', {
        'row-hover': isRowClickable,
      })}
      rowHeight={92}
@@ -13,7 +13,7 @@ const Remainder = () => (
 );

 const COPY_CLASS =
-  'text-sm font-medium whitespace-nowrap text-white font-alpha';
+  'text-sm font-medium whitespace-nowrap text-white font-alpha calt';

 const Tooltip = ({
  children,
@@ -59,10 +59,10 @@ const ROWS = [
 export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
  return (
    <Dialog size="medium" open={isOpen} onChange={onChange}>
-      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase liga-0-calt-0">
+      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase">
        {t('Health')}
      </h1>
-      <p className="text-lg font-medium font-alpha mb-8 liga-0-calt-0">
+      <p className="text-lg font-medium font-alpha mb-8">
        {t(
          'Market health is a representation of market and liquidity status and how close that market is to moving from one fee level to another.'
        )}
@@ -70,10 +70,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {

      <table className="table-fixed">
        <thead className="border-b border-greys-light-300">
-          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase">
            {t('Market status')}
          </th>
-          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase">
            {t('Liquidity status')}
          </th>
        </thead>
@@ -85,12 +85,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
                <td
                  className={classNames('pr-4 pb-10', { 'pt-8': isFirstRow })}
                >
-                  <h2 className="font-medium font-alpha uppercase text-base liga-0-calt-0">
+                  <h2 className="font-medium font-alpha uppercase text-base">
                    {t(r.title)}
                  </h2>
-                  <p className="font-medium font-alpha text-lg liga-0-calt-0">
-                    {t(r.copy)}
-                  </p>
+                  <p className="font-medium font-alpha text-lg">{t(r.copy)}</p>
                </td>
                <td
                  className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })}
@@ -2761,7 +2761,7 @@
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "86666.297",
    "total_removed": "0",
-    "locked_amount": "67254.2144443561960977507",
+    "locked_amount": "66600.6885662553549491123",
    "deposits": [
      {
        "amount": "86666.297",
@@ -2827,7 +2827,7 @@
    "tranche_end": "2023-06-01T00:00:00.000Z",
    "total_added": "2500",
    "total_removed": "0",
-    "locked_amount": "1322.0455904049655",
+    "locked_amount": "1284.23843228530725",
    "deposits": [
      {
        "amount": "2500",
@@ -3214,8 +3214,8 @@
    "tranche_start": "2023-02-01T00:00:00.000Z",
    "tranche_end": "2023-08-01T00:00:00.000Z",
    "total_added": "37500",
-    "total_removed": "3143.644010625",
-    "locked_amount": "32578.367192295885",
+    "total_removed": "3295.491386325",
+    "locked_amount": "32008.126630601595",
    "deposits": [
      {
        "amount": "7500",
@@ -3229,6 +3229,11 @@
      }
    ],
    "withdrawals": [
+      {
+        "amount": "151.8473757",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xe69c28fbcb90092d264d098874523f580e45052a36a71b3f423431e84d4ca074"
+      },
      {
        "amount": "142.173112275",
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -3277,6 +3282,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "151.8473757",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 34,
+            "tx": "0xe69c28fbcb90092d264d098874523f580e45052a36a71b3f423431e84d4ca074"
+          },
          {
            "amount": "142.173112275",
            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -3315,8 +3326,8 @@
          }
        ],
        "total_tokens": "7500",
-        "withdrawn_tokens": "868.530827925",
-        "remaining_tokens": "6631.469172075"
+        "withdrawn_tokens": "1020.378203625",
+        "remaining_tokens": "6479.621796375"
      },
      {
        "address": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -3348,7 +3359,7 @@
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "129999.45",
    "total_removed": "0",
-    "locked_amount": "67192.85343592545029418",
+    "locked_amount": "66539.923817958609949455",
    "deposits": [
      {
        "amount": "129999.45",
@@ -3414,7 +3425,7 @@
    "tranche_end": "2023-09-03T00:00:00.000Z",
    "total_added": "62600",
    "total_removed": "0",
-    "locked_amount": "32628.30665271435854",
+    "locked_amount": "32156.25787037037408",
    "deposits": [
      {
        "amount": "10000",
@@ -3607,7 +3618,7 @@
    "tranche_end": "2023-09-17T00:00:00.000Z",
    "total_added": "5000",
    "total_removed": "0",
-    "locked_amount": "2797.8756024860475",
+    "locked_amount": "2760.1720256215125",
    "deposits": [
      {
        "amount": "5000",
@@ -3818,7 +3829,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "97499.58",
    "total_removed": "0",
-    "locked_amount": "9132.1315461300099432444",
+    "locked_amount": "8491.6684140496565878092",
    "deposits": [
      {
        "amount": "97499.58",
@@ -3851,7 +3862,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "135173.4239508",
    "total_removed": "98230.390980249184455396",
-    "locked_amount": "12482.047226820217265578107936",
+    "locked_amount": "11606.644696613363239057508256",
    "deposits": [
      {
        "amount": "135173.4239508",
@@ -3897,7 +3908,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "32499.86",
    "total_removed": "0",
-    "locked_amount": "3841.7300379803934683526",
+    "locked_amount": "3572.2982585208873489478",
    "deposits": [
      {
        "amount": "32499.86",
@@ -3930,7 +3941,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "10833.29",
    "total_removed": "0",
-    "locked_amount": "1250.4458480967454744197",
+    "locked_amount": "1162.7484183867779537778",
    "deposits": [
      {
        "amount": "10833.29",
@@ -3963,7 +3974,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "22749.93",
    "total_removed": "4720.860935375",
-    "locked_amount": "4674.4458622218582395499",
+    "locked_amount": "4346.6132830988218703751",
    "deposits": [
      {
        "amount": "6500",
@@ -4114,8 +4125,8 @@
    "tranche_start": "2022-11-01T00:00:00.000Z",
    "tranche_end": "2023-05-01T00:00:00.000Z",
    "total_added": "22500",
-    "total_removed": "4680.6740139",
-    "locked_amount": "8110.55622697974315",
+    "total_removed": "4832.532899775",
+    "locked_amount": "7768.411889963167125",
    "deposits": [
      {
        "amount": "7500",
@@ -4129,6 +4140,11 @@
      }
    ],
    "withdrawals": [
+      {
+        "amount": "151.858885875",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xe098f85d049dae2f5ab1d8057e7ca1d1a02bc6c95602a8db87e2d78013e236a3"
+      },
      {
        "amount": "142.17311235",
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -4232,6 +4248,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "151.858885875",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 33,
+            "tx": "0xe098f85d049dae2f5ab1d8057e7ca1d1a02bc6c95602a8db87e2d78013e236a3"
+          },
          {
            "amount": "142.17311235",
            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -4342,8 +4364,8 @@
          }
        ],
        "total_tokens": "7500",
-        "withdrawn_tokens": "4680.6740139",
-        "remaining_tokens": "2819.3259861"
+        "withdrawn_tokens": "4832.532899775",
+        "remaining_tokens": "2667.467100225"
      },
      {
        "address": "0x2539b51EbDE65a75672aBcfE9439a706a99D18D1",
@@ -4368,7 +4390,7 @@
    "tranche_end": "2023-06-02T00:00:00.000Z",
    "total_added": "1939928.38",
    "total_removed": "928642.9598472029154",
-    "locked_amount": "516844.323679388022372626",
+    "locked_amount": "502215.87592198306198629",
    "deposits": [
      {
        "amount": "1852091.69",
@@ -9777,10 +9799,35 @@
    "tranche_id": 11,
    "tranche_start": "2021-09-03T00:00:00.000Z",
    "tranche_end": "2022-09-03T00:00:00.000Z",
-    "total_added": "54621.000000000000000003",
-    "total_removed": "43553.21518131551",
+    "total_added": "54766.000000000000000003",
+    "total_removed": "43683.21518131551",
    "locked_amount": "0",
    "deposits": [
+      {
+        "amount": "15",
+        "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+        "tx": "0x842269dc960af54f5f20e903f8cc2dae77d68b6c051b238a1467fa93e0ec34c3"
+      },
+      {
+        "amount": "80",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xde7e3f48359ad1473d4b6f05582e2bee121458b1103687037fca29ab95c9f50a"
+      },
+      {
+        "amount": "20",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xfeb720f64f2951e185db6e872e022575d3fd8477f85b2698890f70d8820fd596"
+      },
+      {
+        "amount": "15",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0x8d55eb2b5f4091eaa0dee96242f8eb6bac12312415c202007695da4b9df96ac6"
+      },
+      {
+        "amount": "15",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xf7e1cb4b03d0f7664b4d7688029ed8ad4c468bf4b2e6ef941c59de4dce680496"
+      },
      {
        "amount": "30",
        "user": "0xf83aaA5786516F7016DF9ead2CD9F14616dA0A13",
@@ -19893,6 +19940,11 @@
      }
    ],
    "withdrawals": [
+      {
+        "amount": "130",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xc39eefed84fded9118b3e8a84f7fdb79789725ce078421c07e4b9f0b14bb78f2"
+      },
      {
        "amount": "12",
        "user": "0x1D92cb812FdeDF1a5aFE3c5080B2D3Ec102694c6",
@@ -20895,6 +20947,151 @@
      }
    ],
    "users": [
+      {
+        "address": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+        "deposits": [
+          {
+            "amount": "15",
+            "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+            "tranche_id": 11,
+            "tx": "0x842269dc960af54f5f20e903f8cc2dae77d68b6c051b238a1467fa93e0ec34c3"
+          },
+          {
+            "amount": "30",
+            "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+            "tranche_id": 11,
+            "tx": "0x407d9a64209bd8f656d969ee2dde00c24347cbdb9c3f53d9026278390c80e325"
+          }
+        ],
+        "withdrawals": [],
+        "total_tokens": "45",
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "45"
+      },
+      {
+        "address": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "deposits": [
+          {
+            "amount": "80",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xde7e3f48359ad1473d4b6f05582e2bee121458b1103687037fca29ab95c9f50a"
+          },
+          {
+            "amount": "20",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xfeb720f64f2951e185db6e872e022575d3fd8477f85b2698890f70d8820fd596"
+          },
+          {
+            "amount": "15",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x8d55eb2b5f4091eaa0dee96242f8eb6bac12312415c202007695da4b9df96ac6"
+          },
+          {
+            "amount": "15",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xf7e1cb4b03d0f7664b4d7688029ed8ad4c468bf4b2e6ef941c59de4dce680496"
+          },
+          {
+            "amount": "25",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x3a6f6a47608e017b8d8a1495821514beed5fbb265176665aba6213987a4e0bde"
+          },
+          {
+            "amount": "20",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x1656fec2cd5d9bf5aeb907e64b222843e13ac0921f4dc9451e6db7d02611c742"
+          },
+          {
+            "amount": "30",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x20652e7dddc270c76be42c7496a968f5a0831dae46c12d1866c8b720c1070cb4"
+          },
+          {
+            "amount": "60",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x89b232cab8db6ae361d824c55ec20b0e59c0bc14fadb71d902bba3a801338258"
+          },
+          {
+            "amount": "15",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x5032a6328b99e190e893bd7feca96d465fca1996939c71fda986bdddc89897d8"
+          },
+          {
+            "amount": "20",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x9217321eb5e9b64157da6b8ab97a1ce927e64671095da3086be0edd7cd0ef709"
+          },
+          {
+            "amount": "200",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xf88b8ed5ce899f00f466830936599112ea678a4e5911801fb3e445c22eb0295f"
+          },
+          {
+            "amount": "100",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x0c0ea0139cc752d22c0f8a6b3ffa5c4bcdca1c5604089ebd0f34898f1049db61"
+          },
+          {
+            "amount": "90",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x29371816157718f7d5136d0ed8a0f1e09045ee3cfcd67199d45e3f4157f7e011"
+          },
+          {
+            "amount": "35",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x6a081b2c5dfa2d5c916a598569519605322721c5511d26cf4aed8e08e49cf700"
+          },
+          {
+            "amount": "30",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xc37be614ef14bbbedc808ffc7651fbb7a3c04e4d1612f00f19299da7916003e6"
+          }
+        ],
+        "withdrawals": [
+          {
+            "amount": "130",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xc39eefed84fded9118b3e8a84f7fdb79789725ce078421c07e4b9f0b14bb78f2"
+          },
+          {
+            "amount": "58.26122352505",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x249318d3c808f6ec92369ae9008fb479b35a0791fab00cc9d1a1b88a2fdd4ce8"
+          },
+          {
+            "amount": "170",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x7e67e8f61e2da7b26a4b08053f9ec3f63fa03c7d1c1907b440fc1d63317370b7"
+          },
+          {
+            "amount": "396.73877647495",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x01702228af643636ceb22064a23b1b22b66a992f3ec9be8f6d1788e6a996312b"
+          }
+        ],
+        "total_tokens": "755",
+        "withdrawn_tokens": "755",
+        "remaining_tokens": "0"
+      },
      {
        "address": "0xf83aaA5786516F7016DF9ead2CD9F14616dA0A13",
        "deposits": [
@@ -29046,21 +29243,6 @@
        "withdrawn_tokens": "0",
        "remaining_tokens": "12"
      },
-      {
-        "address": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
-        "deposits": [
-          {
-            "amount": "30",
-            "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
-            "tranche_id": 11,
-            "tx": "0x407d9a64209bd8f656d969ee2dde00c24347cbdb9c3f53d9026278390c80e325"
-          }
-        ],
-        "withdrawals": [],
-        "total_tokens": "30",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "30"
-      },
      {
        "address": "0x17bDc5F0D55c81754c4378Ea99C1888cb38DED72",
        "deposits": [
@@ -31417,100 +31599,6 @@
        "withdrawn_tokens": "2",
        "remaining_tokens": "0"
      },
-      {
-        "address": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-        "deposits": [
-          {
-            "amount": "25",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x3a6f6a47608e017b8d8a1495821514beed5fbb265176665aba6213987a4e0bde"
-          },
-          {
-            "amount": "20",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x1656fec2cd5d9bf5aeb907e64b222843e13ac0921f4dc9451e6db7d02611c742"
-          },
-          {
-            "amount": "30",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x20652e7dddc270c76be42c7496a968f5a0831dae46c12d1866c8b720c1070cb4"
-          },
-          {
-            "amount": "60",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x89b232cab8db6ae361d824c55ec20b0e59c0bc14fadb71d902bba3a801338258"
-          },
-          {
-            "amount": "15",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x5032a6328b99e190e893bd7feca96d465fca1996939c71fda986bdddc89897d8"
-          },
-          {
-            "amount": "20",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x9217321eb5e9b64157da6b8ab97a1ce927e64671095da3086be0edd7cd0ef709"
-          },
-          {
-            "amount": "200",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0xf88b8ed5ce899f00f466830936599112ea678a4e5911801fb3e445c22eb0295f"
-          },
-          {
-            "amount": "100",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x0c0ea0139cc752d22c0f8a6b3ffa5c4bcdca1c5604089ebd0f34898f1049db61"
-          },
-          {
-            "amount": "90",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x29371816157718f7d5136d0ed8a0f1e09045ee3cfcd67199d45e3f4157f7e011"
-          },
-          {
-            "amount": "35",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x6a081b2c5dfa2d5c916a598569519605322721c5511d26cf4aed8e08e49cf700"
-          },
-          {
-            "amount": "30",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0xc37be614ef14bbbedc808ffc7651fbb7a3c04e4d1612f00f19299da7916003e6"
-          }
-        ],
-        "withdrawals": [
-          {
-            "amount": "58.26122352505",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x249318d3c808f6ec92369ae9008fb479b35a0791fab00cc9d1a1b88a2fdd4ce8"
-          },
-          {
-            "amount": "170",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x7e67e8f61e2da7b26a4b08053f9ec3f63fa03c7d1c1907b440fc1d63317370b7"
-          },
-          {
-            "amount": "396.73877647495",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x01702228af643636ceb22064a23b1b22b66a992f3ec9be8f6d1788e6a996312b"
-          }
-        ],
-        "total_tokens": "625",
-        "withdrawn_tokens": "625",
-        "remaining_tokens": "0"
-      },
      {
        "address": "0xc6A53Dbb3423555C990Fc842A28CF58edC35DC73",
        "deposits": [
@@ -36682,7 +36770,7 @@
    "tranche_end": "2023-06-05T00:00:00.000Z",
    "total_added": "3732368.4671",
    "total_removed": "615950.831401702010493",
-    "locked_amount": "818711.104143272758740588448",
+    "locked_amount": "796232.273024709558568810279",
    "deposits": [
      {
        "amount": "1998.95815",
@@ -38030,8 +38118,8 @@
    "tranche_start": "2022-06-05T00:00:00.000Z",
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "15870102.715470999700000001",
-    "total_removed": "578564.32540623060826952",
-    "locked_amount": "8202784.5946557880134241221036125701121924",
+    "total_removed": "581409.88924190582035452",
+    "locked_amount": "8123076.1027882686093883722947201633400919",
    "deposits": [
      {
        "amount": "16249.93",
@@ -38535,6 +38623,21 @@
      }
    ],
    "withdrawals": [
+      {
+        "amount": "827.191309560501875",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xf1829033f07f9492807a2ca3684d491d7f6986b4c28c795be46873dcebc31e46"
+      },
+      {
+        "amount": "549.637752174555",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x2d99d4051c6ac81037db1eebf0f86b335ed9d1957f281134d07da192644a6a8c"
+      },
+      {
+        "amount": "1468.73477394015521",
+        "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+        "tx": "0x525f9427c131bc2fdea7f556d16b7781faaa41e09c7735d1c02d1f7585cc49ab"
+      },
      {
        "amount": "535.4042378778335",
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -40298,6 +40401,18 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "827.191309560501875",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0xf1829033f07f9492807a2ca3684d491d7f6986b4c28c795be46873dcebc31e46"
+          },
+          {
+            "amount": "549.637752174555",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x2d99d4051c6ac81037db1eebf0f86b335ed9d1957f281134d07da192644a6a8c"
+          },
          {
            "amount": "535.4042378778335",
            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -41512,8 +41627,8 @@
          }
        ],
        "total_tokens": "259998.8875",
-        "withdrawn_tokens": "125198.723804229970125",
-        "remaining_tokens": "134800.163695770029875"
+        "withdrawn_tokens": "126575.552865965027",
+        "remaining_tokens": "133423.334634034973"
      },
      {
        "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@@ -41734,6 +41849,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "1468.73477394015521",
+            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+            "tranche_id": 2,
+            "tx": "0x525f9427c131bc2fdea7f556d16b7781faaa41e09c7735d1c02d1f7585cc49ab"
+          },
          {
            "amount": "1640.93679110232897",
            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -41976,8 +42097,8 @@
          }
        ],
        "total_tokens": "150551.801",
-        "withdrawn_tokens": "71968.00074341356817",
-        "remaining_tokens": "78583.80025658643183"
+        "withdrawn_tokens": "73436.73551735372338",
+        "remaining_tokens": "77115.06548264627662"
      },
      {
        "address": "0x4d982Ab0823fD2f48e934a7be2bb0a5374a26148",
@@ -43750,8 +43871,8 @@
    "tranche_start": "2021-11-05T00:00:00.000Z",
    "tranche_end": "2023-05-05T00:00:00.000Z",
    "total_added": "14597706.0446472999",
-    "total_removed": "5574106.313654749390775906",
-    "locked_amount": "1851313.136221766548389384168374076",
+    "total_removed": "5576016.212508497282613906",
+    "locked_amount": "1777726.765473197066260457387430519",
    "deposits": [
      {
        "amount": "129284.449",
@@ -43960,6 +44081,16 @@
      }
    ],
    "withdrawals": [
+      {
+        "amount": "1147.2913244855584015",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0xabe4091d256d6a561d5629b7e74395716317fd5c1e705b696e054328ffc7e3b6"
+      },
+      {
+        "amount": "762.6075292623334365",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0xb4d9a135d2cfa85e52b9bb68a09ffaecde4ae4d1fab95e6f44d4dd902e2a45c9"
+      },
      {
        "amount": "800.792718381487871",
        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -46915,6 +47046,18 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "1147.2913244855584015",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0xabe4091d256d6a561d5629b7e74395716317fd5c1e705b696e054328ffc7e3b6"
+          },
+          {
+            "amount": "762.6075292623334365",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0xb4d9a135d2cfa85e52b9bb68a09ffaecde4ae4d1fab95e6f44d4dd902e2a45c9"
+          },
          {
            "amount": "800.792718381487871",
            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -49431,8 +49574,8 @@
          }
        ],
        "total_tokens": "359123.469575",
-        "withdrawn_tokens": "313003.3373242425157625",
-        "remaining_tokens": "46120.1322507574842375"
+        "withdrawn_tokens": "314913.2361779904076005",
+        "remaining_tokens": "44210.2333970095923995"
      },
      {
        "address": "0xBdd412797c1B78535Afc5F71503b91fAbD0160fB",
@@ -50776,7 +50919,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "5778205.3912159303",
    "total_removed": "3055768.040200763217391295",
-    "locked_amount": "414561.613229668462868788229229953",
+    "locked_amount": "385487.193100244108102591696423251",
    "deposits": [
      {
        "amount": "552496.6455",
@@ -52814,8 +52957,8 @@
    "tranche_start": "2022-06-05T00:00:00.000Z",
    "tranche_end": "2023-06-05T00:00:00.000Z",
    "total_added": "472355.6199999996",
-    "total_removed": "34187.9039333162685",
-    "locked_amount": "129729.454403691544213975940842212",
+    "total_removed": "34416.2282090650685",
+    "locked_amount": "126167.555118478468636691490005064",
    "deposits": [
      {
        "amount": "3000",
@@ -59434,6 +59577,21 @@
      }
    ],
    "withdrawals": [
+      {
+        "amount": "129.867928716",
+        "user": "0x09996E1a67c371400bD5f52DF841f77B1741eB9d",
+        "tx": "0x6384e0bc0ae55ff0d56b1ade7096a8b706b1f71f50ee5b6e2de23dc139295352"
+      },
+      {
+        "amount": "53.3902891928",
+        "user": "0xB168ce7397Dc52ed13B4eD8119f309ec30DDa2c9",
+        "tx": "0x2bb633b4c030fb357ab2c015702366a956459c3b68187b16718629a78ff0ac23"
+      },
+      {
+        "amount": "45.06605784",
+        "user": "0x7708B79e2bc3b7ab816E66aF33A8c9385f0FcA4b",
+        "tx": "0x1c5bff9afd9ddc3c385d5a089f9784606b0bac24e59dba9f16e1445e52a9c41b"
+      },
      {
        "amount": "57.900076104",
        "user": "0x96d882E908C06cD697Ea07266Fb8D14ae129A50b",
@@ -69094,6 +69252,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "53.3902891928",
+            "user": "0xB168ce7397Dc52ed13B4eD8119f309ec30DDa2c9",
+            "tranche_id": 5,
+            "tx": "0x2bb633b4c030fb357ab2c015702366a956459c3b68187b16718629a78ff0ac23"
+          },
          {
            "amount": "48.7169590306",
            "user": "0xB168ce7397Dc52ed13B4eD8119f309ec30DDa2c9",
@@ -69102,8 +69266,8 @@
          }
        ],
        "total_tokens": "140",
-        "withdrawn_tokens": "48.7169590306",
-        "remaining_tokens": "91.2830409694"
+        "withdrawn_tokens": "102.1072482234",
+        "remaining_tokens": "37.8927517766"
      },
      {
        "address": "0xdD37b0ff9aE7e2EDbABdc291e8d44431084dA4c2",
@@ -75139,6 +75303,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "129.867928716",
+            "user": "0x09996E1a67c371400bD5f52DF841f77B1741eB9d",
+            "tranche_id": 5,
+            "tx": "0x6384e0bc0ae55ff0d56b1ade7096a8b706b1f71f50ee5b6e2de23dc139295352"
+          },
          {
            "amount": "15.684119736",
            "user": "0x09996E1a67c371400bD5f52DF841f77B1741eB9d",
@@ -75147,8 +75317,8 @@
          }
        ],
        "total_tokens": "200",
-        "withdrawn_tokens": "15.684119736",
-        "remaining_tokens": "184.315880264"
+        "withdrawn_tokens": "145.552048452",
+        "remaining_tokens": "54.447951548"
      },
      {
        "address": "0xb2495ea94f7f329Ca3d91342e0c7422d97ac5a9F",
@@ -77939,6 +78109,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "45.06605784",
+            "user": "0x7708B79e2bc3b7ab816E66aF33A8c9385f0FcA4b",
+            "tranche_id": 5,
+            "tx": "0x1c5bff9afd9ddc3c385d5a089f9784606b0bac24e59dba9f16e1445e52a9c41b"
+          },
          {
            "amount": "39.25738204",
            "user": "0x7708B79e2bc3b7ab816E66aF33A8c9385f0FcA4b",
@@ -77965,8 +78141,8 @@
          }
        ],
        "total_tokens": "400",
-        "withdrawn_tokens": "247.514294772",
-        "remaining_tokens": "152.485705228"
+        "withdrawn_tokens": "292.580352612",
+        "remaining_tokens": "107.419647388"
      },
      {
        "address": "0x32836171Ef226Dbb40bc9463993deC054e72a2E5",
@@ -13,7 +13,7 @@ export const NoRewards = () => {
  return (
    <div className={classes}>
      <SubHeading title={t('noRewardsHaveBeenDistributedYet')} />
-      <p className="font-alpha text-xl">{t('checkBackSoon')}</p>
+      <p className="font-alpha calt text-xl">{t('checkBackSoon')}</p>
    </div>
  );
 };
@@ -190,6 +190,24 @@ describe('capsule', { tags: '@slow' }, () => {
    cy.setVegaWallet();
  });

+  it('shows node health', function () {
+    const market = this.market;
+    cy.visit(`/#/markets/${market.id}`);
+    cy.getByTestId('node-health')
+      .children()
+      .first()
+      .should('contain.text', 'Operational')
+      .next()
+      .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
+      .next()
+      .then(($el) => {
+        const blockHeight = parseInt($el.text());
+        // block height will increase over the course of the test run so best
+        // we can do here is check that its showing something sensible
+        expect(blockHeight).to.be.greaterThan(0);
+      });
+  });
+
  it('can place and receive an order', function () {
    const market = this.market;
    cy.visit(`/#/markets/${market.id}`);
@@ -304,4 +304,18 @@ describe('home', { tags: '@regression' }, () => {
      });
    });
  });
+
+  describe('footer', () => {
+    it('shows current block height', () => {
+      cy.visit('/');
+      cy.getByTestId('node-health')
+        .children()
+        .first()
+        .should('contain.text', 'Operational')
+        .next()
+        .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
+        .next()
+        .should('contain.text', '100'); // all mocked queries have x-block-height header set to 100
+    });
+  });
 });
@@ -84,7 +84,7 @@ export const TradeMarketHeader = ({
        heading={t('Volume (24h)')}
        testId="market-volume"
        description={t(
-          'The total amount of assets traded in the last 24 hours.'
+          'The total number of contracts traded in the last 24 hours.'
        )}
      >
        <Last24hVolume
@@ -1,20 +1,35 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { NodeUrl, NodeHealth } from './footer';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NodeHealth, NodeUrl, HealthIndicator } from './footer';

-describe('NodeUrl', () => {
-  it('can open node switcher by clicking the node url', () => {
-    const mockOpenNodeSwitcher = jest.fn();
-    const node = 'https://api.n99.somenetwork.vega.xyz';
-
-    render(<NodeUrl url={node} openNodeSwitcher={mockOpenNodeSwitcher} />);
-
-    fireEvent.click(screen.getByText(/n99/));
-    expect(mockOpenNodeSwitcher).toHaveBeenCalled();
+describe('NodeHealth', () => {
+  it('controls the node switcher dialog', async () => {
+    const mockOnClick = jest.fn();
+    render(
+      <NodeHealth
+        onClick={mockOnClick}
+        url={'https://api.n99.somenetwork.vega.xyz'}
+        blockHeight={100}
+        blockDiff={0}
+      />
+    );
+    await userEvent.click(screen.getByRole('button'));
+    expect(mockOnClick).toHaveBeenCalled();
  });
 });

-describe('NodeHealth', () => {
-  const mockOpenNodeSwitcher = jest.fn();
+describe('NodeUrl', () => {
+  it('renders correct part of node url', () => {
+    const node = 'https://api.n99.somenetwork.vega.xyz';
+    const expectedText = node.split('.').slice(1).join('.');
+
+    render(<NodeUrl url={node} />);
+
+    expect(screen.getByText(expectedText)).toBeInTheDocument();
+  });
+});
+
+describe('HealthIndicator', () => {
  const cases = [
    { diff: 0, classname: 'bg-vega-green-550', text: 'Operational' },
    { diff: 5, classname: 'bg-warning', text: '5 Blocks behind' },
@@ -23,16 +38,9 @@ describe('NodeHealth', () => {
  it.each(cases)(
    'renders correct text and indicator color for $diff block difference',
    (elem) => {
-      render(
-        <NodeHealth
-          blockDiff={elem.diff}
-          openNodeSwitcher={mockOpenNodeSwitcher}
-        />
-      );
+      render(<HealthIndicator blockDiff={elem.diff} />);
      expect(screen.getByTestId('indicator')).toHaveClass(elem.classname);
      expect(screen.getByText(elem.text)).toBeInTheDocument();
-      fireEvent.click(screen.getByText(elem.text));
-      expect(mockOpenNodeSwitcher).toHaveBeenCalled();
    }
  );
 });
@@ -1,6 +1,8 @@
 import { useEnvironment, useNodeHealth } from '@vegaprotocol/environment';
 import { t, useNavigatorOnline } from '@vegaprotocol/react-helpers';
-import { ButtonLink, Indicator, Intent } from '@vegaprotocol/ui-toolkit';
+import { Indicator, Intent } from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { useGlobalStore } from '../../stores';

 export const Footer = () => {
@@ -8,45 +10,64 @@ export const Footer = () => {
  const setNodeSwitcher = useGlobalStore(
    (store) => (open: boolean) => store.update({ nodeSwitcherDialog: open })
  );
-  const { blockDiff } = useNodeHealth();
+  const { blockDiff, datanodeBlockHeight } = useNodeHealth();

  return (
-    <footer className="px-4 py-1 text-xs border-t border-default">
-      <div className="flex justify-between">
-        <div className="flex gap-2">
-          {VEGA_URL && (
-            <>
-              <NodeHealth
-                blockDiff={blockDiff}
-                openNodeSwitcher={() => setNodeSwitcher(true)}
-              />
-              {' | '}
-              <NodeUrl
-                url={VEGA_URL}
-                openNodeSwitcher={() => setNodeSwitcher(true)}
-              />
-            </>
-          )}
-        </div>
+    <footer className="px-4 py-1 text-xs border-t border-default text-vega-light-300 dark:text-vega-dark-300">
+      {/* Pull left to align with top nav, due to button padding */}
+      <div className="-ml-2">
+        {VEGA_URL && (
+          <NodeHealth
+            url={VEGA_URL}
+            blockHeight={datanodeBlockHeight}
+            blockDiff={blockDiff}
+            onClick={() => setNodeSwitcher(true)}
+          />
+        )}
      </div>
    </footer>
  );
 };
+interface NodeHealthProps {
+  url: string;
+  blockHeight: number | undefined;
+  blockDiff: number | null;
+  onClick: () => void;
+}
+
+export const NodeHealth = ({
+  url,
+  blockHeight,
+  blockDiff,
+  onClick,
+}: NodeHealthProps) => {
+  return (
+    <FooterButton onClick={onClick} data-testid="node-health">
+      <FooterButtonPart>
+        <HealthIndicator blockDiff={blockDiff} />
+      </FooterButtonPart>
+      <FooterButtonPart>
+        <NodeUrl url={url} />
+      </FooterButtonPart>
+      <FooterButtonPart>
+        <span title={t('Block height')}>{blockHeight}</span>
+      </FooterButtonPart>
+    </FooterButton>
+  );
+};

 interface NodeUrlProps {
  url: string;
-  openNodeSwitcher: () => void;
 }

-export const NodeUrl = ({ url, openNodeSwitcher }: NodeUrlProps) => {
+export const NodeUrl = ({ url }: NodeUrlProps) => {
  // get base url from api url, api sub domain
  const urlObj = new URL(url);
  const nodeUrl = urlObj.origin.replace(/^[^.]+\./g, '');
-  return <ButtonLink onClick={openNodeSwitcher}>{nodeUrl}</ButtonLink>;
+  return <span title={t('Connected node')}>{nodeUrl}</span>;
 };

-interface NodeHealthProps {
-  openNodeSwitcher: () => void;
+interface HealthIndicatorProps {
  blockDiff: number | null;
 }

@@ -54,10 +75,7 @@ interface NodeHealthProps {
 // deemed acceptable for "Good" status
 const BLOCK_THRESHOLD = 3;

-export const NodeHealth = ({
-  blockDiff,
-  openNodeSwitcher,
-}: NodeHealthProps) => {
+export const HealthIndicator = ({ blockDiff }: HealthIndicatorProps) => {
  const online = useNavigatorOnline();

  let intent = Intent.Success;
@@ -76,9 +94,36 @@ export const NodeHealth = ({
  }

  return (
-    <>
+    <span title={t('Node health')}>
      <Indicator variant={intent} />
-      <ButtonLink onClick={openNodeSwitcher}>{text}</ButtonLink>
-    </>
+      {text}
+    </span>
+  );
+};
+
+type FooterButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+const FooterButton = (props: FooterButtonProps) => {
+  const buttonClasses = classNames(
+    'px-2 py-0.5 rounded-md',
+    'enabled:hover:bg-vega-light-150',
+    'dark:enabled:hover:bg-vega-dark-150'
+  );
+  return <button {...props} className={buttonClasses} />;
+};
+
+const FooterButtonPart = ({ children }: { children: ReactNode }) => {
+  return (
+    <span
+      className={classNames(
+        'relative inline-block mr-2 last:mr-0 pr-2 last:pr-0',
+        'last:after:hidden',
+        'after:content after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2',
+        'after:h-3 after:w-1 after:border-r',
+        'after:border-vega-light-300 dark:after:border-vega-dark-300'
+      )}
+    >
+      {children}
+    </span>
  );
 };
@@ -24,7 +24,7 @@ export default function Document() {
          <script src="/assets/env-config.js" type="text/javascript" />
        ) : null}
      </Head>
-      <body className="font-alpha liga-0-calt-0">
+      <body className="font-alpha">
        <Main />
        <NextScript />
      </body>
@@ -98,7 +98,7 @@ export const AssetDetailsDialog = ({
      }}
    >
      {content}
-      <p className="text-sm mb-4">
+      <p className="text-sm my-4">
        {t(
          'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
          [assetSymbol]
@@ -1,9 +1,8 @@
-import { useEtherscanLink } from '@vegaprotocol/environment';
+import { ContractAddressLink } from '@vegaprotocol/environment';
 import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
 import type * as Schema from '@vegaprotocol/types';
 import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit';
 import { CopyWithTooltip, Icon } from '@vegaprotocol/ui-toolkit';
-import { Link } from '@vegaprotocol/ui-toolkit';
 import {
  KeyValueTable,
  KeyValueTableRow,
@@ -276,16 +275,3 @@ export const AssetDetailsTable = ({
    </KeyValueTable>
  );
 };
-
-// Separate component for the link as otherwise eslint will complain
-// about useEnvironment being used in a component
-// named with a lowercase 'value'
-const ContractAddressLink = ({ address }: { address: string }) => {
-  const etherscanLink = useEtherscanLink();
-  const href = etherscanLink(`/address/${address}`);
-  return (
-    <Link href={href} target="_blank" title={t('View on etherscan')}>
-      {address}
-    </Link>
-  );
-};
@@ -18,6 +18,7 @@ import { addMockTransactionResponse } from './lib/commands/mock-transaction-resp
 import { addCreateMarket } from './lib/commands/create-market';
 import { addConnectPublicKey } from './lib/commands/add-connect-public-key';
 import { addVegaWalletSubmitProposal } from './lib/commands/vega-wallet-submit-proposal';
+import { addGetNodes } from './lib/commands/get-nodes';

 addGetTestIdcommand();
 addSlackCommand();
@@ -28,6 +29,7 @@ addMockWeb3ProviderCommand();
 addHighlightLog();
 addVegaWalletReceiveFaucetedAsset();
 addGetAssets();
+addGetNodes();
 addContainsExactly();
 addGetNetworkParameters();
 addUpdateCapsuleMultiSig();
@@ -1,13 +1,14 @@
 import { gql } from '@apollo/client';
 import { print } from 'graphql';
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { edgesToList } from '../utils';

 declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace Cypress {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface Chainable<Subject> {
-      getAssets(): Chainable<Record<string, AssetFieldsFragment>>;
+      getAssets(): Chainable<Array<AssetFieldsFragment>>;
    }
  }
 }
@@ -72,12 +73,6 @@ export function addGetAssets() {
      headers: { 'content-type': 'application/json' },
    })
      .its('body.data.assetsConnection.edges')
-      .then((edges) => {
-        // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
-        return edges.reduce((list, edge) => {
-          list[edge.node.name] = edge.node;
-          return list;
-        }, {});
-      });
+      .then(edgesToList);
  });
 }
@@ -0,0 +1,55 @@
+import { gql } from '@apollo/client';
+import type { Node } from '@vegaprotocol/types';
+import { print } from 'graphql';
+import { edgesToList } from '../utils';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      getNodes(): Chainable<Array<Partial<Node>>>;
+    }
+  }
+}
+
+export function addGetNodes() {
+  // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
+  Cypress.Commands.add('getNodes', () => {
+    const query = gql`
+      query Nodes {
+        nodesConnection {
+          edges {
+            node {
+              __typename
+              avatarUrl
+              ethereumAddress
+              id
+              infoUrl
+              location
+              name
+              pendingStake
+              pubkey
+              stakedByDelegates
+              stakedByOperator
+              stakedTotal
+              status
+              tmPubkey
+            }
+          }
+        }
+      }
+    `;
+
+    cy.request({
+      method: 'POST',
+      url: `http://localhost:3028/query`,
+      body: {
+        query: print(query),
+      },
+      headers: { 'content-type': 'application/json' },
+    })
+      .its(`body.data.nodesConnection.edges`)
+      .then(edgesToList);
+  });
+}
@@ -23,8 +23,8 @@ export function addVegaWalletReceiveFaucetedAsset() {
      // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
      cy.getAssets().then((assets) => {
        console.log(assets);
-        const asset = assets[assetName];
-        if (assets[assetName] !== undefined) {
+        const asset = assets.find((a) => a.name === assetName);
+        if (asset) {
          for (let i = 0; i < asset.decimals; i++) amount += '0';
          cy.exec(
            `curl -X POST -d '{"amount": "${amount}", "asset": "${asset.id}", "party": "${vegaWalletPublicKey}"}' http://localhost:1790/api/v1/mint`
@@ -38,15 +38,9 @@ export function addVegaWalletReceiveFaucetedAsset() {
              );
            });
        } else {
-          const validAssets = Object.keys(assets)
-            .filter((key) => key.includes('fake'))
-            .reduce((obj, key) => {
-              return Object.assign(obj, {
-                [key]: assets[key],
-              });
-            }, {});
+          const validAssets = assets.filter((a) => a.name.includes('fake'));
          assert.exists(
-            assets[assetName],
+            asset,
            `${assetName} is not a faucet-able asset, only the following assets can be faucet-ed: ${validAssets}`
          );
        }
@@ -32,7 +32,8 @@ export const aliasGQLQuery = (
  operationName: string,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data?: any,
-  errors?: Partial<GraphQLError>[]
+  errors?: Partial<GraphQLError>[],
+  headers?: Record<string, string>
 ) => {
  if (hasOperationName(req, operationName)) {
    req.alias = operationName;
@@ -40,6 +41,13 @@ export const aliasGQLQuery = (
      req.reply({
        statusCode: 200,
        body: { ...(data && { data }), ...(errors && { errors }) },
+        headers: {
+          ...req.headers,
+          // basic default block height header response
+          'x-block-height': '100',
+          'x-block-timestamp': Date.now().toString() + '0'.repeat(6),
+          ...headers,
+        },
      });
    }
  }
@@ -62,3 +62,11 @@ const checkSortChange = (tabsArr: string[], column: string) => {
    });
  });
 };
+
+type Edges = { node: unknown }[];
+export function edgesToList(edges: Edges) {
+  // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
+  return edges.map((edge) => {
+    return edge.node;
+  });
+}
@@ -12,7 +12,7 @@ export const DealTicketButton = ({ disabled, variant }: Props) => {
  const { pubKey, isReadOnly } = useVegaWallet();
  const isDisabled = !pubKey || isReadOnly || disabled;
  return (
-    <div className="mb-4">
+    <div className="mb-2">
      <Button
        variant={variant}
        fill
@@ -31,7 +31,7 @@ export const DealTicketFeeDetails = ({
    <div>
      {details.map(({ label, value, labelDescription, symbol }) => (
        <div
-          key={label}
+          key={typeof label === 'string' ? label : 'value-dropdown'}
          className="text-xs mt-2 flex justify-between items-center gap-4 flex-wrap"
        >
          <div>
@@ -38,7 +38,7 @@ export const DealTicketLimitAmount = ({
  };

  return (
-    <div className="mb-6">
+    <div className="mb-2">
      <div className="flex items-center gap-4">
        <div className="flex-1">
          <FormGroup
@@ -29,9 +29,9 @@ export const DealTicketMarketAmount = ({
    : undefined;

  return (
-    <div className="mb-6">
+    <div className="mb-2">
      <div className="flex items-end gap-4 mb-2">
-        <div className="flex-1 text-sm">Size</div>
+        <div className="flex-1 text-sm">{t('Size')}</div>
        <div />
        <div className="flex-2 text-sm text-right">
          {isMarketInAuction(marketData.marketTradingMode) && (
@@ -307,7 +307,7 @@ const SummaryMessage = memo(
    );
    if (isReadOnly) {
      return (
-        <div className="mb-4">
+        <div className="mb-2">
          <InputError testId="dealticket-error-message-summary">
            {
              'You need to connect your own wallet to start trading on this market'
@@ -318,7 +318,7 @@ const SummaryMessage = memo(
    }
    if (!pubKey) {
      return (
-        <div className="mb-4">
+        <div className="mb-2">
          <Notification
            testId={'deal-ticket-connect-wallet'}
            intent={Intent.Warning}
@@ -343,7 +343,7 @@ const SummaryMessage = memo(
    }
    if (errorMessage === SummaryValidationType.NoCollateral) {
      return (
-        <div className="mb-4">
+        <div className="mb-2">
          <ZeroBalanceError
            asset={market.tradableInstrument.instrument.product.settlementAsset}
            onClickCollateral={onClickCollateral}
@@ -356,7 +356,7 @@ const SummaryMessage = memo(
    // submission render that first
    if (errorMessage) {
      return (
-        <div className="mb-4">
+        <div className="mb-2">
          <InputError testId="dealticket-error-message-summary">
            {errorMessage}
          </InputError>
@@ -368,7 +368,7 @@ const SummaryMessage = memo(
    // balance render the margin warning, but still allow submission
    if (balanceError) {
      return (
-        <div className="mb-4">
+        <div className="mb-2">
          <MarginWarning balance={balance} margin={margin} asset={asset} />;
        </div>
      );
@@ -383,7 +383,7 @@ const SummaryMessage = memo(
      ].includes(marketData.marketTradingMode)
    ) {
      return (
-        <div className="mb-4">
+        <div className="mb-2">
          <Notification
            intent={Intent.Warning}
            testId={'dealticket-warning-auction'}
@@ -0,0 +1,13 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Link } from '@vegaprotocol/ui-toolkit';
+import { useEtherscanLink } from '../hooks';
+
+export const ContractAddressLink = ({ address }: { address: string }) => {
+  const etherscanLink = useEtherscanLink();
+  const href = etherscanLink(`/address/${address}`);
+  return (
+    <Link href={href} target="_blank" title={t('View on etherscan')}>
+      {address}
+    </Link>
+  );
+};
@@ -2,3 +2,4 @@ export * from './network-loader';
 export * from './network-switcher';
 export * from './node-guard';
 export * from './node-switcher';
+export * from './contract-address-link';
@@ -94,6 +94,7 @@ export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =
 export const TOKEN_GOVERNANCE = '/proposals';
 export const TOKEN_PROPOSALS = '/proposals';
 export const TOKEN_PROPOSAL = '/proposals/:id';
+export const TOKEN_VALIDATOR = '/validators/:id';

 // Explorer pages
 export const EXPLORER_TX = '/txs/:hash';
@@ -4,14 +4,16 @@ import { useHeaderStore } from '@vegaprotocol/apollo-client';
 import { useEnvironment } from './use-environment';
 import { fromNanoSeconds } from '@vegaprotocol/react-helpers';

+const POLL_INTERVAL = 1000;
+
 export const useNodeHealth = () => {
  const url = useEnvironment((store) => store.VEGA_URL);
  const headerStore = useHeaderStore();
  const headers = url ? headerStore[url] : undefined;
-  const { data, error, loading, stopPolling } = useStatisticsQuery({
-    pollInterval: 1000,
-    fetchPolicy: 'no-cache',
-  });
+  const { data, error, loading, startPolling, stopPolling } =
+    useStatisticsQuery({
+      fetchPolicy: 'no-cache',
+    });

  const blockDiff = useMemo(() => {
    if (!data?.statistics.blockHeight) {
@@ -28,8 +30,13 @@ export const useNodeHealth = () => {
  useEffect(() => {
    if (error) {
      stopPolling();
+      return;
    }
-  }, [error, stopPolling]);
+
+    if (!('Cypress' in window)) {
+      startPolling(POLL_INTERVAL);
+    }
+  }, [error, startPolling, stopPolling]);

  return {
    error,
@@ -1,11 +1,10 @@
 import React from 'react';
 import {
  PriceCell,
-  Vol,
+  VolCell,
  CumulativeVol,
  addDecimalsFormatNumber,
  VolumeType,
-  addDecimal,
 } from '@vegaprotocol/react-helpers';

 interface OrderbookRowProps {
@@ -42,17 +41,17 @@ export const OrderbookRow = React.memo(
  }: OrderbookRowProps) => {
    return (
      <>
-        <Vol
+        <VolCell
          testId={`bid-vol-${price}`}
          value={bid}
-          valueFormatted={addDecimal(bid, positionDecimalPlaces)}
+          valueFormatted={addDecimalsFormatNumber(bid, positionDecimalPlaces)}
          relativeValue={relativeBid}
          type={VolumeType.bid}
        />
-        <Vol
+        <VolCell
          testId={`ask-vol-${price}`}
          value={ask}
-          valueFormatted={addDecimal(ask, positionDecimalPlaces)}
+          valueFormatted={addDecimalsFormatNumber(ask, positionDecimalPlaces)}
          relativeValue={relativeAsk}
          type={VolumeType.ask}
        />
@@ -145,7 +145,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
            }}
            decimalPlaces={market.decimalPlaces}
          />
-          <p className="text-xs">
+          <p className="text-xs mt-4">
            {t(
              'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
              [assetSymbol, quoteUnit]
@@ -249,7 +249,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
            dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
            ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
          />
-          <p className="text-xs">
+          <p className="text-xs mt-4">
            {t(
              'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
              [assetSymbol, quoteUnit]
@@ -309,27 +309,40 @@ export const Info = ({ market, onSelect }: InfoProps) => {
      ),
    },
    ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
-      (trigger, i) => ({
-        title: t(`Price monitoring trigger ${i + 1}`),
-        content: <MarketInfoTable data={trigger} />,
-      })
+      (trigger, i) => {
+        const bounds = market.data?.priceMonitoringBounds?.[i];
+        return {
+          title: t(`Price monitoring bounds ${i + 1}`),
+          content: (
+            <div className="text-xs">
+              <div className="grid grid-cols-2 text-xs mb-4">
+                <p className="col-span-1">
+                  {t('%s% probability of trading', [
+                    formatNumber(trigger.probability * 100),
+                  ])}
+                </p>
+                <p className="col-span-1 text-right">
+                  {t('Within %s seconds', [formatNumber(trigger.horizonSecs)])}
+                </p>
+              </div>
+              <div className="pl-2 pb-0 text-xs border-l-2">
+                {bounds && (
+                  <MarketInfoTable
+                    data={{
+                      highestPrice: bounds.maxValidPrice,
+                      lowestPrice: bounds.minValidPrice,
+                      referencePrice: bounds.referencePrice,
+                    }}
+                    decimalPlaces={assetDecimals}
+                    assetSymbol={quoteUnit}
+                  />
+                )}
+              </div>
+            </div>
+          ),
+        };
+      }
    ),
-    ...(market.data?.priceMonitoringBounds || []).map((trigger, i) => ({
-      title: t(`Price monitoring bound ${i + 1}`),
-      content: (
-        <>
-          <MarketInfoTable
-            data={trigger}
-            decimalPlaces={market.decimalPlaces}
-            omits={['referencePrice', '__typename']}
-          />
-          <MarketInfoTable
-            data={{ referencePrice: trigger.referencePrice }}
-            decimalPlaces={assetDecimals}
-          />
-        </>
-      ),
-    })),
    {
      title: t('Liquidity monitoring parameters'),
      content: (
@@ -369,37 +382,38 @@ export const Info = ({ market, onSelect }: InfoProps) => {
      content: (
        <>
          <p className="text-xs mb-4">
-            {`For liquidity orders count towards a commitment they have to be
-            within either the liquidity or price monitoring bounds (whichever is
-            tighter).`}
+            {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
          </p>
          <p className="text-xs mb-4">
            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
            price.`}
          </p>
-          <MarketInfoTable
-            data={{
-              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
-              lowestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .minus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-              highestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .plus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-            }}
-          ></MarketInfoTable>
+          <div className="pl-2 pb-0 text-xs border-l-2">
+            <MarketInfoTable
+              data={{
+                liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+                lowestPrice:
+                  market.data?.midPrice &&
+                  `${addDecimalsFormatNumber(
+                    new BigNumber(1)
+                      .minus(market.lpPriceRange)
+                      .times(market.data.midPrice)
+                      .toString(),
+                    market.decimalPlaces
+                  )} ${quoteUnit}`,
+                highestPrice:
+                  market.data?.midPrice &&
+                  `${addDecimalsFormatNumber(
+                    new BigNumber(1)
+                      .plus(market.lpPriceRange)
+                      .times(market.data.midPrice)
+                      .toString(),
+                    market.decimalPlaces
+                  )} ${quoteUnit}`,
+              }}
+            ></MarketInfoTable>
+          </div>
        </>
      ),
    },
@@ -63,7 +63,7 @@ export const StatsManager = ({ className }: StatsManagerProps) => {
    <div className={classes}>
      <h3
        data-testid="stats-environment"
-        className="font-alpha uppercase text-2xl pb-8 col-span-full"
+        className="font-alpha calt uppercase text-2xl pb-8 col-span-full"
      >
        {(error && `/ ${error}`) ||
          (data ? `/ ${VEGA_ENV}` : '/ Connecting...')}
@@ -0,0 +1,267 @@
+import { countryCodeToFlagEmoji, FALLBACK_FLAG } from './flag-emoji';
+
+// REGIONAL INDICATOR SYMBOLS:
+// 🇦
+// 🇧
+// 🇨
+// 🇩
+// 🇪
+// 🇫
+// 🇬
+// 🇭
+// 🇮
+// 🇯
+// 🇰
+// 🇱
+// 🇲
+// 🇳
+// 🇴
+// 🇵
+// 🇶
+// 🇷
+// 🇸
+// 🇹
+// 🇺
+// 🇻
+// 🇼
+// 🇽
+// 🇾
+// 🇿
+
+const cases = [
+  ['AC', '🇦🇨'],
+  ['AD', '🇦🇩'],
+  ['AE', '🇦🇪'],
+  ['AF', '🇦🇫'],
+  ['AG', '🇦🇬'],
+  ['AI', '🇦🇮'],
+  ['AL', '🇦🇱'],
+  ['AM', '🇦🇲'],
+  ['AO', '🇦🇴'],
+  ['AR', '🇦🇷'],
+  ['AS', '🇦🇸'],
+  ['AT', '🇦🇹'],
+  ['AQ', '🇦🇶'],
+  ['AW', '🇦🇼'],
+  ['AZ', '🇦🇿'],
+  ['BA', '🇧🇦'],
+  ['BB', '🇧🇧'],
+  ['BD', '🇧🇩'],
+  ['BE', '🇧🇪'],
+  ['BF', '🇧🇫'],
+  ['BG', '🇧🇬'],
+  ['BH', '🇧🇭'],
+  ['BI', '🇧🇮'],
+  ['BJ', '🇧🇯'],
+  ['BL', '🇧🇱'],
+  ['BM', '🇧🇲'],
+  ['BN', '🇧🇳'],
+  ['BO', '🇧🇴'],
+  ['BR', '🇧🇷'],
+  ['BS', '🇧🇸'],
+  ['BT', '🇧🇹'],
+  ['BQ', '🇧🇶'],
+  ['BW', '🇧🇼'],
+  ['BY', '🇧🇾'],
+  ['BZ', '🇧🇿'],
+  ['CA', '🇨🇦'],
+  ['CC', '🇨🇨'],
+  ['CD', '🇨🇩'],
+  ['CF', '🇨🇫'],
+  ['CG', '🇨🇬'],
+  ['CH', '🇨🇭'],
+  ['CI', '🇨🇮'],
+  ['CK', '🇨🇰'],
+  ['CL', '🇨🇱'],
+  ['CM', '🇨🇲'],
+  ['CN', '🇨🇳'],
+  ['CO', '🇨🇴'],
+  ['CP', '🇨🇵'],
+  ['CR', '🇨🇷'],
+  ['CW', '🇨🇼'],
+  ['CY', '🇨🇾'],
+  ['CZ', '🇨🇿'],
+  ['DE', '🇩🇪'],
+  ['DG', '🇩🇬'],
+  ['DJ', '🇩🇯'],
+  ['DK', '🇩🇰'],
+  ['DM', '🇩🇲'],
+  ['DO', '🇩🇴'],
+  ['DZ', '🇩🇿'],
+  ['EA', '🇪🇦'],
+  ['EC', '🇪🇨'],
+  ['EE', '🇪🇪'],
+  ['EG', '🇪🇬'],
+  ['EH', '🇪🇭'],
+  ['ER', '🇪🇷'],
+  ['ES', '🇪🇸'],
+  ['ET', '🇪🇹'],
+  ['FI', '🇫🇮'],
+  ['FJ', '🇫🇯'],
+  ['FK', '🇫🇰'],
+  ['FM', '🇫🇲'],
+  ['FO', '🇫🇴'],
+  ['FR', '🇫🇷'],
+  ['GA', '🇬🇦'],
+  ['GB', '🇬🇧'],
+  ['GD', '🇬🇩'],
+  ['GE', '🇬🇪'],
+  ['GF', '🇬🇫'],
+  ['GG', '🇬🇬'],
+  ['GH', '🇬🇭'],
+  ['GI', '🇬🇮'],
+  ['GL', '🇬🇱'],
+  ['GM', '🇬🇲'],
+  ['GN', '🇬🇳'],
+  ['GP', '🇬🇵'],
+  ['GR', '🇬🇷'],
+  ['GS', '🇬🇸'],
+  ['GT', '🇬🇹'],
+  ['GQ', '🇬🇶'],
+  ['GW', '🇬🇼'],
+  ['GY', '🇬🇾'],
+  ['HK', '🇭🇰'],
+  ['HM', '🇭🇲'],
+  ['HN', '🇭🇳'],
+  ['HR', '🇭🇷'],
+  ['HT', '🇭🇹'],
+  ['IC', '🇮🇨'],
+  ['ID', '🇮🇩'],
+  ['IE', '🇮🇪'],
+  ['IL', '🇮🇱'],
+  ['IM', '🇮🇲'],
+  ['IN', '🇮🇳'],
+  ['IO', '🇮🇴'],
+  ['IR', '🇮🇷'],
+  ['IS', '🇮🇸'],
+  ['IT', '🇮🇹'],
+  ['IQ', '🇮🇶'],
+  ['JE', '🇯🇪'],
+  ['JM', '🇯🇲'],
+  ['JO', '🇯🇴'],
+  ['JP', '🇯🇵'],
+  ['KE', '🇰🇪'],
+  ['KG', '🇰🇬'],
+  ['KH', '🇰🇭'],
+  ['KI', '🇰🇮'],
+  ['KM', '🇰🇲'],
+  ['KN', '🇰🇳'],
+  ['KP', '🇰🇵'],
+  ['KR', '🇰🇷'],
+  ['KW', '🇰🇼'],
+  ['KY', '🇰🇾'],
+  ['KZ', '🇰🇿'],
+  ['LA', '🇱🇦'],
+  ['LB', '🇱🇧'],
+  ['LC', '🇱🇨'],
+  ['LI', '🇱🇮'],
+  ['LK', '🇱🇰'],
+  ['LR', '🇱🇷'],
+  ['LS', '🇱🇸'],
+  ['LT', '🇱🇹'],
+  ['LY', '🇱🇾'],
+  ['MA', '🇲🇦'],
+  ['MC', '🇲🇨'],
+  ['MD', '🇲🇩'],
+  ['ME', '🇲🇪'],
+  ['MF', '🇲🇫'],
+  ['MG', '🇲🇬'],
+  ['MH', '🇲🇭'],
+  ['MK', '🇲🇰'],
+  ['ML', '🇲🇱'],
+  ['MM', '🇲🇲'],
+  ['MN', '🇲🇳'],
+  ['MO', '🇲🇴'],
+  ['MP', '🇲🇵'],
+  ['MR', '🇲🇷'],
+  ['MS', '🇲🇸'],
+  ['MT', '🇲🇹'],
+  ['MQ', '🇲🇶'],
+  ['MW', '🇲🇼'],
+  ['MY', '🇲🇾'],
+  ['MZ', '🇲🇿'],
+  ['NA', '🇳🇦'],
+  ['NC', '🇳🇨'],
+  ['NE', '🇳🇪'],
+  ['NF', '🇳🇫'],
+  ['NG', '🇳🇬'],
+  ['NI', '🇳🇮'],
+  ['NL', '🇳🇱'],
+  ['NO', '🇳🇴'],
+  ['NP', '🇳🇵'],
+  ['NR', '🇳🇷'],
+  ['NZ', '🇳🇿'],
+  ['OM', '🇴🇲'],
+  ['PA', '🇵🇦'],
+  ['PE', '🇵🇪'],
+  ['PF', '🇵🇫'],
+  ['PG', '🇵🇬'],
+  ['PH', '🇵🇭'],
+  ['PK', '🇵🇰'],
+  ['PL', '🇵🇱'],
+  ['PM', '🇵🇲'],
+  ['PN', '🇵🇳'],
+  ['PR', '🇵🇷'],
+  ['PS', '🇵🇸'],
+  ['PT', '🇵🇹'],
+  ['PW', '🇵🇼'],
+  ['PY', '🇵🇾'],
+  ['RE', '🇷🇪'],
+  ['RO', '🇷🇴'],
+  ['RS', '🇷🇸'],
+  ['RW', '🇷🇼'],
+  ['SA', '🇸🇦'],
+  ['SB', '🇸🇧'],
+  ['SC', '🇸🇨'],
+  ['SD', '🇸🇩'],
+  ['SE', '🇸🇪'],
+  ['SG', '🇸🇬'],
+  ['SH', '🇸🇭'],
+  ['SI', '🇸🇮'],
+  ['SJ', '🇸🇯'],
+  ['SK', '🇸🇰'],
+  ['SL', '🇸🇱'],
+  ['SM', '🇸🇲'],
+  ['SN', '🇸🇳'],
+  ['SO', '🇸🇴'],
+  ['SR', '🇸🇷'],
+  ['SS', '🇸🇸'],
+  ['ST', '🇸🇹'],
+  ['SY', '🇸🇾'],
+  ['SZ', '🇸🇿'],
+  ['TA', '🇹🇦'],
+  ['TC', '🇹🇨'],
+  ['TD', '🇹🇩'],
+  ['TF', '🇹🇫'],
+  ['TG', '🇹🇬'],
+  ['TH', '🇹🇭'],
+  ['TJ', '🇹🇯'],
+  ['TK', '🇹🇰'],
+  ['TL', '🇹🇱'],
+  ['TM', '🇹🇲'],
+  ['TN', '🇹🇳'],
+  ['TO', '🇹🇴'],
+  ['TR', '🇹🇷'],
+  ['TT', '🇹🇹'],
+  ['TW', '🇹🇼'],
+  ['TZ', '🇹🇿'],
+  ['QA', '🇶🇦'],
+  ['VG', '🇻🇬'],
+  ['WF', '🇼🇫'],
+  ['WS', '🇼🇸'],
+  ['YE', '🇾🇪'],
+  ['YT', '🇾🇹'],
+  ['ZA', '🇿🇦'],
+  ['ZM', '🇿🇲'],
+  ['ZW', '🇿🇼'],
+  // unknown
+  ['AA', FALLBACK_FLAG],
+  ['XX', FALLBACK_FLAG],
+  ['AAA', FALLBACK_FLAG],
+];
+
+describe('countryCodeToFlagEmoji', () => {
+  it.each(cases)('converts %s to %s', (countryCode, flag) => {
+    expect(countryCodeToFlagEmoji(countryCode)).toEqual(flag);
+  });
+});
@@ -0,0 +1,24 @@
+import compact from 'lodash/compact';
+
+export const FALLBACK_FLAG = '🏳';
+
+const KNOWN_CODES = `AC AD AE AF AG AI AL AM AO AR AS AT AQ AW AZ BA BB BD BE BF
+   BG BH BI BJ BL BM BN BO BR BS BT BQ BW BY BZ CA CC CD CF CG CH CI CK CL CM CN
+   CO CP CR CW CY CZ DE DG DJ DK DM DO DZ EA EC EE EG EH ER ES ET FI FJ FK FM FO
+   FR GA GB GD GE GF GG GH GI GL GM GN GP GR GS GT GQ GW GY HK HM HN HR HT IC ID
+   IE IL IM IN IO IR IS IT IQ JE JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB
+   LC LI LK LR LS LT LY MA MC MD ME MF MG MH MK ML MM MN MO MP MR MS MT MQ MW MY
+   MZ NA NC NE NF NG NI NL NO NP NR NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW
+   PY RE RO RS RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SY SZ TA TC
+   TD TF TG TH TJ TK TL TM TN TO TR TT TW TZ QA VG WF WS YE YT ZA ZM ZW`;
+
+export const countryCodeToFlagEmoji = (countryCode: string) => {
+  const code = countryCode.trim().toUpperCase();
+  const known = compact(KNOWN_CODES.split(' ').map((ch) => ch.trim()));
+  if (known.includes(code)) {
+    return code.replace(/./g, (char) =>
+      String.fromCodePoint(0x1f1a5 + char.toUpperCase().charCodeAt(0))
+    );
+  }
+  return FALLBACK_FLAG;
+};
@@ -6,6 +6,7 @@ import {
  formatNumber,
  formatNumberPercentage,
  isNumeric,
+  toDecimal,
  toNumberParts,
 } from './number';

@@ -197,3 +198,20 @@ describe('compactNumber', () => {
    }
  );
 });
+
+describe('toDecimal', () => {
+  it.each([
+    { v: 0, o: '1' },
+    { v: 1, o: '0.1' },
+    { v: 2, o: '0.01' },
+    { v: 3, o: '0.001' },
+    { v: 4, o: '0.0001' },
+    { v: 5, o: '0.00001' },
+    { v: 6, o: '0.000001' },
+    { v: 7, o: '0.0000001' },
+    { v: 8, o: '0.00000001' },
+    { v: 9, o: '0.000000001' },
+  ])('formats with toNumber given number correctly', ({ v, o }) => {
+    expect(toDecimal(v)).toStrictEqual(o);
+  });
+});
@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
 import { NumericCell } from './numeric-cell';

 describe('NumericCell', () => {
@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
 import { PriceFlashCell } from './price-flash-cell';

 describe('<PriceFlashCell />', () => {
@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { VolCell, VolumeType } from './vol-cell';
+import * as tailwind from '@vegaprotocol/tailwindcss-config';
+
+describe('VolCell', () => {
+  const significantPart = '12,345';
+  const decimalPart = '67';
+  const props = {
+    value: 1234567,
+    valueFormatted: `${significantPart}.${decimalPart}`,
+    type: VolumeType.ask,
+    testId: 'cell',
+  };
+
+  it('Displays formatted value', () => {
+    render(<VolCell {...props} />);
+    expect(screen.getByTestId(props.testId)).toHaveTextContent(
+      props.valueFormatted
+    );
+    expect(screen.getByText(decimalPart)).toBeInTheDocument();
+    expect(screen.getByText(decimalPart)).toHaveClass('opacity-60');
+  });
+
+  it('Displays 0', () => {
+    render(<VolCell {...props} value={0} valueFormatted="0.00" />);
+    expect(screen.getByTestId(props.testId)).toHaveTextContent('0.00');
+  });
+
+  it('Displays - if value is not a number', () => {
+    render(<VolCell {...props} value={null} valueFormatted="" />);
+    expect(screen.getByTestId(props.testId)).toHaveTextContent('-');
+  });
+
+  it('renders bid volume bar', () => {
+    render(<VolCell {...props} type={VolumeType.bid} />);
+    expect(screen.getByTestId('vol-bar')).toHaveClass('left-0'); // renders bid bars from the left
+    expect(screen.getByTestId('vol-bar')).toHaveStyle({
+      backgroundColor: tailwind.theme.colors.vega.green.DEFAULT,
+    });
+  });
+
+  it('renders ask volume bar', () => {
+    render(<VolCell {...props} type={VolumeType.ask} />);
+    expect(screen.getByTestId('vol-bar')).toHaveClass('right-0'); // renders ask bars from the right
+    expect(screen.getByTestId('vol-bar')).toHaveStyle({
+      backgroundColor: tailwind.theme.colors.vega.pink.DEFAULT,
+    });
+  });
+});
@@ -8,7 +8,7 @@ export enum VolumeType {
  bid,
  ask,
 }
-export interface VolProps {
+export interface VolCellProps {
  value: number | bigint | null | undefined;
  valueFormatted: string;
  relativeValue?: number;
@@ -17,20 +17,21 @@ export interface VolProps {
 }
 export interface IVolCellProps extends ICellRendererParams {
  value: number | bigint | null | undefined;
-  valueFormatted: Omit<VolProps, 'value'>;
+  valueFormatted: Omit<VolCellProps, 'value'>;
 }

 export const BID_COLOR = tailwind.theme.colors.vega.green.DEFAULT;
 export const ASK_COLOR = tailwind.theme.colors.vega.pink.DEFAULT;

-export const Vol = React.memo(
-  ({ value, valueFormatted, relativeValue, type, testId }: VolProps) => {
+export const VolCell = React.memo(
+  ({ value, valueFormatted, relativeValue, type, testId }: VolCellProps) => {
    if ((!value && value !== 0) || isNaN(Number(value))) {
-      return <div data-testid="vol">-</div>;
+      return <div data-testid={testId || 'vol'}>-</div>;
    }
    return (
      <div className="relative" data-testid={testId || 'vol'}>
        <div
+          data-testid="vol-bar"
          className={classNames(
            'h-full absolute top-0 opacity-40 dark:opacity-100',
            {
@@ -50,4 +51,4 @@ export const Vol = React.memo(
  }
 );

-Vol.displayName = 'Vol';
+VolCell.displayName = 'VolCell';
@@ -19,3 +19,4 @@ export * from './remove-pagination-wrapper';
 export * from './storage';
 export * from './time';
 export * from './validate';
+export * from './flag-emoji';
@@ -122,33 +122,11 @@ module.exports = {
  fontFamily: {
    mono: ['Roboto Mono', 'monospace'],
    sans: [
-      '"Helvetica Neue"',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      'Arial',
-      '"Noto Sans"',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-      '"Noto Color Emoji"',
+      '"Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    ],
    alpha: [
-      'AlphaLyrae',
-      '"Helvetica Neue"',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      'Arial',
-      '"Noto Sans"',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-      '"Noto Color Emoji"',
+      'AlphaLyrae, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      { fontFeatureSettings: '"calt" 0, "liga" 0' },
    ],
  },
  keyframes: {
@@ -7,12 +7,13 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
    '.calt': {
      fontFeatureSettings: "'calt'",
    },
-    '.liga-0-calt-0': {
-      fontFeatureSettings: "'liga' 0, 'calt' 0",
-    },
    '.liga': {
      fontFeatureSettings: "'liga'",
    },
+    // Fix for Firefox to make it inherit font-feature-settings from the default theme
+    'button, input, optgroup, select, textarea': {
+      fontFeatureSettings: 'inherit',
+    },
    '.syntax-highlighter-wrapper .hljs': {
      fontSize: '1rem',
      fontFamily: "'Roboto Mono', monospace",
@@ -20,7 +20,7 @@ export const FormGroup = ({
  labelAlign = 'left',
  hideLabel = false,
 }: FormGroupProps) => {
-  const wrapperClasses = classNames('relative mb-6', className);
+  const wrapperClasses = classNames('relative mb-2', className);
  const labelClasses = classNames('block mb-2 text-sm', {
    'text-right': labelAlign === 'right',
    'sr-only': hideLabel,
@@ -7,6 +7,7 @@ export interface KeyValueTableProps
  children: React.ReactNode;
  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
  numerical?: boolean;
+  className?: string;
 }

 export const KeyValueTable = ({
@@ -14,6 +15,7 @@ export const KeyValueTable = ({
  children,
  numerical,
  headingLevel,
+  className,
  ...rest
 }: KeyValueTableProps) => {
  const TitleTag: keyof JSX.IntrinsicElements = headingLevel
@@ -22,7 +24,7 @@ export const KeyValueTable = ({
  return (
    <React.Fragment>
      {title && <TitleTag className={`text-xl my-2`}>{title}</TitleTag>}
-      <div data-testid="key-value-table" {...rest} className="mb-4">
+      <div data-testid="key-value-table" {...rest} className={className}>
        <div>
          {children &&
            React.Children.map(
@@ -209,7 +209,7 @@ export const MaintenancePage = () => {
        </div>
      </div>
      <div className="flex mb-2">
-        <span className="font-alpha uppercase text-xl text-center">
+        <span className="font-alpha calt uppercase text-xl text-center">
          {t("We're doing some maintenance right now, check back later")}
        </span>
      </div>
@@ -73,7 +73,7 @@ export const Nav = ({
          {icon}
          <h1
            className={classNames(
-              'h-full flex flex-col my-0 justify-center font-alpha uppercase',
+              'h-full flex flex-col my-0 justify-center font-alpha calt uppercase',
              { 'text-black': isYellow, 'text-white': !isYellow }
            )}
          >
@@ -155,7 +155,7 @@ export const Toast = ({
        'w-[320px] rounded-md overflow-hidden',
        'shadow-[8px_8px_16px_0_rgba(0,0,0,0.4)]',
        'text-black dark:text-white',
-        'font-alpha liga-0-calt-0 text-[14px] leading-[19px]',
+        'font-alpha text-[14px] leading-[19px]',
        // background
        {
          'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None,
@@ -20,7 +20,7 @@ const TextSample = ({ alternatives, isAlpha, type }: Args) => {
      <div
        className={classNames(
          'flex-grow flex flex-col justify-end text-left items-start',
-          { 'font-alpha': isAlpha },
+          { 'font-alpha calt': isAlpha },
          [alternatives, type]
        )}
      >
@@ -52,7 +52,7 @@ export default {
    },
    alternatives: {
      name: 'Font features',
-      options: ['none', 'calt', 'liga', 'liga-0-calt-0'],
+      options: ['none', 'calt', 'liga'],
      control: { type: 'select' },
    },
  },
@@ -61,5 +61,5 @@ export default {
 export const Default = Template;
 Default.args = {
  isAlpha: true,
-  alternatives: 'liga-0-calt-0',
+  alternatives: 'none',
 };
@@ -7,7 +7,7 @@ export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
  return (
    <h1
      data-testid="wallet-dialog-title"
-      className="text-2xl uppercase mb-6 text-center font-alpha"
+      className="text-2xl uppercase mb-6 text-center font-alpha calt"
    >
      {children}
    </h1>
@@ -58,7 +58,7 @@ export function ViewConnectorForm({
        <Icon name={'chevron-left'} ariaLabel="back" size={4} />
      </button>
      <form onSubmit={handleSubmit(onSubmit)} data-testid="view-connector-form">
-        <h1 className="text-2xl uppercase mb-6 text-center font-alpha">
+        <h1 className="text-2xl uppercase mb-6 text-center font-alpha calt">
          {t('VIEW AS VEGA USER')}
        </h1>
        <p className="mb-4">
Author	SHA1	Message	Date
Matthew Russell	15ee4d0a57	fix: remove calt from nav and toasts	2023-02-27 13:16:25 -08:00
m.ray	4eb6e09bd4	fix(trading): condense deal ticket & market info price range snags (#3012 )	2023-02-27 18:04:13 +00:00
Maciek	a02100b079	chore(ui-toolkit): revert: loader no rerender version only	2023-02-27 07:51:50 -08:00
Maciek	4bb78e9891	chore(ui-toolkit): loader no rerender version only (#3011 )	2023-02-27 16:44:48 +01:00
dexturr	79f360dc24	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-27 12:10:43 +00:00
Art	a3fcd6b7dc	feat(explorer): validators page (#2982 )	2023-02-27 09:17:23 +00:00
Matthew Russell	23ce480daa	feat(trading): show block height (#3010 )	2023-02-27 09:16:19 +00:00
Matthew Russell	da209d96b0	fix(tailwindcss-config): fix calt for firefox, make calt opt in when using font-alpha (#3007 )	2023-02-27 09:13:19 +00:00
Matthew Russell	9166a85a55	chore(trading): update tooltip text for 24h volume (#3005 )	2023-02-27 09:12:50 +00:00
dexturr	a5ec1f708f	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-27 06:09:54 +00:00
dexturr	3afdc0c8da	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-27 00:17:20 +00:00
dexturr	757d545d97	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-26 18:09:19 +00:00
dexturr	fc4d40f3cf	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-26 12:07:31 +00:00
dexturr	ff47eda692	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-26 06:08:17 +00:00
dexturr	7483d9ce1d	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-26 00:15:56 +00:00
dexturr	f9209cf327	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-25 18:07:08 +00:00
dexturr	420a29680d	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-25 12:09:08 +00:00
dexturr	19c9e79647	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-25 06:07:29 +00:00
dexturr	4cd856fcb8	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-25 00:16:11 +00:00
Matthew Russell	649cc61280	chore(trading): fix formatting for volume cells in book (#3006 )	2023-02-24 16:31:42 -05:00