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

vegaprotocol · Oct 31, 2023 · 61aa45a · 61aa45a
1 parent 4c95db5
commit 61aa45a
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 4 deletions.
diff --git a/apps/trading/components/liquidity-header/liquidity-header.tsx b/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}>

diff --git a/libs/liquidity/src/lib/MarketLiquidity.graphql b/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 {

diff --git a/libs/liquidity/src/lib/__generated__/MarketLiquidity.ts b/libs/liquidity/src/lib/__generated__/MarketLiquidity.ts