typing fixes

src/components/atoms/BaseDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode, ReactElement } from 'react'
 import styles from './BaseDialog.module.css'
 import { Modal } from 'react-responsive-modal'
 
@@ -14,10 +14,10 @@ export default function BaseDialog({
   open: boolean
   title: string
   onClose: () => void
-  children: React.ReactNode
+  children: ReactNode
   disableClose?: boolean
   actions?: any
-}) {
+}): ReactElement {
   return (
     <Modal
       open={open}

src/components/atoms/Dropzone.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { ReactElement, useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './Dropzone.module.css'
 import { formatBytes } from '../../utils'
@@ -13,7 +13,7 @@ export default function Dropzone({
   disabled?: boolean
   multiple?: boolean
   error?: string
-}) {
+}): ReactElement {
   const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
     handleOnDrop
   ])

src/components/atoms/FormikPersist.tsx

@@ -64,7 +64,7 @@ class PersistImpl extends React.Component<
     }
   }
 
-  render(): any {
+  render(): null {
     return null
   }
 }

src/components/atoms/Input/Row.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './Row.module.css'
 
-const Row = ({ children }: { children: any }) => (
+const Row = ({ children }: { children: ReactNode }): ReactElement => (
   <div className={styles.row}>{children}</div>
 )
 

src/components/atoms/Lists.tsx

@@ -1,7 +1,13 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './Lists.module.css'
 
-export function ListItem({ children, ol }: { children: any; ol?: boolean }) {
+export function ListItem({
+  children,
+  ol
+}: {
+  children: ReactNode
+  ol?: boolean
+}): ReactElement {
   const classes = ol
     ? `${styles.item} ${styles.olItem}`
     : `${styles.item} ${styles.ulItem}`

src/components/atoms/Table/index.tsx

@@ -22,7 +22,7 @@ export default function Table({
   columns: any
   data: any
   pagination?: AssetTablePagination
-}) {
+}): ReactElement {
   return (
     <div>
       {data?.length ? (

src/components/atoms/Time.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { format, formatDistance } from 'date-fns'
 
 export default function Time({
@@ -7,7 +7,7 @@ export default function Time({
 }: {
   date: string
   relative?: boolean
-}) {
+}): ReactElement {
   const dateNew = new Date(date)
   const dateIso = dateNew.toISOString()
 

src/components/atoms/Tooltip.tsx

@@ -44,7 +44,7 @@ export default function Tooltip({
     })
   }
 
-  function onHide({ unmount }: { unmount: any }) {
+  function onHide({ unmount }: { unmount: () => void }) {
     setSpring({
       ...animation.from,
       onRest: unmount,

src/components/molecules/FormFields/Price/Dynamic.tsx

@@ -58,7 +58,7 @@ export default function Dynamic({
     return () => {
       clearInterval(balanceInterval)
     }
-  }, [ocean, chainId, account])
+  }, [ocean, chainId, account, refreshBalance])
 
   return (
     <div className={styles.dynamic}>

src/components/molecules/SearchBar.tsx

@@ -8,13 +8,11 @@ import InputGroup from '../atoms/Input/InputGroup'
 export default function SearchBar({
   placeholder,
   initialValue,
-  filters,
-  large
+  filters
 }: {
   placeholder?: string
   initialValue?: string
   filters?: boolean
-  large?: true
 }): ReactElement {
   const navigate = useNavigate()
   const [value, setValue] = useState(initialValue || '')

src/components/organisms/AssetActions/Compute.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactElement } from 'react'
+import React, { useState, ReactElement, ChangeEvent } from 'react'
 import { DDO } from '@oceanprotocol/lib'
 import Loader from '../../atoms/Loader'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -45,13 +45,13 @@ export default function Compute({
     !ocean ||
     !isBalanceSufficient
 
-  const onDrop = async (files: any) => {
+  const onDrop = async (files: File[]) => {
     setFile(files[0])
     const fileText = await readFileContent(files[0])
     setAlgorithmRawCode(fileText)
   }
 
-  const handleSelectChange = (event: any) => {
+  const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
     const comType = event.target.value
     setComputeType(comType)
 

src/components/organisms/AssetActions/Pool/Add.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import React, { ReactElement, useState, ChangeEvent } from 'react'
 import styles from './Add.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'

src/components/organisms/AssetActions/Pool/index.tsx

@@ -118,7 +118,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
       }
     }
     init()
-  }, [ocean, accountId, price])
+  }, [ocean, accountId, price, ddo.dataToken])
 
   return (
     <>

src/components/organisms/AssetContent/MetaFull.tsx

@@ -32,7 +32,7 @@ export default function MetaFull({
       setDtSymbol(symbol)
     }
     getDataTokenInfo()
-  }, [ocean])
+  }, [ocean, accountId, dataToken])
 
   return (
     <div className={styles.metaFull}>

src/components/organisms/Footer.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Footer.module.css'
 import Markdown from '../atoms/Markdown'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
-export default function Footer() {
+export default function Footer(): ReactElement {
   const { copyright } = useSiteMetadata()
   const year = new Date().getFullYear()
 

src/components/pages/Home.tsx

@@ -38,12 +38,12 @@ export default function HomePage(): ReactElement {
       setLoading(false)
     }
     init()
-  }, [])
+  }, [config.metadataStoreUri])
 
   return (
     <>
       <Container narrow className={styles.searchWrap}>
-        <SearchBar large />
+        <SearchBar />
       </Container>
 
       <section className={styles.latest}>

src/components/pages/Publish/PublishForm.tsx

@@ -28,19 +28,18 @@ export default function PublishForm({
     initialValues
   } = useFormikContext()
   const formName = 'ocean-publish-form'
+
   // reset form validation on every mount
   useEffect(() => {
     setErrors({})
     setTouched({})
 
     // setSubmitting(false)
-  }, [])
+  }, [setErrors, setTouched])
 
-  const resetFormAndClearStorage = async (e: FormEvent<Element>) => {
+  const resetFormAndClearStorage = (e: FormEvent<Element>) => {
     e.preventDefault()
-
-    await resetForm({ values: initialValues, status: 'empty' })
-
+    resetForm({ values: initialValues, status: 'empty' })
     setStatus('empty')
   }
 

src/components/pages/Publish/index.tsx

@@ -10,9 +10,9 @@ import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
-import { MetadataPublishForm } from '../../../@types/MetaData'
+import { MetadataMarket, MetadataPublishForm } from '../../../@types/MetaData'
 import { useUserPreferences } from '../../../providers/UserPreferences'
-import { Logger } from '@oceanprotocol/lib'
+import { Logger, Metadata } from '@oceanprotocol/lib'
 
 export default function PublishPage({
   content
@@ -35,7 +35,7 @@ export default function PublishPage({
       Logger.log('Publish with ', price, serviceType, price.datatoken)
 
       const ddo = await publish(
-        metadata as any,
+        (metadata as unknown) as Metadata,
         {
           ...price,
           liquidityProviderFee: `${price.liquidityProviderFee}`

src/components/templates/Search/index.tsx

@@ -34,7 +34,7 @@ export default function SearchPage({
       setLoading(false)
     }
     initSearch()
-  }, [text, tag, page])
+  }, [text, tag, page, config.metadataStoreUri, parsed])
 
   return (
     <section className={styles.grid}>

src/helpers/NetworkMonitor.tsx

@@ -1,23 +1,24 @@
-import React, { useEffect } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { useOcean } from '@oceanprotocol/react'
 import { getOceanConfig } from './wrapRootElement'
 
-export function NetworkMonitor() {
+export function NetworkMonitor(): ReactElement {
   const { connect, web3Provider } = useOcean()
 
-  const handleNetworkChanged = (chainId: number) => {
-    const config = getOceanConfig(chainId)
-    connect(config)
-  }
   useEffect(() => {
     if (!web3Provider) return
 
+    async function handleNetworkChanged(chainId: number) {
+      const config = getOceanConfig(chainId)
+      await connect(config)
+    }
+
     web3Provider.on('chainChanged', handleNetworkChanged)
 
     return () => {
       web3Provider.removeListener('chainChanged', handleNetworkChanged)
     }
-  }, [web3Provider])
+  }, [web3Provider, connect])
 
   return <></>
 }

src/utils/cleanupContentType.ts

@@ -1,4 +1,4 @@
-const cleanupContentType = (contentType: string) => {
+const cleanupContentType = (contentType: string): string => {
   // strip away the 'application/' part
   const contentTypeSplit = contentType.split('/')[1]
 

src/utils/index.ts

@@ -64,7 +64,7 @@ export async function getFileInfo(url: string): Promise<FileMetadata> {
   }
 }
 
-export async function fetchData(url: string): Promise<any> {
+export async function fetchData(url: string): Promise<AxiosResponse['data']> {
   try {
     const response = await axios(url)
 
@@ -123,7 +123,7 @@ export function setProperty<T extends Record<string, unknown>>(
   objectToBeUpdated: T,
   propertyName: keyof T,
   value?: T[keyof T]
-) {
+): void {
   if (value) {
     objectToBeUpdated[propertyName] = value
   } else {