chore: remove unnecessary useCallback

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

apps/explorer/.env.validator-testnet

@@ -2,11 +2,11 @@
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_URL=https://api-validators-testnet.vega.rocks/graphql
-NX_VEGA_REST=https://api.validators-testnet.vega.xyz/
+NX_VEGA_REST=https://api-validators-testnet.vega.rocks/
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 
 NX_VEGA_GOVERNANCE_URL=https://validator-testnet.governance.vega.xyz
-NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.xyz
-NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.xyz/rest
+NX_TENDERMINT_URL=https://tm-be.validators-testnet.vega.rocks
+NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.rocks/
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket

apps/explorer/src/app/app.tsx

@@ -71,8 +71,8 @@ function App() {
           )}
         >
           <div>
-            <Header />
             <MainnetSimAd />
+            <Header />
           </div>
           <div>
             <Main />

apps/explorer/src/app/components/footer/footer.tsx

@@ -10,7 +10,7 @@ export const Footer = () => {
   const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
   const { screenSize } = useScreenDimensions();
   const showFullFeedbackLabel = useMemo(
-    () => ['lg', 'xl'].includes(screenSize),
+    () => ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize),
     [screenSize]
   );
 

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

@@ -1,143 +1,52 @@
-import {
-  addDecimalsFormatNumber,
-  formatNumberPercentage,
-  getMarketExpiryDateFormatted,
-} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { MarketInfoWithData } from '@vegaprotocol/market-info';
-import { MarketInfoTable } from '@vegaprotocol/market-info';
+import { LiquidityInfoPanel } from '@vegaprotocol/market-info';
+import { LiquidityMonitoringParametersInfoPanel } from '@vegaprotocol/market-info';
 import {
-  MarketStateMapping,
-  MarketTradingModeMapping,
-} from '@vegaprotocol/types';
-import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import BigNumber from 'bignumber.js';
-import { useMemo } from 'react';
+  InstrumentInfoPanel,
+  KeyDetailsInfoPanel,
+  LiquidityPriceRangeInfoPanel,
+  MetadataInfoPanel,
+  OracleInfoPanel,
+  RiskFactorsInfoPanel,
+  RiskModelInfoPanel,
+  RiskParametersInfoPanel,
+  SettlementAssetInfoPanel,
+} from '@vegaprotocol/market-info';
+import { MarketInfoTable } from '@vegaprotocol/market-info';
 import { Link } from 'react-router-dom';
 
 export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
-  const quoteUnit = market?.tradableInstrument.instrument.product.quoteName;
-  const assetId = useMemo(
-    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
-    [market]
-  );
-  const { data: asset } = useAssetDataProvider(assetId ?? '');
-
   if (!market) return null;
 
