add mark prices to state (#1923)

mark price object for all markets
Kwenta · Jan 30, 2023 · 9161c9c · 9161c9c
1 parent 87af206
commit 9161c9c
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 42 deletions.
diff --git a/sdk/types/futures.ts b/sdk/types/futures.ts
@@ -32,7 +32,7 @@ export type FuturesMarket<T = Wei> = {
 		makerFeeOffchainDelayedOrder: T;
 		takerFeeOffchainDelayedOrder: T;
 	};
-	openInterest?: {
+	openInterest: {
 		shortPct: number;
 		longPct: number;
 		shortUSD: T;

diff --git a/sections/dashboard/FuturesMarketsTable/FuturesMarketsTable.tsx b/sections/dashboard/FuturesMarketsTable/FuturesMarketsTable.tsx
@@ -15,9 +15,13 @@ import { DEFAULT_CRYPTO_DECIMALS } from 'constants/defaults';
 import ROUTES from 'constants/routes';
 import Connector from 'containers/Connector';
 import { getDisplayAsset } from 'sdk/utils/futures';
-import { selectFuturesType, selectMarkets, selectMarketVolumes } from 'state/futures/selectors';
+import {
+	selectFuturesType,
+	selectMarkets,
+	selectMarketVolumes,
+	selectMarkPrices,
+} from 'state/futures/selectors';
 import { useAppSelector } from 'state/hooks';
-import { selectPrices } from 'state/prices/selectors';
 import { pastRatesState } from 'store/futures';
 import { getSynthDescription, MarketKeyByAsset, FuturesMarketAsset } from 'utils/futures';
 
@@ -30,14 +34,14 @@ const FuturesMarketsTable: FC = () => {
 	const pastRates = useRecoilValue(pastRatesState);
 	const futuresVolumes = useAppSelector(selectMarketVolumes);
 	const accountType = useAppSelector(selectFuturesType);
-	const prices = useAppSelector(selectPrices);
+	const markPrices = useAppSelector(selectMarkPrices);
 
 	let data = useMemo(() => {
 		return futuresMarkets.map((market) => {
 			const description = getSynthDescription(market.asset, synthsMap, t);
 			const volume = futuresVolumes[market.marketKey]?.volume;
 			const pastPrice = pastRates.find((price) => price.synth === getDisplayAsset(market.asset));
-			const marketPrice = prices[market.asset]?.offChain ?? prices[market.asset]?.onChain ?? wei(0);
+			const marketPrice = markPrices[market.marketKey] ?? wei(0);
 
 			return {
 				asset: market.asset,
@@ -51,14 +55,14 @@ const FuturesMarketsTable: FC = () => {
 				fundingRate: market.currentFundingRate ?? null,
 				openInterest: market.marketSize.mul(marketPrice),
 				openInterestNative: market.marketSize,
-				longInterest: market.marketSize.add(market.marketSkew).div('2').abs().mul(marketPrice),
-				shortInterest: market.marketSize.sub(market.marketSkew).div('2').abs().mul(marketPrice),
+				longInterest: market.openInterest.longUSD,
+				shortInterest: market.openInterest.shortUSD,
 				marketSkew: market.marketSkew,
 				isSuspended: market.isSuspended,
 				marketClosureReason: market.marketClosureReason,
 			};
 		});
-	}, [synthsMap, futuresMarkets, pastRates, futuresVolumes, prices, t]);
+	}, [synthsMap, futuresMarkets, pastRates, futuresVolumes, markPrices, t]);
 
 	return (
 		<>
@@ -103,10 +107,10 @@ const FuturesMarketsTable: FC = () => {
 							{
 								Header: (
 									<TableHeader>
-										{t('dashboard.overview.futures-markets-table.oracle-price')}
+										{t('dashboard.overview.futures-markets-table.mark-price')}
 									</TableHeader>
 								),
-								accessor: 'oraclePrice',
+								accessor: 'price',
 								Cell: (cellProps: CellProps<typeof data[number]>) => {
 									const formatOptions = {
 										minDecimals: DEFAULT_CRYPTO_DECIMALS,

diff --git a/sections/futures/MarketDetails/MobileMarketDetail.tsx b/sections/futures/MarketDetails/MobileMarketDetail.tsx
@@ -12,10 +12,10 @@ const MobileMarketDetail: React.FC = () => {
 
 	const longSkewText = useMemo(() => {
 		return (
-			marketInfo?.openInterest &&
+			!!marketInfo &&
 			formatDollars(marketInfo.openInterest.longUSD, {
 				maxDecimals: 2,
-				...(marketInfo?.openInterest?.longUSD.gt(1e6)
+				...(marketInfo?.openInterest.longUSD.gt(1e6)
 					? { truncation: { divisor: 1e6, unit: 'M' } }
 					: {}),
 			})
@@ -24,10 +24,10 @@ const MobileMarketDetail: React.FC = () => {
 
 	const shortSkewText = useMemo(() => {
 		return (
-			marketInfo?.openInterest &&
+			!!marketInfo &&
 			formatDollars(marketInfo.openInterest.shortUSD, {
 				maxDecimals: 2,
-				...(marketInfo?.openInterest?.shortUSD.gt(1e6)
+				...(marketInfo?.openInterest.shortUSD.gt(1e6)
 					? { truncation: { divisor: 1e6, unit: 'M' } }
 					: {}),
 			})
@@ -39,13 +39,11 @@ const MobileMarketDetail: React.FC = () => {
 			<p className="heading">Skew</p>
 			<SkewDataContainer>
 				<div className={`value green ${pausedClass}`}>
-					{marketInfo?.openInterest &&
-						formatPercent(marketInfo.openInterest.longPct ?? 0, { minDecimals: 0 })}{' '}
+					{!!marketInfo && formatPercent(marketInfo.openInterest.longPct ?? 0, { minDecimals: 0 })}{' '}
 					({longSkewText})
 				</div>
 				<div className={`value red ${pausedClass}`}>
-					{marketInfo?.openInterest &&
-						formatPercent(marketInfo.openInterest.shortPct ?? 0, { minDecimals: 0 })}{' '}
+					{!!marketInfo && formatPercent(marketInfo.openInterest.shortPct ?? 0, { minDecimals: 0 })}{' '}
 					({shortSkewText})
 				</div>
 			</SkewDataContainer>

diff --git a/sections/futures/TradingHistory/SkewInfo.tsx b/sections/futures/TradingHistory/SkewInfo.tsx
@@ -30,15 +30,15 @@ const SkewInfo: React.FC = () => {
 	const data = useMemo(() => {
 		return marketInfo?.openInterest
 			? {
-					short: marketInfo?.openInterest?.shortPct,
-					long: marketInfo?.openInterest?.longPct,
-					shortValue: marketInfo?.openInterest?.shortUSD,
-					longValue: marketInfo?.openInterest?.longUSD,
-					shortText: formatCurrency(marketAsset, marketInfo?.openInterest?.shortUSD, {
+					short: marketInfo?.openInterest.shortPct,
+					long: marketInfo?.openInterest.longPct,
+					shortValue: marketInfo?.openInterest.shortUSD,
+					longValue: marketInfo?.openInterest.longUSD,
+					shortText: formatCurrency(marketAsset, marketInfo?.openInterest.shortUSD, {
 						sign: '$',
 						minDecimals: 0,
 					}),
-					longText: formatCurrency(marketAsset, marketInfo?.openInterest?.longUSD, {
+					longText: formatCurrency(marketAsset, marketInfo?.openInterest.longUSD, {
 						sign: '$',
 						minDecimals: 0,
 					}),

diff --git a/state/futures/selectors.ts b/state/futures/selectors.ts
@@ -27,7 +27,7 @@ import {
 	updatePositionUpnl,
 } from 'utils/futures';
 
-import { futuresPositionHistoryKeys, futuresPositionKeys } from './types';
+import { MarkPrices, futuresPositionHistoryKeys, futuresPositionKeys } from './types';
 
 export const selectFuturesType = (state: RootState) => state.futures.selectedType;
 
@@ -127,6 +127,19 @@ export const selectMarketPrices = createSelector(
 	}
 );
 
+export const selectMarkPrices = createSelector(selectMarkets, selectPrices, (markets, prices) => {
+	const markPrices: MarkPrices = {};
+	return markets.reduce((acc, market) => {
+		const price = prices[market.asset].offChain ?? wei(0);
+		return {
+			...acc,
+			[market.marketKey]: wei(price).mul(
+				wei(market.marketSkew).div(market.settings.skewScale).add(1)
+			),
+		};
+	}, markPrices);
+});
+
 export const selectFuturesAccount = createSelector(
 	selectFuturesType,
 	selectWallet,
@@ -661,8 +674,7 @@ export const selectDelayedOrderFee = createSelector(
 
 export const selectOpenInterest = createSelector(selectMarkets, (futuresMarkets) =>
 	futuresMarkets.reduce(
-		(total, { openInterest }) =>
-			total.add(openInterest?.shortUSD ?? wei(0)).add(openInterest?.longUSD ?? wei(0)),
+		(total, { openInterest }) => total.add(openInterest.shortUSD).add(openInterest.longUSD),
 		wei(0)
 	)
 );
diff --git a/state/futures/types.ts b/state/futures/types.ts
@@ -33,6 +33,8 @@ export type CrossMarginTradeInputsWithDelta<T = Wei> = CrossMarginTradeInputs<T>
 
 export type IsolatedMarginTradeInputs<T = Wei> = TradeSizeInputs<T>;
 
+export type MarkPrices<T = Wei> = Partial<Record<FuturesMarketKey, T>>;
+
 export type FundingRateSerialized = {
 	asset: FuturesMarketKey;
 	fundingTitle: string;

diff --git a/translations/en.json b/translations/en.json
@@ -465,7 +465,7 @@
 			"futures-markets-table": {
 				"market": "Market",
 				"oracle": "Oracle",
-				"oracle-price": "Oracle Price",
+				"mark-price": "Mark Price",
 				"daily-change": "24H Change",
 				"funding-rate": "1H Funding Rate",
 				"open-interest": "Open Interest",

diff --git a/utils/futures.ts b/utils/futures.ts
@@ -302,13 +302,11 @@ export const serializeMarket = (market: FuturesMarket): FuturesMarket<string> =>
 			makerFeeOffchainDelayedOrder: market.feeRates.makerFeeOffchainDelayedOrder.toString(),
 			takerFeeOffchainDelayedOrder: market.feeRates.takerFeeOffchainDelayedOrder.toString(),
 		},
-		openInterest: market.openInterest
-			? {
-					...market.openInterest,
-					shortUSD: market.openInterest.shortUSD.toString(),
-					longUSD: market.openInterest.longUSD.toString(),
-			  }
-			: undefined,
+		openInterest: {
+			...market.openInterest,
+			shortUSD: market.openInterest.shortUSD.toString(),
+			longUSD: market.openInterest.longUSD.toString(),
+		},
 		marketDebt: market.marketDebt.toString(),
 		marketSkew: market.marketSkew.toString(),
 		marketSize: market.marketSize.toString(),
@@ -341,13 +339,11 @@ export const unserializeMarkets = (markets: FuturesMarket<string>[]): FuturesMar
 			makerFeeOffchainDelayedOrder: wei(m.feeRates.makerFeeOffchainDelayedOrder),
 			takerFeeOffchainDelayedOrder: wei(m.feeRates.takerFeeOffchainDelayedOrder),
 		},
-		openInterest: m.openInterest
-			? {
-					...m.openInterest,
-					shortUSD: wei(m.openInterest.shortUSD),
-					longUSD: wei(m.openInterest.longUSD),
-			  }
-			: undefined,
+		openInterest: {
+			...m.openInterest,
+			shortUSD: wei(m.openInterest.shortUSD),
+			longUSD: wei(m.openInterest.longUSD),
+		},
 		marketDebt: wei(m.marketDebt),
 		marketSkew: wei(m.marketSkew),
 		marketSize: wei(m.marketSize),