Merge pull request #1541 from bancorprotocol/sei/price-history

[SEI] support native chart on sei

src/components/simulator/input/SimInputChart.tsx

@@ -17,14 +17,14 @@ import {
   D3ChartCandlesticks,
   OnPriceUpdates,
 } from 'components/strategies/common/d3Chart';
-import { useCompareTokenPrice } from 'libs/queries/extApi/tokenPrice';
 import { SimulatorType } from 'libs/routing/routes/sim';
 import { useCallback } from 'react';
 import { ReactComponent as IconPlus } from 'assets/icons/plus.svg';
 import { CandlestickData, D3ChartSettingsProps, D3ChartWrapper } from 'libs/d3';
 import { fromUnixUTC, toUnixUTC } from '../utils';
 import { startOfDay, sub } from 'date-fns';
 import { formatNumber } from 'utils/helpers';
+import { useMarketPrice } from 'hooks/useMarketPrice';
 
 interface Props {
   state: StrategyInputValues | SimulatorInputOverlappingValues;
@@ -58,10 +58,10 @@ export const SimInputChart = ({
   data,
   simulationType,
 }: Props) => {
-  const marketPrice = useCompareTokenPrice(
-    state.baseToken?.address,
-    state.quoteToken?.address
-  );
+  const { marketPrice } = useMarketPrice({
+    base: state.baseToken,
+    quote: state.quoteToken,
+  });
 
   const prices = {
     buy: {

src/components/strategies/common/d3Chart/Candlesticks.tsx

@@ -14,8 +14,13 @@ export function Candlesticks({ xScale, yScale, data }: CandlesticksProps) {
         const isDown = d.open < d.close;
         const color = isUp ? '#AD4F5A' : isDown ? '#009160' : 'white';
 
-        let height = yScale(d.open) - yScale(d.close);
-        let y = yScale(d.close);
+        let height = 5;
+        let y = yScale(d.open);
+
+        if (isDown) {
+          height = yScale(d.open) - yScale(d.close);
+          y = yScale(d.close);
+        }
 
         if (isUp) {
           height = yScale(d.close) - yScale(d.open);

src/config/sei/common.ts

@@ -23,7 +23,7 @@ export const commonConfig: AppConfig = {
   ],
   blockedConnectors: ['Tailwind'],
   walletConnectProjectId: '',
-  isSimulatorEnabled: false,
+  isSimulatorEnabled: true,
   policiesLastUpdated: '27 May, 2024',
   network: {
     name: 'Sei Network',
@@ -115,7 +115,7 @@ export const commonConfig: AppConfig = {
     ],
   },
   ui: {
-    priceChart: 'tradingView',
+    priceChart: 'native',
     useGradientBranding: true,
   },
 };

src/libs/queries/extApi/tokenPrice.ts

@@ -5,16 +5,6 @@ import { FIVE_MIN_IN_MS } from 'utils/time';
 import { useStore } from 'store';
 import { FiatPriceDict, carbonApi } from 'utils/carbonApi';
 
-export const useCompareTokenPrice = (
-  baseAddress?: string,
-  quoteAddress?: string
-) => {
-  const basePrice = useGetTokenPrice(baseAddress).data?.USD;
-  const quotePrice = useGetTokenPrice(quoteAddress).data?.USD;
-  if (typeof basePrice !== 'number' || typeof quotePrice !== 'number') return;
-  return basePrice / quotePrice;
-};
-
 export const useGetTokenPrice = (address?: string) => {
   const {
     fiatCurrency: { availableCurrencies },

src/pages/simulator/recurring/index.tsx

@@ -3,15 +3,13 @@ import { Button } from 'components/common/button';
 import { SimInputChart } from 'components/simulator/input/SimInputChart';
 import { SimInputRecurring } from 'components/simulator/input/SimInputRecurring';
 import { useSimulatorInput } from 'hooks/useSimulatorInput';
-import {
-  useCompareTokenPrice,
-  useGetTokenPriceHistory,
-} from 'libs/queries/extApi/tokenPrice';
+import { useGetTokenPriceHistory } from 'libs/queries/extApi/tokenPrice';
 import { StrategyDirection } from 'libs/routing';
 import { simulatorInputRecurringRoute } from 'libs/routing/routes/sim';
 import { SafeDecimal } from 'libs/safedecimal';
 import { defaultEnd, defaultStart } from 'components/strategies/common/utils';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { useMarketPrice } from 'hooks/useMarketPrice';
 
 export const SimulatorInputRecurringPage = () => {
   const searchState = simulatorInputRecurringRoute.useSearch();
@@ -28,10 +26,10 @@ export const SimulatorInputRecurringPage = () => {
     start: searchState.start,
     end: searchState.end,
   });
-  const marketPrice = useCompareTokenPrice(
-    state.baseToken?.address,
-    state.quoteToken?.address
-  );
+  const { marketPrice, isPending: marketPricePending } = useMarketPrice({
+    base: state.baseToken,
+    quote: state.quoteToken,
+  });
 
   const handleDefaultValues = useCallback(
     (type: StrategyDirection) => {
@@ -85,9 +83,11 @@ export const SimulatorInputRecurringPage = () => {
   );
 
   useEffect(() => {
-    handleDefaultValues('buy');
-    handleDefaultValues('sell');
-  }, [handleDefaultValues]);
+    if (!marketPricePending) {
+      handleDefaultValues('buy');
+      handleDefaultValues('sell');
+    }
+  }, [handleDefaultValues, marketPricePending]);
 
   useEffect(() => {
     if (initBuyRange || initSellRange) return;