-  const keyDetails = {
-    decimalPlaces: market.decimalPlaces,
-    positionDecimalPlaces: market.positionDecimalPlaces,
-    tradingMode: market.tradingMode,
-    state: MarketStateMapping[market.state],
-  };
-  const assetDecimals =
-    market.tradableInstrument.instrument.product.settlementAsset.decimals;
-
-  const liquidityPriceRange = formatNumberPercentage(
-    new BigNumber(market.lpPriceRange).times(100)
-  );
-
   const panels = [
     {
       title: t('Key details'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            name: market.tradableInstrument.instrument.name,
-            marketID: market.id,
-            tradingMode:
-              keyDetails.tradingMode &&
-              MarketTradingModeMapping[keyDetails.tradingMode],
-            marketDecimalPlaces: market.decimalPlaces,
-            positionDecimalPlaces: market.positionDecimalPlaces,
-            settlementAssetDecimalPlaces: assetDecimals,
-          }}
-        />
-      ),
+      content: <KeyDetailsInfoPanel noBorder={false} market={market} />,
     },
     {
       title: t('Instrument'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            marketName: market.tradableInstrument.instrument.name,
-            code: market.tradableInstrument.instrument.code,
-            productType:
-              market.tradableInstrument.instrument.product.__typename,
-            ...market.tradableInstrument.instrument.product,
-          }}
-        />
-      ),
+      content: <InstrumentInfoPanel noBorder={false} market={market} />,
     },
     {
       title: t('Settlement asset'),
-      content: asset ? (
-        <AssetDetailsTable
-          asset={asset}
-          inline={true}
-          noBorder={false}
-          dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
-          ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
-        />
-      ) : (
-        <Splash>{t('No data')}</Splash>
-      ),
+      content: <SettlementAssetInfoPanel market={market} noBorder={false} />,
     },
     {
       title: t('Metadata'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            expiryDate: getMarketExpiryDateFormatted(
-              market.tradableInstrument.instrument.metadata.tags
-            ),
-            ...market.tradableInstrument.instrument.metadata.tags
-              ?.map((tag) => {
-                const [key, value] = tag.split(':');
-                return { [key]: value };
-              })
-              .reduce((acc, curr) => ({ ...acc, ...curr }), {}),
-          }}
-        />
-      ),
+      content: <MetadataInfoPanel noBorder={false} market={market} />,
     },
     {
       title: t('Risk model'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={market.tradableInstrument.riskModel}
-          unformatted={true}
-          omits={[]}
-        />
-      ),
+      content: <RiskModelInfoPanel noBorder={false} market={market} />,
     },
     {
       title: t('Risk parameters'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={market.tradableInstrument.riskModel.params}
-          unformatted={true}
-          omits={[]}
-        />
-      ),
+      content: <RiskParametersInfoPanel noBorder={false} market={market} />,
     },
     {
       title: t('Risk factors'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={market.riskFactors}
-          unformatted={true}
-          omits={['market', '__typename']}
-        />
-      ),
+      content: <RiskFactorsInfoPanel noBorder={false} market={market} />,
     },
     ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
       (trigger, i) => ({
@@ -158,7 +67,10 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
           <MarketInfoTable
             noBorder={false}
             data={{ referencePrice: trigger.referencePrice }}
-            decimalPlaces={assetDecimals}
+            decimalPlaces={
+              market.tradableInstrument.instrument.product.settlementAsset
+                .decimals
+            }
           />
         </>
       ),
@@ -166,64 +78,26 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
     {
       title: t('Liquidity monitoring parameters'),
       content: (
-        <MarketInfoTable
+        <LiquidityMonitoringParametersInfoPanel
           noBorder={false}
-          data={{
-            triggeringRatio:
-              market.liquidityMonitoringParameters.triggeringRatio,
-            ...market.liquidityMonitoringParameters.targetStakeParameters,
-          }}
+          market={market}
         />
       ),
     },
+    {
+      title: t('Liquidity'),
+      content: <LiquidityInfoPanel market={market} noBorder={false} />,
+    },
     {
       title: t('Liquidity price range'),
       content: (
-        <>
-          <p className="text-xs mb-4">
-            {`For liquidity orders to count towards a commitment, they must be
-            within the liquidity monitoring bounds.`}
-          </p>
-          <p className="text-xs mb-4">
-            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
-        price.`}
-          </p>
-          <MarketInfoTable
-            noBorder={false}
-            data={{
-              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
-              lowestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .minus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-              highestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .plus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-            }}
-          ></MarketInfoTable>
-        </>
+        <LiquidityPriceRangeInfoPanel market={market} noBorder={false} />
       ),
     },
     {
       title: t('Oracle'),
       content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={
-            market.tradableInstrument.instrument.product.dataSourceSpecBinding
-          }
-        >
+        <OracleInfoPanel noBorder={false} market={market}>
           <Link
             className="text-xs hover:underline"
             to={`/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData.id}`}
@@ -236,7 +110,7 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
           >
             {t('View termination oracle specification')}
           </Link>
-        </MarketInfoTable>
+        </OracleInfoPanel>
       ),
     },
   ];
@@ -244,7 +118,7 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
   return (
     <>
       {panels.map((p) => (
-        <div className="mb-3">
+        <div key={p.title} className="mb-3">
           <h2 className="font-alpha calt text-xl">{p.title}</h2>
           {p.content}
         </div>

apps/explorer/src/app/components/render-fetched/index.tsx

@@ -1,4 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import { StatusMessage } from '../status-message';
 
 interface RenderFetchedProps {
@@ -7,6 +8,7 @@ interface RenderFetchedProps {
   loading: boolean | undefined;
   className?: string;
   errorMessage?: string;
+  refetch?: () => void;
 }
 
 export const RenderFetched = ({
@@ -15,6 +17,7 @@ export const RenderFetched = ({
   children,
   className,
   errorMessage = t('Error retrieving data'),
+  refetch,
 }: RenderFetchedProps) => {
   if (loading) {
     return (
@@ -23,7 +26,20 @@ export const RenderFetched = ({
   }
 
   if (error) {
-    return <StatusMessage className={className}>{errorMessage}</StatusMessage>;
+    return (
+      <>
+        <StatusMessage className={className}>{errorMessage}</StatusMessage>
+        {refetch && (
+          <Button
+            onClick={() => {
+              refetch();
+            }}
+          >
+            {t('Try again')}
+          </Button>
+        )}
+      </>
+    );
   }
 
   return children;

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

@@ -8,7 +8,7 @@ import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import compact from 'lodash/compact';
 import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
-import { marketInfoProvider } from '@vegaprotocol/market-info';
+import { marketInfoWithDataProvider } from '@vegaprotocol/market-info';
 import { PageTitle } from '../../components/page-helpers/page-title';
 
 export const MarketPage = () => {
@@ -17,7 +17,7 @@ export const MarketPage = () => {
   const { marketId } = useParams<{ marketId: string }>();
 
   const { data, loading, error } = useDataProvider({
-    dataProvider: marketInfoProvider,
+    dataProvider: marketInfoWithDataProvider,
     skipUpdates: true,
     variables: {
       marketId: marketId || '',

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

@@ -22,6 +22,7 @@ const Tx = () => {
 
   const {
     state: { data, loading, error },
+    refetch,
   } = useFetch<BlockExplorerTransaction>(
     `${DATA_SOURCES.blockExplorerUrl}/transactions/${toNonHex(hash)}`
   );
@@ -56,6 +57,7 @@ const Tx = () => {
         error={error}
         loading={loading}
         errorMessage={errorMessage}
+        refetch={refetch}
       >
         <TxDetails
           className="mb-28"

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

@@ -21,7 +21,7 @@ import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { PageTitle } from '../../components/page-helpers/page-title';
 import BigNumber from 'bignumber.js';
 import {
-  ContractAddressLink,
+  EtherscanLink,
   DApp,
   TOKEN_VALIDATOR,
   useLinks,
@@ -224,7 +224,7 @@ export const ValidatorsPage = () => {
                         <KeyValueTableRow>
                           <div>{t('Ethereum address')}</div>
                           <div className="break-all text-xs">
-                            <ContractAddressLink address={v.ethereumAddress} />{' '}
+                            <EtherscanLink address={v.ethereumAddress} />{' '}
                             <CopyWithTooltip text={v.ethereumAddress}>
                               <button title={t('Copy address to clipboard')}>
                                 <Icon size={3} name="duplicate" />

apps/governance-e2e/src/fixtures/proposals/new-market.json

@@ -2,6 +2,8 @@
   "changes": {
     "decimalPlaces": "5",
     "positionDecimalPlaces": "5",
+    "linearSlippageFactor": "0.001",
+    "quadraticSlippageFactor": "0",
     "lpPriceRange": "10",
     "instrument": {
       "name": "Token test market",

apps/governance-e2e/src/fixtures/proposals/update-market.json

@@ -1,5 +1,7 @@
 {
   "lpPriceRange": "10",
+  "linearSlippageFactor": "0.001",
+  "quadraticSlippageFactor": "0",
   "instrument": {
     "code": "TEST.24h",
     "future": {

apps/governance-e2e/src/support/wallet-teardown.functions.js

@@ -110,10 +110,9 @@ Cypress.Commands.add('vega_wallet_teardown', function () {
     }
   });
   cy.get(vegaWalletContainer).within(() => {
-    cy.get('[data-testid="associated-amount"]', { timeout: 30000 }).should(
-      'contain.text',
-      '0.00'
-    );
+    cy.get('[data-testid="vega-wallet-balance-unstaked"]', {
+      timeout: 30000,
+    }).should('contain.text', '0.00');
   });
 });
 

apps/governance/.env.validator-testnet

@@ -2,7 +2,7 @@
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_URL=https://api-validators-testnet.vega.rocks/graphql
-NX_VEGA_REST=https://api.validators-testnet.vega.xyz/
+NX_VEGA_REST=https://api-validators-testnet.vega.rocks/
 NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io

apps/governance/src/components/page-templates/template-sidebar.tsx

@@ -21,9 +21,9 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
     <>
       <AnnouncementBanner>
         <div className="font-alpha calt uppercase text-center text-lg text-white">
-          <span className="pr-4">Mainnet sim 3 is live!</span>
-          <ExternalLink href="https://fairground.wtf/">
-            Come help stress test the network
+          <span className="pr-4">Wait no longer, SIM3 is here!</span>
+          <ExternalLink href="https://fairground.wtf/sim3">
+            Learn more
           </ExternalLink>
         </div>
       </AnnouncementBanner>

apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { forwardRef, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Button } from '@vegaprotocol/ui-toolkit';
+import { Button, Icon } from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import { useAppState } from '../../../../contexts/app-state/app-state-context';
 import { BigNumber } from '../../../../lib/bignumber';
@@ -87,7 +87,12 @@ const TopThirdCellRenderer = (
         <div className="mb-4">
           <Button
             data-testid="show-all-validators"
-            rightIcon="arrow-right"
+            rightIcon={
+              <Icon
+                name="arrow-right"
+                className="fill-current mr-2 align-text-top"
+              />
+            }
             className="inline-flex items-center"
           >
             {t('Reveal top validators')}

apps/governance/src/routes/tranches/tranche.tsx

@@ -1,7 +1,6 @@
 import {
   KeyValueTable,
   KeyValueTableRow,
-  Link,
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { Link as RouterLink } from 'react-router-dom';
@@ -11,7 +10,7 @@ import { useParams } from 'react-router';
 import { Navigate } from 'react-router-dom';
 import { formatNumber } from '@vegaprotocol/utils';
 
-import { useEnvironment } from '@vegaprotocol/environment';
+import { EtherscanLink } from '@vegaprotocol/environment';
 import { TrancheItem } from '../redemption/tranche-item';
 import Routes from '../routes';
 import { TrancheLabel } from './tranche-label';
@@ -19,7 +18,6 @@ import { useTranches } from '../../lib/tranches/tranches-store';
 
 export const Tranche = () => {
   const tranches = useTranches((state) => state.tranches);
-  const { ETHERSCAN_URL } = useEnvironment();
   const { t } = useTranslation();
   const { trancheId } = useParams<{ trancheId: string; address: string }>();
   const { chainId } = useWeb3React();
@@ -59,25 +57,15 @@ export const Tranche = () => {
             </KeyValueTableRow>
             {tranche.users.map((user) => (
               <KeyValueTableRow key={user}>
-                {
-                  <Link
-                    title={t('View on Etherscan (opens in a new tab)')}
-                    href={`${ETHERSCAN_URL}/address/${user}`}
-                    target="_blank"
-                  >
-                    {user}
-                  </Link>
-                }
-                {
-                  <RouterLink
-                    className="underline"
-                    title={t('View vesting information')}
-                    to={`${Routes.REDEEM}/${user}`}
-                    data-testid="redeem-link"
-                  >
-                    {t('View vesting information')}
-                  </RouterLink>
-                }
+                <EtherscanLink address={user} data-testid="link" />
+                <RouterLink
+                  className="underline"
+                  title={t('View vesting information')}
+                  to={`${Routes.REDEEM}/${user}`}
+                  data-testid="redeem-link"
+                >
+                  {t('View vesting information')}
+                </RouterLink>
               </KeyValueTableRow>
             ))}
           </KeyValueTable>

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

@@ -18,6 +18,7 @@ import type * as Schema from '@vegaprotocol/types';
 import {
   AsyncRenderer,
   Icon,
+  HealthBar,
   TooltipCellComponent,
 } from '@vegaprotocol/ui-toolkit';
 import type { GetRowIdParams, RowClickedEvent } from 'ag-grid-community';
@@ -27,9 +28,9 @@ import { AgGridColumn } from 'ag-grid-react';
 import { useCallback, useState } from 'react';
 
 import { Grid } from '../../grid';
-import { HealthBar } from '../../health-bar';
 import { HealthDialog } from '../../health-dialog';
 import { Status } from '../../status';
+import { intentForStatus } from '../../../lib/utils';
 import { formatDistanceToNow } from 'date-fns';
 
 export const MarketList = () => {
@@ -273,13 +274,13 @@ export const MarketList = () => {
               data: Market;
             }) => (
               <HealthBar
-                status={value}
                 target={data.target}
                 decimals={
                   data.tradableInstrument.instrument.product.settlementAsset
                     .decimals
                 }
                 levels={data.feeLevels}
+                intent={intentForStatus(value)}
               />
             )}
             sortable={false}

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

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
-import { Icon } from '@vegaprotocol/ui-toolkit';
+import { Icon, HealthBar } from '@vegaprotocol/ui-toolkit';
 import { formatWithAsset } from '@vegaprotocol/liquidity';
 
 import type * as Schema from '@vegaprotocol/types';
-import { HealthBar } from '../../health-bar';
 import { HealthDialog } from '../../health-dialog';
 import { Last24hVolume } from '../last-24h-volume';
 import { Status } from '../../status';
+import { intentForStatus } from '../../../lib/utils';
 
 interface Levels {
   fee: string;
@@ -92,10 +92,10 @@ export const Market = ({
               <td className="px-4">
                 {tradingMode && settlementAsset?.decimals && feeLevels && (
                   <HealthBar
-                    status={tradingMode}
                     target={targetStake}
                     decimals={settlementAsset.decimals}
                     levels={feeLevels}
+                    intent={intentForStatus(tradingMode)}
                   />
                 )}
               </td>

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

@@ -1,213 +0,0 @@
-import classNames from 'classnames';
-import type * as Schema from '@vegaprotocol/types';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import { BigNumber } from 'bignumber.js';
-import type { ReactNode } from 'react';
-
-import { getColorForStatus } from '../../lib/utils';
-
-import { Indicator } from '../indicator';
-
-const Remainder = () => (
-  <div className="bg-greys-light-200 h-[inherit] relative flex-1"></div>
-);
-
-const COPY_CLASS =
-  'text-sm font-medium whitespace-nowrap text-white font-alpha calt';
-
-const Tooltip = ({
-  children,
-  isExpanded,
-}: {
-  children: ReactNode;
-  isExpanded: boolean;
-}) => {
-  return (
-    <div
-      className={classNames(
-        'absolute top-0 left-1/2 -translate-x-2/4 -translate-y-[80%] p-2 z-10 bg-greys-light-400 group-hover:flex rounded',
-        {
-          flex: isExpanded,
-          hidden: !isExpanded,
-        }
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-const Target = ({
-  targetPercent,
-  isLarge,
-  children,
-}: {
-  targetPercent: number;
-  isLarge: boolean;
-  children: ReactNode;
-}) => {
-  return (
-    <div
-      className={classNames(
-        'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
-      )}
-      style={{ left: `${targetPercent}%` }}
-    >
-      <div
-        className={classNames(
-          'health-target w-0.5 bg-black group-hover:scale-x-150 group-hover:scale-y-108',
-          {
-            'h-6': !isLarge,
-            'h-12': isLarge,
-          }
-        )}
-      ></div>
-      {children}
-    </div>
-  );
-};
-
-const Level = ({
-  children,
-  commitmentAmount,
-  total,
-  backgroundColor,
-  opacity,
-}: {
-  children: ReactNode;
-  commitmentAmount: number;
-  total: number;
-  backgroundColor: string;
-  opacity: number;
-}) => {
-  const width = new BigNumber(commitmentAmount)
-    .div(total)
-    .multipliedBy(100)
-    .toNumber();
-
-  return (
-    <div
-      className={classNames(`relative h-[inherit] w-full group min-w-[1px]`)}
-      style={{
-        width: `${width}%`,
-      }}
-    >
-      <div
-        className="relative w-full h-[inherit] group-hover:scale-y-150"
-        style={{
-          opacity,
-          backgroundColor,
-        }}
-      ></div>
-
-      {children}
-    </div>
-  );
-};
-
-const Full = () => (
-  <div className="bg-transparent w-full h-[inherit] absolute bottom-0 left-0"></div>
-);
-
-interface Levels {
-  fee: string;
-  commitmentAmount: number;
-}
-
-export const HealthBar = ({
-  status,
-  target = '0',
-  decimals,
-  levels,
-  size = 'small',
-  isExpanded = false,
-}: {
-  status: Schema.MarketTradingMode;
-  target: string;
-  decimals: number;
-  levels: Levels[];
-  isExpanded?: boolean;
-  size?: 'small' | 'large';
-}) => {
-  const targetNumber = parseInt(target, 10);
-
-  const committedNumber = levels
-    .reduce((total, current) => {
-      return total.plus(current.commitmentAmount);
-    }, new BigNumber(0))
-    .toNumber();
-
-  const total =
-    targetNumber * 2 >= committedNumber ? targetNumber * 2 : committedNumber;
-  const targetPercent = (targetNumber / total) * 100;
-  const isLarge = size === 'large';
-  const backgroundColor = getColorForStatus(status);
-
-  return (
-    <div className="w-full">
-      <div
-        className={classNames('health-wrapper relative', {
-          'py-2': !isLarge,
-          'py-5': isLarge,
-        })}
-      >
-        <div
-          className={classNames('health-inner relative w-full flex', {
-            'h-4': !isLarge,
-            'h-8': isLarge,
-          })}
-        >
-          <Full />
-
-          <div className="health-bars h-[inherit] flex w-full gap-0.5">
-            {levels.map((p, index) => {
-              const { commitmentAmount, fee } = p;
-              const prevLevel = levels[index - 1]?.commitmentAmount;
-              const opacity = 1 - 0.2 * index;
-              return (
-                <Level
-                  commitmentAmount={commitmentAmount}
-                  total={total}
-                  backgroundColor={backgroundColor}
-                  opacity={opacity}
-                >
-                  <Tooltip isExpanded={isExpanded}>
-                    <div className="mt-1.5 inline-flex">
-                      <Indicator status={status} opacity={opacity} />
-                    </div>
-                    <div className="flex  flex-col">
-                      <span className={COPY_CLASS}>
-                        {fee}% {t('Fee')}
-                      </span>
-                      <span className={classNames(COPY_CLASS, 'opacity-60')}>
-                        {prevLevel
-                          ? addDecimalsFormatNumber(prevLevel, decimals)
-                          : '0'}{' '}
-                        - {addDecimalsFormatNumber(commitmentAmount, decimals)}
-                      </span>
-                    </div>
-                  </Tooltip>
-                </Level>
-              );
-            })}
-            {(total !== committedNumber || levels.length === 0) && (
-              <Remainder />
-            )}
-          </div>
-        </div>
-
-        <Target targetPercent={targetPercent} isLarge={isLarge}>
-          <Tooltip isExpanded={isExpanded}>
-            <div className="mt-1.5 inline-flex">
-              <Indicator />
-            </div>
-            <span className={COPY_CLASS}>
-              {t('Target stake')} {addDecimalsFormatNumber(target, decimals)}
-            </span>
-          </Tooltip>
-        </Target>
-      </div>
-    </div>
-  );
-};

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

@@ -1 +0,0 @@
-export * from './health-bar';

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

@@ -1,9 +1,8 @@
 import { t } from '@vegaprotocol/i18n';
-import { Dialog } from '@vegaprotocol/ui-toolkit';
+import { Dialog, HealthBar } from '@vegaprotocol/ui-toolkit';
 import * as Schema from '@vegaprotocol/types';
 import classNames from 'classnames';
-
-import { HealthBar } from '../health-bar';
+import { intentForStatus } from '../../lib/utils';
 
 interface HealthDialogProps {
   isOpen: boolean;
@@ -96,9 +95,9 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
                   <HealthBar
                     size="large"
                     levels={r.data.levels}
-                    status={r.data.status}
                     target={r.data.target}
                     decimals={r.data.decimals}
+                    intent={intentForStatus(r.data.status)}
                   />
                 </td>
               </tr>

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

@@ -5,6 +5,7 @@ import * as Schema from '@vegaprotocol/types';
 import { t } from '@vegaprotocol/i18n';
 
 import { Indicator } from '../indicator';
+import type { AuctionTrigger } from '@vegaprotocol/types';
 
 export const Status = ({
   tradingMode,
@@ -31,7 +32,8 @@ export const Status = ({
   };
 
   const status = getStatus();
-  const tooltipDescription = t(getTooltipDescription(status));
+  const tooltipDescription =
+    tradingMode && getTooltipDescription(tradingMode, trigger);
 
   return (
     <div>
@@ -52,24 +54,43 @@ export const Status = ({
   );
 };
 
-const getTooltipDescription = (status: string) => {
-  let tooltipDescription = '';
+const getTooltipDescription = (
+  status: Schema.MarketTradingMode,
+  trigger?: Schema.AuctionTrigger
+) => {
   switch (status) {
-    case Schema.MarketTradingModeMapping.TRADING_MODE_CONTINUOUS:
-      tooltipDescription =
-        'This is the standard trading mode where trades are executed whenever orders are received';
-      break;
-    case `${Schema.MarketTradingModeMapping.TRADING_MODE_MONITORING_AUCTION} - ${Schema.AuctionTriggerMapping.AUCTION_TRIGGER_LIQUIDITY}`:
-      tooltipDescription =
-        'This market is in auction until it reaches sufficient liquidity';
-      break;
-    case Schema.MarketTradingModeMapping.TRADING_MODE_OPENING_AUCTION:
-      tooltipDescription =
-        'This is a new market in an opening auction to determine a fair mid-price before starting continuous trading.';
-      break;
+    case Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS:
+      return t(
+        'This is the standard trading mode where trades are executed whenever orders are received'
+      );
+    case Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION:
+      return getMonitoringDescriptionTooltip(trigger);
+    case Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION:
+      return t(
+        'This is a new market in an opening auction to determine a fair mid-price before starting continuous trading.'
+      );
     default:
-      break;
+      return '';
+  }
+};
+
+const getMonitoringDescriptionTooltip = (trigger?: AuctionTrigger) => {
+  switch (trigger) {
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET:
+      return t(
+        `This market is in auction until it reaches sufficient liquidity.`
+      );
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS:
+      return t(
+        `This market may have sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.`
+      );
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_PRICE:
+      return t(`This market is in auction due to high price volatility.`);
+    case Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING:
+      return t(
+        `This is a new market in an opening auction to determine a fair mid-price before starting continuous trading`
+      );
+    default:
+      return '';
   }
-
-  return tooltipDescription;
 };

apps/liquidity-provision-dashboard/src/app/lib/utils.tsx

@@ -1,4 +1,5 @@
 import * as Schema from '@vegaprotocol/types';
+import { Intent } from '@vegaprotocol/ui-toolkit';
 
 const marketTradingModeStyle = {
   [Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS]: '#00D46E',
@@ -10,3 +11,15 @@ const marketTradingModeStyle = {
 
 export const getColorForStatus = (status: Schema.MarketTradingMode) =>
   marketTradingModeStyle[status];
+
+const marketTradingModeIntent = {
+  [Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS]: Intent.Success,
+  [Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION]: Intent.Danger,
+  [Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION]: Intent.Primary,
+  [Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION]: Intent.Danger,
+  [Schema.MarketTradingMode.TRADING_MODE_NO_TRADING]: Intent.Danger,
+};
+
+export const intentForStatus = (status: Schema.MarketTradingMode) => {
+  return marketTradingModeIntent[status];
+};

apps/static/src/assets/devnet-network.json

@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api.n04.d.vega.xyz/graphql"]
+  "hosts": ["https://api-n04.d.vega.rocks/graphql"]
 }

apps/static/src/assets/mirror-network.json

@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api.n00.mainnet-mirror.vega.xyz/graphql"]
+  "hosts": ["https://api-n00.mainnet-mirror.vega.rocks/graphql"]
 }

apps/static/src/assets/sandbox-network.json

@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api.n01.sandbox.vega.xyz/graphql"]
+  "hosts": ["https://api-n01.sandbox.vega.rocks/graphql"]
 }

apps/static/src/assets/stagnet1-network.json

@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api.n00.stagnet1.vega.xyz/graphql"]
+  "hosts": ["https://api-n00.stagnet1.vega.rocks/graphql"]
 }

apps/static/src/assets/stagnet3-network.json

@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api.stagnet3.vega.xyz/graphql"]
+  "hosts": ["https://api-stagnet3.vega.rocks/graphql"]
 }

apps/static/src/assets/testnet-network.json

@@ -1,11 +1,11 @@
 {
   "hosts": [
-    "https://api.n06.testnet.vega.xyz/graphql",
-    "https://api.n07.testnet.vega.xyz/graphql",
-    "https://api.n08.testnet.vega.xyz/graphql",
-    "https://api.n09.testnet.vega.xyz/graphql",
-    "https://api.n10.testnet.vega.xyz/graphql",
-    "https://api.n11.testnet.vega.xyz/graphql",
-    "https://api.n12.testnet.vega.xyz/graphql"
+    "https://api-n06.testnet.vega.rocks/graphql",
+    "https://api-n07.testnet.vega.rocks/graphql",
+    "https://api-n08.testnet.vega.rocks/graphql",
+    "https://api-n09.testnet.vega.rocks/graphql",
+    "https://api-n10.testnet.vega.rocks/graphql",
+    "https://api-n11.testnet.vega.rocks/graphql",
+    "https://api-n12.testnet.vega.rocks/graphql"
   ]
 }

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -7,6 +7,10 @@ const externalLink = 'external-link';
 const accordionContent = 'accordion-content';
 
 describe('market info is displayed', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.mockTradingPage();
+  });
+
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
@@ -71,7 +75,8 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     validateMarketDataRow(3, 'Quote Name', 'BTC');
   });
 
-  it('settlement asset displayed', () => {
+  // need to check why data are not visible
+  it.skip('settlement asset displayed', () => {
     cy.getByTestId(marketTitle).contains('Settlement asset').click();
     cy.window().then((win) => {
       cy.stub(win, 'prompt').returns('DISABLED WINDOW PROMPT');

apps/trading-e2e/src/integration/market-summary.cy.ts

@@ -21,7 +21,7 @@ describe('Market proposal notification', { tags: '@smoke' }, () => {
     cy.mockTradingPage(
       Schema.MarketState.STATE_ACTIVE,
       Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
     );
     cy.mockGQL((req) => {
       aliasGQLQuery(
@@ -62,7 +62,7 @@ describe('Market trading page', () => {
     cy.mockTradingPage(
       Schema.MarketState.STATE_ACTIVE,
       Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
     );
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
@@ -148,7 +148,7 @@ describe('Market trading page', () => {
           cy.getByTestId(itemHeader).should('have.text', 'Trading mode');
           cy.getByTestId(itemValue).should(
             'have.text',
-            'Monitoring auction - liquidity'
+            'Monitoring auction - liquidity (target not met)'
           );
         });
       });
@@ -216,6 +216,60 @@ describe('Market trading page', () => {
         });
     });
   });
+
+  describe('market bottom panel', { tags: '@smoke' }, () => {
+    it('on xxl screen should be splitted out into two tables', () => {
+      cy.getByTestId('tab-positions').should(
+        'have.attr',
+        'data-state',
+        'active'
+      );
+      cy.getByTestId('tab-orders').should(
+        'have.attr',
+        'data-state',
+        'inactive'
+      );
+      cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'inactive');
+      cy.getByTestId('tab-accounts').should(
+        'have.attr',
+        'data-state',
+        'inactive'
+      );
+
+      cy.viewport(1801, 1000);
+      cy.getByTestId('tab-positions').should(
+        'have.attr',
+        'data-state',
+        'active'
+      );
+      cy.getByTestId('tab-orders').should('have.attr', 'data-state', 'active');
+      cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'inactive');
+      cy.getByTestId('tab-accounts').should(
+        'have.attr',
+        'data-state',
+        'inactive'
+      );
+
+      cy.getByTestId('Fills').click();
+      cy.getByTestId('Collateral').click();
+      cy.getByTestId('tab-positions').should(
+        'have.attr',
+        'data-state',
+        'inactive'
+      );
+      cy.getByTestId('tab-orders').should(
+        'have.attr',
+        'data-state',
+        'inactive'
+      );
+      cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'active');
+      cy.getByTestId('tab-accounts').should(
+        'have.attr',
+        'data-state',
+        'active'
+      );
+    });
+  });
 });
 
 describe('market states not accepting orders', { tags: '@smoke' }, function () {

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

@@ -12,7 +12,7 @@ describe('markets table', { tags: '@smoke' }, () => {
       cy.mockTradingPage(
         Schema.MarketState.STATE_ACTIVE,
         Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
       );
       cy.mockSubscription();
       cy.visit('/');

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

@@ -10,7 +10,7 @@ beforeEach(() => {
 
 describe('accounts', { tags: '@smoke' }, () => {
   it('renders accounts', () => {
-    const tradingAccountRowId = '[row-id="asset-0"]';
+    const tradingAccountRowId = '[row-id="t-0"]';
     cy.getByTestId('Collateral').click();
 
     cy.getByTestId('tab-accounts').should('be.visible');
@@ -44,9 +44,9 @@ describe('accounts', { tags: '@smoke' }, () => {
   describe('sorting by ag-grid columns should work well', () => {
     it('sorting by asset', () => {
       cy.getByTestId('Collateral').click();
-      const marketsSortedDefault = ['tBTC', 'AST0', 'tEURO', 'tDAI', 'tBTC'];
-      const marketsSortedAsc = ['AST0', 'tBTC', 'tBTC', 'tDAI', 'tEURO'];
-      const marketsSortedDesc = ['tEURO', 'tDAI', 'tBTC', 'tBTC', 'AST0'];
+      const marketsSortedDefault = ['tBTC', 'tEURO', 'tDAI', 'tBTC'];
+      const marketsSortedAsc = ['tBTC', 'tBTC', 'tDAI', 'tEURO'];
+      const marketsSortedDesc = ['tEURO', 'tDAI', 'tBTC', 'tBTC'];
       checkSorting(
         'asset.symbol',
         marketsSortedDefault,
@@ -59,7 +59,6 @@ describe('accounts', { tags: '@smoke' }, () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
         '1,000.00002',
-        '100,001.01',
         '1,000.01',
         '1,000.00',
         '1,000.00001',
@@ -69,10 +68,8 @@ describe('accounts', { tags: '@smoke' }, () => {
         '1,000.00001',
         '1,000.00002',
         '1,000.01',
-        '100,001.01',
       ];
       const marketsSortedDesc = [
-        '100,001.01',
         '1,000.01',
         '1,000.00002',
         '1,000.00001',
@@ -90,7 +87,6 @@ describe('accounts', { tags: '@smoke' }, () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
         '0.000.00%',
-        '1.010.00%',
         '0.010.00%',
         '0.000.00%',
         '0.000.00%',
@@ -100,10 +96,8 @@ describe('accounts', { tags: '@smoke' }, () => {
         '0.000.00%',
         '0.000.00%',
         '0.010.00%',
-        '1.010.00%',
       ];
       const marketsSortedDesc = [
-        '1.010.00%',
         '0.010.00%',
         '0.000.00%',
         '0.000.00%',
@@ -121,7 +115,6 @@ describe('accounts', { tags: '@smoke' }, () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
         '1,000.00002',
-        '100,001.01',
         '1,000.01',
         '1,000.00',
         '1,000.00001',
@@ -131,10 +124,8 @@ describe('accounts', { tags: '@smoke' }, () => {
         '1,000.00001',
         '1,000.00002',
         '1,000.01',
-        '100,001.01',
       ];
       const marketsSortedDesc = [
-        '100,001.01',
         '1,000.01',
         '1,000.00002',
         '1,000.00001',

apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts

@@ -161,7 +161,7 @@ describe(
       cy.mockTradingPage(
         Schema.MarketState.STATE_SUSPENDED,
         Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION,
-        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
       );
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
@@ -230,7 +230,7 @@ describe(
       cy.mockTradingPage(
         Schema.MarketState.STATE_SUSPENDED,
         Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
-        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
       );
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
@@ -299,7 +299,7 @@ describe(
       cy.mockTradingPage(
         Schema.MarketState.STATE_SUSPENDED,
         Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
       );
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
@@ -585,7 +585,7 @@ describe('suspended market validation', { tags: '@regression' }, () => {
     cy.mockTradingPage(
       Schema.MarketState.STATE_SUSPENDED,
       Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
     );
     const accounts = accountsQuery();
     cy.mockGQL((req) => {

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

@@ -22,7 +22,7 @@ const cancelAllOrdersBtn = 'cancelAll';
 const editOrderBtn = 'edit';
 
 describe('orders list', { tags: '@smoke' }, () => {
-  before(() => {
+  beforeEach(() => {
     const subscriptionMocks = getSubscriptionMocks();
     cy.spy(subscriptionMocks, 'OrdersUpdate');
     cy.mockTradingPage();
@@ -82,6 +82,13 @@ describe('orders list', { tags: '@smoke' }, () => {
       '94aead3ca92dc932efcb503631b03a410e2a5d4606cae6083e2406dc38e52f78';
 
     cy.getByTestId('tab-orders').should('be.visible');
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Partially Filled').click();
+    cy.getByTestId('Orders').click();
+
     cy.get(`[row-id="${partiallyFilledId}"]`).within(() => {
       cy.get(`[col-id='${orderStatus}']`).should(
         'have.text',
@@ -102,6 +109,12 @@ describe('orders list', { tags: '@smoke' }, () => {
       'BTCUSD.MF21',
       'BTCUSD.MF21',
     ];
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Reset').click();
+    cy.getByTestId('Orders').click();
 
     cy.getByTestId('tab-orders')
       .get(`.ag-center-cols-container [col-id='${orderSymbol}']`)

apps/trading-e2e/src/integration/wallet-eth.cy.ts

@@ -0,0 +1,58 @@
+import { connectEthereumWallet } from '../support/ethereum-wallet';
+
+const connectEthWalletBtn = 'connect-eth-wallet-btn';
+
+describe('ethereum wallet', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.mockWeb3Provider();
+    // Using portfolio withdrawals tab is it requires Ethereum wallet connection
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+    cy.visit('/#/portfolio');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.getByTestId('Withdrawals').click();
+  });
+
+  it('can connect', () => {
+    // 0004-EWAL-001
+
+    cy.wait('@NetworkParams');
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('deposit-button').click();
+    cy.getByTestId('connect-eth-wallet-btn').click();
+    cy.getByTestId('web3-connector-list').should('exist');
+    cy.getByTestId('web3-connector-MetaMask').click();
+    cy.getByTestId('web3-connector-list').should('not.exist');
+    cy.getByTestId('tab-deposits').should('not.be.empty');
+  });
+
+  it('should see an option to cancel the attempted connection', () => {
+    // 0004-EWAL-003
+
+    cy.wait('@NetworkParams');
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('deposit-button').click();
+    cy.getByTestId('connect-eth-wallet-btn').click();
+    cy.getByTestId('web3-connector-list').should('exist');
+    cy.getByTestId('web3-connector-WalletConnect').click();
+    cy.get('#walletconnect-qrcode-text').should('exist');
+    cy.get('#walletconnect-qrcode-close').click();
+  });
+
+  it('able to disconnect eth wallet', () => {
+    // 0004-EWAL-004
+    // 0004-EWAL-005
+    // 0004-EWAL-006
+
+    const ethWalletAddress = Cypress.env('ETHEREUM_WALLET_ADDRESS');
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('deposit-button').click();
+    connectEthereumWallet('MetaMask');
+    cy.getByTestId('ethereum-address').should('have.text', ethWalletAddress);
+    cy.getByTestId('disconnect-ethereum-wallet')
+      .should('have.text', 'Disconnect')
+      .click();
+    cy.getByTestId(connectEthWalletBtn).should('exist');
+  });
+});

apps/trading-e2e/src/integration/wallet-vega.cy.ts

@@ -1,7 +1,8 @@
-import { mockConnectWallet } from '@vegaprotocol/cypress';
-import { connectEthereumWallet } from '../support/ethereum-wallet';
+import {
+  mockConnectWallet,
+  mockConnectWalletWithUserError,
+} from '@vegaprotocol/cypress';
 
-const connectEthWalletBtn = 'connect-eth-wallet-btn';
 const connectVegaBtn = 'connect-vega-wallet';
 const manageVegaBtn = 'manage-vega-wallet';
 const form = 'rest-connector-form';
@@ -127,6 +128,21 @@ describe('connect vega wallet', { tags: '@smoke' }, () => {
     cy.getByTestId(manageVegaBtn).should('exist');
   });
 
+  it('can not connect', () => {
+    // 0002-WCON-002
+    // 0002-WCON-005
+    // 0002-WCON-007
+
+    mockConnectWalletWithUserError();
+    cy.getByTestId(connectVegaBtn).click();
+    cy.getByTestId('connectors-list')
+      .find('[data-testid="connector-jsonRpc"]')
+      .click();
+    cy.getByTestId('dialog-content')
+      .should('contain.text', 'User error')
+      .and('contain.text', 'the user rejected the wallet connection');
+  });
+
   it('can change selected public key and disconnect', () => {
     // 0002-WCON-022
     // 0002-WCON-023
@@ -164,39 +180,3 @@ describe('connect vega wallet', { tags: '@smoke' }, () => {
     );
   });
 });
-
-describe('ethereum wallet', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.mockWeb3Provider();
-    // Using portfolio withdrawals tab is it requires Ethereum wallet connection
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
-    cy.getByTestId('Withdrawals').click();
-  });
-
-  it('can connect', () => {
-    cy.wait('@NetworkParams');
-    cy.getByTestId('Deposits').click();
-    cy.getByTestId('deposit-button').click();
-    cy.getByTestId('connect-eth-wallet-btn').click();
-    cy.getByTestId('web3-connector-list').should('exist');
-    cy.getByTestId('web3-connector-MetaMask').click();
-    cy.getByTestId('web3-connector-list').should('not.exist');
-    cy.getByTestId('tab-deposits').should('not.be.empty');
-  });
-
-  it('able to disconnect eth wallet', () => {
-    const ethWalletAddress = Cypress.env('ETHEREUM_WALLET_ADDRESS');
-    cy.getByTestId('Deposits').click();
-    cy.getByTestId('deposit-button').click();
-    connectEthereumWallet('MetaMask');
-    cy.getByTestId('ethereum-address').should('have.text', ethWalletAddress);
-    cy.getByTestId('disconnect-ethereum-wallet')
-      .should('have.text', 'Disconnect')
-      .click();
-    cy.getByTestId(connectEthWalletBtn).should('exist');
-  });
-});

apps/trading/.env.devnet

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.mainnet

@@ -8,3 +8,4 @@ NX_VEGA_TOKEN_URL=https://token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.mirror

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://mainnet-mirror.token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.sandbox

@@ -7,3 +7,4 @@ NX_VEGA_NETWORKS={\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET3\":\"https
 NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.stagnet1

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.stagnet3

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.testnet

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.validator-testnet

@@ -9,4 +9,4 @@ NX_VEGA_TOKEN_URL=https://validator-testnet.governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
-
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/client-pages/liquidity/liquidity.tsx

@@ -282,7 +282,7 @@ export const LiquidityViewContainer = ({
             <div className="break-word">{marketId}</div>
           </HeaderStat>
         </Header>
-        <Tabs active={getActiveDefaultId()}>
+        <Tabs defaultValue={getActiveDefaultId()}>
           <Tab
             id={LiquidityTabs.MyLiquidityProvision}
             name={t('My liquidity provision')}

apps/trading/client-pages/market/market.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
   useDataProvider,
+  useScreenDimensions,
   useThrottledDataProvider,
 } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
@@ -61,7 +61,8 @@ export const MarketPage = () => {
   const { marketId } = useParams();
   const navigate = useNavigate();
 
-  const { w } = useWindowSize();
+  const { screenSize } = useScreenDimensions();
+  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
   const update = useGlobalStore((store) => store.update);
   const lastMarketId = useGlobalStore((store) => store.marketId);
 
@@ -87,7 +88,7 @@ export const MarketPage = () => {
   }, [update, lastMarketId, data?.id]);
 
   const tradeView = useMemo(() => {
-    if (w > 960) {
+    if (largeScreen) {
       return (
         <TradeGrid
           market={data}
@@ -105,7 +106,7 @@ export const MarketPage = () => {
         onClickCollateral={() => navigate('/portfolio')}
       />
     );
-  }, [w, data, onSelect, navigate]);
+  }, [largeScreen, data, onSelect, navigate]);
   if (!data && marketId) {
     return (
       <Splash>
@@ -140,37 +141,3 @@ export const MarketPage = () => {
     </AsyncRenderer>
   );
 };
-
-const useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return {
-        w: window.innerWidth,
-        h: window.innerHeight,
-      };
-    }
-
-    // Something sensible for server rendered page
-    return {
-      w: 1200,
-      h: 900,
-    };
-  });
-
-  useEffect(() => {
-    const handleResize = debounce(({ target }) => {
-      setWindowSize({
-        w: target.innerWidth,
-        h: target.innerHeight,
-      });
-    }, 300);
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return windowSize;
-};

apps/trading/client-pages/market/trade-grid.tsx

@@ -8,13 +8,13 @@ import { TradesContainer } from '@vegaprotocol/trades';
 import { LayoutPriority } from 'allotment';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { memo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import type { ReactNode, ComponentProps } from 'react';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
 import {
   Tab,
-  Tabs,
+  LocalStoragePersistTabs as Tabs,
   ResizableGrid,
   ResizableGridPanel,
   Splash,
@@ -29,6 +29,7 @@ import { LiquidityContainer } from '../liquidity/liquidity';
 import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -69,129 +70,206 @@ interface TradeGridProps {
   pinnedAsset?: PinnedAsset;
 }
 
-const MainGrid = ({
-  marketId,
-  onSelect,
-  pinnedAsset,
-}: {
+interface BottomPanelProps {
   marketId: string;
-  onSelect?: (marketId: string) => void;
   pinnedAsset?: PinnedAsset;
-}) => {
-  const navigate = useNavigate();
-  const onMarketClick = (marketId: string) => {
-    navigate(Links[Routes.MARKET](marketId), {
-      replace: true,
-    });
-  };
-  return (
-    <ResizableGrid vertical>
-      <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
-        <ResizableGrid proportionalLayout={false} minSize={200}>
-          <ResizableGridPanel
-            priority={LayoutPriority.High}
-            minSize={200}
-            preferredSize="50%"
-          >
-            <TradeGridChild>
-              <Tabs>
-                <Tab id="chart" name={t('Chart')}>
-                  <TradingViews.Candles marketId={marketId} />
-                </Tab>
-                <Tab id="depth" name={t('Depth')}>
-                  <TradingViews.Depth marketId={marketId} />
-                </Tab>
-                <Tab id="liquidity" name={t('Liquidity')}>
-                  <TradingViews.Liquidity marketId={marketId} />
-                </Tab>
-              </Tabs>
-            </TradeGridChild>
-          </ResizableGridPanel>
-          <ResizableGridPanel
-            priority={LayoutPriority.Low}
-            preferredSize={330}
-            minSize={300}
-          >
-            <TradeGridChild>
-              <Tabs>
-                <Tab id="ticket" name={t('Ticket')}>
-                  <TradingViews.Ticket
+}
+
+const MarketBottomPanel = memo(
+  ({ marketId, pinnedAsset }: BottomPanelProps) => {
+    const { screenSize } = useScreenDimensions();
+    const navigate = useNavigate();
+    const onMarketClick = useCallback(
+      (marketId: string) => {
+        navigate(Links[Routes.MARKET](marketId), {
+          replace: true,
+        });
+      },
+      [navigate]
+    );
+
+    return 'xxxl' === screenSize ? (
+      <ResizableGrid proportionalLayout minSize={200}>
+        <ResizableGridPanel
+          priority={LayoutPriority.Low}
+          preferredSize="50%"
+          minSize={50}
+        >
+          <TradeGridChild>
+            <Tabs storageKey="console-trade-grid-orders">
+              <Tab id="orders" name={t('Orders')}>
+                <VegaWalletContainer>
+                  <TradingViews.Orders
                     marketId={marketId}
-                    onClickCollateral={() => navigate('/portfolio')}
+                    onMarketClick={onMarketClick}
+                    enforceBottomPlaceholder
                   />
-                </Tab>
-                <Tab id="info" name={t('Info')}>
-                  <TradingViews.Info
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="fills" name={t('Fills')}>
+                <VegaWalletContainer>
+                  <TradingViews.Fills
                     marketId={marketId}
-                    onSelect={(id: string) => {
-                      onSelect?.(id);
-                    }}
+                    onMarketClick={onMarketClick}
                   />
-                </Tab>
-              </Tabs>
-            </TradeGridChild>
-          </ResizableGridPanel>
-          <ResizableGridPanel
-            priority={LayoutPriority.Low}
-            preferredSize={430}
-            minSize={200}
-          >
-            <TradeGridChild>
-              <Tabs>
-                <Tab id="orderbook" name={t('Orderbook')}>
-                  <TradingViews.Orderbook marketId={marketId} />
-                </Tab>
-                <Tab id="trades" name={t('Trades')}>
-                  <TradingViews.Trades marketId={marketId} />
-                </Tab>
-              </Tabs>
-            </TradeGridChild>
-          </ResizableGridPanel>
-        </ResizableGrid>
-      </ResizableGridPanel>
-      <ResizableGridPanel
-        priority={LayoutPriority.Low}
-        preferredSize="25%"
-        minSize={50}
-      >
-        <TradeGridChild>
-          <Tabs>
-            <Tab id="positions" name={t('Positions')}>
-              <VegaWalletContainer>
-                <TradingViews.Positions onMarketClick={onMarketClick} />
-              </VegaWalletContainer>
-            </Tab>
-            <Tab id="orders" name={t('Orders')}>
-              <VegaWalletContainer>
-                <TradingViews.Orders
-                  marketId={marketId}
-                  onMarketClick={onMarketClick}
-                />
-              </VegaWalletContainer>
-            </Tab>
-            <Tab id="fills" name={t('Fills')}>
-              <VegaWalletContainer>
-                <TradingViews.Fills
-                  marketId={marketId}
-                  onMarketClick={onMarketClick}
-                />
-              </VegaWalletContainer>
-            </Tab>
-            <Tab id="accounts" name={t('Collateral')}>
-              <VegaWalletContainer>
-                <TradingViews.Collateral
-                  pinnedAsset={pinnedAsset}
-                  hideButtons
-                />
-              </VegaWalletContainer>
-            </Tab>
-          </Tabs>
-        </TradeGridChild>
-      </ResizableGridPanel>
-    </ResizableGrid>
-  );
-};
-const MainGridWrapped = memo(MainGrid);
+                </VegaWalletContainer>
+              </Tab>
+            </Tabs>
+          </TradeGridChild>
+        </ResizableGridPanel>
+        <ResizableGridPanel
+          priority={LayoutPriority.Low}
+          preferredSize="50%"
+          minSize={50}
+        >
+          <TradeGridChild>
+            <Tabs storageKey="console-trade-grid-positions">
+              <Tab id="positions" name={t('Positions')}>
+                <VegaWalletContainer>
+                  <TradingViews.Positions
+                    onMarketClick={onMarketClick}
+                    noBottomPlaceholder
+                  />
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="accounts" name={t('Collateral')}>
+                <VegaWalletContainer>
+                  <TradingViews.Collateral
+                    pinnedAsset={pinnedAsset}
+                    noBottomPlaceholder
+                    hideButtons
+                  />
+                </VegaWalletContainer>
+              </Tab>
+            </Tabs>
+          </TradeGridChild>
+        </ResizableGridPanel>
+      </ResizableGrid>
+    ) : (
+      <TradeGridChild>
+        <Tabs storageKey="console-trade-grid-positions">
+          <Tab id="positions" name={t('Positions')}>
+            <VegaWalletContainer>
+              <TradingViews.Positions onMarketClick={onMarketClick} />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="orders" name={t('Orders')}>
+            <VegaWalletContainer>
+              <TradingViews.Orders
+                marketId={marketId}
+                onMarketClick={onMarketClick}
+                enforceBottomPlaceholder
+              />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="fills" name={t('Fills')}>
+            <VegaWalletContainer>
+              <TradingViews.Fills
+                marketId={marketId}
+                onMarketClick={onMarketClick}
+              />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="accounts" name={t('Collateral')}>
+            <VegaWalletContainer>
+              <TradingViews.Collateral pinnedAsset={pinnedAsset} hideButtons />
+            </VegaWalletContainer>
+          </Tab>
+        </Tabs>
+      </TradeGridChild>
+    );
+  }
+);
+MarketBottomPanel.displayName = 'MarketBottomPanel';
+
+const MainGrid = memo(
+  ({
+    marketId,
+    onSelect,
+    pinnedAsset,
+  }: {
+    marketId: string;
+    onSelect?: (marketId: string) => void;
+    pinnedAsset?: PinnedAsset;
+  }) => {
+    const navigate = useNavigate();
+    return (
+      <ResizableGrid vertical>
+        <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
+          <ResizableGrid proportionalLayout={false} minSize={200}>
+            <ResizableGridPanel
+              priority={LayoutPriority.High}
+              minSize={200}
+              preferredSize="50%"
+            >
+              <TradeGridChild>
+                <Tabs storageKey="console-trade-grid-chart">
+                  <Tab id="chart" name={t('Chart')}>
+                    <TradingViews.Candles marketId={marketId} />
+                  </Tab>
+                  <Tab id="depth" name={t('Depth')}>
+                    <TradingViews.Depth marketId={marketId} />
+                  </Tab>
+                  <Tab id="liquidity" name={t('Liquidity')}>
+                    <TradingViews.Liquidity marketId={marketId} />
+                  </Tab>
+                </Tabs>
+              </TradeGridChild>
+            </ResizableGridPanel>
+            <ResizableGridPanel
+              priority={LayoutPriority.Low}
+              preferredSize={330}
+              minSize={300}
+            >
+              <TradeGridChild>
+                <Tabs storageKey="console-trade-grid-ticket">
+                  <Tab id="ticket" name={t('Ticket')}>
+                    <TradingViews.Ticket
+                      marketId={marketId}
+                      onClickCollateral={() => navigate('/portfolio')}
+                    />
+                  </Tab>
+                  <Tab id="info" name={t('Info')}>
+                    <TradingViews.Info
+                      marketId={marketId}
+                      onSelect={(id: string) => {
+                        onSelect?.(id);
+                      }}
+                    />
+                  </Tab>
+                </Tabs>
+              </TradeGridChild>
+            </ResizableGridPanel>
+            <ResizableGridPanel
+              priority={LayoutPriority.Low}
+              preferredSize={430}
+              minSize={200}
+            >
+              <TradeGridChild>
+                <Tabs storageKey="console-trade-grid-orderbook">
+                  <Tab id="orderbook" name={t('Orderbook')}>
+                    <TradingViews.Orderbook marketId={marketId} />
+                  </Tab>
+                  <Tab id="trades" name={t('Trades')}>
+                    <TradingViews.Trades marketId={marketId} />
+                  </Tab>
+                </Tabs>
+              </TradeGridChild>
+            </ResizableGridPanel>
+          </ResizableGrid>
+        </ResizableGridPanel>
+        <ResizableGridPanel
+          priority={LayoutPriority.Low}
+          preferredSize="25%"
+          minSize={50}
+        >
+          <MarketBottomPanel marketId={marketId} pinnedAsset={pinnedAsset} />
+        </ResizableGridPanel>
+      </ResizableGrid>
+    );
+  }
+);
+MainGrid.displayName = 'MainGrid';
 
 export const TradeGrid = ({
   market,
@@ -201,7 +279,7 @@ export const TradeGrid = ({
   return (
     <div className="h-full grid grid-rows-[min-content_1fr]">
       <TradeMarketHeader market={market} onSelect={onSelect} />
-      <MainGridWrapped
+      <MainGrid
         marketId={market?.id || ''}
         onSelect={onSelect}
         pinnedAsset={pinnedAsset}

apps/trading/client-pages/markets/markets-page.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Tabs, Tab } from '@vegaprotocol/ui-toolkit';
+import { LocalStoragePersistTabs as Tabs, Tab } from '@vegaprotocol/ui-toolkit';
 import { Markets } from './markets';
 import { Proposed } from './proposed';
 import { usePageTitleStore } from '../../stores';
@@ -14,7 +14,7 @@ export const MarketsPage = () => {
     updateTitle(titlefy(['Markets']));
   }, [updateTitle]);
   return (
-    <Tabs>
+    <Tabs storageKey="console-markets">
       <Tab id="all-markets" name={t('All markets')}>
         <Markets />
       </Tab>

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

@@ -25,7 +25,8 @@ export const DepositsContainer = () => {
       <div className="h-full relative">
         <DepositsTable
           rowData={data || []}
-          noRowsOverlayComponent={() => null}
+          suppressLoadingOverlay
+          suppressNoRowsOverlay
           ref={gridRef}
           {...bottomPlaceholderProps}
         />

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

@@ -2,7 +2,11 @@ import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { PositionsContainer } from '@vegaprotocol/positions';
 import { OrderListContainer } from '@vegaprotocol/orders';
-import { ResizableGridPanel, Tab, Tabs } from '@vegaprotocol/ui-toolkit';
+import {
+  ResizableGridPanel,
+  Tab,
+  LocalStoragePersistTabs as Tabs,
+} from '@vegaprotocol/ui-toolkit';
 import { WithdrawalsContainer } from './withdrawals-container';
 import { FillsContainer } from '@vegaprotocol/fills';
 import type { ReactNode } from 'react';
@@ -41,7 +45,7 @@ export const Portfolio = () => {
       <ResizableGrid vertical>
         <ResizableGridPanel minSize={75}>
           <PortfolioGridChild>
-            <Tabs>
+            <Tabs storageKey="console-portfolio-account-history">
               <Tab id="account-history" name={t('Account history')}>
                 <VegaWalletContainer>
                   <AccountHistoryContainer />
@@ -79,7 +83,7 @@ export const Portfolio = () => {
           minSize={50}
         >
           <PortfolioGridChild>
-            <Tabs>
+            <Tabs storageKey="console-portfolio-collateral">
               <Tab id="collateral" name={t('Collateral')}>
                 <VegaWalletContainer>
                   <AccountsContainer />

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

@@ -24,7 +24,8 @@ export const WithdrawalsContainer = () => {
         <WithdrawalsTable
           data-testid="withdrawals-history"
           rowData={data}
-          noRowsOverlayComponent={() => null}
+          suppressLoadingOverlay
+          suppressNoRowsOverlay
         />
         <div className="pointer-events-none absolute inset-0">
           <AsyncRenderer

apps/trading/components/accounts-container/accounts-container.tsx

@@ -12,9 +12,11 @@ import { useDepositDialog } from '@vegaprotocol/deposits';
 export const AccountsContainer = ({
   pinnedAsset,
   hideButtons,
+  noBottomPlaceholder,
 }: {
   pinnedAsset?: PinnedAsset;
   hideButtons?: boolean;
+  noBottomPlaceholder?: boolean;
 }) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
@@ -46,6 +48,7 @@ export const AccountsContainer = ({
         onClickDeposit={openDepositDialog}
         isReadOnly={isReadOnly}
         pinnedAsset={pinnedAsset}
+        noBottomPlaceholder={noBottomPlaceholder}
       />
       {!isReadOnly && !hideButtons && (
         <div className="flex gap-2 justify-end p-2 px-[11px] absolute lg:fixed bottom-0 right-3 dark:bg-black/75 bg-white/75 rounded">

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

@@ -1,20 +1,38 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { NodeHealth, NodeUrl, HealthIndicator } from './footer';
+import { MockedProvider } from '@apollo/client/testing';
+import { Intent } from '@vegaprotocol/ui-toolkit';
+
+jest.mock('@vegaprotocol/environment', () => ({
+  ...jest.requireActual('@vegaprotocol/environment'),
+  useEnvironment: jest.fn().mockImplementation(() => ({
+    VEGA_URL: 'https://vega-url.wtf',
+    VEGA_INCIDENT_URL: 'https://blog.vega.community',
+  })),
+}));
+
+const mockSetNodeSwitcher = jest.fn();
+jest.mock('../../stores', () => ({
+  ...jest.requireActual('../../stores'),
+  useGlobalStore: () => mockSetNodeSwitcher,
+}));
 
 describe('NodeHealth', () => {
   it('controls the node switcher dialog', async () => {
-    const mockOnClick = jest.fn();
-    render(
-      <NodeHealth
-        onClick={mockOnClick}
-        url={'https://api.n99.somenetwork.vega.xyz'}
-        blockHeight={100}
-        blockDiff={0}
-      />
-    );
+    render(<NodeHealth />, { wrapper: MockedProvider });
+    await waitFor(() => {
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
     await userEvent.click(screen.getByRole('button'));
-    expect(mockOnClick).toHaveBeenCalled();
+    expect(mockSetNodeSwitcher).toHaveBeenCalled();
+  });
+
+  it('External link to blog should be present', () => {
+    render(<NodeHealth />, { wrapper: MockedProvider });
+    expect(
+      screen.getByRole('link', { name: /^Mainnet status & incidents/ })
+    ).toBeInTheDocument();
   });
 });
 
@@ -31,14 +49,22 @@ describe('NodeUrl', () => {
 
 describe('HealthIndicator', () => {
   const cases = [
-    { diff: 0, classname: 'bg-vega-green-550', text: 'Operational' },
-    { diff: 5, classname: 'bg-warning', text: '5 Blocks behind' },
-    { diff: null, classname: 'bg-danger', text: 'Non operational' },
+    {
+      intent: Intent.Success,
+      text: 'Operational',
+      classname: 'bg-vega-green-550',
+    },
+    {
+      intent: Intent.Warning,
+      text: '5 Blocks behind',
+      classname: 'bg-warning',
+    },
+    { intent: Intent.Danger, text: 'Non operational', classname: 'bg-danger' },
   ];
   it.each(cases)(
     'renders correct text and indicator color for $diff block difference',
     (elem) => {
-      render(<HealthIndicator blockDiff={elem.diff} />);
+      render(<HealthIndicator text={elem.text} intent={elem.intent} />);
       expect(screen.getByTestId('indicator')).toHaveClass(elem.classname);
       expect(screen.getByText(elem.text)).toBeInTheDocument();
     }

apps/trading/components/footer/footer.tsx

@@ -1,59 +1,61 @@
+import { useCallback } from 'react';
 import { useEnvironment, useNodeHealth } from '@vegaprotocol/environment';
-import { useNavigatorOnline } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
-import { Indicator, Intent } from '@vegaprotocol/ui-toolkit';
+import type { Intent } from '@vegaprotocol/ui-toolkit';
+import { Indicator, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { useGlobalStore } from '../../stores';
 
 export const Footer = () => {
-  const { VEGA_URL } = useEnvironment();
-  const setNodeSwitcher = useGlobalStore(
-    (store) => (open: boolean) => store.update({ nodeSwitcherDialog: open })
-  );
-  const { blockDiff, datanodeBlockHeight } = useNodeHealth();
-
   return (
     <footer className="px-4 py-1 text-xs border-t border-default text-vega-light-300 dark:text-vega-dark-300 lg:fixed bottom-0 left-0 border-r bg-white dark:bg-black">
       {/* Pull left to align with top nav, due to button padding */}
       <div className="-ml-2">
-        {VEGA_URL && (
-          <NodeHealth
-            url={VEGA_URL}
-            blockHeight={datanodeBlockHeight}
-            blockDiff={blockDiff}
-            onClick={() => setNodeSwitcher(true)}
-          />
-        )}
+        <NodeHealth />
       </div>
     </footer>
   );
 };
-interface NodeHealthProps {
-  url: string;
-  blockHeight: number | undefined;
-  blockDiff: number | null;
-  onClick: () => void;
-}
 
-export const NodeHealth = ({
-  url,
-  blockHeight,
-  blockDiff,
-  onClick,
-}: NodeHealthProps) => {
+export const NodeHealth = () => {
+  const { VEGA_URL, VEGA_INCIDENT_URL } = useEnvironment();
+  const setNodeSwitcher = useGlobalStore(
+    (store) => (open: boolean) => store.update({ nodeSwitcherDialog: open })
+  );
+  const { datanodeBlockHeight, text, intent } = useNodeHealth();
+  const onClick = useCallback(() => {
+    setNodeSwitcher(true);
+  }, [setNodeSwitcher]);
+  const incidentsLink = VEGA_INCIDENT_URL && (
+    <ExternalLink className="ml-1" href={VEGA_INCIDENT_URL}>
+      {t('Mainnet status & incidents')}
+    </ExternalLink>
+  );
   return (
-    <FooterButton onClick={onClick} data-testid="node-health">
-      <FooterButtonPart>
-        <HealthIndicator blockDiff={blockDiff} />
-      </FooterButtonPart>
-      <FooterButtonPart>
-        <NodeUrl url={url} />
-      </FooterButtonPart>
-      <FooterButtonPart>
-        <span title={t('Block height')}>{blockHeight}</span>
-      </FooterButtonPart>
-    </FooterButton>
+    <>
+      {VEGA_URL && (
+        <FooterButton onClick={onClick} data-testid="node-health">
+          <FooterButtonPart>
+            <HealthIndicator text={text} intent={intent} />
+          </FooterButtonPart>
+          <FooterButtonPart>
+            <NodeUrl url={VEGA_URL} />
+          </FooterButtonPart>
+          {/* create a monospace effect - avoiding jumps of width */}
+          <FooterButtonPart
+            width={`${
+              datanodeBlockHeight
+                ? String(datanodeBlockHeight).length + 'ch'
+                : 'auto'
+            }`}
+          >
+            <span title={t('Block height')}>{datanodeBlockHeight}</span>
+          </FooterButtonPart>
+        </FooterButton>
+      )}
+      {incidentsLink}
+    </>
   );
 };
 
@@ -69,31 +71,11 @@ export const NodeUrl = ({ url }: NodeUrlProps) => {
 };
 
 interface HealthIndicatorProps {
-  blockDiff: number | null;
+  text: string;
+  intent: Intent;
 }
 
-// How many blocks behind the most advanced block that is
-// deemed acceptable for "Good" status
-const BLOCK_THRESHOLD = 3;
-
-export const HealthIndicator = ({ blockDiff }: HealthIndicatorProps) => {
-  const online = useNavigatorOnline();
-
-  let intent = Intent.Success;
-  let text = 'Operational';
-
-  if (!online) {
-    text = t('Offline');
-    intent = Intent.Danger;
-  } else if (blockDiff === null) {
-    // 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;
-  }
-
+export const HealthIndicator = ({ text, intent }: HealthIndicatorProps) => {
   return (
     <span title={t('Node health')}>
       <Indicator variant={intent} />
@@ -113,9 +95,16 @@ const FooterButton = (props: FooterButtonProps) => {
   return <button {...props} className={buttonClasses} />;
 };
 
-const FooterButtonPart = ({ children }: { children: ReactNode }) => {
+const FooterButtonPart = ({
+  width = 'auto',
+  children,
+}: {
+  children: ReactNode;
+  width?: string;
+}) => {
   return (
     <span
+      style={{ width }}
       className={classNames(
         'relative inline-block mr-2 last:mr-0 pr-2 last:pr-0',
         'last:after:hidden',

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -93,7 +93,8 @@ export const MarketLiquiditySupplied = ({
     percentage.gte(100) &&
     market?.marketTradingMode ===
       MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-    market.trigger === AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY;
+    market.trigger ===
+      AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS;
 
   const description = marketId ? (
     <section>

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { useAssetsDataProvider } from '@vegaprotocol/assets';
-import { ETHERSCAN_TX, useEtherscanLink } from '@vegaprotocol/environment';
+import { EtherscanLink } from '@vegaprotocol/environment';
 import { formatNumber, toBigNum } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { Toast, ToastContent } from '@vegaprotocol/ui-toolkit';
@@ -8,7 +8,7 @@ import { ToastHeading } from '@vegaprotocol/ui-toolkit';
 import { Panel } from '@vegaprotocol/ui-toolkit';
 import { CLOSE_AFTER } from '@vegaprotocol/ui-toolkit';
 import { useToasts } from '@vegaprotocol/ui-toolkit';
-import { ExternalLink, Intent, ProgressBar } from '@vegaprotocol/ui-toolkit';
+import { Intent, ProgressBar } from '@vegaprotocol/ui-toolkit';
 import { useCallback } from 'react';
 import compact from 'lodash/compact';
 import type { EthStoredTxState } from '@vegaprotocol/web3';
@@ -103,7 +103,7 @@ const EthTxPendingToastContent = ({ tx }: EthTxToastContentProps) => {
     <>
       <ToastHeading>{t('Awaiting confirmation')}</ToastHeading>
       <p>{t('Please wait for your transaction to be confirmed.')}</p>
-      <EtherscanLink tx={tx} />
+      {tx.txHash && <EtherscanLink tx={tx.txHash} />}
       <EthTransactionDetails tx={tx} />
     </>
   );
@@ -126,26 +126,12 @@ const EthTxErrorToastContent = ({ tx }: EthTxToastContentProps) => {
   );
 };
 
-const EtherscanLink = ({ tx }: EthTxToastContentProps) => {
-  const etherscanLink = useEtherscanLink();
-  return tx.txHash ? (
-    <p className="break-all">
-      <ExternalLink
-        href={etherscanLink(ETHERSCAN_TX.replace(':hash', tx.txHash))}
-        rel="noreferrer"
-      >
-        {t('View on Etherscan')}
-      </ExternalLink>
-    </p>
-  ) : null;
-};
-
 const EthTxConfirmedToastContent = ({ tx }: EthTxToastContentProps) => {
   return (
     <>
       <ToastHeading>{t('Transaction confirmed')}</ToastHeading>
       <p>{t('Your transaction has been confirmed.')}</p>
-      <EtherscanLink tx={tx} />
+      {tx.txHash && <EtherscanLink tx={tx.txHash} />}
       <EthTransactionDetails tx={tx} />
     </>
   );
@@ -162,7 +148,7 @@ const EthTxCompletedToastContent = ({ tx }: EthTxToastContentProps) => {
         {t('Your transaction has been completed.')}{' '}
         {isDeposit && t('Waiting for deposit confirmation.')}
       </p>
-      <EtherscanLink tx={tx} />
+      {tx.txHash && <EtherscanLink tx={tx.txHash} />}
       <EthTransactionDetails tx={tx} />
     </>
   );

libs/accounts/src/lib/accounts-manager.spec.tsx

@@ -15,51 +15,29 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
 }));
 
 describe('AccountManager', () => {
-  beforeEach(() => {
-    mockedUseDataProvider
-      .mockImplementationOnce((args) => {
-        return {
-          data: [],
-        };
-      })
-      .mockImplementationOnce((args) => {
-        return {
-          data: [
-            { asset: { id: 'a1' }, party: { id: 't1' } },
-            { asset: { id: 'a2' }, party: { id: 't2' } },
-          ],
-        };
-      });
-  });
-
-  it('change partyId should reload data provider', async () => {
-    const { rerender } = render(
-      <AccountManager
-        partyId="partyOne"
-        onClickAsset={jest.fn}
-        isReadOnly={false}
-      />
-    );
-    expect(
-      (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables.partyId
-    ).toEqual('partyOne');
-    await act(() => {
-      rerender(
-        <AccountManager
-          partyId="partyTwo"
-          onClickAsset={jest.fn}
-          isReadOnly={false}
-        />
-      );
+  describe('when rerender', () => {
+    beforeEach(() => {
+      mockedUseDataProvider
+        .mockImplementationOnce((args) => {
+          return {
+            data: [],
+          };
+        })
+        .mockImplementationOnce((args) => {
+          return {
+            data: [
+              { asset: { id: 'a1' }, party: { id: 't1' } },
+              { asset: { id: 'a2' }, party: { id: 't2' } },
+            ],
+          };
+        });
     });
-    expect(
-      (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId
-    ).toEqual('partyTwo');
-  });
 
-  it('update method should return proper result', async () => {
-    let rerenderer: (ui: React.ReactElement) => void;
-    await act(() => {
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('change partyId should reload data provider', async () => {
       const { rerender } = render(
         <AccountManager
           partyId="partyOne"
@@ -67,13 +45,67 @@ describe('AccountManager', () => {
           isReadOnly={false}
         />
       );
-      rerenderer = rerender;
+      expect(
+        (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables
+          .partyId
+      ).toEqual('partyOne');
+      await act(() => {
+        rerender(
+          <AccountManager
+            partyId="partyTwo"
+            onClickAsset={jest.fn}
+            isReadOnly={false}
+          />
+        );
+      });
+      expect(
+        (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables
+          .partyId
+      ).toEqual('partyTwo');
     });
-    await waitFor(() => {
-      expect(screen.getByText('No accounts')).toBeInTheDocument();
+
+    it('update method should return proper result', async () => {
+      let rerenderer: (ui: React.ReactElement) => void;
+      await act(() => {
+        const { rerender } = render(
+          <AccountManager
+            partyId="partyOne"
+            onClickAsset={jest.fn}
+            isReadOnly={false}
+          />
+        );
+        rerenderer = rerender;
+      });
+      await waitFor(() => {
+        expect(screen.getByText('No accounts')).toBeInTheDocument();
+      });
+      await act(() => {
+        rerenderer(
+          <AccountManager
+            partyId="partyOne"
+            onClickAsset={jest.fn}
+            isReadOnly={false}
+          />
+        );
+      });
+
+      const container = document.querySelector('.ag-center-cols-container');
+      await waitFor(() => {
+        expect(container).toBeInTheDocument();
+      });
+      expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
+    });
+  });
+
+  it('splash loading should be displayed', async () => {
+    mockedUseDataProvider.mockImplementation((args) => {
+      return {
+        loading: true,
+        data: null,
+      };
     });
     await act(() => {
-      rerenderer(
+      render(
         <AccountManager
           partyId="partyOne"
           onClickAsset={jest.fn}
@@ -81,11 +113,15 @@ describe('AccountManager', () => {
         />
       );
     });
-
-    const container = document.querySelector('.ag-center-cols-container');
     await waitFor(() => {
-      expect(container).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          (content, element) =>
+            Boolean(
+              element?.className.endsWith('flex items-center justify-center')
+            ) && content.startsWith('Loading')
+        )
+      ).toBeInTheDocument();
     });
-    expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
   });
 });

libs/accounts/src/lib/accounts-manager.tsx

@@ -10,7 +10,6 @@ import type { AccountFields } from './accounts-data-provider';
 import { aggregatedAccountsDataProvider } from './accounts-data-provider';
 import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
-import type { RowHeightParams } from 'ag-grid-community';
 
 interface AccountManagerProps {
   partyId: string;
@@ -19,6 +18,7 @@ interface AccountManagerProps {
   onClickDeposit?: (assetId?: string) => void;
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
+  noBottomPlaceholder?: boolean;
 }
 
 export const AccountManager = ({
@@ -28,6 +28,7 @@ export const AccountManager = ({
   partyId,
   isReadOnly,
   pinnedAsset,
+  noBottomPlaceholder,
 }: AccountManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const variables = useMemo(() => ({ partyId }), [partyId]);
@@ -45,12 +46,9 @@ export const AccountManager = ({
   const bottomPlaceholderProps = useBottomPlaceholder<AccountFields>({
     gridRef,
     setId,
+    disabled: noBottomPlaceholder,
   });
 
-  const getRowHeight = useCallback(
-    (params: RowHeightParams) => (params.node.rowPinned ? 32 : 22),
-    []
-  );
   return (
     <div className="relative h-full">
       <AccountTable
@@ -60,9 +58,9 @@ export const AccountManager = ({
         onClickDeposit={onClickDeposit}
         onClickWithdraw={onClickWithdraw}
         isReadOnly={isReadOnly}
-        noRowsOverlayComponent={() => null}
+        suppressLoadingOverlay
+        suppressNoRowsOverlay
         pinnedAsset={pinnedAsset}
-        getRowHeight={getRowHeight}
         {...bottomPlaceholderProps}
       />
       <div className="pointer-events-none absolute inset-0">

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useMemo, useState } from 'react';
 import {
   addDecimalsFormatNumber,
   isNumeric,
@@ -16,7 +16,12 @@ import {
   CenteredGridCellWrapper,
 } from '@vegaprotocol/datagrid';
 import { AgGridColumn } from 'ag-grid-react';
-import type { IDatasource, IGetRowsParams, RowNode } from 'ag-grid-community';
+import type {
+  IDatasource,
+  IGetRowsParams,
+  RowHeightParams,
+  RowNode,
+} from 'ag-grid-community';
 import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import BreakdownTable from './breakdown-table';
 import type { AccountFields } from './accounts-data-provider';
@@ -108,17 +113,31 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
           };
         }
       }
-      return undefined;
+      return currentPinnedAssetRow;
     }, [pinnedAssetId, props.pinnedAsset, props.rowData]);
 
+    const getRowHeight = useCallback(
+      (params: RowHeightParams) =>
+        params.node.rowPinned &&
+        params.data.asset.id === pinnedAssetId &&
+        new BigNumber(params.data.total).isLessThanOrEqualTo(0)
+          ? 32
+          : 22,
+      [pinnedAssetId]
+    );
+
     return (
       <>
         <AgGrid
+          {...props}
           style={{ width: '100%', height: '100%' }}
           overlayNoRowsTemplate={t('No accounts')}
           getRowId={({ data }: { data: AccountFields }) => data.asset.id}
           ref={ref}
           tooltipShowDelay={500}
+          rowData={props.rowData?.filter(
+            (data) => data.asset.id !== pinnedAssetId
+          )}
           defaultColDef={{
             flex: 1,
             resizable: true,
@@ -126,7 +145,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             sortable: true,
             comparator: accountValuesComparator,
           }}
-          {...props}
+          getRowHeight={getRowHeight}
           pinnedTopRowData={pinnedAssetRow ? [pinnedAssetRow] : undefined}
         >
           <AgGridColumn

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

@@ -59,13 +59,19 @@ export function createClient({
           const timestamp = r?.headers.get('x-block-timestamp');
           if (blockHeight && timestamp) {
             const state = useHeaderStore.getState();
-            useHeaderStore.setState({
-              ...state,
-              [r.url]: {
-                blockHeight: Number(blockHeight),
-                timestamp: new Date(Number(timestamp.slice(0, -6))),
-              },
-            });
+            const urlState = state[r.url];
+            if (
+              !urlState?.blockHeight ||
+              urlState.blockHeight !== blockHeight
+            ) {
+              useHeaderStore.setState({
+                ...state,
+                [r.url]: {
+                  blockHeight: Number(blockHeight),
+                  timestamp: new Date(Number(timestamp.slice(0, -6))),
+                },
+              });
+            }
           }
           return response;
         });

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

@@ -1,4 +1,4 @@
-import { ContractAddressLink } from '@vegaprotocol/environment';
+import { EtherscanLink } from '@vegaprotocol/environment';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type * as Schema from '@vegaprotocol/types';
@@ -108,7 +108,7 @@ export const rows: Rows = [
 
       return (
         <>
-          <ContractAddressLink address={asset.source.contractAddress} />{' '}
+          <EtherscanLink address={asset.source.contractAddress} />{' '}
           <CopyWithTooltip text={asset.source.contractAddress}>
             <button title={t('Copy address to clipboard')}>
               <Icon size={3} name="duplicate" />

libs/cypress/src/index.ts

@@ -46,7 +46,10 @@ addVegaWalletSubmitProposal();
 addVegaWalletSubmitLiquidityProvision();
 addImportNodeWallets();
 
-export { mockConnectWallet } from './lib/commands/vega-wallet-connect';
+export {
+  mockConnectWallet,
+  mockConnectWalletWithUserError,
+} from './lib/commands/vega-wallet-connect';
 export type { onMessage } from './lib/mock-ws';
 export { aliasGQLQuery } from './lib/mock-gql';
 export { aliasWalletQuery } from './lib/mock-rest';

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

@@ -35,6 +35,8 @@ function createNewMarketProposal(): ProposalSubmissionBody {
           changes: {
             decimalPlaces: '5',
             positionDecimalPlaces: '5',
+            linearSlippageFactor: '0.001',
+            quadraticSlippageFactor: '0',
             lpPriceRange: '10',
             instrument: {
               name: 'Test market 1',

libs/cypress/src/lib/commands/vega-wallet-connect.ts

@@ -1,4 +1,7 @@
-import { aliasWalletConnectQuery } from '../mock-rest';
+import {
+  aliasWalletConnectQuery,
+  aliasWalletConnectWithUserError,
+} from '../mock-rest';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -20,6 +23,12 @@ export const mockConnectWallet = () => {
   });
 };
 
+export const mockConnectWalletWithUserError = () => {
+  cy.mockWallet((req) => {
+    aliasWalletConnectWithUserError(req);
+  });
+};
+
 export function addVegaWalletConnect() {
   Cypress.Commands.add('connectVegaWallet', (isMobile) => {
     mockConnectWallet();

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

@@ -63,3 +63,23 @@ export const aliasWalletConnectQuery = (
     });
   }
 };
+
+export const aliasWalletConnectWithUserError = (
+  req: CyHttpMessages.IncomingHttpRequest
+) => {
+  if (hasMethod(req, 'client.connect_wallet')) {
+    req.alias = 'client.connect_wallet';
+    req.reply({
+      statusCode: 400,
+      body: {
+        jsonrpc: '2.0',
+        error: {
+          code: 3001,
+          data: 'the user rejected the wallet connection',
+          message: 'User error',
+        },
+        id: '0',
+      },
+    });
+  }
+};

libs/deal-ticket/src/components/trading-mode-tooltip/compile-grid-data.tsx

@@ -30,9 +30,12 @@ export const compileGridData = (
 ): { label: ReactNode; value?: ReactNode }[] => {
   const grid: SimpleGridProps['grid'] = [];
   const isLiquidityMonitoringAuction =
-    marketData?.marketTradingMode ===
+    (marketData?.marketTradingMode ===
       Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-    marketData?.trigger === Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY;
+      marketData?.trigger ===
+        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET) ||
+    marketData?.trigger ===
+      Schema.AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS;
 
   const formatStake = (value: string) => {
     const formattedValue = addDecimalsFormatNumber(

libs/deal-ticket/src/components/trading-mode-tooltip/trading-mode-tooltip.tsx

@@ -9,7 +9,6 @@ import * as Schema from '@vegaprotocol/types';
 import { ExternalLink, SimpleGrid } from '@vegaprotocol/ui-toolkit';
 import { compileGridData } from './compile-grid-data';
 import { useMarket, useStaticMarketData } from '@vegaprotocol/market-list';
-import BigNumber from 'bignumber.js';
 
 type TradingModeTooltipProps = {
   marketId?: string;
@@ -115,23 +114,39 @@ export const TradingModeTooltip = ({
     }
     case Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION: {
       switch (trigger) {
-        case Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY: {
-          const notEnoughLiquidity = new BigNumber(
-            marketData.suppliedStake || 0
-          ).isLessThan(marketData.targetStake || 0);
+        case Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET: {
           return (
             <section data-testid="trading-mode-tooltip">
               <p className={classNames({ 'mb-4': Boolean(compiledGrid) })}>
                 <span className="mb-2">
-                  {notEnoughLiquidity &&
-                    t(
-                      'This market is in auction until it reaches sufficient liquidity.'
-                    )}
-                  {!notEnoughLiquidity &&
-                    t(
-                      'This market may have sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.'
-                    )}
-                </span>{' '}
+                  {t(
+                    'This market is in auction until it reaches sufficient liquidity.'
+                  )}
+                </span>
+                {VEGA_DOCS_URL && (
+                  <ExternalLink
+                    href={
+                      createDocsLinks(VEGA_DOCS_URL)
+                        .AUCTION_TYPE_LIQUIDITY_MONITORING
+                    }
+                  >
+                    {t('Find out more')}
+                  </ExternalLink>
+                )}
+              </p>
+              {compiledGrid && <SimpleGrid grid={compiledGrid} />}
+            </section>
+          );
+        }
+        case Schema.AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS: {
+          return (
+            <section data-testid="trading-mode-tooltip">
+              <p className={classNames({ 'mb-4': Boolean(compiledGrid) })}>
+                <span className="mb-2">
+                  {t(
+                    'This market may have sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.'
+                  )}
+                </span>
                 {VEGA_DOCS_URL && (
                   <ExternalLink
                     href={

libs/deal-ticket/src/utils/validate-time-in-force.ts

@@ -13,7 +13,10 @@ export const validateTimeInForce = (
     const isPriceTrigger =
       trigger === Schema.AuctionTrigger.AUCTION_TRIGGER_PRICE;
     const isLiquidityTrigger =
-      trigger === Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY;
+      trigger ===
+        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET ||
+      trigger ===
+        Schema.AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS;
 
     if (isMarketInAuction(marketTradingMode)) {
       if (

libs/deal-ticket/src/utils/validate-type.ts

@@ -17,7 +17,10 @@ export const validateType = (
       const isPriceTrigger =
         trigger === Schema.AuctionTrigger.AUCTION_TRIGGER_PRICE;
       const isLiquidityTrigger =
-        trigger === Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY;
+        trigger ===
+          Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET ||
+        trigger ===
+          Schema.AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS;
 
       if (isMonitoringAuction && isPriceTrigger) {
         return MarketModeValidationType.PriceMonitoringAuction;

libs/deposits/src/lib/approve-notification.tsx

@@ -1,7 +1,7 @@
 import type { Asset } from '@vegaprotocol/assets';
-import { useEnvironment } from '@vegaprotocol/environment';
+import { EtherscanLink } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
-import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
+import { Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { formatNumber } from '@vegaprotocol/utils';
 import type { EthStoredTxState } from '@vegaprotocol/web3';
 import { EthTxStatus, useEthTransactionStore } from '@vegaprotocol/web3';
@@ -126,14 +126,10 @@ const ApprovalTxFeedback = ({
   selectedAsset: Asset;
   allowance?: BigNumber;
 }) => {
-  const { ETHERSCAN_URL } = useEnvironment();
-
   if (!tx) return null;
 
   const txLink = tx.txHash && (
-    <ExternalLink href={`${ETHERSCAN_URL}/tx/${tx.txHash}`}>
-      {t('View on Etherscan')}
-    </ExternalLink>
+    <EtherscanLink tx={tx.txHash}>{t('View on Etherscan')}</EtherscanLink>
   );
 
   if (tx.status === EthTxStatus.Error) {

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

@@ -8,7 +8,6 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { AgGridReact } from 'ag-grid-react';
-import { Link } from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   VegaICellRendererParams,
@@ -16,14 +15,13 @@ import type {
   TypedDataAgGrid,
 } from '@vegaprotocol/datagrid';
 import type { DepositFieldsFragment } from './__generated__/Deposit';
-import { useEnvironment } from '@vegaprotocol/environment';
+import { EtherscanLink } from '@vegaprotocol/environment';
 import { DepositStatusMapping } from '@vegaprotocol/types';
 
 export const DepositsTable = forwardRef<
   AgGridReact,
   TypedDataAgGrid<DepositFieldsFragment>
 >((props, ref) => {
-  const { ETHERSCAN_URL } = useEnvironment();
   return (
     <AgGrid
       ref={ref}
@@ -77,14 +75,9 @@ export const DepositsTable = forwardRef<
           if (!data) return null;
           if (!value) return '-';
           return (
-            <Link
-              title={t('View transaction on Etherscan')}
-              href={`${ETHERSCAN_URL}/tx/${value}`}
-              data-testid="etherscan-link"
-              target="_blank"
-            >
+            <EtherscanLink tx={value} data-testid="etherscan-link">
               {truncateByChars(value)}
-            </Link>
+            </EtherscanLink>
           );
         }}
       />

libs/deposits/src/lib/faucet-notification.tsx

@@ -1,7 +1,7 @@
 import type { Asset } from '@vegaprotocol/assets';
-import { useEnvironment } from '@vegaprotocol/environment';
+import { EtherscanLink } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
-import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
+import { Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { EthTxStatus, useEthTransactionStore } from '@vegaprotocol/web3';
 import { getFaucetError } from './get-faucet-error';
 
@@ -19,7 +19,6 @@ export const FaucetNotification = ({
   selectedAsset,
   faucetTxId,
 }: FaucetNotificationProps) => {
-  const { ETHERSCAN_URL } = useEnvironment();
   const tx = useEthTransactionStore((state) => {
     return state.transactions.find((t) => t?.id === faucetTxId);
   });
@@ -79,9 +78,9 @@ export const FaucetNotification = ({
               </p>
               {tx.txHash && (
                 <p>
-                  <ExternalLink href={`${ETHERSCAN_URL}/tx/${tx.txHash}`}>
+                  <EtherscanLink tx={tx.txHash}>
                     {t('View on Etherscan')}
-                  </ExternalLink>
+                  </EtherscanLink>
                 </p>
               )}
             </>
@@ -107,9 +106,9 @@ export const FaucetNotification = ({
               </p>
               {tx.txHash && (
                 <p>
-                  <ExternalLink href={`${ETHERSCAN_URL}/tx/${tx.txHash}`}>
+                  <EtherscanLink tx={tx.txHash}>
                     {t('View on Etherscan')}
-                  </ExternalLink>
+                  </EtherscanLink>
                 </p>
               )}
             </>

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

@@ -1,13 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEtherscanLink } from '../hooks';
-
-export const ContractAddressLink = ({ address }: { address: string }) => {
-  const etherscanLink = useEtherscanLink();
-  const href = etherscanLink(`/address/${address}`);
-  return (
-    <Link href={href} target="_blank" title={t('View on etherscan')}>
-      {address}
-    </Link>
-  );
-};

libs/environment/src/components/etherscan-link.tsx

@@ -0,0 +1,38 @@
+import { t } from '@vegaprotocol/i18n';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import type { ComponentProps } from 'react';
+import { ETHERSCAN_ADDRESS, ETHERSCAN_TX, useEtherscanLink } from '../hooks';
+
+export const EtherscanLink = ({
+  address,
+  tx,
+  children,
+  ...props
+}: {
+  address?: string;
+  tx?: string;
+} & ComponentProps<typeof ExternalLink>) => {
+  const etherscanLink = useEtherscanLink();
+  let href = '';
+
+  if ((!address && !tx) || (address && tx)) {
+    return null;
+  }
+
+  if (address) {
+    href = etherscanLink(ETHERSCAN_ADDRESS.replace(':hash', address));
+  }
+  if (tx) {
+    href = etherscanLink(ETHERSCAN_TX.replace(':hash', tx));
+  }
+
+  return (
+    <ExternalLink
+      href={href}
+      title={t('View on Etherscan (opens in a new tab)')}
+      {...props}
+    >
+      {children || address || tx}
+    </ExternalLink>
+  );
+};

libs/environment/src/components/index.ts

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

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

@@ -285,6 +285,7 @@ function compileEnvVars() {
     GIT_BRANCH: process.env['GIT_COMMIT_BRANCH'],
     GIT_COMMIT_HASH: process.env['GIT_COMMIT_HASH'],
     GIT_ORIGIN_URL: process.env['GIT_ORIGIN_URL'],
+    VEGA_INCIDENT_URL: process.env['NX_VEGA_INCIDENT_URL'],
   };
 
   return env;

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

@@ -103,6 +103,7 @@ export const TOKEN_VALIDATOR = '/validators/:id';
 export const EXPLORER_TX = '/txs/:hash';
 
 // Etherscan pages
+export const ETHERSCAN_ADDRESS = '/address/:hash';
 export const ETHERSCAN_TX = '/tx/:hash';
 
 // Console pages

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

@@ -5,6 +5,7 @@ import { MockedProvider } from '@apollo/react-testing';
 import type { StatisticsQuery } from '../utils/__generated__/Node';
 import { StatisticsDocument } from '../utils/__generated__/Node';
 import { useHeaderStore } from '@vegaprotocol/apollo-client';
+import { Intent } from '@vegaprotocol/ui-toolkit';
 
 const vegaUrl = 'https://foo.bar.com';
 
@@ -55,9 +56,24 @@ function setup(
 
 describe('useNodeHealth', () => {
   it.each([
-    { core: 1, node: 1, expected: 0 },
-    { core: 1, node: 5, expected: -4 },
-    { core: 10, node: 5, expected: 5 },
+    {
+      core: 1,
+      node: 1,
+      expectedText: 'Operational',
+      expectedIntent: Intent.Success,
+    },
+    {
+      core: 1,
+      node: 5,
+      expectedText: 'Operational',
+      expectedIntent: Intent.Success,
+    },
+    {
+      core: 10,
+      node: 5,
+      expectedText: '5 Blocks behind',
+      expectedIntent: Intent.Warning,
+    },
   ])(
     'provides difference core block $core and node block $node',
     async (cases) => {
@@ -65,12 +81,12 @@ describe('useNodeHealth', () => {
         blockHeight: cases.node,
         timestamp: new Date(),
       });
-      expect(result.current.blockDiff).toEqual(null);
-      expect(result.current.coreBlockHeight).toEqual(undefined);
+      expect(result.current.text).toEqual('Non operational');
+      expect(result.current.intent).toEqual(Intent.Danger);
       expect(result.current.datanodeBlockHeight).toEqual(cases.node);
       await waitFor(() => {
-        expect(result.current.blockDiff).toEqual(cases.expected);
-        expect(result.current.coreBlockHeight).toEqual(cases.core);
+        expect(result.current.text).toEqual(cases.expectedText);
+        expect(result.current.intent).toEqual(cases.expectedIntent);
         expect(result.current.datanodeBlockHeight).toEqual(cases.node);
       });
     }
@@ -90,25 +106,64 @@ describe('useNodeHealth', () => {
       blockHeight: 1,
       timestamp: new Date(),
     });
-    expect(result.current.blockDiff).toEqual(null);
-    expect(result.current.coreBlockHeight).toEqual(undefined);
+    expect(result.current.text).toEqual('Non operational');
+    expect(result.current.intent).toEqual(Intent.Danger);
     expect(result.current.datanodeBlockHeight).toEqual(1);
     await waitFor(() => {
-      expect(result.current.blockDiff).toEqual(null);
-      expect(result.current.coreBlockHeight).toEqual(undefined);
+      expect(result.current.text).toEqual('Non operational');
+      expect(result.current.intent).toEqual(Intent.Danger);
       expect(result.current.datanodeBlockHeight).toEqual(1);
     });
   });
 
   it('returns 0 if no headers are found (waits until stats query resolves)', async () => {
     const { result } = setup(createStatsMock(1), undefined);
-    expect(result.current.blockDiff).toEqual(null);
-    expect(result.current.coreBlockHeight).toEqual(undefined);
+    expect(result.current.text).toEqual('Non operational');
+    expect(result.current.intent).toEqual(Intent.Danger);
     expect(result.current.datanodeBlockHeight).toEqual(undefined);
     await waitFor(() => {
-      expect(result.current.blockDiff).toEqual(0);
-      expect(result.current.coreBlockHeight).toEqual(1);
+      expect(result.current.text).toEqual('Operational');
+      expect(result.current.intent).toEqual(Intent.Success);
       expect(result.current.datanodeBlockHeight).toEqual(undefined);
     });
   });
+
+  it('Warning latency', async () => {
+    const now = 1678800900087;
+    const headerTimestamp = now - 4000;
+    const dateNow = new Date(now);
+    const dateHeaderTimestamp = new Date(headerTimestamp);
+    jest.useFakeTimers().setSystemTime(dateNow);
+
+    const { result } = setup(createStatsMock(2), {
+      blockHeight: 2,
+      timestamp: dateHeaderTimestamp,
+    });
+    await waitFor(() => {
+      expect(result.current.text).toEqual('Warning delay ( >3 sec): 4.05 sec');
+      expect(result.current.intent).toEqual(Intent.Warning);
+      expect(result.current.datanodeBlockHeight).toEqual(2);
+    });
+  });
+
+  it('Erroneous latency', async () => {
+    const now = 1678800900087;
+    const headerTimestamp = now - 11000;
+    const dateNow = new Date(now);
+    const dateHeaderTimestamp = new Date(headerTimestamp);
+    jest.useFakeTimers().setSystemTime(dateNow);
+
+    const { result } = setup(createStatsMock(2), {
+      blockHeight: 2,
+      timestamp: dateHeaderTimestamp,
+    });
+    await waitFor(() => {
+      expect(result.current.text).toEqual(
+        'Erroneous latency ( >10 sec): 11.05 sec'
+      );
+      expect(result.current.intent).toEqual(Intent.Danger);
+      expect(result.current.datanodeBlockHeight).toEqual(2);
+    });
+    jest.useRealTimers();
+  });
 });

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

@@ -2,30 +2,35 @@ import { useEffect, useMemo } from 'react';
 import { useStatisticsQuery } from '../utils/__generated__/Node';
 import { useHeaderStore } from '@vegaprotocol/apollo-client';
 import { useEnvironment } from './use-environment';
-import { fromNanoSeconds } from '@vegaprotocol/utils';
+import { useNavigatorOnline } from '@vegaprotocol/react-helpers';
+import { Intent } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
 
 const POLL_INTERVAL = 1000;
+const BLOCK_THRESHOLD = 3;
+const ERROR_LATENCY = 10000;
+const WARNING_LATENCY = 3000;
 
 export const useNodeHealth = () => {
+  const online = useNavigatorOnline();
   const url = useEnvironment((store) => store.VEGA_URL);
   const headerStore = useHeaderStore();
   const headers = url ? headerStore[url] : undefined;
-  const { data, error, loading, startPolling, stopPolling } =
-    useStatisticsQuery({
-      fetchPolicy: 'no-cache',
-    });
+  const { data, error, startPolling, stopPolling } = useStatisticsQuery({
+    fetchPolicy: 'no-cache',
+  });
 
   const blockDiff = useMemo(() => {
     if (!data?.statistics.blockHeight) {
       return null;
     }
 
-    if (!headers) {
+    if (!headers?.blockHeight) {
       return 0;
     }
 
     return Number(data.statistics.blockHeight) - headers.blockHeight;
-  }, [data, headers]);
+  }, [data?.statistics.blockHeight, headers?.blockHeight]);
 
   useEffect(() => {
     if (error) {
@@ -38,17 +43,43 @@ export const useNodeHealth = () => {
     }
   }, [error, startPolling, stopPolling]);
 
+  const blockUpdateMsLatency = headers?.timestamp
+    ? Date.now() - headers.timestamp.getTime()
+    : 0;
+
+  const [text, intent] = useMemo(() => {
+    let intent = Intent.Success;
+    let text = 'Operational';
+
+    if (!online) {
+      text = t('Offline');
+      intent = Intent.Danger;
+    } else if (blockDiff === null) {
+      // Block height query failed and null was returned
+      text = t('Non operational');
+      intent = Intent.Danger;
+    } else if (blockUpdateMsLatency > ERROR_LATENCY) {
+      text = t('Erroneous latency ( >%s sec): %s sec', [
+        (ERROR_LATENCY / 1000).toString(),
+        (blockUpdateMsLatency / 1000).toFixed(2),
+      ]);
+      intent = Intent.Danger;
+    } else if (blockDiff >= BLOCK_THRESHOLD) {
+      text = t(`%s Blocks behind`, String(blockDiff));
+      intent = Intent.Warning;
+    } else if (blockUpdateMsLatency > WARNING_LATENCY) {
+      text = t('Warning delay ( >%s sec): %s sec', [
+        (WARNING_LATENCY / 1000).toString(),
+        (blockUpdateMsLatency / 1000).toFixed(2),
+      ]);
+      intent = Intent.Warning;
+    }
+    return [text, intent];
+  }, [online, blockDiff, blockUpdateMsLatency]);
+
   return {
-    error,
-    loading,
-    coreBlockHeight: data?.statistics
-      ? Number(data.statistics.blockHeight)
-      : undefined,
-    coreVegaTime: data?.statistics
-      ? fromNanoSeconds(data?.statistics.vegaTime)
-      : undefined,
     datanodeBlockHeight: headers?.blockHeight,
-    datanodeVegaTime: headers?.timestamp,
-    blockDiff,
+    text,
+    intent,
   };
 };

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

@@ -50,6 +50,7 @@ const schemaObject = {
   MAINTENANCE_PAGE: z.optional(z.boolean()),
   ETH_LOCAL_PROVIDER_URL: z.optional(z.string()),
   ETH_WALLET_MNEMONIC: z.optional(z.string()),
+  VEGA_INCIDENT_URL: z.optional(z.string()),
 };
 
 // combine schema above with custom rule to ensure either

libs/market-depth/src/lib/depth-chart-utils.spec.ts

@@ -74,7 +74,7 @@ describe('updateLevels', () => {
 
     const updates = [{ price: '132', volume: '200' }];
 
-    expect(updateLevels(priceLevels, updates, 2, 0, true)).toEqual([
+    expect(updateLevels(priceLevels, updates, 2, 0, false)).toEqual([
       { price: 1.35, volume: 200 },
       { price: 1.32, volume: 200 },
       { price: 1.28, volume: 100 },

libs/market-depth/src/lib/depth-chart-utils.ts

@@ -1,4 +1,6 @@
 import { addDecimal } from '@vegaprotocol/utils';
+import uniqBy from 'lodash/uniqBy';
+import reverse from 'lodash/reverse';
 
 interface PriceLevel {
   price: number;
@@ -41,9 +43,9 @@ export const updateLevels = (
   updates: RawPriceLevel[],
   decimalPlaces: number,
   positionDecimalPlaces: number,
-  reverse = false
+  ascending = true
 ) => {
-  updates.forEach((update) => {
+  uniqBy(reverse(updates || []), 'price').forEach((update) => {
     const updateLevel = parseLevel(
       update,
       decimalPlaces,
@@ -63,9 +65,9 @@ export const updateLevels = (
       }
     } else if (update.volume !== '0') {
       index = levels.findIndex((level) =>
-        reverse
-          ? level.price < updateLevel.price
-          : level.price > updateLevel.price
+        ascending
+          ? level.price > updateLevel.price
+          : level.price < updateLevel.price
       );
       if (index !== -1) {
         levels.splice(index, 0, updateLevel);

libs/market-depth/src/lib/depth-chart.tsx

@@ -9,6 +9,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
 import type { MarketData } from '@vegaprotocol/market-list';
 import type {
+  MarketDepthQuery,
   MarketDepthUpdateSubscription,
   PriceLevelFieldsFragment,
 } from './__generated__/MarketDepth';
@@ -22,6 +23,18 @@ interface DepthChartManagerProps {
 const formatMidPrice = (midPrice: string, decimalPlaces: number) =>
   Number(addDecimal(midPrice, decimalPlaces));
 
+const getMidPrice = (
+  sell: PriceLevelFieldsFragment[] | null | undefined,
+  buy: PriceLevelFieldsFragment[] | null | undefined,
+  decimalPlaces: number
+) =>
+  buy?.length && sell?.length
+    ? formatMidPrice(
+        ((BigInt(buy[0].price) + BigInt(sell[0].price)) / BigInt(2)).toString(),
+        decimalPlaces
+      )
+    : undefined;
+
 type DepthData = Pick<DepthChartProps, 'data' | 'midPrice'>;
 
 export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
@@ -30,6 +43,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
   const [depthData, setDepthData] = useState<DepthData | null>(null);
   const dataRef = useRef<DepthData | null>(null);
   const marketDataRef = useRef<MarketData | null>(null);
+  const rawDataRef = useRef<MarketDepthQuery['market'] | null>(null);
   const deltaRef = useRef<{
     sell: PriceLevelFieldsFragment[];
     buy: PriceLevelFieldsFragment[];
@@ -56,28 +70,28 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
         }
         dataRef.current = {
           ...dataRef.current,
-          midPrice: marketDataRef.current?.staticMidPrice
-            ? formatMidPrice(
-                marketDataRef.current?.staticMidPrice,
-                market.decimalPlaces
-              )
-            : undefined,
+          midPrice: getMidPrice(
+            rawDataRef.current?.depth.sell,
+            rawDataRef.current?.depth.buy,
+            market.decimalPlaces
+          ),
           data: {
-            buy: deltaRef.current.buy
+            buy: deltaRef.current.buy.length
               ? updateLevels(
                   dataRef.current.data.buy,
                   deltaRef.current.buy,
                   market.decimalPlaces,
                   market.positionDecimalPlaces,
-                  true
+                  false
                 )
               : dataRef.current.data.buy,
-            sell: deltaRef.current.sell
+            sell: deltaRef.current.sell.length
               ? updateLevels(
                   dataRef.current.data.sell,
                   deltaRef.current.sell,
                   market.decimalPlaces,
-                  market.positionDecimalPlaces
+                  market.positionDecimalPlaces,
+                  true
                 )
               : dataRef.current.data.sell,
           },
@@ -85,16 +99,23 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
         deltaRef.current.buy = [];
         deltaRef.current.sell = [];
         setDepthData(dataRef.current);
-      }, 1000),
+      }, 250),
     [market]
   );
 
+  useEffect(() => {
+    deltaRef.current.buy = [];
+    deltaRef.current.sell = [];
+  }, [marketId]);
+
   // Apply updates to the table
   const update = useCallback(
     ({
       delta: deltas,
+      data: rawData,
     }: {
-      delta?: MarketDepthUpdateSubscription['marketsDepthUpdate'];
+      delta?: MarketDepthUpdateSubscription['marketsDepthUpdate'] | null;
+      data: NonNullable<MarketDepthQuery['market']> | null;
     }) => {
       if (!dataRef.current) {
         return false;
@@ -109,6 +130,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
         if (delta.buy) {
           deltaRef.current.buy.push(...delta.buy);
         }
+        rawDataRef.current = rawData;
         updateDepthData();
       }
       return true;
@@ -116,7 +138,11 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
     [marketId, updateDepthData]
   );
 
-  const { data, error, loading } = useDataProvider({
+  const { data, error, loading } = useDataProvider<
+    NonNullable<MarketDepthQuery['market']> | null,
+    MarketDepthUpdateSubscription['marketsDepthUpdate'],
+    { marketId: string }
+  >({
     dataProvider: marketDepthProvider,
     update,
     variables,
@@ -155,9 +181,11 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
       return;
     }
     dataRef.current = {
-      midPrice: marketData.staticMidPrice
-        ? formatMidPrice(marketData.staticMidPrice, market.decimalPlaces)
-        : undefined,
+      midPrice: getMidPrice(
+        data.depth.sell,
+        data.depth.buy,
+        market.decimalPlaces
+      ),
       data: {
         buy:
           data.depth.buy?.map((priceLevel) =>
@@ -177,8 +205,12 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
           ) ?? [],
       },
     };
+    rawDataRef.current = data;
     setDepthData(dataRef.current);
-  }, [data, marketData, market]);
+    return () => {
+      updateDepthData.cancel();
+    };
+  }, [data, marketData, market, updateDepthData]);
 
   const volumeFormat = useCallback(
     (volume: number) =>

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

@@ -75,6 +75,11 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
     }, 250)
   );
 
+  useEffect(() => {
+    deltaRef.current.buy = [];
+    deltaRef.current.sell = [];
+  }, [marketId]);
+
   const update = useCallback(
     ({
       delta: deltas,

libs/market-info/src/components/market-info/index.ts

@@ -3,3 +3,4 @@ export * from './info-market';
 export * from './tooltip-mapping';
 export * from './__generated__/MarketInfo';
 export * from './market-info-data-provider';
+export * from './market-info-panels';

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

@@ -1,17 +1,5 @@
-import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { useEnvironment } from '@vegaprotocol/environment';
-import {
-  totalFeesPercentage,
-  calcCandleVolume,
-} from '@vegaprotocol/market-list';
-import {
-  addDecimalsFormatNumber,
-  formatNumber,
-  formatNumberPercentage,
-  removePaginationWrapper,
-  TokenLinks,
-  getMarketExpiryDateFormatted,
-} from '@vegaprotocol/utils';
+import { removePaginationWrapper, TokenLinks } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider, useYesterday } from '@vegaprotocol/react-helpers';
 import * as Schema from '@vegaprotocol/types';
@@ -22,15 +10,31 @@ import {
   Link as UILink,
   Splash,
 } from '@vegaprotocol/ui-toolkit';
-import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 import { generatePath, Link } from 'react-router-dom';
 
-import { MarketInfoTable } from './info-key-value-table';
 import { marketInfoWithDataAndCandlesProvider } from './market-info-data-provider';
 
 import type { MarketInfoWithDataAndCandles } from './market-info-data-provider';
 import { MarketProposalNotification } from '@vegaprotocol/proposals';
+import {
+  CurrentFeesInfoPanel,
+  InstrumentInfoPanel,
+  InsurancePoolInfoPanel,
+  KeyDetailsInfoPanel,
+  LiquidityInfoPanel,
+  LiquidityMonitoringParametersInfoPanel,
+  LiquidityPriceRangeInfoPanel,
+  MarketPriceInfoPanel,
+  MarketVolumeInfoPanel,
+  MetadataInfoPanel,
+  OracleInfoPanel,
+  PriceMonitoringBoundsInfoPanel,
+  RiskFactorsInfoPanel,
+  RiskModelInfoPanel,
+  RiskParametersInfoPanel,
+  SettlementAssetInfoPanel,
+} from './market-info-panels';
 
 export interface InfoProps {
   market: MarketInfoWithDataAndCandles;
@@ -80,15 +84,6 @@ export const MarketInfoContainer = ({
 export const Info = ({ market, onSelect }: InfoProps) => {
   const { VEGA_TOKEN_URL, VEGA_EXPLORER_URL } = useEnvironment();
   const headerClassName = 'uppercase text-lg';
-  const assetSymbol =
-    market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
-  const quoteUnit =
-    market?.tradableInstrument.instrument.product?.quoteName || '';
-  const assetId = useMemo(
-    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
-    [market]
-  );
-  const { data: asset } = useAssetDataProvider(assetId ?? '');
 
   if (!market) return null;
 
@@ -96,272 +91,75 @@ export const Info = ({ market, onSelect }: InfoProps) => {
     market.accountsConnection?.edges
   );
 
-  const last24hourVolume = market.candles && calcCandleVolume(market.candles);
-
   const marketDataPanels = [
     {
       title: t('Current fees'),
-      content: (
-        <>
-          <MarketInfoTable
-            data={{
-              ...market.fees.factors,
-              totalFees: totalFeesPercentage(market.fees.factors),
-            }}
-            asPercentage={true}
-          />
-          <p className="text-xs">
-            {t(
-              'All fees are paid by price takers and are a % of the trade notional value. Fees are not paid during auction uncrossing.'
-            )}
-          </p>
-        </>
-      ),
+      content: <CurrentFeesInfoPanel market={market} />,
     },
     {
       title: t('Market price'),
-      content: (
-        <>
-          <MarketInfoTable
-            data={{
-              markPrice: market.data?.markPrice,
-              bestBidPrice: market.data?.bestBidPrice,
-              bestOfferPrice: market.data?.bestOfferPrice,
-              quoteUnit: market.tradableInstrument.instrument.product.quoteName,
-            }}
-            decimalPlaces={market.decimalPlaces}
-          />
-          <p className="text-xs mt-4">
-            {t(
-              'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
-              [assetSymbol, quoteUnit]
-            )}
-          </p>
-        </>
-      ),
+      content: <MarketPriceInfoPanel market={market} />,
     },
     {
       title: t('Market volume'),
-      content: (
-        <MarketInfoTable
-          data={{
-            '24hourVolume':
-              last24hourVolume && last24hourVolume !== '0'
-                ? addDecimalsFormatNumber(
-                    last24hourVolume,
-                    market.positionDecimalPlaces
-                  )
-                : '-',
-            openInterest: market.data?.openInterest,
-            bestBidVolume: market.data?.bestBidVolume,
-            bestOfferVolume: market.data?.bestOfferVolume,
-            bestStaticBidVolume: market.data?.bestStaticBidVolume,
-            bestStaticOfferVolume: market.data?.bestStaticOfferVolume,
-          }}
-          decimalPlaces={market.positionDecimalPlaces}
-        />
-      ),
+      content: <MarketVolumeInfoPanel market={market} />,
     },
     ...marketAccounts
       .filter((a) => a.type === Schema.AccountType.ACCOUNT_TYPE_INSURANCE)
       .map((a) => ({
         title: t(`Insurance pool`),
-        content: (
-          <MarketInfoTable
-            data={{
-              balance: a.balance,
-            }}
-            assetSymbol={assetSymbol}
-            decimalPlaces={
-              market.tradableInstrument.instrument.product.settlementAsset
-                .decimals
-            }
-          />
-        ),
+        content: <InsurancePoolInfoPanel market={market} account={a} />,
       })),
   ];
 
-  const keyDetails = {
-    decimalPlaces: market.decimalPlaces,
-    positionDecimalPlaces: market.positionDecimalPlaces,
-    tradingMode: market.tradingMode,
-    state: Schema.MarketStateMapping[market.state],
-  };
-
-  const assetDecimals =
-    market.tradableInstrument.instrument.product.settlementAsset.decimals;
-
-  const liquidityPriceRange = formatNumberPercentage(
-    new BigNumber(market.lpPriceRange).times(100)
-  );
-
   const marketSpecPanels = [
     {
       title: t('Key details'),
-      content: (
-        <MarketInfoTable
-          data={{
-            name: market.tradableInstrument.instrument.name,
-            marketID: market.id,
-            tradingMode:
-              keyDetails.tradingMode &&
-              Schema.MarketTradingModeMapping[keyDetails.tradingMode],
-            marketDecimalPlaces: market.decimalPlaces,
-            positionDecimalPlaces: market.positionDecimalPlaces,
-            settlementAssetDecimalPlaces: assetDecimals,
-          }}
-        />
-      ),
+      content: <KeyDetailsInfoPanel market={market} />,
     },
     {
       title: t('Instrument'),
-      content: (
-        <MarketInfoTable
-          data={{
-            marketName: market.tradableInstrument.instrument.name,
-            code: market.tradableInstrument.instrument.code,
-            productType:
-              market.tradableInstrument.instrument.product.__typename,
-            ...market.tradableInstrument.instrument.product,
-          }}
-        />
-      ),
+      content: <InstrumentInfoPanel market={market} />,
     },
     {
       title: t('Settlement asset'),
-      content: asset ? (
-        <>
-          <AssetDetailsTable
-            asset={asset}
-            inline={true}
-            noBorder={true}
-            dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
-            ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
-          />
-          <p className="text-xs mt-4">
-            {t(
-              'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
-              [assetSymbol, quoteUnit]
-            )}
-          </p>
-        </>
-      ) : (
-        <Splash>{t('No data')}</Splash>
-      ),
+      content: <SettlementAssetInfoPanel market={market} />,
     },
     {
       title: t('Metadata'),
-      content: (
-        <MarketInfoTable
-          data={{
-            expiryDate: getMarketExpiryDateFormatted(
-              market.tradableInstrument.instrument.metadata.tags
-            ),
-            ...market.tradableInstrument.instrument.metadata.tags
-              ?.map((tag) => {
-                const [key, value] = tag.split(':');
-                return { [key]: value };
-              })
-              .reduce((acc, curr) => ({ ...acc, ...curr }), {}),
-          }}
-        />
-      ),
+      content: <MetadataInfoPanel market={market} />,
     },
     {
       title: t('Risk model'),
-      content: (
-        <MarketInfoTable
-          data={market.tradableInstrument.riskModel}
-          unformatted={true}
-          omits={[]}
-        />
-      ),
+      content: <RiskModelInfoPanel market={market} />,
     },
     {
       title: t('Risk parameters'),
-      content: (
-        <MarketInfoTable
-          data={market.tradableInstrument.riskModel.params}
-          unformatted={true}
-          omits={[]}
-        />
-      ),
+      content: <RiskParametersInfoPanel market={market} />,
     },
     {
       title: t('Risk factors'),
-      content: (
-        <MarketInfoTable
-          data={market.riskFactors}
-          unformatted={true}
-          omits={['market', '__typename']}
-        />
-      ),
+      content: <RiskFactorsInfoPanel market={market} />,
     },
     ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
-      (trigger, i) => {
-        const bounds = market.data?.priceMonitoringBounds?.[i];
-        return {
-          title: t(`Price monitoring bounds ${i + 1}`),
-          content: (
-            <div className="text-xs">
-              <div className="grid grid-cols-2 text-xs mb-4">
-                <p className="col-span-1">
-                  {t('%s probability price bounds', [
-                    formatNumberPercentage(
-                      new BigNumber(trigger.probability).times(100)
-                    ),
-                  ])}
-                </p>
-                <p className="col-span-1 text-right">
-                  {t('Within %s seconds', [formatNumber(trigger.horizonSecs)])}
-                </p>
-              </div>
-              <div className="pl-2 pb-0 text-xs border-l-2">
-                {bounds && (
-                  <MarketInfoTable
-                    data={{
-                      highestPrice: bounds.maxValidPrice,
-                      lowestPrice: bounds.minValidPrice,
-                    }}
-                    decimalPlaces={market.decimalPlaces}
-                    assetSymbol={quoteUnit}
-                  />
-                )}
-              </div>
-              <p className="mt-4">
-                {t('Results in %s seconds auction if breached', [
-                  trigger.auctionExtensionSecs.toString(),
-                ])}
-              </p>
-            </div>
-          ),
-        };
-      }
+      (_, triggerIndex) => ({
+        title: t(`Price monitoring bounds ${triggerIndex + 1}`),
+        content: (
+          <PriceMonitoringBoundsInfoPanel
+            market={market}
+            triggerIndex={triggerIndex}
+          />
+        ),
+      })
     ),
     {
       title: t('Liquidity monitoring parameters'),
-      content: (
-        <MarketInfoTable
-          data={{
-            triggeringRatio:
-              market.liquidityMonitoringParameters.triggeringRatio,
-            ...market.liquidityMonitoringParameters.targetStakeParameters,
-          }}
-        />
-      ),
+      content: <LiquidityMonitoringParametersInfoPanel market={market} />,
     },
     {
       title: t('Liquidity'),
       content: (
-        <MarketInfoTable
-          data={{
-            targetStake: market.data && market.data.targetStake,
-            suppliedStake: market.data && market.data?.suppliedStake,
-            marketValueProxy: market.data && market.data.marketValueProxy,
-          }}
-          decimalPlaces={assetDecimals}
-          assetSymbol={assetSymbol}
-        >
+        <LiquidityInfoPanel market={market}>
           <Link
             to={`/liquidity/${market.id}`}
             onClick={() => onSelect(market.id)}
@@ -369,57 +167,17 @@ export const Info = ({ market, onSelect }: InfoProps) => {
           >
             <UILink>{t('View liquidity provision table')}</UILink>
           </Link>
-        </MarketInfoTable>
+        </LiquidityInfoPanel>
       ),
     },
     {
       title: t('Liquidity price range'),
-      content: (
-        <>
-          <p className="text-xs mb-4">
-            {`For liquidity orders to count towards a commitment, they must be
-            within the liquidity monitoring bounds.`}
-          </p>
-          <p className="text-xs mb-4">
-            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
-            price.`}
-          </p>
-          <div className="pl-2 pb-0 text-xs border-l-2">
-            <MarketInfoTable
-              data={{
-                liquidityPriceRange: `${liquidityPriceRange} of mid price`,
-                lowestPrice:
-                  market.data?.midPrice &&
-                  `${addDecimalsFormatNumber(
-                    new BigNumber(1)
-                      .minus(market.lpPriceRange)
-                      .times(market.data.midPrice)
-                      .toString(),
-                    market.decimalPlaces
-                  )} ${quoteUnit}`,
-                highestPrice:
-                  market.data?.midPrice &&
-                  `${addDecimalsFormatNumber(
-                    new BigNumber(1)
-                      .plus(market.lpPriceRange)
-                      .times(market.data.midPrice)
-                      .toString(),
-                    market.decimalPlaces
-                  )} ${quoteUnit}`,
-              }}
-            ></MarketInfoTable>
-          </div>
-        </>
-      ),
+      content: <LiquidityPriceRangeInfoPanel market={market} />,
     },
     {
       title: t('Oracle'),
       content: (
-        <MarketInfoTable
-          data={
-            market.tradableInstrument.instrument.product.dataSourceSpecBinding
-          }
-        >
+        <OracleInfoPanel market={market}>
           <ExternalLink
             href={`${VEGA_EXPLORER_URL}/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData.id}`}
           >
@@ -430,7 +188,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
           >
             {t('View termination oracle specification')}
           </ExternalLink>
-        </MarketInfoTable>
+        </OracleInfoPanel>
       ),
     },
   ];

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

