feat(trading): show fees paid across whole market (#5154)

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

apps/explorer-e2e/src/integration/market.cy.js

@@ -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');

apps/governance-e2e/src/integration/flow/proposal-details.cy.ts

@@ -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');

apps/trading-e2e/src/integration/market-liquidity.cy.ts

@@ -28,9 +28,10 @@ const headers = [
   'Adjusted stake share',
   'Share',
   'Live supplied liquidity',
-  'Live time fraction on book',
+  'Fees accrued this epoch',
+  'Live time on book',
   'Live liquidity quality score (%)',
-  'Last time fraction on the book',
+  'Last time on the book',
   'Last fee penalty',
   'Last bond penalty',
   'Status',

apps/trading/.env

@@ -3,17 +3,16 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
-NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
-NX_VEGA_ENV=TESTNET
-NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
+NX_VEGA_ENV=STAGNET1
+NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
-NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
+NX_VEGA_TOKEN_URL=https://governance.stagnet1.vega.rocks
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
-NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
@@ -26,6 +25,3 @@ NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
-
-NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -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}
     </>

apps/trading/client-pages/referrals/hooks/Referees.graphql

@@ -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

apps/trading/client-pages/referrals/hooks/ReferralSetStats.graphql

@@ -10,6 +10,7 @@ query ReferralSetStats($code: ID!, $epoch: Int) {
         referralSetRunningNotionalTakerVolume
         rewardsMultiplier
         rewardsFactorMultiplier
+        referrerTakerVolume
       }
     }
   }

apps/trading/client-pages/referrals/hooks/__generated__/Referees.ts

@@ -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'
  *   },
  * });
  */

apps/trading/client-pages/referrals/hooks/__generated__/ReferralSetStats.ts

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

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

@@ -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,

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

@@ -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';
@@ -27,25 +27,30 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
 import { t } from '@vegaprotocol/i18n';
+import maxBy from 'lodash/maxBy';
 
 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 />;
@@ -53,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,
@@ -71,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));
@@ -86,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;
 
@@ -102,9 +119,9 @@ export const Statistics = ({
       !isNaN(t.discountFactor) &&
       t.discountFactor === discountFactorValue
   );
-  const nextBenefitTierValue =
-    currentBenefitTierValue &&
-    benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1);
+  const nextBenefitTierValue = currentBenefitTierValue
+    ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1)
+    : maxBy(benefitTiers, (bt) => bt.tier); // max tier number is lowest tier
   const epochsValue =
     !isNaN(currentEpoch) && refereeInfo?.atEpoch
       ? currentEpoch - refereeInfo?.atEpoch
@@ -117,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>
   );
@@ -133,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>
   );
@@ -142,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>
   );
 
@@ -156,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))}
@@ -173,23 +217,16 @@ 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 || '-'}
+      {currentBenefitTierValue?.tier || 'None'}
     </StatTile>
   );
   const discountFactorTile = (
@@ -204,14 +241,24 @@ export const Statistics = ({
     <StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
   );
   const nextTierVolumeTile = (
-    <StatTile title={t('Volume to next tier')}>
+    <StatTile
+      title={t(
+        'Volume to next tier %s',
+        nextBenefitTierValue?.tier ? `(${nextBenefitTierValue.tier})` : ''
+      )}
+    >
       {nextBenefitTierVolumeValue <= 0
         ? '0'
         : compactNumFormat.format(nextBenefitTierVolumeValue)}
     </StatTile>
   );
   const nextTierEpochsTile = (
-    <StatTile title={t('Epochs to next tier')}>
+    <StatTile
+      title={t(
+        'Epochs to next tier %s',
+        nextBenefitTierValue?.tier ? `(${nextBenefitTierValue.tier})` : ''
+      )}
+    >
       {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
     </StatTile>
   );
@@ -255,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 && [
@@ -281,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(

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

@@ -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) => ({

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

@@ -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>

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

@@ -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 && (

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

@@ -5,6 +5,8 @@ import { t } from '@vegaprotocol/i18n';
 import { formatPercentage, getAdjustedFee } from './utils';
 import { MarketCodeCell } from '../../client-pages/markets/market-code-cell';
 import BigNumber from 'bignumber.js';
+import { useNavigateWithMeta } from '../../lib/hooks/use-market-click-handler';
+import { Links } from '../../lib/links';
 
 const feesTableColumnDefs = [
   { field: 'code', cellRenderer: 'MarketCodeCell' },
@@ -51,6 +53,8 @@ export const MarketFees = ({
   referralDiscount: number;
   volumeDiscount: number;
 }) => {
+  const navigateWithMeta = useNavigateWithMeta();
+
   const rows = compact(markets || []).map((m) => {
     const infraFee = new BigNumber(m.fees.factors.infrastructureFee);
     const makerFee = new BigNumber(m.fees.factors.makerFee);
@@ -63,6 +67,7 @@ export const MarketFees = ({
     );
 
     return {
+      id: m.id,
       code: m.tradableInstrument.instrument.code,
       productType: m.tradableInstrument.instrument.product.__typename,
       infraFee: formatPercentage(infraFee.toNumber()),
@@ -80,10 +85,19 @@ export const MarketFees = ({
       <AgGrid
         columnDefs={feesTableColumnDefs}
         rowData={rows}
+        getRowId={({ data }) => data.id}
         defaultColDef={feesTableDefaultColDef}
         domLayout="autoHeight"
         components={components}
         rowHeight={45}
+        rowClass="cursor-pointer"
+        onRowClicked={({ data, event }) => {
+          navigateWithMeta(
+            Links.MARKET(data.id),
+            // @ts-ignore metaKey and ctrlKey exist
+            event.metaKey || event.ctrlKey
+          );
+        }}
       />
     </div>
   );

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

@@ -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);
+  });
+});

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

@@ -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();
 };

apps/trading/components/liquidity-header/liquidity-header.tsx

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

apps/trading/pages/toasts-manager.tsx

@@ -1,5 +1,5 @@
 import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
-import { useUpdateNetworkParametersToasts } from '@vegaprotocol/proposals';
+import { useProposalToasts } from '@vegaprotocol/proposals';
 import { useVegaTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
@@ -7,7 +7,7 @@ import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws';
 import { Links } from '../lib/links';
 
 export const ToastsManager = () => {
-  useUpdateNetworkParametersToasts();
+  useProposalToasts();
   useVegaTransactionToasts();
   useEthereumTransactionToasts();
   useEthereumWithdrawApprovalsToasts();

libs/candles-chart/src/lib/candles-menu.spec.tsx

@@ -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'
     );

libs/candles-chart/src/lib/candles-menu.tsx

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

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -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],

libs/data-provider/src/use-data-provider.ts

@@ -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,

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

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

libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx

@@ -109,7 +109,7 @@ describe('DealTicket', () => {
         variables: {
           partyId: 'pubKey',
           filter: { liveOnly: true },
-          pagination: { first: 5000 },
+          pagination: { first: 1000 },
         },
       },
       result: {

libs/deal-ticket/src/components/discounts.spec.ts

@@ -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);
+  });
+});

libs/deal-ticket/src/components/discounts.ts

@@ -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);
+};

libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.tsx

@@ -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}
       />

libs/deal-ticket/src/hooks/EstimateOrder.graphql

@@ -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
+      }
+    }
+  }
 }

libs/deal-ticket/src/hooks/__generated__/EstimateOrder.ts

