SEL-269: Update ESLint rules & lock prettier config

app/.eslintrc.cjs

@@ -1,24 +1,52 @@
 module.exports = {
   root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: { jsx: true },
+  },
   extends: [
     '@react-native',
-    'plugin:prettier/recommended',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
     'plugin:jest/recommended',
+    'plugin:prettier/recommended',
   ],
-  plugins: ['header', 'jest', 'prettier', 'simple-import-sort'],
+  plugins: ['header', 'simple-import-sort', 'import'],
   ignorePatterns: [
     'ios/',
     'android/',
     'deployments/',
     'node_modules/',
     'web/dist/',
     '.tamagui/*',
+    '*.js.map',
+    '*.d.ts',
     'metro.config.cjs',
   ],
+  settings: {
+    react: { version: 'detect' },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: './tsconfig.json',
+      },
+    },
+    'import/ignore': ['react-native'],
+  },
   rules: {
-    // Import sorting rules
-    'simple-import-sort/imports': 'warn',
+    // Import/Export Rules
+    'import/order': 'off',
+    'no-duplicate-imports': 'off',
     'simple-import-sort/exports': 'warn',
+    'simple-import-sort/imports': 'warn',
+
+    // Header rule
     'header/header': [
       2,
       'line',
@@ -27,21 +55,35 @@ module.exports = {
     ],
 
     // Add prettier rule to show prettier errors as ESLint errors
-    'prettier/prettier': [
-      'warn',
-      {
-        // Fix for TypeScript union types indentation
-        typescriptBracketSpacing: true,
-        typeAssertionStyle: 'as',
-      },
-      { usePrettierrc: true },
-    ],
+    'prettier/prettier': ['warn', {}, { usePrettierrc: true }],
 
-    // Preserve project-specific rule exemptions
+    // React Core Rules
+    'react/no-unescaped-entities': 'off',
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
     'react-native/no-inline-styles': 'off',
-    'react-hooks/exhaustive-deps': 'off',
 
-    // Override any ESLint rules that conflict with the TypeScript union type formatting
+    // React Hooks Rules
+    'react-hooks/exhaustive-deps': 'warn',
+
+    // General JavaScript Rules
+    // Warn on common issues but don't block development
+    'no-console': 'warn',
+    'no-empty-pattern': 'off',
+    'prefer-const': 'warn',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    'no-redeclare': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    'no-case-declarations': 'off',
+    'react/no-children-prop': 'off',
+    'import/no-unresolved': 'error',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'no-empty': 'off',
+
+    // Override rules conflicting with TypeScript union formatting
     '@typescript-eslint/indent': 'off',
   },
   overrides: [

app/index.js

@@ -4,6 +4,7 @@
  * @format
  */
 import './src/utils/ethers';
+import 'react-native-gesture-handler';
 
 import { config } from '@tamagui/config/v2-native';
 import React from 'react';

app/package.json

@@ -153,10 +153,14 @@
     "@types/react-native-sqlite-storage": "^6.0.5",
     "@types/react-native-web": "^0",
     "@types/react-test-renderer": "^18",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "eslint": "^8.19.0",
-    "eslint-config-prettier": "^10.1.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-header": "^3.1.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.11.1",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-simple-import-sort": "^12.1.1",

app/scripts/mobile-deploy-confirm.cjs

@@ -62,7 +62,7 @@
   try {
     return fs.readFileSync(filePath, 'utf8');
   } catch (error) {
     console.warn(`Warning: Could not read ${description} at ${filePath}`);
     return null;
   }
 }
@@ -82,7 +82,7 @@
 
   // Validate that the command is in the whitelist
   if (!allowedCommands.includes(command)) {
     console.warn(
       `Warning: Command '${command}' is not allowed for security reasons`,
     );
     return null;
@@ -91,7 +91,7 @@
   try {
     return execSync(command, { encoding: 'utf8' }).trim();
   } catch (error) {
     console.warn(`Warning: Could not ${description}`);
     return null;
   }
 }
@@ -109,19 +109,19 @@
  * Displays usage information and exits
  */
 function displayUsageAndExit() {
   console.error('Usage: node mobile-deploy-confirm.cjs <ios|android|both>');
   console.error('');
   console.error('Recommended: Use yarn commands instead:');
   console.error(
     '  yarn mobile-deploy              # Deploy to both platforms (GitHub runner)',
   );
   console.error(
     '  yarn mobile-deploy:ios          # Deploy to iOS only (GitHub runner)',
   );
   console.error(
     '  yarn mobile-deploy:android      # Deploy to Android only (GitHub runner)',
   );
   console.error(
     '  yarn mobile-local-deploy        # Deploy to both platforms (local fastlane)',
   );
   console.error(
@@ -278,9 +278,8 @@
 /**
  * Displays the header and platform information
  * @param {string} platform - Target platform
- * @param {Object} versions - Version information object
  */
-function displayDeploymentHeader(platform, versions) {
+function displayDeploymentHeader(platform) {
   console.log(`\n${CONSOLE_SYMBOLS.MOBILE} Mobile App Deployment Confirmation`);
   console.log('=====================================');
   console.log(`${CONSOLE_SYMBOLS.ROCKET} Platform: ${platform.toUpperCase()}`);
@@ -351,7 +350,7 @@
  * @param {string} deploymentMethod - The deployment method to use
  */
 function displayFullConfirmation(platform, versions, deploymentMethod) {
-  displayDeploymentHeader(platform, versions);
+  displayDeploymentHeader(platform);
   displayDeploymentMethod(deploymentMethod);
   displayPlatformVersions(platform, versions);
   displayWarningsAndGitStatus();

app/src/components/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
-import React from 'react';
+import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
 import analytics from '../utils/analytics';
@@ -15,7 +15,7 @@ interface State {
   hasError: boolean;
 }
 
-class ErrorBoundary extends React.Component<Props, State> {
+class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = { hasError: false };

app/src/components/Mnemonic.tsx

@@ -63,7 +63,7 @@ const Mnemonic = ({ words = REDACTED, onRevealWords }: MnemonicProps) => {
     Clipboard.setString(words.join(' '));
     setCopied(true);
     setTimeout(() => setCopied(false), 2500);
-  }, [words, revealWords]);
+  }, [onRevealWords, revealWords, setHasViewedRecoveryPhrase, words]);
 
   return (
     <YStack position="relative" alignItems="stretch" gap={0}>
@@ -98,7 +98,7 @@ const Mnemonic = ({ words = REDACTED, onRevealWords }: MnemonicProps) => {
           borderTopWidth={0}
           borderBottomLeftRadius="$5"
           borderBottomRightRadius="$5"
-          py="$2"
+          paddingVertical={16}
           onPress={copyToClipboardOrReveal}
           width="100%"
           textAlign="center"

app/src/components/NavBar/BaseNavBar.tsx

@@ -39,7 +39,7 @@ export const LeftAction: React.FC<LeftActionProps> = ({
   onPress,
   ...props
 }) => {
-  let children: React.ReactNode = useMemo(() => {
+  const children: React.ReactNode = useMemo(() => {
     switch (component) {
       case 'back':
         return (
@@ -69,7 +69,7 @@ export const LeftAction: React.FC<LeftActionProps> = ({
           </Button>
         );
     }
-  }, [component]);
+  }, [color, component, onPress]);
 
   if (!children) {
     return null;

app/src/components/native/PassportCamera.web.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import { extractMRZInfo } from '../../utils/utils';
 
@@ -27,7 +27,7 @@ export const PassportCamera: React.FC<PassportCameraProps> = ({
   }, [onPassportRead, isMounted]);
 
   // Web stub - no functionality yet
-  React.useEffect(() => {
+  useEffect(() => {
     // Simulate that the component is not ready for web
     if (isMounted) {
       console.warn('PassportCamera: Web implementation not yet available');

app/src/components/native/RCTFragment.tsx

@@ -1,8 +1,12 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import React, { useEffect, useRef } from 'react';
-import { NativeSyntheticEvent, requireNativeComponent } from 'react-native';
-import { findNodeHandle, UIManager } from 'react-native';
+import {
+  findNodeHandle,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+  UIManager,
+} from 'react-native';
 
 export interface RCTFragmentViewManagerProps {
   RCTFragmentViewManager: ReturnType<typeof requireNativeComponent>;

app/src/hooks/useConnectionModal.ts

@@ -56,7 +56,7 @@ export default function useConnectionModal() {
     }, 2000);
 
     return () => clearTimeout(timeoutId);
-  }, [hasNoConnection, dismissModal, visible, navigationRef.isReady()]);
+  }, [dismissModal, hasNoConnection, hideNetworkModal, showModal, visible]);
 
   return {
     visible,

app/src/hooks/useMnemonic.ts

@@ -16,7 +16,7 @@ export default function useMnemonic() {
     }
     const { entropy } = storedMnemonic.data;
     setMnemonic(ethers.Mnemonic.fromEntropy(entropy).phrase.split(' '));
-  }, []);
+  }, [getOrCreateMnemonic]);
 
   return {
     loadMnemonic,

app/src/layouts/SimpleScrolledTitleLayout.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScrollView, YStack } from 'tamagui';
 
@@ -11,7 +11,7 @@ import { white } from '../utils/colors';
 import { ExpandableBottomLayout } from './ExpandableBottomLayout';
 
 interface DetailListProps
-  extends React.PropsWithChildren<{
+  extends PropsWithChildren<{
     title: string;
     onDismiss: () => void;
     secondaryButtonText?: string;
@@ -44,7 +44,7 @@ export default function SimpleScrolledTitleLayout({
         </ScrollView>
         {footer && <YStack marginBottom={18}>{footer}</YStack>}
         {secondaryButtonText && onSecondaryButtonPress && (
-          <SecondaryButton onPress={onSecondaryButtonPress} mb="$2">
+          <SecondaryButton onPress={onSecondaryButtonPress} marginBottom={16}>
             {secondaryButtonText}
           </SecondaryButton>
         )}

app/src/mocks/react-native-gesture-handler.ts

@@ -4,14 +4,14 @@
  * Web-compatible mock for react-native-gesture-handler
  */
 
-import React from 'react';
+import React, { createElement } from 'react';
 
 // Mock GestureHandlerRootView as a simple wrapper
 export const GestureHandlerRootView: React.FC<{
   children: React.ReactNode;
   [key: string]: any;
 }> = ({ children, ...props }) => {
-  return React.createElement('div', props, children);
+  return createElement('div', props, children);
 };
 
 const returnValue = {
@@ -44,7 +44,7 @@ export const GestureDetector: React.FC<{
   children: React.ReactNode;
   gesture?: any;
 }> = ({ children, gesture: _gesture }) => {
-  return React.createElement('div', {}, children);
+  return createElement('div', {}, children);
 };
 
 // Mock other commonly used exports

app/src/mocks/react-native-safe-area-context.js

@@ -1,10 +1,10 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
-import React from 'react';
+import { createContext, createElement, Fragment } from 'react';
 // On web we dont need safe context area since we will be inside another app. (and it doesnt work)
 
 export function SafeAreaProvider({ children }) {
-  return React.createElement(React.Fragment, null, children);
+  return createElement(Fragment, null, children);
 }
 
 export function useSafeAreaInsets() {
@@ -16,7 +16,7 @@ export function useSafeAreaFrame() {
 }
 
 export function SafeAreaView(props) {
-  return React.createElement('div', props, props.children);
+  return createElement('div', props, props.children);
 }
 
 export const initialWindowMetrics = {
@@ -34,9 +34,9 @@ export const initialWindowMetrics = {
   },
 };
 
-export const SafeAreaContext = React.createContext(initialWindowMetrics);
+export const SafeAreaContext = createContext(initialWindowMetrics);
 
-export const SafeAreaInsetsContext = React.createContext({
+export const SafeAreaInsetsContext = createContext({
   top: 0,
   bottom: 0,
   left: 0,

app/src/navigation/index.tsx

@@ -1,14 +1,12 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
-import 'react-native-gesture-handler';
-
 import {
   createNavigationContainerRef,
   createStaticNavigation,
   StaticParamList,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Platform } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -75,7 +73,7 @@ const NavigationWithTracking = () => {
   };
 
   // Setup universal link handling at the navigation level
-  React.useEffect(() => {
+  useEffect(() => {
     const cleanup = setupUniversalLinkListenerInNavigation();
 
     return () => {

app/src/providers/authProvider.tsx

@@ -220,7 +220,7 @@ export const AuthProvider = ({
         trackEvent(AuthEvents.AUTHENTICATION_TIMEOUT);
       }, authenticationTimeoutinMs);
     });
-  }, [isAuthenticatingPromise]);
+  }, [authenticationTimeoutinMs, isAuthenticatingPromise]);
 
   const getOrCreateMnemonic = useCallback(
     () => _getSecurely<Mnemonic>(loadOrCreateMnemonic, str => JSON.parse(str)),
@@ -246,7 +246,13 @@ export const AuthProvider = ({
       checkBiometricsAvailable,
       _getSecurely,
     }),
-    [isAuthenticated, isAuthenticatingPromise, loginWithBiometrics],
+    [
+      getOrCreateMnemonic,
+      isAuthenticated,
+      isAuthenticatingPromise,
+      loginWithBiometrics,
+      restoreAccountFromMnemonic,
+    ],
   );
 
   return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>;