chore: addressed lint issues (#11194)

## **Description**

A PR that addresses all 50 current linting issues found in the repo when
running `yarn lint`

## **Related issues**

Fixes:

1. Run `yarn lint` and see there are no linting issues remaining.
2. Run `yarn test:unit` and see all tests pass.

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**
<img width="514" alt="Screenshot 2024-09-13 at 14 03 28"
src="https://github.com/user-attachments/assets/afb5a55c-94ce-44ad-808f-2f051c559e76">

### **After**

<img width="274" alt="Screenshot 2024-09-13 at 14 01 40"
src="https://github.com/user-attachments/assets/58417fc7-5647-4028-9702-d1a79e4f550a">
<img width="365" alt="Screenshot 2024-09-13 at 14 02 28"
src="https://github.com/user-attachments/assets/33c894a8-c83d-41bc-90a7-52c512915e4e">

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: tommasini <46944231+tommasini@users.noreply.github.com>

.eslintrc.js

@@ -51,6 +51,12 @@ module.exports = {
       rules: {
         // under discussion
         'no-unused-vars': 'off',
+        'react/no-unstable-nested-components': [
+          'warn',
+          {
+            allowAsProps: true,
+          },
+        ],
       },
     },
     {

.vscode/settings.json

@@ -6,5 +6,7 @@
   "cucumberautocomplete.steps": ["wdio/step-definitions/**/*.js"],
   "cucumberautocomplete.syncfeatures": "wdio/to/features/*.feature",
   "cucumberautocomplete.strictGherkinCompletion": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "javascript.preferences.importModuleSpecifier": "relative",
+  "typescript.preferences.importModuleSpecifier": "relative"
 }

app/actions/onboarding/index.ts

@@ -25,4 +25,4 @@ export function clearOnboardingEvents(): ClearEventsAction {
   return {
     type: CLEAR_EVENTS,
   };
-}
+}

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

@@ -39,7 +39,7 @@ const ContractBoxBase = ({
     theme: { colors },
   } = useStyles(styleSheet, {});
 
-  const IconView = ({ onPress, name, size, testID }: IconViewProps) => (
+  const renderIconView = ({ onPress, name, size, testID }: IconViewProps) => (
     <Pressable style={styles.icon} onPress={onPress} testID={testID}>
       <Icon color={colors.icon.alternative} name={name} size={size} />
     </Pressable>
@@ -78,20 +78,19 @@ const ContractBoxBase = ({
         )}
       </View>
       <View style={styles.iconContainer}>
-        <IconView
-          onPress={onCopyAddress}
-          name={IconName.Copy}
-          size={IconSize.Lg}
-          testID={COPY_ICON_TEST_ID}
-        />
-        {hasBlockExplorer && (
-          <IconView
-            name={IconName.Export}
-            onPress={onExportAddress}
-            size={IconSize.Md}
-            testID={EXPORT_ICON_TEST_ID}
-          />
-        )}
+        {renderIconView({
+          onPress: onCopyAddress,
+          name: IconName.Copy,
+          size: IconSize.Lg,
+          testID: COPY_ICON_TEST_ID,
+        })}
+        {hasBlockExplorer &&
+          renderIconView({
+            onPress: onExportAddress,
+            name: IconName.Export,
+            size: IconSize.Md,
+            testID: EXPORT_ICON_TEST_ID,
+          })}
       </View>
     </View>
   );

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

@@ -65,12 +65,21 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
       }
     }
   >
-    <IconView
-      name="Copy"
+    <Component
       onPress={[Function]}
-      size="24"
+      style={
+        {
+          "paddingHorizontal": 6,
+        }
+      }
       testID="copy-icon"
-    />
+    >
+      <Icon
+        color="#6a737d"
+        name="Copy"
+        size="24"
+      />
+    </Component>
   </View>
 </View>
 `;