chore: remove react and react-i18next from peer deps of utils

chore: move market expiry to react helpers
chore: prevent react imports
2024-03-09 11:33:19 +00:00 · 2024-03-09 11:32:35 +00:00 · 2024-03-09 11:03:21 +00:00 · 2024-03-09 11:01:58 +00:00 · 2024-03-09 10:58:00 +00:00 · 2024-03-08 17:29:41 +00:00
217 changed files with 2126 additions and 3092 deletions
@@ -0,0 +1,28 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.yarnpkg.com
+    maxage: 60m
+
+packages:
+  '**':
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+logs:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline
@@ -10,7 +10,7 @@ import {
  addDecimalsFormatNumber,
  formatNumber,
  removePaginationWrapper,
-  suitableForSyntaxHighlighter,
+  validForSyntaxHighlighter,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { RouteTitle } from '../../components/route-title';
@@ -134,7 +134,7 @@ export const NetworkParameterRow = ({
 }: {
  row: { key: string; value: string };
 }) => {
-  const isSyntaxRow = suitableForSyntaxHighlighter(value);
+  const isSyntaxRow = validForSyntaxHighlighter(value);
  useDocumentTitle(['Network Parameters']);

  return (
@@ -1,7 +1,9 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
-const theme = require('../../libs/tailwindcss-config/src/theme');
-const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+const { theme } = require('../../libs/tailwindcss-config/src/theme');
+const {
+  vegaCustomClasses,
+} = require('../../libs/tailwindcss-config/src/vega-custom-classes');

 module.exports = {
  content: [
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useForm } from 'react-hook-form';
-import { suitableForSyntaxHighlighter } from '@vegaprotocol/utils';
+import { validForSyntaxHighlighter } from '@vegaprotocol/utils';
 import { useNetworkParams } from '@vegaprotocol/network-parameters';
 import {
  getClosingTimestamp,
@@ -46,7 +46,7 @@ const SelectedNetworkParamCurrentValue = ({
    <div className="mb-4">
      <p className="text-sm text-white">{t('CurrentValue')}</p>

-      {suitableForSyntaxHighlighter(value) ? (
+      {validForSyntaxHighlighter(value) ? (
        <SyntaxHighlighter data={JSON.parse(value)} />
      ) : (
        <Input
@@ -8,7 +8,7 @@ import {
  doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { useValidateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/react-helpers';
 import {
  NetworkParams,
  useNetworkParams,
@@ -7,7 +7,7 @@ import {
  doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { useValidateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/react-helpers';
 import {
  NetworkParams,
  useNetworkParams,
@@ -14,7 +14,7 @@ import {
  RoundedWrapper,
  TextArea,
 } from '@vegaprotocol/ui-toolkit';
-import { useValidateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/react-helpers';
 import {
  NetworkParams,
  useNetworkParams,
@@ -7,7 +7,7 @@ import {
  doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { useValidateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/react-helpers';
 import {
  NetworkParams,
  useNetworkParams,
@@ -8,7 +8,7 @@ import {
  useProposalSubmit,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { useValidateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/react-helpers';
 import {
  NetworkParams,
  useNetworkParams,
@@ -1,9 +1,11 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
-const theme = require('../../libs/tailwindcss-config/src/theme');
-const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+const { theme } = require('../../libs/tailwindcss-config/src/theme');
+const {
+  vegaCustomClasses,
+} = require('../../libs/tailwindcss-config/src/vega-custom-classes');

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

 module.exports = {
  content: [
@@ -1,22 +0,0 @@
-{
-  "name": "Vega Protocol - Trading",
-  "short_name": "Console",
-  "description": "Vega Protocol - Trading dApp",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait",
-  "theme_color": "#000000",
-  "background_color": "#ffffff",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    }
-  ]
-}
@@ -9,7 +9,7 @@ import {
  VegaIcon,
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import { URL_REGEX, isValidVegaPublicKey } from '@vegaprotocol/utils';
+import { URL_REGEX, validVegaPublicKey } from '@vegaprotocol/utils';

 import { type useReferralSetTransaction } from '../../lib/hooks/use-referral-set-transaction';
 import { useT } from '../../lib/use-t';
@@ -217,9 +217,7 @@ export const TeamForm = ({
                    validate: {
                      allowList: (value) => {
                        const publicKeys = parseAllowListText(value);
-                        if (
-                          publicKeys.every((pk) => isValidVegaPublicKey(pk))
-                        ) {
+                        if (publicKeys.every((pk) => validVegaPublicKey(pk))) {
                          return true;
                        }
                        return t('Invalid public key found in allow list');
@@ -2,12 +2,11 @@ import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { DocsLinks, useEnvironment } from '@vegaprotocol/environment';
 import { ButtonLink, ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
 import type { Market } from '@vegaprotocol/markets';
+import { addDecimalsFormatNumber, fromNanoSeconds } from '@vegaprotocol/utils';
 import {
-  addDecimalsFormatNumber,
-  fromNanoSeconds,
-  getExpiryDate,
+  useMarketExpiryDate,
  getMarketExpiryDate,
-} from '@vegaprotocol/utils';
+} from '@vegaprotocol/react-helpers';
 import {
  Last24hPriceChange,
  Last24hVolume,
@@ -264,12 +263,13 @@ export const FundingCountdown = ({ marketId }: { marketId: string }) => {
 };

 const ExpiryLabel = ({ market }: ExpiryLabelProps) => {
+  const expiryDate = useMarketExpiryDate(
+    market.tradableInstrument.instrument.metadata.tags,
+    market.marketTimestamps.close,
+    market.state
+  );
  const content = market.tradableInstrument.instrument.metadata.tags
-    ? getExpiryDate(
-        market.tradableInstrument.instrument.metadata.tags,
-        market.marketTimestamps.close,
-        market.state
-      )
+    ? expiryDate
    : '-';
  return <div data-testid="trading-expiry">{content}</div>;
 };
@@ -11,10 +11,8 @@ import { useMemo } from 'react';
 import type { Asset } from '@vegaprotocol/types';
 import type { ProductType } from '@vegaprotocol/types';
 import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
-import {
-  addDecimalsFormatNumber,
-  getMarketExpiryDate,
-} from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { getMarketExpiryDate } from '@vegaprotocol/react-helpers';
 import { closedMarketsWithDataProvider, getAsset } from '@vegaprotocol/markets';
 import type { DataSourceFilterFragment } from '@vegaprotocol/markets';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
@@ -1,63 +1,126 @@
 import type { InMemoryCacheConfig } from '@apollo/client';
 import {
-  AppFailure,
  AppLoader,
  NetworkLoader,
-  NodeFailure,
-  NodeGuard,
  useEnvironment,
+  useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
-import { type ReactNode } from 'react';
+import { useEffect, type ReactNode, useState } from 'react';
 import { Web3Provider } from './web3-provider';
 import { useT } from '../../lib/use-t';
 import { DataLoader } from './data-loader';
 import { WalletProvider } from '@vegaprotocol/wallet-react';
 import { useVegaWalletConfig } from '../../lib/hooks/use-vega-wallet-config';
+import { Trans } from 'react-i18next';
+import { Button, Loader, Splash, VLogo } from '@vegaprotocol/ui-toolkit';
+
+const Failure = ({ reason }: { reason?: ReactNode }) => {
+  const t = useT();
+  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
+  return (
+    <Splash>
+      <div className="border border-vega-red m-10 mx-auto w-4/5 max-w-3xl rounded-lg overflow-hidden animate-shake">
+        <div className="bg-vega-red text-white px-2 py-2 flex gap-1 items-center font-alpha calt uppercase">
+          <VLogo className="h-4" />
+          <span className="text-lg">{t('Failed to initialize the app')}</span>
+        </div>
+        <div className="p-4 text-left text-sm">
+          <p className="mb-4">{reason}</p>
+          <div className="text-center">
+            <Button className="border-2" onClick={() => setNodeSwitcher(true)}>
+              {t('Change node')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Splash>
+  );
+};
+
+const Loading = () => {
+  const [showSlowNotification, setShowSlowNotification] = useState(false);
+  const t = useT();
+  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
+  useEffect(() => {
+    const to = setTimeout(() => {
+      if (!showSlowNotification) setShowSlowNotification(true);
+    }, 5000);
+    return () => {
+      clearTimeout(to);
+    };
+  }, [showSlowNotification]);
+  return (
+    <Splash>
+      <div className="border border-transparent m-10 mx-auto w-4/5 max-w-3xl rounded-lg overflow-hidden">
+        <div className="mt-11 p-4 text-left text-sm">
+          <Loader />
+          {showSlowNotification && (
+            <>
+              <p className="mt-4 text-center">
+                {t(
+                  "It looks like you're connection is slow, try switching to another node."
+                )}
+              </p>
+              <div className="mt-4 text-center">
+                <Button
+                  className="border-2"
+                  onClick={() => setNodeSwitcher(true)}
+                >
+                  {t('Change node')}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </Splash>
+  );
+};

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

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

+  const ERR_DATA_LOADER = (
+    <Trans
+      i18nKey="It appears that the connection to the node <0>{{VEGA_URL}}</0> does not return necessary data, try switching to another node."
+      components={[
+        <span key="vega" className="text-muted">
+          {VEGA_URL}
+        </span>,
+      ]}
+      values={{
+        VEGA_URL,
+      }}
+    />
+  );
+
  return (
    <NetworkLoader
      cache={cacheConfig}
-      skeleton={<AppLoader />}
-      failure={
-        <AppFailure title={t('Could not initialize app')} error={error} />
-      }
+      skeleton={<Loading />}
+      failure={<Failure reason={error} />}
    >
-      <NodeGuard
-        skeleton={<AppLoader />}
-        failure={
-          <NodeFailure
-            title={t('Node: {{VEGA_URL}} is unsuitable', { VEGA_URL })}
-          />
-        }
+      <DataLoader
+        skeleton={<Loading />}
+        failure={<Failure reason={ERR_DATA_LOADER} />}
      >
-        <DataLoader
-          skeleton={<AppLoader />}
-          failure={
-            <AppFailure
-              title={t('Could not load market data or asset data')}
-              error={error}
-            />
-          }
+        <Web3Provider
+          skeleton={<Loading />}
+          failure={<Failure reason={t('Could not configure web3 provider')} />}
        >
-          <Web3Provider
-            skeleton={<AppLoader />}
-            failure={
-              <AppFailure title={t('Could not configure web3 provider')} />
-            }
-          >
-            <WalletProvider config={config}>{children}</WalletProvider>
-          </Web3Provider>
-        </DataLoader>
-      </NodeGuard>
+          <WalletProvider config={config}>{children}</WalletProvider>
+        </Web3Provider>
+      </DataLoader>
    </NetworkLoader>
  );
 };
@@ -107,6 +170,9 @@ const cacheConfig: InMemoryCacheConfig = {
    Fees: {
      keyFields: false,
    },
+    PartyProfile: {
+      keyFields: ['partyId'],
+    },
    // The folling types are cached by the data provider and not by apollo
    PositionUpdate: {
      keyFields: false,
@@ -7,11 +7,8 @@ import {
  useSuccessorMarket,
  type Market,
 } from '@vegaprotocol/markets';
-import {
-  addDecimalsFormatNumber,
-  getMarketExpiryDate,
-  isNumeric,
-} from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber, isNumeric } from '@vegaprotocol/utils';
+import { getMarketExpiryDate } from '@vegaprotocol/react-helpers';
 import { useT, ns } from '../../lib/use-t';
 import { Links } from '../../lib/links';

@@ -8,6 +8,12 @@ import {
  mockConfig,
  MockedWalletProvider,
 } from '@vegaprotocol/wallet-react/testing';
+import { MockedProvider, type MockedResponse } from '@apollo/react-testing';
+import {
+  PartyProfilesDocument,
+  type PartyProfilesQuery,
+  type PartyProfilesQueryVariables,
+} from '../vega-wallet-connect-button/__generated__/PartyProfiles';

 jest.mock('@vegaprotocol/proposals', () => ({
  ProtocolUpgradeCountdown: () => null,
@@ -24,15 +30,45 @@ describe('Navbar', () => {
      publicKey: '2'.repeat(64),
    },
  ];
+  const key1Alias = 'key 1 alias';
  const marketId = 'abc';
  const navbarContent = 'navbar-menu-content';

+  const partyProfilesMock: MockedResponse<
+    PartyProfilesQuery,
+    PartyProfilesQueryVariables
+  > = {
+    request: {
+      query: PartyProfilesDocument,
+      variables: {
+        partyIds: mockKeys.map((k) => k.publicKey),
+      },
+    },
+    result: {
+      data: {
+        partiesProfilesConnection: {
+          edges: [
+            {
+              node: {
+                partyId: mockKeys[0].publicKey,
+                alias: key1Alias,
+                metadata: [],
+              },
+            },
+          ],
+        },
+      },
+    },
+  };
+
  const renderComponent = (initialEntries?: string[]) => {
    return render(
      <MemoryRouter initialEntries={initialEntries}>
-        <MockedWalletProvider>
-          <Navbar />
-        </MockedWalletProvider>
+        <MockedProvider mocks={[partyProfilesMock]}>
+          <MockedWalletProvider>
+            <Navbar />
+          </MockedWalletProvider>
+        </MockedProvider>
      </MemoryRouter>
    );
  };
@@ -140,6 +176,7 @@ describe('Navbar', () => {
    const activeKey = within(menu.getByTestId(/key-1+-mobile/));
    expect(activeKey.getByText(mockKeys[0].name)).toBeInTheDocument();
    expect(activeKey.getByTestId('icon-tick')).toBeInTheDocument();
+    expect(screen.getByText(key1Alias)).toBeInTheDocument();

    const inactiveKey = within(menu.getByTestId(/key-2+-mobile/));
    await userEvent.click(inactiveKey.getByText(mockKeys[1].name));
@@ -9,7 +9,7 @@ import {
 import { useProfileDialogStore } from '../../stores/profile-dialog-store';
 import { useForm } from 'react-hook-form';
 import { useT } from '../../lib/use-t';
-import { useRequired } from '@vegaprotocol/utils';
+import { useRequired } from '@vegaprotocol/react-helpers';
 import {
  useSimpleTransaction,
  type Status,
@@ -31,39 +31,27 @@ export const ProfileDialog = () => {
  const pubKey = useProfileDialogStore((store) => store.pubKey);
  const setOpen = useProfileDialogStore((store) => store.setOpen);

-  const { send, status, error, reset } = useSimpleTransaction({
-    onSuccess: () => {
-      refetch();
-    },
-  });
-
  const profileEdge = data?.partiesProfilesConnection?.edges.find(
    (e) => e.node.partyId === pubKey
  );

-  const sendTx = (field: FormFields) => {
-    send({
-      updatePartyProfile: {
-        alias: field.alias,
-        metadata: [],
-      },
-    });
-  };
-
  return (
    <Dialog
      open={open}
      onChange={() => {
        setOpen(undefined);
-        reset();
      }}
      title={t('Edit profile')}
    >
-      <ProfileForm
+      <ProfileFormContainer
        profile={profileEdge?.node}
-        status={status}
-        error={error}
-        onSubmit={sendTx}
+        onSuccess={() => {
+          refetch();
+
+          setTimeout(() => {
+            setOpen(undefined);
+          }, 1000);
+        }}
      />
    </Dialog>
  );
@@ -77,6 +65,32 @@ type Profile = NonNullable<
  PartyProfilesQuery['partiesProfilesConnection']
 >['edges'][number]['node'];

+const ProfileFormContainer = ({
+  profile,
+  onSuccess,
+}: {
+  profile: Profile | undefined;
+  onSuccess: () => void;
+}) => {
+  const { send, status, error } = useSimpleTransaction({ onSuccess });
+  const sendTx = (field: FormFields) => {
+    send({
+      updatePartyProfile: {
+        alias: field.alias,
+        metadata: [],
+      },
+    });
+  };
+  return (
+    <ProfileForm
+      profile={profile}
+      status={status}
+      error={error}
+      onSubmit={sendTx}
+    />
+  );
+};
+
 const ProfileForm = ({
  profile,
  onSubmit,
@@ -114,6 +128,14 @@ const ProfileForm = ({

  const errorMessage = errors.alias?.message || error;

+  if (status === 'confirmed') {
+    return (
+      <p className="mt-2 mb-4 text-sm text-vega-green-600 dark:text-vega-green">
+        {t('Profile updated')}
+      </p>
+    );
+  }
+
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="mt-3">
      <FormGroup label="Alias" labelFor="alias">
@@ -131,12 +153,6 @@ const ProfileForm = ({
            </p>
          </InputError>
        )}
-
-        {status === 'confirmed' && (
-          <p className="mt-2 mb-4 text-sm text-success">
-            {t('Profile updated')}
-          </p>
-        )}
      </FormGroup>
      <TradingButton
        type="submit"
@@ -94,6 +94,7 @@ export const VegaWalletConnectButton = ({
            <KeypairRadioGroup
              pubKey={pubKey}
              pubKeys={pubKeys}
+              activeKey={activeKey?.publicKey}
              onSelect={selectPubKey}
            />
            <TradingDropdownSeparator />
@@ -138,15 +139,18 @@ export const VegaWalletConnectButton = ({
 const KeypairRadioGroup = ({
  pubKey,
  pubKeys,
+  activeKey,
  onSelect,
 }: {
  pubKey: string | undefined;
  pubKeys: Key[];
+  activeKey: string | undefined;
  onSelect: (pubKey: string) => void;
 }) => {
  const { data } = usePartyProfilesQuery({
    variables: { partyIds: pubKeys.map((pk) => pk.publicKey) },
    skip: pubKeys.length <= 0,
+    fetchPolicy: 'cache-and-network',
  });

  return (
@@ -156,14 +160,27 @@ const KeypairRadioGroup = ({
          (e) => e.node.partyId === pk.publicKey
        );
        return (
-          <KeypairItem key={pk.publicKey} pk={pk} alias={profile?.node.alias} />
+          <KeypairItem
+            key={pk.publicKey}
+            pk={pk}
+            isActive={activeKey === pk.publicKey}
+            alias={profile?.node.alias}
+          />
        );
      })}
    </TradingDropdownRadioGroup>
  );
 };

-const KeypairItem = ({ pk, alias }: { pk: Key; alias: string | undefined }) => {
+const KeypairItem = ({
+  pk,
+  isActive,
+  alias,
+}: {
+  pk: Key;
+  alias: string | undefined;
+  isActive: boolean;
+}) => {
  const t = useT();
  const [copied, setCopied] = useCopyTimeout();
  const setOpen = useProfileDialogStore((store) => store.setOpen);
@@ -194,8 +211,13 @@ const KeypairItem = ({ pk, alias }: { pk: Key; alias: string | undefined }) => {
          data-testid={`key-${pk.publicKey}`}
        >
          <Tooltip description={t('Public facing key alias. Click to edit')}>
-            <button data-testid="alias" onClick={() => setOpen(pk.publicKey)}>
+            <button
+              data-testid="alias"
+              onClick={() => setOpen(pk.publicKey)}
+              className="flex items-center gap-1"
+            >
              {alias ? alias : t('No alias')}
+              {isActive && <VegaIcon name={VegaIconNames.EDIT} />}
            </button>
          </Tooltip>
        </div>
@@ -12,6 +12,8 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { usePartyProfilesQuery } from '../vega-wallet-connect-button/__generated__/PartyProfiles';
+import { useProfileDialogStore } from '../../stores/profile-dialog-store';

 export const VegaWalletMenu = ({
  setMenu,
@@ -23,6 +25,12 @@ export const VegaWalletMenu = ({
  const currentRouteId = useGetCurrentRouteId();
  const setViews = useSidebar((store) => store.setViews);

+  const { data } = usePartyProfilesQuery({
+    variables: { partyIds: pubKeys.map((pk) => pk.publicKey) },
+    skip: pubKeys.length <= 0,
+    fetchPolicy: 'cache-and-network',
+  });
+
  const activeKey = useMemo(() => {
    return pubKeys?.find((pk) => pk.publicKey === pubKey);
  }, [pubKey, pubKeys]);
@@ -37,14 +45,21 @@ export const VegaWalletMenu = ({
  return (
    <div>
      <div className="grow my-4" role="list">
-        {(pubKeys || []).map((pk) => (
-          <KeypairListItem
-            key={pk.publicKey}
-            pk={pk}
-            isActive={activeKey?.publicKey === pk.publicKey}
-            onSelectItem={onSelectItem}
-          />
-        ))}
+        {(pubKeys || []).map((pk) => {
+          const profile = data?.partiesProfilesConnection?.edges.find(
+            (e) => e.node.partyId === pk.publicKey
+          );
+          return (
+            <KeypairListItem
+              key={pk.publicKey}
+              pk={pk}
+              isActive={activeKey?.publicKey === pk.publicKey}
+              onSelectItem={onSelectItem}
+              alias={profile?.node.alias}
+              setMenu={setMenu}
+            />
+          );
+        })}
      </div>

      <div className="flex flex-col gap-2 m-4">
@@ -72,18 +87,23 @@ export const VegaWalletMenu = ({
 const KeypairListItem = ({
  pk,
  isActive,
+  alias,
  onSelectItem,
+  setMenu,
 }: {
  pk: Key;
  isActive: boolean;
+  alias: string | undefined;
  onSelectItem: (pk: string) => void;
+  setMenu: (open: 'nav' | 'wallet' | null) => void;
 }) => {
  const t = useT();
  const [copied, setCopied] = useCopyTimeout();
+  const setOpen = useProfileDialogStore((store) => store.setOpen);

  return (
    <div
-      className="flex flex-col w-full ml-4 mr-2 mb-4"
+      className="flex flex-col w-full px-4 mb-4"
      data-testid={`key-${pk.publicKey}-mobile`}
    >
      <span className="flex gap-2 items-center mr-2">
@@ -106,6 +126,24 @@ const KeypairListItem = ({
        </CopyToClipboard>
        {copied && <span className="text-xs">{t('Copied')}</span>}
      </span>
+      <span
+        className="flex gap-2 items-center"
+        data-testid={`key-${pk.publicKey}`}
+      >
+        <span className="truncate">{alias ? alias : t('No alias')}</span>
+        {isActive && (
+          <button
+            data-testid="alias"
+            onClick={() => {
+              setOpen(pk.publicKey);
+              setMenu(null);
+            }}
+            className="flex items-center gap-1"
+          >
+            <VegaIcon name={VegaIconNames.EDIT} />
+          </button>
+        )}
+      </span>
    </div>
  );
 };
@@ -9,12 +9,14 @@ from actions.utils import next_epoch, change_keys
 from wallet_config import MM_WALLET
 from vega_sim.null_service import VegaServiceNull

+
@pytest.fixture(scope="module")
 def setup_environment(request, browser) -> Generator[Tuple[Page, str, str], None, None]:
    with init_vega(request) as vega_instance:
        request.addfinalizer(lambda: cleanup_container(vega_instance))

-        tDAI_market, tDAI_asset_id = setup_market_with_reward_program(vega_instance)
+        tDAI_market, tDAI_asset_id = setup_market_with_reward_program(
+            vega_instance)

        with init_page(vega_instance, browser, request) as page:
            risk_accepted_setup(page)
@@ -147,14 +149,12 @@ def setup_market_with_reward_program(vega: VegaServiceNull):
    return tDAI_market, tDAI_asset_id


-
-def test_network_reward_pot(     setup_environment: Tuple[Page, str, str],
-) -> None:
+def test_network_reward_pot(setup_environment: Tuple[Page, str, str],
+                            ) -> None:
    page, tDAI_market, tDAI_asset_id = setup_environment
    expect(page.get_by_test_id(TOTAL_REWARDS)).to_have_text("183.33333 tDAI")


-
 def test_reward_multiplier(
    setup_environment: Tuple[Page, str, str],
 ) -> None:
@@ -168,7 +168,6 @@ def test_reward_multiplier(
    )


-
 def test_reward_history(
    setup_environment: Tuple[Page, str, str],
 ) -> None:
@@ -177,26 +176,37 @@ def test_reward_history(
    expect((page.get_by_role(ROW).locator(PRICE_TAKING_COL_ID)).nth(1)).to_have_text(
        "299.99999100.00%"
    )
-    expect((page.get_by_role(ROW).locator(TOTAL_COL_ID)).nth(1)).to_have_text("299.99999")
+    expect((page.get_by_role(ROW).locator(TOTAL_COL_ID)).nth(
+        1)).to_have_text("299.99999")
    page.get_by_test_id(EARNED_BY_ME_BUTTON).click()
    expect((page.get_by_role(ROW).locator(TOTAL_COL_ID)).nth(1)).to_have_text(
        "183.33333"
    )

+
 def test_staking_reward(
-    page: Page,
+    setup_environment: Tuple[Page, str, str],
 ):
+    page, tDAI_market, tDAI_asset_id = setup_environment
    expect(page.get_by_test_id("active-rewards-card")).to_have_count(2)
    staking_reward_card = page.get_by_test_id("active-rewards-card").nth(1)
    expect(staking_reward_card).to_be_visible()
-    expect(staking_reward_card.get_by_test_id("entity-scope")).to_have_text("Individual")
-    expect(staking_reward_card.get_by_test_id("locked-for")).to_have_text("0 epochs")
-    expect(staking_reward_card.get_by_test_id("reward-value")).to_have_text("100.00")
-    expect(staking_reward_card.get_by_test_id("distribution-strategy")).to_have_text("Pro rata")
+    expect(staking_reward_card.get_by_test_id(
+        "entity-scope")).to_have_text("Individual")
+    expect(staking_reward_card.get_by_test_id(
+        "locked-for")).to_have_text("0 epochs")
+    expect(staking_reward_card.get_by_test_id(
+        "reward-value")).to_have_text("100.00")
+    expect(staking_reward_card.get_by_test_id(
+        "distribution-strategy")).to_have_text("Pro rata")
    expect(staking_reward_card.get_by_test_id("dispatch-metric-info")).to_have_text(
        "Staking rewards"
    )
-    expect(staking_reward_card.get_by_test_id("assessed-over")).to_have_text("1 epoch")
-    expect(staking_reward_card.get_by_test_id("scope")).to_have_text("Individual")
-    expect(staking_reward_card.get_by_test_id("staking-requirement")).to_have_text("1.00")
-    expect(staking_reward_card.get_by_test_id("average-position")).to_have_text("0.00")
+    expect(staking_reward_card.get_by_test_id(
+        "assessed-over")).to_have_text("1 epoch")
+    expect(staking_reward_card.get_by_test_id(
+        "scope")).to_have_text("Individual")
+    expect(staking_reward_card.get_by_test_id(
+        "staking-requirement")).to_have_text("1.00")
+    expect(staking_reward_card.get_by_test_id(
+        "average-position")).to_have_text("0.00")
@@ -4,11 +4,10 @@ export default function Document() {
  return (
    <>
      <Head>
-        {/*
-          meta tags
-          - next advised against using _document for this, so they exist in our
-          - single page index.page.tsx
-        */}
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, user-scalable=no"
+        />

        {/* preload fonts */}
        <link
@@ -18,15 +17,38 @@ export default function Document() {
          type="font/woff"
        />

+        <link
+          rel="preload"
+          href="/AlphaLyrae.woff2"
+          as="font"
+          type="font/woff2"
+        />
+
        {/* icons */}
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-        <link rel="apple-touch-icon" content="/favicon.ico" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />

        {/* scripts */}
        <script src="/theme-setter.js" type="text/javascript" async />

        {/* manifest */}
-        <link rel="manifest" href="/apps/trading/public/manifest.json" />
+        <link rel="manifest" href="/manifest.json" />
      </Head>
      <Html>
        <body
@@ -9,14 +9,14 @@
  "background_color": "#ffffff",
  "icons": [
    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
    },
    {
-      "src": "cover.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
    }
  ]
 }
@@ -1,7 +1,9 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
-const theme = require('../../libs/tailwindcss-config/src/theme');
-const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+const { theme } = require('../../libs/tailwindcss-config/src/theme');
+const {
+  vegaCustomClasses,
+} = require('../../libs/tailwindcss-config/src/vega-custom-classes');

 module.exports = {
  content: [
@@ -1,4 +1,4 @@
-const { getJestProjects } = require('@nx/jest');
+import { getJestProjects } from '@nx/jest';

 export default {
  projects: getJestProjects(),
@@ -1,13 +1,15 @@
 import sortBy from 'lodash/sortBy';
 import {
-  useMaxSafe,
-  useRequired,
-  useVegaPublicKey,
  addDecimal,
  toBigNum,
  removeDecimal,
  addDecimalsFormatNumber,
 } from '@vegaprotocol/utils';
+import {
+  useMaxSafe,
+  useRequired,
+  useVegaPublicKey,
+} from '@vegaprotocol/react-helpers';
 import { useT } from './use-t';
 import {
  TradingFormGroup,
@@ -19,7 +21,6 @@ import {
  TradingButton,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
-import { normalizeTransfer } from '@vegaprotocol/wallet';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useState } from 'react';
@@ -27,6 +28,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { AssetOption, Balance } from '@vegaprotocol/assets';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
 import { useTransferFeeQuery } from './__generated__/TransferFee';
+import { normalizeTransfer } from './utils';

 interface FormFields {
  toVegaKey: string;
@@ -0,0 +1,26 @@
+import type { Exact } from 'type-fest';
+import { type Transfer } from '@vegaprotocol/wallet';
+import { removeDecimal } from '@vegaprotocol/utils';
+import { type AccountType } from '@vegaprotocol/types';
+
+export const normalizeTransfer = <T extends Exact<Transfer, T>>(
+  address: string,
+  amount: string,
+  fromAccountType: AccountType,
+  toAccountType: AccountType,
+  asset: {
+    id: string;
+    decimals: number;
+  }
+): Transfer => {
+  return {
+    to: address,
+    fromAccountType,
+    toAccountType,
+    asset: asset.id,
+    amount: removeDecimal(amount, asset.decimals),
+    // oneOff or recurring required otherwise wallet will error
+    // default oneOff is immediate transfer
+    oneOff: {},
+  };
+};
@@ -1,10 +1,10 @@
 import { Controller, type Control } from 'react-hook-form';
 import type { Market } from '@vegaprotocol/markets';
 import type { OrderFormValues } from '../../hooks/use-form-values';
-import { toDecimal, useValidateAmount } from '@vegaprotocol/utils';
+import { determinePriceStep } from '@vegaprotocol/utils';
+import { useValidateAmount } from '@vegaprotocol/react-helpers';
 import {
  TradingFormGroup,
-  TradingInputError,
  Tooltip,
  FormGroup,
  Input,
@@ -30,31 +30,7 @@ export const DealTicketPriceTakeProfitStopLoss = ({
 }: DealTicketPriceTakeProfitStopLossProps) => {
  const t = useT();
  const validateAmount = useValidateAmount();
-  const priceStep = toDecimal(market?.decimalPlaces);
-
-  const renderTakeProfitError = () => {
-    if (takeProfitError) {
-      return (
-        <TradingInputError testId="deal-ticket-take-profit-error-message">
-          {takeProfitError}
-        </TradingInputError>
-      );
-    }
-
-    return null;
-  };
-
-  const renderStopLossError = () => {
-    if (stopLossError) {
-      return (
-        <TradingInputError testId="deal-stop-loss-error-message">
-          {stopLossError}
-        </TradingInputError>
-      );
-    }
-
-    return null;
-  };
+  const priceStep = determinePriceStep(market);

  return (
    <div className="mb-2">
@@ -104,9 +80,9 @@ export const DealTicketPriceTakeProfitStopLoss = ({
                      {...field}
                    />
                  </FormGroup>
-                  {fieldState.error && (
+                  {(fieldState.error || takeProfitError) && (
                    <InputError testId="deal-ticket-error-message-price-take-profit">
-                      {fieldState.error.message}
+                      {fieldState.error?.message || takeProfitError}
                    </InputError>
                  )}
                </div>
@@ -154,9 +130,9 @@ export const DealTicketPriceTakeProfitStopLoss = ({
                      {...field}
                    />
                  </FormGroup>
-                  {fieldState.error && (
+                  {(fieldState.error || stopLossError) && (
                    <InputError testId="deal-ticket-error-message-price-stop-loss">
-                      {fieldState.error.message}
+                      {fieldState.error?.message || stopLossError}
                    </InputError>
                  )}
                </div>
@@ -165,8 +141,6 @@ export const DealTicketPriceTakeProfitStopLoss = ({
          </TradingFormGroup>
        </div>
      </div>
-      {renderTakeProfitError()}
-      {renderStopLossError()}
    </div>
  );
 };
@@ -1,7 +1,7 @@
 import { Controller, type Control } from 'react-hook-form';
 import type { Market } from '@vegaprotocol/markets';
 import type { OrderFormValues } from '../../hooks/use-form-values';
-import { toDecimal, useValidateAmount } from '@vegaprotocol/utils';
+import { useValidateAmount } from '@vegaprotocol/react-helpers';
 import {
  TradingFormGroup,
  TradingInput,
@@ -9,6 +9,7 @@ import {
  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../use-t';
+import { determineSizeStep } from '@vegaprotocol/utils';

 export interface DealTicketSizeIcebergProps {
  control: Control<OrderFormValues>;
@@ -29,7 +30,7 @@ export const DealTicketSizeIceberg = ({
 }: DealTicketSizeIcebergProps) => {
  const t = useT();
  const validateAmount = useValidateAmount();
-  const sizeStep = toDecimal(market?.positionDecimalPlaces);
+  const sizeStep = determineSizeStep(market);

  const renderPeakSizeError = () => {
    if (peakSizeError) {
@@ -8,9 +8,8 @@ import {
  formatForInput,
  formatValue,
  removeDecimal,
-  toDecimal,
-  useValidateAmount,
 } from '@vegaprotocol/utils';
+import { useValidateAmount } from '@vegaprotocol/react-helpers';
 import { type Control, type UseFormWatch } from 'react-hook-form';
 import { useForm, Controller, useController } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
@@ -59,6 +58,7 @@ import { KeyValue } from './key-value';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { stopOrdersProvider } from '@vegaprotocol/orders';
 import { useT } from '../../use-t';
+import { determinePriceStep, determineSizeStep } from '@vegaprotocol/utils';

 export interface StopOrderProps {
  market: Market;
@@ -904,8 +904,8 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
    market.tradableInstrument.instrument.metadata.tags
  );

-  const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  const priceStep = toDecimal(market?.decimalPlaces);
+  const sizeStep = determineSizeStep(market);
+  const priceStep = determinePriceStep(market);

  useController({
    name: 'type',
@@ -883,7 +883,7 @@ describe('DealTicket', () => {
        'deal-ticket-error-message-price'
      );
      expect(errorMessage).toHaveTextContent(
-        'Price accepts up to 2 decimal places'
+        'Price must be a multiple of 0.01 for this market'
      );
    });
  });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Matthew Russell	7404157ec6	chore: remove react and react-i18next from peer deps of utils	2024-03-09 11:33:19 +00:00
Matthew Russell	a90c5c3b0c	chore: move market expiry to react helpers	2024-03-09 11:32:35 +00:00
Matthew Russell	9e2e6b7636	chore: prevent react imports	2024-03-09 11:03:21 +00:00
Matthew Russell	ab06c95468	chore: move useFormatTrigger hook out of utisl	2024-03-09 11:01:58 +00:00
Matthew Russell	7b4c5c0fab	chore: move hooks to react helpers	2024-03-09 10:58:00 +00:00
Matthew RussellandDariusz Majcherczyk	1d721dc748	fix(trading): party alias snags (#5947 ) Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>	2024-03-08 17:29:41 +00:00
Matthew Russell	1d71a839b3	fix(trading): manifest.json and woff preloading (#5950 )	2024-03-08 17:27:36 +00:00
ArtandDariusz Majcherczyk	4b917926c5	chore(trading): market's tick size (#5929 ) Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>	2024-03-08 17:04:33 +00:00
Art	3a56678403	fix(trading): pick the best node to connect, slow notification notification, other node picking improvements (#5909 )	2024-03-08 16:12:11 +00:00
Matthew Russell	bcb5351dfc	chore(types,utils,wallet): prep for publish, remove lp dashboard (#5948 )	2024-03-08 13:20:03 +00:00