fix(governance): try a longer timeout

chore: remove unnecessary var
fix(4896): ensuring eagerconnect does not block loading of the app
2023-10-31 15:47:34 +00:00 · 2023-10-31 12:04:39 +00:00 · 2023-10-31 12:04:08 +00:00 · 2023-10-31 11:24:18 +00:00 · 2023-10-31 11:20:48 +00:00 · 2023-10-31 10:20:38 +00:00
58 changed files with 1503 additions and 326 deletions
@@ -39,7 +39,6 @@ context('Market page', { tags: '@regression' }, function () {
      cy.contains('Test market 1').click();
      cy.getByTestId(marketHeaders).should('have.text', 'Test market 1');
      cy.validate_element_from_table('Name', 'Test market 1');
-      cy.validate_element_from_table('Market ID', this.createdMarketId);
      cy.validate_element_from_table('Trading Mode', 'Opening auction');
      cy.validate_element_from_table('Market Decimal Places', '5');
      cy.validate_element_from_table('Position Decimal Places', '5');
@@ -537,10 +537,10 @@ describe(
      cy.VegaWalletSubmitProposal(createGovernanceTransferProposalTxBody());
      cy.reload();
      getProposalFromTitle('Governance transfer proposal').within(() => {
-        cy.getByTestId(marketProposalType).should('have.text', 'NewTransfer');
+        cy.getByTestId(marketProposalType).should('have.text', 'New transfer');
        cy.getByTestId(viewProposalButton).click();
      });
-      cy.getByTestId(marketProposalType).should('have.text', 'NewTransfer');
+      cy.getByTestId(marketProposalType).should('have.text', 'New transfer');
      cy.getByTestId(governanceTransferToggle).click();
      cy.getByTestId('proposal-transfer-details-table').within(() => {
        getProposalInformationFromTable('Source Type')
@@ -590,7 +590,7 @@ describe(
        );
        cy.getByTestId(viewProposalButton).click();
      });
-      cy.getByTestId(marketProposalType).should('have.text', 'CancelTransfer');
+      cy.getByTestId(marketProposalType).should('have.text', 'Cancel transfer');
      getProposalInformationFromTable('Error details')
        .invoke('text')
        .and('eq', 'Governance transfer invalid transfer id not found');
@@ -71,7 +71,7 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
  });

  function verifyConnectedToPubKey() {
-    cy.getByTestId(banner).should(
+    cy.getByTestId(banner, { timeout: 10000 }).should(
      'contain.text',
      `Viewing as Vega user: ${vegaPubkeyTruncated}`
    );
@@ -1,7 +1,7 @@
 import * as Sentry from '@sentry/react';
 import { toBigNum } from '@vegaprotocol/utils';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet, useEagerConnect } from '@vegaprotocol/wallet';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 import { FLAGS, useEnvironment } from '@vegaprotocol/environment';
 import { useWeb3React } from '@web3-react/core';
 import React from 'react';
@@ -15,19 +15,6 @@ import {
 } from './contexts/app-state/app-state-context';
 import { useContracts } from './contexts/contracts/contracts-context';
 import { useRefreshAssociatedBalances } from './hooks/use-refresh-associated-balances';
-import { Connectors } from './lib/vega-connectors';
-import { useSearchParams } from 'react-router-dom';
-
-const useVegaWalletEagerConnect = () => {
-  const vegaConnecting = useEagerConnect(Connectors);
-  const { pubKey, connect } = useVegaWallet();
-  const [searchParams] = useSearchParams();
-  const [query] = React.useState(searchParams.get('address'));
-  if (query && !pubKey) {
-    connect(Connectors['view']);
-  }
-  return vegaConnecting;
-};

 export const AppLoader = ({ children }: { children: React.ReactElement }) => {
  const { t } = useTranslation();
@@ -38,9 +25,6 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
  const { token, staking, vesting } = useContracts();
  const setAssociatedBalances = useRefreshAssociatedBalances();
  const [balancesLoaded, setBalancesLoaded] = React.useState(false);
-  const vegaConnecting = useVegaWalletEagerConnect();
-
-  const loaded = balancesLoaded && !vegaConnecting;

  React.useEffect(() => {
    const run = async () => {
@@ -164,7 +148,7 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
    );
  }

-  if (!loaded) {
+  if (!balancesLoaded) {
    return (
      <Splash>
        <SplashLoader />
@@ -909,6 +909,14 @@
  "BenefitTierReferralDiscountFactorDescription": "The proportion of the referee's taker fees to be discounted",
  "BenefitTierReferralRewardFactor": "Referral reward factor",
  "BenefitTierReferralRewardFactorDescription": "The proportion of the referee's taker fees to be rewarded to the referrer",
+  "BenefitTierMinimumActivityStreak": "Minimum activity streak",
+  "BenefitTierMinimumActivityStreakDescription": "The minimum number of times the party needs to have completed the activity",
+  "BenefitTierMinimumQuantumBalance": "Minimum quantum balance",
+  "BenefitTierMinimumQuantumBalanceDescription": "The minimum amount of the vesting token to qualify",
+  "BenefitTierVestingMultiplier": "Vesting multiplier",
+  "BenefitTierVestingMultiplierDescription": "Vesting multiplier for the tier",
+  "BenefitTierRewardMultiplier": "Reward multiplier",
+  "BenefitTierRewardMultiplierDescription": "The multiplier",
  "StakingTiers": "Staking tiers",
  "StakingTierMinimumStakedTokens": "Minimum staked tokens",
  "StakingTierMinimumStakedTokensDescription": "Required number of governance tokens ($VEGA) a referrer must have staked to receive the multiplier",
@@ -0,0 +1 @@
+export * from './proposal-update-benefit-tiers-details';
@@ -0,0 +1,158 @@
+import { render, screen } from '@testing-library/react';
+import { ProposalUpdateBenefitTiers } from './proposal-update-benefit-tiers-details';
+import { generateProposal } from '../../test-helpers/generate-proposals';
+
+jest.mock('../../../../contexts/app-state/app-state-context', () => ({
+  useAppState: () => ({
+    appState: {
+      decimals: 2,
+    },
+  }),
+}));
+
+const mockVestingBenefitTierProposal = generateProposal({
+  terms: {
+    change: {
+      __typename: 'UpdateNetworkParameter',
+      networkParameter: {
+        key: 'blah.blah.benefitTiers',
+        value: JSON.stringify({
+          tiers: [
+            {
+              minimum_quantum_balance: '10000',
+              reward_multiplier: '0.05',
+            },
+            {
+              minimum_quantum_balance: '500000000000',
+              reward_multiplier: '0.1',
+            },
+            {
+              minimum_quantum_balance: '10000000000000',
+              reward_multiplier: '10',
+            },
+          ],
+        }),
+      },
+    },
+  },
+});
+
+const mockActivityStreakBenefitTierProposal = generateProposal({
+  terms: {
+    change: {
+      __typename: 'UpdateNetworkParameter',
+      networkParameter: {
+        key: 'blah.blah.benefitTiers',
+        value: JSON.stringify({
+          tiers: [
+            {
+              minimum_activity_streak: '10000',
+              vesting_multiplier: '5',
+              reward_multiplier: '0.1',
+            },
+            {
+              minimum_activity_streak: '10000000000000',
+              vesting_multiplier: '100',
+              reward_multiplier: '10',
+            },
+          ],
+        }),
+      },
+    },
+  },
+});
+describe('ProposalUpdateBenefitTiers', () => {
+  it('should not render if proposal is null', () => {
+    render(<ProposalUpdateBenefitTiers proposal={null} />);
+    expect(screen.queryByTestId('proposal-update-benefit-tiers')).toBeNull();
+  });
+
+  it('should not render if __typename is not UpdateNetworkParameter', () => {
+    const updateMarketProposal = generateProposal({
+      terms: {
+        change: {
+          __typename: 'UpdateMarket',
+        },
+      },
+    });
+    render(<ProposalUpdateBenefitTiers proposal={updateMarketProposal} />);
+    expect(screen.queryByTestId('proposal-update-benefit-tiers')).toBeNull();
+  });
+
+  it('should not render if there are no relevant fields', () => {
+    const incompleteProposal = generateProposal({
+      terms: {
+        change: {
+          __typename: 'UpdateNetworkParameter',
+        },
+      },
+    });
+
+    render(<ProposalUpdateBenefitTiers proposal={incompleteProposal} />);
+    expect(screen.queryByTestId('proposal-update-benefit-tiers')).toBeNull();
+  });
+
+  it('should not render if there are relevant fields that are empty', () => {
+    const incompleteProposal = generateProposal({
+      terms: {
+        change: {
+          __typename: 'UpdateNetworkParameter',
+          networkParameter: {
+            key: 'blah.blah.benefitTiers',
+            value: JSON.stringify({}),
+          },
+        },
+      },
+    });
+
+    render(<ProposalUpdateBenefitTiers proposal={incompleteProposal} />);
+    expect(screen.queryByTestId('proposal-update-benefit-tiers')).toBeNull();
+  });
+
+  it('should render a valid vesting benefit tier proposal', () => {
+    render(
+      <ProposalUpdateBenefitTiers proposal={mockVestingBenefitTierProposal} />
+    );
+
+    // 3 tiers in the sample data
+    expect(screen.getByText('Tier 1')).toBeInTheDocument();
+    expect(screen.getByText('Tier 2')).toBeInTheDocument();
+    expect(screen.getByText('Tier 3')).toBeInTheDocument();
+
+    expect(screen.getAllByText('Minimum quantum balance').length).toBe(3);
+    expect(screen.getAllByText('Reward multiplier').length).toBe(3);
+
+    expect(screen.getByText('0.00000000000001')).toBeInTheDocument();
+    expect(screen.getByText('0.05x')).toBeInTheDocument();
+
+    expect(screen.getByText('0.0000005')).toBeInTheDocument();
+    expect(screen.getByText('0.1x')).toBeInTheDocument();
+
+    expect(screen.getByText('0.00001')).toBeInTheDocument();
+    expect(screen.getByText('10x')).toBeInTheDocument();
+  });
+
+  it('should render a valid activity streak benefit tier proposal', () => {
+    render(
+      <ProposalUpdateBenefitTiers
+        proposal={mockActivityStreakBenefitTierProposal}
+      />
+    );
+
+    // 3 tiers in the sample data
+    expect(screen.getByText('Tier 1')).toBeInTheDocument();
+    expect(screen.getByText('Tier 2')).toBeInTheDocument();
+
+    expect(screen.getAllByText('Minimum activity streak').length).toBe(2);
+    expect(screen.getAllByText('Vesting multiplier').length).toBe(2);
+    expect(screen.getAllByText('Reward multiplier').length).toBe(2);
+
+    expect(screen.getByText('10000')).toBeInTheDocument();
+    expect(screen.getByText('5x')).toBeInTheDocument();
+    expect(screen.getByText('0.1x')).toBeInTheDocument();
+
+    expect(screen.getByText('10000000000000')).toBeInTheDocument();
+    expect(screen.getByText('100x')).toBeInTheDocument();
+    expect(screen.getByText('10x')).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,164 @@
+import { useTranslation } from 'react-i18next';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import {
+  KeyValueTable,
+  KeyValueTableRow,
+  RoundedWrapper,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
+import {
+  formatMinimumStakedTokens,
+  formatReferralRewardMultiplier,
+} from '../proposal-referral-program-details';
+import { formatNumberPercentage } from '@vegaprotocol/utils';
+import BigNumber from 'bignumber.js';
+
+// These types are not generated as it's not known how dynamic these are
+type VestingBenefitTier = {
+  minimum_quantum_balance: string;
+  reward_multiplier: string;
+};
+
+type ActivityStreakBenefitTier = {
+  minimum_activity_streak: number;
+  reward_multiplier: string;
+  vesting_multiplier: string;
+};
+
+export type BenefitTiers =
+  | Array<ActivityStreakBenefitTier>
+  | Array<VestingBenefitTier>;
+
+export function getBenefitTiers(json: string): BenefitTiers {
+  try {
+    const parsed = JSON.parse(json);
+    return parsed.tiers;
+  } catch (e) {
+    return [];
+  }
+}
+
+export const formatVolumeDiscountFactor = (value: string) => {
+  return formatNumberPercentage(new BigNumber(value).times(100));
+};
+
+interface ProposalReferralProgramDetailsProps {
+  proposal: ProposalQuery['proposal'];
+}
+
+/**
+ * Special rendered for network proposals that change any benefit tiers,
+ * which is detected by:
+ * 1) it being a network parameter change
+ * 2) the name of the field ending in `.benefitTiers`
+ *
+ * It only renders known fields so that they can be formatted correctly.
+ */
+export const ProposalUpdateBenefitTiers = ({
+  proposal,
+}: ProposalReferralProgramDetailsProps) => {
+  const { t } = useTranslation();
+  if (
+    proposal?.terms?.change?.__typename !== 'UpdateNetworkParameter' ||
+    proposal?.terms?.change?.networkParameter.key.slice(-13) !== '.benefitTiers'
+  ) {
+    return null;
+  }
+
+  const benefitTiersString = proposal?.terms?.change?.networkParameter.value;
+  const benefitTiers = getBenefitTiers(benefitTiersString);
+
+  if (!benefitTiers) {
+    return null;
+  }
+
+  return (
+    <div data-testid="proposal-update-benefit-tiers">
+      <RoundedWrapper paddingBottom={true}>
+        {benefitTiers && (
+          <div
+            className="mb-6"
+            data-testid="proposal-volume-discount-program-benefit-tiers"
+          >
+            <h3 className="mb-3 uppercase font-semibold text-lg">
+              {t('BenefitTiers')}
+            </h3>
+            <KeyValueTable>
+              {benefitTiers
+                .sort(
+                  (a, b) =>
+                    Number(a.reward_multiplier) - Number(b.reward_multiplier)
+                )
+                .map((benefitTier, index) => (
+                  <div className="mb-4" key={index}>
+                    <h4 className="font-semibold uppercase">
+                      Tier {index + 1}
+                    </h4>
+                    {'minimum_activity_streak' in benefitTier && (
+                      <KeyValueTableRow
+                        data-testid={`mas-${benefitTier.reward_multiplier}`}
+                      >
+                        <Tooltip
+                          description={t(
+                            'BenefitTierMinimumActivityStreakDescription'
+                          )}
+                        >
+                          <span>{t('BenefitTierMinimumActivityStreak')}</span>
+                        </Tooltip>
+
+                        {benefitTier.minimum_activity_streak}
+                      </KeyValueTableRow>
+                    )}
+                    {'minimum_quantum_balance' in benefitTier && (
+                      <KeyValueTableRow
+                        data-testid={`mqb-${benefitTier.reward_multiplier}`}
+                      >
+                        <Tooltip
+                          description={t(
+                            'BenefitTierMinimumQuantumBalanceDescription'
+                          )}
+                        >
+                          <span>{t('BenefitTierMinimumQuantumBalance')}</span>
+                        </Tooltip>
+
+                        {formatMinimumStakedTokens(
+                          benefitTier.minimum_quantum_balance,
+                          18
+                        )}
+                      </KeyValueTableRow>
+                    )}
+                    {'vesting_multiplier' in benefitTier && (
+                      <KeyValueTableRow
+                        data-testid={`vm-${benefitTier.reward_multiplier}`}
+                      >
+                        <Tooltip
+                          description={t('BenefitTierVestingMultiplier')}
+                        >
+                          <span>{t('BenefitTierVestingMultiplier')}</span>
+                        </Tooltip>
+                        {formatReferralRewardMultiplier(
+                          benefitTier.vesting_multiplier
+                        )}
+                      </KeyValueTableRow>
+                    )}
+                    {'reward_multiplier' in benefitTier && (
+                      <KeyValueTableRow
+                        data-testid={`rm-${benefitTier.reward_multiplier}`}
+                      >
+                        <Tooltip description={t('BenefitTierRewardMultiplier')}>
+                          <span>{t('BenefitTierRewardMultiplier')}</span>
+                        </Tooltip>
+                        {formatReferralRewardMultiplier(
+                          benefitTier.reward_multiplier
+                        )}
+                      </KeyValueTableRow>
+                    )}
+                  </div>
+                ))}
+            </KeyValueTable>
+          </div>
+        )}
+      </RoundedWrapper>
+    </div>
+  );
+};
@@ -27,6 +27,7 @@ import {
  ProposalTransferDetails,
 } from '../proposal-transfer';
 import { FLAGS } from '@vegaprotocol/environment';
+import { ProposalUpdateBenefitTiers } from '../proposal-update-benefit-tiers';

 export interface ProposalProps {
  proposal: ProposalQuery['proposal'];
@@ -243,6 +244,14 @@ export const Proposal = ({
        </div>
      )}

+      {proposal.terms.change.__typename === 'UpdateNetworkParameter' &&
+        proposal.terms.change.networkParameter.key.slice(-13) ===
+          '.benefitTiers' && (
+          <div className="mb-4">
+            <ProposalUpdateBenefitTiers proposal={proposal} />
+          </div>
+        )}
+
      {governanceTransferDetails}

      <div className="mb-10">
@@ -18,6 +18,7 @@ import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
 import { t } from '@vegaprotocol/i18n';
 import { Statistics } from './referral-statistics';
+import { useReferralProgram } from './hooks/use-referral-program';

 const RELOAD_DELAY = 3000;

@@ -32,6 +33,7 @@ const validateCode = (value: string) => {
 };

 export const ApplyCodeForm = () => {
+  const program = useReferralProgram();
  const navigate = useNavigate();
  const openWalletDialog = useVegaWalletDialogStore(
    (store) => store.openVegaWalletDialog
@@ -237,7 +239,7 @@ export const ApplyCodeForm = () => {
      {previewData ? (
        <div className="mt-10">
          <h2 className="text-2xl mb-5">{t('You are joining')}</h2>
-          <Statistics data={previewData} as="referee" />
+          <Statistics data={previewData} program={program} as="referee" />
        </div>
      ) : null}
    </>
@@ -1,5 +1,5 @@
-query Referees($code: ID!, $aggregationDays: Int) {
-  referralSetReferees(id: $code, aggregationDays: $aggregationDays) {
+query Referees($code: ID!, $aggregationEpochs: Int) {
+  referralSetReferees(id: $code, aggregationEpochs: $aggregationEpochs) {
    edges {
      node {
        referralSetId
@@ -10,6 +10,7 @@ query ReferralSetStats($code: ID!, $epoch: Int) {
        referralSetRunningNotionalTakerVolume
        rewardsMultiplier
        rewardsFactorMultiplier
+        referrerTakerVolume
      }
    }
  }
@@ -5,7 +5,7 @@ import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
 export type RefereesQueryVariables = Types.Exact<{
  code: Types.Scalars['ID'];
-  aggregationDays?: Types.InputMaybe<Types.Scalars['Int']>;
+  aggregationEpochs?: Types.InputMaybe<Types.Scalars['Int']>;
 }>;


@@ -13,8 +13,8 @@ export type RefereesQuery = { __typename?: 'Query', referralSetReferees: { __typ


 export const RefereesDocument = gql`
-    query Referees($code: ID!, $aggregationDays: Int) {
-  referralSetReferees(id: $code, aggregationDays: $aggregationDays) {
+    query Referees($code: ID!, $aggregationEpochs: Int) {
+  referralSetReferees(id: $code, aggregationEpochs: $aggregationEpochs) {
    edges {
      node {
        referralSetId
@@ -42,7 +42,7 @@ export const RefereesDocument = gql`
 * const { data, loading, error } = useRefereesQuery({
 *   variables: {
 *      code: // value for 'code'
- *      aggregationDays: // value for 'aggregationDays'
+ *      aggregationEpochs: // value for 'aggregationEpochs'
 *   },
 * });
 */
@@ -9,7 +9,7 @@ export type ReferralSetStatsQueryVariables = Types.Exact<{
 }>;


-export type ReferralSetStatsQuery = { __typename?: 'Query', referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, partyId: string, discountFactor: string, rewardFactor: string, epochNotionalTakerVolume: string, referralSetRunningNotionalTakerVolume: string, rewardsMultiplier: string, rewardsFactorMultiplier: string } } | null> } };
+export type ReferralSetStatsQuery = { __typename?: 'Query', referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, partyId: string, discountFactor: string, rewardFactor: string, epochNotionalTakerVolume: string, referralSetRunningNotionalTakerVolume: string, rewardsMultiplier: string, rewardsFactorMultiplier: string, referrerTakerVolume: string } } | null> } };


 export const ReferralSetStatsDocument = gql`
@@ -25,6 +25,7 @@ export const ReferralSetStatsDocument = gql`
        referralSetRunningNotionalTakerVolume
        rewardsMultiplier
        rewardsFactorMultiplier
+        referrerTakerVolume
      }
    }
  }
@@ -5,14 +5,14 @@ import compact from 'lodash/compact';
 import type { ReferralSetsQueryVariables } from './__generated__/ReferralSets';
 import { useReferralSetsQuery } from './__generated__/ReferralSets';

-const DEFAULT_AGGREGATION_DAYS = 30;
+export const DEFAULT_AGGREGATION_DAYS = 30;

 export type Role = 'referrer' | 'referee';
 type UseReferralArgs = (
  | { code: string }
  | { pubKey: string | null; role: Role }
 ) & {
-  aggregationDays?: number;
+  aggregationEpochs?: number;
 };

 const prepareVariables = (
@@ -70,9 +70,9 @@ export const useReferral = (args: UseReferralArgs) => {
  } = useRefereesQuery({
    variables: {
      code: referralSet?.id as string,
-      aggregationDays:
-        args.aggregationDays != null
-          ? args.aggregationDays
+      aggregationEpochs:
+        args.aggregationEpochs != null
+          ? args.aggregationEpochs
          : DEFAULT_AGGREGATION_DAYS,
    },
    skip: !referralSet?.id,
@@ -6,7 +6,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';

 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useReferral } from './hooks/use-referral';
+import { DEFAULT_AGGREGATION_DAYS, useReferral } from './hooks/use-referral';
 import { CreateCodeContainer } from './create-code-form';
 import classNames from 'classnames';
 import { Table } from './table';
@@ -32,21 +32,25 @@ import maxBy from 'lodash/maxBy';
 export const ReferralStatistics = () => {
  const { pubKey } = useVegaWallet();

+  const program = useReferralProgram();
+
  const { data: referee } = useReferral({
    pubKey,
    role: 'referee',
+    aggregationEpochs: program.details?.windowLength,
  });
  const { data: referrer } = useReferral({
    pubKey,
    role: 'referrer',
+    aggregationEpochs: program.details?.windowLength,
  });

  if (referee?.code) {
-    return <Statistics data={referee} as="referee" />;
+    return <Statistics data={referee} program={program} as="referee" />;
  }

  if (referrer?.code) {
-    return <Statistics data={referrer} as="referrer" />;
+    return <Statistics data={referrer} program={program} as="referrer" />;
  }

  return <CreateCodeContainer />;
@@ -54,14 +58,16 @@ export const ReferralStatistics = () => {

 export const Statistics = ({
  data,
+  program,
  as,
 }: {
  data: NonNullable<ReturnType<typeof useReferral>['data']>;
+  program: ReturnType<typeof useReferralProgram>;
  as: 'referrer' | 'referee';
 }) => {
+  const { benefitTiers, details } = program;
  const { data: epochData } = useCurrentEpochInfoQuery();
  const { stakeAvailable } = useStakeAvailable();
-  const { benefitTiers } = useReferralProgram();
  const { data: statsData } = useReferralSetStatsQuery({
    variables: {
      code: data.code,
@@ -72,6 +78,13 @@ export const Statistics = ({

  const currentEpoch = Number(epochData?.epoch.id);

+  const compactNumFormat = new Intl.NumberFormat(getUserLocale(), {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    notation: 'compact',
+    compactDisplay: 'short',
+  });
+
  const stats =
    statsData?.referralSetStats.edges &&
    compact(removePaginationWrapper(statsData.referralSetStats.edges));
@@ -87,10 +100,13 @@ export const Statistics = ({
  const runningVolumeValue = statsAvailable
    ? Number(statsAvailable.referralSetRunningNotionalTakerVolume)
    : 0;
+  const referrerVolumeValue = statsAvailable
+    ? Number(statsAvailable.referrerTakerVolume)
+    : 0;
  const multiplier = statsAvailable
    ? Number(statsAvailable.rewardsMultiplier)
    : 1;
-  const finalCommissionValue = !isNaN(multiplier)
+  const finalCommissionValue = isNaN(multiplier)
    ? baseCommissionValue
    : multiplier * baseCommissionValue;

@@ -118,7 +134,13 @@ export const Statistics = ({
    : 0;

  const baseCommissionTile = (
-    <StatTile title={t('Base commission rate')}>
+    <StatTile
+      title={t('Base commission rate')}
+      description={t('(Combined set volume %s over last %s epochs)', [
+        compactNumFormat.format(runningVolumeValue),
+        (details?.windowLength || DEFAULT_AGGREGATION_DAYS).toString(),
+      ])}
+    >
      {baseCommissionValue * 100}%
    </StatTile>
  );
@@ -134,7 +156,16 @@ export const Statistics = ({
    </StatTile>
  );
  const finalCommissionTile = (
-    <StatTile title={t('Final commission rate')}>
+    <StatTile
+      title={t('Final commission rate')}
+      description={
+        !isNaN(multiplier)
+          ? `(${baseCommissionValue * 100}% ⨉ ${multiplier} = ${
+              finalCommissionValue * 100
+            }%)`
+          : undefined
+      }
+    >
      {finalCommissionValue * 100}%
    </StatTile>
  );
@@ -143,12 +174,21 @@ export const Statistics = ({
    <StatTile title={t('Number of traders')}>{numberOfTradersValue}</StatTile>
  );

-  const codeTile = <CodeTile code={data?.code} />;
-  const createdAtTile = (
-    <StatTile title={t('Created at')}>
-      <span className="text-3xl">
-        {getDateFormat().format(new Date(data.createdAt))}
-      </span>
+  const codeTile = (
+    <CodeTile
+      code={data?.code}
+      createdAt={getDateFormat().format(new Date(data.createdAt))}
+    />
+  );
+
+  const referrerVolumeTile = (
+    <StatTile
+      title={t(
+        'My volume (last %s epochs)',
+        (details?.windowLength || DEFAULT_AGGREGATION_DAYS).toString()
+      )}
+    >
+      {compactNumFormat.format(referrerVolumeValue)}
    </StatTile>
  );

@@ -157,7 +197,10 @@ export const Statistics = ({
    .reduce((all, r) => all.plus(r), new BigNumber(0));
  const totalCommissionTile = (
    <StatTile
-      title={t('Total commission (last 30 days)')}
+      title={t(
+        'Total commission (last %s epochs)',
+        (details?.windowLength || DEFAULT_AGGREGATION_DAYS).toString()
+      )}
      description={t('(qUSD)')}
    >
      {getNumberFormat(0).format(Number(totalCommissionValue))}
@@ -174,20 +217,13 @@ export const Statistics = ({

      <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
        {codeTile}
-        {createdAtTile}
+        {referrerVolumeTile}
        {numberOfTradersTile}
        {totalCommissionTile}
      </div>
    </>
  );

-  const compactNumFormat = new Intl.NumberFormat(getUserLocale(), {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-    notation: 'compact',
-    compactDisplay: 'short',
-  });
-
  const currentBenefitTierTile = (
    <StatTile title={t('Current tier')}>
      {currentBenefitTierValue?.tier || 'None'}
@@ -266,7 +302,7 @@ export const Statistics = ({
      {/* Referees (only for referrer view) */}
      {as === 'referrer' && data.referees.length > 0 && (
        <div className="mt-20 mb-20">
-          <h2 className="text-2xl mb-5">{t('Referees')}</h2>
+          <h2 className="mb-5 text-2xl">{t('Referees')}</h2>
          <div
            className={classNames(
              collapsed && [
@@ -292,10 +328,23 @@ export const Statistics = ({
              columns={[
                { name: 'party', displayName: t('Trader') },
                { name: 'joined', displayName: t('Date Joined') },
-                { name: 'volume', displayName: t('Volume (last 30 days)') },
+                {
+                  name: 'volume',
+                  displayName: t(
+                    'Volume (last %s epochs)',
+                    (
+                      details?.windowLength || DEFAULT_AGGREGATION_DAYS
+                    ).toString()
+                  ),
+                },
                {
                  name: 'commission',
-                  displayName: t('Commission earned (last 30 days)'),
+                  displayName: t(
+                    'Commission earned (last %s epochs)',
+                    (
+                      details?.windowLength || DEFAULT_AGGREGATION_DAYS
+                    ).toString()
+                  ),
                },
              ]}
              data={sortBy(
@@ -109,6 +109,7 @@ export const TiersContainer = () => {
          <Loading variant="large" />
        ) : (
          <TiersTable
+            windowLength={details?.windowLength}
            data={benefitTiers.map((bt) => ({
              ...bt,
              tierElement: (
@@ -162,6 +163,7 @@ const StakingTiers = ({

 const TiersTable = ({
  data,
+  windowLength,
 }: {
  data: Array<{
    tier: number;
@@ -170,6 +172,7 @@ const TiersTable = ({
    discount: string;
    volume: string;
  }>;
+  windowLength?: number;
 }) => {
  return (
    <Table
@@ -181,7 +184,15 @@ const TiersTable = ({
          tooltip: t('A percentage of commission earned by the referrer'),
        },
        { name: 'discount', displayName: t('Referrer trading discount') },
-        { name: 'volume', displayName: t('Min. trading volume') },
+        {
+          name: 'volume',
+          displayName: t(
+            'Min. trading volume %s',
+            windowLength
+              ? t('(last %s epochs)', windowLength.toString())
+              : undefined
+          ),
+        },
        { name: 'epochs', displayName: t('Min. epochs') },
      ]}
      data={data.map((d) => ({
@@ -7,6 +7,7 @@ import {
 import classNames from 'classnames';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { Button } from './buttons';
+import { t } from '@vegaprotocol/i18n';

 export const Tile = ({
  className,
@@ -54,13 +55,18 @@ const FADE_OUT_STYLE = classNames(

 export const CodeTile = ({
  code,
+  createdAt,
  className,
 }: {
  code: string;
+  createdAt?: string;
  className?: string;
 }) => {
  return (
-    <StatTile title="Your referral code">
+    <StatTile
+      title={t('Your referral code')}
+      description={createdAt ? t('(Created at: %s)', createdAt) : undefined}
+    >
      <div className="flex gap-2 items-center justify-between">
        <Tooltip
          description={
@@ -82,7 +88,7 @@ export const CodeTile = ({
        </Tooltip>
        <CopyWithTooltip text={code}>
          <Button className="text-sm no-underline !py-0 !px-0 h-fit !bg-transparent">
-            <span className="sr-only">Copy</span>
+            <span className="sr-only">{t('Copy')}</span>
            <VegaIcon size={24} name={VegaIconNames.COPY} />
          </Button>
        </CopyWithTooltip>
@@ -7,7 +7,7 @@ import {
  NetworkParams,
 } from '@vegaprotocol/network-parameters';
 import { useMarketList } from '@vegaprotocol/markets';
-import { formatNumber } from '@vegaprotocol/utils';
+import { formatNumber, formatNumberRounded } from '@vegaprotocol/utils';
 import { useDiscountProgramsQuery, useFeesQuery } from './__generated__/Fees';
 import { FeeCard } from './fees-card';
 import { MarketFees } from './market-fees';
@@ -284,7 +284,7 @@ export const CurrentVolume = ({
  return (
    <div>
      <Stat
-        value={formatNumber(windowLengthVolume)}
+        value={formatNumberRounded(new BigNumber(windowLengthVolume))}
        text={t('Past %s epochs', epochs.toString())}
      />
      {requiredForNextTier > 0 && (
@@ -0,0 +1,74 @@
+import BigNumber from 'bignumber.js';
+import { getAdjustedFee } from './utils';
+
+describe('getAdjustedFee', () => {
+  it('simple', () => {
+    const volumeDiscount = 0.5;
+    const referralDiscount = 0.5;
+
+    const infraFee = 0.1;
+    const makerFee = 0.1;
+    const liqFee = 0.1;
+
+    const fees = [
+      new BigNumber(infraFee),
+      new BigNumber(makerFee),
+      new BigNumber(liqFee),
+    ];
+
+    const discounts = [
+      new BigNumber(volumeDiscount),
+      new BigNumber(referralDiscount),
+    ];
+
+    // 1 - 0.5 - 0.5
+    const v = new BigNumber(1).minus(new BigNumber(volumeDiscount));
+
+    // 1 - 0.5 = 0.5
+    const r = new BigNumber(1).minus(new BigNumber(referralDiscount));
+
+    // 0.5 * 0.5 = 0.25
+    // 1 - 0.25 = 0.75
+    const factor = new BigNumber(1).minus(v.times(r));
+
+    // 0.1 + 0.1 + 0.1 = 0.3
+    const totalFees = fees.reduce((sum, x) => sum.plus(x), new BigNumber(0));
+
+    // 0.3 * 0.75 = 0.225
+    const expected = new BigNumber(totalFees).times(factor).toNumber();
+
+    expect(getAdjustedFee(fees, discounts)).toBe(expected);
+  });
+
+  it('combines discount factors multiplicativly', () => {
+    const volumeDiscount = 0.4;
+    const referralDiscount = 0.1;
+
+    const infraFee = 0.0005;
+    const makerFee = 0.0002;
+    const liqFee = 0.01;
+
+    const fees = [
+      new BigNumber(infraFee),
+      new BigNumber(makerFee),
+      new BigNumber(liqFee),
+    ];
+
+    const discounts = [
+      new BigNumber(volumeDiscount),
+      new BigNumber(referralDiscount),
+    ];
+
+    // formula for calculating adjusted fees
+    const v = new BigNumber(1).minus(new BigNumber(volumeDiscount));
+    const r = new BigNumber(1).minus(new BigNumber(referralDiscount));
+    const factor = new BigNumber(1).minus(v.times(r));
+
+    // summed fees
+    const totalFees = fees.reduce((sum, x) => sum.plus(x), new BigNumber(0));
+
+    const expected = new BigNumber(totalFees).times(factor).toNumber();
+
+    expect(getAdjustedFee(fees, discounts)).toBe(expected);
+  });
+});
@@ -88,14 +88,18 @@ export const getReferralBenefitTier = (
 /**
 * Given a set of fees and a set of discounts return
 * the adjusted fee factor
+ *
+ * Formula for calculating the adjusted fees
+ *  total_discount_factor = 1 - (1 - volumeDiscount) * (1 - referralDiscount)
 */
 export const getAdjustedFee = (fees: BigNumber[], discounts: BigNumber[]) => {
  const totalFee = fees.reduce((sum, f) => sum.plus(f), new BigNumber(0));
-  const totalDiscount = discounts.reduce(
-    (sum, d) => sum.plus(d),
-    new BigNumber(0)
-  );
-  return totalFee
-    .times(BigNumber.max(0, new BigNumber(1).minus(totalDiscount)))
-    .toNumber();
+
+  const combinedFactors = discounts.reduce((acc, d) => {
+    return acc.times(new BigNumber(1).minus(d));
+  }, new BigNumber(1));
+
+  const totalFactor = new BigNumber(1).minus(combinedFactors);
+
+  return totalFee.times(BigNumber.max(0, totalFactor)).toNumber();
 };
@@ -10,15 +10,28 @@ import {
  formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { ExternalLink, Indicator } from '@vegaprotocol/ui-toolkit';
+import {
+  CopyWithTooltip,
+  ExternalLink,
+  Indicator,
+  VegaIcon,
+  VegaIconNames,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
 import { DocsLinks } from '@vegaprotocol/environment';
-import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
+import {
+  useCheckLiquidityStatus,
+  usePaidFeesQuery,
+} from '@vegaprotocol/liquidity';
 import { useParams } from 'react-router-dom';

 export const LiquidityHeader = () => {
  const { marketId } = useParams();
  const { data: market } = useMarket(marketId);
  const { data: marketData } = useStaticMarketData(marketId);
+  const { data: feesPaidRes } = usePaidFeesQuery({
+    variables: { marketId: marketId || '' },
+  });
  const targetStake = marketData?.targetStake;
  const suppliedStake = marketData?.suppliedStake;

@@ -36,6 +49,10 @@ export const LiquidityHeader = () => {
    triggeringRatio,
  });

+  const feesObject = feesPaidRes?.paidLiquidityFees?.edges?.find(
+    (e) => e?.node.marketId === marketId
+  );
+
  return (
    <Header
      title={
@@ -82,9 +99,40 @@ export const LiquidityHeader = () => {
      <HeaderStat heading={t('Liquidity supplied')} testId="liquidity-supplied">
        <Indicator variant={status} /> {formatNumberPercentage(percentage, 2)}
      </HeaderStat>
-      <HeaderStat heading={t('Market ID')} testId="liquidity-market-id">
-        <div className="break-word">{marketId}</div>
+      <HeaderStat
+        heading={t('Fees paid')}
+        description={t(
+          'The amount of fees paid to liquidity providers across the whole market during the last epoch %s.',
+          feesObject?.node.epoch.toString() || '-'
+        )}
+        testId="fees-paid"
+      >
+        <div>
+          {feesObject?.node.totalFeesPaid
+            ? `${addDecimalsFormatNumber(
+                feesObject?.node.totalFeesPaid,
+                assetDecimalPlaces ?? 0
+              )} ${symbol}`
+            : '-'}
+        </div>
      </HeaderStat>
+      {marketId && (
+        <HeaderStat heading={t('Market ID')} testId="liquidity-market-id">
+          <div className="break-word">
+            <CopyWithTooltip text={marketId}>
+              <button
+                data-testid="copy-eth-oracle-address"
+                className="uppercase text-right"
+              >
+                <span className="flex gap-1">
+                  {truncateMiddle(marketId)}
+                  <VegaIcon name={VegaIconNames.COPY} size={16} />
+                </span>
+              </button>
+            </CopyWithTooltip>
+          </div>
+        </HeaderStat>
+      )}
      <HeaderStat heading={t('Learn more')} testId="liquidity-learn-more">
        {DocsLinks ? (
          <ExternalLink href={DocsLinks.LIQUIDITY}>
@@ -1,31 +1,83 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CandlesMenu } from './candles-menu';
+import {
+  useCandlesChartSettingsStore,
+  DEFAULT_CHART_SETTINGS,
+} from './use-candles-chart-settings';
+import { Overlay, Study, overlayLabels, studyLabels } from 'pennant';

 describe('CandlesMenu', () => {
-  it('should render with the correct default studies', async () => {
-    render(<CandlesMenu />);
-
+  const openDropdown = async () => {
    await userEvent.click(
      screen.getByRole('button', {
-        name: 'Studies',
+        name: 'Indicators',
      })
    );
-    expect(await screen.findByRole('menu')).toBeInTheDocument();
-    expect(screen.getByText('Volume')).toHaveAttribute('data-state', 'checked');
-    expect(screen.getByText('MACD')).toHaveAttribute('data-state', 'checked');
+  };
+
+  beforeEach(() => {
+    // clear store each time to avoid conditional testing of defaults
+    useCandlesChartSettingsStore.setState({ overlays: [], studies: [] });
  });

-  it('should render with the correct default overlays', async () => {
+  it.each(Object.values(Overlay))('can set %s overlay', async (overlay) => {
+    render(<CandlesMenu />);
+
+    await openDropdown();
+
+    const menu = within(await screen.findByRole('menu'));
+
+    await userEvent.click(menu.getByText(overlayLabels[overlay as Overlay]));
+
+    // re-open the dropdown
+    await openDropdown();
+
+    expect(screen.getByText(overlayLabels[overlay as Overlay])).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+
+  it.each(Object.values(Study))('can set %s study', async (study) => {
+    render(<CandlesMenu />);
+
+    await openDropdown();
+
+    const menu = within(await screen.findByRole('menu'));
+
+    await userEvent.click(menu.getByText(studyLabels[study as Study]));
+
+    // re-open the dropdown
+    await openDropdown();
+
+    expect(screen.getByText(studyLabels[study as Study])).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+
+  it('should render with the correct default studies and overlays', async () => {
+    useCandlesChartSettingsStore.setState(DEFAULT_CHART_SETTINGS);
+
    render(<CandlesMenu />);

    await userEvent.click(
      screen.getByRole('button', {
-        name: 'Overlays',
+        name: 'Indicators',
      })
    );
-    expect(await screen.findByRole('menu')).toBeInTheDocument();
-    expect(screen.getByText('Moving average')).toHaveAttribute(
+    const menu = within(await screen.findByRole('menu'));
+
+    expect(menu.getByText(studyLabels.volume)).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(menu.getByText(studyLabels.macd)).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(menu.getByText(overlayLabels.movingAverage)).toHaveAttribute(
      'data-state',
      'checked'
    );
@@ -107,7 +107,7 @@ export const CandlesMenu = () => {
        trigger={
          <TradingDropdownTrigger className={triggerClasses}>
            <TradingButton {...triggerButtonProps}>
-              {t('Overlays')}
+              {t('Indicators')}
            </TradingButton>
          </TradingDropdownTrigger>
        }
@@ -132,18 +132,6 @@ export const CandlesMenu = () => {
              <TradingDropdownItemIndicator />
            </TradingDropdownCheckboxItem>
          ))}
-        </TradingDropdownContent>
-      </TradingDropdown>
-      <TradingDropdown
-        trigger={
-          <TradingDropdownTrigger className={triggerClasses}>
-            <TradingButton {...triggerButtonProps}>
-              {t('Studies')}
-            </TradingButton>
-          </TradingDropdownTrigger>
-        }
-      >
-        <TradingDropdownContent align={contentAlign}>
          {Object.values(Study).map((study) => (
            <TradingDropdownCheckboxItem
              key={study}
@@ -24,7 +24,7 @@ const STUDY_ORDER: Study[] = [
  Study.VOLUME,
 ];

-const DEFAULT_CHART_SETTINGS = {
+export const DEFAULT_CHART_SETTINGS = {
  interval: Interval.I15M,
  type: ChartType.CANDLE,
  overlays: [Overlay.MOVING_AVERAGE],
@@ -3,7 +3,12 @@ import throttle from 'lodash/throttle';
 import isEqualWith from 'lodash/isEqualWith';
 import { useApolloClient } from '@apollo/client';
 import type { OperationVariables } from '@apollo/client';
-import type { Subscribe, Load, UpdateCallback } from './generic-data-provider';
+import type {
+  Subscribe,
+  Load,
+  UpdateCallback,
+  PageInfo,
+} from './generic-data-provider';
 import { variablesIsEqualCustomizer } from './generic-data-provider';

 export interface useDataProviderParams<
@@ -12,13 +17,23 @@ export interface useDataProviderParams<
  Variables extends OperationVariables | undefined = undefined
 > {
  dataProvider: Subscribe<Data, Delta, Variables>;
-  update?: ({ delta, data }: { delta?: Delta; data: Data | null }) => boolean;
+  update?: ({
+    delta,
+    data,
+    pageInfo,
+  }: {
+    delta?: Delta;
+    data: Data | null;
+    pageInfo: PageInfo | null;
+  }) => boolean;
  insert?: ({
    insertionData,
    data,
+    pageInfo,
  }: {
    insertionData?: Data | null;
    data: Data | null;
+    pageInfo: PageInfo | null;
  }) => boolean;
  variables: Variables;
  skipUpdates?: boolean;
@@ -30,7 +45,7 @@ export interface useDataProviderParams<
 * @param dataProvider subscribe function created by makeDataProvider
 * @param update optional function called on each delta received in subscription, if returns true updated data will be not passed from hook (component handles updates internally)
 * @param variables optional
- * @returns state: data, loading, error, methods: flush (pass updated data to update function without delta), restart: () => void}};
+ * @returns state: data, loading, pageInfo, error, methods: flush (pass updated data to update function without delta), restart: () => void}};
 */
 export const useDataProvider = <
  Data,
@@ -48,6 +63,7 @@ export const useDataProvider = <
  const [data, setData] = useState<Data | null>(null);
  const [loading, setLoading] = useState<boolean>(!skip);
  const [error, setError] = useState<Error | undefined>(undefined);
+  const [pageInfo, setPageInfo] = useState<PageInfo | null>(null);
  const flushRef = useRef<(() => void) | undefined>(undefined);
  const reloadRef = useRef<((force?: boolean) => void) | undefined>(undefined);
  const loadRef = useRef<Load<Data> | undefined>(undefined);
@@ -93,6 +109,7 @@ export const useDataProvider = <
      isInsert,
      isUpdate,
      loaded,
+      pageInfo,
    } = args;
    setError(error);
    setLoading(!loaded && loading);
@@ -104,21 +121,22 @@ export const useDataProvider = <
        (skipUpdatesRef.current ||
          (!skipUpdatesRef.current &&
            updateRef.current &&
-            updateRef.current({ delta, data })))
+            updateRef.current({ delta, data, pageInfo })))
      ) {
        return;
      }
      if (
        isInsert &&
        insertRef.current &&
-        insertRef.current({ insertionData, data })
+        insertRef.current({ insertionData, data, pageInfo })
      ) {
        return;
      }
    }
    setData(data);
+    setPageInfo(pageInfo);
    if (!loading && !isUpdate && updateRef.current) {
-      updateRef.current({ data });
+      updateRef.current({ data, pageInfo });
    }
  }, []);

@@ -136,15 +154,13 @@ export const useDataProvider = <

  useEffect(() => {
    setData(null);
+    setPageInfo(null);
    setError(undefined);
    if (updateRef.current) {
-      updateRef.current({ data: null });
+      updateRef.current({ data: null, pageInfo: null });
    }
    if (skip) {
      setLoading(false);
-      if (updateRef.current) {
-        updateRef.current({ data: null });
-      }
      return;
    }
    setLoading(true);
@@ -165,6 +181,7 @@ export const useDataProvider = <
  }, [client, dataProvider, callback, variables, skip]);
  return {
    data,
+    pageInfo,
    loading,
    error,
    flush,
@@ -26,11 +26,7 @@ import {
  EST_TOTAL_MARGIN_TOOLTIP_TEXT,
  MARGIN_ACCOUNT_TOOLTIP_TEXT,
 } from '../../constants';
-import {
-  sumFees,
-  sumFeesDiscounts,
-  useEstimateFees,
-} from '../../hooks/use-estimate-fees';
+import { useEstimateFees } from '../../hooks/use-estimate-fees';
 import { KeyValue } from './key-value';
 import {
  Accordion,
@@ -44,6 +40,7 @@ import {
 import classNames from 'classnames';
 import BigNumber from 'bignumber.js';
 import { FeesBreakdown } from '../fees-breakdown';
+import { getTotalDiscountFactor, getDiscountedFee } from '../discounts';

 const emptyValue = '-';

@@ -63,48 +60,49 @@ export const DealTicketFeeDetails = ({
  const feeEstimate = useEstimateFees(order, isMarketInAuction);
  const asset = getAsset(market);
  const { decimals: assetDecimals, quantum } = asset;
-  const totalFees = feeEstimate?.fees && sumFees(feeEstimate?.fees);
-  const feesDiscounts =
-    feeEstimate?.fees && sumFeesDiscounts(feeEstimate?.fees);

-  const totalPercentageDiscount =
-    feesDiscounts &&
-    totalFees &&
-    feesDiscounts.total !== '0' &&
-    totalFees !== '0' &&
-    new BigNumber(feesDiscounts.total)
-      .dividedBy(BigNumber.sum(totalFees, feesDiscounts.total))
-      .times(100);
+  const totalDiscountFactor = getTotalDiscountFactor(feeEstimate);
+  const totalDiscountedFeeAmount =
+    feeEstimate?.totalFeeAmount &&
+    getDiscountedFee(
+      feeEstimate.totalFeeAmount,
+      feeEstimate.referralDiscountFactor,
+      feeEstimate.volumeDiscountFactor
+    ).discountedFee;
+
  return (
    <KeyValue
      label={t('Fees')}
      value={
-        feeEstimate?.totalFeeAmount &&
-        `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals)}`
+        totalDiscountedFeeAmount &&
+        `~${formatValue(totalDiscountedFeeAmount, assetDecimals)}`
      }
      formattedValue={
        <>
-          {totalPercentageDiscount && (
+          {totalDiscountFactor && (
            <Pill size="xxs" intent={Intent.Warning} className="mr-1">
-              -{formatNumberPercentage(totalPercentageDiscount, 2)}
+              -
+              {formatNumberPercentage(
+                new BigNumber(totalDiscountFactor).multipliedBy(100),
+                2
+              )}
            </Pill>
          )}
-          {feeEstimate?.totalFeeAmount &&
-            `~${formatValue(
-              feeEstimate?.totalFeeAmount,
-              assetDecimals,
-              quantum
-            )}`}
+          {totalDiscountedFeeAmount &&
+            `~${formatValue(totalDiscountedFeeAmount, assetDecimals, quantum)}`}
        </>
      }
      labelDescription={
        <>
-          <span>
+          <p className="mb-2">
            {t(
              `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}. Fees estimated are "taker" fees and will only be payable if the order trades aggressively. Rebate equal to the maker portion will be paid to the trader if the order trades passively.`
            )}
-          </span>
+          </p>
          <FeesBreakdown
+            totalFeeAmount={feeEstimate?.totalFeeAmount}
+            referralDiscountFactor={feeEstimate?.referralDiscountFactor}
+            volumeDiscountFactor={feeEstimate?.volumeDiscountFactor}
            fees={feeEstimate?.fees}
            feeFactors={market.fees.factors}
            symbol={assetSymbol}
@@ -109,7 +109,7 @@ describe('DealTicket', () => {
        variables: {
          partyId: 'pubKey',
          filter: { liveOnly: true },
-          pagination: { first: 5000 },
+          pagination: { first: 1000 },
        },
      },
      result: {
@@ -0,0 +1,66 @@
+import { getDiscountedFee, getTotalDiscountFactor } from './discounts';
+
+describe('getDiscountedFee', () => {
+  it('calculates values if volumeDiscount or referralDiscount is undefined', () => {
+    expect(getDiscountedFee('100')).toEqual({
+      discountedFee: '100',
+      volumeDiscount: '0',
+      referralDiscount: '0',
+    });
+    expect(getDiscountedFee('100', undefined, '0.1')).toEqual({
+      discountedFee: '90',
+      volumeDiscount: '10',
+      referralDiscount: '0',
+    });
+    expect(getDiscountedFee('100', '0.1', undefined)).toEqual({
+      discountedFee: '90',
+      volumeDiscount: '0',
+      referralDiscount: '10',
+    });
+  });
+
+  it('calculates values using volumeDiscount or referralDiscount', () => {
+    expect(getDiscountedFee('', '0.1', '0.2')).toEqual({
+      discountedFee: '',
+      volumeDiscount: '0',
+      referralDiscount: '0',
+    });
+  });
+});
+
+describe('getTotalDiscountFactor', () => {
+  it('returns 0 if discounts are 0', () => {
+    expect(
+      getTotalDiscountFactor({
+        volumeDiscountFactor: '0',
+        referralDiscountFactor: '0',
+      })
+    ).toEqual(0);
+  });
+
+  it('returns volumeDiscountFactor if referralDiscountFactor is 0', () => {
+    expect(
+      getTotalDiscountFactor({
+        volumeDiscountFactor: '0.1',
+        referralDiscountFactor: '0',
+      })
+    ).toEqual(0.1);
+  });
+  it('returns referralDiscountFactor if volumeDiscountFactor is 0', () => {
+    expect(
+      getTotalDiscountFactor({
+        volumeDiscountFactor: '0',
+        referralDiscountFactor: '0.1',
+      })
+    ).toEqual(0.1);
+  });
+
+  it('calculates discount using referralDiscountFactor and volumeDiscountFactor', () => {
+    expect(
+      getTotalDiscountFactor({
+        volumeDiscountFactor: '0.2',
+        referralDiscountFactor: '0.1',
+      })
+    ).toBeCloseTo(0.28);
+  });
+});
@@ -0,0 +1,54 @@
+import BigNumber from 'bignumber.js';
+
+export const getDiscountedFee = (
+  feeAmount: string,
+  referralDiscountFactor?: string,
+  volumeDiscountFactor?: string
+) => {
+  if (
+    ((!referralDiscountFactor || referralDiscountFactor === '0') &&
+      (!volumeDiscountFactor || volumeDiscountFactor === '0')) ||
+    !feeAmount ||
+    feeAmount === '0'
+  ) {
+    return {
+      discountedFee: feeAmount,
+      volumeDiscount: '0',
+      referralDiscount: '0',
+    };
+  }
+  const referralDiscount = new BigNumber(referralDiscountFactor || '0')
+    .multipliedBy(feeAmount)
+    .toFixed(0, BigNumber.ROUND_FLOOR);
+  const volumeDiscount = new BigNumber(volumeDiscountFactor || '0')
+    .multipliedBy((BigInt(feeAmount) - BigInt(referralDiscount)).toString())
+    .toFixed(0, BigNumber.ROUND_FLOOR);
+  const discountedFee = (
+    BigInt(feeAmount || '0') -
+    BigInt(referralDiscount) -
+    BigInt(volumeDiscount)
+  ).toString();
+  return {
+    referralDiscount,
+    volumeDiscount,
+    discountedFee,
+  };
+};
+
+export const getTotalDiscountFactor = (feeEstimate?: {
+  volumeDiscountFactor?: string;
+  referralDiscountFactor?: string;
+}) => {
+  if (!feeEstimate) {
+    return 0;
+  }
+  const volumeFactor = Number(feeEstimate?.volumeDiscountFactor) || 0;
+  const referralFactor = Number(feeEstimate?.referralDiscountFactor) || 0;
+  if (!volumeFactor) {
+    return referralFactor;
+  }
+  if (!referralFactor) {
+    return volumeFactor;
+  }
+  return 1 - (1 - volumeFactor) * (1 - referralFactor);
+};
@@ -6,7 +6,7 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import BigNumber from 'bignumber.js';
-import { sumFees, sumFeesDiscounts } from '../../hooks';
+import { getDiscountedFee } from '../discounts';

 const formatValue = (
  value: string | number | null | undefined,
@@ -24,7 +24,7 @@ const FeesBreakdownItem = ({
  decimals,
 }: {
  label: string;
-  factor?: BigNumber;
+  factor?: string;
  value: string;
  symbol?: string;
  decimals: number;
@@ -43,76 +43,86 @@ const FeesBreakdownItem = ({
 );

 export const FeesBreakdown = ({
+  totalFeeAmount,
  fees,
  feeFactors,
  symbol,
  decimals,
+  referralDiscountFactor,
+  volumeDiscountFactor,
 }: {
+  totalFeeAmount?: string;
  fees?: TradeFee;
  feeFactors?: FeeFactors;
  symbol?: string;
  decimals: number;
+  referralDiscountFactor?: string;
+  volumeDiscountFactor?: string;
 }) => {
-  if (!fees) return null;
-  const totalFees = sumFees(fees);
-  const {
-    total: totalDiscount,
-    referral: referralDiscount,
-    volume: volumeDiscount,
-  } = sumFeesDiscounts(fees);
-  if (totalFees === '0') return null;
+  if (!fees || !totalFeeAmount || totalFeeAmount === '0') return null;
+
+  const { discountedFee: discountedInfrastructureFee } = getDiscountedFee(
+    fees.infrastructureFee,
+    referralDiscountFactor,
+    volumeDiscountFactor
+  );
+
+  const { discountedFee: discountedLiquidityFee } = getDiscountedFee(
+    fees.liquidityFee,
+    referralDiscountFactor,
+    volumeDiscountFactor
+  );
+
+  const { discountedFee: discountedMakerFee } = getDiscountedFee(
+    fees.makerFee,
+    referralDiscountFactor,
+    volumeDiscountFactor
+  );
+
+  const { volumeDiscount, referralDiscount } = getDiscountedFee(
+    totalFeeAmount,
+    referralDiscountFactor,
+    volumeDiscountFactor
+  );
+
  return (
    <dl className="grid grid-cols-6">
      <FeesBreakdownItem
        label={t('Infrastructure fee')}
-        factor={
-          feeFactors?.infrastructureFee
-            ? new BigNumber(feeFactors?.infrastructureFee)
-            : undefined
-        }
-        value={fees.infrastructureFee}
+        factor={feeFactors?.infrastructureFee}
+        value={discountedInfrastructureFee}
        symbol={symbol}
        decimals={decimals}
      />

      <FeesBreakdownItem
        label={t('Liquidity fee')}
-        factor={
-          feeFactors?.liquidityFee
-            ? new BigNumber(feeFactors?.liquidityFee)
-            : undefined
-        }
-        value={fees.liquidityFee}
+        factor={feeFactors?.liquidityFee}
+        value={discountedLiquidityFee}
        symbol={symbol}
        decimals={decimals}
      />

      <FeesBreakdownItem
        label={t('Maker fee')}
-        factor={
-          feeFactors?.makerFee ? new BigNumber(feeFactors?.makerFee) : undefined
-        }
-        value={fees.makerFee}
+        factor={feeFactors?.makerFee}
+        value={discountedMakerFee}
        symbol={symbol}
        decimals={decimals}
      />
-      {volumeDiscount && volumeDiscount !== '0' && (
+      {volumeDiscountFactor && volumeDiscount !== '0' && (
        <FeesBreakdownItem
          label={t('Volume discount')}
-          factor={new BigNumber(volumeDiscount).dividedBy(
-            BigNumber.sum(totalFees, totalDiscount)
-          )}
+          factor={volumeDiscountFactor}
          value={volumeDiscount}
          symbol={symbol}
          decimals={decimals}
        />
      )}
-      {referralDiscount && referralDiscount !== '0' && (
+      {referralDiscountFactor && referralDiscount !== '0' && (
        <FeesBreakdownItem
          label={t('Referral discount')}
-          factor={new BigNumber(referralDiscount).dividedBy(
-            BigNumber.sum(totalFees, totalDiscount)
-          )}
+          factor={referralDiscountFactor}
          value={referralDiscount}
          symbol={symbol}
          decimals={decimals}
@@ -120,8 +130,8 @@ export const FeesBreakdown = ({
      )}
      <FeesBreakdownItem
        label={t('Total fees')}
-        factor={feeFactors ? sumFeesFactors(feeFactors) : undefined}
-        value={totalFees}
+        factor={feeFactors ? sumFeesFactors(feeFactors)?.toString() : undefined}
+        value={totalFeeAmount}
        symbol={symbol}
        decimals={decimals}
      />
@@ -31,4 +31,25 @@ query EstimateFees(
    }
    totalFeeAmount
  }
+  epoch {
+    id
+  }
+  volumeDiscountStats(partyId: $partyId, pagination: { last: 1 }) {
+    edges {
+      node {
+        atEpoch
+        discountFactor
+        runningVolume
+      }
+    }
+  }
+  referralSetStats(partyId: $partyId, pagination: { last: 1 }) {
+    edges {
+      node {
+        atEpoch
+        discountFactor
+        referralSetRunningNotionalTakerVolume
+      }
+    }
+  }
 }
@@ -15,7 +15,7 @@ export type EstimateFeesQueryVariables = Types.Exact<{
 }>;


-export type EstimateFeesQuery = { __typename?: 'Query', estimateFees: { __typename?: 'FeeEstimate', totalFeeAmount: string, fees: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string, makerFeeReferralDiscount?: string | null, makerFeeVolumeDiscount?: string | null, infrastructureFeeReferralDiscount?: string | null, infrastructureFeeVolumeDiscount?: string | null, liquidityFeeReferralDiscount?: string | null, liquidityFeeVolumeDiscount?: string | null } } };
+export type EstimateFeesQuery = { __typename?: 'Query', estimateFees: { __typename?: 'FeeEstimate', totalFeeAmount: string, fees: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string, makerFeeReferralDiscount?: string | null, makerFeeVolumeDiscount?: string | null, infrastructureFeeReferralDiscount?: string | null, infrastructureFeeVolumeDiscount?: string | null, liquidityFeeReferralDiscount?: string | null, liquidityFeeVolumeDiscount?: string | null } }, epoch: { __typename?: 'Epoch', id: string }, volumeDiscountStats: { __typename?: 'VolumeDiscountStatsConnection', edges: Array<{ __typename?: 'VolumeDiscountStatsEdge', node: { __typename?: 'VolumeDiscountStats', atEpoch: number, discountFactor: string, runningVolume: string } } | null> }, referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, discountFactor: string, referralSetRunningNotionalTakerVolume: string } } | null> } };


 export const EstimateFeesDocument = gql`
@@ -43,6 +43,27 @@ export const EstimateFeesDocument = gql`
    }
    totalFeeAmount
  }
+  epoch {
+    id
+  }
+  volumeDiscountStats(partyId: $partyId, pagination: {last: 1}) {
+    edges {
+      node {
+        atEpoch
+        discountFactor
+        runningVolume
+      }
+    }
+  }
+  referralSetStats(partyId: $partyId, pagination: {last: 1}) {
+    edges {
+      node {
+        atEpoch
+        discountFactor
+        referralSetRunningNotionalTakerVolume
+      }
+    }
+  }
 }
    `;

@@ -6,6 +6,15 @@ export const estimateFeesQuery = (
  override?: PartialDeep<EstimateFeesQuery>
 ): EstimateFeesQuery => {
  const defaultResult: EstimateFeesQuery = {
+    epoch: {
+      id: '1',
+    },
+    referralSetStats: {
+      edges: [],
+    },
+    volumeDiscountStats: {
+      edges: [],
+    },
    estimateFees: {
      __typename: 'FeeEstimate',
      totalFeeAmount: '0.0006',
@@ -5,6 +5,31 @@ import { Side, OrderTimeInForce, OrderType } from '@vegaprotocol/types';
 import type { EstimateFeesQuery } from './__generated__/EstimateOrder';

 const data: EstimateFeesQuery = {
+  epoch: {
+    id: '2',
+  },
+  volumeDiscountStats: {
+    edges: [
+      {
+        node: {
+          atEpoch: 1,
+          discountFactor: '0.1',
+          runningVolume: '100',
+        },
+      },
+    ],
+  },
+  referralSetStats: {
+    edges: [
+      {
+        node: {
+          atEpoch: 1,
+          discountFactor: '0.2',
+          referralSetRunningNotionalTakerVolume: '100',
+        },
+      },
+    ],
+  },
  estimateFees: {
    totalFeeAmount: '120',
    fees: {
@@ -54,6 +79,8 @@ describe('useEstimateFees', () => {
        liquidityFee: '0',
        makerFee: '0',
      },
+      referralDiscountFactor: '0',
+      volumeDiscountFactor: '0',
    });
    expect(mockUseEstimateFeesQuery.mock.lastCall?.[0].skip).toBeTruthy();
  });
@@ -85,6 +112,46 @@ describe('useEstimateFees', () => {
        makerFeeReferralDiscount: '5',
        makerFeeVolumeDiscount: '6',
      },
+      referralDiscountFactor: '0',
+      volumeDiscountFactor: '0',
    });
  });
+
+  it('returns 0 discounts if discount stats are not at the current epoch', () => {
+    const { result } = renderHook(() =>
+      useEstimateFees(
+        {
+          marketId: 'marketId',
+          side: Side.SIDE_BUY,
+          size: '1',
+          price: '1',
+          timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
+          type: OrderType.TYPE_LIMIT,
+        },
+        true
+      )
+    );
+    expect(result.current?.referralDiscountFactor).toEqual('0');
+    expect(result.current?.volumeDiscountFactor).toEqual('0');
+  });
+
+  it('returns discounts', () => {
+    data.epoch.id = '1';
+    const { result } = renderHook(() =>
+      useEstimateFees(
+        {
+          marketId: 'marketId',
+          side: Side.SIDE_BUY,
+          size: '1',
+          price: '1',
+          timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
+          type: OrderType.TYPE_LIMIT,
+        },
+        true
+      )
+    );
+
+    expect(result.current?.referralDiscountFactor).toEqual('0.2');
+    expect(result.current?.volumeDiscountFactor).toEqual('0.1');
+  });
 });
@@ -5,39 +5,22 @@ import type { EstimateFeesQuery } from './__generated__/EstimateOrder';
 import { useEstimateFeesQuery } from './__generated__/EstimateOrder';

 const divideByTwo = (n: string) => (BigInt(n) / BigInt(2)).toString();
-export const sumFeesDiscounts = (
-  fees: EstimateFeesQuery['estimateFees']['fees']
-) => {
-  const volume = (
-    BigInt(fees.makerFeeVolumeDiscount || '0') +
-    BigInt(fees.infrastructureFeeVolumeDiscount || '0') +
-    BigInt(fees.liquidityFeeVolumeDiscount || '0')
-  ).toString();
-  const referral = (
-    BigInt(fees.makerFeeReferralDiscount || '0') +
-    BigInt(fees.infrastructureFeeReferralDiscount || '0') +
-    BigInt(fees.liquidityFeeReferralDiscount || '0')
-  ).toString();
-  return {
-    volume,
-    referral,
-    total: (BigInt(volume) + BigInt(referral)).toString(),
-  };
-};
-
-export const sumFees = (fees: EstimateFeesQuery['estimateFees']['fees']) =>
-  (
-    BigInt(fees.makerFee || '0') +
-    BigInt(fees.infrastructureFee || '0') +
-    BigInt(fees.liquidityFee || '0')
-  ).toString();

 export const useEstimateFees = (
  order?: OrderSubmissionBody['orderSubmission'],
  isMarketInAuction?: boolean
-): EstimateFeesQuery['estimateFees'] | undefined => {
+):
+  | (EstimateFeesQuery['estimateFees'] & {
+      referralDiscountFactor: string;
+      volumeDiscountFactor: string;
+    })
+  | undefined => {
  const { pubKey } = useVegaWallet();
-  const { data } = useEstimateFeesQuery({
+  const {
+    data: currentData,
+    previousData,
+    loading,
+  } = useEstimateFeesQuery({
    variables: order && {
      marketId: order.marketId,
      partyId: pubKey || '',
@@ -50,8 +33,21 @@ export const useEstimateFees = (
    fetchPolicy: 'no-cache',
    skip: !pubKey || !order?.size || !order?.price || order.postOnly,
  });
+  const data = loading ? currentData || previousData : currentData;
+  const volumeDiscountFactor =
+    (data?.volumeDiscountStats.edges[0]?.node.atEpoch.toString() ===
+      data?.epoch.id &&
+      data?.volumeDiscountStats.edges[0]?.node.discountFactor) ||
+    '0';
+  const referralDiscountFactor =
+    (data?.referralSetStats.edges[0]?.node.atEpoch.toString() ===
+      data?.epoch.id &&
+      data?.referralSetStats.edges[0]?.node.discountFactor) ||
+    '0';
  if (order?.postOnly) {
    return {
+      volumeDiscountFactor,
+      referralDiscountFactor,
      totalFeeAmount: '0',
      fees: {
        infrastructureFee: '0',
@@ -60,8 +56,13 @@ export const useEstimateFees = (
      },
    };
  }
-  return isMarketInAuction && data?.estimateFees
+  if (!data?.estimateFees) {
+    return undefined;
+  }
+  return isMarketInAuction
    ? {
+        volumeDiscountFactor,
+        referralDiscountFactor,
        totalFeeAmount: divideByTwo(data.estimateFees.totalFeeAmount),
        fees: {
          infrastructureFee: divideByTwo(
@@ -91,5 +92,9 @@ export const useEstimateFees = (
            divideByTwo(data.estimateFees.fees.makerFeeVolumeDiscount),
        },
      }
-    : data?.estimateFees;
+    : {
+        volumeDiscountFactor,
+        referralDiscountFactor,
+        ...data.estimateFees,
+      };
 };
@@ -42,8 +42,12 @@ fragment FillEdge on TradeEdge {
  cursor
 }

-query Fills($filter: TradesFilter, $pagination: Pagination) {
-  trades(filter: $filter, pagination: $pagination) {
+query Fills(
+  $filter: TradesFilter
+  $pagination: Pagination
+  $dateRange: DateRange
+) {
+  trades(filter: $filter, dateRange: $dateRange, pagination: $pagination) {
    edges {
      ...FillEdge
    }
@@ -12,6 +12,7 @@ export type FillEdgeFragment = { __typename?: 'TradeEdge', cursor: string, node:
 export type FillsQueryVariables = Types.Exact<{
  filter?: Types.InputMaybe<Types.TradesFilter>;
  pagination?: Types.InputMaybe<Types.Pagination>;
+  dateRange?: Types.InputMaybe<Types.DateRange>;
 }>;


@@ -95,8 +96,8 @@ export const FillUpdateFieldsFragmentDoc = gql`
 }
    ${TradeFeeFieldsFragmentDoc}`;
 export const FillsDocument = gql`
-    query Fills($filter: TradesFilter, $pagination: Pagination) {
-  trades(filter: $filter, pagination: $pagination) {
+    query Fills($filter: TradesFilter, $pagination: Pagination, $dateRange: DateRange) {
+  trades(filter: $filter, dateRange: $dateRange, pagination: $pagination) {
    edges {
      ...FillEdge
    }
@@ -124,6 +125,7 @@ export const FillsDocument = gql`
 *   variables: {
 *      filter: // value for 'filter'
 *      pagination: // value for 'pagination'
+ *      dateRange: // value for 'dateRange'
 *   },
 * });
 */
@@ -1,11 +1,12 @@
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FillsTable } from './fills-table';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type * as Schema from '@vegaprotocol/types';
 import { fillsWithMarketProvider } from './fills-data-provider';
+import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';

 interface FillsManagerProps {
  partyId: string;
@@ -22,26 +23,60 @@ export const FillsManager = ({
  const filter: Schema.TradesFilter | Schema.TradesSubscriptionFilter = {
    partyIds: [partyId],
  };
-  const { data, error } = useDataProvider({
-    dataProvider: fillsWithMarketProvider,
-    update: ({ data }) => {
-      if (data?.length && gridRef.current?.api) {
-        gridRef.current?.api.setRowData(data);
-        return true;
-      }
-      return false;
+  const [hasDisplayedRow, setHasDisplayedRow] = useState<boolean | undefined>(
+    undefined
+  );
+  const { onFilterChanged, ...props } = gridProps || {};
+  const onRowDataUpdated = useCallback(
+    ({ api }: { api: AgGridReact['api'] }) => {
+      setHasDisplayedRow(!!api.getDisplayedRowCount());
    },
+    []
+  );
+  const { data, error, load, pageInfo } = useDataProvider({
+    dataProvider: fillsWithMarketProvider,
    variables: { filter },
  });
-
  return (
-    <FillsTable
-      ref={gridRef}
-      rowData={data}
-      partyId={partyId}
-      onMarketClick={onMarketClick}
-      overlayNoRowsTemplate={error ? error.message : t('No fills')}
-      {...gridProps}
-    />
+    <div className="flex flex-col h-full">
+      <FillsTable
+        ref={gridRef}
+        rowData={data}
+        onFilterChanged={(event) => {
+          onRowDataUpdated(event);
+          onFilterChanged(event);
+        }}
+        onRowDataUpdated={onRowDataUpdated}
+        partyId={partyId}
+        onMarketClick={onMarketClick}
+        overlayNoRowsTemplate={error ? error.message : t('No fills')}
+        {...props}
+      />
+
+      <div className="flex justify-between border-t border-default p-1 items-center">
+        <div className="text-xs">
+          {t(
+            'Depending on data node retention you may not be able see the "full" history'
+          )}
+        </div>
+        <div className="flex text-xs items-center">
+          {data?.length && !pageInfo?.hasNextPage
+            ? t('all %s items loaded', [data.length.toString()])
+            : t('%s items loaded', [
+                data?.length ? data.length.toString() : ' ',
+              ])}
+          {pageInfo?.hasNextPage ? (
+            <Button size="extra-small" className="ml-1" onClick={() => load()}>
+              {t('Load more')}
+            </Button>
+          ) : null}
+        </div>
+        {data?.length && hasDisplayedRow === false ? (
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
+            {t('No fills matching selected filters')}
+          </div>
+        ) : null}
+      </div>
+    </div>
  );
 };
@@ -20,6 +20,7 @@ import {
  negativeClassNames,
  MarketNameCell,
  COL_DEFS,
+  DateRangeFilter,
 } from '@vegaprotocol/datagrid';
 import type {
  VegaValueFormatterParams,
@@ -120,6 +121,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
        },
        {
          headerName: t('Date'),
+          filter: DateRangeFilter,
          field: 'createdAt',
          valueFormatter: ({
            value,
@@ -43,7 +43,7 @@ export const fundingPaymentsProvider = makeDataProvider<
  pagination: {
    getPageInfo,
    append,
-    first: 100,
+    first: 1000,
  },
 });

@@ -1,10 +1,11 @@
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FundingPaymentsTable } from './funding-payments-table';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { fundingPaymentsWithMarketProvider } from './funding-payments-data-provider';
+import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';

 interface FundingPaymentsManagerProps {
  partyId: string;
@@ -20,7 +21,17 @@ export const FundingPaymentsManager = ({
  gridProps,
 }: FundingPaymentsManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
-  const { data, error } = useDataProvider({
+  const [hasDisplayedRow, setHasDisplayedRow] = useState<boolean | undefined>(
+    undefined
+  );
+  const { onFilterChanged, ...props } = gridProps || {};
+  const onRowDataUpdated = useCallback(
+    ({ api }: { api: AgGridReact['api'] }) => {
+      setHasDisplayedRow(!!api.getDisplayedRowCount());
+    },
+    []
+  );
+  const { data, error, load, pageInfo } = useDataProvider({
    dataProvider: fundingPaymentsWithMarketProvider,
    update: ({ data }) => {
      if (data?.length && gridRef.current?.api) {
@@ -33,12 +44,43 @@ export const FundingPaymentsManager = ({
  });

  return (
-    <FundingPaymentsTable
-      ref={gridRef}
-      rowData={data}
-      onMarketClick={onMarketClick}
-      overlayNoRowsTemplate={error ? error.message : t('No funding payments')}
-      {...gridProps}
-    />
+    <div className="flex flex-col h-full">
+      <FundingPaymentsTable
+        ref={gridRef}
+        rowData={data}
+        onMarketClick={onMarketClick}
+        onFilterChanged={(event) => {
+          onRowDataUpdated(event);
+          onFilterChanged(event);
+        }}
+        onRowDataUpdated={onRowDataUpdated}
+        overlayNoRowsTemplate={error ? error.message : t('No funding payments')}
+        {...props}
+      />
+      <div className="flex justify-between border-t border-default p-1 items-center">
+        <div className="text-xs">
+          {t(
+            'Depending on data node retention you may not be able see the "full" history'
+          )}
+        </div>
+        <div className="flex text-xs items-center">
+          {data?.length && !pageInfo?.hasNextPage
+            ? t('all %s items loaded', [data.length.toString()])
+            : t('%s items loaded', [
+                data?.length ? data.length.toString() : ' ',
+              ])}
+          {pageInfo?.hasNextPage ? (
+            <Button size="extra-small" className="ml-1" onClick={() => load()}>
+              {t('Load more')}
+            </Button>
+          ) : null}
+        </div>
+        {data?.length && hasDisplayedRow === false ? (
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
+            {t('No funding payments matching selected filters')}
+          </div>
+        ) : null}
+      </div>
+    </div>
  );
 };
@@ -20,6 +20,19 @@ fragment LiquidityProvisionFields on LiquidityProvision {
  status
 }

+query PaidFees($marketId: ID) {
+  paidLiquidityFees(marketId: $marketId) {
+    edges {
+      node {
+        marketId
+        assetId
+        epoch
+        totalFeesPaid
+      }
+    }
+  }
+}
+
 query LiquidityProvisions($marketId: ID!) {
  market(id: $marketId) {
    liquiditySLAParameters {
@@ -5,6 +5,13 @@ import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
 export type LiquidityProvisionFieldsFragment = { __typename?: 'LiquidityProvision', id: string, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } };

+export type PaidFeesQueryVariables = Types.Exact<{
+  marketId?: Types.InputMaybe<Types.Scalars['ID']>;
+}>;
+
+
+export type PaidFeesQuery = { __typename?: 'Query', paidLiquidityFees?: { __typename?: 'PaidLiquidityFeesConnection', edges: Array<{ __typename?: 'PaidLiquidityFeesEdge', node: { __typename?: 'PaidLiquidityFees', marketId: string, assetId: string, epoch: number, totalFeesPaid: string } } | null> } | null };
+
 export type LiquidityProvisionsQueryVariables = Types.Exact<{
  marketId: Types.Scalars['ID'];
 }>;
@@ -79,6 +86,48 @@ export const LiquidityProviderFieldsFragmentDoc = gql`
 }
    ${LiquidityProviderFeeShareFieldsFragmentDoc}
 ${LiquidityProviderSLAFieldsFragmentDoc}`;
+export const PaidFeesDocument = gql`
+    query PaidFees($marketId: ID) {
+  paidLiquidityFees(marketId: $marketId) {
+    edges {
+      node {
+        marketId
+        assetId
+        epoch
+        totalFeesPaid
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __usePaidFeesQuery__
+ *
+ * To run a query within a React component, call `usePaidFeesQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePaidFeesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = usePaidFeesQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function usePaidFeesQuery(baseOptions?: Apollo.QueryHookOptions<PaidFeesQuery, PaidFeesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PaidFeesQuery, PaidFeesQueryVariables>(PaidFeesDocument, options);
+      }
+export function usePaidFeesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PaidFeesQuery, PaidFeesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PaidFeesQuery, PaidFeesQueryVariables>(PaidFeesDocument, options);
+        }
+export type PaidFeesQueryHookResult = ReturnType<typeof usePaidFeesQuery>;
+export type PaidFeesLazyQueryHookResult = ReturnType<typeof usePaidFeesLazyQuery>;
+export type PaidFeesQueryResult = Apollo.QueryResult<PaidFeesQuery, PaidFeesQueryVariables>;
 export const LiquidityProvisionsDocument = gql`
    query LiquidityProvisions($marketId: ID!) {
  market(id: $marketId) {
@@ -21,7 +21,10 @@ import type {
 } from './__generated__/MarketLiquidity';

 export type LiquidityProvisionFields = LiquidityProvisionFieldsFragment &
-  Schema.LiquiditySLAParameters;
+  Schema.LiquiditySLAParameters & {
+    currentCommitmentAmount?: string;
+    currentFee?: string;
+  };

 export const liquidityProvisionsDataProvider = makeDataProvider<
  LiquidityProvisionsQuery,
@@ -34,10 +37,28 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
  getData: (responseData: LiquidityProvisionsQuery | null) => {
    return (responseData?.market?.liquidityProvisions?.edges
      ?.filter((n) => !!n)
-      .map((e) => ({
-        ...e?.node.current,
-        ...responseData.market?.liquiditySLAParameters,
-      })) ?? []) as LiquidityProvisionFields[];
+      .map((e) => {
+        let node;
+        if (!e?.node.pending && e?.node.current) {
+          node = {
+            ...e?.node.current,
+            ...responseData.market?.liquiditySLAParameters,
+          };
+        } else if (!e?.node.current && e?.node.pending) {
+          node = {
+            ...e?.node.pending,
+            ...responseData.market?.liquiditySLAParameters,
+          };
+        } else {
+          node = {
+            ...e?.node.pending,
+            currentCommitmentAmount: e?.node.current.commitmentAmount,
+            currentFee: e?.node.current.fee,
+            ...responseData.market?.liquiditySLAParameters,
+          };
+        }
+        return node;
+      }) ?? []) as LiquidityProvisionFields[];
  },
 });

@@ -91,7 +112,8 @@ export const matchFilter = (filter: Filter, lp: LiquidityProvisionData) => {
  }
  if (
    filter.active === true &&
-    lp.status !== Schema.LiquidityProvisionStatus.STATUS_ACTIVE
+    lp.status !== Schema.LiquidityProvisionStatus.STATUS_ACTIVE &&
+    lp.status !== Schema.LiquidityProvisionStatus.STATUS_PENDING
  ) {
    return false;
  }
@@ -105,7 +127,7 @@ export const matchFilter = (filter: Filter, lp: LiquidityProvisionData) => {
 };

 export interface LiquidityProvisionData
-  extends Omit<LiquidityProvisionFieldsFragment, '__typename'>,
+  extends Omit<LiquidityProvisionFields, '__typename'>,
    Partial<LiquidityProviderFieldsFragment>,
    Omit<Schema.LiquiditySLAParameters, '__typename'> {
  assetDecimalPlaces?: number;
@@ -113,11 +135,12 @@ export interface LiquidityProvisionData
  averageEntryValuation?: string;
  equityLikeShare?: string;
  earmarkedFees?: number;
+  status: Schema.LiquidityProvisionStatus;
 }

 export const getLiquidityProvision = (
  liquidityProvisions: LiquidityProvisionFields[],
-  liquidityProvider: LiquidityProviderFieldsFragment[],
+  liquidityProviders: LiquidityProviderFieldsFragment[],
  filter?: Filter
 ): LiquidityProvisionData[] => {
  return liquidityProvisions
@@ -136,12 +159,14 @@ export const getLiquidityProvision = (
      }
      return true;
    })
-    .map((lp) => {
-      const lpObj = liquidityProvider.find((f) => lp.party.id === f.partyId);
-      if (!lpObj) return lp;
-      const accounts = compact(lp.party.accountsConnection?.edges).map(
-        (e) => e.node
+    .map((liquidityProvision) => {
+      const liquidityProvider = liquidityProviders.find(
+        (f) => liquidityProvision.party.id === f.partyId
      );
+      if (!liquidityProvider) return liquidityProvision;
+      const accounts = compact(
+        liquidityProvision.party.accountsConnection?.edges
+      ).map((e) => e.node);
      const bondAccounts = accounts?.filter(
        (a) => a?.type === Schema.AccountType.ACCOUNT_TYPE_BOND
      );
@@ -164,8 +189,8 @@ export const getLiquidityProvision = (
          )
          .toNumber() ?? 0;
      return {
-        ...lp,
-        ...lpObj,
+        ...liquidityProvision,
+        ...liquidityProvider,
        balance,
        earmarkedFees,
        __typename: undefined,
@@ -6,7 +6,10 @@ import {
  getDateTimeFormat,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
+import type {
+  TypedDataAgGrid,
+  VegaValueFormatterParams,
+} from '@vegaprotocol/datagrid';
 import { AgGrid } from '@vegaprotocol/datagrid';
 import {
  CopyWithTooltip,
@@ -22,7 +25,7 @@ import type {
  ValueFormatterParams,
 } from 'ag-grid-community';
 import BigNumber from 'bignumber.js';
-import type { LiquidityProvisionStatus } from '@vegaprotocol/types';
+import { LiquidityProvisionStatus } from '@vegaprotocol/types';
 import { LiquidityProvisionStatusMapping } from '@vegaprotocol/types';
 import type { LiquidityProvisionData } from './liquidity-data-provider';

@@ -187,7 +190,32 @@ export const LiquidityTable = ({
            headerTooltip: t(
              'The amount committed to the market by this liquidity provider.'
            ),
-            valueFormatter: assetDecimalsQuantumFormatter,
+            valueFormatter: ({
+              data,
+              value,
+            }: VegaValueFormatterParams<
+              LiquidityProvisionData,
+              'commitmentAmount'
+            >) => {
+              if (!value) return '-';
+              const formattedCommitmentAmount = addDecimalsFormatNumberQuantum(
+                value,
+                assetDecimalPlaces ?? 0,
+                quantum ?? 0
+              );
+              if (
+                data?.currentCommitmentAmount &&
+                data?.currentCommitmentAmount !== value
+              ) {
+                return `${addDecimalsFormatNumberQuantum(
+                  data.currentCommitmentAmount,
+                  assetDecimalPlaces ?? 0,
+                  quantum ?? 0
+                )}/${formattedCommitmentAmount}`;
+              } else {
+                return formattedCommitmentAmount;
+              }
+            },
            tooltipValueGetter: assetDecimalsFormatter,
          },
          {
@@ -207,7 +235,22 @@ export const LiquidityTable = ({
            ),
            field: 'fee',
            type: 'rightAligned',
-            valueFormatter: percentageFormatter,
+            valueFormatter: ({
+              data,
+              value,
+            }: ValueFormatterParams<LiquidityProvisionData, 'fee'>) => {
+              if (!value) return '-';
+              const formattedValue =
+                formatNumberPercentage(new BigNumber(value).times(100), 2) ||
+                '-';
+              if (data?.currentFee && data?.currentFee !== value) {
+                return `${formatNumberPercentage(
+                  new BigNumber(data.currentFee).times(100),
+                  2
+                )}/${formattedValue}`;
+              }
+              return formattedValue;
+            },
          },
          {
            headerName: t('Adjusted stake share'),
@@ -328,8 +371,17 @@ export const LiquidityTable = ({
            headerName: t('Status'),
            headerTooltip: t('The current status of this liquidity provision.'),
            field: 'status',
-            valueFormatter: ({ value }) => {
+            valueFormatter: ({
+              data,
+              value,
+            }: ValueFormatterParams<LiquidityProvisionData, 'status'>) => {
              if (!value) return value;
+              if (
+                data?.status === LiquidityProvisionStatus.STATUS_PENDING &&
+                (data?.currentCommitmentAmount || data?.currentFee)
+              ) {
+                return t('Updating next epoch');
+              }
              return LiquidityProvisionStatusMapping[
                value as LiquidityProvisionStatus
              ];
@@ -3,6 +3,7 @@ import type { Market, MarketMaybeWithDataAndCandles } from './markets-provider';
 import {
  calcTradedFactor,
  filterAndSortMarkets,
+  sumFeesFactors,
  totalFeesFactorsPercentage,
 } from './market-utils';
 const { MarketState, MarketTradingMode } = Schema;
@@ -132,3 +133,15 @@ describe('calcTradedFactor', () => {
    expect(fa > fb).toBeTruthy();
  });
 });
+
+describe('sumFeesFactors', () => {
+  it('does not result in flop errors', () => {
+    expect(
+      sumFeesFactors({
+        makerFee: '0.1',
+        infrastructureFee: '0.2',
+        liquidityFee: '0.3',
+      })
+    ).toEqual(0.6);
+  });
+});
@@ -50,16 +50,19 @@ export const getQuoteName = (market: Partial<Market>) => {
 };

 export const sumFeesFactors = (fees: Market['fees']['factors']) => {
-  return fees
-    ? new BigNumber(fees.makerFee)
-        .plus(fees.liquidityFee)
-        .plus(fees.infrastructureFee)
-    : undefined;
+  if (!fees) return;
+
+  return new BigNumber(fees.makerFee)
+    .plus(fees.liquidityFee)
+    .plus(fees.infrastructureFee)
+    .toNumber();
 };

 export const totalFeesFactorsPercentage = (fees: Market['fees']['factors']) => {
  const total = fees && sumFeesFactors(fees);
-  return total ? formatNumberPercentage(total.times(100)) : undefined;
+  return total
+    ? formatNumberPercentage(new BigNumber(total).times(100))
+    : undefined;
 };

 export const filterAndSortMarkets = (markets: MarketMaybeWithData[]) => {
@@ -166,7 +166,7 @@ export const ordersProvider = makeDataProvider<
  pagination: {
    getPageInfo,
    append,
-    first: 5000,
+    first: 1000,
  },
  resetDelay: 1000,
  additionalContext: { isEnlargedTimeout: true },
@@ -27,6 +27,7 @@ describe('OrderListManager', () => {
      flush: jest.fn(),
      reload: jest.fn(),
      load: jest.fn(),
+      pageInfo: null,
    });
    render(generateJsx());

@@ -45,6 +46,7 @@ describe('OrderListManager', () => {
      flush: jest.fn(),
      reload: jest.fn(),
      load: jest.fn(),
+      pageInfo: null,
    });

    render(generateJsx());
@@ -62,6 +64,7 @@ describe('OrderListManager', () => {
      flush: jest.fn(),
      reload: jest.fn(),
      load: jest.fn(),
+      pageInfo: null,
    });

    render(
@@ -1,7 +1,6 @@
 import { t } from '@vegaprotocol/i18n';
 import { useCallback, useRef, useState, useEffect } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import type { FilterChangedEvent } from 'ag-grid-community';
 import { OrderListTable } from '../order-list';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
@@ -12,7 +11,7 @@ import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/web3';
 import { OrderEditDialog } from '../order-list/order-edit-dialog';
 import type { Order } from '../order-data-provider';
 import { OrderViewDialog } from '../order-list/order-view-dialog';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { Splash, TradingButton as Button } from '@vegaprotocol/ui-toolkit';

 export enum Filter {
  'Open' = 'Open',
@@ -48,33 +47,11 @@ export const OrderListManager = ({
      ? { partyId, filter: { liveOnly: true } }
      : { partyId };

-  const { data, error } = useDataProvider({
+  const { data, error, pageInfo, load } = useDataProvider({
    dataProvider: ordersWithMarketProvider,
    variables,
-    update: ({ data }) => {
-      if (data && gridRef.current?.api) {
-        gridRef.current.api.setRowData(data);
-        return true;
-      }
-      return false;
-    },
  });

-  const onFilterChanged = useCallback(
-    (event: FilterChangedEvent) => {
-      gridProps?.onFilterChanged?.(event);
-      if (event.api) {
-        const isEmpty = event.api.getDisplayedRowCount() === 0;
-        if (isEmpty) {
-          event.api.showNoRowsOverlay();
-        } else {
-          event.api.hideOverlay();
-        }
-      }
-    },
-    [gridProps]
-  );
-
  useEffect(() => {
    if (!data || !data.length) {
      gridRef.current?.api?.showNoRowsOverlay();
@@ -96,6 +73,17 @@ export const OrderListManager = ({
    [create]
  );

+  const [hasDisplayedRow, setHasDisplayedRow] = useState<boolean | undefined>(
+    undefined
+  );
+  const { onFilterChanged, ...props } = gridProps || {};
+  const onRowDataUpdated = useCallback(
+    ({ api }: { api: AgGridReact['api'] }) => {
+      setHasDisplayedRow(!!api.getDisplayedRowCount());
+    },
+    []
+  );
+
  if (error) {
    return <Splash>{t(`Something went wrong: ${error.message}`)}</Splash>;
  }
@@ -103,20 +91,60 @@ export const OrderListManager = ({
  return (
    <>
      <div className="h-full relative">
-        <OrderListTable
-          rowData={data}
-          ref={gridRef}
-          filter={filter}
-          onCancel={cancel}
-          onEdit={setEditOrder}
-          onView={setViewOrder}
-          onMarketClick={onMarketClick}
-          onOrderTypeClick={onOrderTypeClick}
-          isReadOnly={isReadOnly}
-          overlayNoRowsTemplate={noRowsMessage || t('No orders')}
-          {...gridProps}
-          onFilterChanged={onFilterChanged}
-        />
+        <div className="flex flex-col h-full">
+          <OrderListTable
+            rowData={data}
+            ref={gridRef}
+            filter={filter}
+            onCancel={cancel}
+            onEdit={setEditOrder}
+            onView={setViewOrder}
+            onMarketClick={onMarketClick}
+            onOrderTypeClick={onOrderTypeClick}
+            onFilterChanged={(event) => {
+              onRowDataUpdated(event);
+              if (onFilterChanged) {
+                onFilterChanged(event);
+              }
+            }}
+            onRowDataUpdated={onRowDataUpdated}
+            isReadOnly={isReadOnly}
+            overlayNoRowsTemplate={noRowsMessage || t('No orders')}
+            {...props}
+          />
+          <div className="flex justify-between border-t border-default p-1 items-center">
+            <div className="text-xs">
+              {variables.filter?.liveOnly
+                ? null
+                : t(
+                    'Depending on data node retention you may not be able see the "full" history'
+                  )}
+            </div>
+            {data ? (
+              <div className="flex text-xs items-center">
+                {data?.length && !pageInfo?.hasNextPage
+                  ? t('all %s items loaded', [data.length.toString()])
+                  : t('%s items loaded', [
+                      data?.length ? data.length.toString() : ' ',
+                    ])}
+                {pageInfo?.hasNextPage ? (
+                  <Button
+                    size="extra-small"
+                    className="ml-1"
+                    onClick={() => load()}
+                  >
+                    {t('Load more')}
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+            {data?.length && hasDisplayedRow === false ? (
+              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
+                {t('No orders matching selected filters')}
+              </div>
+            ) : null}
+          </div>
+        </div>
      </div>
      {editOrder && (
        <OrderEditDialog
@@ -30,6 +30,7 @@ describe('StopOrdersManager', () => {
      flush: jest.fn(),
      reload: jest.fn(),
      load: jest.fn(),
+      pageInfo: null,
    });
    await act(async () => {
      render(generateJsx());
@@ -4,10 +4,13 @@ import { TradesTable } from './trades-table';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
 import { t } from '@vegaprotocol/i18n';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { useCallback, useState } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';

 interface TradesContainerProps {
  marketId: string;
-  gridProps?: ReturnType<typeof useDataGridEvents>;
+  gridProps: ReturnType<typeof useDataGridEvents>;
 }

 export const TradesManager = ({
@@ -16,19 +19,60 @@ export const TradesManager = ({
 }: TradesContainerProps) => {
  const update = useDealTicketFormValues((state) => state.updateAll);

-  const { data, error } = useDataProvider({
+  const { data, error, load, pageInfo } = useDataProvider({
    dataProvider: tradesWithMarketProvider,
    variables: { marketId },
  });
+  const [hasDisplayedRow, setHasDisplayedRow] = useState<boolean | undefined>(
+    undefined
+  );
+  const { onFilterChanged, ...props } = gridProps || {};
+  const onRowDataUpdated = useCallback(
+    ({ api }: { api: AgGridReact['api'] }) => {
+      setHasDisplayedRow(!!api.getDisplayedRowCount());
+    },
+    []
+  );

  return (
-    <TradesTable
-      rowData={data}
-      onClick={(price?: string) => {
-        update(marketId, { price });
-      }}
-      overlayNoRowsTemplate={error ? error.message : t('No trades')}
-      {...gridProps}
-    />
+    <div className="flex flex-col h-full">
+      <TradesTable
+        rowData={data}
+        onClick={(price?: string) => {
+          update(marketId, { price });
+        }}
+        onFilterChanged={(event) => {
+          onRowDataUpdated(event);
+          onFilterChanged(event);
+        }}
+        onRowDataUpdated={onRowDataUpdated}
+        overlayNoRowsTemplate={error ? error.message : t('No trades')}
+        {...props}
+      />
+      <div className="flex justify-between border-t border-default p-1 items-center">
+        <div className="text-xs">
+          {t(
+            'Depending on data node retention you may not be able see the "full" history'
+          )}
+        </div>
+        <div className="flex text-xs items-center">
+          {data?.length && !pageInfo?.hasNextPage
+            ? t('all %s items loaded', [data.length.toString()])
+            : t('%s items loaded', [
+                data?.length ? data.length.toString() : ' ',
+              ])}
+          {pageInfo?.hasNextPage ? (
+            <Button size="extra-small" className="ml-1" onClick={() => load()}>
+              {t('Load more')}
+            </Button>
+          ) : null}
+        </div>
+        {data?.length && hasDisplayedRow === false ? (
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
+            {t('No trades matching selected filters')}
+          </div>
+        ) : null}
+      </div>
+    </div>
  );
 };
@@ -813,7 +813,7 @@ export type DispatchStrategy = {
  /** Minimum notional time-weighted averaged position required for a party to be considered eligible */
  notionalTimeWeightedAveragePositionRequirement: Scalars['String'];
  /** Ascending order list of start rank and corresponding share ratio */
-  rankTable?: Maybe<RankTable>;
+  rankTable?: Maybe<Array<Maybe<RankTable>>>;
  /** Minimum number of governance tokens, e.g. VEGA, staked for a party to be considered eligible */
  stakingRequirement: Scalars['String'];
  /** The teams in scope for the reward, if the entity is teams */
@@ -3624,6 +3624,8 @@ export type PartyVestingStats = {
  __typename?: 'PartyVestingStats';
  /** Epoch for which the statistics are valid */
  epochSeq: Scalars['Int'];
+  /** The balance of the party, in quantum. */
+  quantumBalance: Scalars['String'];
  /** The reward bonus multiplier */
  rewardBonusMultiplier: Scalars['String'];
 };
@@ -4831,7 +4833,7 @@ export type QueryprotocolUpgradeProposalsArgs = {

 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QueryreferralSetRefereesArgs = {
-  aggregationDays?: InputMaybe<Scalars['Int']>;
+  aggregationEpochs?: InputMaybe<Scalars['Int']>;
  id?: InputMaybe<Scalars['ID']>;
  pagination?: InputMaybe<Pagination>;
  referee?: InputMaybe<Scalars['ID']>;
@@ -5088,6 +5090,8 @@ export type ReferralSetStats = {
  partyId: Scalars['ID'];
  /** Running volume for the set based on the window length of the current referral program. */
  referralSetRunningNotionalTakerVolume: Scalars['String'];
+  /** The referrer's taker volume */
+  referrerTakerVolume: Scalars['String'];
  /** Reward factor applied to the party. */
  rewardFactor: Scalars['String'];
  /** The proportion of the referees taker fees to be rewarded to the referrer. */
@@ -72,7 +72,7 @@ LessThan24HoursIncrease.args = {

 export const LessThan24HoursDecrease = Template.bind({});
 LessThan24HoursDecrease.args = {
-  data: [20, 21, 22, 23, 24, 6, 7, 9, 11, 13, 11, 9],
+  data: [20990000, 20939973, 20980130],
  width: 110,
  height: 30,
 };
@@ -44,14 +44,12 @@ export const SparklineView = ({
    return null;
  }

-  const midValue = (min + max) / 2;
-
  // Market may be less than 24hr old so padd the data array
  // with values that is the mid value (avg of min and max).
  // This will rendera  horizontal line until the real data shifts the line
-  const padCount = data.length < points ? points - data.length : 0;
-  const padArr = new Array(padCount).fill(midValue);
  const trimmedData = data.slice(-points);
+  const padCount = data.length < points ? points - data.length : 0;
+  const padArr = new Array(padCount).fill(trimmedData[0]);

  // Get the last 24 values if data has more than needed
  const lineData: [number, number][] = [...padArr, ...trimmedData].map(
@@ -179,3 +179,33 @@ export const toNumberParts = (
 export const isNumeric = (
  value?: string | number | BigNumber | bigint | null
 ): value is NonNullable<number | string> => /^-?\d*\.?\d+$/.test(String(value));
+
+/**
+ * Format a number greater than 1 million with m for million, b for billion
+ * and t for trillion
+ */
+export const formatNumberRounded = (num: BigNumber) => {
+  let value = '';
+
+  const format = (divisor: string) => {
+    const result = num.dividedBy(divisor);
+    return result.isInteger() ? result.toString() : result.toFixed(1);
+  };
+
+  if (num.isGreaterThan(new BigNumber('1e14'))) {
+    value = '>100t';
+  } else if (num.isGreaterThanOrEqualTo(new BigNumber('1e12'))) {
+    // Trillion
+    value = `${format('1e12')}t`;
+  } else if (num.isGreaterThanOrEqualTo(new BigNumber('1e9'))) {
+    // Billion
+    value = `${format('1e9')}b`;
+  } else if (num.isGreaterThanOrEqualTo(new BigNumber('1e6'))) {
+    // Million
+    value = `${format('1e6')}m`;
+  } else {
+    value = formatNumber(num);
+  }
+
+  return value;
+};
@@ -1,2 +1,4 @@
-[functions]
-  included_files = ["!node_modules/@sentry/cli/sentry-cli"]
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
Author	SHA1	Message	Date
Edd	89f1dffceb	fix(governance): try a longer timeout	2023-10-31 15:47:34 +00:00
Matthew Russell	4c5acdb827	chore: remove unnecessary var	2023-10-31 12:04:39 +00:00
sam-keen	83dbeb6419	fix(4896): ensuring eagerconnect does not block loading of the app	2023-10-31 12:04:08 +00:00
m.ray	6421cf87c6	feat(trading): liquidity provision current and pending on update (#5152 )	2023-10-31 11:24:18 +00:00
Matthew Russell	0ebfab64ff	fix(ui-toolkit): sparkline appearing to go up when the price moved down (#5137 )	2023-10-31 11:20:48 +00:00
Edd	142f08343b	feat(governance): add update benefit tiers table (#5146 )	2023-10-31 10:20:38 +00:00
m.ray	61aa45a9ed	feat(trading): show fees paid across whole market (#5154 )	2023-10-30 18:16:49 -07:00
Bartłomiej GłowniaandMatthew Russell	4c95db5fb3	feat(deal-ticket): calculate fees and discount base on volumeDiscountStats and referralSetStats (#5147 ) Co-authored-by: Matthew Russell <mattrussell36@gmail.com>	2023-10-30 18:13:26 -07:00
ArtandMatthew Russell	3072b7824f	fix(trading): referrer stats tiles (#5143 ) Co-authored-by: Matthew Russell <mattrussell36@gmail.com>	2023-10-30 18:12:59 -07:00
Bartłomiej Głownia	0580e90171	feat(funding-payments): add load more button to the funding payments table (#5150 )	2023-10-30 15:57:43 -07:00
Bartłomiej Głownia	c440abc77d	feat(trading): show full history of orders, fills and trades (#5105 )	2023-10-27 14:21:26 +01:00
Matthew Russell	fbafc726a4	feat(candles-chart): combine overlays and studies into indicators dropdown (#5129 )	2023-10-27 14:21:14 +01:00
Joe Tsang	dd1890d8c6	chore(cypress): fix failing assertions (#5132 )	2023-10-27 14:21:02 +01:00
Matthew Russell	c8e624eaba	chore(trading): update fee factor with discount calculation (#5138 )	2023-10-27 14:20:45 +01:00
				`@@ -0,0 +1 @@`
				`export * from './proposal-update-benefit-tiers-details';`