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

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

libs/liquidity/src/lib/MarketLiquidity.graphql

@@ -20,6 +20,19 @@ fragment LiquidityProvisionFields on LiquidityProvision {
   status
 }
 
+query PaidFees($marketId: ID) {
+  paidLiquidityFees(marketId: $marketId) {
+    edges {
+      node {
+        marketId
+        assetId
+        epoch
+        totalFeesPaid
+      }
+    }
+  }
+}
+
 query LiquidityProvisions($marketId: ID!) {
   market(id: $marketId) {
     liquiditySLAParameters {

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

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