@@ -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
+      }
+    }
+  }
 }
     `;
 

libs/deal-ticket/src/hooks/estimate-order.mock.ts

@@ -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',

libs/deal-ticket/src/hooks/use-estimate-fees.spec.tsx

@@ -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');
+  });
 });

libs/deal-ticket/src/hooks/use-estimate-fees.tsx

@@ -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,
+      };
 };

libs/fills/src/lib/Fills.graphql

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

libs/fills/src/lib/__generated__/Fills.ts

@@ -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'
  *   },
  * });
  */

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

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

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

@@ -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,

libs/funding-payments/src/lib/funding-payments-data-provider.ts

@@ -43,7 +43,7 @@ export const fundingPaymentsProvider = makeDataProvider<
   pagination: {
     getPageInfo,
     append,
-    first: 100,
+    first: 1000,
   },
 });
 

libs/funding-payments/src/lib/funding-payments-manager.tsx

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

libs/liquidity/src/lib/MarketLiquidity.graphql

@@ -4,7 +4,7 @@ fragment LiquidityProvisionFields on LiquidityProvision {
   id
   party {
     id
-    accountsConnection(marketId: $marketId, type: ACCOUNT_TYPE_BOND) {
+    accountsConnection(marketId: $marketId) {
       edges {
         node {
           type
@@ -20,12 +20,36 @@ 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) {
-    liquidityProvisionsConnection(live: true) {
+    liquiditySLAParameters {
+      priceRange
+      commitmentMinTimeFraction
+      performanceHysteresisEpochs
+      slaCompetitionFactor
+    }
+    liquidityProvisions(live: true) {
       edges {
         node {
-          ...LiquidityProvisionFields
+          current {
+            ...LiquidityProvisionFields
+          }
+          pending {
+            ...LiquidityProvisionFields
+          }
         }
       }
     }

libs/liquidity/src/lib/MarketsLiquidity.graphql

@@ -1,10 +1,12 @@
 fragment MarketNode on Market {
   id
-  liquidityProvisionsConnection(live: true) {
+  liquidityProvisions(live: true) {
     edges {
       node {
-        commitmentAmount
-        fee
+        current {
+          commitmentAmount
+          fee
+        }
       }
     }
   }

libs/liquidity/src/lib/__generated__/MarketLiquidity.ts

@@ -5,12 +5,19 @@ 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'];
 }>;
 
 
-export type LiquidityProvisionsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __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 } } } | null> | null } | null } | null };
+export type LiquidityProvisionsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', liquiditySLAParameters?: { __typename?: 'LiquiditySLAParameters', priceRange: string, commitmentMinTimeFraction: string, performanceHysteresisEpochs: number, slaCompetitionFactor: string } | null, liquidityProvisions?: { __typename?: 'LiquidityProvisionsWithPendingConnection', edges?: Array<{ __typename?: 'LiquidityProvisionWithPendingEdge', node: { __typename?: 'LiquidityProvisionWithPending', current: { __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 } }, pending?: { __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 } } | null } } | null> | null } | null } | null };
 
 export type LiquidityProviderFeeShareFieldsFragment = { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, averageScore: string, virtualStake: string };
 
@@ -30,7 +37,7 @@ export const LiquidityProvisionFieldsFragmentDoc = gql`
   id
   party {
     id
-    accountsConnection(marketId: $marketId, type: ACCOUNT_TYPE_BOND) {
+    accountsConnection(marketId: $marketId) {
       edges {
         node {
           type
@@ -79,13 +86,66 @@ 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) {
-    liquidityProvisionsConnection(live: true) {
+    liquiditySLAParameters {
+      priceRange
+      commitmentMinTimeFraction
+      performanceHysteresisEpochs
+      slaCompetitionFactor
+    }
+    liquidityProvisions(live: true) {
       edges {
         node {
-          ...LiquidityProvisionFields
+          current {
+            ...LiquidityProvisionFields
+          }
+          pending {
+            ...LiquidityProvisionFields
+          }
         }
       }
     }

libs/liquidity/src/lib/__generated__/MarketsLiquidity.ts

@@ -3,21 +3,23 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type MarketNodeFragment = { __typename?: 'Market', id: string, liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __typename?: 'LiquidityProvision', commitmentAmount: string, fee: string } } | null> | null } | null, data?: { __typename?: 'MarketData', targetStake?: string | null } | null };
+export type MarketNodeFragment = { __typename?: 'Market', id: string, liquidityProvisions?: { __typename?: 'LiquidityProvisionsWithPendingConnection', edges?: Array<{ __typename?: 'LiquidityProvisionWithPendingEdge', node: { __typename?: 'LiquidityProvisionWithPending', current: { __typename?: 'LiquidityProvision', commitmentAmount: string, fee: string } } } | null> | null } | null, data?: { __typename?: 'MarketData', targetStake?: string | null } | null };
 
 export type LiquidityProvisionMarketsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type LiquidityProvisionMarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __typename?: 'LiquidityProvision', commitmentAmount: string, fee: string } } | null> | null } | null, data?: { __typename?: 'MarketData', targetStake?: string | null } | null } }> } | null };
