diff --git a/hooks/useStatsData.ts b/hooks/useStatsData.ts index d68e992018..9012d2ab82 100644 --- a/hooks/useStatsData.ts +++ b/hooks/useStatsData.ts @@ -2,26 +2,26 @@ import { useMemo } from 'react'; import { useGetFuturesTradersStats } from 'queries/futures/useGetFuturesTradersStats'; import { useGetStatsVolumes } from 'queries/futures/useGetStatsVolumes'; -import { selectMarketPrice, selectMarkets } from 'state/futures/selectors'; +import { selectMarkPrices, selectMarkets } from 'state/futures/selectors'; import { useAppSelector } from 'state/hooks'; export type StatsTimeframe = '1M' | '1Y' | 'MAX'; const useStatsData = () => { const futuresMarkets = useAppSelector(selectMarkets); - const price = useAppSelector(selectMarketPrice); + const prices = useAppSelector(selectMarkPrices); const { data: volumeData, isLoading: volumeIsLoading } = useGetStatsVolumes(); const { data: tradersData, isLoading: tradersIsLoading } = useGetFuturesTradersStats(); const openInterestData = useMemo(() => { - return futuresMarkets.map(({ asset, marketSize }) => { + return futuresMarkets.map(({ marketKey, asset, marketSize }) => { return { asset, - openInterest: marketSize.mul(price).toNumber(), + openInterest: marketSize.mul(prices[marketKey]).toNumber(), }; }); - }, [futuresMarkets, price]); + }, [futuresMarkets, prices]); return { volumeData, diff --git a/package-lock.json b/package-lock.json index 04adadf986..3d95ff1d65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "kwenta", - "version": "6.1.0", + "version": "6.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "kwenta", - "version": "6.1.0", + "version": "6.1.1", "hasInstallScript": true, "dependencies": { "@artsy/fresnel": "1.7.0", @@ -20,8 +20,8 @@ "@rainbow-me/rainbowkit": "0.8.1", "@reach/dialog": "0.15.0", "@reduxjs/toolkit": "^1.8.5", - "@sentry/browser": "^7.28.0", - "@sentry/tracing": "^7.28.0", + "@sentry/browser": "^7.37.0", + "@sentry/tracing": "^7.37.0", "@socket.tech/plugin": "^1.0.3", "@synthetixio/contracts-interface": "2.76.3", "@synthetixio/optimism-networks": "2.74.6", @@ -6953,14 +6953,14 @@ } }, "node_modules/@sentry/browser": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.28.0.tgz", - "integrity": "sha512-UMsFwNOEpdX3pHdpJ9klSK2FbwG0n9FlrPSb2KMuuW/OA62Yq2YStShoyJ35ix3cwHnhF6/F+lXxJ/WfMvX6DQ==", - "dependencies": { - "@sentry/core": "7.28.0", - "@sentry/replay": "7.28.0", - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.37.0.tgz", + "integrity": "sha512-EMlSo4Ebtryd5id2nC31dwcLigwYPWjrAYt36vUJ/L47oXetaH4dndK6wqYyxR2sl8uP2GlsQUnWpGLHKyG3ww==", + "dependencies": { + "@sentry/core": "7.37.0", + "@sentry/replay": "7.37.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0", "tslib": "^1.9.3" }, "engines": { @@ -6973,12 +6973,12 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/@sentry/core": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.28.0.tgz", - "integrity": "sha512-9wY6mRzoyZ8TEW7X1jpciD0DSqqYPaggiJyykxaVbjwmJc7GjJpY94XHmSeKNUV4w7ddMhdsznhBmGNN6CFMfQ==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.37.0.tgz", + "integrity": "sha512-2M6aZKIG/1HgfE0hobQ9tKSo6ZsyBrSQqjtQhMVFwVzZJyFw3m1AqcrB+f0myi+1ay2MMPbJ+HhYtBPR3e4EvA==", "dependencies": { - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0", "tslib": "^1.9.3" }, "engines": { @@ -6991,29 +6991,26 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/@sentry/replay": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.28.0.tgz", - "integrity": "sha512-AuAREwMqZQhrGTxd69zY3uRPnfcrIRxL4wMefopzkjPx9Zboxkp2rsUJlrC0JLmReNML0ec7ZybZx94LunbE7Q==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.37.0.tgz", + "integrity": "sha512-uGqPjEz3dprahRNslK35tR2N5RGULMH5uL/1InU65O5XUgq/wTyQ7ZH0qy743J8U6dBo/2n7V/RQdB9lA2sLBw==", "dependencies": { - "@sentry/core": "7.28.0", - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0" + "@sentry/core": "7.37.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0" }, "engines": { "node": ">=12" - }, - "peerDependencies": { - "@sentry/browser": ">=7.24.0" } }, "node_modules/@sentry/tracing": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.28.0.tgz", - "integrity": "sha512-TH+f9AGqinX0B4EkP26ecF0ERm1KleTFHYEfpPEdbn92HFJua+Wvcm3uy6cwQ3njswi29sQHJv9bWQqp//mA+g==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.37.0.tgz", + "integrity": "sha512-DvFEwsXNsroVPNFOAblKwzKoO75dLhYw0XVmm+OlXTTQriJG5YkzcqazJ9pJ0l+f9ttswElGr3gLHMn797vsMA==", "dependencies": { - "@sentry/core": "7.28.0", - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0", + "@sentry/core": "7.37.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0", "tslib": "^1.9.3" }, "engines": { @@ -7026,19 +7023,19 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/@sentry/types": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.28.0.tgz", - "integrity": "sha512-F6tZldpvC3Lt8FPgJ6wRTcE7P9txIpHSBjyYz9wqFlVJx4IhBmrn6vZU1LvANUaK1jZZF2PW5tFRrVEnydfpqg==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.37.0.tgz", + "integrity": "sha512-p8iw5oGvWLIk7osMgXhxshUpebJD0riiuT3ihBP0DV+Gs8r0qdQ5gtcStl7Cn0D4013p4j/f3T5q85Z9ENE6fA==", "engines": { "node": ">=8" } }, "node_modules/@sentry/utils": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.28.0.tgz", - "integrity": "sha512-ag1RotlFSJnwUi/MYWY5iQ8aLcwrCBlD/qlGB43PvB3XGDl3e7E/pUy2bdblP7Q2uCKLVUBcudyaSgtvNqu9wA==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.37.0.tgz", + "integrity": "sha512-CN86EKQ07+SgqfgGehMJsgrCEjc0sl1YDcj2xf9dA0Bn3ma2MTDkCyutxVcRfc2IVWfqAN1rn/L8/BH2v2+eqA==", "dependencies": { - "@sentry/types": "7.28.0", + "@sentry/types": "7.37.0", "tslib": "^1.9.3" }, "engines": { @@ -64253,14 +64250,14 @@ } }, "@sentry/browser": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.28.0.tgz", - "integrity": "sha512-UMsFwNOEpdX3pHdpJ9klSK2FbwG0n9FlrPSb2KMuuW/OA62Yq2YStShoyJ35ix3cwHnhF6/F+lXxJ/WfMvX6DQ==", - "requires": { - "@sentry/core": "7.28.0", - "@sentry/replay": "7.28.0", - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.37.0.tgz", + "integrity": "sha512-EMlSo4Ebtryd5id2nC31dwcLigwYPWjrAYt36vUJ/L47oXetaH4dndK6wqYyxR2sl8uP2GlsQUnWpGLHKyG3ww==", + "requires": { + "@sentry/core": "7.37.0", + "@sentry/replay": "7.37.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0", "tslib": "^1.9.3" }, "dependencies": { @@ -64272,12 +64269,12 @@ } }, "@sentry/core": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.28.0.tgz", - "integrity": "sha512-9wY6mRzoyZ8TEW7X1jpciD0DSqqYPaggiJyykxaVbjwmJc7GjJpY94XHmSeKNUV4w7ddMhdsznhBmGNN6CFMfQ==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.37.0.tgz", + "integrity": "sha512-2M6aZKIG/1HgfE0hobQ9tKSo6ZsyBrSQqjtQhMVFwVzZJyFw3m1AqcrB+f0myi+1ay2MMPbJ+HhYtBPR3e4EvA==", "requires": { - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0", "tslib": "^1.9.3" }, "dependencies": { @@ -64289,23 +64286,23 @@ } }, "@sentry/replay": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.28.0.tgz", - "integrity": "sha512-AuAREwMqZQhrGTxd69zY3uRPnfcrIRxL4wMefopzkjPx9Zboxkp2rsUJlrC0JLmReNML0ec7ZybZx94LunbE7Q==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.37.0.tgz", + "integrity": "sha512-uGqPjEz3dprahRNslK35tR2N5RGULMH5uL/1InU65O5XUgq/wTyQ7ZH0qy743J8U6dBo/2n7V/RQdB9lA2sLBw==", "requires": { - "@sentry/core": "7.28.0", - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0" + "@sentry/core": "7.37.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0" } }, "@sentry/tracing": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.28.0.tgz", - "integrity": "sha512-TH+f9AGqinX0B4EkP26ecF0ERm1KleTFHYEfpPEdbn92HFJua+Wvcm3uy6cwQ3njswi29sQHJv9bWQqp//mA+g==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.37.0.tgz", + "integrity": "sha512-DvFEwsXNsroVPNFOAblKwzKoO75dLhYw0XVmm+OlXTTQriJG5YkzcqazJ9pJ0l+f9ttswElGr3gLHMn797vsMA==", "requires": { - "@sentry/core": "7.28.0", - "@sentry/types": "7.28.0", - "@sentry/utils": "7.28.0", + "@sentry/core": "7.37.0", + "@sentry/types": "7.37.0", + "@sentry/utils": "7.37.0", "tslib": "^1.9.3" }, "dependencies": { @@ -64317,16 +64314,16 @@ } }, "@sentry/types": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.28.0.tgz", - "integrity": "sha512-F6tZldpvC3Lt8FPgJ6wRTcE7P9txIpHSBjyYz9wqFlVJx4IhBmrn6vZU1LvANUaK1jZZF2PW5tFRrVEnydfpqg==" + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.37.0.tgz", + "integrity": "sha512-p8iw5oGvWLIk7osMgXhxshUpebJD0riiuT3ihBP0DV+Gs8r0qdQ5gtcStl7Cn0D4013p4j/f3T5q85Z9ENE6fA==" }, "@sentry/utils": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.28.0.tgz", - "integrity": "sha512-ag1RotlFSJnwUi/MYWY5iQ8aLcwrCBlD/qlGB43PvB3XGDl3e7E/pUy2bdblP7Q2uCKLVUBcudyaSgtvNqu9wA==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.37.0.tgz", + "integrity": "sha512-CN86EKQ07+SgqfgGehMJsgrCEjc0sl1YDcj2xf9dA0Bn3ma2MTDkCyutxVcRfc2IVWfqAN1rn/L8/BH2v2+eqA==", "requires": { - "@sentry/types": "7.28.0", + "@sentry/types": "7.37.0", "tslib": "^1.9.3" }, "dependencies": { diff --git a/package.json b/package.json index 89ad510cee..69cced1472 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kwenta", - "version": "6.1.0", + "version": "6.1.1", "scripts": { "dev": "next", "build": "next build", @@ -37,8 +37,8 @@ "@reach/dialog": "0.15.0", "@reduxjs/toolkit": "^1.8.5", "@socket.tech/plugin": "^1.0.3", - "@sentry/browser": "^7.28.0", - "@sentry/tracing": "^7.28.0", + "@sentry/browser": "^7.37.0", + "@sentry/tracing": "^7.37.0", "@synthetixio/contracts-interface": "2.76.3", "@synthetixio/optimism-networks": "2.74.6", "@synthetixio/providers": "2.74.10", diff --git a/sections/futures/MarketDetails/MarketDetails.tsx b/sections/futures/MarketDetails/MarketDetails.tsx index 34957b27a2..08a0ff0683 100644 --- a/sections/futures/MarketDetails/MarketDetails.tsx +++ b/sections/futures/MarketDetails/MarketDetails.tsx @@ -6,7 +6,6 @@ import media from 'styles/media'; import MarketsDropdown from '../Trade/MarketsDropdown'; import MarketDetail from './MarketDetail'; -import MobileMarketDetail from './MobileMarketDetail'; import useGetMarketData from './useGetMarketData'; type MarketDetailsProps = { @@ -26,9 +25,14 @@ const MarketDetails: React.FC = ({ mobile }) => { {Object.entries(marketData).map(([marketKey, data]) => ( - + ))} - {mobile && } ); diff --git a/sections/futures/MarketDetails/MobileMarketDetail.tsx b/sections/futures/MarketDetails/MobileMarketDetail.tsx deleted file mode 100644 index 0fb2ff2f27..0000000000 --- a/sections/futures/MarketDetails/MobileMarketDetail.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useMemo } from 'react'; -import styled from 'styled-components'; - -import { selectMarketInfo } from 'state/futures/selectors'; -import { useAppSelector } from 'state/hooks'; -import { formatDollars, formatPercent } from 'utils/formatters/number'; - -const MobileMarketDetail: React.FC = () => { - const marketInfo = useAppSelector(selectMarketInfo); - - const pausedClass = marketInfo?.isSuspended ? 'paused' : ''; - - const longSkewText = useMemo(() => { - return ( - !!marketInfo && - formatDollars(marketInfo.openInterest.longUSD, { - truncate: true, - }) - ); - }, [marketInfo]); - - const shortSkewText = useMemo(() => { - return ( - !!marketInfo && - formatDollars(marketInfo.openInterest.shortUSD, { - truncate: true, - }) - ); - }, [marketInfo]); - - return ( -
-

