chore: update tooltip text for 24h volume

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

@@ -8,7 +8,7 @@ context('Asset page', { tags: '@regression' }, () => {
 
     it('should be able to see full assets list', () => {
       cy.getAssets().then((assets) => {
-        assets.forEach((asset) => {
+        Object.values(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) => {
-        assets.forEach((asset) => {
+        Object.values(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) => {
-        assets.forEach((asset) => {
+        Object.values(assets).forEach((asset) => {
           cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
             .eq(0)
             .should('contain.text', 'View details');

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

@@ -1,15 +1,303 @@
 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('/validators');
+    cy.visit('/');
+    cy.get(validatorMenuHeading).click();
+    cy.get_validators().as('validators');
+    cy.get_nodes().as('nodes');
   });
 
   describe('Verify elements on page', function () {
-    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');
+    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;
         });
-      });
     });
   });
 });

apps/explorer/src/app/components/empty-list/empty-list.tsx

@@ -19,12 +19,12 @@ const EmptyList = ({ heading, label }: EmptyListProps) => {
 
       <div className="mt-4">
         {heading ? (
-          <h1 className="font-alpha calt text-xl uppercase text-center leading-relaxed">
+          <h1 className="font-alpha text-xl uppercase text-center leading-relaxed">
             {heading}
           </h1>
         ) : null}
         {label ? (
-          <p className="font-alpha calt text-gray-500 text-center">{label}</p>
+          <p className="font-alpha text-gray-500 text-center">{label}</p>
         ) : null}
       </div>
     </div>

apps/explorer/src/app/components/markets/market-details.tsx

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

apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx

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

apps/explorer/src/app/components/page-header/page-header.tsx

@@ -20,7 +20,7 @@ export const PageHeader = ({
   copy = false,
   className,
 }: PageHeaderProps) => {
-  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha calt';
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha';
   return (
     <header className={className}>
       <span className={`${titleClasses} block`}>{prefix}</span>

apps/explorer/src/app/components/page-helpers/index.ts

@@ -1 +0,0 @@
-export * from './page-actions';

apps/explorer/src/app/components/page-helpers/page-actions.tsx

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-export const PageActions = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) => (
-  <div className="flex flex-row items-start gap-1" {...props}>
-    {children}
-  </div>
-);

apps/explorer/src/app/components/page-helpers/page-title.tsx

@@ -1,45 +0,0 @@
-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>
-  );
-};

apps/explorer/src/app/components/route-title/index.tsx

@@ -13,7 +13,7 @@ export const RouteTitle = ({
   ...props
 }: RouteTitleProps) => {
   const classes = classnames(
-    'font-alpha calt',
+    'font-alpha',
     'text-4xl',
     'uppercase',
     'mb-8',

apps/explorer/src/app/components/status-message/index.tsx

@@ -11,7 +11,7 @@ export const StatusMessage = ({
   className,
   ...props
 }: StatusMessageProps) => {
-  const classes = classnames('font-alpha calt text-2xl mb-28', className);
+  const classes = classnames('font-alpha text-2xl mb-28', className);
   return (
     <h3 className={classes} {...props}>
       {children}

apps/explorer/src/app/components/sub-heading/index.tsx

@@ -12,7 +12,7 @@ export const SubHeading = ({
   ...props
 }: SubHeadingProps) => {
   const classes = classnames(
-    'font-alpha calt',
+    'font-alpha',
     'text-2xl',
     'uppercase',
     'mt-8 mb-2',

apps/explorer/src/app/components/txs/details/transfer/transfer-details.tsx

@@ -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 calt';
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha';
 
 export type Transfer = components['schemas']['commandsv1Transfer'];
 

apps/explorer/src/app/hooks/use-tendermint-validators.ts

@@ -1,55 +0,0 @@
-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 };
-};

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

@@ -1,4 +1,5 @@
 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';
@@ -7,7 +8,6 @@ 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,25 +22,18 @@ export const AssetPage = () => {
   return (
     <>
       <section className="relative">
-        <PageTitle
-          data-testid="asset-header"
-          title={title}
-          actions={
-            <Button
-              disabled={!data}
-              size="xs"
-              onClick={() => setDialogOpen(true)}
-            >
-              {t('View JSON')}
-            </Button>
-          }
-        />
+        <RouteTitle data-testid="asset-header">{title}</RouteTitle>
         <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>

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

@@ -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,25 +40,20 @@ export const MarketPage = () => {
   return (
     <>
       <section className="relative">
-        <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>
-          }
-        />
+        <RouteTitle data-testid="markets-heading">
+          {data?.market?.tradableInstrument.instrument.name}
+        </RouteTitle>
         <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>

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

@@ -68,7 +68,7 @@ const Party = () => {
   return (
     <section>
       <h1
-        className="font-alpha calt uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
+        className="font-alpha uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
         data-testid="parties-header"
       >
         {t('Public key')}

apps/explorer/src/app/routes/router-config.tsx

@@ -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 { ValidatorsPage } from './validators';
+import Validators 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: <ValidatorsPage />,
+        element: <Validators />,
       },
     ]
   : [];

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

@@ -1 +1,47 @@
-export * from './validators-page';
+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;

apps/explorer/src/app/routes/validators/tendermint-validator-response.tsx

@@ -0,0 +1,24 @@
+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;
+}

apps/explorer/src/app/routes/validators/validators-page.tsx

@@ -1,340 +0,0 @@
-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}
-      />
-    </>
-  );
-};

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

@@ -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 calt uppercase text-5xl mb-8">
+          <h1 className="font-alpha uppercase text-5xl mb-8">
             {t('Top liquidity opportunities')}
           </h1>
 

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

@@ -30,7 +30,7 @@ type Network = 'testnet' | 'mainnet';
 export const Intro = ({ network = 'testnet' }: { network?: Network }) => {
   return (
     <div>
-      <p className="font-alpha calt text-2xl font-medium mb-2">
+      <p className="font-alpha text-2xl font-medium mb-2">
         {t(
           'Become a liquidity provider and earn a cut of the fees paid during trading.'
         )}

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

@@ -92,7 +92,7 @@ export const Detail = () => {
             )}
           </div>
           <div>
-            <h2 className="font-alpha calt text-2xl mb-4">
+            <h2 className="font-alpha text-2xl mb-4">
               {t('Current Liquidity Provision')}
             </h2>
             <LPProvidersGrid

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

@@ -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 calt text-lg font-medium">
+          <span className="underline font-alpha text-lg font-medium">
             {t('Liquidity opportunities')}
           </span>
         </Link>
       </div>
-      <h1 className="font-alpha calt text-5xl mb-6">{name}</h1>
-      <p className="font-alpha calt text-4xl">{symbol}</p>
+      <h1 className="font-alpha text-5xl mb-6">{name}</h1>
+      <p className="font-alpha text-4xl">{symbol}</p>
     </div>
   );
 };

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

@@ -44,7 +44,7 @@ export const Market = ({
         <table className="w-full">
           <thead>
             <tr
-              className="text-sm text-greys-light-400 text-left font-alpha calt"
+              className="text-sm text-greys-light-400 text-left font-alpha"
               style={{ fontFeatureSettings: "'liga' off, 'calt' off" }}
             >
               <th className="font-medium px-4">{t('Volume (24h)')}</th>

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

@@ -36,7 +36,7 @@ export const Grid = ({ isRowClickable, children, ...props }: Props) => {
 
   return (
     <AgGridReact
-      className={classNames('ag-theme-alpine h-full font-alpha calt', {
+      className={classNames('ag-theme-alpine h-full font-alpha', {
         'row-hover': isRowClickable,
       })}
       rowHeight={92}

apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx

@@ -13,7 +13,7 @@ const Remainder = () => (
 );
 
 const COPY_CLASS =
-  'text-sm font-medium whitespace-nowrap text-white font-alpha calt';
+  'text-sm font-medium whitespace-nowrap text-white font-alpha';
 
 const Tooltip = ({
   children,

apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx

@@ -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">
+      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase liga-0-calt-0">
         {t('Health')}
       </h1>
-      <p className="text-lg font-medium font-alpha mb-8">
+      <p className="text-lg font-medium font-alpha mb-8 liga-0-calt-0">
         {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">
+          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
             {t('Market status')}
           </th>
-          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase">
+          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
             {t('Liquidity status')}
           </th>
         </thead>
@@ -85,10 +85,12 @@ 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">
+                  <h2 className="font-medium font-alpha uppercase text-base liga-0-calt-0">
                     {t(r.title)}
                   </h2>
-                  <p className="font-medium font-alpha text-lg">{t(r.copy)}</p>
+                  <p className="font-medium font-alpha text-lg liga-0-calt-0">
+                    {t(r.copy)}
+                  </p>
                 </td>
                 <td
                   className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })}

apps/token/src/routes/rewards/no-rewards.tsx

@@ -13,7 +13,7 @@ export const NoRewards = () => {
   return (
     <div className={classes}>
       <SubHeading title={t('noRewardsHaveBeenDistributedYet')} />
-      <p className="font-alpha calt text-xl">{t('checkBackSoon')}</p>
+      <p className="font-alpha text-xl">{t('checkBackSoon')}</p>
     </div>
   );
 };

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

@@ -190,24 +190,6 @@ 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}`);

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

@@ -304,18 +304,4 @@ 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
-    });
-  });
 });

apps/trading/components/footer/footer.spec.tsx

@@ -1,35 +1,20 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { NodeHealth, NodeUrl, HealthIndicator } from './footer';
-
-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();
-  });
-});
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NodeUrl, NodeHealth } from './footer';
 
 describe('NodeUrl', () => {
-  it('renders correct part of node url', () => {
+  it('can open node switcher by clicking the node url', () => {
+    const mockOpenNodeSwitcher = jest.fn();
     const node = 'https://api.n99.somenetwork.vega.xyz';
-    const expectedText = node.split('.').slice(1).join('.');
 
-    render(<NodeUrl url={node} />);
+    render(<NodeUrl url={node} openNodeSwitcher={mockOpenNodeSwitcher} />);
 
-    expect(screen.getByText(expectedText)).toBeInTheDocument();
+    fireEvent.click(screen.getByText(/n99/));
+    expect(mockOpenNodeSwitcher).toHaveBeenCalled();
   });
 });
 
-describe('HealthIndicator', () => {
+describe('NodeHealth', () => {
+  const mockOpenNodeSwitcher = jest.fn();
   const cases = [
     { diff: 0, classname: 'bg-vega-green-550', text: 'Operational' },
     { diff: 5, classname: 'bg-warning', text: '5 Blocks behind' },
@@ -38,9 +23,16 @@ describe('HealthIndicator', () => {
   it.each(cases)(
     'renders correct text and indicator color for $diff block difference',
     (elem) => {
-      render(<HealthIndicator blockDiff={elem.diff} />);
+      render(
+        <NodeHealth
+          blockDiff={elem.diff}
+          openNodeSwitcher={mockOpenNodeSwitcher}
+        />
+      );
       expect(screen.getByTestId('indicator')).toHaveClass(elem.classname);
       expect(screen.getByText(elem.text)).toBeInTheDocument();
+      fireEvent.click(screen.getByText(elem.text));
+      expect(mockOpenNodeSwitcher).toHaveBeenCalled();
     }
   );
 });

apps/trading/components/footer/footer.tsx

@@ -1,8 +1,6 @@
 import { useEnvironment, useNodeHealth } from '@vegaprotocol/environment';
 import { t, useNavigatorOnline } from '@vegaprotocol/react-helpers';
-import { Indicator, Intent } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonLink, Indicator, Intent } from '@vegaprotocol/ui-toolkit';
 import { useGlobalStore } from '../../stores';
 
 export const Footer = () => {
@@ -10,64 +8,45 @@ export const Footer = () => {
   const setNodeSwitcher = useGlobalStore(
     (store) => (open: boolean) => store.update({ nodeSwitcherDialog: open })
   );
-  const { blockDiff, datanodeBlockHeight } = useNodeHealth();
+  const { blockDiff } = useNodeHealth();
 
   return (
-    <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)}
-          />
-        )}
+    <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>
       </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 }: NodeUrlProps) => {
+export const NodeUrl = ({ url, openNodeSwitcher }: NodeUrlProps) => {
   // get base url from api url, api sub domain
   const urlObj = new URL(url);
   const nodeUrl = urlObj.origin.replace(/^[^.]+\./g, '');
-  return <span title={t('Connected node')}>{nodeUrl}</span>;
+  return <ButtonLink onClick={openNodeSwitcher}>{nodeUrl}</ButtonLink>;
 };
 
-interface HealthIndicatorProps {
+interface NodeHealthProps {
+  openNodeSwitcher: () => void;
   blockDiff: number | null;
 }
 
@@ -75,7 +54,10 @@ interface HealthIndicatorProps {
 // deemed acceptable for "Good" status
 const BLOCK_THRESHOLD = 3;
 
-export const HealthIndicator = ({ blockDiff }: HealthIndicatorProps) => {
+export const NodeHealth = ({
+  blockDiff,
+  openNodeSwitcher,
+}: NodeHealthProps) => {
   const online = useNavigatorOnline();
 
   let intent = Intent.Success;
@@ -94,36 +76,9 @@ export const HealthIndicator = ({ blockDiff }: HealthIndicatorProps) => {
   }
 
   return (
-    <span title={t('Node health')}>
+    <>
       <Indicator variant={intent} />
-      {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>
+      <ButtonLink onClick={openNodeSwitcher}>{text}</ButtonLink>
+    </>
   );
 };

apps/trading/pages/_document.page.tsx

@@ -24,7 +24,7 @@ export default function Document() {
           <script src="/assets/env-config.js" type="text/javascript" />
         ) : null}
       </Head>
-      <body className="font-alpha">
+      <body className="font-alpha liga-0-calt-0">
         <Main />
         <NextScript />
       </body>

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

@@ -98,7 +98,7 @@ export const AssetDetailsDialog = ({
       }}
     >
       {content}
-      <p className="text-sm my-4">
+      <p className="text-sm mb-4">
         {t(
           'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
           [assetSymbol]

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

@@ -1,8 +1,9 @@
-import { ContractAddressLink } from '@vegaprotocol/environment';
+import { useEtherscanLink } 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,
@@ -275,3 +276,16 @@ 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>
+  );
+};

libs/cypress/src/index.ts

@@ -18,7 +18,6 @@ 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();
@@ -29,7 +28,6 @@ addMockWeb3ProviderCommand();
 addHighlightLog();
 addVegaWalletReceiveFaucetedAsset();
 addGetAssets();
-addGetNodes();
 addContainsExactly();
 addGetNetworkParameters();
 addUpdateCapsuleMultiSig();

libs/cypress/src/lib/commands/get-assets.ts

@@ -1,14 +1,13 @@
 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<Array<AssetFieldsFragment>>;
+      getAssets(): Chainable<Record<string, AssetFieldsFragment>>;
     }
   }
 }
@@ -73,6 +72,12 @@ export function addGetAssets() {
       headers: { 'content-type': 'application/json' },
     })
       .its('body.data.assetsConnection.edges')
-      .then(edgesToList);
+      .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;
+        }, {});
+      });
   });
 }

libs/cypress/src/lib/commands/get-nodes.ts

@@ -1,55 +0,0 @@
-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);
-  });
-}

libs/cypress/src/lib/commands/vega-wallet-receive-fauceted-asset.ts

@@ -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.find((a) => a.name === assetName);
-        if (asset) {
+        const asset = assets[assetName];
+        if (assets[assetName] !== undefined) {
           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,9 +38,15 @@ export function addVegaWalletReceiveFaucetedAsset() {
               );
             });
         } else {
-          const validAssets = assets.filter((a) => a.name.includes('fake'));
+          const validAssets = Object.keys(assets)
+            .filter((key) => key.includes('fake'))
+            .reduce((obj, key) => {
+              return Object.assign(obj, {
+                [key]: assets[key],
+              });
+            }, {});
           assert.exists(
-            asset,
+            assets[assetName],
             `${assetName} is not a faucet-able asset, only the following assets can be faucet-ed: ${validAssets}`
           );
         }

libs/cypress/src/lib/mock-gql.ts

@@ -32,8 +32,7 @@ export const aliasGQLQuery = (
   operationName: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data?: any,
-  errors?: Partial<GraphQLError>[],
-  headers?: Record<string, string>
+  errors?: Partial<GraphQLError>[]
 ) => {
   if (hasOperationName(req, operationName)) {
     req.alias = operationName;
@@ -41,13 +40,6 @@ 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,
-        },
       });
     }
   }

libs/cypress/src/lib/utils.ts

@@ -62,11 +62,3 @@ 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;
-  });
-}

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

@@ -12,7 +12,7 @@ export const DealTicketButton = ({ disabled, variant }: Props) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const isDisabled = !pubKey || isReadOnly || disabled;
   return (
-    <div className="mb-2">
+    <div className="mb-4">
       <Button
         variant={variant}
         fill

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

@@ -31,7 +31,7 @@ export const DealTicketFeeDetails = ({
     <div>
       {details.map(({ label, value, labelDescription, symbol }) => (
         <div
-          key={typeof label === 'string' ? label : 'value-dropdown'}
+          key={label}
           className="text-xs mt-2 flex justify-between items-center gap-4 flex-wrap"
         >
           <div>

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

@@ -38,7 +38,7 @@ export const DealTicketLimitAmount = ({
   };
 
   return (
-    <div className="mb-2">
+    <div className="mb-6">
       <div className="flex items-center gap-4">
         <div className="flex-1">
           <FormGroup

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

@@ -29,9 +29,9 @@ export const DealTicketMarketAmount = ({
     : undefined;
 
   return (
-    <div className="mb-2">
+    <div className="mb-6">
       <div className="flex items-end gap-4 mb-2">
-        <div className="flex-1 text-sm">{t('Size')}</div>
+        <div className="flex-1 text-sm">Size</div>
         <div />
         <div className="flex-2 text-sm text-right">
           {isMarketInAuction(marketData.marketTradingMode) && (

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

@@ -307,7 +307,7 @@ const SummaryMessage = memo(
     );
     if (isReadOnly) {
       return (
-        <div className="mb-2">
+        <div className="mb-4">
           <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-2">
+        <div className="mb-4">
           <Notification
             testId={'deal-ticket-connect-wallet'}
             intent={Intent.Warning}
@@ -343,7 +343,7 @@ const SummaryMessage = memo(
     }
     if (errorMessage === SummaryValidationType.NoCollateral) {
       return (
-        <div className="mb-2">
+        <div className="mb-4">
           <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-2">
+        <div className="mb-4">
           <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-2">
+        <div className="mb-4">
           <MarginWarning balance={balance} margin={margin} asset={asset} />;
         </div>
       );
@@ -383,7 +383,7 @@ const SummaryMessage = memo(
       ].includes(marketData.marketTradingMode)
     ) {
       return (
-        <div className="mb-2">
+        <div className="mb-4">
           <Notification
             intent={Intent.Warning}
             testId={'dealticket-warning-auction'}

libs/environment/src/components/contract-address-link.tsx

@@ -1,13 +0,0 @@
-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>
-  );
-};

libs/environment/src/components/index.ts

@@ -2,4 +2,3 @@ export * from './network-loader';
 export * from './network-switcher';
 export * from './node-guard';
 export * from './node-switcher';
-export * from './contract-address-link';

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

@@ -94,7 +94,6 @@ 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';

libs/environment/src/hooks/use-node-health.ts

@@ -4,16 +4,14 @@ 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, startPolling, stopPolling } =
-    useStatisticsQuery({
-      fetchPolicy: 'no-cache',
-    });
+  const { data, error, loading, stopPolling } = useStatisticsQuery({
+    pollInterval: 1000,
+    fetchPolicy: 'no-cache',
+  });
 
   const blockDiff = useMemo(() => {
     if (!data?.statistics.blockHeight) {
@@ -30,13 +28,8 @@ export const useNodeHealth = () => {
   useEffect(() => {
     if (error) {
       stopPolling();
-      return;
     }
-
-    if (!('Cypress' in window)) {
-      startPolling(POLL_INTERVAL);
-    }
-  }, [error, startPolling, stopPolling]);
+  }, [error, stopPolling]);
 
   return {
     error,

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import {
   PriceCell,
-  VolCell,
+  Vol,
   CumulativeVol,
   addDecimalsFormatNumber,
   VolumeType,
+  addDecimal,
 } from '@vegaprotocol/react-helpers';
 
 interface OrderbookRowProps {
@@ -41,17 +42,17 @@ export const OrderbookRow = React.memo(
   }: OrderbookRowProps) => {
     return (
       <>
-        <VolCell
+        <Vol
           testId={`bid-vol-${price}`}
           value={bid}
-          valueFormatted={addDecimalsFormatNumber(bid, positionDecimalPlaces)}
+          valueFormatted={addDecimal(bid, positionDecimalPlaces)}
           relativeValue={relativeBid}
           type={VolumeType.bid}
         />
-        <VolCell
+        <Vol
           testId={`ask-vol-${price}`}
           value={ask}
-          valueFormatted={addDecimalsFormatNumber(ask, positionDecimalPlaces)}
+          valueFormatted={addDecimal(ask, positionDecimalPlaces)}
           relativeValue={relativeAsk}
           type={VolumeType.ask}
         />

libs/market-info/src/components/market-info/info-market.tsx

@@ -145,7 +145,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
             }}
             decimalPlaces={market.decimalPlaces}
           />
-          <p className="text-xs mt-4">
+          <p className="text-xs">
             {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 mt-4">
+          <p className="text-xs">
             {t(
               'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
               [assetSymbol, quoteUnit]
@@ -309,40 +309,27 @@ export const Info = ({ market, onSelect }: InfoProps) => {
       ),
     },
     ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
-      (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>
-          ),
-        };
-      }
+      (trigger, i) => ({
+        title: t(`Price monitoring trigger ${i + 1}`),
+        content: <MarketInfoTable data={trigger} />,
+      })
     ),
+    ...(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: (
@@ -382,38 +369,37 @@ export const Info = ({ market, onSelect }: InfoProps) => {
       content: (
         <>
           <p className="text-xs mb-4">
-            {`For liquidity orders to count towards a commitment, they must be
-            within the liquidity monitoring bounds.`}
+            {`For liquidity orders count towards a commitment they have to be
+            within either the liquidity or price monitoring bounds (whichever is
+            tighter).`}
           </p>
           <p className="text-xs mb-4">
             {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
             price.`}
           </p>
-          <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>
+          <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>
         </>
       ),
     },

libs/network-stats/src/components/stats-manager/stats-manager.tsx

@@ -63,7 +63,7 @@ export const StatsManager = ({ className }: StatsManagerProps) => {
     <div className={classes}>
       <h3
         data-testid="stats-environment"
-        className="font-alpha calt uppercase text-2xl pb-8 col-span-full"
+        className="font-alpha uppercase text-2xl pb-8 col-span-full"
       >
         {(error && `/ ${error}`) ||
           (data ? `/ ${VEGA_ENV}` : '/ Connecting...')}

libs/react-helpers/src/lib/flag-emoji.spec.ts

@@ -1,267 +0,0 @@
-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);
-  });
-});

libs/react-helpers/src/lib/flag-emoji.ts

@@ -1,24 +0,0 @@
-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;
-};

libs/react-helpers/src/lib/format/number.spec.tsx

@@ -6,7 +6,6 @@ import {
   formatNumber,
   formatNumberPercentage,
   isNumeric,
-  toDecimal,
   toNumberParts,
 } from './number';
 
@@ -198,20 +197,3 @@ 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);
-  });
-});

libs/react-helpers/src/lib/grid/numeric-cell.spec.tsx

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

libs/react-helpers/src/lib/grid/price-flash-cell.spec.tsx

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

libs/react-helpers/src/lib/grid/vol-cell.spec.tsx

@@ -1,49 +0,0 @@
-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,
-    });
-  });
-});

