chore: fix lint

CODEOWNERS

@@ -1,2 +1,3 @@
 * @vegaprotocol/frontend
+* @vegaprotocol/frontend-qa
 *.graphql @vegaprotocol/core

apps/explorer/src/app/app.tsx

@@ -1,6 +1,6 @@
 import {
+  AppFailure,
   NetworkLoader,
-  NodeFailure,
   NodeGuard,
   NodeSwitcherDialog,
   useEnvironment,
@@ -31,7 +31,7 @@ function App() {
       <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
         <NodeGuard
           skeleton={<div>{t('Loading')}</div>}
-          failure={<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+          failure={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
         >
           <Suspense fallback={splashLoading}>
             <RouterProvider router={router} fallbackElement={splashLoading} />

apps/explorer/src/app/routes/layout.tsx

@@ -133,7 +133,7 @@ export const ErrorBoundary = () => {
   );
 };
 
-export const GHOST = (
+const GHOST = (
   <svg
     width="56"
     height="85"

apps/explorer/src/app/routes/restricted/index.tsx

@@ -1,108 +0,0 @@
-import { BackgroundVideo } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-
-const RestrictedPage = () => {
-  const errorTitle = '451 Unavailable';
-  const errorMessage =
-    'Due to uncertainty about the legal and regulatory status of the content hosted on this site, it is not available to visitors in your jurisdiction.';
-
-  return (
-    <div>
-      <BackgroundVideo className="brightness-50" />
-      <div
-        className={classNames(
-          'max-w-[620px] p-2 mt-[10vh]',
-          'mx-auto my-0',
-          'antialiased text-white',
-          'overflow-hidden relative',
-          'flex flex-col gap-2'
-        )}
-      >
-        <div className="flex gap-4">
-          <div>{GHOST}</div>
-          <h1 className="text-[2.7rem] font-alpha calt break-words uppercase">
-            {errorTitle}
-          </h1>
-        </div>
-        <div className="text-sm mt-10 overflow-auto font-mono">
-          {errorMessage}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const GHOST = (
-  <svg
-    width="56"
-    height="85"
-    viewBox="0 0 150 234"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.43 93.6821L0 104.097V172.435H5.13793V106.2L14.0779 97.3247L10.43 93.6821Z"
-      fill="black"
-    />
-    <path d="M105.328 18.521H7.70703V172.435H105.328V18.521Z" fill="white" />
-    <path d="M38.5364 64.6953H33.3984V69.8258H38.5364V64.6953Z" fill="black" />
-    <path d="M43.6731 69.8257H38.5352V74.9561H43.6731V69.8257Z" fill="black" />
-    <path d="M48.8098 74.9561H43.6719V80.0865H48.8098V74.9561Z" fill="black" />
-    <path d="M38.5364 74.9561H33.3984V80.0865H38.5364V74.9561Z" fill="black" />
-    <path d="M48.8098 64.6953H43.6719V69.8258H48.8098V64.6953Z" fill="black" />
-    <path d="M69.3606 64.6953H64.2227V69.8258H69.3606V64.6953Z" fill="black" />
-    <path d="M74.5012 69.8257H69.3633V74.9561H74.5012V69.8257Z" fill="black" />
-    <path d="M79.6379 74.9561H74.5V80.0865H79.6379V74.9561Z" fill="black" />
-    <path d="M69.3606 74.9561H64.2227V80.0865H69.3606V74.9561Z" fill="black" />
-    <path d="M79.6379 64.6953H74.5V69.8258H79.6379V64.6953Z" fill="black" />
-    <path d="M79.6398 90.3477H33.3984V95.4781H79.6398V90.3477Z" fill="black" />
-    <path d="M48.8098 172.435H43.6719V234H48.8098V172.435Z" fill="black" />
-    <path d="M69.3606 172.435H64.2227V234H69.3606V172.435Z" fill="black" />
-    <path
-      d="M129.87 0.00408026L92.0273 14.3682L111.195 64.7203L149.038 50.3562L129.87 0.00408026Z"
-      fill="#FF0081"
-    />
-    <path
-      d="M108.565 21.7836L103.762 23.6064L105.587 28.4024L110.39 26.5795L108.565 21.7836Z"
-      fill="white"
-    />
-    <path
-      d="M115.189 24.7596L110.387 26.583L112.213 31.3785L117.015 29.5551L115.189 24.7596Z"
-      fill="white"
-    />
-    <path
-      d="M121.826 27.7348L117.023 29.5576L118.849 34.3536L123.652 32.5307L121.826 27.7348Z"
-      fill="white"
-    />
-    <path
-      d="M128.447 30.7059L123.645 32.5293L125.471 37.3247L130.273 35.5014L128.447 30.7059Z"
-      fill="white"
-    />
-    <path
-      d="M135.084 33.6854L130.281 35.5083L132.107 40.3043L136.91 38.4814L135.084 33.6854Z"
-      fill="white"
-    />
-    <path
-      d="M124.799 21.1156L119.996 22.939L121.822 27.7344L126.625 25.911L124.799 21.1156Z"
-      fill="white"
-    />
-    <path
-      d="M127.775 14.492L122.973 16.3154L124.799 21.1109L129.601 19.2875L127.775 14.492Z"
-      fill="white"
-    />
-    <path
-      d="M118.838 34.3499L114.035 36.1733L115.861 40.9688L120.664 39.1454L118.838 34.3499Z"
-      fill="white"
-    />
-    <path
-      d="M115.857 40.9691L111.055 42.7925L112.881 47.5879L117.683 45.7645L115.857 40.9691Z"
-      fill="white"
-    />
-    <path
-      d="M129.938 52.3822L139.906 91.5276L100.703 101.429L101.988 106.406L146.174 95.2215L134.922 51.0996L129.938 52.3822Z"
-      fill="black"
-    />
-  </svg>
-);
-
-export default RestrictedPage;

apps/explorer/src/app/routes/route-names.tsx

@@ -1,6 +1,5 @@
 export const Routes = {
   HOME: '/',
-  RESTRICTED: '/restricted',
   TX: 'txs',
   BLOCKS: 'blocks',
   PARTIES: 'parties',

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

@@ -30,7 +30,6 @@ import { remove0x } from '@vegaprotocol/utils';
 import { PartyAccountsByAsset } from './parties/id/accounts';
 import { Disclaimer } from './pages/disclaimer';
 import { FLAGS } from '@vegaprotocol/environment';
-import RestrictedPage from './restricted';
 
 export type Navigable = {
   path: string;
@@ -357,14 +356,6 @@ export const routerConfig: Route[] = [
       ...validators,
     ],
   },
-  {
-    path: Routes.RESTRICTED,
-    element: <RestrictedPage />,
-    handle: {
-      name: t('Restricted'),
-      text: t('Restricted'),
-    },
-  },
 ];
 
 export const router = createBrowserRouter(routerConfig);

apps/governance/src/app.tsx

@@ -38,10 +38,10 @@ import {
   NetworkLoader,
   useInitializeEnv,
   NodeGuard,
+  AppFailure,
   NodeSwitcherDialog,
   useNodeSwitcherStore,
   DocsLinks,
-  NodeFailure,
 } from '@vegaprotocol/environment';
 import { ENV } from './config';
 import type { InMemoryCacheConfig } from '@apollo/client';
@@ -106,7 +106,6 @@ const Web3Container = ({
     useEthWithdrawApprovalsManager();
     return null;
   };
-
   const [connectors, initializeConnectors] = useWeb3ConnectStore((store) => [
     store.connectors,
     store.initialize,
@@ -185,7 +184,7 @@ const Web3Container = ({
                     <TemplateSidebar sidebar={sideBar}>
                       <AppRouter />
                     </TemplateSidebar>
-                    <footer className="p-4 break-all border-t border-neutral-700">
+                    <footer className="p-4 border-t border-neutral-700 break-all">
                       <NetworkInfo />
                     </footer>
                   </AppLayout>
@@ -240,9 +239,6 @@ const AppContainer = () => {
     store.setDialogOpen,
   ]);
 
-  // Hacky skip all the loading & web3 init for geo restricted users
-  const isRestricted = document?.location?.pathname?.includes('/restricted');
-
   useEffect(() => {
     if (ENV.dsn && telemetryOn === 'true') {
       Sentry.init({
@@ -308,14 +304,6 @@ const AppContainer = () => {
     }
   }, [GIT_COMMIT_HASH, GIT_BRANCH, VEGA_ENV, telemetryOn]);
 
-  if (isRestricted) {
-    return (
-      <Router>
-        <AppRouter />
-      </Router>
-    );
-  }
-
   return (
     <Router>
       <ScrollToTop />
@@ -324,7 +312,7 @@ const AppContainer = () => {
           <NodeGuard
             skeleton={<div>{t('Loading')}</div>}
             failure={
-              <NodeFailure title={t('NodeUnsuitable', { url: VEGA_URL })} />
+              <AppFailure title={t('NodeUnsuitable', { url: VEGA_URL })} />
             }
           >
             <AsyncRenderer<EthereumConfig | null>

apps/governance/src/i18n/translations/dev.json

@@ -9,7 +9,6 @@
   "pageTitleRedemptionTranche": "Redeem from Tranche",
   "pageTitleTranches": "Vesting tranches",
   "pageTitle404": "Page not found",
-  "pageTitle451": "451 unavailable",
   "pageTitleNotPermitted": "Can not proceed!",
   "pageTitleDisassociate": "Disassociate $VEGA tokens from a Vega key",
   "pageTitleProposals": "Proposals",
@@ -719,8 +718,6 @@
   "UpdateAssetProposal": "Update asset proposal",
   "NewFreeformProposal": "New freeform proposal",
   "NewRawProposal": "New proposal",
-  "NewTransferProposal": "New transfer proposal",
-  "CancelTransferProposal": "Cancel transfer proposal",
   "MARKET_STATE_UPDATE_TYPE_RESUME": "Resume market",
   "MARKET_STATE_UPDATE_TYPE_SUSPEND": "Suspend market",
   "MARKET_STATE_UPDATE_TYPE_TERMINATE": "Terminate market",
@@ -741,8 +738,6 @@
   "UpdateVolumeDiscountProgram": "Update volume discount program",
   "NewAsset": "New asset",
   "UpdateAsset": "Update asset",
-  "NewTransfer": "New transfer",
-  "CancelTransfer": "Cancel transfer",
   "AssetID": "Asset ID",
   "Freeform": "Freeform",
   "RawProposal": "Let me choose (raw proposal)",
@@ -919,31 +914,5 @@
   "EndOfProgramTimestamp": "End of program",
   "EndOfProgramTimestampDescription": "Time after which when the current epoch ends, the programs will end and benefits will be disabled.",
   "BenefitTierVolumeDiscountFactor": "Volume discount factor",
-  "BenefitTierVolumeDiscountFactorDescription": "Discount given to those in this benefit tier",
+  "BenefitTierVolumeDiscountFactorDescription": "Discount given to those in this benefit tier"
-  "ACCOUNT_TYPE_INSURANCE": "Insurance account",
-  "ACCOUNT_TYPE_GLOBAL_INSURANCE": "Global insurance account",
-  "ACCOUNT_TYPE_SETTLEMENT": "Settlement account",
-  "ACCOUNT_TYPE_MARGIN": "Margin account ",
-  "ACCOUNT_TYPE_GENERAL": "General account",
-  "ACCOUNT_TYPE_FEES_INFRASTRUCTURE": "Infrastructure fees account",
-  "ACCOUNT_TYPE_FEES_LIQUIDITY": "Liquidity fees account",
-  "ACCOUNT_TYPE_FEES_MAKER": "Maker fees account",
-  "ACCOUNT_TYPE_BOND": "Bond account",
-  "ACCOUNT_TYPE_EXTERNAL": "External account",
-  "ACCOUNT_TYPE_GLOBAL_REWARD": "Global reward account",
-  "ACCOUNT_TYPE_PENDING_TRANSFERS": "Pending transfers account",
-  "ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES": "Maker paid fees reward account",
-  "ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES": "Maker received fees reward account",
-  "ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES": "Liquidity provider received fees reward account",
-  "ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS": "Market proposers reward account",
-  "ACCOUNT_TYPE_HOLDING": "Holding account",
-  "ACCOUNT_TYPE_LP_LIQUIDITY_FEES": "Liquidity provider fees account",
-  "ACCOUNT_TYPE_NETWORK_TREASURY": "Network treasury account",
-  "ACCOUNT_TYPE_VESTING_REWARDS": "Vesting rewards account",
-  "ACCOUNT_TYPE_VESTED_REWARDS": "Vested rewards account",
-  "ACCOUNT_TYPE_REWARD_AVERAGE_POSITION": "Average position reward account",
-  "ACCOUNT_TYPE_REWARD_RELATIVE_RETURN": "Relative return reward account",
-  "ACCOUNT_TYPE_REWARD_RETURN_VOLATILITY": "Return volatility reward account",
-  "ACCOUNT_TYPE_REWARD_VALIDATOR_RANKING": "Validator ranking reward account",
-  "ACCOUNT_TYPE_PENDING_FEE_REFERRAL_REWARD": "Pending fee referral reward account"
 }

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

@@ -12,19 +12,18 @@ import {
   generateProposal,
   generateYesVotes,
 } from '../../test-helpers/generate-proposals';
-import { ProposalHeader, NewTransferSummary } from './proposal-header';
+import { ProposalHeader } from './proposal-header';
 import {
   lastWeek,
   nextWeek,
   mockWalletContext,
   createUserVoteQueryMock,
 } from '../../test-helpers/mocks';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { MockedResponse } from '@apollo/client/testing';
 import { FLAGS } from '@vegaprotocol/environment';
 import { BrowserRouter } from 'react-router-dom';
 import { VoteState } from '../vote-details/use-user-vote';
-import { useNewTransferProposalDetails } from '@vegaprotocol/proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { MockedResponse } from '@apollo/client/testing';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ...jest.requireActual('@vegaprotocol/proposals'),
@@ -32,7 +31,6 @@ jest.mock('@vegaprotocol/proposals', () => ({
     code: 'PARENT_CODE',
     parentMarketId: 'PARENT_ID',
   }),
-  useNewTransferProposalDetails: jest.fn(),
 }));
 
 const renderComponent = (
@@ -420,78 +418,3 @@ describe('Proposal header', () => {
     expect(await screen.findByTestId('user-voted-yes')).toBeInTheDocument();
   });
 });
-
-jest.mock('@vegaprotocol/proposals');
-
-describe('<NewTransferSummary />', () => {
-  it('renders null if no details are provided', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue(null);
-    const { container } = render(<NewTransferSummary proposalId="1" />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('handles OneOffGovernanceTransfer', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: { __typename: 'OneOffGovernanceTransfer', deliverOn: null },
-      source: '0x123',
-      sourceType: 'wallet',
-      destination: '0x456',
-      destinationType: 'contract',
-    });
-    const { getByText } = render(<NewTransferSummary proposalId="1" />);
-    const textMatch = (content: string) => content.includes('One off transfer');
-    expect(getByText(textMatch)).toBeInTheDocument();
-  });
-
-  it('handles RecurringGovernanceTransfer', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: {
-        __typename: 'RecurringGovernanceTransfer',
-        startEpoch: 1,
-        endEpoch: 5,
-      },
-      source: '0x123',
-      sourceType: 'wallet',
-      destination: '0x456',
-      destinationType: 'contract',
-    });
-    const { getByText } = render(<NewTransferSummary proposalId="1" />);
-    const textMatch = (content: string) =>
-      content.includes('Recurring transfer');
-    expect(getByText(textMatch)).toBeInTheDocument();
-  });
-
-  it('should fallback to translated sourceType when source is not set', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: {
-        __typename: 'RecurringGovernanceTransfer',
-        startEpoch: 1,
-        endEpoch: 5,
-      },
-      source: undefined,
-      sourceType: 'ACCOUNT_TYPE_GENERAL',
-      destination: '0x456',
-      destinationType: 'ACCOUNT_TYPE_GENERAL',
-    });
-
-    render(<NewTransferSummary proposalId="1" />);
-    expect(screen.getByText('General account')).toBeInTheDocument();
-  });
-
-  it('should fallback to translated destinationType when destination is not set', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: {
-        __typename: 'RecurringGovernanceTransfer',
-        startEpoch: 1,
-        endEpoch: 5,
-      },
-      source: '0x123',
-      sourceType: 'ACCOUNT_TYPE_GENERAL',
-      destination: undefined,
-      destinationType: 'ACCOUNT_TYPE_GLOBAL_INSURANCE',
-    });
-
-    render(<NewTransferSummary proposalId="1" />);
-    expect(screen.getByText('Global insurance account')).toBeInTheDocument();
-  });
-});

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

@@ -237,11 +237,7 @@ export const ProposalHeader = ({
   );
 };
 
-export const SuccessorCode = ({
+const SuccessorCode = ({ proposalId }: { proposalId?: string | null }) => {
-  proposalId,
-}: {
-  proposalId?: string | null;
-}) => {
   const { t } = useTranslation();
   const successor = useSuccessorMarketProposalDetails(proposalId);
 
@@ -258,11 +254,7 @@ export const SuccessorCode = ({
   ) : null;
 };
 
-export const NewTransferSummary = ({
+const NewTransferSummary = ({ proposalId }: { proposalId?: string | null }) => {
-  proposalId,
-}: {
-  proposalId?: string | null;
-}) => {
   const { t } = useTranslation();
   const details = useNewTransferProposalDetails(proposalId);
 
@@ -271,23 +263,13 @@ export const NewTransferSummary = ({
   return (
     <span>
       {GovernanceTransferKindMapping[details.kind.__typename]}{' '}
-      {t('transfer from')}{' '}
+      {t('transfer from')} <Lozenge>{truncateMiddle(details.source)}</Lozenge>{' '}
-      <Lozenge>
+      {t('to')} <Lozenge>{truncateMiddle(details.destination)}</Lozenge>
-        {details.source
-          ? truncateMiddle(details.source)
-          : t(details.sourceType)}
-      </Lozenge>{' '}
-      {t('to')}{' '}
-      <Lozenge>
-        {details.destination
-          ? truncateMiddle(details.destination)
-          : t(details.destinationType)}
-      </Lozenge>
     </span>
   );
 };
 
-export const CancelTransferSummary = ({
+const CancelTransferSummary = ({
   proposalId,
 }: {
   proposalId?: string | null;

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

@@ -63,42 +63,44 @@ const mockReferralProposal = generateProposal({
   terms: {
     change: {
       __typename: 'UpdateReferralProgram',
-      benefitTiers: [
+      changes: {
-        {
+        benefitTiers: [
-          minimumEpochs: 6,
+          {
-          minimumRunningNotionalTakerVolume: '10000',
+            minimumEpochs: 6,
-          referralDiscountFactor: '0.001',
+            minimumRunningNotionalTakerVolume: '10000',
-          referralRewardFactor: '0.001',
+            referralDiscountFactor: '0.001',
-        },
+            referralRewardFactor: '0.001',
-        {
+          },
-          minimumEpochs: 24,
+          {
-          minimumRunningNotionalTakerVolume: '500000',
+            minimumEpochs: 24,
-          referralDiscountFactor: '0.005',
+            minimumRunningNotionalTakerVolume: '500000',
-          referralRewardFactor: '0.005',
+            referralDiscountFactor: '0.005',
-        },
+            referralRewardFactor: '0.005',
-        {
+          },
-          minimumEpochs: 48,
+          {
-          minimumRunningNotionalTakerVolume: '1000000',
+            minimumEpochs: 48,
-          referralDiscountFactor: '0.01',
+            minimumRunningNotionalTakerVolume: '1000000',
-          referralRewardFactor: '0.01',
+            referralDiscountFactor: '0.01',
-        },
+            referralRewardFactor: '0.01',
-      ],
+          },
-      endOfProgram: '2026-10-03T10:34:34Z',
+        ],
-      windowLength: 3,
+        endOfProgramTimestamp: '2026-10-03T10:34:34Z',
-      stakingTiers: [
+        windowLength: 3,
-        {
+        stakingTiers: [
-          minimumStakedTokens: '1',
+          {
-          referralRewardMultiplier: '1',
+            minimumStakedTokens: '1',
-        },
+            referralRewardMultiplier: '1',
-        {
+          },
-          minimumStakedTokens: '2',
+          {
-          referralRewardMultiplier: '2',
+            minimumStakedTokens: '2',
-        },
+            referralRewardMultiplier: '2',
-        {
+          },
-          minimumStakedTokens: '5',
+          {
-          referralRewardMultiplier: '3',
+            minimumStakedTokens: '5',
-        },
+            referralRewardMultiplier: '3',
-      ],
+          },
+        ],
+      },
     },
   },
 });
@@ -130,6 +132,7 @@ describe('<ProposalReferralProgramDetails />', () => {
       terms: {
         change: {
           __typename: 'UpdateReferralProgram',
+          changes: {},
         },
       },
     });

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

@@ -54,10 +54,11 @@ export const ProposalReferralProgramDetails = ({
     return null;
   }
 
-  const benefitTiers = proposal?.terms?.change?.benefitTiers;
+  const benefitTiers = proposal?.terms?.change?.changes?.benefitTiers;
-  const stakingTiers = proposal?.terms?.change?.stakingTiers;
+  const stakingTiers = proposal?.terms?.change?.changes?.stakingTiers;
-  const windowLength = proposal?.terms?.change?.windowLength;
+  const windowLength = proposal?.terms?.change?.changes?.windowLength;
-  const endOfProgramTimestamp = proposal?.terms?.change?.endOfProgram;
+  const endOfProgramTimestamp =
+    proposal?.terms?.change?.changes?.endOfProgramTimestamp;
 
   if (
     !benefitTiers &&

apps/governance/src/routes/proposals/hooks/use-proposal-network-params.ts

@@ -30,8 +30,6 @@ export const useProposalNetworkParams = ({
     NetworkParams.governance_proposal_freeform_requiredParticipation,
     NetworkParams.governance_proposal_VolumeDiscountProgram_requiredMajority,
     NetworkParams.governance_proposal_VolumeDiscountProgram_requiredParticipation,
-    NetworkParams.governance_proposal_transfer_requiredParticipation,
-    NetworkParams.governance_proposal_transfer_requiredMajority,
   ]);
 
   const fallback = {
@@ -113,14 +111,6 @@ export const useProposalNetworkParams = ({
           params.governance_proposal_VolumeDiscountProgram_requiredParticipation
         ),
       };
-    case 'NewTransfer':
-    case 'CancelTransfer':
-      return {
-        requiredMajority: params.governance_proposal_transfer_requiredMajority,
-        requiredParticipation: new BigNumber(
-          params.governance_proposal_transfer_requiredParticipation
-        ),
-      };
     default:
       return fallback;
   }

apps/governance/src/routes/proposals/proposal/Proposal.graphql

@@ -47,17 +47,19 @@ fragment UpdateReferralProgram on Proposal {
   terms {
     change {
       ... on UpdateReferralProgram {
-        benefitTiers {
+        changes {
-          minimumEpochs
+          benefitTiers {
-          minimumRunningNotionalTakerVolume
+            minimumEpochs
-          referralDiscountFactor
+            minimumRunningNotionalTakerVolume
-          referralRewardFactor
+            referralDiscountFactor
-        }
+            referralRewardFactor
-        endOfProgram: endOfProgramTimestamp
+          }
-        windowLength
+          endOfProgramTimestamp
-        stakingTiers {
+          windowLength
-          minimumStakedTokens
+          stakingTiers {
-          referralRewardMultiplier
+            minimumStakedTokens
+            referralRewardMultiplier
+          }
         }
       }
     }

apps/governance/src/routes/proposals/proposals/Proposals.graphql

@@ -47,17 +47,19 @@ fragment UpdateReferralPrograms on Proposal {
   terms {
     change {
       ... on UpdateReferralProgram {
-        benefitTiers {
+        changes {
-          minimumEpochs
+          benefitTiers {
-          minimumRunningNotionalTakerVolume
+            minimumEpochs
-          referralDiscountFactor
+            minimumRunningNotionalTakerVolume
-          referralRewardFactor
+            referralDiscountFactor
-        }
+            referralRewardFactor
-        endOfProgram: endOfProgramTimestamp
+          }
-        windowLength
+          endOfProgramTimestamp
-        stakingTiers {
+          windowLength
-          minimumStakedTokens
+          stakingTiers {
-          referralRewardMultiplier
+            minimumStakedTokens
+            referralRewardMultiplier
+          }
         }
       }
     }

apps/governance/src/routes/proposals/proposals/__generated__/Proposals.ts

@@ -7,7 +7,7 @@ export type NewMarketProductFieldsFragment = { __typename?: 'Proposal', terms: {
 
 export type UpdateMarketStatesFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
 
-export type UpdateReferralProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: string, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
+export type UpdateReferralProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram', changes: { __typename?: 'ReferralProgram', endOfProgramTimestamp: string, windowLength: number, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
 
 export type UpdateVolumeDiscountProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } } };
 
@@ -21,7 +21,7 @@ export type ProposalsQueryVariables = Types.Exact<{
 }>;
 
 
-export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null, product?: { __typename: 'FutureProduct' } | { __typename: 'PerpetualProduct' } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: string, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
+export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null, product?: { __typename: 'FutureProduct' } | { __typename: 'PerpetualProduct' } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', changes: { __typename?: 'ReferralProgram', endOfProgramTimestamp: string, windowLength: number, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
 
 export const NewMarketProductFieldsFragmentDoc = gql`
     fragment NewMarketProductFields on Proposal {
@@ -75,17 +75,19 @@ export const UpdateReferralProgramsFragmentDoc = gql`
   terms {
     change {
       ... on UpdateReferralProgram {
-        benefitTiers {
+        changes {
-          minimumEpochs
+          benefitTiers {
-          minimumRunningNotionalTakerVolume
+            minimumEpochs
-          referralDiscountFactor
+            minimumRunningNotionalTakerVolume
-          referralRewardFactor
+            referralDiscountFactor
-        }
+            referralRewardFactor
-        endOfProgram: endOfProgramTimestamp
+          }
-        windowLength
+          endOfProgramTimestamp
-        stakingTiers {
+          windowLength
-          minimumStakedTokens
+          stakingTiers {
-          referralRewardMultiplier
+            minimumStakedTokens
+            referralRewardMultiplier
+          }
         }
       }
     }

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

@@ -1,112 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import type { RouteChildProps } from '..';
-import { BackgroundVideo } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-
-const Restricted = ({ name }: RouteChildProps) => {
-  useDocumentTitle(name);
-  const { t } = useTranslation();
-  const errorMessage =
-    'Due to uncertainty about the legal and regulatory status of the content hosted on this site, it is not available to visitors in your jurisdiction.';
-
-  return (
-    <div>
-      <BackgroundVideo className="brightness-50" />
-      <div
-        className={classNames(
-          'max-w-[620px] p-2 mt-[10vh]',
-          'mx-auto my-0',
-          'antialiased text-white',
-          'overflow-hidden relative',
-          'flex flex-col gap-2'
-        )}
-      >
-        <div className="flex gap-4">
-          <div>{GHOST}</div>
-          <h1 className="leading-relaxed  mb-0 text-[2.7rem] font-alpha calt break-words uppercase">
-            {t('pageTitle451')}
-          </h1>
-        </div>
-        <div className="text-sm mt-10 overflow-auto font-mono">
-          {errorMessage}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const GHOST = (
-  <svg
-    width="56"
-    height="85"
-    viewBox="0 0 150 234"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.43 93.6821L0 104.097V172.435H5.13793V106.2L14.0779 97.3247L10.43 93.6821Z"
-      fill="black"
-    />
-    <path d="M105.328 18.521H7.70703V172.435H105.328V18.521Z" fill="white" />
-    <path d="M38.5364 64.6953H33.3984V69.8258H38.5364V64.6953Z" fill="black" />
-    <path d="M43.6731 69.8257H38.5352V74.9561H43.6731V69.8257Z" fill="black" />
-    <path d="M48.8098 74.9561H43.6719V80.0865H48.8098V74.9561Z" fill="black" />
-    <path d="M38.5364 74.9561H33.3984V80.0865H38.5364V74.9561Z" fill="black" />
-    <path d="M48.8098 64.6953H43.6719V69.8258H48.8098V64.6953Z" fill="black" />
-    <path d="M69.3606 64.6953H64.2227V69.8258H69.3606V64.6953Z" fill="black" />
-    <path d="M74.5012 69.8257H69.3633V74.9561H74.5012V69.8257Z" fill="black" />
-    <path d="M79.6379 74.9561H74.5V80.0865H79.6379V74.9561Z" fill="black" />
-    <path d="M69.3606 74.9561H64.2227V80.0865H69.3606V74.9561Z" fill="black" />
-    <path d="M79.6379 64.6953H74.5V69.8258H79.6379V64.6953Z" fill="black" />
-    <path d="M79.6398 90.3477H33.3984V95.4781H79.6398V90.3477Z" fill="black" />
-    <path d="M48.8098 172.435H43.6719V234H48.8098V172.435Z" fill="black" />
-    <path d="M69.3606 172.435H64.2227V234H69.3606V172.435Z" fill="black" />
-    <path
-      d="M129.87 0.00408026L92.0273 14.3682L111.195 64.7203L149.038 50.3562L129.87 0.00408026Z"
-      fill="#FF0081"
-    />
-    <path
-      d="M108.565 21.7836L103.762 23.6064L105.587 28.4024L110.39 26.5795L108.565 21.7836Z"
-      fill="white"
-    />
-    <path
-      d="M115.189 24.7596L110.387 26.583L112.213 31.3785L117.015 29.5551L115.189 24.7596Z"
-      fill="white"
-    />
-    <path
-      d="M121.826 27.7348L117.023 29.5576L118.849 34.3536L123.652 32.5307L121.826 27.7348Z"
-      fill="white"
-    />
-    <path
-      d="M128.447 30.7059L123.645 32.5293L125.471 37.3247L130.273 35.5014L128.447 30.7059Z"
-      fill="white"
-    />
-    <path
-      d="M135.084 33.6854L130.281 35.5083L132.107 40.3043L136.91 38.4814L135.084 33.6854Z"
-      fill="white"
-    />
-    <path
-      d="M124.799 21.1156L119.996 22.939L121.822 27.7344L126.625 25.911L124.799 21.1156Z"
-      fill="white"
-    />
-    <path
-      d="M127.775 14.492L122.973 16.3154L124.799 21.1109L129.601 19.2875L127.775 14.492Z"
-      fill="white"
-    />
-    <path
-      d="M118.838 34.3499L114.035 36.1733L115.861 40.9688L120.664 39.1454L118.838 34.3499Z"
-      fill="white"
-    />
-    <path
-      d="M115.857 40.9691L111.055 42.7925L112.881 47.5879L117.683 45.7645L115.857 40.9691Z"
-      fill="white"
-    />
-    <path
-      d="M129.938 52.3822L139.906 91.5276L100.703 101.429L101.988 106.406L146.174 95.2215L134.922 51.0996L129.938 52.3822Z"
-      fill="black"
-    />
-  </svg>
-);
-
-export default Restricted;

apps/governance/src/routes/router-config.tsx

@@ -4,7 +4,6 @@ import Home from './token';
 import NotFound from './not-found';
 import NotPermitted from './not-permitted';
 import Routes from './routes';
-import Restricted from './restricted';
 
 const LazyTranches = React.lazy(
   () =>
@@ -361,14 +360,9 @@ const routerConfig = [
     path: Routes.DISCLAIMER,
     element: <LazyDisclaimer name="Disclaimer" />,
   },
-  {
-    path: Routes.RESTRICTED,
-    // Not lazy as loaded when a user first hits the site
-    element: <Restricted name="451 Unavailable" />,
-  },
   {
     path: '*',
-    // Also not lazy as loaded when a user first hits the site
+    // Not lazy as loaded when a user first hits the site
     element: <NotFound name="NotFound" />,
   },
   ...redirects,

apps/governance/src/routes/routes.ts

@@ -7,7 +7,6 @@ const Routes = {
   PROPOSALS_REJECTED: '/proposals/rejected',
   PROTOCOL_UPGRADES: '/protocol-upgrades',
   NOT_PERMITTED: '/not-permitted',
-  RESTRICTED: '/restricted',
   NOT_FOUND: '/not-found',
   CONTRACTS: '/contracts',
   TOKEN: '/token',
@@ -34,10 +33,6 @@ export const TOP_LEVEL_ROUTES = [
     name: 'Rewards',
     path: Routes.REWARDS,
   },
-  {
-    name: 'Restricted',
-    path: Routes.RESTRICTED,
-  },
 ];
 
 export const TOKEN_DROPDOWN_ROUTES = [

apps/trading-e2e/src/integration/deposit.cy.ts

@@ -0,0 +1,201 @@
+import { removeDecimal } from '@vegaprotocol/cypress';
+import { ethers } from 'ethers';
+import { connectEthereumWallet } from '../support/ethereum-wallet';
+import { selectAsset } from '../support/helpers';
+
+const assetSelectField = 'select[name="asset"]';
+const toAddressField = 'input[name="to"]';
+const amountField = 'input[name="amount"]';
+const formFieldError = 'input-error-text';
+
+const ASSET_EURO = 1;
+
+describe('deposit form validation', { tags: '@smoke' }, () => {
+  function openDepositForm() {
+    cy.mockWeb3Provider();
+    cy.mockSubscription();
+    cy.mockTradingPage();
+    cy.setVegaWallet();
+    cy.visit('/#/portfolio');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('deposit-button').click();
+    connectEthereumWallet('MetaMask');
+    cy.wait('@Assets');
+  }
+
+  before(() => {
+    openDepositForm();
+  });
+
+  it('handles empty fields', () => {
+    cy.getByTestId('deposit-submit').click();
+    cy.getByTestId(formFieldError).should('contain.text', 'Required');
+    // once Ethereum wallet is connected and key selected the only field that will
+    // error is the asset select
+    cy.getByTestId(formFieldError).should('have.length', 1);
+    cy.get('[data-testid="input-error-text"][aria-describedby="asset"]').should(
+      'have.length',
+      1
+    );
+  });
+
+  it('unable to select assets not enabled', () => {
+    // Assets not enabled in mocks
+    cy.get(assetSelectField + ' option:contains(Asset 2)').should('not.exist');
+    cy.get(assetSelectField + ' option:contains(Asset 3)').should('not.exist');
+    cy.get(assetSelectField + ' option:contains(Asset 4)').should('not.exist');
+  });
+
+  it('invalid public key when entering address manually', () => {
+    cy.getByTestId('enter-pubkey-manually').click();
+    cy.get(toAddressField).clear().type('INVALID_DEPOSIT_TO_ADDRESS');
+    cy.get(`[data-testid="${formFieldError}"][aria-describedby="to"]`).should(
+      'have.text',
+      'Invalid Vega key'
+    );
+  });
+
+  it('invalid amount', () => {
+    mockWeb3DepositCalls({
+      allowance: '1000',
+      depositLifetimeLimit: '1000',
+      balance: '800',
+      deposited: '0',
+      dps: 5,
+    });
+    // Deposit amount smaller than minimum viable for selected asset
+    // Select an amount so that we have a known decimal places value to work with
+    selectAsset(ASSET_EURO);
+
+    cy.get(amountField)
+      .clear()
+      .type('0.00000000000000000000000000000000001')
+      .next(`[data-testid="${formFieldError}"]`)
+      .should('have.text', 'Value is below minimum');
+  });
+
+  it('insufficient funds', () => {
+    // 1001-DEPO-004
+    mockWeb3DepositCalls({
+      allowance: '1000',
+      depositLifetimeLimit: '1000',
+      balance: '800',
+      deposited: '0',
+      dps: 5,
+    });
+    cy.get(amountField)
+      .clear()
+      .type('850')
+      .next(`[data-testid="${formFieldError}"]`)
+      .should(
+        'have.text',
+        "You can't deposit more than you have in your Ethereum wallet, 800 tEURO"
+      );
+  });
+});
+
+describe('deposit actions', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockWeb3Provider();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-1');
+  });
+
+  it.skip('Deposit to trade is visible', () => {
+    cy.getByTestId('Collateral').click();
+    cy.get('[row-id="asset-id"]').contains('tEURO').should('be.visible');
+    cy.contains('[data-testid="deposit"]', 'Deposit').should('be.visible');
+    cy.contains('[data-testid="deposit"]', 'Deposit').click();
+    cy.getByTestId('deposit-submit').should('be.visible');
+  });
+});
+
+function mockWeb3DepositCalls({
+  allowance,
+  depositLifetimeLimit,
+  balance,
+  deposited,
+  dps,
+}: {
+  allowance: string;
+  depositLifetimeLimit: string;
+  balance: string;
+  deposited: string;
+  dps: number;
+}) {
+  const assetContractAddress = '0x0158031158bb4df2ad02eaa31e8963e84ea978a4';
+  const collateralBridgeAddress = '0x7fe27d970bc8afc3b11cc8d9737bfb66b1efd799';
+  const toResult = (value: string, dps: number) => {
+    const rawValue = removeDecimal(value, dps);
+    return ethers.utils.hexZeroPad(
+      ethers.utils.hexlify(parseInt(rawValue)),
+      32
+    );
+  };
+  cy.intercept('POST', 'http://localhost:8545', (req) => {
+    // Mock chainId call
+    if (req.body.method === 'eth_chainId') {
+      req.alias = 'eth_chainId';
+      req.reply({
+        id: req.body.id,
+        jsonrpc: req.body.jsonrpc,
+        result: '0xaa36a7', // 11155111 for sepolia chain id
+      });
+    }
+
+    // Mock deposited amount
+    if (req.body.method === 'eth_getStorageAt') {
+      req.alias = 'eth_getStorageAt';
+      req.reply({
+        id: req.body.id,
+        jsonrpc: req.body.jsonrpc,
+        result: toResult(deposited, dps),
+      });
+    }
+
+    if (req.body.method === 'eth_call') {
+      // Mock approved amount for asset on collateral bridge
+      if (
+        req.body.params[0].to === assetContractAddress &&
+        req.body.params[0].data ===
+          '0xdd62ed3e000000000000000000000000ee7d375bcb50c26d52e1a4a472d8822a2a22d94f0000000000000000000000007fe27d970bc8afc3b11cc8d9737bfb66b1efd799'
+      ) {
+        req.alias = 'eth_call_allowance';
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(allowance, dps),
+        });
+      }
+      // Mock balance of asset in Ethereum wallet
+      else if (
+        req.body.params[0].to === assetContractAddress &&
+        req.body.params[0].data ===
+          '0x70a08231000000000000000000000000ee7d375bcb50c26d52e1a4a472d8822a2a22d94f'
+      ) {
+        req.alias = 'eth_call_balanceOf';
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(balance, dps),
+        });
+      }
+      // Mock deposit lifetime limit
+      else if (
+        req.body.params[0].to === collateralBridgeAddress &&
+        req.body.params[0].data ===
+          '0x354a897a0000000000000000000000000158031158bb4df2ad02eaa31e8963e84ea978a4'
+      ) {
+        req.alias = 'eth_call_get_deposit_maximum'; // deposit lifetime limit
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(depositLifetimeLimit, dps),
+        });
+      }
+    }
+  });
+}

apps/trading-e2e/src/integration/trading-orders.cy.ts

@@ -0,0 +1,529 @@
+import * as Schema from '@vegaprotocol/types';
+import type { OrderAmendment, OrderCancellation } from '@vegaprotocol/wallet';
+import {
+  updateOrder,
+  getSubscriptionMocks,
+} from '../support/order-update-subscription';
+import {
+  testOrderCancellation,
+  testOrderAmendment,
+} from '../support/order-validation';
+
+const orderSymbol = 'instrument-code';
+const orderSize = 'size';
+const orderType = 'type';
+const orderStatus = 'status';
+const orderRemaining = 'remaining';
+const orderPrice = 'price';
+const orderTimeInForce = 'timeInForce';
+const orderUpdatedAt = 'updatedAt';
+const cancelOrderBtn = 'cancel';
+const cancelAllOrdersBtn = 'cancelAll';
+const editOrderBtn = 'edit';
+
+describe('orders list', { tags: '@smoke', testIsolation: true }, () => {
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.wait('@Markets');
+  });
+
+  it('renders orders', () => {
+    cy.getByTestId('tab-orders').should('be.visible');
+    cy.getByTestId(cancelAllOrdersBtn).should('be.visible');
+    cy.getByTestId(cancelOrderBtn).should('have.length.at.least', 1);
+    cy.getByTestId(editOrderBtn).should('have.length.at.least', 1);
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get(`[role='rowgroup']`)
+        .first()
+        .within(() => {
+          cy.get(`[col-id='${orderSymbol}']`).each(($symbol) => {
+            cy.wrap($symbol).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderRemaining}']`).each(($remaining) => {
+            cy.wrap($remaining).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderSize}']`).each(($size) => {
+            cy.wrap($size).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderType}']`).each(($type) => {
+            cy.wrap($type).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderStatus}']`).each(($status) => {
+            cy.wrap($status).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderPrice}']`).each(($price) => {
+            cy.wrap($price).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderTimeInForce}']`).each(($timeInForce) => {
+            cy.wrap($timeInForce).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderUpdatedAt}']`).each(($dateTime) => {
+            cy.wrap($dateTime).invoke('text').should('not.be.empty');
+          });
+        });
+    });
+  });
+
+  it('partially filled orders should not show close/edit buttons', () => {
+    const partiallyFilledId =
+      '94aead3ca92dc932efcb503631b03a410e2a5d4606cae6083e2406dc38e52f78';
+
+    cy.getByTestId('tab-orders').should('be.visible');
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Partially Filled').click();
+    cy.getByTestId('All').click();
+
+    cy.get(`[row-id="${partiallyFilledId}"]`)
+      .eq(0)
+      .within(() => {
+        cy.get(`[col-id='${orderStatus}']`).should(
+          'have.text',
+          'Partially Filled'
+        );
+        cy.get(`[col-id='${orderRemaining}']`).should('have.text', '7');
+        cy.get(`[col-id='${orderSize}']`).should('have.text', '-10');
+        cy.getByTestId(cancelOrderBtn).should('not.exist');
+        cy.getByTestId(editOrderBtn).should('not.exist');
+      });
+  });
+
+  it('orders are sorted by most recent order', () => {
+    // 7003-MORD-002
+    const expectedOrderList = [
+      'BTCUSD.MF21',
+      'SOLUSD',
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'BTCUSD.MF21',
+    ];
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Reset').click();
+    cy.getByTestId('All').click();
+
+    cy.getByTestId('tab-orders')
+      .get(
+        `.ag-center-cols-container [col-id='${orderSymbol}'] [data-testid="market-code"]`
+      )
+      .should('have.length.at.least', expectedOrderList.length)
+      .then(($symbols) => {
+        const symbolNames: string[] = [];
+        cy.wrap($symbols)
+          .each(($symbol) => {
+            cy.wrap($symbol)
+              .invoke('text')
+              .then((text) => {
+                symbolNames.push(text);
+              });
+          })
+          .then(() => {
+            expect(symbolNames).to.include.ordered.members(expectedOrderList);
+          });
+      });
+  });
+});
+
+describe('subscribe orders', { tags: '@smoke' }, () => {
+  let orderId = '0';
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get('[col-id="status"][role="columnheader"]')
+        .focus()
+        .find('.ag-header-cell-menu-button')
+        .click();
+      cy.get('.ag-filter-apply-panel-button').click();
+    });
+    orderId = (parseInt(orderId, 10) + 1).toString();
+  });
+  // 7002-SORD-053
+  // 7002-SORD-040
+  // 7003-MORD-001
+
+  it('must see an active order', () => {
+    // 7002-SORD-041
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Active');
+  });
+
+  it('must see an expired order', () => {
+    // 7002-SORD-042
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_EXPIRED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Expired');
+  });
+
+  it('must see a cancelled order', () => {
+    // 7002-SORD-043
+    // NOT COVERED:  see the txn that cancelled it and a link to the block explorer, if cancelled by a user transaction.
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_CANCELLED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Cancelled');
+  });
+
+  it('must see a stopped order', () => {
+    // 7002-SORD-044
+    // NOT COVERED:  see an explanation of why stopped
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_STOPPED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Stopped');
+  });
+
+  it('must see a partially filled order', () => {
+    // 7002-SORD-045
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_PARTIALLY_FILLED,
+      size: '5',
+      remaining: '1',
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Partially Filled'
+    );
+    cy.getByTestId(`order-status-${orderId}`)
+      .parentsUntil(`.ag-row`)
+      .siblings(`[col-id=${orderRemaining}]`)
+      .should('have.text', '4');
+  });
+
+  it('must see a filled order', () => {
+    // 7002-SORD-046
+    // 7003-MORD-020
+    // NOT COVERED:  Must be able to see/link to all trades that were created from this order
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_FILLED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled');
+    cy.get(`[col-id="${orderSymbol}"]`).contains('[title="Future"]', 'Futr');
+  });
+
+  it('must see a rejected order', () => {
+    // 7002-SORD-047
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_REJECTED,
+      rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_INTERNAL_ERROR,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Rejected: Internal error'
+    );
+  });
+
+  it('must see a parked order', () => {
+    // 7002-SORD-048
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_PARKED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Parked: Internal error'
+    );
+  });
+
+  it('must see the size of the order and direction/side -', () => {
+    // 7003-MORD-003
+    // 7003-MORD-004
+    updateOrder({
+      id: orderId,
+      size: '15',
+      side: Schema.Side.SIDE_SELL,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[col-id="${orderSize}"]`)
+      .should('have.text', '-15');
+  });
+
+  it('must see the size of the order and direction/side +', () => {
+    // 7003-MORD-003
+    // 7003-MORD-004
+    updateOrder({
+      id: orderId,
+      size: '5',
+      side: Schema.Side.SIDE_BUY,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[col-id="${orderSize}"]`)
+      .should('have.text', '+5');
+  });
+
+  it('for limit typy must see the Limit price that was set on the order', () => {
+    // 7003-MORD-005
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="price"]')
+      .should('have.text', '200.00');
+  });
+
+  it('must see a pegged order - ask', () => {
+    updateOrder({
+      id: orderId,
+      side: Schema.Side.SIDE_BUY,
+      peggedOrder: {
+        __typename: 'PeggedOrder',
+        reference: Schema.PeggedReference.PEGGED_REFERENCE_BEST_ASK,
+        offset: '250000',
+      },
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="type"]')
+      .should('have.text', 'Ask - 2.50 Peg limit');
+  });
+
+  it('must see a pegged order - bid', () => {
+    updateOrder({
+      id: orderId,
+      side: Schema.Side.SIDE_SELL,
+      peggedOrder: {
+        __typename: 'PeggedOrder',
+        reference: Schema.PeggedReference.PEGGED_REFERENCE_BEST_BID,
+        offset: '100',
+      },
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="type"]')
+      .should('have.text', 'Bid + 0.001 Peg limit');
+  });
+
+  it('must see a pegged order - mid', () => {
+    updateOrder({
+      id: orderId,
+      side: Schema.Side.SIDE_SELL,
+      peggedOrder: {
+        __typename: 'PeggedOrder',
+        reference: Schema.PeggedReference.PEGGED_REFERENCE_MID,
+        offset: '0.5',
+      },
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="type"]')
+      .should('have.text', 'Mid + 0.00001 Peg limit');
+  });
+
+  it('for market typy must not see a price for active or parked orders', () => {
+    // 7003-MORD-005
+    updateOrder({
+      id: orderId,
+      type: Schema.OrderType.TYPE_MARKET,
+      status: Schema.OrderStatus.STATUS_PARKED,
+      peggedOrder: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="price"]')
+      .should('have.text', '-');
+  });
+
+  it('must see the time in force applied to the order', () => {
+    // 7003-MORD-006
+    updateOrder({
+      id: orderId,
+      type: Schema.OrderType.TYPE_MARKET,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[col-id='${orderTimeInForce}']`)
+      .should('have.text', 'GTC');
+  });
+
+  it('for Active order when is part of a liquidity or peg shape, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+      liquidityProvisionId: '6536',
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+
+  it('for Active order when is part of a liquidity, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+      liquidityProvisionId: '6536',
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+
+  it('for Active order when is part of a peg shape, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+});
+
+describe('amend and cancel order', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get('[col-id="status"][role="columnheader"]')
+        .focus()
+        .find('.ag-header-cell-menu-button')
+        .click();
+      cy.get('.ag-filter-apply-panel-button').click();
+    });
+    cy.mockVegaWalletTransaction();
+  });
+
+  const orderId = '1234567890';
+
+  // this test is flakey
+  it('must be able to amend the price of an order', () => {
+    // 7003-MORD-007
+    // 7003-MORD-012
+    // 7003-MORD-014
+    // 7003-MORD-015
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[data-testid="icon-edit"]')
+      .then(($btn) => {
+        cy.wrap($btn).click();
+        cy.getByTestId('dialog-title').should('have.text', 'Edit order');
+        cy.get('#limitPrice').focus().clear().type('100');
+        cy.getByTestId('edit-order').find('[type="submit"]').click();
+        const order: OrderAmendment = {
+          orderId: orderId,
+          marketId: 'market-0',
+          price: '10000000',
+          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+          sizeDelta: 0,
+        };
+        testOrderAmendment(order);
+      });
+  });
+  it('must be able to cancel an individual order', () => {
+    // 7003-MORD-007
+    // 7003-MORD-009
+    // 7003-MORD-010
+    // 7003-MORD-011
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="icon-cross"]`)
+      .then(($btn) => {
+        cy.wrap($btn).click({ force: true });
+        const order: OrderCancellation = {
+          orderId: orderId,
+          marketId: 'market-0',
+        };
+        testOrderCancellation(order);
+      });
+  });
+  it('must be able to cancel all orders on all markets', () => {
+    // 7003-MORD-009
+    // 7003-MORD-010
+    // 7003-MORD-011
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[data-testid="cancelAll"]`)
+      .should('have.text', 'Cancel all')
+      .then(($btn) => {
+        cy.wrap($btn).click({ force: true });
+        const order: OrderCancellation = {};
+        testOrderCancellation(order);
+      });
+  });
+  it('must be warned (pre-submit) if the input price has too many digits after the decimal place for the market', () => {
+    // 7003-MORD-013
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[data-testid="icon-edit"]')
+      .then(($btn) => {
+        cy.wrap($btn).click({ force: true });
+        cy.getByTestId('dialog-title').should('have.text', 'Edit order');
+        cy.get('#limitPrice').focus().clear().type('0.111111');
+        cy.getByTestId('edit-order').find('[type="submit"]').click();
+        cy.getByTestId('input-error-text').should(
+          'have.text',
+          'Price accepts up to 5 decimal places'
+        );
+      });
+  });
+});

apps/trading-e2e/src/integration/withdraw-key-to-key-validation.cy.ts

@@ -0,0 +1,91 @@
+import { selectAsset } from '../support/helpers';
+
+const amountField = 'input[name="amount"]';
+const transferText = 'transfer-intro-text';
+const errorText = 'input-error-text';
+const formFieldError = 'input-error-text';
+const keyID = `[data-testid="${transferText}"] > .rounded-md`;
+const manageVegaWallet = 'manage-vega-wallet';
+const submitTransferBtn = '[type="submit"]';
+const toAddressField = '[name="toAddress"]';
+const transferForm = 'transfer-form';
+const walletTransfer = 'wallet-transfer';
+
+const ASSET_EURO = 1;
+const ASSET_SEPOLIA_TBTC = 2;
+
+describe(
+  'transfer form validation',
+  { tags: '@regression', testIsolation: true },
+  () => {
+    beforeEach(() => {
+      cy.mockWeb3Provider();
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.setVegaWallet();
+
+      cy.visit('/#/portfolio');
+      cy.getByTestId(manageVegaWallet).click();
+      cy.getByTestId(walletTransfer).click();
+
+      cy.wait('@Accounts');
+      cy.wait('@Assets');
+
+      cy.mockVegaWalletTransaction();
+    });
+
+    it('transfer Text', () => {
+      // 1003-TRAN-003
+      cy.getByTestId(transferText)
+        .should('exist')
+        .get(keyID)
+        .invoke('text')
+        .should('match', /[\w.]{6}…[\w.]{6}/);
+    });
+
+    it('invalid vega key validation', () => {
+      //1003-TRAN-013
+      //1003-TRAN-004
+      cy.getByTestId(transferForm).should('be.visible');
+      cy.contains('Enter manually').click();
+      cy.getByTestId(transferForm).find(toAddressField).type('asd');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Invalid Vega key');
+      cy.contains('label', 'Vega key').should('be.visible');
+      cy.contains('label', 'Asset').should('be.visible');
+      cy.contains('label', 'Amount').should('be.visible');
+    });
+
+    it('empty fields', () => {
+      // 1003-TRAN-012
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Required');
+      cy.getByTestId(formFieldError).should('have.length', 3);
+    });
+
+    it('min amount', () => {
+      // 1002-WITH-010
+      // 1003-TRAN-014
+      selectAsset(ASSET_SEPOLIA_TBTC);
+      cy.get(amountField).clear().type('0');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'Value is below minimum'
+      );
+    });
+
+    it('max amount', () => {
+      // 1003-TRAN-002
+      // 1003-TRAN-011
+      // 1003-TRAN-002
+      selectAsset(ASSET_EURO); // Will be above maximum because the vega wallet doesn't have any collateral
+      cy.get(amountField).clear().type('1001', { delay: 100 });
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'You cannot transfer more than your available collateral'
+      );
+    });
+  }
+);

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

@@ -0,0 +1,5 @@
+import MarketPage from '../market';
+
+export const ClosedMarketPage = () => {
+  return <MarketPage closed />;
+};

apps/trading/client-pages/closed-market/index.ts

@@ -0,0 +1 @@
+export { ClosedMarketPage as default } from './closed-market';

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

@@ -1,48 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import {
-  SidebarButton,
-  SidebarDivider,
-  ViewType,
-} from '../../components/sidebar';
-import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-
-export const LiquiditySidebar = () => {
-  const currentRouteId = useGetCurrentRouteId();
-
-  return (
-    <>
-      <SidebarButton
-        view={ViewType.Deposit}
-        icon={VegaIconNames.DEPOSIT}
-        tooltip={t('Deposit')}
-        routeId={currentRouteId}
-      />
-      <SidebarButton
-        view={ViewType.Withdraw}
-        icon={VegaIconNames.WITHDRAW}
-        tooltip={t('Withdraw')}
-        routeId={currentRouteId}
-      />
-      <SidebarButton
-        view={ViewType.Transfer}
-        icon={VegaIconNames.TRANSFER}
-        tooltip={t('Transfer')}
-        routeId={currentRouteId}
-      />
-      <SidebarDivider />
-      <SidebarButton
-        view={ViewType.Order}
-        icon={VegaIconNames.TICKET}
-        tooltip={t('Order')}
-        routeId={currentRouteId}
-      />
-      <SidebarButton
-        view={ViewType.Info}
-        icon={VegaIconNames.BREAKDOWN}
-        tooltip={t('Market specification')}
-        routeId={currentRouteId}
-      />
-    </>
-  );
-};

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

@@ -43,7 +43,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
   const asset = getAsset(market);
 
   return (
-    <>
+    <div className="flex gap-8">
       <HeaderStat heading={t('Mark Price')} testId="market-price">
         <MarketMarkPrice
           marketId={market.id}
@@ -86,7 +86,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
       <MarketLiquiditySupplied
         marketId={market.id}
         assetDecimals={asset?.decimals || 0}
-        quantum={asset.quantum}
       />
       {market.tradableInstrument.instrument.product.__typename === 'Future' && (
         <HeaderStat
@@ -145,7 +144,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         </HeaderStat>
       )}
       <MarketProposalNotification marketId={market.id} />
-    </>
+    </div>
   );
 };
 

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

@@ -9,9 +9,10 @@ import { useGlobalStore, usePageTitleStore } from '../../stores';
 import { TradeGrid } from './trade-grid';
 import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Links } from '../../lib/links';
+import { Links, Routes } from '../../lib/links';
 import { ViewType, useSidebar } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { MarketState } from '@vegaprotocol/types';
 
 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
   return markPrice && decimalPlaces
@@ -56,7 +57,7 @@ const TitleUpdater = ({
   return null;
 };
 
-export const MarketPage = () => {
+export const MarketPage = ({ closed }: { closed?: boolean }) => {
   const { marketId } = useParams();
   const navigate = useNavigate();
   const currentRouteId = useGetCurrentRouteId();
@@ -69,11 +70,25 @@ export const MarketPage = () => {
 
   const { data, loading } = useMarket(marketId);
 
+  useEffect(() => {
+    if (
+      data?.state &&
+      [
+        MarketState.STATE_SETTLED,
+        MarketState.STATE_TRADING_TERMINATED,
+      ].includes(data.state) &&
+      currentRouteId !== Routes.CLOSED_MARKETS &&
+      marketId
+    ) {
+      navigate(Links.CLOSED_MARKETS(marketId));
+    }
+  }, [data?.state, currentRouteId, navigate, marketId]);
+
   useEffect(() => {
     if (data?.id && data.id !== lastMarketId && !closed) {
       update({ marketId: data.id });
     }
-  }, [update, lastMarketId, data?.id]);
+  }, [update, lastMarketId, data?.id, closed]);
 
   useEffect(() => {
     if (largeScreen && view === undefined) {
@@ -82,7 +97,7 @@ export const MarketPage = () => {
         currentRouteId
       );
     }
-  }, [setViews, view, currentRouteId, largeScreen]);
+  }, [setViews, view, currentRouteId, largeScreen, closed]);
 
   const pinnedAsset = data && getAsset(data);
 

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

@@ -73,19 +73,10 @@ const MainGrid = memo(
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
-                    <Tab id="funding-history" name={t('Funding history')}>
+                    <Tab id="funding" name={t('Funding')}>
                       <TradingViews.funding.component marketId={marketId} />
                     </Tab>
                   ) : null}
-                  {market &&
-                  market.tradableInstrument.instrument.product.__typename ===
-                    'Perpetual' ? (
-                    <Tab id="funding-payments" name={t('Funding payments')}>
-                      <TradingViews.fundingPayments.component
-                        marketId={marketId}
-                      />
-                    </Tab>
-                  ) : null}
                 </Tabs>
               </TradeGridChild>
             </ResizableGridPanel>
@@ -123,7 +114,7 @@ const MainGrid = memo(
               <Tab
                 id="open-orders"
                 name={t('Open')}
-                menu={<TradingViews.activeOrders.menu />}
+                menu={<TradingViews.activeOrders.menu marketId={marketId} />}
               >
                 <TradingViews.orders.component filter={Filter.Open} />
               </Tab>
@@ -136,7 +127,7 @@ const MainGrid = memo(
               <Tab
                 id="orders"
                 name={t('All')}
-                menu={<TradingViews.orders.menu />}
+                menu={<TradingViews.orders.menu marketId={marketId} />}
               >
                 <TradingViews.orders.component />
               </Tab>
@@ -148,6 +139,9 @@ const MainGrid = memo(
               <Tab id="fills" name={t('Fills')}>
                 <TradingViews.fills.component />
               </Tab>
+              <Tab id="funding-payments" name={t('Funding payments')}>
+                <TradingViews.fundingPayments.component />
+              </Tab>
               <Tab
                 id="accounts"
                 name={t('Collateral')}

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

@@ -43,7 +43,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
 
       return (
         <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          <Menu />
+          <Menu marketId={market?.id || ''} />
         </div>
       );
     }

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

@@ -363,12 +363,12 @@ describe('Closed', () => {
     const container = within(
       document.querySelector('.ag-center-cols-container') as HTMLElement
     );
+    const cell = container.getAllByRole('gridcell', {
+      name: (_name, element) => element.getAttribute('col-id') === 'code',
+    })[0];
 
-    const cells = await container.findAllByRole('gridcell');
+    expect(within(cell).getByTestId('stack-cell-secondary')).toHaveTextContent(
-    const cell = cells.find((el) => el.getAttribute('col-id') === 'code');
+      'PRNT'
-
+    );
-    expect(
-      within(cell as HTMLElement).getByTestId('stack-cell-secondary')
-    ).toHaveTextContent('PRNT');
   });
 });

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

@@ -1,4 +1,3 @@
-import type { CellClickedEvent } from 'ag-grid-community';
 import compact from 'lodash/compact';
 import { isAfter } from 'date-fns';
 import type {
@@ -6,7 +5,6 @@ import type {
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import { AgGrid, COL_DEFS } from '@vegaprotocol/datagrid';
-import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useMemo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import type { Asset } from '@vegaprotocol/types';
@@ -19,11 +17,13 @@ import {
 import { closedMarketsWithDataProvider, getAsset } from '@vegaprotocol/markets';
 import type { DataSourceFilterFragment } from '@vegaprotocol/markets';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { SettlementDateCell } from './settlement-date-cell';
 import { SettlementPriceCell } from './settlement-price-cell';
+import { useDataProvider } from '@vegaprotocol/data-provider';
 import { MarketCodeCell } from './market-code-cell';
 import { MarketActionsDropdown } from './market-table-actions';
+import type { CellClickedEvent } from 'ag-grid-community';
+import { useClosedMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
 type SettlementAsset = Pick<
   Asset,
@@ -127,7 +127,7 @@ const ClosedMarketsDataGrid = ({
   rowData: Row[];
   error: Error | undefined;
 }) => {
-  const handleOnSelect = useMarketClickHandler();
+  const handleOnSelect = useClosedMarketClickHandler();
   const openAssetDialog = useAssetDetailsDialogStore((store) => store.open);
 
   const colDefs = useMemo(() => {
@@ -302,11 +302,8 @@ const ClosedMarketsDataGrid = ({
           return;
         }
 
-        handleOnSelect(
+        // @ts-ignore metaKey exists
-          data.id,
+        handleOnSelect(data.id, event ? event.metaKey : false);
-          // @ts-ignore metaKey exists
-          event ? event.metaKey : false
-        );
       }}
     />
   );

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

@@ -1,67 +0,0 @@
-import { Route, Routes, useParams } from 'react-router-dom';
-import { MarketState } from '@vegaprotocol/types';
-import { t } from '@vegaprotocol/i18n';
-import { useMarket } from '@vegaprotocol/markets';
-import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import {
-  SidebarButton,
-  SidebarDivider,
-  ViewType,
-} from '../../components/sidebar';
-import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-
-export const MarketsSidebar = () => {
-  const { marketId } = useParams();
-  const currentRouteId = useGetCurrentRouteId();
-  const { data } = useMarket(marketId);
-  const active =
-    data &&
-    [MarketState.STATE_ACTIVE, MarketState.STATE_PENDING].includes(data.state);
-
-  return (
-    <>
-      <SidebarButton
-        view={ViewType.Deposit}
-        icon={VegaIconNames.DEPOSIT}
-        tooltip={t('Deposit')}
-        routeId={currentRouteId}
-      />
-      <SidebarButton
-        view={ViewType.Withdraw}
-        icon={VegaIconNames.WITHDRAW}
-        tooltip={t('Withdraw')}
-        routeId={currentRouteId}
-      />
-      <SidebarButton
-        view={ViewType.Transfer}
-        icon={VegaIconNames.TRANSFER}
-        tooltip={t('Transfer')}
-        routeId={currentRouteId}
-      />
-      <Routes>
-        <Route
-          path=":marketId"
-          element={
-            <>
-              <SidebarDivider />
-              {active && (
-                <SidebarButton
-                  view={ViewType.Order}
-                  icon={VegaIconNames.TICKET}
-                  tooltip={t('Order')}
-                  routeId={currentRouteId}
-                />
-              )}
-              <SidebarButton
-                view={ViewType.Info}
-                icon={VegaIconNames.BREAKDOWN}
-                tooltip={t('Market specification')}
-                routeId={currentRouteId}
-              />
-            </>
-          }
-        />
-      </Routes>
-    </>
-  );
-};

apps/trading/client-pages/portfolio/AccountHistory.graphql

@@ -0,0 +1,39 @@
+query AccountHistory(
+  $partyId: ID!
+  $assetId: ID!
+  $accountTypes: [AccountType!]
+  $dateRange: DateRange
+  $marketIds: [ID!]
+) {
+  balanceChanges(
+    filter: {
+      partyIds: [$partyId]
+      accountTypes: $accountTypes
+      assetId: $assetId
+      marketIds: $marketIds
+    }
+    dateRange: $dateRange
+  ) {
+    edges {
+      node {
+        timestamp
+        partyId
+        balance
+        marketId
+        assetId
+        accountType
+      }
+    }
+  }
+}
+
+query AccountsWithBalance($partyId: ID!, $dateRange: DateRange) {
+  balanceChanges(filter: { partyIds: [$partyId] }, dateRange: $dateRange) {
+    edges {
+      node {
+        assetId
+        accountType
+      }
+    }
+  }
+}

apps/trading/client-pages/portfolio/__generated__/AccountHistory.ts

@@ -0,0 +1,117 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AccountHistoryQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+  assetId: Types.Scalars['ID'];
+  accountTypes?: Types.InputMaybe<Array<Types.AccountType> | Types.AccountType>;
+  dateRange?: Types.InputMaybe<Types.DateRange>;
+  marketIds?: Types.InputMaybe<Array<Types.Scalars['ID']> | Types.Scalars['ID']>;
+}>;
+
+
+export type AccountHistoryQuery = { __typename?: 'Query', balanceChanges: { __typename?: 'AggregatedBalanceConnection', edges: Array<{ __typename?: 'AggregatedBalanceEdge', node: { __typename?: 'AggregatedBalance', timestamp: any, partyId?: string | null, balance: string, marketId?: string | null, assetId?: string | null, accountType?: Types.AccountType | null } } | null> } };
+
+export type AccountsWithBalanceQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+  dateRange?: Types.InputMaybe<Types.DateRange>;
+}>;
+
+
+export type AccountsWithBalanceQuery = { __typename?: 'Query', balanceChanges: { __typename?: 'AggregatedBalanceConnection', edges: Array<{ __typename?: 'AggregatedBalanceEdge', node: { __typename?: 'AggregatedBalance', assetId?: string | null, accountType?: Types.AccountType | null } } | null> } };
+
+
+export const AccountHistoryDocument = gql`
+    query AccountHistory($partyId: ID!, $assetId: ID!, $accountTypes: [AccountType!], $dateRange: DateRange, $marketIds: [ID!]) {
+  balanceChanges(
+    filter: {partyIds: [$partyId], accountTypes: $accountTypes, assetId: $assetId, marketIds: $marketIds}
+    dateRange: $dateRange
+  ) {
+    edges {
+      node {
+        timestamp
+        partyId
+        balance
+        marketId
+        assetId
+        accountType
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAccountHistoryQuery__
+ *
+ * To run a query within a React component, call `useAccountHistoryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAccountHistoryQuery` 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 } = useAccountHistoryQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *      assetId: // value for 'assetId'
+ *      accountTypes: // value for 'accountTypes'
+ *      dateRange: // value for 'dateRange'
+ *      marketIds: // value for 'marketIds'
+ *   },
+ * });
+ */
+export function useAccountHistoryQuery(baseOptions: Apollo.QueryHookOptions<AccountHistoryQuery, AccountHistoryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AccountHistoryQuery, AccountHistoryQueryVariables>(AccountHistoryDocument, options);
+      }
+export function useAccountHistoryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AccountHistoryQuery, AccountHistoryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AccountHistoryQuery, AccountHistoryQueryVariables>(AccountHistoryDocument, options);
+        }
+export type AccountHistoryQueryHookResult = ReturnType<typeof useAccountHistoryQuery>;
+export type AccountHistoryLazyQueryHookResult = ReturnType<typeof useAccountHistoryLazyQuery>;
+export type AccountHistoryQueryResult = Apollo.QueryResult<AccountHistoryQuery, AccountHistoryQueryVariables>;
+export const AccountsWithBalanceDocument = gql`
+    query AccountsWithBalance($partyId: ID!, $dateRange: DateRange) {
+  balanceChanges(filter: {partyIds: [$partyId]}, dateRange: $dateRange) {
+    edges {
+      node {
+        assetId
+        accountType
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAccountsWithBalanceQuery__
+ *
+ * To run a query within a React component, call `useAccountsWithBalanceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAccountsWithBalanceQuery` 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 } = useAccountsWithBalanceQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *      dateRange: // value for 'dateRange'
+ *   },
+ * });
+ */
+export function useAccountsWithBalanceQuery(baseOptions: Apollo.QueryHookOptions<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>(AccountsWithBalanceDocument, options);
+      }
+export function useAccountsWithBalanceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>(AccountsWithBalanceDocument, options);
+        }
+export type AccountsWithBalanceQueryHookResult = ReturnType<typeof useAccountsWithBalanceQuery>;
+export type AccountsWithBalanceLazyQueryHookResult = ReturnType<typeof useAccountsWithBalanceLazyQuery>;
+export type AccountsWithBalanceQueryResult = Apollo.QueryResult<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>;

apps/trading/client-pages/portfolio/account-history-container.tsx

@@ -0,0 +1,349 @@
+import { addDecimal, fromNanoSeconds } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import compact from 'lodash/compact';
+import uniqBy from 'lodash/uniqBy';
+import type { ChangeEvent } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import type { AccountHistoryQuery } from './__generated__/AccountHistory';
+import { useAccountHistoryQuery } from './__generated__/AccountHistory';
+import * as Schema from '@vegaprotocol/types';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useAssetsDataProvider } from '@vegaprotocol/assets';
+import {
+  AsyncRenderer,
+  Splash,
+  Toggle,
+  TradingButton,
+  TradingDropdown,
+  TradingDropdownContent,
+  TradingDropdownItem,
+  TradingDropdownTrigger,
+} from '@vegaprotocol/ui-toolkit';
+import { AccountTypeMapping } from '@vegaprotocol/types';
+import { PriceChart } from 'pennant';
+import 'pennant/dist/style.css';
+import type { Account } from '@vegaprotocol/accounts';
+import { accountsDataProvider } from '@vegaprotocol/accounts';
+import {
+  useLocalStorageSnapshot,
+  useThemeSwitcher,
+} from '@vegaprotocol/react-helpers';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { getAsset, type Market } from '@vegaprotocol/markets';
+
+export const DateRange = {
+  RANGE_1D: '1D',
+  RANGE_7D: '7D',
+  RANGE_1M: '1M',
+  RANGE_3M: '3M',
+  RANGE_1Y: '1Y',
+  RANGE_YTD: 'YTD',
+  RANGE_ALL: 'All',
+};
+
+const dateRangeToggleItems = Object.entries(DateRange).map(([_, value]) => ({
+  label: t(value),
+  value: value,
+}));
+
+export const calculateStartDate = (range: string): string | undefined => {
+  const now = new Date();
+  switch (range) {
+    case DateRange.RANGE_1D:
+      return new Date(now.setDate(now.getDate() - 1)).toISOString();
+    case DateRange.RANGE_7D:
+      return new Date(now.setDate(now.getDate() - 7)).toISOString();
+    case DateRange.RANGE_1M:
+      return new Date(now.setMonth(now.getMonth() - 1)).toISOString();
+    case DateRange.RANGE_3M:
+      return new Date(now.setMonth(now.getMonth() - 3)).toISOString();
+    case DateRange.RANGE_1Y:
+      return new Date(now.setFullYear(now.getFullYear() - 1)).toISOString();
+    case DateRange.RANGE_YTD:
+      return new Date(now.setMonth(0)).toISOString();
+    default:
+      return undefined;
+  }
+};
+
+export const AccountHistoryContainer = () => {
+  const { pubKey } = useVegaWallet();
+  const { data: assets } = useAssetsDataProvider();
+
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+
+  return (
+    <AsyncRenderer loading={!assets} error={undefined} data={assets}>
+      {assets && <AccountHistoryManager pubKey={pubKey} assetData={assets} />}
+    </AsyncRenderer>
+  );
+};
+
+const AccountHistoryManager = ({
+  pubKey,
+  assetData,
+}: {
+  pubKey: string;
+  assetData: AssetFieldsFragment[];
+}) => {
+  const [accountType, setAccountType] = useState<Schema.AccountType>(
+    Schema.AccountType.ACCOUNT_TYPE_GENERAL
+  );
+
+  const variablesForOneTimeQuery = useMemo(
+    () => ({
+      partyId: pubKey,
+    }),
+    [pubKey]
+  );
+
+  const { data: accounts } = useDataProvider({
+    dataProvider: accountsDataProvider,
+    variables: variablesForOneTimeQuery,
+    skip: !pubKey,
+  });
+
+  const assetIds = useMemo(
+    () => accounts?.map((e) => e?.asset?.id) || [],
+    [accounts]
+  );
+
+  const assets = useMemo(
+    () =>
+      assetData
+        .filter((a) => assetIds.includes(a.id))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [assetData, assetIds]
+  );
+  const [assetId, setAssetId] = useLocalStorageSnapshot(
+    'account-history-active-asset-id'
+  );
+
+  const asset = useMemo(
+    () => assets.find((a) => a.id === assetId) || assets[0],
+    [assetId, assets]
+  );
+
+  const [range, setRange] = useState<typeof DateRange[keyof typeof DateRange]>(
+    DateRange.RANGE_1M
+  );
+  const [market, setMarket] = useState<Market | null>(null);
+
+  const marketFilterCb = useCallback(
+    (item: Market) => {
+      const itemAsset = getAsset(item);
+      return !asset?.id || itemAsset?.id === asset?.id;
+    },
+    [asset?.id]
+  );
+  const markets = useMemo<Market[] | null>(() => {
+    const arr =
+      accounts
+        ?.filter((item: Account) => Boolean(item && item.market))
+        .map<Market>((item) => item.market as Market) ?? null;
+    return arr
+      ? uniqBy(arr.filter(marketFilterCb), 'id').sort((a, b) =>
+          a.tradableInstrument.instrument.code.localeCompare(
+            b.tradableInstrument.instrument.code
+          )
+        )
+      : null;
+  }, [accounts, marketFilterCb]);
+
+  const resolveMarket = useCallback(
+    (m: Market) => {
+      setMarket(m);
+      const itemAsset = getAsset(m);
+      const newAssetId = itemAsset?.id;
+      const newAsset = assets.find((item) => item.id === newAssetId);
+      if ((!asset || (assets && newAssetId !== asset.id)) && newAsset) {
+        setAssetId(newAsset.id);
+      }
+    },
+    [asset, assets, setAssetId]
+  );
+
+  const variables = useMemo(
+    () => ({
+      partyId: pubKey,
+      assetId: asset?.id || '',
+      accountTypes: accountType ? [accountType] : undefined,
+      dateRange:
+        range === 'All' ? undefined : { start: calculateStartDate(range) },
+      marketIds: market?.id ? [market.id] : undefined,
+    }),
+    [pubKey, asset, accountType, range, market?.id]
+  );
+
+  const { data } = useAccountHistoryQuery({
+    variables,
+    skip: !asset || !pubKey,
+  });
+
+  return (
+    <div className="flex flex-col h-full gap-2">
+      <div className="flex flex-wrap justify-between px-1 pt-2 gap-2">
+        <div className="flex items-center gap-1 shrink-0">
+          <TradingDropdown
+            trigger={
+              <TradingDropdownTrigger>
+                <TradingButton size="small">
+                  {accountType
+                    ? `${
+                        AccountTypeMapping[
+                          accountType as keyof typeof Schema.AccountType
+                        ]
+                      } Account`
+                    : t('Select account type')}
+                </TradingButton>
+              </TradingDropdownTrigger>
+            }
+          >
+            <TradingDropdownContent>
+              {[
+                Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+                Schema.AccountType.ACCOUNT_TYPE_BOND,
+                Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+              ].map((type) => (
+                <TradingDropdownItem
+                  key={type}
+                  onClick={() => {
+                    setAccountType(type as Schema.AccountType);
+
+                    // if not a margin account clear any market selection
+                    if (type !== Schema.AccountType.ACCOUNT_TYPE_MARGIN) {
+                      setMarket(null);
+                    }
+                  }}
+                >
+                  {AccountTypeMapping[type as keyof typeof Schema.AccountType]}
+                </TradingDropdownItem>
+              ))}
+            </TradingDropdownContent>
+          </TradingDropdown>
+
+          <TradingDropdown
+            trigger={
+              <TradingDropdownTrigger>
+                <TradingButton size="small">
+                  {asset ? asset.symbol : t('Select asset')}
+                </TradingButton>
+              </TradingDropdownTrigger>
+            }
+          >
+            <TradingDropdownContent>
+              {assets.map((a) => (
+                <TradingDropdownItem
+                  key={a.id}
+                  onClick={() => {
+                    setAssetId(a.id);
+
+                    // if the selected asset is different to the selected market clear the market
+                    if (market && a.id !== getAsset(market).id) {
+                      setMarket(null);
+                    }
+                  }}
+                >
+                  {a.symbol}
+                </TradingDropdownItem>
+              ))}
+            </TradingDropdownContent>
+          </TradingDropdown>
+          <TradingDropdown
+            trigger={
+              <TradingDropdownTrigger>
+                <TradingButton size="small">
+                  {market
+                    ? market.tradableInstrument.instrument.code
+                    : t('Select market')}
+                </TradingButton>
+              </TradingDropdownTrigger>
+            }
+          >
+            <TradingDropdownContent>
+              {market && (
+                <TradingDropdownItem key="0" onClick={() => setMarket(null)}>
+                  {t('All markets')}
+                </TradingDropdownItem>
+              )}
+              {markets?.map((m) => (
+                <TradingDropdownItem
+                  key={m.id}
+                  onClick={() => resolveMarket(m)}
+                >
+                  {m.tradableInstrument.instrument.code}
+                </TradingDropdownItem>
+              ))}
+            </TradingDropdownContent>
+          </TradingDropdown>
+        </div>
+        <div className="justify-items-end">
+          <Toggle
+            id="account-history-date-range"
+            name="account-history-date-range"
+            toggles={dateRangeToggleItems}
+            checkedValue={range}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setRange(e.target.value as keyof typeof DateRange)
+            }
+            size="sm"
+          />
+        </div>
+      </div>
+      <div className="flex-1">
+        {asset && (
+          <div className="h-full">
+            <AccountHistoryChart
+              data={data}
+              accountType={accountType}
+              asset={asset}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const AccountHistoryChart = ({
+  data,
+  accountType,
+  asset,
+}: {
+  data: AccountHistoryQuery | undefined;
+  accountType: Schema.AccountType;
+  asset: AssetFieldsFragment;
+}) => {
+  const { theme } = useThemeSwitcher();
+  const values: { cols: [string, string]; rows: [Date, number][] } | null =
+    useMemo(() => {
+      if (!data?.balanceChanges.edges.length) {
+        return null;
+      }
+
+      const valuesData = compact(data.balanceChanges.edges)
+        .reduce((acc, edge) => {
+          if (edge.node.accountType === accountType) {
+            acc?.push({
+              datetime: fromNanoSeconds(edge.node.timestamp),
+              balance: Number(addDecimal(edge.node.balance, asset.decimals)),
+            });
+          }
+          return acc;
+        }, [] as { datetime: Date; balance: number }[])
+        .reverse();
+      return {
+        cols: ['Date', `${asset.symbol} account balance`],
+        rows: compact(valuesData).map((d) => [d.datetime, d.balance]),
+      };
+    }, [accountType, asset.decimals, asset.symbol, data?.balanceChanges.edges]);
+
+  if (!data || !values?.rows.length) {
+    return <Splash> {t('No account history data')}</Splash>;
+  }
+
+  return <PriceChart data={values} theme={theme} />;
+};

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

@@ -1,31 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { SidebarButton, ViewType } from '../../components/sidebar';
-import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-
-export const PortfolioSidebar = () => {
-  const currentRouteId = useGetCurrentRouteId();
-
-  return (
-    <>
-      <SidebarButton
-        view={ViewType.Deposit}
-        icon={VegaIconNames.DEPOSIT}
-        tooltip={t('Deposit')}
-        routeId={currentRouteId}
-      />
-      <SidebarButton
-        view={ViewType.Withdraw}
-        icon={VegaIconNames.WITHDRAW}
-        tooltip={t('Withdraw')}
-        routeId={currentRouteId}
-      />
-      <SidebarButton
-        view={ViewType.Transfer}
-        icon={VegaIconNames.TRANSFER}
-        tooltip={t('Transfer')}
-        routeId={currentRouteId}
-      />
-    </>
-  );
-};

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

@@ -15,6 +15,7 @@ import { PositionsMenu } from '../../components/positions-menu';
 import { WithdrawalsContainer } from '../../components/withdrawals-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
+import { AccountHistoryContainer } from './account-history-container';
 import {
   ResizableGrid,
   ResizableGridPanel,
@@ -65,7 +66,10 @@ export const Portfolio = () => {
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
         <ResizableGridPanel minSize={75}>
           <PortfolioGridChild>
-            <Tabs storageKey="console-portfolio-top-1">
+            <Tabs storageKey="console-portfolio-top">
+              <Tab id="account-history" name={t('Account history')}>
+                <AccountHistoryContainer />
+              </Tab>
               <Tab
                 id="positions"
                 name={t('Positions')}

apps/trading/components/bootstrapper/bootstrapper.tsx

@@ -4,11 +4,11 @@ import {
   AppLoader,
   DocsLinks,
   NetworkLoader,
-  NodeFailure,
   NodeGuard,
   useEnvironment,
 } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
+import { MaintenancePage } from '@vegaprotocol/ui-toolkit';
 import { VegaWalletProvider } from '@vegaprotocol/wallet';
 import type { ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
@@ -20,10 +20,15 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
     VEGA_ENV,
     VEGA_WALLET_URL,
     VEGA_EXPLORER_URL,
+    MAINTENANCE_PAGE,
     MOZILLA_EXTENSION_URL,
     CHROME_EXTENSION_URL,
   } = useEnvironment();
 
+  if (MAINTENANCE_PAGE) {
+    return <MaintenancePage />;
+  }
+
   if (
     !VEGA_URL ||
     !VEGA_WALLET_URL ||
@@ -32,7 +37,7 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
     !MOZILLA_EXTENSION_URL ||
     !DocsLinks
   ) {
-    return <AppLoader />;
+    return null;
   }
 
   return (
@@ -45,14 +50,9 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
     >
       <NodeGuard
         skeleton={<AppLoader />}
-        failure={<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+        failure={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
       >
-        <Web3Provider
+        <Web3Provider>
-          skeleton={<AppLoader />}
-          failure={
-            <AppFailure title={t(`Could not configure web3 provider`)} />
-          }
-        >
           <VegaWalletProvider
             config={{
               network: VEGA_ENV,

apps/trading/components/bootstrapper/web3-provider.tsx

@@ -6,20 +6,14 @@ import {
   useWeb3ConnectStore,
   createDefaultProvider,
 } from '@vegaprotocol/web3';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
 import { useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
 import { useEffect } from 'react';
 
-export const Web3Provider = ({
+export const Web3Provider = ({ children }: { children: ReactNode }) => {
-  children,
-  skeleton,
-  failure,
-}: {
-  children: ReactNode;
-  skeleton: ReactNode;
-  failure: ReactNode;
-}) => {
   const { config, loading, error } = useEthereumConfig();
   const { ETHEREUM_PROVIDER_URL, ETH_LOCAL_PROVIDER_URL, ETH_WALLET_MNEMONIC } =
     useEnvironment();
@@ -55,20 +49,23 @@ export const Web3Provider = ({
     ETH_WALLET_MNEMONIC,
   ]);
 
-  if (error) {
-    return <>{failure}</>;
-  }
-
-  if (loading || !connectors.length) {
-    return <>{skeleton}</>;
-  }
-
   return (
-    <Web3ProviderInternal
+    <AsyncRenderer
-      connectors={connectors}
+      loading={loading}
-      defaultProvider={defaultProvider}
+      error={error}
+      data={connectors}
+      noDataCondition={(d) => {
+        if (!d) return true;
+        return d.length < 1;
+      }}
+      noDataMessage={t('Could not fetch Ethereum configuration')}
     >
-      <>{children}</>
+      <Web3ProviderInternal
-    </Web3ProviderInternal>
+        connectors={connectors}
+        defaultProvider={defaultProvider}
+      >
+        <>{children}</>
+      </Web3ProviderInternal>
+    </AsyncRenderer>
   );
 };

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

@@ -9,36 +9,10 @@ import { useMemo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-
+import {
-const calculateStartDate = (range: string): string | undefined => {
+  DateRange,
-  const now = new Date();
+  calculateStartDate,
-  switch (range) {
+} from '../../client-pages/portfolio/account-history-container';
-    case DateRange.RANGE_1D:
-      return new Date(now.setDate(now.getDate() - 1)).toISOString();
-    case DateRange.RANGE_7D:
-      return new Date(now.setDate(now.getDate() - 7)).toISOString();
-    case DateRange.RANGE_1M:
-      return new Date(now.setMonth(now.getMonth() - 1)).toISOString();
-    case DateRange.RANGE_3M:
-      return new Date(now.setMonth(now.getMonth() - 3)).toISOString();
-    case DateRange.RANGE_1Y:
-      return new Date(now.setFullYear(now.getFullYear() - 1)).toISOString();
-    case DateRange.RANGE_YTD:
-      return new Date(now.setMonth(0)).toISOString();
-    default:
-      return undefined;
-  }
-};
-
-const DateRange = {
-  RANGE_1D: '1D',
-  RANGE_7D: '7D',
-  RANGE_1M: '1M',
-  RANGE_3M: '3M',
-  RANGE_1Y: '1Y',
-  RANGE_YTD: 'YTD',
-  RANGE_ALL: 'All',
-};
 
 export const FundingContainer = ({ marketId }: { marketId: string }) => {
   const { theme } = useThemeSwitcher();

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

@@ -9,11 +9,7 @@ import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
-export const FundingPaymentsContainer = ({
+export const FundingPaymentsContainer = () => {
-  marketId,
-}: {
-  marketId?: string;
-}) => {
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey } = useVegaWallet();
 
@@ -37,7 +33,6 @@ export const FundingPaymentsContainer = ({
   return (
     <FundingPaymentsManager
       partyId={pubKey}
-      marketId={marketId}
       onMarketClick={onMarketClick}
       gridProps={gridStoreCallbacks}
     />

apps/trading/components/header/header.tsx

@@ -17,11 +17,11 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   );
   return (
     <header className={headerClasses}>
-      <div className="flex-col items-start justify-center hidden pt-2 pb-0 pl-3 lg:flex lg:pl-4 xl:pb-2">
+      <div className="hidden lg:flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
         {title}
       </div>
       <div data-testid="header-summary" className="min-w-0">
-        <div className="flex items-center px-3 py-2 overflow-x-auto text-xs lg:px-4 flex-nowrap gap-6">
+        <div className="px-3 lg:px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
           {children}
         </div>
       </div>
@@ -70,7 +70,7 @@ export const HeaderTitle = ({ children }: { children: ReactNode }) => {
   return (
     <h1
       data-testid="header-title"
-      className="flex items-center text-lg gap-4 whitespace-nowrap xl:pr-4 xl:border-r border-default"
+      className="flex gap-4 items-center text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default"
     >
       {children}
     </h1>

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -1,16 +1,11 @@
-import type { ReactNode } from 'react';
+import { Outlet, Routes, Route } from 'react-router-dom';
-import { Outlet } from 'react-router-dom';
 import { Sidebar, SidebarContent, useSidebar } from '../sidebar';
 import classNames from 'classnames';
+import { MarketHeader } from '../market-header';
+import { LiquidityHeader } from '../liquidity-header';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
-export const LayoutWithSidebar = ({
+export const LayoutWithSidebar = () => {
-  header,
-  sidebar,
-}: {
-  header?: ReactNode;
-  sidebar?: ReactNode;
-}) => {
   const currentRouteId = useGetCurrentRouteId();
   const views = useSidebar((store) => store.views);
   const sidebarView = views[currentRouteId] || null;
@@ -25,7 +20,16 @@ export const LayoutWithSidebar = ({
 
   return (
     <div className={gridClasses}>
-      <div className="col-span-full">{header}</div>
+      <div className="col-span-full">
+        <Routes>
+          <Route path="markets/:marketId" element={<MarketHeader />} />
+          <Route
+            path="markets/all/closed/:marketId"
+            element={<MarketHeader />}
+          />
+          <Route path="liquidity/:marketId" element={<LiquidityHeader />} />
+        </Routes>
+      </div>
       <main
         className={classNames('col-start-1 col-end-1', {
           'lg:col-end-3': !sidebarOpen,
@@ -36,12 +40,9 @@ export const LayoutWithSidebar = ({
       </main>
       <aside
         // min-h-0 is needed as this element is part of a grid, we want the content to be scrollable, without it it will push the grid element taller
-        className={classNames(
+        className={classNames('col-start-1 lg:col-start-2 min-h-0', {
-          'col-start-1 lg:col-start-2 min-h-0 lg:border-l border-default lg:bg-vega-clight-800 dark:lg:bg-vega-cdark-800',
+          hidden: !sidebarOpen,
-          {
+        })}
-            hidden: !sidebarOpen,
-          }
-        )}
       >
         <SidebarContent />
       </aside>
@@ -53,7 +54,7 @@ export const LayoutWithSidebar = ({
           'lg:row-start-2 lg:row-span-full lg:col-start-3'
         )}
       >
-        <Sidebar options={sidebar} />
+        <Sidebar />
       </div>
     </div>
   );

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -18,7 +18,7 @@ import BigNumber from 'bignumber.js';
 import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
 import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
 import {
-  addDecimalsFormatNumberQuantum,
+  addDecimalsFormatNumber,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -30,14 +30,12 @@ interface Props {
   marketId?: string;
   noUpdate?: boolean;
   assetDecimals: number;
-  quantum: string;
 }
 
 export const MarketLiquiditySupplied = ({
   marketId,
   assetDecimals,
   noUpdate = false,
-  quantum,
 }: Props) => {
   const [market, setMarket] = useState<MarketData>();
   const { params } = useNetworkParams([
@@ -81,12 +79,11 @@ export const MarketLiquiditySupplied = ({
   });
 
   const supplied = market?.suppliedStake
-    ? addDecimalsFormatNumberQuantum(
+    ? addDecimalsFormatNumber(
         new BigNumber(market?.suppliedStake)
           .multipliedBy(stakeToCcyVolume || 1)
           .toString(),
-        assetDecimals,
+        assetDecimals
-        quantum
       )
     : '-';
 
@@ -111,10 +108,9 @@ export const MarketLiquiditySupplied = ({
             <span>{t('Supplied stake')}</span>
             <span>
               {market?.suppliedStake
-                ? addDecimalsFormatNumberQuantum(
+                ? addDecimalsFormatNumber(
-                    market?.suppliedStake,
+                    new BigNumber(market?.suppliedStake).toString(),
-                    assetDecimals,
+                    assetDecimals
-                    quantum
                   )
                 : '-'}
             </span>
@@ -123,10 +119,9 @@ export const MarketLiquiditySupplied = ({
             <span>{t('Target stake')}</span>
             <span>
               {market?.targetStake
-                ? addDecimalsFormatNumberQuantum(
+                ? addDecimalsFormatNumber(
-                    market?.targetStake,
+                    new BigNumber(market?.targetStake).toString(),
-                    assetDecimals,
+                    assetDecimals
-                    quantum
                   )
                 : '-'}
             </span>

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

@@ -21,7 +21,6 @@ const market = {
 } 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) => {
@@ -44,12 +43,6 @@ jest.mock('@vegaprotocol/utils', () => ({
 let mockCandles = {};
 jest.mock('@vegaprotocol/markets', () => ({
   ...jest.requireActual('@vegaprotocol/markets'),
-  useMarketState: (marketId: string) =>
-    marketId
-      ? {
-          data: mockDataMarketState,
-        }
-      : { data: undefined },
   useSuccessorMarket: (marketId: string) =>
     marketId
       ? {
@@ -88,6 +81,30 @@ describe('MarketSuccessorBanner', () => {
       });
       expect(container).toBeEmptyDOMElement();
     });
+
+    it('successor market not in continuous mode', () => {
+      mockDataSuccessorMarket = {
+        ...mockDataSuccessorMarket,
+        tradingMode: Types.MarketTradingMode.TRADING_MODE_NO_TRADING,
+      };
+      const { container } = render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(container).toBeEmptyDOMElement();
+      expect(allUtils.getMarketExpiryDate).toHaveBeenCalled();
+    });
+
+    it('successor market is not active', () => {
+      mockDataSuccessorMarket = {
+        ...mockDataSuccessorMarket,
+        state: Types.MarketState.STATE_PENDING,
+      };
+      const { container } = render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(container).toBeEmptyDOMElement();
+      expect(allUtils.getMarketExpiryDate).toHaveBeenCalled();
+    });
   });
 
   describe('should be displayed', () => {
@@ -103,17 +120,6 @@ describe('MarketSuccessorBanner', () => {
       ).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,
@@ -131,9 +137,7 @@ describe('MarketSuccessorBanner', () => {
       render(<MarketSuccessorBanner market={market} />, {
         wrapper: MockedProvider,
       });
-      expect(
+      expect(screen.getByText('has 101.367 24h vol.')).toBeInTheDocument();
-        screen.getByText('has a 24h trading volume of 101.367')
-      ).toBeInTheDocument();
     });
 
     it('should display optionally duration', () => {

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

@@ -4,7 +4,6 @@ import type { Market } from '@vegaprotocol/markets';
 import {
   calcCandleVolume,
   useCandles,
-  useMarketState,
   useSuccessorMarket,
 } from '@vegaprotocol/markets';
 import {
@@ -30,9 +29,7 @@ export const MarketSuccessorBanner = ({
 }: {
   market: Market | null;
 }) => {
-  const { data: marketState } = useMarketState(market?.id);
+  const { data: successorData } = useSuccessorMarket(market?.id);
-  const isSettled = marketState === Types.MarketState.STATE_SETTLED;
-  const { data: successorData, loading } = useSuccessorMarket(market?.id);
 
   const [visible, setVisible] = useState(true);
 
@@ -48,6 +45,11 @@ export const MarketSuccessorBanner = ({
       ? intervalToDuration({ start: new Date(), end: expiry })
       : null;
 
+  const isInContinuesMode =
+    successorData?.state === Types.MarketState.STATE_ACTIVE &&
+    successorData?.tradingMode ===
+      Types.MarketTradingMode.TRADING_MODE_CONTINUOUS;
+
   const { oneDayCandles } = useCandles({
     marketId: successorData?.id,
   });
@@ -64,7 +66,7 @@ export const MarketSuccessorBanner = ({
         )
       : null;
 
-  if (!loading && (isSettled || successorData) && visible) {
+  if (isInContinuesMode && visible) {
     return (
       <NotificationBanner
         intent={Intent.Primary}
@@ -72,47 +74,34 @@ export const MarketSuccessorBanner = ({
           setVisible(false);
         }}
       >
-        <div className="uppercase">
+        <div className="uppercase mb-1">
-          {successorData
+          {t('This market has been succeeded')}
-            ? t('This market has been succeeded')
+        </div>
-            : t('This market has been settled')}
+        <div>
+          {duration && (
+            <span>
+              {t('This market expires in %s.', [
+                formatDuration(duration, {
+                  format: [
+                    'years',
+                    'months',
+                    'weeks',
+                    'days',
+                    'hours',
+                    'minutes',
+                  ],
+                }),
+              ])}
+            </span>
+          )}{' '}
+          {t('The successor market')}{' '}
+          <ExternalLink href={`/#/markets/${successorData?.id}`}>
+            {successorData?.tradableInstrument.instrument.name}
+          </ExternalLink>
+          {successorVolume && (
+            <span> {t('has %s 24h vol.', [successorVolume])}</span>
+          )}
         </div>
-        {(duration || successorData) && (
-          <div className="mt-1">
-            {duration && (
-              <span>
-                {t('This market expires in %s.', [
-                  formatDuration(duration, {
-                    format: [
-                      'years',
-                      'months',
-                      'weeks',
-                      'days',
-                      'hours',
-                      'minutes',
-                    ],
-                  }),
-                ])}
-              </span>
-            )}
-            {successorData && (
-              <>
-                {' '}
-                {t('The successor market')}
-                {!successorVolume ? ' is ' : ' '}
-                <ExternalLink href={`/#/markets/${successorData?.id}`}>
-                  {successorData?.tradableInstrument.instrument.name}
-                </ExternalLink>
-                {successorVolume && (
-                  <span>
-                    {' '}
-                    {t('has a 24h trading volume of %s', [successorVolume])}
-                  </span>
-                )}
-              </>
-            )}
-          </div>
-        )}
       </NotificationBanner>
     );
   }

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

@@ -1,6 +1,6 @@
 import { Popover, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { Header, HeaderTitle } from '../header';
-import { Route, Routes, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { MarketSelector } from '../../components/market-selector/market-selector';
 import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
 import { useMarket, useMarketList } from '@vegaprotocol/markets';
@@ -19,44 +19,36 @@ export const MarketHeader = () => {
   if (!data) return null;
 
   return (
-    <Routes>
+    <Header
-      <Route
+      title={
-        path=":marketId"
+        <Popover
-        element={
+          open={open}
-          <Header
+          onChange={setOpen}
-            title={
+          trigger={
-              <Popover
+            <HeaderTitle>
-                open={open}
+              <span>
-                onChange={setOpen}
+                {data.tradableInstrument.instrument.code}
-                trigger={
+                <span className="ml-2 text-xs uppercase text-muted">
-                  <HeaderTitle>
+                  {' '}
-                    <span>
+                  {data.tradableInstrument.instrument.product.__typename &&
-                      {data.tradableInstrument.instrument.code}
+                    ProductTypeShortName[
-                      <span className="ml-1 text-xs uppercase text-muted">
+                      data.tradableInstrument.instrument.product.__typename
-                        {data.tradableInstrument.instrument.product
+                    ]}{' '}
-                          .__typename &&
+                </span>
-                          ProductTypeShortName[
+              </span>
-                            data.tradableInstrument.instrument.product
+              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
-                              .__typename
+            </HeaderTitle>
-                          ]}
+          }
-                      </span>
+          alignOffset={-10}
-                    </span>
+        >
-                    <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
+          <MarketSelector
-                  </HeaderTitle>
+            currentMarketId={marketId}
-                }
+            onSelect={() => setOpen(false)}
-                alignOffset={-10}
+          />
-              >
+        </Popover>
-                <MarketSelector
+      }
-                  currentMarketId={marketId}
+    >
-                  onSelect={() => setOpen(false)}
+      <MarketHeaderStats market={data} />
-                />
+    </Header>
-              </Popover>
-            }
-          >
-            <MarketHeaderStats market={data} />
-          </Header>
-        }
-      />
-    </Routes>
   );
 };

apps/trading/components/market-selector/market-selector-item.tsx

@@ -56,7 +56,6 @@ const MarketData = ({
     variables: {
       marketId: market.id,
     },
-    fetchPolicy: 'no-cache',
   });
 
   const marketData = data?.marketsData[0];
@@ -71,8 +70,6 @@ const MarketData = ({
 
   const marketTradingMode = marketData
     ? marketData.marketTradingMode
-    : market.data
-    ? market.data.marketTradingMode
     : market.tradingMode;
 
   const mode = [
@@ -98,7 +95,7 @@ const MarketData = ({
     <>
       <div className="w-2/5" role="gridcell">
         <h3 className="flex items-baseline">
-          <span className="overflow-hidden text-sm lg:text-base text-ellipsis whitespace-nowrap">
+          <span className="text-sm lg:text-base text-ellipsis whitespace-nowrap overflow-hidden">
             {market.tradableInstrument.instrument.code}
           </span>
           {allProducts && productType && (

apps/trading/components/market-selector/market-selector.spec.tsx

@@ -2,10 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MarketSelector } from './market-selector';
 import { useMarketList } from '@vegaprotocol/markets';
-import {
+import { createMarketFragment } from '@vegaprotocol/mock';
-  createMarketFragment,
-  createMarketsDataFragment,
-} from '@vegaprotocol/mock';
 import { MarketState } from '@vegaprotocol/types';
 import { MemoryRouter } from 'react-router-dom';
 import type { ReactNode } from 'react';
@@ -39,10 +36,6 @@ describe('MarketSelector', () => {
   const markets = [
     createMarketFragment({
       id: 'market-0',
-      // @ts-ignore candles get joined outside this type
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_ACTIVE,
-      }),
       tradableInstrument: {
         instrument: {
           code: 'a',
@@ -63,10 +56,7 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-1',
-      // @ts-ignore candles get joined outside this type
+      state: MarketState.STATE_SUSPENDED,
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_SUSPENDED,
-      }),
       tradableInstrument: {
         instrument: {
           code: 'b',
@@ -87,10 +77,7 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-2',
-      // @ts-ignore candles get joined outside this type
+      state: MarketState.STATE_CLOSED,
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_CLOSED,
-      }),
       tradableInstrument: {
         instrument: {
           product: {
@@ -104,10 +91,7 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-3',
-      // @ts-ignore candles get joined outside this type
+      state: MarketState.STATE_ACTIVE,
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_ACTIVE,
-      }),
       tradableInstrument: {
         instrument: {
           code: 'c',
@@ -128,10 +112,6 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-4',
-      // @ts-ignore candles get joined outside this type
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_ACTIVE,
-      }),
       tradableInstrument: {
         instrument: {
           code: 'cd',
@@ -152,10 +132,7 @@ describe('MarketSelector', () => {
     }),
   ];
 
-  const activeMarkets = markets.filter((m) =>
+  const activeMarkets = markets.filter((m) => isMarketActive(m.state));
-    // @ts-ignore candles get joined outside this type
-    isMarketActive(m.data.marketState)
-  );
   mockUseMarketList.mockReturnValue({
     data: markets,
     loading: false,

apps/trading/components/market-selector/use-market-selector-list.spec.tsx

@@ -4,10 +4,7 @@ import { useMarketSelectorList } from './use-market-selector-list';
 import { isMarketActive } from '../../lib/utils';
 import { Product } from './product-selector';
 import { Sort } from './sort-dropdown';
-import {
+import { createMarketFragment } from '@vegaprotocol/mock';
-  createMarketFragment,
-  createMarketsDataFragment,
-} from '@vegaprotocol/mock';
 import { MarketState } from '@vegaprotocol/types';
 import { useMarketList } from '@vegaprotocol/markets';
 import type { Filter } from './market-selector';
@@ -34,40 +31,22 @@ describe('useMarketSelectorList', () => {
 
   it('returns all markets active and suspended markets', () => {
     const markets = [
-      createMarketFragment({
+      createMarketFragment({ id: 'market-0' }),
-        id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
-      }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore candles get joined outside this type
+        state: MarketState.STATE_SUSPENDED,
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_SUSPENDED,
-        }),
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
+        state: MarketState.STATE_CLOSED,
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_CLOSED,
-        }),
       }),
       createMarketFragment({
         id: 'market-3',
-        // @ts-ignore candles get joined outside this type
+        state: MarketState.STATE_CLOSED,
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_CLOSED,
-        }),
       }),
       createMarketFragment({
         id: 'market-4',
-        // @ts-ignore candles get joined outside this type
+        state: MarketState.STATE_PENDING,
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_PENDING,
-        }),
       }),
     ];
     mockUseMarketList.mockReturnValue({
@@ -77,8 +56,7 @@ describe('useMarketSelectorList', () => {
     });
     const { result } = setup();
     const expectedFilteredMarkets = markets.filter((m) =>
-      // @ts-ignore candles get joined outside this type
+      isMarketActive(m.state)
-      isMarketActive(m.data.marketState)
     );
     expect(result.current).toEqual({
       data: markets,
@@ -92,10 +70,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -116,10 +90,6 @@ describe('useMarketSelectorList', () => {
       // }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -165,10 +135,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -182,10 +148,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -199,10 +161,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -216,10 +174,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-3',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -284,10 +238,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'abc',
@@ -297,10 +247,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'def',
@@ -310,10 +256,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'defg',
@@ -323,10 +265,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-3',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'ggg',
@@ -395,11 +333,11 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
+        state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
+        data: {
-          marketState: MarketState.STATE_ACTIVE,
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -411,10 +349,9 @@ describe('useMarketSelectorList', () => {
         id: 'market-1',
         state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
+        data: {
-          marketState: MarketState.STATE_ACTIVE,
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -426,10 +363,9 @@ describe('useMarketSelectorList', () => {
         id: 'market-2',
         state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
+        data: {
-          marketState: MarketState.STATE_ACTIVE,
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -441,10 +377,9 @@ describe('useMarketSelectorList', () => {
         id: 'market-3',
         state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
+        data: {
-          marketState: MarketState.STATE_ACTIVE,
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -479,10 +414,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         // @ts-ignore actual fragment doesn't contain candles and is joined later
         candles: [
           {
@@ -495,10 +426,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         // @ts-ignore actual fragment doesn't contain candles and is joined later
         candles: [
           {
@@ -511,10 +438,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         // @ts-ignore actual fragment doesn't contain candles and is joined later
         candles: [
           {
@@ -559,30 +482,18 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         marketTimestamps: {
           open: subDays(new Date(), 3).toISOString(),
         },
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         marketTimestamps: {
           open: subDays(new Date(), 1).toISOString(),
         },
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         marketTimestamps: {
           open: subDays(new Date(), 2).toISOString(),
         },

apps/trading/components/market-selector/use-market-selector-list.ts

@@ -22,12 +22,8 @@ export const useMarketSelectorList = ({
   const markets = useMemo(() => {
     if (!data?.length) return [];
     const markets = data
-      // show only active markets, using m.data.marketState as this will be
+      // only active
-      // data that will get refreshed when calling reload
+      .filter((m) => isMarketActive(m.state))
-      .filter((m) => {
-        if (!m.data) return false;
-        return isMarketActive(m.data.marketState);
-      })
       // only selected product type
       .filter((m) => {
         if (

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

@@ -63,7 +63,7 @@ describe('Navbar', () => {
 
     const expectedLinks = [
       ['/', ''],
-      ['/markets', 'Markets'],
+      ['/markets/all', 'Markets'],
       [`/markets/${marketId}`, 'Trading'],
       ['/portfolio', 'Portfolio'],
       ['/referrals', 'Referrals'],
@@ -80,7 +80,7 @@ describe('Navbar', () => {
   });
 
   it('Markets page route should not match empty market page', () => {
-    renderComponent(['/markets']);
+    renderComponent(['/markets/all']);
     expect(screen.getByRole('link', { name: 'Markets' })).toHaveClass('active');
     expect(screen.getByRole('link', { name: 'Trading' })).not.toHaveClass(
       'active'
@@ -96,7 +96,7 @@ describe('Navbar', () => {
     const menu = within(menuEl);
 
     const expectedLinks = [
-      ['/markets', 'Markets'],
+      ['/markets/all', 'Markets'],
       [`/markets/${marketId}`, 'Trading'],
       ['/portfolio', 'Portfolio'],
       ['/referrals', 'Referrals'],

apps/trading/components/navbar/navbar.tsx

@@ -264,7 +264,6 @@ const NavbarLink = ({
     <N.Link asChild={true}>
       <NavLink
         to={to}
-        end={true}
         className={classNames(
           'block lg:flex lg:h-full flex-col justify-center',
           'px-6 py-2 lg:p-0 text-lg lg:text-sm',

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

@@ -3,25 +3,14 @@ import { Filter, OrderListManager } from '@vegaprotocol/orders';
 import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useNavigateWithMeta } from '../../lib/hooks/use-market-click-handler';
+import {
+  useMarketClickHandler,
+  useMarketLiquidityClickHandler,
+} from '../../lib/hooks/use-market-click-handler';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import type { DataGridStore } from '../../stores/datagrid-store-slice';
 import { OrderStatus } from '@vegaprotocol/types';
-import { Links } from '../../lib/links';
-
-const resolveNoRowsMessage = (filter?: Filter) => {
-  switch (filter) {
-    case Filter.Open:
-      return t('No open orders');
-    case Filter.Closed:
-      return t('No closed orders');
-    case Filter.Rejected:
-      return t('No rejected orders');
-    default:
-      return t('No orders');
-  }
-};
 
 export const FilterStatusValue = {
   [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
@@ -43,7 +32,8 @@ const AUTO_SIZE_COLUMNS = ['instrument-code'];
 
 export const OrdersContainer = ({ filter }: OrderContainerProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const navigate = useNavigateWithMeta();
+  const onMarketClick = useMarketClickHandler(true);
+  const onOrderTypeClick = useMarketLiquidityClickHandler();
   const { gridState, updateGridState } = useOrderListGridState(filter);
   const gridStoreCallbacks = useDataGridEvents(
     gridState,
@@ -56,21 +46,15 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
   if (!pubKey) {
     return <Splash>{t('Please connect Vega wallet')}</Splash>;
   }
-  const noRowsMessage = resolveNoRowsMessage(filter);
 
   return (
     <OrderListManager
       partyId={pubKey}
       filter={filter}
-      onMarketClick={(marketId, metaKey) => {
+      onMarketClick={onMarketClick}
-        navigate(Links.MARKET(marketId), metaKey);
+      onOrderTypeClick={onOrderTypeClick}
-      }}
-      onOrderTypeClick={(marketId, metaKey) =>
-        navigate(Links.LIQUIDITY(marketId), metaKey)
-      }
       isReadOnly={isReadOnly}
       gridProps={gridStoreCallbacks}
-      noRowsMessage={noRowsMessage}
     />
   );
 };

apps/trading/components/sidebar/sidebar.spec.tsx

@@ -38,68 +38,79 @@ const walletContext = {
 } as VegaWalletContextShape;
 
 describe('Sidebar', () => {
-  beforeEach(() => {
+  it.each(['/markets/all', '/portfolio'])(
-    useSidebar.setState({ views: {} });
+    'does not render ticket and info',
-  });
+    (path) => {
+      render(
+        <VegaWalletContext.Provider value={walletContext}>
+          <MemoryRouter initialEntries={[path]}>
+            <Sidebar />
+          </MemoryRouter>
+        </VegaWalletContext.Provider>
+      );
 
-  it('renders options prop', () => {
+      expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
+      expect(screen.getByTestId(ViewType.Settings)).toBeInTheDocument();
+      expect(screen.getByTestId(ViewType.Transfer)).toBeInTheDocument();
+      expect(screen.getByTestId(ViewType.Deposit)).toBeInTheDocument();
+      expect(screen.getByTestId(ViewType.Withdraw)).toBeInTheDocument();
+      expect(screen.getByTestId('node-health')).toBeInTheDocument();
+
+      // no order or info sidebars
+      expect(screen.queryByTestId(ViewType.Order)).not.toBeInTheDocument();
+      expect(screen.queryByTestId(ViewType.Info)).not.toBeInTheDocument();
+    }
+  );
+
+  it('renders ticket and info on market pages', () => {
     render(
       <VegaWalletContext.Provider value={walletContext}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={['/markets/ABC']}>
-          <Sidebar options={<div data-testid="options" />} />
+          <Sidebar />
         </MemoryRouter>
       </VegaWalletContext.Provider>
     );
 
     expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
     expect(screen.getByTestId(ViewType.Settings)).toBeInTheDocument();
+    expect(screen.getByTestId(ViewType.Transfer)).toBeInTheDocument();
+    expect(screen.getByTestId(ViewType.Deposit)).toBeInTheDocument();
+    expect(screen.getByTestId(ViewType.Withdraw)).toBeInTheDocument();
     expect(screen.getByTestId('node-health')).toBeInTheDocument();
-    expect(screen.getByTestId('options')).toBeInTheDocument();
+
+    // order and info sidebars are shown
+    expect(screen.getByTestId(ViewType.Order)).toBeInTheDocument();
+    expect(screen.getByTestId(ViewType.Info)).toBeInTheDocument();
   });
 
   it('renders selected state', async () => {
-    const routeId = '/markets/ABC';
     render(
       <VegaWalletContext.Provider value={walletContext}>
-        <MemoryRouter initialEntries={[routeId]}>
+        <MemoryRouter initialEntries={['/markets/ABC']}>
-          <Sidebar
+          <Sidebar />
-            options={
-              <SidebarButton
-                view={ViewType.Deposit}
-                icon={VegaIconNames.DEPOSIT}
-                tooltip="Deposit"
-                routeId={'/markets/:marketId'}
-              />
-            }
-          />
         </MemoryRouter>
       </VegaWalletContext.Provider>
     );
 
     const settingsButton = screen.getByTestId(ViewType.Settings);
-    const depositButton = screen.getByTestId(ViewType.Deposit);
+    const orderButton = screen.getByTestId(ViewType.Order);
 
     // select settings first
     await userEvent.click(settingsButton);
     expect(settingsButton).toHaveClass('bg-vega-yellow text-black');
 
-    // switch to deposit
+    // switch to order
-    await userEvent.click(depositButton);
+    await userEvent.click(orderButton);
-
     expect(settingsButton).not.toHaveClass('bg-vega-yellow text-black');
-    expect(depositButton).toHaveClass('bg-vega-yellow text-black');
+    expect(orderButton).toHaveClass('bg-vega-yellow text-black');
 
     // close order
-    await userEvent.click(depositButton);
+    await userEvent.click(orderButton);
-    expect(depositButton).not.toHaveClass('bg-vega-yellow text-black');
+    expect(orderButton).not.toHaveClass('bg-vega-yellow text-black');
   });
 });
 
 describe('SidebarContent', () => {
-  beforeEach(() => {
-    useSidebar.setState({ views: {} });
-  });
-
   it('renders the correct content', () => {
     const { container } = render(
       <VegaWalletContext.Provider value={walletContext}>

apps/trading/components/sidebar/sidebar.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { Route, Routes, useParams } from 'react-router-dom';
 import { create } from 'zustand';
 import { TransferContainer } from '@vegaprotocol/accounts';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
@@ -50,14 +50,108 @@ type SidebarView =
       type: ViewType.Settings;
     };
 
-export const Sidebar = ({ options }: { options?: ReactNode }) => {
+const MarketSidebarButtons = () => {
+  const currentRouteId = useGetCurrentRouteId();
+
+  return (
+    <>
+      <SidebarButton
+        view={ViewType.Order}
+        icon={VegaIconNames.TICKET}
+        tooltip={t('Order')}
+        routeId={currentRouteId}
+      />
+      <SidebarButton
+        view={ViewType.Info}
+        icon={VegaIconNames.BREAKDOWN}
+        tooltip={t('Market specification')}
+        routeId={currentRouteId}
+      />
+    </>
+  );
+};
+
+const AssetSidebarButtons = () => {
+  const currentRouteId = useGetCurrentRouteId();
+
+  return (
+    <>
+      <SidebarButton
+        view={ViewType.Deposit}
+        icon={VegaIconNames.DEPOSIT}
+        tooltip={t('Deposit')}
+        routeId={currentRouteId}
+      />
+      <SidebarButton
+        view={ViewType.Withdraw}
+        icon={VegaIconNames.WITHDRAW}
+        tooltip={t('Withdraw')}
+        routeId={currentRouteId}
+      />
+      <SidebarButton
+        view={ViewType.Transfer}
+        icon={VegaIconNames.TRANSFER}
+        tooltip={t('Transfer')}
+        routeId={currentRouteId}
+      />
+    </>
+  );
+};
+
+export const Sidebar = () => {
   const currentRouteId = useGetCurrentRouteId();
   const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
   const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
   const { pubKeys } = useVegaWallet();
   return (
     <div className="flex h-full p-1 lg:flex-col gap-2" data-testid="sidebar">
-      {options && <nav className={navClasses}>{options}</nav>}
+      <nav className={navClasses}>
+        <Routes>
+          <Route path="markets/all" element={<AssetSidebarButtons />} />
+          <Route path="portfolio">
+            <Route
+              // Show deposit/withdraw/transfer sidebar options only on portflio dashboard (index)
+              index={true}
+              element={<AssetSidebarButtons />}
+            />
+          </Route>
+          <Route
+            path="markets/:marketId"
+            element={
+              <>
+                <AssetSidebarButtons />
+                <SidebarDivider />
+                <MarketSidebarButtons />
+              </>
+            }
+          />
+          <Route
+            path="liquidity/:marketId"
+            element={
+              <>
+                <AssetSidebarButtons />
+                <SidebarDivider />
+                <MarketSidebarButtons />
+              </>
+            }
+          />
+          <Route
+            path="markets/all/closed/:marketId"
+            element={
+              <>
+                <AssetSidebarButtons />
+                <SidebarDivider />
+                <SidebarButton
+                  view={ViewType.Info}
+                  icon={VegaIconNames.BREAKDOWN}
+                  tooltip={t('Market specification')}
+                  routeId={currentRouteId}
+                />
+              </>
+            }
+          />
+        </Routes>
+      </nav>
       <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
         <SidebarButton
           view={ViewType.ViewAs}
@@ -140,7 +234,7 @@ export const SidebarButton = ({
   );
 };
 
-export const SidebarDivider = () => {
+const SidebarDivider = () => {
   return (
     <div
       className="w-px h-4 bg-vega-clight-600 dark:bg-vega-cdark-600 lg:w-4 lg:h-px"

apps/trading/components/telemetry/telemetry.tsx

@@ -6,7 +6,7 @@ import { TelemetryApproval } from './telemetry-approval';
 import { t } from '@vegaprotocol/i18n';
 import { useOnboardingStore } from '../welcome-dialog/use-get-onboarding-step';
 
-const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_toast_id';
+const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_tost_id';
 
 export const Telemetry = () => {
   const onboardingDissmissed = useOnboardingStore((store) => store.dismissed);

apps/trading/lib/hooks/use-market-click-handler.ts

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { useCallback } from 'react';
 import { Links } from '../../lib/links';
 
 export const useMarketClickHandler = (replace = false) => {
@@ -14,10 +15,17 @@ export const useMarketClickHandler = (replace = false) => {
   };
 };
 
-export const useNavigateWithMeta = (replace = false) => {
+export const useMarketLiquidityClickHandler = () => {
+  return useCallback((selectedId: string, metaKey?: boolean) => {
+    window.open(`/#/liquidity/${selectedId}`, metaKey ? '_blank' : '_self');
+  }, []);
+};
+
+export const useClosedMarketClickHandler = (replace = false) => {
   const navigate = useNavigate();
 
-  return (link: string, metaKey?: boolean) => {
+  return (selectedId: string, metaKey?: boolean) => {
+    const link = Links.CLOSED_MARKETS(selectedId);
     if (metaKey) {
       window.open(`/#${link}`, '_blank');
     } else {

apps/trading/lib/links.ts

@@ -4,7 +4,8 @@ import trimEnd from 'lodash/trimEnd';
 // href creation
 export const Routes = {
   HOME: '/',
-  MARKETS: '/markets',
+  MARKETS: '/markets/all',
+  CLOSED_MARKETS: '/markets/all/closed/:marketId',
   MARKET: '/markets/:marketId',
   LIQUIDITY: '/liquidity/:marketId',
   PORTFOLIO: '/portfolio',
@@ -28,6 +29,8 @@ export const Links: ConsoleLinks = {
   MARKET: (marketId: string) =>
     trimEnd(Routes.MARKET.replace(':marketId', marketId)),
   MARKETS: () => Routes.MARKETS,
+  CLOSED_MARKETS: (marketId: string) =>
+    trimEnd(Routes.CLOSED_MARKETS.replace(':marketId', marketId)),
   PORTFOLIO: () => Routes.PORTFOLIO,
   LIQUIDITY: (marketId: string) =>
     trimEnd(Routes.LIQUIDITY.replace(':marketId', marketId)),

apps/trading/pages/_app.page.tsx

@@ -1,7 +1,21 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
 import { t } from '@vegaprotocol/i18n';
+import {
+  useEagerConnect as useVegaEagerConnect,
+  useVegaWallet,
+} from '@vegaprotocol/wallet';
+import {
+  useVegaTransactionManager,
+  useVegaTransactionUpdater,
+} from '@vegaprotocol/web3';
+import {
+  useEagerConnect as useEthereumEagerConnect,
+  useEthTransactionManager,
+  useEthTransactionUpdater,
+  useEthWithdrawApprovalsManager,
+} from '@vegaprotocol/web3';
 import {
   envTriggerMapping,
   Networks,
@@ -11,11 +25,21 @@ import {
   useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
 import './styles.css';
-import { usePageTitleStore } from '../stores';
+import { useGlobalStore, usePageTitleStore } from '../stores';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
-import { HashRouter, useLocation, Route, Routes } from 'react-router-dom';
+import {
+  HashRouter,
+  useLocation,
+  Route,
+  Routes,
+  useSearchParams,
+} from 'react-router-dom';
+import { Connectors } from '../lib/vega-connectors';
 import { Bootstrapper } from '../components/bootstrapper';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { activeOrdersProvider } from '@vegaprotocol/orders';
+import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
 import { AnnouncementBanner } from '../components/banner';
 import { Navbar } from '../components/navbar';
 import classNames from 'classnames';
@@ -29,9 +53,6 @@ import { NavHeader } from '../components/navbar/nav-header';
 import { Telemetry } from '../components/telemetry';
 import { Routes as AppRoutes } from '../lib/links';
 import { SSRLoader } from './ssr-loader';
-import { PartyActiveOrdersHandler } from './party-active-orders-handler';
-import { MaybeConnectEagerly } from './maybe-connect-eagerly';
-import { TransactionHandlers } from './transaction-handlers';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -56,6 +77,15 @@ const Title = () => {
   );
 };
 
+const InitializeHandlers = () => {
+  useVegaTransactionManager();
+  useVegaTransactionUpdater();
+  useEthTransactionManager();
+  useEthTransactionUpdater();
+  useEthWithdrawApprovalsManager();
+  return null;
+};
+
 function AppBody({ Component }: AppProps) {
   const location = useLocation();
   const { VEGA_ENV } = useEnvironment();
@@ -95,9 +125,9 @@ function AppBody({ Component }: AppProps) {
       </div>
       <DialogsContainer />
       <ToastsManager />
-      <TransactionHandlers />
+      <InitializeHandlers />
       <MaybeConnectEagerly />
-      <PartyActiveOrdersHandler />
+      <PartyData />
       <Telemetry />
     </div>
   );
@@ -110,14 +140,10 @@ function VegaTradingApp(props: AppProps) {
     store.setDialogOpen,
   ]);
 
-  // Start validation of env vars and determine VEGA_URL
   useInitializeEnv();
 
   // Prevent HashRouter from being server side rendered as it
   // relies on presence of document object
-  //
-  // This is the last point at which we get pregenerated
-  // HTML so render a ssr friendly loader component
   if (status === 'default') {
     return <SSRLoader />;
   }
@@ -133,3 +159,36 @@ function VegaTradingApp(props: AppProps) {
 }
 
 export default VegaTradingApp;
+
+const PartyData = () => {
+  const { pubKey } = useVegaWallet();
+  const variables = { partyId: pubKey || '' };
+  const skip = !pubKey;
+  useDataProvider({
+    dataProvider: activeOrdersProvider,
+    variables,
+    skip,
+  });
+  return null;
+};
+
+const MaybeConnectEagerly = () => {
+  const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
+  const update = useGlobalStore((store) => store.update);
+  const eagerConnecting = useVegaEagerConnect(Connectors);
+  const [isTelemetryApproved] = useTelemetryApproval();
+  useEthereumEagerConnect(
+    isTelemetryApproved ? { dsn: SENTRY_DSN, env: VEGA_ENV } : {}
+  );
+
+  const { pubKey, connect } = useVegaWallet();
+  const [searchParams] = useSearchParams();
+  const [query] = useState(searchParams.get('address'));
+  if (query && !pubKey) {
+    connect(Connectors['view']);
+  }
+  useEffect(() => {
+    update({ eagerConnecting });
+  }, [update, eagerConnecting]);
+  return null;
+};

apps/trading/pages/client-router.tsx

@@ -1,5 +1,5 @@
 import type { RouteObject } from 'react-router-dom';
-import { Navigate, useRoutes } from 'react-router-dom';
+import { Navigate, Outlet, useRoutes } from 'react-router-dom';
 import { lazy, Suspense } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
@@ -13,7 +13,7 @@ import { Assets } from '../client-pages/assets';
 import { Deposit } from '../client-pages/deposit';
 import { Withdraw } from '../client-pages/withdraw';
 import { Transfer } from '../client-pages/transfer';
-import { Routes as AppRoutes } from '../lib/links';
+import { Routes } from '../lib/links';
 import { LayoutWithSky } from '../client-pages/referrals/layout';
 import { Referrals } from '../client-pages/referrals/referrals';
 import { ReferralStatistics } from '../client-pages/referrals/referral-statistics';
@@ -22,15 +22,11 @@ import { CreateCodeContainer } from '../client-pages/referrals/create-code-form'
 import { NotFound as ReferralNotFound } from '../client-pages/referrals/error-boundary';
 import { compact } from 'lodash';
 import { FLAGS } from '@vegaprotocol/environment';
-import { LiquidityHeader } from '../components/liquidity-header';
-import { MarketHeader } from '../components/market-header';
-import { PortfolioSidebar } from '../client-pages/portfolio/portfolio-sidebar';
-import { LiquiditySidebar } from '../client-pages/liquidity/liquidity-sidebar';
-import { MarketsSidebar } from '../client-pages/markets/markets-sidebar';
 
 // These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM
 // Using dynamic imports is a workaround for this until pennant is published as ESM
 const MarketPage = lazy(() => import('../client-pages/market'));
+const ClosedMarketPage = lazy(() => import('../client-pages/closed-market'));
 const Portfolio = lazy(() => import('../client-pages/portfolio'));
 
 const NotFound = () => (
@@ -40,21 +36,18 @@ const NotFound = () => (
 );
 
 export const routerConfig: RouteObject[] = compact([
-  {
+  // Pages that don't use the LayoutWithSidebar must come first
-    index: true,
+  // to ensure they are matched before the catch all route '/*'
-    element: <Home />,
-    id: AppRoutes.HOME,
-  },
   {
     path: 'disclaimer',
     element: <LayoutCentered />,
-    id: AppRoutes.DISCLAIMER,
+    id: Routes.DISCLAIMER,
     children: [{ index: true, element: <Disclaimer /> }],
   },
   // Referrals routing (the pages should be available if the feature flag is on)
   FLAGS.REFERRALS
     ? {
-        path: AppRoutes.REFERRALS,
+        path: Routes.REFERRALS,
         element: <LayoutWithSky />,
         children: [
           {
@@ -65,11 +58,11 @@ export const routerConfig: RouteObject[] = compact([
                 element: <ReferralStatistics />,
               },
               {
-                path: AppRoutes.REFERRALS_CREATE_CODE,
+                path: Routes.REFERRALS_CREATE_CODE,
                 element: <CreateCodeContainer />,
               },
               {
-                path: AppRoutes.REFERRALS_APPLY_CODE,
+                path: Routes.REFERRALS_APPLY_CODE,
                 element: <ApplyCodeForm />,
               },
             ],
@@ -81,74 +74,75 @@ export const routerConfig: RouteObject[] = compact([
         ],
       }
     : undefined,
+  // All other pages will use the sidebar
   {
-    path: 'markets/*',
+    path: '/*',
-    element: (
+    element: <LayoutWithSidebar />,
-      <LayoutWithSidebar
-        header={<MarketHeader />}
-        sidebar={<MarketsSidebar />}
-      />
-    ),
     children: [
       {
         index: true,
-        element: <MarketsPage />,
+        element: <Home />,
-        id: AppRoutes.MARKETS,
+        id: Routes.HOME,
       },
       {
-        path: 'all',
+        path: 'markets',
-        element: <Navigate to="/markets" />,
+        element: <Outlet />,
-      },
-      {
-        path: ':marketId',
-        element: <MarketPage />,
-        id: AppRoutes.MARKET,
-      },
-    ],
-  },
-  {
-    path: 'portfolio/*',
-    element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
-    children: [
-      {
-        index: true,
-        element: <Portfolio />,
-        id: AppRoutes.PORTFOLIO,
-      },
-      {
-        path: 'assets',
-        element: <Assets />,
-        id: AppRoutes.ASSETS,
         children: [
-          { index: true, element: <Navigate to="deposit" /> },
+          {
-          { path: 'deposit', element: <Deposit />, id: AppRoutes.DEPOSIT },
+            index: true,
-          { path: 'withdraw', element: <Withdraw />, id: AppRoutes.WITHDRAW },
+            element: <Navigate to="all" />,
-          { path: 'transfer', element: <Transfer />, id: AppRoutes.TRANSFER },
+          },
+          {
+            path: 'all',
+            element: <MarketsPage />,
+            id: Routes.MARKETS,
+          },
+          {
+            path: ':marketId',
+            element: <MarketPage />,
+            id: Routes.MARKET,
+          },
+          {
+            path: 'all/closed/:marketId',
+            element: <ClosedMarketPage />,
+            id: Routes.CLOSED_MARKETS,
+          },
         ],
       },
-    ],
-  },
-
-  {
-    path: 'liquidity/*',
-    element: (
-      <LayoutWithSidebar
-        header={<LiquidityHeader />}
-        sidebar={<LiquiditySidebar />}
-      />
-    ),
-    id: AppRoutes.LIQUIDITY,
-    children: [
       {
-        path: ':marketId',
+        path: 'portfolio',
+        element: <Outlet />,
+        children: [
+          {
+            index: true,
+            element: <Portfolio />,
+            id: Routes.PORTFOLIO,
+          },
+          {
+            path: 'assets',
+            element: <Assets />,
+            id: Routes.ASSETS,
+            children: [
+              { index: true, element: <Navigate to="deposit" /> },
+              { path: 'deposit', element: <Deposit />, id: Routes.DEPOSIT },
+              { path: 'withdraw', element: <Withdraw />, id: Routes.WITHDRAW },
+              { path: 'transfer', element: <Transfer />, id: Routes.TRANSFER },
+            ],
+          },
+        ],
+      },
+      {
+        path: 'liquidity/:marketId',
         element: <Liquidity />,
+        id: Routes.LIQUIDITY,
+      },
+      // NotFound page is here so its caught within parent '/*' route
+      {
+        path: '*',
+        element: <NotFound />,
       },
     ],
   },
-  {
-    path: '*',
-    element: <NotFound />,
-  },
 ]);
 
 export const ClientRouter = () => {

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

@@ -1,32 +0,0 @@
-import { useSearchParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { useEnvironment } from '@vegaprotocol/environment';
-import { useEagerConnect as useEthereumEagerConnect } from '@vegaprotocol/web3';
-import {
-  useEagerConnect as useVegaEagerConnect,
-  useVegaWallet,
-} from '@vegaprotocol/wallet';
-import { useGlobalStore } from '../stores';
-import { Connectors } from '../lib/vega-connectors';
-import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
-
-export const MaybeConnectEagerly = () => {
-  const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
-  const update = useGlobalStore((store) => store.update);
-  const eagerConnecting = useVegaEagerConnect(Connectors);
-  const [isTelemetryApproved] = useTelemetryApproval();
-  useEthereumEagerConnect(
-    isTelemetryApproved ? { dsn: SENTRY_DSN, env: VEGA_ENV } : {}
-  );
-
-  const { pubKey, connect } = useVegaWallet();
-  const [searchParams] = useSearchParams();
-  const [query] = useState(searchParams.get('address'));
-  if (query && !pubKey) {
-    connect(Connectors['view']);
-  }
-  useEffect(() => {
-    update({ eagerConnecting });
-  }, [update, eagerConnecting]);
-  return null;
-};

apps/trading/pages/party-active-orders-handler.tsx

@@ -1,15 +0,0 @@
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { activeOrdersProvider } from '@vegaprotocol/orders';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-
-export const PartyActiveOrdersHandler = () => {
-  const { pubKey } = useVegaWallet();
-  const variables = { partyId: pubKey || '' };
-  const skip = !pubKey;
-  useDataProvider({
-    dataProvider: activeOrdersProvider,
-    variables,
-    skip,
-  });
-  return null;
-};

apps/trading/pages/ssr-loader.tsx

@@ -1,8 +1,8 @@
-import { pseudoRandom } from '@vegaprotocol/ui-toolkit';
-
-const generate = pseudoRandom(1);
-
 export const SSRLoader = () => {
+  const randomDelay = () => {
+    return parseFloat((Math.random() * (4 - 1) + 1).toFixed(2));
+  };
+
   return (
     <div
       style={{
@@ -38,9 +38,10 @@ export const SSRLoader = () => {
                 width: 10,
                 height: 10,
                 animation: 'flickering 0.4s linear alternate infinite',
-                animationDelay: `-${generate()}s`,
+                animationDelay: `-${randomDelay()}s`,
                 animationDirection: i % 2 === 0 ? 'reverse' : 'alternate',
                 background: 'black',
+                opacity: Math.random() > 0.5 ? 1 : 0,
               }}
             />
           );

apps/trading/pages/transaction-handlers.tsx

@@ -1,20 +0,0 @@
-import {
-  useVegaTransactionManager,
-  useVegaTransactionUpdater,
-} from '@vegaprotocol/web3';
-import {
-  useEthTransactionManager,
-  useEthTransactionUpdater,
-  useEthWithdrawApprovalsManager,
-} from '@vegaprotocol/web3';
-import { useLedgerDownloadManager } from '@vegaprotocol/ledger';
-
-export const TransactionHandlers = () => {
-  useVegaTransactionManager();
-  useVegaTransactionUpdater();
-  useEthTransactionManager();
-  useEthTransactionUpdater();
-  useEthWithdrawApprovalsManager();
-  useLedgerDownloadManager();
-  return null;
-};

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

@@ -45,28 +45,6 @@ const secondRow = {
 } as AccountFields;
 const multiRowData = [singleRow, secondRow];
 
-const zeroBalanceRow = {
-  __typename: 'AccountBalance',
-  type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
-  balance: '0',
-  market: {
-    __typename: 'Market',
-    id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
-  },
-  asset: {
-    __typename: 'Asset',
-    id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-    symbol: 'tBTC',
-    decimals: 5,
-  },
-  available: '0',
-  used: '0',
-  total: '0',
-} as AccountFields;
-const zeroBalanceRowData = [zeroBalanceRow];
-
-const onClickDepositMock = jest.fn();
-
 describe('AccountsTable', () => {
   it('should render correct columns', async () => {
     // 7001-COLL-001
@@ -93,27 +71,6 @@ describe('AccountsTable', () => {
     ).toEqual(expectedHeaders);
   });
 
-  it('should render deposit button', async () => {
-    render(
-      <AccountTable
-        rowData={zeroBalanceRowData}
-        onClickAsset={() => null}
-        isReadOnly={false}
-        onClickDeposit={onClickDepositMock}
-        pinnedAsset={{
-          decimals: 5,
-          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-          symbol: 'tBTC',
-          name: 'tBTC',
-        }}
-      />
-    );
-    const depositButton = screen.getByTestId('deposit');
-    expect(depositButton).toBeVisible();
-    await userEvent.click(depositButton);
-    expect(onClickDepositMock).toHaveBeenCalled();
-  });
-
   it('should apply correct formatting', async () => {
     const { container } = render(
       <AccountTable

libs/accounts/src/lib/transfer-form.spec.tsx

@@ -88,9 +88,6 @@ describe('TransferForm', () => {
   });
 
   it('validates a manually entered address', async () => {
-    // 1003-TRAN-012
-    // 1003-TRAN-013
-    // 1003-TRAN-004
     render(<TransferForm {...props} />);
     submit();
     expect(await screen.findAllByText('Required')).toHaveLength(3);
@@ -119,11 +116,6 @@ describe('TransferForm', () => {
   });
 
   it('validates fields and submits', async () => {
-    // 1003-TRAN-002
-    // 1003-TRAN-003
-    // 1002-WITH-010
-    // 1003-TRAN-011
-    // 1003-TRAN-014
     render(<TransferForm {...props} />);
 
     // check current pubkey not shown

libs/assets/src/lib/asset-details-table.tsx

@@ -57,16 +57,7 @@ export const rows: Rows = [
     key: AssetDetail.ID,
     label: t('ID'),
     tooltip: '',
-    value: (asset) => (
+    value: (asset) => truncateMiddle(asset.id),
-      <>
-        {truncateMiddle(asset.id)}{' '}
-        <CopyWithTooltip text={asset.id}>
-          <button title={t('Copy id to clipboard')}>
-            <VegaIcon size={14} name={VegaIconNames.COPY} />
-          </button>
-        </CopyWithTooltip>
-      </>
-    ),
   },
   {
     key: AssetDetail.TYPE,

libs/assets/src/lib/assets-data-provider.ts

@@ -4,10 +4,9 @@ import {
 } from '@vegaprotocol/data-provider';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { AssetsDocument } from './__generated__/Assets';
-import { AssetStatus } from '@vegaprotocol/types';
+import * as Schema from '@vegaprotocol/types';
 import type { AssetsQuery } from './__generated__/Assets';
 import type { Asset } from './asset-data-provider';
-import { DENY_LIST } from './constants';
 
 export interface BuiltinAssetSource {
   __typename: 'BuiltinAsset';
@@ -49,7 +48,6 @@ export const assetsMapProvider = makeDerivedDataProvider<
   }
 );
 
-/** Returns a record of assets by id */
 export const useAssetsMapProvider = () =>
   useDataProvider({
     dataProvider: assetsMapProvider,
@@ -60,32 +58,13 @@ export const enabledAssetsProvider = makeDerivedDataProvider<
   ReturnType<typeof getData>,
   never
 >([assetsProvider], ([assets]) =>
-  (assets as ReturnType<typeof getData>)
+  (assets as ReturnType<typeof getData>).filter(
-    .filter((a) => a.status === AssetStatus.STATUS_ENABLED)
+    (a) => a.status === Schema.AssetStatus.STATUS_ENABLED
-    .filter((a) => {
+  )
-      const env = process.env['NX_VEGA_ENV'];
-
-      if (!env || !DENY_LIST[env]) return true;
-
-      if (DENY_LIST[env].includes(a.id)) {
-        return false;
-      }
-
-      return true;
-    })
 );
 
-/** Returns all assets */
 export const useAssetsDataProvider = () =>
   useDataProvider({
     dataProvider: assetsProvider,
     variables: undefined,
   });
-
-/** Returns assets that are enabled and are not on the deny list */
-export const useEnabledAssets = () => {
-  return useDataProvider({
-    dataProvider: enabledAssetsProvider,
-    variables: undefined,
-  });
-};

libs/assets/src/lib/constants.ts

@@ -1,67 +1,4 @@
 import { t } from '@vegaprotocol/i18n';
-
 export const WITHDRAW_THRESHOLD_TOOLTIP_TEXT = t(
   "The maximum you can withdraw instantly. There's no limit on the size of a withdrawal, but all withdrawals over the threshold will have a delay time added to them"
 );
-
-// List of defunct and no longer used assets that were created for various testnets
-export const DENY_LIST: Record<string, string[]> = {
-  TESTNET: [
-    '07f8ce4e3df6c649f3fd794112f545ede9fbd9cfa76a9e380a7502a8d525e4db',
-    '0b87ac58d4af7fc11c8b417153fcb62631cfd9643835ef28db3f5a1caef0b379',
-    '169fd651dd1303fc6f3e1dee8349439140cf467a190bc9a04bff3e617509cfd4',
-    '16ae5dbb1fd7aa2ddef725703bfe66b3647a4da7b844bfdd04e985756f53d9d6',
-    '177e8f6c25a955bd18475084b99b2b1d37f28f3dec393fab7755a7e69c3d8c3b',
-    '20ffe5b1f70364a6b976007d96d306345bc7b880256ddffbbea2c590096ef375',
-    '2792b6ead78a812bd0169b2adbe9c2ea5b8c21510e40b93bf8d2cba6a0838e90',
-    '27c0229ab9edc6a3ba6a3e9716c1b324d6515a3168004256879e2de7c240f453',
-    '285923fed8c66ffb416b163e8ec72d3a87b9b8e2570e7ee7fe97d7092a918bc8',
-    '2af02165ef5ea1d1284b4251117eaae45faa961ec918e3f69b66903a18822387',
-    '2bf406160d06280d92412605eb397d08142736f4e17967e404dc892da278e9da',
-    '373d90d97bd3f97f0c13cf449926cfd7f1ed5f3746c3091e8dd894d60bf5eac8',
-    '3c7d6bd83dac3174923ba65f3af01f42858e267ca5b722fe2b0b3fec14e98ec2',
-    '434b502cabb7a9a36d3036a599d589537da293d8bbab224692629351a7926249',
-    '43bb50d6ba0a871088014cb204079ace4811970ce3d52b15896f6e7a88f900b7',
-    '46e9d23142762db57751b1b507e15747fe9478de504cbc4a0bffd828c39e3776',
-    '4b6957c6a184b002db80c7a4dd811d0e70866be4a4c8fffa4894e78aa132b407',
-    '4cbe1ad4cf232fb2232176e3f440f6e6fdc3ba7b1d95a99cb69116b9e379eae8',
-    '4e4e80abff30cab933b8c4ac6befc618372eb76b2cbddc337eff0b4a3a4d25b8',
-    '51eed0c17e3287996ba6006ce56de2591550ebfad46631f3a0129886967420e1',
-    '522e09779d984ae77b60036f4ecd80f0491f5f0c8cc386a0712b78a020ab62e6',
-    '5c950d4cfe1aaf9174c4358ee5df03f7e6bc556eac06a012cf6c07db154e20c4',
-    '5d8eb4e4e385b85c5c11f47111f315d5d201e04f4ef5e294763bf51036974b91',
-    '5dd5c226e944b4c3df3e8dbbbc473e72fb134f4c5b82a1968cc3cf7c1b40fe9e',
-    '638b4dbe4f3ce5b81546bef29108e8374a7293012c6189ca00f287f8c62a98a5',
-    '644c3a6e258382542a108c4dca16fae93657b6ff40238b2bb55854a125316052',
-    '71ea74ef1aa7582bcdd4ef843b3e79584ded4d16e692f3946cac4c9d61aed4f2',
-    '72f051ea66686ae004086f1ad086866f720f25896319abf3427cae101a58d985',
-    '827bbacde0dd5bfec857933dbbf642147f2afe6a9db0a543839b1b5239ca6786',
-    '83f4970aa1aeab85d01d8a976cbfd0fb3afedf391e18197e8c94c4021b3dffa1',
-    '84a20b554854c9af10ef84d308795dfae455834d1a207798292d66e19fd72c92',
-    '84fff099818dc4f5319477f0812b4341565cfb32ccf735beede734e386b8108f',
-    '85771250f0aa84727a1c01ba8926e59217ca13a7706ba03cf2ad95abbbc2e3bc',
-    '8a246b15bf185065d3f41a710f3eea0fbbe8754a8464501cf4a6d253d69c6423',
-    '8e5553ee4e95db51523640d1d03b00c8ab31dd69d787e169b0d958ef52e19a0a',
-    '92747340d922e9cda5bde17c46af8b409e47d6342f3b9c8fb058a34c6206d373',
-    '9b43c6791aebed5f7b38d91907539173aa278de88294b6422f3dd8282cd2c6e2',
-    '9e0bb9bd7ea2ec51efcdc98b432b6f0b055b2ed7973cfac9b44899d6e6c5deab',
-    'a0cf0835cb5af7bd03c56d12d846eed81c182eab36ea61c074961c115da9c8c4',
-    'a26dc4f6dea91e80d42e4736da7fe3c42f6275df9c4dca48be3ef96850192242',
-    'a4c945aea50ef321eabf8a3bcf0b8bb74288452c4638876ee4df5fb59be4a0ec',
-    'ae28c1043e79bdb95cae0e9919d4436157d14b183e24ab4572793812f3d89222',
-    'b0cf8be4e4d1d2ac5156c2298aa42edc7a74d25b7838d06e2279e94018a47f3f',
-    'b6d11705cb456768ff8271074dd8adcd78bd042a27fc205e9b52f9f945f42ea1',
-    'be478570584211521890fb65a41bded4d2bf29beb0b61ac3cc3b97f828a27b22',
-    'befde6d78ea1c996ae1d959342730220e274992097aeeae00c908a971314e6ae',
-    'bf5b9464d154ffeff57f05f90b223c1045f0754befd01a9a42c99382115e7833',
-    'd2239a7c92bc5c72a959a73ccee7727ba0966f4d88a33d71dbbc26e3f171555d',
-    'd3f9cf6e1711595b4588366a96b725fc039f72a8a28b2e4c1b630016dd2eed39',
-    'd9a9ab00bb79ce7dca7f6329ab627dcea2e53e5c16b85bf4aa8c3980b76fad57',
-    'dd73f7d1e721ef5cba95f454a3019521456c1b43b97084ad29e3e6509148d45d',
-    'eb30d55e90e1f9e5c4727d6fa2a5a8cd36ab9ae9738eb8f3faf53e2bee4861ee',
-    'ede4076aef07fd79502d14326c54ab3911558371baaf697a19d077f4f89de399',
-    'f481abe5700c6940ca996adfa9d07c9d9f07a486a7ce9cdb2e6ee0fa6450fe31',
-    'f7355ec52730c2e6ba02216da8501b4b6934cd363511e9d47ae5b97056d02703',
-    'fdf0ec118d98393a7702cf72e46fc87ad680b152f64b2aac59e093ac2d688fbb',
-  ],
-};

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

@@ -63,9 +63,7 @@ export const CandlesChartContainer = ({
                 overlays,
                 studies,
                 notEnoughDataText: (
-                  <span className="text-xs text-center">
+                  <span className="text-xs text-center">{t('No data')}</span>
-                    {t('No open orders')}
-                  </span>
                 ),
                 initialNumCandlesToDisplay: candlesCount,
                 studySize: STUDY_SIZE,

libs/datagrid/src/lib/cells/market-name-cell.tsx

@@ -14,17 +14,16 @@ export const MarketProductPill = ({
 }: {
   productType?: ProductType;
 }) => {
-  if (!productType) {
-    return null;
-  }
   return (
-    <Pill
+    productType && (
-      size="xxs"
+      <Pill
-      className="uppercase ml-0.5"
+        size="xxs"
-      title={ProductTypeMapping[productType]}
+        className="uppercase ml-0.5"
-    >
+        title={ProductTypeMapping[productType]}
-      {ProductTypeShortName[productType]}
+      >
-    </Pill>
+        {ProductTypeShortName[productType]}
+      </Pill>
+    )
   );
 };
 

libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx

@@ -37,7 +37,6 @@ import {
   AccordionChevron,
   AccordionPanel,
   Intent,
-  ExternalLink,
   Pill,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
@@ -386,21 +385,7 @@ export const DealTicketMarginDetails = ({
         value={liquidationPriceEstimateRange}
         formattedValue={liquidationPriceEstimate}
         symbol={quoteName}
-        labelDescription={
+        labelDescription={LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}
-          <>
-            <span>{LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}</span>{' '}
-            <span>
-              {t('For full details please see ')}
-              <ExternalLink
-                href={
-                  'https://github.com/vegaprotocol/specs/blob/master/non-protocol-specs/0012-NP-LIPE-liquidation-price-estimate.md'
-                }
-              >
-                {t('liquidation price estimate documentation.')}
-              </ExternalLink>
-            </span>
-          </>
-        }
       />
       {partyId && (
         <AccountBreakdownDialog

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

@@ -43,7 +43,7 @@ import {
   REDUCE_ONLY_TOOLTIP,
   stopSubmit,
   getNotionalSize,
-  getBaseQuoteUnit,
+  getAssetUnit,
 } from './deal-ticket';
 import { TypeToggle } from './type-selector';
 import {
@@ -854,7 +854,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   }, [watch, market.id, updateStoredFormValues]);
 
   const quoteName = getQuoteName(market);
-  const assetUnit = getBaseQuoteUnit(
+  const assetUnit = getAssetUnit(
     market.tradableInstrument.instrument.metadata.tags
   );
 

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

@@ -127,7 +127,7 @@ const getDefaultValues = (
   ...storedValues,
 });
 
-export const getBaseQuoteUnit = (tags?: string[] | null) =>
+export const getAssetUnit = (tags?: string[] | null) =>
   tags
     ?.find((tag) => tag.startsWith('base:') || tag.startsWith('ticker:'))
     ?.replace(/^[^:]*:/, '');
@@ -273,7 +273,9 @@ export const DealTicket = ({
 
   const assetSymbol = getAsset(market).symbol;
 
-  const assetUnit = getQuoteName(market);
+  const assetUnit = getAssetUnit(
+    market.tradableInstrument.instrument.metadata.tags
+  );
 
   const summaryError = useMemo(() => {
     if (!pubKey) {

libs/deal-ticket/src/constants.ts

@@ -60,7 +60,7 @@ export const EST_FEES_TOOLTIP_TEXT = t(
 );
 
 export const LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT = t(
-  'This is an approximation for the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.'
+  'This is an approximation (or a range) for the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.'
 );
 
 export const EST_SLIPPAGE = t(

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

@@ -1,14 +1,18 @@
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { AsyncRendererInline } from '@vegaprotocol/ui-toolkit';
 import { DepositManager } from './deposit-manager';
-import { useEnabledAssets } from '@vegaprotocol/assets';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { enabledAssetsProvider } from '@vegaprotocol/assets';
 
 /**
  *  Fetches data required for the Deposit page
  */
 export const DepositContainer = ({ assetId }: { assetId?: string }) => {
   const { VEGA_ENV } = useEnvironment();
-  const { data, error, loading } = useEnabledAssets();
+  const { data, loading, error } = useDataProvider({
+    dataProvider: enabledAssetsProvider,
+    variables: undefined,
+  });
 
   return (
     <AsyncRendererInline data={data} loading={loading} error={error}>

libs/deposits/src/lib/deposit-form.spec.tsx

@@ -148,7 +148,7 @@ describe('Deposit form', () => {
       });
 
       fireEvent.submit(screen.getByTestId('deposit-form'));
-      // 1001-DEPO-004
+
       expect(
         await screen.findByText(
           "You can't deposit more than you have in your Ethereum wallet, 5"

libs/environment/src/components/app-failure/app-failure.tsx

@@ -1,4 +1,6 @@
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+import { Button, Splash } from '@vegaprotocol/ui-toolkit';
+import { useNodeSwitcherStore } from '../../hooks/use-node-switcher-store';
 
 export const AppFailure = ({
   title,
@@ -7,10 +9,16 @@ export const AppFailure = ({
   title: string;
   error?: string | null;
 }) => {
+  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
   return (
     <Splash>
-      <p className="mb-4 text-xl">{title}</p>
+      <div className="text-center">
-      {error && <p className="mb-8 text-sm">{error}</p>}
+        <p className="mb-4 text-xl">{title}</p>
+        {error && <p className="mb-8 text-sm">{error}</p>}
+        <Button onClick={() => setNodeSwitcher(true)}>
+          {t('Change node')}
+        </Button>
+      </div>
     </Splash>
   );
 };

libs/environment/src/components/index.ts

@@ -4,5 +4,4 @@ export * from './network-loader';
 export * from './network-switcher';
 export * from './node-guard';
 export * from './node-switcher';
-export * from './node-failure';
 export * from './etherscan-link';

libs/environment/src/components/network-loader/network-loader.tsx

@@ -33,14 +33,15 @@ export function NetworkLoader({
     return undefined;
   }, [VEGA_URL, status, cache]);
 
+  const nonIdealWrapperClasses =
+    'h-full min-h-screen flex items-center justify-center';
+
   if (status === 'failed') {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <div className={nonIdealWrapperClasses}>{failure}</div>;
-    return <>{failure}</>;
   }
 
   if (status === 'default' || status === 'pending' || !client) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <div className={nonIdealWrapperClasses}>{skeleton}</div>;
-    return <>{skeleton}</>;
   }
 
   return <ApolloProvider client={client}>{children}</ApolloProvider>;

libs/environment/src/components/node-failure/index.ts

@@ -1 +0,0 @@
-export { NodeFailure } from './node-failure';

libs/environment/src/components/node-failure/node-failure.tsx

@@ -1,24 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
-import { useNodeSwitcherStore } from '../../hooks/use-node-switcher-store';
-
-export const NodeFailure = ({
-  title,
-  error,
-}: {
-  title: string;
-  error?: string | null;
-}) => {
-  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
-  return (
-    <Splash>
-      <div className="text-center">
-        <p className="mb-4 text-xl">{title}</p>
-        {error && <p className="mb-8 text-sm">{error}</p>}
-        <Button onClick={() => setNodeSwitcher(true)}>
-          {t('Change node')}
-        </Button>
-      </div>
-    </Splash>
-  );
-};

libs/environment/src/components/node-guard/node-guard.tsx

@@ -11,10 +11,11 @@ export const NodeGuard = ({
   skeleton: ReactNode;
 }) => {
   const { data, error, loading } = useNodeGuardQuery();
+  const wrapperClasses =
+    'h-full min-h-screen flex items-center justify-center text-black dark:text-white';
 
   if (loading) {
-    // eslint-disable-next-line
+    return <div className={wrapperClasses}>{skeleton}</div>;
-    return <>{skeleton}</>;
   }
 
   // It is possible for nodes to have a functioning datanode, but not return
@@ -22,10 +23,9 @@ export const NodeGuard = ({
   const netParamEdges = data?.networkParametersConnection.edges;
 
   if (error || !netParamEdges || !netParamEdges.length) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <div className={wrapperClasses}>{failure}</div>;
-    return <>{failure}</>;
   }
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // eslint-disable-next-line
   return <>{children}</>;
 };

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

@@ -338,6 +338,9 @@ function compileEnvVars() {
       'GITHUB_FEEDBACK_URL',
       process.env['NX_GITHUB_FEEDBACK_URL']
     ),
+    MAINTENANCE_PAGE: parseBoolean(
+      windowOrDefault('MAINTENANCE_PAGE', process.env['NX_MAINTENANCE_PAGE'])
+    ),
     GIT_BRANCH: windowOrDefault(
       'GIT_COMMIT_BRANCH',
       process.env['GIT_COMMIT_BRANCH']
@@ -521,6 +524,10 @@ function parseNetworks(value?: string) {
   return {};
 }
 
+function parseBoolean(value?: string) {
+  return ['true', '1', 'yes'].includes(value?.toLowerCase() || '');
+}
+
 /**
  * Provides a fallback ethereum provider url for test purposes in some apps
  */

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

@@ -50,6 +50,7 @@ export const envSchema = z
       message: 'The NX_ETHERSCAN_URL environment variable must be a valid url',
     }),
     HOSTED_WALLET_URL: z.optional(z.string()),
+    MAINTENANCE_PAGE: z.optional(z.boolean()),
     ETH_LOCAL_PROVIDER_URL: z.optional(z.string()),
     ETH_WALLET_MNEMONIC: z.optional(z.string()),
     ANNOUNCEMENTS_CONFIG_URL: z.optional(z.string()),

libs/funding-payments/src/lib/FundingPayments.graphql

@@ -6,12 +6,8 @@ fragment FundingPaymentFields on FundingPayment {
   timestamp
 }
 
-query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
+query FundingPayments($partyId: ID!, $pagination: Pagination) {
-  fundingPayments(
+  fundingPayments(partyId: $partyId, pagination: $pagination) {
-    partyId: $partyId
-    pagination: $pagination
-    marketId: $marketId
-  ) {
     edges {
       node {
         ...FundingPaymentFields

libs/funding-payments/src/lib/__generated__/FundingPayments.ts

@@ -8,7 +8,6 @@ export type FundingPaymentFieldsFragment = { __typename?: 'FundingPayment', mark
 export type FundingPaymentsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
   pagination?: Types.InputMaybe<Types.Pagination>;
-  marketId?: Types.InputMaybe<Types.Scalars['ID']>;
 }>;
 
 
@@ -24,8 +23,8 @@ export const FundingPaymentFieldsFragmentDoc = gql`
 }
     `;
 export const FundingPaymentsDocument = gql`
-    query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
+    query FundingPayments($partyId: ID!, $pagination: Pagination) {
-  fundingPayments(partyId: $partyId, pagination: $pagination, marketId: $marketId) {
+  fundingPayments(partyId: $partyId, pagination: $pagination) {
     edges {
       node {
         ...FundingPaymentFields
@@ -56,7 +55,6 @@ export const FundingPaymentsDocument = gql`
  *   variables: {
  *      partyId: // value for 'partyId'
  *      pagination: // value for 'pagination'
- *      marketId: // value for 'marketId'
  *   },
  * });
  */

libs/funding-payments/src/lib/funding-payments-manager.tsx

@@ -8,14 +8,12 @@ import { fundingPaymentsWithMarketProvider } from './funding-payments-data-provi
 
 interface FundingPaymentsManagerProps {
   partyId: string;
-  marketId?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   gridProps: ReturnType<typeof useDataGridEvents>;
 }
 
 export const FundingPaymentsManager = ({
   partyId,
-  marketId,
   onMarketClick,
   gridProps,
 }: FundingPaymentsManagerProps) => {
@@ -29,7 +27,7 @@ export const FundingPaymentsManager = ({
       }
       return false;
     },
-    variables: { partyId, marketId },
+    variables: { partyId },
   });
 
   return (

libs/ledger/src/index.ts

@@ -1,2 +1 @@
 export * from './lib/ledger-export-form';
-export * from './lib/ledger-download-store';

libs/ledger/src/lib/ledger-download-store.tsx

@@ -1,142 +0,0 @@
-import { create } from 'zustand';
-import type { ReactNode } from 'react';
-import { useCallback, useEffect } from 'react';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { useToasts, Intent } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
-import { subscribeWithSelector } from 'zustand/middleware';
-
-type DownloadSettings = {
-  title: string;
-  link: string;
-  filename?: string;
-  isDownloaded?: boolean;
-  isChanged?: boolean;
-  isError?: boolean;
-  errorMessage?: string;
-  isDelayed?: boolean;
-  intent?: Intent;
-  blob?: Blob;
-};
-
-export type LedgerDownloadFileStore = {
-  queue: DownloadSettings[];
-  hasItem: (link: string) => boolean;
-  removeItem: (link: string) => void;
-  updateQueue: (item: DownloadSettings) => void;
-};
-
-export const useLedgerDownloadFile = create<LedgerDownloadFileStore>()(
-  subscribeWithSelector((set, get) => ({
-    queue: [],
-    hasItem: (link: string) =>
-      get().queue.findIndex((item) => item.link === link) > -1,
-    removeItem: (link: string) => {
-      const queue = get().queue;
-      const index = queue.findIndex((item) => item.link === link);
-      if (index > -1) {
-        queue.splice(index, 1);
-        set({ queue: [...queue] });
-      }
-    },
-    updateQueue: (newitem: DownloadSettings) => {
-      const queue = get().queue;
-      const index = queue.findIndex((item) => item.link === newitem.link);
-      if (index > -1) {
-        queue[index] = { ...queue[index], ...newitem };
-        set({ queue: [...queue] });
-      } else {
-        set({ queue: [newitem, ...queue] });
-      }
-    },
-  }))
-);
-
-const ErrorContent = ({ message }: { message?: string }) => (
-  <>
-    <h4 className="mb-1 text-sm">{t('Something went wrong')}</h4>
-    <p>{message || t('Try again later')}</p>
-  </>
-);
-
-const InfoContent = ({ progress = false }) => (
-  <>
-    <p>{t('Please note this can take several minutes.')}</p>
-    <p>{t('You will be notified here when your file is ready.')}</p>
-    <h4 className="my-2">
-      {progress ? t('Still in progress') : t('Download has been started')}
-    </h4>
-  </>
-);
-
-export const useLedgerDownloadManager = () => {
-  const queue = useLedgerDownloadFile((store) => store.queue);
-  const updateQueue = useLedgerDownloadFile((store) => store.updateQueue);
-  const removeItem = useLedgerDownloadFile((store) => store.removeItem);
-  const [setToast, updateToast, hasToast, removeToast] = useToasts((store) => [
-    store.setToast,
-    store.update,
-    store.hasToast,
-    store.remove,
-  ]);
-
-  const onDownloadClose = useCallback(
-    (id: string) => {
-      removeToast(id);
-      removeItem(id);
-    },
-    [removeToast, removeItem]
-  );
-
-  const createToast = (item: DownloadSettings) => {
-    let content: ReactNode;
-    switch (true) {
-      case item.isError:
-        content = <ErrorContent message={item.errorMessage} />;
-        break;
-      case Boolean(item.blob):
-        content = (
-          <>
-            <h4 className="mb-1 text-sm">{t('Your file is ready')}</h4>
-            <a
-              onClick={() => onDownloadClose(item.link)}
-              href={URL.createObjectURL(item.blob as Blob)}
-              download={item.filename}
-              className="underline"
-            >
-              {t('Get file here')}
-            </a>
-          </>
-        );
-        break;
-      default:
-        content = <InfoContent progress={item.isDelayed} />;
-    }
-    const toast: Toast = {
-      id: item.link,
-      intent: item.intent || Intent.Primary,
-      content: (
-        <>
-          <h3 className="mb-1 text-md uppercase">{item.title}</h3>
-          {content}
-        </>
-      ),
-      onClose: () => onDownloadClose(item.link),
-      loader: !item.isDownloaded && !item.isError,
-    };
-    if (hasToast(toast.id)) {
-      updateToast(toast.id, toast);
-    } else {
-      setToast(toast);
-    }
-  };
-
-  useEffect(() => {
-    queue.forEach((item) => {
-      if (item.isChanged) {
-        createToast(item);
-        updateQueue({ ...item, isChanged: false });
-      }
-    });
-  }, [queue, createToast, updateQueue]);
-};

libs/ledger/src/lib/ledger-export-form.spec.tsx

@@ -1,21 +1,10 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { createDownloadUrl, LedgerExportForm } from './ledger-export-form';
 import { formatForInput, toNanoSeconds } from '@vegaprotocol/utils';
-import {
-  useLedgerDownloadManager,
-  useLedgerDownloadFile,
-} from './ledger-download-store';
-import { Intent } from '@vegaprotocol/ui-toolkit';
 
-const mockSetToast = jest.fn();
-jest.mock('@vegaprotocol/ui-toolkit', () => ({
-  ...jest.requireActual('@vegaprotocol/ui-toolkit'),
-  useToasts: jest.fn(() => [mockSetToast, jest.fn(), jest.fn(() => false)]),
-}));
 const vegaUrl = 'https://vega-url.co.uk/querystuff';
 
 const mockResponse = {
-  ok: true,
   headers: { get: jest.fn() },
   blob: () => '',
 };
@@ -39,7 +28,6 @@ describe('LedgerExportForm', () => {
 
   afterAll(() => {
     jest.useRealTimers();
-    jest.clearAllMocks();
   });
 
   it('should be properly rendered', async () => {
@@ -55,6 +43,8 @@ describe('LedgerExportForm', () => {
     // userEvent does not work with faked timers
     fireEvent.click(screen.getByTestId('ledger-download-button'));
 
+    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
+
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
         `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
@@ -62,6 +52,9 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=1691057410000000000`
       );
     });
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('assetID should be properly change request url', async () => {
@@ -82,6 +75,8 @@ describe('LedgerExportForm', () => {
 
     fireEvent.click(screen.getByTestId('ledger-download-button'));
 
+    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
+
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
         `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
@@ -89,6 +84,9 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=1691057410000000000`
       );
     });
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('date-from should properly change request url', async () => {
@@ -112,6 +110,8 @@ describe('LedgerExportForm', () => {
 
     fireEvent.click(screen.getByTestId('ledger-download-button'));
 
+    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
+
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
         `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
@@ -119,6 +119,10 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=${toNanoSeconds(newDate)}`
       );
     });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('date-to should properly change request url', async () => {
@@ -152,6 +156,10 @@ describe('LedgerExportForm', () => {
         )}`
       );
     });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('Time zone sentence should be properly displayed', () => {
@@ -197,50 +205,6 @@ describe('LedgerExportForm', () => {
       screen.queryByText(/^The downloaded file uses the UTC/)
     ).not.toBeInTheDocument();
   });
-
-  it('A toast notification should be displayed', async () => {
-    useLedgerDownloadFile.setState({ queue: [] });
-    const TestWrapper = () => {
-      useLedgerDownloadManager();
-      return (
-        <LedgerExportForm
-          partyId={partyId}
-          vegaUrl={vegaUrl}
-          assets={assetsMock}
-        />
-      );
-    };
-
-    render(<TestWrapper />);
-    expect(screen.getByText('symbol asset-id')).toBeInTheDocument();
-
-    fireEvent.click(screen.getByTestId('ledger-download-button'));
-
-    const link = `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
-      Object.keys(assetsMock)[0]
-    }&dateRange.startTimestamp=1691057410000000000`;
-
-    await waitFor(() => {
-      expect(mockSetToast).toHaveBeenCalledWith({
-        id: link,
-        content: expect.any(Object),
-        onClose: expect.any(Function),
-        intent: Intent.Primary,
-        loader: true,
-      });
-
-      expect(global.fetch).toHaveBeenCalledWith(link);
-    });
-
-    mockSetToast.mockClear();
-    (global.fetch as jest.Mock).mockClear();
-    fireEvent.click(screen.getByTestId('ledger-download-button')); // click again
-
-    await waitFor(() => {
-      expect(mockSetToast).toHaveBeenCalled();
-      expect(global.fetch).not.toHaveBeenCalled();
-    });
-  });
 });
 
 describe('createDownloadUrl', () => {

libs/ledger/src/lib/ledger-export-form.tsx

@@ -1,22 +1,17 @@
 import { useRef, useState } from 'react';
-import { format, subDays } from 'date-fns';
+import { z } from 'zod';
 import {
-  Intent,
-  Loader,
   TradingButton,
+  Loader,
   TradingFormGroup,
   TradingInput,
   TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
-import { z } from 'zod';
+import { toNanoSeconds, VEGA_ID_REGEX } from '@vegaprotocol/utils';
-import {
-  formatForInput,
-  toNanoSeconds,
-  VEGA_ID_REGEX,
-} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
-import { useLedgerDownloadFile } from './ledger-download-store';
+import { formatForInput } from '@vegaprotocol/utils';
+import { subDays } from 'date-fns';
 
 const DEFAULT_EXPORT_FILE_NAME = 'ledger_entries.csv';
 
@@ -78,14 +73,10 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const maxFromDate = formatForInput(new Date(dateTo || now.current));
   const maxToDate = formatForInput(now.current);
 
+  const [isDownloading, setIsDownloading] = useState(false);
   const [assetId, setAssetId] = useState(Object.keys(assets)[0]);
   const protohost = getProtoHost(vegaUrl);
-  const disabled = Boolean(!assetId);
+  const disabled = Boolean(!assetId || isDownloading);
-
-  const hasItem = useLedgerDownloadFile((store) => store.hasItem);
-  const updateDownloadQueue = useLedgerDownloadFile(
-    (store) => store.updateQueue
-  );
 
   const assetDropDown = (
     <TradingSelect
@@ -96,6 +87,7 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
       }}
       className="w-full"
       data-testid="select-ledger-asset"
+      disabled={isDownloading}
     >
       {Object.keys(assets).map((assetKey) => (
         <option key={assetKey} value={assetKey}>
@@ -105,78 +97,32 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
     </TradingSelect>
   );
 
-  const link = createDownloadUrl({
-    protohost,
-    partyId,
-    assetId,
-    dateFrom,
-    dateTo,
-  });
-
   const startDownload = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-
-    const title = t('Downloading for %s from %s till %s', [
-      assets[assetId],
-      format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
-      format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
-    ]);
-
-    const downloadStoreItem = {
-      title,
-      link,
-      isChanged: true,
-    };
-    if (hasItem(link)) {
-      updateDownloadQueue(downloadStoreItem);
-      return;
-    }
-    const ts = setTimeout(() => {
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Warning,
-        isDelayed: true,
-        isChanged: true,
-      });
-    }, 1000 * 30);
-
     try {
-      updateDownloadQueue(downloadStoreItem);
+      const link = createDownloadUrl({
+        protohost,
+        partyId,
+        assetId,
+        dateFrom,
+        dateTo,
+      });
+      setIsDownloading(true);
       const resp = await fetch(link);
-      if (!resp?.ok) {
-        if (resp?.status === 429) {
-          throw new Error('Too many requests. Try again later.');
-        }
-        throw new Error('Download of ledger entries failed');
-      }
       const { headers } = resp;
       const nameHeader = headers.get('content-disposition');
       const filename = nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        filename,
-      });
       const blob = await resp.blob();
       if (blob) {
-        updateDownloadQueue({
+        const link = document.createElement('a');
-          ...downloadStoreItem,
+        link.href = URL.createObjectURL(blob);
-          blob,
+        link.download = filename;
-          isDownloaded: true,
+        link.click();
-          isChanged: true,
-          intent: Intent.Success,
-        });
       }
     } catch (err) {
       localLoggerFactory({ application: 'ledger' }).error('Download file', err);
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Danger,
-        isError: true,
-        isChanged: true,
-        errorMessage: (err as Error).message || undefined,
-      });
     } finally {
-      clearTimeout(ts);
+      setIsDownloading(false);
     }
   };
 
@@ -199,6 +145,7 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
           id="date-from"
           value={dateFrom}
           onChange={(e) => setDateFrom(e.target.value)}
+          disabled={disabled}
           max={maxFromDate}
         />
       </TradingFormGroup>
@@ -209,10 +156,19 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
           id="date-to"
           value={dateTo}
           onChange={(e) => setDateTo(e.target.value)}
+          disabled={disabled}
           max={maxToDate}
         />
       </TradingFormGroup>
       <div className="relative text-sm" title={t('Download all to .csv file')}>
+        {isDownloading && (
+          <div
+            className="absolute flex items-center justify-center w-full h-full"
+            data-testid="download-spinner"
+          >
+            <Loader size="small" />
+          </div>
+        )}
         <TradingButton
           fill
           disabled={disabled}

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

@@ -238,7 +238,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
           volumeFormat={volumeFormat}
           priceFormat={priceFormat}
           notEnoughDataText={
-            <span className="text-xs text-center">{t('No open orders')}</span>
+            <span className="text-xs text-center">{t('No data')}</span>
           }
         />
       )}

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

@@ -11,8 +11,14 @@ import type {
   MarketDepthQuery,
   MarketDepthQueryVariables,
   MarketDepthUpdateSubscription,
+  PriceLevelFieldsFragment,
 } from './__generated__/MarketDepth';
 
+export type OrderbookData = {
+  asks: PriceLevelFieldsFragment[];
+  bids: PriceLevelFieldsFragment[];
+};
+
 interface OrderbookManagerProps {
   marketId: string;
   onClick: (args: { price?: string; size?: string }) => void;

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

@@ -238,7 +238,7 @@ export const Orderbook = ({
                   </>
                 ) : (
                   <div className="absolute inset-0">
-                    <Splash>{t('No open orders')}</Splash>
+                    <Splash>{t('No data')}</Splash>
                   </div>
                 )}
               </div>

libs/markets/src/lib/__generated__/markets-data.ts

@@ -3,12 +3,12 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type MarketsDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketState: Types.MarketState, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } };
+export type MarketsDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } };
 
 export type MarketsDataQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type MarketsDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketState: Types.MarketState, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
+export type MarketsDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
 
 export const MarketsDataFieldsFragmentDoc = gql`
     fragment MarketsDataFields on MarketData {
@@ -20,7 +20,6 @@ export const MarketsDataFieldsFragmentDoc = gql`
   markPrice
   trigger
   staticMidPrice
-  marketState
   marketTradingMode
   indicativeVolume
   indicativePrice

libs/markets/src/lib/market-data-provider.ts

@@ -126,16 +126,6 @@ export const marketTradingModeProvider = makeDerivedDataProvider<
     (parts[0] as ReturnType<typeof getData>)?.marketTradingMode
 );
 
-export const marketStateProvider = makeDerivedDataProvider<
-  MarketDataFieldsFragment['marketState'] | undefined,
-  never,
-  MarketDataQueryVariables
->(
-  [marketDataProvider],
-  (parts, variables, prevData) =>
-    (parts[0] as ReturnType<typeof getData>)?.marketState
-);
-
 export const fundingRateProvider = makeDerivedDataProvider<
   string,
   never,
@@ -186,11 +176,3 @@ export const useMarketTradingMode = (marketId?: string, skip?: boolean) => {
     skip: skip || !marketId,
   });
 };
-
-export const useMarketState = (marketId?: string, skip?: boolean) => {
-  return useDataProvider({
-    dataProvider: marketStateProvider,
-    variables: { marketId: marketId || '' },
-    skip: skip || !marketId,
-  });
-};

libs/markets/src/lib/markets-data.graphql

@@ -7,7 +7,6 @@ fragment MarketsDataFields on MarketData {
   markPrice
   trigger
   staticMidPrice
-  marketState
   marketTradingMode
   indicativeVolume
   indicativePrice