@@ -0,0 +1,418 @@
+import type { ComponentProps } from 'react';
+import { useMemo } from 'react';
+import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
+import { t } from '@vegaprotocol/i18n';
+import {
+  calcCandleVolume,
+  totalFeesPercentage,
+} from '@vegaprotocol/market-list';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  addDecimalsFormatNumber,
+  formatNumber,
+  formatNumberPercentage,
+  getMarketExpiryDateFormatted,
+} from '@vegaprotocol/utils';
+import type { Get } from 'type-fest';
+import { MarketInfoTable } from './info-key-value-table';
+import type {
+  MarketInfo,
+  MarketInfoWithData,
+  MarketInfoWithDataAndCandles,
+} from './market-info-data-provider';
+import BigNumber from 'bignumber.js';
+import { MarketTradingModeMapping } from '@vegaprotocol/types';
+
+type PanelProps = Pick<
+  ComponentProps<typeof MarketInfoTable>,
+  'children' | 'noBorder'
+>;
+
+type MarketInfoProps = {
+  market: MarketInfo;
+};
+
+type MarketInfoWithDataProps = {
+  market: MarketInfoWithData;
+};
+
+type MarketInfoWithDataAndCandlesProps = {
+  market: MarketInfoWithDataAndCandles;
+};
+
+export const CurrentFeesInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <>
+    <MarketInfoTable
+      data={{
+        ...market.fees.factors,
+        totalFees: totalFeesPercentage(market.fees.factors),
+      }}
+      asPercentage={true}
+      {...props}
+    />
+    <p className="text-xs">
+      {t(
+        'All fees are paid by price takers and are a % of the trade notional value. Fees are not paid during auction uncrossing.'
+      )}
+    </p>
+  </>
+);
+
+export const MarketPriceInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoWithDataProps & PanelProps) => {
+  const assetSymbol =
+    market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
+  const quoteUnit =
+    market?.tradableInstrument.instrument.product?.quoteName || '';
+  return (
+    <>
+      <MarketInfoTable
+        data={{
+          markPrice: market.data?.markPrice,
+          bestBidPrice: market.data?.bestBidPrice,
+          bestOfferPrice: market.data?.bestOfferPrice,
+          quoteUnit: market.tradableInstrument.instrument.product.quoteName,
+        }}
+        decimalPlaces={market.decimalPlaces}
+        {...props}
+      />
+      <p className="text-xs mt-4">
+        {t(
+          'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
+          [assetSymbol, quoteUnit]
+        )}
+      </p>
+    </>
+  );
+};
+
+export const MarketVolumeInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoWithDataAndCandlesProps & PanelProps) => {
+  const last24hourVolume = market.candles && calcCandleVolume(market.candles);
+  return (
+    <MarketInfoTable
+      data={{
+        '24hourVolume':
+          last24hourVolume && last24hourVolume !== '0'
+            ? addDecimalsFormatNumber(
+                last24hourVolume,
+                market.positionDecimalPlaces
+              )
+            : '-',
+        openInterest: market.data?.openInterest,
+        bestBidVolume: market.data?.bestBidVolume,
+        bestOfferVolume: market.data?.bestOfferVolume,
+        bestStaticBidVolume: market.data?.bestStaticBidVolume,
+        bestStaticOfferVolume: market.data?.bestStaticOfferVolume,
+      }}
+      decimalPlaces={market.positionDecimalPlaces}
+      {...props}
+    />
+  );
+};
+
+export const InsurancePoolInfoPanel = ({
+  market,
+  account,
+  ...props
+}: {
+  account: NonNullable<
+    Get<MarketInfoWithData, 'accountsConnection.edges[0].node'>
+  >;
+} & MarketInfoProps &
+  PanelProps) => {
+  const assetSymbol =
+    market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
+  return (
+    <MarketInfoTable
+      data={{
+        balance: account.balance,
+      }}
+      assetSymbol={assetSymbol}
+      decimalPlaces={
+        market.tradableInstrument.instrument.product.settlementAsset.decimals
+      }
+      {...props}
+    />
+  );
+};
+
+export const KeyDetailsInfoPanel = ({
+  market,
+}: MarketInfoProps & PanelProps) => {
+  const assetDecimals =
+    market.tradableInstrument.instrument.product.settlementAsset.decimals;
+  return (
+    <MarketInfoTable
+      data={{
+        name: market.tradableInstrument.instrument.name,
+        marketID: market.id,
+        tradingMode:
+          market.tradingMode && MarketTradingModeMapping[market.tradingMode],
+        marketDecimalPlaces: market.decimalPlaces,
+        positionDecimalPlaces: market.positionDecimalPlaces,
+        settlementAssetDecimalPlaces: assetDecimals,
+      }}
+    />
+  );
+};
+
+export const InstrumentInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <MarketInfoTable
+    data={{
+      marketName: market.tradableInstrument.instrument.name,
+      code: market.tradableInstrument.instrument.code,
+      productType: market.tradableInstrument.instrument.product.__typename,
+      ...market.tradableInstrument.instrument.product,
+    }}
+    {...props}
+  />
+);
+
+export const SettlementAssetInfoPanel = ({
+  market,
+  noBorder = true,
+}: MarketInfoProps & PanelProps) => {
+  const assetSymbol =
+    market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
+  const quoteUnit =
+    market?.tradableInstrument.instrument.product?.quoteName || '';
+  const assetId = useMemo(
+    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
+    [market]
+  );
+  const { data: asset } = useAssetDataProvider(assetId ?? '');
+  return asset ? (
+    <>
+      <AssetDetailsTable
+        asset={asset}
+        inline={true}
+        noBorder={noBorder}
+        dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
+        ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
+      />
+      <p className="text-xs mt-4">
+        {t(
+          'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
+          [assetSymbol, quoteUnit]
+        )}
+      </p>
+    </>
+  ) : (
+    <Splash>{t('No data')}</Splash>
+  );
+};
+
+export const MetadataInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <MarketInfoTable
+    data={{
+      expiryDate: getMarketExpiryDateFormatted(
+        market.tradableInstrument.instrument.metadata.tags
+      ),
+      ...market.tradableInstrument.instrument.metadata.tags
+        ?.map((tag) => {
+          const [key, value] = tag.split(':');
+          return { [key]: value };
+        })
+        .reduce((acc, curr) => ({ ...acc, ...curr }), {}),
+    }}
+    {...props}
+  />
+);
+
+export const RiskModelInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <MarketInfoTable
+    data={market.tradableInstrument.riskModel}
+    unformatted={true}
+    omits={[]}
+    {...props}
+  />
+);
+
+export const RiskParametersInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <MarketInfoTable
+    data={market.tradableInstrument.riskModel.params}
+    unformatted={true}
+    omits={[]}
+    {...props}
+  />
+);
+
+export const RiskFactorsInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <MarketInfoTable
+    data={market.riskFactors}
+    unformatted={true}
+    omits={['market', '__typename']}
+    {...props}
+  />
+);
+
+export const PriceMonitoringBoundsInfoPanel = ({
+  market,
+  triggerIndex,
+  ...props
+}: {
+  triggerIndex: number;
+} & MarketInfoWithDataProps &
+  PanelProps) => {
+  const quoteUnit =
+    market?.tradableInstrument.instrument.product?.quoteName || '';
+  const trigger =
+    market.priceMonitoringSettings?.parameters?.triggers?.[triggerIndex];
+  const bounds = market.data?.priceMonitoringBounds?.[triggerIndex];
+  if (!trigger) {
+    console.error(
+      `Could not find data for trigger ${triggerIndex} (market id: ${market.id})`
+    );
+    return null;
+  }
+  return (
+    <div className="text-xs">
+      <div className="grid grid-cols-2 text-xs mb-4">
+        <p className="col-span-1">
+          {t('%s probability price bounds', [
+            formatNumberPercentage(
+              new BigNumber(trigger.probability).times(100)
+            ),
+          ])}
+        </p>
+        <p className="col-span-1 text-right">
+          {t('Within %s seconds', [formatNumber(trigger.horizonSecs)])}
+        </p>
+      </div>
+      <div className="pl-2 pb-0 text-xs border-l-2">
+        {bounds && (
+          <MarketInfoTable
+            data={{
+              highestPrice: bounds.maxValidPrice,
+              lowestPrice: bounds.minValidPrice,
+            }}
+            decimalPlaces={market.decimalPlaces}
+            assetSymbol={quoteUnit}
+            {...props}
+          />
+        )}
+      </div>
+      <p className="mt-4">
+        {t('Results in %s seconds auction if breached', [
+          trigger.auctionExtensionSecs.toString(),
+        ])}
+      </p>
+    </div>
+  );
+};
+
+export const LiquidityMonitoringParametersInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <MarketInfoTable
+    data={{
+      triggeringRatio: market.liquidityMonitoringParameters.triggeringRatio,
+      ...market.liquidityMonitoringParameters.targetStakeParameters,
+    }}
+    {...props}
+  />
+);
+
+export const LiquidityInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoWithDataProps & PanelProps) => {
+  const assetDecimals =
+    market.tradableInstrument.instrument.product.settlementAsset.decimals;
+  const assetSymbol =
+    market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
+  return (
+    <MarketInfoTable
+      data={{
+        targetStake: market.data && market.data.targetStake,
+        suppliedStake: market.data && market.data?.suppliedStake,
+        marketValueProxy: market.data && market.data.marketValueProxy,
+      }}
+      decimalPlaces={assetDecimals}
+      assetSymbol={assetSymbol}
+      {...props}
+    />
+  );
+};
+
+export const LiquidityPriceRangeInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoWithDataProps & PanelProps) => {
+  const quoteUnit =
+    market?.tradableInstrument.instrument.product?.quoteName || '';
+  const liquidityPriceRange = formatNumberPercentage(
+    new BigNumber(market.lpPriceRange).times(100)
+  );
+  return (
+    <>
+      <p className="text-xs mb-4">
+        {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
+      </p>
+      <p className="text-xs mb-4">
+        {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
+            price.`}
+      </p>
+      <div className="pl-2 pb-0 text-xs border-l-2">
+        <MarketInfoTable
+          data={{
+            liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+            lowestPrice:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .minus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${quoteUnit}`,
+            highestPrice:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .plus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${quoteUnit}`,
+          }}
+        ></MarketInfoTable>
+      </div>
+    </>
+  );
+};
+
+export const OracleInfoPanel = ({
+  market,
+  ...props
+}: MarketInfoProps & PanelProps) => (
+  <MarketInfoTable
+    data={market.tradableInstrument.instrument.product.dataSourceSpecBinding}
+    {...props}
+  />
+);

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

@@ -74,7 +74,7 @@ const marketsDataFieldsFragments: MarketsDataFieldsFragment[] = [
     bestBidPrice: '0',
     bestOfferPrice: '0',
     markPrice: '4612690058',
-    trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY,
+    trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET,
     __typename: 'MarketData',
   },
   {
@@ -91,7 +91,7 @@ const marketsDataFieldsFragments: MarketsDataFieldsFragment[] = [
     bestBidPrice: '0',
     bestOfferPrice: '0',
     markPrice: '4612690058',
-    trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY,
+    trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET,
     __typename: 'MarketData',
   },
 ];

libs/orders/src/lib/components/order-list-container.tsx

@@ -6,9 +6,11 @@ import { OrderListManager } from './order-list-manager';
 export const OrderListContainer = ({
   marketId,
   onMarketClick,
+  enforceBottomPlaceholder,
 }: {
   marketId?: string;
   onMarketClick?: (marketId: string) => void;
+  enforceBottomPlaceholder?: boolean;
 }) => {
   const { pubKey, isReadOnly } = useVegaWallet();
 
@@ -22,6 +24,7 @@ export const OrderListContainer = ({
       marketId={marketId}
       onMarketClick={onMarketClick}
       isReadOnly={isReadOnly}
+      enforceBottomPlaceholder={enforceBottomPlaceholder}
     />
   );
 };

libs/orders/src/lib/components/order-list-manager/order-list-manager.spec.tsx

@@ -74,4 +74,20 @@ describe('OrderListManager', () => {
     });
     expect(await screen.findByText('OrderList')).toBeInTheDocument();
   });
+
+  it('should show no orders message', async () => {
+    jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
+      data: [],
+      loading: false,
+      error: undefined,
+      flush: jest.fn(),
+      reload: jest.fn(),
+      load: jest.fn(),
+      totalCount: undefined,
+    });
+    await act(async () => {
+      render(generateJsx());
+    });
+    expect(screen.getByText('No orders')).toBeInTheDocument();
+  });
 });

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -1,12 +1,7 @@
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { useCallback, useRef, useState } from 'react';
-import type {
-  BodyScrollEvent,
-  BodyScrollEndEvent,
-  FilterChangedEvent,
-  SortChangedEvent,
-} from 'ag-grid-community';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { FilterChangedEvent, SortChangedEvent } from 'ag-grid-community';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import type { GridReadyEvent } from 'ag-grid-community';
@@ -23,13 +18,14 @@ import {
 } from '@vegaprotocol/wallet';
 import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
 import { OrderEditDialog } from '../order-list/order-edit-dialog';
-import type { Order } from '../order-data-provider';
+import type { Order, OrderEdge } from '../order-data-provider';
 
 export interface OrderListManagerProps {
   partyId: string;
   marketId?: string;
   onMarketClick?: (marketId: string) => void;
   isReadOnly: boolean;
+  enforceBottomPlaceholder?: boolean;
 }
 
 const CancelAllOrdersButton = ({
@@ -65,78 +61,50 @@ export const OrderListManager = ({
   marketId,
   onMarketClick,
   isReadOnly,
+  enforceBottomPlaceholder,
 }: OrderListManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const scrolledToTop = useRef(true);
+  const [dataCount, setDataCount] = useState(0);
+  const scrolledToTop = useRef(false);
   const [sort, setSort] = useState<Sort[] | undefined>();
   const [filter, setFilter] = useState<Filter | undefined>(initialFilter);
   const [editOrder, setEditOrder] = useState<Order | null>(null);
   const create = useVegaTransactionStore((state) => state.create);
   const hasActiveOrder = useHasActiveOrder(marketId);
 
-  const {
-    data,
-    error,
-    loading,
-    addNewRows,
-    getRows,
-    reload,
-    makeBottomPlaceholders,
-  } = useOrderListData({
+  const { data, error, loading, reload } = useOrderListData({
     partyId,
-    marketId,
     sort,
     filter,
     gridRef,
     scrolledToTop,
   });
 
-  const checkBottomPlaceholder = useCallback(() => {
-    if (!isReadOnly && hasActiveOrder) {
-      const rowCont = gridRef.current?.api?.getModel().getRowCount() ?? 0;
-      const lastRowIndex = gridRef.current?.api?.getLastDisplayedRow();
-      if (lastRowIndex && rowCont - 1 === lastRowIndex) {
-        const lastrow =
-          gridRef.current?.api.getDisplayedRowAtIndex(lastRowIndex);
-        lastrow?.setRowHeight(50);
-        makeBottomPlaceholders(lastrow?.data);
-        gridRef.current?.api.onRowHeightChanged();
-        gridRef.current?.api.refreshInfiniteCache();
-      }
-    }
-  }, [isReadOnly, hasActiveOrder, makeBottomPlaceholders]);
-
-  const onBodyScrollEnd = useCallback(
-    (event: BodyScrollEndEvent) => {
-      if (event.top === 0) {
-        addNewRows();
-      }
-      checkBottomPlaceholder();
-    },
-    [addNewRows, checkBottomPlaceholder]
-  );
-
-  const onBodyScroll = useCallback((event: BodyScrollEvent) => {
-    scrolledToTop.current = event.top <= 0;
-  }, []);
+  const {
+    onSortChanged: bottomPlaceholderOnSortChanged,
+    onFilterChanged: bottomPlaceholderOnFilterChanged,
+    ...bottomPlaceholderProps
+  } = useBottomPlaceholder<Order>({
+    gridRef,
+    disabled: !enforceBottomPlaceholder && !isReadOnly && !hasActiveOrder,
+  });
 
   const onFilterChanged = useCallback(
     (event: FilterChangedEvent) => {
-      makeBottomPlaceholders();
       const updatedFilter = event.api.getFilterModel();
       if (Object.keys(updatedFilter).length) {
         setFilter(updatedFilter);
       } else {
         setFilter(undefined);
       }
-      checkBottomPlaceholder();
+      setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
+      bottomPlaceholderOnFilterChanged?.();
     },
-    [setFilter, makeBottomPlaceholders, checkBottomPlaceholder]
+    [setFilter, bottomPlaceholderOnFilterChanged]
   );
 
   const onSortChange = useCallback(
     (event: SortChangedEvent) => {
-      makeBottomPlaceholders();
       const sort = event.columnApi
         .getColumnState()
         .sort((a, b) => (a.sortIndex || 0) - (b.sortIndex || 0))
@@ -148,9 +116,9 @@ export const OrderListManager = ({
           return acc;
         }, [] as { colId: string; sort: string }[]);
       setSort(sort.length > 0 ? sort : undefined);
-      checkBottomPlaceholder();
+      bottomPlaceholderOnSortChanged?.();
     },
-    [setSort, makeBottomPlaceholders, checkBottomPlaceholder]
+    [setSort, bottomPlaceholderOnSortChanged]
   );
 
   const cancel = useCallback(
@@ -166,15 +134,13 @@ export const OrderListManager = ({
     [create]
   );
 
-  const onGridReady = useCallback(
-    ({ api }: GridReadyEvent) => {
-      api.setDatasource({
-        getRows,
-      });
-      api.setFilterModel(initialFilter);
-    },
-    [getRows]
-  );
+  const onGridReady = useCallback(({ api }: GridReadyEvent) => {
+    api.setFilterModel(initialFilter);
+  }, []);
+
+  useEffect(() => {
+    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
+  }, [data]);
 
   const cancelAll = useCallback(
     (marketId?: string) => {
@@ -186,20 +152,20 @@ export const OrderListManager = ({
     },
     [create]
   );
-  const { isFullWidthRow, fullWidthCellRenderer, rowClassRules } =
-    useBottomPlaceholder<Order>({
-      gridRef,
-    });
+  const extractedData =
+    data && !loading
+      ? data
+          .filter((item) => item !== null)
+          .map((item) => (item as OrderEdge).node)
+      : null;
 
   return (
     <>
       <div className="h-full relative">
         <OrderListTable
+          rowData={extractedData}
           ref={gridRef}
-          rowModelType="infinite"
           onGridReady={onGridReady}
-          onBodyScrollEnd={onBodyScrollEnd}
-          onBodyScroll={onBodyScroll}
           onFilterChanged={onFilterChanged}
           onSortChanged={onSortChange}
           cancel={cancel}
@@ -209,9 +175,7 @@ export const OrderListManager = ({
           blockLoadDebounceMillis={100}
           suppressLoadingOverlay
           suppressNoRowsOverlay
-          isFullWidthRow={isFullWidthRow}
-          fullWidthCellRenderer={fullWidthCellRenderer}
-          rowClassRules={rowClassRules}
+          {...bottomPlaceholderProps}
         />
         <div className="pointer-events-none absolute inset-0">
           <AsyncRenderer
@@ -219,7 +183,7 @@ export const OrderListManager = ({
             error={error}
             data={data}
             noDataMessage={t('No orders')}
-            noDataCondition={(data) => !(data && data.length)}
+            noDataCondition={(data) => !dataCount}
             reload={reload}
           />
         </div>

libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts

@@ -79,6 +79,9 @@ export const useOrderListData = ({
         timeInForce: filter?.timeInForce?.value,
         types: filter?.type?.value,
       },
+      pagination: {
+        first: 1000,
+      },
     }),
     [partyId, marketId, filter]
   );
@@ -98,7 +101,6 @@ export const useOrderListData = ({
     ({
       data,
       delta,
-      totalCount,
     }: {
       data: (OrderEdge | null)[] | null;
       delta?: Order[];
@@ -112,7 +114,10 @@ export const useOrderListData = ({
           ).length;
         }
       }
-      return updateGridData(dataRef, data, gridRef);
+      if (gridRef.current?.api?.getModel().getType() === 'infinite') {
+        return updateGridData(dataRef, data, gridRef);
+      }
+      return false;
     },
     [gridRef, scrolledToTop]
   );
@@ -126,7 +131,10 @@ export const useOrderListData = ({
       totalCount?: number;
     }) => {
       totalCountRef.current = totalCount;
-      return updateGridData(dataRef, data, gridRef);
+      if (gridRef.current?.api?.getModel().getType() === 'infinite') {
+        return updateGridData(dataRef, data, gridRef);
+      }
+      return false;
     },
     [gridRef]
   );

libs/orders/src/lib/components/order-list/order-list.spec.tsx

@@ -48,7 +48,9 @@ describe('OrderListTable', () => {
     await act(async () => {
       render(generateJsx({ rowData: [] }));
     });
-    expect(screen.getByText('No orders')).toBeInTheDocument();
+    expect(() => screen.getByText('No orders')).toThrow(
+      'Unable to find an element'
+    );
   });
 
   it('should render correct columns', async () => {

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -39,10 +39,10 @@ export const OrderListTable = memo(
       return (
         <AgGrid
           ref={ref}
-          overlayNoRowsTemplate={t('No orders')}
           defaultColDef={{
             flex: 1,
             resizable: true,
+            sortable: true,
             filterParams: { buttons: ['reset'] },
           }}
           style={{
@@ -74,6 +74,7 @@ export const OrderListTable = memo(
                 value
               )
             }
+            minWidth={150}
           />
           <AgGridColumn
             headerName={t('Size')}
@@ -89,7 +90,6 @@ export const OrderListTable = memo(
             valueFormatter={({
               value,
               data,
-              node,
             }: VegaValueFormatterParams<Order, 'size'>) => {
               if (!data) {
                 return undefined;
@@ -110,6 +110,7 @@ export const OrderListTable = memo(
                 )
               );
             }}
+            minWidth={80}
           />
           <AgGridColumn
             field="type"
@@ -120,7 +121,6 @@ export const OrderListTable = memo(
             valueFormatter={({
               data: order,
               value,
-              node,
             }: VegaValueFormatterParams<Order, 'type'>) => {
               if (!order) {
                 return undefined;
@@ -130,6 +130,7 @@ export const OrderListTable = memo(
               if (order?.liquidityProvision) return t('Liquidity provision');
               return Schema.OrderTypeMapping[value];
             }}
+            minWidth={80}
           />
           <AgGridColumn
             field="status"
@@ -160,6 +161,7 @@ export const OrderListTable = memo(
                 {valueFormatted}
               </span>
             )}
+            minWidth={100}
           />
           <AgGridColumn
             headerName={t('Filled')}
@@ -186,6 +188,7 @@ export const OrderListTable = memo(
                 dps
               )}/${addDecimalsFormatNumber(size.toString(), dps)}`;
             }}
+            minWidth={100}
           />
           <AgGridColumn
             field="price"
@@ -208,6 +211,7 @@ export const OrderListTable = memo(
               }
               return addDecimalsFormatNumber(value, data.market.decimalPlaces);
             }}
