fix: disable column removal and overlays on all grids

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

.gitignore

@@ -52,3 +52,4 @@ cypress.env.json
 /apps/**/cypress/reports/
 /apps/**/cypress/downloads/
 /apps/**/fixtures/wallet/node**
+.nx/

apps/governance/.env

@@ -35,6 +35,5 @@ NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=false
 NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
+NX_REFERRALS=true
 NX_GOVERNANCE_TRANSFERS=false
-NX_VOLUME_DISCOUNTS=false

apps/governance/.env.capsule

@@ -31,9 +31,8 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 CYPRESS_FAIRGROUND=false
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.devnet

@@ -28,4 +28,3 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.mainnet

@@ -22,9 +22,8 @@ NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/.env.mainnet-mirror

@@ -21,9 +21,8 @@ NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/.env.stagnet1

@@ -25,4 +25,3 @@ NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
 NX_GOVERNANCE_TRANSFERS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.testnet

@@ -29,4 +29,3 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.validators-testnet

@@ -20,9 +20,8 @@ NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

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

@@ -189,7 +189,6 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

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

@@ -78,7 +78,7 @@ export const ProposalVolumeDiscountProgramDetails = ({
               {t('BenefitTiers')}
             </h3>
             <KeyValueTable>
-              {benefitTiers
+              {[...benefitTiers]
                 .sort(
                   (a, b) =>
                     Number(a.minimumRunningNotionalTakerVolume) -

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

@@ -84,7 +84,6 @@ query Proposal(
   $includeNewMarketProductField: Boolean!
   $includeUpdateMarketState: Boolean!
   $includeUpdateReferralProgram: Boolean!
-  $includeUpdateVolumeDiscountProgram: Boolean!
 ) {
   proposal(id: $proposalId) {
     id
@@ -104,7 +103,6 @@ query Proposal(
     ...UpdateMarketState @include(if: $includeUpdateMarketState)
     ...UpdateReferralProgram @include(if: $includeUpdateReferralProgram)
     ...UpdateVolumeDiscountProgram
-      @include(if: $includeUpdateVolumeDiscountProgram)
     terms {
       closingDatetime
       enactmentDatetime

apps/governance/src/routes/proposals/proposal/__generated__/Proposal.ts

@@ -16,7 +16,6 @@ export type ProposalQueryVariables = Types.Exact<{
   includeNewMarketProductField: Types.Scalars['Boolean'];
   includeUpdateMarketState: Types.Scalars['Boolean'];
   includeUpdateReferralProgram: Types.Scalars['Boolean'];
-  includeUpdateVolumeDiscountProgram: Types.Scalars['Boolean'];
 }>;
 
 
@@ -108,7 +107,7 @@ export const UpdateVolumeDiscountProgramFragmentDoc = gql`
 }
     `;
 export const ProposalDocument = gql`
-    query Proposal($proposalId: ID!, $includeNewMarketProductField: Boolean!, $includeUpdateMarketState: Boolean!, $includeUpdateReferralProgram: Boolean!, $includeUpdateVolumeDiscountProgram: Boolean!) {
+    query Proposal($proposalId: ID!, $includeNewMarketProductField: Boolean!, $includeUpdateMarketState: Boolean!, $includeUpdateReferralProgram: Boolean!) {
   proposal(id: $proposalId) {
     id
     rationale {
@@ -126,7 +125,7 @@ export const ProposalDocument = gql`
     ...NewMarketProductField @include(if: $includeNewMarketProductField)
     ...UpdateMarketState @include(if: $includeUpdateMarketState)
     ...UpdateReferralProgram @include(if: $includeUpdateReferralProgram)
-    ...UpdateVolumeDiscountProgram @include(if: $includeUpdateVolumeDiscountProgram)
+    ...UpdateVolumeDiscountProgram
     terms {
       closingDatetime
       enactmentDatetime
@@ -446,7 +445,6 @@ ${UpdateVolumeDiscountProgramFragmentDoc}`;
  *      includeNewMarketProductField: // value for 'includeNewMarketProductField'
  *      includeUpdateMarketState: // value for 'includeUpdateMarketState'
  *      includeUpdateReferralProgram: // value for 'includeUpdateReferralProgram'
- *      includeUpdateVolumeDiscountProgram: // value for 'includeUpdateVolumeDiscountProgram'
  *   },
  * });
  */

apps/governance/src/routes/proposals/proposal/proposal-container.tsx

@@ -62,7 +62,6 @@ export const ProposalContainer = () => {
       includeNewMarketProductField: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketState: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralProgram: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountProgram: !!FLAGS.VOLUME_DISCOUNTS,
     },
     skip: !params.proposalId,
   });

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

@@ -171,7 +171,6 @@ query Proposals(
   $includeNewMarketProductFields: Boolean!
   $includeUpdateMarketStates: Boolean!
   $includeUpdateReferralPrograms: Boolean!
-  $includeUpdateVolumeDiscountPrograms: Boolean!
 ) {
   proposalsConnection {
     edges {
@@ -181,7 +180,6 @@ query Proposals(
         ...UpdateMarketStates @include(if: $includeUpdateMarketStates)
         ...UpdateReferralPrograms @include(if: $includeUpdateReferralPrograms)
         ...UpdateVolumeDiscountPrograms
-          @include(if: $includeUpdateVolumeDiscountPrograms)
       }
     }
   }

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

@@ -17,7 +17,6 @@ export type ProposalsQueryVariables = Types.Exact<{
   includeNewMarketProductFields: Types.Scalars['Boolean'];
   includeUpdateMarketStates: Types.Scalars['Boolean'];
   includeUpdateReferralPrograms: Types.Scalars['Boolean'];
-  includeUpdateVolumeDiscountPrograms: Types.Scalars['Boolean'];
 }>;
 
 
@@ -198,7 +197,7 @@ export const ProposalFieldsFragmentDoc = gql`
 }
     `;
 export const ProposalsDocument = gql`
-    query Proposals($includeNewMarketProductFields: Boolean!, $includeUpdateMarketStates: Boolean!, $includeUpdateReferralPrograms: Boolean!, $includeUpdateVolumeDiscountPrograms: Boolean!) {
+    query Proposals($includeNewMarketProductFields: Boolean!, $includeUpdateMarketStates: Boolean!, $includeUpdateReferralPrograms: Boolean!) {
   proposalsConnection {
     edges {
       node {
@@ -206,7 +205,7 @@ export const ProposalsDocument = gql`
         ...NewMarketProductFields @include(if: $includeNewMarketProductFields)
         ...UpdateMarketStates @include(if: $includeUpdateMarketStates)
         ...UpdateReferralPrograms @include(if: $includeUpdateReferralPrograms)
-        ...UpdateVolumeDiscountPrograms @include(if: $includeUpdateVolumeDiscountPrograms)
+        ...UpdateVolumeDiscountPrograms
       }
     }
   }
@@ -232,7 +231,6 @@ ${UpdateVolumeDiscountProgramsFragmentDoc}`;
  *      includeNewMarketProductFields: // value for 'includeNewMarketProductFields'
  *      includeUpdateMarketStates: // value for 'includeUpdateMarketStates'
  *      includeUpdateReferralPrograms: // value for 'includeUpdateReferralPrograms'
- *      includeUpdateVolumeDiscountPrograms: // value for 'includeUpdateVolumeDiscountPrograms'
  *   },
  * });
  */

apps/governance/src/routes/proposals/proposals/proposals-container.tsx

@@ -50,7 +50,6 @@ export const ProposalsContainer = () => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

apps/governance/src/routes/proposals/rejected/rejected-proposals-container.tsx

@@ -42,7 +42,6 @@ export const RejectedProposalsContainer = () => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

apps/trading/components/fees-container/Fees.graphql

@@ -36,6 +36,22 @@ query Fees(
       }
     }
   }
+  referrer: referralSets(referrer: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
+  referee: referralSets(referee: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
   referralSetReferees(referee: $partyId) {
     edges {
       node {

apps/trading/components/fees-container/__generated__/Fees.ts

@@ -15,7 +15,7 @@ export type FeesQueryVariables = Types.Exact<{
 }>;
 
 
-export type FeesQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string }, volumeDiscountStats: { __typename?: 'VolumeDiscountStatsConnection', edges: Array<{ __typename?: 'VolumeDiscountStatsEdge', node: { __typename?: 'VolumeDiscountStats', atEpoch: number, discountFactor: string, runningVolume: string } } | null> }, referralSetReferees: { __typename?: 'ReferralSetRefereeConnection', edges: Array<{ __typename?: 'ReferralSetRefereeEdge', node: { __typename?: 'ReferralSetReferee', atEpoch: number } } | null> }, referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, discountFactor: string, referralSetRunningNotionalTakerVolume: string } } | null> } };
+export type FeesQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string }, volumeDiscountStats: { __typename?: 'VolumeDiscountStatsConnection', edges: Array<{ __typename?: 'VolumeDiscountStatsEdge', node: { __typename?: 'VolumeDiscountStats', atEpoch: number, discountFactor: string, runningVolume: string } } | null> }, referrer: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', id: string, referrer: string } } | null> }, referee: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', id: string, referrer: string } } | null> }, referralSetReferees: { __typename?: 'ReferralSetRefereeConnection', edges: Array<{ __typename?: 'ReferralSetRefereeEdge', node: { __typename?: 'ReferralSetReferee', atEpoch: number } } | null> }, referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, discountFactor: string, referralSetRunningNotionalTakerVolume: string } } | null> } };
 
 
 export const DiscountProgramsDocument = gql`
@@ -81,6 +81,22 @@ export const FeesDocument = gql`
       }
     }
   }
