feat(explorer): highlight transfer types and add epoch overview

feat(explorer): tests for governancelink
feat(explorer): intro on treasury page now has links
2024-03-04 12:37:54 +00:00 · 2024-03-04 11:15:25 +00:00 · 2024-03-04 11:15:25 +00:00 · 2024-03-04 11:15:25 +00:00 · 2024-03-04 11:15:25 +00:00
407 changed files with 4437 additions and 8261 deletions
@@ -196,9 +196,9 @@ jobs:
  cypress:
    needs: [build-sources, check-e2e-needed]
    name: '(CI) cypress'
+    if: ${{ needs.check-e2e-needed.outputs.run-tests == 'true' }}
    uses: ./.github/workflows/cypress-run.yml
    secrets: inherit
-    if: needs.check-e2e-needed.outputs.run-tests == 'true' && (contains(needs.build-sources.outputs.projects, 'governance') || contains(needs.build-sources.outputs.projects, 'explorer'))
    with:
      projects: ${{ needs.build-sources.outputs.projects-e2e }}
      tags: '@smoke'
@@ -287,7 +287,6 @@ jobs:
    steps:
      - run: |
          result="${{ needs.cypress.result }}"
-          echo "Result: $result"
          if [[ $result == "success" || $result == "skipped" ]]; then
            exit 0
          else