Skew

- -
- {!!marketInfo && formatPercent(marketInfo.openInterest.longPct ?? 0, { minDecimals: 0 })}{' '} - ({longSkewText}) -
-
- {!!marketInfo && formatPercent(marketInfo.openInterest.shortPct ?? 0, { minDecimals: 0 })}{' '} - ({shortSkewText}) -
- -
- ); -}; - -export default MobileMarketDetail; - -const SkewDataContainer = styled.div` - grid-row: 1; -`; diff --git a/sections/futures/MarketDetails/useGetMarketData.ts b/sections/futures/MarketDetails/useGetMarketData.ts index c5d2e5b278..3b40eb2b58 100644 --- a/sections/futures/MarketDetails/useGetMarketData.ts +++ b/sections/futures/MarketDetails/useGetMarketData.ts @@ -1,4 +1,3 @@ -import { wei } from '@synthetixio/wei'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -11,10 +10,8 @@ import { selectMarketAsset, selectMarketInfo, selectMarketKey, - selectMarketVolumes, - selectMarketPrices, - selectSkewAdjustedPrice, selectMarketPriceInfo, + selectSkewAdjustedPriceInfo, } from 'state/futures/selectors'; import { useAppSelector } from 'state/hooks'; import { selectPreviousDayPrices } from 'state/prices/selectors'; @@ -34,10 +31,8 @@ const useGetMarketData = (mobile?: boolean) => { const marketInfo = useAppSelector(selectMarketInfo); const pastRates = useAppSelector(selectPreviousDayPrices); - const futuresVolumes = useAppSelector(selectMarketVolumes); - const marketPrices = useAppSelector(selectMarketPrices); - const marketPrice = useAppSelector(selectSkewAdjustedPrice); - const marketPriceInfo = useAppSelector(selectMarketPriceInfo); + const markPrice = useAppSelector(selectSkewAdjustedPriceInfo); + const indexPrice = useAppSelector(selectMarketPriceInfo); const { selectedPriceCurrency } = useSelectedPriceCurrency(); @@ -48,17 +43,9 @@ const useGetMarketData = (mobile?: boolean) => { const pastPrice = pastRates.find((price) => price.synth === getDisplayAsset(marketAsset)); - const oraclePrice = marketPrices.onChain ?? wei(0); - const data: MarketData = useMemo(() => { const fundingValue = marketInfo?.currentFundingRate; - const marketName = `${marketInfo?.marketName ?? t('futures.market.info.default-market')}`; - - const futuresTradingVolume = marketInfo?.marketKey - ? futuresVolumes[marketInfo.marketKey]?.volume ?? wei(0) - : wei(0); - const oiCap = marketInfo?.marketLimit ? formatDollars(marketInfo?.marketLimit, { truncate: true }) : null; @@ -70,72 +57,70 @@ const useGetMarketData = (mobile?: boolean) => { ? `${formatDollars(marketInfo?.openInterest.shortUSD, { truncate: true })} / ${oiCap}` : NO_VALUE; + const indexPriceWei = indexPrice?.price ?? zeroBN; + if (mobile) { return { - [marketName]: { - value: formatDollars(marketPrice, { isAssetPrice: true }), - color: getColorFromPriceInfo(marketPriceInfo), - }, - [MarketDataKey.openInterestLong]: { - value: longOi, - }, - [MarketDataKey.openInterestShort]: { - value: shortOi, + [MarketDataKey.marketPrice]: { + value: markPrice ? formatDollars(markPrice.price) : NO_VALUE, + color: getColorFromPriceInfo(markPrice), }, - [MarketDataKey.dailyVolume]: { - value: formatDollars(futuresTradingVolume ?? zeroBN, { - truncate: true, - }), - }, - [t('futures.market.info.hourly-funding')]: { - value: fundingValue - ? formatPercent(fundingValue ?? zeroBN, { minDecimals: 6 }) - : NO_VALUE, - color: fundingValue?.gt(zeroBN) ? 'green' : fundingValue?.lt(zeroBN) ? 'red' : undefined, + [MarketDataKey.indexPrice]: { + value: indexPrice ? formatDollars(indexPrice.price) : NO_VALUE, }, [MarketDataKey.dailyChange]: { value: - marketPrice.gt(0) && pastPrice?.rate - ? `${formatCurrency( - selectedPriceCurrency.name, - marketPrice.sub(pastPrice.rate) ?? zeroBN, - { sign: '$', minDecimals, isAssetPrice: true } - )} (${formatPercent(marketPrice.sub(pastPrice.rate).div(marketPrice) ?? zeroBN)})` + indexPriceWei.gt(0) && pastPrice?.rate + ? formatPercent(indexPriceWei.sub(pastPrice.rate).div(indexPriceWei) ?? zeroBN) : NO_VALUE, color: pastPrice?.rate - ? marketPrice.sub(pastPrice.rate).gt(zeroBN) + ? indexPriceWei.sub(pastPrice.rate).gt(zeroBN) ? 'green' - : marketPrice.sub(pastPrice.rate).lt(zeroBN) + : indexPriceWei.sub(pastPrice.rate).lt(zeroBN) ? 'red' : '' : undefined, }, + [t('futures.market.info.hourly-funding')]: { + value: fundingValue + ? formatPercent(fundingValue ?? zeroBN, { minDecimals: 6 }) + : NO_VALUE, + color: fundingValue?.gt(zeroBN) ? 'green' : fundingValue?.lt(zeroBN) ? 'red' : undefined, + }, + [MarketDataKey.openInterestLong]: { + value: longOi, + }, + [MarketDataKey.openInterestShort]: { + value: shortOi, + }, }; } else { return { - [marketName]: { - value: formatDollars(marketPrice), - color: getColorFromPriceInfo(marketPriceInfo), + [MarketDataKey.marketPrice]: { + value: markPrice ? formatDollars(markPrice.price) : NO_VALUE, + color: getColorFromPriceInfo(markPrice), + }, + [MarketDataKey.indexPrice]: { + value: indexPrice ? formatDollars(indexPrice.price) : NO_VALUE, }, [MarketDataKey.dailyChange]: { value: - marketPrice.gt(0) && pastPrice?.rate - ? `${formatDollars(marketPrice.sub(pastPrice.rate) ?? zeroBN)} (${formatPercent( - marketPrice.sub(pastPrice.rate).div(marketPrice) ?? zeroBN - )})` + indexPriceWei.gt(0) && pastPrice?.rate + ? formatPercent(indexPriceWei.sub(pastPrice.rate).div(indexPriceWei) ?? zeroBN) : NO_VALUE, color: pastPrice?.rate - ? marketPrice.sub(pastPrice.rate).gt(zeroBN) + ? indexPriceWei.sub(pastPrice.rate).gt(zeroBN) ? 'green' - : marketPrice.sub(pastPrice.rate).lt(zeroBN) + : indexPriceWei.sub(pastPrice.rate).lt(zeroBN) ? 'red' : '' : undefined, }, - [MarketDataKey.dailyVolume]: { - value: formatDollars(futuresTradingVolume ?? zeroBN, { - truncate: true, - }), + [t('futures.market.info.hourly-funding')]: { + value: fundingValue + ? formatPercent(fundingValue ?? zeroBN, { minDecimals: 6 }) + : NO_VALUE, + color: fundingValue?.gt(zeroBN) ? 'green' : fundingValue?.lt(zeroBN) ? 'red' : undefined, }, [MarketDataKey.openInterestLong]: { value: longOi, @@ -143,26 +128,18 @@ const useGetMarketData = (mobile?: boolean) => { [MarketDataKey.openInterestShort]: { value: shortOi, }, - [t('futures.market.info.hourly-funding')]: { - value: fundingValue - ? formatPercent(fundingValue ?? zeroBN, { minDecimals: 6 }) - : NO_VALUE, - color: fundingValue?.gt(zeroBN) ? 'green' : fundingValue?.lt(zeroBN) ? 'red' : undefined, - }, }; } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ marketAsset, - marketPriceInfo, + markPrice, marketInfo, - oraclePrice, - futuresVolumes, selectedPriceCurrency.name, pastPrice?.rate, minDecimals, - marketPrice, + indexPrice, t, ]); diff --git a/sections/futures/MarketDetails/utils.ts b/sections/futures/MarketDetails/utils.ts index 89a4b3e72c..9d80828c83 100644 --- a/sections/futures/MarketDetails/utils.ts +++ b/sections/futures/MarketDetails/utils.ts @@ -33,8 +33,8 @@ const map: Record = { }; export enum MarketDataKey { - externalPrice = 'External Price', - oraclePrice = 'Oracle Price', + indexPrice = 'Index Price', + marketPrice = 'Market Price', dailyChange = '24H Change', dailyVolume = '24H Volume', dailyTrades = '24H Trades', @@ -45,8 +45,8 @@ export enum MarketDataKey { } export const marketDataKeyMap: Record = { - [MarketDataKey.externalPrice]: 'external-price', - [MarketDataKey.oraclePrice]: 'oracle-price', + [MarketDataKey.indexPrice]: 'index-price', + [MarketDataKey.marketPrice]: 'market-price', [MarketDataKey.dailyChange]: '24h-change', [MarketDataKey.dailyVolume]: '24h-vol', [MarketDataKey.dailyTrades]: '24h-trades', diff --git a/sections/futures/Trade/MarketsDropdown.tsx b/sections/futures/Trade/MarketsDropdown.tsx index 78511d44b2..b849cf8e29 100644 --- a/sections/futures/Trade/MarketsDropdown.tsx +++ b/sections/futures/Trade/MarketsDropdown.tsx @@ -157,6 +157,7 @@ const MarketsDropdown: React.FC = ({ mobile }) => { return (