chore: fix type import, ignore useless constructor lint rule

.gitattributes

@@ -1,4 +1,3 @@
 * text eol=lf
 *.png binary
 *.ico binary
-*.woff2 binary

.husky/pre-commit

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

.husky/pre-push

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

apps/explorer/src/app/app.tsx

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

apps/explorer/src/app/components/assets/assets-table.tsx

@@ -24,7 +24,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
   const navigate = useNavigate();
   const ref = useRef<AgGridReact>(null);
   const showColumnsOnDesktop = () => {
-    ref.current?.api.setColumnsVisible(
+    ref.current?.columnApi.setColumnsVisible(
       ['id', 'type', 'status'],
       window.innerWidth > BREAKPOINT_MD
     );

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

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

apps/explorer/src/app/components/markets/markets-table.tsx

@@ -29,7 +29,7 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
     const showColumnsOnDesktop = () => {
-      gridRef.current?.api.setColumnsVisible(
+      gridRef.current?.columnApi.setColumnsVisible(
         ['id', 'state', 'asset'],
         window.innerWidth > BREAKPOINT_MD
       );

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

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

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -44,11 +44,11 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
     const showColumnsOnDesktop = () => {
-      gridRef.current?.api.setColumnsVisible(
+      gridRef.current?.columnApi.setColumnsVisible(
         ['voting', 'cDate', 'eDate', 'type'],
         window.innerWidth > BREAKPOINT_MD
       );
-      gridRef.current?.api.setColumnWidth(
+      gridRef.current?.columnApi.setColumnWidth(
         'actions',
         window.innerWidth > BREAKPOINT_MD ? 221 : 80
       );

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

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

apps/explorer/src/app/routes/blocks/id/block.tsx

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

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

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

apps/governance/.env.capsule

@@ -32,7 +32,7 @@ CYPRESS_FAIRGROUND=false
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
+NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true

apps/governance/.env.mainnet

@@ -23,7 +23,7 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
+NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true

apps/governance/.env.mainnet-mirror

@@ -22,7 +22,7 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
+NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true

apps/governance/.env.validators-testnet

@@ -21,7 +21,7 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
+NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true

apps/governance/src/app-loader.tsx

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

apps/governance/src/components/heading/heading.tsx

@@ -23,13 +23,10 @@ export const Heading = ({
       })}
     >
       <h1
-        className={classNames(
-          'font-alpha calt text-5xl [word-break:break-word]',
-          {
-            'mt-0': !marginTop,
-            'mb-0': !marginBottom,
-          }
-        )}
+        className={classNames('font-alpha calt text-5xl break-words', {
+          'mt-0': !marginTop,
+          'mb-0': !marginBottom,
+        })}
       >
         {title}
       </h1>

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

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

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

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

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

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

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

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

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

@@ -7,10 +7,8 @@ import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 
 export const ProposalAssetDetails = ({
   asset,
-  originalAsset,
 }: {
   asset: AssetFieldsFragment;
-  originalAsset?: AssetFieldsFragment;
 }) => {
   const { t } = useTranslation();
   const [showAssetDetails, setShowAssetDetails] = useState(false);
@@ -29,7 +27,6 @@ export const ProposalAssetDetails = ({
         <div className="mb-10 pb-4">
           <AssetDetailsTable
             asset={asset}
-            originalAsset={originalAsset}
             omitRows={[
               AssetDetail.STATUS,
               AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,

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

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

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

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

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

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

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

@@ -26,7 +26,7 @@ import {
   ProposalCancelTransferDetails,
   ProposalTransferDetails,
 } from '../proposal-transfer';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { ProposalUpdateBenefitTiers } from '../proposal-update-benefit-tiers';
 
 export interface ProposalProps {
@@ -53,7 +53,6 @@ export const Proposal = ({
   originalMarketProposalRestData,
   mostRecentlyEnactedAssociatedMarketProposal,
 }: ProposalProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const { submit, Dialog, finalizedVote, transaction } = useVoteSubmit();
   const { voteState, voteDatetime } = useUserVote(proposal?.id, finalizedVote);
@@ -66,13 +65,10 @@ export const Proposal = ({
     ? removePaginationWrapper(assetData.assetsConnection?.edges)[0]
     : undefined;
 
-  const originalAsset = asset;
-
   if (proposal.terms.change.__typename === 'UpdateAsset' && asset) {
     asset = {
       ...asset,
       quantum: proposal.terms.change.quantum,
-      source: { ...asset.source },
     };
 
     if (asset.source.__typename === 'ERC20') {
@@ -133,7 +129,7 @@ export const Proposal = ({
   }
 
   // Show governance transfer details only if the GOVERNANCE_TRANSFERS flag is on.
-  const governanceTransferDetails = featureFlags.GOVERNANCE_TRANSFERS && (
+  const governanceTransferDetails = FLAGS.GOVERNANCE_TRANSFERS && (
     <>
       {proposal.terms.change.__typename === 'NewTransfer' && (
         /** Governance New Transfer Details */
@@ -232,7 +228,7 @@ export const Proposal = ({
         proposal.terms.change.__typename === 'UpdateAsset') &&
         asset && (
           <div className="mb-4">
-            <ProposalAssetDetails asset={asset} originalAsset={originalAsset} />
+            <ProposalAssetDetails asset={asset} />
           </div>
         )}
 

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.spec.tsx

@@ -281,8 +281,8 @@ describe('VoteBreakdown', () => {
   });
 
   it('Progress bar displays status -  LP majority', () => {
-    const yesVotesLP = 0.8;
-    const noVotesLP = 0.2;
+    const yesVotesLP = 800;
+    const noVotesLP = 200;
     const expectedProgress = (yesVotesLP / (yesVotesLP + noVotesLP)) * 100; // 80%
 
     renderComponent(

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx

@@ -105,6 +105,8 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
     yesLPPercentage,
     yesTokens,
     noTokens,
+    yesEquityLikeShareWeight,
+    noEquityLikeShareWeight,
     totalEquityLikeShareWeight,
     requiredMajorityPercentage,
     requiredMajorityLPPercentage,
@@ -133,7 +135,6 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
         .multipliedBy(100),
       new BigNumber(100)
     );
-
   const willPass = willPassByTokenVote || willPassByLPVote;
   const updateMarketVotePassMethod = willPassByTokenVote
     ? t('byTokenVote')
@@ -201,24 +202,50 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                 <div className="flex items-center gap-1">
                   <span>{t('liquidityProviderVotesFor')}:</span>
                   <Tooltip
-                    description={
-                      <span>{yesLPPercentage.toFixed(defaultDP)}%</span>
-                    }
+                    description={formatNumber(
+                      yesEquityLikeShareWeight,
+                      defaultDP
+                    )}
                   >
-                    <button>{yesLPPercentage.toFixed(1)}%</button>
+                    <button>
+                      <CompactVotes number={yesEquityLikeShareWeight} />
+                    </button>
                   </Tooltip>
+                  <span>
+                    (
+                    <Tooltip
+                      description={
+                        <span>{yesLPPercentage.toFixed(defaultDP)}%</span>
+                      }
+                    >
+                      <button>{yesLPPercentage.toFixed(0)}%</button>
+                    </Tooltip>
+                    )
+                  </span>
                 </div>
 
                 <div className="flex items-center gap-1">
                   <span>{t('liquidityProviderVotesAgainst')}:</span>
+                  <Tooltip
+                    description={formatNumber(
+                      noEquityLikeShareWeight,
+                      defaultDP
+                    )}
+                  >
+                    <button>
+                      <CompactVotes number={noEquityLikeShareWeight} />
+                    </button>
+                  </Tooltip>
                   <span>
+                    (
                     <Tooltip
                       description={
                         <span>{noLPPercentage.toFixed(defaultDP)}%</span>
                       }
                     >
-                      <button>{noLPPercentage.toFixed(1)}%</button>
+                      <button>{noLPPercentage.toFixed(0)}%</button>
                     </Tooltip>
+                    )
                   </span>
                 </div>
               </div>
@@ -255,8 +282,13 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                       defaultDP
                     )}
                   >
-                    <span>{totalEquityLikeShareWeight.toFixed(1)}%</span>
+                    <button>
+                      <CompactVotes number={totalEquityLikeShareWeight} />
+                    </button>
                   </Tooltip>
+                  <span>
+                    ({totalEquityLikeShareWeight.toFixed(defaultDP)}%)
+                  </span>
                 </div>
               </div>
             </section>

apps/governance/src/routes/proposals/hooks/use-vote-information.spec.ts

@@ -54,8 +54,8 @@ describe('use-vote-information', () => {
   it('returns all required vote information', () => {
     const yesVotes = 40;
     const noVotes = 60;
-    const yesEquityLikeShareWeight = '0.30';
-    const noEquityLikeShareWeight = '0.70';
+    const yesEquityLikeShareWeight = '30';
+    const noEquityLikeShareWeight = '70';
     // Note - giving a fixedTokenValue of 1 means a ratio of 1:1 votes to tokens, making sums easier :)
     const fixedTokenValue = 1000000000000000000;
 
@@ -195,10 +195,10 @@ describe('use-vote-information', () => {
   });
 
   it('correctly shows whether an update market proposal will pass by token or LP vote - both failing', () => {
-    const yesVotes = 0.2;
-    const noVotes = 0.7;
-    const yesEquityLikeShareWeight = '0.30';
-    const noEquityLikeShareWeight = '0.60';
+    const yesVotes = 20;
+    const noVotes = 70;
+    const yesEquityLikeShareWeight = '30';
+    const noEquityLikeShareWeight = '60';
     const fixedTokenValue = 1000000000000000000;
 
     const proposal = generateProposal({

apps/governance/src/routes/proposals/hooks/use-vote-information.ts

@@ -61,7 +61,7 @@ export const useVoteInformation = ({
     const noEquityLikeShareWeight = !proposal?.votes.no
       .totalEquityLikeShareWeight
       ? new BigNumber(0)
-      : new BigNumber(proposal.votes.no.totalEquityLikeShareWeight).times(100);
+      : new BigNumber(proposal.votes.no.totalEquityLikeShareWeight);
 
     const yesTokens = new BigNumber(
       addDecimal(proposal?.votes.yes.totalTokens ?? 0, decimals)
@@ -70,7 +70,7 @@ export const useVoteInformation = ({
     const yesEquityLikeShareWeight = !proposal?.votes.yes
       .totalEquityLikeShareWeight
       ? new BigNumber(0)
-      : new BigNumber(proposal.votes.yes.totalEquityLikeShareWeight).times(100);
+      : new BigNumber(proposal.votes.yes.totalEquityLikeShareWeight);
 
     const totalTokensVoted = yesTokens.plus(noTokens);
 
@@ -81,7 +81,12 @@ export const useVoteInformation = ({
     const yesPercentage = totalTokensVoted.isZero()
       ? new BigNumber(0)
       : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
-    const yesLPPercentage = yesEquityLikeShareWeight;
+
+    const yesLPPercentage = totalEquityLikeShareWeight.isZero()
+      ? new BigNumber(0)
+      : yesEquityLikeShareWeight
+          .multipliedBy(100)
+          .dividedBy(totalEquityLikeShareWeight);
 
     const noPercentage = totalTokensVoted.isZero()
       ? new BigNumber(0)
@@ -98,7 +103,9 @@ export const useVoteInformation = ({
     );
 
     const participationLPMet = requiredParticipationLP
-      ? totalEquityLikeShareWeight.isGreaterThan(requiredParticipationLP)
+      ? totalEquityLikeShareWeight.isGreaterThan(
+          totalSupply.multipliedBy(requiredParticipationLP)
+        )
       : false;
 
     const majorityMet = yesPercentage.isGreaterThanOrEqualTo(
@@ -113,7 +120,9 @@ export const useVoteInformation = ({
       .multipliedBy(100)
       .dividedBy(totalSupply);
 
-    const totalLPTokensPercentage = totalEquityLikeShareWeight;
+    const totalLPTokensPercentage = totalEquityLikeShareWeight
+      .multipliedBy(100)
+      .dividedBy(totalSupply);
 
     const willPassByTokenVote =
       participationMet &&

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

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

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

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

apps/governance/src/routes/proposals/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' in blockInfo && blockInfo?.result ? (
+            ) : 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 { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 
 const orderByDate = (arr: ProposalFieldsFragment[]) =>
   orderBy(
@@ -33,16 +33,15 @@ export function getRejectedProposals(data?: ProposalFieldsFragment[] | null) {
 }
 
 export const RejectedProposalsContainer = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const { data, loading, error } = useProposalsQuery({
     pollInterval: 5000,
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
     variables: {
-      includeNewMarketProductFields: !!featureFlags.PRODUCT_PERPETUALS,
-      includeUpdateMarketStates: !!featureFlags.UPDATE_MARKET_STATE,
-      includeUpdateReferralPrograms: !!featureFlags.REFERRALS,
+      includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
+      includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
+      includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
     },
   });
 

apps/governance/src/routes/proposals/test-helpers/generate-proposals.ts

@@ -116,8 +116,7 @@ export const generateYesVotes = (
   fixedTokenValue?: number,
   totalEquityLikeShareWeight?: string
 ): Votes => {
-  const votes = [];
-  for (let i = 0; i < numberOfVotes; i++) {
+  const votes = Array.from(Array(numberOfVotes)).map(() => {
     const vote: Vote = {
       __typename: 'Vote',
       value: Schema.VoteValue.VALUE_YES,
@@ -153,9 +152,8 @@ export const generateYesVotes = (
       datetime: faker.date.past().toISOString(),
     };
 
-    votes.push(vote);
-  }
-
+    return vote;
+  });
   return {
     __typename: 'ProposalVoteSide',
     totalNumber: votes.length.toString(),
@@ -174,8 +172,7 @@ export const generateNoVotes = (
   fixedTokenValue?: number,
   totalEquityLikeShareWeight?: string
 ): Votes => {
-  const votes = [];
-  for (let i = 0; i < numberOfVotes; i++) {
+  const votes = Array.from(Array(numberOfVotes)).map(() => {
     const vote: Vote = {
       __typename: 'Vote',
       value: Schema.VoteValue.VALUE_NO,
@@ -210,9 +207,8 @@ export const generateNoVotes = (
       },
       datetime: faker.date.past().toISOString(),
     };
-    votes.push(vote);
-  }
-
+    return vote;
+  });
   return {
     __typename: 'ProposalVoteSide',
     totalNumber: votes.length.toString(),

apps/governance/src/styles.css

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

apps/trading/.env

@@ -25,4 +25,3 @@ NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
-NX_TEAM_COMPETITION=true

apps/trading/.env.mainnet

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

apps/trading/.env.stagnet1

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

apps/trading/.env.testnet

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

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

@@ -188,11 +188,12 @@ const useNow = () => {
   return now;
 };
 
-const useEvery = (marketId: string, skip: boolean) => {
+const useEvery = (marketId: string) => {
+  const { data: marketTradingMode } = useMarketTradingMode(marketId);
   const { data: marketInfo } = useDataProvider({
     dataProvider: marketInfoProvider,
     variables: { marketId },
-    skip,
+    skip: !marketTradingMode || isMarketInAuction(marketTradingMode),
   });
   let every: number | undefined = undefined;
   const sourceType =
@@ -210,10 +211,8 @@ const useEvery = (marketId: string, skip: boolean) => {
   return every;
 };
 
-const useStartTime = (marketId: string, skip: boolean) => {
+const useStartTime = (marketId: string) => {
   const { data: fundingPeriods } = useFundingPeriodsQuery({
-    pollInterval: 5000,
-    skip,
     variables: {
       marketId: marketId,
       pagination: { first: 1 },
@@ -247,10 +246,8 @@ const useFormatCountdown = (
 
 export const FundingCountdown = ({ marketId }: { marketId: string }) => {
   const now = useNow();
-  const { data: marketTradingMode } = useMarketTradingMode(marketId);
-  const skip = !marketTradingMode || isMarketInAuction(marketTradingMode);
-  const startTime = useStartTime(marketId, skip);
-  const every = useEvery(marketId, skip);
+  const startTime = useStartTime(marketId);
+  const every = useEvery(marketId);
 
   return (
     <div data-testid="funding-countdown">

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

@@ -9,6 +9,8 @@ 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';
 
@@ -59,6 +61,9 @@ 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);
@@ -67,11 +72,20 @@ export const MarketPage = () => {
   const { data, loading } = useMarket(marketId);
 
   useEffect(() => {
-    if (data?.id && data.id !== lastMarketId) {
+    if (data?.id && data.id !== lastMarketId && !closed) {
       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 { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
 
@@ -35,7 +35,6 @@ const MainGrid = memo(
     marketId: string;
     pinnedAsset?: PinnedAsset;
   }) => {
-    const featureFlags = useFeatureFlags((state) => state.flags);
     const t = useT();
     const { data: market } = useMarket(marketId);
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
@@ -62,10 +61,10 @@ const MainGrid = memo(
                     id="chart"
                     overflowHidden
                     name={t('Chart')}
-                    menu={<TradingViews.chart.menu />}
+                    menu={<TradingViews.candles.menu />}
                   >
                     <ErrorBoundary feature="chart">
-                      <TradingViews.chart.component marketId={marketId} />
+                      <TradingViews.candles.component marketId={marketId} />
                     </ErrorBoundary>
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
@@ -90,11 +89,7 @@ const MainGrid = memo(
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
-                    <Tab
-                      id="funding-payments"
-                      name={t('Funding payments')}
-                      settings={<TradingViews.fundingPayments.settings />}
-                    >
+                    <Tab id="funding-payments" name={t('Funding payments')}>
                       <ErrorBoundary feature="funding-payments">
                         <TradingViews.fundingPayments.component
                           marketId={marketId}
@@ -116,11 +111,7 @@ const MainGrid = memo(
                       <TradingViews.orderbook.component marketId={marketId} />
                     </ErrorBoundary>
                   </Tab>
-                  <Tab
-                    id="trades"
-                    name={t('Trades')}
-                    settings={<TradingViews.trades.settings />}
-                  >
+                  <Tab id="trades" name={t('Trades')}>
                     <ErrorBoundary feature="trades">
                       <TradingViews.trades.component marketId={marketId} />
                     </ErrorBoundary>
@@ -141,7 +132,6 @@ const MainGrid = memo(
                 id="positions"
                 name={t('Positions')}
                 menu={<TradingViews.positions.menu />}
-                settings={<TradingViews.positions.settings />}
               >
                 <ErrorBoundary feature="positions">
                   <TradingViews.positions.component />
@@ -151,26 +141,17 @@ const MainGrid = memo(
                 id="open-orders"
                 name={t('Open')}
                 menu={<TradingViews.activeOrders.menu />}
-                settings={<TradingViews.activeOrders.settings />}
               >
                 <ErrorBoundary feature="activeOrders">
                   <TradingViews.activeOrders.component />
                 </ErrorBoundary>
               </Tab>
-              <Tab
-                id="closed-orders"
-                name={t('Closed')}
-                settings={<TradingViews.closedOrders.settings />}
-              >
+              <Tab id="closed-orders" name={t('Closed')}>
                 <ErrorBoundary feature="closedOrders">
                   <TradingViews.closedOrders.component />
                 </ErrorBoundary>
               </Tab>
-              <Tab
-                id="rejected-orders"
-                name={t('Rejected')}
-                settings={<TradingViews.rejectedOrders.settings />}
-              >
+              <Tab id="rejected-orders" name={t('Rejected')}>
                 <ErrorBoundary feature="rejectedOrders">
                   <TradingViews.rejectedOrders.component />
                 </ErrorBoundary>
@@ -179,35 +160,25 @@ const MainGrid = memo(
                 id="orders"
                 name={t('All')}
                 menu={<TradingViews.orders.menu />}
-                settings={<TradingViews.orders.settings />}
               >
                 <ErrorBoundary feature="orders">
                   <TradingViews.orders.component />
                 </ErrorBoundary>
               </Tab>
-              {featureFlags.STOP_ORDERS ? (
-                <Tab
-                  id="stop-orders"
-                  name={t('Stop orders')}
-                  settings={<TradingViews.stopOrders.settings />}
-                >
+              {FLAGS.STOP_ORDERS ? (
+                <Tab id="stop-orders" name={t('Stop orders')}>
                   <ErrorBoundary feature="stop-orders">
                     <TradingViews.stopOrders.component />
                   </ErrorBoundary>
                 </Tab>
               ) : null}
-              <Tab
-                id="fills"
-                name={t('Fills')}
-                settings={<TradingViews.fills.settings />}
-              >
+              <Tab id="fills" name={t('Fills')}>
                 <TradingViews.fills.component />
               </Tab>
               <Tab
                 id="accounts"
                 name={t('Collateral')}
                 menu={<TradingViews.collateral.menu />}
-                settings={<TradingViews.collateral.settings />}
               >
                 <ErrorBoundary feature="collateral">
                   <TradingViews.collateral.component
@@ -225,7 +196,6 @@ const MainGrid = memo(
 MainGrid.displayName = 'MainGrid';
 
 export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const wrapperClasses = classNames(
     'h-full grid',
     'grid-rows-[min-content_1fr]'
@@ -234,7 +204,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        {featureFlags.SUCCESSOR_MARKETS && (
+        {FLAGS.SUCCESSOR_MARKETS && (
           <>
             <MarketSuccessorBanner market={market} />
             <MarketSuccessorProposalBanner marketId={market?.id} />

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

@@ -4,12 +4,8 @@ import { OracleBanner } from '@vegaprotocol/markets';
 import { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import {
-  Popover,
-  Splash,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { FLAGS } from '@vegaprotocol/environment';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
 import {
   MarketSuccessorBanner,
@@ -19,7 +15,6 @@ 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;
@@ -27,9 +22,7 @@ interface TradePanelsProps {
 }
 
 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-  const [view, setView] = useState<TradingView>('chart');
-  const viewCfg = TradingViews[view];
+  const [view, setView] = useState<TradingView>('candles');
 
   const renderView = () => {
     const Component = TradingViews[view].component;
@@ -50,33 +43,25 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
   };
 
   const renderMenu = () => {
-    if ('menu' in viewCfg || 'settings' in viewCfg) {
+    const viewCfg = TradingViews[view];
+
+    if ('menu' in viewCfg) {
+      const Menu = viewCfg.menu;
+
       return (
-        <div className="flex items-center justify-end gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          {'menu' in viewCfg ? <viewCfg.menu /> : null}
-          {'settings' in viewCfg ? (
-            <Popover
-              align="end"
-              trigger={
-                <span className="ml-1 flex items-center justify-center h-6 w-6">
-                  <VegaIcon name={VegaIconNames.COG} size={16} />
-                </span>
-              }
-            >
-              <div className="p-4 flex justify-end">
-                <viewCfg.settings />
-              </div>
-            </Popover>
-          ) : null}
+        <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
+          <Menu />
         </div>
       );
     }
+
+    return null;
   };
 
   return (
     <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
       <div>
-        {featureFlags.SUCCESSOR_MARKETS && (
+        {FLAGS.SUCCESSOR_MARKETS && (
           <>
             <MarketSuccessorBanner market={market} />
             <MarketSuccessorProposalBanner marketId={market?.id} />
@@ -86,7 +71,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div>{renderMenu()}</div>
-      <div className="h-full relative">
+      <div className="h-full">
         <AutoSizer>
           {({ width, height }) => (
             <div style={{ width, height }} className="overflow-auto">
@@ -124,9 +109,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
                 key={key}
                 view={key}
                 isActive={isActive}
-                onClick={() => {
-                  setView(key);
-                }}
+                onClick={() => setView(key)}
               />
             );
           })}
@@ -165,7 +148,7 @@ const useViewLabel = (view: TradingView) => {
   const t = useT();
 
   const labels = {
-    chart: t('Chart'),
+    candles: t('Candles'),
     depth: t('Depth'),
     liquidity: t('Liquidity'),
     funding: t('Funding'),

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

@@ -1,46 +1,28 @@
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
+import {
+  CandlesChartContainer,
+  CandlesMenu,
+} from '@vegaprotocol/candles-chart';
 import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
-import {
-  TradesContainer,
-  TradesSettings,
-} from '../../components/trades-container';
+import { TradesContainer } from '../../components/trades-container';
 import { OrderbookContainer } from '../../components/orderbook-container';
-import {
-  FillsContainer,
-  FillsSettings,
-} from '../../components/fills-container';
-import {
-  PositionsContainer,
-  PositionsSettings,
-} from '../../components/positions-container';
-import {
-  AccountsContainer,
-  AccountsSettings,
-} from '../../components/accounts-container';
+import { FillsContainer } from '../../components/fills-container';
+import { PositionsContainer } from '../../components/positions-container';
+import { AccountsContainer } from '../../components/accounts-container';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import { FundingContainer } from '../../components/funding-container';
-import {
-  FundingPaymentsContainer,
-  FundingPaymentsSettings,
-} from '../../components/funding-payments-container';
-import {
-  OrdersContainer,
-  OrdersSettings,
-} from '../../components/orders-container';
-import {
-  StopOrdersContainer,
-  StopOrdersSettings,
-} from '../../components/stop-orders-container';
+import { FundingPaymentsContainer } from '../../components/funding-payments-container';
+import { OrdersContainer } from '../../components/orders-container';
+import { StopOrdersContainer } from '../../components/stop-orders-container';
 import { AccountsMenu } from '../../components/accounts-menu';
 import { PositionsMenu } from '../../components/positions-menu';
-import { ChartContainer, ChartMenu } from '../../components/chart-container';
 
 export type TradingView = keyof typeof TradingViews;
 
 export const TradingViews = {
-  chart: {
-    component: ChartContainer,
-    menu: ChartMenu,
+  candles: {
+    component: CandlesChartContainer,
+    menu: CandlesMenu,
   },
   depth: {
     component: DepthChartContainer,
@@ -53,46 +35,37 @@ export const TradingViews = {
   },
   fundingPayments: {
     component: FundingPaymentsContainer,
-    settings: FundingPaymentsSettings,
   },
   orderbook: {
     component: OrderbookContainer,
   },
   trades: {
     component: TradesContainer,
-    settings: TradesSettings,
   },
   positions: {
     component: PositionsContainer,
     menu: PositionsMenu,
-    settings: PositionsSettings,
   },
   activeOrders: {
     component: () => <OrdersContainer filter={Filter.Open} />,
     menu: OpenOrdersMenu,
-    settings: () => <OrdersSettings filter={Filter.Open} />,
   },
   closedOrders: {
     component: () => <OrdersContainer filter={Filter.Closed} />,
-    settings: () => <OrdersSettings filter={Filter.Closed} />,
   },
   rejectedOrders: {
     component: () => <OrdersContainer filter={Filter.Rejected} />,
-    settings: () => <OrdersSettings filter={Filter.Rejected} />,
   },
   orders: {
     component: OrdersContainer,
     menu: OpenOrdersMenu,
-    settings: OrdersSettings,
   },
   stopOrders: {
     component: StopOrdersContainer,
-    settings: StopOrdersSettings,
   },
   collateral: {
     component: AccountsContainer,
     menu: AccountsMenu,
-    settings: AccountsSettings,
   },
-  fills: { component: FillsContainer, settings: FillsSettings },
+  fills: { component: FillsContainer },
 } as const;

apps/trading/client-pages/markets/closed.spec.tsx

@@ -1,5 +1,4 @@
 import { act, render, screen, waitFor, within } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { Closed } from './closed';
 import { MarketStateMapping, PropertyKeyType } from '@vegaprotocol/types';
@@ -27,7 +26,6 @@ import {
   marketsDataQuery,
   createMarketsDataFragment,
 } from '@vegaprotocol/mock';
-import userEvent from '@testing-library/user-event';
 
 describe('Closed', () => {
   let originalNow: typeof Date.now;
@@ -170,11 +168,14 @@ describe('Closed', () => {
     Date.now = originalNow;
   });
 
-  const renderComponent = async (mocks: MockedResponse[]) => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('renders correctly formatted and filtered rows', async () => {
     await act(async () => {
       render(
         <MemoryRouter>
-          <MockedProvider mocks={mocks}>
+          <MockedProvider
+            mocks={[marketsMock, marketsDataMock, oracleDataMock]}
+          >
             <VegaWalletContext.Provider
               value={{ pubKey } as VegaWalletContextShape}
             >
@@ -184,10 +185,6 @@ describe('Closed', () => {
         </MemoryRouter>
       );
     });
-  };
-
-  it('renders correct headers', async () => {
-    await renderComponent([marketsMock, marketsDataMock, oracleDataMock]);
 
     const headers = screen.getAllByRole('columnheader');
     const expectedHeaders = [
@@ -203,10 +200,6 @@ describe('Closed', () => {
     ];
     expect(headers).toHaveLength(expectedHeaders.length);
     expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
-  });
-
-  it('renders correctly formatted and filtered rows', async () => {
-    await renderComponent([marketsMock, marketsDataMock, oracleDataMock]);
 
     const assetSymbol = getAsset(market).symbol;
 
@@ -280,8 +273,21 @@ describe('Closed', () => {
         },
       },
     };
-
-    await renderComponent([mixedMarketsMock, marketsDataMock, oracleDataMock]);
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[mixedMarketsMock, marketsDataMock, oracleDataMock]}
+          >
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
+      );
+    });
 
     // check that the number of rows in datagrid is 2
     const container = within(
@@ -313,67 +319,8 @@ describe('Closed', () => {
     );
   });
 
-  it('display market actions', async () => {
-    // Use market with a succcessor Id as the actions dropdown will optionally
-    // show a link to the successor market
-    const marketsWithSuccessorAndParent = [
-      {
-        __typename: 'MarketEdge' as const,
-        node: createMarketFragment({
-          id: 'include-0',
-          state: MarketState.STATE_SETTLED,
-          successorMarketID: 'successor',
-          parentMarketID: 'parent',
-        }),
-      },
-    ];
-    const mockWithSuccessorAndParent: MockedResponse<MarketsQuery> = {
-      request: {
-        query: MarketsDocument,
-      },
-      result: {
-        data: {
-          marketsConnection: {
-            __typename: 'MarketConnection',
-            edges: marketsWithSuccessorAndParent,
-          },
-        },
-      },
-    };
-    await renderComponent([
-      mockWithSuccessorAndParent,
-      marketsDataMock,
-      oracleDataMock,
-    ]);
-
-    const actionCell = screen
-      .getAllByRole('gridcell')
-      .find((el) => el.getAttribute('col-id') === 'market-actions');
-
-    await userEvent.click(
-      within(actionCell as HTMLElement).getByTestId('dropdown-menu')
-    );
-
-    expect(screen.getByRole('menu')).toBeInTheDocument();
-
-    expect(
-      screen.getByRole('menuitem', { name: 'Copy Market ID' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View on Explorer' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View settlement asset details' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View parent market' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View successor market' })
-    ).toBeInTheDocument();
-  });
-
-  it('successor market should be visible', async () => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('successor marked should be visible', async () => {
     const marketsWithSuccessorID = [
       {
         __typename: 'MarketEdge' as const,
@@ -398,11 +345,21 @@ describe('Closed', () => {
       },
     };
 
-    await renderComponent([
-      mockWithSuccessors,
-      marketsDataMock,
-      oracleDataMock,
-    ]);
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[mockWithSuccessors, marketsDataMock, oracleDataMock]}
+          >
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
+      );
+    });
 
     const container = within(
       document.querySelector('.ag-center-cols-container') as HTMLElement

apps/trading/client-pages/markets/market-list-table.tsx

@@ -42,7 +42,7 @@ export const createDataGridSlice: StateCreator<DataGridSlice> = (set) => ({
   },
 });
 
-export const useMarketsStore = create<DataGridSlice>()(
+const useMarketsStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_market_list_store',
   })

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

@@ -16,7 +16,6 @@ import {
 } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
-import { MarketsSettings } from './markets-settings';
 
 export const MarketsPage = () => {
   const t = useT();
@@ -35,11 +34,7 @@ export const MarketsPage = () => {
     <div className="h-full pt-0.5 pb-3 px-1.5">
       <div className="h-full my-1 border rounded-sm border-default">
         <Tabs storageKey="console-markets">
-          <Tab
-            id="open-markets"
-            name={t('Open markets')}
-            settings={<MarketsSettings />}
-          >
+          <Tab id="open-markets" name={t('Open markets')}>
             <ErrorBoundary feature="markets-open">
               <OpenMarkets />
             </ErrorBoundary>
@@ -47,7 +42,6 @@ export const MarketsPage = () => {
           <Tab
             id="proposed-markets"
             name={t('Proposed markets')}
-            settings={<MarketsSettings />}
             menu={
               <TradingAnchorButton
                 size="extra-small"
@@ -62,11 +56,7 @@ export const MarketsPage = () => {
               <Proposed />
             </ErrorBoundary>
           </Tab>
-          <Tab
-            id="closed-markets"
-            name={t('Closed markets')}
-            settings={<MarketsSettings />}
-          >
+          <Tab id="closed-markets" name={t('Closed markets')}>
             <ErrorBoundary feature="markets-closed">
               <Closed />
             </ErrorBoundary>

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

@@ -1,8 +0,0 @@
-import { GridSettings } from '../../components/grid-settings/grid-settings';
-import { useMarketsStore } from './market-list-table';
-
-export const MarketsSettings = () => (
-  <GridSettings
-    updateGridStore={useMarketsStore((store) => store.updateGridStore)}
-  />
-);

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

@@ -4,26 +4,9 @@ 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();
@@ -54,7 +37,6 @@ export const MarketsSidebar = () => {
           path=":marketId"
           element={
             <>
-              <ViewInitializer />
               <SidebarDivider />
               <SidebarButton
                 view={ViewType.Order}

apps/trading/client-pages/markets/open-markets.spec.tsx

@@ -1,145 +0,0 @@
-import { act, render, screen, within } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { OpenMarkets } from './open-markets';
-import { Interval } from '@vegaprotocol/types';
-import type { MockedResponse } from '@apollo/client/testing';
-import { MockedProvider } from '@apollo/client/testing';
-import type {
-  MarketsDataQuery,
-  MarketsQuery,
-  MarketCandlesQuery,
-  MarketFieldsFragment,
-} from '@vegaprotocol/markets';
-import {
-  MarketsDataDocument,
-  MarketsDocument,
-  MarketsCandlesDocument,
-} from '@vegaprotocol/markets';
-import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
-import { VegaWalletContext } from '@vegaprotocol/wallet';
-import {
-  marketsQuery,
-  marketsDataQuery,
-  marketsCandlesQuery,
-} from '@vegaprotocol/mock';
-import userEvent from '@testing-library/user-event';
-
-describe('Open', () => {
-  let originalNow: typeof Date.now;
-  const mockNowTimestamp = 1672531200000;
-  const pubKey = 'pubKey';
-
-  const marketsQueryData = marketsQuery();
-  const marketsMock: MockedResponse<MarketsQuery> = {
-    request: {
-      query: MarketsDocument,
-    },
-    result: {
-      data: marketsQueryData,
-    },
-  };
-
-  const marketsCandlesQueryData = marketsCandlesQuery();
-  const marketsCandlesMock: MockedResponse<MarketCandlesQuery> = {
-    request: {
-      query: MarketsCandlesDocument,
-      variables: {
-        interval: Interval.INTERVAL_I1H,
-        since: '2022-12-31T00:00:00.000Z',
-      },
-    },
-    result: {
-      data: marketsCandlesQueryData,
-    },
-  };
-
-  const marketsDataQueryData = marketsDataQuery();
-
-  const marketsDataMock: MockedResponse<MarketsDataQuery> = {
-    request: {
-      query: MarketsDataDocument,
-    },
-    result: {
-      data: marketsDataQueryData,
-    },
-  };
-
-  beforeAll(() => {
-    originalNow = Date.now;
-    Date.now = jest.fn().mockReturnValue(mockNowTimestamp);
-  });
-
-  afterAll(() => {
-    Date.now = originalNow;
-  });
-
-  const renderComponent = async () => {
-    await act(async () => {
-      render(
-        <MemoryRouter>
-          <MockedProvider
-            mocks={[marketsMock, marketsCandlesMock, marketsDataMock]}
-          >
-            <VegaWalletContext.Provider
-              value={{ pubKey } as VegaWalletContextShape}
-            >
-              <OpenMarkets />
-            </VegaWalletContext.Provider>
-          </MockedProvider>
-        </MemoryRouter>
-      );
-    });
-  };
-
-  it('renders correct headers', async () => {
-    await renderComponent();
-
-    const headers = screen.getAllByRole('columnheader');
-    const expectedHeaders = [
-      'Market',
-      'Description',
-      'Settlement asset',
-      'Trading mode',
-      'Status',
-      'Mark price',
-      '24h volume',
-      'Open Interest',
-      'Spread',
-      '', // Action row
-    ];
-    expect(headers).toHaveLength(expectedHeaders.length);
-    expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
-  });
-
-  it('sort columns', async () => {
-    await renderComponent();
-
-    const headers = screen.getAllByRole('columnheader');
-    const marketHeader = headers.find(
-      (h) => h.getAttribute('col-id') === 'tradableInstrument.instrument.code'
-    );
-    if (!marketHeader) {
-      throw new Error('No market header found');
-    }
-    expect(marketHeader).toHaveAttribute('aria-sort', 'none');
-    await userEvent.click(within(marketHeader).getByText(/market/i));
-    // 6001-MARK-064
-    expect(marketHeader).toHaveAttribute('aria-sort', 'ascending');
-  });
-
-  // eslint-disable-next-line jest/no-disabled-tests, jest/expect-expect
-  it('renders row', async () => {
-    await renderComponent();
-
-    const container = within(
-      document.querySelector('.ag-center-cols-container') as HTMLElement
-    );
-
-    const markets = marketsQueryData.marketsConnection?.edges.map(
-      (e) => e.node
-    ) as MarketFieldsFragment[];
-
-    const rows = container.getAllByRole('row');
-    expect(rows).toHaveLength(markets.length);
-  });
-});

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

@@ -5,29 +5,14 @@ import { titlefy } from '@vegaprotocol/utils';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
-import {
-  AccountsContainer,
-  AccountsSettings,
-} from '../../components/accounts-container';
+import { AccountsContainer } from '../../components/accounts-container';
 import { DepositsContainer } from '../../components/deposits-container';
-import {
-  FillsContainer,
-  FillsSettings,
-} from '../../components/fills-container';
-import {
-  FundingPaymentsContainer,
-  FundingPaymentsSettings,
-} from '../../components/funding-payments-container';
-import {
-  PositionsContainer,
-  PositionsSettings,
-} from '../../components/positions-container';
+import { FillsContainer } from '../../components/fills-container';
+import { FundingPaymentsContainer } from '../../components/funding-payments-container';
+import { PositionsContainer } from '../../components/positions-container';
 import { PositionsMenu } from '../../components/positions-menu';
 import { WithdrawalsContainer } from '../../components/withdrawals-container';
-import {
-  OrdersContainer,
-  OrdersSettings,
-} from '../../components/orders-container';
+import { OrdersContainer } from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
 import {
   ResizableGrid,
@@ -54,21 +39,11 @@ const WithdrawalsIndicator = () => {
   );
 };
 
-const SidebarViewInitializer = () => {
+export const Portfolio = () => {
+  const t = useT();
   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,
@@ -78,11 +53,17 @@ 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>
@@ -91,27 +72,22 @@ export const Portfolio = () => {
                 id="positions"
                 name={t('Positions')}
                 menu={<PositionsMenu />}
-                settings={<PositionsSettings />}
               >
                 <ErrorBoundary feature="portfolio-positions">
                   <PositionsContainer allKeys />
                 </ErrorBoundary>
               </Tab>
-              <Tab id="orders" name={t('Orders')} settings={<OrdersSettings />}>
+              <Tab id="orders" name={t('Orders')}>
                 <ErrorBoundary feature="portfolio-orders">
                   <OrdersContainer />
                 </ErrorBoundary>
               </Tab>
-              <Tab id="fills" name={t('Fills')} settings={<FillsSettings />}>
+              <Tab id="fills" name={t('Fills')}>
                 <ErrorBoundary feature="portfolio-fills">
                   <FillsContainer />
                 </ErrorBoundary>
               </Tab>
-              <Tab
-                id="funding-payments"
-                name={t('Funding payments')}
-                settings={<FundingPaymentsSettings />}
-              >
+              <Tab id="funding-payments" name={t('Funding payments')}>
                 <ErrorBoundary feature="portfolio-funding-payments">
                   <FundingPaymentsContainer />
                 </ErrorBoundary>
@@ -134,7 +110,6 @@ export const Portfolio = () => {
               <Tab
                 id="collateral"
                 name={t('Collateral')}
-                settings={<AccountsSettings />}
                 menu={<AccountsMenu />}
               >
                 <ErrorBoundary feature="portfolio-accounts">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,11 +2,7 @@ import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { useCallback } from 'react';
 import { useRefereesQuery } from './__generated__/Referees';
 import compact from 'lodash/compact';
-import pick from 'lodash/pick';
-import type {
-  ReferralSetsQuery,
-  ReferralSetsQueryVariables,
-} from './__generated__/ReferralSets';
+import type { ReferralSetsQueryVariables } from './__generated__/ReferralSets';
 import { useReferralSetsQuery } from './__generated__/ReferralSets';
 import { useStakeAvailable } from './use-stake-available';
 
@@ -122,96 +118,3 @@ export const useReferral = (args: UseReferralArgs) => {
     refetch,
   };
 };
-
-type Referee = NonNullable<
-  NonNullable<ReturnType<typeof useReferral>['data']>['referee']
->;
-
-type RefereeProperties = (keyof Referee)[];
-
-const findReferee = (referee: Referee, referees: Referee[]) =>
-  referees.find((r) => r.refereeId === referee?.refereeId) || referee;
-
-const updateReferee = (
-  referee: Referee,
-  referees: Referee[],
-  properties: RefereeProperties
-) => ({
-  ...referee,
-  ...pick(findReferee(referee, referees), properties),
-});
-
-export const useUpdateReferees = (
-  referral: ReturnType<typeof useReferral>,
-  aggregationEpochs: number,
-  properties: RefereeProperties,
-  skip?: boolean
-): ReturnType<typeof useReferral> => {
-  const { data, loading, error, refetch } = useRefereesQuery({
-    variables: {
-      code: referral?.data?.code as string,
-      aggregationEpochs,
-    },
-    skip: skip || !referral?.data?.code,
-    fetchPolicy: 'cache-and-network',
-    context: { isEnlargedTimeout: true },
-  });
-  const refetchAll = useCallback(() => {
-    refetch();
-    referral.refetch();
-  }, [refetch, referral]);
-  if (!referral.data || skip) {
-    return referral;
-  }
-  const referees = compact(
-    removePaginationWrapper(data?.referralSetReferees.edges)
-  );
-
-  return {
-    data: data && {
-      ...referral.data,
-      referees: referral.data.referees.map((referee) =>
-        updateReferee(referee, referees, properties)
-      ),
-      referee:
-        referral.data.referee &&
-        updateReferee(referral.data.referee, referees, properties),
-    },
-    loading: loading || referral.loading,
-    error: error || referral.error,
-    refetch: refetchAll,
-  };
-};
-
-const retrieveReferralSetData = (data: ReferralSetsQuery | undefined) =>
-  data?.referralSets.edges && data.referralSets.edges.length > 0
-    ? data.referralSets.edges[0]?.node
-    : undefined;
-
-export const useIsInReferralSet = (pubKey: string | null) => {
-  const [asRefereeVariables, asRefereeSkip] = prepareVariables({
-    pubKey,
-    role: 'referee',
-  });
-  const [asReferrerVariables, asReferrerSkip] = prepareVariables({
-    pubKey,
-    role: 'referrer',
-  });
-
-  const { data: asRefereeData } = useReferralSetsQuery({
-    variables: asRefereeVariables,
-    skip: asRefereeSkip,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  const { data: asReferrerData } = useReferralSetsQuery({
-    variables: asReferrerVariables,
-    skip: asReferrerSkip,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  return Boolean(
-    retrieveReferralSetData(asRefereeData) ||
-      retrieveReferralSetData(asReferrerData)
-  );
-};

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

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

apps/trading/client-pages/referrals/how-it-works-table.tsx

@@ -1,5 +1,5 @@
 import { useT } from '../../lib/use-t';
-import { Table } from '../../components/table';
+import { Table } from './table';
 
 export const HowItWorksTable = () => {
   const t = useT();

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

@@ -5,26 +5,21 @@ import { useT } from '../../lib/use-t';
 export const LandingBanner = () => {
   const t = useT();
   return (
-    <div className={classNames('relative mb-10 lg:mb-20')}>
+    <div className={classNames('relative mb-20')}>
       <div className="">
         <div
           aria-hidden
-          className="absolute top-20 right-[220px] md:right-[240px] max-sm:hidden"
+          className="absolute top-20 right-[120px] md:right-[240px] max-sm:hidden"
         >
           <AnimatedDudeWithWire />
         </div>
-        <div className="pt-10 lg:pt-20 sm:w-[50%]">
-          <h1 className="text-3xl _text-[6vw] lg:!text-6xl leading-[1em] font-alpha calt mb-10">
-            {t('Vega community referrals')}
+        <div className="pt-20 sm:w-[50%]">
+          <h1 className="text-6xl font-alpha calt mb-10">
+            {t('Earn commission & stake rewards')}
           </h1>
-          <p className="text-lg mb-1">
+          <p className="text-lg mb-10">
             {t(
-              'Referral programs can be proposed and created via community governance.'
-            )}
-          </p>
-          <p className="text-lg mb-1">
-            {t(
-              'Once live, users can generate referral codes to share with their friends and earn commission on their trades, while referred traders can access fee discounts based on the running volume of the group.'
+              'Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
             )}
           </p>
         </div>

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

@@ -13,7 +13,7 @@ export const Layout = ({
     <div
       className={classNames(
         'max-w-[1440px]',
-        'mx-auto px-4 lg:px-32 pb-32',
+        'mx-auto px-16 md:px-32 pb-32',
         'relative z-0',
         className
       )}

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

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

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

@@ -151,27 +151,6 @@ const MOCK_REFEREES: RefereesQuery = {
   },
 };
 
-const MOCK_REFEREES_30: RefereesQuery = {
-  referralSetReferees: {
-    __typename: 'ReferralSetRefereeConnection',
-    edges: [
-      {
-        node: {
-          atEpoch: 1,
-          joinedAt: '2023-11-21T14:17:09.257235Z',
-          refereeId:
-            '0987654321098765432109876543210987654321098765432109876543219876',
-          referralSetId:
-            '3772e570fbab89e50e563036b01dd949c554e5b5fe7908449672dfce9a8adffa',
-          totalRefereeGeneratedRewards: '12340',
-          totalRefereeNotionalTakerVolume: '56780',
-          __typename: 'ReferralSetReferee',
-        },
-      },
-    ],
-  },
-};
-
 const programMock: MockedResponse<ReferralProgramQuery> = {
   request: {
     query: ReferralProgramDocument,
@@ -283,19 +262,6 @@ const refereesMock: MockedResponse<RefereesQuery, RefereesQueryVariables> = {
   },
 };
 
-const refereesMock30: MockedResponse<RefereesQuery, RefereesQueryVariables> = {
-  request: {
-    query: RefereesDocument,
-    variables: {
-      code: MOCK_REFERRER_SET.referralSets.edges[0]?.node.id as string,
-      aggregationEpochs: 30,
-    },
-  },
-  result: {
-    data: MOCK_REFEREES_30,
-  },
-};
-
 jest.mock('@vegaprotocol/wallet', () => {
   return {
     ...jest.requireActual('@vegaprotocol/wallet'),
@@ -309,35 +275,30 @@ jest.mock('@vegaprotocol/wallet', () => {
 });
 
 describe('ReferralStatistics', () => {
-  it('displays apply code when no data has been found for given pubkey', () => {
+  it('displays create code when no data has been found for given pubkey', () => {
     const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider mocks={[]} showWarnings={false}>
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
+      <MockedProvider mocks={[]} showWarnings={false}>
+        <ReferralStatistics />
+      </MockedProvider>
     );
 
-    expect(queryByTestId('referral-apply-code-form')).toBeInTheDocument();
+    expect(queryByTestId('referral-create-code-form')).toBeInTheDocument();
   });
 
   it('displays referrer stats when given pubkey is a referrer', async () => {
     const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider
-          mocks={[
-            programMock,
-            referralSetAsReferrerMock,
-            noReferralSetAsRefereeMock,
-            stakeAvailableMock,
-            refereesMock,
-            refereesMock30,
-          ]}
-          showWarnings={false}
-        >
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
+      <MockedProvider
+        mocks={[
+          programMock,
+          referralSetAsReferrerMock,
+          noReferralSetAsRefereeMock,
+          stakeAvailableMock,
+          refereesMock,
+        ]}
+        showWarnings={false}
+      >
+        <ReferralStatistics />
+      </MockedProvider>
     );
 
     await waitFor(() => {
@@ -348,10 +309,6 @@ describe('ReferralStatistics', () => {
       expect(queryByTestId('referral-statistics')?.dataset.as).toEqual(
         'referrer'
       );
-      // gets commision from 30 epochs query
-      expect(queryByTestId('total-commission-value')).toHaveTextContent(
-        '12,340'
-      );
     });
   });
 

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

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

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

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

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

@@ -1,17 +1,13 @@
 import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
 import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
-
-export const BORDER_COLOR = 'border-vega-clight-500 dark:border-vega-cdark-500';
-export const GRADIENT =
-  'bg-gradient-to-b from-vega-clight-800 dark:from-vega-cdark-800 to-transparent';
+import { BORDER_COLOR, GRADIENT } from './constants';
 
 type TableColumnDefinition = {
   displayName?: ReactNode;
   name: string;
   tooltip?: string;
   className?: string;
-  testId?: string;
 };
 
 type TableProps = {
@@ -46,7 +42,7 @@ export const Table = forwardRef<
               key={name}
               col-id={name}
               className={classNames(
-                'px-5 py-3 text-xs  text-vega-clight-100 dark:text-vega-cdark-100 font-normal',
+                'px-5 py-3 text-sm  text-vega-clight-100 dark:text-vega-cdark-100 font-normal',
                 INNER_BORDER_STYLE
               )}
             >
@@ -70,7 +66,7 @@ export const Table = forwardRef<
         ref={ref}
         className={classNames(
           'w-full',
-          'border-separate border rounded-md border-spacing-0 overflow-hidden',
+          'border-separate border rounded-md border-spacing-0',
           BORDER_COLOR,
           GRADIENT,
           className
@@ -86,10 +82,10 @@ export const Table = forwardRef<
                 'max-md:flex flex-col w-full': !noCollapse,
               })}
             >
-              {columns.map(({ name, displayName, className, testId }, j) => (
+              {columns.map(({ name, displayName, className }, j) => (
                 <td
                   className={classNames(
-                    'px-5 py-3',
+                    'px-5 py-3 text-base',
                     {
                       'max-md:flex max-md:flex-col max-md:justify-between':
                         !noCollapse,
@@ -114,7 +110,7 @@ export const Table = forwardRef<
                       {displayName}
                     </span>
                   )}
-                  <span data-testid={`${testId || name}-${i}`}>{d[name]}</span>
+                  <span>{d[name]}</span>
                 </td>
               ))}
             </tr>

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

@@ -2,15 +2,7 @@ import type { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 type TagProps = {
-  color?:
-    | 'yellow'
-    | 'green'
-    | 'blue'
-    | 'purple'
-    | 'pink'
-    | 'orange'
-    | 'red'
-    | 'none';
+  color?: 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'orange' | 'none';
 };
 export const Tag = ({
   color = 'none',
@@ -22,10 +14,8 @@ export const Tag = ({
     className={classNames(
       'w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
       {
-        'border-vega-yellow-550  text-vega-yellow-550 dark:border-vega-yellow-500  dark:text-vega-yellow-500':
-          color === 'yellow',
-        'border-vega-green-550  text-vega-green-550 dark:border-vega-green-500  dark:text-vega-green-500':
-          color === 'green',
+        'border-vega-yellow-500  text-vega-yellow-500': color === 'yellow',
+        'border-vega-green-500  text-vega-green-500': color === 'green',
         'border-vega-blue-500  text-vega-blue-500': color === 'blue',
         'border-vega-purple-500  text-vega-purple-500': color === 'purple',
         'border-vega-pink-500  text-vega-pink-500': color === 'pink',

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

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

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

@@ -19,11 +19,9 @@ export const Tile = ({
   return (
     <div
       className={classNames(
-        'text-black dark:text-white',
-        'overflow-hidden relative',
-        'p-3 md:p-6',
-        'rounded-lg',
-        'bg-vega-clight-800 dark:bg-vega-cdark-800',
+        'rounded-lg overflow-hidden relative',
+        'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white',
+        'p-6',
         className
       )}
     >
@@ -33,55 +31,22 @@ export const Tile = ({
 };
 
 type StatTileProps = {
-  title: ReactNode;
-  testId?: string;
+  title: string;
   description?: ReactNode;
   children?: ReactNode;
-  overrideWithNoProgram?: boolean;
 };
-export const StatTile = ({
-  title,
-  description,
-  children,
-  testId,
-  overrideWithNoProgram = false,
-}: StatTileProps) => {
-  if (overrideWithNoProgram) {
-    return <NoProgramTile title={title} />;
-  }
-  return (
-    <Tile>
-      <h3
-        data-testid={testId}
-        className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt"
-      >
-        {title}
-      </h3>
-      <div
-        data-testid={`${testId}-value`}
-        className="text-2xl lg:text-5xl text-left"
-      >
-        {children}
-      </div>
-      {description && (
-        <div className="text-sm text-left text-vega-clight-100 dark:text-vega-cdark-100">
-          {description}
-        </div>
-      )}
-    </Tile>
-  );
-};
-
-export const NoProgramTile = ({ title }: Pick<StatTileProps, 'title'>) => {
-  const t = useT();
+export const StatTile = ({ title, description, children }: StatTileProps) => {
   return (
     <Tile>
       <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
         {title}
       </h3>
-      <div className="text-xs text-vega-clight-300 dark:text-vega-cdark-300 leading-[3rem]">
-        {t('No active program')}
-      </div>
+      <div className="text-5xl text-left">{children}</div>
+      {description && (
+        <div className="text-sm text-left text-vega-clight-100 dark:text-vega-cdark-100">
+          {description}
+        </div>
+      )}
     </Tile>
   );
 };
@@ -124,7 +89,7 @@ export const CodeTile = ({
         >
           <div
             className={classNames(
-              'relative bg-rainbow bg-clip-text text-transparent text-2xl lg:text-5xl overflow-hidden',
+              'relative bg-rainbow bg-clip-text text-transparent text-5xl overflow-hidden',
               FADE_OUT_STYLE
             )}
           >

apps/trading/client-pages/teams/index.ts

@@ -1 +0,0 @@
-export { Teams } from './teams';

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

@@ -1,7 +0,0 @@
-export const Teams = () => {
-  return (
-    <div>
-      <h1>Teams</h1>
-    </div>
-  );
-};

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

@@ -13,7 +13,6 @@ 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,
@@ -26,7 +25,6 @@ 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);
@@ -57,10 +55,7 @@ export const AccountsContainer = ({
         setViews({ type: ViewType.Withdraw, assetId }, currentRouteId);
       }}
       onClickDeposit={(assetId) => {
-        setViews({ type: ViewType.Deposit }, currentRouteId);
-        if (assetId) {
-          setDepositAsset({ assetId });
-        }
+        setViews({ type: ViewType.Deposit, assetId }, currentRouteId);
       }}
       onClickTransfer={(assetId) => {
         setViews({ type: ViewType.Transfer, assetId }, currentRouteId);
@@ -73,7 +68,7 @@ export const AccountsContainer = ({
   );
 };
 
-export const useAccountStore = create<DataGridSlice>()(
+const useAccountStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_accounts_store',
   })

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

@@ -1,8 +0,0 @@
-import { GridSettings } from '../grid-settings/grid-settings';
-import { useAccountStore } from './accounts-container';
-
-export const AccountsSettings = () => (
-  <GridSettings
-    updateGridStore={useAccountStore((store) => store.updateGridStore)}
-  />
-);

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

@@ -1,2 +1 @@
 export * from './accounts-container';
-export * from './accounts-settings';

apps/trading/components/card/card.tsx

@@ -8,42 +8,25 @@ export const Card = ({
   className,
   loading = false,
   highlight = false,
-  testId,
-  noBackgroundOnMobile = false,
 }: {
   children: ReactNode;
   title: string;
   className?: string;
   loading?: boolean;
   highlight?: boolean;
-  testId?: string;
-  noBackgroundOnMobile?: boolean;
 }) => {
   return (
     <div
-      data-testid={testId}
       className={classNames(
-        'col-span-full lg:col-auto',
-        {
-          'rounded-lg bg-vega-clight-800 dark:bg-vega-cdark-800 p-0.5':
-            !noBackgroundOnMobile,
-          'mt-3 md:mt-0 md:rounded-lg md:bg-vega-clight-800 md:dark:bg-vega-cdark-800 md:p-0.5':
-            noBackgroundOnMobile,
-        },
+        'bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full p-0.5 lg:col-auto',
+        'rounded-lg',
         {
           'bg-rainbow': highlight,
         },
         className
       )}
     >
-      <div
-        className={classNames('h-full w-full', {
-          'bg-vega-clight-800 dark:bg-vega-cdark-800 rounded p-4':
-            !noBackgroundOnMobile,
-          'md:bg-vega-clight-800 md:dark:bg-vega-cdark-800 md:rounded md:p-4':
-            noBackgroundOnMobile,
-        })}
-      >
+      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 h-full w-full rounded p-4">
         <h2 className="mb-3">{title}</h2>
         {loading ? <CardLoader /> : children}
       </div>

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

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

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

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

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

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

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

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

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

@@ -13,7 +13,7 @@ import { MarketFees } from './market-fees';
 import { useVolumeStats } from './use-volume-stats';
 import { useReferralStats } from './use-referral-stats';
 import { formatPercentage, getAdjustedFee } from './utils';
-import { Table as SimpleTable } from '../../components/table';
+import { Table, Td, Th, THead, Tr } from './table';
 import BigNumber from 'bignumber.js';
 import { Links } from '../../lib/links';
 import { Link } from 'react-router-dom';
@@ -24,8 +24,6 @@ import {
   truncateMiddle,
 } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
-import classNames from 'classnames';
-import { getTierGradient } from '../helpers/tiers';
 
 export const FeesContainer = () => {
   const t = useT();
@@ -86,10 +84,7 @@ export const FeesContainer = () => {
   );
 
   return (
-    <div
-      className="grid auto-rows-min grid-cols-4 gap-3"
-      data-testid="fees-container"
-    >
+    <div className="grid auto-rows-min grid-cols-4 gap-3">
       {isConnected && (
         <>
           <Card
@@ -129,10 +124,7 @@ export const FeesContainer = () => {
                 windowLength={volumeDiscountWindowLength}
               />
             ) : (
-              <p
-                className="text-muted pt-3 text-sm"
-                data-testid="no-volume-discount"
-              >
+              <p className="text-muted pt-3 text-sm">
                 {t('No volume discount program active')}
               </p>
             )}
@@ -141,22 +133,17 @@ export const FeesContainer = () => {
             title={t('Referral benefits')}
             className="sm:col-span-2"
             loading={loading}
-            data-testid="referral-benefits-card"
           >
             {isReferrer ? (
-              <ReferrerInfo code={code} data-testid="referrer-info" />
+              <ReferrerInfo code={code} />
             ) : isReferralProgramRunning ? (
               <ReferralBenefits
                 setRunningNotionalTakerVolume={referralVolumeInWindow}
                 epochsInSet={epochsInSet}
                 epochs={referralDiscountWindowLength}
-                data-testid="referral-benefits"
               />
             ) : (
-              <p
-                className="text-muted pt-3 text-sm"
-                data-testid="no-referral-program"
-              >
+              <p className="text-muted pt-3 text-sm">
                 {t('No referral program active')}
               </p>
             )}
@@ -167,8 +154,6 @@ export const FeesContainer = () => {
         title={t('Volume discount')}
         className="lg:col-span-full xl:col-span-2"
         loading={loading}
-        data-testid="volume-discount-card"
-        noBackgroundOnMobile={true}
       >
         <VolumeTiers
           tiers={volumeTiers}
@@ -181,23 +166,18 @@ export const FeesContainer = () => {
         title={t('Referral discount')}
         className="lg:col-span-full xl:col-span-2"
         loading={loading}
-        data-testid="referral-discount-card"
-        noBackgroundOnMobile={true}
       >
         <ReferralTiers
           tiers={referralTiers}
           tierIndex={referralTierIndex}
           epochsInSet={epochsInSet}
           referralVolumeInWindow={referralVolumeInWindow}
-          referralDiscountWindowLength={referralDiscountWindowLength}
         />
       </Card>
       <Card
         title={t('Fees by market')}
         className="lg:col-span-full"
         loading={marketsLoading}
-        data-testid="fees-by-market-card"
-        noBackgroundOnMobile={true}
       >
         <MarketFees
           markets={markets}
@@ -265,7 +245,7 @@ export const TradingFees = ({
   }
 
   return (
-    <div className="pt-4" data-testid="trading-fees">
+    <div className="pt-4">
       <div className="leading-none">
         <p className="block text-3xl leading-none" data-testid="adjusted-fees">
           {minAdjustedTotal !== undefined && maxAdjustedTotal !== undefined
@@ -275,7 +255,7 @@ export const TradingFees = ({
             : `${formatPercentage(adjustedTotal)}%`}
         </p>
         <CardTable>
-          <tr className="text-default" data-testid="total-fee-before-discount">
+          <tr className="text-default">
             <CardTableTH>{t('Total fee before discount')}</CardTableTH>
             <CardTableTD>
               {minTotal !== undefined && maxTotal !== undefined
@@ -285,7 +265,7 @@ export const TradingFees = ({
                 : `${formatPercentage(total.toNumber())}%`}
             </CardTableTD>
           </tr>
-          <tr data-testid="infrastructure-fees">
+          <tr>
             <CardTableTH>{t('Infrastructure')}</CardTableTH>
             <CardTableTD>
               {formatPercentage(
@@ -294,14 +274,14 @@ export const TradingFees = ({
               %
             </CardTableTD>
           </tr>
-          <tr data-testid="maker-fees">
+          <tr>
             <CardTableTH>{t('Maker')}</CardTableTH>
             <CardTableTD>
               {formatPercentage(Number(params.market_fee_factors_makerFee))}%
             </CardTableTD>
           </tr>
           {minLiq && maxLiq && (
-            <tr data-testid="liquidity-fees">
+            <tr>
               <CardTableTH>{t('Liquidity')}</CardTableTH>
               <CardTableTD>
                 {formatPercentage(Number(minLiq.fees.factors.liquidityFee))}%
@@ -330,26 +310,19 @@ export const CurrentVolume = ({
   const t = useT();
   const nextTier = tiers[tierIndex + 1];
   const requiredForNextTier = nextTier
-    ? new BigNumber(nextTier.minimumRunningNotionalTakerVolume).minus(
-        windowLengthVolume
-      )
-    : new BigNumber(0);
-  const currentVolume = new BigNumber(windowLengthVolume);
+    ? Number(nextTier.minimumRunningNotionalTakerVolume) - windowLengthVolume
+    : 0;
 
   return (
-    <div className="flex flex-col gap-3 pt-4" data-testid="current-volume">
+    <div className="flex flex-col gap-3 pt-4">
       <CardStat
-        value={formatNumberRounded(currentVolume)}
-        text={t('pastEpochs', 'Past {{count}} epochs', {
-          count: windowLength,
-        })}
-        testId="past-epochs-volume"
+        value={formatNumberRounded(new BigNumber(windowLengthVolume))}
+        text={t('pastEpochs', 'Past {{count}} epochs', { count: windowLength })}
       />
-      {requiredForNextTier.isGreaterThan(0) && (
+      {requiredForNextTier > 0 && (
         <CardStat
           value={formatNumber(requiredForNextTier)}
           text={t('Required for next tier')}
-          testId="required-for-next-tier"
         />
       )}
     </div>
@@ -367,7 +340,7 @@ const ReferralBenefits = ({
 }) => {
   const t = useT();
   return (
-    <div className="flex flex-col gap-3 pt-4" data-testid="referral-benefits">
+    <div className="flex flex-col gap-3 pt-4">
       <CardStat
         // all sets volume (not just current party)
         value={formatNumber(setRunningNotionalTakerVolume)}
@@ -378,13 +351,8 @@ const ReferralBenefits = ({
             count: epochs,
           }
         )}
-        testId="running-notional-taker-volume"
-      />
-      <CardStat
-        value={epochsInSet}
-        text={t('epochs in referral set')}
-        testId="epochs-in-referral-set"
       />
+      <CardStat value={epochsInSet} text={t('epochs in referral set')} />
     </div>
   );
 };
@@ -412,7 +380,7 @@ const TotalDiscount = ({
   );
 
   return (
-    <div className="pt-4" data-testid="total-discount-card-stats">
+    <div className="pt-4">
       <CardStat
         description={
           <>
@@ -422,10 +390,9 @@ const TotalDiscount = ({
         }
         value={formatPercentage(totalDiscount) + '%'}
         highlight={true}
-        testId="total-discount"
       />
       <CardTable>
-        <tr data-testid="volume-discount-row">
+        <tr>
           <CardTableTH>{t('Volume discount')}</CardTableTH>
           <CardTableTD>
             {formatPercentage(volumeDiscount)}%
@@ -439,7 +406,7 @@ const TotalDiscount = ({
             )}
           </CardTableTD>
         </tr>
-        <tr data-testid="referral-discount-row">
+        <tr>
           <CardTableTH>{t('Referral discount')}</CardTableTH>
           <CardTableTD>
             {formatPercentage(referralDiscount)}%
@@ -483,65 +450,36 @@ const VolumeTiers = ({
 
   return (
     <div>
-      <SimpleTable
-        className="bg-white dark:bg-vega-cdark-900"
-        columns={[
-          { name: 'tier', displayName: t('Tier'), testId: 'col-tier-value' },
-          {
-            name: 'discount',
-            displayName: t('Discount'),
-            testId: 'discount-value',
-          },
-          {
-            name: 'minTradingVolume',
-            displayName: t('Min. trading volume'),
-            testId: 'min-volume-value',
-          },
-          {
-            name: 'myVolume',
-            displayName: t('myVolume', 'My volume (last {{count}} epochs)', {
-              count: windowLength,
-            }),
-            testId: 'my-volume-value',
-          },
-          {
-            name: 'indicator',
-            className: 'max-md:hidden',
-            testId: 'your-tier',
-          },
-        ]}
-        data={Array.from(tiers).map((tier, i) => {
-          const isUserTier = tierIndex === i;
-          const indicator = isUserTier ? (
-            <YourTier testId={`your-volume-tier-${i}`} />
-          ) : null;
-          const tierIndicator = (
-            <div className="flex justify-between">
-              <span data-testid={`tier-value-${i}`}>{i + 1}</span>
-              <span className="md:hidden">{indicator}</span>
-            </div>
-          );
-          return {
-            tier: tierIndicator,
-            discount: (
-              <>{formatPercentage(Number(tier.volumeDiscountFactor))}%</>
-            ),
-            minTradingVolume: (
-              <>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</>
-            ),
-            myVolume: isUserTier ? (
-              formatNumber(lastEpochVolume)
-            ) : (
-              <span className="md:hidden">-</span>
-            ),
-            indicator: indicator,
-            className: classNames(
-              getTierGradient(i + 1, tiers.length),
-              'text-xs'
-            ),
-          };
-        })}
-      />
+      <Table>
+        <THead>
+          <tr>
+            <Th>{t('Tier')}</Th>
+            <Th>{t('Discount')}</Th>
+            <Th>{t('Min. trading volume')}</Th>
+            <Th>
+              {t('myVolume', 'My volume (last {{count}} epochs)', {
+                count: windowLength,
+              })}
+            </Th>
+            <Th />
+          </tr>
+        </THead>
+        <tbody>
+          {Array.from(tiers).map((tier, i) => {
+            const isUserTier = tierIndex === i;
+
+            return (
+              <Tr key={i}>
+                <Td>{i + 1}</Td>
+                <Td>{formatPercentage(Number(tier.volumeDiscountFactor))}%</Td>
+                <Td>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</Td>
+                <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
+                <Td>{isUserTier ? <YourTier /> : null}</Td>
+              </Tr>
+            );
+          })}
+        </tbody>
+      </Table>
     </div>
   );
 };
@@ -551,7 +489,6 @@ const ReferralTiers = ({
   tierIndex,
   epochsInSet,
   referralVolumeInWindow,
-  referralDiscountWindowLength,
 }: {
   tiers: Array<{
     referralDiscountFactor: string;
@@ -561,7 +498,6 @@ const ReferralTiers = ({
   tierIndex: number;
   epochsInSet: number;
   referralVolumeInWindow: number;
-  referralDiscountWindowLength: number;
 }) => {
   const t = useT();
 
@@ -573,97 +509,55 @@ const ReferralTiers = ({
 
   return (
     <div>
-      <SimpleTable
-        className="bg-white dark:bg-vega-cdark-900"
-        columns={[
-          { name: 'tier', displayName: t('Tier'), testId: 'col-tier-value' },
-          {
-            name: 'discount',
-            displayName: t('Discount'),
-            tooltip: t(
-              "The proportion of the referee's taker fees to be discounted"
-            ),
-            testId: 'discount-value',
-          },
-          {
-            name: 'volume',
-            displayName: t(
-              'minTradingVolume',
-              'Min. trading volume (last {{count}} epochs)',
-              {
-                count: referralDiscountWindowLength,
-              }
-            ),
-            tooltip: t(
-              'The minimum running notional for the given benefit tier'
-            ),
-            testId: 'min-volume-value',
-          },
-          {
-            name: 'epochs',
-            displayName: t('Min. epochs'),
-            tooltip: t(
-              'The minimum number of epochs the party needs to be in the referral set to be eligible for the benefit'
-            ),
-            testId: 'required-epochs-value',
-          },
-          {
-            name: 'indicator',
-            className: 'max-md:hidden',
-            testId: 'user-tier-or-unlocks',
-          },
-        ]}
-        data={Array.from(tiers).map((tier, i) => {
-          const isUserTier = tierIndex === i;
-          const requiredVolume = Number(tier.minimumRunningNotionalTakerVolume);
+      <Table>
+        <THead>
+          <tr>
+            <Th>{t('Tier')}</Th>
+            <Th>{t('Discount')}</Th>
+            <Th>{t('Min. trading volume')}</Th>
+            <Th>{t('Required epochs')}</Th>
+            <Th />
+          </tr>
+        </THead>
+        <tbody>
+          {Array.from(tiers).map((t, i) => {
+            const isUserTier = tierIndex === i;
 
-          const indicator = isUserTier ? (
-            <YourTier testId={`your-referral-tier-${i}`} />
-          ) : referralVolumeInWindow >= requiredVolume &&
-            epochsInSet < tier.minimumEpochs ? (
-            <span className="text-muted text-xs">
-              Unlocks in {tier.minimumEpochs - epochsInSet} epochs
-            </span>
-          ) : null;
+            const requiredVolume = Number(t.minimumRunningNotionalTakerVolume);
+            let unlocksIn = null;
 
-          const tierIndicator = (
-            <div className="flex justify-between">
-              <span data-testid={`tier-value-${i}`}>{i + 1}</span>
-              <span className="md:hidden">{indicator}</span>
-            </div>
-          );
+            if (
+              referralVolumeInWindow >= requiredVolume &&
+              epochsInSet < t.minimumEpochs
+            ) {
+              unlocksIn = (
+                <span className="text-muted">
+                  Unlocks in {t.minimumEpochs - epochsInSet} epochs
+                </span>
+              );
+            }
 
-          return {
-            tier: tierIndicator,
-            discount: (
-              <>{formatPercentage(Number(tier.referralDiscountFactor))}%</>
-            ),
-            volume: formatNumber(tier.minimumRunningNotionalTakerVolume),
-            epochs: tier.minimumEpochs,
-            indicator,
-            className: classNames(
-              getTierGradient(i + 1, tiers.length),
-              'text-xs'
-            ),
-          };
-        })}
-      />
+            return (
+              <Tr key={i}>
+                <Td>{i + 1}</Td>
+                <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
+                <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
+                <Td>{t.minimumEpochs}</Td>
+                <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
+              </Tr>
+            );
+          })}
+        </tbody>
+      </Table>
     </div>
   );
 };
 
-interface YourTierProps {
-  testId?: string;
-}
-
-const YourTier = ({ testId }: YourTierProps) => {
+const YourTier = () => {
   const t = useT();
 
   return (
-    <span
-      className="bg-rainbow whitespace-nowrap rounded-xl px-4 py-1.5 text-white text-xs"
-      data-testid={testId}
-    >
+    <span className="bg-rainbow whitespace-nowrap rounded-xl px-4 py-1.5 text-white">
       {t('Your tier')}
     </span>
   );

apps/trading/components/fees-container/market-fees.tsx

@@ -8,53 +8,43 @@ import { useNavigateWithMeta } from '../../lib/hooks/use-market-click-handler';
 import { Links } from '../../lib/links';
 import { useT } from '../../lib/use-t';
 import { useMemo } from 'react';
-import { type ColDef } from 'ag-grid-community/dist/lib/entities/colDef';
 
-const useFeesTableColumnDefs = (): ColDef[] => {
+const useFeesTableColumnDefs = () => {
   const t = useT();
   return useMemo(
-    () =>
-      [
-        {
-          field: 'code',
-          cellRenderer: 'MarketCodeCell',
-          pinned: 'left',
-          width: 150,
-        },
-        {
-          field: 'liquidityFee',
-          valueFormatter: ({ value }: { value: number }) => value + '%',
-        },
-        {
-          field: 'feeAfterDiscount',
-          headerName: t('Total fee after discount'),
-          valueFormatter: ({ value }: { value: number }) => value + '%',
-        },
-        {
-          field: 'totalFee',
-          headerName: t('Total fee before discount'),
-          valueFormatter: ({ value }: { value: number }) => value + '%',
-        },
-        {
-          field: 'infraFee',
-          valueFormatter: ({ value }: { value: number }) => value + '%',
-        },
-        {
-          field: 'makerFee',
-          valueFormatter: ({ value }: { value: number }) => value + '%',
-        },
-      ] as ColDef[],
+    () => [
+      { field: 'code', cellRenderer: 'MarketCodeCell' },
+      {
+        field: 'feeAfterDiscount',
+        headerName: t('Total fee after discount'),
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'infraFee',
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'makerFee',
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'liquidityFee',
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'totalFee',
+        headerName: t('Total fee before discount'),
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+    ],
     [t]
   );
 };
 
 const feesTableDefaultColDef = {
   flex: 1,
-  minWidth: 62,
   resizable: true,
   sortable: true,
-  suppressMovable: true,
-  pinned: false,
 };
 
 const components = {
@@ -72,8 +62,6 @@ export const MarketFees = ({
 }) => {
   const navigateWithMeta = useNavigateWithMeta();
 
-  const colDef = useFeesTableColumnDefs();
-
   const rows = compact(markets || []).map((m) => {
     const infraFee = new BigNumber(m.fees.factors.infrastructureFee);
     const makerFee = new BigNumber(m.fees.factors.makerFee);
@@ -100,9 +88,9 @@ export const MarketFees = ({
   });
 
   return (
-    <div className="border rounded-lg md:rounded-sm overflow-hidden border-default">
+    <div className="border rounded-sm border-default">
       <AgGrid
-        columnDefs={colDef}
+        columnDefs={useFeesTableColumnDefs()}
         rowData={rows}
         getRowId={({ data }) => data.id}
         defaultColDef={feesTableDefaultColDef}

apps/trading/components/fees-container/table.tsx

@@ -3,31 +3,21 @@ import type { ReactNode } from 'react';
 
 const cellClass = 'px-4 py-2 text-xs font-normal text-left last:text-right';
 
-export const Th = ({ children, ...props }: { children?: ReactNode }) => {
+export const Th = ({ children }: { children?: ReactNode }) => {
   return (
-    <th
-      className={classNames(cellClass, 'text-secondary leading-none py-3')}
-      {...props}
-    >
+    <th className={classNames(cellClass, 'text-secondary leading-none py-3')}>
       {children}
     </th>
   );
 };
 
-export const Td = ({ children, ...props }: { children?: ReactNode }) => {
-  return (
-    <th className={cellClass} {...props}>
-      {children}
-    </th>
-  );
+export const Td = ({ children }: { children?: ReactNode }) => {
+  return <th className={cellClass}>{children}</th>;
 };
 
-export const Tr = ({ children, ...props }: { children?: ReactNode }) => {
+export const Tr = ({ children }: { children?: ReactNode }) => {
   return (
-    <tr
-      className="hover:bg-vega-clight-600 dark:hover:bg-vega-cdark-700"
-      {...props}
-    >
+    <tr className="hover:bg-vega-clight-600 dark:hover:bg-vega-cdark-700">
       {children}
     </tr>
   );

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

@@ -38,7 +38,7 @@ export const FillsContainer = () => {
   );
 };
 
-export const useFillsStore = create<DataGridSlice>()(
+const useFillsStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_fills_store',
   })

apps/trading/components/fills-container/fills-settings.tsx

@@ -1,8 +0,0 @@
-import { GridSettings } from '../grid-settings/grid-settings';
-import { useFillsStore } from './fills-container';
-
-export const FillsSettings = () => (
-  <GridSettings
-    updateGridStore={useFillsStore((store) => store.updateGridStore)}
-  />
-);

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

@@ -1,2 +1 @@
 export * from './fills-container';
-export * from './fills-settings';

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

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

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

@@ -45,7 +45,7 @@ export const FundingPaymentsContainer = ({
   );
 };
 
-export const useFundingPaymentsStore = create<DataGridSlice>()(
+const useFundingPaymentsStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
     name: 'vega_funding_payments_store',
   })

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

@@ -1,8 +0,0 @@
-import { GridSettings } from '../grid-settings/grid-settings';
-import { useFundingPaymentsStore } from './funding-payments-container';
-
-export const FundingPaymentsSettings = () => (
-  <GridSettings
-    updateGridStore={useFundingPaymentsStore((store) => store.updateGridStore)}
-  />
-);

apps/trading/components/funding-payments-container/index.ts

@@ -1,2 +1 @@
 export * from './funding-payments-container';
-export * from './funding-payments-settings';

apps/trading/components/grid-settings/grid-settings.tsx

@@ -1,24 +0,0 @@
-import { useT } from '../../lib/use-t';
-import type { DataGridStore } from '../../stores/datagrid-store-slice';
-import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';
-
-export const GridSettings = ({
-  updateGridStore,
-}: {
-  updateGridStore: (gridStore: DataGridStore) => void;
-}) => {
-  const t = useT();
-  return (
-    <Button
-      onClick={() =>
-        updateGridStore({
-          columnState: undefined,
-          filterModel: undefined,
-        })
-      }
-      size="extra-small"
-    >
-      {t('Reset Columns')}
-    </Button>
-  );
-};

apps/trading/components/helpers/tiers.tsx

@@ -1,48 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Tag } from './tag';
-import classNames from 'classnames';
-
-// rainbow-ish order
-export const TIER_COLORS: Array<ComponentProps<typeof Tag>['color']> = [
-  'none', // worst tier if 8 tiers, otherwise relative to the best tier
-  'red',
-  'pink',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'purple', // best tier
-];
-
-export const getTierColor = (tier: number, max = TIER_COLORS.length) => {
-  const available =
-    max < TIER_COLORS.length
-      ? TIER_COLORS.slice(TIER_COLORS.length - max)
-      : TIER_COLORS;
-  const tiers = Object.keys(available).length;
-  let index = Math.abs(tier - 1);
-  if (tier >= tiers) {
-    index = index % tiers;
-  }
-  return available[index];
-};
-
-export const getTierGradient = (tier: number, max = TIER_COLORS.length) =>
-  classNames({
-    'from-vega-yellow-400 dark:from-vega-yellow-600 to-20%  bg-highlight':
-      'yellow' === getTierColor(tier, max),
-    'from-vega-green-400 dark:from-vega-green-600 to-20%  bg-highlight':
-      'green' === getTierColor(tier, max),
-    'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
-      'blue' === getTierColor(tier, max),
-    'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
-      'purple' === getTierColor(tier, max),
-    'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-      'pink' === getTierColor(tier, max),
-    'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-      'orange' === getTierColor(tier, max),
-    'from-vega-red-400 dark:from-vega-red-600 to-20%  bg-highlight':
-      'red' === getTierColor(tier, max),
-    'from-vega-clight-600 dark:from-vega-cdark-600 to-20%  bg-highlight':
-      'none' === getTierColor(tier, max),
-  });

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

@@ -27,7 +27,7 @@ export const MarketHeader = () => {
             title={
               <Popover
                 open={open}
-                onOpenChange={setOpen}
+                onChange={setOpen}
                 trigger={
                   <HeaderTitle>
                     <span>

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

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

apps/trading/components/navbar/navbar.tsx

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