+            minWidth={100}
           />
           <AgGridColumn
             field="timeInForce"
@@ -231,6 +235,7 @@ export const OrderListTable = memo(
 
               return value ? Schema.OrderTimeInForceMapping[value] : '';
             }}
+            minWidth={150}
           />
           <AgGridColumn
             field="createdAt"
@@ -244,6 +249,7 @@ export const OrderListTable = memo(
                 </span>
               );
             }}
+            minWidth={150}
           />
           <AgGridColumn
             field="updatedAt"
@@ -261,6 +267,7 @@ export const OrderListTable = memo(
                 </span>
               );
             }}
+            minWidth={150}
           />
           <AgGridColumn
             colId="amend"
@@ -284,6 +291,7 @@ export const OrderListTable = memo(
                 </>
               ) : null;
             }}
+            sortable={false}
           />
         </AgGrid>
       );

libs/positions/src/lib/__generated__/Positions.ts

@@ -5,9 +5,9 @@ import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
 export type PositionFieldsFragment = { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string } };
 
-export type PositionsQueryVariables = {
+export type PositionsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
-};
+}>;
 
 
 export type PositionsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, positionsConnection?: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string } } }> | null } | null } | null };

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

@@ -1,7 +1,8 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { Position } from '../';
 import { usePositionsData, PositionsTable } from '../';
