From 33e528c569ed38302a7cdd00ec807cd6a3eb0036 Mon Sep 17 00:00:00 2001 From: Edd Date: Thu, 26 Jan 2023 14:47:31 +0000 Subject: [PATCH] fix(explorer): switch decimals used in lp commitment views (#2747) --- .../links/market-link/Market.graphql | 3 + .../links/market-link/__generated__/Market.ts | 5 +- .../order-summary/order-tx-summary.spec.tsx | 4 + .../price-in-market/price-in-market.spec.tsx | 79 +++++++++++-------- .../price-in-market/price-in-market.tsx | 24 +++++- .../txs/details/tx-liquidity-amend.tsx | 1 + .../txs/details/tx-liquidity-submission.tsx | 1 + libs/types/src/__generated__/types.ts | 4 + 8 files changed, 86 insertions(+), 35 deletions(-) diff --git a/apps/explorer/src/app/components/links/market-link/Market.graphql b/apps/explorer/src/app/components/links/market-link/Market.graphql index 4ff3896fa..8d6127a48 100644 --- a/apps/explorer/src/app/components/links/market-link/Market.graphql +++ b/apps/explorer/src/app/components/links/market-link/Market.graphql @@ -8,6 +8,9 @@ query ExplorerMarket($id: ID!) { product { ... on Future { quoteName + settlementAsset { + decimals + } } } } diff --git a/apps/explorer/src/app/components/links/market-link/__generated__/Market.ts b/apps/explorer/src/app/components/links/market-link/__generated__/Market.ts index 5798f459c..1daff22be 100644 --- a/apps/explorer/src/app/components/links/market-link/__generated__/Market.ts +++ b/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 + } } } } diff --git a/apps/explorer/src/app/components/order-summary/order-tx-summary.spec.tsx b/apps/explorer/src/app/components/order-summary/order-tx-summary.spec.tsx index a816eebeb..599860cfa 100644 --- a/apps/explorer/src/app/components/order-summary/order-tx-summary.spec.tsx +++ b/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, + }, }, }, }, diff --git a/apps/explorer/src/app/components/price-in-market/price-in-market.spec.tsx b/apps/explorer/src/app/components/price-in-market/price-in-market.spec.tsx index 2b35d3fb3..d685966a6 100644 --- a/apps/explorer/src/app/components/price-in-market/price-in-market.spec.tsx +++ b/apps/explorer/src/app/components/price-in-market/price-in-market.spec.tsx @@ -3,61 +3,78 @@ 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 ( - + ); } +const fullMock = { + request: { + query: ExplorerMarketDocument, + variables: { + id: '123', + }, + }, + result: { + data: { + market: { + id: '123', + decimalPlaces: 2, + state: 'irrelevant-test-data', + tradableInstrument: { + instrument: { + name: 'test dai', + product: { + __typename: 'Future', + quoteName: 'dai', + settlementAsset: { + decimals: 18, + }, + }, + }, + }, + }, + }, + }, +}; + 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', async () => { - const mock = { - request: { - query: ExplorerMarketDocument, - variables: { - id: '123', - }, - }, - result: { - data: { - market: { - id: '123', - decimalPlaces: 2, - state: 'irrelevant-test-data', - tradableInstrument: { - instrument: { - name: 'test dai', - product: { - __typename: 'Future', - quoteName: 'dai', - }, - }, - }, - }, - }, - }, - }; - - const res = render(renderComponent('100', '123', [mock])); + 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: { diff --git a/apps/explorer/src/app/components/price-in-market/price-in-market.tsx b/apps/explorer/src/app/components/price-in-market/price-in-market.tsx index 8cd1c5b3a..a40c67333 100644 --- a/apps/explorer/src/app/components/price-in-market/price-in-market.tsx +++ b/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) { - label = addDecimalsFormatNumber(price, 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( diff --git a/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx b/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx index b19666926..3d6273057 100644 --- a/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx +++ b/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx @@ -55,6 +55,7 @@ export const TxDetailsLiquidityAmendment = ({ diff --git a/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx b/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx index 55e8798f8..88676a52b 100644 --- a/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx +++ b/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx @@ -54,6 +54,7 @@ export const TxDetailsLiquiditySubmission = ({ diff --git a/libs/types/src/__generated__/types.ts b/libs/types/src/__generated__/types.ts index e880d64d8..c3b369b2c 100644 --- a/libs/types/src/__generated__/types.ts +++ b/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 */