(Fix) - #1707 Cannot use larger numbers in contract interaction (#1863)

* Remove withStyles from TextAreaField and fix name

* Remove any type in handleSubmit from contractInteraction review

* Parses the bignumber value to string

src/components/forms/TextAreaField/index.tsx

@@ -1,10 +1,10 @@
-import { withStyles } from '@material-ui/core/styles'
-import React from 'react'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import React, { ReactElement } from 'react'
 
 import Field from 'src/components/forms/Field'
 import TextField from 'src/components/forms/TextField'
 
-const styles = () => ({
+const styles = createStyles({
   textarea: {
     '& > div': {
       height: '140px',
@@ -21,8 +21,9 @@ const styles = () => ({
   },
 })
 
-const TextareaField = ({ classes, ...props }) => (
-  <Field {...props} className={classes.textarea} component={TextField} multiline rows="5" />
-)
+const useStyles = makeStyles(styles)
 
-export default withStyles(styles as any)(TextareaField)
+export const TextAreaField = ({ ...props }): ReactElement => {
+  const classes = useStyles()
+  return <Field {...props} className={classes.textarea} component={TextField} multiline rows="5" />
+}

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useField, useForm } from 'react-final-form'
 
-import TextareaField from 'src/components/forms/TextareaField'
+import { TextAreaField } from 'src/components/forms/TextAreaField'
 import { mustBeEthereumAddress, mustBeEthereumContractAddress } from 'src/components/forms/validator'
 import Col from 'src/components/layout/Col'
 import Row from 'src/components/layout/Row'
@@ -54,7 +54,7 @@ const ContractABI = (): React.ReactElement => {
   return (
     <Row margin="sm">
       <Col>
-        <TextareaField name="abi" placeholder="ABI*" text="ABI*" type="text" validate={hasUsefulMethods} />
+        <TextAreaField name="abi" placeholder="ABI*" text="ABI*" type="text" validate={hasUsefulMethods} />
       </Col>
     </Row>
   )

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/ArrayTypeInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import TextareaField from 'src/components/forms/TextareaField'
+import { TextAreaField } from 'src/components/forms/TextAreaField'
 import {
   isAddress,
   isBoolean,
@@ -46,7 +46,7 @@ const typePlaceholder = (text: string, type: string): string => {
 }
 
 const ArrayTypeInput = ({ name, text, type }: { name: string; text: string; type: string }): React.ReactElement => (
-  <TextareaField name={name} placeholder={typePlaceholder(text, type)} text={text} type="text" validate={validator} />
+  <TextAreaField name={name} placeholder={typePlaceholder(text, type)} text={text} type="text" validate={validator} />
 )
 
 export default ArrayTypeInput

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

@@ -10,7 +10,7 @@ import QRIcon from 'src/assets/icons/qrcode.svg'
 import CopyBtn from 'src/components/CopyBtn'
 import Field from 'src/components/forms/Field'
 import GnoForm from 'src/components/forms/GnoForm'
-import TextareaField from 'src/components/forms/TextareaField'
+import { TextAreaField } from 'src/components/forms/TextAreaField'
 import TextField from 'src/components/forms/TextField'
 import { composeValidators, maxValue, minValue, mustBeFloat } from 'src/components/forms/validator'
 import Identicon from 'src/components/Identicon'
@@ -247,7 +247,7 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
                 </Row>
                 <Row margin="sm">
                   <Col>
-                    <TextareaField
+                    <TextAreaField
                       name="data"
                       placeholder="Data (hex encoded)*"
                       text="Data (hex encoded)*"

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

@@ -70,7 +70,7 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
   const handleSubmit = async (
     { contractAddress, selectedMethod, value, ...values },
     submit = true,
-  ): Promise<void | any> => {
+  ): Promise<void | Record<string, string>> => {
     if (value || (contractAddress && selectedMethod)) {
       try {
         const txObject = createTxObject(selectedMethod, contractAddress, values)

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils/index.ts

@@ -6,6 +6,7 @@ import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIServic
 import { getAddressFromDomain, getWeb3 } from 'src/logic/wallets/getWeb3'
 import { TransactionReviewType } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review'
 import { isValidCryptoDomainName, isValidEnsName } from 'src/logic/wallets/ethAddresses'
+import { BigNumber } from 'bignumber.js'
 
 export const NO_CONTRACT = 'no contract'
 
@@ -67,7 +68,13 @@ export const isByte = (type: string): boolean => type.indexOf('byte') === 0
 export const isArrayParameter = (parameter: string): boolean => /(\[\d*])+$/.test(parameter)
 export const getParsedJSONOrArrayFromString = (parameter: string): (string | number)[] | null => {
   try {
-    return JSON.parse(parameter)
+    const arrayResult = JSON.parse(parameter)
+    return arrayResult.map((value) => {
+      if (Number.isInteger(value)) {
+        return new BigNumber(value).toString()
+      }
+      return value
+    })
   } catch (err) {
     return null
   }
@@ -101,7 +108,7 @@ export const createTxObject = (
   values: Record<string, string>,
 ): ContractSendMethod => {
   const web3 = getWeb3()
-  const contract: any = new web3.eth.Contract([method], contractAddress)
+  const contract = new web3.eth.Contract([method], contractAddress)
   const { inputs, name = '', signatureHash } = method
   const args = inputs?.map(extractMethodArgs(signatureHash, values)) || []