+import type { FilterChangedEvent } from 'ag-grid-community';
 import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
@@ -22,6 +23,7 @@ export const PositionsManager = ({
   noBottomPlaceholder,
 }: PositionsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
+  const [dataCount, setDataCount] = useState(0);
   const { data, error, loading, reload } = usePositionsData(
     partyId,
     gridRef,
@@ -66,8 +68,14 @@ export const PositionsManager = ({
   const bottomPlaceholderProps = useBottomPlaceholder<Position>({
     gridRef,
     setId,
+    disabled: noBottomPlaceholder,
   });
-
+  useEffect(() => {
+    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
+  }, [data?.length]);
+  const onFilterChanged = useCallback((event: FilterChangedEvent) => {
+    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
+  }, []);
   return (
     <div className="h-full relative">
       <PositionsTable
@@ -75,9 +83,11 @@ export const PositionsManager = ({
         ref={gridRef}
         onMarketClick={onMarketClick}
         onClose={onClose}
-        noRowsOverlayComponent={() => null}
+        suppressLoadingOverlay
+        suppressNoRowsOverlay
         isReadOnly={isReadOnly}
-        {...(noBottomPlaceholder ? null : bottomPlaceholderProps)}
+        onFilterChanged={onFilterChanged}
+        {...bottomPlaceholderProps}
       />
       <div className="pointer-events-none absolute inset-0">
         <AsyncRenderer
@@ -85,7 +95,7 @@ export const PositionsManager = ({
           error={error}
           data={data}
           noDataMessage={t('No positions')}
-          noDataCondition={(data) => !(data && data.length)}
+          noDataCondition={(data) => !dataCount}
           reload={reload}
         />
       </div>

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

@@ -116,6 +116,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
               value
             )
           }
+          minWidth={190}
         />
         <AgGridColumn
           headerName={t('Notional')}
@@ -141,6 +142,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                   data.marketDecimalPlaces
                 );
           }}
+          minWidth={80}
         />
         <AgGridColumn
           headerName={t('Open volume')}
@@ -174,6 +176,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                 );
           }}
           cellRenderer={OpenVolumeCell}
+          minWidth={100}
         />
         <AgGridColumn
           headerName={t('Mark price')}
@@ -213,8 +216,13 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
               data.marketDecimalPlaces
             );
           }}
