Bump ESLint and related dependencies

.prettierrc.js → .prettierrc.mjs

@@ -1,8 +1,11 @@
 // All of these are defaults except singleQuote, but we specify them
 // for explicitness
-module.exports = {
+const config = {
   quoteProps: 'as-needed',
   singleQuote: true,
   tabWidth: 2,
   trailingComma: 'all',
+  plugins: ['prettier-plugin-packagejson'],
 };
+
+export default config;

eslint.config.mjs

@@ -0,0 +1,69 @@
+import base, { createConfig } from '@metamask/eslint-config';
+import browser from '@metamask/eslint-config-browser';
+import jest from '@metamask/eslint-config-jest';
+import nodejs from '@metamask/eslint-config-nodejs';
+import typescript from '@metamask/eslint-config-typescript';
+
+const config = createConfig([
+  {
+    ignores: [
+      '**/build/',
+      '**/.cache/',
+      '**/dist/',
+      '**/docs/',
+      '**/public/',
+      '.yarn/',
+    ],
+  },
+
+  {
+    extends: base,
+
+    languageOptions: {
+      sourceType: 'module',
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+
+    settings: {
+      'import-x/extensions': ['.js', '.mjs'],
+    },
+  },
+
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    extends: typescript,
+
+    rules: {
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-shadow': ['error', { allow: ['Text'] }],
+    },
+  },
+
+  {
+    files: ['**/*.js', '**/*.cjs', 'packages/snap/snap.config.ts'],
+    extends: nodejs,
+
+    languageOptions: {
+      sourceType: 'script',
+    },
+  },
+
+  {
+    files: ['**/*.test.ts', '**/*.test.tsx', '**/*.test.js'],
+    extends: [jest, nodejs],
+
+    rules: {
+      '@typescript-eslint/unbound-method': 'off',
+    },
+  },
+
+  {
+    files: ['packages/site/src/**'],
+    extends: [browser],
+  },
+]);
+
+export default config;

package.json

@@ -19,33 +19,34 @@
   "scripts": {
     "build": "yarn workspaces foreach --parallel --topological --verbose run build",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
-    "lint:eslint": "eslint . --cache --ext js,jsx,ts,tsx",
+    "lint:eslint": "eslint . --cache",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
-    "lint:misc": "prettier '**/*.json' '**/*.md' '!**/CHANGELOG.md' '**/*.yml' --ignore-path .gitignore",
+    "lint:misc": "prettier '**/*.json' '**/*.md' '**/*.yml' '!.yarnrc.yml' --ignore-path .gitignore --no-error-on-unmatched-pattern",
     "start": "yarn workspaces foreach --parallel --interlaced --verbose run start",
     "test": "yarn workspace snap run test"
   },
   "devDependencies": {
     "@lavamoat/allow-scripts": "^3.0.0",
     "@lavamoat/preinstall-always-fail": "^2.0.0",
-    "@metamask/eslint-config": "^12.2.0",
-    "@metamask/eslint-config-jest": "^12.1.0",
-    "@metamask/eslint-config-nodejs": "^12.1.0",
-    "@metamask/eslint-config-typescript": "^12.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "~2.26.0",
-    "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jsdoc": "^41.1.2",
-    "eslint-plugin-n": "^15.7.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "prettier": "^2.7.1",
+    "@metamask/eslint-config": "^14.0.0",
+    "@metamask/eslint-config-browser": "^14.0.0",
+    "@metamask/eslint-config-jest": "^14.0.0",
+    "@metamask/eslint-config-nodejs": "^14.0.0",
+    "@metamask/eslint-config-typescript": "^14.0.0",
+    "eslint": "^9.11.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import-x": "^4.3.0",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jsdoc": "^50.2.4",
+    "eslint-plugin-n": "^17.10.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.1.0",
+    "prettier": "^3.3.3",
     "prettier-plugin-packagejson": "^2.2.18",
     "sharp": "^0.32.6",
-    "typescript": "^4.7.4"
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.6.0"
   },
   "packageManager": "yarn@3.2.1",
   "engines": {

packages/site/package.json

@@ -8,9 +8,9 @@
     "build": "GATSBY_TELEMETRY_DISABLED=1 gatsby build",
     "clean": "rimraf public",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
-    "lint:eslint": "eslint . --cache --ext js,ts",
+    "lint:eslint": "eslint . --cache",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
-    "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --ignore-path .gitignore",
+    "lint:misc": "prettier '**/*.json' '**/*.md' '**/*.yml' '!.yarnrc.yml' --ignore-path ../../.gitignore --no-error-on-unmatched-pattern",
     "start": "GATSBY_TELEMETRY_DISABLED=1 gatsby develop"
   },
   "browserslist": {
@@ -33,11 +33,6 @@
     "styled-components": "5.3.3"
   },
   "devDependencies": {
-    "@metamask/eslint-config": "^12.2.0",
-    "@metamask/eslint-config-browser": "^12.1.0",
-    "@metamask/eslint-config-jest": "^12.1.0",
-    "@metamask/eslint-config-nodejs": "^12.1.0",
-    "@metamask/eslint-config-typescript": "^12.1.0",
     "@svgr/webpack": "^6.4.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.4",
@@ -47,24 +42,13 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "~2.26.0",
-    "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jsdoc": "^41.1.2",
-    "eslint-plugin-n": "^15.7.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint": "^9.11.0",
     "gatsby": "^5.13.3",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-styled-components": "^6.13.1",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
-    "prettier": "^2.7.1",
-    "prettier-plugin-packagejson": "^2.2.18",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4"
+    "typescript": "~5.7.3"
   },
   "engines": {
     "node": ">=18.6.0"

packages/site/src/components/Footer.tsx

@@ -1,8 +1,8 @@
 import styled, { useTheme } from 'styled-components';
 
-import { ReactComponent as MetaMaskFox } from '../assets/metamask_fox.svg';
 import { MetaMask } from './MetaMask';
 import { PoweredBy } from './PoweredBy';
+import { ReactComponent as MetaMaskFox } from '../assets/metamask_fox.svg';
 
 const FooterWrapper = styled.footer`
   display: flex;

packages/site/src/components/Header.tsx

@@ -1,9 +1,9 @@
 import styled, { useTheme } from 'styled-components';
 
-import { getThemePreference } from '../utils';
 import { HeaderButtons } from './Buttons';
 import { SnapLogo } from './SnapLogo';
 import { Toggle } from './Toggle';
+import { getThemePreference } from '../utils';
 
 const HeaderWrapper = styled.header`
   display: flex;
@@ -39,7 +39,7 @@ const RightContainer = styled.div`
 export const Header = ({
   handleToggleClick,
 }: {
-  handleToggleClick(): void;
+  handleToggleClick: () => void;
 }) => {
   const theme = useTheme();
 

packages/site/src/components/Toggle.tsx

@@ -75,6 +75,7 @@ const ToggleContainer = styled.div`
   background-color: ${({ theme }) => theme.colors.background?.alternative};
   transition: all 0.2s ease;
 `;
+
 const ToggleCircle = styled.div<CheckedProps>`
   transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
   position: absolute;
@@ -93,7 +94,7 @@ export const Toggle = ({
   onToggle,
   defaultChecked = false,
 }: {
-  onToggle(): void;
+  onToggle: () => void;
   defaultChecked?: boolean;
 }) => {
   const [checked, setChecked] = useState(defaultChecked);

packages/site/src/hooks/useInvokeSnap.ts

@@ -1,5 +1,5 @@
-import { defaultSnapOrigin } from '../config';
 import { useRequest } from './useRequest';
+import { defaultSnapOrigin } from '../config';
 
 export type InvokeSnapParams = {
   method: string;

packages/site/src/hooks/useMetaMask.ts

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
 
-import { defaultSnapOrigin } from '../config';
-import type { GetSnapsResponse } from '../types';
 import { useMetaMaskContext } from './MetamaskContext';
 import { useRequest } from './useRequest';
+import { defaultSnapOrigin } from '../config';
+import type { GetSnapsResponse } from '../types';
 
 /**
- * A Hook to retrieve useful data from MetaMask.
- * @returns The informations.
+ * A hook to retrieve useful data from MetaMask.
+ *
+ * @returns The information.
  */
 export const useMetaMask = () => {
   const { provider, setInstalledSnap, installedSnap } = useMetaMaskContext();

packages/site/src/hooks/useRequestSnap.ts

@@ -1,7 +1,7 @@
-import { defaultSnapOrigin } from '../config';
-import type { Snap } from '../types';
 import { useMetaMaskContext } from './MetamaskContext';
 import { useRequest } from './useRequest';
+import { defaultSnapOrigin } from '../config';
+import type { Snap } from '../types';
 
 /**
  * Utility hook to wrap the `wallet_requestSnaps` method.

packages/site/src/types/styled.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-unassigned-import */
+/* eslint-disable import-x/no-unassigned-import */
 
 import 'styled-components';
 

packages/site/src/types/svg.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable import/unambiguous */
+/* eslint-disable import-x/unambiguous */
 
 declare module '*.svg' {
   import type { FunctionComponent, SVGProps } from 'react';

packages/site/src/utils/button.ts

@@ -1,5 +1,5 @@
-import type { Snap } from '../types';
 import { isLocalSnap } from './snap';
+import type { Snap } from '../types';
 
 export const shouldDisplayReconnectButton = (installedSnap: Snap | null) =>
   installedSnap && isLocalSnap(installedSnap?.id);

packages/site/src/utils/metamask.ts

@@ -32,24 +32,25 @@ export async function hasSnapsSupport(
  * @returns A MetaMask provider if found, otherwise null.
  */
 export async function getMetaMaskEIP6963Provider() {
-  return new Promise<MetaMaskInpageProvider | null>((rawResolve) => {
+  return new Promise<MetaMaskInpageProvider | null>((resolve) => {
     // Timeout looking for providers after 500ms
     const timeout = setTimeout(() => {
-      resolve(null);
+      resolveWithCleanup(null);
     }, 500);
 
     /**
      * Resolve the promise with a MetaMask provider and clean up.
      *
      * @param provider - A MetaMask provider if found, otherwise null.
      */
-    function resolve(provider: MetaMaskInpageProvider | null) {
+    function resolveWithCleanup(provider: MetaMaskInpageProvider | null) {
       window.removeEventListener(
         'eip6963:announceProvider',
         onAnnounceProvider,
       );
+
       clearTimeout(timeout);
-      rawResolve(provider);
+      resolve(provider);
     }
 
     /**
@@ -68,7 +69,7 @@ export async function getMetaMaskEIP6963Provider() {
       const { info, provider } = detail;
 
       if (info.rdns.includes('io.metamask')) {
-        resolve(provider);
+        resolveWithCleanup(provider);
       }
     }