feat(trading): update copy for reset dialog and jest

fix(trading): reset console to default
2023-11-24 15:45:53 +00:00 · 2023-11-23 17:44:14 +00:00
35 changed files with 823 additions and 974 deletions
@@ -8,7 +8,7 @@ import {
  networkParamsQueryMock,
  nextWeek,
 } from '../../test-helpers/mocks';
-import { CompactVotes, VoteBreakdown } from './vote-breakdown';
+import { VoteBreakdown } from './vote-breakdown';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { MockedResponse } from '@apollo/client/testing';
 import {
@@ -346,22 +346,3 @@ 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);
-  });
-});
@@ -3,21 +3,11 @@ import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
 import { useVoteInformation } from '../../hooks';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { formatNumber } from '@vegaprotocol/utils';
+import { formatNumber, toBigNum } 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'];
@@ -208,7 +198,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                    )}
                  >
                    <button>
-                      <CompactVotes number={yesEquityLikeShareWeight} />
+                      {yesEquityLikeShareWeight
+                        .dividedBy(toBigNum(10 ** 6, 0))
+                        .toFixed(1)}
+                      M
                    </button>
                  </Tooltip>
                  <span>
@@ -233,7 +226,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                    )}
                  >
                    <button>
-                      <CompactVotes number={noEquityLikeShareWeight} />
+                      {noEquityLikeShareWeight
+                        .dividedBy(toBigNum(10 ** 6, 0))
+                        .toFixed(1)}
+                      M
                    </button>
                  </Tooltip>
                  <span>
@@ -283,7 +279,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                    )}
                  >
                    <button>
-                      <CompactVotes number={totalEquityLikeShareWeight} />
+                      {totalEquityLikeShareWeight
+                        .dividedBy(toBigNum(10 ** 6, 0))
+                        .toFixed(1)}
+                      M
                    </button>
                  </Tooltip>
                  <span>
@@ -322,7 +321,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
              <span>{t('tokenVotesFor')}:</span>
              <Tooltip description={formatNumber(yesTokens, defaultDP)}>
                <button data-testid="num-votes-for">
-                  <CompactVotes number={yesTokens} />
+                  {yesTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
                </button>
              </Tooltip>
              <span>
@@ -342,7 +341,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
              <span>{t('tokenVotesAgainst')}:</span>
              <Tooltip description={formatNumber(noTokens, defaultDP)}>
                <button data-testid="num-votes-against">
-                  <CompactVotes number={noTokens} />
+                  {noTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
                </button>
              </Tooltip>
              <span>
@@ -385,7 +384,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
              <span>{t('totalTokensVoted')}:</span>
              <Tooltip description={formatNumber(totalTokensVoted, defaultDP)}>
                <button data-testid="total-voted">
-                  <CompactVotes number={totalTokensVoted} />
+                  {totalTokensVoted.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
                </button>
              </Tooltip>
              <span data-testid="total-voted-percentage">
@@ -2,6 +2,8 @@ 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();
@@ -23,13 +25,12 @@ describe('Market proposal notification', { tags: '@smoke' }, () => {
    });
    cy.mockSubscription();
    cy.visit('/#/markets/market-0');
-    cy.getByTestId('Info').click();
    cy.wait('@MarketData');
-    cy.getByTestId('sidebar-content').should('be.visible');
+    cy.getByTestId(marketSummaryBlock).should('be.visible');
  });

  it('should display market proposal notification if proposal found', () => {
-    cy.getByTestId('sidebar-content').within(() => {
+    cy.getByTestId(marketSummaryBlock).within(() => {
      cy.getByTestId('market-proposal-notification').should(
        'contain.text',
        'Changes have been proposed for this market'
@@ -1,6 +1,7 @@
 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,
@@ -143,6 +144,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
          />
        </HeaderStat>
      )}
+      <MarketProposalNotification marketId={market.id} />
    </>
  );
 };
@@ -75,20 +75,22 @@ export const useReferralProgram = () => {

  const benefitTiers = sortBy(data.currentReferralProgram.benefitTiers, (t) =>
    Number(t.referralRewardFactor)
-  ).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),
-    };
-  });
+  )
+    .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),
+      };
+    });

  const stakingTiers = sortBy(
    data.currentReferralProgram.stakingTiers,
@@ -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)
-    : minBy(benefitTiers, (bt) => bt.tier); //  min tier number is lowest tier
+    ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1)
+    : maxBy(benefitTiers, (bt) => bt.tier); // max tier number is lowest tier
  const epochsValue =
    !isNaN(currentEpoch) && refereeInfo?.atEpoch
      ? currentEpoch - refereeInfo?.atEpoch
@@ -199,13 +199,13 @@ const TiersTable = ({
        ...d,
        className: classNames({
          'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-            d.tier >= 3,
+            d.tier === 1,
          '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 === 1,
+            d.tier === 3,
          'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-            d.tier == 0,
+            d.tier > 3,
        }),
      }))}
    />
@@ -16,11 +16,18 @@ query DiscountPrograms {
  }
 }

