feat[STK-33]: create stack frequency section

packages/app/app/ui/page.tsx

@@ -22,9 +22,11 @@ import {
   HeadingText,
   OverlineText,
   DialogContent,
+  CaptionText,
+  Calendar,
 } from "@/ui";
-import { CaptionText } from "@/ui/text/CaptionText";
 import { useRef, useState } from "react";
+import { DatePicker } from "../../components/DatePicker";
 
 export default function Page() {
   //  radioButtons

packages/app/components/DatePicker.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { format, isToday, isTomorrow } from "date-fns";
+
+import { Button, Calendar, Icon } from "@/ui";
+import { Popover } from "@headlessui/react";
+
+import { Dispatch, Ref, SetStateAction, useEffect, useState } from "react";
+import { usePopper } from "react-popper";
+import { twMerge } from "tailwind-merge";
+
+interface IDatePicker {
+  dateTime: Date;
+  setDateTime: Dispatch<SetStateAction<Date>>;
+  className?: string;
+  timeCaption: string;
+  fromDate?: Date;
+}
+
+export function DatePicker({
+  dateTime,
+  setDateTime,
+  className,
+  timeCaption,
+  fromDate,
+}: IDatePicker) {
+  const [currentDate, setCurrentDate] = useState<Date>(new Date(dateTime));
+  const [hours, setHours] = useState(format(currentDate, "HH"));
+  const [minutes, setMinutes] = useState(format(currentDate, "mm"));
+
+  const [referenceElement, setReferenceElement] = useState<
+    HTMLButtonElement | undefined
+  >();
+  const [popperElement, setPopperElement] = useState<
+    HTMLDivElement | undefined
+  >();
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom",
+  });
+
+  const formattedDate = () => {
+    if (isToday(dateTime)) return format(dateTime, "'Today at' HH:mm");
+    if (isTomorrow(dateTime)) return format(dateTime, "'Tomorrow at' HH:mm");
+
+    return format(dateTime, "dd MMM Y @ HH:mm");
+  };
+
+  useEffect(() => {
+    const newDate = new Date(dateTime);
+    setCurrentDate(newDate);
+    setHours(format(newDate, "HH"));
+    setMinutes(format(newDate, "mm"));
+  }, [dateTime]);
+
+  return (
+    <Popover>
+      <Popover.Button
+        ref={setReferenceElement as Ref<HTMLButtonElement>}
+        className={twMerge("flex justify-between items-center", className)} // text-em-low if default dates
+      >
+        <span>{formattedDate()}</span>
+        <Icon name="caret-down" className="mr-2 h-4 w-4 text-black" />
+      </Popover.Button>
+      <Popover.Panel
+        ref={setPopperElement as Ref<HTMLDivElement>}
+        style={styles.popper}
+        {...attributes.popper}
+        className="w-fit mx-auto max-md:!fixed max-md:!inset-0 max-md:!flex max-md:!items-center max-md:!justify-center max-md:!p-4 max-md:!transform" /* This styles will make it hover on mobile */
+      >
+        {({ close }) => (
+          <div className="flex flex-col space-y-2 bg-white divide-y divide-surface-50 rounded-2xl border border-surface-50">
+            <Calendar
+              mode="single"
+              selected={currentDate}
+              defaultMonth={currentDate}
+              onSelect={(newDate: Date | undefined) => {
+                if (!newDate) return;
+                newDate.setHours(currentDate.getHours());
+                newDate.setMinutes(currentDate.getMinutes());
+                setCurrentDate(newDate);
+              }}
+              initialFocus
+              className=""
+              fromDate={fromDate || new Date()}
+            />
+            <div className="flex flex-col space-y-2 p-4 pt-2">
+              <div className="flex justify-between items-center">
+                <span>{timeCaption}</span>
+                <div className="flex space-x-2  items-center">
+                  <div className="flex items-center border border-surface-75 rounded-xl py-2 px-3 text-em-low">
+                    <input
+                      className="outline-none font-semibold flex-grow text-sm w-5 text-center"
+                      type="number"
+                      value={hours}
+                      onKeyDown={(evt) =>
+                        ["e", "E", "+", "-"].includes(evt.key) &&
+                        evt.preventDefault()
+                      }
+                      onChange={(event) => {
+                        const value = event.target.value;
+                        const numberValue = Number(value);
+                        if (
+                          numberValue >= 0 &&
+                          numberValue < 24 &&
+                          value.length < 3
+                        ) {
+                          setHours(value);
+                        }
+                      }}
+                    />
+                  </div>
+                  <span>:</span>
+                  <div className="flex items-center border border-surface-75 rounded-xl py-2 px-3 text-em-low">
+                    <input
+                      className="outline-none font-semibold flex-grow text-sm w-5 text-center"
+                      type="number"
+                      value={minutes}
+                      onKeyDown={(evt) =>
+                        ["e", "E", "+", "-"].includes(evt.key) &&
+                        evt.preventDefault()
+                      }
+                      onChange={(event) => {
+                        const value = event.target.value;
+                        const numberValue = Number(value);
+                        if (
+                          numberValue >= 0 &&
+                          numberValue < 60 &&
+                          value.length < 3
+                        ) {
+                          setMinutes(event.target.value);
+                        }
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+              <Button
+                action="secondary"
+                onClick={() => {
+                  const newDate = new Date(currentDate);
+                  newDate.setHours(Number(hours));
+                  newDate.setMinutes(Number(minutes));
+                  setDateTime(newDate);
+                  close();
+                }}
+              >
+                Set Date and Time
+              </Button>
+            </div>
+          </div>
+        )}
+      </Popover.Panel>
+    </Popover>
+  );
+}

packages/app/components/index.ts

@@ -1,3 +1,5 @@
 export * from "./navbar";
 export * from "./ConnectButton";
 export * from "./SelectNetwork";
+export * from "./DatePicker";
+export * from "./token-picker";

packages/app/components/stackbox/Stackbox.tsx

@@ -1,20 +1,55 @@
 "use client";
 
 import { BodyText, Button, Icon, RadioButton, TitleText } from "@/ui";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ConfirmStackModal } from "./ConfirmStackModal";
