Merge pull request #1636 from bancorprotocol/issue-#1611

Keep start & end on reload & between navigation

e2e/tests/strategy/disposable/create.ts

@@ -57,10 +57,10 @@ export const create = (testCase: CreateStrategyTestCase) => {
 
     const tooltip = await strategy.priceTooltip(direction);
     if (setting === 'limit') {
-      expect(tooltip.price()).toHaveText(output.min);
+      await expect(tooltip.price()).toHaveText(output.min);
     } else {
-      expect(tooltip.minPrice()).toHaveText(output.min);
-      expect(tooltip.maxPrice()).toHaveText(output.max);
+      await expect(tooltip.minPrice()).toHaveText(output.min);
+      await expect(tooltip.maxPrice()).toHaveText(output.max);
     }
     await tooltip.waitForDetached();
 

e2e/tests/strategy/disposable/duplicate.ts

@@ -47,10 +47,10 @@ export const duplicate = (testCase: CreateStrategyTestCase) => {
 
     const tooltip = await duplicate.priceTooltip(direction);
     if (setting === 'limit') {
-      expect(tooltip.price()).toHaveText(output.min);
+      await expect(tooltip.price()).toHaveText(output.min);
     } else {
-      expect(tooltip.minPrice()).toHaveText(output.min);
-      expect(tooltip.maxPrice()).toHaveText(output.max);
+      await expect(tooltip.minPrice()).toHaveText(output.min);
+      await expect(tooltip.maxPrice()).toHaveText(output.max);
     }
     await tooltip.waitForDetached();
   });

e2e/tests/strategy/disposable/undercut.ts

@@ -48,10 +48,10 @@ export const undercut = (testCase: CreateStrategyTestCase) => {
 
     const tooltip = await duplicate.priceTooltip(direction);
     if (setting === 'limit') {
-      expect(tooltip.price()).toHaveText(output.min);
+      await expect(tooltip.price()).toHaveText(output.min);
     } else {
-      expect(tooltip.minPrice()).toHaveText(output.min);
-      expect(tooltip.maxPrice()).toHaveText(output.max);
+      await expect(tooltip.minPrice()).toHaveText(output.min);
+      await expect(tooltip.maxPrice()).toHaveText(output.max);
     }
     await tooltip.waitForDetached();
   });

src/components/simulator/input/SimInputChart.tsx

@@ -117,6 +117,8 @@ export const SimInputChart = ({
           type={simulationType}
           overlappingSpread={spread}
           zoomBehavior="normal"
+          start={state.start}
+          end={state.end}
         />
       )}
     </div>

src/components/simulator/input/SimInputStrategyType.tsx

@@ -1,10 +1,10 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { ReactComponent as IconTwoRanges } from 'assets/icons/recurring.svg';
 import { ReactComponent as IconOverlappingStrategy } from 'assets/icons/overlapping.svg';
 import { cn } from 'utils/helpers';
 import { SimulatorType } from 'libs/routing/routes/sim';
-import { Link } from 'libs/routing';
+import { Link, useSearch } from 'libs/routing';
 
 interface ItemProps {
   title: string;
@@ -13,12 +13,10 @@ interface ItemProps {
   tooltipText: string;
 }
 
-interface Props {
-  baseToken?: string;
-  quoteToken?: string;
-}
-
-export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
+export const SimInputStrategyType = () => {
+  const { baseToken, quoteToken, start, end } = useSearch({
+    from: '/simulate/',
+  });
   const items: ItemProps[] = [
     {
       title: 'Recurring',
@@ -54,7 +52,7 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
               aria-controls={'panel-' + label}
               key={label}
               to={to}
-              search={{ baseToken, quoteToken }}
+              search={{ baseToken, quoteToken, start, end }}
               className={cn(
                 'rounded-10 text-14 font-weight-500 group flex size-full flex-row items-center justify-center gap-8 bg-black px-8 py-16 outline-white',
                 'md:px-12',

src/components/strategies/common/StrategyChartHistory.tsx

@@ -2,10 +2,10 @@ import {
   ChartPrices,
   OnPriceUpdates,
 } from 'components/strategies/common/d3Chart';
-import { useSearch } from '@tanstack/react-router';
+import { useNavigate, useSearch } from '@tanstack/react-router';
 import { useGetTokenPriceHistory } from 'libs/queries/extApi/tokenPrice';
 import { TradeSearch } from 'libs/routing';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { BaseOrder } from 'components/strategies/common/types';
 import { useMarketPrice } from 'hooks/useMarketPrice';
 import { TradeTypes } from 'libs/routing/routes/trade';
@@ -67,6 +67,7 @@ export const StrategyChartHistory: FC<Props> = (props) => {
   const { base, quote, type, order0, order1, activities } = props;
   const { priceStart, priceEnd } = useSearch({ strict: false }) as TradeSearch;
   const { marketPrice: externalPrice } = useMarketPrice({ base, quote });
+  const nav = useNavigate();
 
   const marketPrice = props.marketPrice
     ? Number(props.marketPrice)
@@ -83,6 +84,22 @@ export const StrategyChartHistory: FC<Props> = (props) => {
   });
   const [bounds, setBounds] = useState(getBounds(order0, order1, direction));
 
+  const updatePriceRange = useCallback(
+    (range: { start?: string; end?: string }) => {
+      nav({
+        to: '.',
+        search: (s) => ({
+          ...s,
+          priceStart: range.start,
+          priceEnd: range.end,
+        }),
+        resetScroll: false,
+        replace: true,
+      });
+    },
+    [nav]
+  );
+
   const updatePrices: OnPriceUpdates = ({ buy, sell }) => {
     const newPrices = {
       buy: {
@@ -104,8 +121,8 @@ export const StrategyChartHistory: FC<Props> = (props) => {
   const { data, isPending, isError } = useGetTokenPriceHistory({
     baseToken: base.address,
     quoteToken: quote.address,
-    start: priceStart ?? defaultStart().toString(),
-    end: priceEnd ?? defaultEnd().toString(),
+    start: defaultStart().toString(),
+    end: defaultEnd().toString(),
   });
 
   useEffect(() => {
@@ -154,6 +171,9 @@ export const StrategyChartHistory: FC<Props> = (props) => {
       overlappingSpread={props.spread}
       activities={activities}
       zoomBehavior={activities ? 'normal' : 'extended'}
+      start={priceStart}
+      end={priceEnd}
+      onRangeUpdates={updatePriceRange}
     />
   );
 };