Add airbnb-typescript and airbnb/hooks for linting

airbnb-typescript makes all the manual adjustments we'd made for
TypeScript plus a host of others we would have run into at some point.
airbnb/hooks does React hook-related checking that was disabled and
leading to some missed dependencies in use* hook dependency lists.

To make this all work, a .tsconfig-eslint.json config is added that
ensures eslint's TypeScript integration has a reference project with all
possible JS, TS, and TSX files in the mix. Additionally, tsconfig itself
is updated to drop an exclusion whose original motivation was unclear.

A handful of temporary eslint-disables were also updated to reference
the TypeScript equivalent of the original rule they were disabling.

.eslintrc.js

@@ -8,6 +8,8 @@ const {
 module.exports = {
   extends: [
     "airbnb",
+    "airbnb-typescript",
+    "airbnb/hooks",
     "plugin:import/typescript",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
@@ -30,13 +32,6 @@ module.exports = {
       // Don't slap build files for importing devDependencies.
       { devDependencies: ["!+(src/api|ui)/**/*.+(ts|js)"] },
     ],
-    "import/extensions": [
-      "error",
-      {
-        // Never flag missing .ts import extensions, as these are resolved at build time.
-        ts: "never",
-      },
-    ],
     // Add known-safe exceptions to no-param-reassign.
     "no-param-reassign": [
       airbnbNoParamReassignRules[0],
@@ -51,13 +46,10 @@ module.exports = {
         ],
       },
     ],
-    // Replace a couple of base ESLint rules defined by airbnb with TypeScript
-    // extensions that understand certain TypeScript-specific features.
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"],
-    "no-useless-constructor": "off",
-    "@typescript-eslint/no-useless-constructor": ["error"],
   },
   ignorePatterns: ["dist/", "extension-reload.js"],
   parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./.tsconfig-eslint.json",
+  },
 }

.tsconfig-eslint.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [".eslintrc.js", "**/*.js", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

background/services/chain/db.ts

@@ -204,7 +204,7 @@ export async function getOrCreateDB(): Promise<ChainDatabase> {
 
   // Call known-private migrate function, effectively treating it as
   // file-private.
-  // eslint-disable-next-line dot-notation
+  // eslint-disable-next-line @typescript-eslint/dot-notation
   await db["migrate"]()
 
   return db

background/services/indexing/db.ts

@@ -286,7 +286,7 @@ export async function getOrCreateDB(): Promise<IndexingDatabase> {
 
   // Call known-private migrate function, effectively treating it as
   // file-private.
-  // eslint-disable-next-line dot-notation
+  // eslint-disable-next-line @typescript-eslint/dot-notation
   await db["migrate"]()
 
   return db

background/services/preferences/db.ts

@@ -54,7 +54,7 @@ export async function getOrCreateDB(): Promise<PreferenceDatabase> {
 
   // Call known-private migrate function, effectively treating it as
   // file-private.
-  // eslint-disable-next-line dot-notation
+  // eslint-disable-next-line @typescript-eslint/dot-notation
   await db["migrate"]()
 
   return db

package.json

@@ -62,11 +62,13 @@
     "eslint": "^7.28.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.3.2",
     "install": "^0.13.0",
     "npm": "^7.5.6",

tsconfig.json

@@ -7,6 +7,5 @@
     "allowSyntheticDefaultImports": true,
     "jsx": "react-jsx",
     "noEmit": true
-  },
-  "exclude": ["ui"]
+  }
 }

ui/components/Onboarding/OnboardingVerifySeed.tsx

@@ -57,8 +57,8 @@ export default function OnboardingVerifySeed(props: Props): ReactElement {
   const [isNotSelected, setIsNotSelected] = useState(Array(12).fill(""))
 
   const handleClick = useCallback(() => {
-    setIsSelected([...isSelected, []])
-    setIsNotSelected(isNotSelected.slice(1))
+    setIsSelected((currentlySelected) => [...currentlySelected, []])
+    setIsNotSelected((currentlyUnselected) => currentlyUnselected.slice(1))
   }, [])
 
   return (

ui/components/Shared/SharedAssetInput.tsx

@@ -95,9 +95,9 @@ export default function SharedAssetInput(
   const [selectedToken, setSelectedToken] = useState({ name: false })
 
   const handleClick = useCallback(() => {
-    setOpenAssetMenu(!openAssetMenu)
+    setOpenAssetMenu((currentlyOpen) => !currentlyOpen)
     onClick()
-  }, [])
+  }, [onClick])
 
   const setSelectedTokenAndClose = useCallback((token) => {
     setSelectedToken(token)

ui/components/Wallet/WalletAccountBalanceControl.tsx

@@ -18,7 +18,7 @@ export default function WalletAccountBalanceControl(
   )
 
   const handleClick = useCallback(() => {
-    setOpenReceiveMenu(!openReceiveMenu)
+    setOpenReceiveMenu((currentlyOpen) => !currentlyOpen)
   }, [])
 
   return (

ui/components/Wallet/WalletActivityList.tsx

@@ -1,5 +1,3 @@
-// @ts-check
-
 import React, { ReactElement, useCallback } from "react"
 
 import { AnyEVMTransaction } from "@tallyho/tally-background/types"
@@ -24,13 +22,16 @@ export default function WalletActivityList(props: Props): ReactElement {
     (background) => background.ui
   )
 
-  const handleOpen = useCallback((activityId) => {
-    dispatch(setShowingActivityDetail(activityId))
-  }, [])
+  const handleOpen = useCallback(
+    (activityId) => {
+      dispatch(setShowingActivityDetail(activityId))
+    },
+    [dispatch]
+  )
 
   const handleClose = useCallback(() => {
     dispatch(setShowingActivityDetail(undefined))
-  }, [])
+  }, [dispatch])
 
   return (
     <>

ui/pages/Swap.tsx

@@ -12,11 +12,11 @@ export default function Swap(): ReactElement {
   const [selectedCount, setSelectedCount] = useState(0)
 
   const handleClick = useCallback(() => {
-    setOpenTokenMenu(!openTokenMenu)
+    setOpenTokenMenu((isCurrentlyOpen) => !isCurrentlyOpen)
   }, [])
 
   const handleAssetSelect = useCallback(() => {
-    setSelectedCount(selectedCount + 1)
+    setSelectedCount((currentCount) => currentCount + 1)
   }, [])
 
   return (

yarn.lock

@@ -3813,6 +3813,11 @@ eslint-config-airbnb-base@^14.2.1:
     object.assign "^4.1.2"
     object.entries "^1.1.2"
 
+eslint-config-airbnb-typescript@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-14.0.0.tgz#fc22246973b99f0820e2ad1ab929fdd011dfa039"
+  integrity sha512-d2Nit2ByZARGRYK6tgSNl3nnmGZPyvsgbsKFcmm+nAhvT8VjVpifG5jI4tzObUUPb0sWw0E1oO/0pSpBD/pIuQ==
+
 eslint-config-airbnb@^18.2.1:
   version "18.2.1"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9"
@@ -3888,6 +3893,11 @@ eslint-plugin-prettier@^3.4.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
+  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
+
 eslint-plugin-react@^7.24.0:
   version "7.25.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.25.1.tgz#9286b7cd9bf917d40309760f403e53016eda8331"