ci: enable depcheck and fix dependency and linter issues (#233)

* ci: enable depcheck and fix dependency and linter issues

* chore: lock dependency versions

* chore: update dependencies to latest working ones

* chore: fix deprecation createMuiTheme

* chore: revert notistack to v1

src/components/WithdrawDepositModal.tsx

@@ -55,7 +55,7 @@ export default function WithdrawDepositModal({
       setOpen(false)
       enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
-      enqueueSnackbar(`${errorMessage} Error: ${e.message}`, { variant: 'error' })
+      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
     }
   }
 
@@ -71,7 +71,7 @@ export default function WithdrawDepositModal({
 
       if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
     } catch (e) {
-      setAmountError(e)
+      setAmountError(e as Error)
     }
   }
 

src/hooks/accounting.ts

@@ -100,7 +100,7 @@ export const useAccounting = (
       setUncashedAmounts(results.fulfilled)
       setIsloadingUncashed(false)
     })
-  }, [settlements, isLoadingUncashed, uncashedAmounts])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
 
   const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
 

src/pages/files/Upload.tsx

@@ -39,7 +39,7 @@ export default function Files(): ReactElement {
 
   useEffect(() => {
     refresh()
-  }, [])
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   // Choose a postage stamp that has the lowest usage
   useEffect(() => {

src/pages/stamps/CreatePostageStampModal.tsx

@@ -77,7 +77,7 @@ export default function FormDialog({ label }: Props): ReactElement {
           await refresh()
           handleClose()
         } catch (e) {
-          enqueueSnackbar(`Error: ${e.message}`, { variant: 'error' })
+          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
           actions.setSubmitting(false)
         }
       }}

src/pages/stamps/index.tsx

@@ -30,13 +30,14 @@ export default function Accounting(): ReactElement {
   const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
   const { status } = useContext(BeeContext)
 
-  if (!status.all) return <TroubleshootConnectionCard />
-
   useEffect(() => {
+    if (!status.all) return
     start()
 
     return () => stop()
-  }, [])
+  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!status.all) return <TroubleshootConnectionCard />
 
   return (
     <div className={classes.root}>

src/providers/Bee.tsx

@@ -153,7 +153,7 @@ export function Provider({ children }: Props): ReactElement {
     setApiHealth(false)
 
     refresh()
-  }, [beeApi])
+  }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     setIsLoading(true)
@@ -169,7 +169,7 @@ export function Provider({ children }: Props): ReactElement {
     setSettlements(null)
 
     refresh()
-  }, [beeDebugApi])
+  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing
@@ -279,7 +279,7 @@ export function Provider({ children }: Props): ReactElement {
 
       await Promise.allSettled(promises)
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
       setIsRefreshing(false)
@@ -300,7 +300,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency, beeDebugApi, beeApi])
+  }, [frequency, beeDebugApi, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider

src/providers/Stamps.tsx

@@ -68,7 +68,7 @@ export function Provider({ children }: Props): ReactElement {
       setStamps(stamps.map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
     }
@@ -87,7 +87,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency])
+  }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider value={{ stamps, error, isLoading, lastUpdate, start, stop, refresh }}>

src/theme.tsx

@@ -1,4 +1,4 @@
-import { createMuiTheme, Theme } from '@material-ui/core/styles'
+import { createTheme, Theme } from '@material-ui/core/styles'
 import { orange } from '@material-ui/core/colors'
 
 declare module '@material-ui/core/styles/createPalette' {
@@ -170,7 +170,7 @@ const propsOverrides = {
   },
 }
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   palette: {
     type: 'light',
     background: {

src/utils/index.test.ts

@@ -42,7 +42,7 @@ describe('utils', () => {
       1,
       -1,
     ]
-    const wrongValues = [new Function()]
+    const wrongValues = [new Function()] // eslint-disable-line no-new-func
 
     correctValues.forEach(v => {
       test(`testing ${v}`, () => {