Expo 53 and update to React 19

apps/desktop-wallet/package.json

@@ -41,7 +41,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@tanstack/react-query": "5.45.0",
+    "@tanstack/react-query": "^5.81.2",
     "@tanstack/react-query-devtools": "^5.50.1",
     "electron-context-menu": "^3.1.2",
     "electron-is-dev": "^2.0.0",
@@ -71,26 +71,26 @@
     "@ledgerhq/hw-transport-webhid": "^6.30.5",
     "@ledgerhq/hw-transport-webusb": "^6.29.9",
     "@reduxjs/toolkit": "^1.9.1",
-    "@tanstack/react-query-persist-client": "^5.45.0",
+    "@tanstack/react-query-persist-client": "^5.81.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@types/events": "^3.0.3",
     "@types/lodash": "^4.14.182",
     "@types/node": "^20.14.0",
-    "@types/react": "~18.3.20",
+    "@types/react": "~19.0.0",
     "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.2.4",
+    "@types/react-dom": "^19.1.6",
     "@types/semver-compare": "^1.0.1",
     "@types/zxcvbn": "^4.4.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.8",
     "@vitest/web-worker": "^2.1.2",
-    "@walletconnect/core": "2.17.2",
+    "@walletconnect/core": "2.21.3",
     "@walletconnect/keyvaluestorage": "1.1.1",
-    "@walletconnect/react-native-compat": "2.17.2",
-    "@walletconnect/sign-client": "2.17.2",
-    "@walletconnect/types": "2.17.2",
-    "@walletconnect/utils": "2.17.2",
+    "@walletconnect/react-native-compat": "2.21.3",
+    "@walletconnect/sign-client": "2.21.3",
+    "@walletconnect/types": "2.21.3",
+    "@walletconnect/utils": "2.21.3",
     "@yornaath/batshit": "^0.10.1",
     "ajv": "^8.12.0",
     "axios": "^1.12.0",
@@ -106,39 +106,39 @@
     "electron-devtools-installer": "^4.0.0",
     "eslint": "^8.48.0",
     "events": "^3.3.0",
-    "framer-motion": "^11.12.0",
+    "framer-motion": "^12.19.1",
     "i18next": "^23.4.6",
     "jsdom": "^21.1.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.287.0",
     "msw": "^2.7.0",
     "nanoid": "^3.3.8",
+    "overlayscrollbars-react": "^0.5.6",
     "posthog-js": "^1.52.0",
     "qrloop": "^1.4.1",
-    "react": "^18.3.1",
+    "react": "19.0.0",
     "react-apexcharts": "^1.4.0",
     "react-color": "^2.19.3",
     "react-confetti": "^6.0.1",
-    "react-custom-scroll": "^7.0.0",
     "react-detect-click-outside": "^1.1.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.0.0",
     "react-freeze": "^1.0.4",
-    "react-hook-form": "^7.42.1",
-    "react-i18next": "^13.2.1",
+    "react-hook-form": "^7.58.1",
+    "react-i18next": "^15.5.3",
     "react-idle-timer": "^5.7.2",
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "react-player": "^2.16.0",
     "react-qr-code": "^2.0.15",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.3.0",
     "react-tooltip": "^5.25.1",
     "redux": "^4.2.0",
     "semver-compare": "^1.0.0",
-    "styled-components": "^6.1.8",
+    "styled-components": "^6.1.19",
     "stylis": "^4.0.0",
     "ts-json-schema-generator": "^1.5.0",
     "type-fest": "^3.5.1",
-    "typescript": "^5.3.3",
+    "typescript": "~5.8.3",
     "vite": "^5.4.19",
     "vite-plugin-electron": "^0.29.0",
     "vite-plugin-svgr": "^3.2.0",

apps/desktop-wallet/src/animations/index.ts

@@ -1,3 +1,5 @@
+import { AnimationGeneratorType } from 'framer-motion'
+
 const transition = { duration: 0.3 }
 
 export const fadeIn = {
@@ -43,11 +45,11 @@ export const slowTransition = {
 }
 
 export const normalTransition = {
-  transition: { type: 'spring', damping: 50, stiffness: 600 }
+  transition: { type: 'spring' as AnimationGeneratorType, damping: 50, stiffness: 600 }
 }
 
 export const fastTransition = {
-  transition: { type: 'spring', damping: 40, stiffness: 900 }
+  transition: { type: 'spring' as AnimationGeneratorType, damping: 40, stiffness: 900 }
 }
 
 export const fadeInSlowly = {

apps/desktop-wallet/src/components/AppHeader.tsx

@@ -79,7 +79,7 @@ const AppHeader: FC<AppHeader> = ({ children, title, className, invisible }) =>
           )}
           <CompactToggle
             toggled={discreetMode}
-            onToggle={toggleDiscreetMode}
+            onClick={toggleDiscreetMode}
             IconOn={EyeOff}
             IconOff={Eye}
             data-tooltip-id="default"

apps/desktop-wallet/src/components/Button.tsx

