Add gas costs estimation to change owners for multiple owners safe

package.json

@@ -35,7 +35,7 @@
     "@gnosis.pm/util-contracts": "2.0.4",
     "@material-ui/core": "4.5.0",
     "@material-ui/icons": "4.4.3",
-    "@testing-library/jest-dom": "4.1.1",
+    "@testing-library/jest-dom": "4.1.2",
     "@welldone-software/why-did-you-render": "3.3.7",
     "axios": "0.19.0",
     "bignumber.js": "9.0.0",

src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
@@ -18,11 +18,16 @@ import Block from '~/components/layout/Block'
 import Row from '~/components/layout/Row'
 import Col from '~/components/layout/Col'
 import type { Owner } from '~/routes/safe/store/models/owner'
+import { getWeb3 } from '~/logic/wallets/getWeb3'
+import { formatAmount } from '~/logic/tokens/utils/formatAmount'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
+import { estimateApprovalTxGasCosts } from '~/logic/safe/transactions/gasNew'
 import { styles } from './style'
 
 type Props = {
   onClose: () => void,
   classes: Object,
+  safeAddress: string,
   threshold: number,
   owners: List<Owner>,
   onChangeThreshold: Function,
@@ -31,8 +36,33 @@ type Props = {
 const THRESHOLD_FIELD_NAME = 'threshold'
 
 const ChangeThreshold = ({
-  onClose, owners, threshold, classes, onChangeThreshold,
+  onClose, owners, threshold, classes, onChangeThreshold, safeAddress,
 }: Props) => {
+  const [gasCosts, setGasCosts] = useState<string>('< 0.001')
+
+  useEffect(() => {
+    let isCurrent = true
+    const estimateGasCosts = async () => {
+      const web3 = getWeb3()
+      const { fromWei, toBN } = web3.utils
+
+      const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+      const txData = safeInstance.contract.methods.changeThreshold('1').encodeABI()
+      const estimatedGasCosts = await estimateApprovalTxGasCosts(safeAddress, safeAddress, txData)
+      const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
+      const formattedGasCosts = formatAmount(gasCostsAsEth)
+      if (isCurrent) {
+        setGasCosts(formattedGasCosts)
+      }
+    }
+
+    estimateGasCosts()
+
+    return () => {
+      isCurrent = false
+    }
+  }, [])
+
   const handleSubmit = async (values) => {
     const newThreshold = values[THRESHOLD_FIELD_NAME]
 
@@ -62,9 +92,7 @@ const ChangeThreshold = ({
                 </Paragraph>
               </Row>
               <Row>
-                <Paragraph weight="bolder">
+                <Paragraph weight="bolder">Any transaction requires the confirmation of:</Paragraph>
-                  Any transaction requires the confirmation of:
-                </Paragraph>
               </Row>
               <Row margin="xl" align="center" className={classes.inputRow}>
                 <Col xs={2}>
@@ -96,6 +124,11 @@ const ChangeThreshold = ({
                   </Paragraph>
                 </Col>
               </Row>
+              <Row>
+                <Paragraph>
+                  {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ETH in this wallet to fund this confirmation.`}
+                </Paragraph>
+              </Row>
             </Block>
             <Hairline style={{ position: 'absolute', bottom: 85 }} />
             <Row align="center" className={classes.buttonRow}>

src/routes/safe/components/Settings/ThresholdSettings/index.jsx

@@ -98,6 +98,7 @@ const ThresholdSettings = ({
           onClose={toggleModal}
           owners={owners}
           threshold={threshold}
+          safeAddress={safeAddress}
           onChangeThreshold={onChangeThreshold}
         />
       </Modal>

yarn.lock

@@ -2566,10 +2566,10 @@
     pretty-format "^24.8.0"
     wait-for-expect "^1.3.0"
 
-"@testing-library/jest-dom@4.1.1":
+"@testing-library/jest-dom@4.1.2":
-  version "4.1.1"
+  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-4.1.1.tgz#fe063a97784c8e58fc0498869e689151faeceda3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-4.1.2.tgz#e523047191379abd67cf0896dfd93cabc7e33eab"
-  integrity sha512-4tMKJ6loIPPoERJoeqSWd0CQDsU+RPdXB1V4dgHgUpJVrObjb+TsWTG2VL32tVeUMZoXqk7cUh14YQXceFzfxg==
+  integrity sha512-fNf2rCfu0dBD4DmpzqR2ibsaFlFojrWI/EuU8LLqv73CzFIMvT2RMq88p5JVRe4DfeNj0mu0MQ5FTG4mQ0qFaA==
   dependencies:
     "@babel/runtime" "^7.5.1"
     chalk "^2.4.1"