@@ -1,28 +0,0 @@
-# path to a directory with all packages
-storage: ../tmp/local-registry/storage
-
-# a list of other known repositories we can talk to
-uplinks:
-  npmjs:
-    url: https://registry.yarnpkg.com
-    maxage: 60m
-
-packages:
-  '**':
-    # give all users (including non-authenticated users) full access
-    # because it is a local registry
-    access: $all
-    publish: $all
-    unpublish: $all
-
-    # if package is not available locally, proxy requests to npm registry
-    proxy: npmjs
-
-# log settings
-logs:
-  type: stdout
-  format: pretty
-  level: warn
-
-publish:
-  allow_offline: true # set offline to true to allow publish offline
@@ -136,7 +136,7 @@ The [`docker`](./docker) subfolder has some docker configurations for easily set
 Using multistage dockerfile dist is compiled using [node](https://hub.docker.com/_/node) image and later packed to nginx as in [dist build](#dist-build). The multistage builds ensures consistent CPU architecture and build toolchains are used so that the result will be identical.

 ```bash
-docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=20.11 --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
+docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=20.9.1 --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
 ```

 ### Computing ipfs-hash of the build
@@ -8,12 +8,14 @@ import EpochMissingOverview from './epoch-missing';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { IconProps } from '@vegaprotocol/ui-toolkit';
 import isPast from 'date-fns/isPast';
+import { EpochSymbol } from '../links/block-link/block-link';

 const borderClass =
  'border-solid border-2 border-vega-dark-200 border-collapse';

 export type EpochOverviewProps = {
  id?: string;
+  icon?: boolean;
 };

 /**
@@ -24,7 +26,7 @@ export type EpochOverviewProps = {
 *
 * The details are hidden in a tooltip, behind the epoch number
 */
-const EpochOverview = ({ id }: EpochOverviewProps) => {
+const EpochOverview = ({ id, icon = true }: EpochOverviewProps) => {
  const { data, error, loading } = useExplorerEpochQuery({
    variables: { id: id || '' },
  });
@@ -38,7 +40,12 @@ const EpochOverview = ({ id }: EpochOverviewProps) => {
  }

  if (!ti || loading || error) {
-    return <span>{id}</span>;
+    return (
+      <span>
+        <EpochSymbol />
+        {id}
+      </span>
+    );
  }

  const description = (
@@ -90,7 +97,11 @@ const EpochOverview = ({ id }: EpochOverviewProps) => {
  return (
    <Tooltip description={description}>
      <p>
-        <IconForEpoch start={ti.start} end={ti.end} />
+        {icon ? (
+          <IconForEpoch start={ti.start} end={ti.end} />
+        ) : (
+          <EpochSymbol />
+        )}
        {id}
      </p>
    </Tooltip>
@@ -0,0 +1,10 @@
+query ExplorerEpochForBlock($block: String!) {
+  epoch(block: $block) {
+    id
+    timestamps {
+      start
+      end
+      lastBlock
+    }
+  }
+}
@@ -0,0 +1,53 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerEpochForBlockQueryVariables = Types.Exact<{
+  block: Types.Scalars['String'];
+}>;
+
+
+export type ExplorerEpochForBlockQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, lastBlock?: string | null } } };
+
+
+export const ExplorerEpochForBlockDocument = gql`
+    query ExplorerEpochForBlock($block: String!) {
+  epoch(block: $block) {
+    id
+    timestamps {
+      start
+      end
+      lastBlock
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerEpochForBlockQuery__
+ *
+ * To run a query within a React component, call `useExplorerEpochForBlockQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerEpochForBlockQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useExplorerEpochForBlockQuery({
+ *   variables: {
+ *      block: // value for 'block'
+ *   },
+ * });
+ */
+export function useExplorerEpochForBlockQuery(baseOptions: Apollo.QueryHookOptions<ExplorerEpochForBlockQuery, ExplorerEpochForBlockQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerEpochForBlockQuery, ExplorerEpochForBlockQueryVariables>(ExplorerEpochForBlockDocument, options);
+      }
+export function useExplorerEpochForBlockLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerEpochForBlockQuery, ExplorerEpochForBlockQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerEpochForBlockQuery, ExplorerEpochForBlockQueryVariables>(ExplorerEpochForBlockDocument, options);
+        }
+export type ExplorerEpochForBlockQueryHookResult = ReturnType<typeof useExplorerEpochForBlockQuery>;
+export type ExplorerEpochForBlockLazyQueryHookResult = ReturnType<typeof useExplorerEpochForBlockLazyQuery>;
+export type ExplorerEpochForBlockQueryResult = Apollo.QueryResult<ExplorerEpochForBlockQuery, ExplorerEpochForBlockQueryVariables>;
@@ -4,17 +4,56 @@ import { Link } from 'react-router-dom';

 import type { ComponentProps } from 'react';
 import Hash from '../hash';
+import { useExplorerEpochForBlockQuery } from './__generated__/EpochByBlock';
+import { t } from '@vegaprotocol/i18n';

 export type BlockLinkProps = Partial<ComponentProps<typeof Link>> & {
  height: string;
+  showEpoch?: boolean;
 };

-const BlockLink = ({ height, ...props }: BlockLinkProps) => {
+const BlockLink = ({ height, showEpoch = false, ...props }: BlockLinkProps) => {
  return (
-    <Link className="underline" {...props} to={`/${Routes.BLOCKS}/${height}`}>
-      <Hash text={height} />
-    </Link>
+    <>
+      <Link className="underline" {...props} to={`/${Routes.BLOCKS}/${height}`}>
+        <Hash text={height} />
+      </Link>
+      {showEpoch && <EpochForBlock block={height} />}
+    </>
  );
 };

+export function EpochForBlock(props: { block: string }) {
+  const { error, data, loading } = useExplorerEpochForBlockQuery({
+    errorPolicy: 'ignore',
+    variables: { block: props.block },
+  });
+
+  // NOTE: 0.73.x & <0.74.2 can error showing epoch, so for now we hide loading
+  // or error states and only display if we get usable data
+  if (error || loading || !data) {
+    return null;
+  }
+
+  return (
+    <span className="ml-2" title={t('Epoch')}>
+      <EpochSymbol />
+      {data.epoch.id}
+    </span>
+  );
+}
+
+export const EPOCH_SYMBOL = 'ⓔ';
+
+export function EpochSymbol() {
+  return (
+    <em
+      title={t('Epoch')}
+      className="mr-1 cursor-default text-xl leading-none align-text-bottom not-italic"
+    >
+      {EPOCH_SYMBOL}
+    </em>
+  );
+}
+
 export default BlockLink;
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import GovernanceLink from './governance-link';
+
+describe('GovernanceLink', () => {
+  it('renders the link with the correct text', () => {
+    render(<GovernanceLink text="Governance internet website" />);
+    const linkElement = screen.getByText('Governance internet website');
+    expect(linkElement).toBeInTheDocument();
+  });
+
+  it('renders the link with the correct href and sensible default text', () => {
+    render(<GovernanceLink />);
+    const linkElement = screen.getByText('Governance');
+    expect(linkElement).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,18 @@
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { ENV } from '../../../config/env';
+import { t } from '@vegaprotocol/i18n';
+
+export type GovernanceLinkProps = {
+  text?: string;
+};
+
+/**
+ * Just a link to the governance page, with optional text
+ */
+const GovernanceLink = ({ text = t('Governance') }: GovernanceLinkProps) => {
+  const base = ENV.dataSources.governanceUrl;
+
+  return <ExternalLink href={base}>{text}</ExternalLink>;
+};
+
+export default GovernanceLink;
@@ -10,6 +10,8 @@ import { ChainResponseCode } from '../chain-response-code/chain-reponse.code';
 import { TxDataView } from '../../tx-data-view';
 import Hash from '../../../links/hash';
 import { Signature } from '../../../signature/signature';
+import { useExplorerEpochForBlockQuery } from '../../../links/block-link/__generated__/EpochByBlock';
+import EpochOverview from '../../../epoch-overview/epoch';

 interface TxDetailsSharedProps {
  txData: BlockExplorerTransactionResult | undefined;
@@ -44,6 +46,11 @@ export const TxDetailsShared = ({
  blockData,
  hideTypeRow = false,
 }: TxDetailsSharedProps) => {
+  const { data } = useExplorerEpochForBlockQuery({
+    errorPolicy: 'ignore',
+    variables: { block: txData?.block.toString() || '' },
+  });
+
  if (!txData) {
    return <>{t('Awaiting Block Explorer transaction details')}</>;
  }
@@ -74,7 +81,7 @@ export const TxDetailsShared = ({
      <TableRow modifier="bordered">
        <TableCell {...sharedHeaderProps}>{t('Block')}</TableCell>
        <TableCell>
-          <BlockLink height={height} />
+          <BlockLink height={height} showEpoch={false} />
        </TableCell>
      </TableRow>
      <TableRow modifier="bordered">
@@ -83,6 +90,7 @@ export const TxDetailsShared = ({
          <Signature signature={txData.signature} />
        </TableCell>
      </TableRow>
+
      <TableRow modifier="bordered">
        <TableCell {...sharedHeaderProps}>{t('Time')}</TableCell>
        <TableCell>
@@ -100,6 +108,14 @@ export const TxDetailsShared = ({
          )}
        </TableCell>
      </TableRow>
+      {data && data.epoch && (
+        <TableRow modifier="bordered">
+          <TableCell scope="row">{t('Epoch')}</TableCell>
+          <TableCell modifier="bordered">
+            <EpochOverview id={data.epoch.id} icon={false} />
+          </TableCell>
+        </TableRow>
+      )}
      <TableRow modifier="bordered">
        <TableCell {...sharedHeaderProps}>{t('Response code')}</TableCell>
        <TableCell>
@@ -113,13 +113,16 @@ export const TxDetailsTransfer = ({

 /**
 * Gets a string description of this transfer
- * @param txData A full transfer
+ * @param tx A full transfer
 * @returns string Transfer label
 */
 export function getTypeLabelForTransfer(tx: Transfer) {
  if (tx.to === SPECIAL_CASE_NETWORK || tx.to === SPECIAL_CASE_NETWORK_ID) {
+    if (tx.toAccountType === 'ACCOUNT_TYPE_NETWORK_TREASURY') {
+      return 'Treasury transfer';
+    }
    if (tx.recurring && tx.recurring.dispatchStrategy) {
-      return 'Reward top up transfer';
+      return 'Reward transfer';
    }
    // Else: we don't know that it's a reward transfer, so let's not guess
  } else if (tx.recurring) {
@@ -2,6 +2,7 @@ import { t } from '@vegaprotocol/i18n';
 import type { components } from '../../../types/explorer';
 import { VoteIcon } from '../vote-icon/vote-icon';
 import { ExternalChainIcon } from '../links/external-explorer-link/external-chain-icon';
+import { getTypeLabelForTransfer } from './details/tx-transfer';

 interface TxOrderTypeProps {
  orderType: string;
@@ -95,7 +96,7 @@ export function getLabelForOrderType(

 /**
 * Given a proposal, will return a specific label
- * @param chainEvent
+ * @param proposal
 * @returns
 */
 export function getLabelForProposal(
@@ -142,6 +143,36 @@ export function getLabelForProposal(
  }
 }

+type label = {
+  type: string;
+  colours: string;
+};
+
+export function getLabelForTransfer(
+  transfer: components['schemas']['commandsv1Transfer']
+): label {
+  const type = getTypeLabelForTransfer(transfer);
+
+  if (transfer.toAccountType === 'ACCOUNT_TYPE_NETWORK_TREASURY') {
+    return {
+      type,
+      colours:
+        'text-vega-green dark:text-green bg-vega-dark-150 dark:bg-vega-dark-250',
+    };
+  } else if (transfer.recurring) {
+    return {
+      type,
+      colours:
+        'text-vega-yellow dark:text-yellow bg-vega-dark-150 dark:bg-vega-dark-250',
+    };
+  }
+  return {
+    type,
+    colours:
+      'text-white dark:text-white bg-vega-dark-150 dark:bg-vega-dark-250',
+  };
+}
+
 /**
 * Given a chain event, will try to provide a more useful label
 * @param chainEvent
@@ -225,9 +256,10 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
  if (type === 'Chain Event' && !!command?.chainEvent) {
    type = getLabelForChainEvent(command.chainEvent);
    colours = 'text-white dark-text-white bg-vega-pink dark:bg-vega-pink';
-  } else if (type === 'Validator Heartbeat') {
-    colours =
-      'text-white dark-text-white bg-vega-light-200 dark:bg-vega-dark-100';
+  } else if (type === 'Transfer Funds' && command?.transfer) {
+    const res = getLabelForTransfer(command.transfer);
+    type = res.type;
+    colours = res.colours;
  } else if (type === 'Proposal' || type === 'Governance Proposal') {
    if (command && !!command.proposalSubmission) {
      type = getLabelForProposal(command.proposalSubmission);
@@ -16,6 +16,8 @@ import { useBlockInfo } from '@vegaprotocol/tendermint';
 import { NodeLink } from '../../../components/links';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 import EmptyList from '../../../components/empty-list/empty-list';
+import { useExplorerEpochForBlockQuery } from '../../../components/links/block-link/__generated__/EpochByBlock';
+import EpochOverview from '../../../components/epoch-overview/epoch';

 type Params = { block: string };

@@ -26,6 +28,11 @@ const Block = () => {
    state: { data: blockData, loading, error },
  } = useBlockInfo(Number(block));

+  const { data } = useExplorerEpochForBlockQuery({
+    errorPolicy: 'ignore',
+    variables: { block: block?.toString() || '' },
+  });
+
  return (
    <section>
      <RouteTitle data-testid="block-header">{t(`BLOCK ${block}`)}</RouteTitle>
@@ -75,6 +82,7 @@ const Block = () => {
                    <code>{blockData.result.block.header.consensus_hash}</code>
                  </TableCell>
                </TableRow>
+
                <TableRow modifier="bordered">
                  <TableHeader scope="row">Mined by</TableHeader>
                  <TableCell modifier="bordered">
@@ -97,6 +105,14 @@ const Block = () => {
                    )}
                  </TableCell>
                </TableRow>
+                {data && data.epoch && (
+                  <TableRow modifier="bordered">
+                    <TableCell scope="row">{t('Epoch')}</TableCell>
+                    <TableCell modifier="bordered">
+                      <EpochOverview id={data.epoch.id} icon={false} />
+                    </TableCell>
+                  </TableRow>
+                )}
                <TableRow modifier="bordered">
                  <TableHeader scope="row">Transactions</TableHeader>
                  <TableCell modifier="bordered">
@@ -33,7 +33,10 @@ export const NetworkAccountsTable = () => {
        return (
          <section className="md:flex md:flex-row flex-wrap">
            {c.map((a) => (
-              <div className="basis-1/2 md:basis-1/4">
+              <div
+                className="basis-1/2 md:basis-1/4"
+                key={`${a.assetId}-${a.balance}`}
+              >
                <div className="bg-white rounded overflow-hidden shadow-lg dark:bg-black dark:border-slate-500 dark:border">
                  <div className="text-center p-6 bg-gray-100 dark:bg-slate-900 border-b dark:border-slate-500">
                    <p className="flex justify-center">
@@ -16,19 +16,21 @@ import type { DeepPartial } from '@apollo/client/utilities';

 describe('typeLabel', () => {
  it('should return "Transfer" for "OneOffTransfer" kind', () => {
-    expect(typeLabel('OneOffTransfer')).toBe('Transfer');
+    expect(typeLabel('OneOffTransfer')).toBe('Transfer - one time');
  });

  it('should return "Transfer" for "RecurringTransfer" kind', () => {
-    expect(typeLabel('RecurringTransfer')).toBe('Transfer');
+    expect(typeLabel('RecurringTransfer')).toBe('Transfer - repeating');
  });

  it('should return "Governance" for "OneOffGovernanceTransfer" kind', () => {
-    expect(typeLabel('OneOffGovernanceTransfer')).toBe('Governance');
+    expect(typeLabel('OneOffGovernanceTransfer')).toBe('Governance - one time');
  });

  it('should return "Governance" for "RecurringGovernanceTransfer" kind', () => {
-    expect(typeLabel('RecurringGovernanceTransfer')).toBe('Governance');
+    expect(typeLabel('RecurringGovernanceTransfer')).toBe(
+      'Governance - repeating'
+    );
  });

  it('should return "Unknown" for unknown kind', () => {
@@ -256,7 +258,7 @@ describe('NetworkTransfersTable', () => {
    expect(screen.getByTestId('from-account').textContent).toEqual('Treasury');
    expect(screen.getByTestId('to-account').textContent).toEqual('7100…97a0');
    expect(screen.getByTestId('transfer-kind').textContent).toEqual(
-      'Governance'
+      'Governance - one time'
    );
  });
 });
@@ -12,6 +12,7 @@ import { t } from '@vegaprotocol/i18n';
 import { IconNames } from '@blueprintjs/icons';
 import { useMemo } from 'react';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import ProposalLink from '../../../components/links/proposal-link/proposal-link';

 export const colours = {
  INCOMING: '!fill-vega-green-600 text-vega-green-600 mr-2',
@@ -50,14 +51,24 @@ export function getToAccountTypeLabel(type?: AccountType): string {
  }
 }

+export function isGovernanceTransfer(kind?: string): boolean {
+  if (kind && kind.includes('Governance')) {
+    return true;
+  }
+
+  return false;
+}
+
 export function typeLabel(kind?: string): string {
  switch (kind) {
    case 'OneOffTransfer':
+      return t('Transfer - one time');
    case 'RecurringTransfer':
-      return t('Transfer');
+      return t('Transfer - repeating');
    case 'OneOffGovernanceTransfer':
+      return t('Governance - one time');
    case 'RecurringGovernanceTransfer':
-      return t('Governance');
+      return t('Governance - repeating');
    default:
      return t('Unknown');
  }
@@ -239,6 +250,11 @@ export const NetworkTransfersTable = () => {
                        >
                          {a && typeLabel(a.kind.__typename)}
                        </span>
+                        {isGovernanceTransfer(a?.kind.__typename) && a?.id && (
+                          <span className="ml-4">
+                            <ProposalLink id={a?.id} text="View" />
+                          </span>
+                        )}
                      </td>
                    </tr>
                  );
@@ -4,6 +4,7 @@ import { t } from '@vegaprotocol/i18n';
 import { RouteTitle } from '../../components/route-title';
 import { NetworkAccountsTable } from './components/network-accounts-table';
 import { NetworkTransfersTable } from './components/network-transfers-table';
+import GovernanceLink from '../../components/links/governance-link/governance-link';

 export type NonZeroAccount = {
  assetId: string;
@@ -16,7 +17,33 @@ export const NetworkTreasury = () => {
  return (
    <section>
      <RouteTitle data-testid="block-header">{t(`Treasury`)}</RouteTitle>
-      <div>
+      <details className="w-full md:w-3/5 cursor-pointer shadow-lg p-5 dark:border-l-2 dark:border-vega-green">
+        <summary>{t('About the Network Treasury')}</summary>
+        <section className="mt-4 b-1 border-grey">
+          <p className="mb-2">
+            The network treasury can hold funds from any active settlement asset
+            on the network. It is funded periodically by transfers from Gobalsky
+            as part of the Community Adoption Fund (CAF), but in future may
+            receive funds from any sources.
+          </p>
+          <p className="mb-2">
+            Funds in the network treasury can be used by creating governance
+            initiated transfers via{' '}
+            <GovernanceLink text={t('community governance')} />. These transfers
+            can be initiated by anyone and be used to fund reward pools, or can
+            be used to fund other activities the{' '}
+            <abbr className="decoration-dotted" title="Community Adoption Fund">
+              CAF
+            </abbr>{' '}
+            is exploring.
+          </p>
+          <p>
+            This page shows details of the balances in the treasury, pending
+            transfers, and historic transfer movements to and from the treasury.
+          </p>
+        </section>
+      </details>
+      <div className="mt-6">
        <NetworkAccountsTable />
      </div>
      <div className="mt-5">
@@ -1,9 +1,7 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
-const { theme } = require('../../libs/tailwindcss-config/src/theme');
-const {
-  vegaCustomClasses,
-} = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+const theme = require('../../libs/tailwindcss-config/src/theme');
+const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');

 module.exports = {
  content: [
@@ -7,7 +7,6 @@ import {
  navigateTo,
  navigation,
  turnTelemetryOff,
-  setRiskAccepted,
 } from '../../support/common.functions';
 import {
  clickOnValidatorFromList,
@@ -58,7 +57,6 @@ context(
    // 1002-STKE-002, 1002-STKE-032
    before('visit staking tab and connect vega wallet', function () {
      cy.visit('/');
-      setRiskAccepted();
      ethereumWalletConnect();
      cy.connectVegaWallet();
      vegaWalletSetSpecifiedApprovalAmount('1000');
@@ -5,7 +5,6 @@ import {
  navigateTo,
  navigation,
  turnTelemetryOff,
-  setRiskAccepted,
 } from '../../support/common.functions';
 import {
  stakingPageAssociateTokens,
@@ -58,7 +57,6 @@ context(
        function () {
          cy.clearLocalStorage();
          turnTelemetryOff();
-          setRiskAccepted();
          cy.mockChainId();
          cy.reload();
          waitForSpinner();
@@ -79,23 +79,23 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
      });
    });

-    it.skip('should have information on active nodes', function () {
+    it('should have information on active nodes', function () {
      cy.getByTestId('node-information')
        .first()
-        .should('contain.text', '2')
+        .should('contain.text', '1')
        .and('contain.text', 'active nodes');
    });

-    it.skip('should have information on consensus nodes', function () {
+    it('should have information on consensus nodes', function () {
      cy.getByTestId('node-information')
        .last()
-        .should('contain.text', '2')
+        .should('contain.text', '1')
        .and('contain.text', 'consensus nodes');
    });

-    it.skip('should contain link to specific validators', function () {
+    it('should contain link to specific validators', function () {
      cy.getByTestId('validators')
-        .should('have.length', '2')
+        .should('have.length', '1')
        .each(($validator) => {
          cy.wrap($validator).find('a').should('have.attr', 'href');
        });
@@ -153,7 +153,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
              .invoke('text')
              .should('not.eq', currentBlockHeight);
          });
-        cy.getByTestId('subscription-cell').should('be.be.visible');
+        cy.getByTestId('subscription-cell').should('have.text', 'Yes');
      });
      cy.getByTestId('connect').should('be.disabled');
      cy.getByTestId('node-url-custom').click({ force: true });
@@ -3,7 +3,6 @@
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import {
  navigation,
-  setRiskAccepted,
  verifyPageHeader,
  verifyTabHighlighted,
 } from '../../support/common.functions';
@@ -188,7 +187,6 @@ context('Validators Page - verify elements on page', function () {
      before('connect wallets and click on validator', function () {
        cy.mockChainId();
        cy.visit('/validators');
-        setRiskAccepted();
        cy.connectVegaWallet();
        clickOnValidatorFromList(0);
      });
@@ -1,8 +1,5 @@
 import { truncateByChars } from '@vegaprotocol/utils';
-import {
-  setRiskAccepted,
-  waitForSpinner,
-} from '../../support/common.functions';
+import { waitForSpinner } from '../../support/common.functions';
 import {
  vegaWalletFaucetAssetsWithoutCheck,
  vegaWalletTeardown,
@@ -14,6 +11,7 @@ const connectButton = 'connect-vega-wallet';
 const getVegaLink = 'link';
 const dialog = '[role="dialog"]:visible';
 const dialogHeader = 'dialog-title';
+const walletDialogHeader = 'wallet-dialog-title';
 const connectorsList = 'connectors-list';
 const dialogCloseBtn = 'dialog-close';
 const accountNo = 'vega-account-truncated';
@@ -36,7 +34,6 @@ context(
  () => {
    before('visit token home page', () => {
      cy.visit('/');
-      setRiskAccepted();
      cy.get(walletContainer, { timeout: 60000 }).should('be.visible');
    });

@@ -66,12 +63,17 @@ context(

      it('should have Connect Vega header visible', () => {
        cy.get(dialog).within(() => {
-          cy.getByTestId(connectorsList)
+          cy.getByTestId(walletDialogHeader)
            .should('be.visible')
-            .and(
-              'have.text',
-              'Get the Vega WalletGet MetaMask>_Command Line WalletView as public key'
-            );
+            .and('have.text', 'Get a Vega wallet');
+        });
+      });
+
+      it('should have jsonRpc and hosted connection options visible on list', function () {
+        cy.getByTestId(connectorsList).within(() => {
+          cy.getByTestId('connector-jsonRpc')
+            .should('be.visible')
+            .and('have.text', 'Use the Desktop App/CLI');
        });
      });

@@ -86,6 +88,7 @@ context(
      before('connect vega wallet', function () {
        cy.mockChainId();
        cy.visit('/');
+        cy.wait('@ChainId');
        cy.connectVegaWallet();
        vegaWalletTeardown();
      });
@@ -102,12 +102,6 @@ export function turnTelemetryOff() {
  );
 }

-export function setRiskAccepted() {
-  cy.window().then((win) =>
-    win.localStorage.setItem('vega_wallet_risk_accepted', 'true')
-  );
-}
-
 export function dissociateFromSecondWalletKey() {
  const secondWalletKey = Cypress.env('vegaWalletPublicKey2Short');
  cy.getByTestId('vega-in-wallet')
@@ -26,9 +26,9 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
  const { token, staking, vesting } = useContracts();
  const setAssociatedBalances = useRefreshAssociatedBalances();
  const [balancesLoaded, setBalancesLoaded] = React.useState(false);
-  const vegaWalletStatus = useEagerConnect();
+  const vegaConnecting = useEagerConnect();

-  const loaded = balancesLoaded && vegaWalletStatus !== 'connecting';
+  const loaded = balancesLoaded && !vegaConnecting;

  React.useEffect(() => {
    const run = async () => {
@@ -169,5 +169,3 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
  }
  return <Suspense fallback={loading}>{children}</Suspense>;
 };
-
-AppLoader.displayName = 'AppLoader';
@@ -1,44 +0,0 @@
-import {
-  useLinks,
-  DApp,
-  CONSOLE_REWARDS_PAGE,
-} from '@vegaprotocol/environment';
-import {
-  ExternalLink,
-  Intent,
-  NotificationBanner,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import { Trans } from 'react-i18next';
-import { useMatch } from 'react-router-dom';
-import Routes from '../../routes/routes';
-import { type ReactNode } from 'react';
-
-const ConsoleRewardsLink = ({ children }: { children: ReactNode }) => {
-  const consoleLink = useLinks(DApp.Console);
-  return (
-    <ExternalLink
-      href={consoleLink(CONSOLE_REWARDS_PAGE)}
-      className="underline inline-flex gap-1 items-center"
-      title="Rewards in Console"
-    >
-      <span>{children}</span>
-      <VegaIcon size={12} name={VegaIconNames.OPEN_EXTERNAL} />
-    </ExternalLink>
-  );
-};
-
-export const RewardsMovedNotification = () => {
-  const onRewardsPage = useMatch(Routes.REWARDS);
-  if (!onRewardsPage) return null;
-
-  return (
-    <NotificationBanner intent={Intent.Warning}>
-      <Trans
-        i18nKey="rewardsMovedNotification"
-        components={[<ConsoleRewardsLink>Console</ConsoleRewardsLink>]}
-      />
-    </NotificationBanner>
-  );
-};
@@ -10,7 +10,6 @@ import {
  ProtocolUpgradeProposalNotification,
 } from '@vegaprotocol/proposals';
 import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
-import { RewardsMovedNotification } from '../notifications/rewards-moved-notification';

 interface AppLayoutProps {
  children: ReactNode;
@@ -46,10 +45,8 @@ export const AppLayout = ({ children }: AppLayoutProps) => {

 const NotificationsContainer = () => {
  const { isReadOnly, pubKey, disconnect } = useVegaWallet();
-
  return (
    <div data-testid="banners">
-      <RewardsMovedNotification />
      <ProtocolUpgradeProposalNotification
        mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
      />
@@ -111,4 +111,3 @@ export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
    </ContractsContext.Provider>
  );
 };
-ContractsProvider.displayName = 'ContractsProvider';
@@ -288,7 +288,7 @@ describe('Consensus validators table', () => {

    expect(
      grid.querySelector('[role="gridcell"][col-id="totalPenalties"]')
-    ).toHaveTextContent('10.07%');
+    ).toHaveTextContent('13.16%');

    expect(
      grid.querySelector('[role="gridcell"][col-id="normalisedVotingPower"]')
@@ -185,19 +185,15 @@ export const ConsensusValidatorsTable = ({
          const { rawValidatorScore: previousEpochValidatorScore } =
            getLastEpochScoreAndPerformance(previousEpochData, id);

-          const overstakingPenalty = calculateOverstakedPenalty(
+          const overstakingPenalty = calculateOverallPenalty(
            id,
            allNodesInPreviousEpoch
          );
-          const totalPenalty = calculateOverallPenalty(
+          const totalPenalty = calculateOverstakedPenalty(
            id,
            allNodesInPreviousEpoch
          );

-          const lastEpochDataForNode = allNodesInPreviousEpoch.find(
-            (node) => node.id === id
-          );
-
          return {
            id,
            [ValidatorFields.RANKING_INDEX]: stakedTotalRanking,
@@ -243,12 +239,6 @@ export const ConsensusValidatorsTable = ({
              : undefined,
            [ValidatorFields.MULTISIG_ERROR]:
              multisigStatus?.showMultisigStatusError,
-            [ValidatorFields.MULTISIG_PENALTY]: formatNumberPercentage(
-              new BigNumber(1)
-                .minus(lastEpochDataForNode?.rewardScore?.multisigScore ?? 1)
-                .times(100),
-              2
-            ),
          };
        }
      );
@@ -388,6 +378,7 @@ export const ConsensusValidatorsTable = ({
          headerTooltip: t('StakeDescription').toString(),
          cellRenderer: TotalStakeRenderer,
          width: 120,
+          sort: 'desc',
        },
        {
          field: ValidatorFields.PENDING_STAKE,
@@ -409,7 +400,6 @@ export const ConsensusValidatorsTable = ({
          headerTooltip: t('NormalisedVotingPowerDescription').toString(),
          cellRenderer: VotingPowerRenderer,
          width: 120,
-          sort: 'desc',
        },
        {
          field: ValidatorFields.TOTAL_PENALTIES,
@@ -40,7 +40,6 @@ export enum ValidatorFields {
  PENDING_USER_STAKE = 'pendingUserStake',
  USER_STAKE_SHARE = 'userStakeShare',
  MULTISIG_ERROR = 'multisigError',
-  MULTISIG_PENALTY = 'multisigPenalty',
 }

 export const addUserDataToValidator = (
@@ -328,7 +327,7 @@ interface TotalPenaltiesRendererProps {
    overstakedAmount: string;
    overstakingPenalty: string;
    totalPenalties: string;
-    multisigPenalty: string;
+    multisigError?: boolean;
  };
 }

@@ -347,9 +346,11 @@ export const TotalPenaltiesRenderer = ({
          <div data-testid="overstaked-penalty-tooltip">
            {t('overstakedPenalty')}: {data.overstakingPenalty}
          </div>
-          <div data-testid="multisig-error-tooltip">
-            {t('multisigPenalty')}: {data.multisigPenalty}
-          </div>
+          {data.multisigError && (
+            <div data-testid="multisig-error-tooltip">
+              {t('multisigPenalty')}: 100%
+            </div>
+          )}
        </>
      }
    >
@@ -37,6 +37,7 @@ import {
 import type { ReactNode } from 'react';
 import type { StakingNodeFieldsFragment } from '../__generated__/Staking';
 import type { PreviousEpochQuery } from '../__generated__/PreviousEpoch';
+import { getMultisigStatusInfo } from '../../../lib/get-multisig-status-info';

 const statuses = {
  [Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_ERSATZ]: 'status-ersatz',
@@ -104,10 +105,9 @@ export const ValidatorTable = ({
    };
  }, [node, previousEpochData?.epoch.validatorsConnection?.edges]);

-  const previousNodeData =
-    previousEpochData?.epoch.validatorsConnection?.edges?.find(
-      (e) => e?.node.id === node.id
-    );
+  const multisigStatus = previousEpochData
+    ? getMultisigStatusInfo(previousEpochData)
+    : undefined;

  return (
    <>
@@ -293,15 +293,21 @@ export const ValidatorTable = ({
                  data-testid="multisig-penalty"
                  className="flex gap-2 items-baseline"
                >
+                  {multisigStatus?.zeroScoreNodes.find(
+                    (n) => n.id === node.id
+                  ) ? (
+                    <Tooltip
+                      description={t('multisigPenaltyThisNodeIndicator')}
+                    >
+                      <span className="inline-block w-2 h-2 rounded-full bg-vega-red-500"></span>
+                    </Tooltip>
+                  ) : null}
                  <Tooltip description={t('multisigPenaltyDescription')}>
                    <span>
                      {formatNumberPercentage(
-                        new BigNumber(1)
-                          .minus(
-                            previousNodeData?.node.rewardScore?.multisigScore ??
-                              1
-                          )
-                          .times(100),
+                        BigNumber(
+                          multisigStatus?.showMultisigStatusError ? 100 : 0
+                        ),
                        2
                      )}
                    </span>
@@ -1,11 +1,9 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
-const { theme } = require('../../libs/tailwindcss-config/src/theme');
-const {
-  vegaCustomClasses,
-} = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+const theme = require('../../libs/tailwindcss-config/src/theme');
+const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');

-export default {
+module.exports = {
  content: [
    join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
    'libs/ui-toolkit/src/utils/shared.ts',
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}
@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.
@@ -0,0 +1,28 @@
+# React Environment Variables
+# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
+
+# Netlify Environment Variables
+# https://www.netlify.com/docs/continuous-deployment/#environment-variables
+NX_VERSION=\$npm_package_version
+NX_REPOSITORY_URL=\$REPOSITORY_URL
+NX_BRANCH=\$BRANCH
+NX_PULL_REQUEST=\$PULL_REQUEST
+NX_HEAD=\$HEAD
+NX_COMMIT_REF=\$COMMIT_REF
+NX_CONTEXT=\$CONTEXT
+NX_REVIEW_ID=\$REVIEW_ID
+NX_INCOMING_HOOK_TITLE=\$INCOMING_HOOK_TITLE
+NX_INCOMING_HOOK_URL=\$INCOMING_HOOK_URL
+NX_INCOMING_HOOK_BODY=\$INCOMING_HOOK_BODY
+NX_URL=\$URL
+NX_DEPLOY_URL=\$DEPLOY_URL
+NX_DEPLOY_PRIME_URL=\$DEPLOY_PRIME_URL
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
+NX_VEGA_ENV = 'TESTNET'
+NX_VEGA_URL="https://api.n07.testnet.vega.xyz/graphql"
+NX_VEGA_WALLET_URL=http://localhost:1789
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
+NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_URL=http://localhost:3008/graphql
+NX_VEGA_ENV=LOCAL
@@ -0,0 +1,8 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
+NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql
+NX_VEGA_ENV=DEVNET
+NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_EXPLORER_URL=#
@@ -0,0 +1,9 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
+NX_VEGA_URL=https://api.vega.community/graphql
+NX_VEGA_ENV=MAINNET
+NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\"}
+NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://etherscan.io
+NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
+NX_VEGA_CONSOLE_URL=https://console.vega.xyz
@@ -0,0 +1,9 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
+NX_VEGA_URL=https://api.n00.stagnet1.vega.xyz/graphql
+NX_VEGA_ENV=STAGNET1
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
+NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+
@@ -0,0 +1,9 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
+NX_VEGA_ENV=TESTNET
+NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\"}
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
+NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__generated__"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'liquidity-provision-dashboard',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/liquidity-provision-dashboard',
+};
@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,94 @@
+{
+  "name": "liquidity-provision-dashboard",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/liquidity-provision-dashboard/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/liquidity-provision-dashboard",
+        "index": "apps/liquidity-provision-dashboard/src/index.html",
+        "baseHref": "/",
+        "main": "apps/liquidity-provision-dashboard/src/main.tsx",
+        "polyfills": "apps/liquidity-provision-dashboard/src/polyfills.ts",
+        "tsConfig": "apps/liquidity-provision-dashboard/tsconfig.app.json",
+        "assets": [
+          "apps/liquidity-provision-dashboard/src/favicon.ico",
+          "apps/liquidity-provision-dashboard/src/assets"
+        ],
+        "styles": ["apps/liquidity-provision-dashboard/src/styles.scss"],
+        "scripts": [],
+        "webpackConfig": "@nx/react/plugins/webpack"
+      },
+      "configurations": {
+        "development": {
+          "extractLicenses": false,
+          "optimization": false,
+          "sourceMap": true,
+          "vendorChunk": true
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/liquidity-provision-dashboard/src/environments/environment.ts",
+              "with": "apps/liquidity-provision-dashboard/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/webpack:dev-server",
+      "options": {
+        "buildTarget": "liquidity-provision-dashboard:build",
+        "hmr": true,
+        "port": 4201
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "liquidity-provision-dashboard:build:development"
+        },
+        "production": {
+          "buildTarget": "liquidity-provision-dashboard:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "apps/liquidity-provision-dashboard/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/apps/liquidity-provision-dashboard"
+      ],
+      "options": {
+        "jestConfig": "apps/liquidity-provision-dashboard/jest.config.ts"
+      }
+    },
+    "build-spec": {
+      "executor": "nx:run-commands",
+      "outputs": [],
+      "options": {
+        "command": "yarn tsc --project ./apps/liquidity-provision-dashboard/tsconfig.spec.json"
+      }
+    }
+  },
+  "tags": []
+}
@@ -0,0 +1,47 @@
+import type { InMemoryCacheConfig } from '@apollo/client';
+import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
+import { useRoutes } from 'react-router-dom';
+
+import '../styles.scss';
+import { Navbar } from './components/navbar';
+
+import { routerConfig } from './routes/router-config';
+
+const cache: InMemoryCacheConfig = {
+  typePolicies: {
+    Market: {
+      merge: true,
+    },
+    Party: {
+      merge: true,
+    },
+    Query: {},
+    Account: {
+      keyFields: false,
+      fields: {
+        balanceFormatted: {},
+      },
+    },
+    Node: {
+      keyFields: false,
+    },
+    Instrument: {
+      keyFields: false,
+    },
+  },
+};
+const AppRouter = () => useRoutes(routerConfig);
+
+export function App() {
+  useInitializeEnv();
+  return (
+    <NetworkLoader cache={cache}>
+      <div className="max-h-full min-h-full bg-white">
+        <Navbar />
+        <AppRouter />
+      </div>
+    </NetworkLoader>
+  );
+}
+
+export default App;
@@ -0,0 +1,25 @@
+import { t } from '@vegaprotocol/i18n';
+
+import { Intro } from './intro';
+import { MarketList } from './market-list';
+
+export function Dashboard() {
+  return (
+    <>
+      <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">
+            {t('Top liquidity opportunities')}
+          </h1>
+
+          <Intro />
+        </div>
+      </div>
+      <div className="px-16 py-6">
+        <div className="max-w-screen-xl mx-auto">
+          <MarketList />
+        </div>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1 @@
+export * from './dashboard';
@@ -0,0 +1 @@
+export * from './intro';
@@ -0,0 +1,53 @@
+import { t } from '@vegaprotocol/i18n';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+
+// TODO: add mainnet links once docs have been updated
+const LINKS = {
+  testnet: [
+    {
+      label: 'Learn about liquidity fees',
+      url: 'https://docs.vega.xyz/testnet/tutorials/providing-liquidity#resources',
+    },
+    {
+      label: 'Provide liquidity',
+      url: 'https://docs.vega.xyz/testnet/tutorials/providing-liquidity#overview',
+    },
+    {
+      label: 'View your liquidity provisions',
+      url: 'https://docs.vega.xyz/testnet/tutorials/providing-liquidity#viewing-existing-liquidity-provisions',
+    },
+    {
+      label: 'Amend or remove liquidity',
+      url: 'https://docs.vega.xyz/testnet/tutorials/providing-liquidity#amending-a-liquidity-commitment',
+    },
+  ],
+  mainnet: [],
+};
+
+// TODO: update this when network switcher is added
+type Network = 'testnet' | 'mainnet';
+
+export const Intro = ({ network = 'testnet' }: { network?: Network }) => {
+  return (
+    <div>
+      <p className="font-alpha calt text-2xl font-medium mb-2">
+        {t(
+          'Become a liquidity provider and earn a cut of the fees paid during trading.'
+        )}
+      </p>
+      <div>
+        <ul className="flex flex-wrap">
+          {LINKS[network].map(
+            ({ label, url }: { label: string; url: string }) => (
+              <li key={url} className="mr-6">
+                <ExternalLink href={url} rel="noreferrer">
+                  {t(label)}
+                </ExternalLink>
+              </li>
+            )
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './market-list';
@@ -0,0 +1,296 @@
+import { DApp, useLinks } from '@vegaprotocol/environment';
+import { type Market } from '@vegaprotocol/liquidity';
+import {
+  displayChange,
+  formatWithAsset,
+  useMarketsLiquidity,
+} from '@vegaprotocol/liquidity';
+import {
+  addDecimalsFormatNumber,
+  formatNumberPercentage,
+  getExpiryDate,
+  toBigNum,
+} from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import { type VegaValueFormatterParams } from '@vegaprotocol/datagrid';
+import { PriceChangeCell } from '@vegaprotocol/datagrid';
+import type * as Schema from '@vegaprotocol/types';
+import {
+  AsyncRenderer,
+  Icon,
+  HealthBar,
+  TooltipCellComponent,
+} from '@vegaprotocol/ui-toolkit';
+import {
+  type GetRowIdParams,
+  type RowClickedEvent,
+  type ColDef,
+} from 'ag-grid-community';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { useCallback, useState, useMemo } from 'react';
+
+import { Grid } from '../../grid';
+import { HealthDialog } from '../../health-dialog';
+import { Status } from '../../status';
+import { intentForStatus } from '../../../lib/utils';
+import { formatDistanceToNow } from 'date-fns';
+import { getAsset } from '@vegaprotocol/markets';
+
+export const MarketList = () => {
+  const { data, error, loading } = useMarketsLiquidity();
+  const [isHealthDialogOpen, setIsHealthDialogOpen] = useState(false);
+  const consoleLink = useLinks(DApp.Console);
+
+  const getRowId = useCallback(({ data }: GetRowIdParams) => data.id, []);
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      {
+        headerName: t('Market (futures)'),
+        field: 'tradableInstrument.instrument.name',
+        cellRenderer: ({ value, data }: { value: string; data: Market }) => {
+          return (
+            <>
+              <span className="leading-3">{value}</span>
+              <span className="leading-3">{getAsset(data).symbol}</span>
+            </>
+          );
+        },
+        minWidth: 100,
+        flex: 1,
+        headerTooltip: t('The market name and settlement asset'),
+      },
+
+      {
+        headerName: t('Market Code'),
+        headerTooltip: t(
+          'The market code is a unique identifier for this market'
+        ),
+        field: 'tradableInstrument.instrument.code',
+      },
+
+      {
+        headerName: t('Type'),
+        headerTooltip: t('Type'),
+        field: 'tradableInstrument.instrument.product.__typename',
+      },
+
+      {
+        headerName: t('Last Price'),
+        headerTooltip: t('Latest price for this market'),
+        field: 'data.markPrice',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'data.markPrice'>) =>
+          value && data ? formatWithAsset(value, getAsset(data)) : '-',
+      },
+
+      {
+        headerName: t('Change (24h)'),
+        headerTooltip: t('Change in price over the last 24h'),
+        cellRenderer: ({
+          data,
+        }: VegaValueFormatterParams<Market, 'data.candles'>) => {
+          if (data && data.candles) {
+            const prices = data.candles.map((candle) => candle.close);
+            return (
+              <PriceChangeCell
+                candles={prices}
+                decimalPlaces={data?.decimalPlaces}
+              />
+            );
+          } else return <div>{t('-')}</div>;
+        },
+      },
+
+      {
+        headerName: t('Volume (24h)'),
+        field: 'dayVolume',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'dayVolume'>) =>
+          value && data
+            ? `${addDecimalsFormatNumber(
+                value,
+                getAsset(data).decimals || 0
+              )} (${displayChange(data.volumeChange)})`
+            : '-',
+        headerTooltip: t('The trade volume over the last 24h'),
+      },
+
+      {
+        headerName: t('Total staked by LPs'),
+        field: 'liquidityCommitted',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'liquidityCommitted'>) =>
+          data && value
+            ? formatWithAsset(value.toString(), getAsset(data))
+            : '-',
+        headerTooltip: t('The amount of funds allocated to provide liquidity'),
+      },
+
+      {
+        headerName: t('Target stake'),
+        field: 'target',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Market, 'target'>) =>
+          data && value ? formatWithAsset(value, getAsset(data)) : '-',
+        headerTooltip: t(
+          'The ideal committed liquidity to operate the market.  If total commitment currently below this level then LPs can set the fee level with new commitment.'
+        ),
+      },
+
+      {
+        headerName: t('% Target stake met'),
+        valueFormatter: ({ data }: VegaValueFormatterParams<Market, ''>) => {
+          if (data) {
+            const roundedPercentage =
+              parseInt(
+                (data.liquidityCommitted / parseFloat(data.target)).toFixed(0)
+              ) * 100;
+            const display = Number.isNaN(roundedPercentage)
+              ? 'N/A'
+              : formatNumberPercentage(toBigNum(roundedPercentage, 0), 0);
+            return display;
+          } else return '-';
+        },
+        headerTooltip: t('% Target stake met'),
+      },
+
+      {
+        headerName: t('Fee levels'),
+        field: 'fees',
+        valueFormatter: ({ value }: VegaValueFormatterParams<Market, 'fees'>) =>
+          value ? `${value.factors.liquidityFee}%` : '-',
+        headerTooltip: t('Fee level for this market'),
+      },
+
+      {
+        headerName: t('Status'),
+        field: 'tradingMode',
+        cellRenderer: ({
+          value,
+          data,
+        }: {
+          value: Schema.MarketTradingMode;
+          data: Market;
+        }) => {
+          return <Status trigger={data.data?.trigger} tradingMode={value} />;
+        },
+        headerTooltip: t(
+          'The current market status - those below the target stake mark are most in need of liquidity'
+        ),
+      },
+
+      {
+        headerComponent: () => {
+          return (
+            <div>
+              <span>{t('Health')}</span>{' '}
+              <button
+                onClick={() => setIsHealthDialogOpen(true)}
+                aria-label={t('open tooltip')}
+              >
+                <Icon name="info-sign" />
+              </button>
+            </div>
+          );
+        },
+        field: 'tradingMode',
+        cellRenderer: ({
+          value,
+          data,
+        }: {
+          value: Schema.MarketTradingMode;
+          data: Market;
+        }) => (
+          <HealthBar
+            target={data.target}
+            decimals={getAsset(data).decimals || 0}
+            levels={data.feeLevels}
+            intent={intentForStatus(value)}
+          />
+        ),
+        sortable: false,
+        cellStyle: { overflow: 'unset' },
+      },
+      {
+        headerName: t('Age'),
+        field: 'marketTimestamps.open',
+        headerTooltip: t('Age of the market'),
+        valueFormatter: ({
+          value,
+        }: VegaValueFormatterParams<Market, 'marketTimestamps.open'>) => {
+          return value ? formatDistanceToNow(new Date(value)) : '-';
+        },
+      },
+      {
+        headerName: t('Closing Time'),
+        field: 'tradableInstrument.instrument.metadata.tags',
+        headerTooltip: t('Closing time of the market'),
+        valueFormatter: ({ data }: VegaValueFormatterParams<Market, ''>) => {
+          let expiry;
+          if (data?.tradableInstrument.instrument.metadata.tags) {
+            expiry = getExpiryDate(
+              data?.tradableInstrument.instrument.metadata.tags,
+              data?.marketTimestamps.close,
+              data?.state
+            );
+          }
+          return expiry ? expiry : '-';
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <AsyncRenderer loading={loading} error={error} data={data}>
+      <div
+        className="w-full grow"
+        style={{ minHeight: 500, overflow: 'hidden' }}
+      >
+        <Grid
+          gridOptions={{
+            onRowClicked: ({ data }: RowClickedEvent) => {
+              window.open(
+                liquidityDetailsConsoleLink(data.id, consoleLink),
+                '_blank',
+                'noopener,noreferrer'
+              );
+            },
+          }}
+          rowData={data}
+          defaultColDef={{
+            resizable: true,
+            sortable: true,
+            unSortIcon: true,
+            cellClass: ['flex', 'flex-col', 'justify-center'],
+            tooltipComponent: TooltipCellComponent,
+          }}
+          columnDefs={columnDefs}
+          getRowId={getRowId}
+          isRowClickable
+          tooltipShowDelay={500}
+        />
+        <HealthDialog
+          isOpen={isHealthDialogOpen}
+          onChange={() => {
+            setIsHealthDialogOpen(!isHealthDialogOpen);
+          }}
+        />
+      </div>
+    </AsyncRenderer>
+  );
+};
+
+const liquidityDetailsConsoleLink = (
+  marketId: string,
+  consoleLink: (url: string | undefined) => string
+) => consoleLink(`/#/liquidity/${marketId}`);
@@ -0,0 +1,103 @@
+import { useParams } from 'react-router-dom';
+import { makeDerivedDataProvider } from '@vegaprotocol/data-provider';
+import { t } from '@vegaprotocol/i18n';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+
+import {
+  getFeeLevels,
+  sumLiquidityCommitted,
+  lpAggregatedDataProvider,
+} from '@vegaprotocol/liquidity';
+import { getAsset, marketWithDataProvider } from '@vegaprotocol/markets';
+import type { MarketWithData } from '@vegaprotocol/markets';
+
+import { Market } from './market';
+import { Header } from './header';
+import { LPProvidersGrid } from './providers';
+
+const formatMarket = (market: MarketWithData) => {
+  return {
+    name: market?.tradableInstrument.instrument.name,
+    symbol: getAsset(market).symbol,
+    settlementAsset: getAsset(market),
+    targetStake: market?.data?.targetStake,
+    tradingMode: market?.data?.marketTradingMode,
+    trigger: market?.data?.trigger,
+  };
+};
+
+export const lpDataProvider = makeDerivedDataProvider(
+  [marketWithDataProvider, lpAggregatedDataProvider],
+  ([market, lpAggregatedData]) => ({
+    market: { ...formatMarket(market) },
+    liquidityProviders: lpAggregatedData || [],
+  })
+);
+
+const useMarketDetails = (marketId: string | undefined) => {
+  const { data, loading, error } = useDataProvider({
+    dataProvider: lpDataProvider,
+    skipUpdates: true,
+    variables: { marketId: marketId || '' },
+  });
+
+  const liquidityProviders = data?.liquidityProviders || [];
+
+  return {
+    data: {
+      name: data?.market?.name,
+      symbol: data?.market?.symbol,
+      liquidityProviders: liquidityProviders,
+      feeLevels: getFeeLevels(liquidityProviders),
+      comittedLiquidity: sumLiquidityCommitted(liquidityProviders) || 0,
+      settlementAsset: data?.market?.settlementAsset || {},
+      targetStake: data?.market?.targetStake || '0',
+      tradingMode: data?.market.tradingMode,
+    },
+    error,
+    loading: loading,
+  };
+};
+
+type Params = { marketId: string };
+
+export const Detail = () => {
+  const { marketId } = useParams<Params>();
+  const { data, loading, error } = useMarketDetails(marketId);
+
+  return (
+    <AsyncRenderer loading={loading} error={error} data={data}>
+      <div className="bg-greys-light-100 px-16 pb-12 pt-14">
+        <div className="mx-auto max-w-screen-xl">
+          <Header name={data.name} symbol={data.symbol} />
+        </div>
+      </div>
+      <div className="px-16">
+        <div className="mx-auto max-w-screen-xl">
+          <div className="py-12">
+            {marketId && (
+              <Market
+                marketId={marketId}
+                feeLevels={data.feeLevels}
+                comittedLiquidity={data.comittedLiquidity}
+                settlementAsset={data.settlementAsset}
+                targetStake={data.targetStake}
+                tradingMode={data.tradingMode}
+              />
+            )}
+          </div>
+          <div>
+            <h2 className="font-alpha calt mb-4 text-2xl">
+              {t('Current Liquidity Provision')}
+            </h2>
+            <LPProvidersGrid
+              liquidityProviders={data.liquidityProviders}
+              settlementAsset={data.settlementAsset}
+            />
+          </div>
+        </div>
+      </div>
+    </AsyncRenderer>
+  );
+};
@@ -0,0 +1,26 @@
+import { t } from '@vegaprotocol/i18n';
+import { Link } from 'react-router-dom';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+
+export const Header = ({
+  name,
+  symbol,
+}: {
+  name?: string;
+  symbol?: string;
+}) => {
+  return (
+    <div>
+      <div className="mb-6">
+        <Link to="/">
+          <Icon name="chevron-left" className="mr-2" />
+          <span className="underline font-alpha calt 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>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './header';
@@ -0,0 +1 @@
+export * from './detail';
@@ -0,0 +1 @@
+export * from './last-24h-volume';
@@ -0,0 +1,108 @@
+import { useState, useMemo, useRef, useCallback } from 'react';
+import throttle from 'lodash/throttle';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { useYesterday } from '@vegaprotocol/react-helpers';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import * as Schema from '@vegaprotocol/types';
+import {
+  calcDayVolume,
+  getChange,
+  displayChange,
+} from '@vegaprotocol/liquidity';
+
+import type { Candle } from '@vegaprotocol/markets';
+import { marketCandlesProvider } from '@vegaprotocol/markets';
+
+const THROTTLE_UPDATE_TIME = 500;
+
+export const Last24hVolume = ({
+  marketId,
+  decimals,
+}: {
+  marketId: string;
+  decimals: number;
+}) => {
+  const [candleVolume, setCandleVolume] = useState<string>();
+  const [volumeChange, setVolumeChange] = useState<string>(' - ');
+
+  const yesterday = useYesterday();
+
+  const yTimestamp = useMemo(() => {
+    return new Date(yesterday).toISOString();
+  }, [yesterday]);
+
+  const variables = useMemo(
+    () => ({
+      marketId: marketId,
+      interval: Schema.Interval.INTERVAL_I1H,
+      since: yTimestamp,
+    }),
+    [marketId, yTimestamp]
+  );
+
+  const variables24hAgo = {
+    marketId: marketId,
+    interval: Schema.Interval.INTERVAL_I1D,
+    since: yTimestamp,
+  };
+
+  const throttledSetCandles = useRef(
+    throttle((data: Candle[]) => {
+      setCandleVolume(calcDayVolume(data));
+    }, THROTTLE_UPDATE_TIME)
+  ).current;
+
+  const update = useCallback(
+    ({ data }: { data: Candle[] | null }) => {
+      if (data) {
+        throttledSetCandles(data);
+      }
+      return true;
+    },
+    [throttledSetCandles]
+  );
+
+  const { data, error } = useDataProvider({
+    dataProvider: marketCandlesProvider,
+    variables: variables,
+    update,
+    skip: !marketId,
+  });
+
+  const throttledSetVolumeChange = useRef(
+    throttle((candles: Candle[]) => {
+      const candle24hAgo = candles?.[0];
+      setVolumeChange(getChange(data || [], candle24hAgo?.close));
+    }, THROTTLE_UPDATE_TIME)
+  ).current;
+
+  const updateCandle24hAgo = useCallback(
+    ({ data }: { data: Candle[] | null }) => {
+      if (data) {
+        throttledSetVolumeChange(data);
+      }
+      return true;
+    },
+    [throttledSetVolumeChange]
+  );
+
+  useDataProvider({
+    dataProvider: marketCandlesProvider,
+    update: updateCandle24hAgo,
+    variables: variables24hAgo,
+    skip: !marketId || !data,
+  });
+
+  return (
+    <div>
+      <span className="text-3xl">
+        {!error && candleVolume
+          ? addDecimalsFormatNumber(candleVolume, decimals)
+          : '0'}{' '}
+      </span>
+      <span className="text-lg text-greys-light-400">
+        ({displayChange(volumeChange)})
+      </span>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './market';
@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import { t } from '@vegaprotocol/i18n';
+import { Icon, HealthBar } from '@vegaprotocol/ui-toolkit';
+import { formatWithAsset } from '@vegaprotocol/liquidity';
+
+import type * as Schema from '@vegaprotocol/types';
+import { HealthDialog } from '../../health-dialog';
+import { Last24hVolume } from '../last-24h-volume';
+import { Status } from '../../status';
+import { intentForStatus } from '../../../lib/utils';
+
+interface Levels {
+  fee: string;
+  commitmentAmount: number;
+}
+
+interface settlementAsset {
+  symbol?: string;
+  decimals?: number;
+}
+
+export const Market = ({
+  marketId,
+  feeLevels,
+  comittedLiquidity,
+  settlementAsset,
+  targetStake,
+  tradingMode,
+  trigger,
+}: {
+  marketId: string;
+  feeLevels: Levels[];
+  comittedLiquidity: number;
+  targetStake: string;
+  settlementAsset?: settlementAsset;
+  tradingMode?: Schema.MarketTradingMode;
+  trigger?: Schema.AuctionTrigger;
+}) => {
+  const [isHealthDialogOpen, setIsHealthDialogOpen] = useState(false);
+
+  return (
+    <div>
+      <div className="border border-greys-light-200 rounded-2xl px-2 py-6">
+        <table className="w-full">
+          <thead>
+            <tr
+              className="text-sm text-greys-light-400 text-left font-alpha calt"
+              style={{ fontFeatureSettings: "'liga' off, 'calt' off" }}
+            >
+              <th className="font-medium px-4">{t('Volume (24h)')}</th>
+              <th className="font-medium px-4">{t('Commited Liquidity')}</th>
+              <th className="font-medium px-4">{t('Status')}</th>
+              <th className="font-medium flex items-center px-4">
+                <span>{t('Health')}</span>{' '}
+                <button
+                  onClick={() => setIsHealthDialogOpen(true)}
+                  aria-label={t('open tooltip')}
+                  className="flex ml-1"
+                >
+                  <Icon name="info-sign" />
+                </button>
+              </th>
+              <th className="font-medium">{t('Est. APY')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="px-4">
+                <div>
+                  {marketId && settlementAsset?.decimals && (
+                    <Last24hVolume
+                      marketId={marketId}
+                      decimals={settlementAsset.decimals}
+                    />
+                  )}
+                </div>
+              </td>
+              <td className="px-4">
+                <span className="text-3xl">
+                  {comittedLiquidity && settlementAsset
+                    ? formatWithAsset(`${comittedLiquidity}`, settlementAsset)
+                    : '0'}
+                </span>
+              </td>
+              <td className="px-4">
+                <Status
+                  trigger={trigger}
+                  tradingMode={tradingMode}
+                  size="large"
+                />
+              </td>
+              <td className="px-4">
+                {tradingMode && settlementAsset?.decimals && feeLevels && (
+                  <HealthBar
+                    target={targetStake}
+                    decimals={settlementAsset.decimals}
+                    levels={feeLevels}
+                    intent={intentForStatus(tradingMode)}
+                  />
+                )}
+              </td>
+              <td className="px-4">
+                <span className="text-3xl"></span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <HealthDialog
+        isOpen={isHealthDialogOpen}
+        onChange={() => {
+          setIsHealthDialogOpen(!isHealthDialogOpen);
+        }}
+      />
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './providers';
@@ -0,0 +1,125 @@
+import { useCallback, useMemo } from 'react';
+
+import { type GetRowIdParams, type ColDef } from 'ag-grid-community';
+import { t } from '@vegaprotocol/i18n';
+
+import {
+  type LiquidityProviderFeeShareFieldsFragment,
+  type LiquidityProvisionFieldsFragment,
+} from '@vegaprotocol/liquidity';
+import { formatWithAsset } from '@vegaprotocol/liquidity';
+
+import { Grid } from '../../grid';
+import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
+
+const formatToHours = ({ value }: { value?: string | null }) => {
+  if (!value) {
+    return '-';
+  }
+
+  const MS_IN_HOUR = 1000 * 60 * 60;
+  const created = new Date(value).getTime();
+  const now = new Date().getTime();
+  return `${Math.round(Math.abs(now - created) / MS_IN_HOUR)}h`;
+};
+
+export const LPProvidersGrid = ({
+  liquidityProviders,
+  settlementAsset,
+}: {
+  liquidityProviders: LiquidityProvisionFieldsFragment &
+    LiquidityProviderFeeShareFieldsFragment[];
+  settlementAsset: {
+    decimals?: number;
+    symbol?: string;
+  };
+}) => {
+  const getRowId = useCallback(({ data }: GetRowIdParams) => data.party.id, []);
+  const columnDefs = useMemo<ColDef[]>(
+    () => [
+      {
+        headerName: t('LPs'),
+        field: 'party.id',
+        flex: 1,
+        minWidth: 100,
+        headerTooltip: t('Liquidity providers'),
+      },
+      {
+        headerName: t('Duration'),
+        valueFormatter: formatToHours,
+        field: 'createdAt',
+        headerTooltip: t('Time in market'),
+      },
+      {
+        headerName: t('Equity-like share'),
+        field: 'equityLikeShare',
+        valueFormatter: ({ value }: { value?: string | null }) => {
+          return value
+            ? `${parseFloat(parseFloat(value).toFixed(2)) * 100}%`
+            : '';
+        },
+        headerTooltip: t(
+          'The share of the markets liquidity held - the earlier you commit liquidity the greater % fees you earn'
+        ),
+        minWidth: 140,
+      },
+      {
+        headerName: t('committed bond'),
+        field: 'commitmentAmount',
+        valueFormatter: ({ value }: { value?: string | null }) =>
+          value ? formatWithAsset(value, settlementAsset) : '0',
+        headerTooltip: t('The amount of funds allocated to provide liquidity'),
+        minWidth: 140,
+      },
+      {
+        headerName: t('Margin Req.'),
+        field: 'margin',
+        headerTooltip: t(
+          'Margin required for arising positions based on liquidity commitment'
+        ),
+      },
+      {
+        headerName: t('24h Fees'),
+        field: 'fees',
+        headerTooltip: t(
+          'Total fees earned by the liquidity provider in the last 24 hours'
+        ),
+      },
+      {
+        headerName: t('Fee level'),
+        valueFormatter: ({ value }: { value?: string | null }) => `${value}%`,
+        field: 'fee',
+        headerTooltip: t(
+          "The market's liquidity fee, or the percentage of a trade's value which is collected from the price taker for every trade"
+        ),
+      },
+
+      {
+        headerName: t('APY'),
+        field: 'apy',
+        headerTooltip: t(
+          'An annualised estimate based on the total liquidity provision fees and maker fees collected by liquidity providers, the maximum margin needed and maximum commitment (bond) over the course of 7 epochs'
+        ),
+      },
+    ],
+    [settlementAsset]
+  );
+
+  return (
+    <Grid
+      rowData={liquidityProviders}
+      tooltipShowDelay={500}
+      defaultColDef={{
+        resizable: true,
+        sortable: true,
+        unSortIcon: true,
+        cellClass: ['flex', 'flex-col', 'justify-center'],
+        tooltipComponent: TooltipCellComponent,
+        minWidth: 100,
+      }}
+      columnDefs={columnDefs}
+      getRowId={getRowId}
+      rowHeight={92}
+    />
+  );
+};
@@ -0,0 +1,50 @@
+.ag-theme-alpine {
+  --ag-line-height: 24px;
+  --ag-row-hover-color: transparent;
+  --ag-header-background-color: transparent;
+  --ag-odd-row-background-color: transparent;
+  --ag-header-foreground-color: #626262;
+  --ag-secondary-foreground-color: #626262;
+  --ag-font-size: 16px;
+  --ag-background-color: transparent;
+  --ag-range-selection-border-color: transparent;
+
+  font-family: 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;
+  font-feature-settings: 'liga' off, 'calt' off;
+}
+
+.ag-theme-alpine .ag-cell {
+  display: flex;
+}
+
+.ag-theme-alpine .ag-header {
+  border-bottom: 1px solid #a7a7a7;
+  font-size: 15px;
+  line-height: 1em;
+  text-transform: uppercase;
+}
+
+.ag-theme-alpine .ag-root-wrapper {
+  border: none;
+}
+
+.ag-theme-alpine .ag-header-row {
+  font-weight: 500;
+}
+
+.ag-theme-alpine .ag-row {
+  border: none;
+  border-bottom: 1px solid #bfccd6;
+  font-size: 12px;
+}
+
+.ag-theme-alpine .ag-root-wrapper-body.ag-layout-normal {
+  height: auto;
+}
+
+.ag-theme-alpine.row-hover .ag-row:hover {
+  background: #f0f0f0;
+  cursor: pointer;
+}
@@ -0,0 +1,47 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import {
+  type AgGridReactProps,
+  type AgReactUiProps,
+  type AgGridReact as AgGridReactType,
+} from 'ag-grid-react';
+import classNames from 'classnames';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+
+import './grid.scss';
+
+type Props = (AgGridReactProps | AgReactUiProps) & {
+  isRowClickable?: boolean;
+  style?: React.CSSProperties;
+};
+
+export const Grid = ({ isRowClickable, ...props }: Props) => {
+  const gridRef = useRef<AgGridReactType | null>(null);
+
+  const resizeGrid = useCallback(() => {
+    gridRef.current?.api?.sizeColumnsToFit();
+  }, [gridRef]);
+
+  const handleOnGridReady = useCallback(() => {
+    resizeGrid();
+  }, [resizeGrid]);
+
+  useEffect(() => {
+    window.addEventListener('resize', resizeGrid);
+    return () => window.removeEventListener('resize', resizeGrid);
+  }, [resizeGrid]);
+
+  return (
+    <AgGridReact
+      className={classNames('ag-theme-alpine font-alpha calt h-full', {
+        'row-hover': isRowClickable,
+      })}
+      rowHeight={92}
+      ref={gridRef}
+      onGridReady={handleOnGridReady}
+      suppressRowClickSelection
+      {...props}
+    />
+  );
+};
@@ -0,0 +1 @@
+export * from './grid';
@@ -0,0 +1,110 @@
+import { t } from '@vegaprotocol/i18n';
+import { Dialog, HealthBar } from '@vegaprotocol/ui-toolkit';
+import * as Schema from '@vegaprotocol/types';
+import classNames from 'classnames';
+import { intentForStatus } from '../../lib/utils';
+
+interface HealthDialogProps {
+  isOpen: boolean;
+  onChange: (isOpen: boolean) => void;
+}
+
+const ROWS = [
+  {
+    key: '1',
+    title: 'Continuous',
+    copy: 'Markets that have committed liquidity equal or greater than the target stake are trading continuously.',
+    data: {
+      status: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+      target: '171320',
+      decimals: 5,
+      levels: [
+        { fee: '0.6', commitmentAmount: 150000 },
+        { fee: '1', commitmentAmount: 150000 },
+        { fee: '2', commitmentAmount: 30000 },
+      ],
+    },
+  },
+  {
+    key: '2',
+    title: 'Monitoring auction (liquidity)',
+    copy: 'Markets below the target stake will see trading suspended and go into liquidity auction.',
+    data: {
+      status: Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+      target: '171320',
+      decimals: 5,
+      levels: [
+        { fee: '0.6', commitmentAmount: 110000 },
+        { fee: '1', commitmentAmount: 50000 },
+      ],
+    },
+  },
+  {
+    key: '3',
+    title: 'Opening auction',
+    copy: 'A newly created market looking for a target liquidity amount to start trading.',
+    data: {
+      status: Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
+      target: '171320',
+      decimals: 3,
+      levels: [
+        { fee: '0.6', commitmentAmount: 110000 },
+        { fee: '1', commitmentAmount: 50000 },
+      ],
+    },
+  },
+];
+
+export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
+  return (
+    <Dialog size="large" open={isOpen} onChange={onChange}>
+      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase">
+        {t('Health')}
+      </h1>
+      <p className="text-lg font-medium font-alpha mb-8">
+        {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.'
+        )}
+      </p>
+
+      <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">
+            {t('Market status')}
+          </th>
+          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase">
+            {t('Liquidity status')}
+          </th>
+        </thead>
+        <tbody>
+          {ROWS.map((r, index) => {
+            const isFirstRow = index === 0;
+            return (
+              <tr key={r.key}>
+                <td
+                  className={classNames('pr-4 pb-10', { 'pt-8': isFirstRow })}
+                >
+                  <h2 className="font-medium font-alpha uppercase text-base">
+                    {t(r.title)}
+                  </h2>
+                  <p className="font-medium font-alpha text-lg">{t(r.copy)}</p>
+                </td>
+                <td
+                  className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })}
+                >
+                  <HealthBar
+                    size="large"
+                    levels={r.data.levels}
+                    target={r.data.target}
+                    decimals={r.data.decimals}
+                    intent={intentForStatus(r.data.status)}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Dialog>
+  );
+};
@@ -0,0 +1 @@
+export * from './health-dialog';
@@ -0,0 +1 @@
+export * from './indicator';
@@ -0,0 +1,24 @@
+import type * as Schema from '@vegaprotocol/types';
+
+import { getColorForStatus } from '../../lib/utils';
+
+export const Indicator = ({
+  status,
+  opacity,
+}: {
+  status?: Schema.MarketTradingMode;
+  opacity?: number;
+}) => {
+  const backgroundColor = status ? getColorForStatus(status) : undefined;
+  return (
+    <div className="inline-block w-2 h-2 mr-1 rounded-full bg-white overflow-hidden shrink-0">
+      <div
+        className="h-full bg-black"
+        style={{
+          opacity,
+          backgroundColor,
+        }}
+      />
+    </div>
+  );
+};
@@ -0,0 +1,35 @@
+.ag-theme-alpine {
+  --ag-line-height: 24px;
+  --ag-row-hover-color: transparent;
+  --ag-header-background-color: #f5f5f5;
+  --ag-odd-row-background-color: transparent;
+  --ag-header-foreground-color: #000;
+  --ag-secondary-foreground-color: #fff;
+  --ag-font-family: 'Helvetica Neue';
+  --ag-font-size: 12px;
+
+  font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+}
+
+.ag-theme-alpine .ag-cell {
+  display: flex;
+}
+
+.ag-theme-alpine .ag-header {
+  border: 1px solid #bfccd6;
+}
+
+.ag-theme-alpine .ag-root-wrapper {
+  border: none;
+}
+
+.ag-theme-alpine .ag-row {
+  border: none;
+  border-bottom: 1px solid #bfccd6;
+  font-size: 12px;
+}
+
+.ag-theme-alpine .ag-root-wrapper-body.ag-layout-normal {
+  height: auto;
+}
@@ -0,0 +1 @@
+export * from './navbar';
@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+import { VegaLogo } from '@vegaprotocol/ui-toolkit';
+
+export const Navbar = () => {
+  return (
+    <div className="px-8 py-4 flex items-stretch border-b border-greys-light-200">
+      <div className="flex gap-4 mr-4 items-center h-full">
+        <Link to="/">
+          <VegaLogo />
+        </Link>
+      </div>
+      <div className="flex items-center gap-2 ml-auto"></div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './status';
@@ -0,0 +1,96 @@
+import { Lozenge, Tooltip } from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+
+import * as Schema from '@vegaprotocol/types';
+import { t } from '@vegaprotocol/i18n';
+
+import { Indicator } from '../indicator';
+import type { AuctionTrigger } from '@vegaprotocol/types';
+
+export const Status = ({
+  tradingMode,
+  trigger,
+  size = 'small',
+}: {
+  tradingMode?: Schema.MarketTradingMode;
+  trigger?: Schema.AuctionTrigger;
+  size?: 'small' | 'large';
+}) => {
+  const getStatus = () => {
+    if (!tradingMode) return '';
+    if (
+      tradingMode === Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION
+    ) {
+      if (
+        trigger &&
+        trigger !== Schema.AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
+      ) {
+        return `${Schema.MarketTradingModeMapping[tradingMode]} - ${Schema.AuctionTriggerMapping[trigger]}`;
+      }
+    }
+    return Schema.MarketTradingModeMapping[tradingMode];
+  };
+
+  const status = getStatus();
+  const tooltipDescription =
+    tradingMode && getTooltipDescription(tradingMode, trigger);
+
+  return (
+    <div>
+      <Tooltip description={tooltipDescription}>
+        <div
+          className={classNames('inline-flex whitespace-normal', {
+            'text-base': size === 'large',
+            'text-sm': size === 'small',
+          })}
+        >
+          <Lozenge className="border border-greys-light-300 bg-greys-light-100 flex items-center">
+            <Indicator status={tradingMode} />
+            {status}
+          </Lozenge>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+const getTooltipDescription = (
+  status: Schema.MarketTradingMode,
+  trigger?: Schema.AuctionTrigger
+) => {
+  switch (status) {
+    case Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS:
+      return t(
+        'This is the standard trading mode where trades are executed whenever orders are received'
+      );
+    case Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION:
+      return getMonitoringDescriptionTooltip(trigger);
+    case Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION:
+      return t(
+        'This is a new market in an opening auction to determine a fair mid-price before starting continuous trading.'
+      );
+    default:
+      return '';
+  }
+};
+
+const getMonitoringDescriptionTooltip = (trigger?: AuctionTrigger) => {
+  switch (trigger) {
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET:
+      return t(
+        `This market is in auction until it reaches sufficient liquidity.`
+      );
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS:
+      return t(
+        `This market may have sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.`
+      );
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_PRICE:
+      return t(`This market is in auction due to high price volatility.`);
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING:
+      return t(
+        `This is a new market in an opening auction to determine a fair mid-price before starting continuous trading`
+      );
+    default:
+      return '';
+  }
+};
@@ -0,0 +1,28 @@
+import * as Schema from '@vegaprotocol/types';
+import { Intent } from '@vegaprotocol/ui-toolkit';
+
+const marketTradingModeStyle = {
+  [Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS]: '#00D46E',
+  [Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION]: '#CF0064',
+  [Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION]: '#0046CD',
+  [Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION]: '#CF0064',
+  [Schema.MarketTradingMode.TRADING_MODE_NO_TRADING]: '#CF0064',
+  [Schema.MarketTradingMode.TRADING_MODE_SUSPENDED_VIA_GOVERNANCE]: '#CF0064',
+};
+
+export const getColorForStatus = (status: Schema.MarketTradingMode) =>
+  marketTradingModeStyle[status];
+
+const marketTradingModeIntent = {
+  [Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS]: Intent.Success,
+  [Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION]: Intent.Danger,
+  [Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION]: Intent.Primary,
+  [Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION]: Intent.Danger,
+  [Schema.MarketTradingMode.TRADING_MODE_NO_TRADING]: Intent.Danger,
+  [Schema.MarketTradingMode.TRADING_MODE_SUSPENDED_VIA_GOVERNANCE]:
+    Intent.Danger,
+};
+
+export const intentForStatus = (status: Schema.MarketTradingMode) => {
+  return marketTradingModeIntent[status];
+};
@@ -0,0 +1 @@
+export * from './router-config';
@@ -0,0 +1,25 @@
+import { t } from '@vegaprotocol/i18n';
+
+import { Dashboard } from '../components/dashboard';
+import { Detail } from '../components/detail';
+
+export const ROUTES = {
+  MARKETS: 'markets',
+};
+
+export const routerConfig = [
+  { path: '/', element: <Dashboard />, icon: '' },
+  {
+    path: ROUTES.MARKETS,
+    name: 'Markets',
+    text: t('Markets'),
+    children: [
+      {
+        path: ':marketId',
+        element: <Detail />,
+      },
+    ],
+    icon: 'trade',
+    isNavItem: true,
+  },
+];
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};
@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false,
+};
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Liquidity Provision Dashboard</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="preload"
+      href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
+  </head>
+  <body>
+    <div id="root" class="h-full max-h-full min-h-full"></div>
+  </body>
+</html>
@@ -0,0 +1,15 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './app/app';
+
+const rootElement = document.getElementById('root');
+const root = rootElement && createRoot(rootElement);
+root?.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);
@@ -0,0 +1,7 @@
+/**
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  @apply h-full;
+
+  font-family: 'Helvetica Neue', Helvetica, sans-serif;
+}
@@ -0,0 +1,29 @@
+const { join } = require('path');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+const theme = require('../../libs/tailwindcss-config/src/theme-lite');
+const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+const vegaCustomClassesLite = require('../../libs/tailwindcss-config/src/vega-custom-classes-lite');
+
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+    'libs/ui-toolkit/src/utils/shared.ts',
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  darkMode: 'class',
+  theme: {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      greys: {
+        light: {
+          100: '#F0F0F0',
+          200: '#D2D2D2',
+          300: '#A7A7A7',
+          400: '#626262',
+        },
+      },
+    },
+  },
+  plugins: [vegaCustomClasses, vegaCustomClassesLite],
+};
@@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "files": [
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
@@ -0,0 +1,33 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": [
+      "jest",
+      "node",
+      "@testing-library/jest-dom",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "jest.config.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ],
+  "files": [
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ]
+}
@@ -1,9 +1,7 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
-const { theme } = require('../../libs/tailwindcss-config/src/theme');
-const {
-  vegaCustomClasses,
-} = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+const theme = require('../../libs/tailwindcss-config/src/theme');
+const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');

 module.exports = {
  content: [
@@ -9,14 +9,14 @@
  "background_color": "#ffffff",
  "icons": [
    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
    },
    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
    }
  ]
 }
@@ -1,126 +1,63 @@
 import type { InMemoryCacheConfig } from '@apollo/client';
 import {
+  AppFailure,
  AppLoader,
  NetworkLoader,
+  NodeFailure,
+  NodeGuard,
  useEnvironment,
-  useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
-import { useEffect, type ReactNode, useState } from 'react';
+import { type ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
 import { useT } from '../../lib/use-t';
 import { DataLoader } from './data-loader';
 import { WalletProvider } from '@vegaprotocol/wallet-react';
 import { useVegaWalletConfig } from '../../lib/hooks/use-vega-wallet-config';
-import { Trans } from 'react-i18next';
-import { Button, Loader, Splash, VLogo } from '@vegaprotocol/ui-toolkit';
-
-const Failure = ({ reason }: { reason?: ReactNode }) => {
-  const t = useT();
-  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
-  return (
-    <Splash>
-      <div className="border border-vega-red m-10 mx-auto w-4/5 max-w-3xl rounded-lg overflow-hidden animate-shake">
-        <div className="bg-vega-red text-white px-2 py-2 flex gap-1 items-center font-alpha calt uppercase">
-          <VLogo className="h-4" />
-          <span className="text-lg">{t('Failed to initialize the app')}</span>
-        </div>
-        <div className="p-4 text-left text-sm">
-          <p className="mb-4">{reason}</p>
-          <div className="text-center">
-            <Button className="border-2" onClick={() => setNodeSwitcher(true)}>
-              {t('Change node')}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </Splash>
-  );
-};
-
-const Loading = () => {
-  const [showSlowNotification, setShowSlowNotification] = useState(false);
-  const t = useT();
-  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
-  useEffect(() => {
-    const to = setTimeout(() => {
-      if (!showSlowNotification) setShowSlowNotification(true);
-    }, 5000);
-    return () => {
-      clearTimeout(to);
-    };
-  }, [showSlowNotification]);
-  return (
-    <Splash>
-      <div className="border border-transparent m-10 mx-auto w-4/5 max-w-3xl rounded-lg overflow-hidden">
-        <div className="mt-11 p-4 text-left text-sm">
-          <Loader />
-          {showSlowNotification && (
-            <>
-              <p className="mt-4 text-center">
-                {t(
-                  "It looks like you're connection is slow, try switching to another node."
-                )}
-              </p>
-              <div className="mt-4 text-center">
-                <Button
-                  className="border-2"
-                  onClick={() => setNodeSwitcher(true)}
-                >
-                  {t('Change node')}
-                </Button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </Splash>
-  );
-};

 export const Bootstrapper = ({ children }: { children: ReactNode }) => {
  const t = useT();
-
-  const { error, VEGA_URL } = useEnvironment((state) => ({
-    error: state.error,
-    VEGA_URL: state.VEGA_URL,
-  }));
+  const { error, VEGA_URL } = useEnvironment();
  const config = useVegaWalletConfig();

  if (!config) {
    return <AppLoader />;
  }

-  const ERR_DATA_LOADER = (
-    <Trans
-      i18nKey="It appears that the connection to the node <0>{{VEGA_URL}}</0> does not return necessary data, try switching to another node."
-      components={[
-        <span key="vega" className="text-muted">
-          {VEGA_URL}
-        </span>,
-      ]}
-      values={{
-        VEGA_URL,
-      }}
-    />
-  );
-
  return (
    <NetworkLoader
      cache={cacheConfig}
-      skeleton={<Loading />}
-      failure={<Failure reason={error} />}
+      skeleton={<AppLoader />}
+      failure={
+        <AppFailure title={t('Could not initialize app')} error={error} />
+      }
    >
-      <DataLoader
-        skeleton={<Loading />}
-        failure={<Failure reason={ERR_DATA_LOADER} />}
+      <NodeGuard
+        skeleton={<AppLoader />}
+        failure={
+          <NodeFailure
+            title={t('Node: {{VEGA_URL}} is unsuitable', { VEGA_URL })}
+          />
+        }
      >
-        <Web3Provider
-          skeleton={<Loading />}
-          failure={<Failure reason={t('Could not configure web3 provider')} />}
+        <DataLoader
+          skeleton={<AppLoader />}
+          failure={
+            <AppFailure
+              title={t('Could not load market data or asset data')}
+              error={error}
+            />
+          }
        >
-          <WalletProvider config={config}>{children}</WalletProvider>
-        </Web3Provider>
-      </DataLoader>
+          <Web3Provider
+            skeleton={<AppLoader />}
+            failure={
+              <AppFailure title={t('Could not configure web3 provider')} />
+            }
+          >
+            <WalletProvider config={config}>{children}</WalletProvider>
+          </Web3Provider>
+        </DataLoader>
+      </NodeGuard>
    </NetworkLoader>
  );
 };
@@ -170,9 +107,6 @@ const cacheConfig: InMemoryCacheConfig = {
    Fees: {
      keyFields: false,
    },
-    PartyProfile: {
-      keyFields: ['partyId'],
-    },
    // The folling types are cached by the data provider and not by apollo
    PositionUpdate: {
      keyFields: false,
@@ -30,6 +30,8 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
    setStudies,
    setStudySizes,
    setOverlays,
+    state,
+    setState,
  } = useChartSettings();

  const pennantChart = (
@@ -66,6 +68,10 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
          onIntervalChange={(newInterval) => {
            setInterval(fromTradingViewResolution(newInterval));
          }}
+          onAutoSaveNeeded={(data) => {
+            setState(data);
+          }}
+          state={state}
        />
      );
    }
@@ -6,12 +6,7 @@ export const SUPPORTED_INTERVALS = [
  Interval.INTERVAL_I1M,
  Interval.INTERVAL_I5M,
  Interval.INTERVAL_I15M,
-  Interval.INTERVAL_I30M,
  Interval.INTERVAL_I1H,
-  Interval.INTERVAL_I4H,
  Interval.INTERVAL_I6H,
-  Interval.INTERVAL_I8H,
-  Interval.INTERVAL_I12H,
  Interval.INTERVAL_I1D,
-  Interval.INTERVAL_I7D,
 ] as const;
@@ -9,6 +9,7 @@ type StudySizes = { [S in Study]?: number };
 export type Chartlib = 'pennant' | 'tradingview';

 interface StoredSettings {
+  state: object | undefined; // Don't see a better type provided from TradingView type definitions
  chartlib: Chartlib;
  // For interval we use the enum from @vegaprotocol/types, this is to make mapping between different
  // chart types easier and more consistent
@@ -29,6 +30,7 @@ const STUDY_ORDER: Study[] = [
 ];

 export const DEFAULT_CHART_SETTINGS = {
+  state: undefined,
  chartlib: 'pennant' as const,
  interval: Interval.INTERVAL_I15M,
  type: ChartType.CANDLE,
@@ -45,6 +47,7 @@ export const useChartSettingsStore = create<
    setStudies: (studies?: Study[]) => void;
    setStudySizes: (sizes: number[]) => void;
    setChartlib: (lib: Chartlib) => void;
+    setState: (state: object) => void;
  }
 >()(
  persist(
@@ -92,6 +95,9 @@ export const useChartSettingsStore = create<
          state.chartlib = lib;
        });
      },
+      setState: (state) => {
+        set({ state });
+      },
    })),
    {
      name: 'vega_candles_chart_store',
@@ -145,5 +151,7 @@ export const useChartSettings = () => {
    setOverlays: settings.setOverlays,
    setStudySizes: settings.setStudySizes,
    setChartlib: settings.setChartlib,
+    state: settings.state,
+    setState: settings.setState,
  };
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Edd	429a4ca454	feat(explorer): highlight transfer types and add epoch overview	2024-03-04 12:37:54 +00:00
Edd	4d3cd74847	feat(explorer): tests for governancelink	2024-03-04 11:15:25 +00:00
Edd	58ef07adaf	feat(explorer): intro on treasury page now has links	2024-03-04 11:15:25 +00:00
Edd	ceeb239c3a	feat(explorer): intro on treasury page	2024-03-04 11:15:25 +00:00
Edd	a5c35b6640	feat(explorer): add epoch by block query and use it in block by id and shareddetails	2024-03-04 11:15:25 +00:00