Merge branch 'main' into issue-#1532

bancorprotocol · Oct 11, 2024 · baf0912 · baf0912
2 parents 98ae909 + 9d05d7f
commit baf0912
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 32 deletions.
diff --git a/...screenshots/simulator/recurring/Recurring_range_limit/simulator-input-price.png b/...screenshots/simulator/recurring/Recurring_range_limit/simulator-input-price.png
diff --git a/src/components/simulator/input/SimInputChart.tsx b/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: {

diff --git a/src/components/strategies/common/d3Chart/Candlesticks.tsx b/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);

diff --git a/src/components/strategies/edit/EditStrategyLayout.tsx b/src/components/strategies/edit/EditStrategyLayout.tsx
@@ -21,7 +21,7 @@ export const EditStrategyLayout: FC<Props> = (props) => {
   const { history } = useRouter();
 
   return (
-    <div className="m-auto flex w-[1920px] max-w-[100vw] flex-col gap-20 p-20 ">
+    <div className="m-auto flex w-full max-w-[1920px] flex-col gap-20 p-20 ">
       <header className="flex items-center gap-16">
         <BackButton onClick={() => history.back()} />
         <h1 className="text-24 font-weight-500 flex-1">

diff --git a/src/config/sei/common.ts b/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,
   },
 };
diff --git a/src/libs/queries/extApi/tokenPrice.ts b/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 },

diff --git a/src/pages/simulator/recurring/index.tsx b/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;

diff --git a/src/pages/trade/root.tsx b/src/pages/trade/root.tsx
@@ -47,7 +47,7 @@ export const TradeRoot = () => {
   }
   return (
     <TradeProvider base={base} quote={quote}>
-      <div className="m-auto flex w-[1920px] max-w-[100vw] flex-col gap-20 p-20 md:grid md:grid-cols-[450px_auto]">
+      <div className="m-auto flex w-full max-w-[1920px] flex-col gap-20 p-20 md:grid md:grid-cols-[450px_auto]">
         <Outlet />
       </div>
     </TradeProvider>