chore: upgrade nextjs, typescript and other toolings

eslint.config.mjs

@@ -0,0 +1,88 @@
+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',
+    ],
+  },
+  ...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: {
+      camelcase: ['error'],
+      'guard-for-in': ['error'],
+      'import/no-cycle': ['error'],
+      'import/no-self-import': ['error'],
+      'no-console': ['warn'],
+      'no-eval': ['error'],
+      'no-ex-assign': ['error'],
+      'no-extra-boolean-cast': ['error'],
+      'no-constant-condition': ['off'],
+      'no-multiple-empty-lines': ['error'],
+      'jsx-a11y/alt-text': ['off'],
+
+      '@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: '^_',
+        },
+      ],
+
+      '@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/debugger/debugMessage.ts

@@ -3,11 +3,11 @@
 import { BigNumber, utils as ethersUtils, providers } from 'ethers';
 
 import {
-  IInterchainSecurityModule__factory,
-  IMailbox__factory,
-  IMessageRecipient__factory,
-  IMultisigIsm__factory,
-  InterchainGasPaymaster__factory,
+  InterchainGasPaymaster__factory as InterchainGasPaymasterFactory,
+  IInterchainSecurityModule__factory as InterchainSecurityModuleFactory,
+  IMailbox__factory as MailboxFactory,
+  IMessageRecipient__factory as MessageRecipientFactory,
+  IMultisigIsm__factory as MultisigIsmFactory,
 } from '@hyperlane-xyz/core';
 import { IRegistry } from '@hyperlane-xyz/registry';
 import { ChainMap, ChainMetadata, MAILBOX_VERSION, MultiProvider } from '@hyperlane-xyz/sdk';
@@ -146,7 +146,7 @@ async function debugMessageDelivery(
   senderBytes: string,
   body: string,
 ) {
-  const recipientContract = IMessageRecipient__factory.connect(recipient, destProvider);
+  const recipientContract = MessageRecipientFactory.connect(recipient, destProvider);
   const handleCalldata = recipientContract.interface.encodeFunctionData('handle', [
     originDomain,
     senderBytes,
@@ -206,23 +206,23 @@ async function checkMultisigIsmEmpty(
   destMailbox: Address,
   destProvider: Provider,
 ) {
-  const mailbox = IMailbox__factory.connect(destMailbox, destProvider);
+  const mailbox = MailboxFactory.connect(destMailbox, destProvider);
   const ismAddress = await mailbox.recipientIsm(recipientAddr);
   if (!isValidAddress(ismAddress)) {
     logger.error(
       `Recipient ${recipientAddr} on mailbox ${destMailbox} does not have a valid ISM address: ${ismAddress}`,
     );
     throw new Error('Recipient ISM is not a valid address');
   }
-  const ism = IInterchainSecurityModule__factory.connect(ismAddress, destProvider);
+  const ism = InterchainSecurityModuleFactory.connect(ismAddress, destProvider);
   const moduleType = await ism.moduleType();
 
   const ismDetails = { ismAddress, moduleType };
   if (moduleType !== IsmModuleTypes.LEGACY_MULTISIG && moduleType !== IsmModuleTypes.MULTISIG) {
     return { ismDetails };
   }
 
-  const multisigIsm = IMultisigIsm__factory.connect(ismAddress, destProvider);
+  const multisigIsm = MultisigIsmFactory.connect(ismAddress, destProvider);
   const [validators, threshold] = await multisigIsm.validatorsAndThreshold(messageBytes);
 
   if (!validators?.length) {
@@ -298,7 +298,7 @@ async function tryCheckIgpGasFunded(
 }
 
 async function fetchGasPaymentEvents(provider: Provider, messageId: string) {
-  const igpInterface = InterchainGasPaymaster__factory.createInterface();
+  const igpInterface = InterchainGasPaymasterFactory.createInterface();
   const paymentFragment = igpInterface.getEvent('GasPayment');
   const paymentTopics = igpInterface.encodeFilterTopics(paymentFragment.name, [messageId]);
   const paymentLogs = (await provider.getLogs({ topics: paymentTopics })) || [];
@@ -332,7 +332,7 @@ async function tryCheckBytecodeHandle(provider: Provider, recipientAddress: stri
   try {
     // scan bytecode for handle function selector
     const bytecode = await provider.getCode(recipientAddress);
-    const msgRecipientInterface = IMessageRecipient__factory.createInterface();
+    const msgRecipientInterface = MessageRecipientFactory.createInterface();
     const handleFunction = msgRecipientInterface.functions[HANDLE_FUNCTION_SIG];
     const handleSignature = msgRecipientInterface.getSighash(handleFunction);
     return bytecode.includes(strip0x(handleSignature));

src/features/deliveryStatus/fetchDeliveryStatus.ts

@@ -1,6 +1,6 @@
 import { constants } from 'ethers';
 
-import { IMailbox__factory } from '@hyperlane-xyz/core';
+import { IMailbox__factory as MailboxFactory } from '@hyperlane-xyz/core';
 import { IRegistry } from '@hyperlane-xyz/registry';
 import { ChainMap, ChainMetadata, MultiProvider } from '@hyperlane-xyz/sdk';
 
@@ -91,7 +91,7 @@ async function checkIsMessageDelivered(
 ) {
   const { msgId, destinationDomainId } = message;
   const provider = multiProvider.getProvider(destinationDomainId);
-  const mailbox = IMailbox__factory.connect(mailboxAddr, provider);
+  const mailbox = MailboxFactory.connect(mailboxAddr, provider);
 
   // Try finding logs first as they have more info
   try {

src/features/messages/ica.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { BigNumber, providers, utils } from 'ethers';
 import { useMemo } from 'react';
 
-import { InterchainAccountRouter__factory } from '@hyperlane-xyz/core';
+import { InterchainAccountRouter__factory as InterchainAccountRouterFactory } from '@hyperlane-xyz/core';
 import { eqAddress, isValidAddress } from '@hyperlane-xyz/utils';
 
 import { useReadyMultiProvider } from '../../store';
@@ -83,7 +83,7 @@ export async function tryFetchIcaAddress(
     if (!ICA_ADDRESS) return null;
     logger.debug('Fetching Ica address', originDomainId, sender);
 
-    const icaContract = InterchainAccountRouter__factory.connect(ICA_ADDRESS, provider);
+    const icaContract = InterchainAccountRouterFactory.connect(ICA_ADDRESS, provider);
     const icaAddress = await icaContract['getInterchainAccount(uint32,address)'](
       originDomainId,
       sender,