[Simulator] Fix market price used for marginal price

src/components/simulator/input/overlapping/CreateOverlappingStrategy.tsx

@@ -47,6 +47,13 @@ export const CreateOverlappingStrategy: FC<Props> = (props) => {
   const [touched, setTouched] = useState(false);
   const [anchor, setAnchor] = useState<'buy' | 'sell' | undefined>();
 
+  useEffect(() => {
+    // Hack: on focus from input while scrolling as it prevents reactive state to behave correctly
+    if (document.activeElement instanceof HTMLInputElement) {
+      document.activeElement.blur();
+    }
+  }, [state.start]);
+
   const { buyMarginal, sellMarginal } = useMemo(() => {
     const min = state.buy.min;
     const max = state.sell.max;

src/pages/simulator/overlapping/index.tsx

@@ -7,7 +7,7 @@ import { useSimulatorOverlappingInput } from 'hooks/useSimulatorOverlappingInput
 import { useGetTokenPriceHistory } from 'libs/queries/extApi/tokenPrice';
 import { simulatorInputOverlappingRoute } from 'libs/routing/routes/sim';
 import { defaultEnd, defaultStart } from 'components/strategies/common/utils';
-import { FormEvent, useEffect } from 'react';
+import { FormEvent, useEffect, useMemo } from 'react';
 import { formatNumber, roundSearchParam } from 'utils/helpers';
 
 export const SimulatorInputOverlappingPage = () => {
@@ -24,6 +24,11 @@ export const SimulatorInputOverlappingPage = () => {
     end: defaultEnd().toString(),
   });
 
+  const marketPrice = useMemo(() => {
+    if (!state.start) return data?.[0].open;
+    return data?.find((d) => d.date.toString() === state.start)?.open;
+  }, [data, state.start]);
+
   useEffect(() => {
     if (searchState.sellMax || searchState.buyMin) return;
     dispatch('baseToken', searchState.baseToken);
@@ -65,7 +70,7 @@ export const SimulatorInputOverlappingPage = () => {
     const { buyPriceMarginal, sellPriceMarginal } = calculateOverlappingPrices(
       formatNumber(state.buy.min),
       formatNumber(state.sell.max),
-      data[0].open.toString(),
+      marketPrice!.toString(),
       state.spread
     );
 
@@ -102,7 +107,7 @@ export const SimulatorInputOverlappingPage = () => {
         <CreateOverlappingStrategy
           state={state}
           dispatch={dispatch}
-          marketPrice={data?.[0].open ?? 0}
+          marketPrice={marketPrice ?? 0}
           spread={state.spread}
           setSpread={(v) => dispatch('spread', v)}
         />