+export type LiquidityProvisionMarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, liquidityProvisions?: { __typename?: 'LiquidityProvisionsWithPendingConnection', edges?: Array<{ __typename?: 'LiquidityProvisionWithPendingEdge', node: { __typename?: 'LiquidityProvisionWithPending', current: { __typename?: 'LiquidityProvision', commitmentAmount: string, fee: string } } } | null> | null } | null, data?: { __typename?: 'MarketData', targetStake?: string | null } | null } }> } | null };
 
 export const MarketNodeFragmentDoc = gql`
     fragment MarketNode on Market {
   id
-  liquidityProvisionsConnection(live: true) {
+  liquidityProvisions(live: true) {
     edges {
       node {
-        commitmentAmount
-        fee
+        current {
+          commitmentAmount
+          fee
+        }
       }
     }
   }

libs/liquidity/src/lib/liquidity-data-provider.spec.tsx

@@ -1,13 +1,12 @@
 import { AccountType } from '@vegaprotocol/types';
+import type { LiquidityProvisionFields } from './liquidity-data-provider';
 import { getLiquidityProvision } from './liquidity-data-provider';
-import type {
-  LiquidityProviderFieldsFragment,
-  LiquidityProvisionFieldsFragment,
-} from './__generated__/MarketLiquidity';
+import type { LiquidityProviderFieldsFragment } from './__generated__/MarketLiquidity';
 
 const input = {
   liquidityProvisions: [
     {
+      id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
       party: {
         id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
         accountsConnection: {
@@ -31,7 +30,11 @@ const input = {
       fee: '0.001',
       status: 'STATUS_ACTIVE',
       __typename: 'LiquidityProvision',
-    } as LiquidityProvisionFieldsFragment,
+      priceRange: '0',
+      commitmentMinTimeFraction: '0.5',
+      performanceHysteresisEpochs: 5678,
+      slaCompetitionFactor: '0',
+    } as unknown as LiquidityProvisionFields,
   ],
   liquidityProviders: [
     {
@@ -49,9 +52,12 @@ const input = {
 const result = [
   {
     __typename: undefined,
-    balance: '1.8003328918633596575e+22',
+    balance: 1.8003328918633597e22,
+    earmarkedFees: 0,
     commitmentAmount: '18003328918633596575000',
     createdAt: '2022-12-16T09:28:29.071781Z',
+    commitmentMinTimeFraction: '0.5',
+    id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
     feeShare: {
       equityLikeShare: '1',
       __typename: 'LiquidityProviderFeeShare',
@@ -59,6 +65,9 @@ const result = [
     },
     fee: '0.001',
     partyId: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
+    performanceHysteresisEpochs: 5678,
+    priceRange: '0',
+    slaCompetitionFactor: '0',
     party: {
       __typename: 'Party',
       accountsConnection: {
@@ -106,7 +115,9 @@ describe('getLiquidityProvision', () => {
       {
         __typename: 'LiquidityProvision',
         commitmentAmount: '18003328918633596575000',
+        commitmentMinTimeFraction: '0.5',
         createdAt: '2022-12-16T09:28:29.071781Z',
+        id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
         fee: '0.001',
         party: {
           __typename: 'Party',
@@ -125,6 +136,9 @@ describe('getLiquidityProvision', () => {
           },
           id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
         },
+        performanceHysteresisEpochs: 5678,
+        priceRange: '0',
+        slaCompetitionFactor: '0',
         status: 'STATUS_ACTIVE',
         updatedAt: '2023-01-04T22:13:27.761985Z',
       },

libs/liquidity/src/lib/liquidity-data-provider.ts

@@ -20,20 +20,24 @@ import type {
   LiquidityProvisionsQueryVariables,
 } from './__generated__/MarketLiquidity';
 
+export type LiquidityProvisionFields = LiquidityProvisionFieldsFragment &
+  Schema.LiquiditySLAParameters;
+
 export const liquidityProvisionsDataProvider = makeDataProvider<
   LiquidityProvisionsQuery,
-  LiquidityProvisionFieldsFragment[],
+  LiquidityProvisionFields[],
   never,
   never,
   LiquidityProvisionsQueryVariables
 >({
   query: LiquidityProvisionsDocument,
   getData: (responseData: LiquidityProvisionsQuery | null) => {
-    return (
-      responseData?.market?.liquidityProvisionsConnection?.edges?.map(
-        (e) => e?.node
-      ) ?? []
-    ).filter((n) => !!n) as LiquidityProvisionFieldsFragment[];
+    return (responseData?.market?.liquidityProvisions?.edges
+      ?.filter((n) => !!n)
+      .map((e) => ({
+        ...e?.node.current,
+        ...responseData.market?.liquiditySLAParameters,
+      })) ?? []) as LiquidityProvisionFields[];
   },
 });
 
@@ -81,10 +85,7 @@ export const lpAggregatedDataProvider = makeDerivedDataProvider<
   }
 );
 
-export const matchFilter = (
-  filter: Filter,
-  lp: LiquidityProvisionFieldsFragment
-) => {
+export const matchFilter = (filter: Filter, lp: LiquidityProvisionData) => {
   if (filter.partyId && lp.party.id !== filter.partyId) {
     return false;
   }
@@ -104,15 +105,18 @@ export const matchFilter = (
 };
 
 export interface LiquidityProvisionData
-  extends Omit<LiquidityProvisionFieldsFragment, '__typename'> {
+  extends Omit<LiquidityProvisionFieldsFragment, '__typename'>,
+    Partial<LiquidityProviderFieldsFragment>,
+    Omit<Schema.LiquiditySLAParameters, '__typename'> {
   assetDecimalPlaces?: number;
-  balance?: string;
+  balance?: number;
   averageEntryValuation?: string;
   equityLikeShare?: string;
+  earmarkedFees?: number;
 }
 
 export const getLiquidityProvision = (
-  liquidityProvisions: LiquidityProvisionFieldsFragment[],
+  liquidityProvisions: LiquidityProvisionFields[],
   liquidityProvider: LiquidityProviderFieldsFragment[],
   filter?: Filter
 ): LiquidityProvisionData[] => {
@@ -141,17 +145,29 @@ export const getLiquidityProvision = (
       const bondAccounts = accounts?.filter(
         (a) => a?.type === Schema.AccountType.ACCOUNT_TYPE_BOND
       );
+      const feeAccounts = accounts?.filter(
+        (a) => a?.type === Schema.AccountType.ACCOUNT_TYPE_LP_LIQUIDITY_FEES
+      );
       const balance =
         bondAccounts
           ?.reduce(
             (acc, a) => acc.plus(new BigNumber(a.balance ?? 0)),
             new BigNumber(0)
           )
-          .toString() || '0';
+          .toNumber() ?? 0;
+
+      const earmarkedFees =
+        feeAccounts
+          ?.reduce(
+            (acc, a) => acc.plus(new BigNumber(a.balance ?? 0)),
+            new BigNumber(0)
+          )
+          .toNumber() ?? 0;
       return {
         ...lp,
         ...lpObj,
         balance,
+        earmarkedFees,
         __typename: undefined,
       };
     });

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

@@ -55,9 +55,10 @@ describe('LiquidityTable', () => {
       'Adjusted stake share',
       'Share',
       'Live supplied liquidity',
-      'Live time fraction on book',
+      'Fees accrued this epoch',
+      'Live time on book',
       'Live liquidity quality score (%)',
-      'Last time fraction on the book',
+      'Last time on the book',
       'Last fee penalty',
       'Last bond penalty',
       'Status',

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

@@ -96,6 +96,58 @@ export const LiquidityTable = ({
       return `${addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0)}`;
     };
 
+    const feesAccruedTooltip = ({ value, data }: ITooltipParams) => {
+      if (!value) return '-';
+      const newValue = new BigNumber(value)
+        .times(Number(stakeToCcyVolume) || 1)
+        .toString();
+      let lessThanFull = false,
+        lessThanMinimum = false;
+      if (data.sla) {
+        lessThanFull =
+          data.sla &&
+          new BigNumber(data.sla.currentEpochFractionOfTimeOnBook).isLessThan(
+            1
+          );
+        lessThanMinimum =
+          data.sla &&
+          new BigNumber(data.sla.currentEpochFractionOfTimeOnBook).isLessThan(
+            data.commitmentMinTimeFraction
+          );
+      }
+      if (lessThanMinimum) {
+        return t(
+          `This LP's time on the book in the current epoch (%s) is less than the minimum required (%s), so they could lose all fee revenue for this epoch.`,
+          [
+            formatNumberPercentage(
+              new BigNumber(data.sla.currentEpochFractionOfTimeOnBook).times(
+                100
+              ),
+              2
+            ),
+            formatNumberPercentage(
+              new BigNumber(data.commitmentMinTimeFraction).times(100),
+              2
+            ),
+          ]
+        );
+      }
+      if (lessThanFull) {
+        return t(
+          `This LP's time on the book in the current epoch (%s) is less than 100%, so they could lose some fees to a better performing LP.`,
+          [
+            formatNumberPercentage(
+              new BigNumber(data.sla.currentEpochFractionOfTimeOnBook).times(
+                100
+              ),
+              2
+            ),
+          ]
+        );
+      }
+      return addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0);
+    };
+
     const stakeToCcyVolumeQuantumFormatter = ({
       value,
     }: ValueFormatterParams) => {
@@ -178,7 +230,7 @@ export const LiquidityTable = ({
         ],
       },
       {
-        headerName: t('Live liquidity details'),
+        headerName: t('Live liquidity data'),
         marryChildren: true,
         children: [
           {
@@ -192,7 +244,41 @@ export const LiquidityTable = ({
             tooltipValueGetter: stakeToCcyVolumeFormatter,
           },
           {
-            headerName: t(`Live time fraction on book`),
+            headerName: t('Fees accrued this epoch'),
+            field: 'earmarkedFees',
+            type: 'rightAligned',
+            headerTooltip: t(
+              `The liquidity fees accrued by each provider, which will be distributed at the end of the epoch after applying any penalties.`
+            ),
+            valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            tooltipValueGetter: feesAccruedTooltip,
+            cellClassRules: {
+              'text-warning': ({ data }: { data: LiquidityProvisionData }) => {
+                if (!data.sla) return false;
+                return (
+                  new BigNumber(
+                    data.sla.currentEpochFractionOfTimeOnBook
+                  ).isLessThan(1) &&
+                  new BigNumber(
+                    data.sla.currentEpochFractionOfTimeOnBook
+                  ).isGreaterThan(data.commitmentMinTimeFraction)
+                );
+              },
+              'text-red-500': ({ data }: { data: LiquidityProvisionData }) => {
+                if (!data.sla) return false;
+                return (
+                  new BigNumber(
+                    data.sla.currentEpochFractionOfTimeOnBook
+                  ).isLessThan(data.commitmentMinTimeFraction) &&
+                  new BigNumber(
+                    data.sla.currentEpochFractionOfTimeOnBook
+                  ).isGreaterThan(0)
+                );
+              },
+            },
+          },
+          {
+            headerName: t(`Live time on book`),
             field: 'sla.currentEpochFractionOfTimeOnBook',
             type: 'rightAligned',
             headerTooltip: t('Current epoch fraction of time on the book.'),
@@ -212,7 +298,7 @@ export const LiquidityTable = ({
         marryChildren: true,
         children: [
           {
-            headerName: t(`Last time fraction on the book`),
+            headerName: t(`Last time on the book`),
             field: 'sla.lastEpochFractionOfTimeOnBook',
             type: 'rightAligned',
             headerTooltip: t('Last epoch fraction of time on the book.'),
@@ -275,7 +361,9 @@ export const LiquidityTable = ({
   return (
     <AgGrid
       overlayNoRowsTemplate={t('No liquidity provisions')}
-      getRowId={({ data }: { data: LiquidityProvisionData }) => data.id || ''}
+      getRowId={({ data }: { data: LiquidityProvisionData }) => {
+        return data.id || '';
+      }}
       tooltipShowDelay={500}
       defaultColDef={defaultColDef}
       {...props}

libs/liquidity/src/lib/liquidity.mock.ts

@@ -12,12 +12,14 @@ export const liquidityProvisionsQuery = (
 ): LiquidityProvisionsQuery => {
   const defaultResult: LiquidityProvisionsQuery = {
     market: {
-      liquidityProvisionsConnection: {
-        __typename: 'LiquidityProvisionsConnection',
+      liquidityProvisions: {
+        __typename: 'LiquidityProvisionsWithPendingConnection',
         edges: liquidityFields.map((node) => {
           return {
-            __typename: 'LiquidityProvisionsEdge',
-            node,
+            __typename: 'LiquidityProvisionWithPendingEdge',
+            node: {
+              current: node,
+            },
           };
         }),
       },

libs/liquidity/src/lib/utils/liquidity-utils.ts

@@ -106,10 +106,9 @@ export const getLiquidityForMarket = (
   markets: LiquidityProvisionMarket[]
 ) => {
   const liquidity =
-    markets.find((m) => m.id === marketId)?.liquidityProvisionsConnection
-      ?.edges || [];
+    markets.find((m) => m.id === marketId)?.liquidityProvisions?.edges || [];
 
-  return liquidity.map((l) => l?.node);
+  return liquidity.map((l) => l?.node.current);
 };
 
 export const getTargetStake = (

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -1001,7 +1001,7 @@ export const LiquiditySLAParametersInfoPanel = ({
 
   const { params: networkParams } = useNetworkParams([
     NetworkParams.market_liquidity_bondPenaltyParameter,
-    NetworkParams.market_liquidity_nonPerformanceBondPenaltySlope,
+    NetworkParams.market_liquidity_sla_nonPerformanceBondPenaltySlope,
     NetworkParams.market_liquidity_sla_nonPerformanceBondPenaltyMax,
     NetworkParams.market_liquidity_maximumLiquidityFeeFactorLevel,
     NetworkParams.market_liquidity_stakeToCcyVolume,
@@ -1017,7 +1017,7 @@ export const LiquiditySLAParametersInfoPanel = ({
     bondPenaltyParameter:
       networkParams['market_liquidity_bondPenaltyParameter'],
     nonPerformanceBondPenaltySlope:
-      networkParams['market_liquidity_nonPerformanceBondPenaltySlope'],
+      networkParams['market_liquidity_sla_nonPerformanceBondPenaltySlope'],
     nonPerformanceBondPenaltyMax:
       networkParams['market_liquidity_sla_nonPerformanceBondPenaltyMax'],
     maxLiquidityFeeFactorLevel:

libs/markets/src/lib/market-utils.spec.tsx

@@ -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);
+  });
+});

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

@@ -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[]) => {

libs/network-parameters/src/use-network-params.ts

@@ -159,8 +159,8 @@ export const NetworkParams = {
     'market_liquidity_targetstake_triggering_ratio',
   market_liquidity_bondPenaltyParameter:
     'market_liquidity_bondPenaltyParameter',
-  market_liquidity_nonPerformanceBondPenaltySlope:
-    'market_liquidity_nonPerformanceBondPenaltySlope',
+  market_liquidity_sla_nonPerformanceBondPenaltySlope:
+    'market_liquidity_sla_nonPerformanceBondPenaltySlope',
   market_liquidity_sla_nonPerformanceBondPenaltyMax:
     'market_liquidity_sla_nonPerformanceBondPenaltyMax',
   market_liquidity_maximumLiquidityFeeFactorLevel:

libs/orders/src/lib/components/order-data-provider/order-data-provider.ts

@@ -166,7 +166,7 @@ export const ordersProvider = makeDataProvider<
   pagination: {
     getPageInfo,
     append,
-    first: 5000,
+    first: 1000,
   },
   resetDelay: 1000,
   additionalContext: { isEnlargedTimeout: true },

libs/orders/src/lib/components/order-list-manager/order-list-manager.spec.tsx

@@ -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(

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -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

libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.spec.tsx

@@ -30,6 +30,7 @@ describe('StopOrdersManager', () => {
       flush: jest.fn(),
       reload: jest.fn(),
       load: jest.fn(),
+      pageInfo: null,
     });
     await act(async () => {
       render(generateJsx());

libs/proposals/src/lib/proposals-hooks/Proposal.graphql

@@ -12,10 +12,15 @@ subscription ProposalEvent($partyId: ID!) {
   }
 }
 
-fragment UpdateNetworkParameterProposal on Proposal {
+fragment OnProposalFragment on Proposal {
   id
   state
   datetime
+  rationale {
+    title
+    description
+  }
+  rejectionReason
   terms {
     enactmentDatetime
     change {
@@ -26,9 +31,9 @@ fragment UpdateNetworkParameterProposal on Proposal {
   }
 }
 
-subscription OnUpdateNetworkParameters {
+subscription OnProposal {
   proposals {
-    ...UpdateNetworkParameterProposal
+    ...OnProposalFragment
   }
 }
 

libs/proposals/src/lib/proposals-hooks/__generated__/Proposal.ts

@@ -13,12 +13,12 @@ export type ProposalEventSubscriptionVariables = Types.Exact<{
 
 export type ProposalEventSubscription = { __typename?: 'Subscription', proposals: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null } };
 
-export type UpdateNetworkParameterProposalFragment = { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
+export type OnProposalFragmentFragment = { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
 
-export type OnUpdateNetworkParametersSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
+export type OnProposalSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type OnUpdateNetworkParametersSubscription = { __typename?: 'Subscription', proposals: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } } };
+export type OnProposalSubscription = { __typename?: 'Subscription', proposals: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } } };
 
 export type ProposalOfMarketQueryVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
@@ -64,11 +64,16 @@ export const ProposalEventFieldsFragmentDoc = gql`
   errorDetails
 }
     `;
-export const UpdateNetworkParameterProposalFragmentDoc = gql`
-    fragment UpdateNetworkParameterProposal on Proposal {
+export const OnProposalFragmentFragmentDoc = gql`
+    fragment OnProposalFragment on Proposal {
   id
   state
   datetime
+  rationale {
+    title
+    description
+  }
+  rejectionReason
   terms {
     enactmentDatetime
     change {
@@ -109,35 +114,35 @@ export function useProposalEventSubscription(baseOptions: Apollo.SubscriptionHoo
       }
 export type ProposalEventSubscriptionHookResult = ReturnType<typeof useProposalEventSubscription>;
 export type ProposalEventSubscriptionResult = Apollo.SubscriptionResult<ProposalEventSubscription>;
-export const OnUpdateNetworkParametersDocument = gql`
-    subscription OnUpdateNetworkParameters {
+export const OnProposalDocument = gql`
+    subscription OnProposal {
   proposals {
-    ...UpdateNetworkParameterProposal
+    ...OnProposalFragment
   }
 }
-    ${UpdateNetworkParameterProposalFragmentDoc}`;
+    ${OnProposalFragmentFragmentDoc}`;
 
 /**
- * __useOnUpdateNetworkParametersSubscription__
+ * __useOnProposalSubscription__
  *
- * To run a query within a React component, call `useOnUpdateNetworkParametersSubscription` and pass it any options that fit your needs.
- * When your component renders, `useOnUpdateNetworkParametersSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * To run a query within a React component, call `useOnProposalSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useOnProposalSubscription` 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 subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
  *
  * @example
- * const { data, loading, error } = useOnUpdateNetworkParametersSubscription({
+ * const { data, loading, error } = useOnProposalSubscription({
  *   variables: {
  *   },
  * });
  */
-export function useOnUpdateNetworkParametersSubscription(baseOptions?: Apollo.SubscriptionHookOptions<OnUpdateNetworkParametersSubscription, OnUpdateNetworkParametersSubscriptionVariables>) {
+export function useOnProposalSubscription(baseOptions?: Apollo.SubscriptionHookOptions<OnProposalSubscription, OnProposalSubscriptionVariables>) {
         const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useSubscription<OnUpdateNetworkParametersSubscription, OnUpdateNetworkParametersSubscriptionVariables>(OnUpdateNetworkParametersDocument, options);
+        return Apollo.useSubscription<OnProposalSubscription, OnProposalSubscriptionVariables>(OnProposalDocument, options);
       }
-export type OnUpdateNetworkParametersSubscriptionHookResult = ReturnType<typeof useOnUpdateNetworkParametersSubscription>;
-export type OnUpdateNetworkParametersSubscriptionResult = Apollo.SubscriptionResult<OnUpdateNetworkParametersSubscription>;
+export type OnProposalSubscriptionHookResult = ReturnType<typeof useOnProposalSubscription>;
+export type OnProposalSubscriptionResult = Apollo.SubscriptionResult<OnProposalSubscription>;
 export const ProposalOfMarketDocument = gql`
     query ProposalOfMarket($marketId: ID!) {
   proposal(id: $marketId) {

libs/proposals/src/lib/proposals-hooks/index.ts

@@ -3,7 +3,7 @@ export * from './use-proposal-event';
 export * from './use-vega-transaction';
 export * from './use-proposal-submit';
 export * from './use-update-proposal';
-export * from './use-update-network-paramaters-toasts';
+export * from './use-proposal-toasts';
 export * from './use-successor-market-proposal-details';
 export * from './use-new-transfer-proposal-details';
 export * from './use-cancel-transfer-proposal-details';

libs/proposals/src/lib/proposals-hooks/use-proposal-toasts.spec.tsx

@@ -0,0 +1,273 @@
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import type { ProposalRejectionReason } from '@vegaprotocol/types';
+import {
+  ProposalChangeMapping,
+  ProposalState,
+  ProposalStateMapping,
+} from '@vegaprotocol/types';
+import type { ReactNode } from 'react';
+import {
+  PROPOSAL_STATES_TO_TOAST,
+  ProposalToastContent,
+  useProposalToasts,
+} from './use-proposal-toasts';
+import { useToasts } from '@vegaprotocol/ui-toolkit';
+import { waitFor, renderHook, render } from '@testing-library/react';
+import {
+  OnProposalDocument,
+  type OnProposalFragmentFragment,
+  type OnProposalSubscription,
+} from './__generated__/Proposal';
+import sample from 'lodash/sample';
+
+const renderUseProposalToasts = (mocks?: MockedResponse[]) => {
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <MockedProvider mocks={mocks}>{children}</MockedProvider>
+  );
+  return renderHook(() => useProposalToasts(), { wrapper });
+};
+
+type ProposalChange = OnProposalFragmentFragment['terms']['change'];
+
+const NEW_MARKET_CHANGE: ProposalChange = { __typename: 'NewMarket' };
+const UPDATE_MARKET_CHANGE: ProposalChange = { __typename: 'UpdateMarket' };
+const UPDATE_NETWORK_PARAMETER_CHANGE: ProposalChange = {
+  __typename: 'UpdateNetworkParameter',
+  networkParameter: {
+    __typename: 'NetworkParameter',
+    key: 'abc.def',
+    value: '123',
+  },
+};
+const NEW_ASSET_CHANGE: ProposalChange = { __typename: 'NewAsset' };
+const UPDATE_ASSET_CHANGE: ProposalChange = { __typename: 'UpdateAsset' };
+const NEW_FREEFORM_CHANGE: ProposalChange = { __typename: 'NewFreeform' };
+const NEW_TRANSFER_CHANGE: ProposalChange = { __typename: 'NewTransfer' };
+const CANCEL_TRANSFER_CHANGE: ProposalChange = { __typename: 'CancelTransfer' };
+const UPDATE_MARKET_STATE_CHANGE: ProposalChange = {
+  __typename: 'UpdateMarketState',
+};
+const NEW_SPOT_MARKET_CHANGE: ProposalChange = { __typename: 'NewSpotMarket' };
+const UPDATE_SPOT_MARKET_CHANGE: ProposalChange = {
+  __typename: 'UpdateSpotMarket',
+};
+const UPDATE_VOLUME_DISCOUNT_PROGRAM_CHANGE: ProposalChange = {
+  __typename: 'UpdateVolumeDiscountProgram',
+};
+const UPDATE_REFERRAL_PROGRAM_CHANGE: ProposalChange = {
+  __typename: 'UpdateReferralProgram',
+};
+
+const GenericToastProposals = [
+  NEW_MARKET_CHANGE,
+  UPDATE_MARKET_CHANGE,
+  NEW_ASSET_CHANGE,
+  UPDATE_ASSET_CHANGE,
+  NEW_FREEFORM_CHANGE,
+  NEW_TRANSFER_CHANGE,
+  CANCEL_TRANSFER_CHANGE,
+  UPDATE_MARKET_STATE_CHANGE,
+  NEW_SPOT_MARKET_CHANGE,
+  UPDATE_SPOT_MARKET_CHANGE,
+  UPDATE_VOLUME_DISCOUNT_PROGRAM_CHANGE,
+  UPDATE_REFERRAL_PROGRAM_CHANGE,
+];
+
+const generateProposal = (
+  title: string,
+  state: ProposalState = ProposalState.STATE_OPEN,
+  change: ProposalChange = { __typename: undefined },
+  rejectionReason: ProposalRejectionReason | null = null
+): OnProposalFragmentFragment => ({
+  __typename: 'Proposal',
+  id: Math.random().toString(),
+  datetime: Math.random().toString(),
+  rationale: {
+    title,
+    description: '',
+  },
+  rejectionReason,
+  state,
+  terms: {
+    __typename: 'ProposalTerms',
+    enactmentDatetime: '2022-12-09T14:40:38Z',
+    change,
+  },
+});
+
+const INITIAL = useToasts.getState();
+
+const clear = () => {
+  useToasts.setState(INITIAL);
+};
+
+describe('useProposalToasts', () => {
+  beforeEach(clear);
+  afterAll(clear);
+
+  it.each(PROPOSAL_STATES_TO_TOAST)(
+    'renders toast for %s proposal',
+    async (state) => {
+      const mockProposal: MockedResponse<OnProposalSubscription> = {
+        request: {
+          query: OnProposalDocument,
+        },
+        result: {
+          data: {
+            proposals: generateProposal(
+              'Things to change',
+              state,
+              NEW_MARKET_CHANGE
+            ),
+          },
+        },
+      };
+      const { result } = renderUseProposalToasts([mockProposal]);
+      expect(result.current.loading).toBe(true);
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+        expect(useToasts.getState().count).toBe(1);
+      });
+    }
+  );
+
+  const IGNORE_STATES = Object.keys(ProposalState).filter((state) => {
+    return !PROPOSAL_STATES_TO_TOAST.includes(state as ProposalState);
+  }) as ProposalState[];
+  it.each(IGNORE_STATES)(
+    'does not render toast for %s proposal',
+    async (state) => {
+      const mockFailedProposal: MockedResponse<OnProposalSubscription> = {
+        request: {
+          query: OnProposalDocument,
+        },
+        result: {
+          data: {
+            proposals: generateProposal('Things to change but ignored', state),
+          },
+        },
+      };
+      const { result } = renderUseProposalToasts([mockFailedProposal]);
+      expect(result.current.loading).toBe(true);
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+        expect(useToasts.getState().count).toBe(0);
+      });
+    }
+  );
+
+  it('does not render toast for empty proposal', async () => {
+    const error = console.error;
+    console.error = () => {
+      /* no op */
+    };
+    const mockEmptyProposal: MockedResponse<OnProposalSubscription> = {
+      request: {
+        query: OnProposalDocument,
+      },
+      result: {
+        data: {
+          proposals: undefined as unknown as OnProposalFragmentFragment,
+        },
+      },
+    };
+
+    const { result } = renderUseProposalToasts([mockEmptyProposal]);
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(useToasts.getState().count).toBe(0);
+    });
+    console.error = error;
+  });
+
+  const allTypes: [
+    ProposalChange['__typename'],
+    ProposalChange,
+    ProposalState?
+  ][] = [...GenericToastProposals, UPDATE_NETWORK_PARAMETER_CHANGE].map(
+    (ch) => [ch.__typename, ch, sample(PROPOSAL_STATES_TO_TOAST)]
+  );
+  it.each(allTypes)(
+    'renders toast for %s proposal',
+    async (_, change, state) => {
+      const proposalData = generateProposal('Things to change', state, change);
+      const mockProposal: MockedResponse<OnProposalSubscription> = {
+        request: {
+          query: OnProposalDocument,
+        },
+        result: {
+          data: {
+            proposals: proposalData,
+          },
+        },
+      };
+      const { result } = renderUseProposalToasts([mockProposal]);
+      expect(result.current.loading).toBe(true);
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+        expect(useToasts.getState().count).toBe(1);
+      });
+    }
+  );
+});
+
+describe('ProposalToastContent', () => {
+  const genericTypes: [
+    ProposalChange['__typename'],
+    ProposalChange,
+    ProposalState?
+  ][] = GenericToastProposals.map((ch) => [
+    ch.__typename,
+    ch,
+    sample(PROPOSAL_STATES_TO_TOAST),
+  ]);
+  it.each(genericTypes)(
+    'renders generic toast content for %s',
+    async (_, change, state) => {
+      const proposalData = generateProposal('Things to change', state, change);
+      const { container } = render(
+        <ProposalToastContent proposal={proposalData} />
+      );
+      const title = container.querySelector(
+        '[data-testid="proposal-toast-title"]'
+      );
+      const rationale = container.querySelector(
+        '[data-testid="proposal-toast-rationale-title"]'
+      );
+      const expectedChangeName = change.__typename
+        ? ProposalChangeMapping[change.__typename]
+        : '';
+      const expectedState =
+        ProposalStateMapping[proposalData.state].toLocaleLowerCase();
+      expect(title).toHaveTextContent(
+        `${expectedChangeName} proposal ${expectedState}`
+      );
+      expect(rationale).toHaveTextContent('Things to change');
+    }
+  );
+
+  it('renders specific content for UpdateNetworkParameter proposal', () => {
+    const proposalData = generateProposal(
+      'Things to change',
+      ProposalState.STATE_OPEN,
+      UPDATE_NETWORK_PARAMETER_CHANGE
+    );
+    const { container } = render(
+      <ProposalToastContent proposal={proposalData} />
+    );
+    const title = container.querySelector(
+      '[data-testid="proposal-toast-title"]'
+    );
+    const rationale = container.querySelector(
+      '[data-testid="proposal-toast-rationale-title"]'
+    );
+    const param = container.querySelector(
+      '[data-testid="proposal-toast-network-param"]'
+    );
+    expect(title).toHaveTextContent('Update network parameter proposal open');
+    expect(rationale).toBe(null);
+    expect(param).toHaveTextContent('Update abc.def to 123');
+  });
+});

libs/proposals/src/lib/proposals-hooks/use-proposal-toasts.tsx

@@ -0,0 +1,136 @@
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import {
+  ProposalChangeMapping,
+  ProposalRejectionReasonMapping,
+  ProposalStateMapping,
+} from '@vegaprotocol/types';
+import { ProposalState } from '@vegaprotocol/types';
+import type { Toast } from '@vegaprotocol/ui-toolkit';
+import { ToastHeading } from '@vegaprotocol/ui-toolkit';
+import { useToasts } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink, Intent } from '@vegaprotocol/ui-toolkit';
+import { useCallback } from 'react';
+import {
+  useOnProposalSubscription,
+  type OnProposalFragmentFragment,
+} from './__generated__/Proposal';
+
+export const PROPOSAL_STATES_TO_TOAST = [
+  ProposalState.STATE_DECLINED,
+  ProposalState.STATE_ENACTED,
+  ProposalState.STATE_OPEN,
+  ProposalState.STATE_PASSED,
+];
+const CLOSE_AFTER = 0;
+type Proposal = OnProposalFragmentFragment;
+
+const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
+  const change = proposal.terms.change;
+  switch (change.__typename) {
+    case 'UpdateNetworkParameter':
+      return <UpdateNetworkParameterDetails proposal={proposal} />;
+    default:
+      // generic details: rationale title and rejection reason if rejected
+      return (
+        <>
+          {proposal.rationale.title ? (
+            <p data-testid="proposal-toast-rationale-title" className="italic">
+              {proposal.rationale.title}
+            </p>
+          ) : null}
+          {proposal.state === ProposalState.STATE_REJECTED &&
+          proposal.rejectionReason ? (
+            <p data-testid="proposal-toast-rejection-reason">
+              {t('Rejection reason:')}{' '}
+              {ProposalRejectionReasonMapping[proposal.rejectionReason]}
+            </p>
+          ) : null}
+        </>
+      );
+  }
+};
+
+const UpdateNetworkParameterDetails = ({
+  proposal,
+}: {
+  proposal: Proposal;
+}) => {
+  const change = proposal.terms.change;
+  if (change.__typename !== 'UpdateNetworkParameter') return null;
+  return (
+    <p data-testid="proposal-toast-network-param" className="italic">
+      '{t('Update ')}
+      <span className="break-all">{change.networkParameter.key}</span>
+      {t(' to ')}
+      <span>{change.networkParameter.value}</span>'
+    </p>
+  );
+};
+
+export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
+  const tokenLink = useLinks(DApp.Governance);
+  const change = proposal.terms.change;
+
+  // Generates toast's title,
+  // e.g. Update market proposal enacted, New transfer proposal open, ...
+  const title = t('%s proposal %s', [
+    change.__typename ? ProposalChangeMapping[change.__typename] : 'Unknown',
+    ProposalStateMapping[proposal.state].toLowerCase(),
+  ]);
+
+  const enactment = Date.parse(proposal.terms.enactmentDatetime);
+
+  return (
+    <div>
+      <ToastHeading data-testid="proposal-toast-title">{title}</ToastHeading>
+      <ProposalDetails proposal={proposal} />
+      {!isNaN(enactment) && (
+        <p>
+          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
+        </p>
+      )}
+      <p>
+        <ExternalLink
+          href={tokenLink(TOKEN_PROPOSAL).replace(':id', proposal?.id || '')}
+        >
+          {t('View proposal details')}
+        </ExternalLink>
+      </p>
+    </div>
+  );
+};
+
+export const useProposalToasts = () => {
+  const { setToast, remove } = useToasts((store) => ({
+    setToast: store.setToast,
+    remove: store.remove,
+  }));
+
+  const fromProposal = useCallback(
+    (proposal: Proposal): Toast => {
+      const id = `proposal-toast-${proposal.id}`;
+      return {
+        id,
+        intent: Intent.Warning,
+        content: <ProposalToastContent proposal={proposal} />,
+        onClose: () => {
+          remove(id);
+        },
+        closeAfter: CLOSE_AFTER,
+      };
+    },
+    [remove]
+  );
+
+  return useOnProposalSubscription({
+    onData: ({ data }) => {
+      const proposal = data.data?.proposals;
+      if (!proposal || !proposal.terms.change.__typename) return;
+      if (PROPOSAL_STATES_TO_TOAST.includes(proposal.state)) {
+        setToast(fromProposal(proposal));
+      }
+    },
+  });
+};

libs/proposals/src/lib/proposals-hooks/use-update-network-paramaters-toasts.tsx

@@ -1,96 +0,0 @@
-import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
-import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import type { UpdateNetworkParameter } from '@vegaprotocol/types';
-import { ProposalStateMapping } from '@vegaprotocol/types';
-import { ProposalState } from '@vegaprotocol/types';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { ToastHeading } from '@vegaprotocol/ui-toolkit';
-import { useToasts } from '@vegaprotocol/ui-toolkit';
-import { ExternalLink, Intent } from '@vegaprotocol/ui-toolkit';
-import { useCallback } from 'react';
-import type { UpdateNetworkParameterProposalFragment } from './__generated__/Proposal';
-import { useOnUpdateNetworkParametersSubscription } from './__generated__/Proposal';
-
-export const PROPOSAL_STATES_TO_TOAST = [
-  ProposalState.STATE_DECLINED,
-  ProposalState.STATE_ENACTED,
-  ProposalState.STATE_OPEN,
-  ProposalState.STATE_PASSED,
-];
-const CLOSE_AFTER = 0;
-type Proposal = UpdateNetworkParameterProposalFragment;
-
-const UpdateNetworkParameterToastContent = ({
-  proposal,
-}: {
-  proposal: Proposal;
-}) => {
-  const tokenLink = useLinks(DApp.Governance);
-  const change = proposal.terms.change as UpdateNetworkParameter;
-  const title = t('Network change proposal %s').replace(
-    '%s',
-    ProposalStateMapping[proposal.state].toLowerCase()
-  );
-  const enactment = Date.parse(proposal.terms.enactmentDatetime);
-  return (
-    <div>
-      <ToastHeading>{title}</ToastHeading>
-      <p className="italic">
-        '{t('Update ')}
-        <span className="break-all">{change.networkParameter.key}</span>
-        {t(' to ')}
-        <span>{change.networkParameter.value}</span>'
-      </p>
-      {!isNaN(enactment) && (
-        <p>
-          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
-        </p>
-      )}
-      <p>
-        <ExternalLink
-          href={tokenLink(TOKEN_PROPOSAL).replace(':id', proposal?.id || '')}
-        >
-          {t('View proposal details')}
-        </ExternalLink>
-      </p>
-    </div>
-  );
-};
-
-export const useUpdateNetworkParametersToasts = () => {
-  const { setToast, remove } = useToasts((store) => ({
-    setToast: store.setToast,
-    remove: store.remove,
-  }));
-
-  const fromProposal = useCallback(
-    (proposal: Proposal): Toast => {
-      const id = `update-network-param-proposal-${proposal.id}`;
-      return {
-        id: `update-network-param-proposal-${proposal.id}`,
-        intent: Intent.Warning,
-        content: <UpdateNetworkParameterToastContent proposal={proposal} />,
-        onClose: () => {
-          remove(id);
-        },
-        closeAfter: CLOSE_AFTER,
-      };
-    },
-    [remove]
-  );
-
-  return useOnUpdateNetworkParametersSubscription({
-    onData: ({ data }) => {
-      // note proposals is poorly named, it is actually a single proposal
-      const proposal = data.data?.proposals;
-      if (!proposal) return;
-      if (proposal.terms.change.__typename !== 'UpdateNetworkParameter') return;
-
-      // if one of the following states show a toast
-      if (PROPOSAL_STATES_TO_TOAST.includes(proposal.state)) {
-        setToast(fromProposal(proposal));
-      }
-    },
-  });
-};

libs/proposals/src/lib/proposals-hooks/use-update-network-parameters-toasts.spec.tsx

@@ -1,168 +0,0 @@
-import merge from 'lodash/merge';
-import type { MockedResponse } from '@apollo/client/testing';
-import { MockedProvider } from '@apollo/client/testing';
-import { ProposalState } from '@vegaprotocol/types';
-import type { ReactNode } from 'react';
-import {
-  PROPOSAL_STATES_TO_TOAST,
-  useUpdateNetworkParametersToasts,
-} from './use-update-network-paramaters-toasts';
-import type {
-  UpdateNetworkParameterProposalFragment,
-  OnUpdateNetworkParametersSubscription,
-} from './__generated__/Proposal';
-import { OnUpdateNetworkParametersDocument } from './__generated__/Proposal';
-import { useToasts } from '@vegaprotocol/ui-toolkit';
-import { waitFor, renderHook } from '@testing-library/react';
-
-const render = (mocks?: MockedResponse[]) => {
-  const wrapper = ({ children }: { children: ReactNode }) => (
-    <MockedProvider mocks={mocks}>{children}</MockedProvider>
-  );
-  return renderHook(() => useUpdateNetworkParametersToasts(), { wrapper });
-};
-
-const generateUpdateNetworkParametersProposal = (
-  key: string,
-  value: string,
-  state: ProposalState = ProposalState.STATE_OPEN
-): UpdateNetworkParameterProposalFragment => ({
-  __typename: 'Proposal',
-  id: Math.random().toString(),
-  datetime: Math.random().toString(),
-  state,
-  terms: {
-    __typename: 'ProposalTerms',
-    enactmentDatetime: '2022-12-09T14:40:38Z',
-    change: {
-      __typename: 'UpdateNetworkParameter',
-      networkParameter: {
-        __typename: 'NetworkParameter',
-        key,
-        value,
-      },
-    },
-  },
-});
-
-const INITIAL = useToasts.getState();
-
-const clear = () => {
-  useToasts.setState(INITIAL);
-};
-
-describe('useUpdateNetworkParametersToasts', () => {
-  beforeEach(clear);
-  afterAll(clear);
-
-  it.each(PROPOSAL_STATES_TO_TOAST)(
-    'toasts for %s network param proposals',
-    async (state) => {
-      const mockOpenProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
-        {
-          request: {
-            query: OnUpdateNetworkParametersDocument,
-          },
-          result: {
-            data: {
-              proposals: generateUpdateNetworkParametersProposal(
-                'abc.def',
-                '123.456',
-                state
-              ),
-            },
-          },
-        };
-      const { result } = render([mockOpenProposal]);
-      expect(result.current.loading).toBe(true);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-        expect(useToasts.getState().count).toBe(1);
-      });
-    }
-  );
-
-  const IGNORE_STATES = Object.keys(ProposalState).filter((state) => {
-    return !PROPOSAL_STATES_TO_TOAST.includes(state as ProposalState);
-  }) as ProposalState[];
-  it.each(IGNORE_STATES)('does not toast for %s proposals', async (state) => {
-    const mockFailedProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
-      {
-        request: {
-          query: OnUpdateNetworkParametersDocument,
-        },
-        result: {
-          data: {
-            proposals: generateUpdateNetworkParametersProposal(
-              'abc.def',
-              '123.456',
-              state
-            ),
-          },
-        },
-      };
-    const { result } = render([mockFailedProposal]);
-    expect(result.current.loading).toBe(true);
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(useToasts.getState().count).toBe(0);
-    });
-  });
-
-  it('does not return toast for empty propsal', async () => {
-    const error = console.error;
-    console.error = () => {
-      /* no op */
-    };
-    const mockEmptyProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
-      {
-        request: {
-          query: OnUpdateNetworkParametersDocument,
-        },
-        result: {
-          data: {
-            proposals:
-              undefined as unknown as UpdateNetworkParameterProposalFragment,
-          },
-        },
-      };
-
-    const { result } = render([mockEmptyProposal]);
-    expect(result.current.loading).toBe(true);
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(useToasts.getState().count).toBe(0);
-    });
-    console.error = error;
-  });
-
-  it('does not return toast for wrong proposal type', async () => {
-    const wrongProposalType = merge(
-      generateUpdateNetworkParametersProposal('a', 'b'),
-      {
-        terms: {
-          change: {
-            __typename: 'NewMarket',
-          },
-        },
-      }
-    );
-    const mockWrongProposalType: MockedResponse<OnUpdateNetworkParametersSubscription> =
-      {
-        request: {
-          query: OnUpdateNetworkParametersDocument,
-        },
-        result: {
-          data: {
-            proposals: wrongProposalType,
-          },
-        },
-      };
-    const { result } = render([mockWrongProposalType]);
-    expect(result.current.loading).toBe(true);
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(useToasts.getState().count).toBe(0);
-    });
-  });
-});

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

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

libs/types/src/__generated__/types.ts

@@ -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 */
@@ -3387,6 +3387,8 @@ export type Party = {
   transfersConnection?: Maybe<TransferConnection>;
   /** The current reward vesting summary of the party for the last epoch */
   vestingBalancesSummary: PartyVestingBalancesSummary;
+  /** The current statistics about a party's vesting rewards for the last epoch */
+  vestingStats?: Maybe<PartyVestingStats>;
   /** All votes on proposals in the Vega network by the given party */
   votesConnection?: Maybe<ProposalVoteConnection>;
   /** The list of all withdrawals initiated by the party */
@@ -3502,6 +3504,7 @@ export type PartytradesConnectionArgs = {
 /** Represents a party on Vega, could be an ethereum wallet address in the future */
 export type PartytransfersConnectionArgs = {
   direction?: InputMaybe<TransferDirection>;
+  isReward?: InputMaybe<Scalars['Boolean']>;
   pagination?: InputMaybe<Pagination>;
 };
 
@@ -3616,6 +3619,17 @@ export type PartyVestingBalancesSummary = {
   vestingBalances?: Maybe<Array<PartyVestingBalance>>;
 };
 
+/** Statistics about a party's vesting rewards */
+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'];
+};
+
 /** Create an order linked to an index rather than a price */
 export type PeggedOrder = {
   __typename?: 'PeggedOrder';
@@ -4819,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']>;
@@ -4905,6 +4919,7 @@ export type QuerytransferArgs = {
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QuerytransfersConnectionArgs = {
   direction?: InputMaybe<TransferDirection>;
+  isReward?: InputMaybe<Scalars['Boolean']>;
   pagination?: InputMaybe<Pagination>;
   partyId?: InputMaybe<Scalars['ID']>;
 };
@@ -5075,12 +5090,16 @@ 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. */
   rewardsFactorMultiplier: Scalars['String'];
   /** The multiplier applied to the referral reward factor when calculating referral rewards due to the referrer. */
   rewardsMultiplier: Scalars['String'];
+  /** Indicates if the referral set was eligible to be part of the referral program. */
+  wasEligible: Scalars['Boolean'];
 };
 
 /** Connection type for retrieving cursor-based paginated referral set statistics information */
@@ -6102,11 +6121,31 @@ export enum TransferDirection {
 export type TransferEdge = {
   __typename?: 'TransferEdge';
   cursor: Scalars['String'];
-  node: Transfer;
+  node: TransferNode;
+};
+
+/** A transfer fee record */
+export type TransferFee = {
+  __typename?: 'TransferFee';
+  /** The fee amount */
+  amount: Scalars['String'];
+  /** The epoch when this fee was paid */
+  epoch: Scalars['Int'];
+  /** Transfer ID of the transfer for which the fee was paid */
+  transferId: Scalars['ID'];
 };
 
 export type TransferKind = OneOffGovernanceTransfer | OneOffTransfer | RecurringGovernanceTransfer | RecurringTransfer;
 
+/** A transfer record with the fee payments associated with the transfer */
+export type TransferNode = {
+  __typename?: 'TransferNode';
+  /** The list of fee payments made */
+  fees?: Maybe<Array<Maybe<TransferFee>>>;
+  /** The transfer record */
+  transfer: Transfer;
+};
+
 export type TransferResponse = {
   __typename?: 'TransferResponse';
   /** The balances of accounts involved in the transfer */

libs/types/src/global-types-mappings.ts

@@ -3,6 +3,7 @@ import type {
   GovernanceTransferKind,
   GovernanceTransferType,
   PeggedReference,
+  ProposalChange,
 } from './__generated__/types';
 import type { AccountType } from './__generated__/types';
 import type {
@@ -299,6 +300,29 @@ export const OrderTypeMapping: {
   TYPE_NETWORK: 'Network',
 };
 
+/**
+ * Proposal change type mapping
+ */
+export const ProposalChangeMapping: Record<
+  NonNullable<ProposalChange['__typename']>,
+  string
+> = {
+  NewMarket: 'New market',
+  UpdateMarket: 'Update market',
+  UpdateNetworkParameter: 'Update network parameter',
+  NewAsset: 'New asset',
+  UpdateAsset: 'Update asset',
+  /* cspell:disable-next-line */
+  NewFreeform: 'New free-form',
+  NewTransfer: 'New transfer',
+  CancelTransfer: 'Cancel transfer',
+  UpdateMarketState: 'Update market state',
+  NewSpotMarket: 'New spot market',
+  UpdateSpotMarket: 'Update spot market',
+  UpdateVolumeDiscountProgram: 'Update volume discount program',
+  UpdateReferralProgram: 'Update referral program',
+};
+
 /**
  * Reason for the proposal being rejected by the core node
  */

libs/ui-toolkit/src/components/sparkline/sparkline.spec.tsx

@@ -1,77 +1,68 @@
 import { render, screen } from '@testing-library/react';
-
 import { Sparkline } from './sparkline';
+import type { SparklineProps } from './sparkline';
 
-const props = {
-  data: [
-    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
-    10, 11, 12,
-  ],
-  muted: true,
-};
+describe('Sparkline', () => {
+  let props: SparklineProps = {
+    data: [],
+  };
 
-it('Renders an svg with a single path', () => {
-  render(<Sparkline {...props} />);
-  expect(screen.getByTestId('sparkline-svg')).toBeInTheDocument();
-  const paths = screen.getAllByTestId('sparkline-path');
-  const path = paths[0];
-  expect(path).toBeInTheDocument();
-  expect(path).toHaveAttribute('d', expect.any(String));
-  expect(path).toHaveAttribute('stroke', expect.any(String));
-  expect(path).toHaveAttribute('stroke-width', '1');
-  expect(path).toHaveAttribute('fill', 'transparent');
-});
+  beforeEach(() => {
+    props = {
+      data: [
+        1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8,
+        9, 10, 11, 12,
+      ],
+    };
+  });
 
-it('Requires a data prop but width and height are optional', () => {
-  render(<Sparkline {...props} />);
-  const svg = screen.getByTestId('sparkline-svg');
-  expect(svg).toHaveAttribute('width', '60');
-  expect(svg).toHaveAttribute('height', '15');
-});
+  it('Renders an svg with a single path', () => {
+    render(<Sparkline {...props} />);
+    expect(screen.getByTestId('sparkline-svg')).toBeInTheDocument();
+    const paths = screen.getAllByTestId('sparkline-path');
+    const path = paths[0];
+    expect(path).toBeInTheDocument();
+    expect(path).toHaveAttribute('d', expect.any(String));
+    expect(path).toHaveAttribute('stroke-width', '1');
+  });
 
-it('Renders a red line if the last value is less than the first', () => {
-  props.data[0] = 10;
-  props.data[props.data.length - 1] = 5;
-  render(<Sparkline {...props} />);
-  const paths = screen.getAllByTestId('sparkline-path');
-  const path = paths[0];
-  expect(path).toHaveClass(
-    '[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
-  );
-});
+  it('Requires a data prop but width and height are optional', () => {
+    render(<Sparkline {...props} />);
+    const svg = screen.getByTestId('sparkline-svg');
+    expect(svg).toHaveAttribute('width', '60');
+    expect(svg).toHaveAttribute('height', '15');
+  });
 
-it('Renders a green line if the last value is greater than the first', () => {
-  props.data[0] = 5;
-  props.data[props.data.length - 1] = 10;
-  props.muted = true;
-  render(<Sparkline {...props} />);
-  const paths = screen.getAllByTestId('sparkline-path');
-  const path = paths[0];
-  expect(path).toHaveClass(
-    '[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
-  );
-});
+  it('Renders a red line if the last value is less than the first', () => {
+    props.data[0] = 10;
+    props.data[props.data.length - 1] = 5;
+    render(<Sparkline {...props} />);
+    const paths = screen.getAllByTestId('sparkline-path');
+    const path = paths[0];
+    expect(path).toHaveClass(
+      '[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
+    );
+  });
 
-it('Renders a white line if the first and last values are equal', () => {
-  props.data[0] = 5;
-  props.data[props.data.length - 1] = 5;
-  render(<Sparkline {...props} />);
-  const paths = screen.getAllByTestId('sparkline-path');
-  const path = paths[0];
-  expect(path).toHaveClass(
-    '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
-  );
-});
+  it('Renders a green line if the last value is greater than the first', () => {
+    props.data[0] = 5;
+    props.data[props.data.length - 1] = 10;
+    render(<Sparkline {...props} />);
+    const paths = screen.getAllByTestId('sparkline-path');
+    const path = paths[0];
+    expect(path).toHaveClass(
+      '[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
+    );
+  });
 
-it('Renders a gray line if there are not 24 values', () => {
-  props.data = [
-    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
-    22, 23,
-  ];
-  render(<Sparkline {...props} />);
-  const paths = screen.queryAllByTestId('sparkline-path');
-  expect(paths).toHaveLength(2);
-  expect(paths[0]).toHaveClass(
-    '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
-  );
+  it('Renders a white line if the first and last values are equal', () => {
+    props.data[0] = 5;
+    props.data[props.data.length - 1] = 5;
+    render(<Sparkline {...props} />);
+    const paths = screen.getAllByTestId('sparkline-path');
+    const path = paths[0];
+    expect(path).toHaveClass(
+      '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
+    );
+  });
 });

libs/ui-toolkit/src/components/sparkline/sparkline.stories.tsx

@@ -8,39 +8,49 @@ export default {
 
 const Template: Story = (args) => <Sparkline data={args['data']} {...args} />;
 
-export const Grey = Template.bind({});
-Grey.args = {
-  data: [
-    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8,
-  ],
-  width: 60,
-  height: 30,
-  points: 25,
-  className: 'w-[113px]',
-};
-
 export const Equal = Template.bind({});
 Equal.args = {
   data: [
     12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
     10, 11, 12,
   ],
-  width: 60,
+  width: 110,
   height: 30,
-  points: 25,
-  className: 'w-[113px]',
 };
 
 export const Increase = Template.bind({});
 Increase.args = {
   data: [
-    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
-    10, 11, 12,
+    22,
+    22,
+    22, // extra values should be ignored, this should still render an increase
+    0,
+    2,
+    3,
+    4,
+    5,
+    13,
+    14,
+    15,
+    16,
+    17,
+    18,
+    19,
+    20,
+    21,
+    22,
+    23,
+    24,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
   ],
-  width: 60,
+  width: 110,
   height: 30,
-  points: 25,
-  className: 'w-[113px]',
 };
 
 export const Decrease = Template.bind({});
@@ -49,8 +59,27 @@ Decrease.args = {
     12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
     10, 11, 1,
   ],
-  width: 60,
+  width: 110,
+  height: 30,
+};
+
+export const LessThan24HoursIncrease = Template.bind({});
+LessThan24HoursIncrease.args = {
+  data: [20, 21, 22, 25, 24, 24, 22, 19, 20, 22, 23, 27],
+  width: 110,
+  height: 30,
+};
+
+export const LessThan24HoursDecrease = Template.bind({});
+LessThan24HoursDecrease.args = {
+  data: [20, 21, 22, 23, 24, 6, 7, 9, 11, 13, 11, 9],
+  width: 110,
+  height: 30,
+};
+
+export const NoData = Template.bind({});
+NoData.args = {
+  data: [],
+  width: 110,
   height: 30,
-  points: 25,
-  className: 'w-[113px]',
 };

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

@@ -1,15 +1,25 @@
 import { extent } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
-import { line } from 'd3-shape';
+import { area, line } from 'd3-shape';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
 
 function colorByChange(a: number, b: number) {
-  return a === b
-    ? 'stroke-black/40 dark:stroke-white/40'
-    : a < b
-    ? 'stroke-market-green-600 dark:stroke-market-green'
-    : 'stroke-market-red dark:stroke-market-red';
+  if (a < b) {
+    return 'stroke-market-green-600 dark:stroke-market-green';
+  } else if (a > b) {
+    return 'stroke-market-red dark:stroke-market-red';
+  }
+  return 'stroke-black/40 dark:stroke-white/40';
+}
+
+function shadedColor(a: number, b: number) {
+  if (a < b) {
+    return 'fill-market-green-600';
+  } else if (a > b) {
+    return 'fill-market-red';
+  }
+  return 'fill-black dark:fill-white';
 }
 
 export interface SparklineProps {
@@ -18,75 +28,60 @@ export interface SparklineProps {
   height?: number;
   points?: number;
   className?: string;
-  muted?: boolean;
 }
 
 export const SparklineView = ({
   data,
   width = 60,
   height = 15,
-  points = 25,
-  muted = false,
+  points = 24,
   className,
 }: SparklineProps) => {
-  // How many points are missing. If market is 12 hours old the 25 - 12
-  const preMarketLength = points - data.length;
-
-  // Create two dimensional array for sparkline points [x, y]
-  const marketData: [number, number][] = data.map((d, i) => [
-    preMarketLength + i,
-    d,
-  ]);
-  // Empty two dimensional array for gray, 'no data' line
-  let preMarketData: [number, number][] = [];
-
   // Get the extent for our y value
-  const [min, max] = extent(marketData, (d) => d[1]);
+  const [min, max] = extent(data, (d) => d);
 
   if (typeof min !== 'number' || typeof max !== 'number') {
     return null;
   }
 
-  // Create a second set of data to render a gray line for any
-  // missing points if the market is less than 24 hours old
-  if (marketData.length < points) {
-    // Populate preMarketData with the average of our extents
-    // so that the line renders centered vertically
-    const fillValue = (min + max) / 2;
-    preMarketData = new Array(points - marketData.length)
-      .fill(fillValue)
-      .map((d: number, i) => [i, d] as [number, number]);
+  const midValue = (min + max) / 2;
 
-    // Add the first point of or market data so that the two
-    // lines join up
-    preMarketData.push(marketData[0] as [number, number]);
-  }
+  // 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 xScale = scaleLinear().domain([0, points]).range([0, 100]);
-  const yScale = scaleLinear().domain([min, max]).range([100, 0]);
+  // Get the last 24 values if data has more than needed
+  const lineData: [number, number][] = [...padArr, ...trimmedData].map(
+    (d, i) => {
+      return [i, d];
+    }
+  );
+
+  const xScale = scaleLinear().domain([0, points]).range([0, width]);
+  const yScale = scaleLinear().domain([min, max]).range([height, 0]);
 
   const lineSeries = line()
     .x((d) => xScale(d[0]))
     .y((d) => yScale(d[1]));
 
-  // Get the color of the marketData line
-  const [firstVal, lastVal] = [data[0], data[data.length - 1]];
-  const strokeClassName = muted
-    ? data.length >= 24
-      ? colorByChange(firstVal, lastVal)
-      : 'stroke-black/40 dark:stroke-white/40'
-    : colorByChange(firstVal, lastVal);
+  const areaSeries = area()
+    .x((d) => xScale(d[0]))
+    .y0(height)
+    .y1((d) => yScale(d[1]));
+
+  const firstVal = trimmedData[0];
+  const lastVal = trimmedData[trimmedData.length - 1];
+
+  // Get the color of the marketData line depending on market movement
+  const strokeClassName = colorByChange(firstVal, lastVal);
+  const areaClassName = shadedColor(firstVal, lastVal);
 
   // Create paths
-  const preMarketCreationPath = lineSeries(preMarketData);
-  const mainPath = lineSeries(marketData);
-  const pathProps = {
-    'data-testid': 'sparkline-path',
-    className: `[vector-effect:non-scaling-stroke] ${strokeClassName}`,
-    stroke: 'strokeCurrent',
-    strokeWidth: 1,
-    fill: 'transparent',
-  };
+  const linePath = lineSeries(lineData);
+  const areaPath = areaSeries(lineData);
 
   return (
     <svg
@@ -94,13 +89,25 @@ export const SparklineView = ({
       className={className}
       width={width}
       height={height}
-      viewBox="0 0 100 100"
+      viewBox={`0 0 ${width} ${height}`}
       preserveAspectRatio="none"
     >
-      {preMarketCreationPath && (
-        <path {...pathProps} d={preMarketCreationPath} />
+      {linePath && (
+        <path
+          d={linePath}
+          data-testid="sparkline-path"
+          className={`[vector-effect:non-scaling-stroke] fill-transparent ${strokeClassName}`}
+          strokeWidth={1}
+        />
+      )}
+      {areaPath && (
+        <path
+          className={areaClassName}
+          fillOpacity={0.2}
+          stroke="none"
+          d={areaPath}
+        />
       )}
-      {mainPath && <path {...pathProps} d={mainPath} />}
     </svg>
   );
 };

libs/utils/src/lib/format/number.ts

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