chore(extension): fix dapp explorer lint issues [LW-11677]

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Button/IogButton/index.tsx

@@ -7,7 +7,7 @@ import { mixins } from '../../../global/styles/Themes';
 import { IogText } from '../../Typography';
 
 import './styles.scss';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 const getThemeClasses = ({
   primary = true,

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Button/IogButtonIcon/index.tsx

@@ -1,4 +1,4 @@
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 import * as React from 'react';
 import { Icon } from '../../Icon';
 import { IIogButtonIconProps } from '../types';

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/index.tsx

@@ -11,7 +11,7 @@ export const IogCardClassic: React.FC<IogCardProps> = ({ onClick, ...props }) =>
 
   return (
     <article
-      onClick={() => onClick && onClick(props)}
+      onClick={() => onClick && onClick()}
       className="iog-card-container"
       data-testid={`dapp-grid-app-card-${title}`}
       role="card"

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/types.ts

@@ -11,5 +11,5 @@ export interface IogCardProps {
   description?: string;
   isCertified?: boolean;
   image?: Partial<IIogCardImage>;
-  onClick?: (value?: any) => void;
+  onClick?: () => void;
 }

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/types.ts

@@ -8,8 +8,8 @@ interface IIogCardImage {
 export interface IogCardProps {
   categories?: string[];
   title?: string;
-  color?: string | any;
+  color?: string;
   description?: string;
   image?: Partial<IIogCardImage>;
-  onClick?: (value?: any) => void;
+  onClick?: () => void;
 }

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx

@@ -3,7 +3,7 @@ import SimpleView from './SimpleView';
 import DappLayout from '../layout/dapp';
 import React from 'react';
 
-export const DAppExplorer = () => (
+export const DAppExplorer: React.FC = () => (
   <>
     <Layout>
       <SectionLayout>

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/EmptyState/images/Empty.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Empty = () => (
+const Empty: React.FC = () => (
   <svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fillRule="evenodd"

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Form/Input/index.tsx

@@ -20,6 +20,7 @@ import { getFormArrayError } from '../../../services/helpers';
 
 // Style
 import './styles.scss';
+import { MouseEventHandler } from 'react';
 
 const { useRef, useState } = React;
 
@@ -41,12 +42,15 @@ export const IogInput = React.memo(
     label,
     e2ePrefix,
     placeholder = ' ',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     checkProfanity,
     children,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setError,
     onClearField,
     ...rest
-  }: IInputProps) => {
+  }: // eslint-disable-next-line sonarjs/cognitive-complexity
+  IInputProps) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [showPassword, setShowPassword] = useState<boolean>(false);
 
@@ -58,15 +62,16 @@ export const IogInput = React.memo(
           ...isSearchOptions,
           required
         })
-      : { ref: () => {} };
+      : // eslint-disable-next-line @typescript-eslint/no-empty-function
+        { ref: () => {} };
     const { field } = useController({ control, name });
     const { errors } = useFormState({ control, name });
 
     const errorMessage = Array.isArray(errors?.[name.split('.')[0]])
       ? getFormArrayError(errors, name)
       : (errors?.[name]?.message as string);
 
-    const handleTogglePasswordVisibility = (e: any): void => {
+    const handleTogglePasswordVisibility: MouseEventHandler<HTMLButtonElement> = (e): void => {
       e.preventDefault();
 
       if (!inputRef.current) return;

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Form/Input/types.ts

@@ -10,15 +10,13 @@ interface IInputLink {
 interface IInputStyles {
   size?: TIogBoxSizes;
   spacer?: number;
-  position?: any;
   secondary?: boolean;
 }
 
 interface IInputHookFromProperties<T extends FieldValues> {
   registerOptions?: RegisterOptions<T>;
   control?: Control<T>;
   register?: UseFormRegister<T>;
-  fieldsName?: any;
   required?: boolean;
   setError?: UseFormSetError<T>;
 }
@@ -37,7 +35,6 @@ export interface IInputProps<T extends FieldValues = FieldValues>
   label?: string;
   requireMessage?: string;
   inputLink?: IInputLink;
-  ref?: any;
   e2ePrefix?: string;
   checkProfanity?: boolean;
   onClearField?: () => void;

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Icon/index.tsx

@@ -24,7 +24,7 @@ const getSizeValue = (size: ISvgIcon['size']): number => {
 };
 
 const iconCreator = (props: TIconCreator) => {
-  const { family, name, type, size, svgPathKey, ...otherProps } = props;
+  const { type, size, svgPathKey, ...otherProps } = props;
 
   const svgIconsProps = {
     svgPathKey,

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Icon/types.ts

@@ -3,7 +3,7 @@ import { IThemeStyledProps } from '../../global/styles/Themes/types';
 import { EIconsName, EIconsTypes } from './enum';
 import { SVGAttributes } from 'react';
 
-interface IIconStyle extends Partial<IThemeStyledProps>, Pick<SVGAttributes<any>, 'style'> {
+interface IIconStyle extends Partial<IThemeStyledProps>, Pick<SVGAttributes<unknown>, 'style'> {
   color?: string;
   strokeColor?: string;
   strokeColorByFill?: boolean;
@@ -17,7 +17,7 @@ interface IIconRules {
 
 export interface IIcon extends IIconStyle, IIconRules {}
 
-type IconStylePickProperties =  'strokeColorByFill' | 'strokeColor';
+type IconStylePickProperties = 'strokeColorByFill' | 'strokeColor';
 
 interface ICommonIconsMetaDataValue {
   type?: EIconsTypes;
@@ -35,12 +35,12 @@ export interface ISvgIconsMetaDataValue
 }
 
 export interface ISvgIcon
-  extends SVGAttributes<any>,
+  extends SVGAttributes<unknown>,
     Omit<ISvgIconsMetaDataValue, 'type'>,
     Pick<IIconStyle, IconStylePickProperties> {}
 
 export interface IVendorIconsMetaDataValue extends ICommonIconsMetaDataValue {
-  family?: any;
+  family?: string;
   name?: string;
 }
 

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Image/types.ts

@@ -12,7 +12,7 @@ export interface IogImageProps extends ImageProps {
   overflow?: boolean;
   circle?: boolean;
   fit?: React.CSSProperties['objectFit'];
-  className?: any;
+  className?: string;
   // onMouseOver?: React.DOMAttributes<unknown>['onMouseOver'];
   // onMouseLeave?: React.DOMAttributes<unknown>['onMouseLeave'];
 }

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useDrawer } from '../drawer';
 import FeaturesCarousel from '../FeaturesCarousel';
 
-export const AboutDapp = () => {
+export const AboutDapp: React.FC = () => {
   const {
     state: { data }
   } = useDrawer<ISectionCardItem>();

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AuditHeader/index.tsx

@@ -16,7 +16,7 @@ interface IAuditHeaderProps {
   style?: React.CSSProperties;
 }
 
-export const AuditHeader = ({ title, subtitle, image }: IAuditHeaderProps) => (
+export const AuditHeader: React.FC<IAuditHeaderProps> = ({ title, subtitle, image }) => (
   <IogRow className="iog-audit-header">
     <IogBox>
       <IogTitle as="h3" smallest>

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/CertificationAndAudit/helpers.ts

@@ -3,15 +3,15 @@ export const getCompletionDate = (date?: string): string =>
     .toLocaleDateString('en', { day: 'numeric', month: 'short', year: 'numeric' })
     .replace(/(,)/g, '');
 
-export const download = (path: string, filename: string) => {
+export const download = (path: string, filename: string): void => {
   const anchor = document.createElement('a');
   anchor.href = path;
   anchor.download = filename;
 
   anchor.click();
 };
 
-export const handleDownloadCertificate = async (url: string, fileName: string) => {
+export const handleDownloadCertificate = async (url: string, fileName: string): Promise<void> => {
   const options: RequestInit = {
     method: 'get',
     mode: 'no-cors',

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/CertificationAndAudit/index.tsx

@@ -13,7 +13,7 @@ import { CERTIFICATION_AUDIT_DOWNLOAD_CERTIFICATION_TEST_ID } from './constants'
 
 const { Panel } = Collapse;
 
-export const CertificationAndAudit = () => {
+export const CertificationAndAudit: React.FC = () => {
   const {
     state: { data }
   } = useDrawer<ISectionCardItem>();

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/SocialLinks/SocialIcon.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { EIconsName, Icon } from '../../../../components/Icon';
 
-export const SocialIcon = (data: { iconId: string }) => {
+// eslint-disable-next-line complexity
+export const SocialIcon: React.FC<{ iconId: string }> = (data) => {
   const iconFun = (icon: EIconsName) => <Icon name={icon} size={24} strokeColor="#6F7786" />;
 
   switch (data.iconId) {

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/index.tsx

@@ -16,7 +16,7 @@ export const Contact: React.FC = () => {
   const mailIcon = <Icon name={EIconsName.MAIL} size={24} strokeColor="#6F7786" />;
   const websiteIcon = <Icon name={EIconsName.WEBSITE} size={24} strokeColor="#6F7786" />;
 
-  if (!data) return null;
+  if (!data) return <></>;
 
   return (
     <>

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/FeaturesCarousel/index.tsx

@@ -3,7 +3,7 @@ import { IScreenshot } from '../../../services/helpers/apis-formatter/types';
 import { IogImage } from '../../../components/Image';
 import './styles.scss';
 
-const FeaturesCarousel = ({ url }: Partial<IScreenshot>) => (
+const FeaturesCarousel: React.FC<Partial<IScreenshot>> = ({ url }) => (
   <div className="iog-feature-carousel-container">
     <div className="iog-feature-carousel-border-container" data-testid="carousel-image">
       <IogImage src={url || ''} fit="cover" fluid alt="logo" />

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/drawer.tsx

@@ -11,15 +11,17 @@ export type TDrawerAction = 'open' | 'close';
 interface IDrawerActionOptions {
   type?: TDrawerAction;
 }
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface Action<Data = any> {
   type: TDrawerAction;
   data?: Data;
   options?: IDrawerActionOptions;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Dispatch<Data = any> = (action: Action<Data>) => void;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 interface State<Data = any> {
   type?: TDrawerAction;
   open: boolean;
@@ -30,10 +32,12 @@ const INITIAL_STATE = {
   open: false
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const DrawerStateContext = React.createContext<{ state: State; dispatch: Dispatch } | undefined>(undefined as any);
 
 DrawerStateContext.displayName = 'DrawerStateContext';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const drawerReducer = (state: State, action: Action): any => {
   switch (action.type) {
     case 'open':
@@ -52,6 +56,7 @@ const DrawerProvider = React.memo(({ children }: { children: React.ReactElement[
 });
 DrawerProvider.displayName = 'DrawerProvider';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const useDrawer = <Data extends Record<any, any>>(): {
   state: State<Data>;
   dispatch: Dispatch<Data>;

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/with-drawer.tsx

@@ -3,6 +3,7 @@ import { Portal } from 'react-portal';
 import ProjectDetail from '../ProjectDetail';
 import { DrawerProvider } from './drawer';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const withDrawer = <P extends Record<any, any>>(Component: React.ComponentType<P>): React.FC<P> =>
   React.memo((props) => (
     <DrawerProvider>

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/index.tsx

@@ -18,6 +18,7 @@ const isScrollbarAtBottom = () => {
   const windowHeight = window.innerHeight;
 
   // if difference between visible screen and scrollbar vertical position is less than 5px
+  // eslint-disable-next-line no-magic-numbers
   return Math.round(bodyHeight - windowHeight) - Math.round(window.scrollY) < 5;
 };
 
@@ -34,8 +35,8 @@ const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, sea
     search
   });
 
-  const fetchNext = (_renderedDapps: ISectionCardItem[]) =>
-    fetchMore();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const fetchNext = (_renderedDapps: ISectionCardItem[]) => fetchMore();
 
   const loadMoreDapps = () => {
     if (isScrollbarAtBottom() && hasNextPage) {
@@ -74,7 +75,7 @@ const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, sea
           categories={[dapp.category, dapp.subcategory].filter(Boolean)}
           image={dapp.image}
           isCertified={dapp.isCertified}
-          onClick={handleOpenDrawer}
+          onClick={() => handleOpenDrawer(dapp)}
           title={dapp.title}
         />
       </div>

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/mapper.tsx

@@ -12,11 +12,9 @@ import Defi from './assets/defi.component.svg';
 import { Categories } from './categories.enum';
 import Icon from '@ant-design/icons';
 
-export const mapCategory = (category: string) => {
+export const mapCategory = (category: string): React.ReactNode => {
   const _category = category.toUpperCase();
 
-  console.log('!DEBUG ShowAll', ShowAll);
-
   const icon = (() => {
     switch (_category) {
       case Categories.Defi:
@@ -40,6 +38,7 @@ export const mapCategory = (category: string) => {
       case Categories.All:
         return ShowAll;
       default:
+        // eslint-disable-next-line unicorn/no-null
         return null;
     }
   })();

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx

@@ -28,16 +28,16 @@ const SimpleViewFilters: React.FC<ISimpleViewFilters> = ({ onChangeCategory }) =
   ];
 
   const { data: categories } = useCategoriesFetcher();
-  console.log(JSON.stringify(categories));
   const formattedCategories = [...ALL_CATEGORIES_FILTER, ...formatFiltersResponse(categories)];
 
   useEffect(() => {
     if (onChangeCategory) onChangeCategory(active);
-  }, []);
+  }, [active, onChangeCategory]);
 
   const handleChangeCategory = (category: string) => {
     setActive(category.toLowerCase());
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const swiper = document.querySelector<Element & { swiper: any }>('.iog-classic-view-filters-slider')?.swiper;
     const position = formattedCategories.findIndex(({ value }) => value === category?.toLowerCase());
     swiper?.slideTo(position);
@@ -50,6 +50,8 @@ const SimpleViewFilters: React.FC<ISimpleViewFilters> = ({ onChangeCategory }) =
     };
 
     if (query.category) handleChangeCategory(query.category);
+    // TODO: refactor the dependency on handleChangeCategory which is re-created on every render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location, categories]);
 
   const handleSetActive = (value: string) => {

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx

@@ -14,7 +14,7 @@ const e2ePrefix = 'dapp-grid';
 
 const dappsCategoryToTitle = (category: string) => (category === 'all' ? 'All DApps' : category);
 
-const SimpleView = () => {
+const SimpleView: React.FC = () => {
   const { register, control, watch, resetField } = useForm({
     mode: 'onChange'
   });