+          minWidth={100}
+        />
+        <AgGridColumn
+          headerName={t('Settlement asset')}
+          field="assetSymbol"
+          minWidth={100}
         />
-        <AgGridColumn headerName={t('Settlement asset')} field="assetSymbol" />
         <AgGridColumn
           headerName={t('Entry price')}
           field="averageEntryPrice"
@@ -248,6 +256,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
               data.marketDecimalPlaces
             );
           }}
+          minWidth={100}
         />
         <AgGridColumn
           headerName={t('Leverage')}
@@ -264,6 +273,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
           }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
             value === undefined ? undefined : formatNumber(value.toString(), 1)
           }
+          minWidth={100}
         />
         <AgGridColumn
           headerName={t('Margin allocated')}
@@ -295,6 +305,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
               data.decimals
             );
           }}
+          minWidth={100}
         />
         <AgGridColumn
           headerName={t('Realised PNL')}
@@ -321,6 +332,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
             'Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.'
           )}
           cellRenderer={PNLCell}
+          minWidth={100}
         />
         <AgGridColumn
           headerName={t('Unrealised PNL')}
@@ -347,6 +359,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
             'Unrealised profit is the current profit on your open position. Margin is still allocated to your position.'
           )}
           cellRenderer={PNLCell}
+          minWidth={100}
         />
         <AgGridColumn
           headerName={t('Updated')}
