fix(trading): next tier in referral stats

Co-authored-by: Madalina Raicu <madalina@raygroup.uk>

.gitignore

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

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.spec.tsx

@@ -8,7 +8,7 @@ import {
   networkParamsQueryMock,
   nextWeek,
 } from '../../test-helpers/mocks';
-import { VoteBreakdown } from './vote-breakdown';
+import { CompactVotes, VoteBreakdown } from './vote-breakdown';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { MockedResponse } from '@apollo/client/testing';
 import {
@@ -346,3 +346,22 @@ describe('VoteBreakdown', () => {
     expect(style.width).toBe(`${expectedProgress}%`);
   });
 });
+
+describe('CompactVotes', () => {
+  it.each([
+    [0, '0'],
+    [1, '1'],
+    [12, '12'],
+    [123, '123'],
+    [1234, '1.2K'],
+    [12345, '12.3K'],
+    [123456, '123.5K'],
+    [1234567, '1.2M'],
+    [12345678, '12.3M'],
+    [123456789, '123.5M'],
+    [1234567890, '1.2B'],
+  ])('compacts %s to %s', (input, output) => {
+    const { getByTestId } = render(<CompactVotes number={BigNumber(input)} />);
+    expect(getByTestId('compact-number').textContent).toBe(output);
+  });
+});

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx

@@ -3,11 +3,21 @@ import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
 import { useVoteInformation } from '../../hooks';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { formatNumber, toBigNum } from '@vegaprotocol/utils';
+import { formatNumber } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
 import type { ReactNode } from 'react';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { CompactNumber } from '@vegaprotocol/react-helpers';
+
+export const CompactVotes = ({ number }: { number: BigNumber }) => (
+  <CompactNumber
+    number={number}
+    decimals={number.isGreaterThan(1000) ? 1 : 0}
+    compactAbove={1000}
+    compactDisplay="short"
+  />
+);
 
 interface VoteBreakdownProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
@@ -198,10 +208,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                     )}
                   >
                     <button>
-                      {yesEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
+                      <CompactVotes number={yesEquityLikeShareWeight} />
                     </button>
                   </Tooltip>
                   <span>
@@ -226,10 +233,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                     )}
                   >
                     <button>
-                      {noEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
+                      <CompactVotes number={noEquityLikeShareWeight} />
                     </button>
                   </Tooltip>
                   <span>
@@ -279,10 +283,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                     )}
                   >
                     <button>
