Cleanup

Author: chrstph-dvx

package.json

@@ -36,8 +36,8 @@
     "**/form-data": "4.0.4",
     "**/axios": "1.12.0",
     "@eslint/plugin-kit": "0.3.4",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.3.7"
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.0"
   },
   "keywords": [],
   "author": "",

packages/app/package.json

@@ -17,8 +17,8 @@
   },
   "devDependencies": {
     "@headlessui/tailwindcss": "^0.2.2",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.10",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.16"

packages/arb-token-bridge-ui/package.json

@@ -90,8 +90,8 @@
     "@testing-library/react": "^16.3.0",
     "@types/lodash-es": "^4.17.12",
     "@types/mocha": "^10.0.10",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.10",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-virtualized": "^9.22.3",
     "@types/yargs": "^17.0.33",

packages/arb-token-bridge-ui/src/components/App/App.tsx

@@ -25,7 +25,7 @@ declare global {
   }
 }
 
-const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
+const ArbTokenBridgeStoreSyncWrapper = (): React.JSX.Element | null => {
   const actions = useActions();
   const [networks] = useNetworks();
   const { childChain, childChainProvider, parentChain, parentChainProvider } =

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx

@@ -19,7 +19,7 @@ export type TokenButtonOptions = {
   disabled?: boolean;
 };
 
-export function TokenButton({ options }: { options?: TokenButtonOptions }): JSX.Element {
+export function TokenButton({ options }: { options?: TokenButtonOptions }): React.JSX.Element {
   const [selectedToken] = useSelectedToken();
   const disabled = options?.disabled ?? false;
 

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx

@@ -51,7 +51,10 @@ type TokenImportDialogProps = Omit<UseDialogProps, 'isOpen'> & {
   tokenAddress: string;
 };
 
-export function TokenImportDialog({ onClose, tokenAddress }: TokenImportDialogProps): JSX.Element {
+export function TokenImportDialog({
+  onClose,
+  tokenAddress,
+}: TokenImportDialogProps): React.JSX.Element {
   const {
     app: {
       arbTokenBridge: { bridgeTokens, token },

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx

@@ -21,7 +21,7 @@ export const TokenLogo = ({
 }: {
   srcOverride?: string | null;
   className?: string;
-  fallback?: JSX.Element;
+  fallback?: React.JSX.Element;
 }) => {
   const [selectedToken] = useSelectedToken();
   const tokensFromLists = useTokensFromLists();

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx

@@ -345,7 +345,7 @@ function TokenContractLink({ token }: { token: ERC20BridgeToken | null }) {
   );
 }
 
-export function TokenRow({ style, onTokenSelected, token }: TokenRowProps): JSX.Element {
+export function TokenRow({ style, onTokenSelected, token }: TokenRowProps): React.JSX.Element {
   const {
     name: tokenName,
     symbol: tokenSymbol,

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx

@@ -157,7 +157,7 @@ function TokensPanel({
   onTokenSelected,
 }: {
   onTokenSelected: (token: ERC20BridgeToken | null) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const { address: walletAddress } = useAccount();
   const {
     app: {

packages/arb-token-bridge-ui/src/components/common/Dialog.tsx

@@ -1,6 +1,7 @@
 import { DialogBackdrop, Dialog as HeadlessUIDialog } from '@headlessui/react';
 import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { useCallback, useRef, useState } from 'react';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { useMode } from '../../hooks/useMode';
@@ -45,7 +46,7 @@ type UseDialogParams = {
 
 export function useDialog(params?: UseDialogParams): UseDialogResult {
   const resolveRef =
-    useRef<(value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void>();
+    useRef<(value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void>(null);
 
   // Whether the dialog is currently open
   const [isOpen, setIsOpen] = useState(params?.defaultIsOpen ?? false);
@@ -65,7 +66,7 @@ export function useDialog(params?: UseDialogParams): UseDialogResult {
 
   const closeDialog = useCallback((confirmed: boolean, onCloseData?: unknown) => {
     if (typeof resolveRef.current !== 'undefined') {
-      resolveRef.current([confirmed, onCloseData]);
+      resolveRef.current?.([confirmed, onCloseData]);
     }
 
     setIsOpen(false);
@@ -77,7 +78,7 @@ export function useDialog(params?: UseDialogParams): UseDialogResult {
 export type DialogProps = {
   isOpen: boolean;
   closeable?: boolean;
-  title?: string | JSX.Element;
+  title?: string | React.JSX.Element;
   initialFocus?: React.MutableRefObject<HTMLElement | null>;
   cancelButtonProps?: Partial<ButtonProps>;
   actionButtonProps?: Partial<ButtonProps>;