+  referrer: referralSets(referrer: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
+  referee: referralSets(referee: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
   referralSetReferees(referee: $partyId) {
     edges {
       node {

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

@@ -17,6 +17,14 @@ import { useReferralStats } from './use-referral-stats';
 import { formatPercentage, getAdjustedFee } from './utils';
 import { Table, Td, Th, THead, Tr } from './table';
 import BigNumber from 'bignumber.js';
+import { Links } from '../../lib/links';
+import { Link } from 'react-router-dom';
+import {
+  Tooltip,
+  VegaIcon,
+  VegaIconNames,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
 
 export const FeesContainer = () => {
   const { pubKey } = useVegaWallet();
@@ -56,16 +64,25 @@ export const FeesContainer = () => {
     referralTierIndex,
     referralTiers,
     epochsInSet,
+    code,
+    isReferrer,
   } = useReferralStats(
     feesData?.referralSetStats,
     feesData?.referralSetReferees,
     programData?.currentReferralProgram,
-    feesData?.epoch
+    feesData?.epoch,
+    feesData?.referrer,
+    feesData?.referee
   );
 
   const loading = paramsLoading || feesLoading || programLoading;
   const isConnected = Boolean(pubKey);
 
+  const isReferralProgramRunning = Boolean(programData?.currentReferralProgram);
+  const isVolumeDiscountProgramRunning = Boolean(
+    programData?.currentVolumeDiscountProgram
+  );
+
   return (
     <div className="grid auto-rows-min grid-cols-4 gap-3">
       {isConnected && (
@@ -90,6 +107,8 @@ export const FeesContainer = () => {
             <TotalDiscount
               referralDiscount={referralDiscount}
               volumeDiscount={volumeDiscount}
+              isReferralProgramRunning={isReferralProgramRunning}
+              isVolumeDiscountProgramRunning={isVolumeDiscountProgramRunning}
             />
           </FeeCard>
           <FeeCard
@@ -97,23 +116,37 @@ export const FeesContainer = () => {
             className="sm:col-span-2"
             loading={loading}
           >
-            <CurrentVolume
-              tiers={volumeTiers}
-              tierIndex={volumeTierIndex}
-              windowLengthVolume={volumeInWindow}
-              windowLength={volumeDiscountWindowLength}
-            />
+            {isVolumeDiscountProgramRunning ? (
+              <CurrentVolume
+                tiers={volumeTiers}
+                tierIndex={volumeTierIndex}
+                windowLengthVolume={volumeInWindow}
+                windowLength={volumeDiscountWindowLength}
+              />
+            ) : (
+              <p className="pt-3 text-sm text-muted">
+                {t('No volume discount program active')}
+              </p>
+            )}
           </FeeCard>
           <FeeCard
             title={t('Referral benefits')}
             className="sm:col-span-2"
             loading={loading}
           >
-            <ReferralBenefits
-              setRunningNotionalTakerVolume={referralVolumeInWindow}
-              epochsInSet={epochsInSet}
-              epochs={referralDiscountWindowLength}
-            />
+            {isReferrer ? (
+              <ReferrerInfo code={code} />
+            ) : isReferralProgramRunning ? (
+              <ReferralBenefits
+                setRunningNotionalTakerVolume={referralVolumeInWindow}
+                epochsInSet={epochsInSet}
+                epochs={referralDiscountWindowLength}
+              />
+            ) : (
+              <p className="pt-3 text-sm text-muted">
+                {t('No referral program active')}
+              </p>
+            )}
           </FeeCard>
         </>
       )}
@@ -142,7 +175,7 @@ export const FeesContainer = () => {
         />
       </FeeCard>
       <FeeCard
-        title={t('Liquidity fees')}
+        title={t('Fees by market')}
         className="lg:col-span-full"
         loading={marketsLoading}
       >
@@ -325,26 +358,64 @@ const ReferralBenefits = ({
 const TotalDiscount = ({
   referralDiscount,
   volumeDiscount,
+  isReferralProgramRunning,
+  isVolumeDiscountProgramRunning,
 }: {
   referralDiscount: number;
   volumeDiscount: number;
+  isReferralProgramRunning: boolean;
+  isVolumeDiscountProgramRunning: boolean;
 }) => {
+  const totalDiscount = 1 - (1 - volumeDiscount) * (1 - referralDiscount);
+  const totalDiscountDescription = t(
+    'The total discount is calculated according to the following formula: '
+  );
+  const formula = (
+    <span className="italic">
+      1 - (1 - d<sub>volume</sub>) ⋇ (1 - d<sub>referral</sub>)
+    </span>
+  );
+
   return (
     <div>
       <Stat
-        value={formatPercentage(referralDiscount + volumeDiscount) + '%'}
+        description={
+          <>
+            {totalDiscountDescription}
+            {formula}
+          </>
+        }
+        value={formatPercentage(totalDiscount) + '%'}
         highlight={true}
       />
       <table className="w-full mt-0.5 text-xs text-muted">
         <tbody>
           <tr>
             <th className="font-normal text-left">{t('Volume discount')}</th>
-            <td className="text-right">{formatPercentage(volumeDiscount)}%</td>
+            <td className="text-right">
+              {formatPercentage(volumeDiscount)}%
+              {!isVolumeDiscountProgramRunning && (
+                <Tooltip description={t('No active volume discount programme')}>
+                  <span className="cursor-help">
+                    {' '}
+                    <VegaIcon name={VegaIconNames.INFO} size={12} />
+                  </span>
+                </Tooltip>
+              )}
+            </td>
           </tr>
           <tr>
             <th className="font-normal text-left ">{t('Referral discount')}</th>
             <td className="text-right">
               {formatPercentage(referralDiscount)}%
+              {!isReferralProgramRunning && (
+                <Tooltip description={t('No active referral programme')}>
+                  <span className="cursor-help">
+                    {' '}
+                    <VegaIcon name={VegaIconNames.INFO} size={12} />
+                  </span>
+                </Tooltip>
+              )}
             </td>
           </tr>
         </tbody>
@@ -491,3 +562,31 @@ const YourTier = () => {
     </span>
   );
 };
+
+const ReferrerInfo = ({ code }: { code?: string }) => (
+  <div className="pt-3 text-sm text-vega-clight-200 dark:vega-cdark-200">
+    <p className="mb-1">
+      {t('Connected key is owner of the referral set')}
+      {code && (
+        <>
+          {' '}
+          <span className="text-transparent bg-rainbow bg-clip-text">
+            {truncateMiddle(code)}
+          </span>
+        </>
+      )}
+      {'. '}
+      {t('As owner, it is eligible for commission not fee discounts.')}
+    </p>
+    <p>
+      {t('See')}{' '}
+      <Link
+        className="underline text-black dark:text-white"
+        to={Links.REFERRALS()}
+      >
+        {t('Referrals')}
+      </Link>{' '}
+      {t('for more information.')}
+    </p>
+  </div>
+);

apps/trading/components/fees-container/stat.tsx

@@ -1,23 +1,31 @@
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 
 export const Stat = ({
   value,
   text,
   highlight,
+  description,
 }: {
   value: string | number;
   text?: string;
   highlight?: boolean;
+  description?: ReactNode;
 }) => {
+  const val = (
+    <span
+      className={classNames('inline-block text-3xl leading-none', {
+        'text-transparent bg-rainbow bg-clip-text': highlight,
+        'cursor-help': description,
+      })}
+    >
+      {value}
+    </span>
+  );
   return (
     <p className="pt-3 leading-none first:pt-6">
-      <span
-        className={classNames('inline-block text-3xl leading-none', {
-          'text-transparent bg-rainbow bg-clip-text': highlight,
-        })}
-      >
-        {value}
-      </span>
+      {description ? <Tooltip description={description}>{val}</Tooltip> : val}
       {text && (
         <small className="block mt-0.5 text-xs text-muted">{text}</small>
       )}

apps/trading/components/fees-container/use-referral-stats.spec.ts

@@ -73,6 +73,8 @@ describe('useReferralStats', () => {
       referralTierIndex: -1,
       referralTiers: [],
       epochsInSet: 0,
+      code: undefined,
+      isReferrer: false,
     });
   });
 
@@ -93,6 +95,8 @@ describe('useReferralStats', () => {
       referralTierIndex: 1,
       referralTiers: program.benefitTiers,
       epochsInSet: Number(epoch.id) - set.atEpoch,
+      code: undefined,
+      isReferrer: false,
     });
   });
 

apps/trading/components/fees-container/use-referral-stats.ts

@@ -2,12 +2,15 @@ import compact from 'lodash/compact';
 import maxBy from 'lodash/maxBy';
 import { getReferralBenefitTier } from './utils';
 import type { DiscountProgramsQuery, FeesQuery } from './__generated__/Fees';
+import { first } from 'lodash';
 
 export const useReferralStats = (
   setStats?: FeesQuery['referralSetStats'],
   setReferees?: FeesQuery['referralSetReferees'],
   program?: DiscountProgramsQuery['currentReferralProgram'],
-  epoch?: FeesQuery['epoch']
+  epoch?: FeesQuery['epoch'],
+  setIfReferrer?: FeesQuery['referrer'],
+  setIfReferee?: FeesQuery['referee']
 ) => {
   const referralTiers = program?.benefitTiers || [];
 
@@ -18,9 +21,18 @@ export const useReferralStats = (
       referralTierIndex: -1,
       referralTiers,
       epochsInSet: 0,
+      code: undefined,
+      isReferrer: false,
     };
   }
 
+  const setIfReferrerData = first(
+    compact(setIfReferrer?.edges).map((e) => e.node)
+  );
+  const setIfRefereeData = first(
+    compact(setIfReferee?.edges).map((e) => e.node)
+  );
+
   const referralSetsStats = compact(setStats.edges).map((e) => e.node);
   const referralSets = compact(setReferees.edges).map((e) => e.node);
 
@@ -48,5 +60,7 @@ export const useReferralStats = (
     referralTierIndex,
     referralTiers,
     epochsInSet,
+    code: (setIfReferrerData || setIfRefereeData)?.id,
+    isReferrer: Boolean(setIfReferrerData),
   };
 };

apps/trading/components/fees-container/utils.spec.ts

@@ -21,7 +21,7 @@ describe('getAdjustedFee', () => {
       new BigNumber(referralDiscount),
     ];
 
-    // 1 - 0.5 - 0.5
+    // 1 - 0.5 = 0.5
     const v = new BigNumber(1).minus(new BigNumber(volumeDiscount));
 
     // 1 - 0.5 = 0.5
@@ -34,13 +34,15 @@ describe('getAdjustedFee', () => {
     // 0.1 + 0.1 + 0.1 = 0.3
     const totalFees = fees.reduce((sum, x) => sum.plus(x), new BigNumber(0));
 
-    // 0.3 * 0.75 = 0.225
-    const expected = new BigNumber(totalFees).times(factor).toNumber();
+    // (1 - 0.3) * 0.75 = 0.525
+    const expected = new BigNumber(totalFees)
+      .times(new BigNumber(1).minus(factor))
+      .toNumber();
 
     expect(getAdjustedFee(fees, discounts)).toBe(expected);
   });
 
-  it('combines discount factors multiplicativly', () => {
+  it('combines discount factors multiplicatively', () => {
     const volumeDiscount = 0.4;
     const referralDiscount = 0.1;
 
@@ -67,7 +69,9 @@ describe('getAdjustedFee', () => {
     // summed fees
     const totalFees = fees.reduce((sum, x) => sum.plus(x), new BigNumber(0));
 
-    const expected = new BigNumber(totalFees).times(factor).toNumber();
+    const expected = new BigNumber(totalFees)
+      .times(new BigNumber(1).minus(factor))
+      .toNumber();
 
     expect(getAdjustedFee(fees, discounts)).toBe(expected);
   });

apps/trading/components/fees-container/utils.ts

@@ -12,7 +12,9 @@ export const formatPercentage = (num: number) => {
   const pct = new BigNumber(num).times(100);
   const dps = pct.decimalPlaces();
   const formatter = new Intl.NumberFormat(getUserLocale(), {
-    minimumFractionDigits: dps || 0,
+    // set to 0 in order to remove the "trailing zeroes" for numbers such as:
+    // 0.123456789 -non-zero-min-> 12.3456800% -zero-min-> 12.34568%
+    minimumFractionDigits: 0,
     maximumFractionDigits: dps || 0,
   });
   return formatter.format(parseFloat(pct.toFixed(5)));
@@ -101,5 +103,7 @@ export const getAdjustedFee = (fees: BigNumber[], discounts: BigNumber[]) => {
 
   const totalFactor = new BigNumber(1).minus(combinedFactors);
 
-  return totalFee.times(BigNumber.max(0, totalFactor)).toNumber();
+  return totalFee
+    .times(new BigNumber(1).minus(BigNumber.max(0, totalFactor)))
+    .toNumber();
 };

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

@@ -15,15 +15,12 @@ export const LedgerContainer = () => {
   });
 
   const assets = (data?.party?.accountsConnection?.edges ?? [])
-    .map<PartyAssetFieldsFragment>(
-      (item) => item?.node?.asset ?? ({} as PartyAssetFieldsFragment)
-    )
-    .reduce((aggr, item) => {
-      if ('id' in item && 'symbol' in item) {
-        aggr[item.id as string] = item.symbol as string;
-      }
-      return aggr;
-    }, {} as Record<string, string>);
+    .map((item) => item?.node?.asset)
+    .filter((asset): asset is PartyAssetFieldsFragment => !!asset?.id)
+    .reduce(
+      (aggr, item) => Object.assign(aggr, { [item.id]: item.symbol }),
+      {} as Record<string, string>
+    );
 
   if (!pubKey) {
     return (

apps/trading/components/settings/settings.spec.tsx

@@ -0,0 +1,12 @@
+import { Settings } from './settings';
+import { render, screen } from '@testing-library/react';
+
+describe('Settings', () => {
+  it('should the settings component with all the options', () => {
+    render(<Settings />);
+    expect(screen.getByText('Dark mode')).toBeInTheDocument();
+    expect(screen.getByText('Share usage data')).toBeInTheDocument();
+    expect(screen.getByText('Toast location')).toBeInTheDocument();
+    expect(screen.getByText('Reset to default')).toBeInTheDocument();
+  });
+});

apps/trading/components/settings/settings.tsx

@@ -1,12 +1,19 @@
 import { t } from '@vegaprotocol/i18n';
-import { Switch, ToastPositionSetter } from '@vegaprotocol/ui-toolkit';
+import {
+  Dialog,
+  Intent,
+  Switch,
+  ToastPositionSetter,
+  TradingButton,
+} from '@vegaprotocol/ui-toolkit';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 
 export const Settings = () => {
   const { theme, setTheme } = useThemeSwitcher();
   const [isApproved, setIsApproved] = useTelemetryApproval();
+  const [open, setOpen] = useState(false);
   return (
     <div>
       <SettingsGroup label={t('Dark mode')}>
@@ -31,6 +38,52 @@ export const Settings = () => {
       <SettingsGroup label={t('Toast location')}>
         <ToastPositionSetter />
       </SettingsGroup>
+      <SettingsGroup label={t('Reset to default')}>
+        <TradingButton
+          name="reset-to-defaults"
+          size="small"
+          intent={Intent.None}
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          {t('Reset')}
+        </TradingButton>
+        <Dialog open={open} title={t('Reset')}>
+          <div className="mb-4">
+            <p>
+              {t(
+                'You will lose all persisted settings and you will be logged out.'
+              )}
+            </p>
+            <p>
+              {t('Are you sure you want to reset all settings to default?')}
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <TradingButton
+              name="reset-to-defaults-cancel"
+              intent={Intent.Primary}
+              onClick={() => {
+                localStorage.clear();
+                window.location.reload();
+              }}
+            >
+              {t('Yes, clear cache and refresh')}
+            </TradingButton>
+            <TradingButton
+              name="reset-to-defaults-cancel"
+              intent={Intent.None}
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              {t('No, keep settings')}
+            </TradingButton>
+          </div>
+        </Dialog>
+      </SettingsGroup>
     </div>
   );
 };

apps/trading/pages/styles.css

@@ -170,7 +170,7 @@ html [data-theme='dark'] {
 
 .ag-theme-balham,
 .ag-theme-balham-dark {
-  --ag-grid-size: 2px; /* Used for compactness */
+  --ag-grid-size: 3px; /* Used for compactness */
   --ag-row-height: 36px;
   --ag-header-height: 28px;
 }
@@ -184,7 +184,7 @@ html [data-theme='dark'] {
 
 /* Light variables */
 .ag-theme-balham {
-  --ag-background-color: transparent;
+  --ag-background-color: theme(colors.vega.clight.900);
   --ag-border-color: theme(colors.vega.clight.600);
   --ag-header-background-color: theme(colors.vega.clight.700);
   --ag-odd-row-background-color: transparent;
@@ -196,7 +196,7 @@ html [data-theme='dark'] {
 
 /* Dark variables */
 .ag-theme-balham-dark {
-  --ag-background-color: transparent;
+  --ag-background-color: theme(colors.vega.cdark.900);
   --ag-border-color: theme(colors.vega.cdark.600);
   --ag-header-background-color: theme(colors.vega.cdark.700);
   --ag-odd-row-background-color: transparent;

libs/datagrid/src/lib/ag-grid/ag-grid-themed.tsx

@@ -37,6 +37,9 @@ export const AgGridThemed = ({
     <div className={wrapperClasses}>
       <AgGridReact
         defaultColDef={defaultColDef}
+        overlayLoadingTemplate={t('Loading...')}
+        overlayNoRowsTemplate={t('No data')}
+        suppressDragLeaveHidesColumns
         ref={gridRef}
         {...defaultProps}
         {...props}

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

@@ -151,6 +151,7 @@ export const DealTicketMarginDetails = ({
   const { decimals: assetDecimals, quantum } = asset;
   let marginRequiredBestCase: string | undefined = undefined;
   let marginRequiredWorstCase: string | undefined = undefined;
+
   if (marginEstimate) {
     if (currentMargins) {
       marginRequiredBestCase = (
@@ -288,7 +289,7 @@ export const DealTicketMarginDetails = ({
   const quoteName = getQuoteName(market);
 
   return (
-    <div className="flex flex-col w-full gap-2">
+    <div className="flex flex-col w-full gap-2 pt-2">
       <Accordion>
         <AccordionPanel
           itemId="margin"
@@ -296,7 +297,7 @@ export const DealTicketMarginDetails = ({
             <AccordionPrimitive.Trigger
               data-testid="accordion-toggle"
               className={classNames(
-                'w-full pt-2',
+                'w-full',
                 'flex items-center gap-2 text-xs',
                 'group'
               )}

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

@@ -278,18 +278,4 @@ describe('createDownloadUrl', () => {
       )}&dateRange.endTimestamp=${toNanoSeconds(dateTo)}`
     );
   });
-
-  it('should throw if invalid args are provided', () => {
-    // invalid url
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, protohost: 'foo' });
-    }).toThrow();
-
-    // invalid partyId
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, partyId: 'z'.repeat(64) });
-    }).toThrow();
-  });
 });

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

@@ -1,18 +1,18 @@
-import { useRef, useState } from 'react';
-import { format, subDays } from 'date-fns';
+import { useRef, useCallback } from 'react';
+import { subDays } from 'date-fns';
+import { Controller, useForm } from 'react-hook-form';
 import {
+  InputError,
   Intent,
-  Loader,
   TradingButton,
   TradingFormGroup,
   TradingInput,
   TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
-import { z } from 'zod';
 import {
   formatForInput,
+  getDateTimeFormat,
   toNanoSeconds,
-  VEGA_ID_REGEX,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
@@ -35,18 +35,18 @@ const getProtoHost = (vegaurl: string) => {
   return `${loc.protocol}//${loc.host}`;
 };
 
-const downloadSchema = z.object({
-  protohost: z.string().url().nonempty(),
-  partyId: z.string().regex(VEGA_ID_REGEX).nonempty(),
-  assetId: z.string().regex(VEGA_ID_REGEX).nonempty(),
-  dateFrom: z.string().nonempty(),
-  dateTo: z.string().optional(),
-});
-
-export const createDownloadUrl = (args: z.infer<typeof downloadSchema>) => {
-  // check args from form inputs
-  downloadSchema.parse(args);
+type LedgerFormValues = {
+  assetId: string;
+  dateFrom: string;
+  dateTo?: string;
+};
 
+export const createDownloadUrl = (
+  args: LedgerFormValues & {
+    partyId: string;
+    protohost: string;
+  }
+) => {
   const params = new URLSearchParams();
   params.append('partyId', args.partyId);
   params.append('assetId', args.assetId);
@@ -71,114 +71,101 @@ interface Props {
 
 export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const now = useRef(new Date());
-  const [dateFrom, setDateFrom] = useState(() => {
-    return formatForInput(subDays(now.current, 7));
+  const { control, handleSubmit, watch } = useForm<LedgerFormValues>({
+    defaultValues: {
+      dateFrom: formatForInput(subDays(now.current, 7)),
+      dateTo: '',
+      assetId: Object.keys(assets)[0],
+    },
   });
-  const [dateTo, setDateTo] = useState('');
+  const dateTo = watch('dateTo');
   const maxFromDate = formatForInput(new Date(dateTo || now.current));
   const maxToDate = formatForInput(now.current);
-
-  const [assetId, setAssetId] = useState(Object.keys(assets)[0]);
   const protohost = getProtoHost(vegaUrl);
-  const disabled = Boolean(!assetId);
 
   const hasItem = useLedgerDownloadFile((store) => store.hasItem);
   const updateDownloadQueue = useLedgerDownloadFile(
     (store) => store.updateQueue
   );
 
-  const assetDropDown = (
-    <TradingSelect
-      id="select-ledger-asset"
-      value={assetId}
-      onChange={(e) => {
-        setAssetId(e.target.value);
-      }}
-      className="w-full"
-      data-testid="select-ledger-asset"
-    >
-      {Object.keys(assets).map((assetKey) => (
-        <option key={assetKey} value={assetKey}>
-          {assets[assetKey]}
-        </option>
-      ))}
-    </TradingSelect>
-  );
+  const startDownload = useCallback(
+    async (formValues: LedgerFormValues) => {
+      const link = createDownloadUrl({
+        protohost,
+        partyId,
+        ...formValues,
+      });
 
-  const link = createDownloadUrl({
-    protohost,
-    partyId,
-    assetId,
-    dateFrom,
-    dateTo,
-  });
+      const dateTimeFormatter = getDateTimeFormat();
+      const title = t('Downloading for %s from %s till %s', [
+        assets[formValues.assetId],
+        dateTimeFormatter.format(new Date(formValues.dateFrom)),
+        dateTimeFormatter.format(new Date(formValues.dateTo || Date.now())),
+      ]);
 
-  const startDownload = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const title = t('Downloading for %s from %s till %s', [
-      assets[assetId],
-      format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
-      format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
-    ]);
-
-    const downloadStoreItem = {
-      title,
-      link,
-      isChanged: true,
-    };
-    if (hasItem(link)) {
-      updateDownloadQueue(downloadStoreItem);
-      return;
-    }
-    const ts = setTimeout(() => {
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Warning,
-        isDelayed: true,
+      const downloadStoreItem = {
+        title,
+        link,
         isChanged: 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');
+      };
+      if (hasItem(link)) {
+        updateDownloadQueue(downloadStoreItem);
+        return;
       }
-      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 ts = setTimeout(() => {
         updateDownloadQueue({
           ...downloadStoreItem,
-          blob,
-          isDownloaded: true,
+          intent: Intent.Warning,
+          isDelayed: true,
           isChanged: true,
-          intent: Intent.Success,
         });
+      }, 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) {
+          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 {
+        clearTimeout(ts);
       }
-    } catch (err) {
-      localLoggerFactory({ application: 'ledger' }).error('Download file', err);
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Danger,
-        isError: true,
-        isChanged: true,
-        errorMessage: (err as Error).message || undefined,
-      });
-    } finally {
-      clearTimeout(ts);
-    }
-  };
+    },
+    [assets, hasItem, partyId, protohost, updateDownloadQueue]
+  );
 
   if (!protohost || Object.keys(assets).length === 0) {
     return null;
@@ -187,49 +174,117 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const offset = new Date().getTimezoneOffset();
 
   return (
-    <form onSubmit={startDownload} className="p-4 w-[350px]">
+    <form
+      onSubmit={handleSubmit(startDownload)}
+      className="p-4 w-[350px]"
+      noValidate
+    >
       <h2 className="mb-4">{t('Export ledger entries')}</h2>
-      <TradingFormGroup label={t('Select asset')} labelFor="asset">
-        {assetDropDown}
-      </TradingFormGroup>
-      <TradingFormGroup label={t('Date from')} labelFor="date-from">
-        <TradingInput
-          type="datetime-local"
-          data-testid="date-from"
-          id="date-from"
-          value={dateFrom}
-          onChange={(e) => setDateFrom(e.target.value)}
-          max={maxFromDate}
-        />
-      </TradingFormGroup>
-      <TradingFormGroup label={t('Date to')} labelFor="date-to">
-        <TradingInput
-          type="datetime-local"
-          data-testid="date-to"
-          id="date-to"
-          value={dateTo}
-          onChange={(e) => setDateTo(e.target.value)}
-          max={maxToDate}
-        />
-      </TradingFormGroup>
+      <Controller
+        name="assetId"
+        control={control}
+        rules={{
+          required: t('You need to select an asset'),
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup
+              label={t('Select asset')}
+              labelFor="asset"
+              compact
+            >
+              <TradingSelect
+                {...field}
+                id="select-ledger-asset"
+                className="w-full"
+                data-testid="select-ledger-asset"
+              >
+                {Object.keys(assets).map((assetKey) => (
+                  <option key={assetKey} value={assetKey}>
+                    {assets[assetKey]}
+                  </option>
+                ))}
+              </TradingSelect>
+            </TradingFormGroup>
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
+      <Controller
+        name="dateFrom"
+        control={control}
+        rules={{
+          required: t('You need to provide a date from'),
+          max: {
+            value: maxFromDate,
+            message: dateTo
+              ? t('Date from cannot be greater than date to')
+              : t('Date from cannot be in the future'),
+          },
+          deps: ['dateTo'],
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup
+              label={t('Date from')}
+              labelFor="date-from"
+              compact
+            >
+              <TradingInput
+                {...field}
+                type="datetime-local"
+                data-testid="date-from"
+                id="date-from"
+                max={maxFromDate}
+              />
+            </TradingFormGroup>
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
+      <Controller
+        name="dateTo"
+        control={control}
+        rules={{
+          max: {
+            value: maxToDate,
+            message: t('Date to cannot be in the future'),
+          },
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup label={t('Date to')} labelFor="date-to" compact>
+              <TradingInput
+                {...field}
+                type="datetime-local"
+                data-testid="date-to"
+                id="date-to"
+                max={maxToDate}
+              />
+            </TradingFormGroup>
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
       <div className="relative text-sm" title={t('Download all to .csv file')}>
-        <TradingButton
-          fill
-          disabled={disabled}
-          type="submit"
-          data-testid="ledger-download-button"
-        >
+        <TradingButton fill type="submit" data-testid="ledger-download-button">
           {t('Download')}
         </TradingButton>
       </div>
-      {offset && (
+      {offset ? (
         <p className="text-xs text-neutral-400 mt-1">
           {t(
             'The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC%s.',
             [toHoursAndMinutes(offset)]
           )}
         </p>
-      )}
+      ) : null}
     </form>
   );
 };

libs/liquidity/src/lib/liquidity-table.tsx

@@ -106,9 +106,6 @@ export const LiquidityTable = ({
 
     const feesAccruedTooltip = ({ value, data }: ITooltipParams) => {
       if (!value) return '-';
-      const newValue = new BigNumber(value)
-        .times(Number(stakeToCcyVolume) || 1)
-        .toString();
       let lessThanFull = false,
         lessThanMinimum = false;
       if (data.sla) {
@@ -153,7 +150,7 @@ export const LiquidityTable = ({
           ]
         );
       }
-      return addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0);
+      return addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0);
     };
 
     const stakeToCcyVolumeQuantumFormatter = ({

libs/markets/src/lib/market-utils.ts

@@ -28,6 +28,22 @@ export const getAsset = (market: Partial<Market>) => {
   throw new Error('Failed to retrieve asset. Invalid product type');
 };
 
+export const getProductType = (market: Partial<Market>) => {
+  if (!market.tradableInstrument?.instrument.product) {
+    throw new Error(
+      'Failed to retrieve product type. Invalid tradable instrument'
+    );
+  }
+
+  const type = market.tradableInstrument.instrument.product.__typename;
+
+  if (!type) {
+    throw new Error('Failed to retrieve asset. Invalid product type');
+  }
+
+  return type;
+};
+
 export const getQuoteName = (market: Partial<Market>) => {
   if (!market.tradableInstrument?.instrument.product) {
     throw new Error(

libs/positions/src/lib/positions-manager.spec.tsx

@@ -27,7 +27,9 @@ jest.mock('@vegaprotocol/data-provider', () => ({
 }));
 
 describe('PositionsManager', () => {
-  it('should close position with max uint64', async () => {
+  // TODO: temporarily disable close position
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should close position with max uint64', async () => {
     render(<PositionsManager partyIds={['partyId']} isReadOnly={false} />, {
       wrapper: MockedProvider,
     });

libs/positions/src/lib/positions-manager.tsx

@@ -29,6 +29,7 @@ export const PositionsManager = ({
 }: PositionsManagerProps) => {
   const { pubKeys, pubKey } = useVegaWallet();
   const create = useVegaTransactionStore((store) => store.create);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const onClose = useCallback(
     ({ marketId, openVolume }: { marketId: string; openVolume: string }) =>
       create({
@@ -73,7 +74,8 @@ export const PositionsManager = ({
       pubKeys={pubKeys}
       rowData={data}
       onMarketClick={onMarketClick}
-      onClose={onClose}
+      // TODO: temporarily disable close position
+      // onClose={onClose}
       isReadOnly={isReadOnly}
       multipleKeys={partyIds.length > 1}
       overlayNoRowsTemplate={error ? error.message : t('No positions')}

libs/wallet/src/connect-dialog/use-chain-id.spec.ts

@@ -0,0 +1,72 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useVegaWallet } from '../use-vega-wallet';
+import { useChainId } from './use-chain-id';
+
+global.fetch = jest.fn();
+const mockFetch = global.fetch as jest.Mock;
+mockFetch.mockImplementation((url: string) => {
+  return Promise.resolve({ ok: true });
+});
+
+jest.mock('../use-vega-wallet', () => {
+  const original = jest.requireActual('../use-vega-wallet');
+  return {
+    ...original,
+    useVegaWallet: jest.fn(),
+  };
+});
+
+describe('useChainId', () => {
+  it('does not call fetch when statistics url could not be determined', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: '',
+    });
+    renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('calls fetch with correct statistics url', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        'http://localhost:1234/statistics'
+      );
+    });
+  });
+
+  it('does not return chain id when chain id is not present in response', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    const { result } = renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('returns chain id when chain id is present in response', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    mockFetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        json: () => ({
+          statistics: {
+            chainId: '1234',
+          },
+        }),
+      });
+    });
+    const { result } = renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(result.current).not.toBeUndefined();
+      expect(result.current).toEqual('1234');
+    });
+  });
+});

libs/wallet/src/connect-dialog/use-chain-id.ts

@@ -3,17 +3,37 @@ import { useVegaWallet } from '../use-vega-wallet';
 
 const cache: Record<string, string> = {};
 
+/**
+ * Gets the statistics url for a given vega url.
+ * Example:
+ * https://graphql.example.com/graphql -> https://graphql.example.com/statistics
+ */
+const getNodeStatisticsUrl = (vegaUrl: string) => {
+  try {
+    const url = new URL(vegaUrl);
+    url.pathname = 'statistics';
+    return url.toString();
+  } catch (err) {
+    return undefined;
+  }
+};
+
 export const useChainId = () => {
   const { vegaUrl } = useVegaWallet();
   const [chainId, setChainId] = useState<undefined | string>(cache[vegaUrl]);
   const [fetchAttempt, setFetchAttempt] = useState(1);
+
+  const statisticsUrl = getNodeStatisticsUrl(vegaUrl);
+
   useEffect(() => {
+    // abort when `/statistics` URL could not be determined
+    if (!statisticsUrl) return;
     let isCancelled = false;
     if (cache[vegaUrl]) {
       setChainId(cache[vegaUrl]);
       return;
     }
-    fetch(vegaUrl.replace('graphql', 'statistics'))
+    fetch(statisticsUrl)
       .then((response) => response.json())
       .then((response) => {
         if (isCancelled) {
@@ -32,6 +52,6 @@ export const useChainId = () => {
     return () => {
       isCancelled = true;
     };
-  }, [fetchAttempt, vegaUrl]);
+  }, [fetchAttempt, statisticsUrl, vegaUrl]);
   return chainId;
 };