feat(launch-market): Add LineSeries chart (#1105)

dydxprotocol · Oct 3, 2024 · bd21ff3 · bd21ff3
1 parent 635f31c
commit bd21ff3
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 78 deletions.
diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx
@@ -78,7 +78,7 @@ type ElementProps<Datum extends {}> = {
   onVisibleDataChange?: (data: Datum[]) => void;
   onZoom?: (_: { zoomDomain: number | undefined }) => void;
   slotEmpty: React.ReactNode;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 };
 

diff --git a/src/constants/markets.ts b/src/constants/markets.ts
@@ -113,3 +113,49 @@ export enum FundingDirection {
 export const PREDICTION_MARKET = {
   TRUMPWIN: 'TRUMPWIN-USD',
 };
+
+// Liquidity Tiers
+export const LIQUIDITY_TIERS = {
+  0: {
+    label: 'Large-cap',
+    initialMarginFraction: 0.05,
+    maintenanceMarginFraction: 0.03,
+    impactNotional: 10_000,
+  },
+  1: {
+    label: 'Small-cap',
+    initialMarginFraction: 0.1,
+    maintenanceMarginFraction: 0.05,
+    impactNotional: 5_000,
+  },
+  2: {
+    label: 'Long-tail',
+    initialMarginFraction: 0.2,
+    maintenanceMarginFraction: 0.1,
+    impactNotional: 2_500,
+  },
+  3: {
+    label: 'Safety',
+    initialMarginFraction: 1,
+    maintenanceMarginFraction: 0.2,
+    impactNotional: 2_500,
+  },
+  4: {
+    label: 'Isolated',
+    initialMarginFraction: 0.05,
+    maintenanceMarginFraction: 0.03,
+    impactNotional: 2_500,
+  },
+  5: {
+    label: 'Mid-cap',
+    initialMarginFraction: 0.05,
+    maintenanceMarginFraction: 0.03,
+    impactNotional: 5_000,
+  },
+  6: {
+    label: 'FX',
+    initialMarginFraction: 0.01,
+    maintenanceMarginFraction: 0.0005,
+    impactNotional: 2_500,
+  },
+};
diff --git a/src/hooks/useLaunchableMarkets.ts b/src/hooks/useLaunchableMarkets.ts
@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
 
-import { useQueries } from '@tanstack/react-query';
+import { useQueries, useQuery } from '@tanstack/react-query';
 import { shallowEqual } from 'react-redux';
 
 import {
   MetadataServiceAsset,
+  MetadataServiceCandlesTimeframes,
   MetadataServiceInfoResponse,
   MetadataServicePricesResponse,
 } from '@/constants/assetMetadata';
@@ -16,6 +17,7 @@ import { getMarketIds } from '@/state/perpetualsSelectors';
 import metadataClient from '@/clients/metadataService';
 import { getAssetFromMarketId } from '@/lib/assetUtils';
 import { getTickSizeDecimalsFromPrice } from '@/lib/numbers';
+import { mapMetadataServiceCandles } from '@/lib/tradingView/utils';
 
 export const useMetadataService = () => {
   const metadataQuery = useQueries({
@@ -116,3 +118,24 @@ export const useLaunchableMarkets = () => {
     data: filteredPotentialMarkets,
   };
 };
+
+export const useMetadataServiceCandles = (
+  asset?: string,
+  timeframe?: MetadataServiceCandlesTimeframes
+) => {
+  const candlesQuery = useQuery({
+    enabled: !!asset && !!timeframe,
+    queryKey: ['candles', asset, timeframe],
+    queryFn: async () => {
+      return metadataClient.getCandles({ asset: asset!, timeframe: timeframe! });
+    },
+    refetchInterval: timeUnits.minute * 5,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  return {
+    ...candlesQuery,
+    data: candlesQuery.data?.[asset ?? ''].map(mapMetadataServiceCandles),
+  };
+};
diff --git a/src/hooks/usePotentialMarkets.tsx b/src/hooks/usePotentialMarkets.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
 import { STRING_KEYS } from '@/constants/localization';
+import { LIQUIDITY_TIERS } from '@/constants/markets';
 import type { NewMarketProposal } from '@/constants/potentialMarkets';
 
 import { log } from '@/lib/telemetry';
@@ -10,50 +11,7 @@ import { useStringGetter } from './useStringGetter';
 const PotentialMarketsContext = createContext<ReturnType<typeof usePotentialMarketsContext>>({
   potentialMarkets: undefined,
   hasPotentialMarketsData: false,
-  liquidityTiers: {
-    0: {
-      label: 'Large-cap',
-      initialMarginFraction: 0.05,
-      maintenanceMarginFraction: 0.03,
-      impactNotional: 10_000,
-    },
-    1: {
-      label: 'Small-cap',
-      initialMarginFraction: 0.1,
-      maintenanceMarginFraction: 0.05,
-      impactNotional: 5_000,
-    },
-    2: {
-      label: 'Long-tail',
-      initialMarginFraction: 0.2,
-      maintenanceMarginFraction: 0.1,
-      impactNotional: 2_500,
-    },
-    3: {
-      label: 'Safety',
-      initialMarginFraction: 1,
-      maintenanceMarginFraction: 0.2,
-      impactNotional: 2_500,
-    },
-    4: {
-      label: 'Isolated',
-      initialMarginFraction: 0.05,
-      maintenanceMarginFraction: 0.03,
-      impactNotional: 2_500,
-    },
-    5: {
-      label: 'Mid-cap',
-      initialMarginFraction: 0.05,
-      maintenanceMarginFraction: 0.03,
-      impactNotional: 5_000,
-    },
-    6: {
-      label: 'FX',
-      initialMarginFraction: 0.01,
-      maintenanceMarginFraction: 0.0005,
-      impactNotional: 2_500,
-    },
-  },
+  liquidityTiers: LIQUIDITY_TIERS,
 });
 
 PotentialMarketsContext.displayName = 'PotentialMarkets';

diff --git a/src/pages/vaults/VaultPnlChart.tsx b/src/pages/vaults/VaultPnlChart.tsx
@@ -254,9 +254,7 @@ export const VaultPnlChart = ({ className }: VaultPnlChartProps) => {
           numGridLines={0}
           tickSpacingX={210}
           tickSpacingY={75}
-        >
-          {undefined}
-        </TimeSeriesChart>
+        />
       </$ChartContainer>
     </div>
   );

diff --git a/src/views/MarketDetails/LaunchableMarketDetails.tsx b/src/views/MarketDetails/LaunchableMarketDetails.tsx
@@ -1,4 +1,5 @@
 import { STRING_KEYS } from '@/constants/localization';
+import { LIQUIDITY_TIERS } from '@/constants/markets';
 
 import { useMetadataServiceAssetFromId } from '@/hooks/useLaunchableMarkets';
 import { useStringGetter } from '@/hooks/useStringGetter';
@@ -11,11 +12,7 @@ import { BIG_NUMBERS } from '@/lib/numbers';
 
 import { MarketDetails } from './MarketDetails';
 
-const ISOLATED_LIQUIDITY_TIER_INFO = {
-  initialMarginFraction: 0.05,
-  maintenanceMarginFraction: 0.03,
-  impactNotional: 2_500,
-};
+const ISOLATED_LIQUIDITY_TIER_INFO = LIQUIDITY_TIERS[4];
 
 export const LaunchableMarketDetails = ({ launchableMarketId }: { launchableMarketId: string }) => {
   const stringGetter = useStringGetter();