feat(#2599): liquidity price range added in market info (#2716)

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

@@ -161,6 +161,14 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     );
   });
 
+  it('liquidity price range displayed', () => {
+    cy.getByTestId(marketTitle).contains('Liquidity price range').click();
+
+    validateMarketDataRow(0, 'Liquidity Price Range', '2.00%');
+    validateMarketDataRow(1, 'LP Volume Min', '0.05634 tBTC');
+    validateMarketDataRow(2, 'LP Volume Max', '0.05864 tBTC');
+  });
+
   it('oracle displayed', () => {
     cy.getByTestId(marketTitle).contains('Oracle').click();
 

libs/market-info/src/components/market-info/MarketInfo.graphql

@@ -5,6 +5,7 @@ query MarketInfo($marketId: ID!, $interval: Interval!, $since: String!) {
     positionDecimalPlaces
     state
     tradingMode
+    lpPriceRange
     proposal {
       id
       rationale {
@@ -58,6 +59,7 @@ query MarketInfo($marketId: ID!, $interval: Interval!, $since: String!) {
         id
       }
       markPrice
+      midPrice
       bestBidVolume
       bestOfferVolume
       bestStaticBidVolume

libs/market-info/src/components/market-info/__generated__/MarketInfo.ts

@@ -10,7 +10,7 @@ export type MarketInfoQueryVariables = Types.Exact<{
 }>;
 
 
-export type MarketInfoQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, proposal?: { __typename?: 'Proposal', id?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string } } | null, marketTimestamps: { __typename?: 'MarketTimestamps', open: any, close: any }, openingAuction: { __typename?: 'AuctionDuration', durationSecs: number, volume: number }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string } } } | null> | null } | null, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, priceMonitoringSettings: { __typename?: 'PriceMonitoringSettings', parameters?: { __typename?: 'PriceMonitoringParameters', triggers?: Array<{ __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number }> | null } | null }, riskFactors?: { __typename?: 'RiskFactor', market: string, short: string, long: string } | null, data?: { __typename?: 'MarketData', markPrice: string, bestBidVolume: string, bestOfferVolume: string, bestStaticBidVolume: string, bestStaticOfferVolume: string, bestBidPrice: string, bestOfferPrice: string, trigger: Types.AuctionTrigger, openInterest: string, suppliedStake?: string | null, targetStake?: string | null, marketValueProxy: string, market: { __typename?: 'Market', id: string }, priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string, trigger: { __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number } }> | null } | null, liquidityMonitoringParameters: { __typename?: 'LiquidityMonitoringParameters', triggeringRatio: string, targetStakeParameters: { __typename?: 'TargetStakeParameters', timeWindow: number, scalingFactor: number } }, candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', volume: string } } | null> | null } | null, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number }, dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string }, dataSourceSpecBinding: { __typename?: 'DataSourceSpecToFutureBinding', settlementDataProperty: string, tradingTerminationProperty: string } } }, riskModel: { __typename?: 'LogNormalRiskModel', tau: number, riskAversionParameter: number, params: { __typename?: 'LogNormalModelParams', r: number, sigma: number, mu: number } } | { __typename?: 'SimpleRiskModel', params: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } } }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } } | null };
+export type MarketInfoQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, lpPriceRange: string, proposal?: { __typename?: 'Proposal', id?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string } } | null, marketTimestamps: { __typename?: 'MarketTimestamps', open: any, close: any }, openingAuction: { __typename?: 'AuctionDuration', durationSecs: number, volume: number }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string } } } | null> | null } | null, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, priceMonitoringSettings: { __typename?: 'PriceMonitoringSettings', parameters?: { __typename?: 'PriceMonitoringParameters', triggers?: Array<{ __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number }> | null } | null }, riskFactors?: { __typename?: 'RiskFactor', market: string, short: string, long: string } | null, data?: { __typename?: 'MarketData', markPrice: string, midPrice: string, bestBidVolume: string, bestOfferVolume: string, bestStaticBidVolume: string, bestStaticOfferVolume: string, bestBidPrice: string, bestOfferPrice: string, trigger: Types.AuctionTrigger, openInterest: string, suppliedStake?: string | null, targetStake?: string | null, marketValueProxy: string, market: { __typename?: 'Market', id: string }, priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string, trigger: { __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number } }> | null } | null, liquidityMonitoringParameters: { __typename?: 'LiquidityMonitoringParameters', triggeringRatio: string, targetStakeParameters: { __typename?: 'TargetStakeParameters', timeWindow: number, scalingFactor: number } }, candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', volume: string } } | null> | null } | null, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number }, dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string }, dataSourceSpecBinding: { __typename?: 'DataSourceSpecToFutureBinding', settlementDataProperty: string, tradingTerminationProperty: string } } }, riskModel: { __typename?: 'LogNormalRiskModel', tau: number, riskAversionParameter: number, params: { __typename?: 'LogNormalModelParams', r: number, sigma: number, mu: number } } | { __typename?: 'SimpleRiskModel', params: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } } }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } } | null };
 
 
 export const MarketInfoDocument = gql`
@@ -21,6 +21,7 @@ export const MarketInfoDocument = gql`
     positionDecimalPlaces
     state
     tradingMode
