chore: use random with seed to fix hydration warning

CODEOWNERS

@@ -1,3 +1,2 @@
-* @vegaprotocol/frontend
-* @vegaprotocol/frontend-qa
+* @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={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+          failure={<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
         >
           <Suspense fallback={splashLoading}>
             <RouterProvider router={router} fallbackElement={splashLoading} />

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';
@@ -184,7 +184,7 @@ const Web3Container = ({
                     <TemplateSidebar sidebar={sideBar}>
                       <AppRouter />
                     </TemplateSidebar>
-                    <footer className="p-4 border-t border-neutral-700 break-all">
+                    <footer className="p-4 break-all border-t border-neutral-700">
                       <NetworkInfo />
                     </footer>
                   </AppLayout>
@@ -312,7 +312,7 @@ const AppContainer = () => {
           <NodeGuard
             skeleton={<div>{t('Loading')}</div>}
             failure={
-              <AppFailure title={t('NodeUnsuitable', { url: VEGA_URL })} />
+              <NodeFailure title={t('NodeUnsuitable', { url: VEGA_URL })} />
             }
           >
             <AsyncRenderer<EthereumConfig | null>

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

@@ -718,6 +718,8 @@
   "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",
@@ -738,6 +740,8 @@
   "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)",
@@ -914,5 +918,31 @@
   "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.tsx

@@ -263,7 +263,10 @@ const NewTransferSummary = ({ proposalId }: { proposalId?: string | null }) => {
   return (
     <span>
       {GovernanceTransferKindMapping[details.kind.__typename]}{' '}
-      {t('transfer from')} <Lozenge>{truncateMiddle(details.source)}</Lozenge>{' '}
+      {t('transfer from')}{' '}
+      <Lozenge>
+        {truncateMiddle(details.source) || t(details.sourceType)}
+      </Lozenge>{' '}
       {t('to')} <Lozenge>{truncateMiddle(details.destination)}</Lozenge>
     </span>
   );

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

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

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

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

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

@@ -30,6 +30,8 @@ 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 = {
@@ -111,6 +113,14 @@ 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,19 +47,17 @@ fragment UpdateReferralProgram on Proposal {
   terms {
     change {
       ... on UpdateReferralProgram {
-        changes {
-          benefitTiers {
-            minimumEpochs
-            minimumRunningNotionalTakerVolume
-            referralDiscountFactor
-            referralRewardFactor
-          }
-          endOfProgramTimestamp
-          windowLength
-          stakingTiers {
-            minimumStakedTokens
-            referralRewardMultiplier
-          }
+        benefitTiers {
+          minimumEpochs
+          minimumRunningNotionalTakerVolume
+          referralDiscountFactor
+          referralRewardFactor
+        }
+        endOfProgram: endOfProgramTimestamp
+        windowLength
+        stakingTiers {
+          minimumStakedTokens
+          referralRewardMultiplier
         }
       }
     }

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

@@ -47,19 +47,17 @@ fragment UpdateReferralPrograms on Proposal {
   terms {
     change {
       ... on UpdateReferralProgram {
-        changes {
-          benefitTiers {
-            minimumEpochs
-            minimumRunningNotionalTakerVolume
-            referralDiscountFactor
-            referralRewardFactor
-          }
-          endOfProgramTimestamp
-          windowLength
-          stakingTiers {
-            minimumStakedTokens
-            referralRewardMultiplier
-          }
+        benefitTiers {
+          minimumEpochs
+          minimumRunningNotionalTakerVolume
+          referralDiscountFactor
+          referralRewardFactor
+        }
+        endOfProgram: endOfProgramTimestamp
+        windowLength
+        stakingTiers {
+          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', 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 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 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', 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 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 const NewMarketProductFieldsFragmentDoc = gql`
     fragment NewMarketProductFields on Proposal {
@@ -75,19 +75,17 @@ export const UpdateReferralProgramsFragmentDoc = gql`
   terms {
     change {
       ... on UpdateReferralProgram {
-        changes {
-          benefitTiers {
-            minimumEpochs
-            minimumRunningNotionalTakerVolume
-            referralDiscountFactor
-            referralRewardFactor
-          }
-          endOfProgramTimestamp
-          windowLength
-          stakingTiers {
-            minimumStakedTokens
-            referralRewardMultiplier
-          }
+        benefitTiers {
+          minimumEpochs
+          minimumRunningNotionalTakerVolume
+          referralDiscountFactor
+          referralRewardFactor
+        }
+        endOfProgram: endOfProgramTimestamp
+        windowLength
+        stakingTiers {
+          minimumStakedTokens
+          referralRewardMultiplier
         }
       }
     }

apps/static/src/assets/preloader.css

@@ -1,147 +0,0 @@
-.pre-loader {
-  display: flex;
-  width: 100%;
-  min-height: 100vh;
-  justify-content: center;
-  align-items: center;
-}
-.pre-loader .loader-item {
-  width: 10px;
-  height: 10px;
-  background: #000;
-}
-.pre-loader .pre-loader-center {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-.pre-loader .pre-loader-wrapper {
-  width: 50px;
-  height: 50px;
-  display: flex;
-  flex-wrap: wrap;
-}
-.pre-loader .loader-item:nth-child(0) {
-  animation-delay: 0ms;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:first-child {
-  animation-delay: -0.1s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(2) {
-  animation-delay: 0.3s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(3) {
-  animation-delay: -0.45s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(4) {
-  animation-delay: 1s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(5) {
-  animation-delay: -0.75s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(6) {
-  animation-delay: 0.9s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(7) {
-  animation-delay: -1.4s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(8) {
-  animation-delay: 1.6s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(9) {
-  animation-delay: -0.45s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(10) {
-  animation-delay: 1.5s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(11) {
-  animation-delay: -2.75s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(12) {
-  animation-delay: 1.2s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(13) {
-  animation-delay: -1.95s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(14) {
-  animation-delay: 2.8s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(15) {
-  animation-delay: -0.75s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(16) {
-  animation-delay: 4s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(17) {
-  animation-delay: -0.85s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(18) {
-  animation-delay: 1.8s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(19) {
-  animation-delay: -1.9s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(20) {
-  animation-delay: 5s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(21) {
-  animation-delay: -5.25s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(22) {
-  animation-delay: 4.4s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(23) {
-  animation-delay: -5.75s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(24) {
-  animation-delay: 4.8s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(25) {
-  animation-delay: -5s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item {
-  animation: flickering 0.4s linear infinite alternate;
-}
-@keyframes flickering {
-  0% {
-    opacity: 1;
-  }
-  25% {
-    opacity: 1;
-  }
-  26% {
-    opacity: 0;
-  }
-  to {
-    opacity: 0;
-  }
-}
-html.dark .pre-loader .loader-item {
-  background: #fff;
-}

apps/static/src/preloader.scss

@@ -1,58 +0,0 @@
-.pre-loader {
-  display: flex;
-  width: 100%;
-  min-height: 100vh;
-  justify-content: center;
-  align-items: center;
-  .loader-item {
-    width: 10px;
-    height: 10px;
-    background: black;
-  }
-  .pre-loader-center {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-  }
-  .pre-loader-wrapper {
-    width: 50px;
-    height: 50px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  @for $i from 0 through 25 {
-    .loader-item:nth-child(#{$i}) {
-      @if $i % 2 == 0 {
-        animation-delay: #{$i * 50 * random(5)}ms;
-        animation-direction: reverse;
-      } @else {
-        animation-delay: #{$i * -50 * random(5)}ms;
-        animation-direction: alternate;
-      }
-    }
-  }
-  .loader-item {
-    animation: flickering 0.4s linear alternate infinite;
-  }
-  @keyframes flickering {
-    0% {
-      opacity: 1;
-    }
-    25% {
-      opacity: 1;
-    }
-    26% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-}
-html.dark {
-  .pre-loader {
-    .loader-item {
-      background: white;
-    }
-  }
-}

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

@@ -1,201 +0,0 @@
-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/withdraw-key-to-key-validation.cy.ts

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

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

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

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

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

@@ -0,0 +1,48 @@
+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}
@@ -144,7 +144,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         </HeaderStat>
       )}
       <MarketProposalNotification marketId={market.id} />
-    </div>
+    </>
   );
 };
 

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

@@ -9,10 +9,9 @@ import { useGlobalStore, usePageTitleStore } from '../../stores';
 import { TradeGrid } from './trade-grid';
 import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Links, Routes } from '../../lib/links';
+import { Links } 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
@@ -57,7 +56,7 @@ const TitleUpdater = ({
   return null;
 };
 
-export const MarketPage = ({ closed }: { closed?: boolean }) => {
+export const MarketPage = () => {
   const { marketId } = useParams();
   const navigate = useNavigate();
   const currentRouteId = useGetCurrentRouteId();
@@ -70,25 +69,11 @@ export const MarketPage = ({ closed }: { closed?: boolean }) => {
 
   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, closed]);
+  }, [update, lastMarketId, data?.id]);
 
   useEffect(() => {
     if (largeScreen && view === undefined) {
@@ -97,7 +82,7 @@ export const MarketPage = ({ closed }: { closed?: boolean }) => {
         currentRouteId
       );
     }
-  }, [setViews, view, currentRouteId, largeScreen, closed]);
+  }, [setViews, view, currentRouteId, largeScreen]);
 
   const pinnedAsset = data && getAsset(data);
 

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

@@ -73,10 +73,19 @@ const MainGrid = memo(
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
-                    <Tab id="funding" name={t('Funding')}>
+                    <Tab id="funding-history" name={t('Funding history')}>
                       <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>
@@ -139,9 +148,6 @@ 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/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];
 
-    expect(within(cell).getByTestId('stack-cell-secondary')).toHaveTextContent(
-      'PRNT'
-    );
+    const cells = await container.findAllByRole('gridcell');
+    const cell = cells.find((el) => el.getAttribute('col-id') === 'code');
+
+    expect(
+      within(cell as HTMLElement).getByTestId('stack-cell-secondary')
+    ).toHaveTextContent('PRNT');
   });
 });

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

@@ -1,3 +1,4 @@
+import type { CellClickedEvent } from 'ag-grid-community';
 import compact from 'lodash/compact';
 import { isAfter } from 'date-fns';
 import type {
@@ -5,6 +6,7 @@ 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';
@@ -17,13 +19,11 @@ 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 = useClosedMarketClickHandler();
+  const handleOnSelect = useMarketClickHandler();
   const openAssetDialog = useAssetDetailsDialogStore((store) => store.open);
 
   const colDefs = useMemo(() => {
@@ -302,8 +302,11 @@ const ClosedMarketsDataGrid = ({
           return;
         }
 
-        // @ts-ignore metaKey exists
-        handleOnSelect(data.id, event ? event.metaKey : false);
+        handleOnSelect(
+          data.id,
+          // @ts-ignore metaKey exists
+          event ? event.metaKey : false
+        );
       }}
     />
   );

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

@@ -0,0 +1,67 @@
+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/portfolio-sidebar.tsx

@@ -0,0 +1,31 @@
+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/components/bootstrapper/bootstrapper.tsx

@@ -1,38 +1,29 @@
 import type { InMemoryCacheConfig } from '@apollo/client';
 import {
   AppFailure,
+  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 dynamic from 'next/dynamic';
 import type { ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
 
-export const DynamicLoader = dynamic(() => import('../preloader/preloader'), {
-  loading: () => <>Loading...</>,
-});
-
-export const AppLoader = ({ children }: { children: ReactNode }) => {
+export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   const {
     error,
     VEGA_URL,
     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 ||
@@ -41,22 +32,27 @@ export const AppLoader = ({ children }: { children: ReactNode }) => {
     !MOZILLA_EXTENSION_URL ||
     !DocsLinks
   ) {
-    return null;
+    return <AppLoader />;
   }
 
   return (
     <NetworkLoader
       cache={cacheConfig}
-      skeleton={<DynamicLoader />}
+      skeleton={<AppLoader />}
       failure={
         <AppFailure title={t('Could not initialize app')} error={error} />
       }
     >
       <NodeGuard
-        skeleton={<DynamicLoader />}
-        failure={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+        skeleton={<AppLoader />}
+        failure={<NodeFailure 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/index.tsx

@@ -1,2 +1,2 @@
-export * from './app-loader';
+export * from './bootstrapper';
 export * from './web3-provider';

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

@@ -6,14 +6,20 @@ 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 = ({ children }: { children: ReactNode }) => {
+export const Web3Provider = ({
+  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();
@@ -49,23 +55,20 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
     ETH_WALLET_MNEMONIC,
   ]);
 
+  if (error) {
+    return <>{failure}</>;
+  }
+
+  if (loading || !connectors.length) {
+    return <>{skeleton}</>;
+  }
+
   return (
-    <AsyncRenderer
-      loading={loading}
-      error={error}
-      data={connectors}
-      noDataCondition={(d) => {
-        if (!d) return true;
-        return d.length < 1;
-      }}
-      noDataMessage={t('Could not fetch Ethereum configuration')}
+    <Web3ProviderInternal
+      connectors={connectors}
+      defaultProvider={defaultProvider}
     >
-      <Web3ProviderInternal
-        connectors={connectors}
-        defaultProvider={defaultProvider}
-      >
-        <>{children}</>
-      </Web3ProviderInternal>
-    </AsyncRenderer>
+      <>{children}</>
+    </Web3ProviderInternal>
   );
 };

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

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

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

@@ -1,11 +1,16 @@
-import { Outlet, Routes, Route } from 'react-router-dom';
+import type { ReactNode } from 'react';
+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;
@@ -20,16 +25,7 @@ export const LayoutWithSidebar = () => {
 
   return (
     <div className={gridClasses}>
-      <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>
+      <div className="col-span-full">{header}</div>
       <main
         className={classNames('col-start-1 col-end-1', {
           'lg:col-end-3': !sidebarOpen,
@@ -40,9 +36,12 @@ 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('col-start-1 lg:col-start-2 min-h-0', {
-          hidden: !sidebarOpen,
-        })}
+        className={classNames(
+          '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,
+          }
+        )}
       >
         <SidebarContent />
       </aside>
@@ -54,7 +53,7 @@ export const LayoutWithSidebar = () => {
           'lg:row-start-2 lg:row-span-full lg:col-start-3'
         )}
       >
-        <Sidebar />
+        <Sidebar options={sidebar} />
       </div>
     </div>
   );

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

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

@@ -63,7 +63,7 @@ describe('Navbar', () => {
 
     const expectedLinks = [
       ['/', ''],
-      ['/markets/all', 'Markets'],
+      ['/markets', '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/all']);
+    renderComponent(['/markets']);
     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/all', 'Markets'],
+      ['/markets', 'Markets'],
       [`/markets/${marketId}`, 'Trading'],
       ['/portfolio', 'Portfolio'],
       ['/referrals', 'Referrals'],

apps/trading/components/navbar/navbar.tsx

@@ -264,6 +264,7 @@ 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,14 +3,12 @@ import { Filter, OrderListManager } from '@vegaprotocol/orders';
 import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
+import { useNavigateWithMeta } 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';
 
 export const FilterStatusValue = {
   [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
@@ -32,8 +30,7 @@ const AUTO_SIZE_COLUMNS = ['instrument-code'];
 
 export const OrdersContainer = ({ filter }: OrderContainerProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const onMarketClick = useMarketClickHandler(true);
-  const onOrderTypeClick = useMarketLiquidityClickHandler();
+  const navigate = useNavigateWithMeta();
   const { gridState, updateGridState } = useOrderListGridState(filter);
   const gridStoreCallbacks = useDataGridEvents(
     gridState,
@@ -51,8 +48,12 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
     <OrderListManager
       partyId={pubKey}
       filter={filter}
-      onMarketClick={onMarketClick}
-      onOrderTypeClick={onOrderTypeClick}
+      onMarketClick={(marketId, metaKey) => {
+        navigate(Links.MARKET(marketId), metaKey);
+      }}
+      onOrderTypeClick={(marketId, metaKey) =>
+        navigate(Links.LIQUIDITY(marketId), metaKey)
+      }
       isReadOnly={isReadOnly}
       gridProps={gridStoreCallbacks}
     />

apps/trading/components/preloader/preloader.tsx

@@ -1,26 +0,0 @@
-import { Loader } from '@vegaprotocol/ui-toolkit';
-
-export const Preloader = () => {
-  return (
-    <>
-      <style>
-        {`
-          body{
-            display: block;
-            width: 100%;
-            height: 100%;
-            margin: 0;
-          }
-           html.dark body{
-             background: #000;
-           }
-        `}
-      </style>
-      <div className="pre-loader">
-        <Loader />
-      </div>
-    </>
-  );
-};
-
-export default Preloader;

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

@@ -38,79 +38,68 @@ const walletContext = {
 } as VegaWalletContextShape;
 
 describe('Sidebar', () => {
-  it.each(['/markets/all', '/portfolio'])(
-    'does not render ticket and info',
-    (path) => {
-      render(
-        <VegaWalletContext.Provider value={walletContext}>
-          <MemoryRouter initialEntries={[path]}>
-            <Sidebar />
-          </MemoryRouter>
-        </VegaWalletContext.Provider>
-      );
+  beforeEach(() => {
+    useSidebar.setState({ views: {} });
+  });
 
-      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', () => {
+  it('renders options prop', () => {
     render(
       <VegaWalletContext.Provider value={walletContext}>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
-          <Sidebar />
+        <MemoryRouter>
+          <Sidebar options={<div data-testid="options" />} />
         </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();
-
-    // order and info sidebars are shown
-    expect(screen.getByTestId(ViewType.Order)).toBeInTheDocument();
-    expect(screen.getByTestId(ViewType.Info)).toBeInTheDocument();
+    expect(screen.getByTestId('options')).toBeInTheDocument();
   });
 
   it('renders selected state', async () => {
+    const routeId = '/markets/ABC';
     render(
       <VegaWalletContext.Provider value={walletContext}>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
-          <Sidebar />
+        <MemoryRouter initialEntries={[routeId]}>
+          <Sidebar
+            options={
+              <SidebarButton
+                view={ViewType.Deposit}
+                icon={VegaIconNames.DEPOSIT}
+                tooltip="Deposit"
+                routeId={'/markets/:marketId'}
+              />
+            }
+          />
         </MemoryRouter>
       </VegaWalletContext.Provider>
     );
 
     const settingsButton = screen.getByTestId(ViewType.Settings);
-    const orderButton = screen.getByTestId(ViewType.Order);
+    const depositButton = screen.getByTestId(ViewType.Deposit);
 
     // select settings first
     await userEvent.click(settingsButton);
     expect(settingsButton).toHaveClass('bg-vega-yellow text-black');
 
-    // switch to order
-    await userEvent.click(orderButton);
+    // switch to deposit
+    await userEvent.click(depositButton);
+
     expect(settingsButton).not.toHaveClass('bg-vega-yellow text-black');
-    expect(orderButton).toHaveClass('bg-vega-yellow text-black');
+    expect(depositButton).toHaveClass('bg-vega-yellow text-black');
 
     // close order
-    await userEvent.click(orderButton);
-    expect(orderButton).not.toHaveClass('bg-vega-yellow text-black');
+    await userEvent.click(depositButton);
+    expect(depositButton).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 { Route, Routes, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { create } from 'zustand';
 import { TransferContainer } from '@vegaprotocol/accounts';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
@@ -50,108 +50,14 @@ type SidebarView =
       type: ViewType.Settings;
     };
 
-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 = () => {
+export const Sidebar = ({ options }: { options?: ReactNode }) => {
   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">
-      <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>
+      {options && <nav className={navClasses}>{options}</nav>}
       <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
         <SidebarButton
           view={ViewType.ViewAs}
@@ -234,7 +140,7 @@ export const SidebarButton = ({
   );
 };
 
-const SidebarDivider = () => {
+export 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_tost_id';
+const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_toast_id';
 
 export const Telemetry = () => {
   const onboardingDissmissed = useOnboardingStore((store) => store.dismissed);

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

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

apps/trading/lib/links.ts

@@ -4,8 +4,7 @@ import trimEnd from 'lodash/trimEnd';
 // href creation
 export const Routes = {
   HOME: '/',
-  MARKETS: '/markets/all',
-  CLOSED_MARKETS: '/markets/all/closed/:marketId',
+  MARKETS: '/markets',
   MARKET: '/markets/:marketId',
   LIQUIDITY: '/liquidity/:marketId',
   PORTFOLIO: '/portfolio',
@@ -29,8 +28,6 @@ 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,21 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } 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,
@@ -25,21 +11,11 @@ import {
   useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
 import './styles.css';
-import { useGlobalStore, usePageTitleStore } from '../stores';
+import { usePageTitleStore } from '../stores';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
-import {
-  HashRouter,
-  useLocation,
-  Route,
-  Routes,
-  useSearchParams,
-} from 'react-router-dom';
-import { Connectors } from '../lib/vega-connectors';
-import { AppLoader, DynamicLoader } from '../components/app-loader';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { activeOrdersProvider } from '@vegaprotocol/orders';
-import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
+import { HashRouter, useLocation, Route, Routes } from 'react-router-dom';
+import { Bootstrapper } from '../components/bootstrapper';
 import { AnnouncementBanner } from '../components/banner';
 import { Navbar } from '../components/navbar';
 import classNames from 'classnames';
@@ -52,6 +28,10 @@ import { ViewingBanner } from '../components/viewing-banner';
 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!');
 
@@ -76,15 +56,6 @@ const Title = () => {
   );
 };
 
-const InitializeHandlers = () => {
-  useVegaTransactionManager();
-  useVegaTransactionUpdater();
-  useEthTransactionManager();
-  useEthTransactionUpdater();
-  useEthWithdrawApprovalsManager();
-  return null;
-};
-
 function AppBody({ Component }: AppProps) {
   const location = useLocation();
   const { VEGA_ENV } = useEnvironment();
@@ -124,9 +95,9 @@ function AppBody({ Component }: AppProps) {
       </div>
       <DialogsContainer />
       <ToastsManager />
-      <InitializeHandlers />
+      <TransactionHandlers />
       <MaybeConnectEagerly />
-      <PartyData />
+      <PartyActiveOrdersHandler />
       <Telemetry />
     </div>
   );
@@ -139,55 +110,26 @@ 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 <DynamicLoader />;
+    return <SSRLoader />;
   }
 
   return (
     <HashRouter>
-      <AppLoader>
+      <Bootstrapper>
         <AppBody {...props} />
-      </AppLoader>
+      </Bootstrapper>
       <NodeSwitcherDialog open={nodeSwitcherOpen} setOpen={setNodeSwitcher} />
     </HashRouter>
   );
 }
 
 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/_document.page.tsx

@@ -22,14 +22,17 @@ export default function Document() {
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
         <link rel="apple-touch-icon" content="/favicon.ico" />
 
-        {/* eslint-disable-next-line @next/next/no-css-tags */}
-        <link rel="stylesheet" href="/preloader.css" media="all" />
-
         {/* scripts */}
         <script src="/theme-setter.js" type="text/javascript" async />
       </Head>
       <Html>
-        <body className="bg-white dark:bg-vega-cdark-900 text-default font-alpha">
+        <body
+          // Nextjs will set body to display none until js runs. Because the entire app is client rendered
+          // and delivered via ipfs we override this to show a server side render loading animation until the
+          // js is downloaded and react takes over rendering
+          style={{ display: 'block' }}
+          className="bg-white dark:bg-vega-cdark-900 text-default font-alpha"
+        >
           <Main />
           <NextScript />
         </body>

apps/trading/pages/client-router.tsx

@@ -1,5 +1,5 @@
 import type { RouteObject } from 'react-router-dom';
-import { Navigate, Outlet, useRoutes } from 'react-router-dom';
+import { Navigate, 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 } from '../lib/links';
+import { Routes as AppRoutes } 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,11 +22,15 @@ 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 = () => (
@@ -36,18 +40,21 @@ const NotFound = () => (
 );
 
 export const routerConfig: RouteObject[] = compact([
-  // Pages that don't use the LayoutWithSidebar must come first
-  // to ensure they are matched before the catch all route '/*'
+  {
+    index: true,
+    element: <Home />,
+    id: AppRoutes.HOME,
+  },
   {
     path: 'disclaimer',
     element: <LayoutCentered />,
-    id: Routes.DISCLAIMER,
+    id: AppRoutes.DISCLAIMER,
     children: [{ index: true, element: <Disclaimer /> }],
   },
   // Referrals routing (the pages should be available if the feature flag is on)
   FLAGS.REFERRALS
     ? {
-        path: Routes.REFERRALS,
+        path: AppRoutes.REFERRALS,
         element: <LayoutWithSky />,
         children: [
           {
@@ -58,11 +65,11 @@ export const routerConfig: RouteObject[] = compact([
                 element: <ReferralStatistics />,
               },
               {
-                path: Routes.REFERRALS_CREATE_CODE,
+                path: AppRoutes.REFERRALS_CREATE_CODE,
                 element: <CreateCodeContainer />,
               },
               {
-                path: Routes.REFERRALS_APPLY_CODE,
+                path: AppRoutes.REFERRALS_APPLY_CODE,
                 element: <ApplyCodeForm />,
               },
             ],
@@ -74,75 +81,74 @@ export const routerConfig: RouteObject[] = compact([
         ],
       }
     : undefined,
-  // All other pages will use the sidebar
   {
-    path: '/*',
-    element: <LayoutWithSidebar />,
+    path: 'markets/*',
+    element: (
+      <LayoutWithSidebar
+        header={<MarketHeader />}
+        sidebar={<MarketsSidebar />}
+      />
+    ),
     children: [
       {
         index: true,
-        element: <Home />,
-        id: Routes.HOME,
+        element: <MarketsPage />,
+        id: AppRoutes.MARKETS,
       },
       {
-        path: 'markets',
-        element: <Outlet />,
-        children: [
-          {
-            index: true,
-            element: <Navigate to="all" />,
-          },
-          {
-            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: 'all',
+        element: <Navigate to="/markets" />,
       },
       {
-        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: ':marketId',
+        element: <MarketPage />,
+        id: AppRoutes.MARKET,
       },
     ],
   },
+  {
+    path: 'portfolio/*',
+    element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+    children: [
+      {
+        index: true,
+        element: <Portfolio />,
+        id: AppRoutes.PORTFOLIO,
+      },
+      {
+        path: 'assets',
+        element: <Assets />,
+        id: AppRoutes.ASSETS,
+        children: [
+          { index: true, element: <Navigate to="deposit" /> },
+          { path: 'deposit', element: <Deposit />, id: AppRoutes.DEPOSIT },
+          { path: 'withdraw', element: <Withdraw />, id: AppRoutes.WITHDRAW },
+          { path: 'transfer', element: <Transfer />, id: AppRoutes.TRANSFER },
+        ],
+      },
+    ],
+  },
+
+  {
+    path: 'liquidity/*',
+    element: (
+      <LayoutWithSidebar
+        header={<LiquidityHeader />}
+        sidebar={<LiquiditySidebar />}
+      />
+    ),
+    id: AppRoutes.LIQUIDITY,
+    children: [
+      {
+        path: ':marketId',
+        element: <Liquidity />,
+      },
+    ],
+  },
+  {
+    path: '*',
+    element: <NotFound />,
+  },
 ]);
 
 export const ClientRouter = () => {

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

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

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

@@ -0,0 +1,51 @@
+import { pseudoRandom } from '@vegaprotocol/ui-toolkit';
+
+const generate = pseudoRandom(1);
+
+export const SSRLoader = () => {
+  return (
+    <div
+      style={{
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <style jsx>{`
+        @keyframes flickering {
+          0% {
+            opacity: 1;
+          }
+          25% {
+            opacity: 1;
+          }
+          26% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
+      `}</style>
+      <div style={{ width: 50, height: 50, display: 'flex', flexWrap: 'wrap' }}>
+        {new Array(25).fill(null).map((_, i) => {
+          return (
+            <div
+              key={i}
+              style={{
+                width: 10,
+                height: 10,
+                animation: 'flickering 0.4s linear alternate infinite',
+                animationDelay: `-${generate()}s`,
+                animationDirection: i % 2 === 0 ? 'reverse' : 'alternate',
+                background: 'black',
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

apps/trading/pages/transaction-handlers.tsx

@@ -0,0 +1,20 @@
+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;
+};

apps/trading/public/preloader.css

@@ -1,116 +0,0 @@
-.pre-loader {
-  display: flex;
-  width: 100%;
-  min-height: 100vh;
-  justify-content: center;
-  align-items: center;
-}
-.pre-loader .loader-item {
-  width: 10px;
-  height: 10px;
-  background: #000;
-}
-.pre-loader .pre-loader-center {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-.pre-loader .pre-loader-wrapper {
-  width: 50px;
-  height: 50px;
-  display: flex;
-  flex-wrap: wrap;
-}
-@media (prefers-color-scheme: light) {
-  .pre-loader .loader-item {
-    background: #000;
-  }
-}
-.pre-loader .loader-item:nth-child(0) {
-  animation-delay: 0ms;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:first-child {
-  animation-delay: -50ms;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(2) {
-  animation-delay: 0.2s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(3) {
-  animation-delay: -0.6s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(4) {
-  animation-delay: 0.4s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(5) {
-  animation-delay: -0.5s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(6) {
-  animation-delay: 0.3s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(7) {
-  animation-delay: -1.4s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(8) {
-  animation-delay: 2s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(9) {
-  animation-delay: -0.9s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(10) {
-  animation-delay: 1.5s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(11) {
-  animation-delay: -0.55s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(12) {
-  animation-delay: 1.2s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(13) {
-  animation-delay: -0.65s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(14) {
-  animation-delay: 0.7s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item:nth-child(15) {
-  animation-delay: -3.75s;
-  animation-direction: alternate;
-}
-.pre-loader .loader-item:nth-child(16) {
-  animation-delay: 1.6s;
-  animation-direction: reverse;
-}
-.pre-loader .loader-item {
-  animation: flickering 0.4s linear infinite alternate;
-}
-@keyframes flickering {
-  0% {
-    opacity: 1;
-  }
-  25% {
-    opacity: 1;
-  }
-  26% {
-    opacity: 0;
-  }
-  to {
-    opacity: 0;
-  }
-}
-html.dark .pre-loader .loader-item {
-  background: #fff;
-}

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

@@ -45,6 +45,28 @@ 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
@@ -71,6 +93,27 @@ 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,6 +88,9 @@ 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);
@@ -116,6 +119,11 @@ 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/assets-data-provider.ts

@@ -4,9 +4,10 @@ import {
 } from '@vegaprotocol/data-provider';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { AssetsDocument } from './__generated__/Assets';
-import * as Schema from '@vegaprotocol/types';
+import { AssetStatus } 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';
@@ -48,6 +49,7 @@ export const assetsMapProvider = makeDerivedDataProvider<
   }
 );
 
+/** Returns a record of assets by id */
 export const useAssetsMapProvider = () =>
   useDataProvider({
     dataProvider: assetsMapProvider,
@@ -58,13 +60,32 @@ export const enabledAssetsProvider = makeDerivedDataProvider<
   ReturnType<typeof getData>,
   never
 >([assetsProvider], ([assets]) =>
-  (assets as ReturnType<typeof getData>).filter(
-    (a) => a.status === Schema.AssetStatus.STATUS_ENABLED
-  )
+  (assets as ReturnType<typeof getData>)
+    .filter((a) => a.status === 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,4 +1,67 @@
 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/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx

@@ -37,6 +37,7 @@ import {
   AccordionChevron,
   AccordionPanel,
   Intent,
+  ExternalLink,
   Pill,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
@@ -385,7 +386,21 @@ export const DealTicketMarginDetails = ({
         value={liquidationPriceEstimateRange}
         formattedValue={liquidationPriceEstimate}
         symbol={quoteName}
-        labelDescription={LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}
+        labelDescription={
+          <>
+            <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/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 (or a range) 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 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,18 +1,14 @@
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { AsyncRendererInline } from '@vegaprotocol/ui-toolkit';
 import { DepositManager } from './deposit-manager';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { enabledAssetsProvider } from '@vegaprotocol/assets';
+import { useEnabledAssets } from '@vegaprotocol/assets';
 
 /**
  *  Fetches data required for the Deposit page
  */
 export const DepositContainer = ({ assetId }: { assetId?: string }) => {
   const { VEGA_ENV } = useEnvironment();
-  const { data, loading, error } = useDataProvider({
-    dataProvider: enabledAssetsProvider,
-    variables: undefined,
-  });
+  const { data, error, loading } = useEnabledAssets();
 
   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,6 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
-import { Button } from '@vegaprotocol/ui-toolkit';
-import { useNodeSwitcherStore } from '../../hooks/use-node-switcher-store';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 
 export const AppFailure = ({
   title,
@@ -9,18 +7,10 @@ export const AppFailure = ({
   title: string;
   error?: string | null;
 }) => {
-  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
-  const nonIdealWrapperClasses =
-    'h-full min-h-screen flex items-center justify-center';
   return (
-    <div className={nonIdealWrapperClasses}>
-      <div className="text-center">
-        <p className="text-xl mb-4">{title}</p>
-        {error && <p className="text-sm mb-8">{error}</p>}
-        <Button onClick={() => setNodeSwitcher(true)}>
-          {t('Change node')}
-        </Button>
-      </div>
-    </div>
+    <Splash>
+      <p className="mb-4 text-xl">{title}</p>
+      {error && <p className="mb-8 text-sm">{error}</p>}
+    </Splash>
   );
 };

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

@@ -0,0 +1,9 @@
+import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
+
+export const AppLoader = () => {
+  return (
+    <Splash>
+      <Loader />
+    </Splash>
+  );
+};

libs/environment/src/components/app-loader/index.ts

@@ -0,0 +1 @@
+export { AppLoader } from './app-loader';

libs/environment/src/components/index.ts

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

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

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

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

@@ -0,0 +1,24 @@
+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,11 +11,10 @@ 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) {
-    return <div className={wrapperClasses}>{skeleton}</div>;
+    // eslint-disable-next-line
+    return <>{skeleton}</>;
   }
 
   // It is possible for nodes to have a functioning datanode, but not return
@@ -23,9 +22,10 @@ export const NodeGuard = ({
   const netParamEdges = data?.networkParametersConnection.edges;
 
   if (error || !netParamEdges || !netParamEdges.length) {
-    return <div className={wrapperClasses}>{failure}</div>;
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{failure}</>;
   }
 
-  // eslint-disable-next-line
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;
 };

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

@@ -338,9 +338,6 @@ 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']
@@ -524,10 +521,6 @@ 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,7 +50,6 @@ 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,8 +6,12 @@ fragment FundingPaymentFields on FundingPayment {
   timestamp
 }
 
-query FundingPayments($partyId: ID!, $pagination: Pagination) {
-  fundingPayments(partyId: $partyId, pagination: $pagination) {
+query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
+  fundingPayments(
+    partyId: $partyId
+    pagination: $pagination
+    marketId: $marketId
+  ) {
     edges {
       node {
         ...FundingPaymentFields

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

@@ -8,6 +8,7 @@ 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']>;
 }>;
 
 
@@ -23,8 +24,8 @@ export const FundingPaymentFieldsFragmentDoc = gql`
 }
     `;
 export const FundingPaymentsDocument = gql`
-    query FundingPayments($partyId: ID!, $pagination: Pagination) {
-  fundingPayments(partyId: $partyId, pagination: $pagination) {
+    query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
+  fundingPayments(partyId: $partyId, pagination: $pagination, marketId: $marketId) {
     edges {
       node {
         ...FundingPaymentFields
@@ -55,6 +56,7 @@ 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,12 +8,14 @@ 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) => {
@@ -27,7 +29,7 @@ export const FundingPaymentsManager = ({
       }
       return false;
     },
-    variables: { partyId },
+    variables: { partyId, marketId },
   });
 
   return (

libs/ledger/src/index.ts

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

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

@@ -0,0 +1,142 @@
+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,10 +1,21 @@
 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: () => '',
 };
@@ -28,6 +39,7 @@ describe('LedgerExportForm', () => {
 
   afterAll(() => {
     jest.useRealTimers();
+    jest.clearAllMocks();
   });
 
   it('should be properly rendered', async () => {
@@ -43,8 +55,6 @@ 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=${
@@ -52,9 +62,6 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=1691057410000000000`
       );
     });
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
   });
 
   it('assetID should be properly change request url', async () => {
@@ -75,8 +82,6 @@ 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=${
@@ -84,9 +89,6 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=1691057410000000000`
       );
     });
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
   });
 
   it('date-from should properly change request url', async () => {
@@ -110,8 +112,6 @@ 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,10 +119,6 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=${toNanoSeconds(newDate)}`
       );
     });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
   });
 
   it('date-to should properly change request url', async () => {
@@ -156,10 +152,6 @@ describe('LedgerExportForm', () => {
         )}`
       );
     });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
   });
 
   it('Time zone sentence should be properly displayed', () => {
@@ -205,6 +197,50 @@ 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,17 +1,22 @@
 import { useRef, useState } from 'react';
-import { z } from 'zod';
+import { format, subDays } from 'date-fns';
 import {
-  TradingButton,
+  Intent,
   Loader,
+  TradingButton,
   TradingFormGroup,
   TradingInput,
   TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
-import { toNanoSeconds, VEGA_ID_REGEX } from '@vegaprotocol/utils';
+import { z } from 'zod';
+import {
+  formatForInput,
+  toNanoSeconds,
+  VEGA_ID_REGEX,
+} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
-import { formatForInput } from '@vegaprotocol/utils';
-import { subDays } from 'date-fns';
+import { useLedgerDownloadFile } from './ledger-download-store';
 
 const DEFAULT_EXPORT_FILE_NAME = 'ledger_entries.csv';
 
@@ -73,10 +78,14 @@ 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 || isDownloading);
+  const disabled = Boolean(!assetId);
+
+  const hasItem = useLedgerDownloadFile((store) => store.hasItem);
+  const updateDownloadQueue = useLedgerDownloadFile(
+    (store) => store.updateQueue
+  );
 
   const assetDropDown = (
     <TradingSelect
@@ -87,7 +96,6 @@ 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}>
@@ -97,32 +105,78 @@ 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();
-    try {
-      const link = createDownloadUrl({
-        protohost,
-        partyId,
-        assetId,
-        dateFrom,
-        dateTo,
+
+    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,
       });
-      setIsDownloading(true);
+    }, 1000 * 30);
+
+    try {
+      updateDownloadQueue(downloadStoreItem);
       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) {
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        link.click();
+        updateDownloadQueue({
+          ...downloadStoreItem,
+          blob,
+          isDownloaded: true,
+          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 {
-      setIsDownloading(false);
+      clearTimeout(ts);
     }
   };
 
@@ -145,7 +199,6 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
           id="date-from"
           value={dateFrom}
           onChange={(e) => setDateFrom(e.target.value)}
-          disabled={disabled}
           max={maxFromDate}
         />
       </TradingFormGroup>
@@ -156,19 +209,10 @@ 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/network-parameters/src/use-network-params.ts

@@ -128,6 +128,26 @@ export const NetworkParams = {
     'governance_proposal_VolumeDiscountProgram_requiredMajority',
   governance_proposal_VolumeDiscountProgram_requiredParticipation:
     'governance_proposal_VolumeDiscountProgram_requiredParticipation',
+  governance_proposal_transfer_maxAmount:
+    'governance_proposal_transfer_maxAmount',
+  governance_proposal_transfer_maxClose:
+    'governance_proposal_transfer_maxClose',
+  governance_proposal_transfer_maxEnact:
+    'governance_proposal_transfer_maxEnact',
+  governance_proposal_transfer_maxFraction:
+    'governance_proposal_transfer_maxFraction',
+  governance_proposal_transfer_minClose:
+    'governance_proposal_transfer_minClose',
+  governance_proposal_transfer_minEnact:
+    'governance_proposal_transfer_minEnact',
+  governance_proposal_transfer_minProposerBalance:
+    'governance_proposal_transfer_minProposerBalance',
+  governance_proposal_transfer_minVoterBalance:
+    'governance_proposal_transfer_minVoterBalance',
+  governance_proposal_transfer_requiredMajority:
+    'governance_proposal_transfer_requiredMajority',
+  governance_proposal_transfer_requiredParticipation:
+    'governance_proposal_transfer_requiredParticipation',
   validators_delegation_minAmount: 'validators_delegation_minAmount',
   spam_protection_minimumWithdrawalQuantumMultiple:
     'spam_protection_minimumWithdrawalQuantumMultiple',

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

@@ -104,7 +104,13 @@ describe('TradesTable', () => {
     const [firstDateCell, secondDateCell] = createdAtCells;
 
     // Compare the times as strings
-    expect(firstDateCell.textContent).toBe('6:59:00 PM');
-    expect(secondDateCell.textContent).toBe('7:00:00 PM');
+    // Note: I've changed it form literal strings to this because of the
+    // locale mismatch. Mocking the format also resulted with strange "space" diff.
+    expect(firstDateCell.textContent).toBe(
+      getTimeFormat().format(new Date(trade2.createdAt))
+    );
+    expect(secondDateCell.textContent).toBe(
+      getTimeFormat().format(new Date(trade.createdAt))
+    );
   });
 });

libs/types/src/__generated__/types.ts

@@ -4605,6 +4605,8 @@ export type QueryreferralFeeStatsArgs = {
   assetId?: InputMaybe<Scalars['ID']>;
   epoch?: InputMaybe<Scalars['Int']>;
   marketId?: InputMaybe<Scalars['ID']>;
+  referee?: InputMaybe<Scalars['ID']>;
+  referrer?: InputMaybe<Scalars['ID']>;
 };
 
 
@@ -4620,9 +4622,9 @@ export type QueryreferralSetRefereesArgs = {
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QueryreferralSetStatsArgs = {
   epoch?: InputMaybe<Scalars['Int']>;
-  id: Scalars['ID'];
   pagination?: InputMaybe<Pagination>;
   partyId?: InputMaybe<Scalars['ID']>;
+  setId?: InputMaybe<Scalars['ID']>;
 };
 
 
@@ -4882,6 +4884,10 @@ export type ReferralSetStats = {
   referralSetRunningNotionalTakerVolume: Scalars['String'];
   /** Reward factor applied to the party. */
   rewardFactor: Scalars['String'];
+  /** The proportion of the referees taker fees to be rewarded to the referrer. */
+  rewardsFactorMultiplier: Scalars['String'];
+  /** The multiplier applied to the referral reward factor when calculating referral rewards due to the referrer. */
+  rewardsMultiplier: Scalars['String'];
 };
 
 /** Connection type for retrieving cursor-based paginated referral set statistics information */
@@ -6143,7 +6149,18 @@ export type UpdateProductConfiguration = UpdateFutureProduct | UpdatePerpetualPr
 
 export type UpdateReferralProgram = {
   __typename?: 'UpdateReferralProgram';
-  changes: ReferralProgram;
+  /** Defined tiers in increasing order. First element will give Tier 1, second element will give Tier 2, etc. */
+  benefitTiers: Array<BenefitTier>;
+  /** Timestamp as RFC3339, after which when the current epoch ends, the programs will end and benefits will be disabled. */
+  endOfProgramTimestamp: Scalars['String'];
+  /**
+   * Defined staking tiers in increasing order. First element will give Tier 1,
+   * second element will give Tier 2, and so on. Determines the level of
+   * benefit a party can expect based on their staking.
+   */
+  stakingTiers: Array<StakingTier>;
+  /** Number of epochs over which to evaluate a referral set's running volume. */
+  windowLength: Scalars['Int'];
 };
 
 /** Update an existing spot market on Vega */
@@ -6175,11 +6192,7 @@ export type UpdateVolumeDiscountProgram = {
   benefitTiers: Array<VolumeBenefitTier>;
   /** The end time of the program */
   endOfProgramTimestamp: Scalars['Timestamp'];
-  /** ID of the proposal that created the discount program */
-  id: Scalars['ID'];
-  /** The current version of the volume discount program */
-  version: Scalars['Int'];
-  /** The window legnth to consider for the volume discount program */
+  /** The window length to consider for the volume discount program */
   windowLength: Scalars['Int'];
 };
 

libs/ui-toolkit/src/components/index.ts

@@ -22,7 +22,6 @@ export * from './key-value-table';
 export * from './link';
 export * from './loader';
 export * from './lozenge';
-export * from './maintenance-page';
 export * from './nav-dropdown';
 export * from './nav';
 export * from './navigation';

libs/ui-toolkit/src/components/loader/loader.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
-import { useMemo } from 'react';
 import styles from './loader.module.scss';
 
-const pseudoRandom = (seed: number) => {
+export const pseudoRandom = (seed: number) => {
   let value = seed;
   return () => {
     value = (value * 16807) % 2147483647;
@@ -10,6 +9,8 @@ const pseudoRandom = (seed: number) => {
   };
 };
 
+const generate = pseudoRandom(1);
+
 export interface LoaderProps {
   size?: 'small' | 'large';
   forceTheme?: 'dark' | 'light';
@@ -27,14 +28,9 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
     size === 'small' ? 'w-[15px] h-[15px]' : 'w-[50px] h-[50px]';
   const items = size === 'small' ? 9 : 25;
 
-  const generate = useMemo(() => pseudoRandom(1), []);
-
   return (
-    <div
-      className="flex flex-col items-center pre-loader-center"
-      data-testid="loader"
-    >
-      <div className={`${wrapperClasses} flex flex-wrap pre-loader-wrapper`}>
+    <div className="flex flex-col items-center" data-testid="loader">
+      <div className={`${wrapperClasses} flex flex-wrap`}>
         {new Array(items).fill(null).map((_, i) => {
           return (
             <div

libs/ui-toolkit/src/components/maintenance-page/index.ts

@@ -1 +0,0 @@
-export * from './maintenance-page';

libs/ui-toolkit/src/components/maintenance-page/maintenance-page.stories.tsx

@@ -1,11 +0,0 @@
-import type { Story, Meta } from '@storybook/react';
-import { MaintenancePage } from './maintenance-page';
-
-export default {
-  component: MaintenancePage,
-  title: 'Maintenance Page',
-} as Meta;
-
-const Template: Story = (args) => <MaintenancePage />;
-
-export const Default = Template.bind({});

libs/ui-toolkit/src/components/maintenance-page/maintenance-page.tsx

@@ -1,224 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { ExternalLink } from '../link';
-import { BackgroundVideo } from '../background-video';
-
-const BLOG_URL = 'https://blog.vega.xyz/';
-
-export const MaintenancePage = () => {
-  return (
-    <div
-      className="flex flex-col w-full min-h-full justify-center items-center dark:bg-black dark:text-white"
-      data-testid="maintenance-page"
-    >
-      <div className="max-w-[540px] w-[80%]">
-        <div className="pb-[24.6944444%] relative w-full mb-6">
-          <div className="absolute inset-px">
-            <BackgroundVideo />
-          </div>
-          <div className="absolute w-full h-full">
-            <svg
-              viewBox="0 0 1080 266.7"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="absolute left-0 right-0 block w-full h-auto"
-            >
-              <path
-                className="dark:fill-black fill-white"
-                d="M0,0v265.7h93c73.7-25.9,101.2-167.1,190.5-176.5c55-5.8,71.3,43.1,150.2,46c145.6,5.4,162.8-114.5,276.1-121.6 c146.7-9.2,199.8,222.9,274.4,252.1h95.8V0H0z"
-              ></path>
-              <g className="dark:fill-white fill-black">
-                <path d="M992.6,129.3H990v2.6h2.6V129.3z"></path>
-                <path d="M995.2,126.7h-2.6v2.6h2.6V126.7z"></path>
-                <path d="M995.2,131.9h-2.6v2.6h2.6V131.9z"></path>
-                <path d="M997.9,129.3h-2.6v2.6h2.6V129.3z"></path>
-                <path d="M574.6,5.3H572v2.6h2.6V5.3z"></path>
-                <path d="M577.2,2.7h-2.6v2.6h2.6V2.7z"></path>
-                <path d="M577.2,7.9h-2.6v2.6h2.6V7.9z"></path>
-                <path d="M579.9,5.3h-2.6v2.6h2.6V5.3z"></path>
-                <path d="M384,53.7h-3v3h3V53.7z"></path>
-                <path d="M387,50.7v-3h-3v3v3h3V50.7z"></path>
-                <path d="M381,56.7h-6v3h6V56.7z"></path>
-                <path d="M384,59.7h-3v3h3V59.7z"></path>
-                <path d="M387,62.7h-3v6h3V62.7z"></path>
-                <path d="M390,59.7h-3v3h3V59.7z"></path>
-                <path d="M395.9,56.7h-6v3h6V56.7z"></path>
-                <path d="M390,53.7h-3v3h3V53.7z"></path>
-                <path d="M130,158.7h-3v3h3V158.7z"></path>
-                <path d="M133,155.7v-3h-3v3v3h3V155.7z"></path>
-                <path d="M127,161.7h-6v3h6V161.7z"></path>
-                <path d="M130,164.7h-3v3h3V164.7z"></path>
-                <path d="M133,167.7h-3v6h3V167.7z"></path>
-                <path d="M136,164.7h-3v3h3V164.7z"></path>
-                <path d="M141.9,161.7h-6v3h6V161.7z"></path>
-                <path d="M136,158.7h-3v3h3V158.7z"></path>
-                <path d="M751.6,55.3H749v2.6h2.6V55.3z"></path>
-                <path d="M754.2,52.7h-2.6v2.6h2.6V52.7z"></path>
-                <path d="M754.2,57.9h-2.6v2.6h2.6V57.9z"></path>
-                <path d="M756.9,55.3h-2.6v2.6h2.6V55.3z"></path>
-                <path d="M720,85.7h-3v3h3V85.7z"></path>
-                <path d="M723,82.7v-3h-3v3v3h3V82.7z"></path>
-                <path d="M717,88.7h-6v3h6V88.7z"></path>
-                <path d="M720,91.7h-3v3h3V91.7z"></path>
-                <path d="M723,94.7h-3v6h3V94.7z"></path>
-                <path d="M726,91.7h-3v3h3V91.7z"></path>
-                <path d="M731.9,88.7h-6v3h6V88.7z"></path>
-                <path d="M726,85.7h-3v3h3V85.7z"></path>
-                <polyline points="0,266.7 1080,266.7 1080,264.7 0,264.7"></polyline>
-              </g>
-              <svg
-                width="64"
-                height="68"
-                viewBox="0 0 32 34"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                x="301"
-                y="200"
-              >
-                <g className="dark:fill-white fill-black animate-rotate">
-                  <path d="M28.6963 19.8359C28.9074 18.9106 29.0218 17.9742 29.0218 17C29.0218 16.0258 28.9074 15.0738 28.6963 14.1475C28.5949 13.7212 28.8023 13.2405 29.1846 13.0196L32 11.4248L28.8749 6.05954L26.0595 7.6543C25.6809 7.8716 25.1629 7.81635 24.8392 7.52539C23.4338 6.24001 21.7345 5.26493 19.8585 4.68945C19.4381 4.55963 19.1256 4.1416 19.1256 3.70608V0.5H12.8753V3.70608C12.8753 4.1416 12.5628 4.55963 12.1424 4.68945C10.2655 5.26493 8.56713 6.24001 7.16175 7.52539C6.83808 7.81635 6.32001 7.87068 5.94146 7.6543L3.12606 6.05954L0 11.4248L2.8154 13.0196C3.19767 13.2405 3.40509 13.7212 3.30371 14.1475C3.09257 15.0729 2.97817 16.0258 2.97817 17C2.97817 17.9742 3.09257 18.9106 3.30371 19.8359C3.40509 20.2623 3.19767 20.7429 2.8154 20.9639L0 22.5586L3.12513 27.9239L5.94053 26.3291C6.3228 26.1164 6.84087 26.1781 7.16082 26.4737C8.5662 27.7591 10.2655 28.7185 12.1415 29.2931C12.5665 29.4247 12.88 29.851 12.8744 30.2921V33.4982H19.1247V30.2921C19.1182 29.851 19.4316 29.4238 19.8576 29.2931C21.7345 28.7176 23.4329 27.7591 24.8382 26.4737C25.1591 26.1781 25.6772 26.1164 26.0585 26.3291L28.8739 27.9239L31.9991 22.5586L29.1837 20.9639C28.8014 20.7429 28.594 20.2623 28.6954 19.8359H28.6963ZM16.0005 23.7031C12.2485 23.7031 9.22936 20.7143 9.22936 17C9.22936 13.2857 12.2485 10.2969 16.0005 10.2969C19.7525 10.2969 22.7716 13.2857 22.7716 17C22.7716 20.7143 19.7525 23.7031 16.0005 23.7031Z" />
-                </g>
-              </svg>
-              <svg
-                width="64"
-                height="68"
-                viewBox="0 0 32 34"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                x="521"
-                y="200"
-              >
-                <g className="dark:fill-white fill-black animate-rotate">
-                  <path d="M28.6963 19.8359C28.9074 18.9106 29.0218 17.9742 29.0218 17C29.0218 16.0258 28.9074 15.0738 28.6963 14.1475C28.5949 13.7212 28.8023 13.2405 29.1846 13.0196L32 11.4248L28.8749 6.05954L26.0595 7.6543C25.6809 7.8716 25.1629 7.81635 24.8392 7.52539C23.4338 6.24001 21.7345 5.26493 19.8585 4.68945C19.4381 4.55963 19.1256 4.1416 19.1256 3.70608V0.5H12.8753V3.70608C12.8753 4.1416 12.5628 4.55963 12.1424 4.68945C10.2655 5.26493 8.56713 6.24001 7.16175 7.52539C6.83808 7.81635 6.32001 7.87068 5.94146 7.6543L3.12606 6.05954L0 11.4248L2.8154 13.0196C3.19767 13.2405 3.40509 13.7212 3.30371 14.1475C3.09257 15.0729 2.97817 16.0258 2.97817 17C2.97817 17.9742 3.09257 18.9106 3.30371 19.8359C3.40509 20.2623 3.19767 20.7429 2.8154 20.9639L0 22.5586L3.12513 27.9239L5.94053 26.3291C6.3228 26.1164 6.84087 26.1781 7.16082 26.4737C8.5662 27.7591 10.2655 28.7185 12.1415 29.2931C12.5665 29.4247 12.88 29.851 12.8744 30.2921V33.4982H19.1247V30.2921C19.1182 29.851 19.4316 29.4238 19.8576 29.2931C21.7345 28.7176 23.4329 27.7591 24.8382 26.4737C25.1591 26.1781 25.6772 26.1164 26.0585 26.3291L28.8739 27.9239L31.9991 22.5586L29.1837 20.9639C28.8014 20.7429 28.594 20.2623 28.6954 19.8359H28.6963ZM16.0005 23.7031C12.2485 23.7031 9.22936 20.7143 9.22936 17C9.22936 13.2857 12.2485 10.2969 16.0005 10.2969C19.7525 10.2969 22.7716 13.2857 22.7716 17C22.7716 20.7143 19.7525 23.7031 16.0005 23.7031Z" />
-                </g>
-              </svg>
-              <svg
-                width="64"
-                height="68"
-                viewBox="0 0 32 34"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                x="381"
-                y="200"
-              >
-                <g className="dark:fill-white fill-black animate-rotate-back">
-                  <path d="M28.6963 19.8359C28.9074 18.9106 29.0218 17.9742 29.0218 17C29.0218 16.0258 28.9074 15.0738 28.6963 14.1475C28.5949 13.7212 28.8023 13.2405 29.1846 13.0196L32 11.4248L28.8749 6.05954L26.0595 7.6543C25.6809 7.8716 25.1629 7.81635 24.8392 7.52539C23.4338 6.24001 21.7345 5.26493 19.8585 4.68945C19.4381 4.55963 19.1256 4.1416 19.1256 3.70608V0.5H12.8753V3.70608C12.8753 4.1416 12.5628 4.55963 12.1424 4.68945C10.2655 5.26493 8.56713 6.24001 7.16175 7.52539C6.83808 7.81635 6.32001 7.87068 5.94146 7.6543L3.12606 6.05954L0 11.4248L2.8154 13.0196C3.19767 13.2405 3.40509 13.7212 3.30371 14.1475C3.09257 15.0729 2.97817 16.0258 2.97817 17C2.97817 17.9742 3.09257 18.9106 3.30371 19.8359C3.40509 20.2623 3.19767 20.7429 2.8154 20.9639L0 22.5586L3.12513 27.9239L5.94053 26.3291C6.3228 26.1164 6.84087 26.1781 7.16082 26.4737C8.5662 27.7591 10.2655 28.7185 12.1415 29.2931C12.5665 29.4247 12.88 29.851 12.8744 30.2921V33.4982H19.1247V30.2921C19.1182 29.851 19.4316 29.4238 19.8576 29.2931C21.7345 28.7176 23.4329 27.7591 24.8382 26.4737C25.1591 26.1781 25.6772 26.1164 26.0585 26.3291L28.8739 27.9239L31.9991 22.5586L29.1837 20.9639C28.8014 20.7429 28.594 20.2623 28.6954 19.8359H28.6963ZM16.0005 23.7031C12.2485 23.7031 9.22936 20.7143 9.22936 17C9.22936 13.2857 12.2485 10.2969 16.0005 10.2969C19.7525 10.2969 22.7716 13.2857 22.7716 17C22.7716 20.7143 19.7525 23.7031 16.0005 23.7031Z" />
-                </g>
-              </svg>
-              <svg
-                width="64"
-                height="68"
-                viewBox="0 0 32 34"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                x="721"
-                y="200"
-              >
-                <g className="dark:fill-white fill-black animate-rotate-back">
-                  <path d="M28.6963 19.8359C28.9074 18.9106 29.0218 17.9742 29.0218 17C29.0218 16.0258 28.9074 15.0738 28.6963 14.1475C28.5949 13.7212 28.8023 13.2405 29.1846 13.0196L32 11.4248L28.8749 6.05954L26.0595 7.6543C25.6809 7.8716 25.1629 7.81635 24.8392 7.52539C23.4338 6.24001 21.7345 5.26493 19.8585 4.68945C19.4381 4.55963 19.1256 4.1416 19.1256 3.70608V0.5H12.8753V3.70608C12.8753 4.1416 12.5628 4.55963 12.1424 4.68945C10.2655 5.26493 8.56713 6.24001 7.16175 7.52539C6.83808 7.81635 6.32001 7.87068 5.94146 7.6543L3.12606 6.05954L0 11.4248L2.8154 13.0196C3.19767 13.2405 3.40509 13.7212 3.30371 14.1475C3.09257 15.0729 2.97817 16.0258 2.97817 17C2.97817 17.9742 3.09257 18.9106 3.30371 19.8359C3.40509 20.2623 3.19767 20.7429 2.8154 20.9639L0 22.5586L3.12513 27.9239L5.94053 26.3291C6.3228 26.1164 6.84087 26.1781 7.16082 26.4737C8.5662 27.7591 10.2655 28.7185 12.1415 29.2931C12.5665 29.4247 12.88 29.851 12.8744 30.2921V33.4982H19.1247V30.2921C19.1182 29.851 19.4316 29.4238 19.8576 29.2931C21.7345 28.7176 23.4329 27.7591 24.8382 26.4737C25.1591 26.1781 25.6772 26.1164 26.0585 26.3291L28.8739 27.9239L31.9991 22.5586L29.1837 20.9639C28.8014 20.7429 28.594 20.2623 28.6954 19.8359H28.6963ZM16.0005 23.7031C12.2485 23.7031 9.22936 20.7143 9.22936 17C9.22936 13.2857 12.2485 10.2969 16.0005 10.2969C19.7525 10.2969 22.7716 13.2857 22.7716 17C22.7716 20.7143 19.7525 23.7031 16.0005 23.7031Z" />
-                </g>
-              </svg>
-              <svg
-                x="580"
-                y="32"
-                width="146"
-                height="247"
-                viewBox="0 0 56 85"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g>
-                  <path d="M19 60.5H17V84.5H19V60.5Z" fill="black" />
-                  <path d="M41 0.5H3V60.5H41V0.5Z" fill="white" />
-                  <path d="M15 18.5H13V20.5H15V18.5Z" fill="black" />
-                  <path d="M17 20.5H15V22.5H17V20.5Z" fill="black" />
-                  <path d="M19 18.5H17V20.5H19V18.5Z" fill="black" />
-                  <path d="M15 22.5H13V24.5H15V22.5Z" fill="black" />
-                  <path d="M19 22.5H17V24.5H19V22.5Z" fill="black" />
-                  <path d="M29 28.5H15V30.5H29V28.5Z" fill="black" />
-                  <path d="M27 18.5H25V20.5H27V18.5Z" fill="black" />
-                  <path d="M29 20.5H27V22.5H29V20.5Z" fill="black" />
-                  <path d="M31 18.5H29V20.5H31V18.5Z" fill="black" />
-                  <path d="M27 22.5H25V24.5H27V22.5Z" fill="black" />
-                  <path d="M31 22.5H29V24.5H31V22.5Z" fill="black" />
-                  <path d="M31 26.5H29V28.5H31V26.5Z" fill="black" />
-                  <path d="M27 60.5H25V62.5H27V60.5Z" fill="black" />
-                  <path d="M27 60.5H25V84.5H27V60.5Z" fill="black" />
-                  <path d="M19 60.5H17V84.5H19V60.5Z" fill="black" />
-                  <path d="M27 60.5H25V62.5H27V60.5Z" fill="black" />
-                  <path d="M27 60.5H25V84.5H27V60.5Z" fill="black" />
-                  <path d="M27 60.5H25V62.5H27V60.5Z" fill="black" />
-                  <path
-                    d="M3 42.5V58.64V60.5V64.5H21V60.5H23V64.5H41V60.5V58.64V42.5H3Z"
-                    fill="#00F780"
-                  />
-                  <path d="M35 46.5H41V42.5H3V46.5H31H35Z" fill="#00D16C" />
-                  <path
-                    d="M3 32.32V29.5L0 32.5V60.5H2V33.33L3 32.32Z"
-                    fill="black"
-                  />
-                  <path
-                    d="M41 31.8V29.49L54.79 21.53L55.79 23.26L41 31.8Z"
-                    fill="black"
-                  />
-                  <path d="M36 54.5H35V55.5H36V54.5Z" fill="black" />
-                  <path d="M35 53.5H34V54.5H35V53.5Z" fill="black" />
-                  <path d="M34 48.5H33V53.5H34V48.5Z" fill="black" />
-                  <path d="M38 48.5H37V52.5H38V48.5Z" fill="black" />
-                  <path d="M37 53.5H36V54.5H37V53.5Z" fill="black" />
-                  <path d="M39 52.5H38V53.5H39V52.5Z" fill="black" />
-                </g>
-              </svg>
-              <svg
-                x="699"
-                y="61"
-                width="29"
-                height="44"
-                viewBox="0 0 11 17"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  style={{ transformOrigin: 'bottom right' }}
-                  className="animate-wave"
-                  d="M10.79 16.27L8.05998 15.54L0.0999756 1.75L1.82998 0.75L10.79 16.27Z"
-                  fill="black"
-                />
-              </svg>
-              <svg
-                x="639"
-                y="28"
-                width="109"
-                height="65"
-                viewBox="0 0 42 25"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  style={{ transformOrigin: '50px 29px' }}
-                  className="animate-wave"
-                >
-                  <path
-                    transform="translate(6, 4) scale(0.8)"
-                    d="M9.19758 10.4284L30.461 19.6961C30.7275 21.4423 31.8514 23.0054 33.5831 23.7591C36.2712 24.9284 39.4029 23.7006 40.5721 21.0125C41.7414 18.3245 40.5136 15.1928 37.8256 14.0235C36.0939 13.2697 34.1773 13.5089 32.7222 14.5012L11.4589 5.23339C11.1923 3.48724 10.0684 1.92415 8.33672 1.17039C6.21236 0.242586 3.8207 0.809016 2.3249 2.41195L7.84213 4.81833L6.43125 8.06016L0.914027 5.65377C0.757196 7.83641 1.9699 9.97822 4.08426 10.9062C5.81592 11.6599 7.7325 11.4208 9.18758 10.4285L9.19758 10.4284ZM33.1119 17.7656L35.3963 16.0607L37.9937 17.1913L38.2969 20.027L36.0126 21.732L33.4151 20.6013L33.1119 17.7656Z"
-                    fill="#A6A6A6"
-                  />
-                </g>
-              </svg>
-            </svg>
-          </div>
-        </div>
-      </div>
-      <div className="flex mb-2">
-        <span className="font-alpha calt uppercase text-xl text-center">
-          {t("We're doing some maintenance right now, check back later")}
-        </span>
-      </div>
-      <p>
-        <span className="text-neutral-500 dark:text-neutral-400">
-          {t('Learn more on')}
-        </span>{' '}
-        <ExternalLink href={BLOG_URL}>{t('our blog')}</ExternalLink>
-      </p>
-    </div>
-  );
-};

specs/7007-LEEN-ledger-entries.md

@@ -8,5 +8,13 @@ When I enter on ledger entries tab in portfolio page
 - in the form **Must** see a dropdown for select an asset, in which reports will be downloaded (<a name="7007-LEEN-002" href="#7007-LEEN-002">7007-LEEN-002</a>)
 - in the form **Must** see inputs for select time period, in which reports will be downloaded (<a name="7007-LEEN-003" href="#7007-LEEN-003">7007-LEEN-003</a>)
 - default preselected period **Must** be the last 7 days (<a name="7007-LEEN-004" href="#7007-LEEN-004">7007-LEEN-004</a>)
-- during download a loader component **Must** be visible and all interactive elements in the form **Must** be disabled (<a name="7007-LEEN-005" href="#7007-LEEN-005">7007-LEEN-005</a>)
 - **Must** see a note about time in file are in UTC and timezone of the user relative to UTC (<a name="7007-LEEN-006" href="#7007-LEEN-006">7007-LEEN-006</a>)
+- As a user, I **must** see a message saying that this can take several minutes (<a name="7007-LEEN-007" href="#7007-LEEN-007">7007-LEEN-007</a>)
+- After half a minute, the message is updated to say something like 'Still in progress' (<a name="7007-LEEN-008" href="#7007-LEEN-008">7007-LEEN-008</a>)
+- A toast is shown when the download is complete (<a name="7007-LEEN-009" href="#7007-LEEN-009">7007-LEEN-009</a>)
+- The download button should never be disabled
+  - If user tries to download file which is already in download: (<a name="7007-LEEN-010" href="#7007-LEEN-010">7007-LEEN-010</a>)
+    - if notification stayed open, nothing happens
+    - If notification was closed, will be open, no any new request will be fired
+    - If something has changed in the form (asset, dates, `Date.now`) new download will start.
+- The state of the download form should be in sync with the download itself if you navigate away from the page or reload (<a name="7007-LEEN-011" href="#7007-LEEN-011">7007-LEEN-011</a>)