-import { TokenPicker } from "@/components/token-picker/TokenPicker";
+import { TokenPicker, DatePicker } from "@/components";
+
+const HOUR_OPTION = "hour";
+const DAY_OPTION = "day";
+const WEEK_OPTION = "week";
+const MONTH_OPTION = "month";
+
+const frequencyOptions = [
+  { option: HOUR_OPTION, name: "Hour" },
+  { option: DAY_OPTION, name: "Day" },
+  { option: WEEK_OPTION, name: "Week" },
+  { option: MONTH_OPTION, name: "Month" },
+];
+
+const endDateByFrequency: Record<string, number> = {
+  [HOUR_OPTION]: new Date().setDate(new Date().getDate() + 2),
+  [DAY_OPTION]: new Date().setMonth(new Date().getMonth() + 1),
+  [WEEK_OPTION]: new Date().setMonth(new Date().getMonth() + 3),
+  [MONTH_OPTION]: new Date().setFullYear(new Date().getFullYear() + 1),
+};
+const startDateTimeTimestamp = new Date().setMinutes(
+  new Date().getMinutes() + 30
+);
 
 export const Stackbox = () => {
   const [isConfirmStackOpen, setConfirmStackIsOpen] = useState(false);
   const [isTokenPickerOpen, setTokenPickerIsOpen] = useState(false);
 
+  const [frequency, setFrequency] = useState<string>(HOUR_OPTION);
+
+  const [startDateTime, setStartDateTime] = useState<Date>(
+    new Date(startDateTimeTimestamp)
+  );
+  const [endDateTime, setEndDateTime] = useState<Date>(
+    new Date(endDateByFrequency[frequency])
+  );
+
   const openConfirmStack = () => setConfirmStackIsOpen(true);
   const closeConfirmStack = () => setConfirmStackIsOpen(false);
 
   const openTokenPicker = () => setTokenPickerIsOpen(true);
   const closeTokenPicker = () => setTokenPickerIsOpen(false);
 
+  useEffect(() => {
+    setEndDateTime(new Date(endDateByFrequency[frequency]));
+  }, [frequency]);
+
   return (
     <div>
       <div className="max-w-lg mx-auto my-24 bg-white shadow-2xl rounded-2xl">
@@ -44,42 +79,57 @@ export const Stackbox = () => {
             />
           </div>
         </div>
-        <div className="px-5 py-6">
+        <div className="px-5 py-6 space-y-6">
           <div className="space-y-2">
             <TitleText weight="bold" className="text-em-med">
               Stack WETH every
             </TitleText>
-            <div className="flex space-x-2">
-              <RadioButton
-                name="hour"
-                id="hour"
-                checked={true}
-                value={"0"}
-                onChange={() => {}}
-              >
-                Hour
-              </RadioButton>
-              <RadioButton
-                name="week"
-                id="week"
-                checked={false}
-                value={"1"}
-                onChange={() => {}}
-              >
-                Week
-              </RadioButton>
-              <RadioButton
-                name="month"
-                id="month"
-                checked={false}
-                value={"2"}
-                onChange={() => {}}
-              >
-                Month
-              </RadioButton>
+            <div className="space-y-6">
+              <div className="flex space-x-2">
+                {frequencyOptions.map(({ option, name }) => {
+                  const isSelected = frequency === option;
+                  return (
+                    <RadioButton
+                      key={option}
+                      name={option}
+                      id={option}
+                      checked={isSelected}
+                      value={option}
+                      onChange={(event) => setFrequency(event.target.value)}
+                    >
+                      <BodyText
+                        size={2}
+                        className={!isSelected ? "text-em-med" : ""}
+                      >
+                        {name}
+                      </BodyText>
+                    </RadioButton>
+                  );
+                })}
+              </div>
+              <div className="flex rounded-2xl border border-surface-50 divide-x divide-surface-50">
+                <div className="flex flex-col w-full px-4 py-3 space-y-2">
+                  <BodyText size={2}>Starting from</BodyText>
+                  <DatePicker
+                    dateTime={startDateTime}
+                    setDateTime={setStartDateTime}
+                    timeCaption="Start time"
+                    className="w-full"
+                  />
+                </div>
+                <div className="flex flex-col w-full px-4 py-3 space-y-2">
+                  <BodyText size={2}>Until</BodyText>
+                  <DatePicker
+                    dateTime={endDateTime}
+                    setDateTime={setEndDateTime}
+                    timeCaption="End time"
+                    className="w-full"
+                    fromDate={startDateTime}
+                  />
+                </div>
+              </div>
             </div>
           </div>
-          <p className="py-12 mx-auto w-fit text-em-low">The stackbox™</p>
           <Button width="full" onClick={openConfirmStack}>
             Stack Now
           </Button>

packages/app/components/token-picker/index.ts

@@ -0,0 +1 @@
+export * from "./TokenPicker";

packages/app/package.json

@@ -16,11 +16,15 @@
     "@cowprotocol/cow-sdk": "^2.1.0",
     "@headlessui/react": "^1.7.14",
     "@headlessui/tailwindcss": "^0.1.3",
+    "@popperjs/core": "^2.11.8",
     "class-variance-authority": "^0.6.0",
     "connectkit": "^1.4.0",
+    "date-fns": "^2.30.0",
     "next": "^13.4.1",
     "react": "^18.2.0",
+    "react-day-picker": "^8.8.0",
     "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
     "tailwind-merge": "^1.12.0",
     "viem": "^1.0.2",
     "wagmi": "^1.1.1"

packages/app/styles/global.css

@@ -19,3 +19,11 @@
 
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}