chore: Chore/9924 - Enable @typescript-eslint/no-explicit-any as er…

…ror rule (MetaMask#10048)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR adds the `@typescript-eslint/no-explicit-any` eslint rule to
prevent the usage of `any`. Aside from adding the rule to eslintrc, all
of the changes ignores the rule for existing usage of `any`

This is the mobile equivalent of
MetaMask/metamask-extension#23531 for extension

## **Related issues**

Fixes: MetaMask#9924 

## **Manual testing steps**

- Run `yarn lint`
- Should not see errors about `@typescript-eslint/no-explicit-any`

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->
No lint errors
<img width="633" alt="image"
src="https://github.com/MetaMask/metamask-mobile/assets/10508597/420cb39a-826f-4d46-8a07-12f71121c102">


## **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**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
             ignoreRestSiblings: true, // this line is what has changed
           },
         ],
+        '@typescript-eslint/no-explicit-any': 'error',
       },
     },
     {

app/component-library/base-components/TagBase/TagBase.stories.tsx

@@ -65,6 +65,8 @@ export const TagBase = {
     endAccessory: false,
     includesBorder: false,
   },
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <View
       style={{

app/component-library/base-components/TagBase/TagBase.styles.ts

@@ -15,6 +15,8 @@ import { TagShape, TagSeverity } from './TagBase.types';
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
+// TODO: Replace "any" with type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const styleSheet = (params: { theme: Theme; vars: any }) => {
   const { theme, vars } = params;
   const { style, shape, containerSize, severity, includesBorder } = vars;

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.stories.tsx

@@ -25,6 +25,8 @@ const AvatarFaviconMeta = {
 export default AvatarFaviconMeta;
 
 export const AvatarFavicon = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <AvatarFaviconComponent
       {...args}

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx

@@ -28,6 +28,8 @@ const AvatarFavicon = ({
   style,
   ...props
 }: AvatarFaviconProps) => {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [error, setError] = useState<any>(undefined);
   const [svgSource, setSvgSource] = useState<string>('');
   const { styles } = useStyles(stylesheet, { style });
@@ -38,6 +40,8 @@ const AvatarFavicon = ({
     [setError],
   );
 
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onSvgError = useCallback((e: any) => setError(e), [setError]);
 
   // TODO add the fallback with uppercase letter initial
@@ -55,6 +59,8 @@ const AvatarFavicon = ({
         const response = await fetch(uri, { method: 'HEAD' });
         const contentType = response.headers.get('Content-Type');
         return contentType?.includes('image/svg+xml');
+        // TODO: Replace "any" with type
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (err: any) {
         return false;
       }
@@ -80,6 +86,8 @@ const AvatarFavicon = ({
         height="100%"
         uri={svgSource}
         style={styles.image}
+        // TODO: Replace "any" with type
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onError={(e: any) => onSvgError(e)}
       />
     ) : null;

app/component-library/components/Avatars/Avatar/variants/AvatarNetwork/AvatarNetwork.stories.tsx

@@ -29,6 +29,8 @@ const AvatarNetworkMeta = {
 export default AvatarNetworkMeta;
 
 export const AvatarNetwork = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <AvatarNetworkComponent
       {...args}

app/component-library/components/Avatars/Avatar/variants/AvatarToken/AvatarToken.stories.tsx

@@ -29,6 +29,8 @@ const AvatarTokenMeta = {
 export default AvatarTokenMeta;
 
 export const AvatarToken = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <AvatarTokenComponent
       {...args}

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.test.tsx

@@ -11,6 +11,8 @@ import {
 
 describe('AvatarGroup', () => {
   const findOverflowCounter = (
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     node: ShallowWrapper<any, any, React.Component>,
   ) => node.prop('testID') === STACKED_AVATARS_OVERFLOW_COUNTER_ID;
 

app/component-library/components/Badges/BadgeWrapper/BadgeWrapper.stories.tsx

@@ -53,6 +53,8 @@ export default BadgeWrapperMeta;
 
 export const BadgeWrapper = {
   // eslint-disable-next-line react/prop-types
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: { [x: string]: any; badge: any; anchorElementShape: any }) => {
     const { badge, anchorElementShape, ...props } = args;
     let badgeProps: BadgeProps;

app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.stories.tsx

@@ -31,6 +31,8 @@ const BannerAlertMeta = {
 export default BannerAlertMeta;
 
 export const BannerAlert = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <BannerAlertComponent
       {...args}

app/component-library/components/Banners/Banner/variants/BannerTip/BannerTip.stories.tsx

@@ -31,6 +31,8 @@ const BannerTipMeta = {
 export default BannerTipMeta;
 
 export const BannerTip = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <BannerTipComponent
       {...args}

app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.stories.tsx

@@ -23,6 +23,8 @@ const BottomSheetFooterMeta = {
 export default BottomSheetFooterMeta;
 
 export const BottomSheetFooter = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <BottomSheetFooterComponent
       {...args}

app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.stories.tsx

@@ -16,6 +16,8 @@ export const BottomSheetHeader = {
   args: {
     chidlren: 'Super Long BottomSheetHeader Title that may span 3 lines',
   },
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <BottomSheetHeaderComponent
       {...args}

app/component-library/components/Form/TextField/TextField.tsx

@@ -43,6 +43,8 @@ const TextField: React.FC<TextFieldProps> = ({
   });
 
   const onBlurHandler = useCallback(
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (e: any) => {
       if (!isDisabled) {
         setIsFocused(false);
@@ -53,6 +55,8 @@ const TextField: React.FC<TextFieldProps> = ({
   );
 
   const onFocusHandler = useCallback(
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (e: any) => {
       if (!isDisabled) {
         setIsFocused(true);

app/component-library/components/Form/TextField/foundation/Input/Input.tsx

@@ -35,6 +35,8 @@ const Input: React.FC<InputProps> = ({
   });
 
   const onBlurHandler = useCallback(
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (e: any) => {
       if (!isDisabled) {
         setIsFocused(false);
@@ -45,6 +47,8 @@ const Input: React.FC<InputProps> = ({
   );
 
   const onFocusHandler = useCallback(
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (e: any) => {
       if (!isDisabled) {
         setIsFocused(true);

app/component-library/components/Icons/Icon/Icon.styles.ts

@@ -8,6 +8,8 @@ import { StyleSheet, ImageStyle } from 'react-native';
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
+// TODO: Replace "any" with type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const styleSheet = (params: { vars: any }) => {
   const {
     vars: { style, size },

app/component-library/components/List/ListItemMultiSelect/ListItemMultiSelect.stories.tsx

@@ -27,6 +27,8 @@ const ListItemMultiSelectMeta = {
 export default ListItemMultiSelectMeta;
 
 export const ListItemMultiSelect = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <ListItemMultiSelectComponent {...args}>
       <ListItemColumn>

app/component-library/components/List/ListItemSelect/ListItemSelect.stories.tsx

@@ -27,6 +27,8 @@ const ListItemSelectMeta = {
 export default ListItemSelectMeta;
 
 export const ListItemSelect = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <ListItemSelectComponent {...args}>
       <ListItemColumn>

app/component-library/components/Navigation/TabBar/TabBar.stories.tsx

@@ -29,6 +29,8 @@ const TabBarStorybook = () => {
     { name: 'WalletRoute', key: 'WalletRoute' },
     { name: 'BrowserRoute', key: 'BrowserRoute' },
   ];
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const mockTabBarProps: any = {
     state: {
       routes,
@@ -62,6 +64,8 @@ const TabBarStorybook = () => {
 const TabBarMeta = {
   title: 'Component Library / Navigation',
   decorators: [
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (Story: any) => (
       <Provider store={store}>
         <Story />

app/component-library/components/Navigation/TabBar/TabBar.test.tsx

@@ -86,7 +86,11 @@ describe('TabBar', () => {
     const { toJSON } = renderWithProvider(
       <TabBar
         state={state as TabNavigationState<ParamListBase>}
+        // TODO: Replace "any" with type
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         descriptors={descriptors as any}
+        // TODO: Replace "any" with type
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         navigation={navigation as any}
       />,
       { state: mockInitialState },
@@ -98,7 +102,11 @@ describe('TabBar', () => {
     const { getByTestId } = renderWithProvider(
       <TabBar
         state={state as TabNavigationState<ParamListBase>}
+        // TODO: Replace "any" with type
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         descriptors={descriptors as any}
+        // TODO: Replace "any" with type
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         navigation={navigation as any}
       />,
       { state: mockInitialState },

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -33,6 +33,8 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   /**
    * Current onboarding wizard step
    */
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const wizardStep = useSelector((reduxState: any) => reduxState.wizard.step);
   /**
    * Return current step of onboarding wizard if not step 5 nor 0

app/component-library/components/Overlay/Overlay.stories.tsx

@@ -22,6 +22,8 @@ const OverlayMeta = {
 export default OverlayMeta;
 
 export const Overlay = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <OverlayComponent {...args} onPress={() => console.log("I'm clicked!")} />
   ),

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx

@@ -18,6 +18,8 @@ const PickerNetworkMeta = {
 export default PickerNetworkMeta;
 
 export const PickerNetwork = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <PickerNetworkComponent
       {...args}

app/component-library/components/Select/SelectButton/SelectButton.stories.tsx

@@ -42,6 +42,8 @@ export const SelectButton = {
     isDisabled: SAMPLE_SELECTBUTTON_PROPS.isDisabled,
     isDanger: SAMPLE_SELECTBUTTON_PROPS.isDanger,
   },
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <SelectButtonComponent
       {...args}

app/component-library/components/Select/SelectButton/foundation/SelectButtonBase.styles.ts

@@ -12,6 +12,8 @@ import { Theme } from '../../../../../util/theme/models';
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
+// TODO: Replace "any" with type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const styleSheet = (params: { theme: Theme; vars: any }) => {
   const { vars } = params;
   const { style } = vars;

app/component-library/components/Select/SelectOption/SelectOption.stories.tsx

@@ -34,6 +34,8 @@ export const SelectOption = {
     isSelected: SAMPLE_SELECTOPTION_PROPS.isSelected,
     isDisabled: SAMPLE_SELECTOPTION_PROPS.isDisabled,
   },
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <SelectOptionComponent
       {...args}

app/component-library/components/Select/SelectValue/SelectValue.stories.tsx

@@ -24,6 +24,8 @@ const SelectValueStoryMeta = {
 export default SelectValueStoryMeta;
 
 export const SelectValue = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => (
     <SelectValueComponent
       {...args}

app/component-library/components/Select/SelectValue/foundation/SelectValueBase.styles.ts

@@ -12,6 +12,8 @@ import { Theme } from '../../../../../util/theme/models';
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
+// TODO: Replace "any" with type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const styleSheet = (params: { theme: Theme; vars: any }) => {
   const { vars } = params;
   const { style } = vars;

app/component-library/components/Sheet/SheetHeader/SheetHeader.stories.tsx

@@ -23,6 +23,8 @@ const SheetHeaderMeta = {
 export default SheetHeaderMeta;
 
 export const SheetHeader = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: ({ title, actionButtonlabel }: any) => (
     <SheetHeaderComponent
       title={title}

app/component-library/components/Tags/Tag/Tag.stories.tsx

@@ -20,6 +20,8 @@ const TagMeta = {
 export default TagMeta;
 
 export const Tag = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: ({ label }: any) => (
     <View style={{ alignItems: 'flex-start' }}>
       <TagComponent label={label} />

app/component-library/components/Tags/TagUrl/TagUrl.stories.tsx

@@ -26,6 +26,8 @@ const TagUrlMeta = {
 export default TagUrlMeta;
 
 export const TagUrl = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: ({ label, ctaLabel }: any) => (
     <View style={{ alignItems: 'flex-start' }}>
       <TagUrlComponent

app/component-library/components/Texts/Text/Text.styles.ts

@@ -15,6 +15,8 @@ import { TextColor, TextVariant } from './Text.types';
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
+// TODO: Replace "any" with type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const styleSheet = (params: { theme: Theme; vars: any }) => {
   const { theme, vars } = params;
   const { variant, style, color } = vars;

app/component-library/components/Texts/TextWithPrefixIcon/TextWithPrefixIcon.stories.tsx

@@ -57,6 +57,8 @@ const TextWithPrefixIconMeta = {
 export default TextWithPrefixIconMeta;
 
 export const TextWithPrefixIcon = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: ({ iconSize, iconName, iconColor, ...props }: any) => (
     <TextWithPrefixIconComponent
       iconProps={{ size: iconSize, name: iconName, color: iconColor }}

app/component-library/components/Toast/Toast.stories.tsx

@@ -22,6 +22,8 @@ const ToastMeta = {
   title: 'Component Library / Toast',
   component: ToastComponent,
   decorators: [
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (Story: any) => (
       <SafeAreaProvider>
         <ToastContextWrapper>
@@ -43,9 +45,13 @@ const ToastMeta = {
 export default ToastMeta;
 
 export const Toast = {
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { toastRef } = useContext(ToastContext);
+    // TODO: Replace "any" with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let otherToastProps: any;
 
     switch (args.variant) {