chore: upgrade nextjs, typescript and other toolings

eslint.config.mjs

@@ -0,0 +1,84 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: [
+      '**/node_modules',
+      '**/dist',
+      '**/build',
+      '**/coverage',
+      '**/postcss.config.js',
+      '**/next.config.js',
+      '**/tailwind.config.js',
+      '**/sentry.*',
+    ],
+  },
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
+    'next',
+    'next/core-web-vitals',
+    'prettier',
+  ),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 12,
+      sourceType: 'module',
+
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+
+    rules: {
+      'no-console': ['warn'],
+      'no-eval': ['error'],
+      'no-ex-assign': ['error'],
+      'no-extra-boolean-cast': ['error'],
+      'no-constant-condition': ['off'],
+      'guard-for-in': ['error'],
+      '@typescript-eslint/ban-ts-comment': ['off'],
+      '@typescript-eslint/explicit-module-boundary-types': ['off'],
+      '@typescript-eslint/no-explicit-any': ['off'],
+      '@typescript-eslint/no-non-null-assertion': ['off'],
+      '@typescript-eslint/no-require-imports': ['warn'],
+
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+
+      'jsx-a11y/alt-text': ['off'],
+      '@next/next/no-img-element': ['off'],
+    },
+  },
+];

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 
-const { version } = require('./package.json')
+const { version } = require('./package.json');
 
-const isDev = process.env.NODE_ENV !== 'production'
+const isDev = process.env.NODE_ENV !== 'production';
 
 const securityHeaders = [
   {
@@ -27,7 +27,7 @@ const securityHeaders = [
       isDev ? " 'unsafe-eval'" : ''
     }; connect-src *; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'`,
   },
-]
+];
 
 const nextConfig = {
   async headers() {
@@ -36,15 +36,14 @@ const nextConfig = {
         source: '/(.*)',
         headers: securityHeaders,
       },
-    ]
+    ];
   },
 
   env: {
     NEXT_PUBLIC_VERSION: version,
   },
 
   reactStrictMode: true,
-  swcMinify: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -9,18 +9,18 @@
     "@hyperlane-xyz/sdk": "7.1.0",
     "@hyperlane-xyz/utils": "7.1.0",
     "@hyperlane-xyz/widgets": "7.1.0",
-    "@tanstack/react-query": "^5.35.5",
+    "@tanstack/react-query": "^5.62.3",
     "bignumber.js": "^9.1.2",
     "buffer": "^6.0.3",
     "clsx": "^2.1.1",
     "ethers": "^5.7.2",
-    "formik": "^2.2.9",
+    "formik": "^2.4.6",
     "graphql": "^16.6.0",
-    "next": "^13.5.7",
+    "next": "^15.0.4",
     "nextjs-cors": "^2.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-toastify": "^9.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-toastify": "^10.0.6",
     "react-tooltip": "^5.26.3",
     "urql": "^3.0.3",
     "yaml": "^2.4.5",
@@ -30,23 +30,23 @@
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.28.6",
     "@types/jest": "^29.5.3",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.41.0",
-    "eslint-config-next": "^13.4.19",
-    "eslint-config-prettier": "^8.8.0",
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.16.0",
+    "eslint-config-next": "^15.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "jest": "^29.6.3",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.49",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.13",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.5.4"
+    "tailwindcss": "^3.4.16",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.2"
   },
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",

src/features/messages/pi-queries/fetchPiChainMessages.ts

@@ -237,7 +237,7 @@ async function tryFetchBlockFromProvider(provider: providers.Provider, blockNum:
     logger.debug('Fetching block details for blockNum:', blockNum);
     const block = await provider.getBlock(blockNum);
     return block;
-  } catch (error) {
+  } catch {
     logger.debug('Could not fetch block details for blockNum:', blockNum);
     return null;
   }
@@ -257,7 +257,7 @@ function logToMessage(
   try {
     logDesc = mailbox.parseLog(log);
     if (logDesc.name.toLowerCase() !== 'dispatch') return null;
-  } catch (error) {
+  } catch {
     // Probably not a message log, ignore
     return null;
   }

src/features/messages/pi-queries/usePiChainMessageQuery.ts

@@ -68,7 +68,7 @@ export function usePiChainMessageSearchQuery({
           )
           .map((result) => result.value)
           .flat();
-      } catch (e) {
+      } catch {
         logger.debug('No PI messages found for query:', sanitizedInput);
         return [];
       }

src/features/messages/queries/encoding.ts

@@ -65,7 +65,7 @@ export function searchValueToPostgresBytea(input: string): string | undefined {
       return stringToPostgresBytea(bytes.toString('hex'));
     }
     return undefined;
-  } catch (error) {
+  } catch {
     // Search input couldn't be decoded and recoded properly
     return undefined;
   }

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AppProps } from 'next/app';
-import { ToastContainer, Zoom, toast } from 'react-toastify';
+import { ToastContainer, Zoom } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { Tooltip } from 'react-tooltip';
 import { Provider as UrqlProvider, createClient as createUrqlClient } from 'urql';
@@ -49,7 +49,7 @@ export default function App({ Component, router, pageProps }: AppProps) {
             </ChainConfigSyncer>
           </UrqlProvider>
         </QueryClientProvider>
-        <ToastContainer transition={Zoom} position={toast.POSITION.BOTTOM_RIGHT} limit={2} />
+        <ToastContainer transition={Zoom} position="bottom-right" limit={2} />
         <Tooltip id="root-tooltip" className="z-50" />
       </ErrorBoundary>
     </div>

src/utils/number.ts

@@ -5,7 +5,7 @@ import { logger } from './logger';
 export function tryToDecimalNumber(value: BigNumberish) {
   try {
     return BigNumber.from(value.toString()).toNumber();
-  } catch (error) {
+  } catch {
     logger.debug(`Error parsing hex number ${value}`);
     return null;
   }

src/utils/string.ts

@@ -13,7 +13,7 @@ export function tryUtf8DecodeBytes(value: string, fatal = true) {
   try {
     const decoder = new TextDecoder('utf-8', { fatal });
     return decoder.decode(Buffer.from(strip0x(value), 'hex'));
-  } catch (error) {
+  } catch {
     return undefined;
   }
 }