fix styles typing

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Buttons/index.tsx

@@ -7,7 +7,7 @@ import Row from 'src/components/layout/Row'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 import { isReadMethod } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const Buttons = ({ onClose }) => {
   const classes = useStyles()

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx

@@ -14,7 +14,7 @@ import Col from 'src/components/layout/Col'
 import Row from 'src/components/layout/Row'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const EthAddressInput = ({ isContract = true, isRequired = true, name, onScannedValue, text }) => {
   const classes = useStyles()

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthValue/index.tsx

@@ -15,7 +15,7 @@ import ABIService from 'src/logic/contractInteraction/sources/ABIService'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 import { safeSelector } from 'src/routes/safe/store/selectors'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const EthValue = ({ onSetMax }) => {
   const classes = useStyles()
@@ -42,7 +42,6 @@ const EthValue = ({ onSetMax }) => {
       <Row margin="md">
         <Col>
           <Field
-            className={classes.addressInput}
             component={TextField}
             disabled={disabled}
             inputAdornment={{

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/FormErrorMessage/index.tsx

@@ -6,7 +6,7 @@ import Row from 'src/components/layout/Row'
 import Paragraph from 'src/components/layout/Paragraph'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const FormErrorMessage = () => {
   const classes = useStyles()

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Header/index.tsx

@@ -7,14 +7,14 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const Header = ({ onClose, subTitle, title }) => {
   const classes = useStyles()
 
   return (
     <Row align="center" className={classes.heading} grow>
-      <Paragraph className={classes.manage} noMargin weight="bolder">
+      <Paragraph className={classes.headingText} noMargin weight="bolder">
         {title}
       </Paragraph>
       <Paragraph className={classes.annotation}>{subTitle}</Paragraph>

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx

@@ -3,8 +3,6 @@ import { withSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { styles } from './style'
-
 import AddressInfo from 'src/components/AddressInfo'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
@@ -18,12 +16,13 @@ import { estimateTxGasCosts } from 'src/logic/safe/transactions/gasNew'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
+import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 import Header from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Header'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
 import createTransaction from 'src/routes/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/routes/safe/store/selectors'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const ContractInteractionReview = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }: any) => {
   const classes = useStyles()
@@ -79,7 +78,7 @@ const ContractInteractionReview = ({ closeSnackbar, enqueueSnackbar, onClose, on
     <>
       <Header onClose={onClose} subTitle="2 of 2" title="Contract Interaction" />
       <Hairline />
-      <Block className={classes.container}>
+      <Block className={classes.formContainer}>
         <Row margin="xs">
           <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
             Contract Address

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/style.ts

@@ -1,57 +0,0 @@
-import { border, lg, md, secondaryText, sm } from 'src/theme/variables'
-
-export const styles = () => ({
-  heading: {
-    padding: `${md} ${lg}`,
-    justifyContent: 'flex-start',
-    boxSizing: 'border-box',
-    maxHeight: '75px',
-  },
-  annotation: {
-    letterSpacing: '-1px',
-    color: secondaryText,
-    marginRight: 'auto',
-    marginLeft: '20px',
-  },
-  headingText: {
-    fontSize: lg,
-  },
-  closeIcon: {
-    height: '35px',
-    width: '35px',
-  },
-  container: {
-    padding: `${md} ${lg}`,
-  },
-  value: {
-    marginLeft: sm,
-  },
-  outerData: {
-    borderRadius: '5px',
-    border: `1px solid ${border}`,
-    padding: '11px',
-    minHeight: '21px',
-  },
-  data: {
-    wordBreak: 'break-all',
-    overflow: 'auto',
-    fontSize: '14px',
-    fontFamily: 'Averta',
-    maxHeight: '100px',
-    letterSpacing: 'normal',
-    fontStretch: 'normal',
-    lineHeight: '1.43',
-  },
-  buttonRow: {
-    height: '84px',
-    justifyContent: 'center',
-    '& > button': {
-      fontFamily: 'Averta',
-      fontSize: md,
-    },
-  },
-  submitButton: {
-    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
-    marginLeft: '15px',
-  },
-})

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx

@@ -20,7 +20,7 @@ import RenderInputParams from './RenderInputParams'
 import RenderOutputParams from './RenderOutputParams'
 import { abiExtractor, createTxObject, formMutators, handleSubmitError, isReadMethod } from './utils'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }) => {
   const classes = useStyles()

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts

@@ -1,6 +1,7 @@
-import { lg, md } from 'src/theme/variables'
+import { lg, md, secondaryText, sm, border } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   heading: {
     padding: `${md} ${lg}`,
     justifyContent: 'flex-start',
@@ -9,11 +10,11 @@ export const styles = () => ({
   },
   annotation: {
     letterSpacing: '-1px',
-    color: '#a2a8ba',
+    color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',
   },
-  manage: {
+  headingText: {
     fontSize: lg,
   },
   closeIcon: {
@@ -26,6 +27,25 @@ export const styles = () => ({
   formContainer: {
     padding: `${md} ${lg}`,
   },
+  value: {
+    marginLeft: sm,
+  },
+  outerData: {
+    borderRadius: '5px',
+    border: `1px solid ${border}`,
+    padding: '11px',
+    minHeight: '21px',
+  },
+  data: {
+    wordBreak: 'break-all',
+    overflow: 'auto',
+    fontSize: '14px',
+    fontFamily: 'Averta',
+    maxHeight: '100px',
+    letterSpacing: 'normal',
+    fontStretch: 'normal',
+    lineHeight: '1.43',
+  },
   buttonRow: {
     height: '84px',
     justifyContent: 'center',