fix: create an effect to update stackbox dates each minute that passed

packages/app/components/stackbox/Stackbox.tsx

@@ -48,6 +48,7 @@ import {
   Token,
   frequencySeconds,
 } from "@/models";
+import { getDatePlusMinsOffset } from "@/utils";
 
 interface SelectTokenButtonProps {
   label: string;
@@ -56,10 +57,9 @@ interface SelectTokenButtonProps {
   className?: string;
   onAnimationEnd: AnimationEventHandler<HTMLElement>;
 }
-
-const START_TIME_MINUTES_OFFSET = 10;
-const getDateNowPlus10Mins = () =>
-  new Date().setMinutes(new Date().getMinutes() + START_TIME_MINUTES_OFFSET);
+const ONE_MINUTE = 1;
+const TEN_MINUTES = 10;
+const ONE_MINUTE_IN_MS = 60000;
 
 const frequencyOptions = [
   { option: FREQUENCY_OPTIONS.hour, name: "Hour" },
@@ -190,6 +190,26 @@ export const Stackbox = () => {
     tokenListWithBalances,
   ]);
 
+  /**
+   * startDate and endDate handler when the user
+   * is idle for 1 minute or more
+   */
+  useEffect(() => {
+    function oneMinuteInterval() {
+      setStartDateTime(getDatePlusMinsOffset(startDateTime, TEN_MINUTES));
+      setEndDateTime(getDatePlusMinsOffset(endDateTime, TEN_MINUTES));
+    }
+
+    oneMinuteInterval();
+
+    const id = setInterval(oneMinuteInterval, ONE_MINUTE_IN_MS);
+
+    return () => {
+      clearInterval(id);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const openTokenPicker = (isFromToken = true) => {
     setIsPickingFromToken(isFromToken);
     openModal(ModalId.TOKEN_PICKER);
@@ -484,14 +504,15 @@ export const Stackbox = () => {
                 >
                   <BodyText size={2}>Until</BodyText>
                   <DatePicker
-                    dateTime={endDateTime}
+                    dateTime={getDatePlusMinsOffset(endDateTime, ONE_MINUTE)}
                     setDateTime={(date: Date) => {
                       deselectStrategy();
                       setEndDateTime(date);
                     }}
                     timeCaption="End time"
                     className="w-full"
                     fromDate={startDateTime}
+                    isEndDate
                   />
                 </div>
               </div>
@@ -585,7 +606,9 @@ export const Stackbox = () => {
           amount={tokenAmount}
           frequency={frequency}
           startTime={
-            isPastStartDate ? new Date(getDateNowPlus10Mins()) : startDateTime
+            isPastStartDate
+              ? new Date(getDatePlusMinsOffset(new Date(), TEN_MINUTES))
+              : startDateTime
           }
           endTime={endDateTime}
           isOpen={isModalOpen(ModalId.CONFIRM_STACK)}