diff --git a/apps/trading/components/liquidity-header/liquidity-header.tsx b/apps/trading/components/liquidity-header/liquidity-header.tsx index 0863be127..14c31794c 100644 --- 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 (
{ {formatNumberPercentage(percentage, 2)} - -
{marketId}
+ {marketId && ( + +
+ + + +
+
+ )} + +
+ {feesObject?.node.totalFeesPaid + ? `${addDecimalsFormatNumber( + feesObject?.node.totalFeesPaid, + assetDecimalPlaces ?? 0 + )} ${symbol}` + : '-'} +
{DocsLinks ? ( diff --git a/libs/liquidity/src/lib/MarketLiquidity.graphql b/libs/liquidity/src/lib/MarketLiquidity.graphql index a84595d67..5af6b95f1 100644 --- 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 index fc63f406a..3d96e064d 100644 --- a/libs/liquidity/src/lib/__generated__/MarketLiquidity.ts +++ b/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; +}>; + + +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) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(PaidFeesDocument, options); + } +export function usePaidFeesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(PaidFeesDocument, options); + } +export type PaidFeesQueryHookResult = ReturnType; +export type PaidFeesLazyQueryHookResult = ReturnType; +export type PaidFeesQueryResult = Apollo.QueryResult; export const LiquidityProvisionsDocument = gql` query LiquidityProvisions($marketId: ID!) { market(id: $marketId) {