refactor: TypeScript ~4.8.4 and ESLint deps upgrades and initial type fixes

.eslintrc.js

@@ -3,6 +3,9 @@ module.exports = {
   root: true,
   parser: 'babel-eslint',
   extends: [
+    // @react-native-community
+    // - Depends on babel-eslint parser
+    // - Migrated to @react-native/eslint-config after v3.2.0
     '@react-native-community',
     'eslint:recommended',
     'plugin:import/warnings',
@@ -13,6 +16,10 @@ module.exports = {
     {
       files: ['*.{ts,tsx}'],
       extends: ['@metamask/eslint-config-typescript'],
+      rules: {
+        // TODO: re-enable
+        'jsdoc/no-types': 'off',
+      },
     },
     {
       files: ['scripts/**/*.js'],

app/__mocks__/react-native-i18n.js → app/__mocks__/react-native-i18n.ts

@@ -1,5 +1,3 @@
-// @flow
-
 // eslint-disable-next-line import/no-extraneous-dependencies
 import I18nJs from 'i18n-js';
 

app/actions/security/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import type { Action } from 'redux';
+import type { Action as ReduxAction } from 'redux';
 
 export enum ActionType {
   SET_ALLOW_LOGIN_WITH_REMEMBER_ME = 'SET_ALLOW_LOGIN_WITH_REMEMBER_ME',
@@ -9,22 +9,22 @@ export enum ActionType {
 }
 
 export interface AllowLoginWithRememberMeUpdated
-  extends Action<ActionType.SET_ALLOW_LOGIN_WITH_REMEMBER_ME> {
+  extends ReduxAction<ActionType.SET_ALLOW_LOGIN_WITH_REMEMBER_ME> {
   enabled: boolean;
 }
 
 export interface AutomaticSecurityChecks
-  extends Action<ActionType.SET_AUTOMATIC_SECURITY_CHECKS> {
+  extends ReduxAction<ActionType.SET_AUTOMATIC_SECURITY_CHECKS> {
   enabled: boolean;
 }
 
 export interface UserSelectedAutomaticSecurityChecksOptions
-  extends Action<ActionType.USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION> {
+  extends ReduxAction<ActionType.USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION> {
   selected: boolean;
 }
 
 export interface SetAutomaticSecurityChecksModalOpen
-  extends Action<ActionType.SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN> {
+  extends ReduxAction<ActionType.SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN> {
   open: boolean;
 }
 

app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.test.tsx

@@ -5,6 +5,8 @@ import TEST_ADDRESS from '../../../../constants/address';
 import {
   CONTRACT_PET_NAME,
   CONTRACT_LOCAL_IMAGE,
+  CONTRACT_COPY_ADDRESS,
+  CONTRACT_ON_PRESS,
 } from '../ContractBox/ContractBox.constants';
 import { CONTRACT_BOX_NO_PET_NAME_TEST_ID } from './ContractBoxBase.constants';
 import { ContractBoxBaseProps } from './ContractBoxBase.types';
@@ -17,6 +19,8 @@ describe('Component ContractBoxBase', () => {
       contractAddress: TEST_ADDRESS,
       contractPetName: CONTRACT_PET_NAME,
       contractLocalImage: CONTRACT_LOCAL_IMAGE,
+      onCopyAddress: CONTRACT_COPY_ADDRESS,
+      onContractPress: CONTRACT_ON_PRESS,
     };
   });
 

app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx

@@ -72,7 +72,6 @@ const ContractBoxBase = ({
               variant={ButtonVariants.Link}
               textVariant={TextVariant.HeadingMD}
               label={formattedAddress}
-              style={styles.header}
               onPress={onContractPress}
             />
           </View>

app/component-library/components-temp/Contracts/ContractBoxBase/__snapshots__/ContractBoxBase.test.tsx.snap

@@ -36,7 +36,9 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
         variant="Token"
       />
     </View>
-    <Component>
+    <Component
+      onPress={[Function]}
+    >
       <Text
         style={
           Object {
@@ -65,6 +67,7 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
   >
     <IconView
       name="Copy"
+      onPress={[Function]}
       size="24"
       testID="copy-icon"
     />

app/components/UI/Identicon/index.tsx

@@ -30,6 +30,11 @@ interface IdenticonProps {
   useBlockieIcon?: boolean;
 }
 
+/**
+ * UI component that renders an Identicon
+ * for now it's just a blockie
+ * but we could add more types in the future
+ */
 const Identicon: React.FC<IdenticonProps> = ({
   diameter = 46,
   address,

app/components/hooks/useAddressBalance/useAddressBalance.test.tsx

@@ -17,7 +17,7 @@ const mockInitialState = {
       AccountTrackerController: {
         accounts: {
           '0x0': {
-            balance: 0x4a7036655fab2ca3,
+            balance: '0x4a7036655fab2ca3',
           },
           '0x1': {
             balance: '0x5',

app/core/Authentication/Authentication.ts

@@ -141,9 +141,9 @@ class AuthenticationService {
    * This method is used for password memory obfuscation
    * It simply returns an empty string so we can reset all the sensitive params like passwords and SRPs.
    * Since we cannot control memory in JS the best we can do is remove the pointer to sensitive information in memory
-   *    - see this thread for more details: https://security.stackexchange.com/questions/192387/how-to-securely-erase-javascript-parameters-after-use
+   * - see this thread for more details: https://security.stackexchange.com/questions/192387/how-to-securely-erase-javascript-parameters-after-use
    * [Future improvement] to fully remove these values from memory we can convert these params to Buffers or UInt8Array as is done in extension
-   *    - see: https://github.com/MetaMask/metamask-extension/commit/98f187c301176152a7f697e62e2ba6d78b018b68
+   * - see: https://github.com/MetaMask/metamask-extension/commit/98f187c301176152a7f697e62e2ba6d78b018b68
    */
   private wipeSensitiveData = () => '';
 

app/core/EngineService/EngineService.ts

@@ -98,7 +98,7 @@ class EngineService {
    * Initialize the engine with a backup vault from the Secure KeyChain
    *
    * @returns Promise<InitializeEngineResult>
-   *  InitializeEngineResult {
+   * InitializeEngineResult {
         success: boolean;
         error?: string;
       }

app/declarations.d.ts

@@ -1,6 +1,13 @@
 // This file contains type declarations for asset types.
 // Ex. This makes it so that when you import CloseIcon from './close-icon.svg, CloseIcon, will be detected as a React.FC component.
 declare module '*.mp4';
+
+declare module '@exodus/react-native-payments/lib/js/__mocks__';
+
+declare module 'react-native-fade-in-image';
+
+declare module 'react-native-minimizer';
+
 declare module '*.svg' {
   import { SvgProps } from 'react-native-svg';
   const content: React.FC<SvgProps & { name: string }>;

package.json

@@ -342,8 +342,8 @@
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lavamoat/allow-scripts": "^1.0.6",
-    "@metamask/eslint-config": "^7.0.0",
-    "@metamask/eslint-config-typescript": "^7.0.0",
+    "@metamask/eslint-config": "^9.0.0",
+    "@metamask/eslint-config-typescript": "^9.0.0",
     "@metamask/mobile-provider": "^2.1.0",
     "@metamask/test-dapp": "^6.1.0",
     "@react-native-community/eslint-config": "^2.0.0",
@@ -357,7 +357,8 @@
     "@testing-library/react": "14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "12.1.2",
-    "@types/enzyme": "^3.10.9",
+    "@types/i18n-js": "^3.8.4",
+    "@types/enzyme": "^3.10.12",
     "@types/is-url": "^1.2.30",
     "@types/jest": "^28.1.8",
     "@types/node": "^17.0.21",
@@ -367,12 +368,12 @@
     "@types/react-native-background-timer": "^2.0.0",
     "@types/react-native-material-textfield": "^0.16.5",
     "@types/react-native-svg-charts": "^5.0.12",
-    "@types/react-native-vector-icons": "^6.4.8",
-    "@types/react-native-video": "^5.0.13",
+    "@types/react-native-vector-icons": "^6.4.13",
+    "@types/react-native-video": "^5.0.14",
     "@types/redux-mock-store": "^1.0.3",
     "@types/url-parse": "^1.4.8",
-    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "@typescript-eslint/parser": "^4.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
     "@walletconnect/types": "^2.9.0",
     "@wdio/appium-service": "^7.19.1",
     "@wdio/browserstack-service": "^7.26.0",
@@ -396,13 +397,14 @@
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.10.0",
     "enzyme-to-json": "3.3.5",
-    "eslint": "7.14.0",
-    "eslint-config-react-native": "4.0.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "^7.23.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsdoc": "^36.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "7.16.0",
-    "eslint-plugin-react-native": "3.7.0",
+    "eslint-plugin-react-native": "^4.0.0",
     "execa": "^5.0.0",
     "fbjs-scripts": "^3.0.1",
     "fs-extra": "^10.1.0",
@@ -434,7 +436,7 @@
     "rn-nodeify": "10.3.0",
     "stack-beautifier": "1.0.2",
     "ts-node": "^10.5.0",
-    "typescript": "^4.4.2",
+    "typescript": "~4.8.4",
     "wdio-cucumberjs-json-reporter": "^4.4.3",
     "xml2js": "^0.5.0"
   },