refactor: remove any (#122)

* refactor: remove anys

* refactor: remove anys in styled components

* refactor: reomve anys

* chore: fix hook order

* chore: update by comments

* chore: change to comments

* chore: udpate to comments

* refactor: import types directly from React

* chore: update footer icon type

* chore: pass react node to footer image

* chore: update types

* chore: udpate types

src/components/Card/OverviewCard/index.tsx

@@ -10,20 +10,20 @@ export type OverviewItemData = {
   content: ReactNode
   contentWrapperClass?: string
   filled?: boolean
-  icon?: any
+  icon?: string
   isAsset?: boolean
   tooltip?: TooltipProps['title']
   valueTooltip?: string
 } | null
 
 const handleOverviewItems = (items: OverviewItemData[], isMobile: boolean) => ({
-  leftItems: isMobile ? items : items.filter((_item: any, index: number) => index % 2 === 0),
-  rightItems: isMobile ? [] : items.filter((_item: any, index: number) => index % 2 !== 0),
+  leftItems: isMobile ? items : items.filter((_item, index) => index % 2 === 0),
+  rightItems: isMobile ? [] : items.filter((_item, index) => index % 2 !== 0),
 })
 
 export const OverviewItem = ({ item, hideLine }: { item: OverviewItemData; hideLine: boolean }) =>
   item ? (
-    <OverviewItemPanel hideLine={hideLine} hasIcon={item.icon} isAsset={item.isAsset}>
+    <OverviewItemPanel hideLine={hideLine} hasIcon={!!item.icon} isAsset={item.isAsset}>
       <div className="overviewItemTitlePanel">
         {item.icon && (
           <div className="overviewItemIcon">

src/components/Card/TitleCard/index.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { ReactNode } from 'react'
 import { TitleCardPanel } from './styled'
 
 export default ({
@@ -8,10 +9,10 @@ export default ({
   rear,
   rearClassName,
 }: {
-  title: React.ReactNode
+  title: ReactNode
   isSingle?: boolean
   className?: string
-  rear?: React.ReactNode
+  rear?: ReactNode
   rearClassName?: string
 }) => (
   <TitleCardPanel isSingle={isSingle} className={className} hasRear={!!rear}>

src/components/Content/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 import styled from 'styled-components'
 
 const ContentPanel = styled.div`
@@ -7,6 +7,6 @@ const ContentPanel = styled.div`
   flex: 1;
   background: #ededed;
 `
-export default ({ children, style }: { children: ReactNode; style?: any }) => {
+export default ({ children, style }: { children: ReactNode; style?: CSSProperties }) => {
   return <ContentPanel style={style}>{children}</ContentPanel>
 }

src/components/Footer/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react'
+import { ReactNode, memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactComponent as XIcon } from '../../assets/footer_X.svg'
 import { ReactComponent as MediumIcon } from '../../assets/footer_medium.svg'
@@ -15,7 +15,7 @@ import { udtSubmitEmail } from '../../utils/util'
 interface FooterLinkItem {
   label?: string
   url?: string
-  icon?: any
+  icon?: ReactNode
 }
 
 interface FooterLink {
@@ -34,9 +34,10 @@ const FooterItem = ({ item }: { item: FooterLinkItem }) => {
 
 const FooterImageItem = ({ item }: { item: FooterLinkItem }) => {
   const { label, url, icon: IconComponent } = item
+
   return (
     <FooterImageItemPanel key={label} href={url} rel="noopener noreferrer" target="_blank">
-      <IconComponent />
+      {IconComponent}
       <span>{label}</span>
     </FooterImageItemPanel>
   )
@@ -45,7 +46,7 @@ const FooterImageItem = ({ item }: { item: FooterLinkItem }) => {
 export default memo(() => {
   const isMobile = useIsMobile()
   const [t] = useTranslation()
-  const Footers: FooterLink[] = useMemo(
+  const Footers = useMemo<FooterLink[]>(
     () => [
       {
         name: t('footer.nervos_foundation'),
@@ -86,37 +87,37 @@ export default memo(() => {
         items: [
           {
             label: t('footer.discord'),
-            icon: Discord,
+            icon: <Discord />,
             url: 'https://discord.com/invite/FKh8Zzvwqa',
           },
           {
             label: t('footer.X'),
-            icon: XIcon,
+            icon: <XIcon />,
             url: 'https://x.com/nervosnetwork',
           },
           {
             label: t('footer.blog'),
-            icon: MediumIcon,
+            icon: <MediumIcon />,
             url: 'https://medium.com/nervosnetwork',
           },
           {
             label: t('footer.telegram'),
-            icon: TelegramIcon,
+            icon: <TelegramIcon />,
             url: 'https://t.me/nervosnetwork',
           },
           {
             label: t('footer.reddit'),
-            icon: RedditIcon,
+            icon: <RedditIcon />,
             url: 'https://www.reddit.com/r/NervosNetwork/',
           },
           {
             label: t('footer.youtube'),
-            icon: YoutubeIcon,
+            icon: <YoutubeIcon />,
             url: 'https://www.youtube.com/channel/UCONuJGdMzUY0Y6jrPBOzH7A',
           },
           {
             label: t('footer.forum'),
-            icon: ForumIcon,
+            icon: <ForumIcon />,
             url: 'https://talk.nervos.org/',
           },
         ],
@@ -129,39 +130,39 @@ export default memo(() => {
       <FooterMenuPanel>
         <div className="footerFoundation">
           <div className="footerTitle">{Footers[0].name}</div>
-          {Footers[0].items.map((item: any) => (
+          {Footers[0].items.map(item => (
             <FooterItem item={item} key={item.label} />
           ))}
         </div>
         <div className="footerDeveloper">
           <div className="footerTitle">{Footers[1].name}</div>
           {Footers[1].items
             .filter(item => item.label !== undefined)
-            .map((item: any) => (
+            .map(item => (
               <FooterItem item={item} key={item.label} />
             ))}
         </div>
         <div className="footerCommunity">
           {isMobile ? (
             <div>
-              {Footers[2].items.map((item: any) => (
+              {Footers[2].items.map(item => (
                 <FooterImageItem item={item} key={item.label} />
               ))}
             </div>
           ) : (
             <>
               <div>
-                {Footers[2].items.slice(0, 3).map((item: any) => (
+                {Footers[2].items.slice(0, 3).map(item => (
                   <FooterImageItem item={item} key={item.label} />
                 ))}
               </div>
               <div>
-                {Footers[2].items.slice(3, 6).map((item: any) => (
+                {Footers[2].items.slice(3, 6).map(item => (
                   <FooterImageItem item={item} key={item.label} />
                 ))}
               </div>
               <div>
-                {Footers[2].items.slice(6).map((item: any) => (
+                {Footers[2].items.slice(6).map(item => (
                   <FooterImageItem item={item} key={item.label} />
                 ))}
               </div>

src/components/Header/BlockchainComp/styled.tsx

@@ -69,7 +69,8 @@ export const MobileSubMenuPanel = styled.div`
   }
 
   .mobileMenusMainItemContent {
-    color: ${(props: { showSubMenu: boolean; theme: any }) => (props.showSubMenu ? props.theme.primary : 'white')};
+    color: ${(props: { showSubMenu: boolean; theme: State.Theme }) =>
+      props.showSubMenu ? props.theme.primary : 'white'};
   }
 
   .mobileMenusMainItemContentHighlight {

src/components/Header/LanguageComp/styled.tsx

@@ -4,7 +4,8 @@ export const HeaderLanguagePanel = styled.div`
   display: flex;
   align-items: center;
   height: 100%;
-  color: ${(props: { theme: any; showLanguage: boolean }) => (props.showLanguage ? props.theme.secondary : 'white')};
+  color: ${(props: { theme: { primary: string; secondary: string }; showLanguage: boolean }) =>
+    props.showLanguage ? props.theme.secondary : 'white'};
   padding: 10px 0;
   margin-bottom: 4px;
 
@@ -48,7 +49,8 @@ export const MobileSubMenuPanel = styled.div`
   }
 
   .mobileMenusMainItemContent {
-    color: ${(props: { showSubMenu: boolean; theme: any }) => (props.showSubMenu ? props.theme.primary : 'white')};
+    color: ${(props: { showSubMenu: boolean; theme: State.Theme }) =>
+      props.showSubMenu ? props.theme.primary : 'white'};
   }
 
   .mobileMenusMainItemContentHighlight {

src/components/Header/MenusComp/index.tsx

@@ -10,9 +10,15 @@ export enum LinkType {
   Outer,
 }
 
+interface MenuData {
+  type: LinkType
+  name: string
+  url: string
+}
+
 const useMenuDataList = () => {
   const { t } = useTranslation()
-  return [
+  const list: MenuData[] = [
     {
       type: LinkType.Inner,
       name: t('navbar.home'),
@@ -43,17 +49,18 @@ const useMenuDataList = () => {
       name: t('navbar.fee_rate'),
       url: '/fee-rate-tracker',
     },
-    !isMainnet()
-      ? {
-          type: LinkType.Outer,
-          name: t('navbar.faucet'),
-          url: 'https://faucet.nervos.org/',
-        }
-      : {},
   ]
+  if (!isMainnet()) {
+    list.push({
+      type: LinkType.Outer,
+      name: t('navbar.faucet'),
+      url: 'https://faucet.nervos.org/',
+    })
+  }
+  return list
 }
 
-const MenuItemLink = ({ menu }: { menu: any }) => {
+const MenuItemLink = ({ menu }: { menu: MenuData }) => {
   const { url, type, name } = menu
   return (
     <MobileMenuLink href={url} target={type === LinkType.Inner ? '_self' : '_blank'} rel="noopener noreferrer">
@@ -74,19 +81,17 @@ export default memo(() => {
     </MobileMenuItem>
   ) : (
     <HeaderMenuPanel>
-      {menuList
-        .filter(menu => menu.name !== undefined)
-        .map(menu =>
-          menu.type === LinkType.Inner ? (
-            <Link className="headerMenusItem" to={menu.url} key={menu.name}>
-              {menu.name}
-            </Link>
-          ) : (
-            <a className="headerMenusItem" href={menu.url} target="_blank" rel="noopener noreferrer" key={menu.name}>
-              {menu.name}
-            </a>
-          ),
-        )}
+      {menuList.map(menu =>
+        menu.type === LinkType.Inner ? (
+          <Link className="headerMenusItem" to={menu.url} key={menu.name}>
+            {menu.name}
+          </Link>
+        ) : (
+          <a className="headerMenusItem" href={menu.url} target="_blank" rel="noopener noreferrer" key={menu.name}>
+            {menu.name}
+          </a>
+        ),
+      )}
     </HeaderMenuPanel>
   )
 })

src/components/Page/index.tsx

@@ -1,5 +1,6 @@
+import { CSSProperties, ReactNode } from 'react'
 import { PagePanel } from './styled'
 
-export default ({ children, style }: { children: any; style?: object }) => (
+export default ({ children, style }: { children: ReactNode; style?: CSSProperties }) => (
   <PagePanel style={style}>{children}</PagePanel>
 )

src/components/Pagination/index.tsx

@@ -82,11 +82,11 @@ const Pagination = ({
           pattern="[0-9]*"
           className="paginationInputPage"
           value={inputPage}
-          onChange={(event: any) => {
+          onChange={event => {
             const pageNo = parseInt(event.target.value, 10)
-            setInputPage(Number.isNaN(pageNo) ? event.target.value : Math.min(pageNo, total))
+            setInputPage(Number.isNaN(pageNo) ? Number(event.target.value) : Math.min(pageNo, total))
           }}
-          onKeyUp={(event: any) => {
+          onKeyUp={event => {
             if (event.keyCode === 13) {
               changePage(inputPage)
             }

src/components/Search/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, FC, memo } from 'react'
+import { useState, useRef, useEffect, FC, memo, RefObject, ChangeEvent } from 'react'
 import { useHistory } from 'react-router'
 import { AxiosError } from 'axios'
 import { TFunction, useTranslation } from 'react-i18next'
@@ -19,29 +19,31 @@ enum SearchResultType {
   UDT = 'udt',
 }
 
-const clearSearchInput = (inputElement: any) => {
-  const input: HTMLInputElement = inputElement.current
+const clearSearchInput = (inputElement: RefObject<HTMLInputElement>) => {
+  const input = inputElement.current
   if (input) {
     input.value = ''
     input.blur()
   }
 }
 
-const setSearchLoading = (inputElement: any, t: TFunction) => {
-  const input: HTMLInputElement = inputElement.current
-  input.value = t('search.loading')
+const setSearchLoading = (inputElement: RefObject<HTMLInputElement>, t: TFunction) => {
+  const input = inputElement.current
+  if (input) {
+    input.value = t('search.loading')
+  }
 }
 
-const setSearchContent = (inputElement: any, content: string) => {
-  const input: HTMLInputElement = inputElement.current
+const setSearchContent = (inputElement: RefObject<HTMLInputElement>, content: string) => {
+  const input = inputElement.current
   if (input) {
     input.value = content
   }
 }
 
 const handleSearchResult = (
   searchValue: string,
-  inputElement: any,
+  inputElement: RefObject<HTMLInputElement>,
   setSearchValue: Function,
   history: ReturnType<typeof useHistory>,
   t: TFunction,
@@ -131,12 +133,12 @@ const Search: FC<{
     }
   }
 
-  const inputChangeAction = (event: any) => {
+  const inputChangeAction = (event: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.target.value)
     if (!event.target.value) onEditEnd?.()
   }
 
-  const searchKeyAction = (event: any) => {
+  const searchKeyAction = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.keyCode === 13) {
       handleSearchResult(searchValue, inputElement, setSearchValue, history, t)
       onEditEnd?.()
@@ -157,8 +159,8 @@ const Search: FC<{
           ref={inputElement}
           placeholder={placeholder}
           defaultValue={searchValue || ''}
-          onChange={(event: any) => inputChangeAction(event)}
-          onKeyUp={(event: any) => searchKeyAction(event)}
+          onChange={event => inputChangeAction(event)}
+          onKeyUp={event => searchKeyAction(event)}
         />
         {searchValue && <ImageIcon isClear />}
       </SearchPanel>