libs/react-helpers/src/lib/grid/vol-cell.tsx

@@ -8,7 +8,7 @@ export enum VolumeType {
   bid,
   ask,
 }
-export interface VolCellProps {
+export interface VolProps {
   value: number | bigint | null | undefined;
   valueFormatted: string;
   relativeValue?: number;
@@ -17,21 +17,20 @@ export interface VolCellProps {
 }
 export interface IVolCellProps extends ICellRendererParams {
   value: number | bigint | null | undefined;
-  valueFormatted: Omit<VolCellProps, 'value'>;
+  valueFormatted: Omit<VolProps, 'value'>;
 }
 
 export const BID_COLOR = tailwind.theme.colors.vega.green.DEFAULT;
 export const ASK_COLOR = tailwind.theme.colors.vega.pink.DEFAULT;
 
-export const VolCell = React.memo(
-  ({ value, valueFormatted, relativeValue, type, testId }: VolCellProps) => {
+export const Vol = React.memo(
+  ({ value, valueFormatted, relativeValue, type, testId }: VolProps) => {
     if ((!value && value !== 0) || isNaN(Number(value))) {
-      return <div data-testid={testId || 'vol'}>-</div>;
+      return <div data-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',
             {
@@ -51,4 +50,4 @@ export const VolCell = React.memo(
   }
 );
 
-VolCell.displayName = 'VolCell';
+Vol.displayName = 'Vol';

libs/react-helpers/src/lib/index.ts

@@ -19,4 +19,3 @@ export * from './remove-pagination-wrapper';
 export * from './storage';
 export * from './time';
 export * from './validate';
-export * from './flag-emoji';

libs/tailwindcss-config/src/theme.js

@@ -122,11 +122,33 @@ module.exports = {
   fontFamily: {
     mono: ['Roboto Mono', 'monospace'],
     sans: [
-      '"Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      '"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"',
     ],
     alpha: [
-      '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' },
+      '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"',
     ],
   },
   keyframes: {

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -7,13 +7,12 @@ 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",

libs/ui-toolkit/src/components/form-group/form-group.tsx

@@ -20,7 +20,7 @@ export const FormGroup = ({
   labelAlign = 'left',
   hideLabel = false,
 }: FormGroupProps) => {
-  const wrapperClasses = classNames('relative mb-2', className);
+  const wrapperClasses = classNames('relative mb-6', className);
   const labelClasses = classNames('block mb-2 text-sm', {
     'text-right': labelAlign === 'right',
     'sr-only': hideLabel,

libs/ui-toolkit/src/components/key-value-table/key-value-table.tsx

@@ -7,7 +7,6 @@ export interface KeyValueTableProps
   children: React.ReactNode;
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   numerical?: boolean;
-  className?: string;
 }
 
 export const KeyValueTable = ({
@@ -15,7 +14,6 @@ export const KeyValueTable = ({
   children,
   numerical,
   headingLevel,
-  className,
   ...rest
 }: KeyValueTableProps) => {
   const TitleTag: keyof JSX.IntrinsicElements = headingLevel
@@ -24,7 +22,7 @@ export const KeyValueTable = ({
   return (
     <React.Fragment>
       {title && <TitleTag className={`text-xl my-2`}>{title}</TitleTag>}
-      <div data-testid="key-value-table" {...rest} className={className}>
+      <div data-testid="key-value-table" {...rest} className="mb-4">
         <div>
           {children &&
             React.Children.map(

libs/ui-toolkit/src/components/maintenance-page/maintenance-page.tsx

@@ -209,7 +209,7 @@ export const MaintenancePage = () => {
         </div>
       </div>
       <div className="flex mb-2">
-        <span className="font-alpha calt uppercase text-xl text-center">
+        <span className="font-alpha uppercase text-xl text-center">
           {t("We're doing some maintenance right now, check back later")}
         </span>
       </div>

libs/ui-toolkit/src/components/nav/nav.tsx

@@ -73,7 +73,7 @@ export const Nav = ({
           {icon}
           <h1
             className={classNames(
-              'h-full flex flex-col my-0 justify-center font-alpha calt uppercase',
+              'h-full flex flex-col my-0 justify-center font-alpha uppercase',
               { 'text-black': isYellow, 'text-white': !isYellow }
             )}
           >

libs/ui-toolkit/src/components/toast/toast.tsx

@@ -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 text-[14px] leading-[19px]',
+        'font-alpha liga-0-calt-0 text-[14px] leading-[19px]',
         // background
         {
           'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None,

libs/ui-toolkit/src/primitives/typography.stories.tsx

@@ -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 calt': isAlpha },
+          { 'font-alpha': isAlpha },
           [alternatives, type]
         )}
       >
@@ -52,7 +52,7 @@ export default {
     },
     alternatives: {
       name: 'Font features',
-      options: ['none', 'calt', 'liga'],
+      options: ['none', 'calt', 'liga', 'liga-0-calt-0'],
       control: { type: 'select' },
     },
   },
@@ -61,5 +61,5 @@ export default {
 export const Default = Template;
 Default.args = {
   isAlpha: true,
-  alternatives: 'none',
+  alternatives: 'liga-0-calt-0',
 };

libs/wallet/src/connect-dialog/connect-dialog-elements.tsx

@@ -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 calt"
+      className="text-2xl uppercase mb-6 text-center font-alpha"
     >
       {children}
     </h1>

libs/wallet/src/connect-dialog/view-connector-form.tsx

@@ -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 calt">
+        <h1 className="text-2xl uppercase mb-6 text-center font-alpha">
           {t('VIEW AS VEGA USER')}
         </h1>
         <p className="mb-4">