fix(explorer): switch decimals used in lp commitment views (#2747)

apps/explorer/src/app/components/links/market-link/Market.graphql

@@ -8,6 +8,9 @@ query ExplorerMarket($id: ID!) {
         product {
           ... on Future {
             quoteName
+            settlementAsset {
+              decimals
+            }
           }
         }
       }

apps/explorer/src/app/components/links/market-link/__generated__/Market.ts

@@ -8,7 +8,7 @@ export type ExplorerMarketQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } | null };
+export type ExplorerMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', decimals: number } } } } } | null };
 
 
 export const ExplorerMarketDocument = gql`
@@ -22,6 +22,9 @@ export const ExplorerMarketDocument = gql`
         product {
           ... on Future {
             quoteName
+            settlementAsset {
+              decimals
+            }
           }
         }
       }

apps/explorer/src/app/components/order-summary/order-tx-summary.spec.tsx

@@ -97,6 +97,10 @@ describe('Order TX Summary component', () => {
                 product: {
                   __typename: 'Future',
                   quoteName: 'TEST',
+                  settlementAsset: {
+                    __typeName: 'SettlementAsset',
+                    decimals: 18,
+                  },
                 },
               },
             },

apps/explorer/src/app/components/price-in-market/price-in-market.spec.tsx

@@ -3,30 +3,29 @@ import { MockedProvider } from '@apollo/client/testing';
 import type { MockedResponse } from '@apollo/client/testing';
 import { render } from '@testing-library/react';
 import PriceInMarket from './price-in-market';
+import type { DecimalSource } from './price-in-market';
 import { ExplorerMarketDocument } from '../links/market-link/__generated__/Market';
 
 function renderComponent(
   price: string,
   marketId: string,
-  mocks: MockedResponse[]
+  mocks: MockedResponse[],
+  decimalSource: DecimalSource = 'MARKET'
 ) {
   return (
     <MockedProvider mocks={mocks} addTypename={false}>
       <MemoryRouter>
-        <PriceInMarket marketId={marketId} price={price} />
+        <PriceInMarket
+          marketId={marketId}
+          price={price}
+          decimalSource={decimalSource}
+        />
       </MemoryRouter>
     </MockedProvider>
   );
 }
 
-describe('Price in Market component', () => {
+const fullMock = {
-  it('Renders the raw price when there is no market data', () => {
-    const res = render(renderComponent('100', '123', []));
-    expect(res.getByText('100')).toBeInTheDocument();
-  });
-
-  it('Renders the formatted price when market data is fetched', async () => {
-    const mock = {
   request: {
     query: ExplorerMarketDocument,
     variables: {
@@ -45,19 +44,37 @@ describe('Price in Market component', () => {
             product: {
               __typename: 'Future',
               quoteName: 'dai',
+              settlementAsset: {
+                decimals: 18,
               },
             },
           },
         },
       },
     },
-    };
+  },
+};
 
-    const res = render(renderComponent('100', '123', [mock]));
+describe('Price in Market component', () => {
+  it('Renders the raw price when there is no market data', () => {
+    const res = render(renderComponent('100', '123', []));
+    expect(res.getByText('100')).toBeInTheDocument();
+  });
+
+  it('Renders the formatted price when market data is fetched, using market decimals by default', async () => {
+    const res = render(renderComponent('100', '123', [fullMock]));
     expect(await res.findByText('1.00')).toBeInTheDocument();
     expect(await res.findByText('dai')).toBeInTheDocument();
   });
 
+  it('Renders the formatted price when market data is fetched, using settlement decimals', async () => {
+    const res = render(
+      renderComponent('100', '123', [fullMock], 'SETTLEMENT_ASSET')
+    );
+    expect(await res.findByText('0.0000000000000001')).toBeInTheDocument();
+    expect(await res.findByText('dai')).toBeInTheDocument();
+  });
+
   it('Leaves the market id when the market is not found', async () => {
     const mock = {
       request: {

apps/explorer/src/app/components/price-in-market/price-in-market.tsx

@@ -3,16 +3,23 @@ import isUndefined from 'lodash/isUndefined';
 import { useExplorerMarketQuery } from '../links/market-link/__generated__/Market';
 import get from 'lodash/get';
 
+export type DecimalSource = 'MARKET' | 'SETTLEMENT_ASSET';
+
 export type PriceInMarketProps = {
   marketId: string;
   price: string;
+  decimalSource?: DecimalSource;
 };
 
 /**
  * Given a market ID and a price it will fetch the market
  * and format the price in that market's decimal places.
  */
-const PriceInMarket = ({ marketId, price }: PriceInMarketProps) => {
+const PriceInMarket = ({
+  marketId,
+  price,
+  decimalSource = 'MARKET',
+}: PriceInMarketProps) => {
   const { data } = useExplorerMarketQuery({
     variables: { id: marketId },
     fetchPolicy: 'cache-first',
@@ -20,8 +27,19 @@ const PriceInMarket = ({ marketId, price }: PriceInMarketProps) => {
 
   let label = price;
 
-  if (data && data.market?.decimalPlaces) {
+  if (data) {
+    if (decimalSource === 'MARKET' && data.market?.decimalPlaces) {
       label = addDecimalsFormatNumber(price, data.market.decimalPlaces);
+    } else if (
+      decimalSource === 'SETTLEMENT_ASSET' &&
+      data.market?.tradableInstrument.instrument.product.settlementAsset
+    ) {
+      label = addDecimalsFormatNumber(
+        price,
+        data.market?.tradableInstrument.instrument.product.settlementAsset
+          .decimals
+      );
+    }
   }
 
   const suffix = get(

apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx

@@ -55,6 +55,7 @@ export const TxDetailsLiquidityAmendment = ({
               <PriceInMarket
                 price={amendment.commitmentAmount}
                 marketId={marketId}
+                decimalSource="SETTLEMENT_ASSET"
               />
             </TableCell>
           </TableRow>

apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx

@@ -54,6 +54,7 @@ export const TxDetailsLiquiditySubmission = ({
               <PriceInMarket
                 price={submission.commitmentAmount}
                 marketId={marketId}
+                decimalSource="SETTLEMENT_ASSET"
               />
             </TableCell>
           </TableRow>

libs/types/src/__generated__/types.ts

@@ -3894,6 +3894,10 @@ export type Statistics = {
   chainVersion: Scalars['String'];
   /** RFC3339Nano current time (real) */
   currentTime: Scalars['Timestamp'];
+  /** Total number of events on the last block */
+  eventCount: Scalars['String'];
+  /** The number of events per second on the last block */
+  eventsPerSecond: Scalars['String'];
   /** RFC3339Nano genesis time of the chain */
   genesisTime: Scalars['Timestamp'];
   /** Number of orders per seconds */