+    lpPriceRange
     proposal {
       id
       rationale {
@@ -74,6 +75,7 @@ export const MarketInfoDocument = gql`
         id
       }
       markPrice
+      midPrice
       bestBidVolume
       bestOfferVolume
       bestStaticBidVolume

libs/market-info/src/components/market-info/info-market.tsx

@@ -2,7 +2,9 @@ import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { totalFeesPercentage } from '@vegaprotocol/market-list';
 import {
+  addDecimalsFormatNumber,
   formatNumber,
+  formatNumberPercentage,
   removePaginationWrapper,
   t,
   useDataProvider,
@@ -182,6 +184,9 @@ export const Info = ({ market, onSelect }: InfoProps) => {
     state: Schema.MarketStateMapping[market.state],
   };
 
+  const assetDecimals =
+    market.tradableInstrument.instrument.product.settlementAsset.decimals;
+
   const marketSpecPanels = [
     {
       title: t('Key details'),
@@ -195,9 +200,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
               Schema.MarketTradingModeMapping[keyDetails.tradingMode],
             marketDecimalPlaces: market.decimalPlaces,
             positionDecimalPlaces: market.positionDecimalPlaces,
-            settlementAssetDecimalPlaces:
+            settlementAssetDecimalPlaces: assetDecimals,
-              market.tradableInstrument.instrument.product.settlementAsset
-                .decimals,
           }}
         />
       ),
@@ -295,10 +298,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
           />
           <MarketInfoTable
             data={{ referencePrice: trigger.referencePrice }}
-            decimalPlaces={
+            decimalPlaces={assetDecimals}
-              market?.tradableInstrument.instrument.product?.settlementAsset
-                .decimals
-            }
           />
         </>
       ),
@@ -324,10 +324,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
             suppliedStake: market.data && market.data?.suppliedStake,
             marketValueProxy: market.data && market.data.marketValueProxy,
           }}
-          decimalPlaces={
+          decimalPlaces={assetDecimals}
-            market.tradableInstrument.instrument.product.settlementAsset
-              .decimals
-          }
           assetSymbol={assetSymbol}
         >
           <Link
@@ -340,6 +337,36 @@ export const Info = ({ market, onSelect }: InfoProps) => {
         </MarketInfoTable>
       ),
     },
+    {
+      title: t('Liquidity price range'),
+      content: (
+        <MarketInfoTable
+          data={{
+            liquidityPriceRange: formatNumberPercentage(
+              new BigNumber(market.lpPriceRange).times(100)
+            ),
+            LPVolumeMin:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .minus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${assetSymbol}`,
+            LPVolumeMax:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .plus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${assetSymbol}`,
+          }}
+        ></MarketInfoTable>
+      ),
+    },
     {
       title: t('Oracle'),
       content: (
@@ -369,7 +396,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
       content: (
         <div className="">
           <ExternalLink
-            className="mb-2"
+            className="mb-2 w-full"
             href={generatePath(TokenLinks.PROPOSAL_PAGE, {
               tokenUrl: VEGA_TOKEN_URL,
               proposalId: market.proposal?.id || '',
@@ -383,7 +410,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
             {t('View governance proposal')}
           </ExternalLink>
           <ExternalLink
-            className="mt-2"
+            className="w-full"
             href={generatePath(TokenLinks.UPDATE_PROPOSAL_PAGE, {
               tokenUrl: VEGA_TOKEN_URL,
             })}

libs/market-info/src/components/market-info/market-info.mock.ts

@@ -92,12 +92,14 @@ export const marketInfoQuery = (
         short: '0.008571790367285281',
         long: '0.008508132993273576',
       },
+      lpPriceRange: '0.02',
       data: {
         __typename: 'MarketData',
         market: {
           __typename: 'Market',
           id: '54b78c1b877e106842ae156332ccec740ad98d6bad43143ac6a029501dd7c6e0',
         },
+        midPrice: '5749',
         markPrice: '5749',
         suppliedStake: '56767',
         marketValueProxy: '677678',

libs/market-info/src/components/market-info/tooltip-mapping.tsx

@@ -98,4 +98,7 @@ export const tooltipMapping: Record<string, ReactNode> = {
     `The market's liquidity requirement which is derived from the maximum open interest observed over a rolling time window.`
   ),
   suppliedStake: t('The current amount of liquidity supplied for this market.'),
+  liquidityPriceRange: t(
+    `Percentage move up and down from the mid price, which specifies the range of price levels over which automated liquidity provision orders will be deployed.`
+  ),
 };