(Fix) [Contract Interaction] boolean fields (#976)

* Replaces checkbox component with safe apps components * Refactor input params to use checkbox component for boolean types * Remove "anys" Fix boolean values display on review tx * Remove any * Fix ts issues * Exports boolean fn to util function * Extract input component rendering to another component * Fixs imports Add types * Remove old checkbox component * Add types * Add types * fix `data` string not being updated after modifying a reviewed tx * fixes required for typescript 3.9.3 upgrade * bump typescript version * add travis_wait for build command * add cache for yarn * travis wait fix * remove travis_wait * Revert "fix `data` string not being updated after modifying a reviewed tx" This reverts commit 49356054cd93726b058073d3cd2e7a0244fd5914. * Revert "Revert "fix `data` string not being updated after modifying a reviewed tx"" This reverts commit f2572e68dc59c01d8e4b1eccf975faf4006cd7a7. Co-authored-by: Mikhail Mikheev <mmvsha73@gmail.com>
2025-01-11 10:34:06 +00:00 · 2020-06-04 10:56:55 -03:00 · 2020-06-04 10:56:55 -03:00 · 63193d2429
commit 63193d2429
parent 51c0a0fe1e
15 changed files with 1544 additions and 788 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -21,6 +21,8 @@ matrix:
    - env:
        - REACT_APP_NETWORK='rinkeby'
        - REACT_APP_GNOSIS_APPS_URL=${REACT_APP_GNOSIS_APPS_URL_STAGING}
+cache:
+  yarn: true
 before_install:
  # Needed to deploy pull request and releases
  - sudo apt-get update
--- a/package.json
+++ b/package.json
@ -151,25 +151,25 @@
    "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
    "@gnosis.pm/safe-react-components": "^0.1.2",
    "@gnosis.pm/util-contracts": "2.0.6",
-    "@ledgerhq/hw-transport-node-hid": "5.15.0",
-    "@material-ui/core": "4.9.14",
+    "@ledgerhq/hw-transport-node-hid": "5.16.0",
+    "@material-ui/core": "4.10.1",
    "@material-ui/icons": "4.9.1",
    "@material-ui/lab": "4.0.0-alpha.39",
    "@openzeppelin/contracts": "3.0.1",
    "async-sema": "^3.1.0",
    "axios": "0.19.2",
    "bignumber.js": "9.0.0",
-    "bnc-onboard": "1.9.1",
+    "bnc-onboard": "1.9.4",
    "classnames": "^2.2.6",
    "concurrently": "^5.2.0",
    "connected-react-router": "6.8.0",
    "currency-flags": "2.1.2",
-    "date-fns": "2.13.0",
+    "date-fns": "2.14.0",
    "electron-is-dev": "^1.1.0",
-    "electron-log": "4.1.2",
+    "electron-log": "4.2.1",
    "electron-updater": "4.3.1",
    "express": "^4.17.1",
-    "final-form": "4.19.1",
+    "final-form": "4.20.0",
    "final-form-calculate": "^1.3.1",
    "history": "4.10.1",
    "immortal-db": "^1.0.2",
@ -179,12 +179,12 @@
    "material-ui-search-bar": "^1.0.0-beta.13",
    "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
    "open": "^7.0.3",
-    "polished": "3.6.3",
+    "polished": "3.6.4",
    "qrcode.react": "1.0.0",
    "query-string": "6.12.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
-    "react-final-form": "6.4.0",
+    "react-final-form": "6.5.0",
    "react-final-form-listeners": "^1.0.2",
    "react-ga": "^2.7.0",
    "react-hot-loader": "4.12.21",
@ -208,19 +208,19 @@
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^25.2.1",
-    "@types/node": "^13.11.0",
+    "@types/node": "14.0.10",
    "@types/react": "^16.9.32",
    "@types/react-dom": "^16.9.6",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "autoprefixer": "9.7.6",
+    "@typescript-eslint/eslint-plugin": "3.1.0",
+    "@typescript-eslint/parser": "3.1.0",
+    "autoprefixer": "9.8.0",
    "cross-env": "^7.0.2",
    "dotenv": "^8.2.0",
    "dotenv-expand": "^5.1.0",
    "electron": "7.1.8",
-    "electron-builder": "22.2.0",
+    "electron-builder": "22.7.0",
    "electron-notarize": "^0.2.1",
-    "eslint": "^6.8.0",
+    "eslint": "6.8.0",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-import": "2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
@ -229,12 +229,12 @@
    "eslint-plugin-sort-destructure-keys": "1.3.4",
    "ethereumjs-abi": "0.6.8",
    "husky": "^4.2.2",
-    "lint-staged": "10.2.2",
+    "lint-staged": "10.2.8",
    "node-sass": "^4.14.1",
    "prettier": "2.0.5",
    "react-app-rewired": "^2.1.6",
-    "truffle": "5.1.23",
-    "typescript": "~3.7.2",
+    "truffle": "5.1.28",
+    "typescript": "3.9.3",
    "wait-on": "5.0.0"
  }
 }
