fix!: upgrade eslint version to 9.12.0 (#1706)

* upgrade eslint version to 9.12.0

* fix new linter version errors

* linter fix

Author: adrianboros

.eslintignore

@@ -0,0 +1,95 @@
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat'
+import react from 'eslint-plugin-react'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import globals from 'globals'
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+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: [
+      '**/.*',
+      '**/*.js',
+      '**/*.json',
+      '**/node_modules',
+      '**/dist',
+      '**/coverage',
+      '**/.DS_Store',
+      '**/node_modules',
+      'build',
+      'dist',
+      '.next',
+      '**/.env',
+      '**/.env.*',
+      '**/generated',
+      '**/pnpm-lock.yaml'
+    ]
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      'eslint:recommended',
+      'plugin:react/recommended',
+      'plugin:react-hooks/recommended',
+      'plugin:@typescript-eslint/recommended',
+      'prettier'
+    )
+  ),
+  {
+    plugins: {
+      'react': fixupPluginRules(react),
+      '@typescript-eslint': fixupPluginRules(typescriptEslint)
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      },
+
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: 'commonjs',
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+
+    settings: {
+      react: {
+        version: 'detect'
+      },
+
+      next: {
+        rootDir: './packages/wallet/frontend/src'
+      }
+    },
+
+    rules: {
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'off',
+
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_'
+        }
+      ],
+      'no-redeclare': ['error', { builtinGlobals: false }]
+    }
+  }
+]

.eslintrc.js

@@ -18,8 +18,8 @@
     "clean:modules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
     "dev": "pnpm localenv:start && concurrently -n 'WALLET,BOUTIQUE' -c blue.bold,red.bold 'pnpm wallet:frontend dev' 'pnpm boutique:frontend dev'",
     "format": "pnpm prettier:write && pnpm lint:fix",
-    "lint:check": "eslint -c '.eslintrc.js' --max-warnings=0 .",
-    "lint:fix": "eslint -c '.eslintrc.js' --max-warnings=0 --fix .",
+    "lint:check": "eslint --max-warnings=0 .",
+    "lint:fix": "eslint --max-warnings=0 --fix .",
     "compose": "docker compose -f ./docker/dev/docker-compose.yml",
     "compose:prod": "docker compose -f ./docker/prod/docker-compose.yml",
     "localenv:start": "pnpm compose up -d --build",
@@ -33,13 +33,17 @@
     "wallet:frontend": "pnpm --filter @wallet/frontend --"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.12.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "concurrently": "^9.0.1",
-    "eslint": "^8.57.1",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "globals": "^15.10.0",
     "only-allow": "^1.2.1",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",

eslint.config.mjs

@@ -7,7 +7,6 @@ import {
 } from '@tanstack/react-query'
 import { z } from 'zod'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 interface FetcherOptions {
   endpoint: string
   method?: string

package.json

@@ -33,11 +33,7 @@ export async function fetcher<JSON = any>(
   const json = await response.json()
   if (!response.ok) {
     const error = json as ErrorResponse
-    throw new APIError(
-      error.message,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      error.errors as unknown as Errors
-    )
+    throw new APIError(error.message, error.errors as unknown as Errors)
   }
 
   return json

packages/boutique/frontend/src/hooks/use-custom-mutation.ts

@@ -13,7 +13,7 @@ const IMAGES = {
   PeopleDark: 'people-dark.webp'
 } as const
 
-type Image = keyof typeof IMAGES
+type ImageKey = keyof typeof IMAGES
 
 type AuthLayoutProps = {
   image: string
@@ -23,7 +23,7 @@ type AuthLayoutProps = {
 const AuthLayout = ({ image, children }: AuthLayoutProps) => {
   const theme = useTheme()
   const imageName = theme.theme === 'dark' ? `${image}Dark` : `${image}Light`
-  const imageSrc = `/${IMAGES[imageName as Image]}`
+  const imageSrc = `/${IMAGES[imageName as ImageKey]}`
   return (
     <>
       <div className="flex min-h-full w-screen">

packages/boutique/frontend/src/lib/fetcher.ts

@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 import { DialogDispatch, DialogState } from '../types/dialog'
 
-type DialogContext = {
+type DialogContextType = {
   state: DialogState
   dispatch: DialogDispatch
 }
@@ -11,7 +11,7 @@ export const dialogInitialState = {
   dialog: null
 } satisfies DialogState
 
-export const DialogContext = createContext<DialogContext>({
+export const DialogContext = createContext<DialogContextType>({
   state: dialogInitialState,
   dispatch: () => void 0
 })

packages/wallet/frontend/src/components/layouts/AuthLayout.tsx

@@ -323,7 +323,7 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
                     {trx.type === 'INCOMING' ? '+' : '-'}
                     {
                       formatAmount({
-                        value: String(trx.value) ?? 0,
+                        value: String(trx.value) || '0',
                         assetCode: trx.assetCode,
                         assetScale: trx.assetScale
                       }).amount