-query Fees($partyId: ID!) {
+query Fees(
+  $partyId: ID!
+  $volumeDiscountEpochs: Int!
+  $referralDiscountEpochs: Int!
+) {
  epoch {
    id
  }
-  volumeDiscountStats(partyId: $partyId, pagination: { last: 1 }) {
+  volumeDiscountStats(
+    partyId: $partyId
+    pagination: { last: $volumeDiscountEpochs }
+  ) {
    edges {
      node {
        atEpoch
@@ -52,7 +59,10 @@ query Fees($partyId: ID!) {
      }
    }
  }
-  referralSetStats(partyId: $partyId, pagination: { last: 1 }) {
+  referralSetStats(
+    partyId: $partyId
+    pagination: { last: $referralDiscountEpochs }
+  ) {
    edges {
      node {
        atEpoch
@@ -10,6 +10,8 @@ export type DiscountProgramsQuery = { __typename?: 'Query', currentReferralProgr

 export type FeesQueryVariables = Types.Exact<{
  partyId: Types.Scalars['ID'];
+  volumeDiscountEpochs: Types.Scalars['Int'];
+  referralDiscountEpochs: Types.Scalars['Int'];
 }>;


@@ -63,11 +65,14 @@ 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!) {
+    query Fees($partyId: ID!, $volumeDiscountEpochs: Int!, $referralDiscountEpochs: Int!) {
  epoch {
    id
  }
-  volumeDiscountStats(partyId: $partyId, pagination: {last: 1}) {
+  volumeDiscountStats(
+    partyId: $partyId
+    pagination: {last: $volumeDiscountEpochs}
+  ) {
    edges {
      node {
        atEpoch
@@ -99,7 +104,7 @@ export const FeesDocument = gql`
      }
    }
  }
-  referralSetStats(partyId: $partyId, pagination: {last: 1}) {
+  referralSetStats(partyId: $partyId, pagination: {last: $referralDiscountEpochs}) {
    edges {
      node {
        atEpoch
@@ -124,6 +129,8 @@ export const FeesDocument = gql`
 * const { data, loading, error } = useFeesQuery({
 *   variables: {
 *      partyId: // value for 'partyId'
+ *      volumeDiscountEpochs: // value for 'volumeDiscountEpochs'
+ *      referralDiscountEpochs: // value for 'referralDiscountEpochs'
 *   },
 * });
 */
@@ -36,25 +36,25 @@ export const FeesContainer = () => {
  const { data: markets, loading: marketsLoading } = useMarketList();

  const { data: programData, loading: programLoading } =
-    useDiscountProgramsQuery({ errorPolicy: 'ignore' });
+    useDiscountProgramsQuery();

  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,
+    skip: !pubKey || !programData,
  });

-  const previousEpoch = (Number(feesData?.epoch.id) || 0) - 1;
-
  const { volumeDiscount, volumeTierIndex, volumeInWindow, volumeTiers } =
    useVolumeStats(
-      previousEpoch,
-      feesData?.volumeDiscountStats.edges?.[0]?.node,
+      feesData?.volumeDiscountStats,
      programData?.currentVolumeDiscountProgram
    );

@@ -67,12 +67,12 @@ export const FeesContainer = () => {
    code,
    isReferrer,
  } = useReferralStats(
-    previousEpoch,
-    feesData?.referralSetStats.edges?.[0]?.node,
-    feesData?.referralSetReferees.edges?.[0]?.node,
+    feesData?.referralSetStats,
+    feesData?.referralSetReferees,
    programData?.currentReferralProgram,
-    feesData?.referrer.edges?.[0]?.node,
-    feesData?.referee.edges?.[0]?.node
+    feesData?.epoch,
+    feesData?.referrer,
+    feesData?.referee
  );

  const loading = paramsLoading || feesLoading || programLoading;
@@ -312,23 +312,16 @@ export const CurrentVolume = ({
 }) => {
  const nextTier = tiers[tierIndex + 1];
  const requiredForNextTier = nextTier
-    ? new BigNumber(nextTier.minimumRunningNotionalTakerVolume).minus(
-        windowLengthVolume
-      )
-    : new BigNumber(0);
-  const currentVolume = new BigNumber(windowLengthVolume);
+    ? Number(nextTier.minimumRunningNotionalTakerVolume) - windowLengthVolume
+    : 0;

  return (
    <div>
      <Stat
-        value={
-          currentVolume.isZero()
-            ? `<${formatNumberRounded(requiredForNextTier)}`
-            : formatNumberRounded(currentVolume)
-        }
+        value={formatNumberRounded(new BigNumber(windowLengthVolume))}
        text={t('Past %s epochs', windowLength.toString())}
      />
-      {requiredForNextTier.isGreaterThan(0) && (
+      {requiredForNextTier > 0 && (
        <Stat
          value={formatNumber(requiredForNextTier)}
          text={t('Required for next tier')}
@@ -466,19 +459,25 @@ const VolumeTiers = ({
          </tr>
        </THead>
        <tbody>
-          {Array.from(tiers).map((tier, i) => {
-            const isUserTier = tierIndex === i;
+          {Array.from(tiers)
+            .reverse()
+            .map((tier, i) => {
+              const isUserTier = tiers.length - 1 - 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>
@@ -519,33 +518,37 @@ const ReferralTiers = ({
          </tr>
        </THead>
        <tbody>
-          {Array.from(tiers).map((t, i) => {
-            const isUserTier = tierIndex === i;
+          {Array.from(tiers)
+            .reverse()
+            .map((t, i) => {
+              const isUserTier = tiers.length - 1 - tierIndex === i;

-            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>
+              const requiredVolume = Number(
+                t.minimumRunningNotionalTakerVolume
              );
-            }
+              let unlocksIn = null;

-            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>
-            );
-          })}
+              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>
+              );
+            })}
        </tbody>
      </Table>
    </div>
@@ -2,15 +2,46 @@ import { renderHook } from '@testing-library/react';
 import { useReferralStats } from './use-referral-stats';

 describe('useReferralStats', () => {
-  const stat = {
-    __typename: 'ReferralSetStats' as const,
-    atEpoch: 9,
-    discountFactor: '0.01',
-    referralSetRunningNotionalTakerVolume: '100',
+  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 set = {
-    atEpoch: 4,
+  const sets = {
+    edges: [
+      {
+        node: {
+          atEpoch: 3,
+        },
+      },
+      {
+        node: {
+          atEpoch: 4,
+        },
+      },
+    ],
+  };
+
+  const epoch = {
+    id: '10',
  };

  const program = {
@@ -47,36 +78,102 @@ describe('useReferralStats', () => {
    });
  });

-  it('returns default values if set is not from previous epoch', () => {
-    const { result } = renderHook(() =>
-      useReferralStats(10, stat, set, program)
-    );
-    expect(result.current).toEqual({
-      referralDiscount: 0,
-      referralVolumeInWindow: 0,
-      referralTierIndex: -1,
-      referralTiers: program.benefitTiers,
-      epochsInSet: 0,
-      code: undefined,
-      isReferrer: false,
-    });
-  });
-
  it('returns formatted data and tiers', () => {
    const { result } = renderHook(() =>
-      useReferralStats(9, stat, set, program)
+      useReferralStats(setStats, sets, program, epoch)
    );

+    // should use stats from latest epoch
+    const stats = setStats.edges[1].node;
+    const set = sets.edges[1].node;
+
    expect(result.current).toEqual({
-      referralDiscount: Number(stat.discountFactor),
+      referralDiscount: Number(stats.discountFactor),
      referralVolumeInWindow: Number(
-        stat.referralSetRunningNotionalTakerVolume
+        stats.referralSetRunningNotionalTakerVolume
      ),
-      referralTierIndex: 0,
+      referralTierIndex: 1,
      referralTiers: program.benefitTiers,
-      epochsInSet: stat.atEpoch - set.atEpoch,
+      epochsInSet: Number(epoch.id) - set.atEpoch,
      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,
+          },
+        },
+      ],
+    };
+    const { result } = renderHook(() =>
+      useReferralStats(statsA, setsA, program, epoch)
+    );
+
+    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);
+  });
 });
@@ -1,24 +1,20 @@
+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 = (
-  previousEpoch?: number,
-  referralStats?: NonNullable<
-    FeesQuery['referralSetStats']['edges']['0']
-  >['node'],
-  setReferees?: NonNullable<
-    FeesQuery['referralSetReferees']['edges']['0']
-  >['node'],
+  setStats?: FeesQuery['referralSetStats'],
+  setReferees?: FeesQuery['referralSetReferees'],
  program?: DiscountProgramsQuery['currentReferralProgram'],
-  setIfReferrer?: NonNullable<FeesQuery['referrer']['edges']['0']>['node'],
-  setIfReferee?: NonNullable<FeesQuery['referee']['edges']['0']>['node']
+  epoch?: FeesQuery['epoch'],
+  setIfReferrer?: FeesQuery['referrer'],
+  setIfReferee?: FeesQuery['referee']
 ) => {
  const referralTiers = program?.benefitTiers || [];

-  if (
-    !previousEpoch ||
-    referralStats?.atEpoch !== previousEpoch ||
-    !program ||
-    !setReferees
-  ) {
+  if (!setStats || !setReferees || !program || !epoch) {
    return {
      referralDiscount: 0,
      referralVolumeInWindow: 0,
@@ -30,22 +26,41 @@ 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 = referralTiers.findIndex(
-    (tier) => tier.referralDiscountFactor === referralStats?.discountFactor
-  );
+  const referralTierIndex = referralStats
+    ? getReferralBenefitTier(
+        epochsInSet,
+        Number(referralStats.referralSetRunningNotionalTakerVolume),
+        referralTiers
+      )
+    : -1;

  return {
    referralDiscount,
    referralVolumeInWindow,
    referralTierIndex,
    referralTiers,
-    epochsInSet: referralStats.atEpoch - setReferees.atEpoch,
-    code: (setIfReferrer || setIfReferee)?.id,
-    isReferrer: Boolean(setIfReferrer),
+    epochsInSet,
+    code: (setIfReferrerData || setIfRefereeData)?.id,
+    isReferrer: Boolean(setIfReferrerData),
  };
 };
@@ -2,11 +2,27 @@ import { renderHook } from '@testing-library/react';
 import { useVolumeStats } from './use-volume-stats';

 describe('useReferralStats', () => {
-  const stats = {
-    __typename: 'VolumeDiscountStats' as const,
-    atEpoch: 10,
-    discountFactor: '0.05',
-    runningVolume: '200',
+  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 program = {
@@ -28,7 +44,7 @@ describe('useReferralStats', () => {
  };

  it('returns correct default values', () => {
-    const { result } = renderHook(() => useVolumeStats(10));
+    const { result } = renderHook(() => useVolumeStats());
    expect(result.current).toEqual({
      volumeDiscount: 0,
      volumeInWindow: 0,
@@ -37,18 +53,11 @@ describe('useReferralStats', () => {
    });
  });

-  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,
-    });
-  });
-
  it('returns formatted data and tiers', () => {
-    const { result } = renderHook(() => useVolumeStats(10, stats, program));
+    const { result } = renderHook(() => useVolumeStats(statsList, program));
+
+    // should use stats from latest epoch
+    const stats = statsList.edges[1].node;

    expect(result.current).toEqual({
      volumeDiscount: Number(stats.discountFactor),
@@ -57,4 +66,30 @@ 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);
+  });
 });
@@ -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 = (
-  previousEpoch: number,
-  lastEpochStats?: NonNullable<
-    FeesQuery['volumeDiscountStats']['edges']['0']
-  >['node'],
+  stats?: FeesQuery['volumeDiscountStats'],
  program?: DiscountProgramsQuery['currentVolumeDiscountProgram']
 ) => {
  const volumeTiers = program?.benefitTiers || [];

-  if (!lastEpochStats || lastEpochStats.atEpoch !== previousEpoch || !program) {
+  if (!stats || !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 = volumeTiers.findIndex(
-    (tier) => tier.volumeDiscountFactor === lastEpochStats?.discountFactor
-  );
+  const volumeTierIndex = getVolumeTier(volumeInWindow, volumeTiers);

  return {
    volumeDiscount,
@@ -20,6 +20,73 @@ 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
@@ -15,12 +15,15 @@ export const LedgerContainer = () => {
  });

  const assets = (data?.party?.accountsConnection?.edges ?? [])
-    .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>
-    );
+    .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>);

  if (!pubKey) {
    return (
@@ -170,7 +170,7 @@ html [data-theme='dark'] {

 .ag-theme-balham,
 .ag-theme-balham-dark {
-  --ag-grid-size: 3px; /* Used for compactness */
+  --ag-grid-size: 2px; /* 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: theme(colors.vega.clight.900);
+  --ag-background-color: transparent;
  --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: theme(colors.vega.cdark.900);
+  --ag-background-color: transparent;
  --ag-border-color: theme(colors.vega.cdark.600);
  --ag-header-background-color: theme(colors.vega.cdark.700);
  --ag-odd-row-background-color: transparent;
@@ -37,9 +37,6 @@ export const AgGridThemed = ({
    <div className={wrapperClasses}>
      <AgGridReact
        defaultColDef={defaultColDef}
-        overlayLoadingTemplate={t('Loading...')}
-        overlayNoRowsTemplate={t('No data')}
-        suppressDragLeaveHidesColumns
        ref={gridRef}
        {...defaultProps}
        {...props}
@@ -4,8 +4,14 @@ import { getDateTimeFormat } from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
 import type { Trade } from './fills-data-provider';
-import { FeesDiscountBreakdownTooltip, FillsTable } from './fills-table';
+import {
+  FeesDiscountBreakdownTooltip,
+  FillsTable,
+  getFeesBreakdown,
+  getTotalFeesDiscounts,
+} from './fills-table';
 import { generateFill } from './test-helpers';
+import type { TradeFeeFieldsFragment } from './__generated__/Fills';

 const partyId = 'party-id';
 const defaultFill: PartialDeep<Trade> = {
@@ -29,7 +35,6 @@ const defaultFill: PartialDeep<Trade> = {
  },
  createdAt: new Date('2022-02-02T14:00:00').toISOString(),
 };
-
 describe('FillsTable', () => {
  it('correct columns are rendered', async () => {
    // 7005-FILL-001
@@ -60,7 +65,7 @@ describe('FillsTable', () => {
    expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
  });

-  it('formats cells correctly for buyer fill for maker', async () => {
+  it('formats cells correctly for buyer fill', async () => {
    const buyerFill = generateFill({
      ...defaultFill,
      buyer: {
@@ -84,7 +89,7 @@ describe('FillsTable', () => {
      '3.00 BTC',
      'Maker',
      '2.00 BTC',
-      '0.09 BTC',
+      '0.27 BTC',
      getDateTimeFormat().format(new Date(buyerFill.createdAt)),
      '', // action column
    ];
@@ -266,48 +271,96 @@ describe('FillsTable', () => {
      .find((c) => c.getAttribute('col-id') === 'size');
    expect(sizeCell).toHaveTextContent('3,000,000,000');
  });
+});

-  describe('FeesDiscountBreakdownTooltip', () => {
-    it('shows all discounts', () => {
-      const data = generateFill({
-        ...defaultFill,
-        buyer: {
-          id: partyId,
-        },
-      });
-      const props = {
-        data,
-        partyId,
-        value: data.market,
-      } as Parameters<typeof FeesDiscountBreakdownTooltip>['0'];
-      const { container } = render(<FeesDiscountBreakdownTooltip {...props} />);
-      const dt = container.querySelectorAll('dt');
-      const dd = container.querySelectorAll('dd');
-      const expectedDt = [
-        'Infrastructure Fee',
-        'Referral Discount',
-        'Volume Discount',
-        'Liquidity Fee',
-        'Referral Discount',
-        'Volume Discount',
-        'Maker Fee',
-        'Referral Discount',
-        'Volume Discount',
-      ];
-      const expectedDD = [
-        '0.05 BTC',
-        '0.06 BTC',
-        '0.01 BTC',
-        '0.02 BTC',
-        '0.03 BTC',
-        '0.04 BTC',
-      ];
-      expectedDt.forEach((label, i) => {
-        expect(dt[i]).toHaveTextContent(label);
-      });
-      expectedDD.forEach((label, i) => {
-        expect(dd[i]).toHaveTextContent(label);
-      });
+describe('FeesDiscountBreakdownTooltip', () => {
+  it('shows all discounts', () => {
+    const data = generateFill({
+      ...defaultFill,
+      buyer: {
+        id: partyId,
+      },
+    });
+    const props = {
+      data,
+      partyId,
+      value: data.market,
+    } as Parameters<typeof FeesDiscountBreakdownTooltip>['0'];
+    const { container } = render(<FeesDiscountBreakdownTooltip {...props} />);
+    const dt = container.querySelectorAll('dt');
+    const dd = container.querySelectorAll('dd');
+    const expectedDt = [
+      'Infrastructure Fee',
+      'Referral Discount',
+      'Volume Discount',
+      'Liquidity Fee',
+      'Referral Discount',
+      'Volume Discount',
+      'Maker Fee',
+      'Referral Discount',
+      'Volume Discount',
+    ];
+    const expectedDD = [
+      '0.05 BTC',
+      '0.06 BTC',
+      '0.01 BTC',
+      '0.02 BTC',
+      '0.03 BTC',
+      '0.04 BTC',
+    ];
+    expectedDt.forEach((label, i) => {
+      expect(dt[i]).toHaveTextContent(label);
+    });
+    expectedDD.forEach((label, i) => {
+      expect(dd[i]).toHaveTextContent(label);
    });
  });
 });
+
+describe('getFeesBreakdown', () => {
+  it('should return correct fees breakdown for a taker', () => {
+    const fees = {
+      makerFee: '1000',
+      infrastructureFee: '2000',
+      liquidityFee: '3000',
+    };
+    const expectedBreakdown = {
+      infrastructureFee: '2000',
+      liquidityFee: '3000',
+      makerFee: '1000',
+      totalFee: '6000',
+    };
+    expect(getFeesBreakdown('Taker', fees)).toEqual(expectedBreakdown);
+  });
+
+  it('should return correct fees breakdown for a maker', () => {
+    const fees = {
+      makerFee: '1000',
+      infrastructureFee: '2000',
+      liquidityFee: '3000',
+    };
+    const expectedBreakdown = {
+      infrastructureFee: '2000',
+      liquidityFee: '3000',
+      makerFee: '-1000',
+      totalFee: '4000',
+    };
+    expect(getFeesBreakdown('Maker', fees)).toEqual(expectedBreakdown);
+  });
+});
+
+describe('getTotalFeesDiscounts', () => {
+  it('should return correct total value', () => {
+    const fees = {
+      infrastructureFeeReferralDiscount: '1',
+      infrastructureFeeVolumeDiscount: '2',
+      liquidityFeeReferralDiscount: '3',
+      liquidityFeeVolumeDiscount: '4',
+      makerFeeReferralDiscount: '5',
+      makerFeeVolumeDiscount: '6',
+    };
+    expect(getTotalFeesDiscounts(fees as TradeFeeFieldsFragment)).toEqual(
+      (1 + 2 + 3 + 4 + 5 + 6).toString()
+    );
+  });
+});
@@ -1,11 +1,10 @@
 import { useMemo } from 'react';
-import {
-  type AgGridReact,
-  type AgGridReactProps,
-  type AgReactUiProps,
+import type {
+  AgGridReact,
+  AgGridReactProps,
+  AgReactUiProps,
 } from 'ag-grid-react';
-import type { ColDef } from 'ag-grid-community';
-import type { ITooltipParams } from 'ag-grid-community';
+import type { ITooltipParams, ColDef } from 'ag-grid-community';
 import {
  addDecimal,
  addDecimalsFormatNumber,
@@ -30,11 +29,19 @@ import type {
 import { forwardRef } from 'react';
 import BigNumber from 'bignumber.js';
 import type { Trade } from './fills-data-provider';
+import type {
+  FillFieldsFragment,
+  TradeFeeFieldsFragment,
+} from './__generated__/Fills';
 import { FillActionsDropdown } from './fill-actions-dropdown';
 import { getAsset } from '@vegaprotocol/markets';
-import { MAKER, TAKER, getFeesBreakdown, getRoleAndFees } from './fills-utils';

-type Props = (AgGridReactProps | AgReactUiProps) & {
+const TAKER = 'Taker';
+const MAKER = 'Maker';
+
+export type Role = typeof TAKER | typeof MAKER | '-';
+
+export type Props = (AgGridReactProps | AgReactUiProps) & {
  partyId: string;
  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 };
@@ -254,13 +261,63 @@ const formatFeeDiscount = (partyId: string) => {
  }: VegaValueFormatterParams<Trade, 'market'>) => {
    if (!market || !data) return '-';
    const asset = getAsset(market);
-    const { fees: roleFees, role } = getRoleAndFees({ data, partyId });
-    if (!roleFees) return '-';
-    const { totalFeeDiscount } = getFeesBreakdown(role, roleFees);
-    return addDecimalsFormatNumber(totalFeeDiscount, asset.decimals);
+    const { fees } = getRoleAndFees({ data, partyId });
+    if (!fees) return '-';
+
+    const total = getTotalFeesDiscounts(fees);
+    return addDecimalsFormatNumber(total, asset.decimals);
  };
 };

+export const isEmptyFeeObj = (feeObj: Schema.TradeFee) => {
+  if (!feeObj) return true;
+  return (
+    feeObj.liquidityFee === '0' &&
+    feeObj.makerFee === '0' &&
+    feeObj.infrastructureFee === '0'
+  );
+};
+
+export const getRoleAndFees = ({
+  data,
+  partyId,
+}: {
+  data: Pick<
+    FillFieldsFragment,
+    'buyerFee' | 'sellerFee' | 'buyer' | 'seller' | 'aggressor'
+  >;
+  partyId?: string;
+}) => {
+  let role: Role;
+  let fees;
+  if (data?.buyer.id === partyId) {
+    if (data.aggressor === Schema.Side.SIDE_BUY) {
+      role = TAKER;
+      fees = data?.buyerFee;
+    } else if (data.aggressor === Schema.Side.SIDE_SELL) {
+      role = MAKER;
+      fees = data?.sellerFee;
+    } else {
+      role = '-';
+      fees = !isEmptyFeeObj(data?.buyerFee) ? data.buyerFee : data.sellerFee;
+    }
+  } else if (data?.seller.id === partyId) {
+    if (data.aggressor === Schema.Side.SIDE_SELL) {
+      role = TAKER;
+      fees = data?.sellerFee;
+    } else if (data.aggressor === Schema.Side.SIDE_BUY) {
+      role = MAKER;
+      fees = data?.buyerFee;
+    } else {
+      role = '-';
+      fees = !isEmptyFeeObj(data.sellerFee) ? data.sellerFee : data.buyerFee;
+    }
+  } else {
+    return { role: '-', fees: undefined };
+  }
+  return { role, fees };
+};
+
 const FeesBreakdownTooltip = ({
  data,
  value: market,
@@ -272,23 +329,16 @@ const FeesBreakdownTooltip = ({

  const asset = getAsset(market);

-  const { role, fees, marketState } = getRoleAndFees({ data, partyId }) ?? {};
+  const { role, fees } = getRoleAndFees({ data, partyId }) ?? {};
  if (!fees) return null;
  const { infrastructureFee, liquidityFee, makerFee, totalFee } =
-    getFeesBreakdown(role, fees, marketState);
+    getFeesBreakdown(role, fees);

  return (
    <div
      data-testid="fee-breakdown-tooltip"
-      className="z-20 max-w-sm px-4 py-2 text-xs text-black border rounded bg-vega-light-100 dark:bg-vega-dark-100 border-vega-light-200 dark:border-vega-dark-200 break-word dark:text-white"
+      className="z-20 max-w-sm px-4 py-2 text-sm text-black border rounded bg-vega-light-100 dark:bg-vega-dark-100 border-vega-light-200 dark:border-vega-dark-200 break-word dark:text-white"
    >
-      {marketState && (
-        <p className="mb-1 italic">
-          {t('If the market was %s', [
-            Schema.MarketStateMapping[marketState].toLowerCase(),
-          ])}
-        </p>
-      )}
      {role === MAKER && (
        <>
          <p className="mb-1">{t('The maker will receive the maker fee.')}</p>
@@ -302,7 +352,7 @@ const FeesBreakdownTooltip = ({
      {role === TAKER && (
        <p className="mb-1">{t('Fees to be paid by the taker.')}</p>
      )}
-      {(role === '-' || marketState === Schema.MarketState.STATE_SUSPENDED) && (
+      {role === '-' && (
        <p className="mb-1">
          {t(
            'If the market is in monitoring auction, half of the infrastructure and liquidity fees will be paid.'
@@ -343,8 +393,8 @@ const FeesDiscountBreakdownTooltipItem = ({
 }) =>
  value && value !== '0' ? (
    <>
-      <dt className="col-span-2">{label}</dt>
-      <dd className="text-right col-span-2">
+      <dt className="col-span-1">{label}</dt>
+      <dd className="text-right col-span-1">
        {addDecimalsFormatNumber(value, asset.decimals)} {asset.symbol}
      </dd>
    </>
@@ -359,19 +409,15 @@ export const FeesDiscountBreakdownTooltip = ({
  }
  const asset = getAsset(data.market);

-  const {
-    fees: roleFees,
-    marketState,
-    role,
-  } = getRoleAndFees({ data, partyId }) ?? {};
-  if (!roleFees) return null;
-  const fees = getFeesBreakdown(role, roleFees, marketState);
+  const { fees } = getRoleAndFees({ data, partyId }) ?? {};
+  if (!fees) return null;
+
  return (
    <div
      data-testid="fee-discount-breakdown-tooltip"
      className="max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-4 py-2 z-20 rounded text-sm break-word text-black dark:text-white"
    >
-      <dl className="grid grid-cols-6 gap-x-1 text-xs">
+      <dl className="grid grid-cols-2 gap-x-1">
        {(fees.infrastructureFeeReferralDiscount || '0') !== '0' ||
        (fees.infrastructureFeeVolumeDiscount || '0') !== '0' ? (
          <dt className="col-span-2">{t('Infrastructure Fee')}</dt>
@@ -415,14 +461,42 @@ export const FeesDiscountBreakdownTooltip = ({
          label={t('Volume Discount')}
          asset={asset}
        />
-
-        <dt className="col-span-2">{t('Total Fee Discount')}</dt>
-        <FeesDiscountBreakdownTooltipItem
-          value={fees.totalFeeDiscount}
-          label={''}
-          asset={asset}
-        />
      </dl>
    </div>
  );
 };
+
+export const getTotalFeesDiscounts = (fees: TradeFeeFieldsFragment) => {
+  return (
+    BigInt(fees.infrastructureFeeReferralDiscount || '0') +
+    BigInt(fees.infrastructureFeeVolumeDiscount || '0') +
+    BigInt(fees.liquidityFeeReferralDiscount || '0') +
+    BigInt(fees.liquidityFeeVolumeDiscount || '0') +
+    BigInt(fees.makerFeeReferralDiscount || '0') +
+    BigInt(fees.makerFeeVolumeDiscount || '0')
+  ).toString();
+};
+
+export const getFeesBreakdown = (
+  role: Role,
+  feesObj: TradeFeeFieldsFragment
+) => {
+  const makerFee =
+    role === MAKER
+      ? new BigNumber(feesObj.makerFee).times(-1).toString()
+      : feesObj.makerFee;
+
+  const infrastructureFee = feesObj.infrastructureFee;
+  const liquidityFee = feesObj.liquidityFee;
+
+  const totalFee = new BigNumber(infrastructureFee)
+    .plus(makerFee)
+    .plus(liquidityFee)
+    .toString();
+  return {
+    infrastructureFee,
+    liquidityFee,
+    makerFee,
+    totalFee,
+  };
+};
@@ -1,183 +0,0 @@
-import { getFeesBreakdown } from './fills-utils';
-import * as Schema from '@vegaprotocol/types';
-
-describe('getFeesBreakdown', () => {
-  it('should return correct fees breakdown for a taker', () => {
-    const fees = {
-      makerFee: '1000',
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-      makerFee: '1000',
-      totalFee: '6000',
-      totalFeeDiscount: '0',
-    };
-    expect(getFeesBreakdown('Taker', fees)).toEqual(expectedBreakdown);
-  });
-
-  it('should return correct fees breakdown for a maker if market is active', () => {
-    const fees = {
-      makerFee: '1000',
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '0',
-      liquidityFee: '0',
-      makerFee: '-1000',
-      totalFee: '-1000',
-      totalFeeDiscount: '0',
-    };
-    expect(
-      getFeesBreakdown('Maker', fees, Schema.MarketState.STATE_ACTIVE)
-    ).toEqual(expectedBreakdown);
-  });
-
-  it('should return correct fees breakdown for a maker if the market is suspended', () => {
-    const fees = {
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-      makerFee: '0',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '1000',
-      liquidityFee: '1500',
-      makerFee: '0',
-      totalFee: '2500',
-      totalFeeDiscount: '0',
-    };
-    expect(
-      getFeesBreakdown('Maker', fees, Schema.MarketState.STATE_SUSPENDED)
-    ).toEqual(expectedBreakdown);
-  });
-
-  it('should return correct fees breakdown for a taker if the market is suspended', () => {
-    const fees = {
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-      makerFee: '0',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '1000',
-      liquidityFee: '1500',
-      makerFee: '0',
-      totalFee: '2500',
-      totalFeeDiscount: '0',
-    };
-    expect(
-      getFeesBreakdown('Taker', fees, Schema.MarketState.STATE_SUSPENDED)
-    ).toEqual(expectedBreakdown);
-  });
-
-  it('should return correct fees breakdown for a taker if market is active', () => {
-    const fees = {
-      makerFee: '1000',
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-      makerFee: '1000',
-      totalFee: '6000',
-      totalFeeDiscount: '0',
-    };
-    expect(
-      getFeesBreakdown('Taker', fees, Schema.MarketState.STATE_ACTIVE)
-    ).toEqual(expectedBreakdown);
-  });
-
-  it('should return correct fees breakdown for a maker', () => {
-    const fees = {
-      makerFee: '1000',
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '0',
-      liquidityFee: '0',
-      makerFee: '-1000',
-      totalFee: '-1000',
-      totalFeeDiscount: '0',
-    };
-    expect(getFeesBreakdown('Maker', fees)).toEqual(expectedBreakdown);
-  });
-
-  it('should return correct total fees discount value for a taker (if the market is active - default)', () => {
-    const fees = {
-      infrastructureFeeReferralDiscount: '1',
-      infrastructureFeeVolumeDiscount: '2',
-      liquidityFeeReferralDiscount: '3',
-      liquidityFeeVolumeDiscount: '4',
-      makerFeeReferralDiscount: '5',
-      makerFeeVolumeDiscount: '6',
-      infrastructureFee: '1000',
-      liquidityFee: '2000',
-      makerFee: '3000',
-    };
-    const { totalFeeDiscount } = getFeesBreakdown('Taker', fees);
-    expect(totalFeeDiscount).toEqual((1 + 2 + 3 + 4 + 5 + 6).toString());
-  });
-
-  it('should return correct total fees discount value for a maker (if the market is active - default)', () => {
-    const fees = {
-      infrastructureFeeReferralDiscount: '1',
-      infrastructureFeeVolumeDiscount: '2',
-      liquidityFeeReferralDiscount: '3',
-      liquidityFeeVolumeDiscount: '4',
-      makerFeeReferralDiscount: '5',
-      makerFeeVolumeDiscount: '6',
-      infrastructureFee: '1000',
-      liquidityFee: '2000',
-      makerFee: '3000',
-    };
-    const { totalFeeDiscount } = getFeesBreakdown('Maker', fees);
-    // makerFeeReferralDiscount and makerFeeVolumeDiscount are added, infra and liq. fees are zeroed
-    expect(totalFeeDiscount).toEqual((5 + 6).toString());
-  });
-
-  it('should return correct total fees discount value for a maker (if the market is suspended)', () => {
-    const fees = {
-      infrastructureFeeReferralDiscount: '1',
-      infrastructureFeeVolumeDiscount: '2',
-      liquidityFeeReferralDiscount: '3',
-      liquidityFeeVolumeDiscount: '4',
-      makerFeeReferralDiscount: '5',
-      makerFeeVolumeDiscount: '6',
-      infrastructureFee: '1000',
-      liquidityFee: '2000',
-      makerFee: '3000',
-    };
-    const { totalFeeDiscount } = getFeesBreakdown(
-      'Maker',
-      fees,
-      Schema.MarketState.STATE_SUSPENDED
-    );
-    // makerFeeReferralDiscount and makerFeeVolumeDiscount are zeroed, infra and liq. fees are halved
-    expect(totalFeeDiscount).toEqual(((1 + 2 + 3 + 4) / 2).toString());
-  });
-
-  it('should return correct total fees discount value for a taker (if the market is suspended)', () => {
-    const fees = {
-      infrastructureFeeReferralDiscount: '1',
-      infrastructureFeeVolumeDiscount: '2',
-      liquidityFeeReferralDiscount: '3',
-      liquidityFeeVolumeDiscount: '4',
-      makerFeeReferralDiscount: '5',
-      makerFeeVolumeDiscount: '6',
-      infrastructureFee: '1000',
-      liquidityFee: '2000',
-      makerFee: '3000',
-    };
-    const { totalFeeDiscount } = getFeesBreakdown(
-      'Taker',
-      fees,
-      Schema.MarketState.STATE_SUSPENDED
-    );
-    // makerFeeReferralDiscount and makerFeeVolumeDiscount are zeroed, infra and liq. fees are halved
-    expect(totalFeeDiscount).toEqual(((1 + 2 + 3 + 4) / 2).toString());
-  });
-});
@@ -1,164 +0,0 @@
-import BigNumber from 'bignumber.js';
-import type {
-  FillFieldsFragment,
-  TradeFeeFieldsFragment,
-} from './__generated__/Fills';
-import * as Schema from '@vegaprotocol/types';
-
-export const TAKER = 'Taker';
-export const MAKER = 'Maker';
-
-export type Role = typeof TAKER | typeof MAKER | '-';
-
-export const getRoleAndFees = ({
-  data,
-  partyId,
-}: {
-  data: Pick<
-    FillFieldsFragment,
-    'buyerFee' | 'sellerFee' | 'buyer' | 'seller' | 'aggressor'
-  >;
-  partyId?: string;
-}): {
-  role: Role;
-  fees?: TradeFeeFieldsFragment;
-  marketState?: Schema.MarketState;
-} => {
-  let role: Role;
-  let fees;
-
-  if (data?.buyer.id === partyId) {
-    if (data.aggressor === Schema.Side.SIDE_BUY) {
-      role = TAKER;
-      fees = data?.buyerFee;
-    } else if (data.aggressor === Schema.Side.SIDE_SELL) {
-      role = MAKER;
-      fees = data?.sellerFee;
-    } else {
-      role = '-';
-      fees = !isEmptyFeeObj(data?.buyerFee) ? data.buyerFee : data.sellerFee;
-    }
-  } else if (data?.seller.id === partyId) {
-    if (data.aggressor === Schema.Side.SIDE_SELL) {
-      role = TAKER;
-      fees = data?.sellerFee;
-    } else if (data.aggressor === Schema.Side.SIDE_BUY) {
-      role = MAKER;
-      fees = data?.buyerFee;
-    } else {
-      role = '-';
-      fees = !isEmptyFeeObj(data.sellerFee) ? data.sellerFee : data.buyerFee;
-    }
-  } else {
-    return { role: '-', fees: undefined };
-  }
-
-  // We make the assumption that the market state is active if the maker fee is zero on both sides
-  // This needs to be updated when we have a way to get the correct market state when that fill happened from the API
-  // because the maker fee factor can be set to 0 via governance
-  const marketState =
-    data?.buyerFee.makerFee === data.sellerFee.makerFee &&
-    new BigNumber(data?.buyerFee.makerFee).isZero()
-      ? Schema.MarketState.STATE_SUSPENDED
-      : Schema.MarketState.STATE_ACTIVE;
-  return { role, fees, marketState };
-};
-
-export const getFeesBreakdown = (
-  role: Role,
-  fees: TradeFeeFieldsFragment,
-  marketState: Schema.MarketState = Schema.MarketState.STATE_ACTIVE
-) => {
-  // If market is in auction we assume maker fee is zero
-  const isMarketActive = marketState === Schema.MarketState.STATE_ACTIVE;
-
-  // If role is taker, then these are the fees to be paid
-  let { makerFee, infrastructureFee, liquidityFee } = fees;
-  // If role is taker, then these are the fees discounts to be applied
-  let {
-    makerFeeVolumeDiscount,
-    makerFeeReferralDiscount,
-    infrastructureFeeVolumeDiscount,
-    infrastructureFeeReferralDiscount,
-    liquidityFeeVolumeDiscount,
-    liquidityFeeReferralDiscount,
-  } = fees;
-
-  if (isMarketActive) {
-    if (role === MAKER) {
-      makerFee = new BigNumber(fees.makerFee).times(-1).toString();
-      infrastructureFee = '0';
-      liquidityFee = '0';
-
-      // discounts are also zero or we can leave them undefined
-      infrastructureFeeReferralDiscount =
-        infrastructureFeeReferralDiscount && '0';
-      infrastructureFeeVolumeDiscount = infrastructureFeeVolumeDiscount && '0';
-      liquidityFeeReferralDiscount = liquidityFeeReferralDiscount && '0';
-      liquidityFeeVolumeDiscount = liquidityFeeVolumeDiscount && '0';
-
-      // we leave maker discount fees as they are defined
-    }
-  } else {
-    // If market is suspended (in monitoring auction), then half of the fees are paid
-    infrastructureFee = new BigNumber(infrastructureFee)
-      .dividedBy(2)
-      .toString();
-    liquidityFee = new BigNumber(liquidityFee).dividedBy(2).toString();
-    // maker fee is already zero
-    makerFee = '0';
-
-    // discounts are also halved
-    infrastructureFeeReferralDiscount =
-      infrastructureFeeReferralDiscount &&
-      new BigNumber(infrastructureFeeReferralDiscount).dividedBy(2).toString();
-    infrastructureFeeVolumeDiscount =
-      infrastructureFeeVolumeDiscount &&
-      new BigNumber(infrastructureFeeVolumeDiscount).dividedBy(2).toString();
-    liquidityFeeReferralDiscount =
-      liquidityFeeReferralDiscount &&
-      new BigNumber(liquidityFeeReferralDiscount).dividedBy(2).toString();
-    liquidityFeeVolumeDiscount =
-      liquidityFeeVolumeDiscount &&
-      new BigNumber(liquidityFeeVolumeDiscount).dividedBy(2).toString();
-    // maker discount fees should already be zero
-    makerFeeReferralDiscount = makerFeeReferralDiscount && '0';
-    makerFeeVolumeDiscount = makerFeeVolumeDiscount && '0';
-  }
-
-  const totalFee = new BigNumber(infrastructureFee)
-    .plus(makerFee)
-    .plus(liquidityFee)
-    .toString();
-
-  const totalFeeDiscount = new BigNumber(makerFeeVolumeDiscount || '0')
-    .plus(makerFeeReferralDiscount || '0')
-    .plus(infrastructureFeeReferralDiscount || '0')
-    .plus(infrastructureFeeVolumeDiscount || '0')
-    .plus(liquidityFeeReferralDiscount || '0')
-    .plus(liquidityFeeVolumeDiscount || '0')
-    .toString();
-
-  return {
-    infrastructureFee,
-    infrastructureFeeReferralDiscount,
-    infrastructureFeeVolumeDiscount,
-    liquidityFee,
-    liquidityFeeReferralDiscount,
-    liquidityFeeVolumeDiscount,
-    makerFee,
-    makerFeeReferralDiscount,
-    makerFeeVolumeDiscount,
-    totalFee,
-    totalFeeDiscount,
-  };
-};
-
-export const isEmptyFeeObj = (feeObj: Schema.TradeFee) => {
-  if (!feeObj) return true;
-  return (
-    feeObj.liquidityFee === '0' &&
-    feeObj.makerFee === '0' &&
-    feeObj.infrastructureFee === '0'
-  );
-};
@@ -278,4 +278,18 @@ 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();
+  });
 });
@@ -1,18 +1,18 @@
-import { useRef, useCallback } from 'react';
-import { subDays } from 'date-fns';
-import { Controller, useForm } from 'react-hook-form';
+import { useRef, useState } from 'react';
+import { format, subDays } from 'date-fns';
 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}`;
 };

-type LedgerFormValues = {
-  assetId: string;
-  dateFrom: string;
-  dateTo?: string;
-};
+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);

-export const createDownloadUrl = (
-  args: LedgerFormValues & {
-    partyId: string;
-    protohost: string;
-  }
-) => {
  const params = new URLSearchParams();
  params.append('partyId', args.partyId);
  params.append('assetId', args.assetId);
@@ -71,102 +71,115 @@ interface Props {

 export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
  const now = useRef(new Date());
-  const { control, handleSubmit, watch } = useForm<LedgerFormValues>({
-    defaultValues: {
-      dateFrom: formatForInput(subDays(now.current, 7)),
-      dateTo: '',
-      assetId: Object.keys(assets)[0],
-    },
+  const [dateFrom, setDateFrom] = useState(() => {
+    return formatForInput(subDays(now.current, 7));
  });
-  const dateTo = watch('dateTo');
+  const [dateTo, setDateTo] = useState('');
  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 startDownload = useCallback(
-    async (formValues: LedgerFormValues) => {
-      const link = createDownloadUrl({
-        protohost,
-        partyId,
-        ...formValues,
-      });
-
-      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 downloadStoreItem = {
-        title,
-        link,
-        isChanged: true,
-      };
-      if (hasItem(link)) {
-        updateDownloadQueue(downloadStoreItem);
-        return;
-      }
-      const ts = setTimeout(() => {
-        updateDownloadQueue({
-          ...downloadStoreItem,
-          intent: Intent.Warning,
-          isDelayed: true,
-          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');
-        }
-        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);
-      }
-    },
-    [assets, hasItem, partyId, protohost, updateDownloadQueue]
+  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 link = createDownloadUrl({
+    protohost,
+    partyId,
+    assetId,
+    dateFrom,
+    dateTo,
+  });
+
+  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,
+        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');
+      }
+      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);
+    }
+  };
+
  if (!protohost || Object.keys(assets).length === 0) {
    return null;
  }
@@ -174,117 +187,49 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
  const offset = new Date().getTimezoneOffset();

  return (
-    <form
-      onSubmit={handleSubmit(startDownload)}
-      className="p-4 w-[350px]"
-      noValidate
-    >
+    <form onSubmit={startDownload} className="p-4 w-[350px]">
      <h2 className="mb-4">{t('Export ledger entries')}</h2>
-      <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>
-        )}
-      />
+      <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>
      <div className="relative text-sm" title={t('Download all to .csv file')}>
-        <TradingButton fill type="submit" data-testid="ledger-download-button">
+        <TradingButton
+          fill
+          disabled={disabled}
+          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>
  );
 };
@@ -119,8 +119,6 @@ describe('getLiquidityProvision', () => {
        createdAt: '2022-12-16T09:28:29.071781Z',
        id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
        fee: '0.001',
-        partyId:
-          'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
        party: {
          __typename: 'Party',
          accountsConnection: {
@@ -5,15 +5,17 @@ import {
 } from '@vegaprotocol/data-provider';
 import * as Schema from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
+
 import {
  LiquidityProvidersDocument,
  LiquidityProvisionsDocument,
 } from './__generated__/MarketLiquidity';
+
 import type {
  LiquidityProviderFieldsFragment,
-  LiquidityProvisionFieldsFragment,
  LiquidityProvidersQuery,
  LiquidityProvidersQueryVariables,
+  LiquidityProvisionFieldsFragment,
  LiquidityProvisionsQuery,
  LiquidityProvisionsQueryVariables,
 } from './__generated__/MarketLiquidity';
@@ -161,14 +163,7 @@ export const getLiquidityProvision = (
      const liquidityProvider = liquidityProviders.find(
        (f) => liquidityProvision.party.id === f.partyId
      );
-
-      if (!liquidityProvider) {
-        return {
-          ...liquidityProvision,
-          partyId: liquidityProvision.party.id,
-        };
-      }
-
+      if (!liquidityProvider) return liquidityProvision;
      const accounts = compact(
        liquidityProvision.party.accountsConnection?.edges
      ).map((e) => e.node);
@@ -106,6 +106,9 @@ 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) {
@@ -150,7 +153,7 @@ export const LiquidityTable = ({
          ]
        );
      }
-      return addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0);
+      return addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0);
    };

    const stakeToCcyVolumeQuantumFormatter = ({
@@ -412,9 +415,14 @@ export const LiquidityTable = ({
              },
              'text-red-500': ({ data }: { data: LiquidityProvisionData }) => {
                if (!data.sla) return false;
-                return new BigNumber(
-                  data.sla.currentEpochFractionOfTimeOnBook
-                ).isLessThan(data.commitmentMinTimeFraction);
+                return (
+                  new BigNumber(
+                    data.sla.currentEpochFractionOfTimeOnBook
+                  ).isLessThan(data.commitmentMinTimeFraction) &&
+                  new BigNumber(
+                    data.sla.currentEpochFractionOfTimeOnBook
+                  ).isGreaterThan(0)
+                );
              },
            },
          },
@@ -27,9 +27,7 @@ jest.mock('@vegaprotocol/data-provider', () => ({
 }));

 describe('PositionsManager', () => {
-  // TODO: temporarily disable close position
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('should close position with max uint64', async () => {
+  it('should close position with max uint64', async () => {
    render(<PositionsManager partyIds={['partyId']} isReadOnly={false} />, {
      wrapper: MockedProvider,
    });
@@ -29,7 +29,6 @@ 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({
@@ -74,8 +73,7 @@ export const PositionsManager = ({
      pubKeys={pubKeys}
      rowData={data}
      onMarketClick={onMarketClick}
-      // TODO: temporarily disable close position
-      // onClose={onClose}
+      onClose={onClose}
      isReadOnly={isReadOnly}
      multipleKeys={partyIds.length > 1}
      overlayNoRowsTemplate={error ? error.message : t('No positions')}
@@ -29,7 +29,7 @@ export const MarketProposalNotification = ({
      </div>
    );
    return (
-      <div className="border-default min-w-min border-l pb-1 pl-1 pr-1">
+      <div className="border-l border-default pl-1 pr-1 pb-1 min-w-min whitespace-nowrap">
        <Notification
          intent={Intent.Warning}
          message={message}
@@ -22,13 +22,11 @@ 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 (
@@ -46,7 +44,7 @@ export const CompactNumber = ({
    return <span data-testid={testId}>{INFINITY}</span>;
  }

-  if (number.isLessThan(compactAbove)) {
+  if (number.isLessThan(DEFAULT_COMPACT_ABOVE)) {
    return (
      <span data-testid={testId}>{formatNumber(number, decimalPlaces)}</span>
    );
@@ -4376,19 +4376,7 @@ export type Query = {
  /** The last block process by the blockchain */
  lastBlockHeight: Scalars['String'];
  /**
-   * 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
-   *
+   * Get ledger entries by asset, market, party, account type, transfer type within the given date range.
   * 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.
@@ -93,7 +93,7 @@ export const Notification = ({
      </div>
      <div
        className={classNames(
-          'flex flex-col items-start overflow-hidden gap-0',
+          'flex flex-col items-start overflow-hidden gap-0 mt-1',
          'text-vega-clight-50 dark:text-vega-cdark-50',
          'font-alpha',
          { 'text-sm': size === 'small', 'text-base': size === 'medium' }
@@ -1,72 +0,0 @@
-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');
-    });
-  });
-});
@@ -3,37 +3,17 @@ 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(statisticsUrl)
+    fetch(vegaUrl.replace('graphql', 'statistics'))
      .then((response) => response.json())
      .then((response) => {
        if (isCancelled) {
@@ -52,6 +32,6 @@ export const useChainId = () => {
    return () => {
      isCancelled = true;
    };
-  }, [fetchAttempt, statisticsUrl, vegaUrl]);
+  }, [fetchAttempt, vegaUrl]);
  return chainId;
 };
Author	SHA1	Message	Date
Madalina Raicu	f84fad1ccd	feat(trading): update copy for reset dialog and jest	2023-11-24 15:45:53 +00:00
Madalina Raicu	b1549c8a81	fix(trading): reset console to default	2023-11-23 17:44:14 +00:00