chore: Upgrade Next, Typescript, ESlint, and others

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,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 
+
 const { version } = require('./package.json')
 const { withSentryConfig } = require("@sentry/nextjs");
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
@@ -81,22 +82,19 @@ const nextConfig = {
 
   reactStrictMode: true,
   swcMinify: true,
-
-  sentry: {
-    hideSourceMaps: true,
-    tunnelRoute: "/monitoring-tunnel",
-  },
 }
 
-const sentryWebpackPluginOptions = {
+const sentryOptions = {
   org: "hyperlane",
   project: "warp-ui",
   authToken: process.env.SENTRY_AUTH_TOKEN,
+  hideSourceMaps: true,
+  tunnelRoute: "/monitoring-tunnel",
   bundleSizeOptimizations: {
     excludeDebugStatements: true,
     excludeReplayIframe: true,
     excludeReplayShadowDom: true,
   },
 };
 
-module.exports = withBundleAnalyzer(withSentryConfig(nextConfig, sentryWebpackPluginOptions));
+module.exports = withBundleAnalyzer(withSentryConfig(nextConfig, sentryOptions));

package.json

@@ -4,7 +4,7 @@
   "version": "5.1.0",
   "author": "J M Rossy",
   "dependencies": {
-    "@chakra-ui/next-js": "^2.2.0",
+    "@chakra-ui/next-js": "^2.4.2",
     "@chakra-ui/react": "^2.8.2",
     "@cosmjs/cosmwasm-stargate": "^0.32.4",
     "@cosmjs/stargate": "^0.32.4",
@@ -14,9 +14,9 @@
     "@cosmos-kit/leap": "^2.12.2",
     "@cosmos-kit/react": "^2.18.0",
     "@drift-labs/snap-wallet-adapter": "^0.3.0",
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@headlessui/react": "^1.7.14",
+    "@headlessui/react": "^2.2.0",
     "@hyperlane-xyz/registry": "5.0.0",
     "@hyperlane-xyz/sdk": "5.6.2",
     "@hyperlane-xyz/utils": "5.6.2",
@@ -26,53 +26,51 @@
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",
     "@rainbow-me/rainbowkit": "1.3.0",
-    "@sentry/nextjs": "^7.118.0",
+    "@sentry/nextjs": "^8.37.1",
     "@solana/spl-token": "^0.3.8",
     "@solana/wallet-adapter-base": "^0.9.22",
     "@solana/wallet-adapter-react": "^0.15.32",
     "@solana/wallet-adapter-react-ui": "^0.9.31",
     "@solana/wallet-adapter-wallets": "^0.19.16",
     "@solana/web3.js": "^1.77.0",
-    "@tanstack/react-query": "^4.29.7",
-    "@vercel/analytics": "^1.1.1",
-    "bignumber.js": "^9.1.1",
+    "@tanstack/react-query": "^5.59.19",
+    "@vercel/analytics": "^1.3.2",
+    "@vercel/functions": "^1.5.0",
+    "bignumber.js": "^9.1.2",
     "buffer": "^6.0.3",
     "cosmjs-types": "^0.9.0",
-    "formik": "^2.4.5",
+    "formik": "^2.4.6",
     "framer-motion": "^10.16.4",
-    "next": "^13.5.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-toastify": "^9.1.3",
+    "next": "^15.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-toastify": "^10.0.6",
     "viem": "1.20.0",
     "wagmi": "^1.4.12",
-    "zod": "^3.21.4",
-    "zustand": "^4.3.9"
+    "zod": "3.21.4",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.5",
+    "@next/bundle-analyzer": "^15.0.2",
     "@tanstack/eslint-plugin-query": "^5.28.6",
-    "@types/jest": "^29.5.3",
     "@types/node": "^18.11.18",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.49.0",
-    "eslint-config-next": "^13.4.3",
-    "eslint-config-prettier": "^8.8.0",
-    "jest": "^29.6.3",
-    "jest-transform-yaml": "^1.1.2",
-    "postcss": "^8.4.23",
+    "@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.14.0",
+    "eslint-config-next": "^15.0.2",
+    "eslint-config-prettier": "^9.1.0",
+    "postcss": "^8.4.47",
     "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.3.3",
-    "yaml": "^2.3.4",
-    "yaml-loader": "^0.8.0"
+    "tailwindcss": "^3.4.14",
+    "ts-node": "^10.9.2",
+    "typescript": "5.6.3",
+    "yaml": "^2.6.0",
+    "yaml-loader": "^0.8.1"
   },
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",
@@ -90,16 +88,17 @@
     "typecheck": "tsc",
     "lint": "next lint",
     "start": "next start",
-    "test": "jest --passWithNoTests",
     "prettier": "prettier --write ./src"
   },
   "types": "dist/src/index.d.ts",
   "resolutions": {
     "@solana/web3.js": "^1.78.4",
     "axios": "0.27.2",
+    "bignumber": "9.1.2",
     "bn.js": "^5.2",
     "cosmjs-types": "0.9",
     "ethers": "^5.7",
+    "globals": "^14.0.0",
     "lit-html": "2.8.0",
     "react-fast-compare": "^3.2",
     "viem": "1.20.0",

src/context/context.ts

@@ -68,7 +68,7 @@ export function getIndexForToken(token?: IToken): number | undefined {
 export function tryFindToken(chain: ChainName, addressOrDenom?: string): IToken | null {
   try {
     return getWarpCore().findToken(chain, addressOrDenom);
-  } catch (error) {
+  } catch {
     return null;
   }
 }

src/features/transfer/TransfersDetailsModal.tsx

@@ -196,9 +196,7 @@ export function TransfersDetailsModal({
         <div className="flex flex-col items-center justify-center py-4">
           <Spinner />
           <div
-            className={`mt-5 text-center text-sm ${
-              status === TransferStatus.Failed ? 'text-red-600' : 'text-gray-600'
-            }`}
+            className={`mt-5 text-center text-sm ${isFailed ? 'text-red-600' : 'text-gray-600'}`}
           >
             {statusDescription}
           </div>

src/features/transfer/maxAmount.ts

@@ -21,7 +21,7 @@ export function useFetchMaxAmount() {
   const mutation = useMutation({
     mutationFn: (params: FetchMaxParams) => fetchMaxAmount(params),
   });
-  return { fetchMaxAmount: mutation.mutateAsync, isLoading: mutation.isLoading };
+  return { fetchMaxAmount: mutation.mutateAsync, isLoading: mutation.isPending };
 }
 
 async function fetchMaxAmount({ accounts, balance, destination, origin }: FetchMaxParams) {

src/middleware.ts

@@ -1,3 +1,4 @@
+import { geolocation } from '@vercel/functions';
 import { NextRequest, NextResponse } from 'next/server';
 
 export const config = {
@@ -44,8 +45,7 @@ const BLOCKED_REGIONS = [
 ];
 
 export function middleware(req: NextRequest) {
-  const country = req.geo?.country;
-  const region = req.geo?.region;
+  const { country, region } = geolocation(req);
 
   if (country && BLOCKED_COUNTRIES.includes(country)) {
     return NextResponse.redirect(new URL('/blocked', req.url));