feat: added signer updates

src/app/_components/BlockList/LayoutA/__tests__/__snapshots__/BlockListWithControls.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`BlockListWithControls renders correctly 1`] = `
     class="css-16e8ooo"
   >
     <div
-      class="css-1kk2bc1"
+      class="css-1159lxg"
     >
       <span
-        class="chakra-text css-hnwgpl"
+        class="chakra-text css-12b8kh6"
       >
         Recent Blocks
       </span>

src/app/_components/time-filter/DateInput.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { forwardRef } from '@chakra-ui/react';
+
+import { Input } from '../../../ui/Input';
+
+export const DateInput = forwardRef((props, ref) => (
+  <Input
+    sx={{
+      '::placeholder': {
+        color: 'textSubdued',
+      },
+    }}
+    ref={ref}
+    {...props}
+  />
+));

src/app/_components/time-filter/DatePickerInput.tsx

@@ -0,0 +1,141 @@
+import { FormLabel } from '@/ui/FormLabel';
+import { UTCDate } from '@date-fns/utc';
+import { Field, FieldProps, Form, Formik } from 'formik';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import { Box } from '../../../ui/Box';
+import { Button } from '../../../ui/Button';
+import { FormControl } from '../../../ui/FormControl';
+import { Stack } from '../../../ui/Stack';
+import { DateInput } from './DateInput';
+
+type DateValue = number | undefined;
+
+export interface DatePickerValues {
+  date: DateValue;
+}
+
+export interface DatePickerFormProps {
+  initialDate: DateValue;
+  onSubmit: (values: DatePickerValues) => void;
+  placeholder?: string;
+  label?: string;
+  key?: string;
+}
+
+// TODO: move this to the search
+// function searchAfterDatePickerOnSubmitHandler({
+//   searchParams,
+//   router,
+//   onClose,
+// }: {
+//   searchParams: URLSearchParams;
+//   router: ReturnType<typeof useRouter>;
+//   onClose: () => void;
+// }) {
+//   return ({ date: startTime }: DatePickerFormValues) => {
+//     const params = new URLSearchParams(searchParams);
+//     const startTimeTs = startTime ? Math.floor(startTime).toString() : undefined;
+//     params.delete('endTime');
+//     if (startTimeTs) {
+//       params.set('startTime', startTimeTs);
+//     } else {
+//       params.delete('startTime');
+//     }
+//     router.push(`?${params.toString()}`, { scroll: false });
+//     onClose();
+//   };
+// }
+
+// TODO: move this to the search
+// function searchBeforeDatePickerOnSubmitHandler({
+//   searchParams,
+//   router,
+//   onClose,
+// }: {
+//   searchParams: URLSearchParams;
+//   router: ReturnType<typeof useRouter>;
+//   onClose: () => void;
+// }) {
+//   return ({ date: endTime }: DatePickerFormValues) => {
+//     const params = new URLSearchParams(searchParams);
+//     const endTimeTs = endTime ? Math.floor(endTime).toString() : undefined;
+//     params.delete('startTime');
+//     if (endTimeTs) {
+//       params.set('endTime', endTimeTs);
+//     } else {
+//       params.delete('endTime');
+//     }
+//     router.push(`?${params.toString()}`, { scroll: false });
+//     onClose();
+//   };
+// }
+
+export function DatePickerInput({
+  initialDate,
+  label = 'Date:',
+  onSubmit,
+  placeholder = 'YYYY-MM-DD',
+  key,
+}: DatePickerFormProps) {
+  const initialValues: DatePickerValues = {
+    date: initialDate,
+  };
+  return (
+    <Formik
+      enableReinitialize
+      validateOnChange={false}
+      validateOnBlur={false}
+      initialValues={initialValues}
+      onSubmit={({ date }: DatePickerValues) => {
+        onSubmit({ date });
+      }}
+      key={key}
+    >
+      {() => (
+        <Form>
+          <Stack gap={4}>
+            <Field name="date">
+              {({ field, form }: FieldProps<string, DatePickerValues>) => (
+                <FormControl>
+                  <FormLabel>{label}</FormLabel>
+                  <DatePicker
+                    customInput={<DateInput placeholder={placeholder} fontSize="sm" />}
+                    selected={form.values.date ? new UTCDate(form.values.date * 1000) : undefined}
+                    onChange={date => {
+                      if (date) {
+                        const utcDate = new UTCDate(
+                          date.getUTCFullYear(),
+                          date.getUTCMonth(),
+                          date.getUTCDate(),
+                          0,
+                          0,
+                          0
+                        );
+                        form.setFieldValue('date', utcDate.getTime() / 1000);
+                      }
+                    }}
+                    dateFormat="yyyy-MM-dd"
+                  />
+                </FormControl>
+              )}
+            </Field>
+          </Stack>
+          <Box mt={4}>
+            <Button
+              width="full"
+              type="submit"
+              fontSize="sm"
+              variant="secondary"
+              height={10}
+              color="textSubdued"
+            >
+              Apply
+            </Button>
+          </Box>
+        </Form>
+      )}
+    </Formik>
+  );
+}

src/app/_components/time-filter/DatePickerRangeInput.tsx

@@ -0,0 +1,142 @@
+import { UTCDate } from '@date-fns/utc';
+import { Field, FieldProps, Form, Formik } from 'formik';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import { Box } from '../../../ui/Box';
+import { Button } from '../../../ui/Button';
+import { FormControl } from '../../../ui/FormControl';
+import { FormLabel } from '../../../ui/FormLabel';
+import { Stack } from '../../../ui/Stack';
+import { DateInput } from './DateInput';
+
+type DateValue = number | undefined;
+
+export interface DatePickerRangeInputState {
+  startDate: DateValue;
+  endDate: DateValue;
+}
+
+interface DatePickerRangeInputProps {
+  onSubmit: (values: DatePickerRangeInputState) => void;
+  initialStartDate?: DateValue;
+  initialEndDate?: DateValue;
+  label?: string;
+  key?: string;
+}
+
+//   // TODO: move this to the search
+// function searchDatePickerRangeFormOnSubmitHandler({
+//   searchParams,
+//   router,
+//   onClose,
+// }: {
+//   searchParams: URLSearchParams;
+//   router: ReturnType<typeof useRouter>;
+//   onClose: () => void;
+// }) {
+//   return ({ startTime, endTime }: DateRangeFormValues) => {
+//     const params = new URLSearchParams(searchParams);
+//     const startTimeTs = startTime ? Math.floor(startTime).toString() : undefined;
+//     const endTimeTs = endTime ? Math.floor(endTime).toString() : undefined;
+//     if (startTimeTs) {
+//       params.set('startTime', startTimeTs);
+//     } else {
+//       params.delete('startTime');
+//     }
+//     if (endTimeTs) {
+//       params.set('endTime', endTimeTs);
+//     } else {
+//       params.delete('endTime');
+//     }
+//     router.push(`?${params.toString()}`, { scroll: false });
+//     onClose();
+//   };
+// }
+
+export function DatePickerRangeInput({
+  initialStartDate,
+  initialEndDate,
+  onSubmit,
+  label = 'Between:',
+  key,
+}: DatePickerRangeInputProps) {
+  const initialValues: DatePickerRangeInputState = {
+    startDate: initialStartDate,
+    endDate: initialEndDate,
+  };
+  return (
+    <Formik
+      enableReinitialize
+      validateOnChange={false}
+      validateOnBlur={false}
+      initialValues={initialValues}
+      onSubmit={({ startDate, endDate }: DatePickerRangeInputState) => {
+        onSubmit({ startDate, endDate });
+      }}
+      key={key}
+    >
+      {() => (
+        <Form>
+          <Stack gap={4}>
+            <Field name="startTime">
+              {({ form }: FieldProps<string, DatePickerRangeInputState>) => (
+                <FormControl>
+                  <FormLabel>{label}</FormLabel>
+                  <DatePicker
+                    selectsRange={true}
+                    customInput={<DateInput placeholder="YYYY-MM-DD" fontSize={'sm'} />}
+                    onChange={dateRange => {
+                      const [startDate, endDate] = dateRange;
+                      const utcStart = startDate
+                        ? new UTCDate(
+                            startDate.getUTCFullYear(),
+                            startDate.getUTCMonth(),
+                            startDate.getUTCDate(),
+                            0,
+                            0,
+                            0
+                          ).getTime() / 1000
+                        : null;
+                      const utcEnd = endDate
+                        ? new UTCDate(
+                            endDate.getUTCFullYear(),
+                            endDate.getUTCMonth(),
+                            endDate.getUTCDate(),
+                            23,
+                            59,
+                            59
+                          ).getTime() / 1000
+                        : null;
+                      form.setFieldValue('endTime', utcEnd);
+                      form.setFieldValue('startTime', utcStart);
+                    }}
+                    startDate={
+                      form.values.startDate ? new UTCDate(form.values.startDate * 1000) : undefined
+                    }
+                    endDate={
+                      form.values.endDate ? new UTCDate(form.values.endDate * 1000) : undefined
+                    }
+                    dateFormat="yyyy-MM-dd"
+                  />
+                </FormControl>
+              )}
+            </Field>
+          </Stack>
+          <Box mt={4}>
+            <Button
+              width="100%"
+              type="submit"
+              fontSize={'sm'}
+              variant={'secondary'}
+              height={10}
+              color="textSubdued"
+            >
+              Apply
+            </Button>
+          </Box>
+        </Form>
+      )}
+    </Formik>
+  );
+}