feat: liquidity table headers collapsible

apps/governance/src/routes/proposals/components/proposal-referral-program-details/proposal-referral-program-details.spec.tsx

@@ -128,9 +128,7 @@ describe('<ProposalReferralProgramDetails />', () => {
   it('should not render if there are no relevant fields', () => {
     const incompleteProposal = generateProposal({
       terms: {
-        change: {
+        change: {},
-          __typename: 'UpdateReferralProgram',
-        },
       },
     });
 

apps/trading-e2e/src/support/trading.ts

@@ -30,7 +30,6 @@ import {
   blockStatisticsQuery,
   networkParamQuery,
   liquidityProvisionsQuery,
-  liquidityProviderFeeShareQuery,
   successorMarketQuery,
   parentMarketIdQuery,
   successorMarketIdsQuery,
@@ -162,11 +161,7 @@ const mockTradingPage = (
   aliasGQLQuery(req, 'Trades', tradesQuery());
   aliasGQLQuery(req, 'Chart', chartQuery());
   aliasGQLQuery(req, 'LiquidityProvisions', liquidityProvisionsQuery());
-  aliasGQLQuery(
+  aliasGQLQuery(req, 'LiquidityProviderFeeShare');
-    req,
-    'LiquidityProviderFeeShare',
-    liquidityProviderFeeShareQuery
-  );
   aliasGQLQuery(req, 'Candles', candlesQuery());
   aliasGQLQuery(req, 'Withdrawals', withdrawalsQuery());
   aliasGQLQuery(req, 'NetworkParams', networkParamsQuery());

libs/liquidity/src/lib/MarketLiquidity.graphql

@@ -32,39 +32,43 @@ query LiquidityProvisions($marketId: ID!) {
   }
 }
 
-subscription LiquidityProvisionsUpdate($partyId: ID, $marketId: ID) {
-  liquidityProvisions(partyId: $partyId, marketId: $marketId) {
-    id
-    partyID
-    createdAt
-    updatedAt
-    marketID
-    commitmentAmount
-    fee
-    status
-  }
-}
-
 # Liquidity Provider Share Fee
 
 fragment LiquidityProviderFeeShareFields on LiquidityProviderFeeShare {
-  party {
-    id
-  }
   equityLikeShare
   averageEntryValuation
+  averageScore
+  virtualStake
 }
 
-query LiquidityProviderFeeShare($marketId: ID!) {
+fragment LiquidityProviderSLAFields on LiquidityProviderSLA {
-  market(id: $marketId) {
+  currentEpochFractionOfTimeOnBook
-    id
+  lastEpochFractionOfTimeOnBook
-    data {
+  lastEpochFeePenalty
-      market {
+  lastEpochBondPenalty
-        id
+  hysteresisPeriodFeePenalties
-      }
+  requiredLiquidity
-      liquidityProviderFeeShare {
+  notionalVolumeBuys
-        ...LiquidityProviderFeeShareFields
+  notionalVolumeSells
+}
+
+query LiquidityProviders($marketId: ID!) {
+  liquidityProviders(marketId: $marketId) {
+    edges {
+      node {
+        ...LiquidityProviderFields
       }
     }
   }
 }
+
+fragment LiquidityProviderFields on LiquidityProvider {
+  partyId
+  marketId
+  feeShare {
+    ...LiquidityProviderFeeShareFields
+  }
+  sla {
+    ...LiquidityProviderSLAFields
+  }
+}

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

@@ -12,22 +12,18 @@ export type LiquidityProvisionsQueryVariables = Types.Exact<{
 
 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 LiquidityProvisionsUpdateSubscriptionVariables = Types.Exact<{
+export type LiquidityProviderFeeShareFieldsFragment = { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, averageScore: string, virtualStake: string };
-  partyId?: Types.InputMaybe<Types.Scalars['ID']>;
-  marketId?: Types.InputMaybe<Types.Scalars['ID']>;
-}>;
 
+export type LiquidityProviderSLAFieldsFragment = { __typename?: 'LiquidityProviderSLA', currentEpochFractionOfTimeOnBook: string, lastEpochFractionOfTimeOnBook: string, lastEpochFeePenalty: string, lastEpochBondPenalty: string, hysteresisPeriodFeePenalties?: Array<string> | null, requiredLiquidity: string, notionalVolumeBuys: string, notionalVolumeSells: string };
 
-export type LiquidityProvisionsUpdateSubscription = { __typename?: 'Subscription', liquidityProvisions?: Array<{ __typename?: 'LiquidityProvisionUpdate', id: string, partyID: string, createdAt: any, updatedAt?: any | null, marketID: string, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus }> | null };
+export type LiquidityProvidersQueryVariables = Types.Exact<{
-
-export type LiquidityProviderFeeShareFieldsFragment = { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } };
-
-export type LiquidityProviderFeeShareQueryVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
 }>;
 
 
-export type LiquidityProviderFeeShareQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, data?: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string }, liquidityProviderFeeShare?: Array<{ __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } }> | null } | null } | null };
+export type LiquidityProvidersQuery = { __typename?: 'Query', liquidityProviders?: { __typename?: 'LiquidityProviderConnection', edges: Array<{ __typename?: 'LiquidityProviderEdge', node: { __typename?: 'LiquidityProvider', partyId: string, marketId: string, feeShare?: { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, averageScore: string, virtualStake: string } | null, sla?: { __typename?: 'LiquidityProviderSLA', currentEpochFractionOfTimeOnBook: string, lastEpochFractionOfTimeOnBook: string, lastEpochFeePenalty: string, lastEpochBondPenalty: string, hysteresisPeriodFeePenalties?: Array<string> | null, requiredLiquidity: string, notionalVolumeBuys: string, notionalVolumeSells: string } | null } }> } | null };
+
+export type LiquidityProviderFieldsFragment = { __typename?: 'LiquidityProvider', partyId: string, marketId: string, feeShare?: { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, averageScore: string, virtualStake: string } | null, sla?: { __typename?: 'LiquidityProviderSLA', currentEpochFractionOfTimeOnBook: string, lastEpochFractionOfTimeOnBook: string, lastEpochFeePenalty: string, lastEpochBondPenalty: string, hysteresisPeriodFeePenalties?: Array<string> | null, requiredLiquidity: string, notionalVolumeBuys: string, notionalVolumeSells: string } | null };
 
 export const LiquidityProvisionFieldsFragmentDoc = gql`
     fragment LiquidityProvisionFields on LiquidityProvision {
@@ -52,13 +48,37 @@ export const LiquidityProvisionFieldsFragmentDoc = gql`
     `;
 export const LiquidityProviderFeeShareFieldsFragmentDoc = gql`
     fragment LiquidityProviderFeeShareFields on LiquidityProviderFeeShare {
-  party {
-    id
-  }
   equityLikeShare
   averageEntryValuation
+  averageScore
+  virtualStake
 }
     `;
+export const LiquidityProviderSLAFieldsFragmentDoc = gql`
+    fragment LiquidityProviderSLAFields on LiquidityProviderSLA {
+  currentEpochFractionOfTimeOnBook
+  lastEpochFractionOfTimeOnBook
+  lastEpochFeePenalty
+  lastEpochBondPenalty
+  hysteresisPeriodFeePenalties
+  requiredLiquidity
+  notionalVolumeBuys
+  notionalVolumeSells
+}
+    `;
+export const LiquidityProviderFieldsFragmentDoc = gql`
+    fragment LiquidityProviderFields on LiquidityProvider {
+  partyId
+  marketId
+  feeShare {
+    ...LiquidityProviderFeeShareFields
+  }
+  sla {
+    ...LiquidityProviderSLAFields
+  }
+}
+    ${LiquidityProviderFeeShareFieldsFragmentDoc}
+${LiquidityProviderSLAFieldsFragmentDoc}`;
 export const LiquidityProvisionsDocument = gql`
     query LiquidityProvisions($marketId: ID!) {
   market(id: $marketId) {
@@ -100,84 +120,42 @@ export function useLiquidityProvisionsLazyQuery(baseOptions?: Apollo.LazyQueryHo
 export type LiquidityProvisionsQueryHookResult = ReturnType<typeof useLiquidityProvisionsQuery>;
 export type LiquidityProvisionsLazyQueryHookResult = ReturnType<typeof useLiquidityProvisionsLazyQuery>;
 export type LiquidityProvisionsQueryResult = Apollo.QueryResult<LiquidityProvisionsQuery, LiquidityProvisionsQueryVariables>;
-export const LiquidityProvisionsUpdateDocument = gql`
+export const LiquidityProvidersDocument = gql`
-    subscription LiquidityProvisionsUpdate($partyId: ID, $marketId: ID) {
+    query LiquidityProviders($marketId: ID!) {
-  liquidityProvisions(partyId: $partyId, marketId: $marketId) {
+  liquidityProviders(marketId: $marketId) {
-    id
+    edges {
-    partyID
+      node {
-    createdAt
+        ...LiquidityProviderFields
-    updatedAt
-    marketID
-    commitmentAmount
-    fee
-    status
-  }
-}
-    `;
-
-/**
- * __useLiquidityProvisionsUpdateSubscription__
- *
- * To run a query within a React component, call `useLiquidityProvisionsUpdateSubscription` and pass it any options that fit your needs.
- * When your component renders, `useLiquidityProvisionsUpdateSubscription` 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 } = useLiquidityProvisionsUpdateSubscription({
- *   variables: {
- *      partyId: // value for 'partyId'
- *      marketId: // value for 'marketId'
- *   },
- * });
- */
-export function useLiquidityProvisionsUpdateSubscription(baseOptions?: Apollo.SubscriptionHookOptions<LiquidityProvisionsUpdateSubscription, LiquidityProvisionsUpdateSubscriptionVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useSubscription<LiquidityProvisionsUpdateSubscription, LiquidityProvisionsUpdateSubscriptionVariables>(LiquidityProvisionsUpdateDocument, options);
-      }
-export type LiquidityProvisionsUpdateSubscriptionHookResult = ReturnType<typeof useLiquidityProvisionsUpdateSubscription>;
-export type LiquidityProvisionsUpdateSubscriptionResult = Apollo.SubscriptionResult<LiquidityProvisionsUpdateSubscription>;
-export const LiquidityProviderFeeShareDocument = gql`
-    query LiquidityProviderFeeShare($marketId: ID!) {
-  market(id: $marketId) {
-    id
-    data {
-      market {
-        id
-      }
-      liquidityProviderFeeShare {
-        ...LiquidityProviderFeeShareFields
       }
     }
   }
 }
-    ${LiquidityProviderFeeShareFieldsFragmentDoc}`;
+    ${LiquidityProviderFieldsFragmentDoc}`;
 
 /**
- * __useLiquidityProviderFeeShareQuery__
+ * __useLiquidityProvidersQuery__
  *
- * To run a query within a React component, call `useLiquidityProviderFeeShareQuery` and pass it any options that fit your needs.
+ * To run a query within a React component, call `useLiquidityProvidersQuery` and pass it any options that fit your needs.
- * When your component renders, `useLiquidityProviderFeeShareQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * When your component renders, `useLiquidityProvidersQuery` 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 } = useLiquidityProviderFeeShareQuery({
+ * const { data, loading, error } = useLiquidityProvidersQuery({
  *   variables: {
  *      marketId: // value for 'marketId'
  *   },
  * });
  */
-export function useLiquidityProviderFeeShareQuery(baseOptions: Apollo.QueryHookOptions<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>) {
+export function useLiquidityProvidersQuery(baseOptions: Apollo.QueryHookOptions<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>) {
         const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>(LiquidityProviderFeeShareDocument, options);
+        return Apollo.useQuery<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>(LiquidityProvidersDocument, options);
       }
-export function useLiquidityProviderFeeShareLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>) {
+export function useLiquidityProvidersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>) {
           const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>(LiquidityProviderFeeShareDocument, options);
+          return Apollo.useLazyQuery<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>(LiquidityProvidersDocument, options);
         }
-export type LiquidityProviderFeeShareQueryHookResult = ReturnType<typeof useLiquidityProviderFeeShareQuery>;
+export type LiquidityProvidersQueryHookResult = ReturnType<typeof useLiquidityProvidersQuery>;
-export type LiquidityProviderFeeShareLazyQueryHookResult = ReturnType<typeof useLiquidityProviderFeeShareLazyQuery>;
+export type LiquidityProvidersLazyQueryHookResult = ReturnType<typeof useLiquidityProvidersLazyQuery>;
-export type LiquidityProviderFeeShareQueryResult = Apollo.QueryResult<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>;
+export type LiquidityProvidersQueryResult = Apollo.QueryResult<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>;

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

@@ -1,7 +1,9 @@
-import type { LiquidityProviderFeeShare } from '@vegaprotocol/types';
 import { AccountType } from '@vegaprotocol/types';
 import { getLiquidityProvision } from './liquidity-data-provider';
-import type { LiquidityProvisionFieldsFragment } from './__generated__/MarketLiquidity';
+import type {
+  LiquidityProviderFieldsFragment,
+  LiquidityProvisionFieldsFragment,
+} from './__generated__/MarketLiquidity';
 
 const input = {
   liquidityProvisions: [
@@ -31,28 +33,32 @@ const input = {
       __typename: 'LiquidityProvision',
     } as LiquidityProvisionFieldsFragment,
   ],
-  liquidityFeeShare: [
+  liquidityProviders: [
     {
-      party: {
+      partyId:
-        id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
+        'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
-        __typename: 'Party',
+      feeShare: {
+        equityLikeShare: '1',
+        averageEntryValuation: '12064118310408958216220.7224556301338111',
+        __typename: 'LiquidityProviderFeeShare',
       },
-      equityLikeShare: '1',
+    } as LiquidityProviderFieldsFragment,
-      averageEntryValuation: '12064118310408958216220.7224556301338111',
-      __typename: 'LiquidityProviderFeeShare',
-    } as LiquidityProviderFeeShare,
   ],
 };
 
 const result = [
   {
-    __typename: 'LiquidityProvision',
+    __typename: undefined,
-    averageEntryValuation: '12064118310408958216220.7224556301338111',
     balance: '1.8003328918633596575e+22',
     commitmentAmount: '18003328918633596575000',
     createdAt: '2022-12-16T09:28:29.071781Z',
-    equityLikeShare: '1',
+    feeShare: {
+      equityLikeShare: '1',
+      __typename: 'LiquidityProviderFeeShare',
+      averageEntryValuation: '12064118310408958216220.7224556301338111',
+    },
     fee: '0.001',
+    partyId: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
     party: {
       __typename: 'Party',
       accountsConnection: {
@@ -84,13 +90,13 @@ describe('getLiquidityProvision', () => {
   it('should return correct array when correct liquidity provision parameters are provided', () => {
     const data = getLiquidityProvision(
       input.liquidityProvisions,
-      input.liquidityFeeShare
+      input.liquidityProviders
     );
     expect(data).toStrictEqual(result);
   });
 
   it('should return empty array when no liquidity provision parameters are provided', () => {
-    const data = getLiquidityProvision([], input.liquidityFeeShare);
+    const data = getLiquidityProvision([], input.liquidityProviders);
     expect(data).toStrictEqual([]);
   });
 

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

@@ -5,86 +5,50 @@ import {
 } from '@vegaprotocol/data-provider';
 import * as Schema from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
-import produce from 'immer';
 
 import {
-  LiquidityProviderFeeShareDocument,
+  LiquidityProvidersDocument,
   LiquidityProvisionsDocument,
-  LiquidityProvisionsUpdateDocument,
 } from './__generated__/MarketLiquidity';
 
 import type {
-  LiquidityProviderFeeShareFieldsFragment,
+  LiquidityProviderFieldsFragment,
-  LiquidityProviderFeeShareQuery,
+  LiquidityProvidersQuery,
-  LiquidityProviderFeeShareQueryVariables,
+  LiquidityProvidersQueryVariables,
   LiquidityProvisionFieldsFragment,
   LiquidityProvisionsQuery,
   LiquidityProvisionsQueryVariables,
-  LiquidityProvisionsUpdateSubscription,
 } from './__generated__/MarketLiquidity';
 
 export const liquidityProvisionsDataProvider = makeDataProvider<
   LiquidityProvisionsQuery,
   LiquidityProvisionFieldsFragment[],
-  LiquidityProvisionsUpdateSubscription,
+  never,
-  LiquidityProvisionsUpdateSubscription['liquidityProvisions'],
+  never,
   LiquidityProvisionsQueryVariables
 >({
   query: LiquidityProvisionsDocument,
-  subscriptionQuery: LiquidityProvisionsUpdateDocument,
-  update: (
-    data: LiquidityProvisionFieldsFragment[] | null,
-    deltas: LiquidityProvisionsUpdateSubscription['liquidityProvisions']
-  ) => {
-    return produce(data || [], (draft) => {
-      deltas?.forEach((delta) => {
-        const index = draft.findIndex((a) => delta.id === a.id);
-        if (index !== -1) {
-          draft[index].commitmentAmount = delta.commitmentAmount;
-          draft[index].fee = delta.fee;
-          draft[index].updatedAt = delta.updatedAt;
-          draft[index].status = delta.status;
-        } else {
-          draft.unshift({
-            id: delta.id,
-            commitmentAmount: delta.commitmentAmount,
-            fee: delta.fee,
-            status: delta.status,
-            updatedAt: delta.updatedAt,
-            createdAt: delta.createdAt,
-            party: {
-              id: delta.partyID,
-            },
-            // TODO add accounts connection to the subscription
-          });
-        }
-      });
-    });
-  },
   getData: (responseData: LiquidityProvisionsQuery | null) => {
     return (
       responseData?.market?.liquidityProvisionsConnection?.edges?.map(
         (e) => e?.node
       ) ?? []
-    ).filter((e) => !!e) as LiquidityProvisionFieldsFragment[];
+    ).filter((n) => !!n) as LiquidityProvisionFieldsFragment[];
-  },
-  getDelta: (
-    subscriptionData: LiquidityProvisionsUpdateSubscription
-  ): LiquidityProvisionsUpdateSubscription['liquidityProvisions'] => {
-    return subscriptionData.liquidityProvisions;
   },
 });
 
-export const liquidityFeeShareDataProvider = makeDataProvider<
+export const lpDataProvider = makeDataProvider<
-  LiquidityProviderFeeShareQuery,
+  LiquidityProvidersQuery,
-  LiquidityProviderFeeShareFieldsFragment[],
+  LiquidityProviderFieldsFragment[],
   never,
   never,
-  LiquidityProviderFeeShareQueryVariables
+  LiquidityProvidersQueryVariables
 >({
-  query: LiquidityProviderFeeShareDocument,
+  query: LiquidityProvidersDocument,
   getData: (data) => {
-    return data?.market?.data?.liquidityProviderFeeShare || [];
+    return (
+      data?.liquidityProviders?.edges.filter(Boolean).map((e) => e.node) ?? []
+    );
   },
 });
 
@@ -101,17 +65,17 @@ export const lpAggregatedDataProvider = makeDerivedDataProvider<
         marketId: variables.marketId,
       }),
     (callback, client, variables) =>
-      liquidityFeeShareDataProvider(callback, client, {
+      lpDataProvider(callback, client, {
         marketId: variables.marketId,
       }),
   ],
   (
-    [liquidityProvisions, liquidityFeeShare],
+    [liquidityProvisions, liquidityProvider],
     { filter }
   ): LiquidityProvisionData[] => {
     return getLiquidityProvision(
       liquidityProvisions,
-      liquidityFeeShare,
+      liquidityProvider,
       filter
     );
   }
@@ -139,9 +103,17 @@ export const matchFilter = (
   return true;
 };
 
+export interface LiquidityProvisionData
+  extends Omit<LiquidityProvisionFieldsFragment, '__typename'> {
+  assetDecimalPlaces?: number;
+  balance?: string;
+  averageEntryValuation?: string;
+  equityLikeShare?: string;
+}
+
 export const getLiquidityProvision = (
   liquidityProvisions: LiquidityProvisionFieldsFragment[],
-  liquidityFeeShare: LiquidityProviderFeeShareFieldsFragment[],
+  liquidityProvider: LiquidityProviderFieldsFragment[],
   filter?: Filter
 ): LiquidityProvisionData[] => {
   return liquidityProvisions
@@ -161,10 +133,8 @@ export const getLiquidityProvision = (
       return true;
     })
     .map((lp) => {
-      const feeShare = liquidityFeeShare.find(
+      const lpObj = liquidityProvider.find((f) => lp.party.id === f.partyId);
-        (f) => f.party.id === lp.party.id
+      if (!lpObj) return lp;
-      );
-      if (!feeShare) return lp;
       const accounts = compact(lp.party.accountsConnection?.edges).map(
         (e) => e.node
       );
@@ -180,17 +150,9 @@ export const getLiquidityProvision = (
           .toString() || '0';
       return {
         ...lp,
-        averageEntryValuation: feeShare?.averageEntryValuation,
+        ...lpObj,
-        equityLikeShare: feeShare?.equityLikeShare,
         balance,
+        __typename: undefined,
       };
     });
 };
-
-export interface LiquidityProvisionData
-  extends LiquidityProvisionFieldsFragment {
-  assetDecimalPlaces?: number;
-  balance?: string;
-  averageEntryValuation?: string;
-  equityLikeShare?: string;
-}

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

@@ -10,8 +10,10 @@ const singleRow = {
   commitmentAmount: '56298653179',
   fee: '0.001',
   status: Schema.LiquidityProvisionStatus.STATUS_ACTIVE,
-  equityLikeShare: '0.5',
+  feeShare: {
-  averageEntryValuation: '0.5',
+    equityLikeShare: '0.5',
+    averageEntryValuation: '0.5',
+  },
   supplied: '67895',
   obligation: '56785',
 } as unknown as LiquidityProvisionData;
@@ -41,16 +43,16 @@ describe('LiquidityTable', () => {
       h.querySelector('[ref="eText"]')?.textContent?.trim()
     );
     const expectedHeaders = [
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
       'Party',
       'Commitment ()',
-      'Share',
+      'Live time fraction on book',
-      'Proposed fee',
+      'Last time fraction on the book',
-      'Market valuation at entry',
-      'Obligation',
-      'Supplied',
       'Status',
-      'Created',
-      'Updated',
     ];
     expect(headers).toHaveLength(expectedHeaders.length);
     expect(headerTexts).toEqual(expectedHeaders);

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

@@ -8,9 +8,16 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
+import {
+  CopyWithTooltip,
+  Tooltip,
+  TooltipCellComponent,
+  VegaIcon,
+  VegaIconNames,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
 import type {
-  ColDef,
+  ColGroupDef,
   ITooltipParams,
   ValueFormatterParams,
 } from 'ag-grid-community';
@@ -24,6 +31,20 @@ const percentageFormatter = ({ value }: ValueFormatterParams) => {
   return formatNumberPercentage(new BigNumber(value).times(100), 2) || '-';
 };
 
+const copyCellRenderer = ({ value }: { value?: string | null }) => {
+  if (!value) return '-';
+  return (
+    <CopyWithTooltip data-testid="copy-to-clipboard" text={value}>
+      <button className="flex gap-1">
+        <Tooltip description={value}>
+          <span className="break-words">{truncateMiddle(value)}</span>
+        </Tooltip>
+        <VegaIcon name={VegaIconNames.COPY} size={12} />
+      </button>
+    </CopyWithTooltip>
+  );
+};
+
 const dateValueFormatter = ({ value }: { value?: string | null }) => {
   if (!value) {
     return '-';
@@ -89,103 +110,176 @@ export const LiquidityTable = ({
       )}`;
     };
 
-    const defs: ColDef[] = [
+    const defs: ColGroupDef[] = [
       {
-        headerName: t('Party'),
+        headerName: '',
-        field: 'party.id',
+        children: [
-        headerTooltip: t('The public key of the party making this commitment.'),
+          {
+            headerName: t('Party'),
+            field: 'partyId',
+            headerTooltip: t(
+              'The public key of the party making this commitment.'
+            ),
+            cellRenderer: copyCellRenderer,
+          },
+        ],
       },
       {
-        headerName: t(`Commitment (${symbol})`),
+        headerName: t('Commitment details'),
-        field: 'commitmentAmount',
+        marryChildren: true,
-        type: 'rightAligned',
+        children: [
-        headerTooltip: t(
+          {
-          'The amount committed to the market by this liquidity provider.'
+            headerName: t(`Commitment (${symbol})`),
-        ),
+            field: 'commitmentAmount',
-        valueFormatter: assetDecimalsQuantumFormatter,
+            type: 'rightAligned',
-        tooltipValueGetter: assetDecimalsFormatter,
+            headerTooltip: t(
+              'The amount committed to the market by this liquidity provider.'
+            ),
+            valueFormatter: assetDecimalsQuantumFormatter,
+            tooltipValueGetter: assetDecimalsFormatter,
+          },
+          {
+            headerName: t('Obligation'),
+            field: 'commitmentAmount',
+            type: 'rightAligned',
+            headerTooltip: t(
+              `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
+            ),
+            valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            tooltipValueGetter: stakeToCcyVolumeFormatter,
+            columnGroupShow: 'open',
+          },
+          {
+            headerName: t('Fee'),
+            headerTooltip: t(
+              'The fee percentage (per trade) proposed by each liquidity provider.'
+            ),
+            field: 'fee',
+            type: 'rightAligned',
+            valueFormatter: percentageFormatter,
+            columnGroupShow: 'open',
+          },
+          {
+            headerName: t('Adjusted stake share'),
+            field: 'feeShare.virtualStake',
+            type: 'rightAligned',
+            headerTooltip: t('The virtual stake of the liquidity provider.'),
+
+            valueFormatter: assetDecimalsQuantumFormatter,
+            tooltipValueGetter: assetDecimalsFormatter,
+            columnGroupShow: 'open',
+          },
+          {
+            headerName: t(`Share`),
+            field: 'feeShare.equityLikeShare',
+            type: 'rightAligned',
+            headerTooltip: t(
+              'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.'
+            ),
+            valueFormatter: percentageFormatter,
+            columnGroupShow: 'open',
+          },
+        ],
       },
       {
-        headerName: t(`Share`),
+        headerName: t('Live liquidity details'),
-        field: 'equityLikeShare',
+        marryChildren: true,
-        type: 'rightAligned',
+        children: [
-        headerTooltip: t(
+          {
-          'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.'
+            headerName: t('Live supplied liquidity'),
-        ),
+            field: 'balance',
-        valueFormatter: percentageFormatter,
+            type: 'rightAligned',
+            headerTooltip: t(
+              `The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.`
+            ),
+            valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            tooltipValueGetter: stakeToCcyVolumeFormatter,
+            columnGroupShow: 'open',
+          },
+          {
+            headerName: t(`Live time fraction on book`),
+            field: 'sla.currentEpochFractionOfTimeOnBook',
+            type: 'rightAligned',
+            headerTooltip: t('Current epoch fraction of time on the book.'),
+            valueFormatter: percentageFormatter,
+          },
+          {
+            headerName: t('Live liquidity quality score (%)'),
+            field: 'feeShare.averageScore',
+            type: 'rightAligned',
+            headerTooltip: t('The average score of the liquidity provider.'),
+            valueFormatter: percentageFormatter,
+            columnGroupShow: 'open',
+          },
+        ],
       },
       {
-        headerName: t('Proposed fee'),
+        headerName: t('Last epoch SLA details'),
-        headerTooltip: t(
+        marryChildren: true,
-          'The fee percentage (per trade) proposed by each liquidity provider.'
+        children: [
-        ),
+          {
-        field: 'fee',
+            headerName: t(`Last time fraction on the book`),
-        type: 'rightAligned',
+            field: 'sla.lastEpochFractionOfTimeOnBook',
-        valueFormatter: percentageFormatter,
+            type: 'rightAligned',
+            headerTooltip: t('Last epoch fraction of time on the book.'),
+            valueFormatter: percentageFormatter,
+          },
+          {
+            headerName: t(`Last fee penalty`),
+            field: 'sla.lastEpochFeePenalty',
+            type: 'rightAligned',
+            headerTooltip: t('Last epoch fee penalty.'),
+            valueFormatter: percentageFormatter,
+            columnGroupShow: 'open',
+          },
+          {
+            headerName: t(`Last bond penalty`),
+            field: 'sla.lastEpochBondPenalty',
+            type: 'rightAligned',
+            headerTooltip: t('Last epoch bond penalty.'),
+            valueFormatter: percentageFormatter,
+            columnGroupShow: 'open',
+          },
+        ],
       },
       {
-        headerName: t('Market valuation at entry'),
+        headerName: '',
-        field: 'averageEntryValuation',
+        marryChildren: true,
-        type: 'rightAligned',
+        children: [
-        headerTooltip: t(
+          {
-          'The valuation of the market at the time the liquidity commitment was made. Commitments made at a lower valuation earlier in the lifetime of the market would be expected to have a higher equity-like share if the market has grown. If a commitment is amended, value will reflect the average of the market valuations across the lifetime of the commitment.'
+            headerName: t('Status'),
-        ),
+            headerTooltip: t('The current status of this liquidity provision.'),
-        valueFormatter: assetDecimalsQuantumFormatter,
+            field: 'status',
-        tooltipValueGetter: assetDecimalsFormatter,
+            valueFormatter: ({ value }) => {
-      },
+              if (!value) return value;
-      {
+              return LiquidityProvisionStatusMapping[
-        headerName: t('Obligation'),
+                value as LiquidityProvisionStatus
-        field: 'commitmentAmount',
+              ];
-        type: 'rightAligned',
+            },
-        headerTooltip: t(
+          },
-          `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
+          {
-        ),
+            headerName: t('Created'),
-        valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            headerTooltip: t(
-        tooltipValueGetter: stakeToCcyVolumeFormatter,
+              'The date and time this liquidity provision was created.'
-      },
+            ),
-      {
+            field: 'createdAt',
-        headerName: t('Supplied'),
+            type: 'rightAligned',
-        field: 'balance',
+            valueFormatter: dateValueFormatter,
-        type: 'rightAligned',
+          },
-        headerTooltip: t(
+          {
-          `The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.`
+            headerName: t('Updated'),
-        ),
+            headerTooltip: t(
-        valueFormatter: stakeToCcyVolumeQuantumFormatter,
+              'The date and time this liquidity provision was last updated.'
-        tooltipValueGetter: stakeToCcyVolumeFormatter,
+            ),
-      },
+            field: 'updatedAt',
-      {
+            type: 'rightAligned',
-        headerName: t('Status'),
+            valueFormatter: dateValueFormatter,
-        headerTooltip: t('The current status of this liquidity provision.'),
+          },
-        field: 'status',
+        ],
-        valueFormatter: ({ value }) => {
-          if (!value) return value;
-          return LiquidityProvisionStatusMapping[
-            value as LiquidityProvisionStatus
-          ];
-        },
-      },
-      {
-        headerName: t('Created'),
-        headerTooltip: t(
-          'The date and time this liquidity provision was created.'
-        ),
-        field: 'createdAt',
-        type: 'rightAligned',
-        valueFormatter: dateValueFormatter,
-      },
-      {
-        headerName: t('Updated'),
-        headerTooltip: t(
-          'The date and time this liquidity provision was last updated.'
-        ),
-        field: 'updatedAt',
-        type: 'rightAligned',
-        valueFormatter: dateValueFormatter,
       },
     ];
     return defs;
   }, [assetDecimalPlaces, quantum, stakeToCcyVolume, symbol]);
-
   return (
     <AgGrid
       overlayNoRowsTemplate={t('No liquidity provisions')}

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

@@ -1,10 +1,7 @@
 import merge from 'lodash/merge';
 import * as Schema from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
-import type {
+import type { LiquidityProvisionsQuery } from './__generated__/MarketLiquidity';
-  LiquidityProviderFeeShareQuery,
-  LiquidityProvisionsQuery,
-} from './__generated__/MarketLiquidity';
 import type { LiquidityProvisionFieldsFragment } from './__generated__/MarketLiquidity';
 
 export const liquidityProvisionsQuery = (
@@ -26,45 +23,6 @@ export const liquidityProvisionsQuery = (
   return merge(defaultResult, override);
 };
 
-export const liquidityProviderFeeShareQuery = (
-  override?: PartialDeep<LiquidityProviderFeeShareQuery>
-): LiquidityProviderFeeShareQuery => {
-  const defaultResult: LiquidityProviderFeeShareQuery = {
-    market: {
-      id: 'market-0',
-      data: {
-        market: {
-          id: 'market-0',
-          __typename: 'Market',
-        },
-        liquidityProviderFeeShare: [
-          {
-            party: {
-              id: '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',
-              __typename: 'Party',
-            },
-            equityLikeShare: '1',
-            averageEntryValuation: '68585293691.5598054356207737',
-            __typename: 'LiquidityProviderFeeShare',
-          },
-          {
-            party: {
-              id: 'cc464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',
-              __typename: 'Party',
-            },
-            equityLikeShare: '1',
-            averageEntryValuation: '68585293691.5598054356207737',
-            __typename: 'LiquidityProviderFeeShare',
-          },
-        ],
-        __typename: 'MarketData',
-      },
-      __typename: 'Market',
-    },
-  };
-  return merge(defaultResult, override);
-};
-
 export const liquidityFields: LiquidityProvisionFieldsFragment[] = [
   {
     id: '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',

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

@@ -53,7 +53,10 @@ export const Tooltip = ({
               className={tooltipContentClasses}
               sideOffset={sideOffset}
             >
-              <div className="relative z-0" data-testid="tooltip-content">
+              <div
+                className="relative z-0 break-words"
+                data-testid="tooltip-content"
+              >
                 {description}
               </div>
             </Content>