@@ -361,6 +374,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
             }
             return getDateTimeFormat().format(new Date(value));
           }}
+          minWidth={150}
         />
         {onClose && !props.isReadOnly ? (
           <AgGridColumn
@@ -375,6 +389,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                 </ButtonLink>
               ) : null
             }
+            minWidth={80}
           />
         ) : null}
       </AgGrid>

libs/react-helpers/src/hooks/use-bottom-placeholder.tsx

@@ -11,11 +11,13 @@ const isFullWidthRow = (params: IsFullWidthRowParams) =>
 interface Props<T> {
   gridRef: RefObject<AgGridReact>;
   setId?: (data: T) => T;
+  disabled?: boolean;
 }
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const useBottomPlaceholder = <T extends {}>({
   gridRef,
   setId,
+  disabled,
 }: Props<T>) => {
   const onBodyScrollEnd = useCallback(() => {
     const rowCont = gridRef.current?.api.getModel().getRowCount() ?? 0;
@@ -58,14 +60,17 @@ export const useBottomPlaceholder = <T extends {}>({
   }, [gridRef, onBodyScrollEnd]);
 
   return useMemo(
-    () => ({
-      onBodyScrollEnd,
-      rowClassRules: NO_HOVER_CSS_RULE,
-      isFullWidthRow,
-      fullWidthCellRenderer,
-      onSortChanged: onRowsChanged,
-      onFilterChange: onRowsChanged,
-    }),
-    [onBodyScrollEnd, onRowsChanged]
+    () =>
+      !disabled
+        ? {
+            onBodyScrollEnd,
+            rowClassRules: NO_HOVER_CSS_RULE,
+            isFullWidthRow,
+            fullWidthCellRenderer,
+            onSortChanged: onRowsChanged,
+            onFilterChanged: onRowsChanged,
+          }
+        : {},
+    [onBodyScrollEnd, onRowsChanged, disabled]
   );
 };

libs/react-helpers/src/hooks/use-local-storage.spec.ts

@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import { useLocalStorage } from './use-local-storage';
+import { useLocalStorage, useLocalStorageSnapshot } from './use-local-storage';
 
 describe('useLocalStorage', () => {
   afterEach(() => window.localStorage.clear());
@@ -50,3 +50,51 @@ describe('useLocalStorage', () => {
     expect(B.current[0]).toBeNull();
   });
 });
+
+describe('useLocalStorageSnapshot', () => {
+  afterEach(() => window.localStorage.clear());
+  it("should return null if there's no value set", () => {
+    const { result } = renderHook(() => useLocalStorageSnapshot('test'));
+    const [value] = result.current;
+    expect(value).toBeNull();
+  });
+  it('should return already saved value', () => {
+    window.localStorage.setItem('test', '123');
+    const { result } = renderHook(() => useLocalStorageSnapshot('test'));
+    const [value] = result.current;
+    expect(value).toEqual('123');
+  });
+  it('should save given value', () => {
+    const { result } = renderHook(() => useLocalStorageSnapshot('test'));
+    const setValue = result.current[1];
+    expect(result.current[0]).toBeNull();
+    act(() => setValue('123'));
+    expect(result.current[0]).toEqual('123');
+    act(() => setValue('456'));
+    expect(result.current[0]).toEqual('456');
+  });
+  it('should remove given value', () => {
+    const { result } = renderHook(() => useLocalStorageSnapshot('test'));
+    const setValue = result.current[1];
+    const removeValue = result.current[2];
+    act(() => setValue('123'));
+    expect(result.current[0]).toEqual('123');
+    act(() => removeValue());
+    expect(result.current[0]).toBeNull();
+  });
+  it('should not return value set by storage event (by another tab)', () => {
+    const { result: A } = renderHook(() => useLocalStorageSnapshot('test-a'));
+    act(() => {
+      window.localStorage.setItem('test-a', '123');
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key: 'test-a',
+          oldValue: window.localStorage.getItem('test-a'),
+          storageArea: window.localStorage,
+          newValue: '123',
+        })
+      );
+    });
+    expect(A.current[0]).toBeNull();
+  });
+});