chore: reduced dialog spacing on mobile

.eslintrc.json

@@ -77,7 +77,6 @@
             "fixStyle": "inline-type-imports"
           }
         ],
-        "@typescript-eslint/no-useless-constructor": 0,
         "curly": ["error", "multi-line"]
       }
     },

.husky/pre-commit

@@ -1,8 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Auto-format all files
-yarn nx format:write
-
 # Lint all staged files
 yarn lint-staged

.husky/pre-push

@@ -1,8 +1,8 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Lint all staged files - this brings more value as pre-commit
-# yarn nx format:check
+# Lint all staged files
+yarn nx format:check
 
 # Test all projects with changes
-# yarn nx affected -t test --exclude trading
+yarn nx affected -t test --exclude trading

apps/explorer/src/app/app.tsx

@@ -12,8 +12,7 @@ import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-web
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';
 import { RouterProvider } from 'react-router-dom';
-import { useRouterConfig } from './routes/router-config';
-import { createBrowserRouter } from 'react-router-dom';
+import { router } from './routes/router-config';
 import { t } from '@vegaprotocol/i18n';
 import { Suspense } from 'react';
 
@@ -39,10 +38,7 @@ function App() {
             }
           >
             <Suspense fallback={splashLoading}>
-              <RouterProvider
-                router={createBrowserRouter(useRouterConfig())}
-                fallbackElement={splashLoading}
-              />
+              <RouterProvider router={router} fallbackElement={splashLoading} />
             </Suspense>
           </NodeGuard>
           <NodeSwitcherDialog

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

@@ -14,7 +14,7 @@ import { Routes } from '../../routes/route-names';
 import { NetworkSwitcher } from '@vegaprotocol/environment';
 import type { Navigable } from '../../routes/router-config';
 import { isNavigable } from '../../routes/router-config';
-import { useRouterConfig } from '../../routes/router-config';
+import { routerConfig } from '../../routes/router-config';
 import { useMemo } from 'react';
 import compact from 'lodash/compact';
 import { Search } from '../search';
