chore: handle timeout error - add unit test, fix ts errors

Merge remote-tracking branch 'origin/develop' into chore/2814-handle-timeout-and-offline-errors
chore: handle timeout error - fix pagination on ledgerEntries
2023-02-16 15:57:13 +01:00 · 2023-02-16 15:37:39 +01:00 · 2023-02-16 15:37:22 +01:00 · 2023-02-16 12:09:15 +00:00 · 2023-02-16 09:20:34 +01:00 · 2023-02-16 09:12:07 +01:00
191 changed files with 9654 additions and 6315 deletions
@@ -50,20 +50,6 @@ jobs:
          projects=[${projects// /,}]
          echo PROJECTS=$projects >> $GITHUB_ENV

-      # Rename required because some of the files contains the colon character (in the dates)
-      - name: Rename files to allow archive
-        if: ${{ always() }}
-        run: |
-          while read -r file; do
-            mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
-          done< <(find /home/runner/.vegacapsule/testnet/logs -type f)
-
-      - uses: actions/upload-artifact@v3
-        if: ${{ always() }}
-        with:
-          name: logs-${{ matrix.project }}
-          path: /home/runner/.vegacapsule/testnet/logs
-
    outputs:
      projects: ${{ env.PROJECTS }}

@@ -82,6 +82,10 @@ jobs:
            mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
          done< <(find /home/runner/.vegacapsule/testnet/logs -type f)

+      - name: Print logs files
+        if: ${{ always() }}
+        run: ls -alsh /home/runner/.vegacapsule/testnet/logs/
+
      - uses: actions/upload-artifact@v3
        if: ${{ always() }}
        with:
@@ -247,7 +247,7 @@ context('Network parameters page', { tags: '@smoke' }, function () {
        .and('include', darkThemeSideMenuBackgroundColor);
    });

-    it('should be able to see network parameters - on mobile', function () {
+    it.skip('should be able to see network parameters - on mobile', function () {
      cy.common_switch_to_mobile_and_click_toggle();
      cy.get(networkParametersNavigation).click();
      cy.get_network_parameters().then((network_parameters) => {
@@ -1,18 +1,16 @@
 import classnames from 'classnames';
-import { useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
+import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
 import { Nav } from './components/nav';
 import { Header } from './components/header';
 import { Main } from './components/main';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
-import type { InMemoryCacheConfig } from '@apollo/client';
 import { Footer } from './components/footer/footer';
 import { AnnouncementBanner, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import {
  AssetDetailsDialog,
  useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
+import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';

 const DialogsContainer = () => {
  const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
@@ -28,48 +26,30 @@ const DialogsContainer = () => {
 };

 function App() {
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const location = useLocation();
-
-  useEffect(() => {
-    setMenuOpen(false);
-  }, [location]);
-
-  const cacheConfig: InMemoryCacheConfig = {
-    typePolicies: {
-      statistics: {
-        keyFields: false,
-      },
-    },
-  };
-
  const layoutClasses = classnames(
    'grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)_auto] md:grid-cols-[300px_1fr]',
    'min-h-[100vh] mx-auto my-0',
    'border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r',
    'bg-white dark:bg-black',
    'antialiased text-black dark:text-white',
-    {
-      'h-[100vh] min-h-auto overflow-hidden': menuOpen,
-    }
+    'overflow-hidden relative'
  );

  return (
    <TendermintWebsocketProvider>
-      <NetworkLoader cache={cacheConfig}>
+      <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
        <AnnouncementBanner>
          <div className="font-alpha calt uppercase text-center text-lg text-white">
-            <span className="pr-4">The Mainnet sims are live!</span>
+            <span className="pr-4">Mainnet sim 2 coming in March!</span>
            <ExternalLink href="https://fairground.wtf/">
-              Come help stress test the network
+              Learn more
            </ExternalLink>
          </div>
        </AnnouncementBanner>

        <div className={layoutClasses}>
-          <Header menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
-          <Nav menuOpen={menuOpen} />
+          <Header />
+          <Nav />
          <Main />
          <Footer />
        </div>
@@ -81,11 +61,8 @@ function App() {
 }

 const Wrapper = () => {
-  return (
-    <EnvironmentProvider>
-      <App />
-    </EnvironmentProvider>
-  );
+  useInitializeEnv();
+  return <App />;
 };

 export default Wrapper;
@@ -0,0 +1,56 @@
+import { t } from '@vegaprotocol/react-helpers';
+import {
+  Button,
+  Dialog,
+  Icon,
+  SyntaxHighlighter,
+} from '@vegaprotocol/ui-toolkit';
+
+type JsonViewerDialogProps = {
+  title: string;
+  content: unknown;
+  open: boolean;
+  onChange: (isOpen: boolean) => void;
+  trigger?: HTMLElement;
+};
+export const JsonViewerDialog = ({
+  title,
+  content,
+  open,
+  onChange,
+  trigger,
+}: JsonViewerDialogProps) => {
+  return (
+    <Dialog
+      size="medium"
+      title={title}
+      icon={<Icon name="info-sign"></Icon>}
+      open={open}
+      onChange={(isOpen) => onChange(isOpen)}
+      onCloseAutoFocus={(e) => {
+        /**
+         * This mimics radix's default behaviour that focuses the dialog's
+         * trigger after closing itself
+         */
+        if (trigger) {
+          e.preventDefault();
+          trigger.focus();
+        }
+      }}
+    >
+      <div className="pr-8 mb-8 max-h-[70vh] overflow-y-scroll">
+        <SyntaxHighlighter size="smaller" data={content} />
+      </div>
+      <div className="w-1/4">
+        <Button
+          data-testid="close-asset-details-dialog"
+          fill={true}
+          size="sm"
+          onClick={() => onChange(false)}
+        >
+          {t('Close')}
+        </Button>
+      </div>
+    </Dialog>
+  );
+};
@@ -1,39 +1,46 @@
-import { useEnvironment } from '@vegaprotocol/environment';
+import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/react-helpers';
 import { Link } from '@vegaprotocol/ui-toolkit';
+import { useState } from 'react';

 export const Footer = () => {
-  const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL, setNodeSwitcherOpen } =
-    useEnvironment();
+  const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL } = useEnvironment();
+  const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
  return (
-    <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
-      <div className="flex justify-between gap-2 align-middle">
-        <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
-          {GIT_COMMIT_HASH && (
-            <p data-testid="git-commit-hash">
-              {t('Version')}:{' '}
-              <Link
-                href={
-                  GIT_ORIGIN_URL
-                    ? `${GIT_ORIGIN_URL}/commit/${GIT_COMMIT_HASH}`
-                    : undefined
-                }
-                target={GIT_ORIGIN_URL ? '_blank' : undefined}
-              >
-                {GIT_COMMIT_HASH}
-              </Link>
-            </p>
-          )}
-        </div>
+    <>
+      <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
+        <div className="flex justify-between gap-2 align-middle">
+          <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
+            {GIT_COMMIT_HASH && (
+              <p data-testid="git-commit-hash">
+                {t('Version')}:{' '}
+                <Link
+                  href={
+                    GIT_ORIGIN_URL
+                      ? `${GIT_ORIGIN_URL}/commit/${GIT_COMMIT_HASH}`
+                      : undefined
+                  }
+                  target={GIT_ORIGIN_URL ? '_blank' : undefined}
+                >
+                  {GIT_COMMIT_HASH}
+                </Link>
+              </p>
+            )}
+          </div>

-        <div className="flex pl-2 content-center">
-          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
-          <Link className="ml-2" onClick={setNodeSwitcherOpen}>
-            {t('Change')}
-          </Link>
+          <div className="flex pl-2 content-center">
+            {VEGA_URL && <NodeUrl url={VEGA_URL} />}
+            <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
+              {t('Change')}
+            </Link>
+          </div>
        </div>
-      </div>
-    </footer>
+      </footer>
+      <NodeSwitcherDialog
+        open={nodeSwitcherOpen}
+        setOpen={setNodeSwitcherOpen}
+      />
+    </>
  );
 };

@@ -14,7 +14,7 @@ jest.mock('../search', () => ({

 const renderComponent = () => (
  <MemoryRouter>
-    <Header menuOpen={false} setMenuOpen={jest.fn()} />
+    <Header />
  </MemoryRouter>
 );

@@ -4,15 +4,11 @@ import { ThemeSwitcher, Icon } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
-import type { Dispatch, SetStateAction } from 'react';
 import { NetworkSwitcher } from '@vegaprotocol/environment';
+import { useNavStore } from '../nav';

-interface ThemeToggleProps {
-  menuOpen: boolean;
-  setMenuOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export const Header = ({ menuOpen, setMenuOpen }: ThemeToggleProps) => {
+export const Header = () => {
+  const [open, toggle] = useNavStore((state) => [state.open, state.toggle]);
  const headerClasses = classnames(
    'md:col-span-2',
    'grid grid-rows-2 md:grid-rows-1 grid-cols-[1fr_auto] md:grid-cols-[auto_1fr_auto] items-center',
@@ -36,9 +32,9 @@ export const Header = ({ menuOpen, setMenuOpen }: ThemeToggleProps) => {
      <button
        data-testid="open-menu"
        className="md:hidden text-white"
-        onClick={() => setMenuOpen(!menuOpen)}
+        onClick={() => toggle()}
      >
-        <Icon name={menuOpen ? 'cross' : 'menu'} />
+        <Icon name={open ? 'cross' : 'menu'} />
      </button>
      <Search />
      <ThemeSwitcher className="-my-4" />
@@ -2,7 +2,7 @@ import { AppRouter } from '../../routes';

 export const Main = () => {
  return (
-    <main className="p-4 overflow-scroll">
+    <main className="p-4">
      <AppRouter />
    </main>
  );
@@ -0,0 +1,246 @@
+import {
+  addDecimalsFormatNumber,
+  formatNumberPercentage,
+  getMarketExpiryDateFormatted,
+  t,
+} from '@vegaprotocol/react-helpers';
+import type { MarketInfoNoCandlesQuery } from '@vegaprotocol/market-info';
+import { MarketInfoTable } from '@vegaprotocol/market-info';
+import pick from 'lodash/pick';
+import {
+  MarketStateMapping,
+  MarketTradingModeMapping,
+} from '@vegaprotocol/types';
+import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import BigNumber from 'bignumber.js';
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+
+export const MarketDetails = ({
+  market,
+}: {
+  market: MarketInfoNoCandlesQuery['market'];
+}) => {
+  const assetSymbol =
+    market?.tradableInstrument.instrument.product?.settlementAsset.symbol;
+  const assetId = useMemo(
+    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
+    [market]
+  );
+  const { data: asset } = useAssetDataProvider(assetId ?? '');
+
+  if (!market) return null;
+
+  const keyDetails = {
+    ...pick(market, 'decimalPlaces', 'positionDecimalPlaces', 'tradingMode'),
+    state: MarketStateMapping[market.state],
+  };
+  const assetDecimals =
+    market.tradableInstrument.instrument.product.settlementAsset.decimals;
+
+  const panels = [
+    {
+      title: t('Key details'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            name: market.tradableInstrument.instrument.name,
+            marketID: market.id,
+            tradingMode:
+              keyDetails.tradingMode &&
+              MarketTradingModeMapping[keyDetails.tradingMode],
+            marketDecimalPlaces: market.decimalPlaces,
+            positionDecimalPlaces: market.positionDecimalPlaces,
+            settlementAssetDecimalPlaces: assetDecimals,
+          }}
+        />
+      ),
+    },
+    {
+      title: t('Instrument'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            marketName: market.tradableInstrument.instrument.name,
+            code: market.tradableInstrument.instrument.code,
+            productType:
+              market.tradableInstrument.instrument.product.__typename,
+            ...market.tradableInstrument.instrument.product,
+          }}
+        />
+      ),
+    },
+    {
+      title: t('Settlement asset'),
+      content: asset ? (
+        <AssetDetailsTable
+          asset={asset}
+          inline={true}
+          noBorder={false}
+          dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
+          ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
+        />
+      ) : (
+        <Splash>{t('No data')}</Splash>
+      ),
+    },
+    {
+      title: t('Metadata'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            expiryDate: getMarketExpiryDateFormatted(
+              market.tradableInstrument.instrument.metadata.tags
+            ),
+            ...market.tradableInstrument.instrument.metadata.tags
+              ?.map((tag) => {
+                const [key, value] = tag.split(':');
+                return { [key]: value };
+              })
+              .reduce((acc, curr) => ({ ...acc, ...curr }), {}),
+          }}
+        />
+      ),
+    },
+    {
+      title: t('Risk model'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={market.tradableInstrument.riskModel}
+          unformatted={true}
+          omits={[]}
+        />
+      ),
+    },
+    {
+      title: t('Risk parameters'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={market.tradableInstrument.riskModel.params}
+          unformatted={true}
+          omits={[]}
+        />
+      ),
+    },
+    {
+      title: t('Risk factors'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={market.riskFactors}
+          unformatted={true}
+          omits={['market', '__typename']}
+        />
+      ),
+    },
+    ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
+      (trigger, i) => ({
+        title: t(`Price monitoring trigger ${i + 1}`),
+        content: <MarketInfoTable noBorder={false} data={trigger} />,
+      })
+    ),
+    ...(market.data?.priceMonitoringBounds || []).map((trigger, i) => ({
+      title: t(`Price monitoring bound ${i + 1}`),
+      content: (
+        <>
+          <MarketInfoTable
+            noBorder={false}
+            data={trigger}
+            decimalPlaces={market.decimalPlaces}
+            omits={['referencePrice', '__typename']}
+          />
+          <MarketInfoTable
+            noBorder={false}
+            data={{ referencePrice: trigger.referencePrice }}
+            decimalPlaces={assetDecimals}
+          />
+        </>
+      ),
+    })),
+    {
+      title: t('Liquidity monitoring parameters'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            triggeringRatio:
+              market.liquidityMonitoringParameters.triggeringRatio,
+            ...market.liquidityMonitoringParameters.targetStakeParameters,
+          }}
+        />
+      ),
+    },
+    {
+      title: t('Liquidity price range'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            liquidityPriceRange: formatNumberPercentage(
+              new BigNumber(market.lpPriceRange).times(100)
+            ),
+            LPVolumeMin:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .minus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${assetSymbol}`,
+            LPVolumeMax:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .plus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${assetSymbol}`,
+          }}
+        ></MarketInfoTable>
+      ),
+    },
+    {
+      title: t('Oracle'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={
+            market.tradableInstrument.instrument.product.dataSourceSpecBinding
+          }
+        >
+          <Link
+            className="text-xs hover:underline"
+            to={`/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData.id}`}
+          >
+            {t('View settlement data oracle specification')}
+          </Link>
+          <Link
+            className="text-xs hover:underline"
+            to={`/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForTradingTermination.id}`}
+          >
+            {t('View termination oracle specification')}
+          </Link>
+        </MarketInfoTable>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      {panels.map((p) => (
+        <div className="mb-3">
+          <h2 className="font-alpha text-xl">{p.title}</h2>
+          {p.content}
+        </div>
+      ))}
+    </>
+  );
+};
@@ -0,0 +1,132 @@
+import type { MarketFieldsFragment } from '@vegaprotocol/market-list';
+import { t } from '@vegaprotocol/react-helpers';
+import type {
+  VegaICellRendererParams,
+  VegaValueGetterParams,
+} from '@vegaprotocol/ui-toolkit';
+import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridColumn } from 'ag-grid-react';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { useRef, useLayoutEffect } from 'react';
+import { BREAKPOINT_MD } from '../../config/breakpoints';
+import { MarketStateMapping } from '@vegaprotocol/types';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import type { RowClickedEvent } from 'ag-grid-community';
+import { Link, useNavigate } from 'react-router-dom';
+
+type MarketsTableProps = {
+  data: MarketFieldsFragment[] | null;
+};
+export const MarketsTable = ({ data }: MarketsTableProps) => {
+  const openAssetDetailsDialog = useAssetDetailsDialogStore(
+    (state) => state.open
+  );
+
+  const navigate = useNavigate();
+
+  const gridRef = useRef<AgGridReact>(null);
+  useLayoutEffect(() => {
+    const showColumnsOnDesktop = () => {
+      gridRef.current?.columnApi.setColumnsVisible(
+        ['id', 'state', 'asset'],
+        window.innerWidth > BREAKPOINT_MD
+      );
+    };
+    window.addEventListener('resize', showColumnsOnDesktop);
+    return () => {
+      window.removeEventListener('resize', showColumnsOnDesktop);
+    };
+  }, []);
+
+  return (
+    <AgGrid
+      ref={gridRef}
+      rowData={data}
+      getRowId={({ data }: { data: MarketFieldsFragment }) => data.id}
+      overlayNoRowsTemplate={t('This chain has no markets')}
+      domLayout="autoHeight"
+      defaultColDef={{
+        flex: 1,
+        resizable: true,
+        sortable: true,
+        filter: true,
+        filterParams: { buttons: ['reset'] },
+        autoHeight: true,
+      }}
+      suppressCellFocus={true}
+      onRowClicked={({ data, event }: RowClickedEvent) => {
+        if ((event?.target as HTMLElement).tagName.toUpperCase() !== 'BUTTON') {
+          navigate(data.id);
+        }
+      }}
+    >
+      <AgGridColumn
+        colId="code"
+        headerName={t('Code')}
+        field="tradableInstrument.instrument.code"
+      />
+      <AgGridColumn
+        colId="name"
+        headerName={t('Name')}
+        field="tradableInstrument.instrument.name"
+      />
+      <AgGridColumn
+        headerName={t('Status')}
+        field="state"
+        hide={window.innerWidth <= BREAKPOINT_MD}
+        valueGetter={({
+          data,
+        }: VegaValueGetterParams<MarketFieldsFragment, 'state'>) => {
+          return data?.state ? MarketStateMapping[data?.state] : '-';
+        }}
+      />
+      <AgGridColumn
+        colId="asset"
+        headerName={t('Settlement asset')}
+        field="tradableInstrument.instrument.product.settlementAsset"
+        hide={window.innerWidth <= BREAKPOINT_MD}
+        cellRenderer={({
+          value,
+        }: VegaICellRendererParams<
+          MarketFieldsFragment,
+          'tradableInstrument.instrument.product.settlementAsset'
+        >) =>
+          value ? (
+            <ButtonLink
+              onClick={(e) => {
+                openAssetDetailsDialog(value.id, e.target as HTMLElement);
+              }}
+            >
+              {value.symbol}
+            </ButtonLink>
+          ) : (
+            ''
+          )
+        }
+      />
+      <AgGridColumn
+        flex={2}
+        headerName={t('Market ID')}
+        field="id"
+        hide={window.innerWidth <= BREAKPOINT_MD}
+      />
+      <AgGridColumn
+        colId="actions"
+        headerName=""
+        field="id"
+        cellRenderer={({
+          value,
+        }: VegaICellRendererParams<MarketFieldsFragment, 'id'>) =>
+          value ? (
+            <Link className="underline" to={value}>
+              {t('View details')}
+            </Link>
+          ) : (
+            ''
+          )
+        }
+      />
+    </AgGrid>
+  );
+};
@@ -1,45 +1 @@
-import { NavLink } from 'react-router-dom';
-import routerConfig from '../../routes/router-config';
-import classnames from 'classnames';
-
-interface NavProps {
-  menuOpen: boolean;
-}
-
-export const Nav = ({ menuOpen }: NavProps) => {
-  return (
-    <nav className="relative">
-      <div
-        className={classnames(
-          'absolute top-0 z-50 md:static',
-          'w-full p-4 md:border-r border-neutral-700 dark:border-neutral-300',
-          'bg-white dark:bg-black',
-          'transition-[right]',
-          {
-            'right-0 h-[100vh]': menuOpen,
-            'right-[200vw] h-full': !menuOpen,
-          }
-        )}
-      >
-        {routerConfig.map((r) => (
-          <NavLink
-            key={r.name}
-            to={r.path}
-            className={({ isActive }) =>
-              classnames(
-                'block mb-2 px-2',
-                'text-lg hover:bg-vega-pink dark:hover:bg-vega-yellow hover:text-white dark:hover:text-black',
-                {
-                  'bg-vega-pink text-white dark:bg-vega-yellow dark:text-black':
-                    isActive,
-                }
-              )
-            }
-          >
-            {r.text}
-          </NavLink>
-        ))}
-      </div>
-    </nav>
-  );
-};
+export * from './nav';
@@ -0,0 +1,181 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import type { Navigable } from '../../routes/router-config';
+import routerConfig from '../../routes/router-config';
+import classnames from 'classnames';
+import { create } from 'zustand';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import first from 'lodash/first';
+import last from 'lodash/last';
+import { BREAKPOINT_MD } from '../../config/breakpoints';
+
+type NavStore = {
+  open: boolean;
+  toggle: () => void;
+  hide: () => void;
+};
+
+export const useNavStore = create<NavStore>((set, get) => ({
+  open: false,
+  toggle: () => set({ open: !get().open }),
+  hide: () => set({ open: false }),
+}));
+
+const NavLinks = ({ links }: { links: Navigable[] }) => {
+  const navLinks = links.map((r) => (
+    <li key={r.name}>
+      <NavLink
+        to={r.path}
+        className={({ isActive }) =>
+          classnames(
+            'block mb-2 px-2',
+            'text-lg hover:bg-vega-pink dark:hover:bg-vega-yellow hover:text-white dark:hover:text-black',
+            {
+              'bg-vega-pink text-white dark:bg-vega-yellow dark:text-black':
+                isActive,
+            }
+          )
+        }
+      >
+        {r.text}
+      </NavLink>
+    </li>
+  ));
+
+  return <ul className="pr-8 md:pr-0">{navLinks}</ul>;
+};
+
+export const Nav = () => {
+  const [open, hide] = useNavStore((state) => [state.open, state.hide]);
+  const location = useLocation();
+
+  const navRef = useRef<HTMLElement>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  const focusable = useMemo(
+    () =>
+      navRef.current
+        ? [
+            ...(navRef.current.querySelectorAll(
+              'a, button'
+            ) as NodeListOf<HTMLElement>),
+          ]
+        : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [navRef.current] // do not remove `navRef.current` from deps
+  );
+
+  const closeNav = useCallback(() => {
+    hide();
+    console.log(focusable);
+    focusable.forEach((fe) =>
+      fe.setAttribute(
+        'tabindex',
+        window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
+      )
+    );
+  }, [focusable, hide]);
+
+  // close navigation when location changes
+  useEffect(() => {
+    closeNav();
+  }, [closeNav, location]);
+
+  useLayoutEffect(() => {
+    if (open) {
+      focusable.forEach((fe) => fe.setAttribute('tabindex', '0'));
+    }
+
+    document.body.style.overflow = open ? 'hidden' : '';
+    const offset =
+      document.querySelector('header')?.getBoundingClientRect().top || 0;
+    if (navRef.current) {
+      navRef.current.style.height = `calc(100vh - ${offset}px)`;
+    }
+
+    // focus current by default
+    if (navRef.current && open) {
+      (navRef.current.querySelector('a[aria-current]') as HTMLElement)?.focus();
+    }
+
+    const closeOnEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closeNav();
+      }
+    };
+
+    // tabbing loop
+    const focusLast = (e: FocusEvent) => {
+      e.preventDefault();
+      const isNavElement =
+        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
+      if (!isNavElement && open) {
+        last(focusable)?.focus();
+      }
+    };
+    const focusFirst = (e: FocusEvent) => {
+      e.preventDefault();
+      const isNavElement =
+        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
+      if (!isNavElement && open) {
+        first(focusable)?.focus();
+      }
+    };
+
+    const resetOnDesktop = () => {
+      focusable.forEach((fe) =>
+        fe.setAttribute(
+          'tabindex',
+          window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
+        )
+      );
+    };
+
+    window.addEventListener('resize', resetOnDesktop);
+
+    first(focusable)?.addEventListener('focusout', focusLast);
+    last(focusable)?.addEventListener('focusout', focusFirst);
+
+    document.addEventListener('keydown', closeOnEsc);
+    return () => {
+      window.removeEventListener('resize', resetOnDesktop);
+      document.removeEventListener('keydown', closeOnEsc);
+      first(focusable)?.removeEventListener('focusout', focusLast);
+      last(focusable)?.removeEventListener('focusout', focusFirst);
+    };
+  }, [closeNav, focusable, open]);
+
+  return (
+    <nav
+      ref={navRef}
+      className={classnames(
+        'absolute top-0 z-20 overflow-y-auto',
+        'transition-[right]',
+        {
+          'right-[-200vw] h-full': !open,
+          'right-0 h-[100vh]': open,
+        },
+        'w-full p-4  border-neutral-700 dark:border-neutral-300',
+        'bg-white dark:bg-black',
+        'md:static md:border-r'
+      )}
+    >
+      <NavLinks links={routerConfig} />
+      <button
+        ref={btnRef}
+        className="absolute top-0 right-0 p-4 md:hidden"
+        onClick={() => {
+          closeNav();
+        }}
+      >
+        <Icon name="cross" />
+      </button>
+    </nav>
+  );
+};
@@ -1,6 +1,7 @@
 import { useExplorerDeterministicOrderQuery } from '../order-details/__generated__/Order';
 import PriceInMarket from '../price-in-market/price-in-market';
 import { sideText } from '../order-details/lib/order-labels';
+import SizeInMarket from '../size-in-market/size-in-market';

 // Note: Edited has no style currently
 export type OrderSummaryModifier = 'cancelled' | 'edited';
@@ -41,7 +42,8 @@ const OrderSummary = ({ id, modifier }: OrderSummaryProps) => {
  return (
    <div data-testid="order-summary" className={getClassName(modifier)}>
      <span>{sideText[order.side]}</span>&nbsp;
-      <span>{order.size}</span>&nbsp;<i>@</i>&nbsp;
+      <SizeInMarket marketId={order.market.id} size={order.size} />
+      &nbsp;<i>@</i>&nbsp;
      <PriceInMarket marketId={order.market.id} price={order.price} />
    </div>
  );
@@ -112,13 +112,14 @@ describe('Order TX Summary component', () => {
    const res = renderComponent(o, [mock]);
    expect(res.queryByTestId('order-summary')).toBeInTheDocument();
    expect(res.getByText('Buy')).toBeInTheDocument();
-    expect(res.getByText('10')).toBeInTheDocument();

-    // Initially renders price alone
+    // Initially renders price and size unformatted
    expect(res.getByText('333')).toBeInTheDocument();
+    expect(res.getByText('10')).toBeInTheDocument();

    // After fetch renders formatted price and asset quotename
    expect(await res.findByText('3.33')).toBeInTheDocument();
    expect(await res.findByText('TEST')).toBeInTheDocument();
+    expect(await res.getByText('0.10')).toBeInTheDocument();
  });
 });
@@ -2,6 +2,7 @@ import type { components } from '../../../types/explorer';

 import PriceInMarket from '../price-in-market/price-in-market';
 import { sideText } from '../order-details/lib/order-labels';
+import SizeInMarket from '../size-in-market/size-in-market';

 export type OrderSummaryProps = {
  order: components['schemas']['v1OrderSubmission'];
@@ -29,7 +30,12 @@ const OrderTxSummary = ({ order }: OrderSummaryProps) => {
  return (
    <div data-testid="order-summary">
      <span>{sideText[order.side]}</span>&nbsp;
-      <span>{order.size}</span>&nbsp;<i className="text-xs">@</i>&nbsp;
+      {order.size ? (
+        <SizeInMarket size={order.size} marketId={order.marketId} />
+      ) : (
+        '-'
+      )}
+      &nbsp;<i className="text-xs">@</i>&nbsp;
      <PriceInMarket
        marketId={order.marketId}
        price={order.price}
@@ -7,7 +7,7 @@ import type { DecimalSource } from './size-in-market';
 import { ExplorerMarketDocument } from '../links/market-link/__generated__/Market';

 function renderComponent(
-  price: string,
+  size: string | undefined,
  marketId: string,
  mocks: MockedResponse[],
  decimalSource: DecimalSource = 'MARKET'
@@ -17,7 +17,7 @@ function renderComponent(
      <MemoryRouter>
        <SizeInMarket
          marketId={marketId}
-          size={price}
+          size={size}
          decimalSource={decimalSource}
        />
      </MemoryRouter>
@@ -57,6 +57,11 @@ const fullMock = {
 };

 describe('Size in Market component', () => {
+  it('Renders a dash size when there is no size', () => {
+    const res = render(renderComponent(undefined, '123', []));
+    expect(res.getByText('-')).toBeInTheDocument();
+  });
+
  it('Renders the raw size when there is no market data', () => {
    const res = render(renderComponent('100', '123', []));
    expect(res.getByText('100')).toBeInTheDocument();
@@ -5,7 +5,7 @@ export type DecimalSource = 'MARKET';

 export type PriceInMarketProps = {
  marketId: string;
-  size: string | number;
+  size?: string | number;
  decimalSource?: DecimalSource;
 };

@@ -22,6 +22,9 @@ const SizeInMarket = ({
    variables: { id: marketId },
    fetchPolicy: 'cache-first',
  });
+  if (!size) {
+    return <span>-</span>;
+  }

  let label = size;

@@ -1,140 +0,0 @@
-query ExplorerMarkets {
-  marketsConnection {
-    edges {
-      node {
-        id
-        fees {
-          factors {
-            makerFee
-            infrastructureFee
-            liquidityFee
-          }
-        }
-        tradableInstrument {
-          instrument {
-            name
-            metadata {
-              tags
-            }
-            code
-            product {
-              ... on Future {
-                settlementAsset {
-                  id
-                  name
-                  decimals
-                  globalRewardPoolAccount {
-                    balance
-                  }
-                }
-              }
-            }
-          }
-          riskModel {
-            ... on LogNormalRiskModel {
-              tau
-              riskAversionParameter
-              params {
-                r
-                sigma
-                mu
-              }
-            }
-            ... on SimpleRiskModel {
-              params {
-                factorLong
-                factorShort
-              }
-            }
-          }
-          marginCalculator {
-            scalingFactors {
-              searchLevel
-              initialMargin
-              collateralRelease
-            }
-          }
-        }
-        decimalPlaces
-        openingAuction {
-          durationSecs
-          volume
-        }
-        priceMonitoringSettings {
-          parameters {
-            triggers {
-              horizonSecs
-              probability
-              auctionExtensionSecs
-            }
-          }
-        }
-        liquidityMonitoringParameters {
-          triggeringRatio
-          targetStakeParameters {
-            timeWindow
-            scalingFactor
-          }
-        }
-        tradingMode
-        state
-        proposal {
-          id
-        }
-        state
-        accountsConnection {
-          edges {
-            node {
-              asset {
-                id
-                name
-              }
-              balance
-              type
-            }
-          }
-        }
-        data {
-          markPrice
-          bestBidPrice
-          bestBidVolume
-          bestOfferPrice
-          bestOfferVolume
-          bestStaticBidPrice
-          bestStaticBidVolume
-          bestStaticOfferPrice
-          bestStaticOfferVolume
-          midPrice
-          staticMidPrice
-          timestamp
-          openInterest
-          auctionEnd
-          auctionStart
-          indicativePrice
-          indicativeVolume
-          trigger
-          extensionTrigger
-          targetStake
-          suppliedStake
-          priceMonitoringBounds {
-            minValidPrice
-            maxValidPrice
-            trigger {
-              auctionExtensionSecs
-              probability
-            }
-            referencePrice
-          }
-          marketValueProxy
-          liquidityProviderFeeShare {
-            party {
-              id
-            }
-            equityLikeShare
-            averageEntryValuation
-          }
-        }
-      }
-    }
-  }
-}
@@ -1,180 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type ExplorerMarketsQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type ExplorerMarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, decimalPlaces: number, tradingMode: Types.MarketTradingMode, state: Types.MarketState, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', settlementAsset: { __typename?: 'Asset', id: string, name: string, decimals: number, globalRewardPoolAccount?: { __typename?: 'AccountBalance', balance: string } | null } } }, riskModel: { __typename?: 'LogNormalRiskModel', tau: number, riskAversionParameter: number, params: { __typename?: 'LogNormalModelParams', r: number, sigma: number, mu: number } } | { __typename?: 'SimpleRiskModel', params: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } }, marginCalculator?: { __typename?: 'MarginCalculator', scalingFactors: { __typename?: 'ScalingFactors', searchLevel: number, initialMargin: number, collateralRelease: number } } | null }, openingAuction: { __typename?: 'AuctionDuration', durationSecs: number, volume: number }, priceMonitoringSettings: { __typename?: 'PriceMonitoringSettings', parameters?: { __typename?: 'PriceMonitoringParameters', triggers?: Array<{ __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number }> | null } | null }, liquidityMonitoringParameters: { __typename?: 'LiquidityMonitoringParameters', triggeringRatio: string, targetStakeParameters: { __typename?: 'TargetStakeParameters', timeWindow: number, scalingFactor: number } }, proposal?: { __typename?: 'Proposal', id?: string | null } | null, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', balance: string, type: Types.AccountType, asset: { __typename?: 'Asset', id: string, name: string } } } | null> | null } | null, data?: { __typename?: 'MarketData', markPrice: string, bestBidPrice: string, bestBidVolume: string, bestOfferPrice: string, bestOfferVolume: string, bestStaticBidPrice: string, bestStaticBidVolume: string, bestStaticOfferPrice: string, bestStaticOfferVolume: string, midPrice: string, staticMidPrice: string, timestamp: any, openInterest: string, auctionEnd?: string | null, auctionStart?: string | null, indicativePrice: string, indicativeVolume: string, trigger: Types.AuctionTrigger, extensionTrigger: Types.AuctionTrigger, targetStake?: string | null, suppliedStake?: string | null, marketValueProxy: string, priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string, trigger: { __typename?: 'PriceMonitoringTrigger', auctionExtensionSecs: number, probability: number } }> | null, liquidityProviderFeeShare?: Array<{ __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } }> | null } | null } }> } | null };
-
-
-export const ExplorerMarketsDocument = gql`
-    query ExplorerMarkets {
-  marketsConnection {
-    edges {
-      node {
-        id
-        fees {
-          factors {
-            makerFee
-            infrastructureFee
-            liquidityFee
-          }
-        }
-        tradableInstrument {
-          instrument {
-            name
-            metadata {
-              tags
-            }
-            code
-            product {
-              ... on Future {
-                settlementAsset {
-                  id
-                  name
-                  decimals
-                  globalRewardPoolAccount {
-                    balance
-                  }
-                }
-              }
-            }
-          }
-          riskModel {
-            ... on LogNormalRiskModel {
-              tau
-              riskAversionParameter
-              params {
-                r
-                sigma
-                mu
-              }
-            }
-            ... on SimpleRiskModel {
-              params {
-                factorLong
-                factorShort
-              }
-            }
-          }
-          marginCalculator {
-            scalingFactors {
-              searchLevel
-              initialMargin
-              collateralRelease
-            }
-          }
-        }
-        decimalPlaces
-        openingAuction {
-          durationSecs
-          volume
-        }
-        priceMonitoringSettings {
-          parameters {
-            triggers {
-              horizonSecs
-              probability
-              auctionExtensionSecs
-            }
-          }
-        }
-        liquidityMonitoringParameters {
-          triggeringRatio
-          targetStakeParameters {
-            timeWindow
-            scalingFactor
-          }
-        }
-        tradingMode
-        state
-        proposal {
-          id
-        }
-        state
-        accountsConnection {
-          edges {
-            node {
-              asset {
-                id
-                name
-              }
-              balance
-              type
-            }
-          }
-        }
-        data {
-          markPrice
-          bestBidPrice
-          bestBidVolume
-          bestOfferPrice
-          bestOfferVolume
-          bestStaticBidPrice
-          bestStaticBidVolume
-          bestStaticOfferPrice
-          bestStaticOfferVolume
-          midPrice
-          staticMidPrice
-          timestamp
-          openInterest
-          auctionEnd
-          auctionStart
-          indicativePrice
-          indicativeVolume
-          trigger
-          extensionTrigger
-          targetStake
-          suppliedStake
-          priceMonitoringBounds {
-            minValidPrice
-            maxValidPrice
-            trigger {
-              auctionExtensionSecs
-              probability
-            }
-            referencePrice
-          }
-          marketValueProxy
-          liquidityProviderFeeShare {
-            party {
-              id
-            }
-            equityLikeShare
-            averageEntryValuation
-          }
-        }
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useExplorerMarketsQuery__
- *
- * To run a query within a React component, call `useExplorerMarketsQuery` and pass it any options that fit your needs.
- * When your component renders, `useExplorerMarketsQuery` 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 } = useExplorerMarketsQuery({
- *   variables: {
- *   },
- * });
- */
-export function useExplorerMarketsQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>(ExplorerMarketsDocument, options);
-      }
-export function useExplorerMarketsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>(ExplorerMarketsDocument, options);
-        }
-export type ExplorerMarketsQueryHookResult = ReturnType<typeof useExplorerMarketsQuery>;
-export type ExplorerMarketsLazyQueryHookResult = ReturnType<typeof useExplorerMarketsLazyQuery>;
-export type ExplorerMarketsQueryResult = Apollo.QueryResult<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>;
@@ -1,48 +0,0 @@
-import { MockedProvider } from '@apollo/client/testing';
-import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import Markets from './index';
-import type { MockedResponse } from '@apollo/client/testing';
-import { ExplorerMarketsDocument } from './__generated__/Markets';
-
-function renderComponent(mock: MockedResponse[]) {
-  return (
-    <MemoryRouter>
-      <MockedProvider mocks={mock}>
-        <Markets />
-      </MockedProvider>
-    </MemoryRouter>
-  );
-}
-
-describe('Markets index', () => {
-  it('Renders loader when loading', async () => {
-    const mock = {
-      request: {
-        query: ExplorerMarketsDocument,
-      },
-      result: {
-        data: {
-          marketsConnection: [],
-        },
-      },
-    };
-    const res = render(renderComponent([mock]));
-    expect(await res.findByTestId('loader')).toBeInTheDocument();
-  });
-
-  it('Renders EmptyList when loading completes and there are no results', async () => {
-    const mock = {
-      request: {
-        query: ExplorerMarketsDocument,
-      },
-      result: {
-        data: {
-          marketsConnection: [],
-        },
-      },
-    };
-    const res = render(renderComponent([mock]));
-    expect(await res.findByTestId('emptylist')).toBeInTheDocument();
-  });
-});
@@ -1,44 +1,2 @@
-import React from 'react';
-import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import { RouteTitle } from '../../components/route-title';
-import { SubHeading } from '../../components/sub-heading';
-import { t } from '@vegaprotocol/react-helpers';
-import { useExplorerMarketsQuery } from './__generated__/Markets';
-import { useScrollToLocation } from '../../hooks/scroll-to-location';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import EmptyList from '../../components/empty-list/empty-list';
-
-const Markets = () => {
-  const { data, loading } = useExplorerMarketsQuery();
-
-  useScrollToLocation();
-  useDocumentTitle(['Markets']);
-
-  const m = data?.marketsConnection?.edges;
-
-  return (
-    <section key="markets">
-      <RouteTitle data-testid="markets-heading">{t('Markets')}</RouteTitle>
-
-      {m ? (
-        m.map((e) => (
-          <React.Fragment key={e.node.id}>
-            <SubHeading data-testid="markets-header" id={e.node.id}>
-              {e.node.tradableInstrument.instrument.name}
-            </SubHeading>
-            <SyntaxHighlighter data={e.node} />
-          </React.Fragment>
-        ))
-      ) : loading ? (
-        <Loader />
-      ) : (
-        <EmptyList
-          heading={t('This chain has no markets')}
-          label={t('0 markets')}
-        />
-      )}
-    </section>
-  );
-};
-
-export default Markets;
+export * from './markets-page';
+export * from './market-page';
@@ -0,0 +1,68 @@
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
+import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
+import { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { MarketDetails } from '../../components/markets/market-details';
+import { RouteTitle } from '../../components/route-title';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import compact from 'lodash/compact';
+import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
+import { marketInfoNoCandlesDataProvider } from '@vegaprotocol/market-info';
+
+export const MarketPage = () => {
+  useScrollToLocation();
+
+  const { marketId } = useParams<{ marketId: string }>();
+
+  const variables = useMemo(
+    () => ({
+      marketId,
+    }),
+    [marketId]
+  );
+
+  const { data, loading, error } = useDataProvider({
+    dataProvider: marketInfoNoCandlesDataProvider,
+    skipUpdates: true,
+    variables,
+  });
+
+  useDocumentTitle(
+    compact([
+      'Market details',
+      data?.market?.tradableInstrument.instrument.name,
+    ])
+  );
+
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <section className="relative">
+        <RouteTitle data-testid="markets-heading">
+          {data?.market?.tradableInstrument.instrument.name}
+        </RouteTitle>
+        <AsyncRenderer
+          noDataMessage={t('This chain has no markets')}
+          data={data}
+          loading={loading}
+          error={error}
+        >
+          <div className="absolute top-0 right-0">
+            <Button size="xs" onClick={() => setDialogOpen(true)}>
+              {t('View JSON')}
+            </Button>
+          </div>
+          <MarketDetails market={data?.market} />
+        </AsyncRenderer>
+      </section>
+      <JsonViewerDialog
+        open={dialogOpen}
+        onChange={(isOpen) => setDialogOpen(isOpen)}
+        title={data?.market?.tradableInstrument.instrument.name || ''}
+        content={data?.market}
+      />
+    </>
+  );
+};
@@ -0,0 +1,31 @@
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import { marketsProvider } from '@vegaprotocol/market-list';
+import { RouteTitle } from '../../components/route-title';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
+import { MarketsTable } from '../../components/markets/markets-table';
+
+export const MarketsPage = () => {
+  useDocumentTitle(['Markets']);
+  useScrollToLocation();
+
+  const { data, loading, error } = useDataProvider({
+    dataProvider: marketsProvider,
+    skipUpdates: true,
+  });
+
+  return (
+    <section>
+      <RouteTitle data-testid="markets-heading">{t('Markets')}</RouteTitle>
+      <AsyncRenderer
+        noDataMessage={t('This chain has no markets')}
+        data={data}
+        loading={loading}
+        error={error}
+      >
+        <MarketsTable data={data} />
+      </AsyncRenderer>
+    </section>
+  );
+};
@@ -2,7 +2,6 @@ import { Assets } from './assets';
 import BlockPage from './blocks';
 import Governance from './governance';
 import Home from './home';
-import Markets from './markets';
 import OraclePage from './oracles';
 import Oracles from './oracles/home';
 import { Oracle } from './oracles/id';
@@ -21,8 +20,13 @@ import flags from '../config/flags';
 import { t } from '@vegaprotocol/react-helpers';
 import { Routes } from './route-names';
 import { NetworkParameters } from './network-parameters';
+import type { RouteObject } from 'react-router-dom';
+import { MarketPage, MarketsPage } from './markets';

-const partiesRoutes = flags.parties
+export type Navigable = { path: string; name: string; text: string };
+type Route = RouteObject & Navigable;
+
+const partiesRoutes: Route[] = flags.parties
  ? [
      {
        path: Routes.PARTIES,
@@ -43,7 +47,7 @@ const partiesRoutes = flags.parties
    ]
  : [];

-const assetsRoutes = flags.assets
+const assetsRoutes: Route[] = flags.assets
  ? [
      {
        path: Routes.ASSETS,
@@ -54,7 +58,7 @@ const assetsRoutes = flags.assets
    ]
  : [];

-const genesisRoutes = flags.genesis
+const genesisRoutes: Route[] = flags.genesis
  ? [
      {
        path: Routes.GENESIS,
@@ -65,7 +69,7 @@ const genesisRoutes = flags.genesis
    ]
  : [];

-const governanceRoutes = flags.governance
+const governanceRoutes: Route[] = flags.governance
  ? [
      {
        path: Routes.GOVERNANCE,
@@ -76,18 +80,27 @@ const governanceRoutes = flags.governance
    ]
  : [];

-const marketsRoutes = flags.markets
+const marketsRoutes: Route[] = flags.markets
  ? [
      {
        path: Routes.MARKETS,
        name: 'Markets',
        text: t('Markets'),
-        element: <Markets />,
+        children: [
+          {
+            index: true,
+            element: <MarketsPage />,
+          },
+          {
+            path: ':marketId',
+            element: <MarketPage />,
+          },
+        ],
      },
    ]
  : [];

-const networkParametersRoutes = flags.networkParameters
+const networkParametersRoutes: Route[] = flags.networkParameters
  ? [
      {
        path: Routes.NETWORK_PARAMETERS,
@@ -97,7 +110,7 @@ const networkParametersRoutes = flags.networkParameters
      },
    ]
  : [];
-const validators = flags.validators
+const validators: Route[] = flags.validators
  ? [
      {
        path: Routes.VALIDATORS,
@@ -108,7 +121,7 @@ const validators = flags.validators
    ]
  : [];

-const routerConfig = [
+const routerConfig: Route[] = [
  {
    path: Routes.HOME,
    name: 'Home',
@@ -1,3 +1,5 @@
+import type { InMemoryCacheConfig } from '@apollo/client';
+import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
 import { useRoutes } from 'react-router-dom';

 import '../styles.scss';
@@ -5,14 +7,40 @@ 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 (
-    <div className="max-h-full min-h-full bg-white">
-      <Navbar />
-      <AppRouter />
-    </div>
+    <NetworkLoader cache={cache}>
+      <div className="max-h-full min-h-full bg-white">
+        <Navbar />
+        <AppRouter />
+      </div>
+    </NetworkLoader>
  );
 }

@@ -1,44 +1,15 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';

 import App from './app/app';
-import type { InMemoryCacheConfig } from '@apollo/client';

 const rootElement = document.getElementById('root');
 const root = rootElement && createRoot(rootElement);
-const cache: InMemoryCacheConfig = {
-  typePolicies: {
-    Market: {
-      merge: true,
-    },
-    Party: {
-      merge: true,
-    },
-    Query: {},
-    Account: {
-      keyFields: false,
-      fields: {
-        balanceFormatted: {},
-      },
-    },
-    Node: {
-      keyFields: false,
-    },
-    Instrument: {
-      keyFields: false,
-    },
-  },
-};
 root?.render(
  <StrictMode>
    <BrowserRouter>
-      <EnvironmentProvider>
-        <NetworkLoader cache={cache}>
-          <App />
-        </NetworkLoader>
-      </EnvironmentProvider>
+      <App />
    </BrowserRouter>
  </StrictMode>
 );
@@ -2,3 +2,4 @@ NX_VEGA_URL=https://api.stagnet3.vega.xyz/graphql
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
 NX_VEGA_NETWORKS='{"TESTNET":"https://multisig-signer.fairground.wtf","MAINNET":"https://multisig-signer.vega.xyz"}'
 NX_VEGA_ENV=STAGNET3
+
@@ -3,9 +3,9 @@ import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { BrowserTracing } from '@sentry/tracing';
 import {
-  EnvironmentProvider,
  NetworkLoader,
  useEnvironment,
+  useInitializeEnv,
 } from '@vegaprotocol/environment';
 import { AsyncRenderer, Button, Lozenge } from '@vegaprotocol/ui-toolkit';
 import type { EthereumConfig } from '@vegaprotocol/web3';
@@ -64,6 +64,7 @@ function App() {
      environment: VEGA_ENV,
    });
  }, [VEGA_ENV]);
+
  const Connectors = useMemo(() => {
    if (config?.chain_id) {
      return createConnectors(ETHEREUM_PROVIDER_URL, Number(config.chain_id));
@@ -107,12 +108,11 @@ const Wrapper = () => {
      },
    },
  };
+  useInitializeEnv();
  return (
-    <EnvironmentProvider>
-      <NetworkLoader cache={cache}>
-        <App />
-      </NetworkLoader>
-    </EnvironmentProvider>
+    <NetworkLoader cache={cache}>
+      <App />
+    </NetworkLoader>
  );
 };

@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+
+import {
+  createUpdateNetworkProposalTxBody,
+  createFreeFormProposalTxBody,
+} from '../../support/proposal.functions';
+
+const closedProposals = '[data-testid="closed-proposals"]';
+const proposalStatus = '[data-testid="proposal-status"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+const votesTable = '[data-testid="votes-table"]';
+const openProposals = '[data-testid="open-proposals"]';
+const proposalVoteProgressForPercentage =
+  '[data-testid="vote-progress-indicator-percentage-for"]';
+const proposalTimeout = { timeout: 8000 };
+
+context(
+  'Proposal flow - with proposals enacted or failed',
+  { tags: '@slow' },
+  function () {
+    before('Connect wallets and set approval', function () {
+      cy.visit('/');
+      cy.vega_wallet_set_specified_approval_amount('1000');
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated(1);
+      cy.clearLocalStorage();
+    });
+
+    beforeEach('visit proposals', function () {
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.navigate_to('proposals');
+    });
+
+    // 3001-VOTE-006
+    it('Able to view enacted proposal', function () {
+      const proposalTitle = 'Add Lorem Ipsum market';
+
+      cy.createMarket();
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(closedProposals).within(() => {
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => {
+            cy.get(proposalStatus).should('have.text', 'Enacted ');
+            cy.get(viewProposalButton).click();
+          });
+      });
+      cy.getByTestId('proposal-type').should('have.text', 'New market');
+      cy.get_proposal_information_from_table('State')
+        .contains('Enacted')
+        .and('be.visible');
+      cy.get(votesTable).within(() => {
+        cy.contains('Vote passed.').should('be.visible');
+        cy.contains('Voting has ended.').should('be.visible');
+      });
+    });
+
+    // 3001-VOTE-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
+    it('Able to enact proposal by voting', function () {
+      const proposalTitle = 'Add New proposal with short enactment';
+      const proposalTx = createUpdateNetworkProposalTxBody();
+
+      cy.VegaWalletSubmitProposal(proposalTx);
+      cy.navigate_to('proposals');
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(openProposals).within(() => {
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => cy.get(viewProposalButton).click());
+      });
+      cy.get_proposal_information_from_table('State')
+        .contains('Open')
+        .and('be.visible');
+      cy.vote_for_proposal('for');
+      cy.get_proposal_information_from_table('State') // 3001-VOTE-047
+        .contains('Passed', proposalTimeout)
+        .and('be.visible');
+      cy.get_proposal_information_from_table('State')
+        .contains('Enacted', proposalTimeout)
+        .and('be.visible');
+      cy.get(votesTable).within(() => {
+        cy.contains('Vote passed.').should('be.visible');
+        cy.contains('Voting has ended.').should('be.visible');
+      });
+      cy.get(proposalVoteProgressForPercentage)
+        .contains('100.00%')
+        .and('be.visible');
+    });
+
+    // 3001-VOTE-047
+    it('Able to enact freeform proposal', function () {
+      const proposalTitle = 'Add New free form proposal with short enactment';
+      const proposalTx = createFreeFormProposalTxBody();
+
+      cy.VegaWalletSubmitProposal(proposalTx);
+      cy.navigate_to('proposals');
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(openProposals).within(() => {
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => cy.get(viewProposalButton).click());
+      });
+      cy.get_proposal_information_from_table('State')
+        .contains('Open')
+        .and('be.visible');
+      cy.vote_for_proposal('for');
+      cy.get_proposal_information_from_table('State')
+        .contains('Enacted', proposalTimeout)
+        .and('be.visible');
+    });
+
+    // 3001-VOTE-048 3001-VOTE-049
+    it('Able to fail proposal due to lack of participation', function () {
+      const proposalTitle = 'Add New free form proposal with short enactment';
+      const proposalTx = createFreeFormProposalTxBody();
+      cy.VegaWalletSubmitProposal(proposalTx);
+      cy.navigate_to('proposals');
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(openProposals).within(() => {
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => cy.get(viewProposalButton).click());
+      });
+      cy.get_proposal_information_from_table('State')
+        .contains('Open')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('State') // 3001-VOTE-047
+        .contains('Declined', proposalTimeout)
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Rejection reason')
+        .contains('PROPOSAL_ERROR_PARTICIPATION_THRESHOLD_NOT_REACHED')
+        .and('be.visible');
+    });
+  }
+);
@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+
 const vegaWalletUnstakedBalance =
  '[data-testid="vega-wallet-balance-unstaked"]';
 const vegaWalletStakedBalances =
@@ -11,7 +12,6 @@ const newProposalSubmitButton = '[data-testid="proposal-submit"]';
 const dialogCloseButton = '[data-testid="dialog-close"]';
 const viewProposalButton = '[data-testid="view-proposal-btn"]';
 const openProposals = '[data-testid="open-proposals"]';
-const closedProposals = '[data-testid="closed-proposals"]';
 const proposalVoteProgressForPercentage =
  '[data-testid="vote-progress-indicator-percentage-for"]';
 const proposalVoteProgressAgainstPercentage =
@@ -23,9 +23,7 @@ const proposalVoteProgressAgainstTokens =
 const changeVoteButton = '[data-testid="change-vote-button"]';
 const proposalDetailsTitle = '[data-testid="proposal-title"]';
 const proposalDetailsDescription = '[data-testid="proposal-description"]';
-const proposalStatus = '[data-testid="proposal-status"]';
 const rawProposalData = '[data-testid="proposal-data"]';
-const votesTable = '[data-testid="votes-table"]';
 const minVoteButton = '[data-testid="min-vote"]';
 const maxVoteButton = '[data-testid="max-vote"]';
 const voteButtons = '[data-testid="vote-buttons"]';
@@ -787,107 +785,6 @@ context(
        cy.contains('You voted: Against').should('be.visible');
      });

-      // 3001-VOTE-006
-      it('Able to view enacted proposal', function () {
-        cy.createMarket();
-        cy.reload();
-        cy.wait_for_spinner();
-        cy.get(closedProposals).within(() => {
-          cy.get(proposalDetailsTitle).should(
-            'have.text',
-            'Add Lorem Ipsum market'
-          );
-          cy.get(proposalStatus).should('have.text', 'Enacted ');
-          cy.get(viewProposalButton).click();
-        });
-        cy.getByTestId('proposal-type').should('have.text', 'New market');
-        cy.get_proposal_information_from_table('State')
-          .contains('Enacted')
-          .and('be.visible');
-        cy.get(votesTable).within(() => {
-          cy.contains('Vote passed.').should('be.visible');
-          cy.contains('Voting has ended.').should('be.visible');
-        });
-      });
-
-      // 3001-VOTE-047
-      it('Able to enact freeform proposal', function () {
-        const proposalTitle = 'Add New free form proposal with short enactment';
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.sendWalletTxFreeFormProposal();
-        cy.navigate_to('proposals');
-        cy.reload();
-        cy.wait_for_spinner();
-        cy.contains(proposalTitle)
-          .parentsUntil('[data-testid="proposals-list-item"]')
-          .within(() => cy.get(viewProposalButton).click());
-        cy.get_proposal_information_from_table('State')
-          .contains('Open')
-          .and('be.visible');
-        cy.vote_for_proposal('for');
-        cy.get_proposal_information_from_table('State')
-          .contains('Enacted', epochTimeout)
-          .and('be.visible');
-      });
-
-      // 3001-VOTE-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
-      it('Able to enact proposal by voting', function () {
-        const proposalTitle = 'Add New proposal with short enactment';
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.sendWalletTxUpdateNetworkProposal();
-        cy.navigate_to('proposals');
-        cy.reload();
-        cy.wait_for_spinner();
-        cy.contains(proposalTitle)
-          .parentsUntil('[data-testid="proposals-list-item"]')
-          .within(() => cy.get(viewProposalButton).click());
-        cy.get_proposal_information_from_table('State')
-          .contains('Open')
-          .and('be.visible');
-        cy.vote_for_proposal('for');
-        cy.get_proposal_information_from_table('State') // 3001-VOTE-047
-          .contains('Passed', txTimeout)
-          .and('be.visible');
-        cy.get_proposal_information_from_table('State')
-          .contains('Enacted', epochTimeout)
-          .and('be.visible');
-        cy.get(votesTable).within(() => {
-          cy.contains('Vote passed.').should('be.visible');
-          cy.contains('Voting has ended.').should('be.visible');
-        });
-        cy.get(proposalVoteProgressForPercentage)
-          .contains('100.00%')
-          .and('be.visible');
-      });
-
-      // 3001-VOTE-048 3001-VOTE-049
-      it('Able to fail proposal due to lack of participation', function () {
-        const proposalTitle = 'Add New free form proposal with short enactment';
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.sendWalletTxFreeFormProposal();
-        cy.navigate_to('proposals');
-        cy.reload();
-        cy.wait_for_spinner();
-        cy.contains(proposalTitle)
-          .parentsUntil('[data-testid="proposals-list-item"]')
-          .within(() => cy.get(viewProposalButton).click());
-        cy.get_proposal_information_from_table('State')
-          .contains('Open')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('State') // 3001-VOTE-047
-          .contains('Declined', txTimeout)
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Rejection reason')
-          .contains('PROPOSAL_ERROR_PARTICIPATION_THRESHOLD_NOT_REACHED')
-          .and('be.visible');
-      });
-
      function createRawProposal(proposerBalance) {
        if (proposerBalance)
          cy.ensure_specified_unstaked_tokens_are_associated(proposerBalance);
@@ -7,26 +7,9 @@ const navWithdraw = '[href="/token/withdraw"]';
 const navGovernance = '[href="/proposals"]';
 const navRedeem = '[href="/token/redeem"]';

-const tokenDetailsTable = '.token-details';
-const address = '[data-testid="token-address"]';
-const contract = '[data-testid="token-contract"]';
-const totalSupply = '[data-testid="total-supply"]';
-const circulatingSupply = '[data-testid="circulating-supply"]';
-const staked = '[data-testid="staked"]';
-const tranchesLink = '[data-testid="tranches-link"]';
-const redeemBtn = '[data-testid="check-vesting-page-btn"]';
-const getVegaWalletLink = '[data-testid="get-vega-wallet-link"]';
-const associateVegaLink =
-  '[data-testid="associate-vega-tokens-link-on-homepage"]';
-const stakingBtn = '[data-testid="staking-button-on-homepage"]';
-const governanceBtn = '[data-testid="governance-button-on-homepage"]';
-
-const vegaTokenAddress = Cypress.env('vegaTokenAddress');
-const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
-
 context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
  before('visit token home page', function () {
-    cy.visit('/token');
+    cy.visit('/');
  });

  describe('with wallets disconnected', function () {
@@ -54,7 +37,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
      describe('Token dropdown', function () {
        before('click on token dropdown', function () {
          cy.get(navSection).within(() => {
-            cy.getByTestId('state-trigger').click();
+            cy.getByTestId('state-trigger').realClick();
          });
        });
        it('should have token dropdown', function () {
@@ -72,80 +55,73 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
      });
    });

-    describe('THE $VEGA TOKEN table', function () {
-      it('should have TOKEN ADDRESS', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(address)
-            .should('be.visible')
-            .invoke('text')
-            .should('be.equal', vegaTokenAddress);
+    describe('Links and buttons', function () {
+      it('should have link for proposal page', function () {
+        cy.getByTestId('home-proposals').within(() => {
+          cy.get('[href="/proposals"]')
+            .should('exist')
+            .and('have.text', 'Browse, vote, and propose');
        });
      });
-      it('should have VESTING CONTRACT', function () {
-        // 1004-ASSO-001
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(contract)
-            .should('be.visible')
-            .invoke('text')
-            .should('be.equal', vegaTokenContractAddress);
+      it('should have external link for governance', function () {
+        cy.getByTestId('home-proposals').within(() => {
+          cy.getByTestId('external-link')
+            .should('have.attr', 'href')
+            .and('contain', 'https://vega.xyz/governance');
        });
      });
-      it('should have TOTAL SUPPLY', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(totalSupply).should('be.visible');
+      it('should have link for validator page', function () {
+        cy.getByTestId('home-validators').within(() => {
+          cy.get('[href="/validators"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'Browse, and stake');
        });
      });
-      it('should have CIRCULATING SUPPLY', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(circulatingSupply).should('be.visible');
+      it('should have external link for validators', function () {
+        cy.getByTestId('home-validators').within(() => {
+          cy.getByTestId('external-link')
+            .should('have.attr', 'href')
+            .and(
+              'contain',
+              'https://community.vega.xyz/c/mainnet-validator-candidates'
+            );
        });
      });
-      it('should have STAKED $VEGA', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(staked).should('be.visible');
+      it('should have information on active nodes', function () {
+        cy.getByTestId('node-information')
+          .first()
+          .should('contain.text', '2')
+          .and('contain.text', 'active nodes');
+      });
+      it('should have information on consensus nodes', function () {
+        cy.getByTestId('node-information')
+          .last()
+          .should('contain.text', '2')
+          .and('contain.text', 'consensus nodes');
+      });
+      it('should contain link to specific validators', function () {
+        cy.getByTestId('validators')
+          .should('have.length', '2')
+          .each(($validator) => {
+            cy.wrap($validator).find('a').should('have.attr', 'href');
+          });
+      });
+      it('should have link for rewards page', function () {
+        cy.getByTestId('home-rewards').within(() => {
+          cy.get('[href="/rewards"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'See rewards');
        });
      });
-    });
-
-    describe('links and buttons', function () {
-      it('should have TRANCHES link', function () {
-        cy.get(tranchesLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', '/token/tranches');
-      });
-      it('should have REDEEM button', function () {
-        cy.get(redeemBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/token/redeem');
-      });
-      it('should have GET VEGA WALLET link', function () {
-        cy.get(getVegaWalletLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', 'https://vega.xyz/wallet');
-      });
-      it('should have ASSOCIATE VEGA TOKENS link', function () {
-        cy.get(associateVegaLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', '/token/associate');
-      });
-      it('should have STAKING button', function () {
-        cy.get(stakingBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/validators');
-      });
-      it('should have GOVERNANCE button', function () {
-        cy.get(governanceBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/proposals');
+      it('should have link for withdrawal page', function () {
+        cy.getByTestId('home-vega-token').within(() => {
+          cy.get('[href="/token/withdraw"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'Manage tokens');
+        });
      });
    });
  });
@@ -1,4 +1,4 @@
-const connectToVegaBtn = '[data-testid="connect-to-vega-wallet-btn"]';
+const viewToggle = '[data-testid="epoch-reward-view-toggle-total"]';
 const warning = '[data-testid="callout"]';

 context(
@@ -15,7 +15,7 @@ context(
      });

      it('should have rewards header visible', function () {
-        cy.verify_page_header('Rewards');
+        cy.verify_page_header('Rewards and fees');
      });

      it('should have epoch warning', function () {
@@ -27,10 +27,8 @@ context(
          );
      });

-      it('should have connect Vega wallet button', function () {
-        cy.get(connectToVegaBtn)
-          .should('be.visible')
-          .and('have.text', 'Connect Vega wallet');
+      it('should have toggle for seeing total vs individual rewards', function () {
+        cy.get(viewToggle).should('be.visible');
      });
    });
  }
@@ -0,0 +1,99 @@
+const tokenDetailsTable = '.token-details';
+const address = '[data-testid="token-address"]';
+const contract = '[data-testid="token-contract"]';
+const totalSupply = '[data-testid="total-supply"]';
+const circulatingSupply = '[data-testid="circulating-supply"]';
+const staked = '[data-testid="staked"]';
+const tranchesLink = '[data-testid="tranches-link"]';
+const redeemBtn = '[data-testid="check-vesting-page-btn"]';
+const getVegaWalletLink = '[data-testid="get-vega-wallet-link"]';
+const associateVegaLink =
+  '[data-testid="associate-vega-tokens-link-on-homepage"]';
+const stakingBtn = '[data-testid="staking-button-on-homepage"]';
+const governanceBtn = '[data-testid="governance-button-on-homepage"]';
+
+const vegaTokenAddress = Cypress.env('vegaTokenAddress');
+const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
+
+context('Verify elements on Token page', { tags: '@smoke' }, function () {
+  before('Visit token page', function () {
+    cy.visit('/');
+    cy.navigate_to('token');
+  });
+  describe('THE $VEGA TOKEN table', function () {
+    it('should have TOKEN ADDRESS', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(address)
+          .should('be.visible')
+          .invoke('text')
+          .should('be.equal', vegaTokenAddress);
+      });
+    });
+    it('should have VESTING CONTRACT', function () {
+      // 1004-ASSO-001
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(contract)
+          .should('be.visible')
+          .invoke('text')
+          .should('be.equal', vegaTokenContractAddress);
+      });
+    });
+    it('should have TOTAL SUPPLY', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(totalSupply).should('be.visible');
+      });
+    });
+    it('should have CIRCULATING SUPPLY', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(circulatingSupply).should('be.visible');
+      });
+    });
+    it('should have STAKED $VEGA', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(staked).should('be.visible');
+      });
+    });
+  });
+
+  describe('links and buttons', function () {
+    it('should have TRANCHES link', function () {
+      cy.get(tranchesLink)
+        .should('be.visible')
+        .and('have.attr', 'href')
+        .and('equal', '/token/tranches');
+    });
+    it('should have REDEEM button', function () {
+      cy.get(redeemBtn)
+        .should('be.visible')
+        .parent()
+        .should('have.attr', 'href')
+        .and('equal', '/token/redeem');
+    });
+    it('should have GET VEGA WALLET link', function () {
+      cy.get(getVegaWalletLink)
+        .should('be.visible')
+        .and('have.attr', 'href')
+        .and('equal', 'https://vega.xyz/wallet');
+    });
+    it('should have ASSOCIATE VEGA TOKENS link', function () {
+      cy.get(associateVegaLink)
+        .should('be.visible')
+        .and('have.attr', 'href')
+        .and('equal', '/token/associate');
+    });
+    it('should have STAKING button', function () {
+      cy.get(stakingBtn)
+        .should('be.visible')
+        .parent()
+        .should('have.attr', 'href')
+        .and('equal', '/validators');
+    });
+    it('should have GOVERNANCE button', function () {
+      cy.get(governanceBtn)
+        .should('be.visible')
+        .parent()
+        .should('have.attr', 'href')
+        .and('equal', '/proposals');
+    });
+  });
+});
@@ -7,7 +7,7 @@ import './governance.functions.js';
 import './wallet-eth.functions.js';
 import './wallet-teardown.functions.js';
 import './wallet-vega.functions.js';
-import './proposal.functions.js';
+import './proposal.functions.ts';
 import registerCypressGrep from '@cypress/grep';
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
@@ -1,103 +0,0 @@
-import { addSeconds, millisecondsToSeconds } from 'date-fns';
-
-const walletName = Cypress.env('vegaWalletName');
-const walletPubKey = Cypress.env('vegaWalletPublicKey');
-const walletLocation = Cypress.env('vegaWalletLocation');
-const walletPassphraseFile = './src/fixtures/wallet/passphrase';
-
-Cypress.Commands.add('sendWalletTxUpdateNetworkProposal', () => {
-  const MIN_CLOSE_SEC = 8;
-  const MIN_ENACT_SEC = 5;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
-
-  cy.exec(
-    `vegawallet transaction send --wallet ${walletName} --pubkey ${walletPubKey} -p ${walletPassphraseFile} --network DV '{
-      "proposalSubmission": {
-        "rationale": {
-          "title": "Add New proposal with short enactment",
-          "description": "E2E enactment test"
-        },
-        "terms": {
-          "updateNetworkParameter": {
-              "changes": {
-                  "key": "governance.proposal.updateNetParam.minProposerBalance",
-                  "value": "2"
-              }
-          },
-          "closingTimestamp": ${closingTimestamp},
-          "enactmentTimestamp": ${enactmentTimestamp}
-      }
-      }
-     }' --home ${walletLocation}`,
-    { failOnNonZeroExit: false }
-  )
-    .its('stderr')
-    .should('contain', '');
-});
-
-Cypress.Commands.add('sendWalletTxUpdateAssetProposal', () => {
-  const MIN_CLOSE_SEC = 8;
-  const MIN_ENACT_SEC = 5;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
-
-  cy.exec(
-    `vegawallet transaction send --wallet ${walletName} --pubkey ${walletPubKey} -p ${walletPassphraseFile} --network DV '{
-      "proposalSubmission": {
-        "rationale": {
-          "title": "Update Asset set to fail",
-          "description": "E2E fail test"
-        },
-        "terms": {
-          "updateAsset": {
-            "assetId": "ebcd94151ae1f0d39a4bde3b21a9c7ae81a80ea4352fb075a92e07608d9c953d",
-            "changes": {
-                "quantum": "1",
-                "erc20": {
-                    "withdrawThreshold": "10",
-                    "lifetimeLimit": "10"
-                }
-            }
-        },
-          "closingTimestamp": ${closingTimestamp},
-          "enactmentTimestamp": ${enactmentTimestamp}
-      }
-      }
-     }' --home ${walletLocation}`,
-    { failOnNonZeroExit: false }
-  )
-    .its('stderr')
-    .should('contain', '');
-});
-
-Cypress.Commands.add('sendWalletTxFreeFormProposal', () => {
-  const MIN_CLOSE_SEC = 5;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-
-  cy.exec(
-    `vegawallet transaction send --wallet ${walletName} --pubkey ${walletPubKey} -p ${walletPassphraseFile} --network DV '{
-      "proposalSubmission": {
-        "rationale": {
-          "title": "Add New free form proposal with short enactment",
-          "description": "E2E enactment test"
-        },
-        "terms": {
-          "newFreeform": {},
-        "closingTimestamp": ${closingTimestamp}
-        }
-      }
-     }' --home ${walletLocation}`,
-    { failOnNonZeroExit: false }
-  )
-    .its('stderr')
-    .should('contain', '');
-});
@@ -0,0 +1,82 @@
+import { addSeconds, millisecondsToSeconds } from 'date-fns';
+import type { ProposalSubmissionBody } from '@vegaprotocol/wallet';
+
+export function createUpdateNetworkProposalTxBody(): ProposalSubmissionBody {
+  const MIN_CLOSE_SEC = 5;
+  const MIN_ENACT_SEC = 7;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
+  return {
+    proposalSubmission: {
+      rationale: {
+        title: 'Add New proposal with short enactment',
+        description: 'E2E enactment test',
+      },
+      terms: {
+        updateNetworkParameter: {
+          changes: {
+            key: 'governance.proposal.updateNetParam.minProposerBalance',
+            value: '2',
+          },
+        },
+        closingTimestamp,
+        enactmentTimestamp,
+      },
+    },
+  };
+}
+
+export function createUpdateAssetProposalTxBody(): ProposalSubmissionBody {
+  const MIN_CLOSE_SEC = 5;
+  const MIN_ENACT_SEC = 7;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
+  return {
+    proposalSubmission: {
+      rationale: {
+        title: 'Update Asset set to fail',
+        description: 'E2E fail test',
+      },
+      terms: {
+        updateAsset: {
+          assetId:
+            'ebcd94151ae1f0d39a4bde3b21a9c7ae81a80ea4352fb075a92e07608d9c953d',
+          changes: {
+            quantum: '1',
+            erc20: {
+              withdrawThreshold: '10',
+              lifetimeLimit: '10',
+            },
+          },
+        },
+        closingTimestamp,
+        enactmentTimestamp,
+      },
+    },
+  };
+}
+
+export function createFreeFormProposalTxBody(): ProposalSubmissionBody {
+  const MIN_CLOSE_SEC = 7;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  return {
+    proposalSubmission: {
+      rationale: {
+        title: 'Add New free form proposal with short enactment',
+        description: 'E2E enactment test',
+      },
+      terms: {
+        newFreeform: {},
+        closingTimestamp,
+      },
+    },
+  };
+}
@@ -24,8 +24,8 @@ import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import {
  useEnvironment,
-  EnvironmentProvider,
  NetworkLoader,
+  useInitializeEnv,
 } from '@vegaprotocol/environment';
 import { createConnectors } from './lib/web3-connectors';
 import { ENV } from './config/env';
@@ -166,12 +166,12 @@ const AppContainer = () => {
 };

 function App() {
+  useInitializeEnv();
+
  return (
-    <EnvironmentProvider>
-      <NetworkLoader cache={cache}>
-        <AppContainer />
-      </NetworkLoader>
-    </EnvironmentProvider>
+    <NetworkLoader cache={cache}>
+      <AppContainer />
+    </NetworkLoader>
  );
 }

@@ -1,23 +1,18 @@
 import { render, screen, within } from '@testing-library/react';
-import { EnvironmentProvider, Networks } from '@vegaprotocol/environment';
 import { MemoryRouter } from 'react-router-dom';
 import { Nav } from './nav';

 jest.mock('@vegaprotocol/environment', () => ({
  ...jest.requireActual('@vegaprotocol/environment'),
  NetworkSwitcher: () => <div data-testid="network-switcher" />,
+  useEnvironment: () => ({ VEGA_ENV: 'MAINNET' }),
 }));

 const renderComponent = (initialEntries?: string[]) => {
  return render(
-    <EnvironmentProvider
-      definitions={{ VEGA_ENV: Networks.MAINNET }}
-      config={{ hosts: [] }}
-    >
-      <MemoryRouter initialEntries={initialEntries}>
-        <Nav />
-      </MemoryRouter>
-    </EnvironmentProvider>
+    <MemoryRouter initialEntries={initialEntries}>
+      <Nav />
+    </MemoryRouter>
  );
 };

@@ -21,10 +21,8 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
    <>
      <AnnouncementBanner>
        <div className="font-alpha calt uppercase text-center text-lg text-white">
-          <span className="pr-4">The Mainnet sims are live!</span>
-          <ExternalLink href="https://fairground.wtf/">
-            Come help stress test the network
-          </ExternalLink>
+          <span className="pr-4">Mainnet sim 2 coming in March!</span>
+          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
        </div>
      </AnnouncementBanner>
      <Nav navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
@@ -32,7 +30,9 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
        <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
      ) : null}
      <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
-        <main className="col-start-1 p-4">{children}</main>
+        <main className="max-w-[100vw] col-start-1 p-4 overflow-auto">
+          {children}
+        </main>
        <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">
          {sidebar.map((Component, i) => (
            <section className="mb-4 last:mb-0" key={i}>
@@ -1,7 +1,7 @@
 import type { ObservableQuery } from '@apollo/client';
 import { useEffect } from 'react';

-export const useRefreshValidators = (
+export const useRefreshAfterEpoch = (
  epochExpiry: string | undefined,
  refetch: ObservableQuery['refetch']
 ) => {
@@ -14,7 +14,7 @@
  "pageTitleProposals": "Proposals",
  "pageTitleDepositLp": "Deposit liquidity token for $VEGA rewards",
  "pageTitleWithdrawLp": "Withdraw SLP and Rewards",
-  "pageTitleRewards": "Rewards",
+  "pageTitleRewards": "Rewards and fees",
  "pageTitleRejectedProposals": "Rejected proposals",
  "pageTitleValidators": "Validators",
  "Vesting": "Vesting",
@@ -197,10 +197,6 @@
  "STATE_PASSED": "Passed",
  "STATE_OPEN": "Open",
  "STATE_WAITING_FOR_NODE_VOTE": "Waiting for node vote",
-  "NewMarket": "New market",
-  "UpdateMarket": "Update market",
-  "NewAsset": "New asset",
-  "UpdateAsset": "Update asset",
  "UpdateNetworkParameter": "Network parameter",
  "NewFreeform": "Freeform",
  "tokenVotes": "Token votes",
@@ -436,12 +432,32 @@
  "associatedWithVegaKeys": "Associated with Vega keys",
  "thisEpoch": "This Epoch",
  "nextEpoch": "Next epoch",
-  "rewardsPara1": "Rewards are paid out from the treasury at the end of an epoch.",
-  "rewardsPara2": "This page lists all the rewards that your Vega key has received.",
-  "rewardsPara3": "This delay is set by a network parameter",
+  "rewardsIntro": "Earn rewards and infrastructure fees for trading and maintaining the network.",
  "rewardsCallout": "Rewards are credited {{duration}} after the epoch ends.",
+  "rewardsCalloutDetail": "This delay is set by a network parameter",
  "noRewards": "The Vega key has not been credited any rewards since the previous network checkpoint.",
+  "seeHowRewardsAreCalculated": "See how rewards are calculated",
  "rewardType": "Reward type",
+  "rewardsAndFeesReceived": "Rewards and fees received",
+  "ThisDoesNotIncludeFeesReceivedForMakersOrLiquidityProviders": "This does not include fees received for makers or liquidity providers",
+  "totalDistributed": "TOTAL DISTRIBUTED",
+  "earnedByMe": "EARNED BY ME",
+  "noRewardsHaveBeenDistributedYet": "NO REWARDS HAVE BEEN DISTRIBUTED YET",
+  "rewardsColAssetHeader": "ASSET",
+  "rewardsColStakingHeader": "STAKING",
+  "rewardsColStakingTooltip": "Staking rewards supplement infrastructure fees in the early stages of the network, rewarding validators and those who stake them for maintaining the network",
+  "rewardsColInfraHeader": "INFRA FEES",
+  "rewardsColInfraTooltip": "Infrastructure fees are incurred across the network during trading. They are distributed to validators according to their share of total stake on the network, and passed onto those who stake them, proportionate to their own stake after validator commission is taken",
+  "rewardsColPriceTakingHeader": "PRICE TAKING",
+  "rewardsColPriceTakingTooltip": "Price taking rewards are based on the proportion of the total maker fees you paid while trading, on markets where there is a funded reward",
+  "rewardsColPriceMakingHeader": "PRICE MAKING",
+  "rewardsColPriceMakingTooltip": "Price making rewards are based on the proportion of the total maker fees you received while trading, on markets where there is a funded reward",
+  "rewardsColLiquidityProvisionHeader": "LIQUIDITY PROVISION",
+  "rewardsColLiquidityProvisionTooltip": "Liquidity provision rewards are distributed based on how much you have earned in liquidity fees, funded by a liquidity reward pool for that market",
+  "rewardsColMarketCreationHeader": "MARKET CREATION",
+  "rewardsColMarketCreationTooltip": "Market creation rewards are paid out to the creator of any market that exceeds a set threshold of cumulative volume in a given epoch, currently [rewards.marketCreationQuantumMultiple]",
+  "rewardsColTotalHeader": "TOTAL",
+  "checkBackSoon": "Check back soon",
  "yourStake": "Your stake",
  "reward": "Reward",
  "shareOfReward": "Share of reward",
@@ -8,7 +8,7 @@ import {
  RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { useDocumentTitle } from '../../hooks/use-document-title';
-import { useRefreshValidators } from '../../hooks/use-refresh-validators';
+import { useRefreshAfterEpoch } from '../../hooks/use-refresh-after-epoch';
 import { ProposalsListItem } from '../proposals/components/proposals-list-item';
 import Routes from '../routes';
 import {
@@ -94,7 +94,10 @@ const HomeNodes = ({
          <div key={index} className="col-span-3">
            <Link to={Routes.VALIDATORS}>
              <RoundedWrapper paddingBottom={true}>
-                <div className="flex flex-col items-center m-[-1rem] px-4 py-6 hover:bg-neutral-800">
+                <div
+                  data-testid="node-information"
+                  className="flex flex-col items-center m-[-1rem] px-4 py-6 hover:bg-neutral-800"
+                >
                  <span className="text-5xl">{length}</span>
                  <span className="text-sm uppercase text-neutral-400">
                    {title}
@@ -106,7 +109,7 @@ const HomeNodes = ({
        ))}

        {trimmedActiveNodes.map(({ id, avatarUrl, name }) => (
-          <div key={id} className="col-span-2">
+          <div key={id} data-testid="validators" className="col-span-2">
            <Link to={`${Routes.VALIDATORS}/${id}`}>
              <RoundedWrapper paddingBottom={true} border={false}>
                <div className="flex items-center justify-center m-[-1rem] p-4 bg-neutral-900 hover:bg-neutral-800">
@@ -156,7 +159,7 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
    refetch,
  } = useNodesQuery();

-  useRefreshValidators(validatorsData?.epoch.timestamps.expiry, refetch);
+  useRefreshAfterEpoch(validatorsData?.epoch.timestamps.expiry, refetch);

  const proposals = useMemo(
    () =>
@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { removePaginationWrapper } from '@vegaprotocol/react-helpers';
+import { useRewardsQuery } from '../home/__generated__/Rewards';
+import { ENV } from '../../../config';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { RewardTable } from './reward-table';
+
+export const RewardInfo = () => {
+  const { t } = useTranslation();
+  const { pubKey } = useVegaWallet();
+  const { delegationsPagination } = ENV;
+
+  const { data, loading, error } = useRewardsQuery({
+    variables: {
+      partyId: pubKey || '',
+      delegationsPagination: delegationsPagination
+        ? {
+            first: Number(delegationsPagination),
+          }
+        : undefined,
+    },
+    skip: !pubKey,
+  });
+
+  const rewards = useMemo(() => {
+    if (!data?.party || !data.party.rewardsConnection?.edges?.length) return [];
+
+    return removePaginationWrapper(data.party.rewardsConnection.edges);
+  }, [data]);
+
+  const delegations = useMemo(() => {
+    if (!data?.party || !data.party.delegationsConnection?.edges?.length) {
+      return [];
+    }
+
+    return removePaginationWrapper(data.party.delegationsConnection.edges);
+  }, [data]);
+
+  return (
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data}
+      render={() => (
+        <div>
+          <p>
+            {t('Connected Vega key')}: {pubKey}
+          </p>
+          {rewards.length ? (
+            rewards.map((reward, i) => {
+              if (!reward) return null;
+              return (
+                <RewardTable
+                  key={i}
+                  reward={reward}
+                  delegations={delegations || []}
+                />
+              );
+            })
+          ) : (
+            <p>{t('noRewards')}</p>
+          )}
+        </div>
+      )}
+    />
+  );
+};
@@ -1,66 +1,15 @@
-import { format } from 'date-fns';
-import React from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-
-import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
+import { useAppState } from '../../../contexts/app-state/app-state-context';
+import { formatNumber, toBigNum } from '@vegaprotocol/react-helpers';
 import { BigNumber } from '../../../lib/bignumber';
+import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
+import { format } from 'date-fns';
 import { DATE_FORMAT_DETAILED } from '../../../lib/date-formats';
 import type {
-  RewardsQuery,
-  RewardFieldsFragment,
  DelegationFieldsFragment,
-} from './__generated__/Rewards';
-import {
-  formatNumber,
-  removePaginationWrapper,
-  toBigNum,
-} from '@vegaprotocol/react-helpers';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
-
-interface RewardInfoProps {
-  data: RewardsQuery | undefined;
-  currVegaKey: string;
-}
-
-export const RewardInfo = ({ data, currVegaKey }: RewardInfoProps) => {
-  const { t } = useTranslation();
-
-  const rewards = React.useMemo(() => {
-    if (!data?.party || !data.party.rewardsConnection?.edges?.length) return [];
-
-    return removePaginationWrapper(data.party.rewardsConnection.edges);
-  }, [data]);
-
-  const delegations = React.useMemo(() => {
-    if (!data?.party || !data.party.delegationsConnection?.edges?.length) {
-      return [];
-    }
-
-    return removePaginationWrapper(data.party.delegationsConnection.edges);
-  }, [data]);
-
-  return (
-    <div>
-      <p>
-        {t('Connected Vega key')}: {currVegaKey}
-      </p>
-      {rewards.length ? (
-        rewards.map((reward, i) => {
-          if (!reward) return null;
-          return (
-            <RewardTable
-              key={i}
-              reward={reward}
-              delegations={delegations || []}
-            />
-          );
-        })
-      ) : (
-        <p>{t('noRewards')}</p>
-      )}
-    </div>
-  );
-};
+  RewardFieldsFragment,
+} from '../home/__generated__/Rewards';

 interface RewardTableProps {
  reward: RewardFieldsFragment;
@@ -74,7 +23,7 @@ export const RewardTable = ({ reward, delegations }: RewardTableProps) => {
  } = useAppState();

  // Get your stake for epoch in which you have rewards
-  const stakeForEpoch = React.useMemo(() => {
+  const stakeForEpoch = useMemo(() => {
    if (!delegations.length) return '0';

    const delegationsForEpoch = delegations
@@ -0,0 +1,43 @@
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { useEpochAssetsRewardsQuery } from '../home/__generated__/Rewards';
+import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
+import { generateEpochTotalRewardsList } from './generate-epoch-total-rewards-list';
+import { NoRewards } from '../no-rewards';
+import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
+
+export const EpochRewards = () => {
+  const { data, loading, error, refetch } = useEpochAssetsRewardsQuery({
+    variables: {
+      epochRewardSummariesPagination: {
+        first: 10,
+      },
+    },
+  });
+  useRefreshAfterEpoch(data?.epoch.timestamps.expiry, refetch);
+
+  const epochRewardSummaries = generateEpochTotalRewardsList(data) || [];
+
+  return (
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data}
+      render={() => (
+        <div
+          className="max-w-full overflow-auto"
+          data-testid="epoch-rewards-total"
+        >
+          {epochRewardSummaries.length === 0 ? (
+            <NoRewards />
+          ) : (
+            <>
+              {epochRewardSummaries.map((aggregatedEpochSummary) => (
+                <EpochTotalRewardsTable data={aggregatedEpochSummary} />
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    />
+  );
+};
@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react';
+import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
+import { AccountType } from '@vegaprotocol/types';
+
+const mockData = {
+  epoch: 4431,
+  assetRewards: [
+    {
+      assetId:
+        'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
+      name: 'tDAI TEST',
+      rewards: [
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+          amount: '295',
+        },
+      ],
+      totalAmount: '295',
+    },
+  ],
+};
+
+describe('EpochTotalRewardsTable', () => {
+  it('should render correctly', () => {
+    const { getByTestId } = render(<EpochTotalRewardsTable data={mockData} />);
+    expect(getByTestId('epoch-total-rewards-table')).toBeInTheDocument();
+    expect(getByTestId('asset')).toBeInTheDocument();
+    expect(getByTestId('global')).toBeInTheDocument();
+    expect(getByTestId('infra')).toBeInTheDocument();
+    expect(getByTestId('taker')).toBeInTheDocument();
+    expect(getByTestId('maker')).toBeInTheDocument();
+    expect(getByTestId('liquidity')).toBeInTheDocument();
+    expect(getByTestId('market-maker')).toBeInTheDocument();
+    expect(getByTestId('total')).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,212 @@
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { formatNumber } from '@vegaprotocol/react-helpers';
+import { Tooltip, Icon } from '@vegaprotocol/ui-toolkit';
+import { AccountType } from '@vegaprotocol/types';
+import { SubHeading } from '../../../components/heading';
+import type { AggregatedEpochSummary } from './generate-epoch-total-rewards-list';
+
+interface EpochTotalRewardsGridProps {
+  data: AggregatedEpochSummary;
+}
+
+interface ColumnHeaderProps {
+  title: string;
+  tooltipContent?: string;
+  className?: string;
+}
+
+interface RewardItemProps {
+  value: string;
+  dataTestId: string;
+  last?: boolean;
+}
+
+const displayReward = (reward: string) => {
+  if (Number(reward) === 0) {
+    return <span className="text-vega-dark-300">0</span>;
+  }
+
+  if (reward.split('.')[1] && reward.split('.')[1].length > 4) {
+    return (
+      <Tooltip description={formatNumber(reward)}>
+        <button>{formatNumber(Number(reward).toFixed(4))}</button>
+      </Tooltip>
+    );
+  }
+
+  return <span>{formatNumber(reward)}</span>;
+};
+
+const gridStyles = classNames(
+  'grid grid-cols-[repeat(8,minmax(100px,auto))] max-w-full overflow-auto',
+  `border-t border-vega-dark-200`,
+  'text-sm'
+);
+
+const headerGridItemStyles = (last = false) =>
+  classNames('border-r border-b border-b-vega-dark-200', 'py-3 px-5', {
+    'border-r-vega-dark-150': !last,
+    'border-r-0': last,
+  });
+
+const rowGridItemStyles = (last = false) =>
+  classNames('relative', 'border-r border-b border-b-vega-dark-150', {
+    'border-r-vega-dark-150': !last,
+    'border-r-0': last,
+  });
+
+const ColumnHeader = ({
+  title,
+  tooltipContent,
+  className,
+}: ColumnHeaderProps) => (
+  <div className={className}>
+    <h2 className="mb-1 text-sm text-vega-dark-300">{title}</h2>
+    {tooltipContent && (
+      <Tooltip description={tooltipContent}>
+        <button>
+          <Icon name={'info-sign'} className="text-vega-dark-200" />
+        </button>
+      </Tooltip>
+    )}
+  </div>
+);
+
+const RewardItem = ({ value, dataTestId, last }: RewardItemProps) => (
+  <div data-testid={dataTestId} className={rowGridItemStyles(last)}>
+    <div className="h-full w-5 absolute right-0 top-0 bg-gradient-to-r from-transparent to-black pointer-events-none" />
+    <div className="overflow-auto p-5">{displayReward(value)}</div>
+    <div className="h-full w-5 absolute left-0 top-0 bg-gradient-to-l from-transparent to-black pointer-events-none" />
+  </div>
+);
+
+export const EpochTotalRewardsTable = ({
+  data,
+}: EpochTotalRewardsGridProps) => {
+  const { t } = useTranslation();
+
+  const rowData = data.assetRewards.map(({ name, rewards, totalAmount }) => ({
+    name,
+    ACCOUNT_TYPE_GLOBAL_REWARD:
+      rewards
+        .filter((r) => r.rewardType === AccountType.ACCOUNT_TYPE_GLOBAL_REWARD)
+        .map((r) => r.amount)[0] || '0',
+    ACCOUNT_TYPE_FEES_INFRASTRUCTURE:
+      rewards
+        .filter(
+          (r) => r.rewardType === AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE
+        )
+        .map((r) => r.amount)[0] || '0',
+    ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES:
+      rewards
+        .filter(
+          (r) =>
+            r.rewardType === AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES
+        )
+        .map((r) => r.amount)[0] || '0',
+    ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES:
+      rewards
+        .filter(
+          (r) =>
+            r.rewardType === AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES
+        )
+        .map((r) => r.amount)[0] || '0',
+    ACCOUNT_TYPE_FEES_LIQUIDITY:
+      rewards
+        .filter((r) => r.rewardType === AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY)
+        .map((r) => r.amount)[0] || '0',
+    ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS:
+      rewards
+        .filter(
+          (r) =>
+            r.rewardType === AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS
+        )
+        .map((r) => r.amount)[0] || '0',
+    totalAmount: totalAmount,
+  }));
+
+  return (
+    <div data-testid="epoch-total-rewards-table" className="mb-12">
+      <SubHeading title={`EPOCH ${data.epoch}`} />
+
+      <div className={gridStyles}>
+        <ColumnHeader
+          title={t('rewardsColAssetHeader')}
+          className={headerGridItemStyles()}
+        />
+        <ColumnHeader
+          title={t('rewardsColStakingHeader')}
+          tooltipContent={t('rewardsColStakingTooltip')}
+          className={headerGridItemStyles()}
+        />
+        <ColumnHeader
+          title={t('rewardsColInfraHeader')}
+          tooltipContent={t('rewardsColInfraTooltip')}
+          className={headerGridItemStyles()}
+        />
+        <ColumnHeader
+          title={t('rewardsColPriceTakingHeader')}
+          tooltipContent={t('rewardsColPriceTakingTooltip')}
+          className={headerGridItemStyles()}
+        />
+        <ColumnHeader
+          title={t('rewardsColPriceMakingHeader')}
+          tooltipContent={t('rewardsColPriceMakingTooltip')}
+          className={headerGridItemStyles()}
+        />
+        <ColumnHeader
+          title={t('rewardsColLiquidityProvisionHeader')}
+          tooltipContent={t('rewardsColLiquidityProvisionTooltip')}
+          className={headerGridItemStyles()}
+        />
+        <ColumnHeader
+          title={t('rewardsColMarketCreationHeader')}
+          tooltipContent={t('rewardsColMarketCreationTooltip')}
+          className={headerGridItemStyles()}
+        />
+        <ColumnHeader
+          title={t('rewardsColTotalHeader')}
+          className={headerGridItemStyles(true)}
+        />
+
+        {rowData.map((row, i) => (
+          <div className="contents" key={i}>
+            <div data-testid="asset" className={`${rowGridItemStyles()} p-5`}>
+              {row.name}
+            </div>
+            <RewardItem
+              dataTestId="global"
+              value={row.ACCOUNT_TYPE_GLOBAL_REWARD}
+            />
+            <RewardItem
+              dataTestId="infra"
+              value={row.ACCOUNT_TYPE_FEES_INFRASTRUCTURE}
+            />
+            <RewardItem
+              dataTestId="taker"
+              value={row.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES}
+            />
+            <RewardItem
+              dataTestId="maker"
+              value={row.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES}
+            />
+            <RewardItem
+              dataTestId="liquidity"
+              value={row.ACCOUNT_TYPE_FEES_LIQUIDITY}
+            />
+            <RewardItem
+              dataTestId="market-maker"
+              value={row.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS}
+            />
+            <RewardItem
+              dataTestId="total"
+              value={row.totalAmount}
+              last={true}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,259 @@
+import { generateEpochTotalRewardsList } from './generate-epoch-total-rewards-list';
+import { AccountType } from '@vegaprotocol/types';
+
+describe('generateEpochAssetRewardsList', () => {
+  it('should return an empty array if data is undefined', () => {
+    const result = generateEpochTotalRewardsList(undefined);
+
+    expect(result).toEqual([]);
+  });
+
+  it('should return an empty array if empty data is provided', () => {
+    const epochData = {
+      assetsConnection: {
+        edges: [],
+      },
+      epochRewardSummaries: {
+        edges: [],
+      },
+      epoch: {
+        timestamps: {
+          expiry: null,
+        },
+      },
+    };
+
+    const result = generateEpochTotalRewardsList(epochData);
+
+    expect(result).toEqual([]);
+  });
+
+  it('should return an empty array if no epochRewardSummaries are provided', () => {
+    const epochData = {
+      assetsConnection: {
+        edges: [
+          {
+            node: {
+              id: '1',
+              name: 'Asset 1',
+            },
+          },
+          {
+            node: {
+              id: '2',
+              name: 'Asset 2',
+            },
+          },
+        ],
+      },
+      epochRewardSummaries: {
+        edges: [],
+      },
+      epoch: {
+        timestamps: {
+          expiry: null,
+        },
+      },
+    };
+
+    const result = generateEpochTotalRewardsList(epochData);
+
+    expect(result).toEqual([]);
+  });
+
+  it('should return an array of unnamed assets if no assets are provided (should not happen)', () => {
+    const epochData = {
+      assetsConnection: {
+        edges: [],
+      },
+      epochRewardSummaries: {
+        edges: [
+          {
+            node: {
+              epoch: 1,
+              assetId: '1',
+              rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+              amount: '123',
+            },
+          },
+          {
+            node: {
+              epoch: 2,
+              assetId: '1',
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+              amount: '5',
+            },
+          },
+        ],
+      },
+      epoch: {
+        timestamps: {
+          expiry: null,
+        },
+      },
+    };
+
+    const result = generateEpochTotalRewardsList(epochData);
+
+    expect(result).toEqual([
+      {
+        epoch: 1,
+        assetRewards: [
+          {
+            assetId: '1',
+            name: '',
+            rewards: [
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+                amount: '123',
+              },
+            ],
+            totalAmount: '123',
+          },
+        ],
+      },
+      {
+        epoch: 2,
+        assetRewards: [
+          {
+            assetId: '1',
+            name: '',
+            rewards: [
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+                amount: '5',
+              },
+            ],
+            totalAmount: '5',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('should return an array of aggregated epoch summaries', () => {
+    const epochData = {
+      assetsConnection: {
+        edges: [
+          {
+            node: {
+              id: '1',
+              name: 'Asset 1',
+            },
+          },
+          {
+            node: {
+              id: '2',
+              name: 'Asset 2',
+            },
+          },
+        ],
+      },
+      epochRewardSummaries: {
+        edges: [
+          {
+            node: {
+              epoch: 1,
+              assetId: '1',
+              rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+              amount: '123',
+            },
+          },
+          {
+            node: {
+              epoch: 1,
+              assetId: '1',
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+              amount: '100',
+            },
+          },
+          {
+            node: {
+              epoch: 1,
+              assetId: '2',
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+              amount: '17.9873',
+            },
+          },
+          {
+            node: {
+              epoch: 1,
+              assetId: '2',
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+              amount: '1',
+            },
+          },
+          {
+            node: {
+              epoch: 2,
+              assetId: '1',
+              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+              amount: '5',
+            },
+          },
+        ],
+      },
+      epoch: {
+        timestamps: {
+          expiry: null,
+        },
+      },
+    };
+
+    const result = generateEpochTotalRewardsList(epochData);
+
+    expect(result).toEqual([
+      {
+        epoch: 1,
+        assetRewards: [
+          {
+            assetId: '1',
+            name: 'Asset 1',
+            rewards: [
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+                amount: '123',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+                amount: '100',
+              },
+            ],
+            totalAmount: '223',
+          },
+          {
+            assetId: '2',
+            name: 'Asset 2',
+            rewards: [
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+                amount: '17.9873',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+                amount: '1',
+              },
+            ],
+            totalAmount: '18.9873',
+          },
+        ],
+      },
+      {
+        epoch: 2,
+        assetRewards: [
+          {
+            assetId: '1',
+            name: 'Asset 1',
+            rewards: [
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+                amount: '5',
+              },
+            ],
+            totalAmount: '5',
+          },
+        ],
+      },
+    ]);
+  });
+});
@@ -0,0 +1,103 @@
+import type {
+  EpochAssetsRewardsQuery,
+  EpochRewardSummaryFieldsFragment,
+} from '../home/__generated__/Rewards';
+import { removePaginationWrapper } from '@vegaprotocol/react-helpers';
+
+interface EpochSummaryWithNamedReward extends EpochRewardSummaryFieldsFragment {
+  name: string;
+}
+
+export interface AggregatedEpochRewardSummary {
+  assetId: EpochRewardSummaryFieldsFragment['assetId'];
+  name: EpochSummaryWithNamedReward['name'];
+  rewards: {
+    rewardType: EpochRewardSummaryFieldsFragment['rewardType'];
+    amount: EpochRewardSummaryFieldsFragment['amount'];
+  }[];
+  totalAmount: string;
+}
+
+export interface AggregatedEpochSummary {
+  epoch: EpochRewardSummaryFieldsFragment['epoch'];
+  assetRewards: AggregatedEpochRewardSummary[];
+}
+
+export const generateEpochTotalRewardsList = (
+  epochData: EpochAssetsRewardsQuery | undefined
+) => {
+  const epochRewardSummaries = removePaginationWrapper(
+    epochData?.epochRewardSummaries?.edges
+  );
+
+  const assets = removePaginationWrapper(epochData?.assetsConnection?.edges);
+
+  // Because the epochRewardSummaries don't have the asset name, we need to find it in the assets list
+  const epochSummariesWithNamedReward: EpochSummaryWithNamedReward[] =
+    epochRewardSummaries.map((epochReward) => ({
+      ...epochReward,
+      name:
+        assets.find((asset) => asset.id === epochReward.assetId)?.name || '',
+    }));
+
+  // Aggregating the epoch summaries by epoch number
+  const aggregatedEpochSummariesByEpochNumber =
+    epochSummariesWithNamedReward.reduce((acc, epochReward) => {
+      const epoch = epochReward.epoch;
+      const epochSummaryIndex = acc.findIndex(
+        (epochSummary) => epochSummary[0].epoch === epoch
+      );
+
+      if (epochSummaryIndex === -1) {
+        acc.push([epochReward]);
+      } else {
+        acc[epochSummaryIndex].push(epochReward);
+      }
+
+      return acc;
+    }, [] as EpochSummaryWithNamedReward[][]);
+
+  // Now aggregate the array of arrays of epoch summaries by asset rewards.
+  const aggregatedEpochSummaries: AggregatedEpochSummary[] =
+    aggregatedEpochSummariesByEpochNumber.map((epochSummaries) => {
+      const assetRewards = epochSummaries.reduce((acc, epochSummary) => {
+        const assetRewardIndex = acc.findIndex(
+          (assetReward) =>
+            assetReward.assetId === epochSummary.assetId &&
+            assetReward.name === epochSummary.name
+        );
+
+        if (assetRewardIndex === -1) {
+          acc.push({
+            assetId: epochSummary.assetId,
+            name: epochSummary.name,
+            rewards: [
+              {
+                rewardType: epochSummary.rewardType,
+                amount: epochSummary.amount,
+              },
+            ],
+            totalAmount: epochSummary.amount,
+          });
+        } else {
+          acc[assetRewardIndex].rewards.push({
+            rewardType: epochSummary.rewardType,
+            amount: epochSummary.amount,
+          });
+          acc[assetRewardIndex].totalAmount = (
+            Number(acc[assetRewardIndex].totalAmount) +
+            Number(epochSummary.amount)
+          ).toString();
+        }
+
+        return acc;
+      }, [] as AggregatedEpochRewardSummary[]);
+
+      return {
+        epoch: epochSummaries[0].epoch,
+        assetRewards,
+      };
+    });
+
+  return aggregatedEpochSummaries;
+};
@@ -47,3 +47,48 @@ query Rewards($partyId: ID!, $delegationsPagination: Pagination) {
    }
  }
 }
+
+fragment EpochRewardSummaryFields on EpochRewardSummary {
+  epoch
+  assetId
+  amount
+  rewardType
+}
+
+query EpochAssetsRewards($epochRewardSummariesPagination: Pagination) {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+  epochRewardSummaries(pagination: $epochRewardSummariesPagination) {
+    edges {
+      node {
+        ...EpochRewardSummaryFields
+      }
+    }
+  }
+  epoch {
+    timestamps {
+      expiry
+    }
+  }
+}
+
+fragment EpochFields on Epoch {
+  id
+  timestamps {
+    start
+    end
+    expiry
+  }
+}
+
+query Epoch {
+  epoch {
+    ...EpochFields
+  }
+}
@@ -15,6 +15,22 @@ export type RewardsQueryVariables = Types.Exact<{

 export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } } };

+export type EpochRewardSummaryFieldsFragment = { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType };
+
+export type EpochAssetsRewardsQueryVariables = Types.Exact<{
+  epochRewardSummariesPagination?: Types.InputMaybe<Types.Pagination>;
+}>;
+
+
+export type EpochAssetsRewardsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string } } | null> | null } | null, epochRewardSummaries?: { __typename?: 'EpochRewardSummaryConnection', edges?: Array<{ __typename?: 'EpochRewardSummaryEdge', node: { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType } } | null> | null } | null, epoch: { __typename?: 'Epoch', timestamps: { __typename?: 'EpochTimestamps', expiry?: any | null } } };
+
+export type EpochFieldsFragment = { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } };
+
+export type EpochQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type EpochQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } } };
+
 export const RewardFieldsFragmentDoc = gql`
    fragment RewardFields on Reward {
  rewardType
@@ -39,6 +55,24 @@ export const DelegationFieldsFragmentDoc = gql`
  epoch
 }
    `;
+export const EpochRewardSummaryFieldsFragmentDoc = gql`
+    fragment EpochRewardSummaryFields on EpochRewardSummary {
+  epoch
+  assetId
+  amount
+  rewardType
+}
+    `;
+export const EpochFieldsFragmentDoc = gql`
+    fragment EpochFields on Epoch {
+  id
+  timestamps {
+    start
+    end
+    expiry
+  }
+}
+    `;
 export const RewardsDocument = gql`
    query Rewards($partyId: ID!, $delegationsPagination: Pagination) {
  party(id: $partyId) {
@@ -97,4 +131,90 @@ export function useRewardsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Re
        }
 export type RewardsQueryHookResult = ReturnType<typeof useRewardsQuery>;
 export type RewardsLazyQueryHookResult = ReturnType<typeof useRewardsLazyQuery>;
-export type RewardsQueryResult = Apollo.QueryResult<RewardsQuery, RewardsQueryVariables>;
+export type RewardsQueryResult = Apollo.QueryResult<RewardsQuery, RewardsQueryVariables>;
+export const EpochAssetsRewardsDocument = gql`
+    query EpochAssetsRewards($epochRewardSummariesPagination: Pagination) {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+  epochRewardSummaries(pagination: $epochRewardSummariesPagination) {
+    edges {
+      node {
+        ...EpochRewardSummaryFields
+      }
+    }
+  }
+  epoch {
+    timestamps {
+      expiry
+    }
+  }
+}
+    ${EpochRewardSummaryFieldsFragmentDoc}`;
+
+/**
+ * __useEpochAssetsRewardsQuery__
+ *
+ * To run a query within a React component, call `useEpochAssetsRewardsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useEpochAssetsRewardsQuery` 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 } = useEpochAssetsRewardsQuery({
+ *   variables: {
+ *      epochRewardSummariesPagination: // value for 'epochRewardSummariesPagination'
+ *   },
+ * });
+ */
+export function useEpochAssetsRewardsQuery(baseOptions?: Apollo.QueryHookOptions<EpochAssetsRewardsQuery, EpochAssetsRewardsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<EpochAssetsRewardsQuery, EpochAssetsRewardsQueryVariables>(EpochAssetsRewardsDocument, options);
+      }
+export function useEpochAssetsRewardsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<EpochAssetsRewardsQuery, EpochAssetsRewardsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<EpochAssetsRewardsQuery, EpochAssetsRewardsQueryVariables>(EpochAssetsRewardsDocument, options);
+        }
+export type EpochAssetsRewardsQueryHookResult = ReturnType<typeof useEpochAssetsRewardsQuery>;
+export type EpochAssetsRewardsLazyQueryHookResult = ReturnType<typeof useEpochAssetsRewardsLazyQuery>;
+export type EpochAssetsRewardsQueryResult = Apollo.QueryResult<EpochAssetsRewardsQuery, EpochAssetsRewardsQueryVariables>;
+export const EpochDocument = gql`
+    query Epoch {
+  epoch {
+    ...EpochFields
+  }
+}
+    ${EpochFieldsFragmentDoc}`;
+
+/**
+ * __useEpochQuery__
+ *
+ * To run a query within a React component, call `useEpochQuery` and pass it any options that fit your needs.
+ * When your component renders, `useEpochQuery` 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 } = useEpochQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useEpochQuery(baseOptions?: Apollo.QueryHookOptions<EpochQuery, EpochQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<EpochQuery, EpochQueryVariables>(EpochDocument, options);
+      }
+export function useEpochLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<EpochQuery, EpochQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<EpochQuery, EpochQueryVariables>(EpochDocument, options);
+        }
+export type EpochQueryHookResult = ReturnType<typeof useEpochQuery>;
+export type EpochLazyQueryHookResult = ReturnType<typeof useEpochLazyQuery>;
+export type EpochQueryResult = Apollo.QueryResult<EpochQuery, EpochQueryVariables>;
@@ -1,47 +1,64 @@
-import { Button, Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
-import { formatDistance } from 'date-fns';
 // @ts-ignore No types available for duration-js
 import Duration from 'duration-js';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
+import { formatDistance } from 'date-fns';
 import { useTranslation } from 'react-i18next';
-import { ENV } from '../../../config';
-
-import { EpochCountdown } from '../../../components/epoch-countdown';
-import { Heading } from '../../../components/heading';
-import { SplashLoader } from '../../../components/splash-loader';
+import {
+  Button,
+  Callout,
+  Intent,
+  AsyncRenderer,
+  Toggle,
+  ExternalLink,
+} from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import {
+  useNetworkParams,
+  NetworkParams,
+  createDocsLinks,
+} from '@vegaprotocol/react-helpers';
 import {
  AppStateActionType,
  useAppState,
 } from '../../../contexts/app-state/app-state-context';
-import { RewardInfo } from './reward-info';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { useNetworkParams, NetworkParams } from '@vegaprotocol/react-helpers';
-import { useRewardsQuery } from './__generated__/Rewards';
+import { useEpochQuery } from './__generated__/Rewards';
+
+import { EpochCountdown } from '../../../components/epoch-countdown';
+import { Heading, SubHeading } from '../../../components/heading';
+import { RewardInfo } from '../epoch-individual-awards/reward-info';
+import { EpochRewards } from '../epoch-total-rewards/epoch-rewards';
+import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
+import { useEnvironment } from '@vegaprotocol/environment';
+
+type RewardsView = 'total' | 'individual';

 export const RewardsPage = () => {
  const { t } = useTranslation();
+  const { VEGA_DOCS_URL } = useEnvironment();
  const { pubKey, pubKeys } = useVegaWallet();
+  const [toggleRewardsView, setToggleRewardsView] =
+    useState<RewardsView>('total');
+
  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
    openVegaWalletDialog: store.openVegaWalletDialog,
  }));
  const { appDispatch } = useAppState();
-  const { delegationsPagination } = ENV;
-  const { data, loading, error } = useRewardsQuery({
-    variables: {
-      partyId: pubKey || '',
-      delegationsPagination: delegationsPagination
-        ? {
-            first: Number(delegationsPagination),
-          }
-        : undefined,
-    },
-    skip: !pubKey,
-  });
-  const { params } = useNetworkParams([
-    NetworkParams.reward_staking_delegation_payoutDelay,
-  ]);

-  const payoutDuration = React.useMemo(() => {
+  const {
+    params,
+    loading: paramsLoading,
+    error: paramsError,
+  } = useNetworkParams([NetworkParams.reward_staking_delegation_payoutDelay]);
+
+  const {
+    data: epochData,
+    loading: epochLoading,
+    error: epochError,
+    refetch,
+  } = useEpochQuery();
+  useRefreshAfterEpoch(epochData?.epoch.timestamps.expiry, refetch);
+
+  const payoutDuration = useMemo(() => {
    if (!params) {
      return 0;
    }
@@ -50,76 +67,112 @@ export const RewardsPage = () => {
    ).milliseconds();
  }, [params]);

-  if (error) {
-    return (
-      <section>
-        <p>{t('Something went wrong')}</p>
-        {error && <pre>{error.message}</pre>}
-      </section>
-    );
-  }
-
-  if (loading || !params) {
-    return (
-      <Splash>
-        <SplashLoader />
-      </Splash>
-    );
-  }
-
  return (
-    <section className="rewards">
-      <Heading title={t('pageTitleRewards')} />
-      <p>{t('rewardsPara1')}</p>
-      <p>{t('rewardsPara2')}</p>
-      {payoutDuration ? (
-        <div className="my-8">
-          <Callout
-            title={t('rewardsCallout', {
-              duration: formatDistance(new Date(0), payoutDuration),
-            })}
-            headingLevel={3}
-            intent={Intent.Warning}
-          >
-            <p className="mb-0">{t('rewardsPara3')}</p>
-          </Callout>
-        </div>
-      ) : null}
-      {!loading &&
-        data &&
-        !error &&
-        data.epoch.timestamps.start &&
-        data.epoch.timestamps.expiry && (
-          <section className="mb-8">
-            <EpochCountdown
-              // eslint-disable-next-line
-              id={data!.epoch.id}
-              startDate={new Date(data.epoch.timestamps.start)}
-              // eslint-disable-next-line
-              endDate={new Date(data.epoch.timestamps.expiry!)}
-            />
+    <AsyncRenderer
+      loading={paramsLoading || epochLoading}
+      error={paramsError || epochError}
+      data={epochData}
+      render={() => (
+        <section className="rewards">
+          <Heading title={t('pageTitleRewards')} />
+          <p className="mb-12">
+            {t('rewardsIntro')}{' '}
+            {VEGA_DOCS_URL && (
+              <ExternalLink
+                href={createDocsLinks(VEGA_DOCS_URL).REWARDS_GUIDE}
+                target="_blank"
+                data-testid="rewards-guide-link"
+                className="text-white"
+              >
+                {t('seeHowRewardsAreCalculated')}
+              </ExternalLink>
+            )}
+          </p>
+
+          {payoutDuration ? (
+            <div className="my-8">
+              <Callout
+                title={t('rewardsCallout', {
+                  duration: formatDistance(new Date(0), payoutDuration),
+                })}
+                headingLevel={3}
+                intent={Intent.Warning}
+              >
+                <p className="mb-0">{t('rewardsCalloutDetail')}</p>
+              </Callout>
+            </div>
+          ) : null}
+
+          {epochData &&
+            epochData.epoch.id &&
+            epochData.epoch.timestamps.start &&
+            epochData.epoch.timestamps.expiry && (
+              <section className="mb-16">
+                <EpochCountdown
+                  id={epochData.epoch.id}
+                  startDate={new Date(epochData.epoch.timestamps.start)}
+                  endDate={new Date(epochData.epoch.timestamps.expiry)}
+                />
+              </section>
+            )}
+
+          <section className="grid xl:grid-cols-2 gap-12 items-center mb-8">
+            <div>
+              <SubHeading title={t('rewardsAndFeesReceived')} />
+              <p>
+                {t(
+                  'ThisDoesNotIncludeFeesReceivedForMakersOrLiquidityProviders'
+                )}
+              </p>
+            </div>
+
+            <div className="max-w-[600px]">
+              <Toggle
+                name="epoch-reward-view-toggle"
+                toggles={[
+                  {
+                    label: t('totalDistributed'),
+                    value: 'total',
+                  },
+                  {
+                    label: t('earnedByMe'),
+                    value: 'individual',
+                  },
+                ]}
+                checkedValue={toggleRewardsView}
+                onChange={(e) =>
+                  setToggleRewardsView(e.target.value as RewardsView)
+                }
+              />
+            </div>
          </section>
-        )}
-      <section>
-        {pubKey && pubKeys?.length ? (
-          <RewardInfo currVegaKey={pubKey} data={data} />
-        ) : (
-          <div>
-            <Button
-              data-testid="connect-to-vega-wallet-btn"
-              onClick={() => {
-                appDispatch({
-                  type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
-                  isOpen: true,
-                });
-                openVegaWalletDialog();
-              }}
-            >
-              {t('connectVegaWallet')}
-            </Button>
-          </div>
-        )}
-      </section>
-    </section>
+
+          {toggleRewardsView === 'total' ? (
+            <EpochRewards />
+          ) : (
+            <section>
+              {pubKey && pubKeys?.length ? (
+                <RewardInfo />
+              ) : (
+                <div>
+                  <Button
+                    data-testid="connect-to-vega-wallet-btn"
+                    onClick={() => {
+                      appDispatch({
+                        type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
+                        isOpen: true,
+                      });
+                      openVegaWalletDialog();
+                    }}
+                  >
+                    {t('connectVegaWallet')}
+                  </Button>
+                </div>
+              )}
+            </section>
+          )}
+        </section>
+      )}
+    />
  );
 };
@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { SubHeading } from '../../components/heading';
+
+export const NoRewards = () => {
+  const { t } = useTranslation();
+
+  const classes = classNames(
+    'flex flex-col items-center justify-center h-[300px] w-full',
+    'border border-vega-dark-200'
+  );
+
+  return (
+    <div className={classes}>
+      <SubHeading title={t('noRewardsHaveBeenDistributedYet')} />
+      <p className="font-alpha text-xl">{t('checkBackSoon')}</p>
+    </div>
+  );
+};
@@ -3,7 +3,7 @@ import { EpochCountdown } from '../../../components/epoch-countdown';
 import { useNodesQuery } from './__generated___/Nodes';
 import { usePreviousEpochQuery } from '../__generated___/PreviousEpoch';
 import { ValidatorTables } from './validator-tables';
-import { useRefreshValidators } from '../../../hooks/use-refresh-validators';
+import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';

 export const EpochData = () => {
  // errorPolicy due to vegaprotocol/vega issue 5898
@@ -15,7 +15,7 @@ export const EpochData = () => {
    skip: !data?.epoch.id,
  });

-  useRefreshValidators(data?.epoch.timestamps.expiry, refetch);
+  useRefreshAfterEpoch(data?.epoch.timestamps.expiry, refetch);

  return (
    <AsyncRenderer loading={loading} error={error} data={data}>
@@ -2,7 +2,7 @@ import { ENV } from '../../../config';
 import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useTranslation } from 'react-i18next';
-import { useRefreshValidators } from '../../../hooks/use-refresh-validators';
+import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
 import { SplashLoader } from '../../../components/splash-loader';
 import { useStakingQuery } from './__generated__/Staking';
 import { usePreviousEpochQuery } from '../__generated___/PreviousEpoch';
@@ -45,7 +45,7 @@ export const NodeContainer = ({
    skip: !data?.epoch.id,
  });

-  useRefreshValidators(data?.epoch.timestamps.expiry, refetch);
+  useRefreshAfterEpoch(data?.epoch.timestamps.expiry, refetch);

  if (error) {
    return (
@@ -72,6 +72,9 @@ describe('market info is displayed', { tags: '@smoke' }, () => {

  it('settlement asset displayed', () => {
    cy.getByTestId(marketTitle).contains('Settlement asset').click();
+    cy.window().then((win) => {
+      cy.stub(win, 'prompt').returns('DISABLED WINDOW PROMPT');
+    });
    validateMarketDataRow(0, 'ID', 'asset-id');
    validateMarketDataRow(1, 'Type', 'ERC20');
    validateMarketDataRow(2, 'Name', 'Euro');
@@ -17,6 +17,7 @@ const itemValue = 'item-value';

 describe('Market proposal notification', { tags: '@smoke' }, () => {
  before(() => {
+    cy.setVegaWallet();
    cy.mockTradingPage(
      Schema.MarketState.STATE_ACTIVE,
      Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
@@ -239,7 +240,6 @@ describe('market states not accepting orders', { tags: '@smoke' }, function () {
        cy.visit('/#/markets/market-0');
      });
      it('must display that market is not accepting orders', function () {
-        cy.getByTestId('place-order').click();
        cy.getByTestId('dealticket-error-message-summary').should(
          'have.text',
          `This market is ${marketState
@@ -145,8 +145,9 @@ describe('markets table', { tags: '@smoke' }, () => {
        proposal: { terms: { enactmentDatetime: '2023-01-31 12:00:01' } },
      });
    });
-    cy.visit('/');
    cy.visit('#/markets/market-0');
+    cy.url().should('contain', 'market-0');
+    cy.getByTestId('dialog-close').click();
    cy.getByTestId('item-value').contains('Opening auction').realHover();
    cy.getByTestId('opening-auction-sub-status').should(
      'contain.text',
@@ -155,8 +156,7 @@ describe('markets table', { tags: '@smoke' }, () => {

    const now = new Date(Date.parse('2023-01-30 12:00:01')).getTime();
    cy.clock(now, ['Date']); // Set "now" to BEFORE reservation
-    cy.visit('/');
-    cy.visit('#/markets/market-0');
+    cy.reload();
    cy.getByTestId('item-value').contains('Opening auction').realHover();
    cy.getByTestId('opening-auction-sub-status').should(
      'contain.text',
@@ -1,3 +1,5 @@
+import { checkSorting } from '@vegaprotocol/cypress';
+
 beforeEach(() => {
  cy.mockTradingPage();
  cy.mockWeb3Provider();
@@ -36,6 +38,96 @@ describe('accounts', { tags: '@smoke' }, () => {
    cy.getByTestId('tab-accounts')
      .get(tradingAccountRowId)
      .find('[col-id="deposited"]')
-      .should('have.text', '1,000.00');
+      .should('have.text', '1,001.00');
+  });
+  describe('sorting by ag-grid columns should work well', () => {
+    it('sorting by asset', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = ['tBTC', 'AST0', 'tEURO', 'tDAI', 'tBTC'];
+      const marketsSortedAsc = ['AST0', 'tBTC', 'tBTC', 'tDAI', 'tEURO'];
+      const marketsSortedDesc = ['tEURO', 'tDAI', 'tBTC', 'tBTC', 'AST0'];
+      checkSorting(
+        'asset.symbol',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+
+    it('sorting by total', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = [
+        '1,000.00002',
+        '1,001.00',
+        '1,000.01',
+        '1,000.01',
+        '1,000.00001',
+      ];
+      const marketsSortedAsc = [
+        '1,000.00001',
+        '1,000.00002',
+        '1,000.01',
+        '1,000.01',
+        '1,001.00',
+      ];
+      const marketsSortedDesc = [
+        '1,001.00',
+        '1,000.01',
+        '1,000.01',
+        '1,000.00002',
+        '1,000.00001',
+      ];
+      checkSorting(
+        'deposited',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+
+    it('sorting by used', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = ['0.00', '1.00', '0.01', '0.01', '0.00'];
+      const marketsSortedAsc = ['0.00', '0.00', '0.01', '0.01', '1.00'];
+      const marketsSortedDesc = ['1.00', '0.01', '0.01', '0.00', '0.00'];
+      checkSorting(
+        'used',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+
+    it('sorting by available', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = [
+        '1,000.00002',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00001',
+      ];
+      const marketsSortedAsc = [
+        '1,000.00',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00001',
+        '1,000.00002',
+      ];
+      const marketsSortedDesc = [
+        '1,000.00002',
+        '1,000.00001',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00',
+      ];
+
+      checkSorting(
+        'available',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
  });
 });
@@ -13,7 +13,6 @@ const toggleShort = 'order-side-SIDE_SELL';
 const toggleLong = 'order-side-SIDE_BUY';
 const toggleLimit = 'order-type-TYPE_LIMIT';
 const toggleMarket = 'order-type-TYPE_MARKET';
-const errorMessage = 'dealticket-error-message';

 const TIFlist = Object.values(Schema.OrderTimeInForce).map((value) => {
  return {
@@ -363,11 +362,11 @@ describe('deal ticket validation', { tags: '@smoke' }, () => {
    cy.wait('@Markets');
  });

-  it('must not place an order if wallet is not connected', () => {
+  it('must show place order button and connect wallet if wallet is not connected', () => {
    cy.getByTestId('connect-vega-wallet'); // Not connected
    cy.getByTestId('order-connect-wallet').should('exist');
-    cy.getByTestId(placeOrderBtn).should('not.exist');
-    cy.getByTestId(errorMessage).should('not.exist');
+    cy.getByTestId(placeOrderBtn).should('exist');
+    cy.getByTestId('deal-ticket-connect-wallet').should('exist');
  });

  it('must be able to select order direction - long/short', function () {
@@ -664,13 +663,13 @@ describe('account validation', { tags: '@regression' }, () => {
    });

    it('should show an error if your balance is zero', () => {
-      cy.getByTestId('place-order').should('not.be.disabled');
-      cy.getByTestId('place-order').click();
      cy.getByTestId('place-order').should('be.disabled');
      //7002-SORD-003
      cy.getByTestId('dealticket-error-message-zero-balance').should(
        'have.text',
-        'Insufficient balance. Deposit ' + 'tDAI'
+        'You need ' +
+          'tDAI' +
+          ' in your wallet to trade in this market. See all your collateral.Make a deposit'
      );
      cy.getByTestId('deal-ticket-deposit-dialog-button').should('exist');
    });
@@ -708,7 +707,7 @@ describe('account validation', { tags: '@regression' }, () => {
      );
      cy.getByTestId('dealticket-warning-margin').should(
        'contain.text',
-        '9,999.99 tDAI currently required, 1,000.00 tDAI available'
+        '9,999.99 tDAI is currently required. You have only 1,000.00 tDAI available.Deposit tDAI'
      );
      cy.getByTestId('deal-ticket-deposit-dialog-button').click();
      cy.getByTestId('dialog-content')
@@ -1,3 +1,4 @@
+import { checkSorting } from '@vegaprotocol/cypress';
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { marketsDataQuery } from '@vegaprotocol/mock';

@@ -61,6 +62,54 @@ describe('positions', { tags: '@smoke' }, () => {
    });
  });

+  describe('sorting by ag-grid columns should work well', () => {
+    it('sorting by Market', () => {
+      cy.visit('/#/markets/market-0');
+      const marketsSortedDefault = [
+        'ACTIVE MARKET',
+        'Apple Monthly (30 Jun 2022)',
+      ];
+      const marketsSortedAsc = ['ACTIVE MARKET', 'Apple Monthly (30 Jun 2022)'];
+      const marketsSortedDesc = [
+        'Apple Monthly (30 Jun 2022)',
+        'ACTIVE MARKET',
+      ];
+      cy.getByTestId('Positions').click();
+      checkSorting(
+        'marketName',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+    it('sorting by notional', () => {
+      cy.visit('/#/markets/market-0');
+      const marketsSortedDefault = ['276,761.40348', '46,126.90058'];
+      const marketsSortedAsc = ['46,126.90058', '276,761.40348'];
+      const marketsSortedDesc = ['276,761.40348', '46,126.90058'];
+      cy.getByTestId('Positions').click();
+      checkSorting(
+        'notional',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+    it('sorting by unrealisedPNL', () => {
+      cy.visit('/#/markets/market-0');
+      const marketsSortedDefault = ['8.95', '-0.22519'];
+      const marketsSortedAsc = ['-0.22519', '8.95'];
+      const marketsSortedDesc = ['8.95', '-0.22519'];
+      cy.getByTestId('Positions').click();
+      checkSorting(
+        'unrealisedPNL',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+  });
+
  function validatePositionsDisplayed() {
    cy.getByTestId('tab-positions').should('be.visible');
    cy.getByTestId('tab-positions').within(() => {
@@ -66,7 +66,7 @@ describe('withdraw form validation', { tags: '@smoke' }, () => {
    // 1002-WITH-004
    selectAsset(ASSET_SEPOLIA_TBTC);
    cy.getByTestId(useMaximumAmount).click();
-    cy.get(amountField).should('have.value', '1000.00000');
+    cy.get(amountField).should('have.value', '1000.00001');
  });
 });

@@ -102,7 +102,10 @@ describe('withdraw actions', { tags: '@regression' }, () => {
      'contain.text',
      'Balance available'
    );
-    cy.getByTestId('BALANCE_AVAILABLE_value').should('have.text', '1,000.00');
+    cy.getByTestId('BALANCE_AVAILABLE_value').should(
+      'have.text',
+      '1,000.00001'
+    );
    cy.getByTestId('WITHDRAWAL_THRESHOLD_label').should(
      'contain.text',
      'Delayed withdrawal threshold'
@@ -98,8 +98,14 @@ export const MarketPage = () => {
    if (w > 960) {
      return <TradeGrid market={data} onSelect={onSelect} />;
    }
-    return <TradePanels market={data} onSelect={onSelect} />;
-  }, [w, data, onSelect]);
+    return (
+      <TradePanels
+        market={data}
+        onSelect={onSelect}
+        onClickCollateral={() => navigate('/portfolio')}
+      />
+    );
+  }, [w, data, onSelect, navigate]);
  if (!data && marketId) {
    return (
      <Splash>
@@ -111,7 +111,10 @@ const MainGrid = ({
            <TradeGridChild>
              <Tabs>
                <Tab id="ticket" name={t('Ticket')}>
-                  <TradingViews.Ticket marketId={marketId} />
+                  <TradingViews.Ticket
+                    marketId={marketId}
+                    onClickCollateral={() => navigate('/portfolio')}
+                  />
                </Tab>
                <Tab id="info" name={t('Info')}>
                  <TradingViews.Info
@@ -210,15 +213,21 @@ interface TradePanelsProps {
  market: Market | null;
  onSelect: (marketId: string) => void;
  onMarketClick?: (marketId: string) => void;
+  onClickCollateral: () => void;
 }

-export const TradePanels = ({ market, onSelect }: TradePanelsProps) => {
+export const TradePanels = ({
+  market,
+  onSelect,
+  onClickCollateral,
+}: TradePanelsProps) => {
  const [view, setView] = useState<TradingView>('Candles');
  const renderView = () => {
    const Component = memo<{
      marketId: string;
      onSelect: (marketId: string) => void;
      onMarketClick?: (marketId: string) => void;
+      onClickCollateral: () => void;
    }>(TradingViews[view]);

    if (!Component) {
@@ -227,7 +236,13 @@ export const TradePanels = ({ market, onSelect }: TradePanelsProps) => {

    if (!market) return <Splash>{NO_MARKET}</Splash>;

-    return <Component marketId={market?.id} onSelect={onSelect} />;
+    return (
+      <Component
+        marketId={market?.id}
+        onSelect={onSelect}
+        onClickCollateral={onClickCollateral}
+      />
+    );
  };

  return (
@@ -6,7 +6,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';

 export const DepositsContainer = () => {
  const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, loading, error } = useDataProvider({
+  const { data, loading, error, reload } = useDataProvider({
    dataProvider: depositsProvider,
    variables: { partyId: pubKey || '' },
    skip: !pubKey,
@@ -27,6 +27,7 @@ export const DepositsContainer = () => {
            error={error}
            noDataCondition={(data) => !(data && data.length)}
            noDataMessage={t('No deposits')}
+            reload={reload}
          />
        </div>
      </div>
@@ -10,7 +10,7 @@ import { VegaWalletContainer } from '../../components/vega-wallet-container';

 export const WithdrawalsContainer = () => {
  const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, loading, error } = useDataProvider({
+  const { data, loading, error, reload } = useDataProvider({
    dataProvider: withdrawalProvider,
    variables: { partyId: pubKey || '' },
    skip: !pubKey,
@@ -33,6 +33,7 @@ export const WithdrawalsContainer = () => {
              error={error}
              noDataCondition={(data) => !(data && data.length)}
              noDataMessage={t('No withdrawals')}
+              reload={reload}
            />
          </div>
        </div>
@@ -0,0 +1,30 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Button } from '@vegaprotocol/ui-toolkit';
+import { useGlobalStore } from '../../stores';
+
+export const AppFailure = ({
+  title,
+  error,
+}: {
+  title: string;
+  error?: string | null;
+}) => {
+  const { setNodeSwitcher } = useGlobalStore((store) => ({
+    nodeSwitcherOpen: store.nodeSwitcherDialog,
+    setNodeSwitcher: (open: boolean) =>
+      store.update({ nodeSwitcherDialog: open }),
+  }));
+  const nonIdealWrapperClasses =
+    'h-full min-h-screen flex items-center justify-center';
+  return (
+    <div className={nonIdealWrapperClasses}>
+      <div className="text-center">
+        <h1 className="text-xl mb-4">{title}</h1>
+        {error && <p className="text-sm mb-8">{error}</p>}
+        <Button onClick={() => setNodeSwitcher(true)}>
+          {t('Change node')}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,96 @@
+import type { InMemoryCacheConfig } from '@apollo/client';
+import {
+  NetworkLoader,
+  NodeGuard,
+  useEnvironment,
+} from '@vegaprotocol/environment';
+import { t } from '@vegaprotocol/react-helpers';
+import { MaintenancePage } from '@vegaprotocol/ui-toolkit';
+import { VegaWalletProvider } from '@vegaprotocol/wallet';
+import dynamic from 'next/dynamic';
+import type { ReactNode } from 'react';
+import { AppFailure } from './app-failure';
+import { Web3Provider } from './web3-provider';
+
+const DynamicLoader = dynamic(() => import('../preloader/preloader'), {
+  loading: () => <>Loading...</>,
+});
+
+export const AppLoader = ({ children }: { children: ReactNode }) => {
+  const { error, VEGA_URL, MAINTENANCE_PAGE } = useEnvironment((store) => ({
+    error: store.error,
+    VEGA_URL: store.VEGA_URL,
+    MAINTENANCE_PAGE: store.MAINTENANCE_PAGE,
+  }));
+
+  if (MAINTENANCE_PAGE) {
+    return <MaintenancePage />;
+  }
+
+  return (
+    <NetworkLoader
+      cache={cacheConfig}
+      skeleton={<DynamicLoader />}
+      failure={
+        <AppFailure title={t('Could not initialize app')} error={error} />
+      }
+    >
+      <NodeGuard
+        skeleton={<DynamicLoader />}
+        failure={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+      >
+        <Web3Provider>
+          <VegaWalletProvider>{children}</VegaWalletProvider>
+        </Web3Provider>
+      </NodeGuard>
+    </NetworkLoader>
+  );
+};
+
+const cacheConfig: InMemoryCacheConfig = {
+  typePolicies: {
+    Account: {
+      keyFields: false,
+      fields: {
+        balanceFormatted: {},
+      },
+    },
+    Instrument: {
+      keyFields: false,
+    },
+    TradableInstrument: {
+      keyFields: ['instrument'],
+    },
+    Product: {
+      keyFields: ['settlementAsset', ['id']],
+    },
+    MarketData: {
+      keyFields: ['market', ['id']],
+    },
+    Node: {
+      keyFields: false,
+    },
+    Withdrawal: {
+      fields: {
+        pendingOnForeignChain: {
+          read: (isPending = false) => isPending,
+        },
+      },
+    },
+    ERC20: {
+      keyFields: ['contractAddress'],
+    },
+    PositionUpdate: {
+      keyFields: false,
+    },
+    AccountUpdate: {
+      keyFields: false,
+    },
+    Party: {
+      keyFields: false,
+    },
+    Fees: {
+      keyFields: false,
+    },
+  },
+};
@@ -1,121 +1,3 @@
-import type { ReactNode } from 'react';
-import { useEffect } from 'react';
-import { NetworkLoader, useEnvironment } from '@vegaprotocol/environment';
-import type { InMemoryCacheConfig } from '@apollo/client';
-import {
-  useEthereumConfig,
-  createConnectors,
-  Web3Provider as Web3ProviderInternal,
-  useWeb3ConnectStore,
-} from '@vegaprotocol/web3';
-import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
-
-interface AppLoaderProps {
-  children: ReactNode;
-}
-
-/**
- * Component to handle any app initialization, startup queries and other things
- * that must happen for it can be used
- */
-export function AppLoader({ children }: AppLoaderProps) {
-  return (
-    <NetworkLoader skeleton={<Loader />} cache={cacheConfig}>
-      {children}
-    </NetworkLoader>
-  );
-}
-
-export const Web3Provider = ({ children }: { children: ReactNode }) => {
-  const { config, loading, error } = useEthereumConfig();
-  const { ETHEREUM_PROVIDER_URL, ETH_LOCAL_PROVIDER_URL, ETH_WALLET_MNEMONIC } =
-    useEnvironment();
-  const [connectors, initializeConnectors] = useWeb3ConnectStore((store) => [
-    store.connectors,
-    store.initialize,
-  ]);
-
-  useEffect(() => {
-    if (config?.chain_id) {
-      return initializeConnectors(
-        createConnectors(
-          ETHEREUM_PROVIDER_URL,
-          Number(config?.chain_id),
-          ETH_LOCAL_PROVIDER_URL,
-          ETH_WALLET_MNEMONIC
-        ),
-        Number(config.chain_id)
-      );
-    }
-  }, [
-    config?.chain_id,
-    ETHEREUM_PROVIDER_URL,
-    initializeConnectors,
-    ETH_LOCAL_PROVIDER_URL,
-    ETH_WALLET_MNEMONIC,
-  ]);
-
-  return (
-    <AsyncRenderer
-      loading={loading}
-      error={error}
-      data={connectors}
-      noDataCondition={(d) => {
-        if (!d) return true;
-        return d.length < 1;
-      }}
-    >
-      <Web3ProviderInternal connectors={connectors}>
-        <>{children}</>
-      </Web3ProviderInternal>
-    </AsyncRenderer>
-  );
-};
-
-const cacheConfig: InMemoryCacheConfig = {
-  typePolicies: {
-    Account: {
-      keyFields: false,
-      fields: {
-        balanceFormatted: {},
-      },
-    },
-    Instrument: {
-      keyFields: false,
-    },
-    TradableInstrument: {
-      keyFields: ['instrument'],
-    },
-    Product: {
-      keyFields: ['settlementAsset', ['id']],
-    },
-    MarketData: {
-      keyFields: ['market', ['id']],
-    },
-    Node: {
-      keyFields: false,
-    },
-    Withdrawal: {
-      fields: {
-        pendingOnForeignChain: {
-          read: (isPending = false) => isPending,
-        },
-      },
-    },
-    ERC20: {
-      keyFields: ['contractAddress'],
-    },
-    PositionUpdate: {
-      keyFields: false,
-    },
-    AccountUpdate: {
-      keyFields: false,
-    },
-    Party: {
-      keyFields: false,
-    },
-    Fees: {
-      keyFields: false,
-    },
-  },
-};
+export * from './app-failure';
+export * from './app-loader';
+export * from './web3-provider';
@@ -0,0 +1,58 @@
+import {
+  useEthereumConfig,
+  createConnectors,
+  Web3Provider as Web3ProviderInternal,
+  useWeb3ConnectStore,
+} from '@vegaprotocol/web3';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/environment';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+
+export const Web3Provider = ({ children }: { children: ReactNode }) => {
+  const { config, loading, error } = useEthereumConfig();
+  const { ETHEREUM_PROVIDER_URL, ETH_LOCAL_PROVIDER_URL, ETH_WALLET_MNEMONIC } =
+    useEnvironment();
+  const [connectors, initializeConnectors] = useWeb3ConnectStore((store) => [
+    store.connectors,
+    store.initialize,
+  ]);
+
+  useEffect(() => {
+    if (config?.chain_id) {
+      return initializeConnectors(
+        createConnectors(
+          ETHEREUM_PROVIDER_URL,
+          Number(config?.chain_id),
+          ETH_LOCAL_PROVIDER_URL,
+          ETH_WALLET_MNEMONIC
+        ),
+        Number(config.chain_id)
+      );
+    }
+  }, [
+    config?.chain_id,
+    ETHEREUM_PROVIDER_URL,
+    initializeConnectors,
+    ETH_LOCAL_PROVIDER_URL,
+    ETH_WALLET_MNEMONIC,
+  ]);
+
+  return (
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={connectors}
+      noDataCondition={(d) => {
+        if (!d) return true;
+        return d.length < 1;
+      }}
+      noDataMessage={t('Could not fetch Ethereum configuration')}
+    >
+      <Web3ProviderInternal connectors={connectors}>
+        <>{children}</>
+      </Web3ProviderInternal>
+    </AsyncRenderer>
+  );
+};
@@ -4,6 +4,7 @@ import {
  Icon,
 } from '@vegaprotocol/ui-toolkit';
 import { useGlobalStore } from '../../stores';
+import React from 'react';

 export const Banner = () => {
  const { update, shouldDisplayAnnouncementBanner } = useGlobalStore(
@@ -28,10 +29,8 @@ export const Banner = () => {
          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
        </button>
        <div>
-          <span className="pr-4">The Mainnet sims are live!</span>
-          <ExternalLink href="https://fairground.wtf/">
-            Come help stress test the network
-          </ExternalLink>
+          <span className="pr-4">Mainnet sim 2 coming in March!</span>
+          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
        </div>
      </div>
    </AnnouncementBanner>
@@ -1,57 +1,38 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { Footer, NodeHealth } from './footer';
-import { useEnvironment } from '@vegaprotocol/environment';
+import { NodeUrl, NodeHealth } from './footer';

-jest.mock('@vegaprotocol/environment');
-
-describe('Footer', () => {
+describe('NodeUrl', () => {
  it('can open node switcher by clicking the node url', () => {
    const mockOpenNodeSwitcher = jest.fn();
-    const node = 'n99.somenetwork.vega.xyz';
+    const node = 'https://api.n99.somenetwork.vega.xyz';

-    // @ts-ignore mock env hook
-    useEnvironment.mockImplementation(() => ({
-      VEGA_URL: `https://api.${node}/graphql`,
-      blockDifference: 0,
-      setNodeSwitcherOpen: mockOpenNodeSwitcher,
-    }));
+    render(<NodeUrl url={node} openNodeSwitcher={mockOpenNodeSwitcher} />);

-    render(<Footer />);
-
-    fireEvent.click(screen.getByText(node));
-    expect(mockOpenNodeSwitcher).toHaveBeenCalled();
-  });
-
-  it('can open node switcher by clicking health', () => {
-    const mockOpenNodeSwitcher = jest.fn();
-    const node = 'n99.somenetwork.vega.xyz';
-
-    // @ts-ignore mock env hook
-    useEnvironment.mockImplementation(() => ({
-      VEGA_URL: `https://api.${node}/graphql`,
-      blockDifference: 0,
-      setNodeSwitcherOpen: mockOpenNodeSwitcher,
-    }));
-
-    render(<Footer />);
-
-    fireEvent.click(screen.getByText('Operational'));
+    fireEvent.click(screen.getByText(/n99/));
    expect(mockOpenNodeSwitcher).toHaveBeenCalled();
  });
 });

 describe('NodeHealth', () => {
+  const mockOpenNodeSwitcher = jest.fn();
  const cases = [
-    { diff: 0, classname: 'bg-success', text: 'Operational' },
+    { diff: 0, classname: 'bg-vega-green-550', text: 'Operational' },
    { diff: 5, classname: 'bg-warning', text: '5 Blocks behind' },
-    { diff: -1, classname: 'bg-danger', text: 'Non operational' },
+    { diff: null, classname: 'bg-danger', text: 'Non operational' },
  ];
  it.each(cases)(
    'renders correct text and indicator color for $diff block difference',
    (elem) => {
-      render(<NodeHealth blockDiff={elem.diff} openNodeSwitcher={jest.fn()} />);
+      render(
+        <NodeHealth
+          blockDiff={elem.diff}
+          openNodeSwitcher={mockOpenNodeSwitcher}
+        />
+      );
      expect(screen.getByTestId('indicator')).toHaveClass(elem.classname);
      expect(screen.getByText(elem.text)).toBeInTheDocument();
+      fireEvent.click(screen.getByText(elem.text));
+      expect(mockOpenNodeSwitcher).toHaveBeenCalled();
    }
  );
 });
@@ -1,9 +1,15 @@
-import { useEnvironment } from '@vegaprotocol/environment';
+import { useEnvironment, useNodeHealth } from '@vegaprotocol/environment';
 import { t, useNavigatorOnline } from '@vegaprotocol/react-helpers';
 import { ButtonLink, Indicator, Intent } from '@vegaprotocol/ui-toolkit';
+import { useGlobalStore } from '../../stores';

 export const Footer = () => {
-  const { VEGA_URL, blockDifference, setNodeSwitcherOpen } = useEnvironment();
+  const { VEGA_URL } = useEnvironment();
+  const setNodeSwitcher = useGlobalStore(
+    (store) => (open: boolean) => store.update({ nodeSwitcherDialog: open })
+  );
+  const { blockDiff } = useNodeHealth();
+
  return (
    <footer className="px-4 py-1 text-xs border-t border-default">
      <div className="flex justify-between">
@@ -11,11 +17,14 @@ export const Footer = () => {
          {VEGA_URL && (
            <>
              <NodeHealth
-                blockDiff={blockDifference}
-                openNodeSwitcher={setNodeSwitcherOpen}
+                blockDiff={blockDiff}
+                openNodeSwitcher={() => setNodeSwitcher(true)}
              />
              {' | '}
-              <NodeUrl url={VEGA_URL} openNodeSwitcher={setNodeSwitcherOpen} />
+              <NodeUrl
+                url={VEGA_URL}
+                openNodeSwitcher={() => setNodeSwitcher(true)}
+              />
            </>
          )}
        </div>
@@ -29,7 +38,7 @@ interface NodeUrlProps {
  openNodeSwitcher: () => void;
 }

-const NodeUrl = ({ url, openNodeSwitcher }: NodeUrlProps) => {
+export const NodeUrl = ({ url, openNodeSwitcher }: NodeUrlProps) => {
  // get base url from api url, api sub domain
  const urlObj = new URL(url);
  const nodeUrl = urlObj.origin.replace(/^[^.]+\./g, '');
@@ -38,7 +47,7 @@ const NodeUrl = ({ url, openNodeSwitcher }: NodeUrlProps) => {

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

 // How many blocks behind the most advanced block that is
@@ -57,7 +66,7 @@ export const NodeHealth = ({
  if (!online) {
    text = t('Offline');
    intent = Intent.Danger;
-  } else if (blockDiff < 0) {
+  } else if (blockDiff === null) {
    // Block height query failed and null was returned
    text = t('Non operational');
    intent = Intent.Danger;
@@ -67,9 +76,9 @@ export const NodeHealth = ({
  }

  return (
-    <span>
+    <>
      <Indicator variant={intent} />
      <ButtonLink onClick={openNodeSwitcher}>{text}</ButtonLink>
-    </span>
+    </>
  );
 };
@@ -1,10 +1,12 @@
 import { BrowserRouter } from 'react-router-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Networks, EnvironmentProvider } from '@vegaprotocol/environment';
+import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { RiskNoticeDialog } from './risk-notice-dialog';
 import { WelcomeDialog } from './welcome-dialog';

+jest.mock('@vegaprotocol/environment');
+
 const mockEnvDefinitions = {
  VEGA_CONFIG_URL: 'https://config.url',
  VEGA_URL: 'https://test.url',
@@ -28,15 +30,16 @@ describe('Risk notice dialog', () => {
  `(
    '$assertion the risk notice on $network',
    async ({ assertion, network }) => {
+      // @ts-ignore ignore mock implementation
+      useEnvironment.mockImplementation(() => ({
+        ...mockEnvDefinitions,
+        VEGA_ENV: network,
+      }));
+
      render(
-        <EnvironmentProvider
-          definitions={{ ...mockEnvDefinitions, VEGA_ENV: network }}
-          config={{ hosts: [] }}
-        >
-          <MockedProvider>
-            <WelcomeDialog />
-          </MockedProvider>
-        </EnvironmentProvider>,
+        <MockedProvider>
+          <WelcomeDialog />
+        </MockedProvider>,
        { wrapper: BrowserRouter }
      );

@@ -51,14 +54,13 @@ describe('Risk notice dialog', () => {
  );

  it("doesn't display the risk notice when previously acknowledged", () => {
-    render(
-      <EnvironmentProvider
-        definitions={{ ...mockEnvDefinitions, VEGA_ENV: Networks.MAINNET }}
-        config={{ hosts: [] }}
-      >
-        <RiskNoticeDialog onClose={mockOnClose} />
-      </EnvironmentProvider>
-    );
+    // @ts-ignore ignore mock implementation
+    useEnvironment.mockImplementation(() => ({
+      ...mockEnvDefinitions,
+      VEGA_ENV: Networks.MAINNET,
+    }));
+
+    render(<RiskNoticeDialog onClose={mockOnClose} />);

    expect(screen.queryByText(introText)).toBeInTheDocument();

@@ -1,11 +1,9 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import type { AppProps } from 'next/app';
 import { Navbar } from '../components/navbar';
 import { t } from '@vegaprotocol/react-helpers';
 import {
  useEagerConnect as useVegaEagerConnect,
-  VegaWalletProvider,
  useVegaTransactionManager,
  useVegaTransactionUpdater,
  useVegaWallet,
@@ -17,17 +15,17 @@ import {
  useEthWithdrawApprovalsManager,
 } from '@vegaprotocol/web3';
 import {
-  EnvironmentProvider,
  envTriggerMapping,
  Networks,
+  NodeSwitcherDialog,
  useEnvironment,
+  useInitializeEnv,
 } from '@vegaprotocol/environment';
-import { AppLoader, Web3Provider } from '../components/app-loader';
 import './styles.css';
 import './gen-styles.scss';
-import { usePageTitleStore } from '../stores';
+import { useGlobalStore, usePageTitleStore } from '../stores';
 import { Footer } from '../components/footer';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
 import { HashRouter, useLocation, useSearchParams } from 'react-router-dom';
@@ -35,6 +33,7 @@ import { Connectors } from '../lib/vega-connectors';
 import { ViewingBanner } from '../components/viewing-banner';
 import { Banner } from '../components/banner';
 import classNames from 'classnames';
+import { AppLoader } from '../components/app-loader';

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

@@ -84,57 +83,47 @@ function AppBody({ Component }: AppProps) {
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Title />
-      <VegaWalletProvider>
-        <AppLoader>
-          <Web3Provider>
-            <div className={gridClasses}>
-              <Navbar
-                navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'}
-              />
-              <Banner />
-              <ViewingBanner />
-              <main data-testid={location.pathname}>
-                <Component />
-              </main>
-              <Footer />
-            </div>
-            <DialogsContainer />
-            <ToastsManager />
-            <TransactionsHandler />
-            <MaybeConnectEagerly />
-          </Web3Provider>
-        </AppLoader>
-      </VegaWalletProvider>
+      <div className={gridClasses}>
+        <Navbar
+          navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'}
+        />
+        <Banner />
+        <ViewingBanner />
+        <main data-testid={location.pathname}>
+          <Component />
+        </main>
+        <Footer />
+      </div>
+      <DialogsContainer />
+      <ToastsManager />
+      <TransactionsHandler />
+      <MaybeConnectEagerly />
    </div>
  );
 }

-const DynamicLoader = dynamic(
-  () => import('../components/preloader/preloader'),
-  {
-    loading: () => <>Loading...</>,
-  }
-);
-
 function VegaTradingApp(props: AppProps) {
-  const [mounted, setMounted] = useState(false);
+  const status = useEnvironment((store) => store.status);
+  const { nodeSwitcherOpen, setNodeSwitcher } = useGlobalStore((store) => ({
+    nodeSwitcherOpen: store.nodeSwitcherDialog,
+    setNodeSwitcher: (open: boolean) =>
+      store.update({ nodeSwitcherDialog: open }),
+  }));

-  // Hash router requires access to the document object. At compile time that doesn't exist
-  // so we need to ensure client side rendering only from this point onwards in
-  // the component tree
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  useInitializeEnv();

-  if (!mounted) {
-    return <DynamicLoader />;
+  // Prevent HashRouter from being server side rendered as it
+  // relies on presence of document object
+  if (status === 'default') {
+    return null;
  }

  return (
    <HashRouter>
-      <EnvironmentProvider>
+      <AppLoader>
        <AppBody {...props} />
-      </EnvironmentProvider>
+      </AppLoader>
+      <NodeSwitcherDialog open={nodeSwitcherOpen} setOpen={setNodeSwitcher} />
    </HashRouter>
  );
 }
@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import produce from 'immer';

 interface GlobalStore {
-  networkSwitcherDialog: boolean;
+  nodeSwitcherDialog: boolean;
  marketId: string | null;
  update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
  shouldDisplayWelcomeDialog: boolean;
@@ -16,7 +16,7 @@ interface PageTitleStore {
 }

 export const useGlobalStore = create<GlobalStore>((set) => ({
-  networkSwitcherDialog: false,
+  nodeSwitcherDialog: false,
  marketId: LocalStorage.getItem('marketId') || null,
  shouldDisplayWelcomeDialog: false,
  shouldDisplayAnnouncementBanner: true,
@@ -1,26 +1,37 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  getAllByRole,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import * as helpers from '@vegaprotocol/react-helpers';
-import type { AccountFields } from './accounts-data-provider';
 import { AccountManager } from './accounts-manager';

-let mockedUpdate: ({
-  delta,
-  data,
-}: {
-  delta?: never;
-  data: AccountFields[] | null;
-}) => boolean;
+const mockedUseDataProvider = jest.fn();
 jest.mock('@vegaprotocol/react-helpers', () => ({
  ...jest.requireActual('@vegaprotocol/react-helpers'),
-  useDataProvider: jest.fn((args) => {
-    mockedUpdate = args.update;
-    return {
-      data: [],
-    };
-  }),
+  useDataProvider: jest.fn(() => mockedUseDataProvider()),
 }));

 describe('AccountManager', () => {
+  beforeEach(() => {
+    mockedUseDataProvider
+      .mockImplementationOnce((args) => {
+        return {
+          data: [],
+        };
+      })
+      .mockImplementationOnce((args) => {
+        return {
+          data: [
+            { asset: { id: 'a1' }, party: { id: 't1' } },
+            { asset: { id: 'a2' }, party: { id: 't2' } },
+          ],
+        };
+      });
+  });
+
  it('change partyId should reload data provider', async () => {
    const { rerender } = render(
      <AccountManager
@@ -47,8 +58,22 @@ describe('AccountManager', () => {
  });

  it('update method should return proper result', async () => {
+    let rerenderer: (ui: React.ReactElement) => void;
    await act(() => {
-      render(
+      const { rerender } = render(
+        <AccountManager
+          partyId="partyOne"
+          onClickAsset={jest.fn}
+          isReadOnly={false}
+        />
+      );
+      rerenderer = rerender;
+    });
+    await waitFor(() => {
+      expect(screen.getByText('No accounts')).toBeInTheDocument();
+    });
+    await act(() => {
+      rerenderer(
        <AccountManager
          partyId="partyOne"
          onClickAsset={jest.fn}
@@ -56,20 +81,11 @@ describe('AccountManager', () => {
        />
      );
    });
-    await waitFor(() => {
-      expect(screen.getByText('No accounts')).toBeInTheDocument();
-    });
-    await act(() => {
-      expect(mockedUpdate({ data: [] })).toEqual(true);

-      expect(
-        mockedUpdate({ data: [{ party: { id: 't1' } }] as AccountFields[] })
-      ).toEqual(false);
-      expect(
-        mockedUpdate({ data: [{ party: { id: 't2' } }] as AccountFields[] })
-      ).toEqual(true);
-      expect(mockedUpdate({ data: [] })).toEqual(false);
-      expect(mockedUpdate({ data: [] })).toEqual(true);
+    const container = document.querySelector('.ag-center-cols-container');
+    await waitFor(() => {
+      expect(container).toBeInTheDocument();
    });
+    expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
  });
 });
@@ -1,14 +1,9 @@
-import {
-  t,
-  useDataProvider,
-  updateGridData,
-} from '@vegaprotocol/react-helpers';
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef, useMemo, useCallback, memo } from 'react';
+import { useRef, useMemo, memo } from 'react';
 import type { AccountFields } from './accounts-data-provider';
 import { aggregatedAccountsDataProvider } from './accounts-data-provider';
-import type { GetRowsParams } from './accounts-table';
 import { AccountTable } from './accounts-table';

 interface AccountManagerProps {
@@ -27,40 +22,25 @@ export const AccountManager = ({
  isReadOnly,
 }: AccountManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
-  const dataRef = useRef<AccountFields[] | null>(null);
  const variables = useMemo(() => ({ partyId }), [partyId]);
-  const update = useCallback(
-    ({ data }: { data: AccountFields[] | null }) => {
-      return updateGridData(dataRef, data, gridRef);
-    },
-    [gridRef]
-  );

-  const { data, loading, error } = useDataProvider<AccountFields[], never>({
+  const { data, loading, error, reload } = useDataProvider<
+    AccountFields[],
+    never
+  >({
    dataProvider: aggregatedAccountsDataProvider,
-    update,
    variables,
  });
-  const getRows = useCallback(
-    async ({ successCallback, startRow, endRow }: GetRowsParams) => {
-      const rowsThisBlock = dataRef.current
-        ? dataRef.current.slice(startRow, endRow)
-        : [];
-      const lastRow = dataRef.current ? dataRef.current.length : 0;
-      successCallback(rowsThisBlock, lastRow);
-    },
-    []
-  );
  return (
    <div className="relative h-full">
      <AccountTable
-        rowModelType="infinite"
        ref={gridRef}
-        datasource={{ getRows }}
+        rowData={error ? [] : data}
        onClickAsset={onClickAsset}
        onClickDeposit={onClickDeposit}
        onClickWithdraw={onClickWithdraw}
        isReadOnly={isReadOnly}
+        noRowsOverlayComponent={() => null}
      />
      <div className="pointer-events-none absolute inset-0">
        <AsyncRenderer
@@ -69,6 +49,7 @@ export const AccountManager = ({
          error={error}
          loading={loading}
          noDataMessage={t('No accounts')}
+          reload={reload}
        />
      </div>
    </div>
@@ -78,6 +78,19 @@ export const accountFields: AccountFieldsFragment[] = [
      id: 'asset-id-2',
    },
  },
+  {
+    __typename: 'AccountBalance',
+    type: Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+    balance: '100000',
+    market: {
+      __typename: 'Market',
+      id: 'market-3',
+    },
+    asset: {
+      __typename: 'Asset',
+      id: 'asset-0',
+    },
+  },
  {
    __typename: 'AccountBalance',
    type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
@@ -92,7 +105,7 @@ export const accountFields: AccountFieldsFragment[] = [
  {
    __typename: 'AccountBalance',
    type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
-    balance: '100000000',
+    balance: '100000001',
    market: null,
    asset: {
      __typename: 'Asset',
@@ -102,7 +115,7 @@ export const accountFields: AccountFieldsFragment[] = [
  {
    __typename: 'AccountBalance',
    type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
-    balance: '100000000',
+    balance: '100000002',
    market: null,
    asset: {
      __typename: 'Asset',
@@ -0,0 +1,52 @@
+import type { InMemoryCacheConfig } from '@apollo/client';
+
+export const DEFAULT_CACHE_CONFIG: InMemoryCacheConfig = {
+  typePolicies: {
+    Account: {
+      keyFields: false,
+      fields: {
+        balanceFormatted: {},
+      },
+    },
+    Instrument: {
+      keyFields: false,
+    },
+    TradableInstrument: {
+      keyFields: ['instrument'],
+    },
+    Product: {
+      keyFields: ['settlementAsset', ['id']],
+    },
+    MarketData: {
+      keyFields: ['market', ['id']],
+    },
+    Node: {
+      keyFields: false,
+    },
+    Withdrawal: {
+      fields: {
+        pendingOnForeignChain: {
+          read: (isPending = false) => isPending,
+        },
+      },
+    },
+    ERC20: {
+      keyFields: ['contractAddress'],
+    },
+    PositionUpdate: {
+      keyFields: false,
+    },
+    AccountUpdate: {
+      keyFields: false,
+    },
+    Party: {
+      keyFields: false,
+    },
+    Fees: {
+      keyFields: false,
+    },
+    statistics: {
+      keyFields: false,
+    },
+  },
+};
@@ -1 +1,3 @@
 export * from './lib/apollo-client';
+export * from './cache-config';
+export * from './lib/header-store';
@@ -14,6 +14,7 @@ import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
 import ApolloLinkTimeout from 'apollo-link-timeout';
 import { localLoggerFactory } from '@vegaprotocol/react-helpers';
+import { useHeaderStore } from './header-store';

 const isBrowser = typeof window !== 'undefined';

@@ -24,6 +25,7 @@ export type ClientOptions = {
  cacheConfig?: InMemoryCacheConfig;
  retry?: boolean;
  connectToDevTools?: boolean;
+  connectToHeaderStore?: boolean;
 };

 export function createClient({
@@ -31,6 +33,7 @@ export function createClient({
  cacheConfig,
  retry = true,
  connectToDevTools = true,
+  connectToHeaderStore = true,
 }: ClientOptions) {
  if (!url) {
    throw new Error('url must be passed into createClient!');
@@ -47,6 +50,28 @@ export function createClient({
  const timeoutLink = new ApolloLinkTimeout(10000);
  const enlargedTimeoutLink = new ApolloLinkTimeout(100000);

+  const headerLink = connectToHeaderStore
+    ? new ApolloLink((operation, forward) => {
+        return forward(operation).map((response) => {
+          const context = operation.getContext();
+          const r = context['response'];
+          const blockHeight = r?.headers.get('x-block-height');
+          const timestamp = r?.headers.get('x-block-timestamp');
+          if (blockHeight && timestamp) {
+            const state = useHeaderStore.getState();
+            useHeaderStore.setState({
+              ...state,
+              [r.url]: {
+                blockHeight: Number(blockHeight),
+                timestamp: new Date(Number(timestamp.slice(0, -6))),
+              },
+            });
+          }
+          return response;
+        });
+      })
+    : noOpLink;
+
  const retryLink = retry
    ? new RetryLink({
        delay: {
@@ -104,7 +129,13 @@ export function createClient({
  );

  return new ApolloClient({
-    link: from([errorLink, composedTimeoutLink, retryLink, splitLink]),
+    link: from([
+      errorLink,
+      composedTimeoutLink,
+      retryLink,
+      headerLink,
+      splitLink,
+    ]),
    cache: new InMemoryCache(cacheConfig),
    connectToDevTools,
  });
@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+
+export interface HeaderEntry {
+  blockHeight: number;
+  timestamp: Date;
+}
+
+type HeaderStore = {
+  [url: string]: HeaderEntry | undefined;
+};
+
+export const useHeaderStore = create<HeaderStore>(() => ({}));
@@ -17,6 +17,7 @@ import {
 import { addMockTransactionResponse } from './lib/commands/mock-transaction-response';
 import { addCreateMarket } from './lib/commands/create-market';
 import { addConnectPublicKey } from './lib/commands/add-connect-public-key';
+import { addVegaWalletSubmitProposal } from './lib/commands/vega-wallet-submit-proposal';

 addGetTestIdcommand();
 addSlackCommand();
@@ -35,6 +36,7 @@ addSetVegaWallet();
 addMockTransactionResponse();
 addCreateMarket();
 addConnectPublicKey();
+addVegaWalletSubmitProposal();

 export { mockConnectWallet } from './lib/commands/vega-wallet-connect';
 export type { onMessage } from './lib/mock-ws';
@@ -0,0 +1,25 @@
+import { createWalletClient, sendVegaTx } from '../capsule/wallet-client';
+import type { ProposalSubmissionBody } from '@vegaprotocol/wallet';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      VegaWalletSubmitProposal(proposalTx: ProposalSubmissionBody): void;
+    }
+  }
+}
+
+export const addVegaWalletSubmitProposal = () => {
+  Cypress.Commands.add('VegaWalletSubmitProposal', (proposalTx) => {
+    const vegaWalletUrl = Cypress.env('VEGA_WALLET_URL');
+    const token = Cypress.env('VEGA_WALLET_API_TOKEN');
+    const vegaPubKey = Cypress.env('VEGA_PUBLIC_KEY');
+
+    createWalletClient(vegaWalletUrl, token);
+
+    cy.highlight('Submitting proposal');
+    sendVegaTx(vegaPubKey, proposalTx);
+  });
+};
@@ -36,3 +36,29 @@ export async function promiseWithTimeout(

  return await Promise.race([promise, rejectAfterTimeout(time)]);
 }
+
+export const checkSorting = (
+  column: string,
+  orderTabDefault: string[],
+  orderTabAsc: string[],
+  orderTabDesc: string[]
+) => {
+  checkSortChange(orderTabDefault, column);
+  cy.get('.ag-header-container').within(() => {
+    cy.get(`[col-id="${column}"]`).click();
+  });
+  checkSortChange(orderTabAsc, column);
+  cy.get('.ag-header-container').within(() => {
+    cy.get(`[col-id="${column}"]`).click();
+  });
+  checkSortChange(orderTabDesc, column);
+};
+const checkSortChange = (tabsArr: string[], column: string) => {
+  cy.get('.ag-center-cols-container').within(() => {
+    tabsArr.forEach((entry, i) => {
+      cy.get(`[row-index="${i}"]`).within(() => {
+        cy.get(`[col-id="${column}"]`).should('have.text', tabsArr[i]);
+      });
+    });
+  });
+};
@@ -1,5 +1,5 @@
 import { formatNumber, t } from '@vegaprotocol/react-helpers';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import { Notification, Intent } from '@vegaprotocol/ui-toolkit';
 import { DepositDialog, useDepositDialog } from '@vegaprotocol/deposits';

 interface Props {
@@ -16,27 +16,23 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => {
  const openDepositDialog = useDepositDialog((state) => state.open);
  return (
    <>
-      <div
-        className="text-xs text-warning mb-4"
-        data-testid="dealticket-warning-margin"
-      >
-        <p className="mb-2">
-          {t('You may not have enough margin available to open this position.')}{' '}
-          <ButtonLink
-            data-testid="deal-ticket-deposit-dialog-button"
-            onClick={() => openDepositDialog(asset.id)}
-          >
-            {t(`Deposit ${asset.symbol}`)}
-          </ButtonLink>
-        </p>
-        <p>
-          {`${formatNumber(margin, asset.decimals)} ${asset.symbol} ${t(
-            'currently required'
-          )}, ${formatNumber(balance, asset.decimals)} ${asset.symbol} ${t(
-            'available'
-          )}`}
-        </p>
-      </div>
+      <Notification
+        intent={Intent.Warning}
+        testId="dealticket-warning-margin"
+        message={`You may not have enough margin available to open this position. ${formatNumber(
+          margin,
+          asset.decimals
+        )} ${asset.symbol} ${t(
+          'is currently required. You have only'
+        )} ${formatNumber(balance, asset.decimals)} ${asset.symbol} ${t(
+          'available.'
+        )}`}
+        buttonProps={{
+          text: t(`Deposit ${asset.symbol}`),
+          action: () => openDepositDialog(asset.id),
+          dataTestId: 'deal-ticket-deposit-dialog-button',
+        }}
+      />
      <DepositDialog />
    </>
  );
@@ -1,26 +1,36 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { ButtonLink, InputError } from '@vegaprotocol/ui-toolkit';
+import { Intent, Notification, Link } from '@vegaprotocol/ui-toolkit';
 import { useDepositDialog } from '@vegaprotocol/deposits';
+import { t } from '@vegaprotocol/react-helpers';
+
 interface ZeroBalanceErrorProps {
  asset: {
    id: string;
    symbol: string;
  };
+  onClickCollateral: () => void;
 }

-export const ZeroBalanceError = ({ asset }: ZeroBalanceErrorProps) => {
+export const ZeroBalanceError = ({
+  asset,
+  onClickCollateral,
+}: ZeroBalanceErrorProps) => {
  const openDepositDialog = useDepositDialog((state) => state.open);
  return (
-    <InputError data-testid="dealticket-error-message-zero-balance">
-      <p className="mb-2">
-        {t('Insufficient balance. ')}
-        <ButtonLink
-          data-testid="deal-ticket-deposit-dialog-button"
-          onClick={() => openDepositDialog(asset.id)}
-        >
-          {t(`Deposit ${asset.symbol}`)}
-        </ButtonLink>
-      </p>
-    </InputError>
+    <Notification
+      intent={Intent.Warning}
+      testId="dealticket-error-message-zero-balance"
+      message={
+        <>
+          You need {asset.symbol} in your wallet to trade in this market. See
+          all your <Link onClick={onClickCollateral}>collateral</Link>.
+        </>
+      }
+      buttonProps={{
+        text: t(`Make a deposit`),
+        action: () => openDepositDialog(asset.id),
+        dataTestId: 'deal-ticket-deposit-dialog-button',
+        size: 'md',
+      }}
+    />
  );
 };
@@ -1,7 +1,7 @@
 import { t } from '@vegaprotocol/react-helpers';
 import type { ButtonVariant } from '@vegaprotocol/ui-toolkit';
 import { Button } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import { useVegaWallet } from '@vegaprotocol/wallet';

 interface Props {
  disabled: boolean;
@@ -9,32 +9,19 @@ interface Props {
 }

 export const DealTicketButton = ({ disabled, variant }: Props) => {
-  const { pubKey } = useVegaWallet();
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-  return pubKey ? (
+  const { pubKey, isReadOnly } = useVegaWallet();
+  const isDisabled = !pubKey || isReadOnly || disabled;
+  return (
    <div className="mb-4">
      <Button
        variant={variant}
        fill
        type="submit"
-        disabled={disabled}
+        disabled={isDisabled}
        data-testid="place-order"
      >
        {t('Place order')}
      </Button>
    </div>
-  ) : (
-    <Button
-      variant="default"
-      fill
-      type="button"
-      data-testid="order-connect-wallet"
-      onClick={openVegaWalletDialog}
-      className="mb-6"
-    >
-      {t('Connect wallet')}
-    </Button>
  );
 };
@@ -8,9 +8,13 @@ import { DealTicket } from './deal-ticket';

 export interface DealTicketContainerProps {
  marketId: string;
+  onClickCollateral?: () => void;
 }

-export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
+export const DealTicketContainer = ({
+  marketId,
+  onClickCollateral,
+}: DealTicketContainerProps) => {
  const {
    data: market,
    error: marketError,
@@ -21,6 +25,7 @@ export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
    data: marketData,
    error: marketDataError,
    loading: marketDataLoading,
+    reload,
  } = useThrottledDataProvider(
    {
      dataProvider: marketDataProvider,
@@ -35,12 +40,14 @@ export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
      data={market && marketData}
      loading={marketLoading || marketDataLoading}
      error={marketError || marketDataError}
+      reload={reload}
    >
      {market && marketData ? (
        <DealTicket
          market={market}
          marketData={marketData}
          submit={(orderSubmission) => create({ orderSubmission })}
+          onClickCollateral={onClickCollateral || (() => null)}
        />
      ) : (
        <Splash>
@@ -1,4 +1,4 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import { FormGroup, Input, NotificationError } from '@vegaprotocol/ui-toolkit';
 import { t, toDecimal, validateAmount } from '@vegaprotocol/react-helpers';
 import type { DealTicketAmountProps } from './deal-ticket-amount';

@@ -20,17 +20,17 @@ export const DealTicketLimitAmount = ({
  const renderError = () => {
    if (sizeError) {
      return (
-        <InputError data-testid="dealticket-error-message-size-limit">
+        <NotificationError testId="dealticket-error-message-size-limit">
          {sizeError}
-        </InputError>
+        </NotificationError>
      );
    }

    if (priceError) {
      return (
-        <InputError data-testid="dealticket-error-message-price-limit">
+        <NotificationError testId="dealticket-error-message-price-limit">
          {priceError}
-        </InputError>
+        </NotificationError>
      );
    }

@@ -4,7 +4,7 @@ import {
  toDecimal,
  validateAmount,
 } from '@vegaprotocol/react-helpers';
-import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { Input, NotificationError, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { isMarketInAuction } from '../../utils';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
 import { getMarketPrice } from '../../utils/get-price';
@@ -77,12 +77,12 @@ export const DealTicketMarketAmount = ({
        </div>
      </div>
      {sizeError && (
-        <InputError
+        <NotificationError
          intent="danger"
-          data-testid="dealticket-error-message-size-market"
+          testId="dealticket-error-message-size-market"
        >
          {sizeError}
-        </InputError>
+        </NotificationError>
      )}
    </div>
  );
@@ -1,12 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import {
-  fireEvent,
-  render,
-  screen,
-  act,
-  waitFor,
-} from '@testing-library/react';
+import { fireEvent, render, screen, act } from '@testing-library/react';
 import { generateMarket, generateMarketData } from '../../test-helpers';
 import { DealTicket } from './deal-ticket';
 import * as Schema from '@vegaprotocol/types';
@@ -15,14 +9,6 @@ import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import type { ChainIdQuery } from '@vegaprotocol/react-helpers';
 import { ChainIdDocument, addDecimal } from '@vegaprotocol/react-helpers';
-import * as utils from '../../utils';
-
-let mockHasNoBalance = false;
-jest.mock('../../hooks/use-has-no-balance', () => {
-  return {
-    useHasNoBalance: () => mockHasNoBalance,
-  };
-});

 const market = generateMarket();
 const marketData = generateMarketData();
@@ -148,50 +134,6 @@ describe('DealTicket', () => {
    );
  });

-  it('validation should be reset', async () => {
-    mockHasNoBalance = true;
-    jest.spyOn(utils, 'validateMarketState').mockReturnValue('Wrong state');
-    jest
-      .spyOn(utils, 'validateMarketTradingMode')
-      .mockReturnValue('Wrong trading mode');
-    const { rerender } = render(generateJsx());
-
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('place-order'));
-    });
-    await waitFor(async () => {
-      expect(
-        await screen.getByTestId('dealticket-error-message-summary')
-      ).toHaveTextContent('Wrong state');
-    });
-
-    jest.spyOn(utils, 'validateMarketState').mockReturnValue(true);
-    await act(async () => {
-      rerender(generateJsx());
-    });
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('place-order'));
-    });
-    await waitFor(async () => {
-      expect(
-        await screen.getByTestId('dealticket-error-message-zero-balance')
-      ).toHaveTextContent('Insufficient balance.');
-    });
-
-    mockHasNoBalance = false;
-    await act(async () => {
-      rerender(generateJsx());
-    });
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('place-order'));
-    });
-    await waitFor(async () => {
-      expect(
-        await screen.getByTestId('dealticket-error-message-summary')
-      ).toHaveTextContent('Wrong trading mode');
-    });
-  });
-
  it('can edit deal ticket', async () => {
    render(generateJsx());

@@ -10,9 +10,15 @@ import { SideSelector } from './side-selector';
 import { TimeInForceSelector } from './time-in-force-selector';
 import { TypeSelector } from './type-selector';
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
+import { useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { normalizeOrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { InputError } from '@vegaprotocol/ui-toolkit';
+import {
+  ExternalLink,
+  NotificationError,
+  Intent,
+  Notification,
+} from '@vegaprotocol/ui-toolkit';
 import { useOrderMarginValidation } from '../../hooks/use-order-margin-validation';
 import { MarginWarning } from '../deal-ticket-validation/margin-warning';
 import {
@@ -37,6 +43,7 @@ export interface DealTicketProps {
  market: Market;
  marketData: MarketData;
  submit: (order: OrderSubmissionBody['orderSubmission']) => void;
+  onClickCollateral?: () => void;
 }

 export type DealTicketFormFields = OrderSubmissionBody['orderSubmission'] & {
@@ -45,7 +52,12 @@ export type DealTicketFormFields = OrderSubmissionBody['orderSubmission'] & {
  summary: string;
 };

-export const DealTicket = ({ market, marketData, submit }: DealTicketProps) => {
+export const DealTicket = ({
+  market,
+  marketData,
+  submit,
+  onClickCollateral,
+}: DealTicketProps) => {
  const { pubKey, isReadOnly } = useVegaWallet();
  const { getPersistedOrder, setPersistedOrder } = usePersistedOrderStore(
    (store) => ({
@@ -87,6 +99,44 @@ export const DealTicket = ({ market, marketData, submit }: DealTicketProps) => {
  const marketTradingModeError = validateMarketTradingMode(
    marketData.marketTradingMode
  );
+
+  const checkForErrors = useCallback(() => {
+    if (!pubKey) {
+      setError('summary', { message: t('No public key selected') });
+      return;
+    }
+
+    if (marketStateError !== true) {
+      setError('summary', {
+        message: marketStateError,
+        type: SummaryValidationType.MarketState,
+      });
+      return;
+    }
+
+    if (hasNoBalance) {
+      setError('summary', {
+        message: SummaryValidationType.NoCollateral,
+        type: SummaryValidationType.NoCollateral,
+      });
+      return;
+    }
+
+    if (marketTradingModeError !== true) {
+      setError('summary', {
+        message: marketTradingModeError,
+        type: SummaryValidationType.TradingMode,
+      });
+      return;
+    }
+  }, [
+    hasNoBalance,
+    marketStateError,
+    marketTradingModeError,
+    pubKey,
+    setError,
+  ]);
+
  useEffect(() => {
    if (
      (!hasNoBalance &&
@@ -98,6 +148,7 @@ export const DealTicket = ({ market, marketData, submit }: DealTicketProps) => {
    ) {
      clearErrors('summary');
    }
+    checkForErrors();
  }, [
    hasNoBalance,
    marketStateError,
@@ -105,39 +156,12 @@ export const DealTicket = ({ market, marketData, submit }: DealTicketProps) => {
    clearErrors,
    errors.summary?.message,
    errors.summary?.type,
+    checkForErrors,
  ]);

  const onSubmit = useCallback(
    (order: OrderSubmissionBody['orderSubmission']) => {
-      if (!pubKey) {
-        setError('summary', { message: t('No public key selected') });
-        return;
-      }
-
-      if (marketStateError !== true) {
-        setError('summary', {
-          message: marketStateError,
-          type: SummaryValidationType.MarketState,
-        });
-        return;
-      }
-
-      if (hasNoBalance) {
-        setError('summary', {
-          message: SummaryValidationType.NoCollateral,
-          type: SummaryValidationType.NoCollateral,
-        });
-        return;
-      }
-
-      if (marketTradingModeError !== true) {
-        setError('summary', {
-          message: marketTradingModeError,
-          type: SummaryValidationType.TradingMode,
-        });
-        return;
-      }
-
+      checkForErrors();
      submit(
        normalizeOrderSubmission(
          order,
@@ -146,16 +170,7 @@ export const DealTicket = ({ market, marketData, submit }: DealTicketProps) => {
        )
      );
    },
-    [
-      submit,
-      pubKey,
-      hasNoBalance,
-      market.positionDecimalPlaces,
-      market.decimalPlaces,
-      marketStateError,
-      marketTradingModeError,
-      setError,
-    ]
+    [checkForErrors, submit, market.decimalPlaces, market.positionDecimalPlaces]
  );

  return (
@@ -233,16 +248,18 @@ export const DealTicket = ({ market, marketData, submit }: DealTicketProps) => {
            )}
          />
        )}
-      <DealTicketButton
-        disabled={Object.keys(errors).length >= 1 || isReadOnly}
-        variant={order.side === Schema.Side.SIDE_BUY ? 'ternary' : 'secondary'}
-      />
      <SummaryMessage
        errorMessage={errors.summary?.message}
        market={market}
        marketData={marketData}
        order={order}
        isReadOnly={isReadOnly}
+        pubKey={pubKey}
+        onClickCollateral={onClickCollateral || (() => null)}
+      />
+      <DealTicketButton
+        disabled={Object.keys(errors).length >= 1 || isReadOnly}
+        variant={order.side === Schema.Side.SIDE_BUY ? 'ternary' : 'secondary'}
      />
      <DealTicketFeeDetails
        order={order}
@@ -263,6 +280,8 @@ interface SummaryMessageProps {
  marketData: MarketData;
  order: OrderSubmissionBody['orderSubmission'];
  isReadOnly: boolean;
+  pubKey: string | null;
+  onClickCollateral: () => void;
 }
 const SummaryMessage = memo(
  ({
@@ -271,30 +290,60 @@ const SummaryMessage = memo(
    marketData,
    order,
    isReadOnly,
+    pubKey,
+    onClickCollateral,
  }: SummaryMessageProps) => {
    // Specific error UI for if balance is so we can
    // render a deposit dialog
    const asset = market.tradableInstrument.instrument.product.settlementAsset;
+    const assetSymbol = asset.symbol;
    const { balanceError, balance, margin } = useOrderMarginValidation({
      market,
      marketData,
      order,
    });
+    const openVegaWalletDialog = useVegaWalletDialogStore(
+      (store) => store.openVegaWalletDialog
+    );
    if (isReadOnly) {
      return (
        <div className="mb-4">
-          <InputError data-testid="dealticket-error-message-summary">
+          <NotificationError testId="dealticket-error-message-summary">
            {
              'You need to connect your own wallet to start trading on this market'
            }
-          </InputError>
+          </NotificationError>
        </div>
      );
    }
+    if (!pubKey) {
+      return (
+        <Notification
+          testId={'deal-ticket-connect-wallet'}
+          intent={Intent.Warning}
+          message={
+            <p className="text-sm pb-2">
+              You need a{' '}
+              <ExternalLink href="https://vega.xyz/wallet">
+                Vega wallet
+              </ExternalLink>{' '}
+              with {assetSymbol} to start trading in this market.
+            </p>
+          }
+          buttonProps={{
+            text: t('Connect wallet'),
+            action: openVegaWalletDialog,
+            dataTestId: 'order-connect-wallet',
+            size: 'md',
+          }}
+        />
+      );
+    }
    if (errorMessage === SummaryValidationType.NoCollateral) {
      return (
        <ZeroBalanceError
          asset={market.tradableInstrument.instrument.product.settlementAsset}
+          onClickCollateral={onClickCollateral}
        />
      );
    }
@@ -304,9 +353,9 @@ const SummaryMessage = memo(
    if (errorMessage) {
      return (
        <div className="mb-4">
-          <InputError data-testid="dealticket-error-message-summary">
+          <NotificationError testId="dealticket-error-message-summary">
            {errorMessage}
-          </InputError>
+          </NotificationError>
        </div>
      );
    }
@@ -326,14 +375,13 @@ const SummaryMessage = memo(
      ].includes(marketData.marketTradingMode)
    ) {
      return (
-        <div
-          className="text-sm text-warning mb-4"
-          data-testid="dealticket-warning-auction"
-        >
-          <p>
-            {t('Any orders placed now will not trade until the auction ends')}
-          </p>
-        </div>
+        <Notification
+          intent={Intent.Warning}
+          testId={'dealticket-warning-auction'}
+          message={t(
+            'Any orders placed now will not trade until the auction ends'
+          )}
+        />
      );
    }

@@ -1,4 +1,4 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import { FormGroup, Input, NotificationError } from '@vegaprotocol/ui-toolkit';
 import { formatForInput } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/react-helpers';
 import type { UseFormRegister } from 'react-hook-form';
@@ -35,9 +35,9 @@ export const ExpirySelector = ({
        })}
      />
      {errorMessage && (
-        <InputError data-testid="dealticket-error-message-expiry">
+        <NotificationError testId="dealticket-error-message-expiry">
          {errorMessage}
-        </InputError>
+        </NotificationError>
      )}
    </FormGroup>
  );
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import {
  FormGroup,
-  InputError,
+  NotificationError,
  Select,
  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
@@ -139,9 +139,9 @@ export const TimeInForceSelector = ({
        ))}
      </Select>
      {errorMessage && (
-        <InputError data-testid="dealticket-error-message-tif">
+        <NotificationError testId="dealticket-error-message-tif">
          {renderError(errorMessage)}
-        </InputError>
+        </NotificationError>
      )}
    </FormGroup>
  );
@@ -1,4 +1,8 @@
-import { FormGroup, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  FormGroup,
+  NotificationError,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
 import { DataGrid, t } from '@vegaprotocol/react-helpers';
 import * as Schema from '@vegaprotocol/types';
 import { Toggle } from '@vegaprotocol/ui-toolkit';
@@ -78,9 +82,9 @@ export const TypeSelector = ({
        onChange={(e) => onSelect(e.target.value as Schema.OrderType)}
      />
      {errorMessage && (
-        <InputError data-testid="dealticket-error-message-type">
+        <NotificationError testId="dealticket-error-message-type">
          {renderError(errorMessage as MarketModeValidationType)}
-        </InputError>
+        </NotificationError>
      )}
    </FormGroup>
  );
@@ -0,0 +1,18 @@
+import { act } from 'react-dom/test-utils';
+const zu = jest.requireActual('zustand'); // if using jest
+
+// a variable to hold reset functions for all stores declared in the app
+const storeResetFns = new Set();
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const create = (createState) => {
+  const store = zu.create(createState);
+  const initialState = store.getState();
+  storeResetFns.add(() => store.setState(initialState, true));
+  return store;
+};
+
+// Reset all stores after each test run
+beforeEach(() => {
+  act(() => storeResetFns.forEach((resetFn) => resetFn()));
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
maciek	63e4ad37a8	chore: handle timeout error - add unit test, fix ts errors	2023-02-16 15:57:13 +01:00
maciek	d7e72ff1a2	Merge remote-tracking branch 'origin/develop' into chore/2814-handle-timeout-and-offline-errors	2023-02-16 15:37:39 +01:00
maciek	cc25d544e2	chore: handle timeout error - fix pagination on ledgerEntries	2023-02-16 15:37:22 +01:00
mattrussell36	9dfed0a211	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-16 12:09:15 +00:00
maciek	1a4bb68d99	chore: handle timeout error - remove offline layer and his hook	2023-02-16 09:20:34 +01:00
maciek	0482ef931e	chore: handle timeout error - resolve conflicts	2023-02-16 09:12:07 +01:00
mattrussell36	5283676be7	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-16 06:07:52 +00:00
Matthew Russell	a82509f0e0	feat(trading): datanode block header for env and node switcher (#2905 )	2023-02-15 19:52:54 -08:00
mattrussell36	64c92ce91d	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-16 00:10:37 +00:00
mattrussell36	b7426e73d8	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-15 18:07:58 +00:00
maciek	770fef38c3	Merge remote-tracking branch 'origin/develop' into chore/2814-handle-timeout-and-offline-errors	2023-02-15 15:58:35 +01:00
maciek	e3a669e28c	chore: handle timeout error - add button for reload	2023-02-15 15:58:17 +01:00
Art	969bfd6945	feat(explorer): markets and market details pages (#2914 )	2023-02-15 14:20:01 +00:00
maciek	55122c08c9	chore: handle timeout error - add button for reload	2023-02-15 15:12:50 +01:00
maciek	d36e41b443	Merge remote-tracking branch 'origin/develop' into chore/2814-handle-timeout-and-offline-errors	2023-02-15 14:53:04 +01:00
maciek	81cb52f41b	chore: handle timeout error - add button for reload	2023-02-15 14:52:39 +01:00
mattrussell36	200487a6fc	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-15 12:07:55 +00:00
Daniel	3f330e78c5	chore(ci): print logs files in cypress pr workflow (#2906 )	2023-02-15 09:11:01 +00:00
maciek	6b2733f5e5	chore: handle offline error	2023-02-15 09:10:52 +01:00
mattrussell36	05726c6a5a	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-15 06:06:31 +00:00
mattrussell36	fcace22393	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-15 00:12:52 +00:00
mattrussell36	b95462ea38	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-14 18:08:30 +00:00
Joe Tsang	42cd32f376	test(governance): refactor proposal enactment tests (#2897 )	2023-02-14 16:44:36 +00:00
m.ray	55d6dd4dce	feat(trading): deposit flow deal ticket (#2874 )	2023-02-14 15:43:52 +00:00
mattrussell36	7017e24adf	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-14 12:06:40 +00:00
mattrussell36	a4d597d426	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-14 06:08:13 +00:00
mattrussell36	b51376ba0d	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-14 00:11:34 +00:00
mattrussell36	c72b5d7912	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-13 18:06:53 +00:00
Sam Keen	462a5bc84b	chore(governance): update announcement banner (#2894 )	2023-02-13 16:48:16 +00:00
Joe Tsang	3edbc71787	test(governance): update home tests (#2900 )	2023-02-13 15:56:42 +00:00
Maciek	ee67736ac5	chore(trading): positions and collateral tab remove infinitive scroll (#2898 )	2023-02-13 15:48:44 +01:00
mattrussell36	8bb6b7a942	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-13 12:06:44 +00:00
daro-maj	c1c0d960eb	chore(trading): fixed copy prompt alert for chrome (#2899 )	2023-02-13 12:41:45 +01:00
mattrussell36	a25e2ad101	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-13 06:08:24 +00:00
mattrussell36	7ee8bd47c8	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-13 00:10:44 +00:00
mattrussell36	b72ed66bb3	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-12 18:07:34 +00:00
mattrussell36	589bd8d29f	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-12 12:08:59 +00:00
mattrussell36	7f7c425e34	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-12 06:08:46 +00:00
mattrussell36	062ea5e968	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-12 00:12:11 +00:00
mattrussell36	87e187c225	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-11 18:08:14 +00:00
mattrussell36	c0f15d8212	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-11 12:06:27 +00:00
mattrussell36	499de6e836	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-11 06:08:23 +00:00
mattrussell36	e72d117a62	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-11 00:12:57 +00:00
mattrussell36	abede79a4c	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-10 18:06:41 +00:00
Sam Keen	fa415318ff	feat(governance): epoch total rewards tables (#2889 )	2023-02-10 18:01:30 +00:00
Edd	718959b920	fix(explorer): use position decimal places to format size in order summary for batch orders (#2892 )	2023-02-10 12:18:16 +00:00
Edd	6d0ebc3a1b	feat(explorer): add node announce tx view (#2888 )	2023-02-10 12:13:53 +00:00