Fix more ESLint errors

src/components/AppLayout/Header/components/Layout.tsx

@@ -3,7 +3,6 @@ import Grow from '@material-ui/core/Grow'
 import List from '@material-ui/core/List'
 import Popper from '@material-ui/core/Popper'
 import { withStyles } from '@material-ui/core/styles'
-import * as React from 'react'
 import { Link } from 'react-router-dom'
 
 import Provider from './Provider'

src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx

@@ -1,5 +1,5 @@
 import { withStyles } from '@material-ui/core/styles'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import ConnectButton from 'src/components/ConnectButton'
 
@@ -34,7 +34,7 @@ const styles = () => ({
 const StyledCard = styled(Card)`
   padding: 20px;
 `
-const ConnectDetails = ({ classes }) => (
+const ConnectDetails = ({ classes }): ReactElement => (
   <StyledCard>
     <Row align="center" margin="lg">
       <Paragraph className={classes.text} noMargin size="xl" weight="bolder">

src/components/AppLayout/Header/components/ProviderInfo/ProviderDisconnected.tsx

@@ -1,5 +1,5 @@
 import { withStyles } from '@material-ui/core/styles'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import Col from 'src/components/layout/Col'
 import Paragraph from 'src/components/layout/Paragraph'
@@ -24,7 +24,7 @@ const styles = () => ({
   },
 })
 
-const ProviderDisconnected = ({ classes }) => (
+const ProviderDisconnected = ({ classes }): ReactElement => (
   <>
     <KeyRing circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={17} mode="error" />
     <Col className={classes.account} end="sm" layout="column" middle="xs">

src/components/Spacer/index.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 const style = {
   flexGrow: 1,
 }
 
-// eslint-disable-next-line react/display-name
-export default ({ className }: any) => <div className={className} style={style} />
+const Spacer = ({ className }: { className?: string }): ReactElement => <div className={className} style={style} />
+
+export default Spacer

src/components/forms/GnoForm/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ReactElement } from 'react'
 import { Form } from 'react-final-form'
 
 const stylesBasedOn = (padding) => ({
@@ -17,7 +17,7 @@ const GnoForm = ({
   subscription,
   testId = '',
   validation,
-}: any) => (
+}: any): ReactElement => (
   <Form
     decorators={decorators}
     initialValues={initialValues}

src/components/layout/Button/index.tsx

@@ -1,12 +1,12 @@
 import Button from '@material-ui/core/Button'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 const calculateStyleBased = (minWidth, minHeight) => ({
   minWidth: minWidth && `${minWidth}px`,
   minHeight: minHeight && `${minHeight}px`,
 })
 
-const GnoButton = ({ minWidth, minHeight = 35, testId = '', style = {}, ...props }: any) => {
+const GnoButton = ({ minWidth, minHeight = 35, testId = '', style = {}, ...props }: any): ReactElement => {
   const calculatedStyle = calculateStyleBased(minWidth, minHeight)
 
   return <Button data-testid={testId} style={{ ...calculatedStyle, ...style }} {...props} />

src/components/layout/ButtonLink/index.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable react/button-has-type  */
 import cn from 'classnames/bind'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import styles from './index.module.scss'
 
@@ -14,7 +13,7 @@ const GnoButtonLink = ({
   type = 'button',
   weight = 'regular',
   ...props
-}: any) => (
+}: any): ReactElement => (
   <button className={cx(styles.btnLink, size, color, weight, className)} data-testid={testId} type={type} {...props} />
 )
 

src/components/layout/Col/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames/bind'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import styles from './index.module.scss'
 
@@ -30,7 +30,7 @@ const Col = ({
   xs,
   xsOffset,
   ...props
-}: any) => {
+}: any): ReactElement => {
   const colClassNames = cx(
     'col',
     center ? capitalize(center, 'center') : undefined,

src/components/layout/Divider/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import { border } from 'src/theme/variables'
 
@@ -7,6 +7,6 @@ const style = {
   height: '100%',
 }
 
-const Divider = ({ className }: any) => <div className={className} style={style} />
+const Divider = ({ className }: { className?: string }): ReactElement => <div className={className} style={style} />
 
 export default Divider

src/components/layout/Hairline/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import { getSize } from 'src/theme/size'
 import { border } from 'src/theme/variables'
@@ -11,7 +11,7 @@ const calculateStyleFrom = (color, margin) => ({
   margin: `${getSize(margin)} 0px`,
 })
 
-const Hairline = ({ className, color, margin, style }: any) => {
+const Hairline = ({ className, color, margin, style }: any): ReactElement => {
   const calculatedStyles = calculateStyleFrom(color, margin)
   const mergedStyles = { ...calculatedStyles, ...(style || {}) }
 

src/components/layout/Pre/index.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames/bind'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import styles from './index.module.scss'
 
 const cx = classNames.bind(styles)
 
-const Pre = ({ children, ...props }) => (
+const Pre = ({ children, ...props }): ReactElement => (
   <pre className={cx(styles.pre)} {...props}>
     {children}
   </pre>

src/components/layout/Row/index.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames/bind'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import styles from './index.module.scss'
 
 import { capitalize } from 'src/utils/css'
 
 const cx = classNames.bind(styles)
 
-const Row = ({ align, children, className, grow, margin, testId = '', ...props }: any) => {
+const Row = ({ align, children, className, grow, margin, testId = '', ...props }: any): ReactElement => {
   const rowClassNames = cx(
     styles.row,
     margin ? capitalize(margin, 'margin') : undefined,

src/components/layout/Table/index.tsx

@@ -3,7 +3,7 @@ import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 export { TableBody, TableCell, TableHead, TableRow }
 
@@ -16,7 +16,7 @@ const overflowStyle: any = {
 }
 
 // see: https://css-tricks.com/responsive-data-tables/
-const GnoTable = ({ children, size }) => {
+const GnoTable = ({ children, size }): ReactElement => {
   const style = size ? buildWidthFrom(size) : undefined
 
   return (

src/logic/notifications/notificationBuilder.tsx

@@ -1,6 +1,5 @@
 import { IconButton } from '@material-ui/core'
 import { Close as IconClose } from '@material-ui/icons'
-import * as React from 'react'
 
 import { Notification, NOTIFICATIONS } from './notificationTypes'
 

src/routes/safe/components/Balances/AssetTableCell/index.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
+import { ReactElement } from 'react'
 
 import Block from 'src/components/layout/Block'
 import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
 
-const AssetTableCell = (props) => {
+const AssetTableCell = (props): ReactElement => {
   const { asset } = props
 
   return (

src/routes/safe/components/Balances/Collectibles/components/Item.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core/styles'
 // import CallMade from '@material-ui/icons/CallMade'
 import cn from 'classnames'
-import * as React from 'react'
+import { ReactElement } from 'react'
 import { useSelector } from 'react-redux'
 
 import Button from 'src/components/layout/Button'
@@ -98,7 +98,7 @@ const useStyles = makeStyles({
   },
 } as any)
 
-const Item = ({ data, onSend }) => {
+const Item = ({ data, onSend }): ReactElement => {
   const granted = useSelector(grantedSelector)
   const classes = useStyles({ backgroundColor: data.color, granted })