fix(governance): handle tendermint error properly

test: add referrals tests

.husky/pre-commit

@@ -1,5 +1,8 @@
 #!/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
-yarn nx format:check
+# Lint all staged files - this brings more value as pre-commit
+# 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,7 +12,8 @@ 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 { router } from './routes/router-config';
+import { useRouterConfig } from './routes/router-config';
+import { createBrowserRouter } from 'react-router-dom';
 import { t } from '@vegaprotocol/i18n';
 import { Suspense } from 'react';
 
@@ -38,7 +39,10 @@ function App() {
             }
           >
             <Suspense fallback={splashLoading}>
-              <RouterProvider router={router} fallbackElement={splashLoading} />
+              <RouterProvider
+                router={createBrowserRouter(useRouterConfig())}
+                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 { routerConfig } from '../../routes/router-config';
+import { useRouterConfig } from '../../routes/router-config';
 import { useMemo } from 'react';
 import compact from 'lodash/compact';
 import { Search } from '../search';
@@ -26,6 +26,7 @@ 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/routes/blocks/id/block.tsx

@@ -54,7 +54,7 @@ const Block = () => {
               </Button>
             </Link>
           </div>
-          {blockData && (
+          {blockData && 'result' in blockData && (
             <>
               <TableWithTbody className="mb-8">
                 <TableRow modifier="bordered">

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

@@ -18,7 +18,6 @@ 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';
@@ -29,7 +28,7 @@ import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
 import { remove0x } from '@vegaprotocol/utils';
 import { PartyAccountsByAsset } from './parties/id/accounts';
 import { Disclaimer } from './pages/disclaimer';
-import { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import RestrictedPage from './restricted';
 
 export type Navigable = {
@@ -60,311 +59,315 @@ type Route = RouteItem & {
   children?: RouteItem[];
 };
 
-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 />,
-          },
-          {
-            path: ':party',
-            element: <Party />,
+export const useRouterConfig = () => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
 
-            children: [
-              {
-                index: true,
-                element: <PartySingle />,
-                handle: {
-                  breadcrumb: (params: Params<string>) => (
-                    <Link to={linkTo(Routes.PARTIES, params.party)}>
-                      {truncateMiddle(params.party as string)}
-                    </Link>
-                  ),
+  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>,
+          },
+          children: [
+            {
+              index: true,
+              element: <Parties />,
+            },
+            {
+              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>
+                    ),
+                  },
                 },
-              },
-              {
-                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 assetsRoutes: Route[] = FLAGS.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 />,
+      ]
+    : [];
+
+  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 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
+      ? [
           {
-            path: ':assetId',
-            element: <AssetPage />,
+            path: Routes.NETWORK_PARAMETERS,
             handle: {
-              breadcrumb: (params: Params<string>) => (
-                <AssetLink assetId={params.assetId as string} />
+              name: t('NetworkParameters'),
+              text: t('Network Parameters'),
+              breadcrumb: () => (
+                <Link to={Routes.NETWORK_PARAMETERS}>
+                  {t('Network Parameters')}
+                </Link>
               ),
             },
+            element: <NetworkParameters />,
           },
-        ],
-      },
-    ]
-  : [];
+        ]
+      : [];
 
-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 />,
+  const validators: Route[] = featureFlags.EXPLORER_VALIDATORS
+    ? [
+        {
+          path: Routes.VALIDATORS,
+          handle: {
+            name: t('Validators'),
+            text: t('Validators'),
+            breadcrumb: () => (
+              <Link to={Routes.VALIDATORS}>{t('Validators')}</Link>
+            ),
           },
-          {
-            path: ':marketId',
-            element: <MarketPage />,
-            handle: {
-              breadcrumb: (params: Params<string>) => (
-                <MarketLink id={params.marketId as string} />
-              ),
+          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.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>
+                ),
+              },
             },
+            {
+              index: true,
+              element: <TxsList />,
+            },
+          ],
+        },
+        {
+          path: Routes.BLOCKS,
+          handle: {
+            name: t('Blocks'),
+            text: t('Blocks'),
+            breadcrumb: () => <Link to={Routes.BLOCKS}>{t('Blocks')}</Link>,
           },
-        ],
-      },
-    ]
-  : [];
-
-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: <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>
+                ),
+              },
+            },
+          ],
         },
-        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>
-          ),
+        {
+          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>
+                ),
+              },
+            },
+          ],
         },
-        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>,
+        {
+          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,
+      ],
     },
-    errorElement: <ErrorBoundary />,
-    children: [
-      {
-        index: true,
-        element: <Home />,
+    {
+      path: Routes.RESTRICTED,
+      element: <RestrictedPage />,
+      handle: {
+        name: t('Restricted'),
+        text: t('Restricted'),
       },
-      {
-        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>
-              ),
-            },
-          },
-          {
-            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'),
     },
-  },
-];
-
-export const router = createBrowserRouter(routerConfig);
+  ];
+  return 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 { FLAGS, useEnvironment } from '@vegaprotocol/environment';
+import { useFeatureFlags, useEnvironment } from '@vegaprotocol/environment';
 import { useWeb3React } from '@web3-react/core';
 import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,21 +15,23 @@ import {
 } from './contexts/app-state/app-state-context';
 import { useContracts } from './contexts/contracts/contracts-context';
 import { useRefreshAssociatedBalances } from './hooks/use-refresh-associated-balances';
-import { Connectors } from './lib/vega-connectors';
+import { useConnectors } from './lib/vega-connectors';
 import { useSearchParams } from 'react-router-dom';
 
 const useVegaWalletEagerConnect = () => {
-  const vegaConnecting = useEagerConnect(Connectors);
+  const connectors = useConnectors();
+  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();
@@ -79,10 +81,16 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
       }
     };
 
-    if (!FLAGS.GOVERNANCE_NETWORK_DOWN) {
+    if (!featureFlags.GOVERNANCE_NETWORK_DOWN) {
       run();
     }
-  }, [token, appDispatch, staking, vesting]);
+  }, [
+    token,
+    appDispatch,
+    staking,
+    vesting,
+    featureFlags.GOVERNANCE_NETWORK_DOWN,
+  ]);
 
   React.useEffect(() => {
     if (account && pubKey) {
@@ -147,16 +155,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 (FLAGS.GOVERNANCE_NETWORK_LIMITS) {
+    if (featureFlags.GOVERNANCE_NETWORK_LIMITS) {
       getNetworkLimits();
     }
 
     return () => {
       stopPoll();
     };
-  }, [appDispatch, VEGA_URL, t]);
+  }, [appDispatch, VEGA_URL, t, featureFlags.GOVERNANCE_NETWORK_LIMITS]);
 
