[wip] Chore/update react to v19

package.json

@@ -70,8 +70,8 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
     "@types/node": "^22.4.0",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/socket.io-client": "^1.4.36",
     "@types/uuid": "^9.0.2",
     "@types/w3c-web-usb": "^1.0.10",
@@ -99,23 +99,29 @@
     "*.{ts,tsx}": "eslint --cache --fix",
     "*.{ts,tsx,css,md}": "prettier --write"
   },
+  "overrides": {
+    "@tanstack/react-query": {
+      "react": "19.1.0",
+      "react-dom": "19.1.0"
+    }
+  },
   "dependencies": {
     "@download/blockies": "^1.0.3",
     "@ethersproject/abstract-provider": "^5.7.0",
     "@ethersproject/bignumber": "^5.7.0",
     "@ethersproject/hdnode": "^5.7.0",
     "@ethersproject/wallet": "^5.7.0",
     "@noble/ed25519": "^2.2.3",
-    "@react-spring/web": "^9.7.3",
+    "@react-spring/web": "^10.0.1",
     "@solana/spl-token": "^0.4.13",
     "@solana/wallet-standard-features": "^1.3.0",
     "@solana/web3.js": "^1.98.0",
     "@store-unit/react": "^1.0.4",
-    "@tanstack/react-query": "^4.35.3",
-    "@tanstack/react-virtual": "^3.2.0",
+    "@tanstack/react-query": "^4.40.0",
+    "@tanstack/react-virtual": "^3.13.12",
     "@walletconnect/jsonrpc-provider": "^1.0.13",
     "@walletconnect/jsonrpc-utils": "^1.0.8",
-    "@zeriontech/components": "^1.1.0",
+    "@zeriontech/components": "^2.0.1",
     "@zeriontech/hardware-wallet-connection": "^1.0.11",
     "@zeriontech/solana-wallet-standard": "^1.0.0-alpha.2",
     "@zeriontech/transactions": "^0.4.2",
@@ -129,7 +135,7 @@
     "chart.js": "^4.4.8",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",
-    "defi-sdk": "^0.1.9",
+    "defi-sdk": "^0.2.0",
     "downshift": "^7.6.0",
     "ed25519-hd-key": "^1.3.0",
     "ethers": "^6.14.0",
@@ -146,9 +152,9 @@
     "nanoid": "^4.0.2",
     "normalize.css": "^8.0.1",
     "normalized-contains": "^1.0.0",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-area": "^0.1.1-alpha.6",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.0",
     "react-qrcode-logo": "^2.9.0",
     "react-router-dom": "^6.18.0",
     "rlp": "^3.0.0",

src/shared/type-utils/PropsWithAs.ts

@@ -0,0 +1,10 @@
+import type {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ElementType,
+} from 'react';
+
+export type PropsWithAs<As extends ElementType> = {
+  as?: As;
+} & ComponentPropsWithoutRef<As> &
+  Partial<Pick<ComponentPropsWithRef<As>, 'ref'>>;

src/ui/App/App.tsx

@@ -127,10 +127,10 @@ function SomeKindOfResolver({
   notAuthenticated,
   authenticated,
 }: {
-  noUser: JSX.Element;
-  noWallet: JSX.Element;
-  notAuthenticated: JSX.Element;
-  authenticated: JSX.Element;
+  noUser: React.ReactNode;
+  noWallet: React.ReactNode;
+  notAuthenticated: React.ReactNode;
+  authenticated: React.ReactNode;
 }) {
   const { isLoading, isAuthenticated, existingUser, hasWallet } =
     useAuthState();
@@ -149,7 +149,7 @@ function SomeKindOfResolver({
   return authenticated;
 }
 
-function RequireAuth({ children }: { children: JSX.Element }) {
+function RequireAuth({ children }: { children: React.ReactNode }) {
   const location = useLocation();
   const { isLoading, isAuthenticated, existingUser } = useAuthState();
 

src/ui/components/AssetIcon/AssetIcon.tsx

@@ -27,6 +27,6 @@ export function AssetIcon({
       symbol={nft.symbol}
     />
   ) : (
-    (fallback as JSX.Element)
+    (fallback as React.ReactNode)
   );
 }

src/ui/components/Background/Background.tsx

@@ -99,5 +99,5 @@ export function Background({
     };
   }, [backgroundColor, uiScrollRootElement.style]);
 
-  return children as JSX.Element;
+  return children as React.ReactNode;
 }

src/ui/components/CopyButton/CopyButton.tsx

@@ -13,7 +13,7 @@ interface Props {
   tooltipContent?: React.ReactNode;
   tooltipPosition?: 'right' | 'center-bottom';
   size?: number;
-  buttonRef?: React.RefObject<HTMLButtonElement>;
+  buttonRef?: React.RefObject<HTMLButtonElement | null>;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 

src/ui/components/DappIconFetcher/DappIconFetcher.tsx

@@ -1,6 +1,6 @@
 import { useFetchDappIcon } from './useFetchDappIcon';
 
-type IconRenderer = (src: string | null) => JSX.Element;
+type IconRenderer = (src: string | null) => React.ReactNode;
 
 interface Props {
   url: string;

src/ui/components/DelayedRender/DelayedRender.tsx

@@ -20,7 +20,7 @@ export function DelayedRender({
   const render = useRenderDelay(delay);
 
   if (render) {
-    return children as JSX.Element;
+    return children as React.ReactNode;
   } else {
     return null;
   }

src/ui/components/PseudoRoute/PseudoRoute.tsx

@@ -3,7 +3,7 @@ export function PseudoRoute({
   component,
 }: {
   when: boolean;
-  component: JSX.Element;
+  component: React.ReactNode;
 }) {
   if (when) {
     return component;

src/ui/components/VerifyUser/WithPasswordSession.tsx

@@ -52,6 +52,6 @@ export function WithPasswordSession({
       </Background>
     );
   } else {
-    return children as JSX.Element;
+    return children as React.ReactNode;
   }
 }

src/ui/components/VersionUpgrade/VersionUpgrade.tsx

@@ -100,6 +100,6 @@ export function VersionUpgrade({ children }: React.PropsWithChildren) {
       </FillView>
     );
   } else {
-    return children as JSX.Element;
+    return children as React.ReactNode;
   }
 }

src/ui/jsx-fix.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  namespace JSX {
+    export type Element = React.JSX.Element;
+  }
+}
+
+export {};

src/ui/pages/GetStarted/ImportWallet/MnemonicImportView/AddressImportFlow/AddressImportFlow.tsx

@@ -134,7 +134,7 @@ export function SelectMoreWalletsDialog({
   wallets: DerivedWallets | null;
   existingAddressesSet: Set<string>;
   activeWallets: Record<string, { active: boolean }>;
-  dialogRef: React.RefObject<HTMLDialogElementInterface>;
+  dialogRef: React.RefObject<HTMLDialogElementInterface | null>;
   onSubmit: (values: Set<string>) => void;
 }) {
   const groupedByEcosystem = useMemo(() => {

src/ui/pages/GetStarted/ImportWallet/MnemonicImportView/AddressImportFlow/AddressImportMessages/AddressImportMessages.tsx

@@ -31,7 +31,7 @@ export function OnMount({
   useEffect(() => {
     onMountRef.current();
   }, []);
-  return children as JSX.Element;
+  return children as React.ReactNode;
 }
 
 const ANIMATION_DURATION = 1500;

src/ui/pages/History/AccelerateTransactionDialog/CancelTx/CancelTx.tsx

@@ -69,7 +69,7 @@ function CancelTxContent({
     [chainGasPrices]
   );
 
-  const feeValueCommonRef = useRef<string>(); /** for analytics only */
+  const feeValueCommonRef = useRef<string>(null); /** for analytics only */
   const handleFeeValueCommonReady = useCallback((value: string) => {
     feeValueCommonRef.current = value;
   }, []);

src/ui/pages/History/AccelerateTransactionDialog/SpeedUp/SpeedUp.tsx

@@ -64,7 +64,7 @@ export function SpeedUp({
     [chainGasPrices]
   );
 
-  const feeValueCommonRef = useRef<string>(); /** for analytics only */
+  const feeValueCommonRef = useRef<string>(null); /** for analytics only */
   const handleFeeValueCommonReady = useCallback((value: string) => {
     feeValueCommonRef.current = value;
   }, []);

src/ui/pages/Overview/Overview.tsx

@@ -272,7 +272,7 @@ function RewardsLinkIcon({
 
 function DevelopmentOnly({ children }: React.PropsWithChildren) {
   if (process.env.NODE_ENV === 'development') {
-    return children as JSX.Element;
+    return children as React.ReactNode;
   } else {
     return null;
   }

src/ui/pages/Overview/Positions/Positions.tsx

@@ -705,10 +705,10 @@ function MultiChainPositions({
   const groupedPositions = groupPositionsByDapp(items);
 
   if (isLoading) {
-    return renderLoadingView() as JSX.Element;
+    return renderLoadingView() as React.ReactNode;
   }
   if (!items || items.length === 0) {
-    return renderEmptyView() as JSX.Element;
+    return renderEmptyView() as React.ReactNode;
   }
 
   const chainTotalValue =
@@ -786,13 +786,13 @@ function RawChainPositions({
   if (isError) {
     return renderErrorView(
       networks?.getChainName(chain) || chainValue
-    ) as JSX.Element;
+    ) as React.ReactNode;
   }
   if (isLoading) {
-    return renderLoadingView() as JSX.Element;
+    return renderLoadingView() as React.ReactNode;
   }
   if (!addressPositions || !addressPositions.length) {
-    return renderEmptyView() as JSX.Element;
+    return renderEmptyView() as React.ReactNode;
   }
 
   return (

src/ui/pages/SendTransaction/SendTransaction.tsx

@@ -685,7 +685,7 @@ function SendTransactionContent({
     advancedDialogRef.current?.showModal();
   }, []);
 
-  const feeValueCommonRef = useRef<string>(); /** for analytics only */
+  const feeValueCommonRef = useRef<string>(null); /** for analytics only */
   const handleFeeValueCommonReady = useCallback((value: string) => {
     feeValueCommonRef.current = value;
   }, []);

src/ui/shared/forms/useCustomValidity.ts

@@ -4,7 +4,7 @@ export function useCustomValidity({
   ref,
   customValidity,
 }: {
-  ref: React.RefObject<HTMLInputElement>;
+  ref: React.RefObject<HTMLInputElement | null>;
   customValidity: string;
 }) {
   useEffect(() => {

src/ui/shared/requests/PortfolioValue/ChainValue/ChainValue.tsx

@@ -27,5 +27,5 @@ export function ChainValue({
     value || 0,
     'en',
     currency
-  ) as React.ReactNode as JSX.Element;
+  ) as React.ReactNode as React.ReactNode;
 }

src/ui/shared/requests/PortfolioValue/PortfolioValue.tsx

@@ -10,7 +10,7 @@ export function PortfolioValue({
 }: {
   address: string;
   enabled?: boolean;
-  render: (value: ReturnType<typeof useWalletPortfolio>) => JSX.Element;
+  render: (value: ReturnType<typeof useWalletPortfolio>) => React.ReactNode;
 }) {
   const { currency } = useCurrency();
   const query = useWalletPortfolio(

src/ui/shared/requests/useIsConnectedToActiveTab.ts

@@ -30,7 +30,9 @@ export function IsConnectedToActiveTab({
   render,
 }: {
   address: string;
-  render: (value: ReturnType<typeof useIsConnectedToActiveTab>) => JSX.Element;
+  render: (
+    value: ReturnType<typeof useIsConnectedToActiveTab>
+  ) => React.ReactElement;
 }) {
   return render(useIsConnectedToActiveTab(address));
 }

src/ui/shared/useStaleTime.ts

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 export function useStaleTime(value: unknown, staleTime: number) {
   const [isStale, setIsStale] = useState(false);
 
-  const debouncedRef = useRef<() => void>();
+  const debouncedRef = useRef<() => void>(null);
   if (!debouncedRef.current) {
     debouncedRef.current = debounce(() => {
       setIsStale(true);

src/ui/ui-kit/Button/Button.tsx

@@ -1,10 +1,7 @@
-import type {
-  ComponentPropsWithoutRef,
-  ComponentPropsWithRef,
-  ElementType,
-} from 'react';
+import type { ElementType } from 'react';
 import React from 'react';
 import cx from 'classnames';
+import type { PropsWithAs } from 'src/shared/type-utils/PropsWithAs';
 import { UIText } from '../UIText';
 import * as styles from './styles.module.css';
 
@@ -50,25 +47,19 @@ interface Props {
   size?: Size;
 }
 
-const ButtonElement = <As extends ElementType = 'button'>(
-  {
-    style,
-    as,
-    kind = 'primary',
-    size = 44,
-    children,
-    className,
-    ...props
-  }: Props & { as?: As } & ComponentPropsWithoutRef<As> & {
-      ref?: ComponentPropsWithRef<As>['ref'];
-    },
-  ref: React.Ref<ComponentPropsWithRef<As>['ref']>
-) => {
+export const Button = <As extends ElementType = 'button'>({
+  style,
+  as,
+  kind = 'primary',
+  size = 44,
+  children,
+  className,
+  ...props
+}: Props & PropsWithAs<As>) => {
   const isButton = as == null || as === 'button';
   return (
     <UIText
       as={as || 'button'}
-      ref={ref}
       kind="small/accent"
       className={cx(className, styles[kind], styles.button, {
         [styles.asButton]: !isButton,
@@ -90,5 +81,3 @@ const ButtonElement = <As extends ElementType = 'button'>(
     </UIText>
   );
 };
-
-export const Button = React.forwardRef(ButtonElement) as typeof ButtonElement;