@@ -26,7 +26,6 @@ const routeToNavigationItem = (r: Navigable) => (
 );
 
 export const Header = () => {
-  const routerConfig = useRouterConfig();
   const isHome = Boolean(useMatch(Routes.HOME));
   const pages = routerConfig[0].children || [];
   const mainItems = compact(

apps/explorer/src/app/components/order-details/deterministic-order-details.tsx

@@ -6,7 +6,6 @@ import { Time } from '../time';
 import { sideText, statusText, tifFull, tifShort } from './lib/order-labels';
 import SizeInMarket from '../size-in-market/size-in-market';
 import { TxOrderPeggedReference } from '../txs/details/order/tx-order-peg';
-import { OrderTypeMapping } from '@vegaprotocol/types';
 
 export interface DeterministicOrderDetailsProps {
   id: string;
@@ -70,7 +69,7 @@ const DeterministicOrderDetails = ({
             <span className="mx-5 text-base">@</span>
             <PriceInMarket price={o.price} marketId={o.market.id} />
           </h2>
-          <p className="text-gray-400 dark:text-gray-600">
+          <p className="text-gray-200">
             In <MarketLink id={o.market.id} /> at <Time date={o.createdAt} />.
           </p>
           {o.peggedOrder ? (
@@ -84,12 +83,13 @@ const DeterministicOrderDetails = ({
               />
             </p>
           ) : null}
+
           {o.reference ? (
             <p className="text-gray-500 mt-4">
               <span>{t('Reference')}</span>: {o.reference}
             </p>
           ) : null}
-          <div className="grid md:grid-cols-5 gap-x-6 mt-4">
+          <div className="grid md:grid-cols-4 gap-x-6 mt-4">
             <div className="mb-12 md:mb-0">
               <h2 className="text-2xl font-bold text-dark mb-4">
                 {t('Status')}
@@ -114,16 +114,6 @@ const DeterministicOrderDetails = ({
                 {o.version}
               </h5>
             </div>
-            {o.type ? (
-              <div className="">
-                <h2 className="text-2xl font-bold text-dark mb-4">
-                  {t('Type')}
-                </h2>
-                <h5 className="text-lg font-medium text-gray-500 mb-0">
-                  {OrderTypeMapping[o.type]}
-                </h5>
-              </div>
-            ) : null}
           </div>
         </div>
       </div>

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

@@ -80,12 +80,6 @@ export function getLabelForOrderType(
     if (command.orderSubmission.icebergOpts) {
       return 'Iceberg';
     }
-    if (command.orderSubmission.type === 'TYPE_MARKET') {
-      return 'Market order';
-    }
-    if (command.orderSubmission.type === 'TYPE_LIMIT') {
-      return 'Limit order';
-    }
   }
   return 'Order';
 }

apps/explorer/src/app/routes/router-config.tsx

@@ -18,6 +18,7 @@ import { t } from '@vegaprotocol/i18n';
 import { Routes } from './route-names';
 import { NetworkParameters } from './network-parameters';
 import type { Params, RouteObject } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import { MarketPage, MarketsPage } from './markets';
 import type { ReactNode } from 'react';
@@ -28,7 +29,7 @@ import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
 import { remove0x } from '@vegaprotocol/utils';
 import { PartyAccountsByAsset } from './parties/id/accounts';
 import { Disclaimer } from './pages/disclaimer';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import RestrictedPage from './restricted';
 
 export type Navigable = {
@@ -59,315 +60,311 @@ type Route = RouteItem & {
   children?: RouteItem[];
 };
 
-export const useRouterConfig = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-
-  const partiesRoutes: Route[] = featureFlags.EXPLORER_PARTIES
-    ? [
-        {
-          path: Routes.PARTIES,
-          element: <Party />,
-          handle: {
-            name: t('Parties'),
-            text: t('Parties'),
-            breadcrumb: () => <Link to={Routes.PARTIES}>{t('Parties')}</Link>,
+const partiesRoutes: Route[] = FLAGS.EXPLORER_PARTIES
+  ? [
+      {
+        path: Routes.PARTIES,
+        element: <Party />,
+        handle: {
+          name: t('Parties'),
+          text: t('Parties'),
+          breadcrumb: () => <Link to={Routes.PARTIES}>{t('Parties')}</Link>,
+        },
+        children: [
+          {
+            index: true,
+            element: <Parties />,
           },
-          children: [
-            {
-              index: true,
-              element: <Parties />,
-            },
-            {
-              path: ':party',
-              element: <Party />,
+          {
+            path: ':party',
+            element: <Party />,
 
-              children: [
-                {
-                  index: true,
-                  element: <PartySingle />,
-                  handle: {
-                    breadcrumb: (params: Params<string>) => (
-                      <Link to={linkTo(Routes.PARTIES, params.party)}>
-                        {truncateMiddle(params.party as string)}
-                      </Link>
-                    ),
-                  },
+            children: [
+              {
+                index: true,
+                element: <PartySingle />,
+                handle: {
+                  breadcrumb: (params: Params<string>) => (
+                    <Link to={linkTo(Routes.PARTIES, params.party)}>
+                      {truncateMiddle(params.party as string)}
+                    </Link>
+                  ),
                 },
-                {
-                  path: 'assets',
-                  element: <Party />,
-                  handle: {
-                    breadcrumb: (params: Params<string>) => (
-                      <Link to={linkTo(Routes.PARTIES, params.party)}>
-                        {truncateMiddle(params.party as string)}
-                      </Link>
-                    ),
-                  },
-                  children: [
-                    {
-                      index: true,
-                      element: <PartyAccountsByAsset />,
-                      handle: {
-                        breadcrumb: () => {
-                          return t('Assets');
-                        },
+              },
+              {
+                path: 'assets',
+                element: <Party />,
+                handle: {
+                  breadcrumb: (params: Params<string>) => (
+                    <Link to={linkTo(Routes.PARTIES, params.party)}>
+                      {truncateMiddle(params.party as string)}
+                    </Link>
+                  ),
+                },
+                children: [
+                  {
+                    index: true,
+                    element: <PartyAccountsByAsset />,
+                    handle: {
+                      breadcrumb: () => {
+                        return t('Assets');
                       },
                     },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ]
-    : [];
-
-  const assetsRoutes: Route[] = featureFlags.EXPLORER_ASSETS
-    ? [
-        {
-          path: Routes.ASSETS,
-          handle: {
-            name: t('Assets'),
-            text: t('Assets'),
-            breadcrumb: () => <Link to={Routes.ASSETS}>{t('Assets')}</Link>,
-          },
-          children: [
-            {
-              index: true,
-              element: <AssetsPage />,
-            },
-            {
-              path: ':assetId',
-              element: <AssetPage />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <AssetLink assetId={params.assetId as string} />
-                ),
+                  },
+                ],
               },
-            },
-          ],
-        },
-      ]
-    : [];
-
-  const genesisRoutes: Route[] = featureFlags.EXPLORER_GENESIS
-    ? [
-        {
-          path: Routes.GENESIS,
-          handle: {
-            name: t('Genesis'),
-            text: t('Genesis Parameters'),
-            breadcrumb: () => (
-              <Link to={Routes.GENESIS}>{t('Genesis Parameters')}</Link>
-            ),
+            ],
           },
-          element: <Genesis />,
-        },
-      ]
-    : [];
+        ],
+      },
+    ]
+  : [];
 
-  const governanceRoutes: Route[] = featureFlags.EXPLORER_GOVERNANCE
-    ? [
-        {
-          path: Routes.GOVERNANCE,
-          handle: {
-            name: t('Governance proposals'),
-            text: t('Governance Proposals'),
-            breadcrumb: () => (
-              <Link to={Routes.GOVERNANCE}>{t('Governance Proposals')}</Link>
-            ),
-          },
-          element: <Proposals />,
+const assetsRoutes: Route[] = FLAGS.EXPLORER_ASSETS
+  ? [
+      {
+        path: Routes.ASSETS,
+        handle: {
+          name: t('Assets'),
+          text: t('Assets'),
+          breadcrumb: () => <Link to={Routes.ASSETS}>{t('Assets')}</Link>,
         },
-      ]
-    : [];
-
-  const marketsRoutes: Route[] = featureFlags.EXPLORER_MARKETS
-    ? [
-        {
-          path: Routes.MARKETS,
-          handle: {
-            name: t('Markets'),
-            text: t('Markets'),
-            breadcrumb: () => <Link to={Routes.MARKETS}>{t('Markets')}</Link>,
-          },
-          children: [
-            {
-              index: true,
-              element: <MarketsPage />,
-            },
-            {
-              path: ':marketId',
-              element: <MarketPage />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <MarketLink id={params.marketId as string} />
-                ),
-              },
-            },
-          ],
-        },
-      ]
-    : [];
-
-  const networkParametersRoutes: Route[] =
-    featureFlags.EXPLORER_NETWORK_PARAMETERS
-      ? [
+        children: [
           {
-            path: Routes.NETWORK_PARAMETERS,
+            index: true,
+            element: <AssetsPage />,
+          },
+          {
+            path: ':assetId',
+            element: <AssetPage />,
             handle: {
-              name: t('NetworkParameters'),
-              text: t('Network Parameters'),
-              breadcrumb: () => (
-                <Link to={Routes.NETWORK_PARAMETERS}>
-                  {t('Network Parameters')}
+              breadcrumb: (params: Params<string>) => (
+                <AssetLink assetId={params.assetId as string} />
+              ),
+            },
+          },
+        ],
+      },
+    ]
+  : [];
+
+const genesisRoutes: Route[] = FLAGS.EXPLORER_GENESIS
+  ? [
+      {
+        path: Routes.GENESIS,
+        handle: {
+          name: t('Genesis'),
+          text: t('Genesis Parameters'),
+          breadcrumb: () => (
+            <Link to={Routes.GENESIS}>{t('Genesis Parameters')}</Link>
+          ),
+        },
+        element: <Genesis />,
+      },
+    ]
+  : [];
+
+const governanceRoutes: Route[] = FLAGS.EXPLORER_GOVERNANCE
+  ? [
+      {
+        path: Routes.GOVERNANCE,
+        handle: {
+          name: t('Governance proposals'),
+          text: t('Governance Proposals'),
+          breadcrumb: () => (
+            <Link to={Routes.GOVERNANCE}>{t('Governance Proposals')}</Link>
+          ),
+        },
+        element: <Proposals />,
+      },
+    ]
+  : [];
+
+const marketsRoutes: Route[] = FLAGS.EXPLORER_MARKETS
+  ? [
+      {
+        path: Routes.MARKETS,
+        handle: {
+          name: t('Markets'),
+          text: t('Markets'),
+          breadcrumb: () => <Link to={Routes.MARKETS}>{t('Markets')}</Link>,
+        },
+        children: [
+          {
+            index: true,
+            element: <MarketsPage />,
+          },
+          {
+            path: ':marketId',
+            element: <MarketPage />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <MarketLink id={params.marketId as string} />
+              ),
+            },
+          },
+        ],
+      },
+    ]
+  : [];
+
+const networkParametersRoutes: Route[] = FLAGS.EXPLORER_NETWORK_PARAMETERS
+  ? [
+      {
+        path: Routes.NETWORK_PARAMETERS,
+        handle: {
+          name: t('NetworkParameters'),
+          text: t('Network Parameters'),
+          breadcrumb: () => (
+            <Link to={Routes.NETWORK_PARAMETERS}>
+              {t('Network Parameters')}
+            </Link>
+          ),
+        },
+        element: <NetworkParameters />,
+      },
+    ]
+  : [];
+
+const validators: Route[] = FLAGS.EXPLORER_VALIDATORS
+  ? [
+      {
+        path: Routes.VALIDATORS,
+        handle: {
+          name: t('Validators'),
+          text: t('Validators'),
+          breadcrumb: () => (
+            <Link to={Routes.VALIDATORS}>{t('Validators')}</Link>
+          ),
+        },
+        element: <ValidatorsPage />,
+      },
+    ]
+  : [];
+
+const linkTo = (...segments: (string | undefined)[]) =>
+  compact(segments).join('/');
+
+export const routerConfig: Route[] = [
+  {
+    path: Routes.HOME,
+    element: <Layout />,
+    handle: {
+      name: t('Home'),
+      text: t('Home'),
+      breadcrumb: () => <Link to={Routes.HOME}>{t('Home')}</Link>,
+    },
+    errorElement: <ErrorBoundary />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: Routes.TX,
+        handle: {
+          name: t('Txs'),
+          text: t('Transactions'),
+          breadcrumb: () => <Link to={Routes.TX}>{t('Transactions')}</Link>,
+        },
+        children: [
+          {
+            path: ':txHash',
+            element: <Tx />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <Link to={linkTo(Routes.TX, params.txHash)}>
+                  {truncateMiddle(remove0x(params.txHash as string))}
                 </Link>
               ),
             },
-            element: <NetworkParameters />,
           },
-        ]
-      : [];
-
-  const validators: Route[] = featureFlags.EXPLORER_VALIDATORS
-    ? [
-        {
-          path: Routes.VALIDATORS,
-          handle: {
-            name: t('Validators'),
-            text: t('Validators'),
-            breadcrumb: () => (
-              <Link to={Routes.VALIDATORS}>{t('Validators')}</Link>
-            ),
+          {
+            index: true,
+            element: <TxsList />,
           },
-          element: <ValidatorsPage />,
-        },
-      ]
-    : [];
-
-  const linkTo = (...segments: (string | undefined)[]) =>
-    compact(segments).join('/');
-
-  const routerConfig: Route[] = [
-    {
-      path: Routes.HOME,
-      element: <Layout />,
-      handle: {
-        name: t('Home'),
-        text: t('Home'),
-        breadcrumb: () => <Link to={Routes.HOME}>{t('Home')}</Link>,
+        ],
       },
-      errorElement: <ErrorBoundary />,
-      children: [
-        {
-          index: true,
-          element: <Home />,
+      {
+        path: Routes.BLOCKS,
+        handle: {
+          name: t('Blocks'),
+          text: t('Blocks'),
+          breadcrumb: () => <Link to={Routes.BLOCKS}>{t('Blocks')}</Link>,
         },
-        {
-          path: Routes.TX,
-          handle: {
-            name: t('Txs'),
-            text: t('Transactions'),
-            breadcrumb: () => <Link to={Routes.TX}>{t('Transactions')}</Link>,
+        element: <BlockPage />,
+        children: [
+          {
+            index: true,
+            element: <Blocks />,
           },
-          children: [
-            {
-              path: ':txHash',
-              element: <Tx />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <Link to={linkTo(Routes.TX, params.txHash)}>
-                    {truncateMiddle(remove0x(params.txHash as string))}
-                  </Link>
-                ),
-              },
+          {
+            path: ':block',
+            element: <Block />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <Link to={linkTo(Routes.BLOCKS, params.block)}>
+                  {params.block}
+                </Link>
+              ),
             },
-            {
-              index: true,
-              element: <TxsList />,
-            },
-          ],
-        },
-        {
-          path: Routes.BLOCKS,
-          handle: {
-            name: t('Blocks'),
-            text: t('Blocks'),
-            breadcrumb: () => <Link to={Routes.BLOCKS}>{t('Blocks')}</Link>,
           },
-          element: <BlockPage />,
-          children: [
-            {
-              index: true,
-              element: <Blocks />,
-            },
-            {
-              path: ':block',
-              element: <Block />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <Link to={linkTo(Routes.BLOCKS, params.block)}>
-                    {params.block}
-                  </Link>
-                ),
-              },
-            },
-          ],
-        },
-        {
-          path: Routes.ORACLES,
-          handle: {
-            name: t('Oracles'),
-            text: t('Oracles'),
-            breadcrumb: () => <Link to={Routes.ORACLES}>{t('Oracles')}</Link>,
-          },
-          element: <OraclePage />,
-          children: [
-            {
-              index: true,
-              element: <Oracles />,
-            },
-            {
-              path: ':id',
-              element: <Oracle />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <Link to={linkTo(Routes.ORACLES, params.id)}>
-                    {truncateMiddle(params.id as string)}
-                  </Link>
-                ),
-              },
-            },
-          ],
-        },
-        {
-          path: Routes.DISCLAIMER,
-          element: <Disclaimer />,
-          handle: {
-            name: t('Disclaimer'),
-            text: t('Disclaimer'),
-            breadcrumb: () => (
-              <Link to={Routes.DISCLAIMER}>{t('Disclaimer')}</Link>
-            ),
-          },
-        },
-        ...partiesRoutes,
-        ...assetsRoutes,
-        ...genesisRoutes,
-        ...governanceRoutes,
-        ...marketsRoutes,
-        ...networkParametersRoutes,
-        ...validators,
-      ],
-    },
-    {
-      path: Routes.RESTRICTED,
-      element: <RestrictedPage />,
-      handle: {
-        name: t('Restricted'),
-        text: t('Restricted'),
+        ],
       },
+      {
+        path: Routes.ORACLES,
+        handle: {
+          name: t('Oracles'),
+          text: t('Oracles'),
+          breadcrumb: () => <Link to={Routes.ORACLES}>{t('Oracles')}</Link>,
+        },
+        element: <OraclePage />,
+        children: [
+          {
+            index: true,
+            element: <Oracles />,
+          },
+          {
+            path: ':id',
+            element: <Oracle />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <Link to={linkTo(Routes.ORACLES, params.id)}>
+                  {truncateMiddle(params.id as string)}
+                </Link>
+              ),
+            },
+          },
+        ],
+      },
+      {
+        path: Routes.DISCLAIMER,
+        element: <Disclaimer />,
+        handle: {
+          name: t('Disclaimer'),
+          text: t('Disclaimer'),
+          breadcrumb: () => (
+            <Link to={Routes.DISCLAIMER}>{t('Disclaimer')}</Link>
+          ),
+        },
+      },
+      ...partiesRoutes,
+      ...assetsRoutes,
+      ...genesisRoutes,
+      ...governanceRoutes,
+      ...marketsRoutes,
+      ...networkParametersRoutes,
+      ...validators,
+    ],
+  },
+  {
+    path: Routes.RESTRICTED,
+    element: <RestrictedPage />,
+    handle: {
+      name: t('Restricted'),
+      text: t('Restricted'),
     },
-  ];
-  return routerConfig;
-};
+  },
+];
+
+export const router = createBrowserRouter(routerConfig);

apps/governance/src/app-loader.tsx

@@ -2,7 +2,7 @@ import * as Sentry from '@sentry/react';
 import { toBigNum } from '@vegaprotocol/utils';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useEagerConnect } from '@vegaprotocol/wallet';
-import { useFeatureFlags, useEnvironment } from '@vegaprotocol/environment';
+import { FLAGS, useEnvironment } from '@vegaprotocol/environment';
 import { useWeb3React } from '@web3-react/core';
 import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,23 +15,21 @@ import {
 } from './contexts/app-state/app-state-context';
 import { useContracts } from './contexts/contracts/contracts-context';
 import { useRefreshAssociatedBalances } from './hooks/use-refresh-associated-balances';
-import { useConnectors } from './lib/vega-connectors';
+import { Connectors } from './lib/vega-connectors';
 import { useSearchParams } from 'react-router-dom';
 
 const useVegaWalletEagerConnect = () => {
-  const connectors = useConnectors();
-  const vegaConnecting = useEagerConnect(connectors);
+  const vegaConnecting = useEagerConnect(Connectors);
   const { pubKey, connect } = useVegaWallet();
   const [searchParams] = useSearchParams();
   const [query] = React.useState(searchParams.get('address'));
   if (query && !pubKey) {
-    connect(connectors.view);
+    connect(Connectors['view']);
   }
   return vegaConnecting;
 };
 
 export const AppLoader = ({ children }: { children: React.ReactElement }) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const { account } = useWeb3React();
   const { VEGA_URL } = useEnvironment();
@@ -81,16 +79,10 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
       }
     };
 
-    if (!featureFlags.GOVERNANCE_NETWORK_DOWN) {
+    if (!FLAGS.GOVERNANCE_NETWORK_DOWN) {
       run();
     }
-  }, [
-    token,
-    appDispatch,
-    staking,
-    vesting,
-    featureFlags.GOVERNANCE_NETWORK_DOWN,
-  ]);
+  }, [token, appDispatch, staking, vesting]);
 
   React.useEffect(() => {
     if (account && pubKey) {
@@ -155,16 +147,16 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
     };
 
     // Only begin polling if network limits flag is set, as this is a new API not yet on mainnet 7/3/22
-    if (featureFlags.GOVERNANCE_NETWORK_LIMITS) {
+    if (FLAGS.GOVERNANCE_NETWORK_LIMITS) {
       getNetworkLimits();
     }
 
     return () => {
       stopPoll();
     };
-  }, [appDispatch, VEGA_URL, t, featureFlags.GOVERNANCE_NETWORK_LIMITS]);
+  }, [appDispatch, VEGA_URL, t]);
 
-  if (featureFlags.GOVERNANCE_NETWORK_DOWN) {
+  if (FLAGS.GOVERNANCE_NETWORK_DOWN) {
     return (
       <Splash>
         <SplashError />

apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx

@@ -7,16 +7,16 @@ import {
   AppStateActionType,
   useAppState,
 } from '../../contexts/app-state/app-state-context';
-import { useConnectors } from '../../lib/vega-connectors';
+import { Connectors } from '../../lib/vega-connectors';
 import { RiskMessage } from './risk-message';
 
 export const VegaWalletDialogs = () => {
   const { appState, appDispatch } = useAppState();
-  const connectors = useConnectors();
+
   return (
     <>
       <VegaConnectDialog
-        connectors={connectors}
+        connectors={Connectors}
         riskMessage={<RiskMessage />}
       />
 
@@ -30,7 +30,7 @@ export const VegaWalletDialogs = () => {
         }
       />
 
-      <ViewAsDialog connector={connectors.view} />
+      <ViewAsDialog connector={Connectors.view} />
     </>
   );
 };

apps/governance/src/contexts/contracts/contracts-provider.tsx

@@ -49,8 +49,12 @@ export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
             ? activeProvider
             : defaultProvider;
 
-        if (account && provider && typeof provider.getSigner === 'function') {
-          signer = provider.getSigner(account);
+        if (
+          account &&
+          activeProvider &&
+          typeof activeProvider.getSigner === 'function'
+        ) {
+          signer = provider.getSigner();
         }
 
         const tokenVestingAddress =

apps/governance/src/lib/vega-connectors.ts

@@ -1,5 +1,4 @@
-import { useFeatureFlags } from '@vegaprotocol/environment';
-import { useMemo } from 'react';
+import { FLAGS } from '@vegaprotocol/environment';
 import {
   JsonRpcConnector,
   ViewConnector,
@@ -14,17 +13,13 @@ export const jsonRpc = new JsonRpcConnector();
 export const injected = new InjectedConnector();
 export const view = new ViewConnector(urlParams.get('address'));
 
-export const snap = new SnapConnector(DEFAULT_SNAP_ID);
+export const snap = FLAGS.METAMASK_SNAPS
+  ? new SnapConnector(DEFAULT_SNAP_ID)
+  : undefined;
 
-export const useConnectors = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-  return useMemo(
-    () => ({
-      injected,
-      jsonRpc,
-      view,
-      snap: featureFlags.METAMASK_SNAPS ? snap : undefined,
-    }),
-    [featureFlags.METAMASK_SNAPS]
-  );
+export const Connectors = {
+  injected,
+  jsonRpc,
+  view,
+  snap,
 };

apps/governance/src/routes/home/index.tsx

@@ -12,7 +12,7 @@ import { useRefreshAfterEpoch } from '../../hooks/use-refresh-after-epoch';
 import { ProposalsListItem } from '../proposals/components/proposals-list-item';
 import { ProtocolUpgradeProposalsListItem } from '../proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item';
 import Routes from '../routes';
-import { ExternalLinks, useFeatureFlags } from '@vegaprotocol/environment';
+import { ExternalLinks, FLAGS } from '@vegaprotocol/environment';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { useNodesQuery } from '../staking/home/__generated__/Nodes';
 import { useProposalsQuery } from '../proposals/proposals/__generated__/Proposals';
@@ -175,7 +175,6 @@ export const ValidatorDetailsLink = ({
 };
 
 const GovernanceHome = ({ name }: RouteChildProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   useDocumentTitle(name);
   const { t } = useTranslation();
   const {
@@ -187,9 +186,9 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
     variables: {
-      includeNewMarketProductFields: !!featureFlags.PRODUCT_PERPETUALS,
-      includeUpdateMarketStates: !!featureFlags.UPDATE_MARKET_STATE,
-      includeUpdateReferralPrograms: !!featureFlags.REFERRALS,
+      includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
+      includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
+      includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
     },
   });
 

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.spec.tsx

@@ -19,7 +19,7 @@ import {
   mockWalletContext,
   createUserVoteQueryMock,
 } from '../../test-helpers/mocks';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { BrowserRouter } from 'react-router-dom';
 import { VoteState } from '../vote-details/use-user-vote';
 import { useNewTransferProposalDetails } from '@vegaprotocol/proposals';
@@ -62,7 +62,8 @@ describe('Proposal header', () => {
     jest.clearAllMocks();
   });
   it('Renders New market proposal', () => {
-    useFeatureFlags.setState({ flags: { SUCCESSOR_MARKETS: true } });
+    const mockedFlags = jest.mocked(FLAGS);
+    mockedFlags.SUCCESSOR_MARKETS = true;
     renderComponent(
       generateProposal({
         rationale: {

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -12,7 +12,7 @@ import {
   useNewTransferProposalDetails,
   useSuccessorMarketProposalDetails,
 } from '@vegaprotocol/proposals';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import Routes from '../../../routes';
 import { Link } from 'react-router-dom';
 import type { VoteState } from '../vote-details/use-user-vote';
@@ -28,7 +28,6 @@ export const ProposalHeader = ({
   isListItem?: boolean;
   voteState?: VoteState | null;
 }) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const change = proposal?.terms.change;
 
@@ -55,14 +54,13 @@ export const ProposalHeader = ({
   switch (change?.__typename) {
     case 'NewMarket': {
       proposalType =
-        featureFlags.PRODUCT_PERPETUALS &&
-        change?.instrument?.product?.__typename
+        FLAGS.PRODUCT_PERPETUALS && change?.instrument?.product?.__typename
           ? `NewMarket${change?.instrument?.product?.__typename}`
           : 'NewMarket';
       fallbackTitle = t('NewMarketProposal');
       details = (
         <>
-          {featureFlags.SUCCESSOR_MARKETS && (
+          {FLAGS.SUCCESSOR_MARKETS && (
             <SuccessorCode proposalId={proposal?.id} />
           )}
           <span>
@@ -84,13 +82,13 @@ export const ProposalHeader = ({
     }
     case 'UpdateMarketState': {
       proposalType =
-        featureFlags.UPDATE_MARKET_STATE && change?.updateType
+        FLAGS.UPDATE_MARKET_STATE && change?.updateType
           ? t(change.updateType)
           : 'UpdateMarketState';
       fallbackTitle = t('UpdateMarketStateProposal');
       details = (
         <span>
-          {featureFlags.UPDATE_MARKET_STATE &&
+          {FLAGS.UPDATE_MARKET_STATE &&
           change?.market?.id &&
           change.updateType ? (
             <>
@@ -179,14 +177,14 @@ export const ProposalHeader = ({
     case 'NewTransfer':
       proposalType = 'NewTransfer';
       fallbackTitle = t('NewTransferProposal');
-      details = featureFlags.GOVERNANCE_TRANSFERS ? (
+      details = FLAGS.GOVERNANCE_TRANSFERS ? (
         <NewTransferSummary proposalId={proposal?.id} />
       ) : null;
       break;
     case 'CancelTransfer':
       proposalType = 'CancelTransfer';
       fallbackTitle = t('CancelTransferProposal');
-      details = featureFlags.GOVERNANCE_TRANSFERS ? (
+      details = FLAGS.GOVERNANCE_TRANSFERS ? (
         <CancelTransferSummary proposalId={proposal?.id} />
       ) : null;
       break;

apps/governance/src/routes/proposals/components/proposal-referral-program-details/proposal-referral-program-details.tsx

@@ -54,8 +54,8 @@ export const ProposalReferralProgramDetails = ({
     return null;
   }
 
-  const benefitTiers = proposal?.terms?.change?.benefitTiers.slice();
-  const stakingTiers = proposal?.terms?.change?.stakingTiers.slice();
+  const benefitTiers = proposal?.terms?.change?.benefitTiers;
+  const stakingTiers = proposal?.terms?.change?.stakingTiers;
   const windowLength = proposal?.terms?.change?.windowLength;
   const endOfProgramTimestamp = proposal?.terms?.change?.endOfProgram;
 

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -26,7 +26,7 @@ import {
   ProposalCancelTransferDetails,
   ProposalTransferDetails,
 } from '../proposal-transfer';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { ProposalUpdateBenefitTiers } from '../proposal-update-benefit-tiers';
 
 export interface ProposalProps {
@@ -53,7 +53,6 @@ export const Proposal = ({
   originalMarketProposalRestData,
   mostRecentlyEnactedAssociatedMarketProposal,
 }: ProposalProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const { submit, Dialog, finalizedVote, transaction } = useVoteSubmit();
   const { voteState, voteDatetime } = useUserVote(proposal?.id, finalizedVote);
@@ -133,7 +132,7 @@ export const Proposal = ({
   }
 
   // Show governance transfer details only if the GOVERNANCE_TRANSFERS flag is on.
-  const governanceTransferDetails = featureFlags.GOVERNANCE_TRANSFERS && (
+  const governanceTransferDetails = FLAGS.GOVERNANCE_TRANSFERS && (
     <>
       {proposal.terms.change.__typename === 'NewTransfer' && (
         /** Governance New Transfer Details */

apps/governance/src/routes/proposals/proposal/proposal-container.tsx

@@ -15,11 +15,10 @@ import {
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
 import { useParentMarketIdQuery } from '@vegaprotocol/markets';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { useSuccessorMarketProposalDetails } from '@vegaprotocol/proposals';
 
 export const ProposalContainer = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const [
     mostRecentlyEnactedAssociatedMarketProposal,
     setMostRecentlyEnactedAssociatedMarketProposal,
@@ -60,9 +59,9 @@ export const ProposalContainer = () => {
     errorPolicy: 'ignore',
     variables: {
       proposalId: params.proposalId || '',
-      includeNewMarketProductField: !!featureFlags.PRODUCT_PERPETUALS,
-      includeUpdateMarketState: !!featureFlags.UPDATE_MARKET_STATE,
-      includeUpdateReferralProgram: !!featureFlags.REFERRALS,
+      includeNewMarketProductField: !!FLAGS.PRODUCT_PERPETUALS,
+      includeUpdateMarketState: !!FLAGS.UPDATE_MARKET_STATE,
+      includeUpdateReferralProgram: !!FLAGS.REFERRALS,
     },
     skip: !params.proposalId,
   });
@@ -121,7 +120,7 @@ export const ProposalContainer = () => {
     variables: {
       marketId: marketData?.id || '',
     },
-    skip: !featureFlags.SUCCESSOR_MARKETS || !isSuccessor || !marketData?.id,
+    skip: !FLAGS.SUCCESSOR_MARKETS || !isSuccessor || !marketData?.id,
   });
 
   const {
@@ -134,7 +133,7 @@ export const ProposalContainer = () => {
     variables: {
       marketId: parentMarketId?.market?.parentMarketID || '',
       skip:
-        !featureFlags.SUCCESSOR_MARKETS ||
+        !FLAGS.SUCCESSOR_MARKETS ||
         !isSuccessor ||
         !parentMarketId?.market?.parentMarketID,
     },

apps/governance/src/routes/proposals/proposals/proposals-container.tsx

@@ -17,7 +17,7 @@ import {
 } from './__generated__/Proposals';
 import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 
 export function getNotRejectedProposals(data?: ProposalFieldsFragment[]) {
   return flow([
@@ -43,16 +43,15 @@ export function getNotRejectedProtocolUpgradeProposals<
 }
 
 export const ProposalsContainer = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const { data, loading, error } = useProposalsQuery({
     pollInterval: 5000,
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
     variables: {
-      includeNewMarketProductFields: !!featureFlags.PRODUCT_PERPETUALS,
-      includeUpdateMarketStates: !!featureFlags.UPDATE_MARKET_STATE,
-      includeUpdateReferralPrograms: !!featureFlags.REFERRALS,
+      includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
+      includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
+      includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
     },
   });
 

apps/governance/src/routes/proposals/rejected/rejected-proposals-container.tsx

@@ -10,7 +10,7 @@ import { removePaginationWrapper } from '@vegaprotocol/utils';
 import flow from 'lodash/flow';
 import orderBy from 'lodash/orderBy';
 import { ProposalState } from '@vegaprotocol/types';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 
 const orderByDate = (arr: ProposalFieldsFragment[]) =>
   orderBy(
@@ -33,16 +33,15 @@ export function getRejectedProposals(data?: ProposalFieldsFragment[] | null) {
 }
 
 export const RejectedProposalsContainer = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const { data, loading, error } = useProposalsQuery({
     pollInterval: 5000,
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
     variables: {
-      includeNewMarketProductFields: !!featureFlags.PRODUCT_PERPETUALS,
-      includeUpdateMarketStates: !!featureFlags.UPDATE_MARKET_STATE,
-      includeUpdateReferralPrograms: !!featureFlags.REFERRALS,
+      includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
+      includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
+      includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
     },
   });
 

apps/governance/src/styles.css

@@ -104,10 +104,6 @@
   list-style: circle;
 }
 
-.react-markdown-container a {
-  text-decoration: underline;
-}
-
 .jsondiffpatch-delta,
 .jsondiffpatch-delta pre {
   font-family: 'Roboto Mono', monospace !important;

apps/trading/.env.mainnet

@@ -22,9 +22,10 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
+# NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
-NX_REFERRALS=true
-# NX_DISABLE_CLOSE_POSITION=false
+NX_REFERRALS=false
 
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
+NX_DISABLE_CLOSE_POSITION=true

apps/trading/.env.stagnet1

@@ -24,7 +24,4 @@ NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
-NX_REFERRALS=true
-
-NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
-NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=
+NX_REFERRALS=true

apps/trading/.env.testnet

@@ -23,11 +23,9 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
+# NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
 
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
-
-NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
-NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=

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

@@ -1,9 +1,8 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
-import { ErrorBoundary } from '../../components/error-boundary';
 import { FeesContainer } from '../../components/fees-container';
 import { useT } from '../../lib/use-t';
 import { usePageTitleStore } from '../../stores';
+import { titlefy } from '@vegaprotocol/utils';
+import { useEffect } from 'react';
 
 export const Fees = () => {
   const t = useT();
@@ -11,17 +10,13 @@ export const Fees = () => {
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
-
   useEffect(() => {
     updateTitle(titlefy([title]));
   }, [updateTitle, title]);
-
   return (
-    <ErrorBoundary feature="fees">
-      <div className="container p-4 mx-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
-        <FeesContainer />
-      </div>
-    </ErrorBoundary>
+    <div className="container p-4 mx-auto">
+      <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+      <FeesContainer />
+    </div>
   );
 };

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

@@ -6,7 +6,6 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -59,28 +58,19 @@ export const LiquidityViewContainer = ({
             name={t('My liquidity provision')}
             hidden={!pubKey}
           >
-            <ErrorBoundary feature="liquidity-party">
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ partyId: pubKey || undefined }}
-              />
-            </ErrorBoundary>
+            <LiquidityContainer
+              marketId={marketId}
+              filter={{ partyId: pubKey || undefined }}
+            />
           </Tab>
           <Tab id={LiquidityTabs.Active} name={t('Active')}>
-            <ErrorBoundary feature="liquidity-active">
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ active: true }}
-              />
-            </ErrorBoundary>
+            <LiquidityContainer marketId={marketId} filter={{ active: true }} />
           </Tab>
           <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
-            <ErrorBoundary feature="liquidity-inactive">
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ active: false }}
-              />
-            </ErrorBoundary>
+            <LiquidityContainer
+              marketId={marketId}
+              filter={{ active: false }}
+            />
           </Tab>
         </Tabs>
       </div>

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

@@ -18,9 +18,8 @@ import {
   MarketSuccessorProposalBanner,
   MarketTerminationBanner,
 } from '../../components/market-banner';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 interface TradeGridProps {
   market: Market | null;
@@ -35,7 +34,6 @@ const MainGrid = memo(
     marketId: string;
     pinnedAsset?: PinnedAsset;
   }) => {
-    const featureFlags = useFeatureFlags((state) => state.flags);
     const t = useT();
     const { data: market } = useMarket(marketId);
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
@@ -62,40 +60,30 @@ const MainGrid = memo(
                     id="chart"
                     overflowHidden
                     name={t('Chart')}
-                    menu={<TradingViews.chart.menu />}
+                    menu={<TradingViews.candles.menu />}
                   >
-                    <ErrorBoundary feature="chart">
-                      <TradingViews.chart.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.candles.component marketId={marketId} />
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
-                    <ErrorBoundary feature="depth">
-                      <TradingViews.depth.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.depth.component marketId={marketId} />
                   </Tab>
                   <Tab id="liquidity" name={t('Liquidity')}>
-                    <ErrorBoundary feature="liquidity">
-                      <TradingViews.liquidity.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.liquidity.component marketId={marketId} />
                   </Tab>
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
                     <Tab id="funding-history" name={t('Funding history')}>
-                      <ErrorBoundary feature="funding-history">
-                        <TradingViews.funding.component marketId={marketId} />
-                      </ErrorBoundary>
+                      <TradingViews.funding.component marketId={marketId} />
                     </Tab>
                   ) : null}
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
                     <Tab id="funding-payments" name={t('Funding payments')}>
-                      <ErrorBoundary feature="funding-payments">
-                        <TradingViews.fundingPayments.component
-                          marketId={marketId}
-                        />
-                      </ErrorBoundary>
+                      <TradingViews.fundingPayments.component
+                        marketId={marketId}
+                      />
                     </Tab>
                   ) : null}
                 </Tabs>
@@ -108,14 +96,10 @@ const MainGrid = memo(
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-right">
                   <Tab id="orderbook" name={t('Orderbook')}>
-                    <ErrorBoundary feature="orderbook">
-                      <TradingViews.orderbook.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.orderbook.component marketId={marketId} />
                   </Tab>
                   <Tab id="trades" name={t('Trades')}>
-                    <ErrorBoundary feature="trades">
-                      <TradingViews.trades.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.trades.component marketId={marketId} />
                   </Tab>
                 </Tabs>
               </TradeGridChild>
@@ -134,43 +118,31 @@ const MainGrid = memo(
                 name={t('Positions')}
                 menu={<TradingViews.positions.menu />}
               >
-                <ErrorBoundary feature="positions">
-                  <TradingViews.positions.component />
-                </ErrorBoundary>
+                <TradingViews.positions.component />
               </Tab>
               <Tab
                 id="open-orders"
                 name={t('Open')}
                 menu={<TradingViews.activeOrders.menu />}
               >
-                <ErrorBoundary feature="activeOrders">
-                  <TradingViews.activeOrders.component />
-                </ErrorBoundary>
+                <TradingViews.activeOrders.component />
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <ErrorBoundary feature="closedOrders">
-                  <TradingViews.closedOrders.component />
-                </ErrorBoundary>
+                <TradingViews.closedOrders.component />
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <ErrorBoundary feature="rejectedOrders">
-                  <TradingViews.rejectedOrders.component />
-                </ErrorBoundary>
+                <TradingViews.rejectedOrders.component />
               </Tab>
               <Tab
                 id="orders"
                 name={t('All')}
                 menu={<TradingViews.orders.menu />}
               >
-                <ErrorBoundary feature="orders">
-                  <TradingViews.orders.component />
-                </ErrorBoundary>
+                <TradingViews.orders.component />
               </Tab>
-              {featureFlags.STOP_ORDERS ? (
+              {FLAGS.STOP_ORDERS ? (
                 <Tab id="stop-orders" name={t('Stop orders')}>
-                  <ErrorBoundary feature="stop-orders">
-                    <TradingViews.stopOrders.component />
-                  </ErrorBoundary>
+                  <TradingViews.stopOrders.component />
                 </Tab>
               ) : null}
               <Tab id="fills" name={t('Fills')}>
@@ -181,11 +153,7 @@ const MainGrid = memo(
                 name={t('Collateral')}
                 menu={<TradingViews.collateral.menu />}
               >
-                <ErrorBoundary feature="collateral">
-                  <TradingViews.collateral.component
-                    pinnedAsset={pinnedAsset}
-                  />
-                </ErrorBoundary>
+                <TradingViews.collateral.component pinnedAsset={pinnedAsset} />
               </Tab>
             </Tabs>
           </TradeGridChild>
@@ -197,7 +165,6 @@ const MainGrid = memo(
 MainGrid.displayName = 'MainGrid';
 
 export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const wrapperClasses = classNames(
     'h-full grid',
     'grid-rows-[min-content_1fr]'
@@ -206,7 +173,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        {featureFlags.SUCCESSOR_MARKETS && (
+        {FLAGS.SUCCESSOR_MARKETS && (
           <>
             <MarketSuccessorBanner market={market} />
             <MarketSuccessorProposalBanner marketId={market?.id} />

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

@@ -1,20 +1,19 @@
-import { type PinnedAsset } from '@vegaprotocol/accounts';
-import { type Market } from '@vegaprotocol/markets';
+import type { PinnedAsset } from '@vegaprotocol/accounts';
+import type { Market } from '@vegaprotocol/markets';
 import { OracleBanner } from '@vegaprotocol/markets';
+import type { TradingView } from './trade-views';
+import { TradingViews } from './trade-views';
 import { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useT } from '../../lib/use-t';
 import {
   MarketSuccessorBanner,
   MarketSuccessorProposalBanner,
   MarketTerminationBanner,
 } from '../../components/market-banner';
-import { ErrorBoundary } from '../../components/error-boundary';
-import { type TradingView } from './trade-views';
-import { TradingViews } from './trade-views';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
+import { useT } from '../../lib/use-t';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 
 interface TradePanelsProps {
   market: Market | null;
@@ -22,8 +21,7 @@ interface TradePanelsProps {
 }
 
 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-  const [view, setView] = useState<TradingView>('chart');
+  const [view, setView] = useState<TradingView>('candles');
 
   const renderView = () => {
     const Component = TradingViews[view].component;
@@ -36,11 +34,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
 
     // Watch out here, we don't know what component is being rendered
     // so watch out for clashes in props
-    return (
-      <ErrorBoundary feature={view}>
-        <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
-      </ErrorBoundary>
-    );
+    return <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
   };
 
   const renderMenu = () => {
@@ -50,7 +44,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
       const Menu = viewCfg.menu;
 
       return (
-        <div className="flex items-center justify-end gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
+        <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
           <Menu />
         </div>
       );
@@ -62,7 +56,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
   return (
     <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
       <div>
-        {featureFlags.SUCCESSOR_MARKETS && (
+        {FLAGS.SUCCESSOR_MARKETS && (
           <>
             <MarketSuccessorBanner market={market} />
             <MarketSuccessorProposalBanner marketId={market?.id} />
@@ -149,7 +143,7 @@ const useViewLabel = (view: TradingView) => {
   const t = useT();
 
   const labels = {
-    chart: t('Chart'),
+    candles: t('Candles'),
     depth: t('Depth'),
     liquidity: t('Liquidity'),
     funding: t('Funding'),

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

@@ -1,4 +1,8 @@
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
+import {
+  CandlesChartContainer,
+  CandlesMenu,
+} from '@vegaprotocol/candles-chart';
 import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
 import { TradesContainer } from '../../components/trades-container';
 import { OrderbookContainer } from '../../components/orderbook-container';
@@ -12,14 +16,13 @@ import { OrdersContainer } from '../../components/orders-container';
 import { StopOrdersContainer } from '../../components/stop-orders-container';
 import { AccountsMenu } from '../../components/accounts-menu';
 import { PositionsMenu } from '../../components/positions-menu';
-import { ChartContainer, ChartMenu } from '../../components/chart-container';
 
 export type TradingView = keyof typeof TradingViews;
 
 export const TradingViews = {
-  chart: {
-    component: ChartContainer,
-    menu: ChartMenu,
+  candles: {
+    component: CandlesChartContainer,
+    menu: CandlesMenu,
   },
   depth: {
     component: DepthChartContainer,

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

@@ -15,7 +15,6 @@ import {
   useLinks,
 } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 export const MarketsPage = () => {
   const t = useT();
@@ -35,9 +34,7 @@ export const MarketsPage = () => {
       <div className="h-full my-1 border rounded-sm border-default">
         <Tabs storageKey="console-markets">
           <Tab id="open-markets" name={t('Open markets')}>
-            <ErrorBoundary feature="markets-open">
-              <OpenMarkets />
-            </ErrorBoundary>
+            <OpenMarkets />
           </Tab>
           <Tab
             id="proposed-markets"
@@ -52,14 +49,10 @@ export const MarketsPage = () => {
               </TradingAnchorButton>
             }
           >
-            <ErrorBoundary feature="markets-proposed">
-              <Proposed />
-            </ErrorBoundary>
+            <Proposed />
           </Tab>
           <Tab id="closed-markets" name={t('Closed markets')}>
-            <ErrorBoundary feature="markets-closed">
-              <Closed />
-            </ErrorBoundary>
+            <Closed />
           </Tab>
         </Tabs>
       </div>

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

@@ -25,7 +25,6 @@ import { DepositsMenu } from '../../components/deposits-menu';
 import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -73,29 +72,19 @@ export const Portfolio = () => {
                 name={t('Positions')}
                 menu={<PositionsMenu />}
               >
-                <ErrorBoundary feature="portfolio-positions">
-                  <PositionsContainer allKeys />
-                </ErrorBoundary>
+                <PositionsContainer allKeys />
               </Tab>
               <Tab id="orders" name={t('Orders')}>
-                <ErrorBoundary feature="portfolio-orders">
-                  <OrdersContainer />
-                </ErrorBoundary>
+                <OrdersContainer />
               </Tab>
               <Tab id="fills" name={t('Fills')}>
-                <ErrorBoundary feature="portfolio-fills">
-                  <FillsContainer />
-                </ErrorBoundary>
+                <FillsContainer />
               </Tab>
               <Tab id="funding-payments" name={t('Funding payments')}>
-                <ErrorBoundary feature="portfolio-funding-payments">
-                  <FundingPaymentsContainer />
-                </ErrorBoundary>
+                <FundingPaymentsContainer />
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
-                <ErrorBoundary feature="portfolio-ledger">
-                  <LedgerContainer />
-                </ErrorBoundary>
+                <LedgerContainer />
               </Tab>
             </Tabs>
           </PortfolioGridChild>
@@ -112,14 +101,10 @@ export const Portfolio = () => {
                 name={t('Collateral')}
                 menu={<AccountsMenu />}
               >
-                <ErrorBoundary feature="portfolio-accounts">
-                  <AccountsContainer />
-                </ErrorBoundary>
+                <AccountsContainer />
               </Tab>
               <Tab id="deposits" name={t('Deposits')} menu={<DepositsMenu />}>
-                <ErrorBoundary feature="portfolio-deposit">
-                  <DepositsContainer />
-                </ErrorBoundary>
+                <DepositsContainer />
               </Tab>
               <Tab
                 id="withdrawals"
@@ -127,9 +112,7 @@ export const Portfolio = () => {
                 indicator={<WithdrawalsIndicator />}
                 menu={<WithdrawalsMenu />}
               >
-                <ErrorBoundary feature="portfolio-deposit">
-                  <WithdrawalsContainer />
-                </ErrorBoundary>
+                <WithdrawalsContainer />
               </Tab>
             </Tabs>
           </PortfolioGridChild>

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -13,40 +13,15 @@ import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { RainbowButton } from './buttons';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { useIsInReferralSet, useReferral } from './hooks/use-referral';
+import { useReferral } from './hooks/use-referral';
 import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
 import { Statistics, useStats } from './referral-statistics';
 import { useReferralProgram } from './hooks/use-referral-program';
-import { ns, useT } from '../../lib/use-t';
-import { useFundsAvailable } from './hooks/use-funds-available';
-import { ViewType, useSidebar } from '../../components/sidebar';
-import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-import { QUSDTooltip } from './qusd-tooltip';
-import { Trans } from 'react-i18next';
+import { useT } from '../../lib/use-t';
 
 const RELOAD_DELAY = 3000;
 
-const SPAM_PROTECTION_ERR = 'SPAM_PROTECTION_ERR';
-const SpamProtectionErr = ({
-  requiredFunds,
-}: {
-  requiredFunds?: string | number | bigint;
-}) => {
-  if (!requiredFunds) return null;
-  // eslint-disable-next-line react/jsx-no-undef
-  return (
-    <Trans
-      defaults="To protect the network from spam, you must have at least {{requiredFunds}} <0>qUSD</0> of any asset on the network to proceed."
-      values={{
-        requiredFunds,
-      }}
-      components={[<QUSDTooltip key="qusd" />]}
-      ns={ns}
-    />
-  );
-};
-
 const validateCode = (value: string, t: ReturnType<typeof useT>) => {
   const number = +`0x${value}`;
   if (!value || value.length !== 64) {
@@ -57,23 +32,20 @@ const validateCode = (value: string, t: ReturnType<typeof useT>) => {
   return true;
 };
 
-export const ApplyCodeFormContainer = ({
-  onSuccess,
-}: {
-  onSuccess?: () => void;
-}) => {
+export const ApplyCodeFormContainer = () => {
   const { pubKey } = useVegaWallet();
-  const isInReferralSet = useIsInReferralSet(pubKey);
+  const { data: referee } = useReferral({ pubKey, role: 'referee' });
+  const { data: referrer } = useReferral({ pubKey, role: 'referrer' });
 
-  // Navigate to the index page when already in the referral set.
-  if (isInReferralSet) {
+  // go to main page if the current pubkey is already a referrer or referee
+  if (referee || referrer) {
     return <Navigate to={Routes.REFERRALS} />;
   }
 
-  return <ApplyCodeForm onSuccess={onSuccess} />;
+  return <ApplyCodeForm />;
 };
 
-export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
+export const ApplyCodeForm = () => {
   const t = useT();
   const program = useReferralProgram();
   const navigate = useNavigate();
@@ -82,15 +54,10 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   );
 
   const [status, setStatus] = useState<
-    'requested' | 'no-funds' | 'successful' | null
+    'requested' | 'failed' | 'successful' | null
   >(null);
   const txHash = useRef<string | null>(null);
   const { isReadOnly, pubKey, sendTx } = useVegaWallet();
-  const { isEligible, requiredFunds } = useFundsAvailable();
-
-  const currentRouteId = useGetCurrentRouteId();
-  const setViews = useSidebar((s) => s.setViews);
-
   const {
     register,
     handleSubmit,
@@ -106,17 +73,6 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
     code: validateCode(codeField, t) ? codeField : undefined,
   });
 
-  /**
-   * Validates if a connected party can apply a code (min funds span protection)
-   */
-  const validateFundsAvailable = useCallback(() => {
-    if (requiredFunds && !isEligible) {
-      const err = SPAM_PROTECTION_ERR;
-      return err;
-    }
-    return true;
-  }, [isEligible, requiredFunds]);
-
   /**
    * Validates the set a user tries to apply to.
    */
@@ -140,15 +96,6 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
     if (code) setValue('code', code);
   }, [params, setValue]);
 
-  useEffect(() => {
-    const err = validateFundsAvailable();
-    if (err !== true) {
-      setStatus('no-funds');
-    } else {
-      setStatus(null);
-    }
-  }, [isEligible, validateFundsAvailable]);
-
   const onSubmit = ({ code }: FieldValues) => {
     if (isReadOnly || !pubKey || !code || code.length === 0) {
       return;
@@ -220,11 +167,10 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   useEffect(() => {
     if (status === 'successful') {
       setTimeout(() => {
-        if (onSuccess) onSuccess();
         navigate(Routes.REFERRALS);
       }, RELOAD_DELAY);
     }
-  }, [navigate, onSuccess, status]);
+  }, [navigate, status]);
 
   // show "code applied" message when successfully applied
   if (status === 'successful') {
@@ -261,18 +207,6 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
       };
     }
 
-    if (status === 'no-funds') {
-      return {
-        disabled: false,
-        children: t('Deposit funds'),
-        type: 'button' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
-        onClick: ((event) => {
-          event.preventDefault();
-          setViews({ type: ViewType.Deposit }, currentRouteId);
-        }) as MouseEventHandler,
-      };
-    }
-
     if (status === 'requested') {
       return {
         disabled: true,
@@ -302,9 +236,7 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
           {t('Apply a referral code')}
         </h3>
         <p className="mb-4 text-center text-base">
-          {t(
-            'Apply a referral code to access the discount benefits of the current program.'
-          )}
+          {t('Enter a referral code to get trading discounts.')}
         </p>
         <form
           className={classNames('flex w-full flex-col gap-4', {
@@ -319,10 +251,8 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
               {...register('code', {
                 required: t('You have to provide a code to apply it.'),
                 validate: (value) => {
-                  const codeErr = validateCode(value, t);
-                  if (codeErr !== true) return codeErr;
-                  const fundsErr = validateFundsAvailable();
-                  if (fundsErr !== true) return fundsErr;
+                  const err = validateCode(value, t);
+                  if (err !== true) return err;
                   return validateSet();
                 },
               })}
@@ -332,26 +262,10 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
           </label>
           <RainbowButton variant="border" {...getButtonProps()} />
         </form>
-        {status === 'no-funds' ? (
-          <InputError intent="warning" className="overflow-auto break-words">
-            <span>
-              <SpamProtectionErr requiredFunds={requiredFunds?.toString()} />
-            </span>
+        {errors.code && (
+          <InputError className="overflow-auto break-words">
+            {errors.code.message?.toString()}
           </InputError>
-        ) : (
-          errors.code && (
-            <InputError intent="warning" className="overflow-auto break-words">
-              {errors.code.message === SPAM_PROTECTION_ERR ? (
-                <span>
-                  <SpamProtectionErr
-                    requiredFunds={requiredFunds?.toString()}
-                  />
-                </span>
-              ) : (
-                errors.code.message?.toString()
-              )}
-            </InputError>
-          )
         )}
       </div>
       {validateCode(codeField, t) === true && previewLoading && !previewData ? (

apps/trading/client-pages/referrals/constants.ts

@@ -6,8 +6,6 @@ export const SKY_BACKGROUND =
   'bg-[url(/sky-light.png)] dark:bg-[url(/sky-dark.png)] bg-[40%_0px] bg-[length:1440px] bg-no-repeat bg-local';
 
 // TODO: Update the links to use the correct referral related pages
-export const REFERRAL_DOCS_LINK =
-  'https://docs.vega.xyz/mainnet/concepts/trading-on-vega/discounts-rewards#referral-program';
-export const ABOUT_REFERRAL_DOCS_LINK =
-  'https://docs.vega.xyz/mainnet/concepts/trading-on-vega/discounts-rewards#referral-program';
+export const REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
+export const ABOUT_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
 export const DISCLAIMER_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';

apps/trading/client-pages/referrals/create-code-form.tsx

@@ -19,22 +19,14 @@ import {
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
 import { useStakeAvailable } from './hooks/use-stake-available';
-import { ABOUT_REFERRAL_DOCS_LINK } from './constants';
-import { useIsInReferralSet, useReferral } from './hooks/use-referral';
+import {
+  ABOUT_REFERRAL_DOCS_LINK,
+  DISCLAIMER_REFERRAL_DOCS_LINK,
+} from './constants';
+import { useReferral } from './hooks/use-referral';
 import { useT } from '../../lib/use-t';
-import { Navigate } from 'react-router-dom';
-import { Routes } from '../../lib/links';
-import { useReferralProgram } from './hooks/use-referral-program';
 
 export const CreateCodeContainer = () => {
-  const { pubKey } = useVegaWallet();
-  const isInReferralSet = useIsInReferralSet(pubKey);
-
-  // Navigate to the index page when already in the referral set.
-  if (isInReferralSet) {
-    return <Navigate to={Routes.REFERRALS} />;
-  }
-
   return <CreateCodeForm />;
 };
 
@@ -56,7 +48,7 @@ export const CreateCodeForm = () => {
       </h3>
       <p className="mb-4 text-center text-base">
         {t(
-          'Generate a referral code to share with your friends and access the commission benefits of the current program.'
+          'Generate a referral code to share with your friends and start earning commission.'
         )}
       </p>
 
@@ -106,7 +98,10 @@ const CreateCodeDialog = ({
   const { stakeAvailable: currentStakeAvailable, requiredStake } =
     useStakeAvailable();
 
-  const { details: programDetails } = useReferralProgram();
+  const { data: referralSets } = useReferral({
+    pubKey,
+    role: 'referrer',
+  });
 
   const onSubmit = () => {
     if (isReadOnly || !pubKey) {
@@ -206,7 +201,7 @@ const CreateCodeDialog = ({
     );
   }
 
-  if (!programDetails) {
+  if (!referralSets) {
     return (
       <div className="flex flex-col gap-4">
         {(status === 'idle' || status === 'loading' || status === 'error') && (
@@ -242,9 +237,7 @@ const CreateCodeDialog = ({
           intent={Intent.Primary}
           onClick={() => onSubmit()}
           {...getButtonProps()}
-        >
-          {t('Yes')}
-        </TradingButton>
+        ></TradingButton>
         {status === 'idle' && (
           <TradingButton
             fill={true}
@@ -262,6 +255,9 @@ const CreateCodeDialog = ({
           <ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
             {t('About the referral program')}
           </ExternalLink>
+          <ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
+            {t('Disclaimer')}
+          </ExternalLink>
         </div>
       </div>
     );
@@ -272,7 +268,7 @@ const CreateCodeDialog = ({
       {(status === 'idle' || status === 'loading' || status === 'error') && (
         <p>
           {t(
-            'Generate a referral code to share with your friends and access the commission benefits of the current program.'
+            'Generate a referral code to share with your friends and start earning commission.'
           )}
         </p>
       )}
@@ -303,6 +299,9 @@ const CreateCodeDialog = ({
         <ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
           {t('About the referral program')}
         </ExternalLink>
+        <ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
+          {t('Disclaimer')}
+        </ExternalLink>
       </div>
     </div>
   );

apps/trading/client-pages/referrals/error-boundary.tsx

@@ -53,7 +53,7 @@ export const NotFound = () => {
   const navigate = useNavigate();
 
   return (
-    <LayoutWithSky className="pt-32">
+    <div className="pt-32">
       <div
         aria-hidden
         className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
@@ -75,6 +75,6 @@ export const NotFound = () => {
           {t('Go back and try again')}
         </RainbowButton>
       </p>
-    </LayoutWithSky>
+    </div>
   );
 };

apps/trading/client-pages/referrals/hooks/FundsAvailable.graphql

@@ -1,20 +0,0 @@
-query FundsAvailable($partyId: ID!) {
-  party(id: $partyId) {
-    accountsConnection {
-      edges {
-        node {
-          balance
-          asset {
-            decimals
-            symbol
-            id
-          }
-        }
-      }
-    }
-  }
-  networkParameter(key: "spam.protection.applyReferral.min.funds") {
-    key
-    value
-  }
-}

apps/trading/client-pages/referrals/hooks/__generated__/FundsAvailable.ts

@@ -1,63 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type FundsAvailableQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type FundsAvailableQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', balance: string, asset: { __typename?: 'Asset', decimals: number, symbol: string, id: string } } } | null> | null } | null } | null, networkParameter?: { __typename?: 'NetworkParameter', key: string, value: string } | null };
-
-
-export const FundsAvailableDocument = gql`
-    query FundsAvailable($partyId: ID!) {
-  party(id: $partyId) {
-    accountsConnection {
-      edges {
-        node {
-          balance
-          asset {
-            decimals
-            symbol
-            id
-          }
-        }
-      }
-    }
-  }
-  networkParameter(key: "spam.protection.applyReferral.min.funds") {
-    key
-    value
-  }
-}
-    `;
-
-/**
- * __useFundsAvailableQuery__
- *
- * To run a query within a React component, call `useFundsAvailableQuery` and pass it any options that fit your needs.
- * When your component renders, `useFundsAvailableQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useFundsAvailableQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function useFundsAvailableQuery(baseOptions: Apollo.QueryHookOptions<FundsAvailableQuery, FundsAvailableQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<FundsAvailableQuery, FundsAvailableQueryVariables>(FundsAvailableDocument, options);
-      }
-export function useFundsAvailableLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FundsAvailableQuery, FundsAvailableQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<FundsAvailableQuery, FundsAvailableQueryVariables>(FundsAvailableDocument, options);
-        }
-export type FundsAvailableQueryHookResult = ReturnType<typeof useFundsAvailableQuery>;
-export type FundsAvailableLazyQueryHookResult = ReturnType<typeof useFundsAvailableLazyQuery>;
-export type FundsAvailableQueryResult = Apollo.QueryResult<FundsAvailableQuery, FundsAvailableQueryVariables>;

apps/trading/client-pages/referrals/hooks/use-funds-available.ts

@@ -1,48 +0,0 @@
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useFundsAvailableQuery } from './__generated__/FundsAvailable';
-import compact from 'lodash/compact';
-import BigNumber from 'bignumber.js';
-
-/**
- * Gets the funds for given public key and required min for
- * the referral program.
- *
- * (Uses currently connected public key if left empty)
- */
-export const useFundsAvailable = (pubKey?: string) => {
-  const { pubKey: currentPubKey } = useVegaWallet();
-  const partyId = pubKey || currentPubKey;
-  const { data, stopPolling } = useFundsAvailableQuery({
-    variables: { partyId: partyId || '' },
-    skip: !partyId,
-    fetchPolicy: 'network-only',
-    errorPolicy: 'ignore',
-    pollInterval: 5000,
-  });
-
-  const fundsAvailable = data
-    ? compact(data.party?.accountsConnection?.edges?.map((e) => e?.node))
-    : undefined;
-  const requiredFunds = data
-    ? BigNumber(data.networkParameter?.value || '0')
-    : undefined;
-
-  const sumOfFunds =
-    fundsAvailable
-      ?.filter((fa) => fa.balance)
-      .reduce((sum, fa) => sum.plus(BigNumber(fa.balance)), BigNumber(0)) ||
-    BigNumber(0);
-
-  if (requiredFunds && sumOfFunds.isGreaterThanOrEqualTo(requiredFunds)) {
-    stopPolling();
-  }
-
-  return {
-    fundsAvailable,
-    requiredFunds,
-    isEligible:
-      fundsAvailable != null &&
-      requiredFunds != null &&
-      sumOfFunds.isGreaterThanOrEqualTo(requiredFunds),
-  };
-};

apps/trading/client-pages/referrals/hooks/use-referral-program.ts

@@ -1,8 +1,14 @@
 import { getNumberFormat } from '@vegaprotocol/utils';
+import { addDays } from 'date-fns';
 import sortBy from 'lodash/sortBy';
 import omit from 'lodash/omit';
 import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';
-import BigNumber from 'bignumber.js';
+
+const STAKING_TIERS_MAPPING: Record<number, string> = {
+  1: 'Tradestarter',
+  2: 'Mid level degen',
+  3: 'Reward hoarder',
+};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const MOCK = {
@@ -10,76 +16,46 @@ const MOCK = {
     currentReferralProgram: {
       id: 'abc',
       version: 1,
+      endOfProgramTimestamp: addDays(new Date(), 10).toISOString(),
+      windowLength: 10,
       benefitTiers: [
         {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '100000',
-          referralDiscountFactor: '0.1',
+          minimumEpochs: 5,
+          minimumRunningNotionalTakerVolume: '30000',
+          referralDiscountFactor: '0.01',
+          referralRewardFactor: '0.01',
+        },
+        {
+          minimumEpochs: 5,
+          minimumRunningNotionalTakerVolume: '20000',
+          referralDiscountFactor: '0.05',
           referralRewardFactor: '0.05',
         },
         {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '1000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.075',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '5000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.1',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '25000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.125',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '75000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.15',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '150000000',
-          referralDiscountFactor: '0.07',
-          referralRewardFactor: '0.175',
+          minimumEpochs: 5,
+          minimumRunningNotionalTakerVolume: '10000',
+          referralDiscountFactor: '0.001',
+          referralRewardFactor: '0.001',
         },
       ],
       stakingTiers: [
         {
-          minimumStakedTokens: '100000000000000000000',
-          referralRewardMultiplier: '1.025',
+          minimumStakedTokens: '10000',
+          referralRewardMultiplier: '1',
         },
         {
-          minimumStakedTokens: '1000000000000000000000',
-          referralRewardMultiplier: '1.05',
+          minimumStakedTokens: '20000',
+          referralRewardMultiplier: '2',
         },
         {
-          minimumStakedTokens: '5000000000000000000000',
-          referralRewardMultiplier: '1.1',
-        },
-        {
-          minimumStakedTokens: '50000000000000000000000',
-          referralRewardMultiplier: '1.2',
-        },
-        {
-          minimumStakedTokens: '250000000000000000000000',
-          referralRewardMultiplier: '1.25',
-        },
-        {
-          minimumStakedTokens: '500000000000000000000000',
-          referralRewardMultiplier: '1.3',
+          minimumStakedTokens: '30000',
+          referralRewardMultiplier: '3',
         },
       ],
-      endOfProgramTimestamp: '2024-12-31T01:00:00Z',
-      windowLength: 30,
     },
-    loading: false,
-    error: undefined,
   },
+  loading: false,
+  error: undefined,
 };
 
 export const useReferralProgram = () => {
@@ -103,9 +79,9 @@ export const useReferralProgram = () => {
     return {
       tier: i + 1, // sorted in asc order, hence first is the lowest tier
       rewardFactor: Number(t.referralRewardFactor),
-      commission: BigNumber(t.referralRewardFactor).times(100).toFixed(2) + '%',
+      commission: Number(t.referralRewardFactor) * 100 + '%',
       discountFactor: Number(t.referralDiscountFactor),
-      discount: BigNumber(t.referralDiscountFactor).times(100).toFixed(2) + '%',
+      discount: Number(t.referralDiscountFactor) * 100 + '%',
       minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
       volume: getNumberFormat(0).format(
         Number(t.minimumRunningNotionalTakerVolume)
@@ -114,11 +90,13 @@ export const useReferralProgram = () => {
     };
   });
 
-  const stakingTiers = sortBy(data.currentReferralProgram.stakingTiers, (t) =>
-    parseFloat(t.referralRewardMultiplier)
+  const stakingTiers = sortBy(
+    data.currentReferralProgram.stakingTiers,
+    (t) => t.referralRewardMultiplier
   ).map((t, i) => {
     return {
       tier: i + 1,
+      label: STAKING_TIERS_MAPPING[i + 1],
       ...t,
     };
   });

apps/trading/client-pages/referrals/hooks/use-referral-toasts.tsx

@@ -75,7 +75,10 @@ export const useReferralToasts = () => {
                 data-testid="toast-apply-code"
                 size="xs"
                 onClick={() => {
-                  const matched = matchPath(Routes.REFERRALS, pathname);
+                  const matched = matchPath(
+                    Routes.REFERRALS_APPLY_CODE,
+                    pathname
+                  );
                   if (!matched) navigate(Routes.REFERRALS_APPLY_CODE);
                   updateToast(NON_ELIGIBLE_REFERRAL_SET_TOAST_ID + epoch, {
                     hidden: true,

apps/trading/client-pages/referrals/hooks/use-referral.ts

@@ -2,10 +2,7 @@ import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { useCallback } from 'react';
 import { useRefereesQuery } from './__generated__/Referees';
 import compact from 'lodash/compact';
-import type {
-  ReferralSetsQuery,
-  ReferralSetsQueryVariables,
-} from './__generated__/ReferralSets';
+import type { ReferralSetsQueryVariables } from './__generated__/ReferralSets';
 import { useReferralSetsQuery } from './__generated__/ReferralSets';
 import { useStakeAvailable } from './use-stake-available';
 
@@ -121,36 +118,3 @@ export const useReferral = (args: UseReferralArgs) => {
     refetch,
   };
 };
-
-const retrieveReferralSetData = (data: ReferralSetsQuery | undefined) =>
-  data?.referralSets.edges && data.referralSets.edges.length > 0
-    ? data.referralSets.edges[0]?.node
-    : undefined;
-
-export const useIsInReferralSet = (pubKey: string | null) => {
-  const [asRefereeVariables, asRefereeSkip] = prepareVariables({
-    pubKey,
-    role: 'referee',
-  });
-  const [asReferrerVariables, asReferrerSkip] = prepareVariables({
-    pubKey,
-    role: 'referrer',
-  });
-
-  const { data: asRefereeData } = useReferralSetsQuery({
-    variables: asRefereeVariables,
-    skip: asRefereeSkip,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  const { data: asReferrerData } = useReferralSetsQuery({
-    variables: asReferrerVariables,
-    skip: asReferrerSkip,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  return Boolean(
-    retrieveReferralSetData(asRefereeData) ||
-      retrieveReferralSetData(asReferrerData)
-  );
-};

apps/trading/client-pages/referrals/hooks/use-stake-available.ts

@@ -13,6 +13,7 @@ export const useStakeAvailable = (pubKey?: string) => {
   const { data } = useStakeAvailableQuery({
     variables: { partyId: partyId || '' },
     skip: !partyId,
+    // TODO: remove when network params available
     errorPolicy: 'ignore',
   });
 

apps/trading/client-pages/referrals/landing-banner.tsx

@@ -15,16 +15,11 @@ export const LandingBanner = () => {
         </div>
         <div className="pt-20 sm:w-[50%]">
           <h1 className="text-6xl font-alpha calt mb-10">
-            {t('Vega community referrals')}
+            {t('Earn commission & stake rewards')}
           </h1>
-          <p className="text-lg mb-1">
-            {t(
-              'Referral programs can be proposed and created via community governance.'
-            )}
-          </p>
           <p className="text-lg mb-10">
             {t(
-              'Once live, users can generate referral codes to share with their friends and earn commission on their trades, while referred traders can access fee discounts based on the running volume of the group.'
+              'Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
             )}
           </p>
         </div>

apps/trading/client-pages/referrals/qusd-tooltip.tsx

@@ -1,28 +0,0 @@
-import { DocsLinks } from '@vegaprotocol/environment';
-import { ExternalLink, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { useT } from '../../lib/use-t';
-
-export const QUSDTooltip = () => {
-  const t = useT();
-  return (
-    <Tooltip
-      description={
-        <>
-          <p className="mb-1">
-            {t(
-              'qUSD provides a rough USD equivalent of balances across all assets using the value of "Quantum" for that asset'
-            )}
-          </p>
-          {DocsLinks && (
-            <ExternalLink href={DocsLinks.QUANTUM}>
-              {t('Find out more')}
-            </ExternalLink>
-          )}
-        </>
-      }
-      underline={true}
-    >
-      <span>{t('qUSD')}</span>
-    </Tooltip>
-  );
-};

apps/trading/client-pages/referrals/referral-statistics.spec.tsx

@@ -275,34 +275,30 @@ jest.mock('@vegaprotocol/wallet', () => {
 });
 
 describe('ReferralStatistics', () => {
-  it('displays apply code when no data has been found for given pubkey', () => {
+  it('displays create code when no data has been found for given pubkey', () => {
     const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider mocks={[]} showWarnings={false}>
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
+      <MockedProvider mocks={[]} showWarnings={false}>
+        <ReferralStatistics />
+      </MockedProvider>
     );
 
-    expect(queryByTestId('referral-apply-code-form')).toBeInTheDocument();
+    expect(queryByTestId('referral-create-code-form')).toBeInTheDocument();
   });
 
   it('displays referrer stats when given pubkey is a referrer', async () => {
     const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider
-          mocks={[
-            programMock,
-            referralSetAsReferrerMock,
-            noReferralSetAsRefereeMock,
-            stakeAvailableMock,
-            refereesMock,
-          ]}
-          showWarnings={false}
-        >
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
+      <MockedProvider
+        mocks={[
+          programMock,
+          referralSetAsReferrerMock,
+          noReferralSetAsRefereeMock,
+          stakeAvailableMock,
+          refereesMock,
+        ]}
+        showWarnings={false}
+      >
+        <ReferralStatistics />
+      </MockedProvider>
     );
 
     await waitFor(() => {

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -4,10 +4,13 @@ import {
   VegaIcon,
   VegaIconNames,
   truncateMiddle,
+  ExternalLink,
+  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { DEFAULT_AGGREGATION_DAYS, useReferral } from './hooks/use-referral';
+import { CreateCodeContainer } from './create-code-form';
 import classNames from 'classnames';
 import { Table } from './table';
 import {
@@ -23,39 +26,34 @@ import compact from 'lodash/compact';
 import { useReferralProgram } from './hooks/use-referral-program';
 import { useStakeAvailable } from './hooks/use-stake-available';
 import sortBy from 'lodash/sortBy';
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
+import { DocsLinks } from '@vegaprotocol/environment';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
-import { ApplyCodeForm, ApplyCodeFormContainer } from './apply-code-form';
-import { QUSDTooltip } from './qusd-tooltip';
+import { ApplyCodeForm } from './apply-code-form';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
 
   const program = useReferralProgram();
 
-  const { data: referee, refetch: refereeRefetch } = useReferral({
+  const { data: referee } = useReferral({
     pubKey,
     role: 'referee',
     aggregationEpochs: program.details?.windowLength,
   });
-  const { data: referrer, refetch: referrerRefetch } = useReferral({
+  const { data: referrer } = useReferral({
     pubKey,
     role: 'referrer',
     aggregationEpochs: program.details?.windowLength,
   });
 
-  const refetch = useCallback(() => {
-    refereeRefetch();
-    referrerRefetch();
-  }, [refereeRefetch, referrerRefetch]);
-
   if (referee?.code) {
     return (
       <>
-        <Statistics data={referee} program={program} as="referee" />
+        <Statistics data={referee} program={program} as="referee" />;
         {!referee.isEligible && <ApplyCodeForm />}
       </>
     );
@@ -64,13 +62,13 @@ export const ReferralStatistics = () => {
   if (referrer?.code) {
     return (
       <>
-        <Statistics data={referrer} program={program} as="referrer" />
+        <Statistics data={referrer} program={program} as="referrer" />;
         <RefereesTable data={referrer} program={program} />
       </>
     );
   }
 
-  return <ApplyCodeFormContainer onSuccess={refetch} />;
+  return <CreateCodeContainer />;
 };
 
 export const useStats = ({
@@ -83,9 +81,7 @@ export const useStats = ({
   as?: 'referrer' | 'referee';
 }) => {
   const { benefitTiers } = program;
-  const { data: epochData } = useCurrentEpochInfoQuery({
-    fetchPolicy: 'network-only',
-  });
+  const { data: epochData } = useCurrentEpochInfoQuery();
   const { data: statsData } = useReferralSetStatsQuery({
     variables: {
       code: data?.code || '',
@@ -119,7 +115,7 @@ export const useStats = ({
     : 1;
   const finalCommissionValue = isNaN(multiplier)
     ? baseCommissionValue
-    : new BigNumber(multiplier).times(baseCommissionValue).toNumber();
+    : multiplier * baseCommissionValue;
 
   const discountFactorValue = refereeStats?.discountFactor
     ? Number(refereeStats.discountFactor)
@@ -178,7 +174,6 @@ export const Statistics = ({
     discountFactorValue,
     currentBenefitTierValue,
     epochsValue,
-    nextBenefitTierValue,
     nextBenefitTierVolumeValue,
     nextBenefitTierEpochsValue,
   } = useStats({ data, program, as });
@@ -212,8 +207,6 @@ export const Statistics = ({
           ).toString(),
         }
       )}
-      testId="base-commission-rate"
-      overrideWithNoProgram={!details}
     >
       {baseCommissionValue * 100}%
     </StatTile>
@@ -222,7 +215,6 @@ export const Statistics = ({
   const stakingMultiplierTile = (
     <StatTile
       title={t('Staking multiplier')}
-      testId="staking-multiplier"
       description={
         <span
           className={classNames({
@@ -237,36 +229,27 @@ export const Statistics = ({
           })}
         </span>
       }
-      overrideWithNoProgram={!details}
     >
       {multiplier || t('None')}
     </StatTile>
   );
-  const baseCommissionFormatted = BigNumber(baseCommissionValue)
-    .times(100)
-    .toString();
-  const finalCommissionFormatted = new BigNumber(finalCommissionValue)
-    .times(100)
-    .toString();
   const finalCommissionTile = (
     <StatTile
       title={t('Final commission rate')}
       description={
         !isNaN(multiplier)
-          ? `(${baseCommissionFormatted}% ⨉ ${multiplier} = ${finalCommissionFormatted}%)`
+          ? `(${baseCommissionValue * 100}% ⨉ ${multiplier} = ${
+              finalCommissionValue * 100
+            }%)`
           : undefined
       }
-      testId="final-commission-rate"
-      overrideWithNoProgram={!details}
     >
-      {finalCommissionFormatted}%
+      {finalCommissionValue * 100}%
     </StatTile>
   );
   const numberOfTradersValue = data.referees.length;
   const numberOfTradersTile = (
-    <StatTile title={t('Number of traders')} testId="number-of-traders">
-      {numberOfTradersValue}
-    </StatTile>
+    <StatTile title={t('Number of traders')}>{numberOfTradersValue}</StatTile>
   );
 
   const codeTile = (
@@ -281,8 +264,6 @@ export const Statistics = ({
       title={t('myVolume', 'My volume (last {{count}} epochs)', {
         count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
       })}
-      testId="my-volume"
-      overrideWithNoProgram={!details}
     >
       {compactNumFormat.format(referrerVolumeValue)}
     </StatTile>
@@ -293,11 +274,10 @@ export const Statistics = ({
     .reduce((all, r) => all.plus(r), new BigNumber(0));
   const totalCommissionTile = (
     <StatTile
-      title={t('totalCommission', 'Total commission (last {{count}} epochs)', {
+      title={t('totalCommission', 'Total commission (last {{count}}} epochs)', {
         count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
       })}
       description={<QUSDTooltip />}
-      testId="total-commission"
     >
       {getNumberFormat(0).format(Number(totalCommissionValue))}
     </StatTile>
@@ -321,30 +301,15 @@ export const Statistics = ({
   );
 
   const currentBenefitTierTile = (
-    <StatTile
-      title={t('Current tier')}
-      testId="current-tier"
-      description={
-        nextBenefitTierValue?.tier
-          ? t('(Next tier: {{nextTier}})', {
-              nextTier: nextBenefitTierValue?.tier,
-            })
-          : undefined
-      }
-      overrideWithNoProgram={!details}
-    >
+    <StatTile title={t('Current tier')}>
       {isApplyCodePreview
         ? currentBenefitTierValue?.tier || benefitTiers[0]?.tier || 'None'
         : currentBenefitTierValue?.tier || 'None'}
     </StatTile>
   );
   const discountFactorTile = (
-    <StatTile
-      title={t('Discount')}
-      testId="discount"
-      overrideWithNoProgram={!details}
-    >
-      {isApplyCodePreview && benefitTiers.length >= 1
+    <StatTile title={t('Discount')}>
+      {isApplyCodePreview
         ? benefitTiers[0].discountFactor * 100
         : discountFactorValue * 100}
       %
@@ -359,34 +324,22 @@ export const Statistics = ({
           count: details?.windowLength,
         }
       )}
-      testId="combined-volume"
-      overrideWithNoProgram={!details}
     >
       {compactNumFormat.format(runningVolumeValue)}
     </StatTile>
   );
   const epochsTile = (
-    <StatTile title={t('Epochs in set')} testId="epochs-in-set">
-      {epochsValue}
-    </StatTile>
+    <StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
   );
   const nextTierVolumeTile = (
-    <StatTile
-      title={t('Volume to next tier')}
-      testId="vol-to-next-tier"
-      overrideWithNoProgram={!details}
-    >
+    <StatTile title={t('Volume to next tier')}>
       {nextBenefitTierVolumeValue <= 0
         ? '0'
         : compactNumFormat.format(nextBenefitTierVolumeValue)}
     </StatTile>
   );
   const nextTierEpochsTile = (
-    <StatTile
-      title={t('Epochs to next tier')}
-      testId="epochs-to-next-tier"
-      overrideWithNoProgram={!details}
-    >
+    <StatTile title={t('Epochs to next tier')}>
       {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
     </StatTile>
   );
@@ -508,7 +461,6 @@ export const RefereesTable = ({
                         count:
                           details?.windowLength || DEFAULT_AGGREGATION_DAYS,
                       }}
-                      components={[<QUSDTooltip key="qusd" />]}
                       ns={ns}
                     />
                   ),
@@ -540,3 +492,28 @@ export const RefereesTable = ({
     </>
   );
 };
+
+export const QUSDTooltip = () => {
+  const t = useT();
+  return (
+    <Tooltip
+      description={
+        <>
+          <p className="mb-1">
+            {t(
+              'qUSD provides a rough USD equivalent of balances across all assets using the value of "Quantum" for that asset'
+            )}
+          </p>
+          {DocsLinks && (
+            <ExternalLink href={DocsLinks.QUANTUM}>
+              {t('Find out more')}
+            </ExternalLink>
+          )}
+        </>
+      }
+      underline={true}
+    >
+      <span>{t('qUSD')}</span>
+    </Tooltip>
+  );
+};

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

@@ -4,10 +4,11 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
+import { HowItWorksTable } from './how-it-works-table';
 import { LandingBanner } from './landing-banner';
 import { TiersContainer } from './tiers';
 import { TabLink } from './buttons';
-import { Outlet, useMatch } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { Routes } from '../../lib/links';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
@@ -17,17 +18,15 @@ import { usePageTitleStore } from '../../stores';
 import { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 const Nav = () => {
   const t = useT();
-  const match = useMatch(Routes.REFERRALS_APPLY_CODE);
   return (
     <div className="flex justify-center border-b border-vega-cdark-500">
-      <TabLink end to={match ? Routes.REFERRALS_APPLY_CODE : Routes.REFERRALS}>
-        {t('Apply code')}
+      <TabLink end to={Routes.REFERRALS}>
+        {t('I want a code')}
       </TabLink>
-      <TabLink to={Routes.REFERRALS_CREATE_CODE}>{t('Create code')}</TabLink>
+      <TabLink to={Routes.REFERRALS_APPLY_CODE}>{t('I have a code')}</TabLink>
     </div>
   );
 };
@@ -66,7 +65,7 @@ export const Referrals = () => {
   }, [updateTitle, t]);
 
   return (
-    <ErrorBoundary feature="referrals">
+    <>
       <LandingBanner />
 
       {showNav && <Nav />}
@@ -96,16 +95,18 @@ export const Referrals = () => {
         <h2 className="text-2xl">{t('How it works')}</h2>
       </div>
       <div className="md:w-[60%] mx-auto">
+        <HowItWorksTable />
         <div className="mt-5">
           <TradingAnchorButton
             className="mx-auto w-max"
             href={REFERRAL_DOCS_LINK}
             target="_blank"
           >
-            {t('Read the docs')} <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+            {t('Read the terms')}{' '}
+            <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
           </TradingAnchorButton>
         </div>
       </div>
-    </ErrorBoundary>
+    </>
   );
 };

apps/trading/client-pages/referrals/tag.tsx

@@ -14,10 +14,8 @@ export const Tag = ({
     className={classNames(
       'w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
       {
-        'border-vega-yellow-550  text-vega-yellow-550 dark:border-vega-yellow-500  dark:text-vega-yellow-500':
-          color === 'yellow',
-        'border-vega-green-550  text-vega-green-550 dark:border-vega-green-500  dark:text-vega-green-500':
-          color === 'green',
+        'border-vega-yellow-500  text-vega-yellow-500': color === 'yellow',
+        'border-vega-green-500  text-vega-green-500': color === 'green',
         'border-vega-blue-500  text-vega-blue-500': color === 'blue',
         'border-vega-purple-500  text-vega-purple-500': color === 'purple',
         'border-vega-pink-500  text-vega-pink-500': color === 'pink',

apps/trading/client-pages/referrals/tiers.tsx

@@ -1,43 +1,20 @@
-import {
-  addDecimalsFormatNumber,
-  getDateTimeFormat,
-} from '@vegaprotocol/utils';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { useReferralProgram } from './hooks/use-referral-program';
 import { Table } from './table';
 import classNames from 'classnames';
 import { BORDER_COLOR, GRADIENT } from './constants';
 import { Tag } from './tag';
 import type { ComponentProps, ReactNode } from 'react';
-import { ExternalLink, truncateMiddle } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import {
   DApp,
   DocsLinks,
-  TOKEN_PROPOSAL,
   TOKEN_PROPOSALS,
   useLinks,
 } from '@vegaprotocol/environment';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
 
-// rainbow-ish order
-const TIER_COLORS: Array<ComponentProps<typeof Tag>['color']> = [
-  'pink',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'purple',
-];
-
-const getTierColor = (tier: number) => {
-  const tiers = Object.keys(TIER_COLORS).length;
-  let index = Math.abs(tier - 1);
-  if (tier >= tiers) {
-    index = index % tiers;
-  }
-  return TIER_COLORS[index];
-};
-
 const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
   <div
     className={classNames(
@@ -51,63 +28,51 @@ const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
 
 const StakingTier = ({
   tier,
+  label,
   referralRewardMultiplier,
   minimumStakedTokens,
 }: {
   tier: number;
+  label: string;
   referralRewardMultiplier: string;
   minimumStakedTokens: string;
 }) => {
   const t = useT();
-  const minimum = addDecimalsFormatNumber(minimumStakedTokens, 18);
-
-  // TODO: Decide what to do with the multiplier images
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const multiplierImage = (
-    <div
-      aria-hidden
-      className={classNames(
-        'w-full max-w-[80px] h-full min-h-[80px]',
-        'bg-cover bg-right-bottom',
-        {
-          "bg-[url('/1x.png')]": tier === 1,
-          "bg-[url('/2x.png')]": tier === 2,
-          "bg-[url('/3x.png')]": tier === 3,
-        }
-      )}
-    >
-      <span className="sr-only">{`${referralRewardMultiplier}x multiplier`}</span>
-    </div>
-  );
-
+  const color: Record<number, ComponentProps<typeof Tag>['color']> = {
+    1: 'green',
+    2: 'blue',
+    3: 'pink',
+  };
   return (
     <div
       className={classNames(
         'overflow-hidden',
         'border rounded-md w-full',
         'flex flex-row',
-        'bg-white dark:bg-vega-cdark-900',
         GRADIENT,
         BORDER_COLOR
       )}
     >
-      <div
-        className={classNames(
-          'p-3 flex flex-row min-h-[80px] h-full items-center'
+      <div aria-hidden className="max-w-[120px]">
+        {tier < 4 && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={`/${tier}x.png`}
+            alt={`${referralRewardMultiplier}x multiplier`}
+            width={240}
+            height={240}
+            className="w-full h-full"
+          />
         )}
-      >
-        <div>
-          <Tag color={getTierColor(tier)}>
-            {t('Multiplier')} {referralRewardMultiplier}x
-          </Tag>
-          <p className="mt-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
-            <Trans
-              defaults="Stake a minimum of <0>{{minimum}}</0> $VEGA tokens"
-              values={{ minimum }}
-              components={[<b key={minimum}></b>]}
-            />
-          </p>
-        </div>
+      </div>
+      <div className={classNames('p-3')}>
+        <Tag color={color[tier]}>Multiplier {referralRewardMultiplier}x</Tag>
+        <h3 className="mt-1 mb-1 text-base">{label}</h3>
+        <p className="text-sm text-vega-clight-100 dark:text-vega-cdark-100">
+          {t('Stake a minimum of {{minimumStakedTokens}} $VEGA tokens', {
+            minimumStakedTokens,
+          })}
+        </p>
       </div>
     </div>
   );
@@ -126,29 +91,21 @@ export const TiersContainer = () => {
 
   if ((!loading && !details) || error) {
     return (
-      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20 text-sm text-center">
+      <div className="text-base px-5 py-10 text-center">
         <Trans
           defaults="There are currently no active referral programs. Check the <0>Governance App</0> to see if there are any proposals in progress and vote."
           components={[
-            <ExternalLink
-              href={governanceLink(TOKEN_PROPOSALS)}
-              key="link"
-              className="underline"
-            >
+            <ExternalLink href={governanceLink(TOKEN_PROPOSALS)} key="link">
               {t('Governance App')}
             </ExternalLink>,
           ]}
           ns={ns}
-        />{' '}
+        />
         <Trans
-          defaults="Use the <0>docs</0> tutorial to propose a new program."
+          defaults="You can propose a new program via the <0>Docs</0>."
           components={[
-            <ExternalLink
-              href={DocsLinks?.REFERRALS}
-              key="link"
-              className="underline"
-            >
-              {t('docs')}
+            <ExternalLink href={DocsLinks?.REFERRALS} key="link">
+              {t('Docs')}
             </ExternalLink>,
           ]}
           ns={ns}
@@ -159,93 +116,47 @@ export const TiersContainer = () => {
 
   return (
     <>
-      <h2 className="text-3xl mt-10">{t('Current program details')}</h2>
-      {details?.id && (
-        <p>
-          <Trans
-            defaults="As a result of governance proposal <0>{{proposal}}</0> the program below is currently active on the Vega network."
-            values={{ proposal: truncateMiddle(details.id) }}
-            components={[
-              <ExternalLink
-                key="referral-program-proposal-link"
-                href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
-                className="underline"
-              >
-                proposal
-              </ExternalLink>,
-            ]}
-          />
-        </p>
-      )}
-
-      {/* Meta */}
-      <div className="mt-10 flex flex-row items-baseline justify-between text-xs text-vega-clight-100 dark:text-vega-cdark-100 font-alpha calt">
-        {details?.id && (
-          <span>
-            {t('Proposal ID:')}{' '}
-            <ExternalLink
-              href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
-            >
-              <span>{truncateMiddle(details.id)}</span>
-            </ExternalLink>
-          </span>
-        )}
+      {/* Benefit tiers */}
+      <div className="flex flex-col items-baseline justify-between mt-10 mb-5">
+        <h2 className="text-2xl">{t('Referral tiers')}</h2>
         {ends && (
-          <span>
+          <span className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
             {t('Program ends:')} {ends}
           </span>
         )}
       </div>
+      <div className="mb-20">
+        {loading || !benefitTiers || benefitTiers.length === 0 ? (
+          <Loading variant="large" />
+        ) : (
+          <TiersTable
+            windowLength={details?.windowLength}
+            data={benefitTiers.map((bt) => ({
+              ...bt,
+              tierElement: (
+                <div className="rounded-full bg-vega-clight-900 dark:bg-vega-cdark-900 p-1 w-8 h-8 text-center">
+                  {bt.tier}
+                </div>
+              ),
+            }))}
+          />
+        )}
+      </div>
 
-      {/* Container */}
-      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20">
-        {/* Benefit tiers */}
-        <div className="flex flex-col mb-5">
-          <h3 className="text-2xl calt">{t('Benefit tiers')}</h3>
-          <p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
-            {t(
-              'Members of a referral group can access the increasing commission and discount benefits defined in the program based on their combined running volume.'
-            )}
-          </p>
-        </div>
-        <div className="mb-10">
-          {loading || !benefitTiers || benefitTiers.length === 0 ? (
+      {/* Staking tiers */}
+      <div className="flex flex-row items-baseline justify-between mb-5">
+        <h2 className="text-2xl">{t('Staking multipliers')}</h2>
+      </div>
+      <div className="mb-20 flex flex-col justify-items-stretch lg:flex-row gap-5">
+        {loading || !stakingTiers || stakingTiers.length === 0 ? (
+          <>
             <Loading variant="large" />
-          ) : (
-            <TiersTable
-              windowLength={details?.windowLength}
-              data={benefitTiers.map((bt) => ({
-                ...bt,
-                tierElement: (
-                  <div className="rounded-full bg-vega-clight-900 dark:bg-vega-cdark-900 p-1 w-8 h-8 text-center">
-                    {bt.tier}
-                  </div>
-                ),
-              }))}
-            />
-          )}
-        </div>
-
-        {/* Staking tiers */}
-        <div className="flex flex-col mb-5">
-          <h3 className="text-2xl calt">{t('Staking multipliers')}</h3>
-          <p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
-            {t(
-              'Referrers can access the commission multipliers defined in the program by staking VEGA tokens in the amounts shown.'
-            )}
-          </p>
-        </div>
-        <div className="gap-5 grid lg:grid-cols-3">
-          {loading || !stakingTiers || stakingTiers.length === 0 ? (
-            <>
-              <Loading variant="large" />
-              <Loading variant="large" />
-              <Loading variant="large" />
-            </>
-          ) : (
-            <StakingTiers data={stakingTiers} />
-          )}
-        </div>
+            <Loading variant="large" />
+            <Loading variant="large" />
+          </>
+        ) : (
+          <StakingTiers data={stakingTiers} />
+        )}
       </div>
     </>
   );
@@ -257,14 +168,17 @@ const StakingTiers = ({
   data: ReturnType<typeof useReferralProgram>['stakingTiers'];
 }) => (
   <>
-    {data.map(({ tier, referralRewardMultiplier, minimumStakedTokens }, i) => (
-      <StakingTier
-        key={i}
-        tier={tier}
-        referralRewardMultiplier={referralRewardMultiplier}
-        minimumStakedTokens={minimumStakedTokens}
-      />
-    ))}
+    {data.map(
+      ({ tier, label, referralRewardMultiplier, minimumStakedTokens }, i) => (
+        <StakingTier
+          key={i}
+          tier={tier}
+          label={label}
+          referralRewardMultiplier={referralRewardMultiplier}
+          minimumStakedTokens={minimumStakedTokens}
+        />
+      )
+    )}
   </>
 );
 
@@ -289,17 +203,9 @@ const TiersTable = ({
         {
           name: 'commission',
           displayName: t('Referrer commission'),
-          tooltip: t(
-            "The proportion of the referee's taker fees to be rewarded to the referrer"
-          ),
-        },
-        {
-          name: 'discount',
-          displayName: t('Referee trading discount'),
-          tooltip: t(
-            "The proportion of the referee's taker fees to be discounted"
-          ),
+          tooltip: t('A percentage of commission earned by the referrer'),
         },
+        { name: 'discount', displayName: t('Referrer trading discount') },
         {
           name: 'volume',
           displayName: t(
@@ -309,34 +215,20 @@ const TiersTable = ({
               count: windowLength,
             }
           ),
-          tooltip: t('The minimum running notional for the given benefit tier'),
-        },
-        {
-          name: 'epochs',
-          displayName: t('Min. epochs'),
-          tooltip: t(
-            'The minimum number of epochs the party needs to be in the referral set to be eligible for the benefit'
-          ),
         },
+        { name: 'epochs', displayName: t('Min. epochs') },
       ]}
-      className="bg-white dark:bg-vega-cdark-900"
       data={data.map((d) => ({
         ...d,
         className: classNames({
-          'from-vega-yellow-400 dark:from-vega-yellow-600 to-20%  bg-highlight':
-            'yellow' === getTierColor(d.tier),
-          'from-vega-green-400 dark:from-vega-green-600 to-20%  bg-highlight':
-            'green' === getTierColor(d.tier),
-          'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
-            'blue' === getTierColor(d.tier),
-          'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
-            'purple' === getTierColor(d.tier),
           'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-            'pink' === getTierColor(d.tier),
+            d.tier >= 3,
+          'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
+            d.tier === 2,
+          'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
+            d.tier === 1,
           'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-            'orange' === getTierColor(d.tier),
-          'from-vega-clight-200 dark:from-vega-cdark-200 to-20%  bg-highlight':
-            'none' === getTierColor(d.tier),
+            d.tier == 0,
         }),
       }))}
     />

apps/trading/client-pages/referrals/tile.tsx

@@ -32,32 +32,16 @@ export const Tile = ({
 
 type StatTileProps = {
   title: string;
-  testId?: string;
   description?: ReactNode;
   children?: ReactNode;
-  overrideWithNoProgram?: boolean;
 };
-export const StatTile = ({
-  title,
-  description,
-  children,
-  testId,
-  overrideWithNoProgram = false,
-}: StatTileProps) => {
-  if (overrideWithNoProgram) {
-    return <NoProgramTile title={title} />;
-  }
+export const StatTile = ({ title, description, children }: StatTileProps) => {
   return (
     <Tile>
-      <h3
-        data-testid={testId}
-        className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt"
-      >
+      <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
         {title}
       </h3>
-      <div data-testid={`${testId}-value`} className="text-5xl text-left">
-        {children}
-      </div>
+      <div className="text-5xl text-left">{children}</div>
       {description && (
         <div className="text-sm text-left text-vega-clight-100 dark:text-vega-cdark-100">
           {description}
@@ -67,20 +51,6 @@ export const StatTile = ({
   );
 };
 
-export const NoProgramTile = ({ title }: Pick<StatTileProps, 'title'>) => {
-  const t = useT();
-  return (
-    <Tile title={title}>
-      <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
-        {title}
-      </h3>
-      <div className="text-xs text-vega-clight-300 dark:text-vega-cdark-300 leading-[3rem]">
-        {t('No active program')}
-      </div>
-    </Tile>
-  );
-};
-
 const FADE_OUT_STYLE = classNames(
   'after:w-5 after:h-full after:absolute after:top-0 after:right-0',
   'after:bg-gradient-to-l after:from-vega-clight-800 after:dark:from-vega-cdark-800 after:to-transparent'

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

@@ -1,9 +1,8 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
 import { usePageTitleStore } from '../../stores';
-import { ErrorBoundary } from '../../components/error-boundary';
+import { titlefy } from '@vegaprotocol/utils';
+import { useEffect } from 'react';
 
 export const Rewards = () => {
   const t = useT();
@@ -15,11 +14,9 @@ export const Rewards = () => {
     updateTitle(titlefy([title]));
   }, [updateTitle, title]);
   return (
-    <ErrorBoundary feature="rewards">
-      <div className="container mx-auto p-4">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
-        <RewardsContainer />
-      </div>
-    </ErrorBoundary>
+    <div className="container mx-auto p-4">
+      <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+      <RewardsContainer />
+    </div>
   );
 };

apps/trading/components/chart-container/chart-container.spec.tsx

@@ -1,66 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ChartContainer } from './chart-container';
-import { useChartSettingsStore } from './use-chart-settings';
-import { useEnvironment } from '@vegaprotocol/environment';
-
-jest.mock('@vegaprotocol/candles-chart', () => ({
-  ...jest.requireActual('@vegaprotocol/candles-chart'),
-  CandlesChartContainer: ({ marketId }: { marketId: string }) => (
-    <div data-testid="pennant">{marketId}</div>
-  ),
-}));
-
-jest.mock('@vegaprotocol/trading-view', () => ({
-  ...jest.requireActual('@vegaprotocol/trading-view'),
-  TradingViewContainer: ({ marketId }: { marketId: string }) => (
-    <div data-testid="tradingview">{marketId}</div>
-  ),
-}));
-
-describe('ChartContainer', () => {
-  it('renders pennant if no library path is set', () => {
-    useChartSettingsStore.setState({
-      chartlib: 'tradingview',
-    });
-
-    useEnvironment.setState({
-      CHARTING_LIBRARY_PATH: undefined,
-      CHARTING_LIBRARY_HASH: undefined,
-    });
-
-    const marketId = 'market-id';
-
-    render(<ChartContainer marketId={marketId} />);
-
-    expect(screen.getByTestId('pennant')).toHaveTextContent(marketId);
-  });
-
-  it('renders trading view if library path is set', () => {
-    useChartSettingsStore.setState({
-      chartlib: 'tradingview',
-    });
-
-    useEnvironment.setState({
-      CHARTING_LIBRARY_PATH: 'dummy-path',
-      CHARTING_LIBRARY_HASH: 'hash',
-    });
-
-    const marketId = 'market-id';
-
-    render(<ChartContainer marketId={marketId} />);
-
-    expect(screen.getByTestId('tradingview')).toHaveTextContent(marketId);
-  });
-
-  it('renders pennant chart if stored in settings', () => {
-    useChartSettingsStore.setState({
-      chartlib: 'pennant',
-    });
-
-    const marketId = 'market-id';
-
-    render(<ChartContainer marketId={marketId} />);
-
-    expect(screen.getByTestId('pennant')).toHaveTextContent(marketId);
-  });
-});

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

@@ -1,120 +0,0 @@
-import invert from 'lodash/invert';
-import { type Interval } from '@vegaprotocol/types';
-import {
-  TradingViewContainer,
-  ALLOWED_TRADINGVIEW_HOSTNAMES,
-  TRADINGVIEW_INTERVAL_MAP,
-} from '@vegaprotocol/trading-view';
-import {
-  CandlesChartContainer,
-  PENNANT_INTERVAL_MAP,
-} from '@vegaprotocol/candles-chart';
-import { useEnvironment } from '@vegaprotocol/environment';
-import { useChartSettings, STUDY_SIZE } from './use-chart-settings';
-
-/**
- * Renders either the pennant chart or the tradingview chart
- */
-export const ChartContainer = ({ marketId }: { marketId: string }) => {
-  const { CHARTING_LIBRARY_PATH, CHARTING_LIBRARY_HASH } = useEnvironment();
-
-  const {
-    chartlib,
-    interval,
-    chartType,
-    overlays,
-    studies,
-    studySizes,
-    tradingViewStudies,
-    setInterval,
-    setStudies,
-    setStudySizes,
-    setOverlays,
-    setTradingViewStudies,
-  } = useChartSettings();
-
-  const pennantChart = (
-    <CandlesChartContainer
-      marketId={marketId}
-      interval={toPennantInterval(interval)}
-      chartType={chartType}
-      overlays={overlays}
-      studies={studies}
-      studySizes={studySizes}
-      setStudySizes={setStudySizes}
-      setStudies={setStudies}
-      setOverlays={setOverlays}
-      defaultStudySize={STUDY_SIZE}
-    />
-  );
-
-  if (!ALLOWED_TRADINGVIEW_HOSTNAMES.includes(window.location.hostname)) {
-    return pennantChart;
-  }
-
-  if (!CHARTING_LIBRARY_PATH || !CHARTING_LIBRARY_HASH) {
-    return pennantChart;
-  }
-
-  switch (chartlib) {
-    case 'tradingview': {
-      return (
-        <TradingViewContainer
-          libraryPath={CHARTING_LIBRARY_PATH}
-          libraryHash={CHARTING_LIBRARY_HASH}
-          marketId={marketId}
-          interval={toTradingViewResolution(interval)}
-          studies={tradingViewStudies}
-          onIntervalChange={(newInterval) => {
-            setInterval(fromTradingViewResolution(newInterval));
-          }}
-          onAutoSaveNeeded={(data: { studies: string[] }) => {
-            setTradingViewStudies(data.studies);
-          }}
-        />
-      );
-    }
-    case 'pennant': {
-      return pennantChart;
-    }
-    default: {
-      throw new Error('invalid chart lib');
-    }
-  }
-};
-
-const toTradingViewResolution = (interval: Interval) => {
-  const resolution = TRADINGVIEW_INTERVAL_MAP[interval];
-
-  if (!resolution) {
-    throw new Error(
-      `failed to convert interval: ${interval} to valid resolution`
-    );
-  }
-
-  return resolution;
-};
-
-const fromTradingViewResolution = (resolution: string) => {
-  const interval = invert(TRADINGVIEW_INTERVAL_MAP)[resolution];
-
-  if (!interval) {
-    throw new Error(
-      `failed to convert resolution: ${resolution} to valid interval`
-    );
-  }
-
-  return interval as Interval;
-};
-
-const toPennantInterval = (interval: Interval) => {
-  const pennantInterval = PENNANT_INTERVAL_MAP[interval];
-
-  if (!pennantInterval) {
-    throw new Error(
-      `failed to convert interval: ${interval} to valid pennant interval`
-    );
-  }
-
-  return pennantInterval;
-};

apps/trading/components/chart-container/chart-menu.spec.tsx

@@ -1,140 +0,0 @@
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ChartMenu } from './chart-menu';
-import {
-  useChartSettingsStore,
-  DEFAULT_CHART_SETTINGS,
-} from './use-chart-settings';
-import { Overlay, Study, overlayLabels, studyLabels } from 'pennant';
-import { useEnvironment } from '@vegaprotocol/environment';
-
-describe('ChartMenu', () => {
-  it('doesnt show trading view option if library path undefined', () => {
-    useEnvironment.setState({ CHARTING_LIBRARY_PATH: undefined });
-
-    render(<ChartMenu />);
-
-    expect(
-      screen.queryByRole('button', { name: 'TradingView' })
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('button', { name: 'Vega chart' })
-    ).not.toBeInTheDocument();
-  });
-
-  it('can switch between charts if library path', async () => {
-    useEnvironment.setState({ CHARTING_LIBRARY_PATH: 'dummy' });
-
-    render(<ChartMenu />);
-
-    await userEvent.click(screen.getByRole('button', { name: 'TradingView' }));
-    expect(useChartSettingsStore.getState().chartlib).toEqual('tradingview');
-
-    await userEvent.click(screen.getByRole('button', { name: 'Vega chart' }));
-    expect(useChartSettingsStore.getState().chartlib).toEqual('pennant');
-  });
-
-  describe('tradingview', () => {
-    beforeEach(() => {
-      useEnvironment.setState({ CHARTING_LIBRARY_PATH: 'dummy-path' });
-
-      // clear store each time to avoid conditional testing of defaults
-      useChartSettingsStore.setState({
-        chartlib: 'tradingview',
-      });
-    });
-
-    it('only shows chartlib switch and attribution', () => {
-      render(<ChartMenu />);
-
-      const buttons = screen.getAllByRole('button');
-      expect(buttons).toHaveLength(1);
-      expect(buttons[0]).toHaveTextContent('Vega chart');
-
-      expect(screen.getByText('Chart by')).toBeInTheDocument();
-    });
-  });
-
-  describe('pennant', () => {
-    const openDropdown = async () => {
-      await userEvent.click(
-        screen.getByRole('button', {
-          name: 'Indicators',
-        })
-      );
-    };
-
-    beforeEach(() => {
-      // clear store each time to avoid conditional testing of defaults
-      useChartSettingsStore.setState({
-        chartlib: 'pennant',
-        overlays: [],
-        studies: [],
-      });
-    });
-
-    it.each(Object.values(Overlay))('can set %s overlay', async (overlay) => {
-      render(<ChartMenu />);
-
-      await openDropdown();
-
-      const menu = within(await screen.findByRole('menu'));
-
-      await userEvent.click(menu.getByText(overlayLabels[overlay as Overlay]));
-
-      // re-open the dropdown
-      await openDropdown();
-
-      expect(
-        screen.getByText(overlayLabels[overlay as Overlay])
-      ).toHaveAttribute('data-state', 'checked');
-    });
-
-    it.each(Object.values(Study))('can set %s study', async (study) => {
-      render(<ChartMenu />);
-
-      await openDropdown();
-
-      const menu = within(await screen.findByRole('menu'));
-
-      await userEvent.click(menu.getByText(studyLabels[study as Study]));
-
-      // re-open the dropdown
-      await openDropdown();
-
-      expect(screen.getByText(studyLabels[study as Study])).toHaveAttribute(
-        'data-state',
-        'checked'
-      );
-    });
-
-    it('should render with the correct default studies and overlays', async () => {
-      useChartSettingsStore.setState({
-        ...DEFAULT_CHART_SETTINGS,
-        chartlib: 'pennant',
-      });
-
-      render(<ChartMenu />);
-
-      await userEvent.click(
-        screen.getByRole('button', {
-          name: 'Indicators',
-        })
-      );
-      const menu = within(await screen.findByRole('menu'));
-
-      expect(menu.getByText(studyLabels.volume)).toHaveAttribute(
-        'data-state',
-        'checked'
-      );
-      expect(menu.getByText(studyLabels.macd)).toHaveAttribute(
-        'data-state',
-        'checked'
-      );
-      expect(menu.getByText(overlayLabels.movingAverage)).toHaveAttribute(
-        'data-state',
-        'checked'
-      );
-    });
-  });
-});

apps/trading/components/chart-container/index.ts

@@ -1,2 +0,0 @@
-export { ChartContainer } from './chart-container';
-export { ChartMenu } from './chart-menu';

apps/trading/components/error-boundary/error-boundary.spec.tsx

@@ -1,79 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ErrorBoundary } from './error-boundary';
-import { localLoggerFactory } from '@vegaprotocol/logger';
-
-jest.mock('@vegaprotocol/logger', () => ({
-  localLoggerFactory: jest.fn(),
-}));
-
-describe('ErrorBoundary', () => {
-  const mockLogError = jest.fn();
-  const originalConsoleError = console.error;
-  const mockLoggerFactory = localLoggerFactory as jest.Mock;
-
-  beforeAll(() => {
-    console.error = () => {};
-  });
-
-  afterAll(() => {
-    console.error = originalConsoleError;
-  });
-
-  beforeEach(() => {
-    mockLoggerFactory.mockImplementation(() => ({
-      error: mockLogError,
-    }));
-  });
-
-  afterEach(() => {
-    mockLogError.mockClear();
-  });
-
-  it('renders children', () => {
-    render(
-      <ErrorBoundary feature="feature">
-        <div data-testid="child" />
-      </ErrorBoundary>
-    );
-
-    expect(screen.getByTestId('child')).toBeInTheDocument();
-  });
-
-  it('renders fallback ui and logs an error', () => {
-    const error = new Error('bork!');
-    const BorkedComponent = () => {
-      throw error;
-    };
-
-    render(
-      <ErrorBoundary feature="test-feature">
-        <BorkedComponent />
-      </ErrorBoundary>
-    );
-
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-    expect(mockLogError).toHaveBeenCalledTimes(1);
-    expect(mockLogError).toHaveBeenCalledWith(
-      error.message,
-      expect.stringContaining('componentStack')
-    );
-  });
-
-  it('renders fallback render prop if error', () => {
-    const error = new Error('bork!');
-    const BorkedComponent = () => {
-      throw error;
-    };
-
-    render(
-      <ErrorBoundary
-        feature="test-feature"
-        fallback={<div data-testid="custom-ui" />}
-      >
-        <BorkedComponent />
-      </ErrorBoundary>
-    );
-
-    expect(screen.getByTestId('custom-ui')).toBeInTheDocument();
-  });
-});

apps/trading/components/error-boundary/error-boundary.tsx

@@ -1,53 +0,0 @@
-import { localLoggerFactory, type LocalLogger } from '@vegaprotocol/logger';
-import { Component, type ErrorInfo, type ReactNode } from 'react';
-import { useT } from '../../lib/use-t';
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-  feature: string;
-  fallback?: ReactNode;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-}
-
-export class ErrorBoundary extends Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  logger: LocalLogger | null = null;
-
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-
-    this.logger = localLoggerFactory({ application: props.feature });
-
-    this.state = {
-      hasError: false,
-    };
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    if (this.logger) {
-      this.logger.error(error.message, JSON.stringify(info));
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback || <DefaultFallback />;
-    }
-
-    return this.props.children;
-  }
-}
-
-const DefaultFallback = () => {
-  const t = useT();
-  return <p className="text-xs">{t('Something went wrong')}</p>;
-};

apps/trading/components/error-boundary/index.ts

@@ -1 +0,0 @@
-export { ErrorBoundary } from './error-boundary';

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

@@ -40,9 +40,6 @@ const DateRange = {
   RANGE_ALL: 'All',
 };
 
-const priceFormat = (fundingRate: number) =>
-  `${(fundingRate * 100).toFixed(4)}%`;
-
 export const FundingContainer = ({ marketId }: { marketId: string }) => {
   const t = useT();
   const { theme } = useThemeSwitcher();
@@ -85,7 +82,7 @@ export const FundingContainer = ({ marketId }: { marketId: string }) => {
     <LineChart
       data={values}
       theme={theme}
-      priceFormat={priceFormat}
+      priceFormat={(fundingRate) => `${(fundingRate * 100).toFixed(4)}%`}
       yAxisTickFormat="%"
     />
   );

apps/trading/components/navbar/navbar.spec.tsx

@@ -5,7 +5,7 @@ import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { Navbar } from './navbar';
 import { useGlobalStore } from '../../stores';
-import { ENV, useFeatureFlags } from '@vegaprotocol/environment';
+import { ENV, FLAGS } from '@vegaprotocol/environment';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ProtocolUpgradeCountdown: () => null,
@@ -48,7 +48,8 @@ describe('Navbar', () => {
 
   beforeAll(() => {
     useGlobalStore.setState({ marketId });
-    useFeatureFlags.setState({ flags: { REFERRALS: true } });
+    const mockedFLAGS = jest.mocked(FLAGS);
+    mockedFLAGS.REFERRALS = true;
     const mockedENV = jest.mocked(ENV);
     mockedENV.VEGA_TOKEN_URL = 'governance';
   });

apps/trading/components/navbar/navbar.tsx

@@ -6,7 +6,7 @@ import {
   Networks,
   DApp,
   useLinks,
-  useFeatureFlags,
+  FLAGS,
   useEnvNameMapping,
 } from '@vegaprotocol/environment';
 import { useGlobalStore } from '../../stores';
@@ -157,7 +157,6 @@ export const Navbar = ({
  * of the navigation
  */
 const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const envNameMapping = useEnvNameMapping();
   const { VEGA_ENV, VEGA_NETWORKS, GITHUB_FEEDBACK_URL } = useEnvironment();
@@ -202,7 +201,7 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
             {t('Portfolio')}
           </NavbarLink>
         </NavbarItem>
-        {featureFlags.REFERRALS && (
+        {FLAGS.REFERRALS && (
           <NavbarItem>
             <NavbarLink end={false} to={Links.REFERRALS()} onClick={onClick}>
               {t('Referrals')}

apps/trading/components/settings/settings.tsx

@@ -10,18 +10,6 @@ import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 import { useState, type ReactNode } from 'react';
 import classNames from 'classnames';
 import { useT } from '../../lib/use-t';
-import { useFeatureFlags, type FeatureFlags } from '@vegaprotocol/environment';
-
-export const FeatureFlagSwitch = ({ flag }: { flag: keyof FeatureFlags }) => {
-  const flags = useFeatureFlags((state) => state.flags);
-  const setFeatureFlag = useFeatureFlags((state) => state.setFeatureFlag);
-  return (
-    <Switch
-      onCheckedChange={(checked) => setFeatureFlag(flag, !!checked)}
-      checked={flags[flag]}
-    />
-  );
-};
 
 export const Settings = () => {
   const t = useT();
@@ -132,7 +120,7 @@ const SettingsGroup = ({
       })}
     >
       <div className={classNames({ 'w-3/4': inline, 'mb-2': !inline })}>
-        <div className="text-sm">{label}</div>
+        <label className="text-sm">{label}</label>
         {helpText && <p className="text-xs text-muted">{helpText}</p>}
       </div>
       {children}

apps/trading/components/sidebar/sidebar.tsx

@@ -16,7 +16,6 @@ import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../error-boundary';
 
 export enum ViewType {
   Order = 'Order',
@@ -164,14 +163,12 @@ export const SidebarContent = () => {
     if (params.marketId) {
       return (
         <ContentWrapper>
-          <ErrorBoundary feature="deal-ticket">
-            <DealTicketContainer
-              marketId={params.marketId}
-              onDeposit={(assetId) =>
-                setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
-              }
-            />
-          </ErrorBoundary>
+          <DealTicketContainer
+            marketId={params.marketId}
+            onDeposit={(assetId) =>
+              setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
+            }
+          />
           <GetStarted />
         </ContentWrapper>
       );
@@ -184,9 +181,7 @@ export const SidebarContent = () => {
     if (params.marketId) {
       return (
         <ContentWrapper>
-          <ErrorBoundary feature="market-info">
-            <MarketInfoAccordionContainer marketId={params.marketId} />
-          </ErrorBoundary>
+          <MarketInfoAccordionContainer marketId={params.marketId} />
         </ContentWrapper>
       );
     } else {
@@ -197,9 +192,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Deposit) {
     return (
       <ContentWrapper title={t('Deposit')}>
-        <ErrorBoundary feature="deposit">
-          <DepositContainer assetId={view.assetId} />
-        </ErrorBoundary>
+        <DepositContainer assetId={view.assetId} />
       </ContentWrapper>
     );
   }
@@ -207,9 +200,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Withdraw) {
     return (
       <ContentWrapper title={t('Withdraw')}>
-        <ErrorBoundary feature="withdraw">
-          <WithdrawContainer assetId={view.assetId} />
-        </ErrorBoundary>
+        <WithdrawContainer assetId={view.assetId} />
       </ContentWrapper>
     );
   }
@@ -217,9 +208,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Transfer) {
     return (
       <ContentWrapper title={t('Transfer')}>
-        <ErrorBoundary feature="transfer">
-          <TransferContainer assetId={view.assetId} />
-        </ErrorBoundary>
+        <TransferContainer assetId={view.assetId} />
       </ContentWrapper>
     );
   }
@@ -227,9 +216,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Settings) {
     return (
       <ContentWrapper title={t('Settings')}>
-        <ErrorBoundary feature="settings">
-          <Settings />
-        </ErrorBoundary>
+        <Settings />
       </ContentWrapper>
     );
   }

apps/trading/components/welcome-dialog/use-get-onboarding-step.ts

@@ -10,7 +10,6 @@ import { positionsDataProvider } from '@vegaprotocol/positions';
 import { useGlobalStore } from '../../stores';
 
 const ONBOARDING_STORAGE_KEY = 'vega_onboarding';
-
 export const useOnboardingStore = create<{
   dialogOpen: boolean;
   walletDialogOpen: boolean;
@@ -21,7 +20,7 @@ export const useOnboardingStore = create<{
 }>()(
   persist(
     (set) => ({
-      dialogOpen: false,
+      dialogOpen: true,
       walletDialogOpen: false,
       dismissed: false,
       dismiss: () => set({ dismissed: true }),

apps/trading/components/welcome-dialog/welcome-dialog.tsx

@@ -1,30 +1,18 @@
-import { useEffect } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { VegaConnectDialog } from '@vegaprotocol/wallet';
-import { useConnectors } from '../../lib/vega-connectors';
-import { useT } from '../../lib/use-t';
-import { Routes } from '../../lib/links';
-import { RiskMessage } from './risk-message';
 import { WelcomeDialogContent } from './welcome-dialog-content';
 import { useOnboardingStore } from './use-get-onboarding-step';
-import { ensureSuffix } from '@vegaprotocol/utils';
-
-/**
- * A list of paths on which the welcome dialog should be omitted.
- */
-const OMIT_ON_LIST = [ensureSuffix(Routes.REFERRALS, '/*')];
+import { VegaConnectDialog } from '@vegaprotocol/wallet';
+import { Connectors } from '../../lib/vega-connectors';
+import { RiskMessage } from './risk-message';
+import { useT } from '../../lib/use-t';
 
 export const WelcomeDialog = () => {
-  const { pathname } = useLocation();
   const t = useT();
   const { VEGA_ENV } = useEnvironment();
-  const connectors = useConnectors();
   const dismissed = useOnboardingStore((store) => store.dismissed);
   const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
   const dismiss = useOnboardingStore((store) => store.dismiss);
-  const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
   const walletDialogOpen = useOnboardingStore(
     (store) => store.walletDialogOpen
   );
@@ -32,19 +20,9 @@ export const WelcomeDialog = () => {
     (store) => store.setWalletDialogOpen
   );
 
-  useEffect(() => {
-    const shouldOmit = OMIT_ON_LIST.map((path) =>
-      matchPath(path, pathname)
-    ).some((m) => !!m);
-
-    if (dismissed || shouldOmit) return;
-
-    setDialogOpen(true);
-  }, [dismissed, pathname, setDialogOpen]);
-
   const content = walletDialogOpen ? (
     <VegaConnectDialog
-      connectors={connectors}
+      connectors={Connectors}
       riskMessage={<RiskMessage />}
       onClose={() => setWalletDialogOpen(false)}
       contentOnly
@@ -53,12 +31,7 @@ export const WelcomeDialog = () => {
     <WelcomeDialogContent />
   );
 
-  const onClose = walletDialogOpen
-    ? () => setWalletDialogOpen(false)
-    : () => {
-        setDialogOpen(false);
-        dismiss();
-      };
+  const onClose = walletDialogOpen ? () => setWalletDialogOpen(false) : dismiss;
 
   const title = walletDialogOpen ? null : (
     <span className="font-alpha calt" data-testid="welcome-title">

apps/trading/e2e/.env

@@ -1,2 +1,2 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:latest
-VEGA_VERSION=v0.73.8
+VEGA_VERSION=v0.73.6

apps/trading/e2e/.env.develop

@@ -1,2 +1,2 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:develop
-VEGA_VERSION=v0.73.8
+VEGA_VERSION=v0.73.6

apps/trading/e2e/.env.main

@@ -1,2 +1,2 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:main
-VEGA_VERSION=v0.73.8
+VEGA_VERSION=v0.73.6

apps/trading/e2e/actions/utils.py

@@ -6,27 +6,23 @@ from typing import Optional
 WalletConfig = namedtuple("WalletConfig", ["name", "passphrase"])
 ASSET_NAME = "tDAI"
 
-
 def wait_for_toast_confirmation(page: Page, timeout: int = 30000):
     page.wait_for_function("""
     document.querySelector('[data-testid="toast-content"]') && 
     document.querySelector('[data-testid="toast-content"]').innerText.includes('AWAITING CONFIRMATION')
     """, timeout=timeout)
 
-
 def create_and_faucet_wallet(
     vega: VegaServiceNull,
     wallet: WalletConfig,
     symbol: Optional[str] = None,
     amount: float = 1e4,
-
+    
 ):
-    asset_id = vega.find_asset_id(
-        symbol=symbol if symbol is not None else ASSET_NAME)
+    asset_id = vega.find_asset_id(symbol=symbol if symbol is not None else ASSET_NAME)
     vega.create_key(wallet.name)
     vega.mint(wallet.name, asset_id, amount)
 
-
 def next_epoch(vega: VegaServiceNull):
     forwards = 0
     epoch_seq = vega.statistics().epoch_seq
@@ -40,34 +36,13 @@ def next_epoch(vega: VegaServiceNull):
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
 
-
 def truncate_middle(market_id, start=6, end=4):
     if len(market_id) < 11:
         return market_id
     return market_id[:start] + '\u2026' + market_id[-end:]
 
-
-def change_keys(page: Page, vega: VegaServiceNull, key_name):
+def change_keys(page: Page, vega:VegaServiceNull, key_name):
     page.get_by_test_id("manage-vega-wallet").click()
     page.get_by_test_id("key-" + vega.wallet.public_key(key_name)).click()
-    page.click(
-        f'data-testid=key-{vega.wallet.public_key(key_name)} >> .inline-flex')
+    page.click(f'data-testid=key-{vega.wallet.public_key(key_name)} >> .inline-flex')
     page.reload()
-
-
-def forward_time(vega: VegaServiceNull, forward_epoch: bool = False):
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-
-    if forward_epoch:
-        next_epoch(vega)
-
-
-# This is for when the element will initially load but contain an outdated value. It will wait for the element to contain the expected text, returning False after a timeout or exception
-def selector_contains_text(page: Page, selector, expected_text, timeout=5000):
-    try:
-        page.wait_for_selector(
-            f'{selector} >> text={expected_text}', timeout=timeout)
-        return True
-    except:
-        return False

apps/trading/e2e/actions/vega.py

@@ -1,7 +1,6 @@
 from typing import List, Tuple, Optional
 from vega_sim.service import VegaService, PeggedOrder
 
-
 def submit_order(
     vega: VegaService,
     wallet_name: str,
@@ -36,7 +35,7 @@ def submit_multiple_orders(
         submit_order(vega, wallet_name, market_id, side, volume, price)
 
 
-def submit_liquidity(vega: VegaService, wallet_name: str, market_id: str, buy_vol=99, sell_vol=99, custom_price=None):
+def submit_liquidity(vega: VegaService, wallet_name: str, market_id: str):
     vega.submit_simple_liquidity(
         key_name=wallet_name,
         market_id=market_id,
@@ -52,7 +51,7 @@ def submit_liquidity(vega: VegaService, wallet_name: str, market_id: str, buy_vo
         pegged_order=PeggedOrder(reference="PEGGED_REFERENCE_MID", offset=1),
         wait=False,
         time_in_force="TIME_IN_FORCE_GTC",
-        volume=buy_vol,
+        volume=99,
     )
     vega.submit_order(
         market_id=market_id,
@@ -62,5 +61,5 @@ def submit_liquidity(vega: VegaService, wallet_name: str, market_id: str, buy_vo
         pegged_order=PeggedOrder(reference="PEGGED_REFERENCE_MID", offset=1),
         wait=False,
         time_in_force="TIME_IN_FORCE_GTC",
-        volume=sell_vol,
-    )
+        volume=99,
+    )

apps/trading/e2e/fixtures/market.py

@@ -8,17 +8,12 @@ logger = logging.getLogger()
 mint_amount: float = 10e5
 market_name = "BTC:DAI_2023"
 
-default_sell_orders = [[1, 110], [1, 105]]
-default_buy_orders = [[1, 90], [1, 95]]
-
-
 def setup_simple_market(
     vega: VegaService,
     approve_proposal=True,
     custom_market_name=market_name,
     custom_asset_name="tDAI",
     custom_asset_symbol="tDAI",
-    custom_quantum=1
 ):
     for wallet in wallets:
         vega.create_key(wallet.name)
@@ -42,7 +37,6 @@ def setup_simple_market(
         symbol=custom_asset_symbol,
         decimals=5,
         max_faucet_amount=1e10,
-        quantum=custom_quantum,
     )
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
@@ -117,17 +111,16 @@ def setup_simple_successor_market(
     return market_id
 
 
-def setup_opening_auction_market(vega: VegaService, market_id: str = None, buy_orders=default_buy_orders, sell_orders=default_sell_orders, add_liquidity=True, **kwargs):
-    if not market_exists(vega, market_id):
+def setup_opening_auction_market(vega: VegaService, market_id: str = None, **kwargs):
+    if market_id is None or market_id not in vega.all_markets():
         market_id = setup_simple_market(vega, **kwargs)
 
-    if add_liquidity:
-        submit_liquidity(vega, MM_WALLET.name, market_id)
+    submit_liquidity(vega, MM_WALLET.name, market_id)
     submit_multiple_orders(
-        vega, MM_WALLET.name, market_id, "SIDE_SELL", sell_orders
+        vega, MM_WALLET.name, market_id, "SIDE_SELL", [[1, 110], [1, 105]]
     )
     submit_multiple_orders(
-        vega, MM_WALLET2.name, market_id, "SIDE_BUY", buy_orders
+        vega, MM_WALLET2.name, market_id, "SIDE_BUY", [[1, 90], [1, 95]]
     )
 
     vega.forward("10s")
@@ -137,22 +130,11 @@ def setup_opening_auction_market(vega: VegaService, market_id: str = None, buy_o
     return market_id
 
 
-def market_exists(vega: VegaService, market_id: str):
-    if market_id is None:
-        return False
-    all_markets = vega.all_markets()
-    market_ids = [market.id for market in all_markets]
-    return market_id in market_ids
+def setup_continuous_market(vega: VegaService, market_id: str = None, **kwargs):
+    if market_id is None or market_id not in vega.all_markets():
+        market_id = setup_opening_auction_market(vega, **kwargs)
 
-
-# Add sell orders and buy orders to put on the book
-def setup_continuous_market(vega: VegaService, market_id: str = None, buy_orders=default_buy_orders, sell_orders=default_sell_orders, add_liquidity=True, **kwargs):
-    if not market_exists(vega, market_id) or buy_orders != default_buy_orders or sell_orders != default_sell_orders:
-        market_id = setup_opening_auction_market(
-            vega, market_id, buy_orders, sell_orders, add_liquidity, **kwargs)
-
-    submit_order(vega, "Key 1", market_id, "SIDE_BUY",
-                 sell_orders[0][0], sell_orders[0][1])
+    submit_order(vega, "Key 1", market_id, "SIDE_BUY", 1, 110)
 
     vega.forward("10s")
     vega.wait_fn(1)
@@ -160,7 +142,6 @@ def setup_continuous_market(vega: VegaService, market_id: str = None, buy_orders
 
     return market_id
 
-
 def setup_perps_market(
     vega: VegaService,
     custom_asset_name="tDAI",
@@ -229,7 +210,7 @@ def setup_perps_market(
         settlement_data_key=TERMINATE_WALLET.name,
         funding_payment_frequency_in_seconds=10,
         market_decimals=5,
-    )
+        )
     vega.wait_for_total_catchup()
 
     submit_liquidity(vega, MM_WALLET.name, market_id)
@@ -244,4 +225,4 @@ def setup_perps_market(
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
 
-    return market_id
+    return market_id

apps/trading/e2e/poetry.lock

@@ -1159,9 +1159,9 @@ profile = ["pytest-profiling", "snakeviz"]
 
 [package.source]
 type = "git"
-url = "https://github.com/vegaprotocol/vega-market-sim.git/"
-reference = "fix/genesis_panic"
-resolved_reference = "7ab04931924380db8000544b7f3d65fcb39b5467"
+url = "https://github.com/vegaprotocol/vega-market-sim.git"
+reference = "HEAD"
+resolved_reference = "fbcb974b2055bbc80169cdfd69987f087f9969fb"
 
 [[package]]
 name = "websocket-client"
@@ -1342,4 +1342,4 @@ files = [
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.11"
-content-hash = "68ed0de55290a3b929d47eb7f7b031fb7e172261c7bbeb4f554b7c27a4462754"
+content-hash = "d1231fe591b774e34b8f94a54cd02e4d7dae924c57785263841c3b0b0feed505"

apps/trading/e2e/tests/market/test_market.py

@@ -31,7 +31,7 @@ initial_spread: float = 0.1
 market_name = "BTC:DAI_2023"
 
 
-@pytest.mark.usefixtures("vega", "page", "simple_market", "risk_accepted", "auth")
+@pytest.mark.usefixtures("vega", "page", "simple_market", "risk_accepted")
 def test_price_monitoring(simple_market, vega: VegaService, page: Page):
     page.goto(f"/#/markets/all")
     expect(page.locator(table_row_selector).locator(trading_mode_col)).to_have_text(
@@ -109,8 +109,9 @@ def test_price_monitoring(simple_market, vega: VegaService, page: Page):
     expect(
         page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
     ).to_have_text("100.00 (>100%)")
+
     vega.forward("10s")
-    vega.wait_fn(10)
+    vega.wait_fn(1)
     vega.wait_for_total_catchup()
     expect(
         page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)

apps/trading/e2e/tests/market/test_market_info.py

@@ -197,10 +197,10 @@ def test_market_info_risk_factors(page: Page):
     fields = [
         ["Long", "0.05153"],
         ["Short", "0.05422"],
-        ["Max Leverage Long", "19.406"],
-        ["Max Leverage Short", "18.445"],
-        ["Max Initial Leverage Long", "12.937"],
-        ["Max Initial Leverage Short", "12.297"],
+        ["Max Leverage Long", "19.036"],
+        ["Max Leverage Short", "18.111"],
+        ["Max Initial Leverage Long", "12.691"],
+        ["Max Initial Leverage Short", "12.074"],
     ]
     validate_info_section(page, fields)
 

apps/trading/e2e/tests/perpetual_market/test_perpetuals.py

@@ -137,6 +137,6 @@ def test_perps_market_terminated(page: Page, vega: VegaService):
     expect(page.get_by_test_id("market-trading-mode")).to_have_text("Trading modeNo trading")
     expect(page.get_by_test_id("market-state")).to_have_text("StatusClosed")
     expect(page.get_by_test_id("liquidity-supplied")).to_have_text("Liquidity supplied 0.00 (0.00%)")
-    expect(page.get_by_test_id("market-funding")).to_contain_text("Funding Rate / Countdown")
-    expect(page.get_by_test_id("index-price")).to_contain_text("Index Price")
+    expect(page.get_by_test_id("market-funding")).to_have_text("Funding Rate / Countdown-Unknown")
+    expect(page.get_by_test_id("index-price")).to_have_text("Index Price-")
     expect(page.get_by_test_id("deal-ticket-error-message-summary")).to_have_text("This market is closed and not accepting orders")

apps/trading/e2e/tests/referrals/test_referrals.py

@@ -1,175 +0,0 @@
-import pytest
-from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
-from conftest import init_vega
-from fixtures.market import setup_continuous_market, setup_simple_market
-from actions.utils import change_keys, create_and_faucet_wallet, forward_time, selector_contains_text
-from actions.vega import submit_order, submit_liquidity
-from wallet_config import MM_WALLET, PARTY_A, PARTY_B
-
-SELL_ORDERS = [[1, 111], [1, 111], [1, 112], [1, 112], [
-    1, 113], [1, 113], [1, 114], [1, 114], [1, 115], [1, 115]]
-BUY_ORDERS = [[1, 106], [1, 107], [1, 108]]
-
-
-@pytest.fixture(scope="module")
-def vega(request):
-    with init_vega(request) as vega:
-        yield vega
-
-
-@pytest.fixture(scope="module")
-def continuous_market(vega):
-    market = setup_simple_market(vega, custom_quantum=100000)
-    return setup_continuous_market(vega, market, BUY_ORDERS, SELL_ORDERS, add_liquidity=False)
-
-
-def generate_referrer_expected_value_dic(expected_base_commission, expected_staking_multiplier, expected_final_commission_rate, expected_volume, expected_num_traders, expected_total_commission):
-    return {
-        '[data-testid=my-volume-value]': expected_volume,
-        '[data-testid=total-commission-value]': expected_total_commission,
-        '[data-testid=base-commission-rate-value]': expected_base_commission,
-        '[data-testid=number-of-traders-value]': expected_num_traders,
-        '[data-testid=final-commission-rate-value]': expected_final_commission_rate,
-        '[data-testid=staking-multiplier-value]': expected_staking_multiplier
-    }
-
-
-def generate_referral_expected_value_dic(expected_volume, expected_tier, expected_discount, expected_epochs, expected_epochs_to_next_tier):
-    return {
-        '[data-testid=combined-volume-value]': expected_volume,
-        '[data-testid=current-tier-value]': expected_tier,
-        '[data-testid=discount-value]': expected_discount,
-        '[data-testid=epochs-in-set-value]': expected_epochs,
-        '[data-testid=epochs-to-next-tier-value]': expected_epochs_to_next_tier
-    }
-
-
-def check_tile_values(page: Page, expected_results: dict):
-    if "referrals" in page.url:
-        page.reload()
-    else:
-        page.goto("/#/referrals/")
-
-    for selector, expected_text in expected_results.items():
-        assert selector_contains_text(
-            page, selector, expected_text), f"Expected text '{expected_text}' not found in selector '{selector}'"
-
-
-def create_benefit_tier(minimum_running_notional_taker_volume, minimum_epochs, referral_reward_factor, referral_discount_factor):
-    return {
-        "minimum_running_notional_taker_volume": minimum_running_notional_taker_volume,
-        "minimum_epochs": minimum_epochs,
-        "referral_reward_factor": referral_reward_factor,
-        "referral_discount_factor": referral_discount_factor,
-    }
-
-
-def create_staking_tier(minimum_staked_tokens, referral_reward_multiplier):
-    return {
-        "minimum_staked_tokens": minimum_staked_tokens,
-        "referral_reward_multiplier": referral_reward_multiplier,
-    }
-
-
-def setup_market_and_referral_scheme(vega: VegaService, continuous_market: str, page: Page):
-    page.goto(f"/#/markets/{continuous_market}")
-
-    create_and_faucet_wallet(vega=vega, wallet=PARTY_A)
-    create_and_faucet_wallet(vega=vega, wallet=PARTY_B)
-    forward_time(vega)
-
-    benefit_tiers = []
-    staking_tiers = []
-    for i in range(1, 4):
-        benefit_tiers.append(create_benefit_tier(
-            i * 100, i, i * 0.01, i * 0.01))
-        staking_tiers.append(create_staking_tier(
-            i * 100, i))
-
-    vega.update_referral_program(
-        proposal_key=MM_WALLET.name,
-        benefit_tiers=benefit_tiers,
-        staking_tiers=staking_tiers,
-        window_length=1,
-    )
-    forward_time(vega, True)
-
-    vega.create_referral_set(key_name=PARTY_A.name)
-    forward_time(vega, True)
-
-    referral_set_id = list(vega.list_referral_sets().keys())[0]
-    vega.apply_referral_code(key_name=PARTY_B.name, id=referral_set_id)
-
-    tdai_id = vega.find_asset_id(symbol="tDAI")
-    vega.mint(
-        "Key 1",
-        asset=tdai_id,
-        amount=10e6,
-    )
-    vega.mint(
-        PARTY_B.name,
-        asset=tdai_id,
-        amount=10e6,
-    )
-
-    submit_liquidity(vega, MM_WALLET.name, continuous_market, 100, 100)
-    forward_time(vega)
-
-
-@pytest.mark.usefixtures("page", "auth", "risk_accepted")
-def test_can_traverse_up_and_down_through_tiers(continuous_market, vega: VegaService, page: Page):
-    setup_market_and_referral_scheme(vega, continuous_market, page)
-    change_keys(page, vega, PARTY_B.name)
-    submit_order(vega, PARTY_B.name, continuous_market, "SIDE_BUY", 1, 115)
-    forward_time(vega, True)
-    check_tile_values(page, generate_referral_expected_value_dic(
-        "110", "1", "1%", "1", "1"))
-
-    change_keys(page, vega, PARTY_A.name)
-    check_tile_values(page, generate_referrer_expected_value_dic(
-        "1%", "1", "1%", "0", "1", "0"))
-
-    change_keys(page, vega, PARTY_B.name)
-    submit_order(vega, PARTY_B.name, continuous_market, "SIDE_BUY", 2, 115)
-    forward_time(vega, True)
-    check_tile_values(page, generate_referral_expected_value_dic(
-        "221", "2", "2%", "2", "1"))
-
-    change_keys(page, vega, PARTY_A.name)
-    check_tile_values(page, generate_referrer_expected_value_dic(
-        "2%", "1", "2%", "0", "1", "0"))
-
-    change_keys(page, vega, PARTY_B.name)
-    submit_order(vega, PARTY_B.name, continuous_market, "SIDE_BUY", 3, 115)
-    forward_time(vega, True)
-    check_tile_values(page, generate_referral_expected_value_dic(
-        "331", "3", "3%", "3", "0"))
-
-    change_keys(page, vega, PARTY_A.name)
-    check_tile_values(page, generate_referrer_expected_value_dic(
-        "3%", "1", "3%", "0", "1", "1"))
-
-    change_keys(page, vega, PARTY_B.name)
-    submit_order(vega, PARTY_B.name, continuous_market, "SIDE_BUY", 1, 115)
-    forward_time(vega, True)
-    check_tile_values(page, generate_referral_expected_value_dic(
-        "110", "1", "1%", "4", "0"))
-
-    change_keys(page, vega, PARTY_A.name)
-    check_tile_values(page, generate_referrer_expected_value_dic(
-        "1%", "1", "1%", "0", "1", "1"))
-
-
-@pytest.mark.usefixtures("page", "auth", "risk_accepted")
-def test_does_not_move_up_tiers_when_not_enough_epochs(continuous_market, vega: VegaService, page: Page):
-    setup_market_and_referral_scheme(vega, continuous_market, page)
-    change_keys(page, vega, PARTY_B.name)
-    submit_order(vega, PARTY_B.name, continuous_market, "SIDE_BUY", 2, 115)
-    forward_time(vega, True)
-    check_tile_values(page, generate_referral_expected_value_dic(
-        "221", "1", "1%", "1", "1"))
-
-    change_keys(page, vega, PARTY_A.name)
-    check_tile_values(page, generate_referrer_expected_value_dic(
-        "2%", "1", "2%", "0", "1", "0"))

apps/trading/e2e/wallet_config.py

@@ -7,9 +7,6 @@ WalletConfig = namedtuple("WalletConfig", ["name", "passphrase"])
 MM_WALLET = WalletConfig("market_maker", "pin")
 MM_WALLET2 = WalletConfig("market_maker_2", "pin2")
 TERMINATE_WALLET = WalletConfig("FJMKnwfZdd48C8NqvYrG", "bY3DxwtsCstMIIZdNpKs")
-GOVERNANCE_WALLET = WalletConfig(
-    "FJMKnwfZdd48C8NqvYrG", "bY3DxwtsCstMIIZdNpKs")
-PARTY_A = WalletConfig("party_a", "party_a")
-PARTY_B = WalletConfig("party_b", "party_b")
+GOVERNANCE_WALLET = WalletConfig("FJMKnwfZdd48C8NqvYrG", "bY3DxwtsCstMIIZdNpKs")
 
 wallets = [MM_WALLET, MM_WALLET2, TERMINATE_WALLET, GOVERNANCE_WALLET]

apps/trading/jest.config.ts

@@ -4,18 +4,9 @@ export default {
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
-    '^.+\\.[tj]sx?$': [
-      'babel-jest',
-      {
-        presets: ['@nx/next/babel'],
-        // required for pennant to work in jest, due to having untranspiled exports
-        plugins: [['@babel/plugin-proposal-private-methods']],
-      },
-    ],
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/trading',
   setupFilesAfterEnv: ['./setup-tests.ts'],
-  // dont ignore pennant from transpilation
-  transformIgnorePatterns: ['<rootDir>/node_modules/pennant'],
 };

apps/trading/lib/hooks/use-get-current-route-id.ts

@@ -1,9 +1,9 @@
-import { useRouterConfig } from '../../pages/client-router';
+import { routerConfig } from '../../pages/client-router';
 import { matchRoutes, useLocation } from 'react-router-dom';
 
 export const useGetCurrentRouteId = () => {
   const location = useLocation();
-  const matches = matchRoutes(useRouterConfig(), location);
+  const matches = matchRoutes(routerConfig, location);
   const lastRoute = matches ? matches[matches.length - 1] : undefined;
   if (lastRoute) {
     const id = lastRoute.route.id;

apps/trading/lib/i18n/index.ts

@@ -75,7 +75,6 @@ i18n
       'positions',
       'trades',
       'trading',
-      'trading-view',
       'ui-toolkit',
       'utils',
       'wallet',

apps/trading/lib/vega-connectors.ts

@@ -1,5 +1,4 @@
-import { useFeatureFlags } from '@vegaprotocol/environment';
-import { useMemo } from 'react';
+import { FLAGS } from '@vegaprotocol/environment';
 import {
   JsonRpcConnector,
   ViewConnector,
@@ -19,17 +18,13 @@ if (typeof window !== 'undefined') {
   view = new ViewConnector();
 }
 
-export const snap = new SnapConnector(DEFAULT_SNAP_ID);
+export const snap = FLAGS.METAMASK_SNAPS
+  ? new SnapConnector(DEFAULT_SNAP_ID)
+  : undefined;
 
-export const useConnectors = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-  return useMemo(
-    () => ({
-      injected,
-      jsonRpc,
-      view,
-      snap: featureFlags.METAMASK_SNAPS ? snap : undefined,
-    }),
-    [featureFlags.METAMASK_SNAPS]
-  );
+export const Connectors = {
+  injected,
+  jsonRpc,
+  view,
+  snap,
 };

apps/trading/pages/client-router.tsx

@@ -22,7 +22,7 @@ import { ApplyCodeFormContainer } from '../client-pages/referrals/apply-code-for
 import { CreateCodeContainer } from '../client-pages/referrals/create-code-form';
 import { NotFound as ReferralNotFound } from '../client-pages/referrals/error-boundary';
 import { compact } from 'lodash';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { LiquidityHeader } from '../components/liquidity-header';
 import { MarketHeader } from '../components/market-header';
 import { PortfolioSidebar } from '../client-pages/portfolio/portfolio-sidebar';
@@ -44,147 +44,144 @@ const NotFound = () => {
   );
 };
 
-export const useRouterConfig = (): RouteObject[] => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-  return compact([
-    {
-      index: true,
-      element: <Home />,
-      id: AppRoutes.HOME,
-    },
-    {
-      path: 'disclaimer',
-      element: <LayoutCentered />,
-      id: AppRoutes.DISCLAIMER,
-      children: [{ index: true, element: <Disclaimer /> }],
-    },
-    // Referrals routing (the pages should be available if the feature flag is on)
-    featureFlags.REFERRALS
-      ? {
-          path: AppRoutes.REFERRALS,
-          element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
-          children: [
-            {
-              element: (
-                <LayoutWithSky>
-                  <Referrals />
-                </LayoutWithSky>
-              ),
-              children: [
-                {
-                  index: true,
-                  element: <ReferralStatistics />,
-                },
-                {
-                  path: AppRoutes.REFERRALS_CREATE_CODE,
-                  element: <CreateCodeContainer />,
-                },
-                {
-                  path: AppRoutes.REFERRALS_APPLY_CODE,
-                  element: <ApplyCodeFormContainer />,
-                },
-              ],
-            },
-            {
-              path: '*',
-              element: <ReferralNotFound />,
-            },
-          ],
-        }
-      : undefined,
-    {
-      path: 'fees/*',
-      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
-      children: [
-        {
-          index: true,
-          element: <Fees />,
-        },
-      ],
-    },
-    {
-      path: 'rewards/*',
-      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
-      children: [
-        {
-          index: true,
-          element: <Rewards />,
-        },
-      ],
-    },
-    {
-      path: 'markets/*',
-      element: (
-        <LayoutWithSidebar
-          header={<MarketHeader />}
-          sidebar={<MarketsSidebar />}
-        />
-      ),
-      children: [
-        {
-          index: true,
-          element: <MarketsPage />,
-          id: AppRoutes.MARKETS,
-        },
-        {
-          path: 'all',
-          element: <Navigate to="/markets" />,
-        },
-        {
-          path: ':marketId',
-          element: <MarketPage />,
-          id: AppRoutes.MARKET,
-        },
-      ],
-    },
-    {
-      path: 'portfolio/*',
-      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
-      children: [
-        {
-          index: true,
-          element: <Portfolio />,
-          id: AppRoutes.PORTFOLIO,
-        },
-        {
-          path: 'assets',
-          element: <Assets />,
-          id: AppRoutes.ASSETS,
-          children: [
-            { index: true, element: <Navigate to="deposit" /> },
-            { path: 'deposit', element: <Deposit />, id: AppRoutes.DEPOSIT },
-            { path: 'withdraw', element: <Withdraw />, id: AppRoutes.WITHDRAW },
-            { path: 'transfer', element: <Transfer />, id: AppRoutes.TRANSFER },
-          ],
-        },
-      ],
-    },
+export const routerConfig: RouteObject[] = compact([
+  {
+    index: true,
+    element: <Home />,
+    id: AppRoutes.HOME,
+  },
+  {
+    path: 'disclaimer',
+    element: <LayoutCentered />,
+    id: AppRoutes.DISCLAIMER,
+    children: [{ index: true, element: <Disclaimer /> }],
+  },
+  // Referrals routing (the pages should be available if the feature flag is on)
+  FLAGS.REFERRALS
+    ? {
+        path: AppRoutes.REFERRALS,
+        element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+        children: [
+          {
+            element: (
+              <LayoutWithSky>
+                <Referrals />
+              </LayoutWithSky>
+            ),
+            children: [
+              {
+                index: true,
+                element: <ReferralStatistics />,
+              },
+              {
+                path: AppRoutes.REFERRALS_CREATE_CODE,
+                element: <CreateCodeContainer />,
+              },
+              {
+                path: AppRoutes.REFERRALS_APPLY_CODE,
+                element: <ApplyCodeFormContainer />,
+              },
+            ],
+          },
+          {
+            path: '*',
+            element: <ReferralNotFound />,
+          },
+        ],
+      }
+    : undefined,
+  {
+    path: 'fees/*',
+    element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+    children: [
+      {
+        index: true,
+        element: <Fees />,
+      },
+    ],
+  },
+  {
+    path: 'rewards/*',
+    element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+    children: [
+      {
+        index: true,
+        element: <Rewards />,
+      },
+    ],
+  },
+  {
+    path: 'markets/*',
+    element: (
+      <LayoutWithSidebar
+        header={<MarketHeader />}
+        sidebar={<MarketsSidebar />}
+      />
+    ),
+    children: [
+      {
+        index: true,
+        element: <MarketsPage />,
+        id: AppRoutes.MARKETS,
+      },
+      {
+        path: 'all',
+        element: <Navigate to="/markets" />,
+      },
+      {
+        path: ':marketId',
+        element: <MarketPage />,
+        id: AppRoutes.MARKET,
+      },
+    ],
+  },
+  {
+    path: 'portfolio/*',
+    element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+    children: [
+      {
+        index: true,
+        element: <Portfolio />,
+        id: AppRoutes.PORTFOLIO,
+      },
+      {
+        path: 'assets',
+        element: <Assets />,
+        id: AppRoutes.ASSETS,
+        children: [
+          { index: true, element: <Navigate to="deposit" /> },
+          { path: 'deposit', element: <Deposit />, id: AppRoutes.DEPOSIT },
+          { path: 'withdraw', element: <Withdraw />, id: AppRoutes.WITHDRAW },
+          { path: 'transfer', element: <Transfer />, id: AppRoutes.TRANSFER },
+        ],
+      },
+    ],
+  },
 
-    {
-      path: 'liquidity/*',
-      element: (
-        <LayoutWithSidebar
-          header={<LiquidityHeader />}
-          sidebar={<LiquiditySidebar />}
-        />
-      ),
-      id: AppRoutes.LIQUIDITY,
-      children: [
-        {
-          path: ':marketId',
-          element: <Liquidity />,
-        },
-      ],
-    },
-    {
-      path: '*',
-      element: <NotFound />,
-    },
-  ]);
-};
+  {
+    path: 'liquidity/*',
+    element: (
+      <LayoutWithSidebar
+        header={<LiquidityHeader />}
+        sidebar={<LiquiditySidebar />}
+      />
+    ),
+    id: AppRoutes.LIQUIDITY,
+    children: [
+      {
+        path: ':marketId',
+        element: <Liquidity />,
+      },
+    ],
+  },
+  {
+    path: '*',
+    element: <NotFound />,
+  },
+]);
 
 export const ClientRouter = () => {
-  const routes = useRoutes(useRouterConfig());
+  const routes = useRoutes(routerConfig);
   return (
     <Suspense
       fallback={

apps/trading/pages/dialogs-container.tsx

@@ -3,7 +3,7 @@ import {
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
 import { VegaConnectDialog, ViewAsDialog } from '@vegaprotocol/wallet';
-import { useConnectors } from '../lib/vega-connectors';
+import { Connectors } from '../lib/vega-connectors';
 import {
   Web3ConnectUncontrolledDialog,
   WithdrawalApprovalDialogContainer,
@@ -13,14 +13,13 @@ import { RiskMessage } from '../components/welcome-dialog';
 
 const DialogsContainer = () => {
   const { isOpen, id, trigger, setOpen } = useAssetDetailsDialogStore();
-  const connectors = useConnectors();
   return (
     <>
       <VegaConnectDialog
-        connectors={connectors}
+        connectors={Connectors}
         riskMessage={<RiskMessage />}
       />
-      <ViewAsDialog connector={connectors.view} />
+      <ViewAsDialog connector={Connectors.view} />
       <AssetDetailsDialog
         assetId={id}
         trigger={trigger || null}

apps/trading/pages/maybe-connect-eagerly.tsx

@@ -7,14 +7,13 @@ import {
   useVegaWallet,
 } from '@vegaprotocol/wallet';
 import { useGlobalStore } from '../stores';
-import { useConnectors } from '../lib/vega-connectors';
+import { Connectors } from '../lib/vega-connectors';
 import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
 
 export const MaybeConnectEagerly = () => {
   const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
   const update = useGlobalStore((store) => store.update);
-  const connectors = useConnectors();
-  const eagerConnecting = useVegaEagerConnect(connectors);
+  const eagerConnecting = useVegaEagerConnect(Connectors);
   const [isTelemetryApproved] = useTelemetryApproval();
   useEthereumEagerConnect(
     isTelemetryApproved ? { dsn: SENTRY_DSN, env: VEGA_ENV } : {}
@@ -24,7 +23,7 @@ export const MaybeConnectEagerly = () => {
   const [searchParams] = useSearchParams();
   const [query] = useState(searchParams.get('address'));
   if (query && !pubKey) {
-    connect(connectors.view);
+    connect(Connectors['view']);
   }
   useEffect(() => {
     update({ eagerConnecting });

libs/candles-chart/src/lib/candles-chart.tsx

@@ -1,52 +1,43 @@
 import 'pennant/dist/style.css';
-import {
-  CandlestickChart,
-  type Overlay,
-  type ChartType,
-  type Interval,
-  type Study,
-} from 'pennant';
+import { CandlestickChart } from 'pennant';
 import { VegaDataSource } from './data-source';
 import { useApolloClient } from '@apollo/client';
 import { useMemo } from 'react';
 import debounce from 'lodash/debounce';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import {
+  STUDY_SIZE,
+  useCandlesChartSettings,
+} from './use-candles-chart-settings';
 import { useT } from './use-t';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 
 export type CandlesChartContainerProps = {
   marketId: string;
-  interval: Interval;
-  chartType: ChartType;
-  overlays: Overlay[];
-  studies: Study[];
-  studySizes: number[];
-  defaultStudySize: number;
-  setStudies: (studies?: Study[]) => void;
-  setStudySizes: (sizes: number[]) => void;
-  setOverlays: (overlays?: Overlay[]) => void;
 };
 
 const CANDLES_TO_WIDTH_FACTOR = 0.2;
 
 export const CandlesChartContainer = ({
   marketId,
-  interval,
-  chartType,
-  overlays,
-  studies,
-  studySizes,
-  defaultStudySize,
-  setStudies,
-  setStudySizes,
-  setOverlays,
 }: CandlesChartContainerProps) => {
   const client = useApolloClient();
   const { pubKey } = useVegaWallet();
   const { theme } = useThemeSwitcher();
   const t = useT();
 
+  const {
+    interval,
+    chartType,
+    overlays,
+    studies,
+    studySizes,
+    setStudies,
+    setStudySizes,
+    setOverlays,
+  } = useCandlesChartSettings();
+
   const handlePaneChange = useMemo(
     () =>
       debounce((sizes: number[]) => {
@@ -78,7 +69,7 @@ export const CandlesChartContainer = ({
                   </span>
                 ),
                 initialNumCandlesToDisplay: candlesCount,
-                studySize: defaultStudySize,
+                studySize: STUDY_SIZE,
                 studySizes,
               }}
               interval={interval}

libs/candles-chart/src/lib/candles-menu.spec.tsx

@@ -0,0 +1,85 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CandlesMenu } from './candles-menu';
+import {
+  useCandlesChartSettingsStore,
+  DEFAULT_CHART_SETTINGS,
+} from './use-candles-chart-settings';
+import { Overlay, Study, overlayLabels, studyLabels } from 'pennant';
+
+describe('CandlesMenu', () => {
+  const openDropdown = async () => {
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Indicators',
+      })
+    );
+  };
+
+  beforeEach(() => {
+    // clear store each time to avoid conditional testing of defaults
+    useCandlesChartSettingsStore.setState({ overlays: [], studies: [] });
+  });
+
+  it.each(Object.values(Overlay))('can set %s overlay', async (overlay) => {
+    render(<CandlesMenu />);
+
+    await openDropdown();
+
+    const menu = within(await screen.findByRole('menu'));
+
+    await userEvent.click(menu.getByText(overlayLabels[overlay as Overlay]));
+
+    // re-open the dropdown
+    await openDropdown();
+
+    expect(screen.getByText(overlayLabels[overlay as Overlay])).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+
+  it.each(Object.values(Study))('can set %s study', async (study) => {
+    render(<CandlesMenu />);
+
+    await openDropdown();
+
+    const menu = within(await screen.findByRole('menu'));
+
+    await userEvent.click(menu.getByText(studyLabels[study as Study]));
+
+    // re-open the dropdown
+    await openDropdown();
+
+    expect(screen.getByText(studyLabels[study as Study])).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+
+  it('should render with the correct default studies and overlays', async () => {
+    useCandlesChartSettingsStore.setState(DEFAULT_CHART_SETTINGS);
+
+    render(<CandlesMenu />);
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Indicators',
+      })
+    );
+    const menu = within(await screen.findByRole('menu'));
+
+    expect(menu.getByText(studyLabels.volume)).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(menu.getByText(studyLabels.macd)).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(menu.getByText(overlayLabels.movingAverage)).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+});

libs/candles-chart/src/lib/candles-menu.tsx

@@ -1,12 +1,14 @@
+import 'pennant/dist/style.css';
 import {
   ChartType,
+  Interval,
   Overlay,
   Study,
   chartTypeLabels,
+  intervalLabels,
   overlayLabels,
   studyLabels,
 } from 'pennant';
-import { Trans } from 'react-i18next';
 import {
   TradingButton,
   TradingDropdown,
@@ -18,21 +20,10 @@ import {
   TradingDropdownTrigger,
   Icon,
 } from '@vegaprotocol/ui-toolkit';
-import { Interval } from '@vegaprotocol/types';
-import { useEnvironment } from '@vegaprotocol/environment';
-import { ALLOWED_TRADINGVIEW_HOSTNAMES } from '@vegaprotocol/trading-view';
-import { IconNames, type IconName } from '@blueprintjs/icons';
-import { useChartSettings } from './use-chart-settings';
-import { useT } from '../../lib/use-t';
-
-const INTERVALS = [
-  Interval.INTERVAL_I1M,
-  Interval.INTERVAL_I5M,
-  Interval.INTERVAL_I15M,
-  Interval.INTERVAL_I1H,
-  Interval.INTERVAL_I6H,
-  Interval.INTERVAL_I1D,
-];
+import { type IconName } from '@blueprintjs/icons';
+import { IconNames } from '@blueprintjs/icons';
+import { useCandlesChartSettings } from './use-candles-chart-settings';
+import { useT } from './use-t';
 
 const chartTypeIcon = new Map<ChartType, IconName>([
   [ChartType.AREA, IconNames.TIMELINE_AREA_CHART],
@@ -41,46 +32,30 @@ const chartTypeIcon = new Map<ChartType, IconName>([
   [ChartType.OHLC, IconNames.WATERFALL_CHART],
 ]);
 
-export const ChartMenu = () => {
-  const { CHARTING_LIBRARY_PATH } = useEnvironment();
+export const CandlesMenu = () => {
   const {
-    chartlib,
     interval,
     chartType,
     studies,
     overlays,
-    setChartlib,
     setInterval,
     setType,
     setStudies,
     setOverlays,
-  } = useChartSettings();
+  } = useCandlesChartSettings();
   const t = useT();
-
-  const contentAlign = 'end';
   const triggerClasses = 'text-xs';
+  const contentAlign = 'end';
   const triggerButtonProps = { size: 'extra-small' } as const;
 
-  const isPennant = chartlib === 'pennant';
-  const commonMenuItems = (
-    <TradingButton
-      onClick={() => {
-        setChartlib(isPennant ? 'tradingview' : 'pennant');
-      }}
-      size="extra-small"
-    >
-      {isPennant ? 'TradingView' : t('Vega chart')}
-    </TradingButton>
-  );
-
-  const pennantMenuItems = (
+  return (
     <>
       <TradingDropdown
         trigger={
           <TradingDropdownTrigger className={triggerClasses}>
             <TradingButton {...triggerButtonProps}>
               {t('Interval: {{interval}}', {
-                interval: t(interval),
+                interval: intervalLabels[interval],
               })}
             </TradingButton>
           </TradingDropdownTrigger>
@@ -93,13 +68,13 @@ export const ChartMenu = () => {
               setInterval(value as Interval);
             }}
           >
-            {INTERVALS.map((timeInterval) => (
+            {Object.values(Interval).map((timeInterval) => (
               <TradingDropdownRadioItem
                 key={timeInterval}
                 inset
                 value={timeInterval}
               >
-                {t(timeInterval)}
+                {intervalLabels[timeInterval]}
                 <TradingDropdownItemIndicator />
               </TradingDropdownRadioItem>
             ))}
@@ -183,50 +158,4 @@ export const ChartMenu = () => {
       </TradingDropdown>
     </>
   );
-
-  const tradingViewMenuItems = (
-    <p className="text-xs mr-2 whitespace-nowrap">
-      <Trans
-        i18nKey="Chart by <0>TradingView</0>"
-        components={[
-          // eslint-disable-next-line
-          <a
-            className="underline"
-            target="_blank"
-            href="https://www.tradingview.com"
-          />,
-        ]}
-      />
-    </p>
-  );
-
-  if (!ALLOWED_TRADINGVIEW_HOSTNAMES.includes(window.location.hostname)) {
-    return pennantMenuItems;
-  }
-
-  if (!CHARTING_LIBRARY_PATH) {
-    return pennantMenuItems;
-  }
-
-  switch (chartlib) {
-    case 'tradingview': {
-      return (
-        <>
-          {tradingViewMenuItems}
-          {commonMenuItems}
-        </>
-      );
-    }
-    case 'pennant': {
-      return (
-        <>
-          {pennantMenuItems}
-          {commonMenuItems}
-        </>
-      );
-    }
-    default: {
-      throw new Error('invalid chart lib');
-    }
-  }
 };

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

@@ -1,12 +0,0 @@
-import { Interval as PennantInterval } from 'pennant';
-import { Interval } from '@vegaprotocol/types';
-
-export const PENNANT_INTERVAL_MAP = {
-  [Interval.INTERVAL_BLOCK]: undefined, // TODO: handle block tick
-  [Interval.INTERVAL_I1M]: PennantInterval.I1M,
-  [Interval.INTERVAL_I5M]: PennantInterval.I5M,
-  [Interval.INTERVAL_I15M]: PennantInterval.I15M,
-  [Interval.INTERVAL_I1H]: PennantInterval.I1H,
-  [Interval.INTERVAL_I6H]: PennantInterval.I6H,
-  [Interval.INTERVAL_I1D]: PennantInterval.I1D,
-} as const;

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

@@ -1,5 +1,5 @@
 export * from './__generated__/Candles';
 export * from './__generated__/Chart';
 export * from './candles-chart';
-export { PENNANT_INTERVAL_MAP } from './constants';
+export * from './candles-menu';
 export * from './data-source';

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -1,23 +1,18 @@
-import { ChartType, Overlay, Study } from 'pennant';
+import { getValidItem, getValidSubset } from '@vegaprotocol/react-helpers';
+import { ChartType, Interval, Study } from 'pennant';
+import { Overlay } from 'pennant';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
-import { Interval } from '@vegaprotocol/types';
-import { getValidItem, getValidSubset } from '@vegaprotocol/react-helpers';
 
 type StudySizes = { [S in Study]?: number };
-export type Chartlib = 'pennant' | 'tradingview';
 
 interface StoredSettings {
-  chartlib: Chartlib;
-  // For interval we use the enum from @vegaprotocol/types, this is to make mapping between different
-  // chart types easier and more consistent
   interval: Interval;
   type: ChartType;
   overlays: Overlay[];
   studies: Study[];
   studySizes: StudySizes;
-  tradingViewStudies: string[];
 }
 
 export const STUDY_SIZE = 90;
@@ -30,24 +25,20 @@ const STUDY_ORDER: Study[] = [
 ];
 
 export const DEFAULT_CHART_SETTINGS = {
-  chartlib: 'pennant' as const,
-  interval: Interval.INTERVAL_I15M,
+  interval: Interval.I15M,
   type: ChartType.CANDLE,
   overlays: [Overlay.MOVING_AVERAGE],
   studies: [Study.MACD, Study.VOLUME],
   studySizes: {},
-  tradingViewStudies: ['Volume'],
 };
 
-export const useChartSettingsStore = create<
+export const useCandlesChartSettingsStore = create<
   StoredSettings & {
     setType: (type: ChartType) => void;
     setInterval: (interval: Interval) => void;
     setOverlays: (overlays?: Overlay[]) => void;
     setStudies: (studies?: Study[]) => void;
     setStudySizes: (sizes: number[]) => void;
-    setChartlib: (lib: Chartlib) => void;
-    setTradingViewStudies: (studies: string[]) => void;
   }
 >()(
   persist(
@@ -90,16 +81,6 @@ export const useChartSettingsStore = create<
           });
         });
       },
-      setChartlib: (lib) => {
-        set((state) => {
-          state.chartlib = lib;
-        });
-      },
-      setTradingViewStudies: (studies: string[]) => {
-        set((state) => {
-          state.tradingViewStudies = studies;
-        });
-      },
     })),
     {
       name: 'vega_candles_chart_store',
@@ -107,13 +88,13 @@ export const useChartSettingsStore = create<
   )
 );
 
-export const useChartSettings = () => {
-  const settings = useChartSettingsStore();
+export const useCandlesChartSettings = () => {
+  const settings = useCandlesChartSettingsStore();
 
   const interval: Interval = getValidItem(
     settings.interval,
     Object.values(Interval),
-    Interval.INTERVAL_I15M
+    Interval.I15M
   );
 
   const chartType: ChartType = getValidItem(
@@ -141,19 +122,15 @@ export const useChartSettings = () => {
   });
 
   return {
-    chartlib: settings.chartlib,
     interval,
     chartType,
     overlays,
     studies,
     studySizes,
-    tradingViewStudies: settings.tradingViewStudies,
     setInterval: settings.setInterval,
     setType: settings.setType,
     setStudies: settings.setStudies,
     setOverlays: settings.setOverlays,
     setStudySizes: settings.setStudySizes,
-    setChartlib: settings.setChartlib,
-    setTradingViewStudies: settings.setTradingViewStudies,
   };
 };

libs/data-provider/src/generic-data-provider.ts

@@ -153,8 +153,7 @@ interface DataProviderParams<
   pagination?: {
     getPageInfo: GetPageInfo<QueryData>;
     append: Append<Data>;
-    first?: number;
-    last?: number;
+    first: number;
   };
   fetchPolicy?: FetchPolicy;
   resetDelay?: number;

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

@@ -11,7 +11,7 @@ import {
 } from '@vegaprotocol/markets';
 import { AsyncRendererInline } from '@vegaprotocol/ui-toolkit';
 import { DealTicket } from './deal-ticket';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { useT } from '../../use-t';
 
 interface DealTicketContainerProps {
@@ -24,7 +24,6 @@ export const DealTicketContainer = ({
   marketId,
   ...props
 }: DealTicketContainerProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const showStopOrder = useDealTicketFormValues((state) =>
     isStopOrderType(state.formValues[marketId]?.type)
@@ -51,7 +50,7 @@ export const DealTicketContainer = ({
       reload={reload}
     >
       {market && marketData ? (
-        featureFlags.STOP_ORDERS && showStopOrder ? (
+        FLAGS.STOP_ORDERS && showStopOrder ? (
           <StopOrder
             market={market}
             marketPrice={marketPrice}

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.spec.tsx

@@ -11,7 +11,7 @@ import {
   DealTicketType,
   useDealTicketFormValues,
 } from '../../hooks/use-form-values';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import type { FeatureFlags } from '@vegaprotocol/environment';
 import { formatForInput } from '@vegaprotocol/utils';
 
 jest.mock('zustand');
@@ -19,6 +19,17 @@ jest.mock('./deal-ticket-fee-details', () => ({
   DealTicketFeeDetails: () => <div data-testid="deal-ticket-fee-details" />,
 }));
 
+jest.mock('@vegaprotocol/environment', () => {
+  const actual = jest.requireActual('@vegaprotocol/environment');
+  return {
+    ...actual,
+    FLAGS: {
+      ...actual.FLAGS,
+      STOP_ORDERS: true,
+    } as FeatureFlags,
+  };
+});
+
 const marketPrice = '200';
 const market = generateMarket();
 const submit = jest.fn();
@@ -83,7 +94,6 @@ jest.mock('@vegaprotocol/data-provider', () => ({
 describe('StopOrder', () => {
   beforeEach(() => {
     localStorage.clear();
-    useFeatureFlags.setState({ flags: { STOP_ORDERS: true } });
   });
 
   afterEach(() => {

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

@@ -18,7 +18,7 @@ import { MarketModeValidationType } from '../../constants';
 import { DealTicketType } from '../../hooks/use-form-values';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import classNames from 'classnames';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { Trans } from 'react-i18next';
 import { useT, ns } from '../../use-t';
 
@@ -49,7 +49,6 @@ export const TypeToggle = ({
   value,
   onValueChange,
 }: Pick<TypeSelectorProps, 'onValueChange' | 'value'>) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const options = useOptions();
   const toggles = useToggles();
@@ -58,8 +57,8 @@ export const TypeToggle = ({
     <RadioGroup.Root
       name="order-type"
       className={classNames('mb-2 grid h-8 leading-8 font-alpha text-xs', {
-        'grid-cols-3': featureFlags.STOP_ORDERS,
-        'grid-cols-2': !featureFlags.STOP_ORDERS,
+        'grid-cols-3': FLAGS.STOP_ORDERS,
+        'grid-cols-2': !FLAGS.STOP_ORDERS,
       })}
       value={value}
       onValueChange={onValueChange}
@@ -81,7 +80,7 @@ export const TypeToggle = ({
           </button>
         </RadioGroup.Item>
       ))}
-      {featureFlags.STOP_ORDERS && (
+      {FLAGS.STOP_ORDERS && (
         <TradingDropdown
           trigger={
             <TradingDropdownTrigger

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

@@ -3,13 +3,7 @@ import { act } from 'react-dom/test-utils';
 import type { ClientOptions } from '@vegaprotocol/apollo-client';
 import { createClient } from '@vegaprotocol/apollo-client';
 import { Networks } from '../types';
-import {
-  STORAGE_KEY,
-  useEnvironment,
-  featureFlagsLocalStorageKey,
-  getUserEnabledFeatureFlags,
-  setUserEnabledFeatureFlag,
-} from './use-environment';
+import { STORAGE_KEY, useEnvironment } from './use-environment';
 
 const noop = () => {
   /* no op*/
@@ -465,30 +459,3 @@ describe('useEnvironment', () => {
     expect(localStorage.getItem(STORAGE_KEY)).toBe(newUrl);
   });
 });
-
-describe('getUserEnabledFeatureFlags', () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
-  it('reads enabled flags from local storage', () => {
-    localStorage.setItem(
-      featureFlagsLocalStorageKey,
-      'STOP_ORDERS,STOP_ORDERS,REFERRALS,BLAH'
-    );
-    const userEnabledFlags = getUserEnabledFeatureFlags(true, ['STOP_ORDERS']);
-    expect(userEnabledFlags).toEqual(['STOP_ORDERS']);
-  });
-});
-
-describe('setUserEnabledFeatureFlag', () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
-  it('saves enabled flags to local storage', () => {
-    setUserEnabledFeatureFlag('STOP_ORDERS', true);
-    expect(localStorage.getItem(featureFlagsLocalStorageKey)).toEqual(
-      'STOP_ORDERS'
-    );
-    expect(getUserEnabledFeatureFlags()).toEqual(['STOP_ORDERS']);
-  });
-});

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

@@ -40,478 +40,12 @@ const VERSION = 1;
 export const STORAGE_KEY = `vega_url_${VERSION}`;
 const SUBSCRIPTION_TIMEOUT = 3000;
 
-/**
- * Fetch and validate a vega node configuration
- */
-const fetchConfig = async (url?: string) => {
-  if (!url) return [];
-  const res = await fetch(url);
-  const content = await res.text();
-  const parsed = tomlParse(content);
-  const tomlResults = tomlConfigSchema.parse(parsed);
-  const {
-    API: {
-      GraphQL: { Hosts },
-    },
-  } = tomlResults;
-  return Hosts;
-};
-
-/**
- * Find a suitable node by running a test query and test
- * subscription, against a list of clients, first to resolve wins
- */
-const findNode = async (clients: ClientCollection): Promise<string | null> => {
-  const tests = Object.entries(clients).map((args) => testNode(...args));
-  try {
-    const url = await Promise.any(tests);
-    return url;
-  } catch {
-    // All tests rejected, no suitable node found
-    return null;
-  }
-};
-
-/**
- * Test a node for suitability for connection
- */
-const testNode = async (
-  url: string,
-  client: Client
-): Promise<string | null> => {
-  const results = await Promise.all([
-    // these promises will only resolve with true/false
-    testQuery(client),
-    testSubscription(client),
-  ]);
-  if (results[0] && results[1]) {
-    return url;
-  }
-
-  const message = `Tests failed for node: ${url}`;
-  console.warn(message);
-
-  // throwing here will mean this tests is ignored and a different
-  // node that hopefully does resolve will fulfill the Promise.any
-  throw new Error(message);
-};
-
-/**
- * Run a test query on a client
- */
-const testQuery = async (client: Client) => {
-  try {
-    const result = await client.query<NodeCheckQuery>({
-      query: NodeCheckDocument,
-    });
-    if (!result || result.error) {
-      return false;
-    }
-    return true;
-  } catch (err) {
-    return false;
-  }
-};
-
-/**
- * Run a test subscription on a client. A subscription
- * that takes longer than SUBSCRIPTION_TIMEOUT ms to respond
- * is deemed a failure
- */
-const testSubscription = (client: Client) => {
-  return new Promise((resolve) => {
-    const sub = client
-      .subscribe<NodeCheckTimeUpdateSubscription>({
-        query: NodeCheckTimeUpdateDocument,
-        errorPolicy: 'all',
-      })
-      .subscribe({
-        next: () => {
-          resolve(true);
-          sub.unsubscribe();
-        },
-        error: () => {
-          resolve(false);
-          sub.unsubscribe();
-        },
-      });
-
-    setTimeout(() => {
-      resolve(false);
-      sub.unsubscribe();
-    }, SUBSCRIPTION_TIMEOUT);
-  });
-};
-
-export const userControllableFeatureFlags: (keyof FeatureFlags)[] = [];
-
-/**
- * Retrieve env vars, parsing where needed some type casting is needed
- * here to appease the environment store interface
- */
-const compileEnvVars = () => {
-  const VEGA_ENV = windowOrDefault(
-    'VEGA_ENV',
-    process.env['NX_VEGA_ENV']
-  ) as Networks;
-
-  const env: Environment = {
-    VEGA_URL: windowOrDefault('VEGA_URL', process.env['NX_VEGA_URL']),
-    VEGA_ENV,
-    VEGA_CONFIG_URL: windowOrDefault(
-      'VEGA_CONFIG_URL',
-      process.env['NX_VEGA_CONFIG_URL'] as string
-    ),
-    VEGA_NETWORKS: parseNetworks(
-      windowOrDefault('VEGA_NETWORKS', process.env['NX_VEGA_NETWORKS'])
-    ),
-    VEGA_WALLET_URL: windowOrDefault(
-      'VEGA_WALLET_URL',
-      process.env['NX_VEGA_WALLET_URL'] as string
-    ),
-    HOSTED_WALLET_URL: windowOrDefault(
-      'HOSTED_WALLET_URL',
-      process.env['NX_HOSTED_WALLET_URL']
-    ),
-    ETHERSCAN_URL: getEtherscanUrl(
-      VEGA_ENV,
-      windowOrDefault('ETHERSCAN_URL', process.env['NX_ETHERSCAN_URL'])
-    ),
-    ETHEREUM_PROVIDER_URL: getEthereumProviderUrl(
-      VEGA_ENV,
-      windowOrDefault(
-        'ETHEREUM_PROVIDER_URL',
-        process.env['NX_ETHEREUM_PROVIDER_URL']
-      )
-    ),
-    ETH_LOCAL_PROVIDER_URL: windowOrDefault(
-      'ETH_LOCAL_PROVIDER_URL',
-      process.env['NX_ETH_LOCAL_PROVIDER_URL']
-    ),
-    ETH_WALLET_MNEMONIC: windowOrDefault(
-      'ETH_WALLET_MNEMONIC',
-      process.env['NX_ETH_WALLET_MNEMONIC']
-    ),
-    ORACLE_PROOFS_URL: windowOrDefault(
-      'ORACLE_PROOFS_URL',
-      process.env['NX_ORACLE_PROOFS_URL']
-    ),
-    VEGA_DOCS_URL: windowOrDefault(
-      'VEGA_DOCS_URL',
-      process.env['NX_VEGA_DOCS_URL']
-    ),
-    VEGA_CONSOLE_URL: windowOrDefault(
-      'VEGA_CONSOLE_URL',
-      process.env['NX_VEGA_CONSOLE_URL']
-    ),
-    VEGA_EXPLORER_URL: windowOrDefault(
-      'VEGA_EXPLORER_URL',
-      process.env['NX_VEGA_EXPLORER_URL']
-    ),
-    VEGA_TOKEN_URL: windowOrDefault(
-      'VEGA_TOKEN_URL',
-      process.env['NX_VEGA_TOKEN_URL']
-    ),
-    GITHUB_FEEDBACK_URL: windowOrDefault(
-      'GITHUB_FEEDBACK_URL',
-      process.env['NX_GITHUB_FEEDBACK_URL']
-    ),
-    GIT_BRANCH: windowOrDefault(
-      'GIT_COMMIT_BRANCH',
-      process.env['GIT_COMMIT_BRANCH']
-    ),
-    GIT_COMMIT_HASH: windowOrDefault(
-      'GIT_COMMIT_HASH',
-      process.env['GIT_COMMIT_HASH']
-    ),
-    GIT_ORIGIN_URL: windowOrDefault(
-      'GIT_ORIGIN_URL',
-      process.env['GIT_ORIGIN_URL']
-    ),
-    ANNOUNCEMENTS_CONFIG_URL: windowOrDefault(
-      'ANNOUNCEMENTS_CONFIG_URL',
-      process.env['NX_ANNOUNCEMENTS_CONFIG_URL']
-    ),
-    VEGA_INCIDENT_URL: windowOrDefault(
-      'VEGA_INCIDENT_URL',
-      process.env['NX_VEGA_INCIDENT_URL']
-    ),
-    APP_VERSION: windowOrDefault('APP_VERSION', process.env['NX_APP_VERSION']),
-    SENTRY_DSN: windowOrDefault('SENTRY_DSN', process.env['NX_SENTRY_DSN']),
-    TENDERMINT_URL: windowOrDefault(
-      'NX_TENDERMINT_URL',
-      process.env['NX_TENDERMINT_URL']
-    ),
-    TENDERMINT_WEBSOCKET_URL: windowOrDefault(
-      'NX_TENDERMINT_WEBSOCKET_URL',
-      process.env['NX_TENDERMINT_WEBSOCKET_URL']
-    ),
-    CHROME_EXTENSION_URL: windowOrDefault(
-      'NX_CHROME_EXTENSION_URL',
-      process.env['NX_CHROME_EXTENSION_URL']
-    ),
-    MOZILLA_EXTENSION_URL: windowOrDefault(
-      'NX_MOZILLA_EXTENSION_URL',
-      process.env['NX_MOZILLA_EXTENSION_URL']
-    ),
-    CHARTING_LIBRARY_PATH: windowOrDefault(
-      'NX_CHARTING_LIBRARY_PATH',
-      process.env['NX_CHARTING_LIBRARY_PATH']
-    ),
-    CHARTING_LIBRARY_HASH: windowOrDefault(
-      'NX_CHARTING_LIBRARY_HASH',
-      process.env['NX_CHARTING_LIBRARY_HASH']
-    ),
-  };
-
-  return env;
-};
-
-export const featureFlagsLocalStorageKey = 'vega_feature_flags';
-let userEnabledFeatureFlags: (keyof FeatureFlags)[] | undefined = undefined;
-
-export const setUserEnabledFeatureFlag = (
-  flag: keyof FeatureFlags,
-  enabled = false
-) => {
-  const enabledFlags = getUserEnabledFeatureFlags();
-  if (enabled && !enabledFlags.includes(flag)) {
-    enabledFlags.push(flag);
-  }
-  if (!enabled && enabledFlags.includes(flag)) {
-    enabledFlags.splice(enabledFlags.indexOf(flag), 1);
-  }
-  userEnabledFeatureFlags = enabledFlags;
-  if (typeof window !== 'undefined') {
-    window.localStorage.setItem(
-      featureFlagsLocalStorageKey,
-      enabledFlags.join(',')
-    );
-  }
-};
-
-export const getUserEnabledFeatureFlags = (
-  refresh = false,
-  allowedFlags = userControllableFeatureFlags
-): (keyof FeatureFlags)[] => {
-  if (typeof window === 'undefined') {
-    return [];
-  }
-  if (typeof userEnabledFeatureFlags !== 'undefined' && !refresh) {
-    return userEnabledFeatureFlags;
-  }
-  const enabledFlags = window.localStorage.getItem(featureFlagsLocalStorageKey);
-  userEnabledFeatureFlags = enabledFlags
-    ? uniq(
-        (enabledFlags.split(',') as (keyof FeatureFlags)[]).filter((flag) =>
-          allowedFlags.includes(flag)
-        )
-      )
-    : [];
-  return userEnabledFeatureFlags;
-};
-
-const TRUTHY = ['1', 'true'];
-export const compileFeatureFlags = (refresh = false): FeatureFlags => {
-  const COSMIC_ELEVATOR_FLAGS: CosmicElevatorFlags = {
-    ICEBERG_ORDERS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_ICEBERG_ORDERS',
-        process.env['NX_ICEBERG_ORDERS']
-      ) as string
-    ),
-    STOP_ORDERS: TRUTHY.includes(
-      windowOrDefault('NX_STOP_ORDERS', process.env['NX_STOP_ORDERS']) as string
-    ),
-    SUCCESSOR_MARKETS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_SUCCESSOR_MARKETS',
-        process.env['NX_SUCCESSOR_MARKETS']
-      ) as string
-    ),
-    PRODUCT_PERPETUALS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_PRODUCT_PERPETUALS',
-        process.env['NX_PRODUCT_PERPETUALS']
-      ) as string
-    ),
-    METAMASK_SNAPS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_METAMASK_SNAPS',
-        process.env['NX_METAMASK_SNAPS']
-      ) as string
-    ),
-    REFERRALS: TRUTHY.includes(
-      windowOrDefault('NX_REFERRALS', process.env['NX_REFERRALS']) as string
-    ),
-    DISABLE_CLOSE_POSITION: TRUTHY.includes(
-      windowOrDefault(
-        'NX_DISABLE_CLOSE_POSITION',
-        process.env['NX_DISABLE_CLOSE_POSITION']
-      ) as string
-    ),
-    UPDATE_MARKET_STATE: TRUTHY.includes(
-      windowOrDefault(
-        'NX_UPDATE_MARKET_STATE',
-        process.env['NX_UPDATE_MARKET_STATE']
-      ) as string
-    ),
-    GOVERNANCE_TRANSFERS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_GOVERNANCE_TRANSFERS',
-        process.env['NX_GOVERNANCE_TRANSFERS']
-      ) as string
-    ),
-    VOLUME_DISCOUNTS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_VOLUME_DISCOUNTS',
-        process.env['NX_VOLUME_DISCOUNTS']
-      ) as string
-    ),
-  };
-
-  const EXPLORER_FLAGS = {
-    EXPLORER_ASSETS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_ASSETS',
-        process.env['NX_EXPLORER_ASSETS']
-      ) as string
-    ),
-    EXPLORER_GENESIS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_GENESIS',
-        process.env['NX_EXPLORER_GENESIS']
-      ) as string
-    ),
-    EXPLORER_GOVERNANCE: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_GOVERNANCE',
-        process.env['NX_EXPLORER_GOVERNANCE']
-      ) as string
-    ),
-    EXPLORER_MARKETS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_MARKETS',
-        process.env['NX_EXPLORER_MARKETS']
-      ) as string
-    ),
-    EXPLORER_ORACLES: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_ORACLES',
-        process.env['NX_EXPLORER_ORACLES']
-      ) as string
-    ),
-    EXPLORER_TXS_LIST: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_TXS_LIST',
-        process.env['NX_EXPLORER_TXS_LIST']
-      ) as string
-    ),
-    EXPLORER_NETWORK_PARAMETERS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_NETWORK_PARAMETERS',
-        process.env['NX_EXPLORER_NETWORK_PARAMETERS']
-      ) as string
-    ),
-    EXPLORER_PARTIES: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_PARTIES',
-        process.env['NX_EXPLORER_PARTIES']
-      ) as string
-    ),
-    EXPLORER_VALIDATORS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_EXPLORER_VALIDATORS',
-        process.env['NX_EXPLORER_VALIDATORS']
-      ) as string
-    ),
-  };
-
-  const GOVERNANCE_FLAGS = {
-    GOVERNANCE_NETWORK_DOWN: TRUTHY.includes(
-      windowOrDefault(
-        'NX_NETWORK_DOWN',
-        process.env['NX_NETWORK_DOWN']
-      ) as string
-    ),
-    GOVERNANCE_NETWORK_LIMITS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_GOVERNANCE_NETWORK_LIMITS',
-        process.env['NX_GOVERNANCE_NETWORK_LIMITS']
-      ) as string
-    ),
-  };
-  const flags = {
-    ...COSMIC_ELEVATOR_FLAGS,
-    ...EXPLORER_FLAGS,
-    ...GOVERNANCE_FLAGS,
-  };
-  getUserEnabledFeatureFlags(refresh).forEach((flag) => (flags[flag] = true));
-  return flags;
-};
-
-const parseNetworks = (value?: string) => {
-  if (value) {
-    try {
-      return JSON.parse(value);
-    } catch (e) {
-      return {};
-    }
-  }
-  return {};
-};
-
-/**
- * Provides a fallback ethereum provider url for test purposes in some apps
- */
-const getEthereumProviderUrl = (
-  network: Networks | undefined,
-  envvar: string | undefined
-) => {
-  if (envvar) return envvar;
-  return network === Networks.MAINNET
-    ? 'https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'
-    : 'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8';
-};
-/**
- * Provide a fallback etherscan url for test purposes in some apps
- */
-const getEtherscanUrl = (
-  network: Networks | undefined,
-  envvar: string | undefined
-) => {
-  if (envvar) return envvar;
-  return network === Networks.MAINNET
-    ? 'https://etherscan.io'
-    : 'https://sepolia.etherscan.io';
-};
-
-const windowOrDefault = (key: string, defaultValue?: string) => {
-  if (typeof window !== 'undefined') {
-    // @ts-ignore avoid conflict in env
-    if (window._env_ && window._env_[key]) {
-      // @ts-ignore presence has been check above
-      return window._env_[key];
-    }
-  }
-  return defaultValue || undefined;
-};
-
-export const useFeatureFlags = create<{
-  flags: FeatureFlags;
-  setFeatureFlag: (flag: keyof FeatureFlags, enabled: boolean) => void;
-}>()((set, get) => ({
-  flags: compileFeatureFlags(),
-  setFeatureFlag: (flag: keyof FeatureFlags, enabled: boolean) => {
-    if (userControllableFeatureFlags.includes(flag)) {
-      setUserEnabledFeatureFlag(flag, enabled);
-      set({ flags: { ...get().flags, [flag]: enabled } });
-    }
-  },
-}));
+export const ENV = compileEnvVars();
+export const FLAGS = compileFeatureFlags();
 
 export const useEnvironment = create<EnvStore>()((set, get) => ({
   ...compileEnvVars(),
+  ...compileFeatureFlags(),
   nodes: [],
   status: 'default',
   error: null,
@@ -632,4 +166,400 @@ export const useInitializeEnv = () => {
   }, [status, initialize]);
 };
 
-export const ENV = compileEnvVars();
+/**
+ * Fetch and validate a vega node configuration
+ */
+const fetchConfig = async (url?: string) => {
+  if (!url) return [];
+  const res = await fetch(url);
+  const content = await res.text();
+  const parsed = tomlParse(content);
+  const tomlResults = tomlConfigSchema.parse(parsed);
+  const {
+    API: {
+      GraphQL: { Hosts },
+    },
+  } = tomlResults;
+  return Hosts;
+};
+
+/**
+ * Find a suitable node by running a test query and test
+ * subscription, against a list of clients, first to resolve wins
+ */
+const findNode = async (clients: ClientCollection): Promise<string | null> => {
+  const tests = Object.entries(clients).map((args) => testNode(...args));
+  try {
+    const url = await Promise.any(tests);
+    return url;
+  } catch {
+    // All tests rejected, no suitable node found
+    return null;
+  }
+};
+
+/**
+ * Test a node for suitability for connection
+ */
+const testNode = async (
+  url: string,
+  client: Client
+): Promise<string | null> => {
+  const results = await Promise.all([
+    // these promises will only resolve with true/false
+    testQuery(client),
+    testSubscription(client),
+  ]);
+  if (results[0] && results[1]) {
+    return url;
+  }
+
+  const message = `Tests failed for node: ${url}`;
+  console.warn(message);
+
+  // throwing here will mean this tests is ignored and a different
+  // node that hopefully does resolve will fulfill the Promise.any
+  throw new Error(message);
+};
+
+/**
+ * Run a test query on a client
+ */
+const testQuery = async (client: Client) => {
+  try {
+    const result = await client.query<NodeCheckQuery>({
+      query: NodeCheckDocument,
+    });
+    if (!result || result.error) {
+      return false;
+    }
+    return true;
+  } catch (err) {
+    return false;
+  }
+};
+
+/**
+ * Run a test subscription on a client. A subscription
+ * that takes longer than SUBSCRIPTION_TIMEOUT ms to respond
+ * is deemed a failure
+ */
+const testSubscription = (client: Client) => {
+  return new Promise((resolve) => {
+    const sub = client
+      .subscribe<NodeCheckTimeUpdateSubscription>({
+        query: NodeCheckTimeUpdateDocument,
+        errorPolicy: 'all',
+      })
+      .subscribe({
+        next: () => {
+          resolve(true);
+          sub.unsubscribe();
+        },
+        error: () => {
+          resolve(false);
+          sub.unsubscribe();
+        },
+      });
+
+    setTimeout(() => {
+      resolve(false);
+      sub.unsubscribe();
+    }, SUBSCRIPTION_TIMEOUT);
+  });
+};
+
+/**
+ * Retrieve env vars, parsing where needed some type casting is needed
+ * here to appease the environment store interface
+ */
+function compileEnvVars() {
+  const VEGA_ENV = windowOrDefault(
+    'VEGA_ENV',
+    process.env['NX_VEGA_ENV']
+  ) as Networks;
+  const env: Environment = {
+    VEGA_URL: windowOrDefault('VEGA_URL', process.env['NX_VEGA_URL']),
+    VEGA_ENV,
+    VEGA_CONFIG_URL: windowOrDefault(
+      'VEGA_CONFIG_URL',
+      process.env['NX_VEGA_CONFIG_URL'] as string
+    ),
+    VEGA_NETWORKS: parseNetworks(
+      windowOrDefault('VEGA_NETWORKS', process.env['NX_VEGA_NETWORKS'])
+    ),
+    VEGA_WALLET_URL: windowOrDefault(
+      'VEGA_WALLET_URL',
+      process.env['NX_VEGA_WALLET_URL'] as string
+    ),
+    HOSTED_WALLET_URL: windowOrDefault(
+      'HOSTED_WALLET_URL',
+      process.env['NX_HOSTED_WALLET_URL']
+    ),
+    ETHERSCAN_URL: getEtherscanUrl(
+      VEGA_ENV,
+      windowOrDefault('ETHERSCAN_URL', process.env['NX_ETHERSCAN_URL'])
+    ),
+    ETHEREUM_PROVIDER_URL: getEthereumProviderUrl(
+      VEGA_ENV,
+      windowOrDefault(
+        'ETHEREUM_PROVIDER_URL',
+        process.env['NX_ETHEREUM_PROVIDER_URL']
+      )
+    ),
+    ETH_LOCAL_PROVIDER_URL: windowOrDefault(
+      'ETH_LOCAL_PROVIDER_URL',
+      process.env['NX_ETH_LOCAL_PROVIDER_URL']
+    ),
+    ETH_WALLET_MNEMONIC: windowOrDefault(
+      'ETH_WALLET_MNEMONIC',
+      process.env['NX_ETH_WALLET_MNEMONIC']
+    ),
+    ORACLE_PROOFS_URL: windowOrDefault(
+      'ORACLE_PROOFS_URL',
+      process.env['NX_ORACLE_PROOFS_URL']
+    ),
+    VEGA_DOCS_URL: windowOrDefault(
+      'VEGA_DOCS_URL',
+      process.env['NX_VEGA_DOCS_URL']
+    ),
+    VEGA_CONSOLE_URL: windowOrDefault(
+      'VEGA_CONSOLE_URL',
+      process.env['NX_VEGA_CONSOLE_URL']
+    ),
+    VEGA_EXPLORER_URL: windowOrDefault(
+      'VEGA_EXPLORER_URL',
+      process.env['NX_VEGA_EXPLORER_URL']
+    ),
+    VEGA_TOKEN_URL: windowOrDefault(
+      'VEGA_TOKEN_URL',
+      process.env['NX_VEGA_TOKEN_URL']
+    ),
+    GITHUB_FEEDBACK_URL: windowOrDefault(
+      'GITHUB_FEEDBACK_URL',
+      process.env['NX_GITHUB_FEEDBACK_URL']
+    ),
+    GIT_BRANCH: windowOrDefault(
+      'GIT_COMMIT_BRANCH',
+      process.env['GIT_COMMIT_BRANCH']
+    ),
+    GIT_COMMIT_HASH: windowOrDefault(
+      'GIT_COMMIT_HASH',
+      process.env['GIT_COMMIT_HASH']
+    ),
+    GIT_ORIGIN_URL: windowOrDefault(
+      'GIT_ORIGIN_URL',
+      process.env['GIT_ORIGIN_URL']
+    ),
+    ANNOUNCEMENTS_CONFIG_URL: windowOrDefault(
+      'ANNOUNCEMENTS_CONFIG_URL',
+      process.env['NX_ANNOUNCEMENTS_CONFIG_URL']
+    ),
+    VEGA_INCIDENT_URL: windowOrDefault(
+      'VEGA_INCIDENT_URL',
+      process.env['NX_VEGA_INCIDENT_URL']
+    ),
+    APP_VERSION: windowOrDefault('APP_VERSION', process.env['NX_APP_VERSION']),
+    SENTRY_DSN: windowOrDefault('SENTRY_DSN', process.env['NX_SENTRY_DSN']),
+    TENDERMINT_URL: windowOrDefault(
+      'NX_TENDERMINT_URL',
+      process.env['NX_TENDERMINT_URL']
+    ),
+    TENDERMINT_WEBSOCKET_URL: windowOrDefault(
+      'NX_TENDERMINT_WEBSOCKET_URL',
+      process.env['NX_TENDERMINT_WEBSOCKET_URL']
+    ),
+    CHROME_EXTENSION_URL: windowOrDefault(
+      'NX_CHROME_EXTENSION_URL',
+      process.env['NX_CHROME_EXTENSION_URL']
+    ),
+    MOZILLA_EXTENSION_URL: windowOrDefault(
+      'NX_MOZILLA_EXTENSION_URL',
+      process.env['NX_MOZILLA_EXTENSION_URL']
+    ),
+  };
+
+  return env;
+}
+
+function compileFeatureFlags(): FeatureFlags {
+  const TRUTHY = ['1', 'true'];
+  const COSMIC_ELEVATOR_FLAGS: CosmicElevatorFlags = {
+    ICEBERG_ORDERS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_ICEBERG_ORDERS',
+        process.env['NX_ICEBERG_ORDERS']
+      ) as string
+    ),
+    STOP_ORDERS: TRUTHY.includes(
+      windowOrDefault('NX_STOP_ORDERS', process.env['NX_STOP_ORDERS']) as string
+    ),
+    SUCCESSOR_MARKETS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_SUCCESSOR_MARKETS',
+        process.env['NX_SUCCESSOR_MARKETS']
+      ) as string
+    ),
+    PRODUCT_PERPETUALS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_PRODUCT_PERPETUALS',
+        process.env['NX_PRODUCT_PERPETUALS']
+      ) as string
+    ),
+    METAMASK_SNAPS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_METAMASK_SNAPS',
+        process.env['NX_METAMASK_SNAPS']
+      ) as string
+    ),
+    REFERRALS: TRUTHY.includes(
+      windowOrDefault('NX_REFERRALS', process.env['NX_REFERRALS']) as string
+    ),
+    DISABLE_CLOSE_POSITION: TRUTHY.includes(
+      windowOrDefault(
+        'NX_DISABLE_CLOSE_POSITION',
+        process.env['NX_DISABLE_CLOSE_POSITION']
+      ) as string
+    ),
+    UPDATE_MARKET_STATE: TRUTHY.includes(
+      windowOrDefault(
+        'NX_UPDATE_MARKET_STATE',
+        process.env['NX_UPDATE_MARKET_STATE']
+      ) as string
+    ),
+    GOVERNANCE_TRANSFERS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_GOVERNANCE_TRANSFERS',
+        process.env['NX_GOVERNANCE_TRANSFERS']
+      ) as string
+    ),
+    VOLUME_DISCOUNTS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_VOLUME_DISCOUNTS',
+        process.env['NX_VOLUME_DISCOUNTS']
+      ) as string
+    ),
+  };
+  const EXPLORER_FLAGS = {
+    EXPLORER_ASSETS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_ASSETS',
+        process.env['NX_EXPLORER_ASSETS']
+      ) as string
+    ),
+    EXPLORER_GENESIS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_GENESIS',
+        process.env['NX_EXPLORER_GENESIS']
+      ) as string
+    ),
+    EXPLORER_GOVERNANCE: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_GOVERNANCE',
+        process.env['NX_EXPLORER_GOVERNANCE']
+      ) as string
+    ),
+    EXPLORER_MARKETS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_MARKETS',
+        process.env['NX_EXPLORER_MARKETS']
+      ) as string
+    ),
+    EXPLORER_ORACLES: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_ORACLES',
+        process.env['NX_EXPLORER_ORACLES']
+      ) as string
+    ),
+    EXPLORER_TXS_LIST: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_TXS_LIST',
+        process.env['NX_EXPLORER_TXS_LIST']
+      ) as string
+    ),
+    EXPLORER_NETWORK_PARAMETERS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_NETWORK_PARAMETERS',
+        process.env['NX_EXPLORER_NETWORK_PARAMETERS']
+      ) as string
+    ),
+    EXPLORER_PARTIES: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_PARTIES',
+        process.env['NX_EXPLORER_PARTIES']
+      ) as string
+    ),
+    EXPLORER_VALIDATORS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_EXPLORER_VALIDATORS',
+        process.env['NX_EXPLORER_VALIDATORS']
+      ) as string
+    ),
+  };
+  const GOVERNANCE_FLAGS = {
+    GOVERNANCE_NETWORK_DOWN: TRUTHY.includes(
+      windowOrDefault(
+        'NX_NETWORK_DOWN',
+        process.env['NX_NETWORK_DOWN']
+      ) as string
+    ),
+    GOVERNANCE_NETWORK_LIMITS: TRUTHY.includes(
+      windowOrDefault(
+        'NX_GOVERNANCE_NETWORK_LIMITS',
+        process.env['NX_GOVERNANCE_NETWORK_LIMITS']
+      ) as string
+    ),
+  };
+  return {
+    ...COSMIC_ELEVATOR_FLAGS,
+    ...EXPLORER_FLAGS,
+    ...GOVERNANCE_FLAGS,
+  };
+}
+
+function parseNetworks(value?: string) {
+  if (value) {
+    try {
+      return JSON.parse(value);
+    } catch (e) {
+      return {};
+    }
+  }
+  return {};
+}
+
+/**
+ * Provides a fallback ethereum provider url for test purposes in some apps
+ */
+function getEthereumProviderUrl(
+  network: Networks | undefined,
+  envvar: string | undefined
+) {
+  if (envvar) return envvar;
+  return network === Networks.MAINNET
+    ? 'https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8'
+    : 'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8';
+}
+/**
+ * Provide a fallback etherscan url for test purposes in some apps
+ */
+function getEtherscanUrl(
+  network: Networks | undefined,
+  envvar: string | undefined
+) {
+  if (envvar) return envvar;
+  return network === Networks.MAINNET
+    ? 'https://etherscan.io'
+    : 'https://sepolia.etherscan.io';
+}
+
+export function windowOrDefault(key: string, defaultValue?: string) {
+  if (typeof window !== 'undefined') {
+    // @ts-ignore avoid conflict in env
+    if (window._env_ && window._env_[key]) {
+      // @ts-ignore presence has been check above
+      return window._env_[key];
+    }
+  }
+  return defaultValue || undefined;
+}

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

@@ -60,8 +60,6 @@ export const envSchema = z
     TENDERMINT_WEBSOCKET_URL: z.optional(z.string()),
     CHROME_EXTENSION_URL: z.optional(z.string()),
     MOZILLA_EXTENSION_URL: z.optional(z.string()),
-    CHARTING_LIBRARY_PATH: z.optional(z.string()),
-    CHARTING_LIBRARY_HASH: z.optional(z.string()),
   })
   .refine(
     (data) => {

libs/i18n/src/index.ts

@@ -11,7 +11,6 @@ import en_fills from './locales/en/fills.json';
 import en_funding_payments from './locales/en/funding-payments.json';
 import en_governance from './locales/en/governance.json';
 import en_trading from './locales/en/trading.json';
-import en_trading_view from './locales/en/trading-view.json';
 import en_markets from './locales/en/markets.json';
 import en_web3 from './locales/en/web3.json';
 import en_proposals from './locales/en/proposals.json';
@@ -33,7 +32,6 @@ export const locales = {
     'funding-payments': en_funding_payments,
     governance: en_governance,
     trading: en_trading,
-    trading_view: en_trading_view,
     markets: en_markets,
     web3: en_web3,
     positions: en_positions,

libs/i18n/src/locales/en/candles-chart.json

@@ -1,3 +1,5 @@
 {
+  "Indicators": "Indicators",
+  "Interval: {{interval}}": "Interval: {{interval}}",
   "No open orders": "No open orders"
 }

libs/i18n/src/locales/en/deal-ticket.json

@@ -79,6 +79,7 @@
   "Size": "Size",
   "Size cannot be lower than {{sizeStep}}": "Size cannot be lower than {{sizeStep}}",
   "sizeAtPrice-market": "market",
+  "Subtotal": "Subtotal",
   "Stagnet": "Stagnet",
   "Stop": "Stop",
   "Stop Limit": "Stop Limit",
@@ -86,7 +87,6 @@
   "Stop order will be triggered immediately": "Stop order will be triggered immediately",
   "Strategy": "Strategy",
   "Submit": "Submit",
-  "Subtotal": "Subtotal",
   "terminated": "terminated",
   "The expiry date that you have entered appears to be in the past": "The expiry date that you have entered appears to be in the past",
   "The latest Vega code auto-deployed": "The latest Vega code auto-deployed",
@@ -104,16 +104,9 @@
   "This market is in opening auction until it has reached enough liquidity to move into continuous trading.": "This market is in opening auction until it has reached enough liquidity to move into continuous trading.",
   "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.": "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.",
   "Time in force": "Time in force",
-  "TIME_IN_FORCE_FOK": "Fill or Kill (FOK)",
-  "TIME_IN_FORCE_GFA": "Good for Auction (GFA)",
-  "TIME_IN_FORCE_GFN": "Good for Normal (GFN)",
-  "TIME_IN_FORCE_GTC": "Good 'til Cancelled (GTC)",
-  "TIME_IN_FORCE_GTT": "Good 'til Time (GTT)",
-  "TIME_IN_FORCE_IOC": "Immediate or Cancel (IOC)",
   "TIME_IN_FORCE_SELECTOR_LIQUIDITY_MONITORING_AUCTION": "This market is in auction until it reaches <0>sufficient liquidity</0>. Until the auction ends, you can only place GFA, GTT, or GTC limit orders.",
   "TIME_IN_FORCE_SELECTOR_PRICE_MONITORING_AUCTION": "This market is in auction due to <0>high price volatility</0>. Until the auction ends, you can only place GFA, GTT, or GTC limit orders.",
   "Total": "Total",
-  "Total fees": "Total fees",
   "Total margin available": "Total margin available",
   "TOTAL_MARGIN_AVAILABLE": "Total margin available = general {{assetSymbol}} balance ({{generalAccountBalance}} {{assetSymbol}}) + margin balance ({{marginAccountBalance}} {{assetSymbol}}) - maintenance level ({{marginMaintenance}} {{assetSymbol}}).",
   "Trading terminated": "Trading terminated",
@@ -137,5 +130,11 @@
   "You need to connect your own wallet to start trading on this market": "You need to connect your own wallet to start trading on this market",
   "You need to provide a minimum visible size": "You need to provide a minimum visible size",
   "You need to provide a peak size": "You need to provide a peak size",
-  "You need to provide a size": "You need to provide a size"
+  "You need to provide a size": "You need to provide a size",
+  "TIME_IN_FORCE_FOK": "Fill or Kill (FOK)",
+  "TIME_IN_FORCE_GFA": "Good for Auction (GFA)",
+  "TIME_IN_FORCE_GFN": "Good for Normal (GFN)",
+  "TIME_IN_FORCE_GTC": "Good 'til Cancelled (GTC)",
+  "TIME_IN_FORCE_GTT": "Good 'til Time (GTT)",
+  "TIME_IN_FORCE_IOC": "Immediate or Cancel (IOC)"
 }