Upgrade to React 19

e2e/pages/simulator.spec.ts

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 import { mockApi } from '../utils/mock-api';
 import {
   DebugDriver,

package.json

@@ -29,11 +29,11 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash": "4.14.191",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^1.6.0",
     "autoprefixer": "^10.4.12",
     "body-scroll-lock": "^4.0.0-beta.0",
@@ -58,9 +58,8 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-unused-imports": "^2.0.0",
     "ethers": "^5.1.3",
-    "framer-motion": "7.6.7",
+    "framer-motion": "11.13.5",
     "fuse.js": "^6.6.2",
-    "graphemer": "^1.4.0",
     "highcharts": "^11.1.0",
     "highcharts-react-official": "^3.2.0",
     "husky": "^8.0.3",
@@ -72,10 +71,9 @@
     "postcss": "^8.4.31",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "react": "^18.2.0",
-    "react-day-picker": "^8.10.0",
-    "react-dom": "^18.2.0",
-    "source-map-explorer": "^2.5.3",
+    "react": "19.0.0",
+    "react-day-picker": "9.4.2",
+    "react-dom": "19.0.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.4.3",
     "typechain": "^8.1.0",
@@ -92,7 +90,6 @@
   "scripts": {
     "compile-abis": "typechain --target ethers-v5 --out-dir \"src/abis/types\" \"src/abis/**/*.json\"",
     "prepare": "yarn husky install",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "vite",
     "start:ethereum": "cross-env VITE_NETWORK=ethereum vite",
     "start:sei": "cross-env VITE_NETWORK=sei vite",
@@ -109,7 +106,8 @@
     "lint": "eslint --ext .tsx,.ts .",
     "pre-commit": "yarn lint-staged",
     "e2e:report": "npx playwright show-report e2e/playwright-report",
-    "update-browserslist": "npx update-browserslist-db@latest"
+    "update-browserslist": "npx update-browserslist-db@latest",
+    "analyze": "npx analyze -c vite.config.ts"
   },
   "browserslist": {
     "production": [
@@ -129,7 +127,8 @@
     ]
   },
   "devDependencies": {
-    "@types/d3": "^7.4.3"
+    "@types/d3": "^7.4.3",
+    "vite-bundle-analyzer": "^0.15.2"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+}

src/components/common/Checkbox/Checkbox.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import { ReactComponent as IconCheck } from 'assets/icons/check.svg';
 import { cn } from 'utils/helpers';
 
-type Props = JSX.IntrinsicElements['button'] & {
+type Props = HTMLAttributes<HTMLButtonElement> & {
   isChecked: boolean;
   setIsChecked: (isChecked: boolean) => void;
 };

src/components/common/calendar/index.css

@@ -0,0 +1,82 @@
+.rdp-root {
+  @apply text-14;
+}
+.rdp-months {
+  display: flex;
+  gap: 30px;
+  position: relative;
+}
+.rdp-nav {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.rdp-nav button {
+  color: rgba(255 255 255 / 0.6);
+}
+.rdp-nav button:hover {
+  color: white;
+}
+.rdp-month {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.rdp-month_caption {
+  text-align: center;
+}
+.rdp-weekday {
+  @apply text-12;
+  font-weight: 400;
+  color: rgba(255 255 255 / 0.2);
+}
+
+.rdp-day {
+  color: rgba(255 255 255 / 0.6);
+  padding-inline: 0;
+}
+.rdp-disabled {
+  opacity: 0.5;
+}
+.rdp-outside {
+  opacity: 0.2;
+}
+.rdp-day_button {
+  width: 36px;
+  height: 32px;
+  border-radius: 8px;
+}
+.rdp-range_middle .rdp-day_button {
+  @apply bg-primary/20;
+  color: white;
+  border-radius: 0;
+}
+.rdp-day_button:hover {
+  @apply bg-black;
+  color: white;
+}
+.rdp-range_start .rdp-day_button {
+  @apply bg-primary;
+  color: black;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rdp-range_end .rdp-day_button {
+  @apply bg-primary;
+  color: black;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rdp-range_start.rdp-range_end .rdp-day_button {
+  border-radius: 8px;
+}
+
+.rdp-today .rdp-day_button {
+  border: solid 1px white;
+}
+.rdp-hidden {
+  visibility: hidden;
+}

src/components/common/calendar/index.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 import { DayPicker } from 'react-day-picker';
 import { ReactComponent as Chevron } from 'assets/icons/chevron.svg';
-import { cn } from 'utils/helpers';
+import './index.css';
 
 export type CalendarProps = ComponentProps<typeof DayPicker>;
 
@@ -16,52 +16,18 @@ export const Calendar = ({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={className}
-      classNames={{
-        months: 'flex flex-col sm:flex-row gap-30',
-        month: 'flex flex-col gap-20',
-        caption: 'flex items-center',
-        caption_start: 'flex-row ',
-        caption_label: 'flex-1 text-center text-14 order-1',
-        nav: 'contents gap-10',
-        nav_button: 'size-16 bg-transparent opacity-50 hover:opacity-100',
-        nav_button_previous: 'order-0',
-        nav_button_next: 'order-2',
-        table: 'border-collapse',
-        head_row: 'flex m-b-1',
-        head_cell: 'text-white/20 rounded-8 w-36 text-12 font-weight-400',
-        row: 'flex w-full mt-4',
-        cell: 'p-0 text-14',
-        day: cn(
-          'text-white/60 h-32 w-36 p-0 rounded-8 border-box',
-          'focus-visible:border focus-visible:border-white/50 focus-visible:outline-none',
-          'hover:!bg-background-900 hover:text-white'
-        ),
-        day_selected:
-          'focus-visible:bg-primary/80 font-weight-500 !text-white bg-primary/20 !rounded-0 [&:not(.outside)]:opacity-100',
-        day_range_start:
-          '!rounded-l-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
-        day_range_end:
-          '!rounded-r-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
-        day_today: 'border border-white/80',
-        day_outside: 'outside !opacity-20',
-        day_disabled: 'hover:!text-white !text-white/20 opacity-50',
-        day_range_middle: 'aria-selected:bg-primary/20',
-        day_hidden: 'invisible',
-        ...classNames,
-      }}
+      classNames={classNames}
       components={{
-        IconLeft: () => (
-          <Chevron
-            className="size-16 rotate-90"
-            data-testid="date-picker-left-arrow"
-          />
-        ),
-        IconRight: () => (
-          <Chevron
-            className="size-16 -rotate-90"
-            data-testid="date-picker-right-arrow"
-          />
-        ),
+        Chevron: ({ orientation }) => {
+          const rotate = orientation === 'left' ? 90 : -90;
+          return (
+            <Chevron
+              style={{ transform: `rotate(${rotate}deg)` }}
+              className="size-16 rotate-90"
+              data-testid={`date-picker-${orientation}-arrow`}
+            />
+          );
+        },
       }}
       weekStartsOn={weekStartsOn}
       {...props}

src/components/common/page/index.tsx

@@ -4,7 +4,7 @@ import { cn } from 'utils/helpers';
 export const Page: FC<{
   children: ReactNode;
   title?: string;
-  widget?: JSX.Element;
+  widget?: ReactNode;
   hideTitle?: boolean;
   className?: string;
 }> = ({ children, title, widget, hideTitle, className }) => {

src/components/common/searchInput/index.tsx

@@ -1,9 +1,9 @@
-import { KeyboardEventHandler } from 'react';
+import { HTMLAttributes, KeyboardEventHandler } from 'react';
 import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
 import { ReactComponent as IconClose } from 'assets/icons/times.svg';
 import { cn } from 'utils/helpers';
 
-type InputProps = JSX.IntrinsicElements['input'];
+type InputProps = HTMLAttributes<HTMLInputElement>;
 interface Props extends InputProps {
   value: string;
   setValue: (value: string) => void;

src/components/common/tooltip/FloatTooltip.tsx

@@ -105,13 +105,13 @@ export const FloatTooltipTrigger = forwardRef<
   if (!isValidElement(children)) {
     throw new Error('Child of TootipTrigger should be a valid element');
   }
+  const allProps =
+    typeof children.props === 'object'
+      ? { ...props, ...children.props }
+      : props;
   return cloneElement(
     children,
-    context.getReferenceProps({
-      ref,
-      ...props,
-      ...children.props,
-    })
+    context.getReferenceProps({ ref, ...allProps })
   );
 });
 

src/components/core/menu/mainMenu/MainMenuLeft.tsx

@@ -1,18 +1,21 @@
 import { FC } from 'react';
 import { carbonEvents } from 'services/events';
-import { Link, useMatchRoute, useRouterState } from 'libs/routing';
+import { Link, useRouterState } from 'libs/routing';
 import { ReactComponent as LogoCarbon } from 'assets/logos/carbon.svg';
 import { handleOnItemClick } from 'components/core/menu/utils';
 import { menuItems } from 'components/core/menu';
 
 export const MainMenuLeft: FC = () => {
   const { pathname } = useRouterState().location;
-  const match = useMatchRoute();
 
   const isSamePageLink = (to: string) => {
-    if (pathname.startsWith('/strategies') && to === '/') return true;
-    if (pathname.startsWith('/trade') && to.startsWith('/trade')) return true;
-    return !!match({ to, search: {}, params: {}, fuzzy: true });
+    if (to === '/') {
+      return pathname.startsWith('/strategies') || pathname === '/';
+    }
+    if (to.startsWith('/trade')) {
+      return pathname.startsWith('/trade');
+    }
+    return pathname.startsWith(to);
   };
 
   return (

src/components/explorer/ExplorerSearchInputContainer.tsx

@@ -4,7 +4,7 @@ import { ReactComponent as IconClose } from 'assets/icons/times.svg';
 
 type InputAttributes = JSX.IntrinsicElements['input'];
 interface Props extends Omit<InputAttributes, 'type'> {
-  containerRef?: RefObject<HTMLDivElement>;
+  containerRef?: RefObject<HTMLDivElement | null>;
   search: string;
 }
 

src/components/simulator/input/BuySellBlockNew/BudgetSection.tsx

@@ -4,7 +4,6 @@ import {
   StrategyInputOrder,
 } from 'hooks/useStrategyInput';
 import { Token } from 'libs/tokens';
-import { capitalize } from 'lodash';
 import { FC, useEffect, useId } from 'react';
 import { StrategyType } from 'libs/routing';
 import { TokenInputField } from 'components/common/TokenInputField/TokenInputField';
@@ -76,7 +75,7 @@ export const BudgetSection: FC<Props> = ({
                 }`
           }
         >
-          <span className="text-white/80">Set {capitalize(type)} Budget</span>
+          <span className="capitalize text-white/80">Set {type} Budget</span>
         </Tooltip>
         {isBudgetOptional && (
           <span className="font-weight-500 ml-8 text-white/60">Optional</span>

src/components/simulator/input/BuySellBlockNew/index.tsx

@@ -1,4 +1,3 @@
-import { capitalize } from 'lodash';
 import { FC, useId } from 'react';
 import { Token } from 'libs/tokens';
 import { UseQueryResult } from 'libs/queries';
@@ -57,8 +56,8 @@ export const BuySellBlock: FC<Props> = ({
         element={`Define the price you are willing to ${type} ${base.symbol} at. Make sure the price is in ${quote.symbol} tokens.`}
       >
         <p>
-          <span className="text-white/80">
-            Set {capitalize(type)} Price&nbsp;
+          <span className="capitalize text-white/80">
+            Set {type} Price&nbsp;
           </span>
           <span className="text-white/60">
             ({quote.symbol} per 1 {base.symbol})

src/components/simulator/input/SimInputStrategyType.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { ReactComponent as IconTwoRanges } from 'assets/icons/recurring.svg';
 import { ReactComponent as IconOverlappingStrategy } from 'assets/icons/overlapping.svg';
@@ -9,7 +9,7 @@ import { Link } from 'libs/routing';
 interface ItemProps {
   title: string;
   label: SimulatorType;
-  svg: JSX.Element;
+  svg: ReactNode;
   tooltipText: string;
 }