@@ -202,10 +202,11 @@ export default styled(Button)`
         }
       }
 
-      ${children &&
-      css`
-        gap: 10px;
-      `}
+      ${children
+        ? css`
+            gap: 10px;
+          `
+        : ''}
     `
   }}
 

apps/desktop-wallet/src/components/DataList.tsx

@@ -7,8 +7,6 @@ interface DataListProps {
 }
 
 const DataList = ({ children, title }: DataListProps) => (
-  // validateChildrenType({ children, childType: DataListRow, parentName: 'DataList' })
-
   <DataListStyled>
     {title && <DataListTitle>{title}</DataListTitle>}
     {children}

apps/desktop-wallet/src/components/Inputs/CompactToggle.tsx

@@ -4,20 +4,12 @@ import Button, { ButtonProps } from '@/components/Button'
 
 interface CompactToggleProps extends ButtonProps {
   toggled: boolean
-  onToggle: (value: boolean) => void
   IconOn: LucideIcon
   IconOff: LucideIcon
 }
 
 const CompactToggle = ({ toggled, onToggle, IconOn, IconOff, ...props }: CompactToggleProps) => (
-  <Button
-    circle
-    transparent
-    role="secondary"
-    onClick={() => onToggle(!toggled)}
-    {...props}
-    Icon={toggled ? IconOn : IconOff}
-  />
+  <Button circle transparent role="secondary" {...props} Icon={toggled ? IconOn : IconOff} />
 )
 
 export default CompactToggle

apps/desktop-wallet/src/components/Inputs/Select.tsx

@@ -209,7 +209,7 @@ interface SelectOptionsModalProps<T extends OptionValue> {
   optionRender?: (option: SelectOption<T>, isSelected: boolean) => ReactNode
   searchPlaceholder?: string
   emptyListPlaceholder?: string
-  parentSelectRef?: RefObject<HTMLDivElement | HTMLButtonElement>
+  parentSelectRef?: RefObject<HTMLDivElement | HTMLButtonElement | null>
   minWidth?: number
   ListBottomComponent?: ReactNode
   isSearchable?: boolean

apps/desktop-wallet/src/components/Inputs/index.tsx

@@ -17,7 +17,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   Icon?: LucideIcon
   onIconPress?: () => void
   inputFieldStyle?: CSSProperties
-  inputFieldRef?: RefObject<HTMLInputElement>
+  inputFieldRef?: RefObject<HTMLInputElement | null>
   liftLabel?: boolean
   className?: string
   heightSize?: InputHeight

apps/desktop-wallet/src/components/Scrollbar.tsx

@@ -1,6 +1,7 @@
 import { useMotionValue } from 'framer-motion'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { ReactNode, UIEvent, useState } from 'react'
-import { CustomScroll } from 'react-custom-scroll'
+import { useTheme } from 'styled-components'
 
 import { ScrollContextProvider, ScrollContextType } from '@/contexts/scroll'
 
@@ -13,6 +14,7 @@ interface ScrollbarProps {
 const Scrollbar = ({ children, className, onScroll }: ScrollbarProps) => {
   const scrollY = useMotionValue(0)
   const [contextValue] = useState<ScrollContextType>({ scrollY })
+  const theme = useTheme()
 
   const handleScrollUpdate = (e: UIEvent<Element>) => {
     const scrollTop = (e.target as HTMLElement).scrollTop
@@ -25,9 +27,20 @@ const Scrollbar = ({ children, className, onScroll }: ScrollbarProps) => {
   }
 
   return (
-    <CustomScroll onScroll={handleScrollUpdate} flex="1" className={className}>
+    <OverlayScrollbarsComponent
+      style={{ flex: 1 }}
+      defer
+      onScroll={handleScrollUpdate}
+      className={className}
+      options={{
+        scrollbars: {
+          theme: theme.name === 'dark' ? 'os-theme-light' : 'os-theme-dark',
+          autoHide: 'leave'
+        }
+      }}
+    >
       <ScrollContextProvider value={contextValue}>{children}</ScrollContextProvider>
-    </CustomScroll>
+    </OverlayScrollbarsComponent>
   )
 }
 

apps/desktop-wallet/src/contexts/steps.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react'
+import { createContext, ReactNode, useContext } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
 type RouteParams = {
@@ -17,7 +17,7 @@ const initialContext: StepsContext = {
 export const StepsContext = createContext<StepsContext>(initialContext)
 
 interface StepsContextProviderProps {
-  stepElements: JSX.Element[]
+  stepElements: ReactNode[]
   baseUrl: string
 }
 

apps/desktop-wallet/src/index.tsx

@@ -1,5 +1,6 @@
 import '@/index.css' // Importing CSS through CSS file to avoid font flickering
 import '@/features/localization/i18n'
+import 'overlayscrollbars/overlayscrollbars.css'
 
 import { PersistQueryClientContextProvider } from '@alephium/shared-react'
 import isPropValid from '@emotion/is-prop-valid'

apps/desktop-wallet/src/pages/NewWallet/NewWalletLayout.tsx

@@ -1,10 +1,12 @@
+import { ReactNode } from 'react'
+
 import AppHeader from '@/components/AppHeader'
 import { StepsContextProvider } from '@/contexts/steps'
 import { WalletContextProvider } from '@/contexts/wallet'
 import LockedWalletLayout from '@/pages/LockedWalletLayout'
 
 interface NewWalletLayoutProps {
-  steps: JSX.Element[]
+  steps: ReactNode[]
   baseUrl: 'import' | 'create'
 }
 

apps/desktop-wallet/src/utils/hooks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 
 export const useTimeout = (callback: () => void, delay: number) => {
-  const savedCallback = useRef<() => void>()
+  const savedCallback = useRef<() => void>(() => null)
 
   useEffect(() => {
     savedCallback.current = callback

apps/desktop-wallet/src/utils/misc.ts

@@ -1,6 +1,6 @@
 import { createHash } from '@alephium/shared-crypto'
 import dayjs from 'dayjs'
-import { Children, Fragment, isValidElement, KeyboardEvent, ReactNode } from 'react'
+import { KeyboardEvent } from 'react'
 
 // ===================== //
 // ==== RUNNING ENV ==== //
@@ -73,26 +73,3 @@ export const cleanUrl = (url: string) => url.replace('https://', '')
 export const restartElectron = () => {
   window.electron?.app.restart()
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const validateChildrenType = <T extends (props: any) => ReactNode>({
-  children,
-  childType,
-  parentName
-}: {
-  children: ReactNode
-  childType: T
-  parentName: string
-}) => {
-  Children.forEach(children, (child) => {
-    if (!child || !isValidElement(child)) return
-
-    if (child.type === Fragment) {
-      validateChildrenType({ children: child.props.children, childType, parentName })
-    } else if (child.type !== childType) {
-      console.error(
-        `${parentName} only accepts ${childType.name} as children. Invalid child type: ${child.type.toString()}.`
-      )
-    }
-  })
-}

apps/explorer/package.json

@@ -41,33 +41,33 @@
     "@alephium/token-list": "^0.0.21",
     "@alephium/web3": "2.0.4",
     "@reduxjs/toolkit": "^1.9.1",
-    "@tanstack/query-sync-storage-persister": "5.45.0",
-    "@tanstack/react-query": "5.45.0",
-    "@tanstack/react-query-persist-client": "^5.45.0",
+    "@tanstack/query-sync-storage-persister": "^5.81.2",
+    "@tanstack/react-query": "^5.81.2",
+    "@tanstack/react-query-persist-client": "^5.81.2",
     "@yornaath/batshit": "^0.10.1",
     "apexcharts": "^3.35.0",
     "axios": "^1.12.0",
     "colord": "^2.9.3",
     "dayjs": "^1.10.7",
-    "framer-motion": "^11.12.0",
+    "framer-motion": "^12.19.1",
     "i18next": "^23.4.6",
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash": "^4.17.21",
     "qrcode.react": "^3.1.0",
-    "react": "^18.3.1",
+    "react": "19.0.0",
     "react-apexcharts": "^1.4.0",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^13.2.1",
+    "react-dom": "19.0.0",
+    "react-i18next": "^15.5.3",
     "react-icons": "^4.10.1",
     "react-intersection-observer": "^9.10.3",
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "react-middle-ellipsis": "^1.2.1",
     "react-page-visibility": "^7.0.0",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.3.0",
     "react-tooltip": "^5.25.1",
     "redux": "^4.2.0",
-    "styled-components": "^6.1.8",
+    "styled-components": "^6.1.19",
     "styled-normalize": "^8.0.7",
     "stylis": "^4.0.0"
   },
@@ -77,8 +77,8 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@types/lodash": "^4.14.182",
     "@types/node": "^20.14.0",
-    "@types/react": "~18.3.20",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "~19.0.0",
+    "@types/react-dom": "^19.1.6",
     "@types/react-page-visibility": "^6.4.1",
     "@types/react-router-dom": "^5.3.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -87,7 +87,7 @@
     "happy-dom": "^7.6.6",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "serve": "^14.1.2",
-    "typescript": "^5.3.3",
+    "typescript": "~5.8.3",
     "vite": "^5.4.19",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",

apps/explorer/src/components/Badge.tsx

@@ -1,5 +1,6 @@
 import { ALPH } from '@alephium/token-list'
 import { colord } from 'colord'
+import { ReactNode } from 'react'
 import styled, { css, DefaultTheme } from 'styled-components'
 
 import Amount from './Amount'
@@ -8,7 +9,7 @@ type BadgeType = 'plus' | 'minus' | 'neutral' | 'neutralHighlight' | 'accent'
 
 interface BadgeProps {
   type: BadgeType
-  content?: JSX.Element | string | undefined
+  content?: ReactNode | string | undefined
   amount?: string | bigint | undefined
   assetId?: string
   displayAmountSign?: boolean