chore: multi click for toast

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

apps/explorer/src/app/components/links/asset-link/asset-link.tsx

@@ -4,6 +4,7 @@ import { useExplorerAssetQuery } from './__generated__/Asset';
 import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
+import Hash from '../hash';
 
 export type AssetLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
@@ -27,7 +28,7 @@ const AssetLink = ({ id, ...props }: AssetLinkProps) => {
 
   return (
     <Link className="underline" {...props} to={`/${Routes.ASSETS}#${id}`}>
-      {label}
+      <Hash text={label} />
     </Link>
   );
 };

apps/explorer/src/app/components/links/block-link/block-link.tsx

@@ -3,6 +3,7 @@ import { Routes } from '../../../routes/route-names';
 import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
+import Hash from '../hash';
 
 export type BlockLinkProps = Partial<ComponentProps<typeof Link>> & {
   height: string;
@@ -11,7 +12,7 @@ export type BlockLinkProps = Partial<ComponentProps<typeof Link>> & {
 const BlockLink = ({ height, ...props }: BlockLinkProps) => {
   return (
     <Link className="underline" {...props} to={`/${Routes.BLOCKS}/${height}`}>
-      {height}
+      <Hash text={height} />
     </Link>
   );
 };

apps/explorer/src/app/components/links/eth-explorer-link/eth-explorer-link.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { DATA_SOURCES } from '../../../config';
+import Hash from '../hash';
 
 export enum EthExplorerLinkTypes {
   block = 'block',
@@ -27,7 +28,7 @@ export const EthExplorerLink = ({
       {...props}
       href={link}
     >
-      {id}
+      <Hash text={id} />
     </a>
   );
 };

apps/explorer/src/app/components/links/hash.tsx

@@ -0,0 +1,18 @@
+export type HashProps = {
+  text: string;
+};
+
+/**
+ * A simple component that ensures long text things like hashes
+ * are broken when they need to wrap. This will remove the need
+ * for a lot of the overflow scrolling that currently exists.
+ */
+const Hash = ({ text }: HashProps) => {
+  return (
+    <code className="break-all font-mono" style={{ wordWrap: 'break-word' }}>
+      {text}
+    </code>
+  );
+};
+
+export default Hash;

apps/explorer/src/app/components/links/market-link/market-link.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
+import Hash from '../hash';
 
 export type MarketLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
@@ -35,7 +36,8 @@ const MarketLink = ({
           <span role="img" aria-label="Unknown market" className="img">
             ⚠️&nbsp;{t('Invalid market')}
           </span>
-          &nbsp;{id}
+          &nbsp;
+          <Hash text={id} />
         </div>
       );
     }
@@ -55,7 +57,7 @@ const MarketLink = ({
   } else {
     return (
       <Link className="underline" {...props} to={`/${Routes.MARKETS}#${id}`}>
-        {id}
+        <Hash text={id} />
       </Link>
     );
   }

apps/explorer/src/app/components/links/node-link/node-link.tsx

@@ -4,6 +4,7 @@ import { useExplorerNodeQuery } from './__generated__/Node';
 import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
+import Hash from '../hash';
 
 export type NodeLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
@@ -22,7 +23,7 @@ const NodeLink = ({ id, ...props }: NodeLinkProps) => {
 
   return (
     <Link className="underline" {...props} to={`/${Routes.VALIDATORS}#${id}`}>
-      <code>{label}</code>
+      <Hash text={label} />
     </Link>
   );
 };

apps/explorer/src/app/components/links/oracle-link/oracle-link.tsx

@@ -2,6 +2,7 @@ import { Routes } from '../../../routes/route-names';
 import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
+import Hash from '../hash';
 
 export type OracleLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
@@ -14,7 +15,7 @@ const OracleLink = ({ id, ...props }: OracleLinkProps) => {
       {...props}
       to={`/${Routes.ORACLES}/${id}`}
     >
-      {id}
+      <Hash text={id} />
     </Link>
   );
 };

apps/explorer/src/app/components/links/party-link/party-link.tsx

@@ -2,6 +2,7 @@ import { Routes } from '../../../routes/route-names';
 import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
+import Hash from '../hash';
 
 export type PartyLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
@@ -14,7 +15,7 @@ const PartyLink = ({ id, ...props }: PartyLinkProps) => {
       {...props}
       to={`/${Routes.PARTIES}/${id}`}
     >
-      {id}
+      <Hash text={id} />
     </Link>
   );
 };

apps/explorer/src/app/components/links/proposal-link/proposal-link.spec.tsx

@@ -22,7 +22,7 @@ describe('Proposal link component', () => {
     expect(res.getByText('123')).toBeInTheDocument();
   });
 
-  it('Renders the ID with an emoji on error', async () => {
+  it('Renders the ID on error', async () => {
     const mock = {
       request: {
         query: ExplorerProposalDocument,
@@ -37,9 +37,6 @@ describe('Proposal link component', () => {
     const res = render(renderComponent('456', [mock]));
     // The ID
     expect(res.getByText('456')).toBeInTheDocument();
-
-    // The emoji
-    expect(await res.findByRole('img')).toBeInTheDocument();
   });
 
   it('Renders the proposal title when the query returns a result', async () => {

apps/explorer/src/app/components/links/proposal-link/proposal-link.tsx

@@ -1,6 +1,7 @@
 import { useExplorerProposalQuery } from './__generated__/Proposal';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { ENV } from '../../../config/env';
+import Hash from '../hash';
 export type ProposalLinkProps = {
   id: string;
 };
@@ -17,7 +18,11 @@ const ProposalLink = ({ id }: ProposalLinkProps) => {
   const base = ENV.dataSources.governanceUrl;
   const label = data?.proposal?.rationale.title || id;
 
-  return <ExternalLink href={`${base}/proposals/${id}`}>{label}</ExternalLink>;
+  return (
+    <ExternalLink href={`${base}/proposals/${id}`}>
+      <Hash text={label} />
+    </ExternalLink>
+  );
 };
 
 export default ProposalLink;

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-deposit.spec.tsx

@@ -63,15 +63,21 @@ describe('Chain Event: Builtin asset deposit', () => {
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const partyLink = screen.getByText(`${fullMock.partyId}`);
     expect(partyLink).toBeInTheDocument();
-    expect(partyLink.tagName).toEqual('A');
-    expect(partyLink.getAttribute('href')).toEqual(
+    if (!partyLink.parentElement) {
+      throw new Error('Party link does not exist');
+    }
+    expect(partyLink.parentElement.tagName).toEqual('A');
+    expect(partyLink.parentElement.getAttribute('href')).toEqual(
       `/parties/${fullMock.partyId}`
     );
 
     const assetLink = screen.getByText(`${fullMock.vegaAssetId}`);
     expect(assetLink).toBeInTheDocument();
-    expect(assetLink.tagName).toEqual('A');
-    expect(assetLink.getAttribute('href')).toEqual(
+    if (!assetLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
       `/assets#${fullMock.vegaAssetId}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-withdrawal.spec.tsx

@@ -69,15 +69,21 @@ describe('Chain Event: Builtin asset withdrawal', () => {
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const partyLink = screen.getByText(`${fullMock.partyId}`);
     expect(partyLink).toBeInTheDocument();
-    expect(partyLink.tagName).toEqual('A');
-    expect(partyLink.getAttribute('href')).toEqual(
+    if (!partyLink.parentElement) {
+      throw new Error('Party link does not exist');
+    }
+    expect(partyLink.parentElement.tagName).toEqual('A');
+    expect(partyLink.parentElement.getAttribute('href')).toEqual(
       `/parties/${fullMock.partyId}`
     );
 
     const assetLink = screen.getByText(`${fullMock.vegaAssetId}`);
     expect(assetLink).toBeInTheDocument();
-    expect(assetLink.tagName).toEqual('A');
-    expect(assetLink.getAttribute('href')).toEqual(
+    if (!assetLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
       `/assets#${fullMock.vegaAssetId}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-delist.spec.tsx

@@ -60,8 +60,11 @@ describe('Chain Event: ERC20 Asset Delist', () => {
 
     const assetLink = screen.getByText(`${fullMock.vegaAssetId}`);
     expect(assetLink).toBeInTheDocument();
-    expect(assetLink.tagName).toEqual('A');
-    expect(assetLink.getAttribute('href')).toEqual(
+    if (!assetLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
       `/assets#${fullMock.vegaAssetId}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-limits-updated.spec.tsx

@@ -76,14 +76,20 @@ describe('Chain Event: ERC20 Asset limits updated', () => {
     expect(screen.getByText(t('Vega asset'))).toBeInTheDocument();
     const assetLink = screen.getByText(`${fullMock.vegaAssetId}`);
     expect(assetLink).toBeInTheDocument();
-    expect(assetLink.tagName).toEqual('A');
-    expect(assetLink.getAttribute('href')).toEqual(
+    if (!assetLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
       `/assets#${fullMock.vegaAssetId}`
     );
 
     expect(screen.getByText(t('ERC20 asset'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.sourceEthereumAddress}`);
-    expect(ethLink.getAttribute('href')).toContain(
+    if (!ethLink.parentElement) {
+      throw new Error('ETH link does not exist');
+    }
+    expect(ethLink.parentElement.getAttribute('href')).toContain(
       `/address/${fullMock.sourceEthereumAddress}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-list.spec.tsx

@@ -62,14 +62,20 @@ describe('Chain Event: ERC20 Asset List', () => {
     expect(screen.getByText(t('Added Vega asset'))).toBeInTheDocument();
     const assetLink = screen.getByText(`${fullMock.vegaAssetId}`);
     expect(assetLink).toBeInTheDocument();
-    expect(assetLink.tagName).toEqual('A');
-    expect(assetLink.getAttribute('href')).toEqual(
+    if (!assetLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
       `/assets#${fullMock.vegaAssetId}`
     );
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.assetSource}`);
-    expect(ethLink.getAttribute('href')).toContain(
+    if (!ethLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(ethLink.parentElement.getAttribute('href')).toContain(
       `/address/${fullMock.assetSource}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-deposit.spec.tsx

@@ -62,21 +62,30 @@ describe('Chain Event: ERC20 asset deposit', () => {
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const partyLink = screen.getByText(`${fullMock.targetPartyId}`);
     expect(partyLink).toBeInTheDocument();
-    expect(partyLink.tagName).toEqual('A');
-    expect(partyLink.getAttribute('href')).toEqual(
+    if (!partyLink.parentElement) {
+      throw new Error('Party link does not exist');
+    }
+    expect(partyLink.parentElement.tagName).toEqual('A');
+    expect(partyLink.parentElement.getAttribute('href')).toEqual(
       `/parties/${fullMock.targetPartyId}`
     );
 
     const assetLink = screen.getByText(`${fullMock.vegaAssetId}`);
     expect(assetLink).toBeInTheDocument();
-    expect(assetLink.tagName).toEqual('A');
-    expect(assetLink.getAttribute('href')).toEqual(
+    if (!assetLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
       `/assets#${fullMock.vegaAssetId}`
     );
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.sourceEthereumAddress}`);
-    expect(ethLink.getAttribute('href')).toContain(
+    if (!ethLink.parentElement) {
+      throw new Error('ETH link does not exist');
+    }
+    expect(ethLink.parentElement.getAttribute('href')).toContain(
       `/address/${fullMock.sourceEthereumAddress}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-withdrawal.spec.tsx

@@ -57,14 +57,20 @@ describe('Chain Event: ERC20 asset deposit', () => {
     expect(screen.getByText(t('Asset'))).toBeInTheDocument();
     const assetLink = screen.getByText(`${fullMock.vegaAssetId}`);
     expect(assetLink).toBeInTheDocument();
-    expect(assetLink.tagName).toEqual('A');
-    expect(assetLink.getAttribute('href')).toEqual(
+    if (!assetLink.parentElement) {
+      throw new Error('Asset link does not exist');
+    }
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
       `/assets#${fullMock.vegaAssetId}`
     );
 
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.targetEthereumAddress}`);
-    expect(ethLink.getAttribute('href')).toContain(
+    if (!ethLink.parentElement) {
+      throw new Error('ETH link does not exist');
+    }
+    expect(ethLink.parentElement.getAttribute('href')).toContain(
       `/address/${fullMock.targetEthereumAddress}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-deposit.spec.tsx

@@ -64,14 +64,20 @@ describe('Chain Event: Stake deposit', () => {
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const partyLink = screen.getByText(`${fullMock.vegaPublicKey}`);
     expect(partyLink).toBeInTheDocument();
-    expect(partyLink.tagName).toEqual('A');
-    expect(partyLink.getAttribute('href')).toEqual(
+    if (!partyLink.parentElement) {
+      throw new Error('Party link does not exist');
+    }
+    expect(partyLink.parentElement.tagName).toEqual('A');
+    expect(partyLink.parentElement.getAttribute('href')).toEqual(
       `/parties/${fullMock.vegaPublicKey}`
     );
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.ethereumAddress}`);
-    expect(ethLink.getAttribute('href')).toContain(
+    if (!ethLink.parentElement) {
+      throw new Error('ETH link does not exist');
+    }
+    expect(ethLink.parentElement.getAttribute('href')).toContain(
       `/address/${fullMock.ethereumAddress}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-remove.spec.tsx

@@ -64,14 +64,20 @@ describe('Chain Event: Stake remove', () => {
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const partyLink = screen.getByText(`${fullMock.vegaPublicKey}`);
     expect(partyLink).toBeInTheDocument();
-    expect(partyLink.tagName).toEqual('A');
-    expect(partyLink.getAttribute('href')).toEqual(
+    if (!partyLink.parentElement) {
+      throw new Error('Party link does not exist');
+    }
+    expect(partyLink.parentElement.tagName).toEqual('A');
+    expect(partyLink.parentElement.getAttribute('href')).toEqual(
       `/parties/${fullMock.vegaPublicKey}`
     );
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.ethereumAddress}`);
-    expect(ethLink.getAttribute('href')).toContain(
+    if (!ethLink.parentElement) {
+      throw new Error('ETH link does not exist');
+    }
+    expect(ethLink.parentElement.getAttribute('href')).toContain(
       `/address/${fullMock.ethereumAddress}`
     );
   });

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-totalsupply.spec.tsx

@@ -66,7 +66,10 @@ describe('Chain Event: Stake total supply change', () => {
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.tokenAddress}`);
-    expect(ethLink.getAttribute('href')).toContain(
+    if (!ethLink.parentElement) {
+      throw new Error('ETH link does not exist');
+    }
+    expect(ethLink.parentElement.getAttribute('href')).toContain(
       `/address/${fullMock.tokenAddress}`
     );
   });

apps/explorer/src/app/components/txs/details/shared/tx-details-shared.tsx

@@ -7,6 +7,8 @@ import type { BlockExplorerTransactionResult } from '../../../../routes/types/bl
 import type { TendermintBlocksResponse } from '../../../../routes/blocks/tendermint-blocks-response';
 import { Time } from '../../../time';
 import { ChainResponseCode } from '../chain-response-code/chain-reponse.code';
+import { TxDataView } from '../../tx-data-view';
+import Hash from '../../../links/hash';
 
 interface TxDetailsSharedProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -46,7 +48,7 @@ export const TxDetailsShared = ({
       <TableRow modifier="bordered">
         <TableCell {...sharedHeaderProps}>{t('Hash')}</TableCell>
         <TableCell>
-          <code>{txData.hash}</code>
+          <Hash text={txData.hash} />
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">
@@ -82,6 +84,12 @@ export const TxDetailsShared = ({
           <ChainResponseCode code={txData.code} error={txData.error} />
         </TableCell>
       </TableRow>
+      <TableRow modifier="bordered">
+        <TableCell {...sharedHeaderProps}>{t('Transaction')}</TableCell>
+        <TableCell>
+          <TxDataView blockData={blockData} txData={txData} />
+        </TableCell>
+      </TableRow>
     </>
   );
 };

apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx

@@ -8,10 +8,8 @@ import { TxDetailsHeartbeat } from './tx-hearbeat';
 import { TxDetailsGeneric } from './tx-generic';
 import { TxDetailsBatch } from './tx-batch';
 import { TxDetailsChainEvent } from './tx-chain-event';
-import { TxContent } from '../../../routes/txs/id/tx-content';
 import { TxDetailsNodeVote } from './tx-node-vote';
 import { TxDetailsOrderCancel } from './tx-order-cancel';
-import get from 'lodash/get';
 import { TxDetailsOrderAmend } from './tx-order-amend';
 import { TxDetailsWithdrawSubmission } from './tx-withdraw-submission';
 import { TxDetailsDelegate } from './tx-delegation';
@@ -46,23 +44,9 @@ export const TxDetailsWrapper = ({
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
 
-  const raw = get(blockData, `result.block.data.txs[${txData.index}]`);
-
   return (
     <div key={`txd-${txData.hash}`}>
       <section>{child({ txData, pubKey, blockData })}</section>
-
-      <details title={t('Decoded transaction')} className="mt-3">
-        <summary className="cursor-pointer">{t('Decoded transaction')}</summary>
-        <TxContent data={txData} />
-      </details>
-
-      {raw ? (
-        <details title={t('Raw transaction')} className="mt-3">
-          <summary className="cursor-pointer">{t('Raw transaction')}</summary>
-          <code className="break-all font-mono text-xs">{raw}</code>
-        </details>
-      ) : null}
     </div>
   );
 };

apps/explorer/src/app/components/txs/details/tx-order.tsx

@@ -6,6 +6,7 @@ import { TxDetailsShared } from './shared/tx-details-shared';
 import { TableCell, TableRow, TableWithTbody } from '../../table';
 import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
 import DeterministicOrderDetails from '../../order-details/deterministic-order-details';
+import Hash from '../../links/hash';
 
 interface TxDetailsOrderProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -47,7 +48,7 @@ export const TxDetailsOrder = ({
         <TableRow modifier="bordered">
           <TableCell>{t('Order')}</TableCell>
           <TableCell>
-            <code>{deterministicId}</code>
+            <Hash text={deterministicId} />
           </TableCell>
         </TableRow>
         <TableRow modifier="bordered">

apps/explorer/src/app/components/txs/tx-data-view.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { t } from '@vegaprotocol/react-helpers';
+import get from 'lodash/get';
+import { Select } from '@vegaprotocol/ui-toolkit';
+
+import type { BlockExplorerTransactionResult } from '../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../routes/blocks/tendermint-blocks-response';
+
+export function getClassName(showTxData: ShowTxDataType) {
+  const baseClasses =
+    'font-mono bg-neutral-300 text-[11px] leading-3 text-gray-900 w-full p-2 max-w-[615px]';
+  if (showTxData === 'JSON') {
+    return `${baseClasses} whitespace-pre overflow-x-scroll`;
+  } else {
+    return baseClasses;
+  }
+}
+
+export function getContents(
+  showTxData: ShowTxDataType,
+  txData: BlockExplorerTransactionResult | null,
+  blockData: TendermintBlocksResponse | null | undefined
+) {
+  if (showTxData === 'JSON') {
+    if (txData) {
+      return JSON.stringify(txData.command, undefined, 1);
+    }
+  } else {
+    if (txData && blockData) {
+      return get(blockData, `result.block.data.txs[${txData.index}]`);
+    }
+  }
+
+  return '-';
+}
+
+type ShowTxDataType = 'JSON' | 'base64';
+
+interface TxDataViewProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+export const TxDataView = ({ txData, blockData }: TxDataViewProps) => {
+  const [showTxData, setShowTxData] = useState<ShowTxDataType>('JSON');
+
+  if (!txData) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  return (
+    <details title={t('Show raw transaction')}>
+      <summary className="cursor-pointer">{t('Show raw transaction')}</summary>
+      <div className="py-4">
+        <textarea
+          readOnly={true}
+          className={getClassName(showTxData)}
+          rows={12}
+          cols={120}
+          value={getContents(showTxData, txData, blockData)}
+        />
+        <div className="w-40">
+          <Select
+            placeholder="View as..."
+            onChange={(v) => setShowTxData(v.target.value as ShowTxDataType)}
+            value={'JSON'}
+          >
+            <option value={'JSON'}>JSON</option>
+            <option value={'base64'}>Base64</option>
+          </Select>
+        </div>
+      </div>
+    </details>
+  );
+};

apps/explorer/src/app/components/txs/txs-infinite-list.tsx

@@ -115,7 +115,7 @@ export const TxsInfiniteList = ({
               className="List"
               height={995}
               itemCount={itemCount}
-              itemSize={isStacked ? 134 : 72}
+              itemSize={isStacked ? 134 : 50}
               onItemsRendered={onItemsRendered}
               ref={ref}
               width={'100%'}

apps/token/src/routes/withdrawals/index.tsx

@@ -5,10 +5,12 @@ import { Heading } from '../../components/heading';
 import { SplashLoader } from '../../components/splash-loader';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import {
-  useWithdrawals,
+  withdrawalProvider,
   useWithdrawalDialog,
   WithdrawalsTable,
 } from '@vegaprotocol/withdraws';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import type { RouteChildProps } from '../index';
 
@@ -29,7 +31,12 @@ const Withdrawals = ({ name }: RouteChildProps) => {
 const WithdrawPendingContainer = () => {
   const openWithdrawalDialog = useWithdrawalDialog((state) => state.open);
   const { t } = useTranslation();
-  const { data, loading, error } = useWithdrawals();
+  const { pubKey } = useVegaWallet();
+  const { data, loading, error } = useDataProvider({
+    dataProvider: withdrawalProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
 
   if (error) {
     return (

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

@@ -21,15 +21,21 @@ const orderUpdatedAt = 'updatedAt';
 const assetSelectField = 'select[name="asset"]';
 const amountField = 'input[name="amount"]';
 const txTimeout = Cypress.env('txTimeout');
-const btcName = 'BTC (local)';
+const sepoliaUrl = Cypress.env('ETHERSCAN_URL');
+const btcName =
+  'BTC (local)5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c - tBTC';
 const btcSymbol = 'tBTC';
 const usdcSymbol = 'fUSDC';
 const toastContent = 'toast-content';
 const ordersTab = 'Orders';
 const depositsTab = 'Deposits';
 const toastCloseBtn = 'toast-close';
+const price = '390';
+const size = '0.0005';
+const newPrice = '200';
 
 // TODO: ensure this test runs only if capsule is running via workflow
+// Because the tests are run on a live network to optimize time, the tests are interdependent and must be run in the given order.
 describe('capsule', { tags: '@slow' }, () => {
   before(() => {
     cy.createMarket();
@@ -50,8 +56,8 @@ describe('capsule', { tags: '@slow' }, () => {
       marketId: market.id,
       type: Schema.OrderType.TYPE_LIMIT,
       side: Schema.Side.SIDE_BUY,
-      size: '0.0005',
-      price: '390',
+      size: size,
+      price: price,
       timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
     };
     const rawPrice = removeDecimal(order.price, market.decimalPlaces);
@@ -64,7 +70,8 @@ describe('capsule', { tags: '@slow' }, () => {
 
     cy.getByTestId(toastContent).should(
       'contain.text',
-      `ConfirmedYour transaction has been confirmed View in block explorerSubmit order - activeTEST.24h+0.0005 @ 390.00 ${usdcSymbol}`
+      `ConfirmedYour transaction has been confirmed View in block explorerSubmit order - activeTEST.24h+${order.size} @ ${order.price}.00 ${usdcSymbol}`,
+      { matchCase: false }
     );
     cy.getByTestId(toastCloseBtn).click();
     // orderbook cells are keyed by price level
@@ -75,7 +82,7 @@ describe('capsule', { tags: '@slow' }, () => {
       .should('contain.text', rawSize);
 
     cy.getByTestId(ordersTab).click();
-    cy.getByTestId('edit').should('contain.text', 'Edit');
+    cy.getByTestId('edit', txTimeout).should('contain.text', 'Edit');
     cy.getByTestId('tab-orders').within(() => {
       cy.get('.ag-center-cols-container')
         .children()
@@ -113,35 +120,41 @@ describe('capsule', { tags: '@slow' }, () => {
           checkIfDataAndTimeOfCreationAndUpdateIsEqual(orderCreatedAt);
         });
     });
-    //edit order
+  });
+
+  it('can edit order', function () {
     cy.getByTestId(ordersTab).click();
     cy.getByTestId('edit').first().should('be.visible').click();
     cy.getByTestId('dialog-title').should('contain.text', 'Edit order');
-    cy.get('#limitPrice').focus().clear().type('200');
+    cy.get('#limitPrice').focus().clear().type(newPrice);
     cy.getByTestId('edit-order').find('[type="submit"]').click();
     cy.getByTestId(toastContent).should(
       'contain.text',
-      `ConfirmedYour transaction has been confirmed View in block explorerEdit order - activeTEST.24h+0.0005 @ 200.00 ${usdcSymbol}+0.0005 @ 200.00 ${usdcSymbol}`
+      `ConfirmedYour transaction has been confirmed View in block explorerEdit order - activeTEST.24h+${size} @ ${price}.00 ${usdcSymbol}+${size} @ ${newPrice}.00 ${usdcSymbol}`,
+      { matchCase: false }
     );
     cy.getByTestId(ordersTab).click();
-    cy.getByTestId(toastCloseBtn).click();
+    cy.getByTestId(toastCloseBtn).click({ multiple: true });
     cy.get('.ag-center-cols-container')
       .children()
       .first()
       .within(() => {
         cy.get(`[col-id='${orderPrice}']`).then(($price) => {
-          expect(parseFloat($price.text())).to.equal(parseFloat('200'));
+          expect(parseFloat($price.text())).to.equal(parseFloat(newPrice));
         });
         checkIfDataAndTimeOfCreationAndUpdateIsEqual(orderUpdatedAt);
       });
-    //cancel order
+  });
+
+  it('can cancel order', function () {
     cy.getByTestId(ordersTab).click();
     cy.getByTestId('cancel').first().click();
     cy.getByTestId(toastContent).should(
       'contain.text',
-      `ConfirmedYour transaction has been confirmed View in block explorerCancel order - cancelledTEST.24h+0.0005 @ 200.00 ${usdcSymbol}`
+      `ConfirmedYour transaction has been confirmed View in block explorerCancel order - cancelledTEST.24h+${size} @ ${newPrice}.00 ${usdcSymbol}`,
+      { matchCase: false }
     );
-    cy.getByTestId(toastCloseBtn).click();
+    cy.getByTestId(toastCloseBtn).click({ multiple: true });
 
     cy.getByTestId('tab-orders')
       .get('.ag-center-cols-container')
@@ -151,7 +164,10 @@ describe('capsule', { tags: '@slow' }, () => {
       .should('contain.text', OrderStatusMapping.STATUS_CANCELLED);
   });
 
-  it('can deposit and withdrawal', function () {
+  it('can deposit', function () {
+    cy.visit('/#/portfolio');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
+
     // 1001-DEPO-001
     // 1001-DEPO-002
     // 1001-DEPO-003
@@ -160,27 +176,12 @@ describe('capsule', { tags: '@slow' }, () => {
     // 1001-DEPO-007
     // 1001-DEPO-008
     // 1001-DEPO-009
-    // 1002-WITH-001
-    // 1002-WITH-006
-    // 1002-WITH-009
-    // 002-WITH-011
-    // 1002-WITH-024
-    // 1002-WITH-012
-    // 1002-WITH-013
-    // 1002-WITH-014
-    // 1002-WITH-015
-    // 1002-WITH-016
-    // 1002-WITH-019
-
-    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
-
-    cy.highlight('creating deposit');
+    // 1001-DEPO-010
 
     cy.getByTestId(depositsTab).click();
     cy.getByTestId('deposit-button').click();
     connectEthereumWallet('Unknown');
-    cy.get(assetSelectField, txTimeout).select(btcName);
+    cy.get(assetSelectField, txTimeout).select(btcName, { force: true });
     cy.getByTestId('deposit-approve-submit').click();
     cy.getByTestId('dialog-title').should('contain.text', 'Approve complete');
     cy.get('[data-testid="Return to deposit"]').click();
@@ -188,7 +189,8 @@ describe('capsule', { tags: '@slow' }, () => {
     cy.getByTestId('deposit-submit').click();
     cy.getByTestId(toastContent, txTimeout).should(
       'contain.text',
-      `Transaction completedYour transaction has been completedView on EtherscanDeposit 1.00 ${btcSymbol}`
+      `Transaction confirmedYour transaction has been confirmed.View on EtherscanDeposit 1.00 ${btcSymbol}`,
+      { matchCase: false }
     );
     cy.getByTestId(toastCloseBtn).click();
     cy.getByTestId('Collateral').click();
@@ -196,8 +198,6 @@ describe('capsule', { tags: '@slow' }, () => {
     cy.highlight('deposit verification');
 
     cy.getByTestId('asset', txTimeout).should('contain.text', btcSymbol);
-    // need to reload page to see deposit history complete
-    cy.reload();
     cy.getByTestId(depositsTab).click();
     cy.get('.ag-cell-value', txTimeout).should('contain.text', btcSymbol);
     cy.get('[col-id="status"]').should('not.have.text', 'Open', txTimeout);
@@ -214,15 +214,29 @@ describe('capsule', { tags: '@slow' }, () => {
         cy.get('[col-id="txHash"]')
           .find('a')
           .should('have.attr', 'href')
-          .and('contain', 'https://sepolia.etherscan.io/tx');
+          .and('contain', `${sepoliaUrl}/tx/0x`);
       });
+  });
 
-    cy.highlight('creating withdrawals');
+  it('can withdrawal', function () {
+    // 1002-WITH-001
+    // 1002-WITH-006
+    // 1002-WITH-009
+    // 1002-WITH-011
+    // 1002-WITH-024
+    // 1002-WITH-012
+    // 1002-WITH-013
+    // 1002-WITH-014
+    // 1002-WITH-015
+    // 1002-WITH-016
+    // 1002-WITH-019
 
     cy.getByTestId('Withdrawals').click();
     cy.getByTestId('withdraw-dialog-button').click();
-    connectEthereumWallet('Unknown');
-    cy.get(assetSelectField).select(btcName);
+    cy.get(assetSelectField, txTimeout).select(
+      'BTC (local)5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c - tBTC',
+      { force: true }
+    );
     cy.get(amountField).clear().type('1');
     cy.getByTestId('submit-withdrawal').click();
     cy.getByTestId(toastContent, txTimeout).should(
@@ -243,7 +257,7 @@ describe('capsule', { tags: '@slow' }, () => {
     cy.getByTestId('toast-complete-withdrawal').click();
     cy.getByTestId(toastContent, txTimeout).should(
       'contain.text',
-      'Transaction completed'
+      'Transaction confirmed'
     );
 
     cy.getByTestId('complete-withdrawal', txTimeout).should('not.exist');
@@ -258,17 +272,28 @@ describe('capsule', { tags: '@slow' }, () => {
         cy.get('[col-id="details.receiverAddress"]')
           .find('a')
           .should('have.attr', 'href')
-          .and('contain', 'https://sepolia.etherscan.io/address/');
+          .and('contain', `${sepoliaUrl}/address/`);
         cy.get('[col-id="createdTimestamp"]').should('not.be.empty');
         cy.get('[col-id="withdrawnTimestamp"]').should('not.be.empty');
         cy.get('[col-id="status"]').should('have.text', 'Completed');
         cy.get('[col-id="txHash"]')
           .find('a')
           .should('have.attr', 'href')
-          .and('contain', 'https://sepolia.etherscan.io/tx/0x');
+          .and('contain', `${sepoliaUrl}/tx/0x`);
       });
   });
+
+  it('deposit - if approved amount is less than deposit: must see that an approval is needed and be prompted to approve more', function () {
+    // 1001-DEPO-006
+
+    cy.getByTestId(depositsTab).click();
+    cy.getByTestId('deposit-button').click();
+    cy.get(assetSelectField, txTimeout).select(btcName, { force: true });
+    cy.get(amountField).clear().type('20000000');
+    cy.getByTestId('deposit-approve-submit').should('be.visible');
+  });
 });
+
 function checkIfDataAndTimeOfCreationAndUpdateIsEqual(date: string) {
   cy.get(`[col-id='${date}'] .ag-cell-wrapper`)
     .children('span')

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

@@ -56,6 +56,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
   });
 
   it('insufficient funds', () => {
+    // 1001-DEPO-005
     // Deposit amount is valid, but less than approved. This will always be the case because our
     // CI wallet wont have approved any assets
     cy.get(amountField)

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

@@ -0,0 +1,99 @@
+import { mockConnectWallet } from '@vegaprotocol/cypress';
+
+before(() => {
+  cy.mockTradingPage();
+  cy.mockSubscription();
+  cy.visit('/');
+  cy.wait('@Market');
+  cy.getByTestId('dialog-close').click();
+});
+
+describe('Desktop view', { tags: '@smoke' }, () => {
+  describe('Navbar', () => {
+    const links = ['Markets', 'Trading', 'Portfolio'];
+    const hashes = ['#/markets/all', '#/markets/market-0', '#/portfolio'];
+
+    links.forEach((link, index) => {
+      it(`${link} should be correctly rendered`, () => {
+        cy.getByTestId('navbar')
+          .find(`[data-testid="navbar-links"] a[data-testid=${link}]`)
+          .then((element) => {
+            cy.wrap(element).click();
+            cy.wrap(element)
+              .get('span.absolute.md\\:h-1.w-full')
+              .should('exist');
+            cy.location('hash').should('equal', hashes[index]);
+          });
+      });
+    });
+  });
+});
+
+describe('Mobile view', { tags: '@smoke' }, () => {
+  const viewportHeight = Cypress.config('viewportHeight');
+  const viewportWidth = Cypress.config('viewportWidth');
+  before(() => {
+    // a little hack to keep the viewport size between tests (cypress bug)
+    Cypress.config({
+      viewportWidth: 560,
+      viewportHeight: 890,
+    });
+    cy.viewport(560, 890);
+  });
+
+  describe('wallet drawer', () => {
+    it('wallet drawer should be correctly rendered', () => {
+      mockConnectWallet();
+      cy.connectVegaWallet(true);
+      cy.getByTestId('connect-vega-wallet-mobile').click();
+      cy.getByTestId('wallets-drawer').should('be.visible');
+      cy.getByTestId('wallets-drawer').within((el) => {
+        cy.wrap(el).get('button').contains('Disconnect').click();
+      });
+      cy.getByTestId('wallets-drawer').should('not.be.visible');
+    });
+  });
+
+  describe('menu drawer', () => {
+    it('Markets should be correctly rendered', () => {
+      cy.getByTestId('button-menu-drawer').click();
+      cy.getByTestId('menu-drawer').should('be.visible');
+      cy.getByTestId('menu-drawer').within((el) => {
+        cy.wrap(el).getByTestId('Markets').click();
+        cy.location('hash').should('equal', '#/markets/all');
+      });
+    });
+    it('Trading should be correctly rendered', () => {
+      cy.getByTestId('button-menu-drawer').click();
+      cy.getByTestId('menu-drawer').within((el) => {
+        cy.wrap(el).getByTestId('Trading').click();
+        cy.location('hash').should('equal', '#/markets/market-0');
+      });
+    });
+    it('Portfolio should be correctly rendered', () => {
+      cy.getByTestId('button-menu-drawer').click();
+      cy.getByTestId('menu-drawer').within((el) => {
+        cy.wrap(el).getByTestId('Portfolio').click();
+        cy.location('hash').should('equal', '#/portfolio');
+      });
+    });
+
+    it('Menu drawer should not be visible until opened', () => {
+      cy.getByTestId('menu-drawer').should('not.be.visible');
+      cy.getByTestId('button-menu-drawer').click();
+      cy.getByTestId('menu-drawer').should('be.visible');
+      cy.getByTestId('menu-drawer')
+        .find('[data-testid="theme-switcher"]')
+        .should('be.visible');
+      cy.getByTestId('button-menu-drawer').click();
+      cy.getByTestId('menu-drawer').should('not.be.visible');
+    });
+  });
+  after(() => {
+    // a little hack to keep the viewport size between tests (cypress bug)
+    Cypress.config({
+      viewportWidth,
+      viewportHeight,
+    });
+  });
+});

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

@@ -454,8 +454,4 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
         );
       });
   });
-  it.skip('tbd for 7003-MORD', () => {
-    // NOT COVERED: must see the reference, offset and direction for each part pegged order - waiting for clarification
-    // NOT COVERED: must see the reference, offset and direction for each part liquidity order order - waiting for clarification
-  });
 });

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

@@ -7,7 +7,7 @@ const manageVegaBtn = 'manage-vega-wallet';
 const form = 'rest-connector-form';
 const dialogContent = 'dialog-content';
 
-describe('vega wallet v1', { tags: '@smoke' }, () => {
+describe('connect hosted wallet', { tags: '@smoke' }, () => {
   beforeEach(() => {
     // Using portfolio page as it requires vega wallet connection
     cy.visit('/#/portfolio');
@@ -58,7 +58,7 @@ describe('vega wallet v1', { tags: '@smoke' }, () => {
   });
 });
 
-describe('vega wallet v2', { tags: '@smoke' }, () => {
+describe('connect vega wallet', { tags: '@smoke' }, () => {
   beforeEach(() => {
     // Using portfolio page as it requires vega wallet connection
     cy.visit('/#/portfolio');
@@ -127,63 +127,3 @@ describe('ethereum wallet', { tags: '@smoke' }, () => {
     cy.getByTestId(connectEthWalletBtn).should('exist');
   });
 });
-
-describe('Navbar', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/');
-    cy.wait('@Market');
-    cy.getByTestId('dialog-close').click();
-  });
-
-  it('should be properly rendered', () => {
-    const links = ['Markets', 'Trading', 'Portfolio'];
-    const hashes = ['#/markets/all', '#/markets/market-0', '#/portfolio'];
-    let i = 0;
-    cy.getByTestId('navbar').within(() => {
-      cy.get('[data-testid="navbar-links"] a[data-testid]', { log: true })
-        .should('have.length', 3)
-        .each((item) => {
-          cy.wrap(item).click();
-          cy.wrap(item).get('span.absolute.md\\:h-1.w-full').should('exist');
-          cy.location('hash').should('equal', hashes[i]);
-          cy.wrap(item).should('have.data', 'testid', links[i++]);
-        });
-    });
-  });
-
-  it('wallet drawer should be correctly rendered', () => {
-    cy.viewport(560, 890);
-    mockConnectWallet();
-    cy.connectVegaWallet(true);
-    cy.getByTestId('connect-vega-wallet-mobile').click();
-    cy.getByTestId('wallets-drawer').should('be.visible');
-    cy.getByTestId('wallets-drawer').within((el) => {
-      cy.wrap(el).get('button').contains('Disconnect').click();
-    });
-    cy.getByTestId('wallets-drawer').should('not.be.visible');
-  });
-
-  it('menu drawer should be correctly rendered', () => {
-    cy.viewport(560, 890);
-    cy.getByTestId('button-menu-drawer').click();
-    cy.getByTestId('menu-drawer').should('be.visible');
-    cy.getByTestId('menu-drawer').within((el) => {
-      cy.wrap(el).getByTestId('Markets').click();
-      cy.location('hash').should('equal', '#/markets/all');
-    });
-    cy.getByTestId('button-menu-drawer').click();
-    cy.getByTestId('menu-drawer').within((el) => {
-      cy.wrap(el).getByTestId('Trading').click();
-      cy.location('hash').should('equal', '#/markets/market-0');
-    });
-    cy.getByTestId('button-menu-drawer').click();
-    cy.getByTestId('menu-drawer').within((el) => {
-      cy.wrap(el).getByTestId('Portfolio').click();
-      cy.location('hash').should('equal', '#/portfolio');
-      cy.wrap(el).getByTestId('theme-switcher').should('be.visible');
-    });
-    cy.getByTestId('menu-drawer').should('not.be.visible');
-  });
-});

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -1,22 +1,28 @@
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
-import { useDeposits } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/react-helpers';
+import { depositsProvider } from '@vegaprotocol/deposits';
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 
 export const DepositsContainer = () => {
-  const { deposits, loading, error } = useDeposits();
+  const { pubKey } = useVegaWallet();
+  const { data, loading, error } = useDataProvider({
+    dataProvider: depositsProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
   const openDepositDialog = useDepositDialog((state) => state.open);
 
   return (
     <div className="h-full grid grid-rows-[1fr,min-content]">
       <div className="h-full relative">
         <DepositsTable
-          rowData={deposits || []}
+          rowData={data || []}
           noRowsOverlayComponent={() => null}
         />
         <div className="pointer-events-none absolute inset-0">
           <AsyncRenderer
-            data={deposits}
+            data={data}
             loading={loading}
             error={error}
             noDataCondition={(data) => !(data && data.length)}

apps/trading/client-pages/portfolio/withdrawals-container.tsx

@@ -1,14 +1,20 @@
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import {
-  useWithdrawals,
+  withdrawalProvider,
   useWithdrawalDialog,
   WithdrawalsTable,
 } from '@vegaprotocol/withdraws';
-import { t } from '@vegaprotocol/react-helpers';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 
 export const WithdrawalsContainer = () => {
-  const { data, loading, error } = useWithdrawals();
+  const { pubKey } = useVegaWallet();
+  const { data, loading, error } = useDataProvider({
+    dataProvider: withdrawalProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
   const openWithdrawDialog = useWithdrawalDialog((state) => state.open);
 
   return (

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

@@ -1,26 +1,58 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { Footer } from './footer';
+import { Footer, NodeHealth } from './footer';
 import { useEnvironment } from '@vegaprotocol/environment';
 
 jest.mock('@vegaprotocol/environment');
 
 describe('Footer', () => {
-  it('renders a button to open node switcher', () => {
+  it('can open node switcher by clicking the node url', () => {
     const mockOpenNodeSwitcher = jest.fn();
     const node = 'n99.somenetwork.vega.xyz';
-    const nodeUrl = `https://${node}`;
 
     // @ts-ignore mock env hook
     useEnvironment.mockImplementation(() => ({
       VEGA_URL: `https://api.${node}/graphql`,
+      blockDifference: 0,
       setNodeSwitcherOpen: mockOpenNodeSwitcher,
     }));
 
     render(<Footer />);
 
-    fireEvent.click(screen.getByRole('button'));
+    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'));
     expect(mockOpenNodeSwitcher).toHaveBeenCalled();
-    const link = screen.getByText(node);
-    expect(link).toHaveAttribute('href', nodeUrl);
   });
 });
+
+describe('NodeHealth', () => {
+  const cases = [
+    { diff: 0, classname: 'bg-success', text: 'Operational' },
+    { diff: 5, classname: 'bg-warning', text: '5 Blocks behind' },
+    { diff: -1, classname: 'bg-danger', text: 'Non operational' },
+  ];
+  it.each(cases)(
+    'renders correct text and indicator color for $diff block difference',
+    (elem) => {
+      console.log(elem);
+      render(<NodeHealth blockDiff={elem.diff} openNodeSwitcher={jest.fn()} />);
+      expect(screen.getByTestId('indicator')).toHaveClass(elem.classname);
+      expect(screen.getByText(elem.text)).toBeInTheDocument();
+    }
+  );
+});

apps/trading/components/footer/footer.tsx

@@ -1,28 +1,75 @@
 import { useEnvironment } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/react-helpers';
-import { ButtonLink, Link } from '@vegaprotocol/ui-toolkit';
+import { t, useNavigatorOnline } from '@vegaprotocol/react-helpers';
+import { ButtonLink, Indicator, Intent } from '@vegaprotocol/ui-toolkit';
 
 export const Footer = () => {
-  const { VEGA_URL, setNodeSwitcherOpen } = useEnvironment();
+  const { VEGA_URL, blockDifference, setNodeSwitcherOpen } = useEnvironment();
   return (
     <footer className="px-4 py-1 text-xs border-t border-default">
       <div className="flex justify-between">
         <div className="flex gap-2">
-          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
-          <ButtonLink onClick={setNodeSwitcherOpen}>{t('Change')}</ButtonLink>
+          {VEGA_URL && (
+            <>
+              <NodeHealth
+                blockDiff={blockDifference}
+                openNodeSwitcher={setNodeSwitcherOpen}
+              />
+              {' | '}
+              <NodeUrl url={VEGA_URL} openNodeSwitcher={setNodeSwitcherOpen} />
+            </>
+          )}
         </div>
       </div>
     </footer>
   );
 };
 
-const NodeUrl = ({ url }: { url: string }) => {
+interface NodeUrlProps {
+  url: string;
+  openNodeSwitcher: () => void;
+}
+
+const NodeUrl = ({ url, openNodeSwitcher }: NodeUrlProps) => {
   // get base url from api url, api sub domain
   const urlObj = new URL(url);
   const nodeUrl = urlObj.origin.replace(/^[^.]+\./g, '');
+  return <ButtonLink onClick={openNodeSwitcher}>{nodeUrl}</ButtonLink>;
+};
+
+interface NodeHealthProps {
+  openNodeSwitcher: () => void;
+  blockDiff: number;
+}
+
+// How many blocks behind the most advanced block that is
+// deemed acceptable for "Good" status
+const BLOCK_THRESHOLD = 3;
+
+export const NodeHealth = ({
+  blockDiff,
+  openNodeSwitcher,
+}: NodeHealthProps) => {
+  const online = useNavigatorOnline();
+
+  let intent = Intent.Success;
+  let text = 'Operational';
+
+  if (!online) {
+    text = t('Offline');
+    intent = Intent.Danger;
+  } else if (blockDiff < 0) {
+    // Block height query failed and null was returned
+    text = t('Non operational');
+    intent = Intent.Danger;
+  } else if (blockDiff >= BLOCK_THRESHOLD) {
+    text = t(`${blockDiff} Blocks behind`);
+    intent = Intent.Warning;
+  }
+
   return (
-    <Link href={'https://' + nodeUrl} target="_blank">
-      {nodeUrl}
-    </Link>
+    <span>
+      <Indicator variant={intent} />
+      <ButtonLink onClick={openNodeSwitcher}>{text}</ButtonLink>
+    </span>
   );
 };

apps/trading/components/select-market/select-market.tsx

@@ -112,7 +112,7 @@ export const SelectMarketPopover = ({
   } = useMarketList();
   const variables = useMemo(() => ({ partyId: pubKey }), [pubKey]);
   const {
-    data: party,
+    data: positions,
     loading: positionsLoading,
     reload,
   } = useDataProvider({
@@ -132,11 +132,9 @@ export const SelectMarketPopover = ({
   const markets = useMemo(
     () =>
       data?.filter((market) =>
-        party?.positionsConnection?.edges?.find(
-          (edge) => edge.node.market.id === market.id
-        )
+        positions?.find((node) => node.market.id === market.id)
       ),
-    [data, party]
+    [data, positions]
   );
 
   useEffect(() => {
@@ -172,15 +170,13 @@ export const SelectMarketPopover = ({
           </div>
         ) : (
           <table className="relative text-sm w-full whitespace-nowrap">
-            {pubKey && (party?.positionsConnection?.edges?.length ?? 0) > 0 ? (
+            {pubKey && (positions?.length ?? 0) && (markets?.length ?? 0) ? (
               <>
                 <TableTitle>{t('My markets')}</TableTitle>
                 <SelectAllMarketsTableBody
                   inViewRoot={inViewRoot}
                   markets={markets}
-                  positions={party?.positionsConnection?.edges
-                    ?.filter((edge) => edge.node)
-                    .map((edge) => edge.node)}
+                  positions={positions || undefined}
                   onSelect={onSelectMarket}
                   onCellClick={onCellClick}
                   headers={columnHeadersPositionMarkets}

apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx

@@ -96,7 +96,7 @@ const EthTxPendingToastContent = ({ tx }: EthTxToastContentProps) => {
   return (
     <div>
       <h3 className="font-bold">{t('Awaiting confirmation')}</h3>
-      <p>{t('Please wait for your transaction to be confirmed')}</p>
+      <p>{t('Please wait for your transaction to be confirmed.')}</p>
       <EtherscanLink tx={tx} />
       <EthTransactionDetails tx={tx} />
     </div>
@@ -138,7 +138,7 @@ const EthTxConfirmedToastContent = ({ tx }: EthTxToastContentProps) => {
   return (
     <div>
       <h3 className="font-bold">{t('Transaction confirmed')}</h3>
-      <p>{t('Your transaction has been confirmed')}</p>
+      <p>{t('Your transaction has been confirmed.')}</p>
       <EtherscanLink tx={tx} />
       <EthTransactionDetails tx={tx} />
     </div>
@@ -153,7 +153,7 @@ const EthTxCompletedToastContent = ({ tx }: EthTxToastContentProps) => {
         {t('Processing')} {isDeposit && t('deposit')}
       </h3>
       <p>
-        {t('Your transaction has been completed.')}
+        {t('Your transaction has been completed.')}{' '}
         {isDeposit && t('Waiting for deposit confirmation.')}
       </p>
       <EtherscanLink tx={tx} />

libs/accounts/src/lib/accounts-data-provider.ts

@@ -50,10 +50,10 @@ export type Account = Omit<AccountFieldsFragment, 'market' | 'asset'> & {
 };
 
 const update = (
-  data: AccountFieldsFragment[],
+  data: AccountFieldsFragment[] | null,
   deltas: AccountEventsSubscription['accounts']
 ) => {
-  return produce(data, (draft) => {
+  return produce(data || [], (draft) => {
     deltas.forEach((delta) => {
       const id = getId(delta);
       const index = draft.findIndex((a) => getId(a) === id);
@@ -73,15 +73,8 @@ const update = (
   });
 };
 
-const getData = (
-  responseData: AccountsQuery
-): AccountFieldsFragment[] | null => {
-  return (
-    removePaginationWrapper(responseData.party?.accountsConnection?.edges) ??
-    null
-  );
-};
-
+const getData = (responseData: AccountsQuery | null): AccountFieldsFragment[] =>
+  removePaginationWrapper(responseData?.party?.accountsConnection?.edges) || [];
 const getDelta = (
   subscriptionData: AccountEventsSubscription
 ): AccountEventsSubscription['accounts'] => {

libs/apollo-client/src/lib/apollo-client.ts

@@ -1,4 +1,4 @@
-import type { ApolloError, InMemoryCacheConfig } from '@apollo/client';
+import type { InMemoryCacheConfig } from '@apollo/client';
 import {
   ApolloClient,
   from,
@@ -13,30 +13,49 @@ import { createClient as createWSClient } from 'graphql-ws';
 import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
 import ApolloLinkTimeout from 'apollo-link-timeout';
-import type { GraphQLErrors } from '@apollo/client/errors';
 import { localLoggerFactory } from '@vegaprotocol/react-helpers';
 
 const isBrowser = typeof window !== 'undefined';
 
 const NOT_FOUND = 'NotFound';
 
-export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
-  if (!base) {
-    throw new Error('Base must be passed into createClient!');
+export type ClientOptions = {
+  url?: string;
+  cacheConfig?: InMemoryCacheConfig;
+  retry?: boolean;
+  connectToDevTools?: boolean;
+};
+
+export function createClient({
+  url,
+  cacheConfig,
+  retry = true,
+  connectToDevTools = true,
+}: ClientOptions) {
+  if (!url) {
+    throw new Error('url must be passed into createClient!');
   }
-  const urlHTTP = new URL(base);
-  const urlWS = new URL(base);
+  const urlHTTP = new URL(url);
+  const urlWS = new URL(url);
   // Replace http with ws, preserving if its a secure connection eg. https => wss
   urlWS.protocol = urlWS.protocol.replace('http', 'ws');
+
+  const noOpLink = new ApolloLink((operation, forward) => {
+    return forward(operation);
+  });
+
   const timeoutLink = new ApolloLinkTimeout(10000);
   const enlargedTimeoutLink = new ApolloLinkTimeout(100000);
-  const retryLink = new RetryLink({
-    delay: {
-      initial: 300,
-      max: 10000,
-      jitter: true,
-    },
-  });
+
+  const retryLink = retry
+    ? new RetryLink({
+        delay: {
+          initial: 300,
+          max: 10000,
+          jitter: true,
+        },
+      })
+    : noOpLink;
 
   const httpLink = new HttpLink({
     uri: urlHTTP.href,
@@ -49,7 +68,7 @@ export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
           url: urlWS.href,
         })
       )
-    : new ApolloLink((operation, forward) => forward(operation));
+    : noOpLink;
 
   const splitLink = isBrowser
     ? split(
@@ -87,23 +106,6 @@ export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
   return new ApolloClient({
     link: from([errorLink, composedTimeoutLink, retryLink, splitLink]),
     cache: new InMemoryCache(cacheConfig),
+    connectToDevTools,
   });
 }
-
-const isApolloGraphQLError = (
-  error: ApolloError | Error | undefined
-): error is ApolloError => {
-  return !!error && !!(error as ApolloError).graphQLErrors;
-};
-
-const hasNotFoundGraphQLErrors = (errors: GraphQLErrors) => {
-  return errors.some((e) => e.extensions && e.extensions['type'] === NOT_FOUND);
-};
-
-export const isNotFoundGraphQLError = (
-  error: Error | ApolloError | undefined
-) => {
-  return (
-    isApolloGraphQLError(error) && hasNotFoundGraphQLErrors(error.graphQLErrors)
-  );
-};

libs/assets/src/lib/asset-data-provider.ts

@@ -6,20 +6,15 @@ import { AssetDocument } from './__generated__/Asset';
 
 export type Asset = AssetFieldsFragment;
 
-const getData = (responseData: AssetQuery) => {
-  const foundAssets = responseData.assetsConnection?.edges
+const getData = (responseData: AssetQuery | null) => {
+  const foundAssets = responseData?.assetsConnection?.edges
     ?.filter((e) => Boolean(e?.node))
     .map((e) => e?.node as Asset);
   if (foundAssets && foundAssets?.length > 0) return foundAssets[0];
   return null;
 };
 
-export const assetProvider = makeDataProvider<
-  AssetQuery,
-  Asset | null,
-  never,
-  never
->({
+export const assetProvider = makeDataProvider<AssetQuery, Asset, never, never>({
   query: AssetDocument,
   getData,
 });

libs/assets/src/lib/assets-data-provider.ts

@@ -16,14 +16,14 @@ export type BuiltinAsset = Omit<Asset, 'source'> & {
   source: BuiltinAssetSource;
 };
 
-const getData = (responseData: AssetsQuery) =>
-  responseData.assetsConnection?.edges
+const getData = (responseData: AssetsQuery | null) =>
+  responseData?.assetsConnection?.edges
     ?.filter((e) => Boolean(e?.node))
     .map((e) => e?.node as Asset) ?? [];
 
 export const assetsProvider = makeDataProvider<
   AssetsQuery,
-  Asset[] | null,
+  Asset[],
   never,
   never
 >({

libs/candles-chart/src/lib/Chart.graphql

@@ -1,6 +1,7 @@
 query Chart($marketId: ID!) {
   market(id: $marketId) {
     decimalPlaces
+    positionDecimalPlaces
     data {
       priceMonitoringBounds {
         minValidPrice

libs/candles-chart/src/lib/__generated__/Chart.ts

@@ -8,13 +8,14 @@ export type ChartQueryVariables = Types.Exact<{
 }>;
 
 
-export type ChartQuery = { __typename?: 'Query', market?: { __typename?: 'Market', decimalPlaces: number, data?: { __typename?: 'MarketData', priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string }> | null } | null } | null };
+export type ChartQuery = { __typename?: 'Query', market?: { __typename?: 'Market', decimalPlaces: number, positionDecimalPlaces: number, data?: { __typename?: 'MarketData', priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string }> | null } | null } | null };
 
 
 export const ChartDocument = gql`
     query Chart($marketId: ID!) {
   market(id: $marketId) {
     decimalPlaces
+    positionDecimalPlaces
     data {
       priceMonitoringBounds {
         minValidPrice

libs/candles-chart/src/lib/chart.mock.ts

@@ -20,6 +20,7 @@ export const chartQuery = (override?: PartialDeep<ChartQuery>): ChartQuery => {
   const defaultResult: ChartQuery = {
     market: {
       decimalPlaces: 5,
+      positionDecimalPlaces: 0,
       data: {
         priceMonitoringBounds: [priceMonitoringBound],
         __typename: 'MarketData',

libs/candles-chart/src/lib/data-source.ts

@@ -102,9 +102,11 @@ export class VegaDataSource implements DataSource {
 
       if (data && data.market && data.market.data) {
         this._decimalPlaces = data.market.decimalPlaces;
+        this._positionDecimalPlaces = data.market.positionDecimalPlaces;
 
         return {
           decimalPlaces: this._decimalPlaces,
+          positionDecimalPlaces: this._positionDecimalPlaces,
           supportedIntervals: [
             PennantInterval.I1D,
             PennantInterval.I6H,

libs/cypress/src/lib/capsule/propose-market.ts

@@ -48,7 +48,7 @@ function createNewMarketProposal(): ProposalSubmissionBody {
                       signers: [
                         {
                           pubKey: {
-                            key: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
+                            key: '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680',
                           },
                         },
                       ],

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

@@ -74,6 +74,7 @@ export const DealTicket = ({ market, submit }: DealTicketProps) => {
 
   usePersistedOrderStoreSubscription(market.id, (storedOrder) => {
     if (order.price !== storedOrder.price) {
+      clearErrors('price');
       setValue('price', storedOrder.price);
     }
   });

libs/deposits/src/lib/deposits-provider.ts

@@ -0,0 +1,49 @@
+import uniqBy from 'lodash/uniqBy';
+import orderBy from 'lodash/orderBy';
+import {
+  getEvents,
+  makeDataProvider,
+  removePaginationWrapper,
+} from '@vegaprotocol/react-helpers';
+import * as Schema from '@vegaprotocol/types';
+import {
+  DepositsDocument,
+  DepositEventDocument,
+} from './__generated__/Deposit';
+import type {
+  DepositFieldsFragment,
+  DepositsQuery,
+  DepositEventSubscription,
+  DepositEventSubscriptionVariables,
+} from './__generated__/Deposit';
+
+export const depositsProvider = makeDataProvider<
+  DepositsQuery,
+  DepositFieldsFragment[],
+  DepositEventSubscription,
+  DepositEventSubscription,
+  DepositEventSubscriptionVariables
+>({
+  query: DepositsDocument,
+  subscriptionQuery: DepositEventDocument,
+  getData: (data: DepositsQuery | null) =>
+    orderBy(
+      removePaginationWrapper(data?.party?.depositsConnection?.edges || []),
+      ['createdTimestamp'],
+      ['desc']
+    ),
+  getDelta: (data: DepositEventSubscription) => data,
+  update: (
+    data: DepositFieldsFragment[] | null,
+    delta: DepositEventSubscription
+  ) => {
+    if (!delta.busEvents?.length) {
+      return data;
+    }
+    const incoming = getEvents<DepositFieldsFragment>(
+      Schema.BusEventType.Deposit,
+      delta.busEvents
+    );
+    return uniqBy([...incoming, ...(data || [])], 'id');
+  },
+});

libs/deposits/src/lib/index.ts

@@ -5,7 +5,7 @@ export * from './deposit-limits';
 export * from './deposit-manager';
 export * from './deposits-table';
 export * from './use-deposit-balances';
-export * from './use-deposits';
+export * from './deposits-provider';
 export * from './use-get-allowance';
 export * from './use-get-balance-of-erc20-token';
 export * from './use-get-deposit-maximum';

libs/deposits/src/lib/use-deposits.ts

@@ -1,100 +0,0 @@
-import uniqBy from 'lodash/uniqBy';
-import orderBy from 'lodash/orderBy';
-import { getNodes, getEvents } from '@vegaprotocol/react-helpers';
-import type { UpdateQueryFn } from '@apollo/client/core/watchQueryOptions';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useEffect, useMemo } from 'react';
-import * as Schema from '@vegaprotocol/types';
-import {
-  useDepositsQuery,
-  DepositEventDocument,
-} from './__generated__/Deposit';
-import type {
-  DepositFieldsFragment,
-  DepositsQuery,
-  DepositEventSubscription,
-  DepositEventSubscriptionVariables,
-} from './__generated__/Deposit';
-
-export const useDeposits = () => {
-  const { pubKey } = useVegaWallet();
-  const { data, loading, error, subscribeToMore } = useDepositsQuery({
-    variables: { partyId: pubKey || '' },
-    skip: !pubKey,
-  });
-
-  const deposits = useMemo(() => {
-    if (!data?.party?.depositsConnection?.edges?.length) {
-      return [];
-    }
-
-    return orderBy(
-      getNodes<DepositFieldsFragment>(data.party?.depositsConnection),
-      ['createdTimestamp'],
-      ['desc']
-    );
-  }, [data]);
-
-  useEffect(() => {
-    if (!pubKey) return;
-
-    const unsub = subscribeToMore<
-      DepositEventSubscription,
-      DepositEventSubscriptionVariables
-    >({
-      document: DepositEventDocument,
-      variables: { partyId: pubKey },
-      updateQuery,
-    });
-
-    return () => {
-      unsub();
-    };
-  }, [pubKey, subscribeToMore]);
-
-  return { data, loading, error, deposits };
-};
-
-const updateQuery: UpdateQueryFn<
-  DepositsQuery,
-  DepositEventSubscriptionVariables,
-  DepositEventSubscription
-> = (prev, { subscriptionData, variables }) => {
-  if (!subscriptionData.data.busEvents?.length || !variables?.partyId) {
-    return prev;
-  }
-
-  const curr = getNodes<DepositFieldsFragment>(prev.party?.depositsConnection);
-  const incoming = getEvents<DepositFieldsFragment>(
-    Schema.BusEventType.Deposit,
-    subscriptionData.data.busEvents
-  );
-
-  const deposits = uniqBy([...incoming, ...curr], 'id');
-
-  if (!prev.party) {
-    return {
-      ...prev,
-      party: {
-        __typename: 'Party',
-        id: variables?.partyId,
-        depositsConnection: {
-          __typename: 'DepositsConnection',
-          edges: deposits.map((d) => ({ __typename: 'DepositEdge', node: d })),
-        },
-      },
-    };
-  }
-
-  return {
-    ...prev,
-    party: {
-      ...prev.party,
-      id: variables?.partyId,
-      depositsConnection: {
-        __typename: 'DepositsConnection',
-        edges: deposits.map((d) => ({ __typename: 'DepositEdge', node: d })),
-      },
-    },
-  };
-};

libs/environment/src/components/network-loader/network-loader.spec.tsx

@@ -46,7 +46,10 @@ describe('Network loader', () => {
     render(
       <NetworkLoader skeleton={SKELETON_TEXT}>{SUCCESS_TEXT}</NetworkLoader>
     );
-    expect(createClient).toHaveBeenCalledWith('http://vega.node', undefined);
+    expect(createClient).toHaveBeenCalledWith({
+      url: 'http://vega.node',
+      cacheConfig: undefined,
+    });
     expect(await screen.findByText(SUCCESS_TEXT)).toBeInTheDocument();
   });
 });

libs/environment/src/components/network-loader/network-loader.tsx

@@ -20,7 +20,10 @@ export function NetworkLoader({
 
   const client = useMemo(() => {
     if (VEGA_URL) {
-      return createClient(VEGA_URL, cache);
+      return createClient({
+        url: VEGA_URL,
+        cacheConfig: cache,
+      });
     }
     return undefined;
   }, [VEGA_URL, cache]);

libs/environment/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './use-environment';
 export * from './use-links';
+export * from './use-node-health';

libs/environment/src/hooks/use-config.tsx

@@ -18,6 +18,9 @@ type UseConfigOptions = {
   defaultConfig?: Configuration;
 };
 
+/**
+ * Fetch list of hosts from the VEGA_CONFIG_URL
+ */
 export const useConfig = (
   { environment, defaultConfig }: UseConfigOptions,
   onError: (errorType: ErrorType) => void

libs/environment/src/hooks/use-environment-errors.spec.tsx

@@ -101,6 +101,16 @@ beforeEach(() => {
 });
 
 describe('throws error', () => {
+  const consoleError = console.error;
+
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+
+  afterAll(() => {
+    console.error = consoleError;
+  });
+
   beforeEach(() => {
     // @ts-ignore: typescript doesn't recognize the mock implementation
     global.fetch.mockImplementation(setupFetch());
@@ -127,6 +137,7 @@ describe('throws error', () => {
   });
 
   beforeEach(() => jest.resetModules()); // clears the cache of the modules
+
   it('throws a validation error when NX_ETHERSCAN_URL is not a valid url', () => {
     process.env['NX_ETHERSCAN_URL'] = 'invalid-url';
     const result = () =>

libs/environment/src/hooks/use-environment.spec.tsx

@@ -1,7 +1,8 @@
 // having the node switcher dialog in the environment provider breaks the test renderer
 // workaround based on: https://github.com/facebook/react/issues/11565
 import type { ComponentProps, ReactNode } from 'react';
-import { renderHook, waitFor, act } from '@testing-library/react';
+import { renderHook, waitFor } from '@testing-library/react';
+import type { ClientOptions } from '@vegaprotocol/apollo-client';
 import { createClient } from '@vegaprotocol/apollo-client';
 import { useEnvironment, EnvironmentProvider } from './use-environment';
 import { Networks, ErrorType } from '../types';
@@ -32,6 +33,7 @@ const mockEnvironmentState = {
   VEGA_ENV: Networks.TESTNET,
   VEGA_CONFIG_URL: 'https://vega.xyz/testnet-config.json',
   VEGA_NETWORKS: {
+    DEVNET: 'https://devnet.url',
     TESTNET: 'https://testnet.url',
     STAGNET3: 'https://stagnet3.url',
     MAINNET: 'https://mainnet.url',
@@ -42,6 +44,10 @@ const mockEnvironmentState = {
   GIT_ORIGIN_URL: 'https://github.com/test/repo',
   GIT_COMMIT_HASH: 'abcde01234',
   GITHUB_FEEDBACK_URL: 'https://github.com/test/feedback',
+  MAINTENANCE_PAGE: false,
+  configLoading: false,
+  blockDifference: 0,
+  nodeSwitcherOpen: false,
   setNodeSwitcherOpen: noop,
   networkError: undefined,
 };
@@ -96,7 +102,7 @@ const getQuickestNode = (mockNodes: Record<string, MockRequestConfig>) => {
 };
 
 beforeEach(() => {
-  // @ts-ignore: typescript doesn't recognize the mock implementation
+  // @ts-ignore: typscript doesn't recognise the mock implementation
   global.fetch.mockImplementation(setupFetch());
 
   window.localStorage.clear();
@@ -129,6 +135,7 @@ describe('useEnvironment hook', () => {
     const { result } = renderHook(() => useEnvironment(), {
       wrapper: MockWrapper,
     });
+
     await waitFor(() => {
       expect(result.current).toEqual({
         ...mockEnvironmentState,
@@ -136,39 +143,67 @@ describe('useEnvironment hook', () => {
       });
     });
   });
-});
 
-it('allows for the VEGA_CONFIG_URL to be missing when there is a VEGA_URL present', async () => {
-  delete process.env['NX_VEGA_CONFIG_URL'];
-  const { result } = renderHook(() => useEnvironment(), {
-    wrapper: MockWrapper,
-  });
-
-  expect(result.current).toEqual({
-    ...mockEnvironmentState,
-    VEGA_CONFIG_URL: undefined,
-    setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
-  });
-});
-
-it('allows for the VEGA_NETWORKS to be missing from the environment', async () => {
-  act(async () => {
-    delete process.env['NX_VEGA_NETWORKS'];
+  it('allows for the VEGA_CONFIG_URL to be missing when there is a VEGA_URL present', async () => {
+    delete process.env['NX_VEGA_CONFIG_URL'];
     const { result } = renderHook(() => useEnvironment(), {
       wrapper: MockWrapper,
     });
     await waitFor(() => {
       expect(result.current).toEqual({
         ...mockEnvironmentState,
-        VEGA_NETWORKS: {},
+        VEGA_CONFIG_URL: undefined,
         setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
       });
     });
   });
-});
 
-it('when VEGA_NETWORKS is not a valid json, prints a warning and continues without using the value from it', async () => {
-  act(async () => {
+  it('allows for the VEGA_NETWORKS to be missing from the environment', async () => {
+    delete process.env['NX_VEGA_NETWORKS'];
+    const { result } = renderHook(() => useEnvironment(), {
+      wrapper: MockWrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).toEqual({
+        ...mockEnvironmentState,
+        VEGA_NETWORKS: {
+          TESTNET: window.location.origin,
+        },
+        setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
+      });
+    });
+  });
+
+  it('throws a validation error when NX_VEGA_ENV is not found in the environment', async () => {
+    delete process.env['NX_VEGA_ENV'];
+    const consoleError = console.error;
+    console.error = noop;
+    expect(() => {
+      renderHook(() => useEnvironment(), {
+        wrapper: MockWrapper,
+      });
+    }).toThrowError(
+      `NX_VEGA_ENV is invalid, received "undefined" instead of: 'CUSTOM' | 'SANDBOX' | 'TESTNET' | 'STAGNET1' | 'STAGNET3' | 'DEVNET' | 'MAINNET' | 'MIRROR'`
+    );
+    console.error = consoleError;
+  });
+
+  it('throws a validation error when VEGA_ENV is not a valid network', async () => {
+    process.env['NX_VEGA_ENV'] = 'SOMETHING';
+    const consoleError = console.error;
+    console.error = noop;
+    expect(() => {
+      renderHook(() => useEnvironment(), {
+        wrapper: MockWrapper,
+      });
+    }).toThrowError(
+      `NX_VEGA_ENV is invalid, received "SOMETHING" instead of: CUSTOM | SANDBOX | TESTNET | STAGNET1 | STAGNET3 | DEVNET | MAINNET | MIRROR`
+    );
+    console.error = consoleError;
+  });
+
+  it('when VEGA_NETWORKS is not a valid json, prints a warning and continues without using the value from it', async () => {
     const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(noop);
     process.env['NX_VEGA_NETWORKS'] = '{not:{valid:json';
     const { result } = renderHook(() => useEnvironment(), {
@@ -177,26 +212,56 @@ it('when VEGA_NETWORKS is not a valid json, prints a warning and continues witho
     await waitFor(() => {
       expect(result.current).toEqual({
         ...mockEnvironmentState,
-        VEGA_NETWORKS: {},
+        VEGA_NETWORKS: {
+          TESTNET: window.location.origin,
+        },
         setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
       });
     });
-
     expect(consoleWarnSpy).toHaveBeenCalled();
     consoleWarnSpy.mockRestore();
   });
-});
 
-it.each`
-  env                  | etherscanUrl                      | providerUrl
-  ${Networks.DEVNET}   | ${'https://sepolia.etherscan.io'} | ${'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
-  ${Networks.TESTNET}  | ${'https://sepolia.etherscan.io'} | ${'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
-  ${Networks.STAGNET3} | ${'https://sepolia.etherscan.io'} | ${'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
-  ${Networks.MAINNET}  | ${'https://etherscan.io'}         | ${'https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
-`(
-  'uses correct default ethereum connection variables in $env',
-  async ({ env, etherscanUrl, providerUrl }) => {
-    act(async () => {
+  it('throws a validation error when VEGA_NETWORKS has an invalid network as a key', async () => {
+    process.env['NX_VEGA_NETWORKS'] = JSON.stringify({
+      NOT_A_NETWORK: 'https://somewhere.url',
+    });
+    const consoleError = console.error;
+    console.error = noop;
+    expect(() => {
+      renderHook(() => useEnvironment(), {
+        wrapper: MockWrapper,
+      });
+    }).toThrowError(
+      `All keys in NX_VEGA_NETWORKS must represent a valid environment: CUSTOM | SANDBOX | TESTNET | STAGNET1 | STAGNET3 | DEVNET | MAINNET | MIRROR`
+    );
+    console.error = consoleError;
+  });
+
+  it('throws a validation error when both VEGA_URL and VEGA_CONFIG_URL are missing in the environment', async () => {
+    delete process.env['NX_VEGA_URL'];
+    delete process.env['NX_VEGA_CONFIG_URL'];
+    const consoleError = console.error;
+    console.error = noop;
+    expect(() => {
+      renderHook(() => useEnvironment(), {
+        wrapper: MockWrapper,
+      });
+    }).toThrowError(
+      `Must provide either NX_VEGA_CONFIG_URL or NX_VEGA_URL in the environment.`
+    );
+    console.error = consoleError;
+  });
+
+  it.each`
+    env                  | etherscanUrl                      | providerUrl
+    ${Networks.DEVNET}   | ${'https://sepolia.etherscan.io'} | ${'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
+    ${Networks.TESTNET}  | ${'https://sepolia.etherscan.io'} | ${'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
+    ${Networks.STAGNET3} | ${'https://sepolia.etherscan.io'} | ${'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
+    ${Networks.MAINNET}  | ${'https://etherscan.io'}         | ${'https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'}
+  `(
+    'uses correct default ethereum connection variables in $env',
+    async ({ env, etherscanUrl, providerUrl }) => {
       // @ts-ignore allow adding a mock return value to mocked module
       createClient.mockImplementation(() => createMockClient({ network: env }));
 
@@ -215,13 +280,39 @@ it.each`
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
         });
       });
-    });
-  }
-);
+    }
+  );
 
-describe('node selection', () => {
-  it('updates the VEGA_URL from the config when it is missing from the environment', async () => {
-    act(async () => {
+  it('throws a validation error when NX_ETHERSCAN_URL is not a valid url', async () => {
+    process.env['NX_ETHERSCAN_URL'] = 'invalid-url';
+    const consoleError = console.error;
+    console.error = noop;
+    expect(() => {
+      renderHook(() => useEnvironment(), {
+        wrapper: MockWrapper,
+      });
+    }).toThrowError(
+      `The NX_ETHERSCAN_URL environment variable must be a valid url`
+    );
+    console.error = consoleError;
+  });
+
+  it('throws a validation error when NX_ETHEREUM_PROVIDER_URL is not a valid url', async () => {
+    process.env['NX_ETHEREUM_PROVIDER_URL'] = 'invalid-url';
+    const consoleError = console.error;
+    console.error = noop;
+    expect(() => {
+      renderHook(() => useEnvironment(), {
+        wrapper: MockWrapper,
+      });
+    }).toThrow(
+      `The NX_ETHEREUM_PROVIDER_URL environment variable must be a valid url`
+    );
+    console.error = consoleError;
+  });
+
+  describe('node selection', () => {
+    it('updates the VEGA_URL from the config when it is missing from the environment', async () => {
       delete process.env['NX_VEGA_URL'];
       const { result } = renderHook(() => useEnvironment(), {
         wrapper: MockWrapper,
@@ -235,10 +326,9 @@ describe('node selection', () => {
         });
       });
     });
-  });
 
-  it('updates the VEGA_URL with the quickest node to respond from the config urls', async () => {
-    act(async () => {
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('updates the VEGA_URL with the quickest node to respond from the config urls', async () => {
       delete process.env['NX_VEGA_URL'];
 
       const mockNodes: Record<string, MockRequestConfig> = {
@@ -248,13 +338,14 @@ describe('node selection', () => {
         'https://mock-node-4.com': { hasError: false, delay: 0 },
       };
 
-      // @ts-ignore: typescript doesn't recognize the mock implementation
+      // @ts-ignore: typscript doesn't recognise the mock implementation
       global.fetch.mockImplementation(
         setupFetch(mockEnvironmentState.VEGA_CONFIG_URL, Object.keys(mockNodes))
       );
       // @ts-ignore allow adding a mock return value to mocked module
-      createClient.mockImplementation((url: keyof typeof mockNodes) => {
-        return createMockClient({ statistics: mockNodes[url] });
+      createClient.mockImplementation((cfg: ClientOptions) => {
+        // eslint-disable-next-line
+        return createMockClient({ statistics: mockNodes[cfg.url!] });
       });
 
       const nodeUrl = getQuickestNode(mockNodes);
@@ -271,10 +362,8 @@ describe('node selection', () => {
         });
       });
     });
-  });
 
-  it('ignores failing nodes and selects the first successful one to use', async () => {
-    act(async () => {
+    it('ignores failing nodes and selects the first successful one to use', async () => {
       delete process.env['NX_VEGA_URL'];
 
       const mockNodes: Record<string, MockRequestConfig> = {
@@ -284,13 +373,14 @@ describe('node selection', () => {
         'https://mock-node-4.com': { hasError: true, delay: 0 },
       };
 
-      // @ts-ignore: typescript doesn't recognize the mock implementation
+      // @ts-ignore: typscript doesn't recognise the mock implementation
       global.fetch.mockImplementation(
         setupFetch(mockEnvironmentState.VEGA_CONFIG_URL, Object.keys(mockNodes))
       );
       // @ts-ignore allow adding a mock return value to mocked module
-      createClient.mockImplementation((url: keyof typeof mockNodes) => {
-        return createMockClient({ statistics: mockNodes[url] });
+      createClient.mockImplementation((cfg: ClientOptions) => {
+        // eslint-disable-next-line
+        return createMockClient({ statistics: mockNodes[cfg.url!] });
       });
 
       const nodeUrl = getQuickestNode(mockNodes);
@@ -307,10 +397,8 @@ describe('node selection', () => {
         });
       });
     });
-  });
 
-  it('has a network error when cannot connect to any nodes', async () => {
-    act(async () => {
+    it('has a network error when cannot connect to any nodes', async () => {
       delete process.env['NX_VEGA_URL'];
 
       const mockNodes: Record<string, MockRequestConfig> = {
@@ -320,13 +408,14 @@ describe('node selection', () => {
         'https://mock-node-4.com': { hasError: true, delay: 0 },
       };
 
-      // @ts-ignore: typescript doesn't recognize the mock implementation
+      // @ts-ignore: typscript doesn't recognise the mock implementation
       global.fetch.mockImplementation(
         setupFetch(mockEnvironmentState.VEGA_CONFIG_URL, Object.keys(mockNodes))
       );
       // @ts-ignore allow adding a mock return value to mocked module
-      createClient.mockImplementation((url: keyof typeof mockNodes) => {
-        return createMockClient({ statistics: mockNodes[url] });
+      createClient.mockImplementation((cfg: ClientOptions) => {
+        // eslint-disable-next-line
+        return createMockClient({ statistics: mockNodes[cfg.url!] });
       });
 
       const { result } = renderHook(() => useEnvironment(), {
@@ -338,17 +427,16 @@ describe('node selection', () => {
           ...mockEnvironmentState,
           VEGA_URL: undefined,
           networkError: ErrorType.CONNECTION_ERROR_ALL,
+          nodeSwitcherOpen: true,
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
         });
       });
     });
-  });
 
-  it('has a network error when it cannot fetch the network config and there is no VEGA_URL in the environment', async () => {
-    act(async () => {
+    it('has a network error when it cannot fetch the network config and there is no VEGA_URL in the environment', async () => {
       delete process.env['NX_VEGA_URL'];
 
-      // @ts-ignore: typescript doesn't recognize the mock implementation
+      // @ts-ignore: typscript doesn't recognise the mock implementation
       global.fetch.mockImplementation(() => {
         throw new Error('Cannot fetch');
       });
@@ -362,19 +450,18 @@ describe('node selection', () => {
           ...mockEnvironmentState,
           VEGA_URL: undefined,
           networkError: ErrorType.CONFIG_LOAD_ERROR,
+          nodeSwitcherOpen: true,
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
         });
       });
     });
-  });
 
-  it('logs an error when it cannot fetch the network config and there is a VEGA_URL in the environment', async () => {
-    act(async () => {
+    it('logs an error when it cannot fetch the network config and there is a VEGA_URL in the environment', async () => {
       const consoleWarnSpy = jest
         .spyOn(console, 'warn')
         .mockImplementation(noop);
 
-      // @ts-ignore: typescript doesn't recognize the mock implementation
+      // @ts-ignore: typscript doesn't recognise the mock implementation
       global.fetch.mockImplementation(() => {
         throw new Error('Cannot fetch');
       });
@@ -386,6 +473,7 @@ describe('node selection', () => {
       await waitFor(() => {
         expect(result.current).toEqual({
           ...mockEnvironmentState,
+          nodeSwitcherOpen: false,
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
         });
         expect(consoleWarnSpy).toHaveBeenCalledWith(
@@ -396,15 +484,13 @@ describe('node selection', () => {
         );
       });
     });
-  });
 
-  // SKIP due to https://github.com/facebook/jest/issues/12670
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('has a network error when the config is invalid and there is no VEGA_URL in the environment', async () => {
-    act(async () => {
+    // SKIP due to https://github.com/facebook/jest/issues/12670
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('has a network error when the config is invalid and there is no VEGA_URL in the environment', async () => {
       delete process.env['NX_VEGA_URL'];
 
-      // @ts-ignore: typescript doesn't recognize the mock implementation
+      // @ts-ignore: typscript doesn't recognise the mock implementation
       global.fetch.mockImplementation(() =>
         Promise.resolve({
           ok: true,
@@ -421,21 +507,20 @@ describe('node selection', () => {
           ...mockEnvironmentState,
           VEGA_URL: undefined,
           networkError: ErrorType.CONFIG_VALIDATION_ERROR,
+          nodeSwitcherOpen: true,
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
         });
       });
     });
-  });
 
-  // SKIP due to https://github.com/facebook/jest/issues/12670
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('logs an error when the network config in invalid and there is a VEGA_URL in the environment', async () => {
-    act(async () => {
+    // SKIP due to https://github.com/facebook/jest/issues/12670
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('logs an error when the network config is invalid and there is a VEGA_URL in the environment', async () => {
       const consoleWarnSpy = jest
         .spyOn(console, 'warn')
         .mockImplementation(noop);
 
-      // @ts-ignore: typescript doesn't recognize the mock implementation
+      // @ts-ignore: typscript doesn't recognise the mock implementation
       global.fetch.mockImplementation(() =>
         Promise.resolve({
           ok: true,
@@ -447,6 +532,8 @@ describe('node selection', () => {
         wrapper: MockWrapper,
       });
 
+      expect(result.current.configLoading).toBe(true);
+
       await waitFor(() => {
         expect(result.current).toEqual({
           ...mockEnvironmentState,
@@ -460,12 +547,8 @@ describe('node selection', () => {
         );
       });
     });
-  });
 
-  // SKIP due to https://github.com/facebook/jest/issues/12670
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('has a network error when the selected node is not a valid url', async () => {
-    act(async () => {
+    it('has a network error when the selected node is not a valid url', async () => {
       process.env['NX_VEGA_URL'] = 'not-url';
 
       const { result } = renderHook(() => useEnvironment(), {
@@ -475,15 +558,15 @@ describe('node selection', () => {
       await waitFor(() => {
         expect(result.current).toEqual({
           ...mockEnvironmentState,
+          VEGA_URL: 'not-url',
+          nodeSwitcherOpen: true,
           networkError: ErrorType.INVALID_URL,
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
         });
       });
     });
-  });
 
-  it('has a network error when cannot connect to the selected node', async () => {
-    act(async () => {
+    it('has a network error when cannot connect to the selected node', async () => {
       // @ts-ignore allow adding a mock return value to mocked module
       createClient.mockImplementation(() => {
         return createMockClient({ statistics: { hasError: true } });
@@ -496,15 +579,14 @@ describe('node selection', () => {
       await waitFor(() => {
         expect(result.current).toEqual({
           ...mockEnvironmentState,
+          nodeSwitcherOpen: true,
           networkError: ErrorType.CONNECTION_ERROR,
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
         });
       });
     });
-  });
 
-  it('has a network error when the selected node has not subscription available', async () => {
-    act(async () => {
+    it('has a network error when the selected node has no subscription available', async () => {
       // @ts-ignore allow adding a mock return value to mocked module
       createClient.mockImplementation(() => {
         return createMockClient({ busEvents: { hasError: true } });
@@ -519,6 +601,7 @@ describe('node selection', () => {
           ...mockEnvironmentState,
           networkError: ErrorType.SUBSCRIPTION_ERROR,
           setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
+          nodeSwitcherOpen: true,
         });
       });
     });

libs/environment/src/hooks/use-environment.tsx

@@ -25,6 +25,7 @@ import type {
   NodeData,
   Configuration,
 } from '../types';
+import { useNodeHealth } from './use-node-health';
 
 type EnvironmentProviderProps = {
   config?: Configuration;
@@ -33,7 +34,10 @@ type EnvironmentProviderProps = {
 };
 
 export type EnvironmentState = Environment & {
+  configLoading: boolean;
   networkError?: ErrorType;
+  blockDifference: number;
+  nodeSwitcherOpen: boolean;
   setNodeSwitcherOpen: () => void;
 };
 
@@ -76,10 +80,14 @@ export const EnvironmentProvider = ({
       }
     }
   );
+
   const { state: nodes, clients } = useNodes(
     config,
     environment.MAINTENANCE_PAGE
   );
+
+  const blockDifference = useNodeHealth(clients, environment.VEGA_URL);
+
   const nodeKeys = Object.keys(nodes);
 
   useEffect(() => {
@@ -89,9 +97,10 @@ export const EnvironmentProvider = ({
       );
       if (successfulNodeKey && nodes[successfulNodeKey]) {
         Object.keys(clients).forEach((node) => clients[node]?.stop());
+        const url = nodes[successfulNodeKey].url;
         updateEnvironment((prevEnvironment) => ({
           ...prevEnvironment,
-          VEGA_URL: nodes[successfulNodeKey].url,
+          VEGA_URL: url,
         }));
       }
     }
@@ -139,7 +148,10 @@ export const EnvironmentProvider = ({
     <EnvironmentContext.Provider
       value={{
         ...environment,
+        configLoading: loading,
         networkError,
+        blockDifference,
+        nodeSwitcherOpen: isNodeSwitcherOpen,
         setNodeSwitcherOpen: () => setNodeSwitcherOpen(true),
       }}
     >
@@ -149,9 +161,9 @@ export const EnvironmentProvider = ({
         setDialogOpen={setNodeSwitcherOpen}
         loading={loading}
         config={config}
-        onConnect={(url) =>
-          updateEnvironment((env) => ({ ...env, VEGA_URL: url }))
-        }
+        onConnect={(url) => {
+          updateEnvironment((env) => ({ ...env, VEGA_URL: url }));
+        }}
       />
       {children}
     </EnvironmentContext.Provider>

libs/environment/src/hooks/use-node-health.spec.tsx

@@ -0,0 +1,117 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+  useNodeHealth,
+  NODE_SUBSET_COUNT,
+  INTERVAL_TIME,
+} from './use-node-health';
+import type { createClient } from '@vegaprotocol/apollo-client';
+import type { ClientCollection } from './use-nodes';
+
+function setup(...args: Parameters<typeof useNodeHealth>) {
+  return renderHook(() => useNodeHealth(...args));
+}
+
+function createMockClient(blockHeight: number) {
+  return {
+    query: jest.fn().mockResolvedValue({
+      data: {
+        statistics: {
+          chainId: 'chain-id',
+          blockHeight: blockHeight.toString(),
+        },
+      },
+    }),
+  } as unknown as ReturnType<typeof createClient>;
+}
+
+function createRejectingClient() {
+  return {
+    query: () => Promise.reject(new Error('request failed')),
+  } as unknown as ReturnType<typeof createClient>;
+}
+
+function createErroringClient() {
+  return {
+    query: () =>
+      Promise.resolve({
+        error: new Error('failed'),
+      }),
+  } as unknown as ReturnType<typeof createClient>;
+}
+
+const CURRENT_URL = 'https://current.test.com';
+
+describe('useNodeHealth', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  it('provides difference between the highest block and the current block', async () => {
+    const highest = 100;
+    const curr = 97;
+    const clientCollection: ClientCollection = {
+      [CURRENT_URL]: createMockClient(curr),
+      'https://n02.test.com': createMockClient(98),
+      'https://n03.test.com': createMockClient(highest),
+    };
+    const { result } = setup(clientCollection, CURRENT_URL);
+    await act(async () => {
+      jest.advanceTimersByTime(INTERVAL_TIME);
+    });
+    expect(result.current).toBe(highest - curr);
+  });
+
+  it('returns -1 if the current node query fails', async () => {
+    const clientCollection: ClientCollection = {
+      [CURRENT_URL]: createRejectingClient(),
+      'https://n02.test.com': createMockClient(200),
+      'https://n03.test.com': createMockClient(102),
+    };
+    const { result } = setup(clientCollection, CURRENT_URL);
+    await act(async () => {
+      jest.advanceTimersByTime(INTERVAL_TIME);
+    });
+    expect(result.current).toBe(-1);
+  });
+
+  it('returns -1 if the current node query returns an error', async () => {
+    const clientCollection: ClientCollection = {
+      [CURRENT_URL]: createErroringClient(),
+      'https://n02.test.com': createMockClient(200),
+      'https://n03.test.com': createMockClient(102),
+    };
+    const { result } = setup(clientCollection, CURRENT_URL);
+    await act(async () => {
+      jest.advanceTimersByTime(INTERVAL_TIME);
+    });
+    expect(result.current).toBe(-1);
+  });
+
+  it('queries against 5 random nodes along with the current url', async () => {
+    const clientCollection: ClientCollection = new Array(20)
+      .fill(null)
+      .reduce((obj, x, i) => {
+        obj[`https://n${i}.test.com`] = createMockClient(100);
+        return obj;
+      }, {} as ClientCollection);
+    clientCollection[CURRENT_URL] = createMockClient(100);
+    const spyOnCurrent = jest.spyOn(clientCollection[CURRENT_URL], 'query');
+
+    const { result } = setup(clientCollection, CURRENT_URL);
+    await act(async () => {
+      jest.advanceTimersByTime(INTERVAL_TIME);
+    });
+
+    let count = 0;
+    Object.values(clientCollection).forEach((client) => {
+      // @ts-ignore jest.fn() in client setup means mock will be present
+      if (client?.query.mock.calls.length) {
+        count++;
+      }
+    });
+
+    expect(count).toBe(NODE_SUBSET_COUNT + 1);
+    expect(spyOnCurrent).toHaveBeenCalledTimes(1);
+    expect(result.current).toBe(0);
+  });
+});

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

@@ -0,0 +1,88 @@
+import compact from 'lodash/compact';
+import shuffle from 'lodash/shuffle';
+import type { createClient } from '@vegaprotocol/apollo-client';
+import { useEffect, useState } from 'react';
+import type { StatisticsQuery } from '../utils/__generated__/Node';
+import { StatisticsDocument } from '../utils/__generated__/Node';
+import type { ClientCollection } from './use-nodes';
+
+// How often to query other nodes
+export const INTERVAL_TIME = 30 * 1000;
+// Number of nodes to query against
+export const NODE_SUBSET_COUNT = 5;
+
+// Queries all nodes from the environment provider via an interval
+// to calculate and return the difference between the most advanced block
+// and the block height of the current node
+export const useNodeHealth = (clients: ClientCollection, vegaUrl?: string) => {
+  const [blockDiff, setBlockDiff] = useState(0);
+
+  useEffect(() => {
+    if (!clients || !vegaUrl) return;
+
+    const fetchBlockHeight = async (
+      client?: ReturnType<typeof createClient>
+    ) => {
+      try {
+        const result = await client?.query<StatisticsQuery>({
+          query: StatisticsDocument,
+          fetchPolicy: 'no-cache', // always fetch and never cache
+        });
+
+        if (!result) return null;
+        if (result.error) return null;
+        return result;
+      } catch {
+        return null;
+      }
+    };
+
+    const getBlockHeights = async () => {
+      const nodes = Object.keys(clients).filter((key) => key !== vegaUrl);
+      // make sure that your current vega url is always included
+      // so we can compare later
+      const testNodes = [vegaUrl, ...randomSubset(nodes, NODE_SUBSET_COUNT)];
+      const result = await Promise.all(
+        testNodes.map((node) => fetchBlockHeight(clients[node]))
+      );
+      const blockHeights: { [node: string]: number | null } = {};
+      testNodes.forEach((node, i) => {
+        const data = result[i];
+        const blockHeight = data
+          ? Number(data?.data.statistics.blockHeight)
+          : null;
+        blockHeights[node] = blockHeight;
+      });
+      return blockHeights;
+    };
+
+    // Every INTERVAL_TIME get block heights of a random subset
+    // of nodes and determine if your current node is falling behind
+    const interval = setInterval(async () => {
+      const blockHeights = await getBlockHeights();
+      const highestBlock = Math.max.apply(
+        null,
+        compact(Object.values(blockHeights))
+      );
+      const currNodeBlock = blockHeights[vegaUrl];
+
+      if (!currNodeBlock) {
+        // Block height query failed and null was returned
+        setBlockDiff(-1);
+      } else {
+        setBlockDiff(highestBlock - currNodeBlock);
+      }
+    }, INTERVAL_TIME);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [clients, vegaUrl]);
+
+  return blockDiff;
+};
+
+const randomSubset = (arr: string[], size: number) => {
+  const shuffled = shuffle(arr);
+  return shuffled.slice(0, size);
+};

libs/environment/src/hooks/use-nodes.tsx

@@ -74,7 +74,7 @@ const getInitialState = (config?: Configuration) =>
     {}
   );
 
-type ClientCollection = Record<
+export type ClientCollection = Record<
   string,
   undefined | ReturnType<typeof createClient>
 >;
@@ -178,6 +178,10 @@ const reducer = (state: Record<string, NodeData>, action: Action) => {
   }
 };
 
+/**
+ * Tests each node to see if its suitable for connecting to and returns that data
+ * as a map of node urls to an object of that data
+ */
 export const useNodes = (config?: Configuration, skip?: boolean) => {
   const [clients, setClients] = useState<ClientCollection>({});
   const [state, dispatch] = useReducer(reducer, getInitialState(config));

libs/environment/src/utils/compile-environment.ts

@@ -83,9 +83,7 @@ const getBundledEnvironmentValue = (key: EnvKey) => {
     case 'ETH_WALLET_MNEMONIC':
       return process.env['NX_ETH_WALLET_MNEMONIC'];
     case 'MAINTENANCE_PAGE':
-      return (
-        process.env['MAINTENANCE_PAGE'] || process.env['NX_MAINTENANCE_PAGE']
-      );
+      return process.env['NX_MAINTENANCE_PAGE'];
   }
 };
 
@@ -110,7 +108,7 @@ export const compileEnvironment = (
   const environment = ENV_KEYS.reduce((acc, key) => {
     const value = getValue(key, definitions);
 
-    if (value) {
+    if (value !== undefined && value !== null) {
       return {
         ...acc,
         [key]: value,

libs/environment/src/utils/request-node.ts

@@ -38,7 +38,11 @@ export const requestNode = (
 
   let subscriptionSucceeded = false;
 
-  const client = createClient(url);
+  const client = createClient({
+    url,
+    retry: false,
+    connectToDevTools: false,
+  });
 
   // make a query for block height
   client

libs/fills/src/lib/fills-data-provider.ts

@@ -59,8 +59,8 @@ const update = (
 export type Trade = Omit<FillFieldsFragment, 'market'> & { market?: Market };
 export type TradeEdge = Edge<Trade>;
 
-const getData = (responseData: FillsQuery): FillEdgeFragment[] =>
-  responseData.party?.tradesConnection?.edges || [];
+const getData = (responseData: FillsQuery | null): FillEdgeFragment[] =>
+  responseData?.party?.tradesConnection?.edges || [];
 
 const getPageInfo = (responseData: FillsQuery): PageInfo | null =>
   responseData.party?.tradesConnection?.pageInfo || null;

libs/governance/src/lib/proposals-data-provider/proposals-data-provider.tsx

@@ -5,8 +5,8 @@ import type {
 } from './__generated__/Proposals';
 import { ProposalsListDocument } from './__generated__/Proposals';
 
-const getData = (responseData: ProposalsListQuery) =>
-  responseData.proposalsConnection?.edges
+const getData = (responseData: ProposalsListQuery | null) =>
+  responseData?.proposalsConnection?.edges
     ?.filter((edge) => Boolean(edge?.node))
     .map((edge) => edge?.node as ProposalListFieldsFragment) || null;
 

libs/ledger/src/lib/ledger-entries-data-provider.ts

@@ -35,12 +35,12 @@ export type LedgerEntry = LedgerEntryFragment & {
 
 export type AggregatedLedgerEntriesEdge = Schema.AggregatedLedgerEntriesEdge;
 
-const getData = (responseData: LedgerEntriesQuery) => {
-  return responseData.ledgerEntries?.edges || [];
+const getData = (responseData: LedgerEntriesQuery | null) => {
+  return responseData?.ledgerEntries?.edges || [];
 };
 
 export const update = (
-  data: ReturnType<typeof getData>,
+  data: ReturnType<typeof getData> | null,
   delta: ReturnType<typeof getData>,
   reload: () => void,
   variables?: LedgerEntriesQueryVariables

libs/liquidity/src/lib/liquidity-data-provider.ts

@@ -35,10 +35,10 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
   query: LiquidityProvisionsDocument,
   subscriptionQuery: LiquidityProvisionsUpdateDocument,
   update: (
-    data: LiquidityProvisionFieldsFragment[],
+    data: LiquidityProvisionFieldsFragment[] | null,
     deltas: LiquidityProvisionsUpdateSubscription['liquidityProvisions']
   ) => {
-    return produce(data, (draft) => {
+    return produce(data || [], (draft) => {
       deltas?.forEach((delta) => {
         const id = getId(delta);
         const index = draft.findIndex((a) => getId(a) === id);
@@ -63,9 +63,9 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
       });
     });
   },
-  getData: (responseData: LiquidityProvisionsQuery) => {
+  getData: (responseData: LiquidityProvisionsQuery | null) => {
     return (
-      responseData.market?.liquidityProvisionsConnection?.edges?.map(
+      responseData?.market?.liquidityProvisionsConnection?.edges?.map(
         (e) => e?.node
       ) ?? []
     ).filter((e) => !!e) as LiquidityProvisionFieldsFragment[];
@@ -105,7 +105,7 @@ export const marketLiquidityDataProvider = makeDataProvider<
   never
 >({
   query: MarketLpDocument,
-  getData: (responseData: MarketLpQuery) => {
+  getData: (responseData: MarketLpQuery | null) => {
     return responseData;
   },
 });
@@ -119,10 +119,10 @@ export const liquidityFeeShareDataProvider = makeDataProvider<
   query: LiquidityProviderFeeShareDocument,
   subscriptionQuery: LiquidityProviderFeeShareUpdateDocument,
   update: (
-    data: LiquidityProviderFeeShareFieldsFragment[],
+    data: LiquidityProviderFeeShareFieldsFragment[] | null,
     deltas: LiquidityProviderFeeShareUpdateSubscription['marketsData'][0]['liquidityProviderFeeShare']
   ) => {
-    return produce(data, (draft) => {
+    return produce(data || [], (draft) => {
       deltas?.forEach((delta) => {
         const id = delta.partyId;
         const index = draft.findIndex((a) => a.party.id === id);
@@ -143,7 +143,7 @@ export const liquidityFeeShareDataProvider = makeDataProvider<
     });
   },
   getData: (data) => {
-    return data.market?.data?.liquidityProviderFeeShare || [];
+    return data?.market?.data?.liquidityProviderFeeShare || [];
   },
   getDelta: (subscriptionData: LiquidityProviderFeeShareUpdateSubscription) => {
     return subscriptionData.marketsData[0].liquidityProviderFeeShare;

libs/liquidity/src/lib/markets-liquidity-provider.ts

@@ -58,7 +58,7 @@ export interface Markets {
 }
 
 const getData = (
-  responseData: LiquidityProvisionMarketsQuery
+  responseData: LiquidityProvisionMarketsQuery | null
 ): LiquidityProvisionMarket[] | null => {
   return (
     responseData?.marketsConnection?.edges.map((edge) => {

libs/market-depth/src/lib/market-depth-provider.ts

@@ -53,7 +53,7 @@ export const update: Update<
   return data;
 };
 
-const getData = (responseData: MarketDepthQuery) => responseData.market;
+const getData = (responseData: MarketDepthQuery | null) => responseData?.market;
 
 const getDelta = (subscriptionData: MarketDepthUpdateSubscription) =>
   subscriptionData.marketsDepthUpdate;

libs/market-info/src/components/market-info/market-info-data-provider.ts

@@ -9,5 +9,5 @@ export const marketInfoDataProvider = makeDataProvider<
   never
 >({
   query: MarketInfoDocument,
-  getData: (responseData: MarketInfoQuery) => responseData,
+  getData: (responseData: MarketInfoQuery | null) => responseData,
 });

libs/market-list/src/lib/market-candles-provider.ts

@@ -24,7 +24,7 @@ export const update = (data: Candle[] | null, delta: Candle) => {
   return [delta];
 };
 
-const getData = (responseData: MarketCandlesQuery): Candle[] | null =>
+const getData = (responseData: MarketCandlesQuery | null): Candle[] | null =>
   responseData?.marketsConnection?.edges[0]?.node.candlesConnection?.edges
     ?.filter((edge) => edge?.node)
     .map((edge) => edge?.node as Candle) || null;

libs/market-list/src/lib/market-data-provider.ts

@@ -18,14 +18,20 @@ import type {
 
 export type MarketData = MarketDataFieldsFragment;
 
-const update = (data: MarketData, delta: MarketDataUpdateFieldsFragment) => {
-  return produce(data, (draft) => {
-    const { marketId, __typename, ...marketData } = delta;
-    Object.assign(draft, marketData);
-  });
+const update = (
+  data: MarketData | null,
+  delta: MarketDataUpdateFieldsFragment
+) => {
+  return (
+    data &&
+    produce(data, (draft) => {
+      const { marketId, __typename, ...marketData } = delta;
+      Object.assign(draft, marketData);
+    })
+  );
 };
 
-const getData = (responseData: MarketDataQuery): MarketData | null =>
+const getData = (responseData: MarketDataQuery | null): MarketData | null =>
   responseData?.marketsConnection?.edges[0].node.data || null;
 
 const getDelta = (

libs/market-list/src/lib/market-provider.ts

@@ -11,7 +11,7 @@ import type { MarketData } from './market-data-provider';
 import { marketDataProvider } from './market-data-provider';
 
 const getData = (
-  responseData: MarketQuery
+  responseData: MarketQuery | null
 ): SingleMarketFieldsFragment | null => responseData?.market || null;
 
 export const marketProvider = makeDataProvider<

libs/market-list/src/lib/markets-candles-provider.ts

@@ -8,7 +8,9 @@ export interface MarketCandles {
   candles: Candle[] | undefined;
 }
 
-const getData = (responseData: MarketsCandlesQuery): MarketCandles[] | null =>
+const getData = (
+  responseData: MarketsCandlesQuery | null
+): MarketCandles[] | null =>
   responseData?.marketsConnection?.edges.map((edge) => ({
     marketId: edge.node.id,
     candles: edge.node.candlesConnection?.edges

libs/market-list/src/lib/markets-data-provider.ts

@@ -3,8 +3,8 @@ import type { MarketsDataQuery } from './__generated__/markets-data';
 import { MarketsDataDocument } from './__generated__/markets-data';
 import type { MarketData } from './market-data-provider';
 
-const getData = (responseData: MarketsDataQuery): MarketData[] | null =>
-  responseData.marketsConnection?.edges
+const getData = (responseData: MarketsDataQuery | null): MarketData[] | null =>
+  responseData?.marketsConnection?.edges
     .filter((edge) => edge.node.data)
     .map((edge) => edge.node.data as MarketData) || null;
 

libs/market-list/src/lib/markets-provider.ts

@@ -21,7 +21,7 @@ import type { Candle } from './market-candles-provider';
 
 export type Market = MarketFieldsFragment;
 
-const getData = (responseData: MarketsQuery): Market[] | null =>
+const getData = (responseData: MarketsQuery | null): Market[] | null =>
   responseData?.marketsConnection?.edges.map((edge) => edge.node) || null;
 
 export const marketsProvider = makeDataProvider<

libs/orders/src/lib/components/order-data-provider/order-data-provider.spec.ts

@@ -62,7 +62,7 @@ describe('order data provider', () => {
     expect(updatedData && updatedData[1].node.updatedAt).toEqual(
       delta[4].updatedAt
     );
-    expect(update([], delta, () => null, { partyId: '0x123' }).length).toEqual(
+    expect(update([], delta, () => null, { partyId: '0x123' })?.length).toEqual(
       4
     );
   });

libs/orders/src/lib/components/order-data-provider/order-data-provider.ts

@@ -71,7 +71,7 @@ const orderMatchFilters = (
   return true;
 };
 
-const getData = (responseData: OrdersQuery) =>
+const getData = (responseData: OrdersQuery | null) =>
   responseData?.party?.ordersConnection?.edges || [];
 
 const getDelta = (subscriptionData: OrdersUpdateSubscription) =>
@@ -81,7 +81,7 @@ const getPageInfo = (responseData: OrdersQuery): PageInfo | null =>
   responseData.party?.ordersConnection?.pageInfo || null;
 
 export const update = (
-  data: ReturnType<typeof getData>,
+  data: ReturnType<typeof getData> | null,
   delta: ReturnType<typeof getDelta>,
   reload: () => void,
   variables?: OrdersQueryVariables

libs/positions/src/lib/margin-data-provider.ts

@@ -1,64 +1,63 @@
 import produce from 'immer';
-import { makeDataProvider } from '@vegaprotocol/react-helpers';
+import {
+  makeDataProvider,
+  removePaginationWrapper,
+} from '@vegaprotocol/react-helpers';
 import {
   MarginsSubscriptionDocument,
   MarginsDocument,
 } from './__generated__/Positions';
 import type {
   MarginsQuery,
+  MarginFieldsFragment,
   MarginsSubscriptionSubscription,
 } from './__generated__/Positions';
 
 const update = (
-  data: MarginsQuery['party'],
+  data: MarginFieldsFragment[] | null,
   delta: MarginsSubscriptionSubscription['margins']
 ) => {
-  return produce(data, (draft) => {
+  return produce(data || [], (draft) => {
     const { marketId } = delta;
-    if (marketId && draft?.marginsConnection?.edges) {
-      const index = draft.marginsConnection.edges.findIndex(
-        (edge) => edge.node.market.id === marketId
-      );
-      if (index !== -1) {
-        const currNode = draft.marginsConnection.edges[index].node;
-        draft.marginsConnection.edges[index].node = {
-          ...currNode,
-          maintenanceLevel: delta.maintenanceLevel,
-          searchLevel: delta.searchLevel,
-          initialLevel: delta.initialLevel,
-          collateralReleaseLevel: delta.collateralReleaseLevel,
-        };
-      } else {
-        draft.marginsConnection.edges.unshift({
-          __typename: 'MarginEdge',
-          node: {
-            __typename: 'MarginLevels',
-            market: {
-              __typename: 'Market',
-              id: delta.marketId,
-            },
-            maintenanceLevel: delta.maintenanceLevel,
-            searchLevel: delta.searchLevel,
-            initialLevel: delta.initialLevel,
-            collateralReleaseLevel: delta.collateralReleaseLevel,
-            asset: {
-              __typename: 'Asset',
-              id: delta.asset,
-            },
-          },
-        });
-      }
+    const index = draft.findIndex((node) => node.market.id === marketId);
+    if (index !== -1) {
+      const currNode = draft[index];
+      draft[index] = {
+        ...currNode,
+        maintenanceLevel: delta.maintenanceLevel,
+        searchLevel: delta.searchLevel,
+        initialLevel: delta.initialLevel,
+        collateralReleaseLevel: delta.collateralReleaseLevel,
+      };
+    } else {
+      draft.unshift({
+        __typename: 'MarginLevels',
+        market: {
+          __typename: 'Market',
+          id: delta.marketId,
+        },
+        maintenanceLevel: delta.maintenanceLevel,
+        searchLevel: delta.searchLevel,
+        initialLevel: delta.initialLevel,
+        collateralReleaseLevel: delta.collateralReleaseLevel,
+        asset: {
+          __typename: 'Asset',
+          id: delta.asset,
+        },
+      });
     }
   });
 };
 
-const getData = (responseData: MarginsQuery) => responseData.party;
+const getData = (responseData: MarginsQuery | null) =>
+  removePaginationWrapper(responseData?.party?.marginsConnection?.edges) || [];
+
 const getDelta = (subscriptionData: MarginsSubscriptionSubscription) =>
   subscriptionData.margins;
 
 export const marginsDataProvider = makeDataProvider<
   MarginsQuery,
-  MarginsQuery['party'],
+  MarginFieldsFragment[],
   MarginsSubscriptionSubscription,
   MarginsSubscriptionSubscription['margins']
 >({

libs/positions/src/lib/positions-data-providers.spec.ts

@@ -1,7 +1,10 @@
 import * as Schema from '@vegaprotocol/types';
 import type { Account } from '@vegaprotocol/accounts';
 import type { MarketWithData } from '@vegaprotocol/market-list';
-import type { PositionsQuery, MarginsQuery } from './__generated__/Positions';
+import type {
+  PositionFieldsFragment,
+  MarginFieldsFragment,
+} from './__generated__/Positions';
 import { getMetrics, rejoinPositionData } from './positions-data-providers';
 
 const accounts = [
@@ -63,47 +66,32 @@ const accounts = [
   },
 ] as Account[];
 
-const positions: PositionsQuery = {
-  party: {
-    __typename: 'Party',
-    id: '02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65',
-    positionsConnection: {
-      __typename: 'PositionConnection',
-      edges: [
-        {
-          __typename: 'PositionEdge',
-          node: {
-            __typename: 'Position',
-            openVolume: '100',
-            averageEntryPrice: '8993727',
-            updatedAt: '2022-07-28T14:53:54.725477Z',
-            realisedPNL: '0',
-            unrealisedPNL: '43804770',
-            market: {
-              __typename: 'Market',
-              id: '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8',
-            },
-          },
-        },
-        {
-          __typename: 'PositionEdge',
-          node: {
-            __typename: 'Position',
-            openVolume: '-100',
-            realisedPNL: '0',
-            unrealisedPNL: '-9112700',
-            averageEntryPrice: '840158',
-            updatedAt: '2022-07-28T15:09:34.441143Z',
-            market: {
-              __typename: 'Market',
-              id: '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e',
-            },
-          },
-        },
-      ],
+const positions: PositionFieldsFragment[] = [
+  {
+    __typename: 'Position',
+    openVolume: '100',
+    averageEntryPrice: '8993727',
+    updatedAt: '2022-07-28T14:53:54.725477Z',
+    realisedPNL: '0',
+    unrealisedPNL: '43804770',
+    market: {
+      __typename: 'Market',
+      id: '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8',
     },
   },
-};
+  {
+    __typename: 'Position',
+    openVolume: '-100',
+    realisedPNL: '0',
+    unrealisedPNL: '-9112700',
+    averageEntryPrice: '840158',
+    updatedAt: '2022-07-28T15:09:34.441143Z',
+    market: {
+      __typename: 'Market',
+      id: '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e',
+    },
+  },
+];
 
 const marketsData = [
   {
@@ -162,60 +150,44 @@ const marketsData = [
   },
 ] as MarketWithData[];
 
-const margins: MarginsQuery = {
-  party: {
-    id: '02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65',
-    marginsConnection: {
-      edges: [
-        {
-          __typename: 'MarginEdge',
-          node: {
-            __typename: 'MarginLevels',
-            maintenanceLevel: '0',
-            searchLevel: '0',
-            initialLevel: '0',
-            collateralReleaseLevel: '0',
-            market: {
-              __typename: 'Market',
-              id: '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8',
-            },
-            asset: {
-              __typename: 'Asset',
-              id: 'tDAI-id',
-            },
-          },
-        },
-        {
-          __typename: 'MarginEdge',
-          node: {
-            __typename: 'MarginLevels',
-            maintenanceLevel: '0',
-            searchLevel: '0',
-            initialLevel: '0',
-            collateralReleaseLevel: '0',
-            market: {
-              __typename: 'Market',
-              id: '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e',
-            },
-            asset: {
-              __typename: 'Asset',
-              id: 'tDAI-id',
-            },
-          },
-        },
-      ],
-      __typename: 'MarginConnection',
+const margins: MarginFieldsFragment[] = [
+  {
+    __typename: 'MarginLevels',
+    maintenanceLevel: '0',
+    searchLevel: '0',
+    initialLevel: '0',
+    collateralReleaseLevel: '0',
+    market: {
+      __typename: 'Market',
+      id: '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8',
+    },
+    asset: {
+      __typename: 'Asset',
+      id: 'tDAI-id',
     },
-    __typename: 'Party',
   },
-};
-
+  {
+    __typename: 'MarginLevels',
+    maintenanceLevel: '0',
+    searchLevel: '0',
+    initialLevel: '0',
+    collateralReleaseLevel: '0',
+    market: {
+      __typename: 'Market',
+      id: '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e',
+    },
+    asset: {
+      __typename: 'Asset',
+      id: 'tDAI-id',
+    },
+  },
+];
 describe('getMetrics && rejoinPositionData', () => {
   it('returns positions metrics', () => {
     const positionsRejoined = rejoinPositionData(
-      positions.party,
+      positions,
       marketsData,
-      margins.party
+      margins
     );
     const metrics = getMetrics(positionsRejoined, accounts || null);
     expect(metrics.length).toEqual(2);
@@ -223,9 +195,9 @@ describe('getMetrics && rejoinPositionData', () => {
 
   it('calculates metrics', () => {
     const positionsRejoined = rejoinPositionData(
-      positions.party,
+      positions,
       marketsData,
-      margins.party
+      margins
     );
     const metrics = getMetrics(positionsRejoined, accounts || null);
 

libs/positions/src/lib/positions-data-providers.ts

@@ -4,18 +4,19 @@ import BigNumber from 'bignumber.js';
 import sortBy from 'lodash/sortBy';
 import type { Account } from '@vegaprotocol/accounts';
 import { accountsDataProvider } from '@vegaprotocol/accounts';
-import { toBigNum } from '@vegaprotocol/react-helpers';
 import {
+  toBigNum,
   makeDataProvider,
   makeDerivedDataProvider,
+  removePaginationWrapper,
 } from '@vegaprotocol/react-helpers';
 import * as Schema from '@vegaprotocol/types';
 import type { MarketWithData } from '@vegaprotocol/market-list';
 import { marketsWithDataProvider } from '@vegaprotocol/market-list';
 import type {
   PositionsQuery,
+  PositionFieldsFragment,
   PositionsSubscriptionSubscription,
-  MarginsQuery,
   MarginFieldsFragment,
 } from './__generated__/Positions';
 import {
@@ -170,20 +171,17 @@ export const getMetrics = (
 };
 
 export const update = (
-  data: PositionsQuery['party'],
+  data: PositionFieldsFragment[] | null,
   deltas: PositionsSubscriptionSubscription['positions']
 ) => {
-  return produce(data, (draft) => {
+  return produce(data || [], (draft) => {
     deltas.forEach((delta) => {
-      if (!draft?.positionsConnection?.edges || !delta) {
-        return;
-      }
-      const index = draft.positionsConnection.edges.findIndex(
-        (edge) => edge.node.market.id === delta.marketId
+      const index = draft.findIndex(
+        (node) => node.market.id === delta.marketId
       );
       if (index !== -1) {
-        const currNode = draft.positionsConnection.edges[index].node;
-        draft.positionsConnection.edges[index].node = {
+        const currNode = draft[index];
+        draft[index] = {
           ...currNode,
           realisedPNL: delta.realisedPNL,
           unrealisedPNL: delta.unrealisedPNL,
@@ -192,15 +190,12 @@ export const update = (
           updatedAt: delta.updatedAt,
         };
       } else {
-        draft.positionsConnection.edges.unshift({
-          __typename: 'PositionEdge',
-          node: {
-            ...delta,
-            __typename: 'Position',
-            market: {
-              __typename: 'Market',
-              id: delta.marketId,
-            },
+        draft.unshift({
+          ...delta,
+          __typename: 'Position',
+          market: {
+            __typename: 'Market',
+            id: delta.marketId,
           },
         });
       }
@@ -210,29 +205,29 @@ export const update = (
 
 export const positionsDataProvider = makeDataProvider<
   PositionsQuery,
-  PositionsQuery['party'],
+  PositionFieldsFragment[],
   PositionsSubscriptionSubscription,
   PositionsSubscriptionSubscription['positions']
 >({
   query: PositionsDocument,
   subscriptionQuery: PositionsSubscriptionDocument,
   update,
-  getData: (responseData: PositionsQuery) => responseData.party,
+  getData: (responseData: PositionsQuery | null) =>
+    removePaginationWrapper(responseData?.party?.positionsConnection?.edges) ||
+    [],
   getDelta: (subscriptionData: PositionsSubscriptionSubscription) =>
     subscriptionData.positions,
 });
 
 const upgradeMarginsConnection = (
   marketId: string,
-  margins: MarginsQuery['party'] | null
+  margins: MarginFieldsFragment[] | null
 ) => {
-  if (marketId && margins?.marginsConnection?.edges) {
+  if (marketId && margins) {
     const index =
-      margins.marginsConnection.edges.findIndex(
-        (edge) => edge.node.market.id === marketId
-      ) ?? -1;
+      margins.findIndex((node) => node.market.id === marketId) ?? -1;
     if (index >= 0) {
-      const marginLevel = margins.marginsConnection.edges[index].node;
+      const marginLevel = margins[index];
       return {
         maintenanceLevel: marginLevel.maintenanceLevel,
         searchLevel: marginLevel.searchLevel,
@@ -244,12 +239,12 @@ const upgradeMarginsConnection = (
 };
 
 export const rejoinPositionData = (
-  positions: PositionsQuery['party'] | null,
+  positions: PositionFieldsFragment[] | null,
   marketsData: MarketWithData[] | null,
-  margins: MarginsQuery['party'] | null
+  margins: MarginFieldsFragment[] | null
 ): PositionRejoined[] | null => {
-  if (positions?.positionsConnection?.edges && marketsData && margins) {
-    return positions.positionsConnection.edges.map(({ node }) => {
+  if (positions && marketsData && margins) {
+    return positions.map((node) => {
       return {
         realisedPNL: node.realisedPNL,
         openVolume: node.openVolume,

libs/positions/src/lib/positions-table.spec.tsx

@@ -172,3 +172,33 @@ it('displays realised and unrealised PNL', async () => {
   expect(cells[9].textContent).toEqual('1.23');
   expect(cells[10].textContent).toEqual('4.56');
 });
+
+it('displays close button', async () => {
+  await act(async () => {
+    render(
+      <PositionsTable
+        rowData={singleRowData}
+        onClose={() => {
+          return;
+        }}
+      />
+    );
+  });
+  const cells = screen.getAllByRole('gridcell');
+  expect(cells[12].textContent).toEqual('Close');
+});
+
+it('do not display close button if openVolume is zero', async () => {
+  await act(async () => {
+    render(
+      <PositionsTable
+        rowData={[{ ...singleRow, openVolume: '0' }]}
+        onClose={() => {
+          return;
+        }}
+      />
+    );
+  });
+  const cells = screen.getAllByRole('gridcell');
+  expect(cells[12].textContent).toEqual('');
+});

libs/positions/src/lib/positions-table.tsx

@@ -381,14 +381,16 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
         {onClose ? (
           <AgGridColumn
             type="rightAligned"
-            cellRenderer={({ data }: VegaICellRendererParams<Position>) => (
-              <ButtonLink
-                data-testid="close-position"
-                onClick={() => data && onClose(data)}
-              >
-                {t('Close')}
-              </ButtonLink>
-            )}
+            cellRenderer={({ data }: VegaICellRendererParams<Position>) =>
+              data?.openVolume && data?.openVolume !== '0' ? (
+                <ButtonLink
+                  data-testid="close-position"
+                  onClick={() => data && onClose(data)}
+                >
+                  {t('Close')}
+                </ButtonLink>
+              ) : null
+            }
           />
         ) : null}
       </AgGrid>

libs/positions/src/lib/use-market-margin.tsx

@@ -2,30 +2,17 @@ import { useCallback, useState } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { marginsDataProvider } from './margin-data-provider';
-import type {
-  MarginsQuery,
-  MarginsSubscriptionSubscription,
-} from './__generated__/Positions';
-
-const getMarketMarginPosition = ({
-  data,
-  marketId,
-}: {
-  data: MarginsQuery['party'] | null;
-  marketId: string;
-}) => {
-  const positions =
-    data?.marginsConnection?.edges?.map((item) => item.node) ?? [];
-  return positions.find((item) => item.market.id === marketId);
-};
+import type { MarginFieldsFragment } from './__generated__/Positions';
 
 export const useMarketMargin = (marketId: string) => {
   const { pubKey } = useVegaWallet();
   const [marginLevel, setMarginLevel] = useState<string>('');
 
   const update = useCallback(
-    ({ data }: { data: MarginsQuery['party'] | null }) => {
-      const marginMarketPosition = getMarketMarginPosition({ data, marketId });
+    ({ data }: { data: MarginFieldsFragment[] | null }) => {
+      const marginMarketPosition = data?.find(
+        (item) => item.market.id === marketId
+      );
       if (marginMarketPosition?.maintenanceLevel) {
         setMarginLevel(marginMarketPosition?.maintenanceLevel || '');
       }
@@ -34,10 +21,7 @@ export const useMarketMargin = (marketId: string) => {
     [setMarginLevel, marketId]
   );
 
-  useDataProvider<
-    MarginsQuery['party'],
-    MarginsSubscriptionSubscription['margins']
-  >({
+  useDataProvider({
     dataProvider: marginsDataProvider,
     variables: { partyId: pubKey || '' },
     skip: !pubKey || !marketId,

libs/positions/src/lib/use-market-position-open-volume.tsx

@@ -2,29 +2,14 @@ import { useCallback, useState } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { positionsDataProvider } from './positions-data-providers';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
-import type {
-  PositionsQuery,
-  PositionsSubscriptionSubscription,
-} from './__generated__/Positions';
-
-const getMarketPosition = ({
-  data,
-  marketId,
-}: {
-  data: PositionsQuery['party'];
-  marketId: string;
-}) => {
-  const positions =
-    data?.positionsConnection?.edges?.map((item) => item.node) ?? [];
-  return positions.find((item) => item.market.id === marketId);
-};
+import type { PositionFieldsFragment } from './__generated__/Positions';
 
 export const useMarketPositionOpenVolume = (marketId: string) => {
   const { pubKey } = useVegaWallet();
   const [openVolume, setOpenVolume] = useState<string>('');
   const update = useCallback(
-    ({ data }: { data: PositionsQuery['party'] | undefined }) => {
-      const position = getMarketPosition({ data, marketId });
+    ({ data }: { data: PositionFieldsFragment[] | null }) => {
+      const position = data?.find((node) => node.market.id === marketId);
       if (position?.openVolume) {
         setOpenVolume(position?.openVolume || '');
       }
@@ -33,10 +18,7 @@ export const useMarketPositionOpenVolume = (marketId: string) => {
     [setOpenVolume, marketId]
   );
 
-  useDataProvider<
-    PositionsQuery['party'],
-    PositionsSubscriptionSubscription['positions']
-  >({
+  useDataProvider({
     dataProvider: positionsDataProvider,
     variables: { partyId: pubKey || '' },
     skip: !pubKey || !marketId,

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

@@ -4,6 +4,7 @@ export * from './use-data-provider';
 export * from './use-fetch';
 export * from './use-mutation-observer';
 export * from './use-network-params';
+export * from './use-navigator-online';
 export * from './use-outside-click';
 export * from './use-resize-observer';
 export * from './use-resize';

libs/react-helpers/src/hooks/use-navigator-online.spec.ts

@@ -0,0 +1,29 @@
+import { act, fireEvent, renderHook } from '@testing-library/react';
+import { useNavigatorOnline } from './use-navigator-online';
+
+const setup = () => {
+  return renderHook(() => useNavigatorOnline());
+};
+
+const turnOn = () => {
+  jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(true);
+  fireEvent(window, new Event('online'));
+};
+
+const turnOff = () => {
+  jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(false);
+  fireEvent(window, new Event('offline'));
+};
+
+describe('useNavigatorOnline', () => {
+  it('returns true if connected and false if not', () => {
+    const { result } = setup();
+    expect(result.current).toBe(true);
+
+    act(turnOff);
+    expect(result.current).toBe(false);
+
+    act(turnOn);
+    expect(result.current).toBe(true);
+  });
+});

libs/react-helpers/src/hooks/use-navigator-online.ts

@@ -0,0 +1,16 @@
+import { useSyncExternalStore } from 'react';
+
+const subscribe = (onStoreChange: () => void) => {
+  window.addEventListener('online', onStoreChange);
+  window.addEventListener('offline', onStoreChange);
+  return () => {
+    window.removeEventListener('online', onStoreChange);
+    window.removeEventListener('offline', onStoreChange);
+  };
+};
+export const useNavigatorOnline = () =>
+  useSyncExternalStore(
+    subscribe,
+    () => window.navigator.onLine,
+    () => true
+  );

libs/react-helpers/src/index.ts

@@ -1,20 +1,2 @@
 export * from './hooks';
-export * from './lib/format';
-export * from './lib/generic-data-provider';
-export * from './lib/get-nodes';
-export * from './lib/get-events';
-export * from './lib/grid';
-export * from './lib/i18n';
-export * from './lib/pagination';
-export * from './lib/ag-grid-update';
-export * from './lib/remove-0x';
-export * from './lib/storage';
-export * from './lib/time';
-export * from './lib/validate';
-export * from './lib/links';
-export * from './lib/is-asset-erc20';
-export * from './lib/remove-pagination-wrapper';
-export * from './lib/__generated__/ChainId';
-export * from './lib/data-grid';
-export * from './lib/local-logger';
-export * from './lib/market-expires';
+export * from './lib';

libs/react-helpers/src/lib/apollo-client.ts

@@ -0,0 +1,29 @@
+import type { ApolloError } from '@apollo/client';
+import type { GraphQLErrors } from '@apollo/client/errors';
+
+const NOT_FOUND = 'NotFound';
+
+const isApolloGraphQLError = (
+  error: ApolloError | Error | undefined
+): error is ApolloError => {
+  return !!error && !!(error as ApolloError).graphQLErrors;
+};
+
+const hasNotFoundGraphQLErrors = (errors: GraphQLErrors, path?: string) => {
+  return errors.some(
+    (e) =>
+      e.extensions &&
+      e.extensions['type'] === NOT_FOUND &&
+      (!path || e.path?.[0] === path)
+  );
+};
+
+export const isNotFoundGraphQLError = (
+  error: Error | ApolloError | undefined,
+  path?: string
+) => {
+  return (
+    isApolloGraphQLError(error) &&
+    hasNotFoundGraphQLErrors(error.graphQLErrors, path)
+  );
+};

libs/react-helpers/src/lib/generic-data-provider.spec.ts

@@ -62,7 +62,7 @@ const subscribe = makeDataProvider<QueryData, Data, SubscriptionData, Delta>({
   query,
   subscriptionQuery,
   update,
-  getData: (r) => r.data,
+  getData: (r) => r?.data || null,
   getDelta: (r) => r.data,
 });
 
@@ -91,7 +91,7 @@ const paginatedSubscribe = makeDataProvider<
   query,
   subscriptionQuery,
   update,
-  getData: (r) => r.data,
+  getData: (r) => r?.data || null,
   getDelta: (r) => r.data,
   pagination: {
     first,
@@ -215,7 +215,7 @@ describe('data provider', () => {
     const subscription = subscribe(callback, client);
     await resolveQuery({ data });
     const delta: Item[] = [];
-    update.mockImplementationOnce((data, delta) => [...data, ...delta]);
+    update.mockImplementationOnce((data, delta) => [...(data || []), ...delta]);
     // calling onNext from client.subscribe({ query }).subscribe(onNext)
     await clientSubscribeSubscribe.mock.calls[
       clientSubscribeSubscribe.mock.calls.length - 1
@@ -234,7 +234,7 @@ describe('data provider', () => {
     const subscription = subscribe(callback, client);
     await resolveQuery({ data });
     const delta: Item[] = [];
-    update.mockImplementationOnce((data, delta) => data);
+    update.mockImplementationOnce((data, delta) => data || []);
     const callbackCallsLength = callback.mock.calls.length;
     // calling onNext from client.subscribe({ query }).subscribe(onNext)
     await clientSubscribeSubscribe.mock.calls[
@@ -591,7 +591,7 @@ describe('derived data provider', () => {
     await resolveQuery({ data: part2 });
     expect(combineData).toBeCalledTimes(1);
     expect(callback).toBeCalledTimes(1);
-    update.mockImplementation((data, delta) => [...data, ...delta]);
+    update.mockImplementation((data, delta) => [...(data || []), ...delta]);
     combineData.mockReturnValueOnce({ ...data });
     const combinedDelta = {};
     combineDelta.mockReturnValueOnce(combinedDelta);
@@ -629,7 +629,7 @@ describe('derived data provider', () => {
     await resolveQuery({ data: [] });
     expect(combineData).toBeCalledTimes(1);
     expect(callback).toBeCalledTimes(1);
-    update.mockImplementation((data, delta) => [...data, ...delta]);
+    update.mockImplementation((data, delta) => [...(data || []), ...delta]);
     combineData.mockReturnValueOnce({ ...data });
     const combinedInsertionData = {};
     combineInsertionData.mockReturnValueOnce(combinedInsertionData);

libs/react-helpers/src/lib/generic-data-provider.ts

@@ -8,6 +8,7 @@ import type {
 } from '@apollo/client';
 import type { Subscription } from 'zen-observable-ts';
 import isEqual from 'lodash/isEqual';
+import { isNotFoundGraphQLError } from './apollo-client';
 import type * as Schema from '@vegaprotocol/types';
 interface UpdateData<Data, Delta> {
   delta?: Delta;
@@ -71,7 +72,12 @@ export interface Update<
   Delta,
   Variables extends OperationVariables = OperationVariables
 > {
-  (data: Data, delta: Delta, reload: Reload, variables?: Variables): Data;
+  (
+    data: Data | null,
+    delta: Delta,
+    reload: Reload,
+    variables?: Variables
+  ): Data;
 }
 
 export interface Append<Data> {
@@ -88,7 +94,7 @@ export interface Append<Data> {
 }
 
 interface GetData<QueryData, Data, Variables> {
-  (queryData: QueryData, variables?: Variables): Data | null;
+  (queryData: QueryData | null, variables?: Variables): Data | null;
 }
 
 interface GetPageInfo<QueryData> {
@@ -160,7 +166,7 @@ interface DataProviderParams<
 > {
   query: Query<QueryData>;
   subscriptionQuery?: Query<SubscriptionData>;
-  update?: Update<Data, Delta, Variables>;
+  update?: Update<Data | null, Delta, Variables>;
   getData: GetData<QueryData, Data, Variables>;
   getDelta?: GetDelta<SubscriptionData, Delta, Variables>;
   pagination?: {
@@ -349,6 +355,11 @@ function makeDataProviderInternal<
       }
       loaded = true;
     } catch (e) {
+      if (isNotFoundGraphQLError(e as Error, 'party')) {
+        data = getData(null, variables);
+        loaded = true;
+        return;
+      }
       // if error will occur data provider stops subscription
       error = e as Error;
       if (subscription) {
@@ -384,7 +395,7 @@ function makeDataProviderInternal<
       return;
     }
     const delta = getDelta(subscriptionData, variables);
-    if (loading || !data) {
+    if (loading) {
       updateQueue.push(delta);
     } else {
       const updatedData = update(data, delta, reload, variables);
@@ -409,7 +420,6 @@ function makeDataProviderInternal<
     if (!client) {
       return;
     }
-
     if (subscriptionQuery && getDelta && update) {
       subscription = client
         .subscribe<SubscriptionData>({

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

@@ -1,16 +1,20 @@
-export * from './format';
-export * from './grid';
-export * from './storage';
-export * from './validate';
-export * from './generic-data-provider';
-export * from './get-nodes';
-export * from './get-events';
-export * from './i18n';
-export * from './pagination';
-export * from './remove-0x';
-export * from './time';
-export * from './links';
-export * from './remove-pagination-wrapper';
+export * from './__generated__/ChainId';
+export * from './ag-grid-update';
+export * from './apollo-client';
 export * from './data-grid';
+export * from './format';
+export * from './generic-data-provider';
+export * from './get-events';
+export * from './get-nodes';
+export * from './grid';
+export * from './i18n';
+export * from './is-asset-erc20';
+export * from './links';
 export * from './local-logger';
 export * from './market-expires';
+export * from './pagination';
+export * from './remove-0x';
+export * from './remove-pagination-wrapper';
+export * from './storage';
+export * from './time';
+export * from './validate';

libs/trades/src/lib/Trades.graphql

@@ -3,6 +3,7 @@ fragment TradeFields on Trade {
   price
   size
   createdAt
+  aggressor
   market {
     id
   }
@@ -35,5 +36,6 @@ subscription TradesUpdate($marketId: ID!) {
     size
     createdAt
     marketId
+    aggressor
   }
 }

libs/trades/src/lib/__generated__/Trades.ts

@@ -3,7 +3,7 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type TradeFieldsFragment = { __typename?: 'Trade', id: string, price: string, size: string, createdAt: any, market: { __typename?: 'Market', id: string } };
+export type TradeFieldsFragment = { __typename?: 'Trade', id: string, price: string, size: string, createdAt: any, aggressor: Types.Side, market: { __typename?: 'Market', id: string } };
 
 export type TradesQueryVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
@@ -11,14 +11,14 @@ export type TradesQueryVariables = Types.Exact<{
 }>;
 
 
-export type TradesQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, tradesConnection?: { __typename?: 'TradeConnection', edges: Array<{ __typename?: 'TradeEdge', cursor: string, node: { __typename?: 'Trade', id: string, price: string, size: string, createdAt: any, market: { __typename?: 'Market', id: string } } }>, pageInfo: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } } | null } | null };
+export type TradesQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, tradesConnection?: { __typename?: 'TradeConnection', edges: Array<{ __typename?: 'TradeEdge', cursor: string, node: { __typename?: 'Trade', id: string, price: string, size: string, createdAt: any, aggressor: Types.Side, market: { __typename?: 'Market', id: string } } }>, pageInfo: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } } | null } | null };
 
 export type TradesUpdateSubscriptionVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
 }>;
 
 
-export type TradesUpdateSubscription = { __typename?: 'Subscription', trades?: Array<{ __typename?: 'TradeUpdate', id: string, price: string, size: string, createdAt: any, marketId: string }> | null };
+export type TradesUpdateSubscription = { __typename?: 'Subscription', trades?: Array<{ __typename?: 'TradeUpdate', id: string, price: string, size: string, createdAt: any, marketId: string, aggressor: Types.Side }> | null };
 
 export const TradeFieldsFragmentDoc = gql`
     fragment TradeFields on Trade {
@@ -26,6 +26,7 @@ export const TradeFieldsFragmentDoc = gql`
   price
   size
   createdAt
+  aggressor
   market {
     id
   }
@@ -89,6 +90,7 @@ export const TradesUpdateDocument = gql`
     size
     createdAt
     marketId
+    aggressor
   }
 }
     `;

libs/trades/src/lib/trades-data-provider.ts

@@ -20,7 +20,7 @@ import produce from 'immer';
 export const MAX_TRADES = 50;
 
 const getData = (
-  responseData: TradesQuery
+  responseData: TradesQuery | null
 ): ({
   cursor: string;
   node: TradeFieldsFragment;
@@ -30,7 +30,7 @@ const getDelta = (subscriptionData: TradesUpdateSubscription) =>
   subscriptionData?.trades || [];
 
 const update = (
-  data: ReturnType<typeof getData>,
+  data: ReturnType<typeof getData> | null,
   delta: ReturnType<typeof getDelta>
 ) => {
   return produce(data, (draft) => {

libs/trades/src/lib/trades-table.spec.tsx

@@ -1,13 +1,15 @@
 import { act, render, screen } from '@testing-library/react';
 import { getDateTimeFormat } from '@vegaprotocol/react-helpers';
-import { DOWN_CLASS, TradesTable, UP_CLASS } from './trades-table';
+import { SELL_CLASS, TradesTable, BUY_CLASS } from './trades-table';
 import type { Trade } from './trades-data-provider';
+import { Side } from '@vegaprotocol/types';
 
 const trade: Trade = {
   __typename: 'Trade',
   id: 'trade-id',
   price: '111122200',
   size: '2000',
+  aggressor: Side.SIDE_BUY,
   createdAt: new Date('2022-04-06T19:00:00').toISOString(),
   market: {
     __typename: 'Market',
@@ -17,59 +19,58 @@ const trade: Trade = {
   } as Trade['market'],
 };
 
-it('Correct columns are rendered', async () => {
-  await act(async () => {
-    render(<TradesTable rowData={[trade]} />);
-  });
-  const expectedHeaders = ['Price', 'Size', 'Created at'];
-  const headers = screen.getAllByRole('columnheader');
-  expect(headers).toHaveLength(expectedHeaders.length);
-  expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
-});
-
-it('Number and data columns are formatted', async () => {
-  await act(async () => {
-    render(<TradesTable rowData={[trade]} />);
+describe('TradesTable', () => {
+  it('should render correct columns', async () => {
+    await act(async () => {
+      render(<TradesTable rowData={[trade]} />);
+    });
+    const expectedHeaders = ['Price', 'Size', 'Created at'];
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(expectedHeaders.length);
+    expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
   });
 
-  const cells = screen.getAllByRole('gridcell');
-  const expectedValues = [
-    '1,111,222.00',
-    '20.00',
-    getDateTimeFormat().format(new Date(trade.createdAt)),
-  ];
-  cells.forEach((cell, i) => {
-    expect(cell).toHaveTextContent(expectedValues[i]);
+  it('should format number and data columns', async () => {
+    await act(async () => {
+      render(<TradesTable rowData={[trade]} />);
+    });
+
+    const cells = screen.getAllByRole('gridcell');
+    const expectedValues = [
+      '1,111,222.00',
+      '20.00',
+      getDateTimeFormat().format(new Date(trade.createdAt)),
+    ];
+    cells.forEach((cell, i) => {
+      expect(cell).toHaveTextContent(expectedValues[i]);
+    });
+  });
+
+  it('should format price and size columns', async () => {
+    const trade2 = {
+      ...trade,
+      id: 'trade-id-2',
+      price: (Number(trade.price) + 10).toString(),
+      size: (Number(trade.size) - 10).toString(),
+    };
+    await act(async () => {
+      render(<TradesTable rowData={[trade2, trade]} />);
+    });
+
+    const cells = screen.getAllByRole('gridcell');
+
+    const priceCells = cells.filter(
+      (cell) => cell.getAttribute('col-id') === 'price'
+    );
+    const sizeCells = cells.filter(
+      (cell) => cell.getAttribute('col-id') === 'size'
+    );
+
+    // For first trade price should have green class
+    // row 1
+    expect(priceCells[0]).toHaveClass(BUY_CLASS);
+    expect(priceCells[1]).not.toHaveClass(SELL_CLASS);
+    expect(sizeCells[1]).not.toHaveClass(SELL_CLASS);
+    expect(sizeCells[1]).not.toHaveClass(BUY_CLASS);
   });
 });
-
-it('Price and size columns are formatted', async () => {
-  const trade2 = {
-    ...trade,
-    id: 'trade-id-2',
-    price: (Number(trade.price) + 10).toString(),
-    size: (Number(trade.size) - 10).toString(),
-  };
-  await act(async () => {
-    render(<TradesTable rowData={[trade2, trade]} />);
-  });
-
-  const cells = screen.getAllByRole('gridcell');
-
-  const priceCells = cells.filter(
-    (cell) => cell.getAttribute('col-id') === 'price'
-  );
-  const sizeCells = cells.filter(
-    (cell) => cell.getAttribute('col-id') === 'size'
-  );
-
-  // For first trade price should have green class and size should have red class
-  // row 1
-  expect(priceCells[0]).toHaveClass(UP_CLASS);
-  expect(priceCells[1]).not.toHaveClass(DOWN_CLASS);
-  expect(priceCells[1]).not.toHaveClass(UP_CLASS);
-
-  expect(sizeCells[0]).toHaveClass(DOWN_CLASS);
-  expect(sizeCells[1]).not.toHaveClass(DOWN_CLASS);
-  expect(sizeCells[1]).not.toHaveClass(UP_CLASS);
-});

libs/trades/src/lib/trades-table.tsx

@@ -13,31 +13,22 @@ import type { IDatasource, IGetRowsParams } from 'ag-grid-community';
 import type { CellClassParams, ValueFormatterParams } from 'ag-grid-community';
 import type { AgGridReactProps } from 'ag-grid-react';
 import type { Trade } from './trades-data-provider';
-import BigNumber from 'bignumber.js';
+import { Side } from '@vegaprotocol/types';
 
-export const UP_CLASS = 'text-vega-green dark:text-vega-green';
-export const DOWN_CLASS = 'text-vega-pink dark:text-vega-pink';
+export const BUY_CLASS = 'text-vega-green dark:text-vega-green';
+export const SELL_CLASS = 'text-vega-pink dark:text-vega-pink';
 
-const changeCellClass =
-  (dataKey: string) =>
-  ({ api, value, node }: CellClassParams) => {
-    const rowIndex = node?.rowIndex;
-    let colorClass = '';
+const changeCellClass = ({ node }: CellClassParams) => {
+  let colorClass = '';
 
-    if (typeof rowIndex === 'number') {
-      const prevRowNode = api.getModel().getRow(rowIndex + 1);
-      const prevValue = prevRowNode?.data && prevRowNode.data[dataKey];
-      const valueNum = new BigNumber(value);
+  if (node.data?.aggressor === Side.SIDE_BUY) {
+    colorClass = BUY_CLASS;
+  } else if (node.data?.aggressor === Side.SIDE_SELL) {
+    colorClass = SELL_CLASS;
+  }
 
-      if (valueNum.isGreaterThan(prevValue)) {
-        colorClass = UP_CLASS;
-      } else if (valueNum.isLessThan(prevValue)) {
-        colorClass = DOWN_CLASS;
-      }
-    }
-
-    return ['font-mono text-right', colorClass].join(' ');
-  };
+  return ['font-mono text-right', colorClass].join(' ');
+};
 
 export interface GetRowsParams extends Omit<IGetRowsParams, 'successCallback'> {
   successCallback(rowsThisBlock: (Trade | null)[], lastRow?: number): void;
@@ -77,7 +68,7 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
         field="price"
         type="rightAligned"
         width={130}
-        cellClass={changeCellClass('price')}
+        cellClass={changeCellClass}
         valueFormatter={({
           value,
           data,
@@ -127,7 +118,6 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
           }
           return addDecimal(value, data.market.positionDecimalPlaces);
         }}
-        cellClass={changeCellClass('size')}
       />
       <AgGridColumn
         headerName={t('Created at')}

libs/trades/src/lib/trades.mock.ts

@@ -1,3 +1,4 @@
+import { Side } from '@vegaprotocol/types';
 import merge from 'lodash/merge';
 import type { PartialDeep } from 'type-fest';
 import type {
@@ -47,6 +48,7 @@ export const tradesUpdateSubscription = (
         size: '24',
         createdAt: '2022-04-06T16:19:42.692598951Z',
         marketId: 'market-0',
+        aggressor: Side.SIDE_BUY,
       },
     ],
   };
@@ -59,6 +61,7 @@ const trades: TradeFieldsFragment[] = [
     price: '17116898',
     size: '24',
     createdAt: '2022-04-06T16:19:42.692598951Z',
+    aggressor: Side.SIDE_BUY,
     market: {
       id: 'market-0',
       __typename: 'Market',
@@ -70,6 +73,7 @@ const trades: TradeFieldsFragment[] = [
     price: '17209102',
     size: '7',
     createdAt: '2022-04-07T06:59:44.835686754Z',
+    aggressor: Side.SIDE_SELL,
     market: {
       id: 'market-0',
       __typename: 'Market',
@@ -81,6 +85,7 @@ const trades: TradeFieldsFragment[] = [
     price: '17106734',
     size: '18',
     createdAt: '2022-04-07T17:56:47.997938583Z',
+    aggressor: Side.SIDE_BUY,
     market: {
       id: 'market-0',
       __typename: 'Market',

libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx

@@ -1,7 +1,6 @@
 import { Splash } from '../splash';
 import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
-import { isNotFoundGraphQLError } from '@vegaprotocol/apollo-client';
 
 interface AsyncRendererProps<T> {
   loading: boolean;
@@ -26,7 +25,7 @@ export function AsyncRenderer<T = object>({
   children,
   render,
 }: AsyncRendererProps<T>) {
-  if (error && !isNotFoundGraphQLError(error)) {
+  if (error) {
     return (
       <Splash>
         {errorMessage