Merge remote-tracking branch 'origin/main' into issue-#1377

.github/workflows/update_browserslist.yaml

@@ -1,7 +1,7 @@
 name: Update Browserslist DB
 on:
   schedule:
-    - cron: '0 0 * * 0' # Runs every week at 00:00 on Sunday
+    - cron: '0 0 1 * *' # Runs every month at 00:00 on the 1st
   workflow_dispatch: # Allows manual triggering of the workflow
 jobs:
   update-browserslist-db:

e2e/utils/simulator/CreateSimulationDriver.ts

@@ -97,7 +97,6 @@ export class CreateSimulationDriver {
 
   async fillDates(start: string, end: string) {
     const [from, to] = [dayjs(start).unix(), dayjs(end).unix()].sort();
-
     await this.page.getByTestId('date-picker-button').click();
     // Select date twice to force range to be 1 day long
     await this.selectDate(to);

package.json

@@ -68,7 +68,6 @@
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "mipd": "^0.0.7",
     "msw": "^2.3.1",
     "postcss": "^8.4.31",
     "prettier": "^2.7.1",
@@ -87,7 +86,7 @@
     "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^1.6.0",
-    "wagmi": "2.12.12",
+    "wagmi": "2.12.32",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

src/components/common/datePicker/DateRangePicker.tsx

@@ -39,11 +39,12 @@ interface Props {
   end?: Date;
   onConfirm: (props: { start?: Date; end?: Date }) => void;
   setIsOpen: Dispatch<boolean>;
-  presets: DatePickerPreset[];
+  presets?: DatePickerPreset[];
   options?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect'>;
   required?: boolean;
   form?: string;
   disabled?: boolean;
+  className?: string;
 }
 
 const displayRange = (start?: Date, end?: Date) => {
@@ -70,7 +71,8 @@ export const DateRangePicker = memo(function DateRangePicker(
           ? 'border-white/60 active:border-white/80'
           : 'border-background-800 hover:border-background-700 active:border-background-600',
         props.disabled &&
-          'border-background-800 hover:border-background-800 active:border-background-800 cursor-not-allowed hover:bg-transparent'
+          'border-background-800 hover:border-background-800 active:border-background-800 cursor-not-allowed hover:bg-transparent',
+        props.className
       )}
       data-testid="date-picker-button"
       disabled={props.disabled}
@@ -133,7 +135,7 @@ const Content = (props: Props) => {
   );
   const [date, setDate] = useState(baseDate);
   const hasDates = !!(date?.from && date?.to);
-  const selectedPreset = props.presets.find((p) => {
+  const selectedPreset = props.presets?.find((p) => {
     if (!hasDates) return false;
     const from = subDays(now, p.days);
     return isSameDay(from, date?.from!) && isSameDay(date?.to!, now);
@@ -167,25 +169,27 @@ const Content = (props: Props) => {
   return (
     <div className="flex flex-col gap-20 p-20">
       <div className="gap-30 flex">
-        <div
-          role="radiogroup"
-          aria-label="presets"
-          className="hidden w-[200px] flex-col gap-5 md:flex"
-        >
-          {props.presets.map(({ label, days }) => (
-            <button
-              type="button"
-              role="radio"
-              key={days}
-              className="rounded-8 px-30 text-14 font-weight-500 hover:border-background-700 box-border border-2 border-transparent bg-clip-padding py-8 text-start [&[aria-checked=true]]:bg-black"
-              onClick={() => handlePreset(days)}
-              aria-checked={selectedPreset?.days === days}
-              data-testid="date-picker-button"
-            >
-              {label}
-            </button>
-          ))}
-        </div>
+        {!!props.presets && (
+          <div
+            role="radiogroup"
+            aria-label="presets"
+            className="hidden w-[200px] flex-col gap-5 md:flex"
+          >
+            {props.presets.map(({ label, days }) => (
+              <button
+                type="button"
+                role="radio"
+                key={days}
+                className="rounded-8 px-30 text-14 font-weight-500 hover:border-background-700 box-border border-2 border-transparent bg-clip-padding py-8 text-start [&[aria-checked=true]]:bg-black"
+                onClick={() => handlePreset(days)}
+                aria-checked={selectedPreset?.days === days}
+                data-testid="date-picker-button"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        )}
         <Calendar
           defaultMonth={subMonths(date?.to ?? new Date(), 1)}
           numberOfMonths={aboveBreakpoint('sm') ? 2 : 1}

src/components/common/tooltip/FloatTooltip.tsx

@@ -25,6 +25,7 @@ import {
   safePolygon,
 } from '@floating-ui/react';
 import type { Placement } from '@floating-ui/react';
+import { cn } from 'utils/helpers';
 
 interface FloatTooltipOptions {
   initialOpen?: boolean;
@@ -126,13 +127,13 @@ export const FloatTooltipContent = forwardRef<
   return (
     <FloatingPortal>
       <div
-        className="bg-background-800 rounded p-16"
         ref={ref}
         style={{
           ...context.floatingStyles,
           ...style,
         }}
         {...context.getFloatingProps(props)}
+        className={cn('bg-background-800 rounded p-16', props.className)}
       />
     </FloatingPortal>
   );

src/components/debug/DebugFeatureFlag.tsx

@@ -0,0 +1,78 @@
+import { Button } from 'components/common/button';
+import { FormEvent } from 'react';
+import { lsService } from 'services/localeStorage';
+import { useStore } from 'store';
+import { featureFlags } from 'utils/featureFlags';
+
+export const DebugFeatureFlag = () => {
+  const { toaster } = useStore();
+
+  const setFeatureFlags = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    const values = data.getAll('flags');
+    lsService.setItem('featureFlags', values as string[]);
+    if (values.length) toaster.addToast('Enjoy your new superpowers 🔥');
+    else toaster.addToast('Features disabled');
+  };
+  return (
+    <form
+      onSubmit={setFeatureFlags}
+      className="rounded-18 bg-background-800 flex flex-col gap-20 border border-white/60 p-20 md:col-span-2"
+    >
+      <h2>🧪 Feature Flags</h2>
+      {!!featureFlags.length ? <FeatureRadioGroup /> : <EmptyFlags />}
+      <Button
+        className="self-end"
+        variant="success"
+        type="submit"
+        disabled={!featureFlags.length}
+      >
+        Save
+      </Button>
+    </form>
+  );
+};
+
+const EmptyFlags = () => (
+  <p>There is no feature flags for now. Thanks for your interest.</p>
+);
+
+const FeatureRadioGroup = () => {
+  const currentFlags = lsService.getItem('featureFlags') ?? [];
+  return (
+    <>
+      <fieldset role="radiogroup" className="grid gap-16">
+        <legend className="mb-16">
+          Select the feature flags you want to test
+        </legend>
+        {featureFlags.map(({ value, label, description }) => (
+          <div
+            key={value}
+            className="rounded-8 bg-background-700 flex gap-16 p-16"
+          >
+            <input
+              className="h-24 w-24 self-center"
+              id={`flag-${value}`}
+              type="checkbox"
+              name="flags"
+              value={value}
+              aria-describedby={`flag-description-${value}`}
+              defaultChecked={currentFlags.includes(value)}
+            />
+            <div className="flex flex-1 flex-col">
+              <label htmlFor={`flag-${value}`}>{label}</label>
+              <p
+                id={`flag-description-${value}`}
+                className="text-14 text-white/80"
+              >
+                {description}
+              </p>
+            </div>
+          </div>
+        ))}
+      </fieldset>
+      <p className="text-warning">Disclaimer: beware of the dragons 🐲</p>
+    </>
+  );
+};