chore: fix lint

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

@@ -63,6 +63,7 @@ const mockReferralProposal = generateProposal({
   terms: {
     change: {
       __typename: 'UpdateReferralProgram',
+      changes: {
         benefitTiers: [
           {
             minimumEpochs: 6,
@@ -83,7 +84,7 @@ const mockReferralProposal = generateProposal({
             referralRewardFactor: '0.01',
           },
         ],
-      endOfProgram: '2026-10-03T10:34:34Z',
+        endOfProgramTimestamp: '2026-10-03T10:34:34Z',
         windowLength: 3,
         stakingTiers: [
           {
@@ -101,6 +102,7 @@ const mockReferralProposal = generateProposal({
         ],
       },
     },
+  },
 });
 
 describe('<ProposalReferralProgramDetails />', () => {
@@ -130,6 +132,7 @@ describe('<ProposalReferralProgramDetails />', () => {
       terms: {
         change: {
           __typename: 'UpdateReferralProgram',
+          changes: {},
         },
       },
     });

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

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

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

@@ -47,13 +47,14 @@ fragment UpdateReferralProgram on Proposal {
   terms {
     change {
       ... on UpdateReferralProgram {
+        changes {
           benefitTiers {
             minimumEpochs
             minimumRunningNotionalTakerVolume
             referralDiscountFactor
             referralRewardFactor
           }
-        endOfProgram: endOfProgramTimestamp
+          endOfProgramTimestamp
           windowLength
           stakingTiers {
             minimumStakedTokens
@@ -63,6 +64,7 @@ fragment UpdateReferralProgram on Proposal {
       }
     }
   }
+}
 
 fragment UpdateVolumeDiscountProgram on Proposal {
   terms {

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

@@ -47,13 +47,14 @@ fragment UpdateReferralPrograms on Proposal {
   terms {
     change {
       ... on UpdateReferralProgram {
+        changes {
           benefitTiers {
             minimumEpochs
             minimumRunningNotionalTakerVolume
             referralDiscountFactor
             referralRewardFactor
           }
-        endOfProgram: endOfProgramTimestamp
+          endOfProgramTimestamp
           windowLength
           stakingTiers {
             minimumStakedTokens
@@ -63,6 +64,7 @@ fragment UpdateReferralPrograms on Proposal {
       }
     }
   }
+}
 
 fragment UpdateVolumeDiscountPrograms on Proposal {
   terms {

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

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

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/components/bootstrapper/bootstrapper.tsx

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

apps/trading/components/bootstrapper/index.tsx

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

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/pages/_app.page.tsx

@@ -36,7 +36,7 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import { Connectors } from '../lib/vega-connectors';
-import { AppLoader, DynamicLoader } from '../components/app-loader';
+import { Bootstrapper } from '../components/bootstrapper';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
@@ -52,6 +52,7 @@ 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!');
 
@@ -144,14 +145,14 @@ function VegaTradingApp(props: AppProps) {
   // Prevent HashRouter from being server side rendered as it
   // relies on presence of document object
   if (status === 'default') {
-    return <DynamicLoader />;
+    return <SSRLoader />;
   }
 
   return (
     <HashRouter>
-      <AppLoader>
+      <Bootstrapper>
         <AppBody {...props} />
-      </AppLoader>
+      </Bootstrapper>
       <NodeSwitcherDialog open={nodeSwitcherOpen} setOpen={setNodeSwitcher} />
     </HashRouter>
   );

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

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

@@ -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/environment/src/components/app-failure/app-failure.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Button } from '@vegaprotocol/ui-toolkit';
+import { Button, Splash } from '@vegaprotocol/ui-toolkit';
 import { useNodeSwitcherStore } from '../../hooks/use-node-switcher-store';
 
 export const AppFailure = ({
@@ -10,17 +10,15 @@ 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 (
-    <div className={nonIdealWrapperClasses}>
+    <Splash>
       <div className="text-center">
-        <p className="text-xl mb-4">{title}</p>
+        <p className="mb-4 text-xl">{title}</p>
-        {error && <p className="text-sm mb-8">{error}</p>}
+        {error && <p className="mb-8 text-sm">{error}</p>}
         <Button onClick={() => setNodeSwitcher(true)}>
           {t('Change node')}
         </Button>
       </div>
-    </div>
+    </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,4 +1,5 @@
 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,13 +104,7 @@ describe('TradesTable', () => {
     const [firstDateCell, secondDateCell] = createdAtCells;
 
     // Compare the times as strings
-    // Note: I've changed it form literal strings to this because of the
+    expect(firstDateCell.textContent).toBe('6:59:00 PM');
-    // locale mismatch. Mocking the format also resulted with strange "space" diff.
+    expect(secondDateCell.textContent).toBe('7:00:00 PM');
-    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,8 +4605,6 @@ export type QueryreferralFeeStatsArgs = {
   assetId?: InputMaybe<Scalars['ID']>;
   epoch?: InputMaybe<Scalars['Int']>;
   marketId?: InputMaybe<Scalars['ID']>;
-  referee?: InputMaybe<Scalars['ID']>;
-  referrer?: InputMaybe<Scalars['ID']>;
 };
 
 
@@ -4622,9 +4620,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']>;
 };
 
 
@@ -4884,10 +4882,6 @@ 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 */
@@ -6149,18 +6143,7 @@ export type UpdateProductConfiguration = UpdateFutureProduct | UpdatePerpetualPr
 
 export type UpdateReferralProgram = {
   __typename?: 'UpdateReferralProgram';
-  /** Defined tiers in increasing order. First element will give Tier 1, second element will give Tier 2, etc. */
+  changes: ReferralProgram;
-  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 */
@@ -6192,7 +6175,11 @@ export type UpdateVolumeDiscountProgram = {
   benefitTiers: Array<VolumeBenefitTier>;
   /** The end time of the program */
   endOfProgramTimestamp: Scalars['Timestamp'];
-  /** The window length to consider for the volume discount program */
+  /** 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 */
   windowLength: Scalars['Int'];
 };
 

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

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