--- a/src/components/forms/Checkbox/index.tsx
+++ b/src/components/forms/Checkbox/index.tsx
@ -1,15 +0,0 @@
-import Checkbox from '@material-ui/core/Checkbox'
-import React from 'react'
-
-class GnoCheckbox extends React.PureComponent<any> {
-  render() {
-    const {
-      input: { checked, name, onChange, ...restInput },
-      ...rest
-    } = this.props
-
-    return <Checkbox {...rest} checked={!!checked} inputProps={restInput} name={name} onChange={onChange} />
-  }
-}
-
-export default GnoCheckbox
--- a/src/routes/open/container/Open.tsx
+++ b/src/routes/open/container/Open.tsx
@ -81,9 +81,9 @@ export const createSafe = (values, userAccount) => {

 const Open = ({ addSafe, network, provider, userAccount }) => {
  const [loading, setLoading] = useState(false)
-  const [showProgress, setShowProgress] = useState()
+  const [showProgress, setShowProgress] = useState(false)
  const [creationTxPromise, setCreationTxPromise] = useState()
-  const [safeCreationPendingInfo, setSafeCreationPendingInfo] = useState()
+  const [safeCreationPendingInfo, setSafeCreationPendingInfo] = useState<any>()
  const [safePropsFromUrl, setSafePropsFromUrl] = useState()

  useEffect(() => {
@ -182,7 +182,7 @@ const Open = ({ addSafe, network, provider, userAccount }) => {
    <Page>
      {showProgress ? (
        <Opening
-          creationTxHash={safeCreationPendingInfo ? safeCreationPendingInfo.txHash : undefined}
+          creationTxHash={safeCreationPendingInfo?.txHash}
          onCancel={onCancel}
          onRetry={onRetry}
          onSuccess={onSafeCreated as any}
--- a/src/routes/opening/index.tsx
+++ b/src/routes/opening/index.tsx
@ -103,7 +103,7 @@ const BackButton = styled(Button)`

 const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider, submittedPromise }: any) => {
  const [loading, setLoading] = useState(true)
-  const [stepIndex, setStepIndex] = useState()
+  const [stepIndex, setStepIndex] = useState(0)
  const [safeCreationTxHash, setSafeCreationTxHash] = useState()
  const [createdSafeAddress, setCreatedSafeAddress] = useState()

--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/index.tsx
@ -69,7 +69,7 @@ const MethodsDropdown = ({ onChange }) => {
          <>
            <button className={classes.button} onClick={handleClick} type="button">
              <span className={classNames(classes.buttonInner, anchorEl && classes.openMenuButton)}>
-                {selectedMethod.name}
+                {(selectedMethod as Record<string, string>).name}
              </span>
            </button>
            <Menu
@ -120,7 +120,7 @@ const MethodsDropdown = ({ onChange }) => {
                    >
                      <ListItemText primary={name} />
                      <ListItemIcon className={classes.iconRight}>
-                        {signatureHash === selectedMethod.signatureHash ? (
+                        {signatureHash === (selectedMethod as Record<string, string>).signatureHash ? (
                          <img alt="checked" src={CheckIcon} />
                        ) : (
                          <span />
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/index.tsx
@ -0,0 +1,64 @@
+import React from 'react'
+
+import Col from 'src/components/layout/Col'
+import Field from 'src/components/forms/Field'
+import TextField from 'src/components/forms/TextField'
+
+import { composeValidators, mustBeEthereumAddress, required } from 'src/components/forms/validator'
+import { Checkbox } from '@gnosis.pm/safe-react-components'
+
+type Props = {
+  type: string
+  keyValue: string
+  placeholder: string
+}
+
+const InputComponent = ({ type, keyValue, placeholder }: Props) => {
+  if (!type) {
+    return null
+  }
+  switch (type) {
+    case 'bool': {
+      const inputProps = {
+        'data-testid': keyValue,
+      }
+      return (
+        <Col>
+          <Field component={Checkbox} name={keyValue} label={placeholder} type="checkbox" inputProps={inputProps} />
+        </Col>
+      )
+    }
+    case 'address': {
+      return (
+        <Col>
+          <Field
+            component={TextField}
+            name={keyValue}
+            placeholder={placeholder}
+            testId={keyValue}
+            text={placeholder}
+            type="text"
+            validate={composeValidators(required, mustBeEthereumAddress)}
+          />
+        </Col>
+      )
+    }
+    default: {
+      return (
+        <Col>
+          <Field
+            component={TextField}
+            name={keyValue}
+            placeholder={placeholder}
+            testId={keyValue}
+            text={placeholder}
+            type="text"
+            validate={required}
+          />
+        </Col>
+      )
+    }
+  }
+}
+
+export default InputComponent
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/index.tsx
@ -1,16 +1,14 @@
 import React from 'react'
 import { useField } from 'react-final-form'

-import Field from 'src/components/forms/Field'
-import TextField from 'src/components/forms/TextField'
-import { composeValidators, mustBeEthereumAddress, required } from 'src/components/forms/validator'
-import Col from 'src/components/layout/Col'
 import Row from 'src/components/layout/Row'

+import InputComponent from './InputComponent'
+
 const RenderInputParams = () => {
  const {
    meta: { valid: validABI },
-  } = useField('abi', { valid: true } as any)
+  } = useField('abi', { value: true })
  const {
    input: { value: method },
  }: any = useField('selectedMethod', { value: true })
@ -21,21 +19,10 @@ const RenderInputParams = () => {
    : method.inputs.map(({ name, type }, index) => {
        const placeholder = name ? `${name} (${type})` : type
        const key = `methodInput-${method.name}_${index}_${type}`
-        const validate = type === 'address' ? composeValidators(required, mustBeEthereumAddress) : required

        return (
          <Row key={key} margin="sm">
-            <Col>
-              <Field
-                component={TextField}
-                name={key}
-                placeholder={placeholder}
-                testId={key}
-                text={placeholder}
-                type="text"
-                validate={validate}
-              />
-            </Col>
+            <InputComponent type={type} keyValue={key} placeholder={placeholder} />
          </Row>
        )
      })
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles'
-import { withSnackbar } from 'notistack'
+import { useSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'

@ -22,10 +22,33 @@ import Header from 'src/routes/safe/components/Balances/SendModal/screens/Contra
 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'
+import { getValueFromTxInputs } from '../utils'

-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)

-const ContractInteractionReview = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }: any) => {
+export type TransactionReviewType = {
+  abi?: string
+  contractAddress?: string
+  data?: string
+  value?: string
+  selectedMethod?: {
+    action: string
+    signature: string
+    signatureHash: string
+    constant: boolean
+    inputs: []
+    name: string
+  }
+}
+
+type Props = {
+  onClose: () => void
+  onPrev: () => void
+  tx: TransactionReviewType
+}
+
+const ContractInteractionReview = ({ onClose, onPrev, tx }: Props) => {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
  const classes = useStyles()
  const dispatch = useDispatch()
  const { address: safeAddress } = useSelector(safeSelector)
@ -118,6 +141,7 @@ const ContractInteractionReview = ({ closeSnackbar, enqueueSnackbar, onClose, on
        </Row>
        {tx.selectedMethod.inputs.map(({ name, type }, index) => {
          const key = `methodInput-${tx.selectedMethod.name}_${index}_${type}`
+          const value: string = getValueFromTxInputs(key, type, tx)

          return (
            <React.Fragment key={key}>
@ -128,7 +152,7 @@ const ContractInteractionReview = ({ closeSnackbar, enqueueSnackbar, onClose, on
              </Row>
              <Row align="center" margin="md">
                <Paragraph className={classes.value} noMargin size="md" style={{ margin: 0 }}>
-                  {tx[key]}
+                  {value}
                </Paragraph>
              </Row>
            </React.Fragment>
@ -173,4 +197,4 @@ const ContractInteractionReview = ({ closeSnackbar, enqueueSnackbar, onClose, on
  )
 }

-export default withSnackbar(ContractInteractionReview as any)
+export default ContractInteractionReview
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/style.ts
@ -1,6 +1,7 @@
 import { border, lg, md, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'

-export const styles = () => ({
+export const styles = createStyles({
  heading: {
    padding: `${md} ${lg}`,
    justifyContent: 'flex-start',
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@ -36,7 +36,7 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
  const handleSubmit = async ({ contractAddress, selectedMethod, value, ...values }) => {
    if (value || (contractAddress && selectedMethod)) {
      const data = await createTxObject(selectedMethod, contractAddress, values).encodeABI()
-      onNext({ contractAddress, data, selectedMethod, value, ...values })
+      onNext({ ...values, contractAddress, data, selectedMethod, value })
    }
  }

--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils/index.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils/index.ts
@ -4,6 +4,7 @@ import { mustBeEthereumAddress, mustBeEthereumContractAddress } from 'src/compon
 import { getNetwork } from 'src/config'
 import { getConfiguredSource } from 'src/logic/contractInteraction/sources'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
+import { TransactionReviewType } from '../Review'

 export const NO_CONTRACT = 'no contract'

@ -56,3 +57,11 @@ export const createTxObject = (method, contractAddress, values) => {

  return contract.methods[name](...args)
 }
+
+export const getValueFromTxInputs = (key: string, type: string, tx: TransactionReviewType): string => {
+  let value = tx[key]
+  if (type === 'bool') {
+    value = tx[key] ? String(tx[key]) : 'false'
+  }
+  return value
+}
--- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomAsset/index.tsx
+++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomAsset/index.tsx
@ -6,7 +6,6 @@ import { useSelector } from 'react-redux'
 import { styles } from './style'
 import { getSymbolAndDecimalsFromContract } from './utils'

-import Checkbox from 'src/components/forms/Checkbox'
 import Field from 'src/components/forms/Field'
 import GnoForm from 'src/components/forms/GnoForm'
 import TextField from 'src/components/forms/TextField'
@ -25,6 +24,7 @@ import {
  doesntExistInAssetsList,
 } from 'src/routes/safe/components/Balances/Tokens/screens/AddCustomAsset/validators'
 import TokenPlaceholder from 'src/routes/safe/components/Balances/assets/token_placeholder.svg'
+import { Checkbox } from '@gnosis.pm/safe-react-components'

 export const ADD_CUSTOM_ASSET_ADDRESS_INPUT_TEST_ID = 'add-custom-asset-address-input'
 export const ADD_CUSTOM_ASSET_SYMBOLS_INPUT_TEST_ID = 'add-custom-asset-symbols-input'
@ -140,11 +140,14 @@ const AddCustomAsset = (props) => {
                    text="Token decimals*"
                    type="text"
                  />
-                  <Block justify="left">
-                    <Field className={classes.checkbox} component={Checkbox} name="showForAllSafes" type="checkbox" />
-                    <Paragraph className={classes.checkboxLabel} size="md" weight="bolder">
-                      Activate assets for all Safes
-                    </Paragraph>
+                  <Block justify="center">
+                    <Field
+                      className={classes.checkbox}
+                      component={Checkbox}
+                      name="showForAllSafes"
+                      type="checkbox"
+                      label="Activate assets for all Safes"
+                    />
                  </Block>
                </Col>
                <Col align="center" layout="column" xs={6}>
--- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.tsx
+++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.tsx
@ -6,7 +6,6 @@ import { styles } from './style'
 import { getSymbolAndDecimalsFromContract } from './utils'
 import { addressIsTokenContract, doesntExistInTokenList } from './validators'

-import Checkbox from 'src/components/forms/Checkbox'
 import Field from 'src/components/forms/Field'
 import GnoForm from 'src/components/forms/GnoForm'
 import TextField from 'src/components/forms/TextField'
@ -21,6 +20,7 @@ import Row from 'src/components/layout/Row'

 import TokenPlaceholder from 'src/routes/safe/components/Balances/assets/token_placeholder.svg'
 import { checksumAddress } from 'src/utils/checksumAddress'
+import { Checkbox } from '@gnosis.pm/safe-react-components'

 export const ADD_CUSTOM_TOKEN_ADDRESS_INPUT_TEST_ID = 'add-custom-token-address-input'
 export const ADD_CUSTOM_TOKEN_SYMBOLS_INPUT_TEST_ID = 'add-custom-token-symbols-input'
@ -161,11 +161,14 @@ const AddCustomToken = (props) => {
                    text="Token decimals*"
                    type="text"
                  />
-                  <Block justify="left">
-                    <Field className={classes.checkbox} component={Checkbox} name="showForAllSafes" type="checkbox" />
-                    <Paragraph className={classes.checkboxLabel} size="md" weight="bolder">
-                      Activate token for all Safes
-                    </Paragraph>
+                  <Block justify="center">
+                    <Field
+                      className={classes.checkbox}
+                      component={Checkbox}
+                      name="showForAllSafes"
+                      type="checkbox"
+                      label="Activate token for all Safes"
+                    />
                  </Block>
                </Col>
                <Col align="center" layout="column" xs={6}>
--- a/yarn.lock
+++ b/yarn.lock