-  if (FLAGS.GOVERNANCE_NETWORK_DOWN) {
+  if (featureFlags.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 { Connectors } from '../../lib/vega-connectors';
+import { useConnectors } 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/lib/vega-connectors.ts

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

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, FLAGS } from '@vegaprotocol/environment';
+import { ExternalLinks, useFeatureFlags } from '@vegaprotocol/environment';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { useNodesQuery } from '../staking/home/__generated__/Nodes';
 import { useProposalsQuery } from '../proposals/proposals/__generated__/Proposals';
@@ -175,6 +175,7 @@ export const ValidatorDetailsLink = ({
 };
 
 const GovernanceHome = ({ name }: RouteChildProps) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   useDocumentTitle(name);
   const { t } = useTranslation();
   const {
@@ -186,9 +187,9 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
     variables: {
-      includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
-      includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
-      includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
+      includeNewMarketProductFields: !!featureFlags.PRODUCT_PERPETUALS,
+      includeUpdateMarketStates: !!featureFlags.UPDATE_MARKET_STATE,
+      includeUpdateReferralPrograms: !!featureFlags.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 { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { BrowserRouter } from 'react-router-dom';
 import { VoteState } from '../vote-details/use-user-vote';
 import { useNewTransferProposalDetails } from '@vegaprotocol/proposals';
@@ -62,8 +62,7 @@ describe('Proposal header', () => {
     jest.clearAllMocks();
   });
   it('Renders New market proposal', () => {
-    const mockedFlags = jest.mocked(FLAGS);
-    mockedFlags.SUCCESSOR_MARKETS = true;
+    useFeatureFlags.setState({ flags: { 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 { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import Routes from '../../../routes';
 import { Link } from 'react-router-dom';
 import type { VoteState } from '../vote-details/use-user-vote';
@@ -28,6 +28,7 @@ export const ProposalHeader = ({
   isListItem?: boolean;
   voteState?: VoteState | null;
 }) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const change = proposal?.terms.change;
 
@@ -54,13 +55,14 @@ export const ProposalHeader = ({
   switch (change?.__typename) {
     case 'NewMarket': {
       proposalType =
-        FLAGS.PRODUCT_PERPETUALS && change?.instrument?.product?.__typename
+        featureFlags.PRODUCT_PERPETUALS &&
+        change?.instrument?.product?.__typename
           ? `NewMarket${change?.instrument?.product?.__typename}`
           : 'NewMarket';
       fallbackTitle = t('NewMarketProposal');
       details = (
         <>
-          {FLAGS.SUCCESSOR_MARKETS && (
+          {featureFlags.SUCCESSOR_MARKETS && (
             <SuccessorCode proposalId={proposal?.id} />
           )}
           <span>
@@ -82,13 +84,13 @@ export const ProposalHeader = ({
     }
     case 'UpdateMarketState': {
       proposalType =
-        FLAGS.UPDATE_MARKET_STATE && change?.updateType
+        featureFlags.UPDATE_MARKET_STATE && change?.updateType
           ? t(change.updateType)
           : 'UpdateMarketState';
       fallbackTitle = t('UpdateMarketStateProposal');
       details = (
         <span>
-          {FLAGS.UPDATE_MARKET_STATE &&
+          {featureFlags.UPDATE_MARKET_STATE &&
           change?.market?.id &&
           change.updateType ? (
             <>
@@ -177,14 +179,14 @@ export const ProposalHeader = ({
     case 'NewTransfer':
       proposalType = 'NewTransfer';
       fallbackTitle = t('NewTransferProposal');
-      details = FLAGS.GOVERNANCE_TRANSFERS ? (
+      details = featureFlags.GOVERNANCE_TRANSFERS ? (
         <NewTransferSummary proposalId={proposal?.id} />
       ) : null;
       break;
     case 'CancelTransfer':
       proposalType = 'CancelTransfer';
       fallbackTitle = t('CancelTransferProposal');
-      details = FLAGS.GOVERNANCE_TRANSFERS ? (
+      details = featureFlags.GOVERNANCE_TRANSFERS ? (
         <CancelTransferSummary proposalId={proposal?.id} />
       ) : null;
       break;

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

@@ -26,7 +26,7 @@ import {
   ProposalCancelTransferDetails,
   ProposalTransferDetails,
 } from '../proposal-transfer';
-import { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { ProposalUpdateBenefitTiers } from '../proposal-update-benefit-tiers';
 
 export interface ProposalProps {
@@ -53,6 +53,7 @@ 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);
@@ -132,7 +133,7 @@ export const Proposal = ({
   }
 
   // Show governance transfer details only if the GOVERNANCE_TRANSFERS flag is on.
-  const governanceTransferDetails = FLAGS.GOVERNANCE_TRANSFERS && (
+  const governanceTransferDetails = featureFlags.GOVERNANCE_TRANSFERS && (
     <>
       {proposal.terms.change.__typename === 'NewTransfer' && (
         /** Governance New Transfer Details */

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

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

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

@@ -95,7 +95,7 @@ export const ProtocolUpgradeProposalContainer = () => {
           time={
             pending && time ? (
               convertToCountdownString(time, '0:00:00:00')
-            ) : blockInfo?.result ? (
+            ) : blockInfo && 'result' in blockInfo && blockInfo?.result ? (
               <span title={blockInfo.result.block.header.time}>
                 {formatDateWithLocalTimezone(
                   new Date(blockInfo.result.block.header.time)

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 { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 
 const orderByDate = (arr: ProposalFieldsFragment[]) =>
   orderBy(
@@ -33,15 +33,16 @@ 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: !!FLAGS.PRODUCT_PERPETUALS,
-      includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
-      includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
+      includeNewMarketProductFields: !!featureFlags.PRODUCT_PERPETUALS,
+      includeUpdateMarketStates: !!featureFlags.UPDATE_MARKET_STATE,
+      includeUpdateReferralPrograms: !!featureFlags.REFERRALS,
     },
   });
 

apps/trading/.env.mainnet

@@ -22,10 +22,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=false
+NX_REFERRALS=true
+# NX_DISABLE_CLOSE_POSITION=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,4 +24,7 @@ NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
-NX_REFERRALS=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=

apps/trading/.env.testnet

@@ -23,9 +23,11 @@ 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/market/market.tsx

@@ -9,8 +9,6 @@ import { TradeGrid } from './trade-grid';
 import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Links } from '../../lib/links';
-import { ViewType, useSidebar } from '../../components/sidebar';
-import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
 
@@ -61,9 +59,6 @@ export const MarketPage = () => {
   const t = useT();
   const { marketId } = useParams();
   const navigate = useNavigate();
-  const currentRouteId = useGetCurrentRouteId();
-  const { setViews, getView } = useSidebar();
-  const view = getView(currentRouteId);
   const { screenSize } = useScreenDimensions();
   const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
   const update = useGlobalStore((store) => store.update);
@@ -72,20 +67,11 @@ export const MarketPage = () => {
   const { data, loading } = useMarket(marketId);
 
   useEffect(() => {
-    if (data?.id && data.id !== lastMarketId && !closed) {
+    if (data?.id && data.id !== lastMarketId) {
       update({ marketId: data.id });
     }
   }, [update, lastMarketId, data?.id]);
 
-  useEffect(() => {
-    if (largeScreen && view === undefined) {
-      setViews(
-        { type: closed ? ViewType.Info : ViewType.Order },
-        currentRouteId
-      );
-    }
-  }, [setViews, view, currentRouteId, largeScreen]);
-
   const pinnedAsset = data && getAsset(data);
 
   const tradeView = useMemo(() => {

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

@@ -18,7 +18,7 @@ import {
   MarketSuccessorProposalBanner,
   MarketTerminationBanner,
 } from '../../components/market-banner';
-import { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
 
@@ -35,6 +35,7 @@ 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' });
@@ -61,10 +62,10 @@ const MainGrid = memo(
                     id="chart"
                     overflowHidden
                     name={t('Chart')}
-                    menu={<TradingViews.candles.menu />}
+                    menu={<TradingViews.chart.menu />}
                   >
                     <ErrorBoundary feature="chart">
-                      <TradingViews.candles.component marketId={marketId} />
+                      <TradingViews.chart.component marketId={marketId} />
                     </ErrorBoundary>
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
@@ -165,7 +166,7 @@ const MainGrid = memo(
                   <TradingViews.orders.component />
                 </ErrorBoundary>
               </Tab>
-              {FLAGS.STOP_ORDERS ? (
+              {featureFlags.STOP_ORDERS ? (
                 <Tab id="stop-orders" name={t('Stop orders')}>
                   <ErrorBoundary feature="stop-orders">
                     <TradingViews.stopOrders.component />
@@ -196,6 +197,7 @@ 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]'
@@ -204,7 +206,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && (
+        {featureFlags.SUCCESSOR_MARKETS && (
           <>
             <MarketSuccessorBanner market={market} />
             <MarketSuccessorProposalBanner marketId={market?.id} />

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

@@ -4,7 +4,6 @@ import { OracleBanner } from '@vegaprotocol/markets';
 import { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { FLAGS } from '@vegaprotocol/environment';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
 import {
@@ -15,6 +14,7 @@ import {
 import { ErrorBoundary } from '../../components/error-boundary';
 import { type TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
   market: Market | null;
@@ -22,7 +22,8 @@ interface TradePanelsProps {
 }
 
 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  const [view, setView] = useState<TradingView>('candles');
+  const featureFlags = useFeatureFlags((state) => state.flags);
+  const [view, setView] = useState<TradingView>('chart');
 
   const renderView = () => {
     const Component = TradingViews[view].component;
@@ -49,7 +50,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
       const Menu = viewCfg.menu;
 
       return (
-        <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
+        <div className="flex items-center justify-end gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
           <Menu />
         </div>
       );
@@ -61,7 +62,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
   return (
     <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && (
+        {featureFlags.SUCCESSOR_MARKETS && (
           <>
             <MarketSuccessorBanner market={market} />
             <MarketSuccessorProposalBanner marketId={market?.id} />
@@ -148,7 +149,7 @@ const useViewLabel = (view: TradingView) => {
   const t = useT();
 
   const labels = {
-    candles: t('Candles'),
+    chart: t('Chart'),
     depth: t('Depth'),
     liquidity: t('Liquidity'),
     funding: t('Funding'),

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

@@ -1,8 +1,4 @@
 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';
@@ -16,13 +12,14 @@ 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 = {
-  candles: {
-    component: CandlesChartContainer,
-    menu: CandlesMenu,
+  chart: {
+    component: ChartContainer,
+    menu: ChartMenu,
   },
   depth: {
     component: DepthChartContainer,

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

@@ -4,9 +4,26 @@ import {
   SidebarButton,
   SidebarDivider,
   ViewType,
+  useSidebar,
 } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import { useEffect } from 'react';
+
+const ViewInitializer = () => {
+  const currentRouteId = useGetCurrentRouteId();
+  const { setViews, getView } = useSidebar();
+  const view = getView(currentRouteId);
+  const { screenSize } = useScreenDimensions();
+  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
+  useEffect(() => {
+    if (largeScreen && view === undefined) {
+      setViews({ type: ViewType.Order }, currentRouteId);
+    }
+  }, [setViews, view, currentRouteId, largeScreen]);
+  return null;
+};
 
 export const MarketsSidebar = () => {
   const t = useT();
@@ -37,6 +54,7 @@ export const MarketsSidebar = () => {
           path=":marketId"
           element={
             <>
+              <ViewInitializer />
               <SidebarDivider />
               <SidebarButton
                 view={ViewType.Order}

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

@@ -39,11 +39,21 @@ const WithdrawalsIndicator = () => {
   );
 };
 
-export const Portfolio = () => {
-  const t = useT();
+const SidebarViewInitializer = () => {
   const currentRouteId = useGetCurrentRouteId();
   const { getView, setViews } = useSidebar();
   const view = getView(currentRouteId);
+  // Make transfer sidebar open by default
+  useEffect(() => {
+    if (view === undefined) {
+      setViews({ type: ViewType.Transfer }, currentRouteId);
+    }
+  }, [view, setViews, currentRouteId]);
+  return null;
+};
+
+export const Portfolio = () => {
+  const t = useT();
 
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
@@ -53,17 +63,11 @@ export const Portfolio = () => {
     updateTitle(titlefy([t('Portfolio')]));
   }, [updateTitle, t]);
 
-  // Make transfer sidebar open by default
-  useEffect(() => {
-    if (view === undefined) {
-      setViews({ type: ViewType.Transfer }, currentRouteId);
-    }
-  }, [view, setViews, currentRouteId]);
-
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';
   return (
     <div className={wrapperClasses}>
+      <SidebarViewInitializer />
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
         <ResizableGridPanel minSize={75}>
           <PortfolioGridChild>

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

@@ -18,13 +18,35 @@ import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
 import { Statistics, useStats } from './referral-statistics';
 import { useReferralProgram } from './hooks/use-referral-program';
-import { useT } from '../../lib/use-t';
+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';
 
 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) {
@@ -76,7 +98,6 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
     setValue,
     setError,
     watch,
-    clearErrors,
   } = useForm();
   const [params] = useSearchParams();
 
@@ -90,32 +111,11 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
    */
   const validateFundsAvailable = useCallback(() => {
     if (requiredFunds && !isEligible) {
-      const err = t(
-        'To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.',
-        {
-          requiredFunds,
-        }
-      );
+      const err = SPAM_PROTECTION_ERR;
       return err;
     }
     return true;
-  }, [isEligible, requiredFunds, t]);
-
-  useEffect(() => {
-    if (codeField) {
-      const err = validateFundsAvailable();
-      if (err !== true) {
-        setStatus('no-funds');
-        setError('code', {
-          type: 'required',
-          message: err,
-        });
-      } else {
-        setStatus(null);
-        clearErrors('code');
-      }
-    }
-  }, [clearErrors, codeField, isEligible, setError, validateFundsAvailable]);
+  }, [isEligible, requiredFunds]);
 
   /**
    * Validates the set a user tries to apply to.
@@ -140,6 +140,15 @@ 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;
@@ -323,10 +332,26 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
           </label>
           <RainbowButton variant="border" {...getButtonProps()} />
         </form>
-        {errors.code && (
-          <InputError className="overflow-auto break-words">
-            {errors.code.message?.toString()}
+        {status === 'no-funds' ? (
+          <InputError intent="warning" className="overflow-auto break-words">
+            <span>
+              <SpamProtectionErr requiredFunds={requiredFunds?.toString()} />
+            </span>
           </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/hooks/use-funds-available.ts

@@ -1,7 +1,7 @@
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useFundsAvailableQuery } from './__generated__/FundsAvailable';
 import compact from 'lodash/compact';
-import sum from 'lodash/sum';
+import BigNumber from 'bignumber.js';
 
 /**
  * Gets the funds for given public key and required min for
@@ -24,14 +24,16 @@ export const useFundsAvailable = (pubKey?: string) => {
     ? compact(data.party?.accountsConnection?.edges?.map((e) => e?.node))
     : undefined;
   const requiredFunds = data
-    ? BigInt(data.networkParameter?.value || '0')
+    ? BigNumber(data.networkParameter?.value || '0')
     : undefined;
 
-  const sumOfFunds = sum(
-    fundsAvailable?.filter((fa) => fa.balance).map((fa) => BigInt(fa.balance))
-  );
+  const sumOfFunds =
+    fundsAvailable
+      ?.filter((fa) => fa.balance)
+      .reduce((sum, fa) => sum.plus(BigNumber(fa.balance)), BigNumber(0)) ||
+    BigNumber(0);
 
-  if (requiredFunds && sumOfFunds >= requiredFunds) {
+  if (requiredFunds && sumOfFunds.isGreaterThanOrEqualTo(requiredFunds)) {
     stopPolling();
   }
 
@@ -41,6 +43,6 @@ export const useFundsAvailable = (pubKey?: string) => {
     isEligible:
       fundsAvailable != null &&
       requiredFunds != null &&
-      sumOfFunds >= requiredFunds,
+      sumOfFunds.isGreaterThanOrEqualTo(requiredFunds),
   };
 };

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

@@ -15,7 +15,7 @@ export const LandingBanner = () => {
         </div>
         <div className="pt-20 sm:w-[50%]">
           <h1 className="text-6xl font-alpha calt mb-10">
-            {t('Vega community referral program')}
+            {t('Vega community referrals')}
           </h1>
           <p className="text-lg mb-1">
             {t(

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

@@ -0,0 +1,28 @@
+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.tsx

@@ -4,8 +4,6 @@ import {
   VegaIcon,
   VegaIconNames,
   truncateMiddle,
-  ExternalLink,
-  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 
 import { useVegaWallet } from '@vegaprotocol/wallet';
@@ -28,10 +26,10 @@ import sortBy from 'lodash/sortBy';
 import { useCallback, 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';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -214,6 +212,7 @@ export const Statistics = ({
           ).toString(),
         }
       )}
+      testId="base-commission-rate"
       overrideWithNoProgram={!details}
     >
       {baseCommissionValue * 100}%
@@ -223,6 +222,7 @@ export const Statistics = ({
   const stakingMultiplierTile = (
     <StatTile
       title={t('Staking multiplier')}
+      testId="staking-multiplier"
       description={
         <span
           className={classNames({
@@ -256,6 +256,7 @@ export const Statistics = ({
           ? `(${baseCommissionFormatted}% ⨉ ${multiplier} = ${finalCommissionFormatted}%)`
           : undefined
       }
+      testId="final-commission-rate"
       overrideWithNoProgram={!details}
     >
       {finalCommissionFormatted}%
@@ -263,7 +264,9 @@ export const Statistics = ({
   );
   const numberOfTradersValue = data.referees.length;
   const numberOfTradersTile = (
-    <StatTile title={t('Number of traders')}>{numberOfTradersValue}</StatTile>
+    <StatTile title={t('Number of traders')} testId="number-of-traders">
+      {numberOfTradersValue}
+    </StatTile>
   );
 
   const codeTile = (
@@ -278,6 +281,7 @@ 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)}
@@ -293,6 +297,7 @@ export const Statistics = ({
         count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
       })}
       description={<QUSDTooltip />}
+      testId="total-commission"
     >
       {getNumberFormat(0).format(Number(totalCommissionValue))}
     </StatTile>
@@ -318,6 +323,7 @@ export const Statistics = ({
   const currentBenefitTierTile = (
     <StatTile
       title={t('Current tier')}
+      testId="current-tier"
       description={
         nextBenefitTierValue?.tier
           ? t('(Next tier: {{nextTier}})', {
@@ -333,7 +339,11 @@ export const Statistics = ({
     </StatTile>
   );
   const discountFactorTile = (
-    <StatTile title={t('Discount')} overrideWithNoProgram={!details}>
+    <StatTile
+      title={t('Discount')}
+      testId="discount"
+      overrideWithNoProgram={!details}
+    >
       {isApplyCodePreview && benefitTiers.length >= 1
         ? benefitTiers[0].discountFactor * 100
         : discountFactorValue * 100}
@@ -349,23 +359,34 @@ export const Statistics = ({
           count: details?.windowLength,
         }
       )}
+      testId="combined-volume"
       overrideWithNoProgram={!details}
     >
       {compactNumFormat.format(runningVolumeValue)}
     </StatTile>
   );
   const epochsTile = (
-    <StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
+    <StatTile title={t('Epochs in set')} testId="epochs-in-set">
+      {epochsValue}
+    </StatTile>
   );
   const nextTierVolumeTile = (
-    <StatTile title={t('Volume to next tier')} overrideWithNoProgram={!details}>
+    <StatTile
+      title={t('Volume to next tier')}
+      testId="vol-to-next-tier"
+      overrideWithNoProgram={!details}
+    >
       {nextBenefitTierVolumeValue <= 0
         ? '0'
         : compactNumFormat.format(nextBenefitTierVolumeValue)}
     </StatTile>
   );
   const nextTierEpochsTile = (
-    <StatTile title={t('Epochs to next tier')} overrideWithNoProgram={!details}>
+    <StatTile
+      title={t('Epochs to next tier')}
+      testId="epochs-to-next-tier"
+      overrideWithNoProgram={!details}
+    >
       {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
     </StatTile>
   );
@@ -519,28 +540,3 @@ 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/tiers.tsx

@@ -159,11 +159,11 @@ export const TiersContainer = () => {
 
   return (
     <>
-      <h2 className="text-3xl mt-10">{t('Current Program Details')}</h2>
+      <h2 className="text-3xl mt-10">{t('Current program details')}</h2>
       {details?.id && (
         <p>
           <Trans
-            defaults="As a result of <0>{{proposal}}</0> the program below is currently active on the Vega network."
+            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

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

@@ -32,6 +32,7 @@ export const Tile = ({
 
 type StatTileProps = {
   title: string;
+  testId?: string;
   description?: ReactNode;
   children?: ReactNode;
   overrideWithNoProgram?: boolean;
@@ -40,6 +41,7 @@ export const StatTile = ({
   title,
   description,
   children,
+  testId,
   overrideWithNoProgram = false,
 }: StatTileProps) => {
   if (overrideWithNoProgram) {
@@ -47,10 +49,15 @@ export const StatTile = ({
   }
   return (
     <Tile>
-      <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
+      <h3
+        data-testid={testId}
+        className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt"
+      >
         {title}
       </h3>
-      <div className="text-5xl text-left">{children}</div>
+      <div data-testid={`${testId}-value`} className="text-5xl text-left">
+        {children}
+      </div>
       {description && (
         <div className="text-sm text-left text-vega-clight-100 dark:text-vega-cdark-100">
           {description}

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

@@ -13,6 +13,7 @@ import { ViewType, useSidebar } from '../sidebar';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { usePersistentDepositStore } from '@vegaprotocol/deposits';
 
 export const AccountsContainer = ({
   pinnedAsset,
@@ -25,6 +26,7 @@ export const AccountsContainer = ({
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((store) => store.setViews);
+  const setDepositAsset = usePersistentDepositStore((store) => store.saveValue);
 
   const gridStore = useAccountStore((store) => store.gridStore);
   const updateGridStore = useAccountStore((store) => store.updateGridStore);
@@ -55,7 +57,10 @@ export const AccountsContainer = ({
         setViews({ type: ViewType.Withdraw, assetId }, currentRouteId);
       }}
       onClickDeposit={(assetId) => {
-        setViews({ type: ViewType.Deposit, assetId }, currentRouteId);
+        setViews({ type: ViewType.Deposit }, currentRouteId);
+        if (assetId) {
+          setDepositAsset({ assetId });
+        }
       }}
       onClickTransfer={(assetId) => {
         setViews({ type: ViewType.Transfer, assetId }, currentRouteId);

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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1,140 @@
+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/chart-menu.tsx

@@ -1,14 +1,12 @@
-import 'pennant/dist/style.css';
 import {
   ChartType,
-  Interval,
   Overlay,
   Study,
   chartTypeLabels,
-  intervalLabels,
   overlayLabels,
   studyLabels,
 } from 'pennant';
+import { Trans } from 'react-i18next';
 import {
   TradingButton,
   TradingDropdown,
@@ -20,10 +18,21 @@ import {
   TradingDropdownTrigger,
   Icon,
 } from '@vegaprotocol/ui-toolkit';
-import { type IconName } from '@blueprintjs/icons';
-import { IconNames } from '@blueprintjs/icons';
-import { useCandlesChartSettings } from './use-candles-chart-settings';
-import { useT } from './use-t';
+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,
+];
 
 const chartTypeIcon = new Map<ChartType, IconName>([
   [ChartType.AREA, IconNames.TIMELINE_AREA_CHART],
@@ -32,30 +41,46 @@ const chartTypeIcon = new Map<ChartType, IconName>([
   [ChartType.OHLC, IconNames.WATERFALL_CHART],
 ]);
 
-export const CandlesMenu = () => {
+export const ChartMenu = () => {
+  const { CHARTING_LIBRARY_PATH } = useEnvironment();
   const {
+    chartlib,
     interval,
     chartType,
     studies,
     overlays,
+    setChartlib,
     setInterval,
     setType,
     setStudies,
     setOverlays,
-  } = useCandlesChartSettings();
+  } = useChartSettings();
   const t = useT();
-  const triggerClasses = 'text-xs';
+
   const contentAlign = 'end';
+  const triggerClasses = 'text-xs';
   const triggerButtonProps = { size: 'extra-small' } as const;
 
-  return (
+  const isPennant = chartlib === 'pennant';
+  const commonMenuItems = (
+    <TradingButton
+      onClick={() => {
+        setChartlib(isPennant ? 'tradingview' : 'pennant');
+      }}
+      size="extra-small"
+    >
+      {isPennant ? 'TradingView' : t('Vega chart')}
+    </TradingButton>
+  );
+
+  const pennantMenuItems = (
     <>
       <TradingDropdown
         trigger={
           <TradingDropdownTrigger className={triggerClasses}>
             <TradingButton {...triggerButtonProps}>
               {t('Interval: {{interval}}', {
-                interval: intervalLabels[interval],
+                interval: t(interval),
               })}
             </TradingButton>
           </TradingDropdownTrigger>
@@ -68,13 +93,13 @@ export const CandlesMenu = () => {
               setInterval(value as Interval);
             }}
           >
-            {Object.values(Interval).map((timeInterval) => (
+            {INTERVALS.map((timeInterval) => (
               <TradingDropdownRadioItem
                 key={timeInterval}
                 inset
                 value={timeInterval}
               >
-                {intervalLabels[timeInterval]}
+                {t(timeInterval)}
                 <TradingDropdownItemIndicator />
               </TradingDropdownRadioItem>
             ))}
@@ -158,4 +183,50 @@ export const CandlesMenu = () => {
       </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');
+    }
+  }
 };

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

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

apps/trading/components/chart-container/use-chart-settings.ts

@@ -1,18 +1,23 @@
-import { getValidItem, getValidSubset } from '@vegaprotocol/react-helpers';
-import { ChartType, Interval, Study } from 'pennant';
-import { Overlay } from 'pennant';
+import { ChartType, Overlay, Study } 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;
@@ -25,20 +30,24 @@ const STUDY_ORDER: Study[] = [
 ];
 
 export const DEFAULT_CHART_SETTINGS = {
-  interval: Interval.I15M,
+  chartlib: 'pennant' as const,
+  interval: Interval.INTERVAL_I15M,
   type: ChartType.CANDLE,
   overlays: [Overlay.MOVING_AVERAGE],
   studies: [Study.MACD, Study.VOLUME],
   studySizes: {},
+  tradingViewStudies: ['Volume'],
 };
 
-export const useCandlesChartSettingsStore = create<
+export const useChartSettingsStore = 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(
@@ -81,6 +90,16 @@ export const useCandlesChartSettingsStore = create<
           });
         });
       },
+      setChartlib: (lib) => {
+        set((state) => {
+          state.chartlib = lib;
+        });
+      },
+      setTradingViewStudies: (studies: string[]) => {
+        set((state) => {
+          state.tradingViewStudies = studies;
+        });
+      },
     })),
     {
       name: 'vega_candles_chart_store',
@@ -88,13 +107,13 @@ export const useCandlesChartSettingsStore = create<
   )
 );
 
-export const useCandlesChartSettings = () => {
-  const settings = useCandlesChartSettingsStore();
+export const useChartSettings = () => {
+  const settings = useChartSettingsStore();
 
   const interval: Interval = getValidItem(
     settings.interval,
     Object.values(Interval),
-    Interval.I15M
+    Interval.INTERVAL_I15M
   );
 
   const chartType: ChartType = getValidItem(
@@ -122,15 +141,19 @@ export const useCandlesChartSettings = () => {
   });
 
   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,
   };
 };

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, FLAGS } from '@vegaprotocol/environment';
+import { ENV, useFeatureFlags } from '@vegaprotocol/environment';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ProtocolUpgradeCountdown: () => null,
@@ -48,8 +48,7 @@ describe('Navbar', () => {
 
   beforeAll(() => {
     useGlobalStore.setState({ marketId });
-    const mockedFLAGS = jest.mocked(FLAGS);
-    mockedFLAGS.REFERRALS = true;
+    useFeatureFlags.setState({ flags: { 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,
-  FLAGS,
+  useFeatureFlags,
   useEnvNameMapping,
 } from '@vegaprotocol/environment';
 import { useGlobalStore } from '../../stores';
@@ -157,6 +157,7 @@ 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();
@@ -201,7 +202,7 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
             {t('Portfolio')}
           </NavbarLink>
         </NavbarItem>
-        {FLAGS.REFERRALS && (
+        {featureFlags.REFERRALS && (
           <NavbarItem>
             <NavbarLink end={false} to={Links.REFERRALS()} onClick={onClick}>
               {t('Referrals')}

apps/trading/components/settings/settings.tsx

@@ -10,6 +10,18 @@ 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();
@@ -120,7 +132,7 @@ const SettingsGroup = ({
       })}
     >
       <div className={classNames({ 'w-3/4': inline, 'mb-2': !inline })}>
-        <label className="text-sm">{label}</label>
+        <div className="text-sm">{label}</div>
         {helpText && <p className="text-xs text-muted">{helpText}</p>}
       </div>
       {children}

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

@@ -1,19 +1,26 @@
 import { useEffect } from 'react';
-import { useMatch } from 'react-router-dom';
+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 { Connectors } from '../../lib/vega-connectors';
+import { useConnectors } from '../../lib/vega-connectors';
 import { useT } from '../../lib/use-t';
-import { Links } from '../../lib/links';
+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, '/*')];
 
 export const WelcomeDialog = () => {
-  const isReferrals = useMatch(Links.REFERRALS());
+  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);
@@ -26,14 +33,18 @@ export const WelcomeDialog = () => {
   );
 
   useEffect(() => {
-    if (dismissed) return;
-    if (isReferrals) return;
+    const shouldOmit = OMIT_ON_LIST.map((path) =>
+      matchPath(path, pathname)
+    ).some((m) => !!m);
+
+    if (dismissed || shouldOmit) return;
+
     setDialogOpen(true);
-  }, [dismissed, isReferrals, setDialogOpen]);
+  }, [dismissed, pathname, setDialogOpen]);
 
   const content = walletDialogOpen ? (
     <VegaConnectDialog
-      connectors={Connectors}
+      connectors={connectors}
       riskMessage={<RiskMessage />}
       onClose={() => setWalletDialogOpen(false)}
       contentOnly

apps/trading/e2e/.env

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

apps/trading/e2e/.env.develop

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

apps/trading/e2e/README.md

@@ -87,10 +87,9 @@ docker build -f docker/node-outside-docker.Dockerfile --build-arg APP=trading --
 
 ## Running Tests 🧪
 
-Before running make sure the docker daemon is runnign so that the app can be served.
+Before running make sure the docker daemon is running.
 
 To run a specific test, use the `-k` option followed by the name of the test.
-
 Run all tests:
 
 ```bash
@@ -109,6 +108,25 @@ Run from anywhere:
 yarn trading:test -- "test_name" -s --headed
 ```
 
+Run using your locally served console:
+
+Within one terminal
+
+```bash
+yarn nx build trading
+```
+
+```bash
+yarn nx serve trading
+
+```
+
+Once console is served you can use the flag --local-server
+
+```bash
+poetry run pytest -k "test_name" -s --headed --local-server
+```
+
 ## Running Tests in Parallel 🔢
 
 To run tests in parallel, use the `--numprocesses auto` option. The `--dist loadfile` setting ensures that multiple runners are not assigned to a single test file.

apps/trading/e2e/actions/utils.py

@@ -6,23 +6,27 @@ 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
@@ -36,13 +40,34 @@ 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,6 +1,7 @@
 from typing import List, Tuple, Optional
 from vega_sim.service import VegaService, PeggedOrder
 
+
 def submit_order(
     vega: VegaService,
     wallet_name: str,
@@ -35,7 +36,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):
+def submit_liquidity(vega: VegaService, wallet_name: str, market_id: str, buy_vol=99, sell_vol=99, custom_price=None):
     vega.submit_simple_liquidity(
         key_name=wallet_name,
         market_id=market_id,
@@ -51,7 +52,7 @@ def submit_liquidity(vega: VegaService, wallet_name: str, market_id: str):
         pegged_order=PeggedOrder(reference="PEGGED_REFERENCE_MID", offset=1),
         wait=False,
         time_in_force="TIME_IN_FORCE_GTC",
-        volume=99,
+        volume=buy_vol,
     )
     vega.submit_order(
         market_id=market_id,
@@ -61,5 +62,5 @@ def submit_liquidity(vega: VegaService, wallet_name: str, market_id: str):
         pegged_order=PeggedOrder(reference="PEGGED_REFERENCE_MID", offset=1),
         wait=False,
         time_in_force="TIME_IN_FORCE_GTC",
-        volume=99,
-    )
+        volume=sell_vol,
+    )

apps/trading/e2e/conftest.py

@@ -7,7 +7,6 @@ import time
 import docker
 import http.server
 
-
 from contextlib import contextmanager
 from vega_sim.null_service import VegaServiceNull
 from playwright.sync_api import Browser, Page
@@ -102,11 +101,23 @@ def init_vega(request=None):
             logger.info(f"Removing container {container.id}")
             container.remove()
 
+
+def pytest_addoption(parser):
+    parser.addoption(
+        "--local-server", action="store_true", default=False,
+        help="Build and serve locally instead of using a container"
+    )
+
+@pytest.fixture(scope="session")
+def local_server(pytestconfig):
+    return pytestconfig.getoption("--local-server")
+
 @contextmanager
-def init_page(vega: VegaServiceNull, browser: Browser, request: pytest.FixtureRequest):
+def init_page(vega: VegaServiceNull, browser: Browser, request: pytest.FixtureRequest, local_server: bool):
+    server_port = "4200" if local_server else str(vega.console_port)
     with browser.new_context(
         viewport={"width": 1920, "height": 1080},
-        base_url=f"http://localhost:{vega.console_port}",
+        base_url=f"http://localhost:{server_port}",
     ) as context, context.new_page() as page:
         context.tracing.start(screenshots=True, snapshots=True, sources=True)
         try:
@@ -115,7 +126,7 @@ def init_page(vega: VegaServiceNull, browser: Browser, request: pytest.FixtureRe
             while attempts < 100:
                 try:
                     code = requests.get(
-                        f"http://localhost:{vega.console_port}/"
+                        f"http://localhost:{server_port}/"
                     ).status_code
                     if code == 200:
                         break
@@ -161,8 +172,8 @@ def vega(request):
 
 
 @pytest.fixture
-def page(vega, browser, request):
-    with init_page(vega, browser, request) as page_instance:
+def page(vega, browser, request, local_server):
+    with init_page(vega, browser, request, local_server) as page_instance:
         yield page_instance
 
 

apps/trading/e2e/fixtures/market.py

@@ -8,12 +8,17 @@ 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)
@@ -37,6 +42,7 @@ 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()
@@ -111,16 +117,17 @@ def setup_simple_successor_market(
     return 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():
+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):
         market_id = setup_simple_market(vega, **kwargs)
 
-    submit_liquidity(vega, MM_WALLET.name, market_id)
+    if add_liquidity:
+        submit_liquidity(vega, MM_WALLET.name, market_id)
     submit_multiple_orders(
-        vega, MM_WALLET.name, market_id, "SIDE_SELL", [[1, 110], [1, 105]]
+        vega, MM_WALLET.name, market_id, "SIDE_SELL", sell_orders
     )
     submit_multiple_orders(
-        vega, MM_WALLET2.name, market_id, "SIDE_BUY", [[1, 90], [1, 95]]
+        vega, MM_WALLET2.name, market_id, "SIDE_BUY", buy_orders
     )
 
     vega.forward("10s")
@@ -130,11 +137,22 @@ def setup_opening_auction_market(vega: VegaService, market_id: str = None, **kwa
     return market_id
 
 
-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)
+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
 
-    submit_order(vega, "Key 1", market_id, "SIDE_BUY", 1, 110)
+
+# 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])
 
     vega.forward("10s")
     vega.wait_fn(1)
@@ -142,6 +160,7 @@ def setup_continuous_market(vega: VegaService, market_id: str = None, **kwargs):
 
     return market_id
 
+
 def setup_perps_market(
     vega: VegaService,
     custom_asset_name="tDAI",
@@ -210,7 +229,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)
@@ -225,4 +244,4 @@ def setup_perps_market(
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
 
-    return market_id
+    return market_id

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

@@ -17,8 +17,8 @@ def vega():
 
 # setting up everything in this single fixture, as all of the tests need the same setup, so no point in creating separate ones
 @pytest.fixture(scope="module")
-def page(vega, browser, request):
-    with init_page(vega, browser, request) as page:
+def page(vega, browser, request, local_server):
+    with init_page(vega, browser, request,  local_server) as page:
         setup_continuous_market(vega)
         risk_accepted_setup(page)
         page.goto("/")

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

@@ -12,8 +12,8 @@ def vega(request):
 
 
 @pytest.fixture(scope="module")
-def page(vega, browser, request):
-    with init_page(vega, browser, request) as page:
+def page(vega, browser, request, local_server):
+    with init_page(vega, browser, request, local_server) as page:
         risk_accepted_setup(page)
         page.goto("/#/markets/all")
         yield page

apps/trading/e2e/tests/navigation/test_navigation.py

@@ -12,8 +12,8 @@ def vega():
 
 # we can reuse single page instance in all tests
 @pytest.fixture(scope="module")
-def page(vega, browser, request):
-    with init_page(vega, browser, request) as page:
+def page(vega, browser, request, local_server):
+    with init_page(vega, browser, request, local_server) as page:
         yield page
 
 

apps/trading/e2e/tests/order/test_order_status.py

@@ -223,8 +223,8 @@ def markets(vega: VegaService):
 
 
 @pytest.fixture(scope="module")
-def page(vega, browser, request):
-    with init_page(vega, browser, request) as page:
+def page(vega, browser, request, local_server):
+    with init_page(vega, browser, request, local_server) as page:
         risk_accepted_setup(page)
         auth_setup(vega, page)
         page.goto("/")

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

@@ -131,9 +131,10 @@ def test_perps_market_terminated(page: Page, vega: VegaService):
     vega.wait_for_total_catchup()
 
     page.goto(f"/#/markets/{perpetual_market}") 
+    # TODO cahnge back to have text once bug #5465 is fixed
     expect(page.get_by_test_id("market-price")).to_have_text("Mark Price100.00")
-    expect(page.get_by_test_id("market-change")).to_have_text("Change (24h)-")
-    expect(page.get_by_test_id("market-volume")).to_have_text("Volume (24h)-")
+    expect(page.get_by_test_id("market-change")).to_contain_text("Change (24h)")
+    expect(page.get_by_test_id("market-volume")).to_contain_text("Volume (24h)")
     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%)")

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

@@ -0,0 +1,175 @@
+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,6 +7,9 @@ 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")
+GOVERNANCE_WALLET = WalletConfig(
+    "FJMKnwfZdd48C8NqvYrG", "bY3DxwtsCstMIIZdNpKs")
+PARTY_A = WalletConfig("party_a", "party_a")
+PARTY_B = WalletConfig("party_b", "party_b")
 
 wallets = [MM_WALLET, MM_WALLET2, TERMINATE_WALLET, GOVERNANCE_WALLET]

apps/trading/jest.config.ts

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

apps/trading/lib/i18n/index.ts

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

apps/trading/lib/vega-connectors.ts

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

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 { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { LiquidityHeader } from '../components/liquidity-header';
 import { MarketHeader } from '../components/market-header';
 import { PortfolioSidebar } from '../client-pages/portfolio/portfolio-sidebar';
@@ -44,144 +44,147 @@ const NotFound = () => {
   );
 };
 
-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 },
-        ],
-      },
-    ],
-  },
+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 },
+          ],
+        },
+      ],
+    },
 
-  {
-    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(routerConfig);
+  const routes = useRoutes(useRouterConfig());
   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 { Connectors } from '../lib/vega-connectors';
+import { useConnectors } from '../lib/vega-connectors';
 import {
   Web3ConnectUncontrolledDialog,
   WithdrawalApprovalDialogContainer,
@@ -13,13 +13,14 @@ 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,13 +7,14 @@ import {
   useVegaWallet,
 } from '@vegaprotocol/wallet';
 import { useGlobalStore } from '../stores';
-import { Connectors } from '../lib/vega-connectors';
+import { useConnectors } 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 eagerConnecting = useVegaEagerConnect(Connectors);
+  const connectors = useConnectors();
+  const eagerConnecting = useVegaEagerConnect(connectors);
   const [isTelemetryApproved] = useTelemetryApproval();
   useEthereumEagerConnect(
     isTelemetryApproved ? { dsn: SENTRY_DSN, env: VEGA_ENV } : {}
@@ -23,7 +24,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,43 +1,52 @@
 import 'pennant/dist/style.css';
-import { CandlestickChart } from 'pennant';
+import {
+  CandlestickChart,
+  type Overlay,
+  type ChartType,
+  type Interval,
+  type Study,
+} 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[]) => {
@@ -69,7 +78,7 @@ export const CandlesChartContainer = ({
                   </span>
                 ),
                 initialNumCandlesToDisplay: candlesCount,
-                studySize: STUDY_SIZE,
+                studySize: defaultStudySize,
                 studySizes,
               }}
               interval={interval}

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

@@ -1,85 +0,0 @@
-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/constants.ts

@@ -0,0 +1,12 @@
+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/data-source.ts

@@ -56,6 +56,7 @@ const defaultConfig = {
  */
 export class VegaDataSource implements DataSource {
   client: ApolloClient<object>;
+  from?: Date;
   marketId: string;
   partyId: null | string;
   _decimalPlaces = 0;
@@ -158,6 +159,7 @@ export class VegaDataSource implements DataSource {
    */
   async query(interval: PennantInterval, from: string) {
     try {
+      this.from = new Date(from);
       const { data } = await this.client.query<
         CandlesQuery,
         CandlesQueryVariables
@@ -215,7 +217,9 @@ export class VegaDataSource implements DataSource {
           this.decimalPlaces,
           this.positionDecimalPlaces
         );
-
+        if (!this.from || candle.date < this.from) {
+          return;
+        }
         onSubscriptionData(candle);
       }
     });

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

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

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 { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { useT } from '../../use-t';
 
 interface DealTicketContainerProps {
@@ -24,6 +24,7 @@ export const DealTicketContainer = ({
   marketId,
   ...props
 }: DealTicketContainerProps) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const showStopOrder = useDealTicketFormValues((state) =>
     isStopOrderType(state.formValues[marketId]?.type)
@@ -50,7 +51,7 @@ export const DealTicketContainer = ({
       reload={reload}
     >
       {market && marketData ? (
-        FLAGS.STOP_ORDERS && showStopOrder ? (
+        featureFlags.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 type { FeatureFlags } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { formatForInput } from '@vegaprotocol/utils';
 
 jest.mock('zustand');
@@ -19,17 +19,6 @@ 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();
@@ -94,6 +83,7 @@ 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 { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { Trans } from 'react-i18next';
 import { useT, ns } from '../../use-t';
 
@@ -49,6 +49,7 @@ export const TypeToggle = ({
   value,
   onValueChange,
 }: Pick<TypeSelectorProps, 'onValueChange' | 'value'>) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const options = useOptions();
   const toggles = useToggles();
@@ -57,8 +58,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': FLAGS.STOP_ORDERS,
-        'grid-cols-2': !FLAGS.STOP_ORDERS,
+        'grid-cols-3': featureFlags.STOP_ORDERS,
+        'grid-cols-2': !featureFlags.STOP_ORDERS,
       })}
       value={value}
       onValueChange={onValueChange}
@@ -80,7 +81,7 @@ export const TypeToggle = ({
           </button>
         </RadioGroup.Item>
       ))}
-      {FLAGS.STOP_ORDERS && (
+      {featureFlags.STOP_ORDERS && (
         <TradingDropdown
           trigger={
             <TradingDropdownTrigger

libs/deposits/src/lib/deposit-manager.tsx

@@ -5,7 +5,7 @@ import { prepend0x } from '@vegaprotocol/smart-contracts';
 import sortBy from 'lodash/sortBy';
 import { useSubmitApproval } from './use-submit-approval';
 import { useSubmitFaucet } from './use-submit-faucet';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDepositBalances } from './use-deposit-balances';
 import type { Asset } from '@vegaprotocol/assets';
 import {
@@ -30,7 +30,7 @@ export const DepositManager = ({
   const { config } = useEthereumConfig();
   const [persistentDeposit, savePersistentDeposit] =
     usePersistentDeposit(initialAssetId);
-  const [assetId, setAssetId] = useState(persistentDeposit?.assetId);
+  const assetId = persistentDeposit?.assetId;
   const asset = assets.find((a) => a.id === assetId);
   const bridgeContract = useBridgeContract();
 
@@ -70,18 +70,19 @@ export const DepositManager = ({
     [savePersistentDeposit, persistentDeposit]
   );
 
+  useEffect(() => {
+    // When we change asset, also clear the tracked faucet/approve transactions so
+    // we dont render stale UI
+    approve.reset();
+    faucet.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assetId]);
+
   return (
     <DepositForm
       selectedAsset={asset}
       onDisconnect={reset}
-      onSelectAsset={(id) => {
-        setAssetId(id);
-        savePersistentDeposit({ assetId: id });
-        // When we change asset, also clear the tracked faucet/approve transactions so
-        // we dont render stale UI
-        approve.reset();
-        faucet.reset();
-      }}
+      onSelectAsset={(assetId) => savePersistentDeposit({ assetId })}
       handleAmountChange={onAmountChange}
       assets={sortBy(assets, 'name')}
       submitApprove={approve.perform}

libs/deposits/src/lib/index.ts

@@ -13,3 +13,4 @@ export * from './use-get-deposit-maximum';
 export * from './use-get-deposited-amount';
 export * from './use-submit-approval';
 export * from './use-submit-faucet';
+export * from './use-persistent-deposit';

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

@@ -10,7 +10,7 @@ interface PersistedDeposit {
 }
 type PersistedDepositData = Record<string, PersistedDeposit>;
 
-const usePersistentDepositStore = create<{
+export const usePersistentDepositStore = create<{
   deposits: PersistedDepositData;
   saveValue: (entry: PersistedDeposit) => void;
   lastVisited?: PersistedDeposit;

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

@@ -3,7 +3,13 @@ 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 } from './use-environment';
+import {
+  STORAGE_KEY,
+  useEnvironment,
+  featureFlagsLocalStorageKey,
+  getUserEnabledFeatureFlags,
+  setUserEnabledFeatureFlag,
+} from './use-environment';
 
 const noop = () => {
   /* no op*/
@@ -459,3 +465,30 @@ 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,12 +40,478 @@ const VERSION = 1;
 export const STORAGE_KEY = `vega_url_${VERSION}`;
 const SUBSCRIPTION_TIMEOUT = 3000;
 
-export const ENV = compileEnvVars();
-export const FLAGS = compileFeatureFlags();
+/**
+ * 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 useEnvironment = create<EnvStore>()((set, get) => ({
   ...compileEnvVars(),
-  ...compileFeatureFlags(),
   nodes: [],
   status: 'default',
   error: null,
@@ -166,400 +632,4 @@ export const useInitializeEnv = () => {
   }, [status, initialize]);
 };
 
-/**
- * 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;
-}
+export const ENV = compileEnvVars();

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

@@ -60,6 +60,8 @@ 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,6 +11,7 @@ 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';
@@ -32,6 +33,7 @@ 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,5 +1,3 @@
 {
-  "Indicators": "Indicators",
-  "Interval: {{interval}}": "Interval: {{interval}}",
   "No open orders": "No open orders"
 }

libs/i18n/src/locales/en/trading-view.json

@@ -0,0 +1,4 @@
+{
+  "Failed to initialize Trading view": "Failed to initialize Trading view",
+  "Loading Trading View": "Loading Trading View"
+}

libs/i18n/src/locales/en/trading.json

@@ -26,9 +26,10 @@
   "Best offer": "Best offer",
   "Browse": "Browse",
   "By using the Vega Console, you acknowledge that you have read and understood the <0>Vega Console Disclaimer</0>": "By using the Vega Console, you acknowledge that you have read and understood the <0>Vega Console Disclaimer</0>",
-  "Candles": "Candles",
+  "Chart": "Chart",
   "Change (24h)": "Change (24h)",
   "Chart": "Chart",
+  "Chart by <0>TradingView</0>": "Chart by <0>TradingView</0>",
   "checkOutProposalsAndVote": "Check out the terms of the proposals and vote:",
   "checkOutProposalsAndVote_one": "Check out the terms of the proposal and vote:",
   "checkOutProposalsAndVote_other": "Check out the terms of the proposals and vote:",
@@ -120,7 +121,15 @@
   "Improve vega console": "Improve vega console",
   "Inactive": "Inactive",
   "Index Price": "Index Price",
+  "Indicators": "Indicators",
   "Infrastructure": "Infrastructure",
+  "Interval: {{interval}}": "Interval: {{interval}}",
+  "INTERVAL_I1M": "1m",
+  "INTERVAL_I5M": "5m",
+  "INTERVAL_I15M": "15m",
+  "INTERVAL_I1H": "1H",
+  "INTERVAL_I6H": "6H",
+  "INTERVAL_I1D": "1D",
   "Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.": "Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.",
   "Learn about providing liquidity": "Learn about providing liquidity",
   "Learn more": "Learn more",
@@ -192,6 +201,7 @@
   "pastEpochs": "Past {{count}} epochs",
   "pastEpochs_one": "Past {{count}} epoch",
   "pastEpochs_other": "Past {{count}} epochs",
+  "Pennant": "Pennant",
   "Perpetuals": "Perpetuals",
   "Please choose another market from the <0>market list</0>": "Please choose another market from the <0>market list</0>",
   "Please connect Vega wallet": "Please connect Vega wallet",
@@ -291,6 +301,7 @@
   "Trader": "Trader",
   "Trades": "Trades",
   "Trading": "Trading",
+  "TradingView": "TradingView",
   "Trading has been terminated as a result of the product definition": "Trading has been terminated as a result of the product definition",
   "Trading mode": "Trading mode",
   "Trading on Market {{name}} may stop on {{date}}. There is open proposal to close this market.": "Trading on Market {{name}} may stop on {{date}}. There is open proposal to close this market.",
@@ -302,6 +313,7 @@
   "totalCommission_other": "Total commission (last {{count}} epochs)",
   "Unknown": "Unknown",
   "Unknown settlement date": "Unknown settlement date",
+  "Vega chart": "Vega chart",
   "Vega Reward pot": "Vega Reward pot",
   "Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
   "Vesting": "Vesting",

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

@@ -198,7 +198,7 @@ export const Orderbook = ({
             );
             return (
               <div
-                className="overflow-hidden grid"
+                className="overflow-hidden grid relative"
                 data-testid="orderbook-grid-element"
                 style={{
                   width,

libs/markets/src/lib/components/market-info/market-info-accordion.tsx

@@ -1,5 +1,5 @@
 import {
-  FLAGS,
+  useFeatureFlags,
   TokenStaticLinks,
   useEnvironment,
 } from '@vegaprotocol/environment';
@@ -90,6 +90,7 @@ export const MarketInfoAccordion = ({
   market,
   onSelect,
 }: MarketInfoAccordionProps) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const { VEGA_TOKEN_URL } = useEnvironment();
   const headerClassName = 'uppercase text-lg';
@@ -352,7 +353,7 @@ export const MarketInfoAccordion = ({
                 </>
               }
             />
-            {FLAGS.SUCCESSOR_MARKETS && (
+            {featureFlags.SUCCESSOR_MARKETS && (
               <AccordionItem
                 itemId="succession-line"
                 title={t('Succession line')}

libs/markets/src/lib/components/market-info/market-info-panels.spec.tsx

@@ -135,7 +135,7 @@ describe('MarketInfoPanels', () => {
       render(<DataSourceProof dataSourceSpecId={''} {...props} />);
       expect(screen.getByText('Internal conditions')).toBeInTheDocument();
       const dateFromUnixTimestamp = condition.value
-        ? getDateTimeFormat().format(new Date(parseInt(condition.value)))
+        ? getDateTimeFormat().format(new Date(parseInt(condition.value) * 1000))
         : '-';
       expect(
         screen.getByText(

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

@@ -50,7 +50,7 @@ import {
 import {
   DApp,
   EtherscanLink,
-  FLAGS,
+  useFeatureFlags,
   TOKEN_PROPOSAL,
   useEnvironment,
   useLinks,
@@ -189,12 +189,13 @@ export const KeyDetailsInfoPanel = ({
   market,
   parentMarket,
 }: MarketInfoProps) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const { data: parentMarketIdData } = useParentMarketIdQuery({
     variables: {
       marketId: market.id,
     },
-    skip: !FLAGS.SUCCESSOR_MARKETS,
+    skip: !featureFlags.SUCCESSOR_MARKETS,
   });
 
   const { data: successorProposalDetails } =
@@ -202,7 +203,7 @@ export const KeyDetailsInfoPanel = ({
       variables: {
         proposalId: market.proposal?.id || '',
       },
-      skip: !FLAGS.SUCCESSOR_MARKETS || !market.proposal?.id,
+      skip: !featureFlags.SUCCESSOR_MARKETS || !market.proposal?.id,
     });
 
   // The following queries are needed as the parent market could also have been a successor market.
@@ -245,7 +246,7 @@ export const KeyDetailsInfoPanel = ({
       </KeyValueTable>
       <MarketInfoTable
         data={
-          FLAGS.SUCCESSOR_MARKETS
+          featureFlags.SUCCESSOR_MARKETS
             ? {
                 name: market.tradableInstrument.instrument.name,
                 parentMarketID:
@@ -1262,7 +1263,9 @@ export const DataSourceProof = ({
           {data.sourceType.sourceType?.conditions?.map((condition, i) => {
             if (!condition) return null;
             const dateFromUnixTimestamp = condition.value
-              ? getDateTimeFormat().format(new Date(parseInt(condition.value)))
+              ? getDateTimeFormat().format(
+                  new Date(parseInt(condition.value) * 1000)
+                )
               : '-';
             return (
               <p key={i}>

libs/positions/src/lib/liquidation-price.tsx

@@ -8,11 +8,13 @@ export const LiquidationPrice = ({
   openVolume,
   collateralAvailable,
   decimalPlaces,
+  className,
 }: {
   marketId: string;
   openVolume: string;
   collateralAvailable: string;
   decimalPlaces: number;
+  className?: string;
 }) => {
   const t = useT();
   const { data: currentData, previousData } = useEstimatePositionQuery({
@@ -39,22 +41,19 @@ export const LiquidationPrice = ({
 
   return (
     <Tooltip
+      align="end"
       description={
-        <table>
-          <tbody>
-            <tr>
-              <th>{t('Worst case')}</th>
-              <td className="pl-2 text-right font-mono">{worstCase}</td>
-            </tr>
-            <tr>
-              <th>{t('Best case')}</th>
-              <td className="pl-2 text-right font-mono">{bestCase}</td>
-            </tr>
-          </tbody>
-        </table>
+        <dl className="grid grid-cols-2">
+          <dt>{t('Worst case')}</dt>
+          <dd className="pl-2 text-right font-mono">{worstCase}</dd>
+          <dt className="font-normal">{t('Best case')}</dt>
+          <dd className="pl-2 text-right font-mono">{bestCase}</dd>
+        </dl>
       }
     >
-      <span data-testid="liquidation-price">{worstCase}</span>
+      <span data-testid="liquidation-price" className={className}>
+        {worstCase}
+      </span>
     </Tooltip>
   );
 };

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

@@ -11,7 +11,7 @@ import { useCallback } from 'react';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/web3';
 import { HALFMAXGOINT64 } from '@vegaprotocol/utils';
-import { FLAGS } from '@vegaprotocol/environment';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 
 interface PositionsManagerProps {
   partyIds: string[];
@@ -28,10 +28,11 @@ export const PositionsManager = ({
   gridProps,
   showClosed = false,
 }: PositionsManagerProps) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
   const { pubKeys, pubKey } = useVegaWallet();
   const create = useVegaTransactionStore((store) => store.create);
-  const disableClosePositionsButton = FLAGS.DISABLE_CLOSE_POSITION;
+  const disableClosePositionsButton = featureFlags.DISABLE_CLOSE_POSITION;
 
   const onClose = useCallback(
     ({ marketId, openVolume }: { marketId: string; openVolume: string }) =>

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

@@ -314,7 +314,9 @@ describe('Positions', () => {
       });
       const cells = screen.getAllByRole('gridcell');
       const cell = cells[1];
-      await userEvent.hover(cell);
+      const tooltipTrigger = cell.querySelector('[data-state="closed"]');
+      expect(tooltipTrigger).not.toBeNull();
+      await userEvent.hover(tooltipTrigger as Element);
       const tooltip = within(await screen.findByRole('tooltip'));
       expect(tooltip.getByText(data.text)).toBeInTheDocument();
     });
@@ -329,8 +331,9 @@ describe('Positions', () => {
       });
       const cells = screen.getAllByRole('gridcell');
       const cell = cells[5];
-
-      await userEvent.hover(cell);
+      const tooltipTrigger = cell.querySelector('[data-state="closed"]');
+      expect(tooltipTrigger).not.toBeNull();
+      await userEvent.hover(tooltipTrigger as Element);
       const tooltip = within(await screen.findByRole('tooltip'));
       expect(tooltip.getByText('Realised PNL: 1.23')).toBeInTheDocument();
       expect(

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

@@ -1,5 +1,5 @@
 import { useMemo, type CSSProperties, type ReactNode } from 'react';
-import { type ColDef, type ITooltipParams } from 'ag-grid-community';
+import { type ColDef } from 'ag-grid-community';
 import {
   AgGrid,
   COL_DEFS,
@@ -20,6 +20,7 @@ import {
   ExternalLink,
   VegaIcon,
   VegaIconNames,
+  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import {
   volumePrefix,
@@ -148,15 +149,6 @@ export const PositionsTable = ({
                     data.positionDecimalPlaces
                   ).toNumber();
             },
-            tooltipValueGetter: ({ data }: ITooltipParams<Position>) => {
-              if (
-                !data ||
-                data.status === PositionStatus.POSITION_STATUS_UNSPECIFIED
-              ) {
-                return null;
-              }
-              return data.status;
-            },
             valueFormatter: ({
               data,
             }: VegaValueFormatterParams<Position, 'openVolume'>): string => {
@@ -171,68 +163,6 @@ export const PositionsTable = ({
 
               return vol;
             },
-            tooltipComponent: (args: ITooltipParams<Position>) => {
-              if (!args.data) {
-                return null;
-              }
-              const POSITION_RESOLUTION_LINK =
-                DocsLinks?.POSITION_RESOLUTION ?? '';
-              let primaryTooltip;
-              switch (args.data.status) {
-                case PositionStatus.POSITION_STATUS_CLOSED_OUT:
-                  primaryTooltip = t('Your position was closed.');
-                  break;
-                case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
-                  primaryTooltip = t('Your open orders were cancelled.');
-                  break;
-                case PositionStatus.POSITION_STATUS_DISTRESSED:
-                  primaryTooltip = t('Your position is distressed.');
-                  break;
-              }
-
-              let secondaryTooltip;
-              switch (args.data.status) {
-                case PositionStatus.POSITION_STATUS_CLOSED_OUT:
-                  secondaryTooltip = t(
-                    `You did not have enough {{assetSymbol}} collateral to meet the maintenance margin requirements for your position, so it was closed by the network.`,
-                    { assetSymbol: args.data.assetSymbol }
-                  );
-                  break;
-                case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
-                  secondaryTooltip = t(
-                    'The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained.'
-                  );
-                  break;
-                case PositionStatus.POSITION_STATUS_DISTRESSED:
-                  secondaryTooltip = t(
-                    'The position was distressed, but could not be closed out - orders were removed from the book, and the open volume will be closed out once there is sufficient volume on the book.'
-                  );
-                  break;
-                default:
-                  secondaryTooltip = t('Maintained by network');
-              }
-              return (
-                <TooltipCellComponent
-                  {...args}
-                  value={
-                    <>
-                      <p className="mb-2">{primaryTooltip}</p>
-                      <p className="mb-2">{secondaryTooltip}</p>
-                      <p className="mb-2">
-                        {t('Status: {{status}}', {
-                          status: PositionStatusMapping[args.data.status],
-                        })}
-                      </p>
-                      {POSITION_RESOLUTION_LINK && (
-                        <ExternalLink href={POSITION_RESOLUTION_LINK}>
-                          {t('Read more about position resolution')}
-                        </ExternalLink>
-                      )}
-                    </>
-                  }
-                />
-              );
-            },
             cellRenderer: OpenVolumeCell,
           },
           {
@@ -337,12 +267,15 @@ export const PositionsTable = ({
                 return '-';
               }
               return (
-                <LiquidationPrice
-                  marketId={data.marketId}
-                  openVolume={data.openVolume}
-                  collateralAvailable={data.totalBalance}
-                  decimalPlaces={data.marketDecimalPlaces}
-                />
+                <div className="flex h-[45px] items-center">
+                  <LiquidationPrice
+                    className="block text-right grow"
+                    marketId={data.marketId}
+                    openVolume={data.openVolume}
+                    collateralAvailable={data.totalBalance}
+                    decimalPlaces={data.marketDecimalPlaces}
+                  />
+                </div>
               );
             },
           },
@@ -354,13 +287,13 @@ export const PositionsTable = ({
             cellClass: 'font-mono text-right',
             filter: 'agNumberColumnFilter',
             valueGetter: realisedPNLValueGetter,
-            // @ts-ignore no type overlap, but the functions are identical
-            tooltipValueGetter: realisedPNLValueGetter,
-            tooltipComponent: (args: ITooltipParams) => {
+            cellRenderer: (
+              args: VegaICellRendererParams<Position, 'realisedPNL'>
+            ) => {
               const LOSS_SOCIALIZATION_LINK =
                 DocsLinks?.LOSS_SOCIALIZATION ?? '';
 
-              if (!args.data) {
+              if (!args.data || args.value === undefined) {
                 return null;
               }
 
@@ -371,7 +304,11 @@ export const PositionsTable = ({
               if (losses <= 0) {
                 // eslint-disable-next-line react/jsx-no-useless-fragment
                 return (
-                  <TooltipCellComponent {...args} value={args.valueFormatted} />
+                  <Tooltip description={args.valueFormatted} align="end">
+                    <div>
+                      <PNLCell {...args} />
+                    </div>
+                  </Tooltip>
                 );
               }
 
@@ -381,20 +318,24 @@ export const PositionsTable = ({
               );
 
               return (
-                <TooltipCellComponent
-                  {...args}
-                  value={
+                <Tooltip
+                  align="end"
+                  description={
                     <>
                       <p className="mb-2">
                         {t('Realised PNL: {{value}}', {
-                          value: args.value,
+                          nsSeparator: '*',
+                          replace: { value: args.value },
                         })}
                       </p>
                       <p className="mb-2">
                         {t(
                           'Lifetime loss socialisation deductions: {{losses}}',
                           {
-                            losses: lossesFormatted,
+                            nsSeparator: '*',
+                            replace: {
+                              losses: lossesFormatted,
+                            },
                           }
                         )}
                       </p>
@@ -411,7 +352,11 @@ export const PositionsTable = ({
                       )}
                     </>
                   }
-                />
+                >
+                  <div>
+                    <PNLCell {...args} />
+                  </div>
+                </Tooltip>
               );
             },
             valueFormatter: ({
@@ -428,7 +373,6 @@ export const PositionsTable = ({
             headerTooltip: t(
               'Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.'
             ),
-            cellRenderer: PNLCell,
           },
           {
             headerName: t('Unrealised PNL'),
@@ -520,10 +464,66 @@ export const OpenVolumeCell = ({
   valueFormatted,
   data,
 }: VegaICellRendererParams<Position, 'openVolume'>) => {
+  const t = useT();
   if (!valueFormatted || !data || !data.notional) {
     return <>-</>;
   }
 
+  const POSITION_RESOLUTION_LINK = DocsLinks?.POSITION_RESOLUTION ?? '';
+  let primaryTooltip;
+  switch (data.status) {
+    case PositionStatus.POSITION_STATUS_CLOSED_OUT:
+      primaryTooltip = t('Your position was closed.');
+      break;
+    case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
+      primaryTooltip = t('Your open orders were cancelled.');
+      break;
+    case PositionStatus.POSITION_STATUS_DISTRESSED:
+      primaryTooltip = t('Your position is distressed.');
+      break;
+  }
+
+  let secondaryTooltip;
+  switch (data.status) {
+    case PositionStatus.POSITION_STATUS_CLOSED_OUT:
+      secondaryTooltip = t(
+        `You did not have enough {{assetSymbol}} collateral to meet the maintenance margin requirements for your position, so it was closed by the network.`,
+        { assetSymbol: data.assetSymbol }
+      );
+      break;
+    case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
+      secondaryTooltip = t(
+        'The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained.'
+      );
+      break;
+    case PositionStatus.POSITION_STATUS_DISTRESSED:
+      secondaryTooltip = t(
+        'The position was distressed, but could not be closed out - orders were removed from the book, and the open volume will be closed out once there is sufficient volume on the book.'
+      );
+      break;
+    default:
+      secondaryTooltip = t('Maintained by network');
+  }
+  const description = (
+    <>
+      <p className="mb-2">{primaryTooltip}</p>
+      <p className="mb-2">{secondaryTooltip}</p>
+      <p className="mb-2">
+        {t('Status: {{status}}', {
+          nsSeparator: '*',
+          replace: {
+            status: PositionStatusMapping[data.status],
+          },
+        })}
+      </p>
+      {POSITION_RESOLUTION_LINK && (
+        <ExternalLink href={POSITION_RESOLUTION_LINK}>
+          {t('Read more about position resolution')}
+        </ExternalLink>
+      )}
+    </>
+  );
+
   const notional = addDecimalsFormatNumber(
     data.notional,
     data.marketDecimalPlaces
@@ -539,16 +539,11 @@ export const OpenVolumeCell = ({
   }
 
   return (
-    <WarningCell
-      showIcon={
-        // not sure why but data.status has become a union of all the enum values
-        // rather than just being the enum itself
-        (data.status as PositionStatus) !==
-        PositionStatus.POSITION_STATUS_UNSPECIFIED
-      }
-    >
-      {cellContent}
-    </WarningCell>
+    <Tooltip description={description}>
+      <div>
+        <WarningCell showIcon>{cellContent}</WarningCell>
+      </div>
+    </Tooltip>
   );
 };
 

libs/proposals/src/lib/protocol-upgrade-proposals/use-block-rising.ts

@@ -68,10 +68,13 @@ export const useBlockRising = (skip = false) => {
         }
       );
 
-      const heights = compact([
-        ...results.map((r) => r?.blockHeight),
-        blockInfo?.result.block.header.height,
-      ]);
+      const heights = compact([...results.map((r) => r?.blockHeight)]);
+
+      // Handles TendermintErrorResponses
+      if (blockInfo && 'result' in blockInfo) {
+        heights.push(blockInfo.result.block.header.height);
+      }
+
       const current = max(heights);
       if (current && Number(current) > prev) {
         setBlock(Number(current));

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

@@ -1,3 +1,4 @@
+export * from './use-copy-timeout';
 export * from './use-fetch';
 export * from './use-local-storage';
 export * from './use-mutation-observer';
@@ -11,4 +12,4 @@ export * from './use-theme-switcher';
 export * from './use-storybook-theme-observer';
 export * from './use-yesterday';
 export * from './use-previous';
-export * from './use-copy-timeout';
+export { useScript } from './use-script';

libs/react-helpers/src/hooks/use-fetch.ts

@@ -76,16 +76,26 @@ export const useFetch = <T>(
             ...options,
             body: body ? body : options?.body,
           });
-          if (!response.ok) {
+
+          data = (await response.json()) as T;
+
+          if (!response.ok && !data) {
             throw new Error(response.statusText);
           }
 
-          data = (await response.json()) as T;
           // @ts-ignore - 'error' in data
-          if (data && 'error' in data) {
+          if (data && data.error) {
+            // Explicit check for TendermintErrorResponse style error
+            // @ts-ignore - 'error' in data
+            if (data.error.data) {
+              // @ts-ignore - 'error' in data
+
+              throw new Error(data.error.data);
+            }
             // @ts-ignore - data.error
             throw new Error(data.error);
           }
+
           if (cancelRequest.current) return;
 
           dispatch({ type: ActionType.FETCHED, payload: data });

libs/react-helpers/src/hooks/use-script.spec.ts

@@ -0,0 +1,18 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useScript } from './use-script';
+
+describe('useScript', () => {
+  it('appends a script to the body', async () => {
+    const url = 'http://localhost:8080/foo.js';
+
+    const { result } = renderHook(() => useScript(url, 'integrity-hash'));
+
+    expect(result.current).toBe('loading');
+
+    await waitFor(() => {
+      const script = document.body.getElementsByTagName('script')[0];
+      expect(script).toBeInTheDocument();
+      expect(script).toHaveAttribute('src', url);
+    });
+  });
+});

libs/react-helpers/src/hooks/use-script.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+
+type State = 'idle' | 'loading' | 'ready' | 'error';
+
+// keep record of loaded script state, so if the component re-mounts but the script
+// was already appended its not re-appended and will have the correct state
+type Url = string;
+const cache: Record<Url, State> = {};
+
+export const useScript = (url: string, integrity: string) => {
+  // track state of the script as it loads or possibly fails
+  const [state, setState] = useState<State>(url ? 'loading' : 'idle');
+
+  useEffect(() => {
+    if (!url) {
+      setState('idle');
+      return;
+    }
+
+    // Use the integrity hash of the script as an identifier
+    let script = document.getElementById(integrity) as HTMLScriptElement | null;
+
+    if (script) {
+      // script already on the page
+      setState(cache[url]);
+    } else {
+      // script not found, create and append script
+      script = document.createElement('script');
+      script.id = integrity;
+      script.src = url;
+      script.async = true;
+      script.crossOrigin = 'anonymous'; // make sure sri is respected with cross origin request
+      script.integrity = `sha256-${integrity}`;
+
+      document.body.appendChild(script);
+    }
+
+    // Setup/teardown listeners to notify component when script has loaded
+    const _setState = (event: Event) => {
+      const result = event.type === 'load' ? 'ready' : 'error';
+      setState(result);
+      cache[url] = result;
+    };
+
+    script.addEventListener('load', _setState);
+    script.addEventListener('error', _setState);
+
+    return () => {
+      if (script) {
+        script.removeEventListener('load', _setState);
+        script.removeEventListener('error', _setState);
+      }
+    };
+  }, [url, integrity]);
+
+  return state;
+};

libs/tendermint/src/lib/use-block-info.ts

@@ -1,6 +1,11 @@
 import { useEnvironment } from '@vegaprotocol/environment';
 import { useFetch } from '@vegaprotocol/react-helpers';
-import { type TendermintBlockResponse } from '../types';
+import type {
+  TendermintBlockResponse,
+  TendermintErrorResponse,
+} from '../types';
+
+type TendermintResponse = TendermintBlockResponse | TendermintErrorResponse;
 
 export const useBlockInfo = (blockHeight?: number, canFetch = true) => {
   const { TENDERMINT_URL } = useEnvironment();
@@ -10,7 +15,7 @@ export const useBlockInfo = (blockHeight?: number, canFetch = true) => {
     TENDERMINT_URL && blockHeight && !isNaN(blockHeight) && canFetch
   );
 
-  const { state, refetch } = useFetch<TendermintBlockResponse>(
+  const { state, refetch } = useFetch<TendermintResponse>(
     url,
     { cache: 'force-cache' },
     canFetchData

libs/tendermint/src/types.ts

@@ -7,6 +7,16 @@ export type TendermintBlockResponse = {
   };
 };
 
+export type TendermintErrorResponse = {
+  jsonrpc: string;
+  id: number;
+  error: {
+    code: number;
+    message: string;
+    data: string;
+  };
+};
+
 type Id = {
   hash: string;
   parts: {
@@ -34,7 +44,7 @@ type Header = {
   proposer_address: string;
 };
 
-type Block = {
+export type Block = {
   header: Header;
   data: {
     txs: string[];

libs/trading-view/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/trading-view/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__generated__"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}