feat: restore feture flags and remove them from settings

.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/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/links/party-link/party-link.tsx

@@ -60,7 +60,7 @@ const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
   }
 
   return (
-    <span>
+    <span className="whitespace-nowrap">
       {useName && <Icon size={4} name="cube" className="mr-2" />}
       <Link
         className="underline font-mono"

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

@@ -60,7 +60,7 @@ const DeterministicOrderDetails = ({
   const o = data.orderByID;
   return (
     <div className={wrapperClasses}>
-      <div className="mb-0">
+      <div className="mb-12 lg:mb-0">
         <div className="relative block px-3 py-6 md:px-6 lg:-mr-7">
           <h2 className="text-3xl font-bold mb-4 display-5">
             <abbr title={tifFull[o.timeInForce]} className="bb-dotted mr-2">
@@ -89,9 +89,9 @@ const DeterministicOrderDetails = ({
               <span>{t('Reference')}</span>: {o.reference}
             </p>
           ) : null}
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-x-6 mt-4">
-            <div className="mb-6 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
+          <div className="grid md:grid-cols-5 gap-x-6 mt-4">
+            <div className="mb-12 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-4">
                 {t('Status')}
               </h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0 capitalize">
@@ -99,17 +99,15 @@ const DeterministicOrderDetails = ({
               </h5>
             </div>
 
-            <div className="mb-6 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
-                {t('Size')}
-              </h2>
+            <div className="mb-12 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-4">{t('Size')}</h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0">
                 <SizeInMarket size={o.size} marketId={o.market.id} />
               </h5>
             </div>
 
-            <div className="mb-6 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
+            <div className="">
+              <h2 className="text-2xl font-bold text-dark mb-4">
                 {t('Version')}
               </h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0">
@@ -117,8 +115,8 @@ const DeterministicOrderDetails = ({
               </h5>
             </div>
             {o.type ? (
-              <div className="mb-6 md:mb-0">
-                <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
+              <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">

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/signature/signature.tsx

@@ -30,12 +30,12 @@ export const Signature = ({ signature }: SignatureProps) => {
 
   return (
     <div className="inline-flex border rounded signature-component relative pr-[20px]">
-      <div
+      <span
         className="bg-gray-100 px-2.5 py-0.5 text-xs text-gray-500 select-none cursor-default"
-        title={`${signature.algo}`}
+        title={`Version ${signature.version}`}
       >
-        <span>v{signature.version}</span>
-      </div>
+        {signature.algo}
+      </span>
       <div
         className={
           isOpen

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/layout.tsx

@@ -73,7 +73,7 @@ export const Layout = () => {
           <ProtocolUpgradeInProgressNotification />
         </div>
         <div className={fixedWidthClasses}>
-          <main className="md:p-4">
+          <main className="p-4">
             {!isHome && <BreadcrumbsContainer className="mb-4" />}
             <Outlet />
           </main>

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/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/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/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/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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
@@ -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,31 @@ 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(() => {
+    if (pinnedAsset) {
+      if (largeScreen) {
+        return <TradeGrid market={data} pinnedAsset={pinnedAsset} />;
+      }
+      return <TradePanels market={data} pinnedAsset={pinnedAsset} />;
+    }
+  }, [largeScreen, data, pinnedAsset]);
+
   if (loading) {
     return (
       <Splash>
@@ -107,8 +132,6 @@ export const MarketPage = () => {
     );
   }
 
-  const pinnedAsset = data && getAsset(data);
-
   return (
     <>
       <TitleUpdater
@@ -116,11 +139,7 @@ export const MarketPage = () => {
         marketName={data?.tradableInstrument.instrument.name}
         decimalPlaces={data?.decimalPlaces}
       />
-      {largeScreen ? (
-        <TradeGrid market={data} pinnedAsset={pinnedAsset} />
-      ) : (
-        <TradePanels market={data} pinnedAsset={pinnedAsset} />
-      )}
+      {tradeView}
     </>
   );
 };

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

@@ -1,10 +1,11 @@
-import { memo, type ReactNode } from 'react';
+import { memo } from 'react';
+import type { ReactNode } from 'react';
 import { LayoutPriority } from 'allotment';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { useFeatureFlags } from '@vegaprotocol/environment';
-import { type PinnedAsset } from '@vegaprotocol/accounts';
-import { type Market } from '@vegaprotocol/markets';
+import type { PinnedAsset } from '@vegaprotocol/accounts';
+import { OracleBanner, useMarket } from '@vegaprotocol/markets';
+import type { Market } from '@vegaprotocol/markets';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import {
   ResizableGrid,
@@ -12,19 +13,31 @@ import {
   usePaneLayout,
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
+import {
+  MarketSuccessorBanner,
+  MarketSuccessorProposalBanner,
+  MarketTerminationBanner,
+} from '../../components/market-banner';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
-import { MarketBanner } from '../../components/market-banner';
 
 interface TradeGridProps {
-  market: Market;
-  pinnedAsset?: PinnedAsset | undefined;
+  market: Market | null;
+  pinnedAsset?: PinnedAsset;
 }
 
 const MainGrid = memo(
-  ({ market, pinnedAsset }: { market: Market; pinnedAsset?: PinnedAsset }) => {
+  ({
+    marketId,
+    pinnedAsset,
+  }: {
+    marketId: string;
+    pinnedAsset?: PinnedAsset;
+  }) => {
     const featureFlags = useFeatureFlags((state) => state.flags);
     const t = useT();
+    const { data: market } = useMarket(marketId);
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
       id: 'middle-1',
@@ -49,20 +62,20 @@ const MainGrid = memo(
                     id="chart"
                     overflowHidden
                     name={t('Chart')}
-                    menu={<TradingViews.chart.menu />}
+                    menu={<TradingViews.candles.menu />}
                   >
                     <ErrorBoundary feature="chart">
-                      <TradingViews.chart.component marketId={market.id} />
+                      <TradingViews.candles.component marketId={marketId} />
                     </ErrorBoundary>
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
                     <ErrorBoundary feature="depth">
-                      <TradingViews.depth.component marketId={market.id} />
+                      <TradingViews.depth.component marketId={marketId} />
                     </ErrorBoundary>
                   </Tab>
                   <Tab id="liquidity" name={t('Liquidity')}>
                     <ErrorBoundary feature="liquidity">
-                      <TradingViews.liquidity.component marketId={market.id} />
+                      <TradingViews.liquidity.component marketId={marketId} />
                     </ErrorBoundary>
                   </Tab>
                   {market &&
@@ -70,21 +83,17 @@ const MainGrid = memo(
                     'Perpetual' ? (
                     <Tab id="funding-history" name={t('Funding history')}>
                       <ErrorBoundary feature="funding-history">
-                        <TradingViews.funding.component marketId={market.id} />
+                        <TradingViews.funding.component marketId={marketId} />
                       </ErrorBoundary>
                     </Tab>
                   ) : null}
                   {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={market.id}
+                          marketId={marketId}
                         />
                       </ErrorBoundary>
                     </Tab>
@@ -100,16 +109,12 @@ const MainGrid = memo(
                 <Tabs storageKey="console-trade-grid-main-right">
                   <Tab id="orderbook" name={t('Orderbook')}>
                     <ErrorBoundary feature="orderbook">
-                      <TradingViews.orderbook.component marketId={market.id} />
+                      <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={market.id} />
+                      <TradingViews.trades.component marketId={marketId} />
                     </ErrorBoundary>
                   </Tab>
                 </Tabs>
@@ -128,7 +133,6 @@ const MainGrid = memo(
                 id="positions"
                 name={t('Positions')}
                 menu={<TradingViews.positions.menu />}
-                settings={<TradingViews.positions.settings />}
               >
                 <ErrorBoundary feature="positions">
                   <TradingViews.positions.component />
@@ -138,26 +142,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>
@@ -166,35 +161,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 />}
-                >
+                <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
@@ -212,6 +197,7 @@ const MainGrid = memo(
 MainGrid.displayName = 'MainGrid';
 
 export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const wrapperClasses = classNames(
     'h-full grid',
     'grid-rows-[min-content_1fr]'
@@ -220,10 +206,17 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        <MarketBanner market={market} />
+        {featureFlags.SUCCESSOR_MARKETS && (
+          <>
+            <MarketSuccessorBanner market={market} />
+            <MarketSuccessorProposalBanner marketId={market?.id} />
+          </>
+        )}
+        <MarketTerminationBanner market={market} />
+        <OracleBanner marketId={market?.id || ''} />
       </div>
       <div className="min-h-0 p-0.5">
-        <MainGrid market={market} pinnedAsset={pinnedAsset} />
+        <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
       </div>
     </div>
   );

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

@@ -1,30 +1,29 @@
 import { type PinnedAsset } from '@vegaprotocol/accounts';
 import { type Market } from '@vegaprotocol/markets';
-// TODO: handle oracle banner
-// import { OracleBanner } from '@vegaprotocol/markets';
+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 { Splash } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
-import { MarketBanner } from '../../components/market-banner';
+import {
+  MarketSuccessorBanner,
+  MarketSuccessorProposalBanner,
+  MarketTerminationBanner,
+} from '../../components/market-banner';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { type TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
+import { useFeatureFlags } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
-  market: Market;
+  market: Market | null;
   pinnedAsset?: PinnedAsset;
 }
 
 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  const [view, setView] = useState<TradingView>('chart');
-  const viewCfg = TradingViews[view];
+  const featureFlags = useFeatureFlags((state) => state.flags);
+  const [view, setView] = useState<TradingView>('candles');
 
   const renderView = () => {
     const Component = TradingViews[view].component;
@@ -45,36 +44,35 @@ 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>
-        <MarketBanner market={market} />
+        {featureFlags.SUCCESSOR_MARKETS && (
+          <>
+            <MarketSuccessorBanner market={market} />
+            <MarketSuccessorProposalBanner marketId={market?.id} />
+          </>
+        )}
+        <MarketTerminationBanner market={market} />
+        <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">
@@ -112,9 +110,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
                 key={key}
                 view={key}
                 isActive={isActive}
-                onClick={() => {
-                  setView(key);
-                }}
+                onClick={() => setView(key)}
               />
             );
           })}
@@ -153,7 +149,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/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/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

@@ -18,35 +18,13 @@ 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 { useT } from '../../lib/use-t';
 import { useFundsAvailable } from './hooks/use-funds-available';
 import { ViewType, useSidebar } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-import { QUSDTooltip } from './qusd-tooltip';
-import { Trans } from 'react-i18next';
 
 const RELOAD_DELAY = 3000;
 
-const SPAM_PROTECTION_ERR = 'SPAM_PROTECTION_ERR';
-const SpamProtectionErr = ({
-  requiredFunds,
-}: {
-  requiredFunds?: string | number | bigint;
-}) => {
-  if (!requiredFunds) return null;
-  // eslint-disable-next-line react/jsx-no-undef
-  return (
-    <Trans
-      defaults="To protect the network from spam, you must have at least {{requiredFunds}} <0>qUSD</0> of any asset on the network to proceed."
-      values={{
-        requiredFunds,
-      }}
-      components={[<QUSDTooltip key="qusd" />]}
-      ns={ns}
-    />
-  );
-};
-
 const validateCode = (value: string, t: ReturnType<typeof useT>) => {
   const number = +`0x${value}`;
   if (!value || value.length !== 64) {
@@ -98,6 +76,7 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
     setValue,
     setError,
     watch,
+    clearErrors,
   } = useForm();
   const [params] = useSearchParams();
 
@@ -111,11 +90,32 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
    */
   const validateFundsAvailable = useCallback(() => {
     if (requiredFunds && !isEligible) {
-      const err = SPAM_PROTECTION_ERR;
+      const err = t(
+        'To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.',
+        {
+          requiredFunds,
+        }
+      );
       return err;
     }
     return true;
-  }, [isEligible, requiredFunds]);
+  }, [isEligible, requiredFunds, t]);
+
+  useEffect(() => {
+    if (codeField) {
+      const err = validateFundsAvailable();
+      if (err !== true) {
+        setStatus('no-funds');
+        setError('code', {
+          type: 'required',
+          message: err,
+        });
+      } else {
+        setStatus(null);
+        clearErrors('code');
+      }
+    }
+  }, [clearErrors, codeField, isEligible, setError, validateFundsAvailable]);
 
   /**
    * Validates the set a user tries to apply to.
@@ -140,15 +140,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;
@@ -296,7 +287,7 @@ 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')}
@@ -332,26 +323,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,7 +3,7 @@ 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 =

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

@@ -49,7 +49,7 @@ 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')}

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

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

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

@@ -2,7 +2,6 @@ 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,
@@ -123,66 +122,6 @@ export const useReferral = (args: UseReferralArgs) => {
   };
 };
 
-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

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,24 +5,24 @@ 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('Vega community referral program')}
           </h1>
           <p className="text-lg mb-1">
             {t(
               'Referral programs can be proposed and created via community governance.'
             )}
           </p>
-          <p className="text-lg mb-1">
+          <p className="text-lg mb-10">
             {t(
               'Once live, users can generate referral codes to share with their friends and earn commission on their trades, while referred traders can access fee discounts based on the running volume of the group.'
             )}

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'),
@@ -331,7 +297,6 @@ describe('ReferralStatistics', () => {
             noReferralSetAsRefereeMock,
             stakeAvailableMock,
             refereesMock,
-            refereesMock30,
           ]}
           showWarnings={false}
         >
@@ -348,10 +313,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,14 @@ 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 classNames from 'classnames';
-import { Table } from '../../components/table';
+import { Table } from './table';
 import {
   addDecimalsFormatNumber,
   getDateFormat,
@@ -31,10 +28,10 @@ import sortBy from 'lodash/sortBy';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
+import { DocsLinks } from '@vegaprotocol/environment';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
 import { ApplyCodeForm, ApplyCodeFormContainer } from './apply-code-form';
-import { QUSDTooltip } from './qusd-tooltip';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -46,17 +43,11 @@ export const ReferralStatistics = () => {
     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 { data: referrer, refetch: referrerRefetch } = useReferral({
+    pubKey,
+    role: 'referrer',
+    aggregationEpochs: program.details?.windowLength,
+  });
 
   const refetch = useCallback(() => {
     refereeRefetch();
@@ -87,9 +78,11 @@ export const ReferralStatistics = () => {
 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({
@@ -190,7 +183,7 @@ export const Statistics = ({
     nextBenefitTierValue,
     nextBenefitTierVolumeValue,
     nextBenefitTierEpochsValue,
-  } = useStats({ data, program });
+  } = useStats({ data, program, as });
 
   const isApplyCodePreview = useMemo(
     () => data.referee === null,
@@ -221,7 +214,6 @@ export const Statistics = ({
           ).toString(),
         }
       )}
-      testId="base-commission-rate"
       overrideWithNoProgram={!details}
     >
       {baseCommissionValue * 100}%
@@ -231,7 +223,6 @@ export const Statistics = ({
   const stakingMultiplierTile = (
     <StatTile
       title={t('Staking multiplier')}
-      testId="staking-multiplier"
       description={
         <span
           className={classNames({
@@ -265,7 +256,6 @@ export const Statistics = ({
           ? `(${baseCommissionFormatted}% ⨉ ${multiplier} = ${finalCommissionFormatted}%)`
           : undefined
       }
-      testId="final-commission-rate"
       overrideWithNoProgram={!details}
     >
       {finalCommissionFormatted}%
@@ -273,9 +263,7 @@ export const Statistics = ({
   );
   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,7 +278,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)}
@@ -302,26 +289,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))}
@@ -348,7 +318,6 @@ export const Statistics = ({
   const currentBenefitTierTile = (
     <StatTile
       title={t('Current tier')}
-      testId="current-tier"
       description={
         nextBenefitTierValue?.tier
           ? t('(Next tier: {{nextTier}})', {
@@ -364,11 +333,7 @@ export const Statistics = ({
     </StatTile>
   );
   const discountFactorTile = (
-    <StatTile
-      title={t('Discount')}
-      testId="discount"
-      overrideWithNoProgram={!details}
-    >
+    <StatTile title={t('Discount')} overrideWithNoProgram={!details}>
       {isApplyCodePreview && benefitTiers.length >= 1
         ? benefitTiers[0].discountFactor * 100
         : discountFactorValue * 100}
@@ -384,34 +349,23 @@ 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')} overrideWithNoProgram={!details}>
       {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')} overrideWithNoProgram={!details}>
       {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
     </StatTile>
   );
@@ -528,21 +482,12 @@ 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,
                       }}
+                      components={[<QUSDTooltip key="qusd" />]}
                       ns={ns}
                     />
                   ),
@@ -574,3 +519,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

@@ -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,
         })}
       >

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',

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

@@ -3,12 +3,11 @@ 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 { Tag } from './tag';
+import type { ComponentProps, ReactNode } from 'react';
 import { ExternalLink, truncateMiddle } from '@vegaprotocol/ui-toolkit';
 import {
   DApp,
@@ -20,6 +19,25 @@ import {
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
 
+// rainbow-ish order
+const TIER_COLORS: Array<ComponentProps<typeof Tag>['color']> = [
+  'pink',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'purple',
+];
+
+const getTierColor = (tier: number) => {
+  const tiers = Object.keys(TIER_COLORS).length;
+  let index = Math.abs(tier - 1);
+  if (tier >= tiers) {
+    index = index % tiers;
+  }
+  return TIER_COLORS[index];
+};
+
 const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
   <div
     className={classNames(
@@ -35,12 +53,10 @@ const StakingTier = ({
   tier,
   referralRewardMultiplier,
   minimumStakedTokens,
-  max,
 }: {
   tier: number;
   referralRewardMultiplier: string;
   minimumStakedTokens: string;
-  max?: number;
 }) => {
   const t = useT();
   const minimum = addDecimalsFormatNumber(minimumStakedTokens, 18);
@@ -81,7 +97,7 @@ const StakingTier = ({
         )}
       >
         <div>
-          <Tag color={getTierColor(tier, max)}>
+          <Tag color={getTierColor(tier)}>
             {t('Multiplier')} {referralRewardMultiplier}x
           </Tag>
           <p className="mt-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
@@ -143,13 +159,11 @@ export const TiersContainer = () => {
 
   return (
     <>
-      <h2 className="text-3xl mt-10 font-alpha calt">
-        {t('Current program details')}
-      </h2>
+      <h2 className="text-3xl mt-10">{t('Current Program Details')}</h2>
       {details?.id && (
         <p>
           <Trans
-            defaults="As a result of governance proposal <0>{{proposal}}</0> the program below is currently active on the Vega network."
+            defaults="As a result of <0>{{proposal}}</0> the program below is currently active on the Vega network."
             values={{ proposal: truncateMiddle(details.id) }}
             components={[
               <ExternalLink
@@ -184,18 +198,7 @@ export const TiersContainer = () => {
       </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="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20">
         {/* Benefit tiers */}
         <div className="flex flex-col mb-5">
           <h3 className="text-2xl calt">{t('Benefit tiers')}</h3>
@@ -258,7 +261,6 @@ const StakingTiers = ({
       <StakingTier
         key={i}
         tier={tier}
-        max={data.length}
         referralRewardMultiplier={referralRewardMultiplier}
         minimumStakedTokens={minimumStakedTokens}
       />
@@ -320,7 +322,22 @@ const TiersTable = ({
       className="bg-white dark:bg-vega-cdark-900"
       data={data.map((d) => ({
         ...d,
-        className: classNames(getTierGradient(d.tier, data.length)),
+        className: classNames({
+          'from-vega-yellow-400 dark:from-vega-yellow-600 to-20%  bg-highlight':
+            'yellow' === getTierColor(d.tier),
+          'from-vega-green-400 dark:from-vega-green-600 to-20%  bg-highlight':
+            'green' === getTierColor(d.tier),
+          'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
+            'blue' === getTierColor(d.tier),
+          'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
+            'purple' === getTierColor(d.tier),
+          'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
+            'pink' === getTierColor(d.tier),
+          'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
+            'orange' === getTierColor(d.tier),
+          'from-vega-clight-200 dark:from-vega-cdark-200 to-20%  bg-highlight':
+            'none' === getTierColor(d.tier),
+        }),
       }))}
     />
   );

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,8 +31,7 @@ export const Tile = ({
 };
 
 type StatTileProps = {
-  title: ReactNode;
-  testId?: string;
+  title: string;
   description?: ReactNode;
   children?: ReactNode;
   overrideWithNoProgram?: boolean;
@@ -43,7 +40,6 @@ export const StatTile = ({
   title,
   description,
   children,
-  testId,
   overrideWithNoProgram = false,
 }: StatTileProps) => {
   if (overrideWithNoProgram) {
@@ -51,18 +47,10 @@ export const StatTile = ({
   }
   return (
     <Tile>
-      <h3
-        data-testid={testId}
-        className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt"
-      >
+      <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
         {title}
       </h3>
-      <div
-        data-testid={`${testId}-value`}
-        className="text-2xl lg:text-5xl text-left"
-      >
-        {children}
-      </div>
+      <div className="text-5xl text-left">{children}</div>
       {description && (
         <div className="text-sm text-left text-vega-clight-100 dark:text-vega-cdark-100">
           {description}
@@ -75,7 +63,7 @@ export const StatTile = ({
 export const NoProgramTile = ({ title }: Pick<StatTileProps, 'title'>) => {
   const t = useT();
   return (
-    <Tile>
+    <Tile title={title}>
       <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
         {title}
       </h3>
@@ -124,7 +112,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/bootstrapper/bootstrapper.tsx

@@ -12,7 +12,6 @@ import { VegaWalletProvider } from '@vegaprotocol/wallet';
 import type { ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
 import { useT } from '../../lib/use-t';
-import { DataLoader } from './data-loader';
 
 export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   const t = useT();
@@ -53,38 +52,28 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
           />
         }
       >
-        <DataLoader
+        <Web3Provider
           skeleton={<AppLoader />}
           failure={
-            <AppFailure
-              title={t('Could not load market data or asset data')}
-              error={error}
-            />
+            <AppFailure title={t('Could not configure web3 provider')} />
           }
         >
-          <Web3Provider
-            skeleton={<AppLoader />}
-            failure={
-              <AppFailure title={t('Could not configure web3 provider')} />
-            }
+          <VegaWalletProvider
+            config={{
+              network: VEGA_ENV,
+              vegaUrl: VEGA_URL,
+              vegaWalletServiceUrl: VEGA_WALLET_URL,
+              links: {
+                explorer: VEGA_EXPLORER_URL,
+                concepts: DocsLinks.VEGA_WALLET_CONCEPTS_URL,
+                chromeExtensionUrl: CHROME_EXTENSION_URL,
+                mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
+              },
+            }}
           >
-            <VegaWalletProvider
-              config={{
-                network: VEGA_ENV,
-                vegaUrl: VEGA_URL,
-                vegaWalletServiceUrl: VEGA_WALLET_URL,
-                links: {
-                  explorer: VEGA_EXPLORER_URL,
-                  concepts: DocsLinks.VEGA_WALLET_CONCEPTS_URL,
-                  chromeExtensionUrl: CHROME_EXTENSION_URL,
-                  mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
-                },
-              }}
-            >
-              {children}
-            </VegaWalletProvider>
-          </Web3Provider>
-        </DataLoader>
+            {children}
+          </VegaWalletProvider>
+        </Web3Provider>
       </NodeGuard>
     </NetworkLoader>
   );

apps/trading/components/bootstrapper/data-loader.tsx

@@ -1,34 +0,0 @@
-import { useAssetsMapProvider } from '@vegaprotocol/assets';
-import { useMarketsMapProvider } from '@vegaprotocol/markets';
-import type { ReactNode } from 'react';
-
-export const DataLoader = ({
-  children,
-  failure,
-  skeleton,
-}: {
-  children: ReactNode;
-  failure: ReactNode;
-  skeleton: ReactNode;
-}) => {
-  // Query all markets and assets to ensure they are cached
-  const { data: markets, error, loading } = useMarketsMapProvider();
-  const {
-    data: assets,
-    error: errorAssets,
-    loading: loadingAssets,
-  } = useAssetsMapProvider();
-
-  if (loading || loadingAssets) {
-    // eslint-disable-next-line
-    return <>{skeleton}</>;
-  }
-
-  if (error || errorAssets || !markets || !assets) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return <>{failure}</>;
-  }
-
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{children}</>;
-};

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();
@@ -38,11 +36,7 @@ export const FeesContainer = () => {
   const { data: markets, loading: marketsLoading } = useMarketList();
 
   const { data: programData, loading: programLoading } =
-    useDiscountProgramsQuery({
-      errorPolicy: 'ignore',
-      fetchPolicy: 'cache-and-network',
-      pollInterval: 15000,
-    });
+    useDiscountProgramsQuery({ errorPolicy: 'ignore' });
 
   const volumeDiscountWindowLength =
     programData?.currentVolumeDiscountProgram?.windowLength || 1;
@@ -53,8 +47,6 @@ export const FeesContainer = () => {
       partyId: pubKey || '',
     },
     skip: !pubKey,
-    fetchPolicy: 'cache-and-network',
-    pollInterval: 15000,
   });
 
   const previousEpoch = (Number(feesData?.epoch.id) || 0) - 1;
@@ -92,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
@@ -135,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>
             )}
@@ -147,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>
             )}
@@ -173,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}
@@ -187,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}
@@ -271,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
@@ -281,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
@@ -291,7 +265,7 @@ export const TradingFees = ({
                 : `${formatPercentage(total.toNumber())}%`}
             </CardTableTD>
           </tr>
-          <tr data-testid="infrastructure-fees">
+          <tr>
             <CardTableTH>{t('Infrastructure')}</CardTableTH>
             <CardTableTD>
               {formatPercentage(
@@ -300,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))}%
@@ -343,19 +317,21 @@ export const CurrentVolume = ({
   const currentVolume = new BigNumber(windowLengthVolume);
 
   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)}
+        value={
+          currentVolume.isZero()
+            ? `<${formatNumberRounded(requiredForNextTier)}`
+            : formatNumberRounded(currentVolume)
+        }
         text={t('pastEpochs', 'Past {{count}} epochs', {
           count: windowLength,
         })}
-        testId="past-epochs-volume"
       />
       {requiredForNextTier.isGreaterThan(0) && (
         <CardStat
           value={formatNumber(requiredForNextTier)}
           text={t('Required for next tier')}
-          testId="required-for-next-tier"
         />
       )}
     </div>
@@ -373,7 +349,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)}
@@ -384,13 +360,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>
   );
 };
@@ -418,7 +389,7 @@ const TotalDiscount = ({
   );
 
   return (
-    <div className="pt-4" data-testid="total-discount-card-stats">
+    <div className="pt-4">
       <CardStat
         description={
           <>
@@ -428,10 +399,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)}%
@@ -445,7 +415,7 @@ const TotalDiscount = ({
             )}
           </CardTableTD>
         </tr>
-        <tr data-testid="referral-discount-row">
+        <tr>
           <CardTableTH>{t('Referral discount')}</CardTableTH>
           <CardTableTD>
             {formatPercentage(referralDiscount)}%
@@ -489,65 +459,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>
   );
 };
@@ -557,7 +498,6 @@ const ReferralTiers = ({
   tierIndex,
   epochsInSet,
   referralVolumeInWindow,
-  referralDiscountWindowLength,
 }: {
   tiers: Array<{
     referralDiscountFactor: string;
@@ -567,7 +507,6 @@ const ReferralTiers = ({
   tierIndex: number;
   epochsInSet: number;
   referralVolumeInWindow: number;
-  referralDiscountWindowLength: number;
 }) => {
   const t = useT();
 
@@ -579,97 +518,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/fees-container/use-referral-stats.ts

@@ -1,5 +1,4 @@
 import type { DiscountProgramsQuery, FeesQuery } from './__generated__/Fees';
-
 export const useReferralStats = (
   previousEpoch?: number,
   referralStats?: NonNullable<

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-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-banner/index.ts

@@ -1 +1,3 @@
-export { MarketBanner } from './market-banner';
+export * from './market-successor-banner';
+export * from './market-successor-proposal-banner';
+export * from './market-termination-banner';

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

@@ -1,205 +0,0 @@
-import compact from 'lodash/compact';
-import { MarketState } from '@vegaprotocol/types';
-import { Intent, NotificationBanner } from '@vegaprotocol/ui-toolkit';
-import {
-  useMarketState,
-  type Market,
-  useMaliciousOracle,
-} from '@vegaprotocol/markets';
-import { useState } from 'react';
-import { type MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { MarketSuspendedBanner } from './market-suspended-banner';
-import { MarketUpdateBanner } from './market-update-banner';
-import { MarketUpdateStateBanner } from './market-update-state-banner';
-import { MarketSettledBanner } from './market-settled-banner';
-import { MarketSuccessorProposalBanner } from './market-successor-proposal-banner';
-import { MarketOracleBanner, type Oracle } from './market-oracle-banner';
-import {
-  useSuccessorMarketProposals,
-  useUpdateMarketProposals,
-  useUpdateMarketStateProposals,
-} from './use-market-proposals';
-
-type UpdateMarketBanner = {
-  kind: 'UpdateMarket';
-  proposals: MarketViewProposalFieldsFragment[];
-};
-
-type UpdateMarketStateBanner = {
-  kind: 'UpdateMarketState';
-  proposals: MarketViewProposalFieldsFragment[];
-};
-
-type NewMarketBanner = {
-  kind: 'NewMarket'; // aka a proposal of NewMarket which succeeds the current market
-  proposals: MarketViewProposalFieldsFragment[];
-};
-
-type SettledBanner = {
-  kind: 'Settled';
-  market: Market;
-};
-
-type SuspendedBanner = {
-  kind: 'Suspended';
-  market: Market;
-};
-
-type OracleBanner = {
-  kind: 'Oracle';
-  oracle: Oracle;
-};
-
-type Banner =
-  | UpdateMarketBanner
-  | UpdateMarketStateBanner
-  | NewMarketBanner
-  | SettledBanner
-  | SuspendedBanner
-  | OracleBanner;
-
-export const MarketBanner = ({ market }: { market: Market }) => {
-  const { data: marketState } = useMarketState(market.id);
-
-  const { proposals: successorProposals, loading: successorLoading } =
-    useSuccessorMarketProposals(market.id);
-
-  const { proposals: updateMarketProposals, loading: updateMarketLoading } =
-    useUpdateMarketProposals(market.id);
-
-  const {
-    proposals: updateMarketStateProposals,
-    loading: updateMarketStateLoading,
-  } = useUpdateMarketStateProposals(market.id);
-
-  const { data: maliciousOracle, loading: oracleLoading } = useMaliciousOracle(
-    market.id
-  );
-
-  const loading =
-    successorLoading ||
-    updateMarketLoading ||
-    updateMarketStateLoading ||
-    oracleLoading;
-
-  if (loading) {
-    return null;
-  }
-
-  const banners = compact([
-    updateMarketStateProposals.length
-      ? {
-          kind: 'UpdateMarketState' as const,
-          proposals: updateMarketStateProposals,
-        }
-      : undefined,
-    updateMarketProposals.length
-      ? {
-          kind: 'UpdateMarket' as const,
-          proposals: updateMarketProposals,
-        }
-      : undefined,
-    successorProposals.length
-      ? {
-          kind: 'NewMarket' as const,
-          proposals: successorProposals,
-        }
-      : undefined,
-    marketState === MarketState.STATE_SETTLED
-      ? {
-          kind: 'Settled' as const,
-          market,
-        }
-      : undefined,
-    marketState === MarketState.STATE_SUSPENDED_VIA_GOVERNANCE
-      ? {
-          kind: 'Suspended' as const,
-          market,
-        }
-      : undefined,
-    maliciousOracle !== undefined
-      ? {
-          kind: 'Oracle' as const,
-          oracle: maliciousOracle,
-        }
-      : undefined,
-  ]);
-
-  return <BannerQueue banners={banners} market={market} />;
-};
-
-const BannerQueue = ({
-  banners,
-  market,
-}: {
-  banners: Banner[];
-  market: Market;
-}) => {
-  // for showing banner by index
-  const [index, setIndex] = useState(0);
-
-  const banner = banners[index];
-  if (!banner) return null;
-
-  let content = null;
-  let intent = Intent.Primary;
-
-  switch (banner.kind) {
-    case 'UpdateMarket': {
-      content = <MarketUpdateBanner proposals={banner.proposals} />;
-      break;
-    }
-    case 'UpdateMarketState': {
-      content = (
-        <MarketUpdateStateBanner proposals={banner.proposals} market={market} />
-      );
-      break;
-    }
-    case 'NewMarket': {
-      content = <MarketSuccessorProposalBanner proposals={banner.proposals} />;
-      intent = Intent.Warning;
-      break;
-    }
-    case 'Settled': {
-      content = <MarketSettledBanner market={market} />;
-      break;
-    }
-    case 'Suspended': {
-      content = <MarketSuspendedBanner />;
-      intent = Intent.Warning;
-      break;
-    }
-    case 'Oracle': {
-      // @ts-ignore oracle cannot be undefined
-      content = <MarketOracleBanner oracle={banner.oracle} />;
-      intent = Intent.Danger;
-      break;
-    }
-    default: {
-      return null;
-    }
-  }
-
-  const showCount = banners.length > 1;
-
-  const onClose = () => {
-    setIndex((x) => x + 1);
-  };
-
-  return (
-    <NotificationBanner
-      intent={intent}
-      onClose={onClose}
-      data-testid="market-banner"
-    >
-      <div className="flex items-center justify-between">
-        {content}
-        {showCount ? (
-          <p>
-            {index + 1}/{banners.length}
-          </p>
-        ) : null}
-      </div>
-    </NotificationBanner>
-  );
-};

apps/trading/components/market-banner/market-oracle-banner.spec.tsx

@@ -1,58 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MarketOracleBanner } from './market-oracle-banner';
-
-jest.mock('@vegaprotocol/markets', () => ({
-  ...jest.requireActual('@vegaprotocol/markets'),
-  OracleDialog: ({ open }: { open: boolean }) => {
-    return <div data-testid="oracle-dialog">{open ? 'open' : 'closed'}</div>;
-  },
-}));
-
-const oracle = {
-  dataSourceSpecId: 'someId',
-  provider: {
-    name: 'Test oracle',
-    url: 'https://zombo.com',
-    description_markdown:
-      'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
-    oracle: {
-      status: 'COMPROMISED' as const,
-      status_reason: 'Reason here',
-      first_verified: '2021-01-01T00:00:00Z',
-      last_verified: '2022-01-01T00:00:00Z',
-      type: 'public_key' as const,
-      public_key: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
-    },
-    proofs: [
-      {
-        format: 'url' as const,
-        available: true,
-        type: 'web' as const,
-        url: 'https://proofweb.com',
-      },
-      {
-        format: 'signed_message' as const,
-        available: true,
-        type: 'public_key' as const,
-        public_key: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
-        message: 'SOMEHEX',
-      },
-    ],
-    github_link:
-      'https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/eth_address-0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC.toml',
-  },
-};
-
-describe('MarketOracleBanner', () => {
-  it('should render successfully', async () => {
-    render(<MarketOracleBanner oracle={oracle} />);
-
-    expect(screen.getByTestId('oracle-dialog')).toHaveTextContent('closed');
-    expect(screen.getByTestId('oracle-banner-status')).toHaveTextContent(
-      'COMPROMISED'
-    );
-    await userEvent.click(screen.getByRole('button', { name: 'Show more' }));
-    expect(screen.getByTestId('oracle-dialog')).toHaveTextContent('open');
-  });
-});

apps/trading/components/market-banner/market-oracle-banner.tsx

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import { Trans } from 'react-i18next';
-import {
-  OracleDialog,
-  useOracleStatuses,
-  type useMaliciousOracle,
-} from '@vegaprotocol/markets';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-
-export type Oracle = ReturnType<typeof useMaliciousOracle>['data'];
-
-export const MarketOracleBanner = ({
-  oracle,
-}: {
-  oracle: NonNullable<Oracle>;
-}) => {
-  const [open, setOpen] = useState(false);
-  const oracleStatuses = useOracleStatuses();
-
-  return (
-    <>
-      <OracleDialog open={open} onChange={setOpen} {...oracle} />
-      <p>
-        <Trans
-          defaults="Oracle status for this market is <0>{{status}}</0>. {{description}} <1>Show more</1>"
-          components={[
-            <span key="oracle-status" data-testid="oracle-banner-status">
-              status
-            </span>,
-            <ButtonLink
-              key="oracle-button"
-              onClick={() => setOpen((x) => !x)}
-              data-testid="oracle-banner-dialog-trigger"
-            >
-              Show more
-            </ButtonLink>,
-          ]}
-          values={{
-            status: oracle.provider.oracle.status,
-            description: oracleStatuses[oracle.provider.oracle.status],
-          }}
-        />
-      </p>
-    </>
-  );
-};

apps/trading/components/market-banner/market-settled-banner.spec.tsx

@@ -1,219 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { addDays, subDays, subHours } from 'date-fns';
-import { MockedProvider, type MockedResponse } from '@apollo/react-testing';
-import {
-  SuccessorMarketDocument,
-  MarketCandlesDocument,
-  MarketCandlesUpdateDocument,
-  SuccessorMarketIdDocument,
-  type Market,
-  type SuccessorMarketQuery,
-  type SuccessorMarketQueryVariables,
-  type MarketCandlesQuery,
-  type MarketCandlesQueryVariables,
-  type MarketCandlesUpdateSubscription,
-  type MarketCandlesUpdateSubscriptionVariables,
-  type SuccessorMarketIdQuery,
-  type SuccessorMarketIdQueryVariables,
-} from '@vegaprotocol/markets';
-import { MemoryRouter } from 'react-router-dom';
-import { createMarketFragment } from '@vegaprotocol/mock';
-import { Interval, MarketState, MarketTradingMode } from '@vegaprotocol/types';
-import { MarketSettledBanner } from './market-settled-banner';
-
-describe('MarketSettledBanner', () => {
-  const now = 1701388800000;
-  const origDateNow = Date.now;
-
-  beforeAll(() => {
-    Date.now = () => now;
-  });
-
-  afterAll(() => {
-    Date.now = origDateNow;
-  });
-
-  const marketId = 'market-0';
-  const successorId = 'successor-id';
-  const successorName = 'successor-name';
-
-  const successorMarketIdMock: MockedResponse<
-    SuccessorMarketIdQuery,
-    SuccessorMarketIdQueryVariables
-  > = {
-    request: {
-      query: SuccessorMarketIdDocument,
-      variables: {
-        marketId: marketId,
-      },
-    },
-    result: {
-      data: {
-        market: {
-          successorMarketID: successorId,
-        },
-      },
-    },
-  };
-
-  const successorMock: MockedResponse<
-    SuccessorMarketQuery,
-    SuccessorMarketQueryVariables
-  > = {
-    request: {
-      query: SuccessorMarketDocument,
-      variables: {
-        marketId: successorId,
-      },
-    },
-    result: {
-      data: {
-        market: {
-          id: successorId,
-          state: MarketState.STATE_ACTIVE,
-          tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
-          positionDecimalPlaces: 0,
-          tradableInstrument: {
-            instrument: {
-              name: successorName,
-              code: 'code',
-            },
-          },
-          proposal: {
-            id: 'proposal-id',
-          },
-        },
-      },
-    },
-  };
-
-  const since = subDays(new Date(now), 5).toISOString();
-  const successorCandlesMock: MockedResponse<
-    MarketCandlesQuery,
-    MarketCandlesQueryVariables
-  > = {
-    request: {
-      query: MarketCandlesDocument,
-      variables: {
-        marketId: successorId,
-        interval: Interval.INTERVAL_I1H,
-        since,
-      },
-    },
-    result: {
-      data: {
-        marketsConnection: {
-          edges: [
-            {
-              node: {
-                candlesConnection: {
-                  edges: [
-                    {
-                      node: {
-                        high: '100',
-                        low: '100',
-                        open: '100',
-                        close: '100',
-                        volume: '100',
-                        periodStart: subHours(new Date(now), 1).toISOString(),
-                      },
-                    },
-                    {
-                      node: {
-                        high: '100',
-                        low: '100',
-                        open: '100',
-                        close: '200',
-                        volume: '100',
-                        periodStart: subHours(new Date(now), 2).toISOString(),
-                      },
-                    },
-                  ],
-                },
-              },
-            },
-          ],
-        },
-      },
-    },
-  };
-
-  const successorCandlesUpdateMock: MockedResponse<
-    MarketCandlesUpdateSubscription,
-    MarketCandlesUpdateSubscriptionVariables
-  > = {
-    request: {
-      query: MarketCandlesUpdateDocument,
-      variables: {
-        marketId: successorId,
-        interval: Interval.INTERVAL_I1H,
-        // @ts-ignore this query doesn't need the 'since' variable, but the data-provider
-        // uses all variables for both the query and the subscription so its needed here
-        // to match the mock
-        since,
-      },
-    },
-    result: {
-      data: {
-        candles: {
-          high: '100',
-          low: '100',
-          open: '100',
-          close: '100',
-          volume: '100',
-          periodStart: '2020-01-01T00:00:00',
-        },
-      },
-    },
-  };
-
-  const renderComponent = (market: Market, mocks?: MockedResponse[]) => {
-    return render(
-      <MemoryRouter>
-        <MockedProvider mocks={mocks}>
-          <MarketSettledBanner market={market} />
-        </MockedProvider>
-      </MemoryRouter>
-    );
-  };
-
-  it('shows that the market is settled if there is no successor', () => {
-    const market = createMarketFragment({
-      id: marketId,
-      successorMarketID: undefined,
-    });
-    renderComponent(market, [successorMarketIdMock, successorMock]);
-    expect(
-      screen.getByText('This market has been settled')
-    ).toBeInTheDocument();
-  });
-
-  it('shows that the market has been succeeded with an active market', async () => {
-    const market = createMarketFragment({
-      id: marketId,
-      successorMarketID: successorId,
-      marketTimestamps: {
-        close: addDays(new Date(now), 1).toISOString(),
-      },
-    });
-    renderComponent(market, [
-      successorMarketIdMock,
-      successorMock,
-      successorCandlesMock,
-      successorCandlesUpdateMock,
-    ]);
-    expect(
-      await screen.findByText('This market has been succeeded')
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(/has a 24h trading volume of 200$/i)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText('This market expires in 1 day.')
-    ).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: successorName })).toHaveAttribute(
-      'href',
-      `/markets/${successorId}`
-    );
-  });
-});

apps/trading/components/market-banner/market-settled-banner.tsx

@@ -1,122 +0,0 @@
-import { Link } from 'react-router-dom';
-import { Trans } from 'react-i18next';
-import { isBefore, formatDuration, intervalToDuration } from 'date-fns';
-import {
-  calcCandleVolume,
-  useCandles,
-  useSuccessorMarket,
-  type Market,
-} from '@vegaprotocol/markets';
-import {
-  addDecimalsFormatNumber,
-  getMarketExpiryDate,
-  isNumeric,
-} from '@vegaprotocol/utils';
-import { useT, ns } from '../../lib/use-t';
-import { Links } from '../../lib/links';
-
-const getExpiryDate = (tags: string[], close?: string): Date | null => {
-  const expiryDate = getMarketExpiryDate(tags);
-  return expiryDate || (close && new Date(close)) || null;
-};
-
-export const MarketSettledBanner = ({ market }: { market: Market }) => {
-  const t = useT();
-  const { data: successorMarket } = useSuccessorMarket(market.id);
-
-  const expiry = market
-    ? getExpiryDate(
-        market.tradableInstrument.instrument.metadata.tags || [],
-        market.marketTimestamps.close
-      )
-    : null;
-
-  const duration =
-    expiry && isBefore(new Date(Date.now()), expiry)
-      ? intervalToDuration({ start: new Date(Date.now()), end: expiry })
-      : null;
-
-  const { oneDayCandles } = useCandles({
-    marketId: successorMarket?.id,
-  });
-
-  const candleVolume = oneDayCandles?.length
-    ? calcCandleVolume(oneDayCandles)
-    : null;
-
-  const successorVolume =
-    candleVolume && isNumeric(successorMarket?.positionDecimalPlaces)
-      ? addDecimalsFormatNumber(
-          candleVolume,
-          successorMarket?.positionDecimalPlaces as number
-        )
-      : null;
-
-  if (successorMarket) {
-    return (
-      <div>
-        <p>{t('This market has been succeeded')}</p>
-        {duration && (
-          <div className="mt-1">
-            <span>
-              {t('This market expires in {{duration}}.', {
-                duration: formatDuration(duration, {
-                  format: [
-                    'years',
-                    'months',
-                    'weeks',
-                    'days',
-                    'hours',
-                    'minutes',
-                  ],
-                }),
-              })}
-            </span>
-            <>
-              {' '}
-              {successorVolume ? (
-                <Trans
-                  defaults="The successor market <0>{{instrumentName}}</0> has a 24h trading volume of {{successorVolume}}"
-                  values={{
-                    successorVolume,
-                    instrumentName:
-                      successorMarket?.tradableInstrument.instrument.name,
-                  }}
-                  components={[
-                    <Link
-                      to={Links.MARKET(successorMarket.id)}
-                      key="link"
-                      target="_blank"
-                    >
-                      successor market name
-                    </Link>,
-                  ]}
-                />
-              ) : (
-                <Trans
-                  defaults="The successor market is <0>{{instrumentName}}</0>"
-                  values={{
-                    instrumentName:
-                      successorMarket?.tradableInstrument.instrument.name,
-                  }}
-                  components={[
-                    <Link
-                      to={Links.MARKET(successorMarket.id)}
-                      key="link"
-                      target="_blank"
-                    >
-                      successor market name
-                    </Link>,
-                  ]}
-                  ns={ns}
-                />
-              )}
-            </>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return <p>{t('This market has been settled')}</p>;
-};

apps/trading/components/market-banner/market-successor-banner.spec.tsx

@@ -0,0 +1,155 @@
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { MarketSuccessorBanner } from './market-successor-banner';
+import * as Types from '@vegaprotocol/types';
+import * as allUtils from '@vegaprotocol/utils';
+import type { Market } from '@vegaprotocol/markets';
+import type { PartialDeep } from 'type-fest';
+
+const market = {
+  id: 'marketId',
+  tradableInstrument: {
+    instrument: {
+      metadata: {
+        tags: [],
+      },
+    },
+  },
+  marketTimestamps: {
+    close: null,
+  },
+} as unknown as Market;
+
+let mockDataSuccessorMarket: PartialDeep<Market> | null = null;
+let mockDataMarketState: Market['state'] | null = null;
+jest.mock('@vegaprotocol/data-provider', () => ({
+  ...jest.requireActual('@vegaprotocol/data-provider'),
+  useDataProvider: jest.fn().mockImplementation((args) => {
+    if (args.skip) {
+      return {
+        data: null,
+        error: null,
+      };
+    }
+    return {
+      data: mockDataSuccessorMarket,
+      error: null,
+    };
+  }),
+}));
+jest.mock('@vegaprotocol/utils', () => ({
+  ...jest.requireActual('@vegaprotocol/utils'),
+  getMarketExpiryDate: jest.fn(),
+}));
+let mockCandles = {};
+jest.mock('@vegaprotocol/markets', () => ({
+  ...jest.requireActual('@vegaprotocol/markets'),
+  useMarketState: (marketId: string) =>
+    marketId
+      ? {
+          data: mockDataMarketState,
+        }
+      : { data: undefined },
+  useSuccessorMarket: (marketId: string) =>
+    marketId
+      ? {
+          data: mockDataSuccessorMarket,
+        }
+      : { data: undefined },
+  useCandles: () => mockCandles,
+}));
+
+describe('MarketSuccessorBanner', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockDataSuccessorMarket = {
+      id: 'successorMarketID',
+      state: Types.MarketState.STATE_ACTIVE,
+      tradingMode: Types.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+      tradableInstrument: {
+        instrument: {
+          name: 'Successor Market Name',
+        },
+      },
+    };
+  });
+  describe('should be hidden', () => {
+    it('when no market', () => {
+      const { container } = render(<MarketSuccessorBanner market={null} />, {
+        wrapper: MockedProvider,
+      });
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('no successor market data', () => {
+      mockDataSuccessorMarket = null;
+      const { container } = render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+
+  describe('should be displayed', () => {
+    it('should be rendered', () => {
+      render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(
+        screen.getByText('This market has been succeeded')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Successor Market Name' })
+      ).toHaveAttribute('href', '/#/markets/successorMarketID');
+    });
+
+    it('no successor market data, market settled', () => {
+      mockDataSuccessorMarket = null;
+      mockDataMarketState = Types.MarketState.STATE_SETTLED;
+      render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(
+        screen.getByText('This market has been settled')
+      ).toBeInTheDocument();
+    });
+
+    it('should display optionally successor volume', () => {
+      mockDataSuccessorMarket = {
+        ...mockDataSuccessorMarket,
+        positionDecimalPlaces: 3,
+      };
+      mockCandles = {
+        oneDayCandles: [
+          { volume: 123 },
+          { volume: 456 },
+          { volume: 789 },
+          { volume: 99999 },
+        ],
+      };
+
+      render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(
+        screen.getByText('has a 24h trading volume of 101.367', {
+          exact: false,
+        })
+      ).toBeInTheDocument();
+    });
+
+    it('should display optionally duration', () => {
+      jest
+        .spyOn(allUtils, 'getMarketExpiryDate')
+        .mockReturnValue(
+          new Date(Date.now() + 24 * 60 * 60 * 1000 + 60 * 1000)
+        );
+      render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(
+        screen.getByText(/^This market expires in 1 day/)
+      ).toBeInTheDocument();
+    });
+  });
+});

apps/trading/components/market-banner/market-successor-banner.tsx

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+import { isBefore, formatDuration, intervalToDuration } from 'date-fns';
+import type { Market } from '@vegaprotocol/markets';
+import {
+  calcCandleVolume,
+  useCandles,
+  useMarketState,
+  useSuccessorMarket,
+} from '@vegaprotocol/markets';
+import {
+  ExternalLink,
+  Intent,
+  NotificationBanner,
+} from '@vegaprotocol/ui-toolkit';
+import {
+  addDecimalsFormatNumber,
+  getMarketExpiryDate,
+  isNumeric,
+} from '@vegaprotocol/utils';
+import * as Types from '@vegaprotocol/types';
+import { useT, ns } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
+
+const getExpiryDate = (tags: string[], close?: string): Date | null => {
+  const expiryDate = getMarketExpiryDate(tags);
+  return expiryDate || (close && new Date(close)) || null;
+};
+
+export const MarketSuccessorBanner = ({
+  market,
+}: {
+  market: Market | null;
+}) => {
+  const t = useT();
+  const { data: marketState } = useMarketState(market?.id);
+  const isSettled = marketState === Types.MarketState.STATE_SETTLED;
+  const { data: successorData, loading } = useSuccessorMarket(market?.id);
+
+  const [visible, setVisible] = useState(true);
+
+  const expiry = market
+    ? getExpiryDate(
+        market.tradableInstrument.instrument.metadata.tags || [],
+        market.marketTimestamps.close
+      )
+    : null;
+
+  const duration =
+    expiry && isBefore(new Date(), expiry)
+      ? intervalToDuration({ start: new Date(), end: expiry })
+      : null;
+
+  const { oneDayCandles } = useCandles({
+    marketId: successorData?.id,
+  });
+
+  const candleVolume = oneDayCandles?.length
+    ? calcCandleVolume(oneDayCandles)
+    : null;
+
+  const successorVolume =
+    candleVolume && isNumeric(successorData?.positionDecimalPlaces)
+      ? addDecimalsFormatNumber(
+          candleVolume,
+          successorData?.positionDecimalPlaces as number
+        )
+      : null;
+
+  if (!loading && (isSettled || successorData) && visible) {
+    return (
+      <NotificationBanner
+        intent={Intent.Primary}
+        onClose={() => {
+          setVisible(false);
+        }}
+      >
+        <div className="uppercase">
+          {successorData
+            ? t('This market has been succeeded')
+            : t('This market has been settled')}
+        </div>
+        {(duration || successorData) && (
+          <div className="mt-1">
+            {duration && (
+              <span>
+                {t('This market expires in {{duration}}.', {
+                  duration: formatDuration(duration, {
+                    format: [
+                      'years',
+                      'months',
+                      'weeks',
+                      'days',
+                      'hours',
+                      'minutes',
+                    ],
+                  }),
+                })}
+              </span>
+            )}
+            {successorData && (
+              <>
+                {' '}
+                {successorVolume ? (
+                  <Trans
+                    defaults="The successor market <0>{{instrumentName}}</0> has a 24h trading volume of {{successorVolume}}"
+                    values={{
+                      successorVolume,
+                      instrumentName:
+                        successorData?.tradableInstrument.instrument.name,
+                    }}
+                    components={[
+                      <ExternalLink
+                        href={`/#/markets/${successorData?.id}`}
+                        key="link"
+                      >
+                        successor market name
+                      </ExternalLink>,
+                    ]}
+                  />
+                ) : (
+                  <Trans
+                    defaults="The successor market is <0>{{instrumentName}}</0>"
+                    values={{
+                      instrumentName:
+                        successorData?.tradableInstrument.instrument.name,
+                    }}
+                    components={[
+                      <ExternalLink
+                        href={`/#/markets/${successorData?.id}`}
+                        key="link"
+                      >
+                        successor market name
+                      </ExternalLink>,
+                    ]}
+                    ns={ns}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </NotificationBanner>
+    );
+  }
+  return null;
+};

apps/trading/components/market-banner/market-successor-proposal-banner.spec.tsx

@@ -1,77 +1,164 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import type { SingleExecutionResult } from '@apollo/client';
+import type { MockedResponse } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/react-testing';
 import { MarketSuccessorProposalBanner } from './market-successor-proposal-banner';
-import { ProposalState } from '@vegaprotocol/types';
+import type { MarketViewProposalsQuery } from '@vegaprotocol/proposals';
+import { MarketViewProposalsDocument } from '@vegaprotocol/proposals';
+import * as Types from '@vegaprotocol/types';
 
-const proposal = {
-  __typename: 'Proposal' as const,
-  id: 'proposal-1',
-  state: ProposalState.STATE_OPEN,
-  terms: {
-    __typename: 'ProposalTerms' as const,
-    closingDatetime: '2023-09-27',
-    enactmentDatetime: '2023-09-28',
-    change: {
-      __typename: 'NewMarket' as const,
-      instrument: {
-        name: 'New proposal of the market successor',
-      },
-      successorConfiguration: {
-        parentMarketId: 'marketId',
-      },
+const marketProposalMock: MockedResponse<MarketViewProposalsQuery> = {
+  request: {
+    query: MarketViewProposalsDocument,
+    variables: {
+      inState: Types.ProposalState.STATE_OPEN,
+      proposalType: Types.ProposalType.TYPE_NEW_MARKET,
     },
   },
-};
-const proposal2 = {
-  __typename: 'Proposal' as const,
-  id: 'proposal-2',
-  state: ProposalState.STATE_OPEN,
-  terms: {
-    __typename: 'ProposalTerms' as const,
-    closingDatetime: '2023-09-27',
-    enactmentDatetime: '2023-09-28',
-    change: {
-      __typename: 'NewMarket' as const,
-      instrument: {
-        name: 'New second proposal of the market successor',
-      },
-      successorConfiguration: {
-        parentMarketId: 'marketId',
+  result: {
+    data: {
+      proposalsConnection: {
+        edges: [
+          {
+            node: {
+              __typename: 'Proposal',
+              id: 'proposal-1',
+              state: Types.ProposalState.STATE_OPEN,
+              terms: {
+                __typename: 'ProposalTerms',
+                closingDatetime: '2023-09-27',
+                enactmentDatetime: '2023-09-28',
+                change: {
+                  __typename: 'NewMarket',
+                  instrument: {
+                    name: 'New proposal of the market successor',
+                  },
+                  successorConfiguration: {
+                    parentMarketId: 'marketId',
+                  },
+                },
+              },
+            },
+          },
+        ],
       },
     },
   },
 };
 
 describe('MarketSuccessorProposalBanner', () => {
-  it('should display single proposal', () => {
-    render(<MarketSuccessorProposalBanner proposals={[proposal]} />);
-
-    expect(
-      screen.getByText('A successor to this market has been proposed')
-    ).toBeInTheDocument();
-
-    expect(screen.getByRole('link')).toHaveAttribute(
-      'href',
-      expect.stringContaining(proposal.id)
+  it('should display single proposal', async () => {
+    render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
     );
+    await waitFor(() => {
+      expect(
+        screen.getByText('A successors to this market has been proposed')
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen
+        .getByRole('link')
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-1') ?? false
+    ).toBe(true);
+  });
+  it('should display plural proposals', async () => {
+    const dualProposalMock = {
+      ...marketProposalMock,
+      result: {
+        ...marketProposalMock.result,
+        data: {
+          proposalsConnection: {
+            edges: [
+              ...((
+                marketProposalMock?.result as SingleExecutionResult<MarketViewProposalsQuery>
+              )?.data?.proposalsConnection?.edges ?? []),
+              {
+                node: {
+                  __typename: 'Proposal',
+                  id: 'proposal-2',
+                  state: Types.ProposalState.STATE_OPEN,
+                  terms: {
+                    __typename: 'ProposalTerms',
+                    change: {
+                      __typename: 'NewMarket',
+                      instrument: {
+                        name: 'New second proposal of the market successor',
+                      },
+                      successorConfiguration: {
+                        parentMarketId: 'marketId',
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    };
+
+    render(
+      <MockedProvider mocks={[dualProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('Successors to this market have been proposed')
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen
+        .getAllByRole('link')[0]
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-1') ?? false
+    ).toBe(true);
+    expect(
+      screen
+        .getAllByRole('link')[1]
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-2') ?? false
+    ).toBe(true);
   });
 
-  it('should display plural proposals', () => {
-    const proposals = [proposal, proposal2];
-    render(<MarketSuccessorProposalBanner proposals={proposals} />);
-
-    expect(
-      screen.getByText('Successors to this market have been proposed')
-    ).toBeInTheDocument();
-
-    const links = screen.getAllByRole('link');
-    expect(links).toHaveLength(proposals.length);
-    expect(links[0]).toHaveAttribute(
-      'href',
-      expect.stringContaining(proposal.id)
+  it('banner should be hidden because no proposals', () => {
+    const { container } = render(
+      <MockedProvider>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
     );
-    expect(links[1]).toHaveAttribute(
-      'href',
-      expect.stringContaining(proposal2.id)
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('banner should be hidden because no proposals for the market', () => {
+    const { container } = render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="otherMarketId" />
+      </MockedProvider>
     );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('banner should be hidden after user close click', async () => {
+    const { container } = render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('A successors to this market has been proposed')
+      ).toBeInTheDocument();
+    });
+    await act(() => {
+      screen.getByTestId('notification-banner-close').click();
+    });
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement();
+    });
   });
 });

apps/trading/components/market-banner/market-successor-proposal-banner.tsx

@@ -1,51 +1,89 @@
-import { Fragment } from 'react';
-import { type MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { Fragment, useState } from 'react';
+import {
+  marketViewProposalsDataProvider,
+  type NewMarketSuccessorFieldsFragment,
+} from '@vegaprotocol/proposals';
+
+import {
+  ExternalLink,
+  Intent,
+  NotificationBanner,
+} from '@vegaprotocol/ui-toolkit';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import * as Types from '@vegaprotocol/types';
+import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useT } from '../../lib/use-t';
 
 export const MarketSuccessorProposalBanner = ({
-  proposals,
+  marketId,
 }: {
-  proposals: MarketViewProposalFieldsFragment[];
+  marketId?: string;
 }) => {
   const t = useT();
+  const { data: proposals } = useDataProvider({
+    dataProvider: marketViewProposalsDataProvider,
+    skip: !marketId,
+    variables: {
+      inState: Types.ProposalState.STATE_OPEN,
+      proposalType: Types.ProposalType.TYPE_NEW_MARKET,
+    },
+  });
+
+  const successors =
+    proposals?.filter((item) => {
+      if (item.terms.change.__typename === 'NewMarket') {
+        const newMarket = item.terms.change;
+        if (
+          newMarket.successorConfiguration?.parentMarketId === marketId &&
+          item.state === Types.ProposalState.STATE_OPEN
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }) ?? [];
+  const [visible, setVisible] = useState(true);
   const tokenLink = useLinks(DApp.Governance);
-
-  return (
-    <div>
-      <div className="uppercase mb-1">
-        {proposals.length === 1
-          ? t('A successor to this market has been proposed')
-          : t('Successors to this market have been proposed')}
-      </div>
-      <div>
-        {t(
-          'checkOutProposalsAndVote',
-          'Check out the terms of the proposals and vote:',
-          {
-            count: proposals.length,
-          }
-        )}{' '}
-        {proposals.map((item, i) => {
-          if (item.terms.change.__typename !== 'NewMarket') {
-            return null;
-          }
-
-          const externalLink = tokenLink(
-            TOKEN_PROPOSAL.replace(':id', item.id || '')
-          );
-
-          return (
-            <Fragment key={i}>
-              <ExternalLink href={externalLink} key={i}>
-                {item.terms.change.instrument.name}
-              </ExternalLink>
-              {i < proposals.length - 1 && ', '}
-            </Fragment>
-          );
-        })}
-      </div>
-    </div>
-  );
+  if (visible && successors.length) {
+    return (
+      <NotificationBanner
+        intent={Intent.Primary}
+        onClose={() => {
+          setVisible(false);
+        }}
+      >
+        <div className="uppercase mb-1">
+          {successors.length === 1
+            ? t('A successors to this market has been proposed')
+            : t('Successors to this market have been proposed')}
+        </div>
+        <div>
+          {t(
+            'checkOutProposalsAndVote',
+            'Check out the terms of the proposals and vote:',
+            {
+              count: successors.length,
+            }
+          )}{' '}
+          {successors.map((item, i) => {
+            const externalLink = tokenLink(
+              TOKEN_PROPOSAL.replace(':id', item.id || '')
+            );
+            return (
+              <Fragment key={i}>
+                <ExternalLink href={externalLink} key={i}>
+                  {
+                    (item.terms?.change as NewMarketSuccessorFieldsFragment)
+                      ?.instrument.name
+                  }
+                </ExternalLink>
+                {i < successors.length - 1 && ', '}
+              </Fragment>
+            );
+          })}
+        </div>
+      </NotificationBanner>
+    );
+  }
+  return null;
 };

apps/trading/components/market-banner/market-suspended-banner.tsx

@@ -1,6 +0,0 @@
-import { useT } from '../../lib/use-t';
-
-export const MarketSuspendedBanner = () => {
-  const t = useT();
-  return <p>{t('Market was suspended by governance')}</p>;
-};

apps/trading/components/market-banner/market-termination-banner.spec.tsx

@@ -0,0 +1,230 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import * as Types from '@vegaprotocol/types';
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import type { MarketViewProposalsQuery } from '@vegaprotocol/proposals';
+import { MarketViewProposalsDocument } from '@vegaprotocol/proposals';
+import type { Market } from '@vegaprotocol/markets';
+import { MarketTerminationBanner } from './market-termination-banner';
+
+const marketMock = {
+  id: 'market-1',
+  decimalPlaces: 3,
+  tradableInstrument: {
+    instrument: {
+      product: {
+        __typename: 'Future',
+        quoteName: 'tDAI',
+      },
+    },
+  },
+} as Market;
+
+const passedProposalMock: MockedResponse<MarketViewProposalsQuery> = {
+  request: {
+    query: MarketViewProposalsDocument,
+    variables: {
+      inState: Types.ProposalState.STATE_PASSED,
+      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
+    },
+  },
+  result: {
+    data: {
+      proposalsConnection: {
+        edges: [
+          {
+            node: {
+              id: '1',
+              state: Types.ProposalState.STATE_PASSED,
+              terms: {
+                closingDatetime: '2023-09-27T11:48:18Z',
+                enactmentDatetime: '2023-09-30T11:48:18',
+                change: {
+                  __typename: 'UpdateMarketState',
+                  updateType:
+                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
+                  price: '',
+                  market: {
+                    id: 'market-1',
+                    tradableInstrument: {
+                      instrument: {
+                        name: 'Market one name',
+                        code: 'Market one',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            node: {
+              id: '2',
+              state: Types.ProposalState.STATE_PASSED,
+              terms: {
+                closingDatetime: '2023-09-27T11:48:18Z',
+                enactmentDatetime: '2023-10-01T11:48:18',
+                change: {
+                  __typename: 'UpdateMarketState',
+                  updateType:
+                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
+                  price: '',
+                  market: {
+                    id: 'market-2',
+                    tradableInstrument: {
+                      instrument: {
+                        name: 'Market two name',
+                        code: 'Market two',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+const openProposalMock: MockedResponse<MarketViewProposalsQuery> = {
+  request: {
+    query: MarketViewProposalsDocument,
+    variables: {
+      inState: Types.ProposalState.STATE_OPEN,
+      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
+    },
+  },
+  result: {
+    data: {
+      proposalsConnection: {
+        edges: [
+          {
+            node: {
+              id: '3',
+              state: Types.ProposalState.STATE_OPEN,
+              terms: {
+                closingDatetime: '2023-09-27T11:48:18Z',
+                enactmentDatetime: '2023-10-01T11:48:18',
+                change: {
+                  __typename: 'UpdateMarketState',
+                  updateType:
+                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
+                  price: '',
+                  market: {
+                    id: 'market-3',
+                    tradableInstrument: {
+                      instrument: {
+                        name: 'Market three name',
+                        code: 'Market three',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            node: {
+              id: '4',
+              state: Types.ProposalState.STATE_OPEN,
+              terms: {
+                closingDatetime: '2023-09-27T11:48:18Z',
+                enactmentDatetime: '2023-10-11T11:48:18',
+                change: {
+                  __typename: 'UpdateMarketState',
+                  updateType:
+                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
+                  price: '',
+                  market: {
+                    id: 'market-3',
+                    tradableInstrument: {
+                      instrument: {
+                        name: 'Market three name',
+                        code: 'Market three',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            node: {
+              id: '5',
+              state: Types.ProposalState.STATE_OPEN,
+              terms: {
+                closingDatetime: '2023-09-27T11:48:18Z',
+                enactmentDatetime: '2023-10-01T11:48:18',
+                change: {
+                  __typename: 'UpdateMarketState',
+                  updateType:
+                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
+                  price: '',
+                  market: {
+                    id: 'market-4',
+                    tradableInstrument: {
+                      instrument: {
+                        name: 'Market four name',
+                        code: 'Market four',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+const mocks: MockedResponse[] = [passedProposalMock, openProposalMock];
+
+describe('MarketTerminationBanner', () => {
+  beforeAll(() => {
+    jest.useFakeTimers().setSystemTime(new Date('2023-09-28T10:10:10.000Z'));
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('should be properly rendered', async () => {
+    const { container } = render(
+      <MockedProvider mocks={mocks}>
+        <MarketTerminationBanner market={marketMock} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(container).not.toBeEmptyDOMElement();
+    });
+    expect(
+      screen.getByTestId('termination-warning-banner-market-1')
+    ).toBeInTheDocument();
+  });
+
+  it('should render link to proposals', async () => {
+    const { container } = render(
+      <MockedProvider mocks={mocks}>
+        <MarketTerminationBanner market={{ ...marketMock, id: 'market-3' }} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(container).not.toBeEmptyDOMElement();
+    });
+    expect(screen.getByText('View proposals')).toBeInTheDocument();
+  });
+
+  it('should render link to proposal', async () => {
+    const { container } = render(
+      <MockedProvider mocks={mocks}>
+        <MarketTerminationBanner market={{ ...marketMock, id: 'market-4' }} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(container).not.toBeEmptyDOMElement();
+    });
+    expect(screen.getByText('View proposal')).toBeInTheDocument();
+  });
+});

apps/trading/components/market-banner/market-termination-banner.tsx

@@ -1,120 +1,44 @@
-import { type ReactNode } from 'react';
-import sortBy from 'lodash/sortBy';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
 import { format, formatDuration, intervalToDuration } from 'date-fns';
-import { type MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { ProposalState } from '@vegaprotocol/types';
+import {
+  ExternalLink,
+  Intent,
+  NotificationBanner,
+} from '@vegaprotocol/ui-toolkit';
+import type { MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { marketViewProposalsDataProvider } from '@vegaprotocol/proposals';
+import * as Types from '@vegaprotocol/types';
+import type { Market } from '@vegaprotocol/markets';
+import { getQuoteName } from '@vegaprotocol/markets';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import sortBy from 'lodash/sortBy';
 import {
   DApp,
   TOKEN_PROPOSAL,
   TOKEN_PROPOSALS,
   useLinks,
 } from '@vegaprotocol/environment';
-import { getQuoteName, type Market } from '@vegaprotocol/markets';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useT } from '../../lib/use-t';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 
-export const MarketUpdateStateBanner = ({
-  market,
-  proposals,
-}: {
-  market: Market;
-  proposals: MarketViewProposalFieldsFragment[];
-}) => {
-  const t = useT();
-  const governanceLink = useLinks(DApp.Governance);
-
-  const openProposals = sortBy(
-    proposals.filter((p) => p.state === ProposalState.STATE_OPEN),
-    (p) => p.terms.enactmentDatetime
+const filterProposals = (
+  data: MarketViewProposalFieldsFragment[] | null,
+  marketId: string,
+  now: number
+) =>
+  sortBy(
+    (data || []).filter(
+      (item) =>
+        item.terms.change.__typename === 'UpdateMarketState' &&
+        item.terms.change.market.id === marketId &&
+        item.terms.change.updateType ===
+          Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE &&
+        item.terms.enactmentDatetime &&
+        new Date(item.terms.enactmentDatetime).getTime() > now
+    ),
+    (item) => item.terms.enactmentDatetime
   );
-  const passedProposals = sortBy(
-    proposals.filter((p) => p.state === ProposalState.STATE_PASSED),
-    (p) => p.terms.enactmentDatetime
-  );
-
-  if (!passedProposals.length && !openProposals.length) {
-    return null;
-  }
-
-  const name = market.tradableInstrument.instrument.code;
-  const assetSymbol = getQuoteName(market);
-
-  const proposalLink =
-    !passedProposals.length && openProposals[0]?.id
-      ? governanceLink(TOKEN_PROPOSAL.replace(':id', openProposals[0]?.id))
-      : undefined;
-
-  const proposalsLink =
-    openProposals.length > 1 ? governanceLink(TOKEN_PROPOSALS) : undefined;
-
-  let content: ReactNode;
-
-  if (passedProposals.length) {
-    const { date, duration, price } = getMessageVariables(passedProposals[0]);
-    content = (
-      <>
-        <p className="uppercase mb-1">
-          {t('Trading on market {{name}} will stop on {{date}}', {
-            name,
-            date,
-          })}
-        </p>
-        <p>
-          {t(
-            'You will no longer be able to hold a position on this market when it closes in {{duration}}.',
-            { duration }
-          )}{' '}
-          {price &&
-            assetSymbol &&
-            t('The final price will be {{price}} {{assetSymbol}}.', {
-              price: addDecimalsFormatNumber(price, market.decimalPlaces),
-              assetSymbol,
-            })}
-        </p>
-      </>
-    );
-  } else if (openProposals.length > 1) {
-    content = (
-      <>
-        <p className="uppercase mb-1">
-          {t(
-            'Trading on market {{name}} may stop. There are open proposals to close this market',
-            { name }
-          )}
-        </p>
-        <p>
-          <ExternalLink href={proposalsLink}>
-            {t('View proposals')}
-          </ExternalLink>
-        </p>
-      </>
-    );
-  } else {
-    const { date, price } = getMessageVariables(openProposals[0]);
-    content = (
-      <>
-        <p className="mb-1">
-          {t(
-            'Trading on market {{name}} may stop on {{date}}. There is an open proposal to close this market.',
-            { name, date }
-          )}
-        </p>
-        <p>
-          {price &&
-            assetSymbol &&
-            t('Proposed final price is {{price}} {{assetSymbol}}.', {
-              price: addDecimalsFormatNumber(price, market.decimalPlaces),
-              assetSymbol,
-            })}{' '}
-          <ExternalLink href={proposalLink}>{t('View proposal')}</ExternalLink>
-        </p>
-      </>
-    );
-  }
-
-  return <div data-testid={`update-state-banner-${market.id}`}>{content}</div>;
-};
 
 const getMessageVariables = (proposal: MarketViewProposalFieldsFragment) => {
   const enactmentDatetime = new Date(proposal.terms.enactmentDatetime);
@@ -138,3 +62,126 @@ const getMessageVariables = (proposal: MarketViewProposalFieldsFragment) => {
     price,
   };
 };
+
+export const MarketTerminationBanner = ({
+  market,
+}: {
+  market: Market | null;
+}) => {
+  const t = useT();
+  const [visible, setVisible] = useState(true);
+  const skip = !market || !visible;
+  const { data: passedProposalsData } = useDataProvider({
+    dataProvider: marketViewProposalsDataProvider,
+    skip,
+    variables: {
+      inState: Types.ProposalState.STATE_PASSED,
+      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
+    },
+  });
+
+  const { data: openProposalsData } = useDataProvider({
+    dataProvider: marketViewProposalsDataProvider,
+    skip,
+    variables: {
+      inState: Types.ProposalState.STATE_OPEN,
+      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
+    },
+  });
+
+  const governanceLink = useLinks(DApp.Governance);
+
+  if (!market) return null;
+  const now = Date.now();
+  const passedProposals = filterProposals(passedProposalsData, market.id, now);
+  const openProposals = filterProposals(openProposalsData, market.id, now);
+
+  const name = market.tradableInstrument.instrument.code;
+  if (!passedProposals.length && !openProposals.length) {
+    return null;
+  }
+
+  const assetSymbol = getQuoteName(market);
+  const proposalLink =
+    !passedProposals.length && openProposals[0]?.id
+      ? governanceLink(TOKEN_PROPOSAL.replace(':id', openProposals[0]?.id))
+      : undefined;
+  const proposalsLink =
+    openProposals.length > 1 ? governanceLink(TOKEN_PROPOSALS) : undefined;
+  let content: ReactNode;
+  if (passedProposals.length) {
+    const { date, duration, price } = getMessageVariables(passedProposals[0]);
+    content = (
+      <>
+        <div className="uppercase mb-1">
+          {t('Trading on Market {{name}} will stop on {{date}}', {
+            name,
+            date,
+          })}
+        </div>
+        <div>
+          {t(
+            'You will no longer be able to hold a position on this market when it closes in {{duration}}.',
+            { duration }
+          )}{' '}
+          {price &&
+            assetSymbol &&
+            t('The final price will be {{price}} {{assetSymbol}}.', {
+              price: addDecimalsFormatNumber(price, market.decimalPlaces),
+              assetSymbol,
+            })}
+        </div>
+      </>
+    );
+  } else if (openProposals.length > 1) {
+    content = (
+      <>
+        <div className="uppercase mb-1">
+          {t(
+            'Trading on Market {{name}} may stop. There are open proposals to close this market',
+            { name }
+          )}
+        </div>
+        <div>
+          <ExternalLink href={proposalsLink}>
+            {t('View proposals')}
+          </ExternalLink>
+        </div>
+      </>
+    );
+  } else {
+    const { date, price } = getMessageVariables(openProposals[0]);
+    content = (
+      <>
+        <div className="uppercase mb-1">
+          {t(
+            'Trading on Market {{name}} may stop on {{date}}. There is open proposal to close this market.',
+            { name, date }
+          )}
+        </div>
+        <div>
+          {price &&
+            assetSymbol &&
+            t('Proposed final price is {{price}} {{assetSymbol}}.', {
+              price: addDecimalsFormatNumber(price, market.decimalPlaces),
+              assetSymbol,
+            })}
+        </div>
+        <div>
+          <ExternalLink href={proposalLink}>{t('View proposal')}</ExternalLink>
+        </div>
+      </>
+    );
+  }
+  return (
+    <NotificationBanner
+      intent={openProposals.length ? Intent.Warning : Intent.Info}
+      onClose={() => {
+        setVisible(false);
+      }}
+      data-testid={`termination-warning-banner-${market.id}`}
+    >
+      {content}
+    </NotificationBanner>
+  );
+};

apps/trading/components/market-banner/market-update-banner.spec.tsx

@@ -1,84 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ProposalState } from '@vegaprotocol/types';
-import { MarketUpdateBanner } from './market-update-banner';
-import { type MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
-
-describe('MarketUpdateBanner', () => {
-  const change = {
-    __typename: 'UpdateMarket' as const,
-    marketId: 'update-market-id',
-  };
-
-  const openProposal = {
-    __typename: 'Proposal' as const,
-    id: 'proposal-1',
-    state: ProposalState.STATE_OPEN,
-    terms: {
-      __typename: 'ProposalTerms' as const,
-      closingDatetime: '2023-09-27',
-      enactmentDatetime: '2023-09-28',
-      change,
-    },
-  };
-  const passedProposal = {
-    __typename: 'Proposal' as const,
-    id: 'proposal-2',
-    state: ProposalState.STATE_PASSED,
-    terms: {
-      __typename: 'ProposalTerms' as const,
-      closingDatetime: '2023-09-27',
-      enactmentDatetime: '2023-09-28',
-      change,
-    },
-  };
-
-  it('renders content for a single open proposal', () => {
-    render(
-      <MarketUpdateBanner
-        proposals={[openProposal as MarketViewProposalFieldsFragment]}
-      />
-    );
-
-    expect(
-      screen.getByText(/^changes have been proposed/i)
-    ).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'View proposal' })).toHaveAttribute(
-      'href',
-      expect.stringContaining(openProposal.id as string)
-    );
-  });
-
-  it('renders content for a single passed proposal', () => {
-    render(
-      <MarketUpdateBanner
-        proposals={[passedProposal as MarketViewProposalFieldsFragment]}
-      />
-    );
-
-    expect(
-      screen.getByText(/^proposal set to change market/i)
-    ).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'View proposal' })).toHaveAttribute(
-      'href',
-      expect.stringContaining(passedProposal.id)
-    );
-  });
-
-  it('renders content for multiple passed proposals', () => {
-    const proposals = [
-      openProposal,
-      openProposal,
-    ] as MarketViewProposalFieldsFragment[];
-
-    render(<MarketUpdateBanner proposals={proposals} />);
-
-    expect(
-      screen.getByText(
-        new RegExp(`^There are ${proposals.length} open proposals`)
-      )
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('link', { name: 'View proposals' })
-    ).toHaveAttribute('href', expect.stringContaining('proposals'));
-  });
-});

apps/trading/components/market-banner/market-update-banner.tsx

@@ -1,71 +0,0 @@
-import sortBy from 'lodash/sortBy';
-import { format } from 'date-fns';
-import {
-  DApp,
-  TOKEN_PROPOSAL,
-  TOKEN_PROPOSALS,
-  useLinks,
-} from '@vegaprotocol/environment';
-import { type MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import { ProposalState } from '@vegaprotocol/types';
-import { useT } from '../../lib/use-t';
-
-export const MarketUpdateBanner = ({
-  proposals,
-}: {
-  proposals: MarketViewProposalFieldsFragment[];
-}) => {
-  const governanceLink = useLinks(DApp.Governance);
-  const t = useT();
-  const openProposals = sortBy(
-    proposals.filter((p) => p.state === ProposalState.STATE_OPEN),
-    (p) => p.terms.enactmentDatetime
-  );
-  const passedProposals = sortBy(
-    proposals.filter((p) => p.state === ProposalState.STATE_PASSED),
-    (p) => p.terms.enactmentDatetime
-  );
-
-  let content = null;
-
-  if (openProposals.length > 1) {
-    content = (
-      <p>
-        {t('There are {{count}} open proposals to change this market', {
-          count: openProposals.length,
-        })}
-        <ExternalLink href={governanceLink(TOKEN_PROPOSALS)}>
-          {t('View proposals')}
-        </ExternalLink>
-      </p>
-    );
-  } else if (passedProposals.length) {
-    const proposal = passedProposals[0];
-    const proposalLink = governanceLink(
-      TOKEN_PROPOSAL.replace(':id', proposal?.id || '')
-    );
-
-    content = (
-      <p>
-        {t('Proposal set to change market on {{date}}.', {
-          date: format(new Date(proposal.terms.enactmentDatetime), 'dd MMMM'),
-        })}
-        <ExternalLink href={proposalLink}>{t('View proposal')}</ExternalLink>,
-      </p>
-    );
-  } else {
-    const proposal = openProposals[0];
-    const proposalLink = governanceLink(
-      TOKEN_PROPOSAL.replace(':id', proposal?.id || '')
-    );
-    content = (
-      <p>
-        {t('Changes have been proposed for this market.')}{' '}
-        <ExternalLink href={proposalLink}>{t('View proposal')}</ExternalLink>
-      </p>
-    );
-  }
-
-  return <div data-testid="market-proposal-notification">{content}</div>;
-};

apps/trading/components/market-banner/use-market-proposals.ts

@@ -1,88 +0,0 @@
-import {
-  useMarketProposals,
-  type MarketViewProposalFieldsFragment,
-} from '@vegaprotocol/proposals';
-import { ProposalState, ProposalType } from '@vegaprotocol/types';
-
-const isPending = (p: MarketViewProposalFieldsFragment) => {
-  return [ProposalState.STATE_OPEN, ProposalState.STATE_PASSED].includes(
-    p.state
-  );
-};
-
-export const useUpdateMarketStateProposals = (
-  marketId: string,
-  inState?: ProposalState
-) => {
-  const { data, error, loading } = useMarketProposals({
-    proposalType: ProposalType.TYPE_UPDATE_MARKET_STATE,
-    inState,
-  });
-
-  const proposals = data
-    ? data.filter(isPending).filter((p) => {
-        const change = p.terms.change;
-
-        if (
-          change.__typename === 'UpdateMarketState' &&
-          change.market.id === marketId
-        ) {
-          return true;
-        }
-
-        return false;
-      })
-    : [];
-
-  return { data, error, loading, proposals };
-};
-
-export const useUpdateMarketProposals = (
-  marketId: string,
-  inState?: ProposalState
-) => {
-  const { data, error, loading } = useMarketProposals({
-    proposalType: ProposalType.TYPE_UPDATE_MARKET,
-    inState,
-  });
-
-  const proposals = data
-    ? data.filter(isPending).filter((p) => {
-        const change = p.terms.change;
-        if (
-          change.__typename === 'UpdateMarket' &&
-          change.marketId === marketId
-        ) {
-          return true;
-        }
-        return false;
-      })
-    : [];
-
-  return { data, error, loading, proposals };
-};
-
-export const useSuccessorMarketProposals = (
-  marketId: string,
-  inState?: ProposalState
-) => {
-  const { data, loading, error } = useMarketProposals({
-    proposalType: ProposalType.TYPE_NEW_MARKET,
-    inState,
-  });
-
-  const proposals = data
-    ? data.filter(isPending).filter((p) => {
-        const change = p.terms.change;
-        if (
-          change.__typename === 'NewMarket' &&
-          change.successorConfiguration?.parentMarketId === marketId
-        ) {
-          return true;
-        }
-        return false;
-      })
-    : [];
-
-  return { data, error, loading, proposals };
-};

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/orders-container/orders-container.spec.tsx

@@ -1,5 +1,9 @@
 import { act, renderHook } from '@testing-library/react';
-import { STORAGE_KEY, useOrderListGridState } from './orders-container';
+import {
+  FilterStatusValue,
+  STORAGE_KEY,
+  useOrderListGridState,
+} from './orders-container';
 import { Filter } from '@vegaprotocol/orders';
 import { OrderType } from '@vegaprotocol/types';
 
@@ -12,6 +16,31 @@ describe('useOrderListGridState', () => {
     return renderHook(() => useOrderListGridState(filter));
   };
 
+  it.each(Object.values(Filter))(
+    'providers correct AgGrid filter for %s',
+    (filter) => {
+      const { result } = setup(filter);
+      expect(typeof result.current.updateGridState).toBe('function');
+      expect(result.current.gridState).toEqual({
+        columnState: undefined,
+        filterModel: {
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
+      });
+    }
+  );
+
+  it('provides correct AgGrid filter for all', () => {
+    const { result } = setup(undefined);
+    expect(typeof result.current.updateGridState).toBe('function');
+    expect(result.current.gridState).toEqual({
+      columnState: undefined,
+      filterModel: undefined,
+    });
+  });
+
   it.each(Object.values(Filter))(
     'sets and stores column state and filters for %s',
     (filter) => {
@@ -30,7 +59,12 @@ describe('useOrderListGridState', () => {
 
       expect(result.current.gridState).toEqual({
         columnState: undefined,
-        filterModel,
+        filterModel: {
+          ...filterModel,
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
       });
 
       const columnState = [{ colId: 'status', width: 200 }];
@@ -43,7 +77,12 @@ describe('useOrderListGridState', () => {
 
       expect(result.current.gridState).toEqual({
         columnState,
-        filterModel,
+        filterModel: {
+          ...filterModel,
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
       });
 
       const storeKeyMap = {

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

@@ -9,7 +9,6 @@ import type { DataGridStore } from '../../stores/datagrid-store-slice';
 import { OrderStatus } from '@vegaprotocol/types';
 import { Links } from '../../lib/links';
 import { useT } from '../../lib/use-t';
-import { GridSettings } from '../grid-settings/grid-settings';
 
 const resolveNoRowsMessage = (
   filter: Filter | undefined,
@@ -39,24 +38,6 @@ export const FilterStatusValue = {
   [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
 };
 
-export const DefaultFilterModel = {
-  [Filter.Open]: {
-    status: {
-      value: FilterStatusValue[Filter.Open],
-    },
-  },
-  [Filter.Closed]: {
-    status: {
-      value: FilterStatusValue[Filter.Closed],
-    },
-  },
-  [Filter.Rejected]: {
-    status: {
-      value: FilterStatusValue[Filter.Rejected],
-    },
-  },
-};
-
 export interface OrderContainerProps {
   filter?: Filter;
 }
@@ -73,8 +54,7 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
     (newState) => {
       updateGridState(filter, newState);
     },
-    AUTO_SIZE_COLUMNS,
-    filter && DefaultFilterModel[filter]
+    AUTO_SIZE_COLUMNS
   );
 
   if (!pubKey) {
@@ -100,7 +80,7 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
 };
 
 export const STORAGE_KEY = 'vega_order_list_store';
-export const useOrderListStore = create<{
+const useOrderListStore = create<{
   open: DataGridStore;
   closed: DataGridStore;
   rejected: DataGridStore;
@@ -169,19 +149,34 @@ export const useOrderListGridState = (filter: Filter | undefined) => {
       case Filter.Open: {
         return {
           columnState: store.open.columnState,
-          filterModel: store.open.filterModel,
+          filterModel: {
+            ...store.open.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Open],
+            },
+          },
         };
       }
       case Filter.Closed: {
         return {
           columnState: store.closed.columnState,
-          filterModel: store.closed.filterModel,
+          filterModel: {
+            ...store.closed.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Closed],
+            },
+          },
         };
       }
       case Filter.Rejected: {
         return {
           columnState: store.rejected.columnState,
-          filterModel: store.rejected.filterModel,
+          filterModel: {
+            ...store.rejected.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Rejected],
+            },
+          },
         };
       }
       default: {
@@ -192,14 +187,3 @@ export const useOrderListGridState = (filter: Filter | undefined) => {
 
   return { gridState, updateGridState };
 };
-
-export const OrdersSettings = ({ filter }: { filter?: Filter }) => {
-  const updateGridState = useOrderListStore((state) => state.update);
-  return (
-    <GridSettings
-      updateGridStore={(gridStore: DataGridStore) =>
-        updateGridState(filter, gridStore)
-      }
-    />
-  );
-};

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

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

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

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

apps/trading/components/rewards-container/Rewards.graphql

@@ -2,19 +2,14 @@ query RewardsPage($partyId: ID!) {
   party(id: $partyId) {
     id
     vestingStats {
+      # AKA hoarder reward multiplier
       rewardBonusMultiplier
-      quantumBalance
-      epochSeq
     }
     activityStreak {
-      activeFor
-      isActive
-      inactiveFor
-      rewardDistributionMultiplier
+      # vesting multiplier
       rewardVestingMultiplier
-      epoch
-      tradedVolume
-      openVolume
+      # AKA streak multiplier
+      rewardDistributionMultiplier
     }
     vestingBalancesSummary {
       epoch
@@ -41,74 +36,6 @@ query RewardsPage($partyId: ID!) {
   }
 }
 
-query ActiveRewards(
-  $isReward: Boolean
-  $partyId: ID
-  $direction: TransferDirection
-  $pagination: Pagination
-) {
-  transfersConnection(
-    partyId: $partyId
-    isReward: $isReward
-    direction: $direction
-    pagination: $pagination
-  ) {
-    edges {
-      node {
-        transfer {
-          amount
-          id
-          from
-          fromAccountType
-          to
-          toAccountType
-          asset {
-            id
-            symbol
-            decimals
-            name
-            quantum
-            status
-          }
-          reference
-          status
-          timestamp
-          kind {
-            ... on RecurringTransfer {
-              startEpoch
-              endEpoch
-              dispatchStrategy {
-                dispatchMetric
-                dispatchMetricAssetId
-                marketIdsInScope
-                entityScope
-                individualScope
-                teamScope
-                nTopPerformers
-                stakingRequirement
-                notionalTimeWeightedAveragePositionRequirement
-                windowLength
-                lockPeriod
-                distributionStrategy
-                rankTable {
-                  startRank
-                  shareRatio
-                }
-              }
-            }
-          }
-          reason
-        }
-        fees {
-          transferId
-          amount
-          epoch
-        }
-      }
-    }
-  }
-}
-
 query RewardsHistory(
   $partyId: ID!
   $epochRewardSummariesPagination: Pagination
@@ -165,18 +92,3 @@ query RewardsEpoch {
     id
   }
 }
-
-query MarketForRewards($marketId: ID!) {
-  market(id: $marketId) {
-    tradableInstrument {
-      instrument {
-        id
-        name
-        code
-        metadata {
-          tags
-        }
-      }
-    }
-  }
-}

apps/trading/components/rewards-container/__generated__/Rewards.ts

@@ -8,17 +8,7 @@ export type RewardsPageQueryVariables = Types.Exact<{
 }>;
 
 
-export type RewardsPageQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, vestingStats?: { __typename?: 'PartyVestingStats', rewardBonusMultiplier: string, quantumBalance: string, epochSeq: number } | null, activityStreak?: { __typename?: 'PartyActivityStreak', activeFor: number, isActive: boolean, inactiveFor: number, rewardDistributionMultiplier: string, rewardVestingMultiplier: string, epoch: number, tradedVolume: string, openVolume: string } | null, vestingBalancesSummary: { __typename?: 'PartyVestingBalancesSummary', epoch?: number | null, vestingBalances?: Array<{ __typename?: 'PartyVestingBalance', balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null, lockedBalances?: Array<{ __typename?: 'PartyLockedBalance', balance: string, untilEpoch: number, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null } } | null };
-
-export type ActiveRewardsQueryVariables = Types.Exact<{
-  isReward?: Types.InputMaybe<Types.Scalars['Boolean']>;
-  partyId?: Types.InputMaybe<Types.Scalars['ID']>;
-  direction?: Types.InputMaybe<Types.TransferDirection>;
-  pagination?: Types.InputMaybe<Types.Pagination>;
-}>;
-
-
-export type ActiveRewardsQuery = { __typename?: 'Query', transfersConnection?: { __typename?: 'TransferConnection', edges?: Array<{ __typename?: 'TransferEdge', node: { __typename?: 'TransferNode', transfer: { __typename?: 'Transfer', amount: string, id: string, from: string, fromAccountType: Types.AccountType, to: string, toAccountType: Types.AccountType, reference?: string | null, status: Types.TransferStatus, timestamp: any, reason?: string | null, asset?: { __typename?: 'Asset', id: string, symbol: string, decimals: number, name: string, quantum: string, status: Types.AssetStatus } | null, kind: { __typename?: 'OneOffGovernanceTransfer' } | { __typename?: 'OneOffTransfer' } | { __typename?: 'RecurringGovernanceTransfer' } | { __typename?: 'RecurringTransfer', startEpoch: number, endEpoch?: number | null, dispatchStrategy?: { __typename?: 'DispatchStrategy', dispatchMetric: Types.DispatchMetric, dispatchMetricAssetId: string, marketIdsInScope?: Array<string> | null, entityScope: Types.EntityScope, individualScope?: Types.IndividualScope | null, teamScope?: Array<string | null> | null, nTopPerformers?: string | null, stakingRequirement: string, notionalTimeWeightedAveragePositionRequirement: string, windowLength: number, lockPeriod: number, distributionStrategy: Types.DistributionStrategy, rankTable?: Array<{ __typename?: 'RankTable', startRank: number, shareRatio: number } | null> | null } | null } }, fees?: Array<{ __typename?: 'TransferFee', transferId: string, amount: string, epoch: number } | null> | null } } | null> | null } | null };
+export type RewardsPageQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, vestingStats?: { __typename?: 'PartyVestingStats', rewardBonusMultiplier: string } | null, activityStreak?: { __typename?: 'PartyActivityStreak', rewardVestingMultiplier: string, rewardDistributionMultiplier: string } | null, vestingBalancesSummary: { __typename?: 'PartyVestingBalancesSummary', epoch?: number | null, vestingBalances?: Array<{ __typename?: 'PartyVestingBalance', balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null, lockedBalances?: Array<{ __typename?: 'PartyLockedBalance', balance: string, untilEpoch: number, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null } } | null };
 
 export type RewardsHistoryQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
@@ -36,13 +26,6 @@ export type RewardsEpochQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 export type RewardsEpochQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string } };
 
-export type MarketForRewardsQueryVariables = Types.Exact<{
-  marketId: Types.Scalars['ID'];
-}>;
-
-
-export type MarketForRewardsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null } } } } | null };
-
 
 export const RewardsPageDocument = gql`
     query RewardsPage($partyId: ID!) {
@@ -50,18 +33,10 @@ export const RewardsPageDocument = gql`
     id
     vestingStats {
       rewardBonusMultiplier
-      quantumBalance
-      epochSeq
     }
     activityStreak {
-      activeFor
-      isActive
-      inactiveFor
-      rewardDistributionMultiplier
       rewardVestingMultiplier
-      epoch
-      tradedVolume
-      openVolume
+      rewardDistributionMultiplier
     }
     vestingBalancesSummary {
       epoch
@@ -116,101 +91,6 @@ export function useRewardsPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOption
 export type RewardsPageQueryHookResult = ReturnType<typeof useRewardsPageQuery>;
 export type RewardsPageLazyQueryHookResult = ReturnType<typeof useRewardsPageLazyQuery>;
 export type RewardsPageQueryResult = Apollo.QueryResult<RewardsPageQuery, RewardsPageQueryVariables>;
-export const ActiveRewardsDocument = gql`
-    query ActiveRewards($isReward: Boolean, $partyId: ID, $direction: TransferDirection, $pagination: Pagination) {
-  transfersConnection(
-    partyId: $partyId
-    isReward: $isReward
-    direction: $direction
-    pagination: $pagination
-  ) {
-    edges {
-      node {
-        transfer {
-          amount
-          id
-          from
-          fromAccountType
-          to
-          toAccountType
-          asset {
-            id
-            symbol
-            decimals
-            name
-            quantum
-            status
-          }
-          reference
-          status
-          timestamp
-          kind {
-            ... on RecurringTransfer {
-              startEpoch
-              endEpoch
-              dispatchStrategy {
-                dispatchMetric
-                dispatchMetricAssetId
-                marketIdsInScope
-                entityScope
-                individualScope
-                teamScope
-                nTopPerformers
-                stakingRequirement
-                notionalTimeWeightedAveragePositionRequirement
-                windowLength
-                lockPeriod
-                distributionStrategy
-                rankTable {
-                  startRank
-                  shareRatio
-                }
-              }
-            }
-          }
-          reason
-        }
-        fees {
-          transferId
-          amount
-          epoch
-        }
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useActiveRewardsQuery__
- *
- * To run a query within a React component, call `useActiveRewardsQuery` and pass it any options that fit your needs.
- * When your component renders, `useActiveRewardsQuery` 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 } = useActiveRewardsQuery({
- *   variables: {
- *      isReward: // value for 'isReward'
- *      partyId: // value for 'partyId'
- *      direction: // value for 'direction'
- *      pagination: // value for 'pagination'
- *   },
- * });
- */
-export function useActiveRewardsQuery(baseOptions?: Apollo.QueryHookOptions<ActiveRewardsQuery, ActiveRewardsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ActiveRewardsQuery, ActiveRewardsQueryVariables>(ActiveRewardsDocument, options);
-      }
-export function useActiveRewardsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ActiveRewardsQuery, ActiveRewardsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ActiveRewardsQuery, ActiveRewardsQueryVariables>(ActiveRewardsDocument, options);
-        }
-export type ActiveRewardsQueryHookResult = ReturnType<typeof useActiveRewardsQuery>;
-export type ActiveRewardsLazyQueryHookResult = ReturnType<typeof useActiveRewardsLazyQuery>;
-export type ActiveRewardsQueryResult = Apollo.QueryResult<ActiveRewardsQuery, ActiveRewardsQueryVariables>;
 export const RewardsHistoryDocument = gql`
     query RewardsHistory($partyId: ID!, $epochRewardSummariesPagination: Pagination, $partyRewardsPagination: Pagination, $fromEpoch: Int, $toEpoch: Int) {
   epochRewardSummaries(
@@ -322,48 +202,4 @@ export function useRewardsEpochLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
         }
 export type RewardsEpochQueryHookResult = ReturnType<typeof useRewardsEpochQuery>;
 export type RewardsEpochLazyQueryHookResult = ReturnType<typeof useRewardsEpochLazyQuery>;
-export type RewardsEpochQueryResult = Apollo.QueryResult<RewardsEpochQuery, RewardsEpochQueryVariables>;
-export const MarketForRewardsDocument = gql`
-    query MarketForRewards($marketId: ID!) {
-  market(id: $marketId) {
-    tradableInstrument {
-      instrument {
-        id
-        name
-        code
-        metadata {
-          tags
-        }
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useMarketForRewardsQuery__
- *
- * To run a query within a React component, call `useMarketForRewardsQuery` and pass it any options that fit your needs.
- * When your component renders, `useMarketForRewardsQuery` 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 } = useMarketForRewardsQuery({
- *   variables: {
- *      marketId: // value for 'marketId'
- *   },
- * });
- */
-export function useMarketForRewardsQuery(baseOptions: Apollo.QueryHookOptions<MarketForRewardsQuery, MarketForRewardsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MarketForRewardsQuery, MarketForRewardsQueryVariables>(MarketForRewardsDocument, options);
-      }
-export function useMarketForRewardsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketForRewardsQuery, MarketForRewardsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MarketForRewardsQuery, MarketForRewardsQueryVariables>(MarketForRewardsDocument, options);
-        }
-export type MarketForRewardsQueryHookResult = ReturnType<typeof useMarketForRewardsQuery>;
-export type MarketForRewardsLazyQueryHookResult = ReturnType<typeof useMarketForRewardsLazyQuery>;
-export type MarketForRewardsQueryResult = Apollo.QueryResult<MarketForRewardsQuery, MarketForRewardsQueryVariables>;
+export type RewardsEpochQueryResult = Apollo.QueryResult<RewardsEpochQuery, RewardsEpochQueryVariables>;

apps/trading/components/rewards-container/active-rewards.spec.tsx

@@ -1,174 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import {
-  ActiveRewardCard,
-  applyFilter,
-  isActiveReward,
-} from './active-rewards';
-import {
-  AccountType,
-  AssetStatus,
-  DispatchMetric,
-  DistributionStrategy,
-  EntityScope,
-  IndividualScope,
-  type RecurringTransfer,
-  type TransferNode,
-  TransferStatus,
-  type Transfer,
-} from '@vegaprotocol/types';
-
-jest.mock('./__generated__/Rewards', () => ({
-  useMarketForRewardsQuery: () => ({
-    data: undefined,
-  }),
-}));
-
-jest.mock('@vegaprotocol/assets', () => ({
-  useAssetDataProvider: () => {
-    return {
-      data: {
-        assetId: 'asset-1',
-      },
-    };
-  },
-}));
-
-describe('ActiveRewards', () => {
-  const mockRecurringTransfer: RecurringTransfer = {
-    __typename: 'RecurringTransfer',
-    startEpoch: 115332,
-    endEpoch: 115432,
-    factor: '1',
-    dispatchStrategy: {
-      __typename: 'DispatchStrategy',
-      dispatchMetric: DispatchMetric.DISPATCH_METRIC_LP_FEES_RECEIVED,
-      dispatchMetricAssetId:
-        'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
-      marketIdsInScope: null,
-      entityScope: EntityScope.ENTITY_SCOPE_INDIVIDUALS,
-      individualScope: IndividualScope.INDIVIDUAL_SCOPE_ALL,
-      teamScope: null,
-      nTopPerformers: '',
-      stakingRequirement: '',
-      notionalTimeWeightedAveragePositionRequirement: '',
-      windowLength: 1,
-      lockPeriod: 0,
-      distributionStrategy: DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA,
-      rankTable: null,
-    },
-  };
-
-  const mockTransferNode: TransferNode = {
-    __typename: 'TransferNode',
-    transfer: {
-      __typename: 'Transfer',
-      amount: '1613000000',
-      id: 'c4e59bd389c8098e6c7669f2d3e1613b9f42d30b1c4c3793ac44380f4c522835',
-      from: '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',
-      fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-      to: 'network',
-      toAccountType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
-      asset: {
-        __typename: 'Asset',
-        id: 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
-        symbol: 'tUSDC',
-        decimals: 5,
-        name: 'tUSDC TEST',
-        quantum: '1',
-        status: AssetStatus.STATUS_ENABLED,
-        source: {
-          __typename: 'ERC20' as const,
-          contractAddress: '0x123',
-          lifetimeLimit: '100',
-          withdrawThreshold: '100',
-        },
-      },
-      reference: 'reward',
-      status: TransferStatus.STATUS_PENDING,
-      timestamp: '2023-12-18T13:05:35.948706Z',
-      kind: mockRecurringTransfer,
-      reason: null,
-    },
-    fees: [],
-  };
-
-  it('renders with valid props', () => {
-    render(
-      <ActiveRewardCard
-        transferNode={mockTransferNode}
-        currentEpoch={1}
-        kind={mockRecurringTransfer}
-      />
-    );
-
-    expect(
-      screen.getByText(/Liquidity provision fees received/i)
-    ).toBeInTheDocument();
-    expect(screen.getByText('Entity scope')).toBeInTheDocument();
-    expect(screen.getByText('Average position')).toBeInTheDocument();
-    expect(screen.getByText('Ends in')).toBeInTheDocument();
-    expect(screen.getByText('115431 epochs')).toBeInTheDocument();
-    expect(screen.getByText('Assessed over')).toBeInTheDocument();
-    expect(screen.getByText('1 epoch')).toBeInTheDocument();
-  });
-
-  describe('isActiveReward', () => {
-    it('returns true for valid active reward', () => {
-      const node = {
-        transfer: {
-          kind: {
-            __typename: 'RecurringTransfer',
-            dispatchStrategy: {},
-            endEpoch: 10,
-          },
-          status: TransferStatus.STATUS_PENDING,
-        },
-      } as TransferNode;
-      expect(isActiveReward(node, 5)).toBeTruthy();
-    });
-
-    it('returns false for invalid active reward', () => {
-      const node = {
-        transfer: {
-          kind: {
-            __typename: 'RecurringTransfer',
-            dispatchStrategy: {},
-            endEpoch: 10,
-          },
-          status: TransferStatus.STATUS_PENDING,
-        },
-      } as TransferNode;
-      expect(isActiveReward(node, 15)).toBeFalsy();
-    });
-  });
-
-  describe('applyFilter', () => {
-    it('returns true when filter matches dispatch metric label', () => {
-      const transfer = {
-        kind: {
-          __typename: 'RecurringTransfer',
-          dispatchStrategy: {
-            dispatchMetric: DispatchMetric.DISPATCH_METRIC_AVERAGE_POSITION,
-          },
-        },
-        asset: { symbol: 'XYZ' },
-      } as Transfer;
-      const filter = { searchTerm: 'average position' };
-      expect(applyFilter({ transfer }, filter)).toBeTruthy();
-    });
-
-    it('returns true when filter matches asset symbol', () => {
-      const transfer = {
-        kind: {
-          __typename: 'RecurringTransfer',
-          dispatchStrategy: {
-            dispatchMetric: DispatchMetric.DISPATCH_METRIC_AVERAGE_POSITION,
-          },
-        },
-        asset: { symbol: 'XYZ' },
-      } as Transfer;
-      const filter = { searchTerm: 'average position' };
-      expect(applyFilter({ transfer }, filter)).toBeTruthy();
-    });
-  });
-});

apps/trading/components/rewards-container/active-rewards.tsx

@@ -1,569 +0,0 @@
-import {
-  useActiveRewardsQuery,
-  useMarketForRewardsQuery,
-} from './__generated__/Rewards';
-import { useT } from '../../lib/use-t';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-import classNames from 'classnames';
-import {
-  Icon,
-  type IconName,
-  Intent,
-  Tooltip,
-  VegaIcon,
-  VegaIconNames,
-  type VegaIconSize,
-  TradingInput,
-} from '@vegaprotocol/ui-toolkit';
-import { IconNames } from '@blueprintjs/icons';
-import {
-  DistributionStrategyDescriptionMapping,
-  DistributionStrategyMapping,
-  EntityScope,
-  EntityScopeMapping,
-  type Maybe,
-  type Transfer,
-  type TransferNode,
-  TransferStatus,
-  TransferStatusMapping,
-  DispatchMetric,
-  DispatchMetricDescription,
-  DispatchMetricLabels,
-  type RecurringTransfer,
-  EntityScopeLabelMapping,
-} from '@vegaprotocol/types';
-import { Card } from '../card/card';
-import { useMemo, useState } from 'react';
-import {
-  type AssetFieldsFragment,
-  useAssetDataProvider,
-  useAssetsMapProvider,
-} from '@vegaprotocol/assets';
-import {
-  type MarketFieldsFragment,
-  useMarketsMapProvider,
-} from '@vegaprotocol/markets';
-
-export type Filter = {
-  searchTerm: string;
-};
-
-export const isActiveReward = (node: TransferNode, currentEpoch: number) => {
-  const { transfer } = node;
-  if (transfer.kind.__typename !== 'RecurringTransfer') {
-    return false;
-  }
-  const { dispatchStrategy } = transfer.kind;
-
-  if (!dispatchStrategy) {
-    return false;
-  }
-
-  if (transfer.kind.endEpoch && transfer.kind.endEpoch < currentEpoch) {
-    return false;
-  }
-
-  if (transfer.status !== TransferStatus.STATUS_PENDING) {
-    return false;
-  }
-
-  return true;
-};
-
-export const applyFilter = (
-  node: TransferNode & {
-    asset?: AssetFieldsFragment | null;
-    marketIds?: (MarketFieldsFragment | null)[];
-  },
-  filter: Filter
-) => {
-  const { transfer } = node;
-  if (
-    transfer.kind.__typename !== 'RecurringTransfer' ||
-    !transfer.kind.dispatchStrategy?.dispatchMetric
-  ) {
-    return false;
-  }
-  if (
-    DispatchMetricLabels[transfer.kind.dispatchStrategy.dispatchMetric]
-      .toLowerCase()
-      .includes(filter.searchTerm.toLowerCase()) ||
-    transfer.asset?.symbol
-      .toLowerCase()
-      .includes(filter.searchTerm.toLowerCase()) ||
-    EntityScopeLabelMapping[transfer.kind.dispatchStrategy.entityScope]
-      .toLowerCase()
-      .includes(filter.searchTerm.toLowerCase()) ||
-    node.asset?.name
-      .toLocaleLowerCase()
-      .includes(filter.searchTerm.toLowerCase()) ||
-    node.marketIds?.some((m) =>
-      m?.tradableInstrument?.instrument?.name
-        .toLocaleLowerCase()
-        .includes(filter.searchTerm.toLowerCase())
-    )
-  ) {
-    return true;
-  }
-  return false;
-};
-
-export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
-  const t = useT();
-  const { data: activeRewardsData } = useActiveRewardsQuery({
-    variables: {
-      isReward: true,
-    },
-  });
-
-  const [filter, setFilter] = useState<Filter>({
-    searchTerm: '',
-  });
-
-  const { data: assets } = useAssetsMapProvider();
-  const { data: markets } = useMarketsMapProvider();
-
-  const transfers = activeRewardsData?.transfersConnection?.edges
-    ?.map((e) => e?.node as TransferNode)
-    .filter((node) => isActiveReward(node, currentEpoch))
-    .map((node) => {
-      if (node.transfer.kind.__typename !== 'RecurringTransfer') {
-        return node;
-      }
-
-      const asset =
-        assets &&
-        assets[
-          node.transfer.kind.dispatchStrategy?.dispatchMetricAssetId || ''
-        ];
-
-      const marketIds =
-        node.transfer.kind.dispatchStrategy?.marketIdsInScope?.map(
-          (id) => markets && markets[id]
-        );
-
-      return { ...node, asset, marketIds };
-    });
-
-  if (!transfers || !transfers.length) return null;
-
-  return (
-    <Card title={t('Active rewards')} className="lg:col-span-full">
-      <div className="">
-        {transfers.length > 1 && (
-          <TradingInput
-            onChange={(e) =>
-              setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
-            }
-            value={filter.searchTerm}
-            type="text"
-            placeholder={t(
-              'Search by reward dispatch metric, entity scope or asset name'
-            )}
-            data-testid="search-term"
-            className="mb-4 w-20"
-            prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
-          />
-        )}
-        <div className="grid gap-x-8 gap-y-10 h-fit grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(343px,_1fr))] max-h-[40rem] overflow-auto">
-          {transfers
-            .filter((n) => applyFilter(n, filter))
-            .map((node, i) => {
-              const { transfer } = node;
-              if (
-                transfer.kind.__typename !== 'RecurringTransfer' ||
-                !transfer.kind.dispatchStrategy?.dispatchMetric
-              ) {
-                return null;
-              }
-
-              return (
-                node && (
-                  <ActiveRewardCard
-                    key={i}
-                    transferNode={node}
-                    kind={transfer.kind}
-                    currentEpoch={currentEpoch}
-                  />
-                )
-              );
-            })}
-        </div>
-      </div>
-    </Card>
-  );
-};
-
-// This was built to be a status indicator for the rewards based on the transfer status
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StatusIndicator = ({
-  status,
-  reason,
-}: {
-  status: TransferStatus;
-  reason?: Maybe<string> | undefined;
-}) => {
-  const t = useT();
-  const getIconIntent = (status: string) => {
-    switch (status) {
-      case TransferStatus.STATUS_DONE:
-        return { icon: IconNames.TICK_CIRCLE, intent: Intent.Success };
-      case TransferStatus.STATUS_CANCELLED:
-        return { icon: IconNames.MOON, intent: Intent.None };
-      case TransferStatus.STATUS_PENDING:
-        return { icon: IconNames.HELP, intent: Intent.Primary };
-      case TransferStatus.STATUS_REJECTED:
-        return { icon: IconNames.ERROR, intent: Intent.Danger };
-      case TransferStatus.STATUS_STOPPED:
-        return { icon: IconNames.ERROR, intent: Intent.Danger };
-      default:
-        return { icon: IconNames.HELP, intent: Intent.Primary };
-    }
-  };
-  const { icon, intent } = getIconIntent(status);
-  return (
-    <Tooltip
-      description={
-        <span>
-          {t('Transfer status: {{status}} {{reason}}', {
-            status: TransferStatusMapping[status],
-            reason: reason ? `(${reason})` : '',
-          })}
-        </span>
-      }
-    >
-      <span
-        className={classNames(
-          {
-            'text-gray-700 dark:text-gray-300': intent === Intent.None,
-            'text-vega-blue': intent === Intent.Primary,
-            'text-vega-green dark:text-vega-green': intent === Intent.Success,
-            'dark:text-yellow text-yellow-600': intent === Intent.Warning,
-            'text-vega-red': intent === Intent.Danger,
-          },
-          'flex items-start p-1 align-text-bottom'
-        )}
-      >
-        <Icon size={3} name={icon as IconName} />
-      </span>
-    </Tooltip>
-  );
-};
-
-export const ActiveRewardCard = ({
-  transferNode,
-  currentEpoch,
-  kind,
-}: {
-  transferNode: TransferNode;
-  currentEpoch: number;
-  kind: RecurringTransfer;
-}) => {
-  const t = useT();
-
-  const { transfer } = transferNode;
-  const { dispatchStrategy } = kind;
-  const marketIds = dispatchStrategy?.marketIdsInScope;
-
-  const { data: marketNameData } = useMarketForRewardsQuery({
-    variables: {
-      marketId: marketIds ? marketIds[0] : '',
-    },
-  });
-
-  const marketName = useMemo(() => {
-    if (marketNameData && marketIds && marketIds.length > 1) {
-      return 'Specific markets';
-    } else if (
-      marketNameData &&
-      marketIds &&
-      marketNameData &&
-      marketIds.length === 1
-    ) {
-      return marketNameData?.market?.tradableInstrument?.instrument?.name || '';
-    }
-    return '';
-  }, [marketIds, marketNameData]);
-
-  const { data: dispatchAsset } = useAssetDataProvider(
-    dispatchStrategy?.dispatchMetricAssetId || ''
-  );
-
-  if (!dispatchStrategy) {
-    return null;
-  }
-
-  const { gradientClassName, mainClassName } = getGradientClasses(
-    dispatchStrategy.dispatchMetric
-  );
-
-  const entityScope = dispatchStrategy.entityScope;
-  return (
-    <div>
-      <div
-        className={classNames(
-          'bg-gradient-to-r col-span-full p-0.5 lg:col-auto h-full',
-          'rounded-lg',
-          gradientClassName
-        )}
-      >
-        <div
-          className={classNames(
-            mainClassName,
-            'bg-gradient-to-b bg-vega-clight-800 dark:bg-vega-cdark-800 h-full w-full rounded p-4 flex flex-col gap-4'
-          )}
-        >
-          <div className="flex justify-between gap-4">
-            <div className="flex flex-col gap-2 items-center text-center">
-              <EntityIcon transfer={transfer} />
-              {entityScope && (
-                <span className="text-muted text-xs">
-                  {EntityScopeLabelMapping[entityScope] || t('Unspecified')}
-                </span>
-              )}
-            </div>
-
-            <div className="flex flex-col gap-2 items-center text-center">
-              <h3 className="flex flex-col gap-1 text-2xl shrink-1 text-center">
-                <span className="font-glitch">
-                  {addDecimalsFormatNumber(
-                    transferNode.transfer.amount,
-                    transferNode.transfer.asset?.decimals || 0,
-                    6
-                  )}
-                </span>
-
-                <span className="font-alpha">
-                  {transferNode.transfer.asset?.symbol}
-                </span>
-              </h3>
-              {
-                <Tooltip
-                  description={t(
-                    DistributionStrategyDescriptionMapping[
-                      dispatchStrategy.distributionStrategy
-                    ]
-                  )}
-                  underline={true}
-                >
-                  <span className="text-xs">
-                    {
-                      DistributionStrategyMapping[
-                        dispatchStrategy.distributionStrategy
-                      ]
-                    }
-                  </span>
-                </Tooltip>
-              }
-            </div>
-
-            <div className="flex flex-col gap-2 items-center text-center">
-              <CardIcon
-                iconName={VegaIconNames.LOCK}
-                tooltip={t(
-                  'Number of epochs after distribution to delay vesting of rewards by'
-                )}
-              />
-              <span className="text-muted text-xs whitespace-nowrap">
-                {t('numberEpochs', '{{count}} epochs', {
-                  count: kind.dispatchStrategy?.lockPeriod,
-                })}
-              </span>
-            </div>
-          </div>
-
-          <span className="border-[0.5px] border-gray-700" />
-          <span>
-            {DispatchMetricLabels[dispatchStrategy.dispatchMetric]}
-            {marketName ? ` • ${marketName}` : ` • ${dispatchAsset?.name}`}
-          </span>
-
-          <div className="flex items-center gap-8 flex-wrap">
-            {kind.endEpoch && (
-              <span className="flex flex-col">
-                <span className="text-muted text-xs">{t('Ends in')}</span>
-                <span>
-                  {t('numberEpochs', '{{count}} epochs', {
-                    count: kind.endEpoch - currentEpoch,
-                  })}
-                </span>
-              </span>
-            )}
-
-            {
-              <span className="flex flex-col">
-                <span className="text-muted text-xs">{t('Assessed over')}</span>
-                <span>
-                  {t('numberEpochs', '{{count}} epochs', {
-                    count: dispatchStrategy.windowLength,
-                  })}
-                </span>
-              </span>
-            }
-          </div>
-
-          {dispatchStrategy?.dispatchMetric && (
-            <span className="text-muted text-sm h-[2rem]">
-              {t(DispatchMetricDescription[dispatchStrategy?.dispatchMetric])}
-            </span>
-          )}
-
-          <span className="border-[0.5px] border-gray-700" />
-
-          <div className="flex justify-between flex-wrap items-center gap-3 text-xs">
-            <span className="flex flex-col gap-1">
-              <span className="flex items-center gap-1 text-muted">
-                {t('Entity scope')}{' '}
-              </span>
-
-              <span className="flex items-center gap-1">
-                {kind.dispatchStrategy?.teamScope && (
-                  <Tooltip
-                    description={
-                      <span>{kind.dispatchStrategy?.teamScope}</span>
-                    }
-                  >
-                    <span className="flex items-center p-1 rounded-full border border-gray-600">
-                      {<VegaIcon name={VegaIconNames.TEAM} size={16} />}
-                    </span>
-                  </Tooltip>
-                )}
-                {kind.dispatchStrategy?.individualScope && (
-                  <Tooltip
-                    description={
-                      <span>{kind.dispatchStrategy?.individualScope}</span>
-                    }
-                  >
-                    <span className="flex items-center p-1 rounded-full border border-gray-600">
-                      {<VegaIcon name={VegaIconNames.MAN} size={16} />}
-                    </span>
-                  </Tooltip>
-                )}
-                {/* Shows transfer status */}
-                {/* <StatusIndicator
-                  status={transfer.status}
-                  reason={transfer.reason}
-                /> */}
-              </span>
-            </span>
-
-            <span className="flex flex-col gap-1">
-              <span className="flex items-center gap-1 text-muted">
-                {t('Staked VEGA')}{' '}
-              </span>
-              <span className="flex items-center gap-1">
-                {addDecimalsFormatNumber(
-                  kind.dispatchStrategy?.stakingRequirement || 0,
-                  transfer.asset?.decimals || 0
-                )}
-              </span>
-            </span>
-
-            <span className="flex flex-col gap-1">
-              <span className="flex items-center gap-1 text-muted">
-                {t('Average position')}{' '}
-              </span>
-              <span className="flex items-center gap-1">
-                {addDecimalsFormatNumber(
-                  kind.dispatchStrategy
-                    ?.notionalTimeWeightedAveragePositionRequirement || 0,
-                  transfer.asset?.decimals || 0
-                )}
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const getGradientClasses = (d: DispatchMetric | undefined) => {
-  switch (d) {
-    case DispatchMetric.DISPATCH_METRIC_AVERAGE_POSITION:
-      return {
-        gradientClassName: 'from-vega-pink-500 to-vega-purple-400',
-        mainClassName: 'from-vega-pink-400 dark:from-vega-pink-600 to-20%',
-      };
-    case DispatchMetric.DISPATCH_METRIC_LP_FEES_RECEIVED:
-      return {
-        gradientClassName: 'from-vega-green-500 to-vega-yellow-500',
-        mainClassName: 'from-vega-green-400 dark:from-vega-green-600 to-20%',
-      };
-    case DispatchMetric.DISPATCH_METRIC_MAKER_FEES_PAID:
-      return {
-        gradientClassName: 'from-vega-orange-500 to-vega-pink-400',
-        mainClassName: 'from-vega-orange-400 dark:from-vega-orange-600 to-20%',
-      };
-    case DispatchMetric.DISPATCH_METRIC_MARKET_VALUE:
-    case DispatchMetric.DISPATCH_METRIC_RELATIVE_RETURN:
-      return {
-        gradientClassName: 'from-vega-purple-500 to-vega-blue-400',
-        mainClassName: 'from-vega-purple-400 dark:from-vega-purple-600 to-20%',
-      };
-    case DispatchMetric.DISPATCH_METRIC_RETURN_VOLATILITY:
-      return {
-        gradientClassName: 'from-vega-blue-500 to-vega-green-400',
-        mainClassName: 'from-vega-blue-400 dark:from-vega-blue-600 to-20%',
-      };
-    case DispatchMetric.DISPATCH_METRIC_VALIDATOR_RANKING:
-    default:
-      return {
-        gradientClassName: 'from-vega-pink-500 to-vega-purple-400',
-        mainClassName: 'from-vega-pink-400 dark:from-vega-pink-600 to-20%',
-      };
-  }
-};
-
-const CardIcon = ({
-  size = 18,
-  iconName,
-  tooltip,
-}: {
-  size?: VegaIconSize;
-  iconName: VegaIconNames;
-  tooltip: string;
-}) => {
-  return (
-    <Tooltip description={<span>{tooltip}</span>}>
-      <span className="flex items-center p-2 rounded-full border border-gray-600">
-        <VegaIcon name={iconName} size={size} />
-      </span>
-    </Tooltip>
-  );
-};
-
-const EntityIcon = ({
-  transfer,
-  size = 18,
-}: {
-  transfer: Transfer;
-  size?: VegaIconSize;
-}) => {
-  if (transfer.kind.__typename !== 'RecurringTransfer') {
-    return null;
-  }
-  const entityScope = transfer.kind.dispatchStrategy?.entityScope;
-  const getIconName = () => {
-    switch (entityScope) {
-      case EntityScope.ENTITY_SCOPE_TEAMS:
-        return VegaIconNames.TEAM;
-      case EntityScope.ENTITY_SCOPE_INDIVIDUALS:
-        return VegaIconNames.MAN;
-      default:
-        return VegaIconNames.QUESTION_MARK;
-    }
-  };
-  const iconName = getIconName();
-  return (
-    <Tooltip
-      description={
-        <span>{entityScope ? EntityScopeMapping[entityScope] : ''}</span>
-      }
-    >
-      <span className="flex items-center p-2 rounded-full border border-gray-600">
-        {iconName && <VegaIcon name={iconName} size={size} />}
-      </span>
-    </Tooltip>
-  );
-};