-                      {totalEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
+                      <CompactVotes number={totalEquityLikeShareWeight} />
                     </button>
                   </Tooltip>
                   <span>
@@ -321,7 +322,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
               <span>{t('tokenVotesFor')}:</span>
               <Tooltip description={formatNumber(yesTokens, defaultDP)}>
                 <button data-testid="num-votes-for">
-                  {yesTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
+                  <CompactVotes number={yesTokens} />
                 </button>
               </Tooltip>
               <span>
@@ -341,7 +342,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
               <span>{t('tokenVotesAgainst')}:</span>
               <Tooltip description={formatNumber(noTokens, defaultDP)}>
                 <button data-testid="num-votes-against">
-                  {noTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
+                  <CompactVotes number={noTokens} />
                 </button>
               </Tooltip>
               <span>
@@ -384,7 +385,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
               <span>{t('totalTokensVoted')}:</span>
               <Tooltip description={formatNumber(totalTokensVoted, defaultDP)}>
                 <button data-testid="total-voted">
-                  {totalTokensVoted.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
+                  <CompactVotes number={totalTokensVoted} />
                 </button>
               </Tooltip>
               <span data-testid="total-voted-percentage">

apps/trading-e2e/src/integration/market-proposal-notification.cy.ts

@@ -2,8 +2,6 @@ import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { proposalListQuery, marketUpdateProposal } from '@vegaprotocol/mock';
 import * as Schema from '@vegaprotocol/types';
 
-const marketSummaryBlock = 'header-summary';
-
 describe('Market proposal notification', { tags: '@smoke' }, () => {
   before(() => {
     cy.setVegaWallet();
@@ -25,12 +23,13 @@ describe('Market proposal notification', { tags: '@smoke' }, () => {
     });
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
+    cy.getByTestId('Info').click();
     cy.wait('@MarketData');
-    cy.getByTestId(marketSummaryBlock).should('be.visible');
+    cy.getByTestId('sidebar-content').should('be.visible');
   });
 
   it('should display market proposal notification if proposal found', () => {
-    cy.getByTestId(marketSummaryBlock).within(() => {
+    cy.getByTestId('sidebar-content').within(() => {
       cy.getByTestId('market-proposal-notification').should(
         'contain.text',
         'Changes have been proposed for this market'

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

@@ -1,7 +1,6 @@
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { DocsLinks, useEnvironment } from '@vegaprotocol/environment';
 import { ButtonLink, ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
-import { MarketProposalNotification } from '@vegaprotocol/proposals';
 import type { Market } from '@vegaprotocol/markets';
 import {
   addDecimalsFormatNumber,
@@ -144,7 +143,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
           />
         </HeaderStat>
       )}
-      <MarketProposalNotification marketId={market.id} />
     </>
   );
 };

apps/trading/client-pages/referrals/hooks/use-referral-program.ts

@@ -75,22 +75,20 @@ export const useReferralProgram = () => {
 
   const benefitTiers = sortBy(data.currentReferralProgram.benefitTiers, (t) =>
     Number(t.referralRewardFactor)
-  )
-    .reverse()
-    .map((t, i) => {
-      return {
-        tier: i + 1,
-        rewardFactor: Number(t.referralRewardFactor),
-        commission: Number(t.referralRewardFactor) * 100 + '%',
-        discountFactor: Number(t.referralDiscountFactor),
-        discount: Number(t.referralDiscountFactor) * 100 + '%',
-        minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
-        volume: getNumberFormat(0).format(
-          Number(t.minimumRunningNotionalTakerVolume)
-        ),
-        epochs: Number(t.minimumEpochs),
-      };
-    });
+  ).map((t, i) => {
+    return {
+      tier: i + 1, // sorted in asc order, hence first is the lowest tier
+      rewardFactor: Number(t.referralRewardFactor),
+      commission: Number(t.referralRewardFactor) * 100 + '%',
+      discountFactor: Number(t.referralDiscountFactor),
+      discount: Number(t.referralDiscountFactor) * 100 + '%',
+      minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
+      volume: getNumberFormat(0).format(
+        Number(t.minimumRunningNotionalTakerVolume)
+      ),
+      epochs: Number(t.minimumEpochs),
+    };
+  });
 
   const stakingTiers = sortBy(
     data.currentReferralProgram.stakingTiers,

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -29,8 +29,8 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
 import { t } from '@vegaprotocol/i18n';
-import maxBy from 'lodash/maxBy';
 import { DocsLinks } from '@vegaprotocol/environment';
+import minBy from 'lodash/minBy';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -123,8 +123,8 @@ export const Statistics = ({
       t.discountFactor === discountFactorValue
   );
   const nextBenefitTierValue = currentBenefitTierValue
-    ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1)
-    : maxBy(benefitTiers, (bt) => bt.tier); // max tier number is lowest tier
+    ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier + 1)
+    : minBy(benefitTiers, (bt) => bt.tier); //  min tier number is lowest tier
   const epochsValue =
     !isNaN(currentEpoch) && refereeInfo?.atEpoch
       ? currentEpoch - refereeInfo?.atEpoch

apps/trading/client-pages/referrals/tiers.tsx

@@ -199,13 +199,13 @@ const TiersTable = ({
         ...d,
         className: classNames({
           'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-            d.tier === 1,
+            d.tier >= 3,
           'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
             d.tier === 2,
           'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
-            d.tier === 3,
+            d.tier === 1,
           'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-            d.tier > 3,
+            d.tier == 0,
         }),
       }))}
     />

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

@@ -16,18 +16,11 @@ query DiscountPrograms {
   }
 }
 
-query Fees(
-  $partyId: ID!
-  $volumeDiscountEpochs: Int!
-  $referralDiscountEpochs: Int!
-) {
+query Fees($partyId: ID!) {
   epoch {
     id
   }
-  volumeDiscountStats(
-    partyId: $partyId
-    pagination: { last: $volumeDiscountEpochs }
-  ) {
+  volumeDiscountStats(partyId: $partyId, pagination: { last: 1 }) {
     edges {
       node {
         atEpoch
@@ -59,10 +52,7 @@ query Fees(
       }
     }
   }
-  referralSetStats(
-    partyId: $partyId
-    pagination: { last: $referralDiscountEpochs }
-  ) {
+  referralSetStats(partyId: $partyId, pagination: { last: 1 }) {
     edges {
       node {
         atEpoch

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

@@ -10,8 +10,6 @@ export type DiscountProgramsQuery = { __typename?: 'Query', currentReferralProgr
 
 export type FeesQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
-  volumeDiscountEpochs: Types.Scalars['Int'];
-  referralDiscountEpochs: Types.Scalars['Int'];
 }>;
 
 
@@ -65,14 +63,11 @@ export type DiscountProgramsQueryHookResult = ReturnType<typeof useDiscountProgr
 export type DiscountProgramsLazyQueryHookResult = ReturnType<typeof useDiscountProgramsLazyQuery>;
 export type DiscountProgramsQueryResult = Apollo.QueryResult<DiscountProgramsQuery, DiscountProgramsQueryVariables>;
 export const FeesDocument = gql`
-    query Fees($partyId: ID!, $volumeDiscountEpochs: Int!, $referralDiscountEpochs: Int!) {
+    query Fees($partyId: ID!) {
   epoch {
     id
   }
-  volumeDiscountStats(
-    partyId: $partyId
-    pagination: {last: $volumeDiscountEpochs}
-  ) {
+  volumeDiscountStats(partyId: $partyId, pagination: {last: 1}) {
     edges {
       node {
         atEpoch
@@ -104,7 +99,7 @@ export const FeesDocument = gql`
       }
     }
   }
-  referralSetStats(partyId: $partyId, pagination: {last: $referralDiscountEpochs}) {
+  referralSetStats(partyId: $partyId, pagination: {last: 1}) {
     edges {
       node {
         atEpoch
@@ -129,8 +124,6 @@ export const FeesDocument = gql`
  * const { data, loading, error } = useFeesQuery({
  *   variables: {
  *      partyId: // value for 'partyId'
- *      volumeDiscountEpochs: // value for 'volumeDiscountEpochs'
- *      referralDiscountEpochs: // value for 'referralDiscountEpochs'
  *   },
  * });
  */

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

@@ -36,25 +36,25 @@ export const FeesContainer = () => {
   const { data: markets, loading: marketsLoading } = useMarketList();
 
   const { data: programData, loading: programLoading } =
-    useDiscountProgramsQuery();
+    useDiscountProgramsQuery({ errorPolicy: 'ignore' });
 
   const volumeDiscountWindowLength =
     programData?.currentVolumeDiscountProgram?.windowLength || 1;
   const referralDiscountWindowLength =
     programData?.currentReferralProgram?.windowLength || 1;
-
   const { data: feesData, loading: feesLoading } = useFeesQuery({
     variables: {
       partyId: pubKey || '',
-      volumeDiscountEpochs: volumeDiscountWindowLength,
-      referralDiscountEpochs: referralDiscountWindowLength,
     },
-    skip: !pubKey || !programData,
+    skip: !pubKey,
   });
 
+  const previousEpoch = (Number(feesData?.epoch.id) || 0) - 1;
+
   const { volumeDiscount, volumeTierIndex, volumeInWindow, volumeTiers } =
     useVolumeStats(
-      feesData?.volumeDiscountStats,
+      previousEpoch,
+      feesData?.volumeDiscountStats.edges?.[0]?.node,
       programData?.currentVolumeDiscountProgram
     );
 
@@ -67,12 +67,12 @@ export const FeesContainer = () => {
     code,
     isReferrer,
   } = useReferralStats(
-    feesData?.referralSetStats,
-    feesData?.referralSetReferees,
+    previousEpoch,
+    feesData?.referralSetStats.edges?.[0]?.node,
+    feesData?.referralSetReferees.edges?.[0]?.node,
     programData?.currentReferralProgram,
-    feesData?.epoch,
-    feesData?.referrer,
-    feesData?.referee
+    feesData?.referrer.edges?.[0]?.node,
+    feesData?.referee.edges?.[0]?.node
   );
 
   const loading = paramsLoading || feesLoading || programLoading;
@@ -459,25 +459,19 @@ const VolumeTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
-            .reverse()
-            .map((tier, i) => {
-              const isUserTier = tiers.length - 1 - tierIndex === i;
+          {Array.from(tiers).map((tier, i) => {
+            const isUserTier = tierIndex === i;
 
-              return (
-                <Tr key={i}>
-                  <Td>{i + 1}</Td>
-                  <Td>
-                    {formatPercentage(Number(tier.volumeDiscountFactor))}%
-                  </Td>
-                  <Td>
-                    {formatNumber(tier.minimumRunningNotionalTakerVolume)}
-                  </Td>
-                  <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
-                  <Td>{isUserTier ? <YourTier /> : null}</Td>
-                </Tr>
-              );
-            })}
+            return (
+              <Tr key={i}>
+                <Td>{i + 1}</Td>
+                <Td>{formatPercentage(Number(tier.volumeDiscountFactor))}%</Td>
+                <Td>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</Td>
+                <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
+                <Td>{isUserTier ? <YourTier /> : null}</Td>
+              </Tr>
+            );
+          })}
         </tbody>
       </Table>
     </div>
@@ -518,37 +512,33 @@ const ReferralTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
-            .reverse()
-            .map((t, i) => {
-              const isUserTier = tiers.length - 1 - tierIndex === i;
+          {Array.from(tiers).map((t, i) => {
+            const isUserTier = tierIndex === i;
 
-              const requiredVolume = Number(
-                t.minimumRunningNotionalTakerVolume
+            const requiredVolume = Number(t.minimumRunningNotionalTakerVolume);
+            let unlocksIn = null;
+
+            if (
+              referralVolumeInWindow >= requiredVolume &&
+              epochsInSet < t.minimumEpochs
+            ) {
+              unlocksIn = (
+                <span className="text-muted">
+                  Unlocks in {t.minimumEpochs - epochsInSet} epochs
+                </span>
               );
-              let unlocksIn = null;
+            }
 
-              if (
-                referralVolumeInWindow >= requiredVolume &&
-                epochsInSet < t.minimumEpochs
-              ) {
-                unlocksIn = (
-                  <span className="text-muted">
-                    Unlocks in {t.minimumEpochs - epochsInSet} epochs
-                  </span>
-                );
-              }
-
-              return (
-                <Tr key={i}>
-                  <Td>{i + 1}</Td>
-                  <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
-                  <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
-                  <Td>{t.minimumEpochs}</Td>
-                  <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
-                </Tr>
-              );
-            })}
+            return (
+              <Tr key={i}>
+                <Td>{i + 1}</Td>
+                <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
+                <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
+                <Td>{t.minimumEpochs}</Td>
+                <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
+              </Tr>
+            );
+          })}
         </tbody>
       </Table>
     </div>

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

@@ -2,46 +2,15 @@ import { renderHook } from '@testing-library/react';
 import { useReferralStats } from './use-referral-stats';
 
 describe('useReferralStats', () => {
-  const setStats = {
-    edges: [
-      {
-        __typename: 'ReferralSetStatsEdge' as const,
-        node: {
-          __typename: 'ReferralSetStats' as const,
-          atEpoch: 9,
-          discountFactor: '0.2',
-          referralSetRunningNotionalTakerVolume: '100',
-        },
-      },
-      {
-        __typename: 'ReferralSetStatsEdge' as const,
-        node: {
-          __typename: 'ReferralSetStats' as const,
-          atEpoch: 10,
-          discountFactor: '0.3',
-          referralSetRunningNotionalTakerVolume: '200',
-        },
-      },
-    ],
+  const stat = {
+    __typename: 'ReferralSetStats' as const,
+    atEpoch: 9,
+    discountFactor: '0.01',
+    referralSetRunningNotionalTakerVolume: '100',
   };
 
-  const sets = {
-    edges: [
-      {
-        node: {
-          atEpoch: 3,
-        },
-      },
-      {
-        node: {
-          atEpoch: 4,
-        },
-      },
-    ],
-  };
-
-  const epoch = {
-    id: '10',
+  const set = {
+    atEpoch: 4,
   };
 
   const program = {
@@ -78,102 +47,36 @@ describe('useReferralStats', () => {
     });
   });
 
-  it('returns formatted data and tiers', () => {
+  it('returns default values if set is not from previous epoch', () => {
     const { result } = renderHook(() =>
-      useReferralStats(setStats, sets, program, epoch)
+      useReferralStats(10, stat, set, program)
     );
-
-    // should use stats from latest epoch
-    const stats = setStats.edges[1].node;
-    const set = sets.edges[1].node;
-
     expect(result.current).toEqual({
-      referralDiscount: Number(stats.discountFactor),
-      referralVolumeInWindow: Number(
-        stats.referralSetRunningNotionalTakerVolume
-      ),
-      referralTierIndex: 1,
+      referralDiscount: 0,
+      referralVolumeInWindow: 0,
+      referralTierIndex: -1,
       referralTiers: program.benefitTiers,
-      epochsInSet: Number(epoch.id) - set.atEpoch,
+      epochsInSet: 0,
       code: undefined,
       isReferrer: false,
     });
   });
 
-  it.each([
-    { joinedAt: 2, index: -1 },
-    { joinedAt: 3, index: -1 },
-    { joinedAt: 4, index: 0 },
-    { joinedAt: 5, index: 0 },
-    { joinedAt: 6, index: 1 },
-    { joinedAt: 7, index: 1 },
-    { joinedAt: 8, index: 2 },
-    { joinedAt: 9, index: 2 },
-  ])('joined at epoch: $joinedAt should be index: $index', (obj) => {
-    const statsA = {
-      edges: [
-        {
-          __typename: 'ReferralSetStatsEdge' as const,
-          node: {
-            __typename: 'ReferralSetStats' as const,
-            atEpoch: 10,
-            discountFactor: '0.3',
-            referralSetRunningNotionalTakerVolume: '100000',
-          },
-        },
-      ],
-    };
-    const setsA = {
-      edges: [
-        {
-          node: {
-            atEpoch: Number(epoch.id) - obj.joinedAt,
-          },
-        },
-      ],
-    };
+  it('returns formatted data and tiers', () => {
     const { result } = renderHook(() =>
-      useReferralStats(statsA, setsA, program, epoch)
+      useReferralStats(9, stat, set, program)
     );
 
-    expect(result.current.referralTierIndex).toEqual(obj.index);
-  });
-
-  it.each([
-    { volume: '50', index: -1 },
-    { volume: '100', index: 0 },
-    { volume: '150', index: 0 },
-    { volume: '200', index: 1 },
-    { volume: '250', index: 1 },
-    { volume: '300', index: 2 },
-    { volume: '999', index: 2 },
-  ])('volume: $volume should be index: $index', (obj) => {
-    const statsA = {
-      edges: [
-        {
-          __typename: 'ReferralSetStatsEdge' as const,
-          node: {
-            __typename: 'ReferralSetStats' as const,
-            atEpoch: 10,
-            discountFactor: '0.3',
-            referralSetRunningNotionalTakerVolume: obj.volume,
-          },
-        },
-      ],
-    };
-    const setsA = {
-      edges: [
-        {
-          node: {
-            atEpoch: 1,
-          },
-        },
-      ],
-    };
-    const { result } = renderHook(() =>
-      useReferralStats(statsA, setsA, program, epoch)
-    );
-
-    expect(result.current.referralTierIndex).toEqual(obj.index);
+    expect(result.current).toEqual({
+      referralDiscount: Number(stat.discountFactor),
+      referralVolumeInWindow: Number(
+        stat.referralSetRunningNotionalTakerVolume
+      ),
+      referralTierIndex: 0,
+      referralTiers: program.benefitTiers,
+      epochsInSet: stat.atEpoch - set.atEpoch,
+      code: undefined,
+      isReferrer: false,
+    });
   });
 });

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

@@ -1,20 +1,24 @@
-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'],
+  previousEpoch?: number,
+  referralStats?: NonNullable<
+    FeesQuery['referralSetStats']['edges']['0']
+  >['node'],
+  setReferees?: NonNullable<
+    FeesQuery['referralSetReferees']['edges']['0']
+  >['node'],
   program?: DiscountProgramsQuery['currentReferralProgram'],
-  epoch?: FeesQuery['epoch'],
-  setIfReferrer?: FeesQuery['referrer'],
-  setIfReferee?: FeesQuery['referee']
+  setIfReferrer?: NonNullable<FeesQuery['referrer']['edges']['0']>['node'],
+  setIfReferee?: NonNullable<FeesQuery['referee']['edges']['0']>['node']
 ) => {
   const referralTiers = program?.benefitTiers || [];
 
-  if (!setStats || !setReferees || !program || !epoch) {
+  if (
+    !previousEpoch ||
+    referralStats?.atEpoch !== previousEpoch ||
+    !program ||
+    !setReferees
+  ) {
     return {
       referralDiscount: 0,
       referralVolumeInWindow: 0,
@@ -26,41 +30,22 @@ export const useReferralStats = (
     };
   }
 
-  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);
-
-  const referralSet = maxBy(referralSets, (s) => s.atEpoch);
-  const referralStats = maxBy(referralSetsStats, (s) => s.atEpoch);
-
-  const epochsInSet = referralSet ? Number(epoch.id) - referralSet.atEpoch : 0;
-
   const referralDiscount = Number(referralStats?.discountFactor || 0);
   const referralVolumeInWindow = Number(
     referralStats?.referralSetRunningNotionalTakerVolume || 0
   );
 
-  const referralTierIndex = referralStats
-    ? getReferralBenefitTier(
-        epochsInSet,
-        Number(referralStats.referralSetRunningNotionalTakerVolume),
-        referralTiers
-      )
-    : -1;
+  const referralTierIndex = referralTiers.findIndex(
+    (tier) => tier.referralDiscountFactor === referralStats?.discountFactor
+  );
 
   return {
     referralDiscount,
     referralVolumeInWindow,
     referralTierIndex,
     referralTiers,
-    epochsInSet,
-    code: (setIfReferrerData || setIfRefereeData)?.id,
-    isReferrer: Boolean(setIfReferrerData),
+    epochsInSet: referralStats.atEpoch - setReferees.atEpoch,
+    code: (setIfReferrer || setIfReferee)?.id,
+    isReferrer: Boolean(setIfReferrer),
   };
 };

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

@@ -2,27 +2,11 @@ import { renderHook } from '@testing-library/react';
 import { useVolumeStats } from './use-volume-stats';
 
 describe('useReferralStats', () => {
-  const statsList = {
-    edges: [
-      {
-        __typename: 'VolumeDiscountStatsEdge' as const,
-        node: {
-          __typename: 'VolumeDiscountStats' as const,
-          atEpoch: 9,
-          discountFactor: '0.1',
-          runningVolume: '100',
-        },
-      },
-      {
-        __typename: 'VolumeDiscountStatsEdge' as const,
-        node: {
-          __typename: 'VolumeDiscountStats' as const,
-          atEpoch: 10,
-          discountFactor: '0.3',
-          runningVolume: '200',
-        },
-      },
-    ],
+  const stats = {
+    __typename: 'VolumeDiscountStats' as const,
+    atEpoch: 10,
+    discountFactor: '0.05',
+    runningVolume: '200',
   };
 
   const program = {
@@ -44,7 +28,7 @@ describe('useReferralStats', () => {
   };
 
   it('returns correct default values', () => {
-    const { result } = renderHook(() => useVolumeStats());
+    const { result } = renderHook(() => useVolumeStats(10));
     expect(result.current).toEqual({
       volumeDiscount: 0,
       volumeInWindow: 0,
@@ -53,11 +37,18 @@ describe('useReferralStats', () => {
     });
   });
 
-  it('returns formatted data and tiers', () => {
-    const { result } = renderHook(() => useVolumeStats(statsList, program));
+  it('returns default values if no stat is not from previous epoch', () => {
+    const { result } = renderHook(() => useVolumeStats(11, stats, program));
+    expect(result.current).toEqual({
+      volumeDiscount: 0,
+      volumeInWindow: 0,
+      volumeTierIndex: -1,
+      volumeTiers: program.benefitTiers,
+    });
+  });
 
-    // should use stats from latest epoch
-    const stats = statsList.edges[1].node;
+  it('returns formatted data and tiers', () => {
+    const { result } = renderHook(() => useVolumeStats(10, stats, program));
 
     expect(result.current).toEqual({
       volumeDiscount: Number(stats.discountFactor),
@@ -66,30 +57,4 @@ describe('useReferralStats', () => {
       volumeTiers: program.benefitTiers,
     });
   });
-
-  it.each([
-    { volume: '100', index: 0 },
-    { volume: '150', index: 0 },
-    { volume: '200', index: 1 },
-    { volume: '250', index: 1 },
-    { volume: '300', index: 2 },
-    { volume: '350', index: 2 },
-  ])('returns index: $index for the running volume: $volume', (obj) => {
-    const statsA = {
-      edges: [
-        {
-          __typename: 'VolumeDiscountStatsEdge' as const,
-          node: {
-            __typename: 'VolumeDiscountStats' as const,
-            atEpoch: 10,
-            discountFactor: '0.3',
-            runningVolume: obj.volume,
-          },
-        },
-      ],
-    };
-
-    const { result } = renderHook(() => useVolumeStats(statsA, program));
-    expect(result.current.volumeTierIndex).toBe(obj.index);
-  });
 });

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

@@ -1,15 +1,15 @@
-import compact from 'lodash/compact';
-import maxBy from 'lodash/maxBy';
-import { getVolumeTier } from './utils';
 import type { DiscountProgramsQuery, FeesQuery } from './__generated__/Fees';
 
 export const useVolumeStats = (
-  stats?: FeesQuery['volumeDiscountStats'],
+  previousEpoch: number,
+  lastEpochStats?: NonNullable<
+    FeesQuery['volumeDiscountStats']['edges']['0']
+  >['node'],
   program?: DiscountProgramsQuery['currentVolumeDiscountProgram']
 ) => {
   const volumeTiers = program?.benefitTiers || [];
 
-  if (!stats || !program) {
+  if (!lastEpochStats || lastEpochStats.atEpoch !== previousEpoch || !program) {
     return {
       volumeDiscount: 0,
       volumeTierIndex: -1,
@@ -18,11 +18,11 @@ export const useVolumeStats = (
     };
   }
 
-  const volumeStats = compact(stats.edges).map((e) => e.node);
-  const lastEpochStats = maxBy(volumeStats, (s) => s.atEpoch);
   const volumeDiscount = Number(lastEpochStats?.discountFactor || 0);
   const volumeInWindow = Number(lastEpochStats?.runningVolume || 0);
-  const volumeTierIndex = getVolumeTier(volumeInWindow, volumeTiers);
+  const volumeTierIndex = volumeTiers.findIndex(
+    (tier) => tier.volumeDiscountFactor === lastEpochStats?.discountFactor
+  );
 
   return {
     volumeDiscount,

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

@@ -20,73 +20,6 @@ export const formatPercentage = (num: number) => {
   return formatter.format(parseFloat(pct.toFixed(5)));
 };
 
-/**
- * Return the index of the benefit tier for volume discounts. A user
- * only needs to fulfill a minimum volume requirement for the tier
- */
-export const getVolumeTier = (
-  volume: number,
-  tiers: Array<{
-    minimumRunningNotionalTakerVolume: string;
-  }>
-) => {
-  return tiers.findIndex((tier, i) => {
-    const nextTier = tiers[i + 1];
-    const validVolume =
-      volume >= Number(tier.minimumRunningNotionalTakerVolume);
-
-    if (nextTier) {
-      return (
-        validVolume &&
-        volume < Number(nextTier.minimumRunningNotionalTakerVolume)
-      );
-    }
-
-    return validVolume;
-  });
-};
-
-/**
- * Return the index of the benefit tiers for referrals. A user must
- * fulfill both the minimum epochs in the referral set, and the set
- * must reach the combined total volume
- */
-export const getReferralBenefitTier = (
-  epochsInSet: number,
-  volume: number,
-  tiers: Array<{
-    minimumRunningNotionalTakerVolume: string;
-    minimumEpochs: number;
-  }>
-) => {
-  const indexByEpoch = tiers.findIndex((tier, i) => {
-    const nextTier = tiers[i + 1];
-    const validEpochs = epochsInSet >= tier.minimumEpochs;
-
-    if (nextTier) {
-      return validEpochs && epochsInSet < nextTier.minimumEpochs;
-    }
-
-    return validEpochs;
-  });
-  const indexByVolume = tiers.findIndex((tier, i) => {
-    const nextTier = tiers[i + 1];
-    const validVolume =
-      volume >= Number(tier.minimumRunningNotionalTakerVolume);
-
-    if (nextTier) {
-      return (
-        validVolume &&
-        volume < Number(nextTier.minimumRunningNotionalTakerVolume)
-      );
-    }
-
-    return validVolume;
-  });
-
-  return Math.min(indexByEpoch, indexByVolume);
-};
-
 /**
  * Given a set of fees and a set of discounts return
  * the adjusted fee factor

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/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/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/proposals/src/components/market-proposal-notification.tsx

@@ -29,7 +29,7 @@ export const MarketProposalNotification = ({
       </div>
     );
     return (
-      <div className="border-l border-default pl-1 pr-1 pb-1 min-w-min whitespace-nowrap">
+      <div className="border-default min-w-min border-l pb-1 pl-1 pr-1">
         <Notification
           intent={Intent.Warning}
           message={message}

libs/react-helpers/src/lib/format/number.tsx

@@ -22,11 +22,13 @@ export const CompactNumber = ({
   decimals = 'infer',
   compactDisplay = 'short',
   testId = 'compact-number',
+  compactAbove = DEFAULT_COMPACT_ABOVE,
 }: {
   number: BigNumber;
   decimals?: number | 'infer';
   compactDisplay?: 'short' | 'long';
   testId?: string;
+  compactAbove?: number;
 }) => {
   if (!number.isFinite()) {
     return (
@@ -44,7 +46,7 @@ export const CompactNumber = ({
     return <span data-testid={testId}>{INFINITY}</span>;
   }
 
-  if (number.isLessThan(DEFAULT_COMPACT_ABOVE)) {
+  if (number.isLessThan(compactAbove)) {
     return (
       <span data-testid={testId}>{formatNumber(number, decimalPlaces)}</span>
     );

libs/types/src/__generated__/types.ts

@@ -4376,7 +4376,19 @@ export type Query = {
   /** The last block process by the blockchain */
   lastBlockHeight: Scalars['String'];
   /**
-   * Get ledger entries by asset, market, party, account type, transfer type within the given date range.
+   * Get a list of ledger entries within the given date range. The date range is restricted to a maximum of 5 days.
+   * This query requests and sums the number of ledger entries from a given subset of accounts, specified via the 'filter' argument.
+   * It returns a time series - implemented as a list of AggregateLedgerEntry structs - with a row for every time
+   * the summed ledger entries of the set of specified accounts changes.
+   * Each account filter must contain no more than one party ID.
+   * At least one party ID must be specified in the from or to account filter.
+   *
+   * Entries can be filtered by:
+   *   - the sending account (market ID, asset ID, account type)
+   *   - receiving account (market ID, asset ID, account type)
+   *   - sending AND receiving account
+   *   - transfer type either in addition to the above filters or as a standalone option
+   *
    * Note: The date range is restricted to any 5 days.
    * If no start or end date is provided, only ledger entries from the last 5 days will be returned.
    * If a start and end date are provided, but the end date is more than 5 days after the start date, only data up to 5 days after the start date will be returned.

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

@@ -93,7 +93,7 @@ export const Notification = ({
       </div>
       <div
         className={classNames(
-          'flex flex-col items-start overflow-hidden gap-0 mt-1',
+          'flex flex-col items-start overflow-hidden gap-0',
           'text-vega-clight-50 dark:text-vega-cdark-50',
           'font-alpha',
           { 'text-sm': size === 'small', 'text-base': size === 'medium' }

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;
 };