From 8f050979f0f7a6d92e6c3dbb4788f5f0f2ca1e70 Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Thu, 12 Dec 2024 15:20:31 +1300 Subject: [PATCH 1/9] fix: latest tvl not available --- src/components/main/overview/StatsMetrics.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/main/overview/StatsMetrics.tsx b/src/components/main/overview/StatsMetrics.tsx index 55b1e1d..fbba837 100644 --- a/src/components/main/overview/StatsMetrics.tsx +++ b/src/components/main/overview/StatsMetrics.tsx @@ -10,8 +10,10 @@ import { PRICE_ORACLE_DECIMALS } from 'constants/query' export default function StatsMetrics() { const { data: assetParams, isLoading: assetLoading } = useAssetParams() const { data: totalAccounts, isLoading: accountsLoading } = useTotalAccounts() - const { data: overviewData, isLoading: tvlLoading } = useOverviewData('1') - const latestTvl = overviewData?.total_value_locked?.[0].value + const { data: overviewData, isLoading: tvlLoading } = useOverviewData('30') + const latestTvl = overviewData?.total_value_locked?.length + ? overviewData.total_value_locked[0]?.value || 0 + : 0 const listedAssetsCount = assetParams ? assetParams.filter((asset) => !asset.denom.includes('/UUSDC')).length From 5f6c0483d6cb2e2f635ddd8d2ee4e48d942690ab Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Thu, 12 Dec 2024 15:21:35 +1300 Subject: [PATCH 2/9] refactor: update copy icon --- src/components/main/Liquidations/Table/Cell/Transaction.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/main/Liquidations/Table/Cell/Transaction.tsx b/src/components/main/Liquidations/Table/Cell/Transaction.tsx index f0ba521..48ad0ac 100644 --- a/src/components/main/Liquidations/Table/Cell/Transaction.tsx +++ b/src/components/main/Liquidations/Table/Cell/Transaction.tsx @@ -1,7 +1,7 @@ import Button from 'components/common/Button' import Text from 'components/common/Text' import useClipboard from 'react-use-clipboard' -import { Chain, Check } from 'components/common/Icons' +import { Check, Copy } from 'components/common/Icons' import { Tooltip } from 'components/common/Tooltip' import { truncate } from 'utils/formatters' @@ -28,7 +28,7 @@ export default function Transaction(props: Props) { variant='transparent' iconClassName='w-3.5 h-3.5' className='!px-2' - leftIcon={isCopied ? : } + leftIcon={isCopied ? : } onClick={setCopied} /> From 3216d69744274362c19165f08f1280d52a3ccaa7 Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Fri, 13 Dec 2024 10:48:30 +1300 Subject: [PATCH 3/9] env: update types as per new api structure --- .../main/overview/OverviewCharts.tsx | 2 +- src/constants/chartData.ts | 25 +++++++++++-------- src/constants/timeframe.ts | 9 ++++--- src/types/app.d.ts | 11 +++++--- 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/components/main/overview/OverviewCharts.tsx b/src/components/main/overview/OverviewCharts.tsx index da2da63..667f3de 100644 --- a/src/components/main/overview/OverviewCharts.tsx +++ b/src/components/main/overview/OverviewCharts.tsx @@ -13,7 +13,7 @@ import { useOverviewChartData } from 'hooks/tokenomics/useOverviewChartData' import { useState } from 'react' export default function OverviewCharts() { - const [selectedTimeframe, setSelectedTimeframe] = useState(TIMEFRAME[0].value) + const [selectedTimeframe, setSelectedTimeframe] = useState(TIMEFRAME[2].value) const { data: overviewData, diff --git a/src/constants/chartData.ts b/src/constants/chartData.ts index 4466467..4f7e7d5 100644 --- a/src/constants/chartData.ts +++ b/src/constants/chartData.ts @@ -7,7 +7,7 @@ export const CHART_COLORS = { } export const DEFAULT_PERPS_GLOBAL_DATA: PerpsGlobalData = { - daily_trading_volume: [], + trading_volume: [], open_interest: { long: [], short: [], @@ -20,16 +20,17 @@ export const DEFAULT_PERPS_GLOBAL_DATA: PerpsGlobalData = { skew: [], imbalance_long_ratio: [], imbalance_short_ratio: [], - max_skew: [], }, funding_and_pnl: { funding_rate: [], unrealized_pnl: [], realized_pnl: [], + realized_price_pnl: [], }, fees: { - trading_fee: [], - net_funding_fee: [], + realized_trading_fee: [], + realized_net_funding_fee: [], + unrealized_net_funding_fee: [], }, vault_data: { deposit: [], @@ -59,8 +60,8 @@ export const PERPS_CHART_TRANSFORMATIONS = { { path: ['funding_and_pnl', 'realized_pnl'], targetKey: 'realized' }, ], fees: [ - { path: ['fees', 'trading_fee'], targetKey: 'trading_fees' }, - { path: ['fees', 'net_funding_fee'], targetKey: 'net_funding_fees' }, + { path: ['fees', 'realized_trading_fee'], targetKey: 'realized_trading_fees' }, + { path: ['fees', 'realized_net_funding_fee'], targetKey: 'realized_net_funding_fees' }, ], skewData: [ { path: ['skew_data', 'skew'], targetKey: 'skew' }, @@ -85,7 +86,7 @@ export const PERPS_CHART_TRANSFORMATIONS = { ], singleMetrics: [ { path: ['notional_liquidated'], targetKey: 'notional_liquidated' }, - { path: ['daily_trading_volume'], targetKey: 'daily_trading_volume' }, + { path: ['trading_volume'], targetKey: 'trading_volume' }, { path: ['skew_data', 'imbalance_long_ratio'], targetKey: 'imbalance_long' }, ], combinedMetrics: [ @@ -129,8 +130,12 @@ export const PERPS_CHART_CONFIGS = { }, }, tradingFees: [ - { dataKey: 'trading_fees', color: CHART_COLORS.secondary, name: 'Trading Fees' }, - { dataKey: 'net_funding_fees', color: CHART_COLORS.tertiary, name: 'Net Funding Fees' }, + { dataKey: 'realized_trading_fees', color: CHART_COLORS.secondary, name: 'Trading Fees' }, + { + dataKey: 'realized_net_funding_fees', + color: CHART_COLORS.tertiary, + name: 'Net Funding Fees', + }, ], skew: [ { dataKey: 'skew', color: CHART_COLORS.tertiary, name: 'Skew' }, @@ -156,7 +161,7 @@ export const PERPS_CHART_CONFIGS = { ], tradingVolume: [ { - dataKey: 'daily_trading_volume', + dataKey: 'trading_volume', color: CHART_COLORS.primary, name: 'Daily Trading Volume', }, diff --git a/src/constants/timeframe.ts b/src/constants/timeframe.ts index 05f0b31..69cfddc 100644 --- a/src/constants/timeframe.ts +++ b/src/constants/timeframe.ts @@ -1,5 +1,6 @@ export const TIMEFRAME = [ - { value: '7', label: '7D' }, - { value: '30', label: '30D' }, - { value: '90', label: '90D' }, -] + { value: '24', label: '24H', granularity: 'hour', unit: 24 }, + { value: '7', label: '7D', granularity: 'day', unit: 7 }, + { value: '30', label: '30D', granularity: 'day', unit: 30 }, + { value: '90', label: '90D', granularity: 'day', unit: 90 }, +] as const diff --git a/src/types/app.d.ts b/src/types/app.d.ts index ded93ce..fea94dd 100644 --- a/src/types/app.d.ts +++ b/src/types/app.d.ts @@ -1540,18 +1540,19 @@ interface PerpsSkewData { skew: DateValue[] imbalance_long_ratio: DateValue[] imbalance_short_ratio: DateValue[] - max_skew: DateValue[] } interface PerpsFundingAndPnL { funding_rate: DateValue[] unrealized_pnl: DateValue[] realized_pnl: DateValue[] + realized_price_pnl: DateValue[] } interface PerpsFees { - trading_fee: DateValue[] - net_funding_fee: DateValue[] + realized_trading_fee: DateValue[] + realized_net_funding_fee: DateValue[] + unrealized_net_funding_fee: DateValue[] } interface PerpsVaultData { @@ -1561,13 +1562,14 @@ interface PerpsVaultData { } interface PerpsGlobalData { - daily_trading_volume: DateValue[] + trading_volume: DateValue[] open_interest: PerpsOpenInterest skew_data: PerpsSkewData funding_and_pnl: PerpsFundingAndPnL fees: PerpsFees vault_data: PerpsVaultData notional_liquidated: DateValue[] + cumulative_trading_volume: string notional_at_risk: string accounts_at_risk: string total_accounts: string @@ -1583,6 +1585,7 @@ interface PerpsMarketData { skew_data: PerpsSkewData funding_and_pnl: PerpsFundingAndPnL fees: PerpsFees + cumulative_trading_volume: string notional_at_risk: string accounts_at_risk: string total_accounts: string From b42a5f8b52c2d6c4fe7b301afdb1a09160b11381 Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Fri, 13 Dec 2024 13:35:08 +1300 Subject: [PATCH 4/9] feat: add two new charts --- src/api/perps/getPerpsGlobalStats.ts | 10 +++- .../SynchronizedChartBody.tsx | 2 +- src/components/main/perps/PerpsMetrics.tsx | 12 ++-- .../perpsMarketStats/StatisticsPanel.tsx | 4 +- .../main/perps/perpsMarketStats/index.tsx | 60 ++++++++++++++++--- src/constants/chartData.ts | 57 +++++++++++++++++- src/constants/timeframe.ts | 2 +- src/hooks/perps/usePerpsChartData.ts | 7 ++- src/pages/PerpsOverviewPage.tsx | 2 +- src/types/app.d.ts | 4 +- tailwind.config.js | 1 + 11 files changed, 135 insertions(+), 26 deletions(-) diff --git a/src/api/perps/getPerpsGlobalStats.ts b/src/api/perps/getPerpsGlobalStats.ts index 533d657..23d2429 100644 --- a/src/api/perps/getPerpsGlobalStats.ts +++ b/src/api/perps/getPerpsGlobalStats.ts @@ -1,16 +1,22 @@ import chains from 'chains' import { DEFAULT_PERPS_GLOBAL_DATA } from 'constants/chartData' +import { TIMEFRAME } from 'constants/timeframe' import { getApiBaseUrl } from 'utils/api' import { getCurrentChainId } from 'utils/getCurrentChainId' -export default async function getPerpsGlobalStats(timeframe: string = '7') { +export default async function getPerpsGlobalStats(timeframe: string = '30') { const chainId = getCurrentChainId() const chainConfig = chains[chainId] if (!chainConfig.perps) return try { const baseUrl = getApiBaseUrl() + const timeframeConfig = TIMEFRAME.find((t) => t.value === timeframe) || { + granularity: 'day', + unit: Number(timeframe), + } + const url = new URL( - `${baseUrl}/v2/perps_overview?chain=neutron&days=${timeframe}&product=creditmanager&response_type=global`, + `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.unit}&product=creditmanager&response_type=global`, ) const response = await fetch(url.toString()) const data = (await response.json()) as PerpsGlobalOverview diff --git a/src/components/common/Chart/SynchronizedChart/SynchronizedChartBody.tsx b/src/components/common/Chart/SynchronizedChart/SynchronizedChartBody.tsx index c6f7f9e..4653b5a 100644 --- a/src/components/common/Chart/SynchronizedChart/SynchronizedChartBody.tsx +++ b/src/components/common/Chart/SynchronizedChart/SynchronizedChartBody.tsx @@ -82,7 +82,7 @@ export default function SynchronizedChartBody(props: Props) { const reversedData = [...data].reverse() return ( -
+
acc.plus(BN(day.value || 0)), - BN_ZERO, - ) - const perpsMetrics: Metric[] = [ { - value: totalTradingVolume?.shiftedBy(-PRICE_ORACLE_DECIMALS) || BN(0), + value: + BN(perpsStats?.cumulative_trading_volume || 0).shiftedBy(-PRICE_ORACLE_DECIMALS) || BN(0), label: 'Total Trading Volume', isCurrency: true, formatOptions: { @@ -38,7 +34,9 @@ export default function PerpsMetrics() { showSignPrefix: true, }, { - value: BN(perpsStats?.fees.trading_fee[0]?.value || 0).shiftedBy(-PRICE_ORACLE_DECIMALS), + value: BN(perpsStats?.fees.realized_trading_fee[0]?.value || 0).shiftedBy( + -PRICE_ORACLE_DECIMALS, + ), label: 'Total Trading Fees', isCurrency: true, formatOptions: { diff --git a/src/components/main/perps/perpsMarketStats/StatisticsPanel.tsx b/src/components/main/perps/perpsMarketStats/StatisticsPanel.tsx index 5bf93e9..7fac24e 100644 --- a/src/components/main/perps/perpsMarketStats/StatisticsPanel.tsx +++ b/src/components/main/perps/perpsMarketStats/StatisticsPanel.tsx @@ -40,7 +40,7 @@ export default function StatisticsPanel(props: Props) { const metrics: Metric[] = [ { - value: getLatestValue(data.daily_trading_volume), + value: getLatestValue(data.trading_volume), label: 'Daily Trading Volume', isCurrency: true, formatOptions: { maxDecimals: 4, minDecimals: 2, abbreviated: true }, @@ -56,7 +56,7 @@ export default function StatisticsPanel(props: Props) { }, }, { - value: getLatestValue(data.fees.trading_fee || []), + value: getLatestValue(data.fees.realized_trading_fee || []), label: 'Trading Fees', isCurrency: true, formatOptions: { abbreviated: true }, diff --git a/src/components/main/perps/perpsMarketStats/index.tsx b/src/components/main/perps/perpsMarketStats/index.tsx index 997269e..0d3fcfa 100644 --- a/src/components/main/perps/perpsMarketStats/index.tsx +++ b/src/components/main/perps/perpsMarketStats/index.tsx @@ -35,11 +35,12 @@ export default function PerpsMarketStats(props: Props) { openInterestData, fundingRateData, pnlData, + realizedPnlBreakdown, feesData, skewData, imbalanceRatioData, notionalLiquidatedData, - dailyTradingVolumeData, + tradingVolumeData, vaultData, combinedMetricsData, } = usePerpsChartData(perpsStats || DEFAULT_PERPS_GLOBAL_DATA) @@ -93,6 +94,33 @@ export default function PerpsMarketStats(props: Props) { }) }, [pnlData]) + const netFundingFeesData = useMemo(() => { + return feesData.map((item) => { + const netFundingFees = BN(item.realized_net_funding_fees) + .plus(BN(item.unrealized_net_funding_fees)) + .toNumber() + + return { + ...item, + netTotal: netFundingFees, + } + }) + }, [feesData]) + + const realizedPnlBreakdownData = useMemo(() => { + return realizedPnlBreakdown.map((item) => { + const total = BN(item.realized_net_funding_fees) + .plus(BN(item.realized_trading_fees)) + .plus(BN(item.realized_price_pnl)) + .toNumber() + + return { + ...item, + total, + } + }) + }, [realizedPnlBreakdown]) + if (perpsStatsLoading) return (
@@ -113,10 +141,10 @@ export default function PerpsMarketStats(props: Props) {
@@ -124,7 +152,7 @@ export default function PerpsMarketStats(props: Props) { data={feesData} lines={PERPS_CHART_CONFIGS.tradingFees} height='h-80' - title='Cumulative Realized Trading and Net Funding Fees' + title='Cumulative Realized Trading and Funding Fees' />
@@ -200,11 +228,29 @@ export default function PerpsMarketStats(props: Props) { config={PERPS_CHART_CONFIGS.pnl} /> +
+
+ +
+
+ +
+
{!isGlobalStats && ( diff --git a/src/constants/chartData.ts b/src/constants/chartData.ts index 4f7e7d5..ddebee7 100644 --- a/src/constants/chartData.ts +++ b/src/constants/chartData.ts @@ -4,6 +4,7 @@ export const CHART_COLORS = { primary: '#30E0A1', secondary: '#AB47BC', tertiary: '#580DA3', + quaternary: '#3DB2FF', } export const DEFAULT_PERPS_GLOBAL_DATA: PerpsGlobalData = { @@ -38,6 +39,7 @@ export const DEFAULT_PERPS_GLOBAL_DATA: PerpsGlobalData = { vault_collateralization_ratio: [], }, notional_liquidated: [], + cumulative_trading_volume: '0', notional_at_risk: '0', accounts_at_risk: '0', total_accounts: '0', @@ -59,9 +61,15 @@ export const PERPS_CHART_TRANSFORMATIONS = { { path: ['funding_and_pnl', 'unrealized_pnl'], targetKey: 'unrealized' }, { path: ['funding_and_pnl', 'realized_pnl'], targetKey: 'realized' }, ], + realizedPnlBreakdown: [ + { path: ['fees', 'realized_trading_fee'], targetKey: 'realized_trading_fees' }, + { path: ['fees', 'realized_net_funding_fee'], targetKey: 'realized_net_funding_fees' }, + { path: ['funding_and_pnl', 'realized_price_pnl'], targetKey: 'realized_price_pnl' }, + ], fees: [ { path: ['fees', 'realized_trading_fee'], targetKey: 'realized_trading_fees' }, { path: ['fees', 'realized_net_funding_fee'], targetKey: 'realized_net_funding_fees' }, + { path: ['fees', 'unrealized_net_funding_fee'], targetKey: 'unrealized_net_funding_fees' }, ], skewData: [ { path: ['skew_data', 'skew'], targetKey: 'skew' }, @@ -130,11 +138,15 @@ export const PERPS_CHART_CONFIGS = { }, }, tradingFees: [ - { dataKey: 'realized_trading_fees', color: CHART_COLORS.secondary, name: 'Trading Fees' }, + { + dataKey: 'realized_trading_fees', + color: CHART_COLORS.secondary, + name: 'Realized Trading Fees', + }, { dataKey: 'realized_net_funding_fees', color: CHART_COLORS.tertiary, - name: 'Net Funding Fees', + name: 'Realized Funding Fees', }, ], skew: [ @@ -163,7 +175,7 @@ export const PERPS_CHART_CONFIGS = { { dataKey: 'trading_volume', color: CHART_COLORS.primary, - name: 'Daily Trading Volume', + name: 'Trading Volume', }, ], imbalanceRatio: [ @@ -195,6 +207,45 @@ export const PERPS_CHART_CONFIGS = { isPercentage: true, }, ], + netFundingFees: [ + { + dataKey: 'realized_net_funding_fees', + color: CHART_COLORS.tertiary, + name: 'Realized Funding Fees', + }, + { + dataKey: 'unrealized_net_funding_fees', + color: CHART_COLORS.secondary, + name: 'Unrealized Funding Fees', + }, + { + dataKey: 'netTotal', + color: CHART_COLORS.primary, + name: 'Net Funding Fees', + }, + ], + realizedPnlBreakdown: [ + { + dataKey: 'realized_trading_fees', + color: CHART_COLORS.tertiary, + name: 'Realized Trading Fees', + }, + { + dataKey: 'realized_net_funding_fees', + color: CHART_COLORS.secondary, + name: 'Realized Funding Fees', + }, + { + dataKey: 'realized_price_pnl', + color: CHART_COLORS.quaternary, + name: 'Realized Price PnL', + }, + { + dataKey: 'total', + color: CHART_COLORS.primary, + name: 'Total', + }, + ], totalPnl: [ { dataKey: 'realized', diff --git a/src/constants/timeframe.ts b/src/constants/timeframe.ts index 69cfddc..6356dab 100644 --- a/src/constants/timeframe.ts +++ b/src/constants/timeframe.ts @@ -3,4 +3,4 @@ export const TIMEFRAME = [ { value: '7', label: '7D', granularity: 'day', unit: 7 }, { value: '30', label: '30D', granularity: 'day', unit: 30 }, { value: '90', label: '90D', granularity: 'day', unit: 90 }, -] as const +] diff --git a/src/hooks/perps/usePerpsChartData.ts b/src/hooks/perps/usePerpsChartData.ts index 47c36ca..1ef8b74 100644 --- a/src/hooks/perps/usePerpsChartData.ts +++ b/src/hooks/perps/usePerpsChartData.ts @@ -5,6 +5,10 @@ export const usePerpsChartData = (data: PerpsGlobalData | PerpsMarketData) => { const openInterestData = useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.openInterest) const fundingRateData = useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.fundingRate) const pnlData = useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.pnl) + const realizedPnlBreakdown = useChartDataTransform( + data, + PERPS_CHART_TRANSFORMATIONS.realizedPnlBreakdown, + ) const feesData = useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.fees) const skewData = useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.skewData) const vaultData = useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.vaultData) @@ -18,10 +22,11 @@ export const usePerpsChartData = (data: PerpsGlobalData | PerpsMarketData) => { openInterestData, fundingRateData, pnlData, + realizedPnlBreakdown, feesData, skewData, notionalLiquidatedData: singleMetrics, - dailyTradingVolumeData: singleMetrics, + tradingVolumeData: singleMetrics, imbalanceRatioData: singleMetrics, vaultData, combinedMetricsData, diff --git a/src/pages/PerpsOverviewPage.tsx b/src/pages/PerpsOverviewPage.tsx index 59c63f6..5e29fad 100644 --- a/src/pages/PerpsOverviewPage.tsx +++ b/src/pages/PerpsOverviewPage.tsx @@ -11,7 +11,7 @@ import usePerpsEnabledAssets from 'hooks/assets/usePerpsEnabledAssets' export default function PerpsOverviewPage() { const [selectedOption, setSelectedOption] = useState('total') - const [selectedTimeframe, setSelectedTimeframe] = useState(TIMEFRAME[0].value) + const [selectedTimeframe, setSelectedTimeframe] = useState(TIMEFRAME[2].value) const perpsAssets = usePerpsEnabledAssets() const displayOptions = useMemo( diff --git a/src/types/app.d.ts b/src/types/app.d.ts index fea94dd..dc8bcb7 100644 --- a/src/types/app.d.ts +++ b/src/types/app.d.ts @@ -1488,6 +1488,8 @@ interface Token { interface TimeframeOption { value: string label: string + granularity?: string + unit?: number } interface MergedChartData { @@ -1580,7 +1582,7 @@ interface PerpsGlobalOverview { } interface PerpsMarketData { denom: string - daily_trading_volume: DateValue[] + trading_volume: DateValue[] open_interest: PerpsOpenInterest skew_data: PerpsSkewData funding_and_pnl: PerpsFundingAndPnL diff --git a/tailwind.config.js b/tailwind.config.js index 06f0745..37ddfa5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -192,6 +192,7 @@ module.exports = { 65: '250px', 75: '300px', 100: '400px', + 140: '560px', 'screen-full': '100dvh', 'screen/90': '90dvh', 'screen/80': '80dvh', From a22424c84a8b81d5f75cc8fb2cad74d8a5868037 Mon Sep 17 00:00:00 2001 From: Patricie <99055449+Patricie29@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:36:23 +1300 Subject: [PATCH 5/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7854d82..02871f1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Mars Protocol Rsik Dashboard +# Mars Protocol Risk Dashboard ![https://risk.marsprotocol.io](https://raw.githubusercontent.com/mars-protocol/mars-rd-fe/main/public/banner.png) From 7e46ba0487b1bacbabd29921deb0b1ac2cf3cca5 Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Fri, 13 Dec 2024 14:57:44 +1300 Subject: [PATCH 6/9] refactor: update markets api to match new structure --- src/api/perps/getPerpsGlobalStats.ts | 4 ++-- src/api/perps/getPerpsMarketStats.ts | 9 +++++++-- src/components/main/perps/PerpsMetrics.tsx | 5 ++--- src/components/main/perps/perpsMarketStats/index.tsx | 1 - src/constants/timeframe.ts | 8 ++++---- 5 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/api/perps/getPerpsGlobalStats.ts b/src/api/perps/getPerpsGlobalStats.ts index 23d2429..9b0c616 100644 --- a/src/api/perps/getPerpsGlobalStats.ts +++ b/src/api/perps/getPerpsGlobalStats.ts @@ -12,11 +12,11 @@ export default async function getPerpsGlobalStats(timeframe: string = '30') { const baseUrl = getApiBaseUrl() const timeframeConfig = TIMEFRAME.find((t) => t.value === timeframe) || { granularity: 'day', - unit: Number(timeframe), + value: Number(timeframe), } const url = new URL( - `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.unit}&product=creditmanager&response_type=global`, + `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&product=creditmanager&response_type=global`, ) const response = await fetch(url.toString()) const data = (await response.json()) as PerpsGlobalOverview diff --git a/src/api/perps/getPerpsMarketStats.ts b/src/api/perps/getPerpsMarketStats.ts index ed7f5e9..535d672 100644 --- a/src/api/perps/getPerpsMarketStats.ts +++ b/src/api/perps/getPerpsMarketStats.ts @@ -1,13 +1,18 @@ +import { TIMEFRAME } from 'constants/timeframe' import { getApiBaseUrl } from 'utils/api' export default async function getPerpsMarketStats( market: string = 'untrn', - timeframe: string = '7', + timeframe: string = '30', ) { try { const baseUrl = getApiBaseUrl() + const timeframeConfig = TIMEFRAME.find((t) => t.value === timeframe) || { + granularity: 'day', + value: Number(timeframe), + } const url = new URL( - `${baseUrl}/v2/perps_overview?chain=neutron&days=${timeframe}&product=creditmanager&response_type=market&market=${market}`, + `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&product=creditmanager&market=${market}&response_type=market`, ) const response = await fetch(url.toString()) const data = (await response.json()) as PerpsMarketOverview diff --git a/src/components/main/perps/PerpsMetrics.tsx b/src/components/main/perps/PerpsMetrics.tsx index 70827b3..5aafe10 100644 --- a/src/components/main/perps/PerpsMetrics.tsx +++ b/src/components/main/perps/PerpsMetrics.tsx @@ -10,8 +10,7 @@ export default function PerpsMetrics() { const perpsMetrics: Metric[] = [ { - value: - BN(perpsStats?.cumulative_trading_volume || 0).shiftedBy(-PRICE_ORACLE_DECIMALS) || BN(0), + value: BN(perpsStats?.cumulative_trading_volume || 0).shiftedBy(-PRICE_ORACLE_DECIMALS), label: 'Total Trading Volume', isCurrency: true, formatOptions: { @@ -34,7 +33,7 @@ export default function PerpsMetrics() { showSignPrefix: true, }, { - value: BN(perpsStats?.fees.realized_trading_fee[0]?.value || 0).shiftedBy( + value: BN(perpsStats?.fees?.realized_trading_fee?.[0]?.value || 0).shiftedBy( -PRICE_ORACLE_DECIMALS, ), label: 'Total Trading Fees', diff --git a/src/components/main/perps/perpsMarketStats/index.tsx b/src/components/main/perps/perpsMarketStats/index.tsx index 0d3fcfa..f24eb22 100644 --- a/src/components/main/perps/perpsMarketStats/index.tsx +++ b/src/components/main/perps/perpsMarketStats/index.tsx @@ -214,7 +214,6 @@ export default function PerpsMarketStats(props: Props) { diff --git a/src/constants/timeframe.ts b/src/constants/timeframe.ts index 6356dab..aee556c 100644 --- a/src/constants/timeframe.ts +++ b/src/constants/timeframe.ts @@ -1,6 +1,6 @@ export const TIMEFRAME = [ - { value: '24', label: '24H', granularity: 'hour', unit: 24 }, - { value: '7', label: '7D', granularity: 'day', unit: 7 }, - { value: '30', label: '30D', granularity: 'day', unit: 30 }, - { value: '90', label: '90D', granularity: 'day', unit: 90 }, + { value: '24', label: '24H', granularity: 'hour' }, + { value: '7', label: '7D', granularity: 'day' }, + { value: '30', label: '30D', granularity: 'day' }, + { value: '90', label: '90D', granularity: 'day' }, ] From fe1ea1398030279317bdf01fc350e096ec034ad8 Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Fri, 13 Dec 2024 15:45:43 +1300 Subject: [PATCH 7/9] tidy: cleanup --- src/components/main/Liquidations/LiquidationsMetrics.tsx | 2 +- src/components/main/overview/StatsMetrics.tsx | 2 +- src/components/main/perps/PerpsMetrics.tsx | 5 ++--- src/pages/PerpsOverviewPage.tsx | 2 +- src/types/app.d.ts | 1 - 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/main/Liquidations/LiquidationsMetrics.tsx b/src/components/main/Liquidations/LiquidationsMetrics.tsx index 51f58ae..ed786e1 100644 --- a/src/components/main/Liquidations/LiquidationsMetrics.tsx +++ b/src/components/main/Liquidations/LiquidationsMetrics.tsx @@ -69,7 +69,7 @@ export default function LiquidationsMetrics() { +
} diff --git a/src/components/main/overview/StatsMetrics.tsx b/src/components/main/overview/StatsMetrics.tsx index fbba837..a41149e 100644 --- a/src/components/main/overview/StatsMetrics.tsx +++ b/src/components/main/overview/StatsMetrics.tsx @@ -25,7 +25,7 @@ export default function StatsMetrics() { +
} diff --git a/src/components/main/perps/PerpsMetrics.tsx b/src/components/main/perps/PerpsMetrics.tsx index 5aafe10..a2578c3 100644 --- a/src/components/main/perps/PerpsMetrics.tsx +++ b/src/components/main/perps/PerpsMetrics.tsx @@ -1,9 +1,8 @@ import MetricsCard from 'components/common/Card/MetricsCard' +import usePerpsStats from 'hooks/perps/usePerpsGlobalStats' import { BN } from 'utils/helpers' -import { BN_ZERO } from 'constants/math' import { GridLandscape } from 'components/common/Icons' import { PRICE_ORACLE_DECIMALS } from 'constants/query' -import usePerpsStats from 'hooks/perps/usePerpsGlobalStats' export default function PerpsMetrics() { const { data: perpsStats, isLoading: perpsStatsLoading } = usePerpsStats('total', '30') @@ -50,7 +49,7 @@ export default function PerpsMetrics() { +
} diff --git a/src/pages/PerpsOverviewPage.tsx b/src/pages/PerpsOverviewPage.tsx index 5e29fad..3fe196c 100644 --- a/src/pages/PerpsOverviewPage.tsx +++ b/src/pages/PerpsOverviewPage.tsx @@ -5,9 +5,9 @@ import Divider from 'components/common/Divider' import Text from 'components/common/Text' import PerpsMarketStats from 'components/main/perps/perpsMarketStats' import PerpsMetrics from 'components/main/perps/PerpsMetrics' +import usePerpsEnabledAssets from 'hooks/assets/usePerpsEnabledAssets' import { TIMEFRAME } from 'constants/timeframe' import { useMemo, useState } from 'react' -import usePerpsEnabledAssets from 'hooks/assets/usePerpsEnabledAssets' export default function PerpsOverviewPage() { const [selectedOption, setSelectedOption] = useState('total') diff --git a/src/types/app.d.ts b/src/types/app.d.ts index dc8bcb7..f90cf8f 100644 --- a/src/types/app.d.ts +++ b/src/types/app.d.ts @@ -1489,7 +1489,6 @@ interface TimeframeOption { value: string label: string granularity?: string - unit?: number } interface MergedChartData { From 11e98ef7d761d8cca7193e76bb948a9cbed6f219 Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Fri, 13 Dec 2024 16:01:14 +1300 Subject: [PATCH 8/9] tidy: remove creditmanager from api url --- src/api/perps/getPerpsGlobalStats.ts | 2 +- src/api/perps/getPerpsMarketStats.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/perps/getPerpsGlobalStats.ts b/src/api/perps/getPerpsGlobalStats.ts index 9b0c616..794ffa1 100644 --- a/src/api/perps/getPerpsGlobalStats.ts +++ b/src/api/perps/getPerpsGlobalStats.ts @@ -16,7 +16,7 @@ export default async function getPerpsGlobalStats(timeframe: string = '30') { } const url = new URL( - `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&product=creditmanager&response_type=global`, + `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&response_type=global`, ) const response = await fetch(url.toString()) const data = (await response.json()) as PerpsGlobalOverview diff --git a/src/api/perps/getPerpsMarketStats.ts b/src/api/perps/getPerpsMarketStats.ts index 535d672..c334dc1 100644 --- a/src/api/perps/getPerpsMarketStats.ts +++ b/src/api/perps/getPerpsMarketStats.ts @@ -12,7 +12,7 @@ export default async function getPerpsMarketStats( value: Number(timeframe), } const url = new URL( - `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&product=creditmanager&market=${market}&response_type=market`, + `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&market=${market}&response_type=market`, ) const response = await fetch(url.toString()) const data = (await response.json()) as PerpsMarketOverview From 43a273a5aed3398e54ac472e95d41f9c57fd9713 Mon Sep 17 00:00:00 2001 From: Patricie29 Date: Tue, 28 Jan 2025 15:40:39 +1300 Subject: [PATCH 9/9] fix: build --- src/hooks/perps/usePerpsChartData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/perps/usePerpsChartData.ts b/src/hooks/perps/usePerpsChartData.ts index 3335629..b6c30e0 100644 --- a/src/hooks/perps/usePerpsChartData.ts +++ b/src/hooks/perps/usePerpsChartData.ts @@ -29,7 +29,7 @@ export const usePerpsChartData = (data: PerpsGlobalData | PerpsMarketData) => { useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.fundingRate), ) const pnlData = filterData(useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.pnl)) - const realizedPnlBreakdown = filterData( + const realizedPnlBreakdown = filterData( useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.realizedPnlBreakdown), ) const feesData = filterData(useChartDataTransform(data, PERPS_CHART_TRANSFORMATIONS.fees))