fix: lint issues

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

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

@@ -0,0 +1,58 @@
+.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/components/app-loader/app-loader.tsx

@@ -1,7 +1,6 @@
 import type { InMemoryCacheConfig } from '@apollo/client';
 import {
   AppFailure,
-  AppLoader,
   DocsLinks,
   NetworkLoader,
   NodeGuard,
@@ -10,10 +9,15 @@ import {
 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 Bootstrapper = ({ children }: { children: ReactNode }) => {
+export const DynamicLoader = dynamic(() => import('../preloader/preloader'), {
+  loading: () => <>Loading...</>,
+});
+
+export const AppLoader = ({ children }: { children: ReactNode }) => {
   const {
     error,
     VEGA_URL,
@@ -43,13 +47,13 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   return (
     <NetworkLoader
       cache={cacheConfig}
-      skeleton={<AppLoader />}
+      skeleton={<DynamicLoader />}
       failure={
         <AppFailure title={t('Could not initialize app')} error={error} />
       }
     >
       <NodeGuard
-        skeleton={<AppLoader />}
+        skeleton={<DynamicLoader />}
         failure={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
       >
         <Web3Provider>

apps/trading/components/app-loader/index.tsx

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

apps/trading/components/preloader/preloader.tsx

@@ -0,0 +1,26 @@
+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/pages/_app.page.tsx

@@ -36,7 +36,7 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import { Connectors } from '../lib/vega-connectors';
-import { Bootstrapper } from '../components/bootstrapper';
+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';
@@ -52,7 +52,6 @@ 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';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -145,14 +144,14 @@ function VegaTradingApp(props: AppProps) {
   // Prevent HashRouter from being server side rendered as it
   // relies on presence of document object
   if (status === 'default') {
-    return <SSRLoader />;
+    return <DynamicLoader />;
   }
 
   return (
     <HashRouter>
-      <Bootstrapper>
+      <AppLoader>
         <AppBody {...props} />
-      </Bootstrapper>
+      </AppLoader>
       <NodeSwitcherDialog open={nodeSwitcherOpen} setOpen={setNodeSwitcher} />
     </HashRouter>
   );

apps/trading/pages/_document.page.tsx

@@ -22,17 +22,14 @@ 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
-          // 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"
-        >
+        <body className="bg-white dark:bg-vega-cdark-900 text-default font-alpha">
           <Main />
           <NextScript />
         </body>

apps/trading/pages/ssr-loader.tsx

@@ -1,52 +0,0 @@
-export const SSRLoader = () => {
-  const randomDelay = () => {
-    return parseFloat((Math.random() * (4 - 1) + 1).toFixed(2));
-  };
-
-  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: `-${randomDelay()}s`,
-                animationDirection: i % 2 === 0 ? 'reverse' : 'alternate',
-                background: 'black',
-                opacity: Math.random() > 0.5 ? 1 : 0,
-              }}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};

apps/trading/public/preloader.css

@@ -0,0 +1,116 @@
+.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/environment/src/components/app-failure/app-failure.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import { useNodeSwitcherStore } from '../../hooks/use-node-switcher-store';
 
 export const AppFailure = ({
@@ -10,15 +10,17 @@ export const AppFailure = ({
   error?: string | null;
 }) => {
   const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
+  const nonIdealWrapperClasses =
+    'h-full min-h-screen flex items-center justify-center';
   return (
-    <Splash>
+    <div className={nonIdealWrapperClasses}>
       <div className="text-center">
-        <p className="mb-4 text-xl">{title}</p>
-        {error && <p className="mb-8 text-sm">{error}</p>}
+        <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>
-    </Splash>
+    </div>
   );
 };

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

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

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

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

libs/environment/src/components/index.ts

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

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

@@ -30,8 +30,11 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
   const generate = useMemo(() => pseudoRandom(1), []);
 
   return (
-    <div className="flex flex-col items-center" data-testid="loader">
-      <div className={`${wrapperClasses} flex flex-wrap`}>
+    <div
+      className="flex flex-col items-center pre-loader-center"
+      data-testid="loader"
+    >
+      <div className={`${wrapperClasses} flex flex-wrap pre-loader-wrapper`}>
         {new Array(items).fill(null).map((_, i) => {
           return (
             <div