From 18508c3608643c957f18f77c0c0e4d5e3f454f00 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 30 Nov 2020 16:02:31 -0300
Subject: [PATCH 01/84] Makes getGasEstimationTxResponse exportable

---
 src/logic/safe/transactions/gas.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 92982f12c9..1af94841d1 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -130,7 +130,7 @@ export const getDataFromNodeErrorMessage = (errorMessage: string): string | unde
   }
 }
 
-const getGasEstimationTxResponse = async (txConfig: {
+export const getGasEstimationTxResponse = async (txConfig: {
   to: string
   from: string
   data: string

From 34749fb6e62a03dd63f919cb4ede0b78576a2e0e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 30 Nov 2020 16:03:37 -0300
Subject: [PATCH 02/84] Add check for failing txs on approveTxModal

---
 .../ExpandedTx/ApproveTxModal/index.tsx       | 42 ++++++++++++++++++-
 .../ExpandedTx/ApproveTxModal/style.ts        | 10 +++++
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 7090aa742c..eb009f453a 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -18,13 +18,16 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { estimateTxGasCosts, getGasEstimationTxResponse } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import processTransaction from 'src/logic/safe/store/actions/processTransaction'
 
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
+import { getAccountFrom, getWeb3 } from 'src/logic/wallets/getWeb3'
+import InfoIcon from 'src/assets/icons/info_red.svg'
+import Img from 'src/components/layout/Img'
 
 const useStyles = makeStyles(styles)
 
@@ -82,10 +85,28 @@ const ApproveTxModal = ({
   const { description, title } = getModalTitleAndDescription(thresholdReached, isCancelTx)
   const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
+  const [txWillFail, setTxWillFail] = useState(false)
 
   useEffect(() => {
     let isCurrent = true
 
+    const checkIfTxWillFail = async () => {
+      try {
+        const web3 = getWeb3()
+        const from = await getAccountFrom(web3)
+        if (from) {
+          await getGasEstimationTxResponse({
+            to: tx.recipient,
+            from,
+            data: tx.data as string,
+          })
+        }
+      } catch (error) {
+        console.warn('The transaction will fail, it was not possible to estimate the amount of gas to execute the tx')
+        setTxWillFail(true)
+      }
+    }
+
     const estimateGas = async () => {
       const estimatedGasCosts = await estimateTxGasCosts(
         safeAddress,
@@ -94,6 +115,9 @@ const ApproveTxModal = ({
         tx,
         approveAndExecute ? userAddress : undefined,
       )
+
+      await checkIfTxWillFail()
+
       const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
       const formattedGasCosts = formatAmount(gasCosts)
       if (isCurrent) {
@@ -124,7 +148,13 @@ const ApproveTxModal = ({
   }
 
   return (
-    <Modal description={description} handleClose={onClose} open={isOpen} title={title}>
+    <Modal
+      description={description}
+      handleClose={onClose}
+      open={isOpen}
+      title={title}
+      paperClassName={txWillFail ? classes.paperModalContainer : undefined}
+    >
       <Row align="center" className={classes.heading} grow>
         <Paragraph className={classes.headingText} noMargin weight="bolder">
           {title}
@@ -168,6 +198,14 @@ const ApproveTxModal = ({
             } in this wallet to fund this confirmation.`}
           </Paragraph>
         </Row>
+        {txWillFail && (
+          <Row align="center">
+            <Paragraph color="error" className={classes.executionWarningRow}>
+              <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+              This transaction will most likely fail. To save gas costs, collect rejections and cancel this transaction.
+            </Paragraph>
+          </Row>
+        )}
       </Block>
       <Row align="center" className={classes.buttonRow}>
         <Button minHeight={42} minWidth={140} onClick={onClose}>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts
index 41ce38851a..1d629a53da 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts
@@ -30,4 +30,14 @@ export const styles = createStyles({
     marginTop: sm,
     fontSize: md,
   },
+  paperModalContainer: {
+    height: '580px',
+  },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })

From 5baebb7759ed085bc9f99b41eb74697a4784d224 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 1 Dec 2020 13:30:07 -0300
Subject: [PATCH 03/84] Adds styles for reviewTx

---
 .../Balances/SendModal/screens/ReviewTx/style.ts           | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
index e6e4fbcffa..755c050e68 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
@@ -42,4 +42,11 @@ export const styles = createStyles({
     boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     marginLeft: '15px',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })

From 5a676b7732c4308d116fd45be8baf548bb3d8d92 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 1 Dec 2020 13:30:27 -0300
Subject: [PATCH 04/84] Adds useTxSuccessCheck hook

---
 src/logic/hooks/useTxSuccessCheck.tsx | 37 +++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/logic/hooks/useTxSuccessCheck.tsx

diff --git a/src/logic/hooks/useTxSuccessCheck.tsx b/src/logic/hooks/useTxSuccessCheck.tsx
new file mode 100644
index 0000000000..bf0a90eb24
--- /dev/null
+++ b/src/logic/hooks/useTxSuccessCheck.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import { getGasEstimationTxResponse } from 'src/logic/safe/transactions/gas'
+import { getAccountFrom, getWeb3 } from '../wallets/getWeb3'
+
+export const useTxSuccessCheck = ({ txTo, data }: { txTo?: string; data: string }): boolean => {
+  const web3 = getWeb3()
+  const [txWillFail, setTxWillFail] = useState(false)
+
+  useEffect(() => {
+    const checkIfTxWillFail = async () => {
+      try {
+        if (!txTo) {
+          setTxWillFail(true)
+          return
+        }
+        const from = await getAccountFrom(web3)
+        if (!from) {
+          setTxWillFail(true)
+          return
+        }
+        await getGasEstimationTxResponse({
+          to: txTo,
+          from,
+          data,
+        })
+        setTxWillFail(false)
+        return
+      } catch (error) {
+        setTxWillFail(true)
+      }
+    }
+
+    checkIfTxWillFail()
+  }, [txTo, data, web3])
+
+  return txWillFail
+}

From 6dd2639c715917149a416d1a6137902c9cbcf767 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 1 Dec 2020 14:29:52 -0300
Subject: [PATCH 05/84] Remove hook

---
 src/logic/hooks/useTxSuccessCheck.tsx | 37 ---------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 src/logic/hooks/useTxSuccessCheck.tsx

diff --git a/src/logic/hooks/useTxSuccessCheck.tsx b/src/logic/hooks/useTxSuccessCheck.tsx
deleted file mode 100644
index bf0a90eb24..0000000000
--- a/src/logic/hooks/useTxSuccessCheck.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react'
-import { getGasEstimationTxResponse } from 'src/logic/safe/transactions/gas'
-import { getAccountFrom, getWeb3 } from '../wallets/getWeb3'
-
-export const useTxSuccessCheck = ({ txTo, data }: { txTo?: string; data: string }): boolean => {
-  const web3 = getWeb3()
-  const [txWillFail, setTxWillFail] = useState(false)
-
-  useEffect(() => {
-    const checkIfTxWillFail = async () => {
-      try {
-        if (!txTo) {
-          setTxWillFail(true)
-          return
-        }
-        const from = await getAccountFrom(web3)
-        if (!from) {
-          setTxWillFail(true)
-          return
-        }
-        await getGasEstimationTxResponse({
-          to: txTo,
-          from,
-          data,
-        })
-        setTxWillFail(false)
-        return
-      } catch (error) {
-        setTxWillFail(true)
-      }
-    }
-
-    checkIfTxWillFail()
-  }, [txTo, data, web3])
-
-  return txWillFail
-}

From f614c3c0507f52f812580e26ed188fc298991275 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 1 Dec 2020 14:30:13 -0300
Subject: [PATCH 06/84] Adds checkIfTxWillFail function

---
 src/logic/safe/transactions/gas.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 1af94841d1..c0026330bb 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -229,3 +229,24 @@ export const estimateSafeTxGas = async (
     return 0
   }
 }
+
+export const checkIfTxWillFail = async ({ txTo, data }: { txTo?: string; data: string }): Promise<boolean> => {
+  const web3 = getWeb3()
+  try {
+    if (!txTo) {
+      return true
+    }
+    const from = await getAccountFrom(web3)
+    if (!from) {
+      return true
+    }
+    await getGasEstimationTxResponse({
+      to: txTo,
+      from,
+      data,
+    })
+    return false
+  } catch (error) {
+    return true
+  }
+}

From a73b76486c4d71c37a58358b9557158072e578a5 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 1 Dec 2020 14:30:35 -0300
Subject: [PATCH 07/84] Uses checkIfTxWillFailAsync on reviewTx modal

---
 .../SendModal/screens/ReviewTx/index.tsx      | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 17b0bcd783..ea73a69b03 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -19,7 +19,7 @@ import { getSpendingLimitContract } from 'src/logic/contracts/safeContracts'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { getHumanFriendlyToken } from 'src/logic/tokens/store/actions/fetchTokens'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { sameAddress, ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
@@ -35,6 +35,7 @@ import ArrowDown from '../assets/arrow-down.svg'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 const useStyles = makeStyles(styles)
 
@@ -61,11 +62,23 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const { address: safeAddress } = useSelector(safeSelector) || {}
   const tokens = useSelector(extendedSafeTokensSelector)
   const [gasCosts, setGasCosts] = useState('< 0.001')
-  const [data, setData] = useState('')
+  const [data, setData] = useState(EMPTY_DATA)
 
   const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
   const isSendingETH = sameAddress(txToken?.address, nativeCoin.address)
   const txRecipient = isSendingETH ? tx.recipientAddress : txToken?.address
+  const [txWillFail, setTxWillFail] = useState(false)
+
+  useEffect(() => {
+    const checkIfTxWillFailAsync = async () => {
+      if (data !== EMPTY_DATA) {
+        const txWillFailResult = await checkIfTxWillFail({ txTo: txRecipient, data })
+        setTxWillFail(txWillFailResult)
+      }
+    }
+
+    checkIfTxWillFailAsync()
+  }, [data, txRecipient])
 
   useEffect(() => {
     let isCurrent = true
@@ -210,6 +223,15 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
           <Paragraph data-testid="fee-meg-review-step">
             {`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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
+          {txWillFail && data !== EMPTY_DATA && (
+            <Row align="center">
+              <Paragraph color="error" className={classes.executionWarningRow}>
+                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+                This transaction will most likely fail. To save gas costs, collect rejections and cancel this
+                transaction.
+              </Paragraph>
+            </Row>
+          )}
         </Row>
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />

From 0452997289c972c416afd7e87a78905c978c35fc Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 1 Dec 2020 14:37:52 -0300
Subject: [PATCH 08/84] Improves approveTx modal

---
 .../ExpandedTx/ApproveTxModal/index.tsx       | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index eb009f453a..2ede699f79 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -18,14 +18,13 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts, getGasEstimationTxResponse } from 'src/logic/safe/transactions/gas'
+import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import processTransaction from 'src/logic/safe/store/actions/processTransaction'
 
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
-import { getAccountFrom, getWeb3 } from 'src/logic/wallets/getWeb3'
 import InfoIcon from 'src/assets/icons/info_red.svg'
 import Img from 'src/components/layout/Img'
 
@@ -88,25 +87,17 @@ const ApproveTxModal = ({
   const [txWillFail, setTxWillFail] = useState(false)
 
   useEffect(() => {
-    let isCurrent = true
-
-    const checkIfTxWillFail = async () => {
-      try {
-        const web3 = getWeb3()
-        const from = await getAccountFrom(web3)
-        if (from) {
-          await getGasEstimationTxResponse({
-            to: tx.recipient,
-            from,
-            data: tx.data as string,
-          })
-        }
-      } catch (error) {
-        console.warn('The transaction will fail, it was not possible to estimate the amount of gas to execute the tx')
-        setTxWillFail(true)
-      }
+    const checkIfTxWillFailAsync = async () => {
+      const txWillFailResult = await checkIfTxWillFail({ txTo: tx.recipient, data: tx.data as string })
+      setTxWillFail(txWillFailResult)
     }
 
+    checkIfTxWillFailAsync()
+  }, [tx.recipient, tx.data])
+
+  useEffect(() => {
+    let isCurrent = true
+
     const estimateGas = async () => {
       const estimatedGasCosts = await estimateTxGasCosts(
         safeAddress,
@@ -116,8 +107,6 @@ const ApproveTxModal = ({
         approveAndExecute ? userAddress : undefined,
       )
 
-      await checkIfTxWillFail()
-
       const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
       const formattedGasCosts = formatAmount(gasCosts)
       if (isCurrent) {

From 1661be8555ae909c6e6877ab037f34d9eb5b2713 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 2 Dec 2020 11:46:28 -0300
Subject: [PATCH 09/84] Add check for failing transaction in contract
 interaction modal

---
 .../ContractInteraction/Review/index.tsx      | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index e67d8ae00d..3cb5c0a853 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -14,7 +14,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIService'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
@@ -23,6 +23,7 @@ import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { generateFormFieldKey, getValueFromTxInputs } from '../utils'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 const useStyles = makeStyles(styles)
 
@@ -47,6 +48,17 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
   const dispatch = useDispatch()
   const { address: safeAddress } = useSelector(safeSelector) || {}
   const [gasCosts, setGasCosts] = useState('< 0.001')
+  const [txWillFail, setTxWillFail] = useState(false)
+
+  useEffect(() => {
+    const checkIfTxWillFailAsync = async () => {
+      const txWillFailResult = await checkIfTxWillFail({ txTo: tx.contractAddress, data: tx.data as string })
+      setTxWillFail(txWillFailResult)
+    }
+
+    checkIfTxWillFailAsync()
+  }, [tx.contractAddress, tx.data])
+
   useEffect(() => {
     let isCurrent = true
 
@@ -165,6 +177,15 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
+          {txWillFail && (
+            <Row align="center">
+              <Paragraph color="error" className={classes.executionWarningRow}>
+                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+                This transaction will most likely fail. To save gas costs, collect rejections and cancel this
+                transaction.
+              </Paragraph>
+            </Row>
+          )}
         </Row>
       </Block>
       <Hairline />

From b3d92e6faf02dfe735579d26bb50e6e4c00213ee Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 2 Dec 2020 12:25:34 -0300
Subject: [PATCH 10/84] Add check for reviewCollectible

---
 .../screens/ReviewCollectible/index.tsx       | 24 ++++++++++++++++++-
 .../screens/ReviewCollectible/style.ts        |  7 ++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index c1d5cd18e1..683417a6be 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -19,7 +19,7 @@ import { nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
@@ -31,6 +31,7 @@ import ArrowDown from '../assets/arrow-down.svg'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 const { nativeCoin } = getNetworkInfo()
 
@@ -60,6 +61,18 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
     ({ assetAddress, tokenId }) => assetAddress === tx.assetAddress && tokenId === tx.nftTokenId,
   )
   const [data, setData] = useState('')
+  const [txWillFail, setTxWillFail] = useState(false)
+
+  useEffect(() => {
+    const checkIfTxWillFailAsync = async () => {
+      if (data) {
+        const txWillFailResult = await checkIfTxWillFail({ txTo: tx.recipientAddress, data })
+        setTxWillFail(txWillFailResult)
+      }
+    }
+
+    checkIfTxWillFailAsync()
+  }, [data, tx.recipientAddress])
 
   useEffect(() => {
     let isCurrent = true
@@ -167,6 +180,15 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
+          {txWillFail && (
+            <Row align="center">
+              <Paragraph color="error" className={classes.executionWarningRow}>
+                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+                This transaction will most likely fail. To save gas costs, collect rejections and cancel this
+                transaction.
+              </Paragraph>
+            </Row>
+          )}
         </Row>
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
index e6e4fbcffa..755c050e68 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
@@ -42,4 +42,11 @@ export const styles = createStyles({
     boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     marginLeft: '15px',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })

From 5d974753141a8bdd16f920a077aaad16a95136e4 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 2 Dec 2020 12:26:03 -0300
Subject: [PATCH 11/84] Fix check on sendFunds reviewTx

---
 .../Balances/SendModal/screens/ReviewTx/index.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index ea73a69b03..c10afb07ae 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -62,7 +62,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const { address: safeAddress } = useSelector(safeSelector) || {}
   const tokens = useSelector(extendedSafeTokensSelector)
   const [gasCosts, setGasCosts] = useState('< 0.001')
-  const [data, setData] = useState(EMPTY_DATA)
+  const [data, setData] = useState('')
 
   const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
   const isSendingETH = sameAddress(txToken?.address, nativeCoin.address)
@@ -71,7 +71,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
 
   useEffect(() => {
     const checkIfTxWillFailAsync = async () => {
-      if (data !== EMPTY_DATA) {
+      if (data) {
         const txWillFailResult = await checkIfTxWillFail({ txTo: txRecipient, data })
         setTxWillFail(txWillFailResult)
       }
@@ -223,7 +223,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
           <Paragraph data-testid="fee-meg-review-step">
             {`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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txWillFail && data !== EMPTY_DATA && (
+          {txWillFail && (
             <Row align="center">
               <Paragraph color="error" className={classes.executionWarningRow}>
                 <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />

From 89253abb30b59864839702cb964d0619416c5434 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 2 Dec 2020 15:09:20 -0300
Subject: [PATCH 12/84] Adds styling for contractInteraction modal

---
 .../SendModal/screens/ContractInteraction/style.ts         | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
index 9b18ef70e5..6a37490b86 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
@@ -71,4 +71,11 @@ export const styles = createStyles({
   fullWidth: {
     justifyContent: 'space-between',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })

From 117e94aa1c4255f0b9a4e559c5c6de7fc1c1d972 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 2 Dec 2020 15:53:34 -0300
Subject: [PATCH 13/84] Fix gas calculation for native token transfers

---
 src/logic/safe/transactions/gas.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index c0026330bb..06f2926861 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -147,6 +147,11 @@ export const getGasEstimationTxResponse = async (txConfig: {
 
     if (!sameString(result, EMPTY_DATA)) {
       return new BigNumber(result.substring(138), 16).toNumber()
+    } else {
+      // This is a transfer of native coin (eth, xDai, etc), in that case the empty result is valid
+      if (sameString(txConfig.data, EMPTY_DATA)) {
+        return new BigNumber(21000).toNumber()
+      }
     }
   } catch (error) {
     // So we try to extract the estimation result within the error in case is possible
@@ -232,6 +237,7 @@ export const estimateSafeTxGas = async (
 
 export const checkIfTxWillFail = async ({ txTo, data }: { txTo?: string; data: string }): Promise<boolean> => {
   const web3 = getWeb3()
+  console.log('data', data)
   try {
     if (!txTo) {
       return true

From 73cc2296cf1dd4e6e93d6e935aeadf534f776f4a Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 2 Dec 2020 15:56:08 -0300
Subject: [PATCH 14/84] Remove logs

---
 src/logic/safe/transactions/gas.ts                               | 1 -
 .../Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 06f2926861..1ac3742667 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -237,7 +237,6 @@ export const estimateSafeTxGas = async (
 
 export const checkIfTxWillFail = async ({ txTo, data }: { txTo?: string; data: string }): Promise<boolean> => {
   const web3 = getWeb3()
-  console.log('data', data)
   try {
     if (!txTo) {
       return true
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 2ede699f79..892301b2f7 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -106,7 +106,6 @@ const ApproveTxModal = ({
         tx,
         approveAndExecute ? userAddress : undefined,
       )
-
       const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
       const formattedGasCosts = formatAmount(gasCosts)
       if (isCurrent) {

From 592230212f0d4d8537dae609ae63ef7a8d51d26a Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 4 Dec 2020 12:48:50 -0300
Subject: [PATCH 15/84] Rename estimateDataGasCosts to
 parseRequiredTxGasResponse Adds getPreValidatedSignatures Refactor
 estimateTxGasCosts Refactor checkIfExecTxWillFail

---
 src/logic/safe/transactions/gas.ts | 57 +++++++++++++++++-------------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 1ac3742667..70f402d41c 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -1,19 +1,15 @@
-import GnosisSafeSol from '@gnosis.pm/safe-contracts/build/contracts/GnosisSafe.json'
 import { BigNumber } from 'bignumber.js'
-import { AbiItem } from 'web3-utils'
-
 import { CALL } from '.'
-
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA, calculateGasOf, calculateGasPrice } from 'src/logic/wallets/ethTransactions'
 import { getAccountFrom, getWeb3 } from 'src/logic/wallets/getWeb3'
-import { GnosisSafe } from 'src/types/contracts/GnosisSafe.d'
 import { sameString } from 'src/utils/strings'
 
-const estimateDataGasCosts = (data: string): number => {
+// Receives the response data of the safe method requiredTxGas() and parses it to get the gas amount
+const parseRequiredTxGasResponse = (data: string): number => {
   const reducer = (accumulator, currentValue) => {
     if (currentValue === EMPTY_DATA) {
       return accumulator + 0
@@ -29,6 +25,14 @@ const estimateDataGasCosts = (data: string): number => {
   return data.match(/.{2}/g)?.reduce(reducer, 0)
 }
 
+// https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
+export const getPreValidatedSignatures = (from: string): string => {
+  return `0x000000000000000000000000${from.replace(
+    EMPTY_DATA,
+    '',
+  )}000000000000000000000000000000000000000000000000000000000000000001`
+}
+
 export const estimateTxGasCosts = async (
   safeAddress: string,
   to: string,
@@ -44,20 +48,17 @@ export const estimateTxGasCosts = async (
       return 0
     }
 
-    const safeInstance = (new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown) as GnosisSafe
+    const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
     const nonce = await safeInstance.methods.nonce().call()
     const threshold = await safeInstance.methods.getThreshold().call()
     const isExecution = tx?.confirmations.size === Number(threshold) || !!preApprovingOwner || threshold === '1'
 
     let txData
     if (isExecution) {
-      // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
       const signatures = tx?.confirmations
         ? generateSignaturesFromTxConfirmations(tx.confirmations, preApprovingOwner)
-        : `0x000000000000000000000000${from.replace(
-            EMPTY_DATA,
-            '',
-          )}000000000000000000000000000000000000000000000000000000000000000001`
+        : getPreValidatedSignatures(from)
+
       txData = await safeInstance.methods
         .execTransaction(
           to,
@@ -196,7 +197,6 @@ const calculateMinimumGasForTransaction = async (
 }
 
 export const estimateSafeTxGas = async (
-  safe: GnosisSafe | undefined,
   safeAddress: string,
   data: string,
   to: string,
@@ -204,10 +204,7 @@ export const estimateSafeTxGas = async (
   operation: number,
 ): Promise<number> => {
   try {
-    let safeInstance = safe
-    if (!safeInstance) {
-      safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-    }
+    const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
 
     const estimateData = safeInstance.methods.requiredTxGas(to, valueInWei, data, operation).encodeABI()
     const gasEstimationResponse = await getGasEstimationTxResponse({
@@ -219,7 +216,7 @@ export const estimateSafeTxGas = async (
     const txGasEstimation = gasEstimationResponse + 10000
 
     // 21000 - additional gas costs (e.g. base tx costs, transfer costs)
-    const dataGasEstimation = estimateDataGasCosts(estimateData) + 21000
+    const dataGasEstimation = parseRequiredTxGasResponse(estimateData) + 21000
     const additionalGasBatches = [0, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]
 
     return await calculateMinimumGasForTransaction(
@@ -235,7 +232,19 @@ export const estimateSafeTxGas = async (
   }
 }
 
-export const checkIfTxWillFail = async ({ txTo, data }: { txTo?: string; data: string }): Promise<boolean> => {
+export const checkIfExecTxWillFail = async ({
+  safeAddress,
+  txTo,
+  data,
+  txAmount = '0',
+  operation = 0,
+}: {
+  safeAddress: string
+  txTo?: string
+  data: string
+  txAmount?: string
+  operation?: number
+}): Promise<boolean> => {
   const web3 = getWeb3()
   try {
     if (!txTo) {
@@ -245,12 +254,10 @@ export const checkIfTxWillFail = async ({ txTo, data }: { txTo?: string; data: s
     if (!from) {
       return true
     }
-    await getGasEstimationTxResponse({
-      to: txTo,
-      from,
-      data,
-    })
-    return false
+
+    const estimateGas = await estimateSafeTxGas(safeAddress, data, txTo, txAmount, operation)
+
+    return estimateGas > 0
   } catch (error) {
     return true
   }

From 977d026e6202298d639c75418213c760eda4baef Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 4 Dec 2020 12:50:12 -0300
Subject: [PATCH 16/84] Refactor checkIfExecTxWill usage

---
 .../Apps/components/ConfirmTransactionModal.tsx        |  1 -
 .../screens/ContractInteraction/Review/index.tsx       | 10 +++++++---
 .../SendModal/screens/ReviewCollectible/index.tsx      | 10 +++++++---
 .../TxsTable/ExpandedTx/ApproveTxModal/index.tsx       |  6 +++---
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
index 949e5bb954..6db4310534 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
@@ -101,7 +101,6 @@ const ConfirmTransactionModal = ({
       try {
         setEstimatingGas(true)
         const safeTxGas = await estimateSafeTxGas(
-          undefined,
           safeAddress,
           encodeMultiSendCall(txs),
           MULTI_SEND_ADDRESS,
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 3cb5c0a853..9a7bb46242 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -14,7 +14,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIService'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
@@ -52,12 +52,16 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
 
   useEffect(() => {
     const checkIfTxWillFailAsync = async () => {
-      const txWillFailResult = await checkIfTxWillFail({ txTo: tx.contractAddress, data: tx.data as string })
+      const txWillFailResult = await checkIfExecTxWillFail({
+        safeAddress: safeAddress as string,
+        txTo: tx.contractAddress,
+        data: tx.data as string,
+      })
       setTxWillFail(txWillFailResult)
     }
 
     checkIfTxWillFailAsync()
-  }, [tx.contractAddress, tx.data])
+  }, [safeAddress, tx.contractAddress, tx.data])
 
   useEffect(() => {
     let isCurrent = true
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 683417a6be..314c2b493d 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -19,7 +19,7 @@ import { nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
@@ -66,13 +66,17 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   useEffect(() => {
     const checkIfTxWillFailAsync = async () => {
       if (data) {
-        const txWillFailResult = await checkIfTxWillFail({ txTo: tx.recipientAddress, data })
+        const txWillFailResult = await checkIfExecTxWillFail({
+          safeAddress: safeAddress as string,
+          txTo: tx.recipientAddress,
+          data,
+        })
         setTxWillFail(txWillFailResult)
       }
     }
 
     checkIfTxWillFailAsync()
-  }, [data, tx.recipientAddress])
+  }, [data, safeAddress, tx.recipientAddress])
 
   useEffect(() => {
     let isCurrent = true
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 892301b2f7..ccb2fbae7e 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -18,7 +18,7 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import processTransaction from 'src/logic/safe/store/actions/processTransaction'
@@ -88,12 +88,12 @@ const ApproveTxModal = ({
 
   useEffect(() => {
     const checkIfTxWillFailAsync = async () => {
-      const txWillFailResult = await checkIfTxWillFail({ txTo: tx.recipient, data: tx.data as string })
+      const txWillFailResult = await checkIfExecTxWillFail({ safeAddress, txTo: tx.recipient, data: tx.data as string })
       setTxWillFail(txWillFailResult)
     }
 
     checkIfTxWillFailAsync()
-  }, [tx.recipient, tx.data])
+  }, [tx.recipient, tx.data, safeAddress])
 
   useEffect(() => {
     let isCurrent = true

From 1652773d56d43b14c29fd43a82227f341e18d462 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 4 Dec 2020 12:54:47 -0300
Subject: [PATCH 17/84] Refactor checkIfTxWillFailAsync in ReviewTx

---
 .../SendModal/screens/ReviewTx/index.tsx      | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index c10afb07ae..88cb742fa3 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -19,7 +19,7 @@ import { getSpendingLimitContract } from 'src/logic/contracts/safeContracts'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { getHumanFriendlyToken } from 'src/logic/tokens/store/actions/fetchTokens'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { sameAddress, ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
@@ -65,20 +65,33 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const [data, setData] = useState('')
 
   const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
-  const isSendingETH = sameAddress(txToken?.address, nativeCoin.address)
-  const txRecipient = isSendingETH ? tx.recipientAddress : txToken?.address
+  const isSendingNativeToken = sameAddress(txToken?.address, nativeCoin.address)
+  const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address
   const [txWillFail, setTxWillFail] = useState(false)
 
   useEffect(() => {
     const checkIfTxWillFailAsync = async () => {
-      if (data) {
-        const txWillFailResult = await checkIfTxWillFail({ txTo: txRecipient, data })
+      if (!data) {
+        return
+      }
+
+      if (txToken) {
+        let txAmount = '0'
+        if (isSendingNativeToken) {
+          txAmount = toTokenUnit(tx.amount, txToken.decimals)
+        }
+        const txWillFailResult = await checkIfExecTxWillFail({
+          safeAddress: safeAddress as string,
+          txTo: txRecipient,
+          data,
+          txAmount,
+        })
         setTxWillFail(txWillFailResult)
       }
     }
 
     checkIfTxWillFailAsync()
-  }, [data, txRecipient])
+  }, [data, isSendingNativeToken, safeAddress, tx.amount, txRecipient, txToken])
 
   useEffect(() => {
     let isCurrent = true
@@ -90,7 +103,9 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
 
       let txData = EMPTY_DATA
 
-      if (!isSendingETH) {
+      // @todo (agustin) this condition should be inverted, if we dont have data, the txData should be a transfer
+      // if we have data we cannot assume that it will be a transfer, this should be refactored
+      if (!isSendingNativeToken) {
         const StandardToken = await getHumanFriendlyToken()
         const tokenInstance = await StandardToken.at(txToken.address as string)
         const txAmount = toTokenUnit(tx.amount, txToken.decimals)
@@ -113,14 +128,14 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
     return () => {
       isCurrent = false
     }
-  }, [isSendingETH, safeAddress, tx.amount, tx.recipientAddress, txRecipient, txToken])
+  }, [isSendingNativeToken, safeAddress, tx.amount, tx.recipientAddress, txRecipient, txToken])
 
   const submitTx = async () => {
     const isSpendingLimit = sameString(tx.txType, 'spendingLimit')
     // txAmount should be 0 if we send tokens
     // the real value is encoded in txData and will be used by the contract
     // if txAmount > 0 it would send ETH from the Safe
-    const txAmount = isSendingETH ? toTokenUnit(tx.amount, nativeCoin.decimals) : '0'
+    const txAmount = isSendingNativeToken ? toTokenUnit(tx.amount, nativeCoin.decimals) : '0'
 
     if (!safeAddress) {
       console.error('There was an error trying to submit the transaction, the safeAddress was not found')

From 9a689f57127358fbe94880a728b6c1757bc75959 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 4 Dec 2020 12:55:34 -0300
Subject: [PATCH 18/84] Use getPreValidatedSignatures in createTransaction()

---
 src/logic/safe/store/actions/createTransaction.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index 23570126cd..dcf883367a 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -14,7 +14,7 @@ import {
   saveTxToHistory,
   tryOffchainSigning,
 } from 'src/logic/safe/transactions'
-import { estimateSafeTxGas } from 'src/logic/safe/transactions/gas'
+import { estimateSafeTxGas, getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
@@ -89,14 +89,9 @@ const createTransaction = (
   const nonce = await getNewTxNonce(txNonce?.toString(), lastTx, safeInstance)
   const isExecution = await shouldExecuteTransaction(safeInstance, nonce, lastTx)
   const safeVersion = await getCurrentSafeVersion(safeInstance)
-  const safeTxGas =
-    safeTxGasArg || (await estimateSafeTxGas(safeInstance, safeAddress, txData, to, valueInWei, operation))
-
-  // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-  const sigs = `0x000000000000000000000000${from.replace(
-    '0x',
-    '',
-  )}000000000000000000000000000000000000000000000000000000000000000001`
+  const safeTxGas = safeTxGasArg || (await estimateSafeTxGas(safeAddress, txData, to, valueInWei, operation))
+
+  const sigs = getPreValidatedSignatures(from)
 
   const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, origin)
   const beforeExecutionKey = dispatch(enqueueSnackbar(notificationsQueue.beforeExecution))

From f74e51683c589afe5e3ab7c15340a7a5ae1a8392 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 4 Dec 2020 17:43:10 -0300
Subject: [PATCH 19/84] Refactor estimateTxGasCosts Rename estimateSafeTxGas to
 estimateExecTransactionGas

---
 .../safe/store/actions/createTransaction.ts   |  4 +--
 src/logic/safe/transactions/gas.ts            | 34 +++++--------------
 .../components/ConfirmTransactionModal.tsx    |  4 +--
 3 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index dcf883367a..79023bf3ed 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -14,7 +14,7 @@ import {
   saveTxToHistory,
   tryOffchainSigning,
 } from 'src/logic/safe/transactions'
-import { estimateSafeTxGas, getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
+import { estimateExecTransactionGas, getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
@@ -89,7 +89,7 @@ const createTransaction = (
   const nonce = await getNewTxNonce(txNonce?.toString(), lastTx, safeInstance)
   const isExecution = await shouldExecuteTransaction(safeInstance, nonce, lastTx)
   const safeVersion = await getCurrentSafeVersion(safeInstance)
-  const safeTxGas = safeTxGasArg || (await estimateSafeTxGas(safeAddress, txData, to, valueInWei, operation))
+  const safeTxGas = safeTxGasArg || (await estimateExecTransactionGas(safeAddress, txData, to, valueInWei, operation))
 
   const sigs = getPreValidatedSignatures(from)
 
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 70f402d41c..77878ebbdf 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -1,7 +1,6 @@
 import { BigNumber } from 'bignumber.js'
 import { CALL } from '.'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA, calculateGasOf, calculateGasPrice } from 'src/logic/wallets/ethTransactions'
@@ -54,25 +53,9 @@ export const estimateTxGasCosts = async (
     const isExecution = tx?.confirmations.size === Number(threshold) || !!preApprovingOwner || threshold === '1'
 
     let txData
+    let gas
     if (isExecution) {
-      const signatures = tx?.confirmations
-        ? generateSignaturesFromTxConfirmations(tx.confirmations, preApprovingOwner)
-        : getPreValidatedSignatures(from)
-
-      txData = await safeInstance.methods
-        .execTransaction(
-          to,
-          tx?.value || 0,
-          data,
-          CALL,
-          tx?.safeTxGas || 0,
-          0,
-          0,
-          ZERO_ADDRESS,
-          ZERO_ADDRESS,
-          signatures,
-        )
-        .encodeABI()
+      gas = await estimateExecTransactionGas(safeAddress, data, to, tx?.value || '0', CALL)
     } else {
       const txHash = await safeInstance.methods
         .getTransactionHash(to, tx?.value || 0, data, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
@@ -80,15 +63,14 @@ export const estimateTxGasCosts = async (
           from,
         })
       txData = await safeInstance.methods.approveHash(txHash).encodeABI()
+      gas = await calculateGasOf(txData, from, safeAddress)
     }
 
-    const gas = await calculateGasOf(txData, from, safeAddress)
     const gasPrice = await calculateGasPrice()
 
     return gas * parseInt(gasPrice, 10)
   } catch (err) {
-    console.error('Error while estimating transaction execution gas costs:')
-    console.error(err)
+    console.error('Error while estimating transaction execution gas costs:', err.message)
 
     return 10000
   }
@@ -196,7 +178,7 @@ const calculateMinimumGasForTransaction = async (
   return 0
 }
 
-export const estimateSafeTxGas = async (
+export const estimateExecTransactionGas = async (
   safeAddress: string,
   data: string,
   to: string,
@@ -227,7 +209,7 @@ export const estimateSafeTxGas = async (
       dataGasEstimation,
     )
   } catch (error) {
-    console.error('Error calculating tx gas estimation', error)
+    console.info('Error calculating tx gas estimation', error.message)
     return 0
   }
 }
@@ -255,9 +237,9 @@ export const checkIfExecTxWillFail = async ({
       return true
     }
 
-    const estimateGas = await estimateSafeTxGas(safeAddress, data, txTo, txAmount, operation)
+    const estimateGas = await estimateExecTransactionGas(safeAddress, data, txTo, txAmount, operation)
 
-    return estimateGas > 0
+    return estimateGas <= 0
   } catch (error) {
     return true
   }
diff --git a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
index 6db4310534..4f30deb138 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
@@ -20,7 +20,7 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts'
 import { DELEGATE_CALL, TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { encodeMultiSendCall } from 'src/logic/safe/transactions/multisend'
-import { estimateSafeTxGas } from 'src/logic/safe/transactions/gas'
+import { estimateExecTransactionGas } from 'src/logic/safe/transactions/gas'
 
 import GasEstimationInfo from './GasEstimationInfo'
 import { getNetworkInfo } from 'src/config'
@@ -100,7 +100,7 @@ const ConfirmTransactionModal = ({
     const estimateGas = async () => {
       try {
         setEstimatingGas(true)
-        const safeTxGas = await estimateSafeTxGas(
+        const safeTxGas = await estimateExecTransactionGas(
           safeAddress,
           encodeMultiSendCall(txs),
           MULTI_SEND_ADDRESS,

From a7011bf0549657478af24e2cea83d7771dcf2e26 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 4 Dec 2020 17:43:38 -0300
Subject: [PATCH 20/84] Refactor ReviewTx: extract useEffects to hooks

---
 .../SendModal/screens/ReviewTx/index.tsx      | 133 +++++++++++-------
 1 file changed, 83 insertions(+), 50 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 88cb742fa3..549f065e41 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -36,7 +36,8 @@ import ArrowDown from '../assets/arrow-down.svg'
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import InfoIcon from 'src/assets/icons/info_red.svg'
-
+import { TokenProps } from 'src/logic/tokens/store/model/token'
+import { RecordOf } from 'immutable'
 const useStyles = makeStyles(styles)
 
 const { nativeCoin } = getNetworkInfo()
@@ -56,70 +57,62 @@ type ReviewTxProps = {
   tx: ReviewTxProp
 }
 
-const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => {
-  const classes = useStyles()
-  const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
-  const tokens = useSelector(extendedSafeTokensSelector)
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-  const [data, setData] = useState('')
-
-  const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
-  const isSendingNativeToken = sameAddress(txToken?.address, nativeCoin.address)
-  const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address
-  const [txWillFail, setTxWillFail] = useState(false)
+const useTxAmount = (tx: ReviewTxProp, isSendingNativeToken: boolean, txToken?: RecordOf<TokenProps>): string => {
+  const [txAmount, setTxAmount] = useState('0')
 
+  // txAmount should be 0 if we send tokens
+  // the real value is encoded in txData and will be used by the contract
+  // if txAmount > 0 it would send ETH from the Safe (and the data will be empty)
   useEffect(() => {
-    const checkIfTxWillFailAsync = async () => {
-      if (!data) {
-        return
-      }
+    const txAmount = isSendingNativeToken ? toTokenUnit(tx.amount, nativeCoin.decimals) : '0'
+    setTxAmount(txAmount)
+  }, [tx.amount, txToken, isSendingNativeToken])
 
-      if (txToken) {
-        let txAmount = '0'
-        if (isSendingNativeToken) {
-          txAmount = toTokenUnit(tx.amount, txToken.decimals)
-        }
-        const txWillFailResult = await checkIfExecTxWillFail({
-          safeAddress: safeAddress as string,
-          txTo: txRecipient,
-          data,
-          txAmount,
-        })
-        setTxWillFail(txWillFailResult)
-      }
-    }
+  return txAmount
+}
 
-    checkIfTxWillFailAsync()
-  }, [data, isSendingNativeToken, safeAddress, tx.amount, txRecipient, txToken])
+const useTxData = (
+  isSendingNativeToken: boolean,
+  txAmount: string,
+  recipientAddress: string,
+  txToken?: RecordOf<TokenProps>,
+): string => {
+  const [data, setData] = useState('')
 
   useEffect(() => {
-    let isCurrent = true
-
-    const estimateGas = async () => {
+    const updateTxDataAsync = async () => {
       if (!txToken) {
         return
       }
 
       let txData = EMPTY_DATA
-
-      // @todo (agustin) this condition should be inverted, if we dont have data, the txData should be a transfer
-      // if we have data we cannot assume that it will be a transfer, this should be refactored
       if (!isSendingNativeToken) {
         const StandardToken = await getHumanFriendlyToken()
         const tokenInstance = await StandardToken.at(txToken.address as string)
-        const txAmount = toTokenUnit(tx.amount, txToken.decimals)
-
-        txData = tokenInstance.contract.methods.transfer(tx.recipientAddress, txAmount).encodeABI()
+        txData = tokenInstance.contract.methods.transfer(recipientAddress, txAmount).encodeABI()
       }
+      setData(txData)
+    }
+
+    updateTxDataAsync()
+  }, [isSendingNativeToken, recipientAddress, txAmount, txToken])
+
+  return data
+}
 
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, txRecipient as string, txData)
+const useEstimateGas = (txData: string, safeAddress: string, txRecipient: string): string => {
+  const [gasCosts, setGasCosts] = useState('< 0.001')
+
+  useEffect(() => {
+    let isCurrent = true
+
+    const estimateGas = async () => {
+      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, txRecipient, txData)
       const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
       const formattedGasCosts = formatAmount(gasCosts)
 
       if (isCurrent) {
         setGasCosts(formattedGasCosts)
-        setData(txData)
       }
     }
 
@@ -128,14 +121,53 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
     return () => {
       isCurrent = false
     }
-  }, [isSendingNativeToken, safeAddress, tx.amount, tx.recipientAddress, txRecipient, txToken])
+  }, [txData, safeAddress, txRecipient])
+
+  return gasCosts
+}
+
+const useCheckIfTxWillFail = (data: string, safeAddress: string, txAmount: string, txRecipient: string) => {
+  const [txWillFail, setTxWillFail] = useState(false)
+
+  useEffect(() => {
+    // The data is loading
+    if (!data.length) {
+      return
+    }
+    const checkIfTxWillFailAsync = async () => {
+      const txWillFailResult = await checkIfExecTxWillFail({
+        safeAddress: safeAddress as string,
+        txTo: txRecipient,
+        data,
+        txAmount: '1000',
+      })
+      console.log('will fail? ', txWillFailResult)
+      setTxWillFail(txWillFailResult)
+    }
+
+    checkIfTxWillFailAsync()
+  }, [data, safeAddress, txAmount, txRecipient])
+
+  return txWillFail
+}
+
+const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  // @todo (agustin) refactor with another selector, safeAddress can't be undefined here
+  const { address: safeAddress } = useSelector(safeSelector) || {}
+  const tokens = useSelector(extendedSafeTokensSelector)
+  const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
+  const isSendingNativeToken = sameAddress(txToken?.address, nativeCoin.address)
+  const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address
+
+  const txAmount = useTxAmount(tx, isSendingNativeToken, txToken)
+  const data = useTxData(isSendingNativeToken, txAmount, tx.recipientAddress, txToken)
+  const gasCosts = useEstimateGas(data, safeAddress as string, txRecipient as string)
+  const txWillFail = useCheckIfTxWillFail(data, safeAddress as string, txAmount, txRecipient as string)
 
   const submitTx = async () => {
     const isSpendingLimit = sameString(tx.txType, 'spendingLimit')
-    // txAmount should be 0 if we send tokens
-    // the real value is encoded in txData and will be used by the contract
-    // if txAmount > 0 it would send ETH from the Safe
-    const txAmount = isSendingNativeToken ? toTokenUnit(tx.amount, nativeCoin.decimals) : '0'
 
     if (!safeAddress) {
       console.error('There was an error trying to submit the transaction, the safeAddress was not found')
@@ -143,11 +175,12 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
     }
 
     if (isSpendingLimit && txToken && tx.tokenSpendingLimit) {
+      const spendingLimitTokenAddress = isSendingNativeToken ? ZERO_ADDRESS : txToken.address
       const spendingLimit = getSpendingLimitContract()
       spendingLimit.methods
         .executeAllowanceTransfer(
           safeAddress,
-          sameAddress(txToken.address, nativeCoin.address) ? ZERO_ADDRESS : txToken.address,
+          spendingLimitTokenAddress,
           tx.recipientAddress,
           toTokenUnit(tx.amount, txToken.decimals),
           ZERO_ADDRESS,

From 60baeaead38161cd95db4a194847d4b7f7047c24 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 9 Dec 2020 09:14:01 -0300
Subject: [PATCH 21/84] Remove unnecessary gas transfer amount

---
 src/logic/safe/transactions/gas.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 77878ebbdf..44b1a5216d 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -130,11 +130,6 @@ export const getGasEstimationTxResponse = async (txConfig: {
 
     if (!sameString(result, EMPTY_DATA)) {
       return new BigNumber(result.substring(138), 16).toNumber()
-    } else {
-      // This is a transfer of native coin (eth, xDai, etc), in that case the empty result is valid
-      if (sameString(txConfig.data, EMPTY_DATA)) {
-        return new BigNumber(21000).toNumber()
-      }
     }
   } catch (error) {
     // So we try to extract the estimation result within the error in case is possible

From 4b0db6b6116bcc4ed744bee78fe505abb03a6d0c Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 9 Dec 2020 09:34:36 -0300
Subject: [PATCH 22/84] Refactor estimateTxGasCosts: extract
 checkIfTxIsExecution and estimateTxGas

---
 src/logic/safe/transactions/gas.ts | 64 ++++++++++++++++++------------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 44b1a5216d..c372d18e1f 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -32,40 +32,54 @@ export const getPreValidatedSignatures = (from: string): string => {
   )}000000000000000000000000000000000000000000000000000000000000000001`
 }
 
-export const estimateTxGasCosts = async (
+// @todo (agustin) check if this can be replaced by shouldExecuteTransaction() and refactor
+const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, transaction?: Transaction): boolean =>
+  transaction?.confirmations.size === threshold || !!preApprovingOwner || threshold === 1
+
+const estimateTxGas = async (
   safeAddress: string,
   to: string,
   data: string,
   tx?: Transaction,
   preApprovingOwner?: string,
 ): Promise<number> => {
-  try {
-    const web3 = getWeb3()
-    const from = await getAccountFrom(web3)
+  const web3 = getWeb3()
+  const from = await getAccountFrom(web3)
 
-    if (!from) {
-      return 0
-    }
+  if (!from) {
+    return 0
+  }
 
-    const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-    const nonce = await safeInstance.methods.nonce().call()
-    const threshold = await safeInstance.methods.getThreshold().call()
-    const isExecution = tx?.confirmations.size === Number(threshold) || !!preApprovingOwner || threshold === '1'
-
-    let txData
-    let gas
-    if (isExecution) {
-      gas = await estimateExecTransactionGas(safeAddress, data, to, tx?.value || '0', CALL)
-    } else {
-      const txHash = await safeInstance.methods
-        .getTransactionHash(to, tx?.value || 0, data, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
-        .call({
-          from,
-        })
-      txData = await safeInstance.methods.approveHash(txHash).encodeABI()
-      gas = await calculateGasOf(txData, from, safeAddress)
-    }
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+  const threshold = await safeInstance.methods.getThreshold().call()
+  const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, tx)
+
+  if (isExecution) {
+    // Gas of executing a transaction within the safe (threshold reached and transaction executed)
+    return await estimateExecTransactionGas(safeAddress, data, to, tx?.value || '0', CALL)
+  }
+
+  const nonce = await safeInstance.methods.nonce().call()
+  const txHash = await safeInstance.methods
+    .getTransactionHash(to, tx?.value || 0, data, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
+    .call({
+      from,
+    })
+  // Gas of approving the transaction (threshold not reached or user did not executed the transaction)
+  const txData = await safeInstance.methods.approveHash(txHash).encodeABI()
+  return await calculateGasOf(txData, from, safeAddress)
+}
 
+// Returns the estimation of how much the user should pay for the given transaction (gas * price)
+export const estimateTxGasCosts = async (
+  safeAddress: string,
+  to: string,
+  data: string,
+  tx?: Transaction,
+  preApprovingOwner?: string,
+): Promise<number> => {
+  try {
+    const gas = await estimateTxGas(safeAddress, to, data, tx, preApprovingOwner)
     const gasPrice = await calculateGasPrice()
 
     return gas * parseInt(gasPrice, 10)

From 72680d4a35e3de026bebde3ffbcaf43115eda831 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 9 Dec 2020 09:42:21 -0300
Subject: [PATCH 23/84] Fix tx amount Remove console log

---
 .../components/Balances/SendModal/screens/ReviewTx/index.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 549f065e41..6cf360161c 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -139,9 +139,8 @@ const useCheckIfTxWillFail = (data: string, safeAddress: string, txAmount: strin
         safeAddress: safeAddress as string,
         txTo: txRecipient,
         data,
-        txAmount: '1000',
+        txAmount,
       })
-      console.log('will fail? ', txWillFailResult)
       setTxWillFail(txWillFailResult)
     }
 

From e6b361c324916bbca66db02b984a9bf226163c0b Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 9 Dec 2020 13:31:05 -0300
Subject: [PATCH 24/84] Moves useCheckIfTransactionWillFail to logic/hooks
 folder

---
 .../hooks/useCheckIfTransactionWillFail.tsx   | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/logic/hooks/useCheckIfTransactionWillFail.tsx

diff --git a/src/logic/hooks/useCheckIfTransactionWillFail.tsx b/src/logic/hooks/useCheckIfTransactionWillFail.tsx
new file mode 100644
index 0000000000..53c6c30200
--- /dev/null
+++ b/src/logic/hooks/useCheckIfTransactionWillFail.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { checkIfExecTxWillFail } from 'src/logic/safe/transactions/gas'
+
+type TransactionWillFailProps = {
+  data: string
+  safeAddress: string
+  txAmount?: string
+  txRecipient: string
+}
+
+export const useCheckIfTransactionWillFail = ({
+  data,
+  safeAddress,
+  txAmount,
+  txRecipient,
+}: TransactionWillFailProps): boolean => {
+  const [txWillFail, setTxWillFail] = useState(false)
+
+  useEffect(() => {
+    // The data is loading
+    if (!data.length) {
+      return
+    }
+    const checkIfTxWillFailAsync = async () => {
+      const txWillFailResult = await checkIfExecTxWillFail({
+        safeAddress: safeAddress as string,
+        txTo: txRecipient,
+        data,
+        txAmount,
+      })
+      setTxWillFail(txWillFailResult)
+    }
+
+    checkIfTxWillFailAsync()
+  }, [data, safeAddress, txAmount, txRecipient])
+
+  return txWillFail
+}

From 402ed43a7f1211837de8a395d57def1f369d6a39 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 9 Dec 2020 13:39:19 -0300
Subject: [PATCH 25/84] Replaces useEffect usage with
 useCheckIfTransactionWillFail hook Also fix how some modals fetch the
 safeAddress

---
 .../hooks/useCheckIfTransactionWillFail.tsx   |  4 +-
 .../ContractInteraction/Review/index.tsx      | 25 ++++-------
 .../screens/ReviewCollectible/index.tsx       | 23 +++--------
 .../SendModal/screens/ReviewTx/index.tsx      | 41 +++++--------------
 .../ExpandedTx/ApproveTxModal/index.tsx       | 19 ++++-----
 5 files changed, 35 insertions(+), 77 deletions(-)

diff --git a/src/logic/hooks/useCheckIfTransactionWillFail.tsx b/src/logic/hooks/useCheckIfTransactionWillFail.tsx
index 53c6c30200..c77d6ffb36 100644
--- a/src/logic/hooks/useCheckIfTransactionWillFail.tsx
+++ b/src/logic/hooks/useCheckIfTransactionWillFail.tsx
@@ -4,8 +4,8 @@ import { checkIfExecTxWillFail } from 'src/logic/safe/transactions/gas'
 type TransactionWillFailProps = {
   data: string
   safeAddress: string
-  txAmount?: string
   txRecipient: string
+  txAmount?: string
 }
 
 export const useCheckIfTransactionWillFail = ({
@@ -23,7 +23,7 @@ export const useCheckIfTransactionWillFail = ({
     }
     const checkIfTxWillFailAsync = async () => {
       const txWillFailResult = await checkIfExecTxWillFail({
-        safeAddress: safeAddress as string,
+        safeAddress,
         txTo: txRecipient,
         data,
         txAmount,
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 9a7bb46242..0a89987ee3 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -14,16 +14,17 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIService'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 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/logic/safe/store/actions/createTransaction'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { generateFormFieldKey, getValueFromTxInputs } from '../utils'
 import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
 
 const useStyles = makeStyles(styles)
 
@@ -46,22 +47,14 @@ const { nativeCoin } = getNetworkInfo()
 const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const [gasCosts, setGasCosts] = useState('< 0.001')
-  const [txWillFail, setTxWillFail] = useState(false)
 
-  useEffect(() => {
-    const checkIfTxWillFailAsync = async () => {
-      const txWillFailResult = await checkIfExecTxWillFail({
-        safeAddress: safeAddress as string,
-        txTo: tx.contractAddress,
-        data: tx.data as string,
-      })
-      setTxWillFail(txWillFailResult)
-    }
-
-    checkIfTxWillFailAsync()
-  }, [safeAddress, tx.contractAddress, tx.data])
+  const txWillFail = useCheckIfTransactionWillFail({
+    safeAddress,
+    txRecipient: tx.contractAddress || '',
+    data: tx.data || '',
+  })
 
   useEffect(() => {
     let isCurrent = true
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 314c2b493d..ed82008edd 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -17,9 +17,9 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
@@ -32,6 +32,7 @@ import ArrowDown from '../assets/arrow-down.svg'
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
 
 const { nativeCoin } = getNetworkInfo()
 
@@ -54,29 +55,15 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   const classes = useStyles()
   const shortener = textShortener()
   const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const nftTokens = useSelector(nftTokensSelector)
   const [gasCosts, setGasCosts] = useState('< 0.001')
   const txToken = nftTokens.find(
     ({ assetAddress, tokenId }) => assetAddress === tx.assetAddress && tokenId === tx.nftTokenId,
   )
   const [data, setData] = useState('')
-  const [txWillFail, setTxWillFail] = useState(false)
 
-  useEffect(() => {
-    const checkIfTxWillFailAsync = async () => {
-      if (data) {
-        const txWillFailResult = await checkIfExecTxWillFail({
-          safeAddress: safeAddress as string,
-          txTo: tx.recipientAddress,
-          data,
-        })
-        setTxWillFail(txWillFailResult)
-      }
-    }
-
-    checkIfTxWillFailAsync()
-  }, [data, safeAddress, tx.recipientAddress])
+  const txWillFail = useCheckIfTransactionWillFail({ data, safeAddress, txRecipient: tx.recipientAddress })
 
   useEffect(() => {
     let isCurrent = true
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 6cf360161c..ddb2a8ebbb 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -17,9 +17,9 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getSpendingLimitContract } from 'src/logic/contracts/safeContracts'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { getHumanFriendlyToken } from 'src/logic/tokens/store/actions/fetchTokens'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { sameAddress, ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
@@ -38,6 +38,7 @@ import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import InfoIcon from 'src/assets/icons/info_red.svg'
 import { TokenProps } from 'src/logic/tokens/store/model/token'
 import { RecordOf } from 'immutable'
+import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
 const useStyles = makeStyles(styles)
 
 const { nativeCoin } = getNetworkInfo()
@@ -126,44 +127,24 @@ const useEstimateGas = (txData: string, safeAddress: string, txRecipient: string
   return gasCosts
 }
 
-const useCheckIfTxWillFail = (data: string, safeAddress: string, txAmount: string, txRecipient: string) => {
-  const [txWillFail, setTxWillFail] = useState(false)
-
-  useEffect(() => {
-    // The data is loading
-    if (!data.length) {
-      return
-    }
-    const checkIfTxWillFailAsync = async () => {
-      const txWillFailResult = await checkIfExecTxWillFail({
-        safeAddress: safeAddress as string,
-        txTo: txRecipient,
-        data,
-        txAmount,
-      })
-      setTxWillFail(txWillFailResult)
-    }
-
-    checkIfTxWillFailAsync()
-  }, [data, safeAddress, txAmount, txRecipient])
-
-  return txWillFail
-}
-
 const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  // @todo (agustin) refactor with another selector, safeAddress can't be undefined here
-  const { address: safeAddress } = useSelector(safeSelector) || {}
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const tokens = useSelector(extendedSafeTokensSelector)
   const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
   const isSendingNativeToken = sameAddress(txToken?.address, nativeCoin.address)
-  const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address
+  const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address || ''
 
   const txAmount = useTxAmount(tx, isSendingNativeToken, txToken)
   const data = useTxData(isSendingNativeToken, txAmount, tx.recipientAddress, txToken)
   const gasCosts = useEstimateGas(data, safeAddress as string, txRecipient as string)
-  const txWillFail = useCheckIfTxWillFail(data, safeAddress as string, txAmount, txRecipient as string)
+  const txWillFail = useCheckIfTransactionWillFail({
+    data,
+    safeAddress,
+    txAmount,
+    txRecipient,
+  })
 
   const submitTx = async () => {
     const isSpendingLimit = sameString(tx.txType, 'spendingLimit')
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index ccb2fbae7e..2416de2d1f 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -18,7 +18,7 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { checkIfExecTxWillFail, estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
+import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import processTransaction from 'src/logic/safe/store/actions/processTransaction'
@@ -27,6 +27,7 @@ import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/lo
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import InfoIcon from 'src/assets/icons/info_red.svg'
 import Img from 'src/components/layout/Img'
+import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
 
 const useStyles = makeStyles(styles)
 
@@ -78,22 +79,18 @@ const ApproveTxModal = ({
   const userAddress = useSelector(userAccountSelector)
   const classes = useStyles()
   const threshold = useSelector(safeThresholdSelector)
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const [approveAndExecute, setApproveAndExecute] = useState(canExecute)
   const [gasCosts, setGasCosts] = useState('< 0.001')
   const { description, title } = getModalTitleAndDescription(thresholdReached, isCancelTx)
   const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
-  const [txWillFail, setTxWillFail] = useState(false)
 
-  useEffect(() => {
-    const checkIfTxWillFailAsync = async () => {
-      const txWillFailResult = await checkIfExecTxWillFail({ safeAddress, txTo: tx.recipient, data: tx.data as string })
-      setTxWillFail(txWillFailResult)
-    }
-
-    checkIfTxWillFailAsync()
-  }, [tx.recipient, tx.data, safeAddress])
+  const txWillFail = useCheckIfTransactionWillFail({
+    safeAddress,
+    txRecipient: tx.recipient,
+    data: tx.data || '',
+  })
 
   useEffect(() => {
     let isCurrent = true

From e10011373cb1d9c8a5b9c7712081c6daf5e09780 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 9 Dec 2020 14:46:35 -0300
Subject: [PATCH 26/84] Improves modal's wording

---
 .../screens/ContractInteraction/Review/index.tsx         | 9 ++++++---
 .../SendModal/screens/ReviewCollectible/index.tsx        | 9 ++++++---
 .../Balances/SendModal/screens/ReviewTx/index.tsx        | 9 ++++++---
 .../TxsTable/ExpandedTx/ApproveTxModal/index.tsx         | 5 ++++-
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 0a89987ee3..b41070155c 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -21,7 +21,7 @@ import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/Co
 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/logic/safe/store/actions/createTransaction'
-import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { generateFormFieldKey, getValueFromTxInputs } from '../utils'
 import InfoIcon from 'src/assets/icons/info_red.svg'
 import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
@@ -48,6 +48,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
   const classes = useStyles()
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const threshold = useSelector(safeThresholdSelector)
   const [gasCosts, setGasCosts] = useState('< 0.001')
 
   const txWillFail = useCheckIfTransactionWillFail({
@@ -178,8 +179,10 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
             <Row align="center">
               <Paragraph color="error" className={classes.executionWarningRow}>
                 <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs, collect rejections and cancel this
-                transaction.
+                This transaction will most likely fail. To save gas costs,
+                {threshold && threshold > 1
+                  ? ` collect rejections and cancel this transaction.`
+                  : ` avoid executing the transaction.`}
               </Paragraph>
             </Row>
           )}
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index ed82008edd..efde26608d 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -17,7 +17,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
@@ -56,6 +56,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   const shortener = textShortener()
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const threshold = useSelector(safeThresholdSelector)
   const nftTokens = useSelector(nftTokensSelector)
   const [gasCosts, setGasCosts] = useState('< 0.001')
   const txToken = nftTokens.find(
@@ -175,8 +176,10 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
             <Row align="center">
               <Paragraph color="error" className={classes.executionWarningRow}>
                 <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs, collect rejections and cancel this
-                transaction.
+                This transaction will most likely fail. To save gas costs,
+                {threshold && threshold > 1
+                  ? ` collect rejections and cancel this transaction.`
+                  : ` avoid executing the transaction.`}
               </Paragraph>
             </Row>
           )}
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index ddb2a8ebbb..4f0d7db244 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -17,7 +17,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getSpendingLimitContract } from 'src/logic/contracts/safeContracts'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { getHumanFriendlyToken } from 'src/logic/tokens/store/actions/fetchTokens'
@@ -132,6 +132,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const tokens = useSelector(extendedSafeTokensSelector)
+  const threshold = useSelector(safeThresholdSelector)
   const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
   const isSendingNativeToken = sameAddress(txToken?.address, nativeCoin.address)
   const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address || ''
@@ -255,8 +256,10 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
             <Row align="center">
               <Paragraph color="error" className={classes.executionWarningRow}>
                 <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs, collect rejections and cancel this
-                transaction.
+                This transaction will most likely fail. To save gas costs,
+                {threshold && threshold > 1
+                  ? ` collect rejections and cancel this transaction.`
+                  : ` avoid executing the transaction.`}
               </Paragraph>
             </Row>
           )}
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 2416de2d1f..20e5e9e20b 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -187,7 +187,10 @@ const ApproveTxModal = ({
           <Row align="center">
             <Paragraph color="error" className={classes.executionWarningRow}>
               <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-              This transaction will most likely fail. To save gas costs, collect rejections and cancel this transaction.
+              This transaction will most likely fail. To save gas costs,
+              {isTheTxReadyToBeExecuted
+                ? ` collect rejections and cancel this transaction.`
+                : ` avoid executing the transaction.`}
             </Paragraph>
           </Row>
         )}

From 49641a4658e1373c8e50ddb468ed754524fa8023 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 9 Dec 2020 14:48:58 -0300
Subject: [PATCH 27/84] Remove comment

---
 src/logic/hooks/useCheckIfTransactionWillFail.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/logic/hooks/useCheckIfTransactionWillFail.tsx b/src/logic/hooks/useCheckIfTransactionWillFail.tsx
index c77d6ffb36..4ea3c4cdd3 100644
--- a/src/logic/hooks/useCheckIfTransactionWillFail.tsx
+++ b/src/logic/hooks/useCheckIfTransactionWillFail.tsx
@@ -17,7 +17,6 @@ export const useCheckIfTransactionWillFail = ({
   const [txWillFail, setTxWillFail] = useState(false)
 
   useEffect(() => {
-    // The data is loading
     if (!data.length) {
       return
     }

From 983551f6d0d61c3ed274166847a42bfa36349f1b Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 10:04:04 -0300
Subject: [PATCH 28/84] Fix error parsing the cancel transaction error message
 from GETH nodes

---
 .../safe/transactions/__tests__/gas.test.ts   | Bin 6395 -> 7372 bytes
 src/logic/safe/transactions/gas.ts            |   7 ++++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/logic/safe/transactions/__tests__/gas.test.ts b/src/logic/safe/transactions/__tests__/gas.test.ts
index 4c6982407a5c9bc130212ea01333fbc1e8e43ae7..828d1e64f6ff53355619733c309af0a4d4c98555 100644
GIT binary patch
delta 86
zcmV-c0IC1`G0Zuz_!yJm0~C`W5*3q=6%8>UWp-t5AZcbGbZBKDa%FRHZ*FsCAY*TC
sbYW?3b0BGMc42I3WFTW`VRB((bY*gLld%snv(6Pb0R!*9y`%dU0->%Uwg3PC

delta 11
ScmX?O`P*>A4+-X4O)dZ;TLh&5

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index c372d18e1f..646a0d131c 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -92,8 +92,13 @@ export const estimateTxGasCosts = async (
 
 // Parses the result from the error message (GETH, OpenEthereum/Parity and Nethermind) and returns the data value
 export const getDataFromNodeErrorMessage = (errorMessage: string): string | undefined => {
+  // Replace illegal characters that often comes within the error string (like � for example)
+  // https://stackoverflow.com/questions/12754256/removing-invalid-characters-in-javascript
+  const normalizedErrorString = errorMessage.replace(/\uFFFD/g, '')
+
   // Extracts JSON object from the error message
-  const [, ...error] = errorMessage.split('\n')
+  const [, ...error] = normalizedErrorString.split('\n')
+
   try {
     const errorAsJSON = JSON.parse(error.join(''))
 

From 0c0a106a6d81758d72ac6cebd224f467beaca425 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 16:36:50 -0300
Subject: [PATCH 29/84] Remove useCheckIfTransactionWillFail Adds
 useEstimateTransactionGas Renames estimateTxGas to estimateTransactionGas
 Removes estimateTxGasCosts Removes checkIfExecTxWillFail

---
 .../hooks/useCheckIfTransactionWillFail.tsx   | 37 --------
 src/logic/hooks/useEstimateTransactionGas.tsx | 84 +++++++++++++++++
 src/logic/safe/transactions/gas.ts            | 92 +++++--------------
 3 files changed, 109 insertions(+), 104 deletions(-)
 delete mode 100644 src/logic/hooks/useCheckIfTransactionWillFail.tsx
 create mode 100644 src/logic/hooks/useEstimateTransactionGas.tsx

diff --git a/src/logic/hooks/useCheckIfTransactionWillFail.tsx b/src/logic/hooks/useCheckIfTransactionWillFail.tsx
deleted file mode 100644
index 4ea3c4cdd3..0000000000
--- a/src/logic/hooks/useCheckIfTransactionWillFail.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react'
-import { checkIfExecTxWillFail } from 'src/logic/safe/transactions/gas'
-
-type TransactionWillFailProps = {
-  data: string
-  safeAddress: string
-  txRecipient: string
-  txAmount?: string
-}
-
-export const useCheckIfTransactionWillFail = ({
-  data,
-  safeAddress,
-  txAmount,
-  txRecipient,
-}: TransactionWillFailProps): boolean => {
-  const [txWillFail, setTxWillFail] = useState(false)
-
-  useEffect(() => {
-    if (!data.length) {
-      return
-    }
-    const checkIfTxWillFailAsync = async () => {
-      const txWillFailResult = await checkIfExecTxWillFail({
-        safeAddress,
-        txTo: txRecipient,
-        data,
-        txAmount,
-      })
-      setTxWillFail(txWillFailResult)
-    }
-
-    checkIfTxWillFailAsync()
-  }, [data, safeAddress, txAmount, txRecipient])
-
-  return txWillFail
-}
diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
new file mode 100644
index 0000000000..0de981c5ee
--- /dev/null
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+import { estimateTransactionGas, TransactionEstimationProps } from 'src/logic/safe/transactions/gas'
+import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
+import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
+import { getNetworkInfo } from 'src/config'
+
+export enum EstimationStatus {
+  LOADING = 'LOADING',
+  FAILURE = 'FAILURE',
+  SUCCESS = 'SUCCESS',
+}
+
+type TransactionGasEstimationResult = {
+  txEstimationExecutionStatus: EstimationStatus
+  estimatedGas: number // Amount of gas needed for execute or approve the transaction
+  gasCosts: string // Cost of gas to the user (estimatedGas * gasPrice) in format '< | > 100'
+}
+
+export const useEstimateTransactionGas = ({
+  safeAddress,
+  txRecipient,
+  txData,
+  txConfirmations,
+  txAmount,
+  preApprovingOwner,
+}: TransactionEstimationProps): TransactionGasEstimationResult => {
+  const [gasCosts, setGasCosts] = useState({
+    txEstimationExecutionStatus: EstimationStatus.LOADING,
+    estimatedGas: 0,
+    gasCosts: '< 0.001',
+  })
+  const { nativeCoin } = getNetworkInfo()
+
+  useEffect(() => {
+    let isCurrent = true
+
+    const estimateGas = async () => {
+      if (!txData.length) {
+        return
+      }
+
+      try {
+        const estimatedGas = await estimateTransactionGas({
+          safeAddress,
+          txRecipient,
+          txData,
+          txConfirmations,
+          txAmount,
+          preApprovingOwner,
+        })
+        const gasPrice = await calculateGasPrice()
+        const estimatedGasCosts = estimatedGas * parseInt(gasPrice, 10)
+        const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
+        const formattedGasCosts = formatAmount(gasCosts)
+        if (isCurrent) {
+          setGasCosts({
+            txEstimationExecutionStatus: estimatedGas <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
+            estimatedGas,
+            gasCosts: formattedGasCosts,
+          })
+        }
+      } catch (error) {
+        // We put a fixed the amount of gas to let the user try to execute the tx, but it's not accurate so it will probably fail
+        const estimatedGas = 10000
+        const gasCosts = fromTokenUnit(estimatedGas, nativeCoin.decimals)
+        const formattedGasCosts = formatAmount(gasCosts)
+        setGasCosts({
+          txEstimationExecutionStatus: EstimationStatus.FAILURE,
+          estimatedGas,
+          gasCosts: formattedGasCosts,
+        })
+      }
+    }
+
+    estimateGas()
+
+    return () => {
+      isCurrent = false
+    }
+  }, [txData, safeAddress, txRecipient, txConfirmations, txAmount, preApprovingOwner, nativeCoin.decimals])
+
+  return gasCosts
+}
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 646a0d131c..c9ffdf9364 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -1,9 +1,8 @@
 import { BigNumber } from 'bignumber.js'
 import { CALL } from '.'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
-import { EMPTY_DATA, calculateGasOf, calculateGasPrice } from 'src/logic/wallets/ethTransactions'
+import { EMPTY_DATA, calculateGasOf } from 'src/logic/wallets/ethTransactions'
 import { getAccountFrom, getWeb3 } from 'src/logic/wallets/getWeb3'
 import { sameString } from 'src/utils/strings'
 
@@ -33,16 +32,26 @@ export const getPreValidatedSignatures = (from: string): string => {
 }
 
 // @todo (agustin) check if this can be replaced by shouldExecuteTransaction() and refactor
-const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, transaction?: Transaction): boolean =>
-  transaction?.confirmations.size === threshold || !!preApprovingOwner || threshold === 1
+const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txConfirmations?: number): boolean =>
+  txConfirmations === threshold || !!preApprovingOwner || threshold === 1
 
-const estimateTxGas = async (
-  safeAddress: string,
-  to: string,
-  data: string,
-  tx?: Transaction,
-  preApprovingOwner?: string,
-): Promise<number> => {
+export type TransactionEstimationProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  txConfirmations?: number
+  txAmount?: string
+  preApprovingOwner?: string
+}
+
+export const estimateTransactionGas = async ({
+  txAmount,
+  txConfirmations,
+  txData,
+  txRecipient,
+  safeAddress,
+  preApprovingOwner,
+}: TransactionEstimationProps): Promise<number> => {
   const web3 = getWeb3()
   const from = await getAccountFrom(web3)
 
@@ -52,42 +61,22 @@ const estimateTxGas = async (
 
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const threshold = await safeInstance.methods.getThreshold().call()
-  const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, tx)
+  const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
 
   if (isExecution) {
     // Gas of executing a transaction within the safe (threshold reached and transaction executed)
-    return await estimateExecTransactionGas(safeAddress, data, to, tx?.value || '0', CALL)
+    return await estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', CALL)
   }
 
   const nonce = await safeInstance.methods.nonce().call()
   const txHash = await safeInstance.methods
-    .getTransactionHash(to, tx?.value || 0, data, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
+    .getTransactionHash(txRecipient, txAmount || '0', txData, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
     .call({
       from,
     })
   // Gas of approving the transaction (threshold not reached or user did not executed the transaction)
-  const txData = await safeInstance.methods.approveHash(txHash).encodeABI()
-  return await calculateGasOf(txData, from, safeAddress)
-}
-
-// Returns the estimation of how much the user should pay for the given transaction (gas * price)
-export const estimateTxGasCosts = async (
-  safeAddress: string,
-  to: string,
-  data: string,
-  tx?: Transaction,
-  preApprovingOwner?: string,
-): Promise<number> => {
-  try {
-    const gas = await estimateTxGas(safeAddress, to, data, tx, preApprovingOwner)
-    const gasPrice = await calculateGasPrice()
-
-    return gas * parseInt(gasPrice, 10)
-  } catch (err) {
-    console.error('Error while estimating transaction execution gas costs:', err.message)
-
-    return 10000
-  }
+  const approveTransactionTxData = await safeInstance.methods.approveHash(txHash).encodeABI()
+  return await calculateGasOf(approveTransactionTxData, from, safeAddress)
 }
 
 // Parses the result from the error message (GETH, OpenEthereum/Parity and Nethermind) and returns the data value
@@ -227,34 +216,3 @@ export const estimateExecTransactionGas = async (
     return 0
   }
 }
-
-export const checkIfExecTxWillFail = async ({
-  safeAddress,
-  txTo,
-  data,
-  txAmount = '0',
-  operation = 0,
-}: {
-  safeAddress: string
-  txTo?: string
-  data: string
-  txAmount?: string
-  operation?: number
-}): Promise<boolean> => {
-  const web3 = getWeb3()
-  try {
-    if (!txTo) {
-      return true
-    }
-    const from = await getAccountFrom(web3)
-    if (!from) {
-      return true
-    }
-
-    const estimateGas = await estimateExecTransactionGas(safeAddress, data, txTo, txAmount, operation)
-
-    return estimateGas <= 0
-  } catch (error) {
-    return true
-  }
-}

From 54bd701c51d465fec96358f080bfc9297b9036d6 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 16:41:12 -0300
Subject: [PATCH 30/84] Replace useCheckIfTransactionWillFail from modals with
 useEstimateTransactionGas

---
 .../ContractInteraction/Review/index.tsx      | 37 +++-------------
 .../screens/ReviewCollectible/index.tsx       | 27 +++++-------
 .../SendModal/screens/ReviewTx/index.tsx      | 41 +++--------------
 .../ExpandedTx/ApproveTxModal/index.tsx       | 44 ++++---------------
 4 files changed, 31 insertions(+), 118 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index b41070155c..a1c3494f49 100644
--- 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,9 +1,9 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { getNetworkInfo } from 'src/config'
-import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import AddressInfo from 'src/components/AddressInfo'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
@@ -14,8 +14,6 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIService'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 import Header from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Header'
@@ -24,7 +22,7 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { generateFormFieldKey, getValueFromTxInputs } from '../utils'
 import InfoIcon from 'src/assets/icons/info_red.svg'
-import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 
 const useStyles = makeStyles(styles)
 
@@ -49,36 +47,13 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const threshold = useSelector(safeThresholdSelector)
-  const [gasCosts, setGasCosts] = useState('< 0.001')
 
-  const txWillFail = useCheckIfTransactionWillFail({
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: tx.data || '',
     safeAddress,
     txRecipient: tx.contractAddress || '',
-    data: tx.data || '',
   })
 
-  useEffect(() => {
-    let isCurrent = true
-
-    const estimateGas = async (): Promise<void> => {
-      const txData = tx.data ? tx.data.trim() : ''
-
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, tx.contractAddress as string, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [safeAddress, tx.contractAddress, tx.data])
-
   const submitTx = async () => {
     const txRecipient = tx.contractAddress
     const txData = tx.data ? tx.data.trim() : ''
@@ -175,7 +150,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txWillFail && (
+          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
             <Row align="center">
               <Paragraph color="error" className={classes.executionWarningRow}>
                 <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index efde26608d..5e103a495a 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -3,8 +3,6 @@ import { useDispatch, useSelector } from 'react-redux'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
@@ -19,8 +17,6 @@ import { nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
 import { sm } from 'src/theme/variables'
@@ -32,7 +28,7 @@ import ArrowDown from '../assets/arrow-down.svg'
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import InfoIcon from 'src/assets/icons/info_red.svg'
-import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 
 const { nativeCoin } = getNetworkInfo()
 
@@ -58,34 +54,31 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const threshold = useSelector(safeThresholdSelector)
   const nftTokens = useSelector(nftTokensSelector)
-  const [gasCosts, setGasCosts] = useState('< 0.001')
   const txToken = nftTokens.find(
     ({ assetAddress, tokenId }) => assetAddress === tx.assetAddress && tokenId === tx.nftTokenId,
   )
   const [data, setData] = useState('')
 
-  const txWillFail = useCheckIfTransactionWillFail({ data, safeAddress, txRecipient: tx.recipientAddress })
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: data,
+    safeAddress,
+    txRecipient: tx.recipientAddress,
+  })
 
   useEffect(() => {
     let isCurrent = true
 
-    const estimateGas = async () => {
+    const calculateERC721TransferData = async () => {
       try {
         const txData = await generateERC721TransferTxData(tx, safeAddress)
-        const estimatedGasCosts = await estimateTxGasCosts(safeAddress ?? '', tx.recipientAddress, txData)
-        const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-        const formattedGasCosts = formatAmount(gasCosts)
-
         if (isCurrent) {
-          setGasCosts(formattedGasCosts)
           setData(txData)
         }
       } catch (error) {
-        console.error('Error while calculating estimated gas:', error)
+        console.error('Error calculating ERC721 transfer data:', error.message)
       }
     }
-
-    estimateGas()
+    calculateERC721TransferData()
 
     return () => {
       isCurrent = false
@@ -172,7 +165,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txWillFail && (
+          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
             <Row align="center">
               <Paragraph color="error" className={classes.executionWarningRow}>
                 <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 4f0d7db244..62f20a082c 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { toTokenUnit, fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 
 import CopyBtn from 'src/components/CopyBtn'
@@ -19,9 +19,7 @@ import { getSpendingLimitContract } from 'src/logic/contracts/safeContracts'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { getHumanFriendlyToken } from 'src/logic/tokens/store/actions/fetchTokens'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { sameAddress, ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
@@ -38,7 +36,7 @@ import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import InfoIcon from 'src/assets/icons/info_red.svg'
 import { TokenProps } from 'src/logic/tokens/store/model/token'
 import { RecordOf } from 'immutable'
-import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 const useStyles = makeStyles(styles)
 
 const { nativeCoin } = getNetworkInfo()
@@ -101,32 +99,6 @@ const useTxData = (
   return data
 }
 
-const useEstimateGas = (txData: string, safeAddress: string, txRecipient: string): string => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-
-  useEffect(() => {
-    let isCurrent = true
-
-    const estimateGas = async () => {
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, txRecipient, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [txData, safeAddress, txRecipient])
-
-  return gasCosts
-}
-
 const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => {
   const classes = useStyles()
   const dispatch = useDispatch()
@@ -139,11 +111,10 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
 
   const txAmount = useTxAmount(tx, isSendingNativeToken, txToken)
   const data = useTxData(isSendingNativeToken, txAmount, tx.recipientAddress, txToken)
-  const gasCosts = useEstimateGas(data, safeAddress as string, txRecipient as string)
-  const txWillFail = useCheckIfTransactionWillFail({
-    data,
+
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: data,
     safeAddress,
-    txAmount,
     txRecipient,
   })
 
@@ -252,7 +223,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
           <Paragraph data-testid="fee-meg-review-step">
             {`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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txWillFail && (
+          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
             <Row align="center">
               <Paragraph color="error" className={classes.executionWarningRow}>
                 <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 20e5e9e20b..dc3bd5d44f 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -3,9 +3,8 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getNetworkInfo } from 'src/config'
 
 import { styles } from './style'
@@ -18,8 +17,6 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import processTransaction from 'src/logic/safe/store/actions/processTransaction'
 
@@ -27,7 +24,7 @@ import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/lo
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import InfoIcon from 'src/assets/icons/info_red.svg'
 import Img from 'src/components/layout/Img'
-import { useCheckIfTransactionWillFail } from 'src/logic/hooks/useCheckIfTransactionWillFail'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 
 const useStyles = makeStyles(styles)
 
@@ -81,42 +78,19 @@ const ApproveTxModal = ({
   const threshold = useSelector(safeThresholdSelector)
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const [approveAndExecute, setApproveAndExecute] = useState(canExecute)
-  const [gasCosts, setGasCosts] = useState('< 0.001')
   const { description, title } = getModalTitleAndDescription(thresholdReached, isCancelTx)
   const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
 
-  const txWillFail = useCheckIfTransactionWillFail({
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
     safeAddress,
     txRecipient: tx.recipient,
-    data: tx.data || '',
+    txData: tx.data || '',
+    txConfirmations: tx.confirmations.size,
+    txAmount: tx.value,
+    preApprovingOwner: approveAndExecute ? userAddress : undefined,
   })
 
-  useEffect(() => {
-    let isCurrent = true
-
-    const estimateGas = async () => {
-      const estimatedGasCosts = await estimateTxGasCosts(
-        safeAddress,
-        tx.recipient,
-        tx.data as string,
-        tx,
-        approveAndExecute ? userAddress : undefined,
-      )
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [approveAndExecute, safeAddress, tx, userAddress])
-
   const handleExecuteCheckbox = () => setApproveAndExecute((prevApproveAndExecute) => !prevApproveAndExecute)
 
   const approveTx = () => {
@@ -138,7 +112,7 @@ const ApproveTxModal = ({
       handleClose={onClose}
       open={isOpen}
       title={title}
-      paperClassName={txWillFail ? classes.paperModalContainer : undefined}
+      paperClassName={txEstimationExecutionStatus ? classes.paperModalContainer : undefined}
     >
       <Row align="center" className={classes.heading} grow>
         <Paragraph className={classes.headingText} noMargin weight="bolder">
@@ -183,7 +157,7 @@ const ApproveTxModal = ({
             } in this wallet to fund this confirmation.`}
           </Paragraph>
         </Row>
-        {txWillFail && (
+        {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
           <Row align="center">
             <Paragraph color="error" className={classes.executionWarningRow}>
               <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />

From 4ea2553a538fd5ae0395cb602cd78619840f1a8c Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 16:52:09 -0300
Subject: [PATCH 31/84] Replace estimateGasCosts from every review tx modal
 with useEstimateTransactionGas

---
 .../ReviewCustomTx/index.tsx                  | 46 ++++------
 .../ReviewCustomTx/style.ts                   |  7 ++
 .../ManageOwners/RemoveOwnerModal/index.tsx   | 15 ++--
 .../RemoveOwnerModal/screens/Review/index.tsx | 86 ++++++++++++++-----
 .../RemoveOwnerModal/screens/Review/style.ts  | 10 ++-
 .../ManageOwners/ReplaceOwnerModal/index.tsx  | 45 ++++++----
 .../screens/Review/index.tsx                  | 80 ++++++++++++-----
 .../ReplaceOwnerModal/screens/Review/style.ts | 10 ++-
 .../Settings/ManageOwners/index.tsx           |  4 +-
 .../ChangeThreshold/index.tsx                 | 65 ++++++++++----
 .../ChangeThreshold/style.ts                  | 10 ++-
 .../Settings/ThresholdSettings/index.tsx      |  8 +-
 12 files changed, 262 insertions(+), 124 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 2512c69edb..5c576d045f 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
-import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@@ -16,10 +16,8 @@ import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
@@ -29,6 +27,8 @@ import ArrowDown from '../../assets/arrow-down.svg'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 export type CustomTx = {
   contractAddress?: string
@@ -49,29 +49,13 @@ const { nativeCoin } = getNetworkInfo()
 const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
-  const [gasCosts, setGasCosts] = useState<string>('< 0.001')
-  useEffect(() => {
-    let isCurrent = true
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
-    const estimateGas = async () => {
-      const txData = tx.data ? tx.data.trim() : ''
-
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, tx.contractAddress as string, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [safeAddress, tx.data, tx.contractAddress])
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: tx.data ? tx.data.trim() : '',
+    safeAddress,
+    txRecipient: tx.contractAddress || '',
+  })
 
   const submitTx = async (): Promise<void> => {
     const txRecipient = tx.contractAddress
@@ -164,6 +148,14 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
+          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
+            <Row align="center">
+              <Paragraph color="error" className={classes.executionWarningRow}>
+                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+                This transaction will most likely fail. To save gas costs, avoid creating the transaction.
+              </Paragraph>
+            </Row>
+          )}
         </Row>
       </Block>
       <Hairline />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
index 403654f05b..4fa12866f2 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
@@ -55,4 +55,11 @@ export const styles = createStyles({
     boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     marginLeft: '15px',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
index 9147afb730..3fe8460308 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import CheckOwner from './screens/CheckOwner'
-import ReviewRemoveOwner from './screens/Review'
+import { ReviewRemoveOwnerModal } from './screens/Review'
 import ThresholdForm from './screens/ThresholdForm'
 
 import Modal from 'src/components/Modal'
@@ -69,7 +69,12 @@ type RemoveOwnerProps = {
   ownerName: string
 }
 
-const RemoveOwner = ({ isOpen, onClose, ownerAddress, ownerName }: RemoveOwnerProps): React.ReactElement => {
+export const RemoveOwnerModal = ({
+  isOpen,
+  onClose,
+  ownerAddress,
+  ownerName,
+}: RemoveOwnerProps): React.ReactElement => {
   const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState('checkOwner')
   const [values, setValues] = useState<any>({})
@@ -124,18 +129,16 @@ const RemoveOwner = ({ isOpen, onClose, ownerAddress, ownerName }: RemoveOwnerPr
           <ThresholdForm onClickBack={onClickBack} onClose={onClose} onSubmit={thresholdSubmitted} />
         )}
         {activeScreen === 'reviewRemoveOwner' && (
-          <ReviewRemoveOwner
+          <ReviewRemoveOwnerModal
             onClickBack={onClickBack}
             onClose={onClose}
             onSubmit={onRemoveOwner}
             ownerAddress={ownerAddress}
             ownerName={ownerName}
-            values={values}
+            threshold={threshold}
           />
         )}
       </>
     </Modal>
   )
 }
-
-export default RemoveOwner
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
index 7829a950ff..57fbee4bf4 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@@ -1,10 +1,9 @@
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
@@ -16,50 +15,84 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getGnosisSafeInstanceAt, SENTINEL_ADDRESS } from 'src/logic/contracts/safeContracts'
 import { safeNameSelector, safeOwnersSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
 import { List } from 'immutable'
 import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 export const REMOVE_OWNER_REVIEW_BTN_TEST_ID = 'remove-owner-review-btn'
 
 const { nativeCoin } = getNetworkInfo()
 
-const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddress, ownerName, values }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+const useStyles = makeStyles(styles)
+
+type ReviewRemoveOwnerProps = {
+  onClickBack: () => void
+  onClose: () => void
+  onSubmit: () => void
+  ownerAddress: string
+  ownerName: string
+  threshold?: number
+}
+
+export const ReviewRemoveOwnerModal = ({
+  onClickBack,
+  onClose,
+  onSubmit,
+  ownerAddress,
+  ownerName,
+  threshold,
+}: ReviewRemoveOwnerProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+  const [removeOwnerError, setRemoveOwnerError] = useState(false)
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: data,
+    safeAddress,
+    txRecipient: safeAddress,
+  })
+
   useEffect(() => {
     let isCurrent = true
 
-    const estimateGas = async () => {
-      const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
-      const safeOwners = await gnosisSafe.methods.getOwners().call()
-      const index = safeOwners.findIndex((owner) => owner.toLowerCase() === ownerAddress.toLowerCase())
-      const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
-      const txData = gnosisSafe.methods.removeOwner(prevAddress, ownerAddress, values.threshold).encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
+    if (!threshold) {
+      console.error("Threshold value was not define, tx can't be executed")
+      setRemoveOwnerError(true)
+      return
+    }
 
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
+    const calculateRemoveOwnerData = async () => {
+      try {
+        const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+        const safeOwners = await gnosisSafe.methods.getOwners().call()
+        const index = safeOwners.findIndex((owner) => owner.toLowerCase() === ownerAddress.toLowerCase())
+        const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
+        const txData = gnosisSafe.methods.removeOwner(prevAddress, ownerAddress, threshold).encodeABI()
+
+        if (isCurrent) {
+          setData(txData)
+        }
+      } catch (error) {
+        console.error('Error calculating ERC721 transfer data:', error.message)
       }
     }
+    calculateRemoveOwnerData()
 
-    estimateGas()
     return () => {
       isCurrent = false
     }
-  }, [ownerAddress, safeAddress, values.threshold])
+  }, [safeAddress, ownerAddress, threshold])
 
   return (
     <>
@@ -95,7 +128,7 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
                   Any transaction requires the confirmation of:
                 </Paragraph>
                 <Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
-                  {`${values.threshold} out of ${owners ? owners.size - 1 : 0} owner(s)`}
+                  {`${threshold} out of ${owners ? owners.size - 1 : 0} owner(s)`}
                 </Paragraph>
               </Block>
             </Block>
@@ -170,6 +203,15 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
           <br />
           {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
+        {txEstimationExecutionStatus === EstimationStatus.FAILURE ||
+          (removeOwnerError && (
+            <Row align="center">
+              <Paragraph color="error" className={classes.executionWarningRow}>
+                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+                This transaction will most likely fail. To save gas costs, avoid creating the transaction.
+              </Paragraph>
+            </Row>
+          ))}
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
@@ -191,5 +233,3 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
     </>
   )
 }
-
-export default withStyles(styles as any)(ReviewRemoveOwner)
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
index 90b7a749c1..a13dfbe1f9 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
@@ -1,6 +1,7 @@
 import { background, border, lg, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   root: {
     height: '372px',
   },
@@ -80,4 +81,11 @@ export const styles = () => ({
     textAlign: 'center',
     width: '100%',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
index 1968fcc49f..10266f78d0 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import OwnerForm from './screens/OwnerForm'
-import ReviewReplaceOwner from './screens/Review'
 
 import Modal from 'src/components/Modal'
 import { addOrUpdateAddressBookEntry } from 'src/logic/addressBook/store/actions/addOrUpdateAddressBookEntry'
@@ -16,6 +15,7 @@ import { checksumAddress } from 'src/utils/checksumAddress'
 import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import { Dispatch } from 'src/logic/safe/store/actions/types.d'
+import { ReviewReplaceOwnerModal } from './screens/Review'
 
 const styles = createStyles({
   biggerModalWindow: {
@@ -28,9 +28,8 @@ const styles = createStyles({
 const useStyles = makeStyles(styles)
 
 type OwnerValues = {
-  ownerAddress: string
-  ownerName: string
-  threshold: string
+  newOwnerAddress: string
+  newOwnerName: string
 }
 
 export const sendReplaceOwner = async (
@@ -44,7 +43,7 @@ export const sendReplaceOwner = async (
   const safeOwners = await gnosisSafe.methods.getOwners().call()
   const index = safeOwners.findIndex((ownerAddress) => sameAddress(ownerAddress, ownerAddressToRemove))
   const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
-  const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddressToRemove, values.ownerAddress).encodeABI()
+  const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddressToRemove, values.newOwnerAddress).encodeABI()
 
   const txHash = await dispatch(
     createTransaction({
@@ -61,8 +60,8 @@ export const sendReplaceOwner = async (
       replaceSafeOwner({
         safeAddress,
         oldOwnerAddress: ownerAddressToRemove,
-        ownerAddress: values.ownerAddress,
-        ownerName: values.ownerName,
+        ownerAddress: values.newOwnerAddress,
+        ownerName: values.newOwnerName,
       }),
     )
   }
@@ -75,10 +74,18 @@ type ReplaceOwnerProps = {
   ownerName: string
 }
 
-const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwnerProps): React.ReactElement => {
+export const ReplaceOwnerModal = ({
+  isOpen,
+  onClose,
+  ownerAddress,
+  ownerName,
+}: ReplaceOwnerProps): React.ReactElement => {
   const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState('checkOwner')
-  const [values, setValues] = useState<any>({})
+  const [values, setValues] = useState({
+    newOwnerAddress: '',
+    newOwnerName: '',
+  })
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const threshold = useSelector(safeThresholdSelector)
@@ -86,7 +93,10 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
   useEffect(
     () => () => {
       setActiveScreen('checkOwner')
-      setValues({})
+      setValues({
+        newOwnerAddress: '',
+        newOwnerName: '',
+      })
     },
     [isOpen],
   )
@@ -96,9 +106,10 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
   const ownerSubmitted = (newValues) => {
     const { ownerAddress, ownerName } = newValues
     const checksumAddr = checksumAddress(ownerAddress)
-    values.ownerName = ownerName
-    values.ownerAddress = checksumAddr
-    setValues(values)
+    setValues({
+      newOwnerAddress: checksumAddr,
+      newOwnerName: ownerName,
+    })
     setActiveScreen('reviewReplaceOwner')
   }
 
@@ -108,7 +119,9 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
       await sendReplaceOwner(values, safeAddress, ownerAddress, dispatch, threshold)
 
       dispatch(
-        addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: values.ownerAddress, name: values.ownerName })),
+        addOrUpdateAddressBookEntry(
+          makeAddressBookEntry({ address: values.newOwnerAddress, name: values.newOwnerName }),
+        ),
       )
     } catch (error) {
       console.error('Error while removing an owner', error)
@@ -128,7 +141,7 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
           <OwnerForm onClose={onClose} onSubmit={ownerSubmitted} ownerAddress={ownerAddress} ownerName={ownerName} />
         )}
         {activeScreen === 'reviewReplaceOwner' && (
-          <ReviewReplaceOwner
+          <ReviewReplaceOwnerModal
             onClickBack={onClickBack}
             onClose={onClose}
             onSubmit={onReplaceOwner}
@@ -141,5 +154,3 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
     </Modal>
   )
 }
-
-export default ReplaceOwner
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
index 231b8d7ece..b32af48dc4 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
@@ -1,5 +1,5 @@
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux'
 import { List } from 'immutable'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
@@ -24,47 +23,73 @@ import {
   safeParamAddressFromStateSelector,
   safeThresholdSelector,
 } from 'src/logic/safe/store/selectors'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
 import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
 
 import { styles } from './style'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn'
 
 const { nativeCoin } = getNetworkInfo()
 
-const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddress, ownerName, values }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+const useStyles = makeStyles(styles)
+
+type ReplaceOwnerProps = {
+  onClose: () => void
+  onClickBack: () => void
+  onSubmit: () => void
+  ownerAddress: string
+  ownerName: string
+  values: {
+    newOwnerAddress: string
+    newOwnerName: string
+  }
+}
+
+export const ReviewReplaceOwnerModal = ({
+  onClickBack,
+  onClose,
+  onSubmit,
+  ownerAddress,
+  ownerName,
+  values,
+}: ReplaceOwnerProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
   const threshold = useSelector(safeThresholdSelector)
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: data,
+    safeAddress,
+    txRecipient: safeAddress,
+  })
+
   useEffect(() => {
     let isCurrent = true
-    const estimateGas = async () => {
+    const calculateReplaceOwnerData = async () => {
       const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
       const safeOwners = await gnosisSafe.methods.getOwners().call()
       const index = safeOwners.findIndex((owner) => owner.toLowerCase() === ownerAddress.toLowerCase())
       const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
-      const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddress, values.ownerAddress).encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
+      const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddress, values.newOwnerAddress).encodeABI()
       if (isCurrent) {
-        setGasCosts(formattedGasCosts)
+        setData(txData)
       }
     }
 
-    estimateGas()
+    calculateReplaceOwnerData()
     return () => {
       isCurrent = false
     }
-  }, [ownerAddress, safeAddress, values.ownerAddress])
+  }, [ownerAddress, safeAddress, values.newOwnerAddress])
 
   return (
     <>
@@ -78,7 +103,7 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
         </IconButton>
       </Row>
       <Hairline />
-      <Block className={classes.formContainer}>
+      <Block>
         <Row className={classes.root}>
           <Col layout="column" xs={4}>
             <Block className={classes.details}>
@@ -172,19 +197,19 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
             <Hairline />
             <Row className={classes.selectedOwnerAdded}>
               <Col align="center" xs={1}>
-                <Identicon address={values.ownerAddress} diameter={32} />
+                <Identicon address={values.newOwnerAddress} diameter={32} />
               </Col>
               <Col xs={11}>
                 <Block className={classNames(classes.name, classes.userName)}>
                   <Paragraph noMargin size="lg" weight="bolder">
-                    {values.ownerName}
+                    {values.newOwnerName}
                   </Paragraph>
                   <Block className={classes.user} justify="center">
                     <Paragraph className={classes.address} color="disabled" noMargin size="md">
-                      {values.ownerAddress}
+                      {values.newOwnerAddress}
                     </Paragraph>
-                    <CopyBtn content={values.ownerAddress} />
-                    <ExplorerButton explorerUrl={getExplorerInfo(values.ownerAddress)} />
+                    <CopyBtn content={values.newOwnerAddress} />
+                    <ExplorerButton explorerUrl={getExplorerInfo(values.newOwnerAddress)} />
                   </Block>
                 </Block>
               </Col>
@@ -200,6 +225,17 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
           <br />
           {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
+        {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
+          <Row align="center">
+            <Paragraph color="error" className={classes.executionWarningRow}>
+              <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+              This transaction will most likely fail. To save gas costs,
+              {threshold && threshold > 1
+                ? ` collect rejections and cancel this transaction.`
+                : ` avoid executing the transaction.`}
+            </Paragraph>
+          </Row>
+        )}
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
@@ -221,5 +257,3 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
     </>
   )
 }
-
-export default withStyles(styles as any)(ReviewRemoveOwner)
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
index 07df003a28..4934cd4373 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
@@ -1,6 +1,7 @@
 import { background, border, lg, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   root: {
     height: '372px',
   },
@@ -85,4 +86,11 @@ export const styles = () => ({
     textAlign: 'center',
     width: '100%',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })
diff --git a/src/routes/safe/components/Settings/ManageOwners/index.tsx b/src/routes/safe/components/Settings/ManageOwners/index.tsx
index be55767adb..3c6f9191a0 100644
--- a/src/routes/safe/components/Settings/ManageOwners/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/index.tsx
@@ -11,8 +11,8 @@ import RemoveOwnerIcon from '../assets/icons/bin.svg'
 import AddOwnerModal from './AddOwnerModal'
 import EditOwnerModal from './EditOwnerModal'
 import OwnerAddressTableCell from './OwnerAddressTableCell'
-import RemoveOwnerModal from './RemoveOwnerModal'
-import ReplaceOwnerModal from './ReplaceOwnerModal'
+import { RemoveOwnerModal } from './RemoveOwnerModal'
+import { ReplaceOwnerModal } from './ReplaceOwnerModal'
 import RenameOwnerIcon from './assets/icons/rename-owner.svg'
 import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
 import { OWNERS_TABLE_ADDRESS_ID, OWNERS_TABLE_NAME_ID, generateColumns, getOwnerData } from './dataFetcher'
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 58fb82e365..1223726032 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -1,9 +1,8 @@
 import IconButton from '@material-ui/core/IconButton'
 import MenuItem from '@material-ui/core/MenuItem'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useEffect, useState } from 'react'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getNetworkInfo } from 'src/config'
 import { styles } from './style'
 
@@ -18,35 +17,57 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
+import { SafeOwner } from 'src/logic/safe/store/models/safe'
+import { List } from 'immutable'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 const THRESHOLD_FIELD_NAME = 'threshold'
 
 const { nativeCoin } = getNetworkInfo()
 
-const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddress, threshold }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
+const useStyles = makeStyles(styles)
+
+type ChangeThresholdModalProps = {
+  onChangeThreshold: (newThreshold: number) => void
+  onClose: () => void
+  owners?: List<SafeOwner>
+  safeAddress: string
+  threshold?: number
+}
+
+export const ChangeThresholdModal = ({
+  onChangeThreshold,
+  onClose,
+  owners,
+  safeAddress,
+  threshold = 1,
+}: ChangeThresholdModalProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: data,
+    safeAddress,
+    txRecipient: safeAddress,
+  })
 
   useEffect(() => {
     let isCurrent = true
-    const estimateGasCosts = async () => {
+    const calculateChangeThresholdData = async () => {
       const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-      const txData = safeInstance.methods.changeThreshold('1').encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
-      const gasCostsAsEth = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCostsAsEth)
+      const txData = safeInstance.methods.changeThreshold(threshold).encodeABI()
       if (isCurrent) {
-        setGasCosts(formattedGasCosts)
+        setData(txData)
       }
     }
 
-    estimateGasCosts()
-
+    calculateChangeThresholdData()
     return () => {
       isCurrent = false
     }
-  }, [safeAddress])
+  }, [safeAddress, threshold])
 
   const handleSubmit = (values) => {
     const newThreshold = values[THRESHOLD_FIELD_NAME]
@@ -81,7 +102,7 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
                     render={(props) => (
                       <>
                         <SelectField {...props} disableError>
-                          {[...Array(Number(owners.size))].map((x, index) => (
+                          {[...Array(Number(owners?.size))].map((x, index) => (
                             <MenuItem key={index} value={`${index + 1}`}>
                               {index + 1}
                             </MenuItem>
@@ -99,7 +120,7 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
                 </Col>
                 <Col xs={10}>
                   <Paragraph className={classes.ownersText} color="primary" noMargin size="lg">
-                    {`out of ${owners.size} owner(s)`}
+                    {`out of ${owners?.size} owner(s)`}
                   </Paragraph>
                 </Col>
               </Row>
@@ -107,6 +128,14 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
                 <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
                 </Paragraph>
+                {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
+                  <Row align="center">
+                    <Paragraph color="error" className={classes.executionWarningRow}>
+                      <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+                      This transaction will most likely fail. To save gas costs, avoid creating the transaction.
+                    </Paragraph>
+                  </Row>
+                )}
               </Row>
             </Block>
             <Hairline style={{ position: 'absolute', bottom: 85 }} />
@@ -124,5 +153,3 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
     </>
   )
 }
-
-export default withStyles(styles as any)(ChangeThreshold)
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
index e0f9c000a1..893de946b5 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
@@ -1,6 +1,7 @@
 import { lg, md, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   heading: {
     padding: `${sm} ${lg}`,
     justifyContent: 'space-between',
@@ -40,4 +41,11 @@ export const styles = () => ({
     position: 'absolute',
     bottom: '-25px',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
index ccc3f4e57d..753f758c9a 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-import ChangeThreshold from './ChangeThreshold'
+import { ChangeThresholdModal } from './ChangeThreshold'
 import { styles } from './style'
 
 import Modal from 'src/components/Modal'
@@ -30,7 +30,7 @@ const ThresholdSettings = (): React.ReactElement => {
   const [isModalOpen, setModalOpen] = useState(false)
   const dispatch = useDispatch()
   const threshold = useSelector(safeThresholdSelector)
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const owners = useSelector(safeOwnersSelector)
   const granted = useSelector(grantedSelector)
 
@@ -38,7 +38,7 @@ const ThresholdSettings = (): React.ReactElement => {
     setModalOpen((prevOpen) => !prevOpen)
   }
 
-  const onChangeThreshold = async (newThreshold) => {
+  const onChangeThreshold = async (newThreshold: number) => {
     const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
     const txData = safeInstance.methods.changeThreshold(newThreshold).encodeABI()
 
@@ -87,7 +87,7 @@ const ThresholdSettings = (): React.ReactElement => {
         open={isModalOpen}
         title="Change Required Confirmations"
       >
-        <ChangeThreshold
+        <ChangeThresholdModal
           onChangeThreshold={onChangeThreshold}
           onClose={toggleModal}
           owners={owners}

From a6685cc646c21b3a26bfdfa851f2568e3164ff72 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 16:56:04 -0300
Subject: [PATCH 32/84] Replace estimateGasCosts from every review tx modal
 with useEstimateTransactionGas

---
 .../ManageOwners/AddOwnerModal/index.tsx      |  2 +-
 .../AddOwnerModal/screens/Review/index.tsx    | 67 +++++++++++++------
 .../AddOwnerModal/screens/Review/style.ts     | 10 ++-
 .../ExpandedTx/RejectTxModal/index.tsx        | 51 +++++++-------
 .../ExpandedTx/RejectTxModal/style.ts         |  7 ++
 .../TxsTable/ExpandedTx/index.tsx             |  2 +-
 6 files changed, 89 insertions(+), 50 deletions(-)

diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
index a4e7380179..23f1f97305 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { OwnerForm } from './screens/OwnerForm'
-import ReviewAddOwner from './screens/Review'
+import { ReviewAddOwner } from './screens/Review'
 import ThresholdForm from './screens/ThresholdForm'
 
 import Modal from 'src/components/Modal'
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
index 2b74e8b099..265ead99a6 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
@@ -1,10 +1,9 @@
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
@@ -16,37 +15,59 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { safeNameSelector, safeOwnersSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 export const ADD_OWNER_SUBMIT_BTN_TEST_ID = 'add-owner-submit-btn'
 
 const { nativeCoin } = getNetworkInfo()
 
-const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+const useStyles = makeStyles(styles)
+
+type ReviewAddOwnerProps = {
+  onClickBack: () => void
+  onClose: () => void
+  onSubmit: () => void
+  values: {
+    ownerAddress: string
+    threshold: string
+    ownerName: string
+  }
+}
+
+export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: ReviewAddOwnerProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
+
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: data,
+    safeAddress,
+    txRecipient: safeAddress,
+  })
+
   useEffect(() => {
     let isCurrent = true
-    const estimateGas = async () => {
-      const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
 
-      const txData = safeInstance.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
+    const calculateAddOwnerData = async () => {
+      try {
+        const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+        const txData = safeInstance.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
 
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
+        if (isCurrent) {
+          setData(txData)
+        }
+      } catch (error) {
+        console.error('Error calculating ERC721 transfer data:', error.message)
       }
     }
-
-    estimateGas()
+    calculateAddOwnerData()
 
     return () => {
       isCurrent = false
@@ -68,7 +89,7 @@ const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) =>
         </IconButton>
       </Row>
       <Hairline />
-      <Block className={classes.formContainer}>
+      <Block>
         <Row className={classes.root}>
           <Col layout="column" xs={4}>
             <Block className={classes.details}>
@@ -162,6 +183,14 @@ const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) =>
           <br />
           {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
+        {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
+          <Row align="center">
+            <Paragraph color="error" className={classes.executionWarningRow}>
+              <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+              This transaction will most likely fail. To save gas costs, avoid creating the transaction.
+            </Paragraph>
+          </Row>
+        )}
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
@@ -183,5 +212,3 @@ const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) =>
     </>
   )
 }
-
-export default withStyles(styles as any)(ReviewAddOwner)
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
index 537bd9d93d..e59fa84371 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
@@ -1,6 +1,7 @@
 import { background, border, lg, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   root: {
     height: '372px',
   },
@@ -80,4 +81,11 @@ export const styles = () => ({
     textAlign: 'center',
     width: '100%',
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
index 4d92a4d7b9..f78ab152b7 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
@@ -1,9 +1,8 @@
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getNetworkInfo } from 'src/config'
 
 import { styles } from './style'
@@ -16,13 +15,14 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 
-import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info_red.svg'
 
 const useStyles = makeStyles(styles)
 
@@ -34,29 +34,17 @@ type Props = {
 
 const { nativeCoin } = getNetworkInfo()
 
-const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
+export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
   const dispatch = useDispatch()
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const classes = useStyles()
+  const threshold = useSelector(safeThresholdSelector)
 
-  useEffect(() => {
-    let isCurrent = true
-    const estimateGasCosts = async () => {
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, EMPTY_DATA)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGasCosts()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [safeAddress])
+  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: EMPTY_DATA,
+    safeAddress,
+    txRecipient: safeAddress,
+  })
 
   const sendReplacementTransaction = () => {
     dispatch(
@@ -98,6 +86,17 @@ const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
+          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
+            <Row align="center">
+              <Paragraph color="error" className={classes.executionWarningRow}>
+                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+                This transaction will most likely fail. To save gas costs,
+                {threshold && threshold > 1
+                  ? ` collect rejections and cancel this transaction.`
+                  : ` avoid executing the transaction.`}
+              </Paragraph>
+            </Row>
+          )}
         </Row>
       </Block>
       <Row align="center" className={classes.buttonRow}>
@@ -118,5 +117,3 @@ const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
     </Modal>
   )
 }
-
-export default RejectTxModal
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts
index 41ce38851a..5dec6bc974 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts
@@ -30,4 +30,11 @@ export const styles = createStyles({
     marginTop: sm,
     fontSize: md,
   },
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
 })
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
index 22e8de7e2e..14f6267064 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
@@ -5,7 +5,7 @@ import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 
 import ApproveTxModal from './ApproveTxModal'
 import OwnersColumn from './OwnersColumn'
-import RejectTxModal from './RejectTxModal'
+import { RejectTxModal } from './RejectTxModal'
 import TxDescription from './TxDescription'
 import { IncomingTx } from './IncomingTx'
 import { CreationTx } from './CreationTx'

From a8a3e210db310a4889c544bfe8b0b5aa20d06ba6 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 17:23:04 -0300
Subject: [PATCH 33/84] Extract isExecution calculation to
 useEstimateTransactionGas

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 28 ++++++++++++++++---
 src/logic/safe/transactions/gas.ts            | 11 ++------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 0de981c5ee..3c1a04d6a2 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react'
-import { estimateTransactionGas, TransactionEstimationProps } from 'src/logic/safe/transactions/gas'
+import { estimateTransactionGas } from 'src/logic/safe/transactions/gas'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
 import { getNetworkInfo } from 'src/config'
+import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 
 export enum EstimationStatus {
   LOADING = 'LOADING',
@@ -15,6 +16,19 @@ type TransactionGasEstimationResult = {
   txEstimationExecutionStatus: EstimationStatus
   estimatedGas: number // Amount of gas needed for execute or approve the transaction
   gasCosts: string // Cost of gas to the user (estimatedGas * gasPrice) in format '< | > 100'
+  isExecution: boolean // Returns true if the user will execute the tx or false if it just signs it
+}
+
+const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txConfirmations?: number): boolean =>
+  txConfirmations === threshold || !!preApprovingOwner || threshold === 1
+
+type UseEstimateTransactionGasProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  txConfirmations?: number
+  txAmount?: string
+  preApprovingOwner?: string
 }
 
 export const useEstimateTransactionGas = ({
@@ -24,11 +38,12 @@ export const useEstimateTransactionGas = ({
   txConfirmations,
   txAmount,
   preApprovingOwner,
-}: TransactionEstimationProps): TransactionGasEstimationResult => {
+}: UseEstimateTransactionGasProps): TransactionGasEstimationResult => {
   const [gasCosts, setGasCosts] = useState({
     txEstimationExecutionStatus: EstimationStatus.LOADING,
     estimatedGas: 0,
     gasCosts: '< 0.001',
+    isExecution: false,
   })
   const { nativeCoin } = getNetworkInfo()
 
@@ -41,13 +56,16 @@ export const useEstimateTransactionGas = ({
       }
 
       try {
+        const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+        const threshold = await safeInstance.methods.getThreshold().call()
+        const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
+
         const estimatedGas = await estimateTransactionGas({
           safeAddress,
           txRecipient,
           txData,
-          txConfirmations,
           txAmount,
-          preApprovingOwner,
+          isExecution,
         })
         const gasPrice = await calculateGasPrice()
         const estimatedGasCosts = estimatedGas * parseInt(gasPrice, 10)
@@ -58,6 +76,7 @@ export const useEstimateTransactionGas = ({
             txEstimationExecutionStatus: estimatedGas <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
             estimatedGas,
             gasCosts: formattedGasCosts,
+            isExecution,
           })
         }
       } catch (error) {
@@ -69,6 +88,7 @@ export const useEstimateTransactionGas = ({
           txEstimationExecutionStatus: EstimationStatus.FAILURE,
           estimatedGas,
           gasCosts: formattedGasCosts,
+          isExecution: false,
         })
       }
     }
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index c9ffdf9364..73eefd3416 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -39,18 +39,16 @@ export type TransactionEstimationProps = {
   txData: string
   safeAddress: string
   txRecipient: string
-  txConfirmations?: number
+  isExecution: boolean
   txAmount?: string
-  preApprovingOwner?: string
 }
 
 export const estimateTransactionGas = async ({
   txAmount,
-  txConfirmations,
   txData,
   txRecipient,
+  isExecution,
   safeAddress,
-  preApprovingOwner,
 }: TransactionEstimationProps): Promise<number> => {
   const web3 = getWeb3()
   const from = await getAccountFrom(web3)
@@ -59,15 +57,12 @@ export const estimateTransactionGas = async ({
     return 0
   }
 
-  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-  const threshold = await safeInstance.methods.getThreshold().call()
-  const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
-
   if (isExecution) {
     // Gas of executing a transaction within the safe (threshold reached and transaction executed)
     return await estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', CALL)
   }
 
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const nonce = await safeInstance.methods.nonce().call()
   const txHash = await safeInstance.methods
     .getTransactionHash(txRecipient, txAmount || '0', txData, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)

From c46195458ee2eebe36d75873c8544bee73e583a2 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 17:29:43 -0300
Subject: [PATCH 34/84] Creates TransactionFailText

---
 src/components/TransactionFailText/index.tsx | 56 ++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/TransactionFailText/index.tsx

diff --git a/src/components/TransactionFailText/index.tsx b/src/components/TransactionFailText/index.tsx
new file mode 100644
index 0000000000..84a9b9dd07
--- /dev/null
+++ b/src/components/TransactionFailText/index.tsx
@@ -0,0 +1,56 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { sm } from 'src/theme/variables'
+import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
+import Row from 'src/components/layout/Row'
+import Paragraph from 'src/components/layout/Paragraph'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info_red.svg'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { safeThresholdSelector } from 'src/logic/safe/store/selectors'
+
+const styles = createStyles({
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
+})
+
+const useStyles = makeStyles(styles)
+
+type TransactionFailTextProps = {
+  txEstimationExecutionStatus: EstimationStatus
+  isExecution: boolean
+}
+
+export const TransactionFailText = ({
+  txEstimationExecutionStatus,
+  isExecution,
+}: TransactionFailTextProps): React.ReactElement | null => {
+  const classes = useStyles()
+  const threshold = useSelector(safeThresholdSelector)
+
+  if (txEstimationExecutionStatus !== EstimationStatus.FAILURE) {
+    return null
+  }
+
+  let errorMessage = 'To save gas costs, avoid creating the transaction.'
+  if (isExecution) {
+    errorMessage =
+      threshold && threshold > 1
+        ? `To save gas costs, collect rejections and cancel this transaction.`
+        : `To save gas costs, avoid executing the transaction.`
+  }
+
+  return (
+    <Row align="center">
+      <Paragraph color="error" className={classes.executionWarningRow}>
+        <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+        This transaction will most likely fail. {errorMessage}
+      </Paragraph>
+    </Row>
+  )
+}

From 21fbedaece4555759949afe09b7327c2e84b14b1 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 17:30:25 -0300
Subject: [PATCH 35/84] Uses TransactionFailText in the review modals

---
 .../ContractInteraction/Review/index.tsx      | 21 ++++-------------
 .../ReviewCustomTx/index.tsx                  | 15 ++++--------
 .../screens/ReviewCollectible/index.tsx       | 21 ++++-------------
 .../SendModal/screens/ReviewTx/index.tsx      | 16 +++----------
 .../AddOwnerModal/screens/Review/index.tsx    | 16 ++++---------
 .../RemoveOwnerModal/screens/Review/index.tsx | 19 ++++-----------
 .../screens/Review/index.tsx                  | 19 ++++-----------
 .../ChangeThreshold/index.tsx                 | 15 ++++--------
 .../ExpandedTx/ApproveTxModal/index.tsx       | 19 ++++-----------
 .../ExpandedTx/RejectTxModal/index.tsx        | 23 +++++--------------
 10 files changed, 43 insertions(+), 141 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index a1c3494f49..50703b576d 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -19,10 +19,10 @@ import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/Co
 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/logic/safe/store/actions/createTransaction'
-import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { generateFormFieldKey, getValueFromTxInputs } from '../utils'
-import InfoIcon from 'src/assets/icons/info_red.svg'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 const useStyles = makeStyles(styles)
 
@@ -46,9 +46,8 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
   const classes = useStyles()
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const threshold = useSelector(safeThresholdSelector)
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: tx.data || '',
     safeAddress,
     txRecipient: tx.contractAddress || '',
@@ -150,17 +149,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-            <Row align="center">
-              <Paragraph color="error" className={classes.executionWarningRow}>
-                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs,
-                {threshold && threshold > 1
-                  ? ` collect rejections and cancel this transaction.`
-                  : ` avoid executing the transaction.`}
-              </Paragraph>
-            </Row>
-          )}
+          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
       </Block>
       <Hairline />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 5c576d045f..dc4944c2e6 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -27,8 +27,8 @@ import ArrowDown from '../../assets/arrow-down.svg'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 export type CustomTx = {
   contractAddress?: string
@@ -51,7 +51,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: tx.data ? tx.data.trim() : '',
     safeAddress,
     txRecipient: tx.contractAddress || '',
@@ -148,14 +148,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-            <Row align="center">
-              <Paragraph color="error" className={classes.executionWarningRow}>
-                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs, avoid creating the transaction.
-              </Paragraph>
-            </Row>
-          )}
+          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
       </Block>
       <Hairline />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 5e103a495a..9300bb234e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -15,7 +15,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
@@ -27,8 +27,8 @@ import ArrowDown from '../assets/arrow-down.svg'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
-import InfoIcon from 'src/assets/icons/info_red.svg'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 const { nativeCoin } = getNetworkInfo()
 
@@ -52,14 +52,13 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   const shortener = textShortener()
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const threshold = useSelector(safeThresholdSelector)
   const nftTokens = useSelector(nftTokensSelector)
   const txToken = nftTokens.find(
     ({ assetAddress, tokenId }) => assetAddress === tx.assetAddress && tokenId === tx.nftTokenId,
   )
   const [data, setData] = useState('')
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: tx.recipientAddress,
@@ -165,17 +164,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-            <Row align="center">
-              <Paragraph color="error" className={classes.executionWarningRow}>
-                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs,
-                {threshold && threshold > 1
-                  ? ` collect rejections and cancel this transaction.`
-                  : ` avoid executing the transaction.`}
-              </Paragraph>
-            </Row>
-          )}
+          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 62f20a082c..fb6f0547a4 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -37,6 +37,7 @@ import InfoIcon from 'src/assets/icons/info_red.svg'
 import { TokenProps } from 'src/logic/tokens/store/model/token'
 import { RecordOf } from 'immutable'
 import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from '../../../../../../../components/TransactionFailText'
 const useStyles = makeStyles(styles)
 
 const { nativeCoin } = getNetworkInfo()
@@ -104,7 +105,6 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const tokens = useSelector(extendedSafeTokensSelector)
-  const threshold = useSelector(safeThresholdSelector)
   const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
   const isSendingNativeToken = sameAddress(txToken?.address, nativeCoin.address)
   const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address || ''
@@ -112,7 +112,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const txAmount = useTxAmount(tx, isSendingNativeToken, txToken)
   const data = useTxData(isSendingNativeToken, txAmount, tx.recipientAddress, txToken)
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient,
@@ -223,17 +223,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
           <Paragraph data-testid="fee-meg-review-step">
             {`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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-            <Row align="center">
-              <Paragraph color="error" className={classes.executionWarningRow}>
-                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs,
-                {threshold && threshold > 1
-                  ? ` collect rejections and cancel this transaction.`
-                  : ` avoid executing the transaction.`}
-              </Paragraph>
-            </Row>
-          )}
+          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
index 265ead99a6..5b06b8db07 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
@@ -18,9 +18,8 @@ import { safeNameSelector, safeOwnersSelector, safeParamAddressFromStateSelector
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import Img from 'src/components/layout/Img'
-import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 export const ADD_OWNER_SUBMIT_BTN_TEST_ID = 'add-owner-submit-btn'
 
@@ -46,7 +45,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: safeAddress,
@@ -183,14 +182,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
           <br />
           {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
-        {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-          <Row align="center">
-            <Paragraph color="error" className={classes.executionWarningRow}>
-              <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-              This transaction will most likely fail. To save gas costs, avoid creating the transaction.
-            </Paragraph>
-          </Row>
-        )}
+        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
index 57fbee4bf4..2430ded0af 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@@ -21,9 +21,8 @@ import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
 import { List } from 'immutable'
 import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import Img from 'src/components/layout/Img'
-import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 export const REMOVE_OWNER_REVIEW_BTN_TEST_ID = 'remove-owner-review-btn'
 
@@ -50,14 +49,13 @@ export const ReviewRemoveOwnerModal = ({
 }: ReviewRemoveOwnerProps): React.ReactElement => {
   const classes = useStyles()
   const [data, setData] = useState('')
-  const [removeOwnerError, setRemoveOwnerError] = useState(false)
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: safeAddress,
@@ -68,7 +66,6 @@ export const ReviewRemoveOwnerModal = ({
 
     if (!threshold) {
       console.error("Threshold value was not define, tx can't be executed")
-      setRemoveOwnerError(true)
       return
     }
 
@@ -203,15 +200,7 @@ export const ReviewRemoveOwnerModal = ({
           <br />
           {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
-        {txEstimationExecutionStatus === EstimationStatus.FAILURE ||
-          (removeOwnerError && (
-            <Row align="center">
-              <Paragraph color="error" className={classes.executionWarningRow}>
-                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs, avoid creating the transaction.
-              </Paragraph>
-            </Row>
-          ))}
+        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
index b32af48dc4..cb08f425c7 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
@@ -27,9 +27,8 @@ import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
 import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
 
 import { styles } from './style'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import Img from 'src/components/layout/Img'
-import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn'
 
@@ -66,7 +65,7 @@ export const ReviewReplaceOwnerModal = ({
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: safeAddress,
@@ -225,17 +224,7 @@ export const ReviewReplaceOwnerModal = ({
           <br />
           {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
-        {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-          <Row align="center">
-            <Paragraph color="error" className={classes.executionWarningRow}>
-              <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-              This transaction will most likely fail. To save gas costs,
-              {threshold && threshold > 1
-                ? ` collect rejections and cancel this transaction.`
-                : ` avoid executing the transaction.`}
-            </Paragraph>
-          </Row>
-        )}
+        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 1223726032..6252c1f91a 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -19,9 +19,9 @@ import Row from 'src/components/layout/Row'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { SafeOwner } from 'src/logic/safe/store/models/safe'
 import { List } from 'immutable'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import Img from 'src/components/layout/Img'
-import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 const THRESHOLD_FIELD_NAME = 'threshold'
 
@@ -128,14 +128,7 @@ export const ChangeThresholdModal = ({
                 <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
                 </Paragraph>
-                {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-                  <Row align="center">
-                    <Paragraph color="error" className={classes.executionWarningRow}>
-                      <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                      This transaction will most likely fail. To save gas costs, avoid creating the transaction.
-                    </Paragraph>
-                  </Row>
-                )}
+                <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={false} />
               </Row>
             </Block>
             <Hairline style={{ position: 'absolute', bottom: 85 }} />
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index dc3bd5d44f..dd047706b4 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -22,9 +22,8 @@ import processTransaction from 'src/logic/safe/store/actions/processTransaction'
 
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
-import InfoIcon from 'src/assets/icons/info_red.svg'
-import Img from 'src/components/layout/Img'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 const useStyles = makeStyles(styles)
 
@@ -82,7 +81,7 @@ const ApproveTxModal = ({
   const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     safeAddress,
     txRecipient: tx.recipient,
     txData: tx.data || '',
@@ -157,17 +156,7 @@ const ApproveTxModal = ({
             } in this wallet to fund this confirmation.`}
           </Paragraph>
         </Row>
-        {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-          <Row align="center">
-            <Paragraph color="error" className={classes.executionWarningRow}>
-              <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-              This transaction will most likely fail. To save gas costs,
-              {isTheTxReadyToBeExecuted
-                ? ` collect rejections and cancel this transaction.`
-                : ` avoid executing the transaction.`}
-            </Paragraph>
-          </Row>
-        )}
+        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
       <Row align="center" className={classes.buttonRow}>
         <Button minHeight={42} minWidth={140} onClick={onClose}>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
index f78ab152b7..82c41711af 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
@@ -18,11 +18,11 @@ import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 
-import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import Img from 'src/components/layout/Img'
-import InfoIcon from 'src/assets/icons/info_red.svg'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 const useStyles = makeStyles(styles)
 
@@ -38,9 +38,8 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const classes = useStyles()
-  const threshold = useSelector(safeThresholdSelector)
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: EMPTY_DATA,
     safeAddress,
     txRecipient: safeAddress,
@@ -86,17 +85,7 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
           <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
-          {txEstimationExecutionStatus === EstimationStatus.FAILURE && (
-            <Row align="center">
-              <Paragraph color="error" className={classes.executionWarningRow}>
-                <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-                This transaction will most likely fail. To save gas costs,
-                {threshold && threshold > 1
-                  ? ` collect rejections and cancel this transaction.`
-                  : ` avoid executing the transaction.`}
-              </Paragraph>
-            </Row>
-          )}
+          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
       </Block>
       <Row align="center" className={classes.buttonRow}>

From 343e1f0e7cc24f6bc084f511d9bc0a2407b4f785 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 17:47:29 -0300
Subject: [PATCH 36/84] Remove unnecessary styles

---
 .../screens/ContractInteraction/ReviewCustomTx/style.ts    | 7 -------
 .../SendModal/screens/ContractInteraction/style.ts         | 7 -------
 .../Balances/SendModal/screens/ReviewCollectible/style.ts  | 7 -------
 .../Balances/SendModal/screens/ReviewTx/style.ts           | 7 -------
 .../ManageOwners/AddOwnerModal/screens/Review/style.ts     | 7 -------
 .../ManageOwners/RemoveOwnerModal/screens/Review/style.ts  | 7 -------
 .../ManageOwners/ReplaceOwnerModal/screens/Review/style.ts | 7 -------
 .../Settings/ThresholdSettings/ChangeThreshold/style.ts    | 7 -------
 8 files changed, 56 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
index 4fa12866f2..403654f05b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
@@ -55,11 +55,4 @@ export const styles = createStyles({
     boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     marginLeft: '15px',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
index 6a37490b86..9b18ef70e5 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
@@ -71,11 +71,4 @@ export const styles = createStyles({
   fullWidth: {
     justifyContent: 'space-between',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
index 755c050e68..e6e4fbcffa 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
@@ -42,11 +42,4 @@ export const styles = createStyles({
     boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     marginLeft: '15px',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
index 755c050e68..e6e4fbcffa 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
@@ -42,11 +42,4 @@ export const styles = createStyles({
     boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     marginLeft: '15px',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
index e59fa84371..8b0bd3a3b9 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
@@ -81,11 +81,4 @@ export const styles = createStyles({
     textAlign: 'center',
     width: '100%',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
index a13dfbe1f9..03e37357d9 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
@@ -81,11 +81,4 @@ export const styles = createStyles({
     textAlign: 'center',
     width: '100%',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
index 4934cd4373..a1a15e8998 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
@@ -86,11 +86,4 @@ export const styles = createStyles({
     textAlign: 'center',
     width: '100%',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
index 893de946b5..e3f31c05ac 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
@@ -41,11 +41,4 @@ export const styles = createStyles({
     position: 'absolute',
     bottom: '-25px',
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })

From 0c208b786c590f6d2e255db50311e6d178388487 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 17:47:53 -0300
Subject: [PATCH 37/84] Fix imports

---
 .../Balances/SendModal/screens/ReviewTx/index.tsx          | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index fb6f0547a4..fea1f29062 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -17,7 +17,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getSpendingLimitContract } from 'src/logic/contracts/safeContracts'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { getHumanFriendlyToken } from 'src/logic/tokens/store/actions/fetchTokens'
 import { sameAddress, ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
@@ -33,11 +33,10 @@ import ArrowDown from '../assets/arrow-down.svg'
 
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
-import InfoIcon from 'src/assets/icons/info_red.svg'
 import { TokenProps } from 'src/logic/tokens/store/model/token'
 import { RecordOf } from 'immutable'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from '../../../../../../../components/TransactionFailText'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 const useStyles = makeStyles(styles)
 
 const { nativeCoin } = getNetworkInfo()

From b1627295ec66035c86a87098efb9eba5966f3b15 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 17:49:32 -0300
Subject: [PATCH 38/84] Remove css

---
 .../TxsTable/ExpandedTx/ApproveTxModal/style.ts        | 10 ----------
 .../TxsTable/ExpandedTx/RejectTxModal/style.ts         |  7 -------
 2 files changed, 17 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts
index 1d629a53da..41ce38851a 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts
@@ -30,14 +30,4 @@ export const styles = createStyles({
     marginTop: sm,
     fontSize: md,
   },
-  paperModalContainer: {
-    height: '580px',
-  },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts
index 5dec6bc974..41ce38851a 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts
@@ -30,11 +30,4 @@ export const styles = createStyles({
     marginTop: sm,
     fontSize: md,
   },
-  executionWarningRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  warningIcon: {
-    marginRight: sm,
-  },
 })

From 74abb253b3f1ee824889149b01b10c355a5fdece Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 18:09:45 -0300
Subject: [PATCH 39/84] Fix missing style

---
 .../TxsTable/ExpandedTx/ApproveTxModal/index.tsx          | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index dd047706b4..2c2399ccf9 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -106,13 +106,7 @@ const ApproveTxModal = ({
   }
 
   return (
-    <Modal
-      description={description}
-      handleClose={onClose}
-      open={isOpen}
-      title={title}
-      paperClassName={txEstimationExecutionStatus ? classes.paperModalContainer : undefined}
-    >
+    <Modal description={description} handleClose={onClose} open={isOpen} title={title}>
       <Row align="center" className={classes.heading} grow>
         <Paragraph className={classes.headingText} noMargin weight="bolder">
           {title}

From d42cdc4d7f1354cbf2003a59409e228760b06857 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 11 Dec 2020 19:34:28 -0300
Subject: [PATCH 40/84] Remove duplicated function

---
 src/logic/safe/transactions/gas.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 73eefd3416..e4ea01aeb3 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -31,10 +31,6 @@ export const getPreValidatedSignatures = (from: string): string => {
   )}000000000000000000000000000000000000000000000000000000000000000001`
 }
 
-// @todo (agustin) check if this can be replaced by shouldExecuteTransaction() and refactor
-const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txConfirmations?: number): boolean =>
-  txConfirmations === threshold || !!preApprovingOwner || threshold === 1
-
 export type TransactionEstimationProps = {
   txData: string
   safeAddress: string

From fae6a1647f3b951f09d34c4fe1de84a4031f1833 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 14 Dec 2020 09:37:44 -0300
Subject: [PATCH 41/84] Fix modal height

---
 src/components/Modal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 40b6d1f791..69ff6ecc1c 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles(
       position: 'absolute',
       top: '120px',
       width: '500px',
-      height: '540px',
+      height: '580px',
       borderRadius: sm,
       backgroundColor: '#ffffff',
       boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',

From da08f32490878f6143468a0a436e35a6debddaa9 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 14 Dec 2020 11:18:39 -0300
Subject: [PATCH 42/84] Fix wrong selector usage

---
 .../Balances/SendModal/screens/ContractInteraction/index.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
index d6428befaf..6343387c47 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@@ -7,7 +7,7 @@ import GnoForm from 'src/components/forms/GnoForm'
 import Block from 'src/components/layout/Block'
 import Hairline from 'src/components/layout/Hairline'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import Paragraph from 'src/components/layout/Paragraph'
 import Buttons from './Buttons'
 import ContractABI from './ContractABI'
@@ -53,7 +53,7 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
   isABI,
 }) => {
   const classes = useStyles()
-  const { address: safeAddress = '' } = useSelector(safeSelector) || {}
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   let setCallResults
 
   React.useMemo(() => {

From 3df879b7654e4d0e454f82b9eb982810b2d800d4 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 14 Dec 2020 12:07:57 -0300
Subject: [PATCH 43/84] Fix missing null check on cancel tx confirmations

---
 .../safe/components/Transactions/TxsTable/ExpandedTx/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
index 14f6267064..1e27dceb15 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
@@ -107,7 +107,7 @@ const ExpandedSafeTx = ({ cancelTx, tx }: ExpandedSafeTxProps): ReactElement =>
 
   const thresholdReached = !isIncomingTx && threshold <= tx.confirmations.size
   const canExecute = !isIncomingTx && nonce === tx.nonce
-  const cancelThresholdReached = !!cancelTx && threshold <= cancelTx.confirmations.size
+  const cancelThresholdReached = !!cancelTx && threshold <= cancelTx.confirmations?.size
   const canExecuteCancel = nonce === tx.nonce
 
   const openRejectModal = () => {

From da1d5d8de947a1618cce86edd9b908322f428f7e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 14 Dec 2020 12:12:25 -0300
Subject: [PATCH 44/84] Add guard for CLOSE_SNACKBAR action when tx was already
 dismissed

---
 src/logic/notifications/store/reducer/notifications.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/logic/notifications/store/reducer/notifications.ts b/src/logic/notifications/store/reducer/notifications.ts
index 802ab9bd85..bb05f74783 100644
--- a/src/logic/notifications/store/reducer/notifications.ts
+++ b/src/logic/notifications/store/reducer/notifications.ts
@@ -20,7 +20,7 @@ export default handleActions(
       const { dismissAll, key } = action.payload
 
       if (key) {
-        return state.update(key, (prev) => prev.set('dismissed', true))
+        return state.update(key, (prev) => prev?.set('dismissed', true))
       }
       if (dismissAll) {
         return state.withMutations((map) => {

From 00ccae2beea1ce6b64786a26a595831b3bb246f9 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 14 Dec 2020 12:54:48 -0300
Subject: [PATCH 45/84] Improves useEstimateTransactionGas in review custom tx
 and contract interaction review

---
 .../ContractInteraction/Review/index.tsx      | 31 +++++++++++++------
 .../ReviewCustomTx/index.tsx                  |  5 +--
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 50703b576d..70bbfcff10 100644
--- 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,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -46,24 +46,35 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
   const classes = useStyles()
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const [txParameters, setTxParameters] = useState<{
+    txRecipient: string
+    txData: string
+    txAmount: string
+  }>({ txData: '', txAmount: '', txRecipient: '' })
 
   const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
-    txData: tx.data || '',
     safeAddress,
-    txRecipient: tx.contractAddress || '',
+    txRecipient: txParameters?.txRecipient,
+    txAmount: txParameters?.txAmount,
+    txData: txParameters?.txData,
   })
 
+  useEffect(() => {
+    setTxParameters({
+      txRecipient: tx.contractAddress as string,
+      txAmount: tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0',
+      txData: tx.data ? tx.data.trim() : '',
+    })
+  }, [tx.contractAddress, tx.value, tx.data, safeAddress])
+
   const submitTx = async () => {
-    const txRecipient = tx.contractAddress
-    const txData = tx.data ? tx.data.trim() : ''
-    const txValue = tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0'
-    if (safeAddress) {
+    if (safeAddress && txParameters) {
       dispatch(
         createTransaction({
           safeAddress,
-          to: txRecipient as string,
-          valueInWei: txValue,
-          txData,
+          to: txParameters?.txRecipient,
+          valueInWei: txParameters?.txAmount,
+          txData: txParameters?.txData,
           notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
         }),
       )
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index dc4944c2e6..1d800fabad 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -52,9 +52,10 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
   const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
-    txData: tx.data ? tx.data.trim() : '',
     safeAddress,
-    txRecipient: tx.contractAddress || '',
+    txRecipient: tx.contractAddress as string,
+    txData: tx.data ? tx.data.trim() : '',
+    txAmount: tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0',
   })
 
   const submitTx = async (): Promise<void> => {

From 6346317f9324fb348b134d8c345da2e4e243052a Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 15 Dec 2020 09:58:34 -0300
Subject: [PATCH 46/84] Fix hook dependency

---
 .../Balances/SendModal/screens/ContractInteraction/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
index 6343387c47..c3ea4a7d07 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@@ -60,7 +60,7 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
     if (contractAddress) {
       initialValues.contractAddress = contractAddress
     }
-  }, [contractAddress, initialValues.contractAddress])
+  }, [contractAddress, initialValues])
 
   const saveForm = async (values: CreatedTx): Promise<void> => {
     await handleSubmit(values, false)

From fcfd8bbceafdc7dd6cc28913714f1617ac105e24 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 16 Dec 2020 13:55:45 -0300
Subject: [PATCH 47/84] Fix review replace/remove/add owner modals styling

---
 .../ManageOwners/AddOwnerModal/screens/Review/style.ts        | 4 +++-
 .../ManageOwners/RemoveOwnerModal/screens/Review/style.ts     | 4 +++-
 .../ManageOwners/ReplaceOwnerModal/screens/Review/style.ts    | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
index 8b0bd3a3b9..6b8f83c3ee 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
@@ -77,7 +77,9 @@ export const styles = createStyles({
     },
   },
   gasCostsContainer: {
-    padding: `0 ${lg}`,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
     textAlign: 'center',
     width: '100%',
   },
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
index 03e37357d9..090072fa9d 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
@@ -77,7 +77,9 @@ export const styles = createStyles({
     },
   },
   gasCostsContainer: {
-    padding: `0 ${lg}`,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
     textAlign: 'center',
     width: '100%',
   },
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
index a1a15e8998..5bbbe83185 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
@@ -82,7 +82,9 @@ export const styles = createStyles({
     },
   },
   gasCostsContainer: {
-    padding: `0 ${lg}`,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
     textAlign: 'center',
     width: '100%',
   },

From 1b2815ba8ad22aee342c22a46ca5040cb8ec0351 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 23 Dec 2020 10:17:02 -0300
Subject: [PATCH 48/84] Refactor response of useEstimateTransactionGas

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 56 +++++++++++--------
 .../ContractInteraction/Review/index.tsx      |  4 +-
 .../ReviewCustomTx/index.tsx                  |  4 +-
 .../screens/ReviewCollectible/index.tsx       |  4 +-
 .../SendModal/screens/ReviewTx/index.tsx      |  4 +-
 .../AddOwnerModal/screens/Review/index.tsx    |  4 +-
 .../RemoveOwnerModal/screens/Review/index.tsx |  4 +-
 .../screens/Review/index.tsx                  |  4 +-
 .../ChangeThreshold/index.tsx                 |  4 +-
 .../ExpandedTx/ApproveTxModal/index.tsx       |  4 +-
 .../ExpandedTx/RejectTxModal/index.tsx        |  4 +-
 11 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 3c1a04d6a2..5b33c143d9 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -12,13 +12,6 @@ export enum EstimationStatus {
   SUCCESS = 'SUCCESS',
 }
 
-type TransactionGasEstimationResult = {
-  txEstimationExecutionStatus: EstimationStatus
-  estimatedGas: number // Amount of gas needed for execute or approve the transaction
-  gasCosts: string // Cost of gas to the user (estimatedGas * gasPrice) in format '< | > 100'
-  isExecution: boolean // Returns true if the user will execute the tx or false if it just signs it
-}
-
 const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txConfirmations?: number): boolean =>
   txConfirmations === threshold || !!preApprovingOwner || threshold === 1
 
@@ -31,6 +24,15 @@ type UseEstimateTransactionGasProps = {
   preApprovingOwner?: string
 }
 
+type TransactionGasEstimationResult = {
+  txEstimationExecutionStatus: EstimationStatus
+  gasEstimation: number // Amount of gas needed for execute or approve the transaction
+  gasCosts: string // Cost of gas in raw format (estimatedGas * gasPrice)
+  gasCostHumanReadable: string // Cost of gas in format '< | > 100'
+  gasPrice: string // Current price of gas unit
+  isExecution: boolean // Returns true if the user will execute the tx or false if it just signs it
+}
+
 export const useEstimateTransactionGas = ({
   safeAddress,
   txRecipient,
@@ -39,10 +41,12 @@ export const useEstimateTransactionGas = ({
   txAmount,
   preApprovingOwner,
 }: UseEstimateTransactionGasProps): TransactionGasEstimationResult => {
-  const [gasCosts, setGasCosts] = useState({
+  const [gasEstimation, setGasEstimation] = useState<TransactionGasEstimationResult>({
     txEstimationExecutionStatus: EstimationStatus.LOADING,
-    estimatedGas: 0,
-    gasCosts: '< 0.001',
+    gasEstimation: 0,
+    gasCosts: '0',
+    gasCostHumanReadable: '< 0.001',
+    gasPrice: '0',
     isExecution: false,
   })
   const { nativeCoin } = getNetworkInfo()
@@ -60,7 +64,7 @@ export const useEstimateTransactionGas = ({
         const threshold = await safeInstance.methods.getThreshold().call()
         const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
 
-        const estimatedGas = await estimateTransactionGas({
+        const gasEstimation = await estimateTransactionGas({
           safeAddress,
           txRecipient,
           txData,
@@ -68,26 +72,30 @@ export const useEstimateTransactionGas = ({
           isExecution,
         })
         const gasPrice = await calculateGasPrice()
-        const estimatedGasCosts = estimatedGas * parseInt(gasPrice, 10)
+        const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
         const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-        const formattedGasCosts = formatAmount(gasCosts)
+        const gasCostHumanReadable = formatAmount(gasCosts)
         if (isCurrent) {
-          setGasCosts({
-            txEstimationExecutionStatus: estimatedGas <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
-            estimatedGas,
-            gasCosts: formattedGasCosts,
+          setGasEstimation({
+            txEstimationExecutionStatus: gasEstimation <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
+            gasEstimation,
+            gasCosts,
+            gasCostHumanReadable,
+            gasPrice,
             isExecution,
           })
         }
       } catch (error) {
         // We put a fixed the amount of gas to let the user try to execute the tx, but it's not accurate so it will probably fail
-        const estimatedGas = 10000
-        const gasCosts = fromTokenUnit(estimatedGas, nativeCoin.decimals)
-        const formattedGasCosts = formatAmount(gasCosts)
-        setGasCosts({
+        const gasEstimation = 10000
+        const gasCosts = fromTokenUnit(gasEstimation, nativeCoin.decimals)
+        const gasCostHumanReadable = formatAmount(gasCosts)
+        setGasEstimation({
           txEstimationExecutionStatus: EstimationStatus.FAILURE,
-          estimatedGas,
-          gasCosts: formattedGasCosts,
+          gasEstimation,
+          gasCosts,
+          gasCostHumanReadable,
+          gasPrice: '1',
           isExecution: false,
         })
       }
@@ -100,5 +108,5 @@ export const useEstimateTransactionGas = ({
     }
   }, [txData, safeAddress, txRecipient, txConfirmations, txAmount, preApprovingOwner, nativeCoin.decimals])
 
-  return gasCosts
+  return gasEstimation
 }
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 70bbfcff10..80d2851afc 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -52,7 +52,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     txAmount: string
   }>({ txData: '', txAmount: '', txRecipient: '' })
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     safeAddress,
     txRecipient: txParameters?.txRecipient,
     txAmount: txParameters?.txAmount,
@@ -158,7 +158,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
         </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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 1d800fabad..6029e49de0 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -51,7 +51,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     safeAddress,
     txRecipient: tx.contractAddress as string,
     txData: tx.data ? tx.data.trim() : '',
@@ -147,7 +147,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
         </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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 9300bb234e..438b8a4ed5 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -58,7 +58,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   )
   const [data, setData] = useState('')
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: tx.recipientAddress,
@@ -162,7 +162,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
         )}
         <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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index fea1f29062..bcfa98dd23 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -111,7 +111,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const txAmount = useTxAmount(tx, isSendingNativeToken, txToken)
   const data = useTxData(isSendingNativeToken, txAmount, tx.recipientAddress, txToken)
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient,
@@ -220,7 +220,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
         </Row>
         <Row>
           <Paragraph data-testid="fee-meg-review-step">
-            {`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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
index 5b06b8db07..9f05d499f5 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
@@ -45,7 +45,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: safeAddress,
@@ -180,7 +180,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
         <Paragraph>
           You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
           <br />
-          {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+          {`Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
         <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
index 2430ded0af..9ff3add0a9 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@@ -55,7 +55,7 @@ export const ReviewRemoveOwnerModal = ({
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: safeAddress,
@@ -198,7 +198,7 @@ export const ReviewRemoveOwnerModal = ({
         <Paragraph>
           You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
           <br />
-          {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+          {`Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
         <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
index cb08f425c7..4dbf6c6a67 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
@@ -65,7 +65,7 @@ export const ReviewReplaceOwnerModal = ({
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: safeAddress,
@@ -222,7 +222,7 @@ export const ReviewReplaceOwnerModal = ({
         <Paragraph>
           You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
           <br />
-          {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+          {`Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
         <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 6252c1f91a..0f46a0098a 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -47,7 +47,7 @@ export const ChangeThresholdModal = ({
   const classes = useStyles()
   const [data, setData] = useState('')
 
-  const { gasCosts, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus } = useEstimateTransactionGas({
     txData: data,
     safeAddress,
     txRecipient: safeAddress,
@@ -126,7 +126,7 @@ export const ChangeThresholdModal = ({
               </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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+                  {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
                 </Paragraph>
                 <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={false} />
               </Row>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 2c2399ccf9..4730c33464 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -81,7 +81,7 @@ const ApproveTxModal = ({
   const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     safeAddress,
     txRecipient: tx.recipient,
     txData: tx.data || '',
@@ -145,7 +145,7 @@ const ApproveTxModal = ({
           <Paragraph>
             {`You're about to ${
               approveAndExecute ? 'execute' : 'approve'
-            } a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${
+            } a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${
               nativeCoin.name
             } in this wallet to fund this confirmation.`}
           </Paragraph>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
index 82c41711af..6ac2cdbf8b 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
@@ -39,7 +39,7 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const classes = useStyles()
 
-  const { gasCosts, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: EMPTY_DATA,
     safeAddress,
     txRecipient: safeAddress,
@@ -83,7 +83,7 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
         </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) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>

From ccf8a4e77cee5695b677b623d18e87de5154414b Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 23 Dec 2020 10:25:10 -0300
Subject: [PATCH 49/84] Remove safeAddress as param to the
 useEstimateTransactionGas

---
 src/logic/hooks/useEstimateTransactionGas.tsx                | 5 +++--
 .../SendModal/screens/ContractInteraction/Review/index.tsx   | 1 -
 .../screens/ContractInteraction/ReviewCustomTx/index.tsx     | 1 -
 .../Balances/SendModal/screens/ReviewCollectible/index.tsx   | 1 -
 .../components/Balances/SendModal/screens/ReviewTx/index.tsx | 1 -
 .../ManageOwners/AddOwnerModal/screens/Review/index.tsx      | 1 -
 .../ManageOwners/RemoveOwnerModal/screens/Review/index.tsx   | 1 -
 .../ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx  | 1 -
 .../Settings/ThresholdSettings/ChangeThreshold/index.tsx     | 1 -
 .../TxsTable/ExpandedTx/ApproveTxModal/index.tsx             | 1 -
 .../Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx | 1 -
 11 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 5b33c143d9..a572f87379 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -5,6 +5,8 @@ import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
 import { getNetworkInfo } from 'src/config'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
+import { useSelector } from 'react-redux'
+import { safeParamAddressFromStateSelector } from '../safe/store/selectors'
 
 export enum EstimationStatus {
   LOADING = 'LOADING',
@@ -17,7 +19,6 @@ const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txC
 
 type UseEstimateTransactionGasProps = {
   txData: string
-  safeAddress: string
   txRecipient: string
   txConfirmations?: number
   txAmount?: string
@@ -34,7 +35,6 @@ type TransactionGasEstimationResult = {
 }
 
 export const useEstimateTransactionGas = ({
-  safeAddress,
   txRecipient,
   txData,
   txConfirmations,
@@ -50,6 +50,7 @@ export const useEstimateTransactionGas = ({
     isExecution: false,
   })
   const { nativeCoin } = getNetworkInfo()
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
   useEffect(() => {
     let isCurrent = true
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 80d2851afc..0b93dc1eb9 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -53,7 +53,6 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
   }>({ txData: '', txAmount: '', txRecipient: '' })
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
-    safeAddress,
     txRecipient: txParameters?.txRecipient,
     txAmount: txParameters?.txAmount,
     txData: txParameters?.txData,
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 6029e49de0..67ef8f0161 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -52,7 +52,6 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
-    safeAddress,
     txRecipient: tx.contractAddress as string,
     txData: tx.data ? tx.data.trim() : '',
     txAmount: tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0',
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 438b8a4ed5..7662358d21 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -60,7 +60,6 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
-    safeAddress,
     txRecipient: tx.recipientAddress,
   })
 
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index bcfa98dd23..c2f200e67f 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -113,7 +113,6 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
-    safeAddress,
     txRecipient,
   })
 
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
index 9f05d499f5..b192dc2ae8 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
@@ -47,7 +47,6 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
-    safeAddress,
     txRecipient: safeAddress,
   })
 
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
index 9ff3add0a9..cae7755bfe 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@@ -57,7 +57,6 @@ export const ReviewRemoveOwnerModal = ({
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
-    safeAddress,
     txRecipient: safeAddress,
   })
 
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
index 4dbf6c6a67..9e8383c1c3 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
@@ -67,7 +67,6 @@ export const ReviewReplaceOwnerModal = ({
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
-    safeAddress,
     txRecipient: safeAddress,
   })
 
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 0f46a0098a..63637674ec 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -49,7 +49,6 @@ export const ChangeThresholdModal = ({
 
   const { gasCostHumanReadable, txEstimationExecutionStatus } = useEstimateTransactionGas({
     txData: data,
-    safeAddress,
     txRecipient: safeAddress,
   })
 
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 4730c33464..49c6df9db8 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -82,7 +82,6 @@ const ApproveTxModal = ({
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
-    safeAddress,
     txRecipient: tx.recipient,
     txData: tx.data || '',
     txConfirmations: tx.confirmations.size,
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
index 6ac2cdbf8b..4636deb1fb 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
@@ -41,7 +41,6 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
 
   const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: EMPTY_DATA,
-    safeAddress,
     txRecipient: safeAddress,
   })
 

From 07427421971f1eae6347c61652440118bfabb64c Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 23 Dec 2020 10:29:29 -0300
Subject: [PATCH 50/84] Improves how threshold is obtained in
 useEstimateTransactionGas.tsx

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index a572f87379..ac3c504516 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -4,9 +4,8 @@ import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
 import { getNetworkInfo } from 'src/config'
-import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { useSelector } from 'react-redux'
-import { safeParamAddressFromStateSelector } from '../safe/store/selectors'
+import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 
 export enum EstimationStatus {
   LOADING = 'LOADING',
@@ -51,6 +50,7 @@ export const useEstimateTransactionGas = ({
   })
   const { nativeCoin } = getNetworkInfo()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const threshold = useSelector(safeThresholdSelector)
 
   useEffect(() => {
     let isCurrent = true
@@ -61,8 +61,6 @@ export const useEstimateTransactionGas = ({
       }
 
       try {
-        const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-        const threshold = await safeInstance.methods.getThreshold().call()
         const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
 
         const gasEstimation = await estimateTransactionGas({
@@ -107,7 +105,7 @@ export const useEstimateTransactionGas = ({
     return () => {
       isCurrent = false
     }
-  }, [txData, safeAddress, txRecipient, txConfirmations, txAmount, preApprovingOwner, nativeCoin.decimals])
+  }, [txData, safeAddress, txRecipient, txConfirmations, txAmount, preApprovingOwner, nativeCoin.decimals, threshold])
 
   return gasEstimation
 }

From 9d498b1613219bdf5e5ed6a2a9cdfc49a2a7277e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 23 Dec 2020 11:46:22 -0300
Subject: [PATCH 51/84] Rename gasCostHumanReadable to gasCostFormatted

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 24 +++++++++----------
 .../ContractInteraction/Review/index.tsx      |  4 ++--
 .../ReviewCustomTx/index.tsx                  |  4 ++--
 .../screens/ReviewCollectible/index.tsx       |  4 ++--
 .../SendModal/screens/ReviewTx/index.tsx      |  4 ++--
 .../AddOwnerModal/screens/Review/index.tsx    |  4 ++--
 .../RemoveOwnerModal/screens/Review/index.tsx |  4 ++--
 .../screens/Review/index.tsx                  |  4 ++--
 .../ChangeThreshold/index.tsx                 |  4 ++--
 .../ExpandedTx/ApproveTxModal/index.tsx       |  4 ++--
 .../ExpandedTx/RejectTxModal/index.tsx        |  4 ++--
 11 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index ac3c504516..31fd1285f9 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -27,8 +27,8 @@ type UseEstimateTransactionGasProps = {
 type TransactionGasEstimationResult = {
   txEstimationExecutionStatus: EstimationStatus
   gasEstimation: number // Amount of gas needed for execute or approve the transaction
-  gasCosts: string // Cost of gas in raw format (estimatedGas * gasPrice)
-  gasCostHumanReadable: string // Cost of gas in format '< | > 100'
+  gasCost: string // Cost of gas in raw format (estimatedGas * gasPrice)
+  gasCostFormatted: string // Cost of gas in format '< | > 100'
   gasPrice: string // Current price of gas unit
   isExecution: boolean // Returns true if the user will execute the tx or false if it just signs it
 }
@@ -43,8 +43,8 @@ export const useEstimateTransactionGas = ({
   const [gasEstimation, setGasEstimation] = useState<TransactionGasEstimationResult>({
     txEstimationExecutionStatus: EstimationStatus.LOADING,
     gasEstimation: 0,
-    gasCosts: '0',
-    gasCostHumanReadable: '< 0.001',
+    gasCost: '0',
+    gasCostFormatted: '< 0.001',
     gasPrice: '0',
     isExecution: false,
   })
@@ -72,14 +72,14 @@ export const useEstimateTransactionGas = ({
         })
         const gasPrice = await calculateGasPrice()
         const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
-        const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-        const gasCostHumanReadable = formatAmount(gasCosts)
+        const gasCost = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
+        const gasCostFormatted = formatAmount(gasCost)
         if (isCurrent) {
           setGasEstimation({
             txEstimationExecutionStatus: gasEstimation <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
             gasEstimation,
-            gasCosts,
-            gasCostHumanReadable,
+            gasCost,
+            gasCostFormatted,
             gasPrice,
             isExecution,
           })
@@ -87,13 +87,13 @@ export const useEstimateTransactionGas = ({
       } catch (error) {
         // We put a fixed the amount of gas to let the user try to execute the tx, but it's not accurate so it will probably fail
         const gasEstimation = 10000
-        const gasCosts = fromTokenUnit(gasEstimation, nativeCoin.decimals)
-        const gasCostHumanReadable = formatAmount(gasCosts)
+        const gasCost = fromTokenUnit(gasEstimation, nativeCoin.decimals)
+        const gasCostFormatted = formatAmount(gasCost)
         setGasEstimation({
           txEstimationExecutionStatus: EstimationStatus.FAILURE,
           gasEstimation,
-          gasCosts,
-          gasCostHumanReadable,
+          gasCost,
+          gasCostFormatted,
           gasPrice: '1',
           isExecution: false,
         })
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 0b93dc1eb9..4199510a3b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -52,7 +52,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     txAmount: string
   }>({ txData: '', txAmount: '', txRecipient: '' })
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txRecipient: txParameters?.txRecipient,
     txAmount: txParameters?.txAmount,
     txData: txParameters?.txData,
@@ -157,7 +157,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
         </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 ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 67ef8f0161..c8a92d7c3b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -51,7 +51,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txRecipient: tx.contractAddress as string,
     txData: tx.data ? tx.data.trim() : '',
     txAmount: tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0',
@@ -146,7 +146,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
         </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 ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 7662358d21..68c49da891 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -58,7 +58,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   )
   const [data, setData] = useState('')
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     txRecipient: tx.recipientAddress,
   })
@@ -161,7 +161,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
         )}
         <Row>
           <Paragraph>
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index c2f200e67f..af1cd966a7 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -111,7 +111,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const txAmount = useTxAmount(tx, isSendingNativeToken, txToken)
   const data = useTxData(isSendingNativeToken, txAmount, tx.recipientAddress, txToken)
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     txRecipient,
   })
@@ -219,7 +219,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
         </Row>
         <Row>
           <Paragraph data-testid="fee-meg-review-step">
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
index b192dc2ae8..8c1ba1ae73 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
@@ -45,7 +45,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -179,7 +179,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
         <Paragraph>
           You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
           <br />
-          {`Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+          {`Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
         <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
index cae7755bfe..3391f3fa09 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@@ -55,7 +55,7 @@ export const ReviewRemoveOwnerModal = ({
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -197,7 +197,7 @@ export const ReviewRemoveOwnerModal = ({
         <Paragraph>
           You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
           <br />
-          {`Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+          {`Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
         <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
index 9e8383c1c3..a93382399d 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
@@ -65,7 +65,7 @@ export const ReviewReplaceOwnerModal = ({
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -221,7 +221,7 @@ export const ReviewReplaceOwnerModal = ({
         <Paragraph>
           You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
           <br />
-          {`Make sure you have ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+          {`Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
         </Paragraph>
         <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 63637674ec..3b838f705f 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -47,7 +47,7 @@ export const ChangeThresholdModal = ({
   const classes = useStyles()
   const [data, setData] = useState('')
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -125,7 +125,7 @@ export const ChangeThresholdModal = ({
               </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 ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+                  {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
                 </Paragraph>
                 <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={false} />
               </Row>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 49c6df9db8..72f5708bb0 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -81,7 +81,7 @@ const ApproveTxModal = ({
   const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txRecipient: tx.recipient,
     txData: tx.data || '',
     txConfirmations: tx.confirmations.size,
@@ -144,7 +144,7 @@ const ApproveTxModal = ({
           <Paragraph>
             {`You're about to ${
               approveAndExecute ? 'execute' : 'approve'
-            } a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostHumanReadable} (fee price) ${
+            } a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${
               nativeCoin.name
             } in this wallet to fund this confirmation.`}
           </Paragraph>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
index 4636deb1fb..2f3cc3b1bc 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
@@ -39,7 +39,7 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const classes = useStyles()
 
-  const { gasCostHumanReadable, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
     txData: EMPTY_DATA,
     txRecipient: safeAddress,
   })
@@ -82,7 +82,7 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
         </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 ${gasCostHumanReadable} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
           </Paragraph>
           <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
         </Row>

From e60730d1eba1ef38e565ccd9b0045dd1cf28c838 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 4 Jan 2021 13:11:58 -0300
Subject: [PATCH 52/84] Add operation to useEstimateTransactionGas

---
 src/logic/hooks/useEstimateTransactionGas.tsx |  3 +++
 src/logic/safe/transactions/gas.ts            | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 31fd1285f9..e6f8f6eac7 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -22,6 +22,7 @@ type UseEstimateTransactionGasProps = {
   txConfirmations?: number
   txAmount?: string
   preApprovingOwner?: string
+  operation?: number
 }
 
 type TransactionGasEstimationResult = {
@@ -39,6 +40,7 @@ export const useEstimateTransactionGas = ({
   txConfirmations,
   txAmount,
   preApprovingOwner,
+  operation,
 }: UseEstimateTransactionGasProps): TransactionGasEstimationResult => {
   const [gasEstimation, setGasEstimation] = useState<TransactionGasEstimationResult>({
     txEstimationExecutionStatus: EstimationStatus.LOADING,
@@ -69,6 +71,7 @@ export const useEstimateTransactionGas = ({
           txData,
           txAmount,
           isExecution,
+          operation,
         })
         const gasPrice = await calculateGasPrice()
         const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index e4ea01aeb3..2f98bb853a 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -37,6 +37,7 @@ export type TransactionEstimationProps = {
   txRecipient: string
   isExecution: boolean
   txAmount?: string
+  operation?: number
 }
 
 export const estimateTransactionGas = async ({
@@ -45,6 +46,7 @@ export const estimateTransactionGas = async ({
   txRecipient,
   isExecution,
   safeAddress,
+  operation = CALL,
 }: TransactionEstimationProps): Promise<number> => {
   const web3 = getWeb3()
   const from = await getAccountFrom(web3)
@@ -55,13 +57,24 @@ export const estimateTransactionGas = async ({
 
   if (isExecution) {
     // Gas of executing a transaction within the safe (threshold reached and transaction executed)
-    return await estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', CALL)
+    return await estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', operation)
   }
 
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const nonce = await safeInstance.methods.nonce().call()
   const txHash = await safeInstance.methods
-    .getTransactionHash(txRecipient, txAmount || '0', txData, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
+    .getTransactionHash(
+      txRecipient,
+      txAmount || '0',
+      txData,
+      operation as number,
+      0,
+      0,
+      0,
+      ZERO_ADDRESS,
+      ZERO_ADDRESS,
+      nonce,
+    )
     .call({
       from,
     })

From 7ceda35f307aa3286672d53cce12fdb9590b1b07 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 4 Jan 2021 13:13:08 -0300
Subject: [PATCH 53/84] Refactor ConfirmTransactionModal to use
 useEstimateTransactionGas

---
 .../components/Apps/components/AppFrame.tsx   |  2 +-
 .../components/ConfirmTransactionModal.tsx    | 39 ++++++-------------
 2 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index be761418bf..28c47ff0fd 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -32,7 +32,7 @@ import { LoadingContainer } from 'src/components/LoaderContainer/index'
 import { TIMEOUT } from 'src/utils/constants'
 import { web3ReadOnly } from 'src/logic/wallets/getWeb3'
 
-import ConfirmTransactionModal from '../components/ConfirmTransactionModal'
+import { ConfirmTransactionModal } from '../components/ConfirmTransactionModal'
 import { useIframeMessageHandler } from '../hooks/useIframeMessageHandler'
 import { useLegalConsent } from '../hooks/useLegalConsent'
 import LegalDisclaimer from './LegalDisclaimer'
diff --git a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
index 90ba0cd7bb..06b95a08f4 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Icon, Text, Title, GenericModal, ModalFooterConfirmation } from '@gnosis.pm/safe-react-components'
+import { GenericModal, Icon, ModalFooterConfirmation, Text, Title } from '@gnosis.pm/safe-react-components'
 import { Transaction } from '@gnosis.pm/safe-apps-sdk-v1'
 import styled from 'styled-components'
 import { useDispatch } from 'react-redux'
@@ -20,11 +20,11 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts'
 import { DELEGATE_CALL, TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { encodeMultiSendCall } from 'src/logic/safe/transactions/multisend'
-import { estimateExecTransactionGas } from 'src/logic/safe/transactions/gas'
 
 import GasEstimationInfo from './GasEstimationInfo'
 import { getNetworkInfo } from 'src/config'
 import { TransactionParams } from './AppFrame'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 
 const isTxValid = (t: Transaction): boolean => {
   if (!['string', 'number'].includes(typeof t.value)) {
@@ -82,7 +82,7 @@ type OwnProps = {
 
 const { nativeCoin } = getNetworkInfo()
 
-const ConfirmTransactionModal = ({
+export const ConfirmTransactionModal = ({
   isOpen,
   app,
   txs,
@@ -95,31 +95,18 @@ const ConfirmTransactionModal = ({
   onTxReject,
 }: OwnProps): React.ReactElement | null => {
   const [estimatedSafeTxGas, setEstimatedSafeTxGas] = useState(0)
-  const [estimatingGas, setEstimatingGas] = useState(false)
+
+  const { gasEstimation, txEstimationExecutionStatus } = useEstimateTransactionGas({
+    txData: encodeMultiSendCall(txs),
+    txRecipient: MULTI_SEND_ADDRESS,
+    operation: DELEGATE_CALL,
+  })
 
   useEffect(() => {
-    const estimateGas = async () => {
-      try {
-        setEstimatingGas(true)
-        const safeTxGas = await estimateExecTransactionGas(
-          safeAddress,
-          encodeMultiSendCall(txs),
-          MULTI_SEND_ADDRESS,
-          '0',
-          DELEGATE_CALL,
-        )
-
-        setEstimatedSafeTxGas(safeTxGas)
-      } catch (err) {
-        console.error(err)
-      } finally {
-        setEstimatingGas(false)
-      }
-    }
     if (params?.safeTxGas) {
-      estimateGas()
+      setEstimatedSafeTxGas(gasEstimation)
     }
-  }, [params, safeAddress, txs])
+  }, [params, gasEstimation])
 
   const dispatch = useDispatch()
   if (!isOpen) {
@@ -204,7 +191,7 @@ const ConfirmTransactionModal = ({
           <GasEstimationInfo
             appEstimation={params.safeTxGas}
             internalEstimation={estimatedSafeTxGas}
-            loading={estimatingGas}
+            loading={txEstimationExecutionStatus === EstimationStatus.LOADING}
           />
         </div>
       )}
@@ -228,5 +215,3 @@ const ConfirmTransactionModal = ({
     />
   )
 }
-
-export default ConfirmTransactionModal

From f768d4c84c0160538a2ce5328a4ca0fbd62bea5a Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 4 Jan 2021 13:45:23 -0300
Subject: [PATCH 54/84] Refactor proccessTransaction to use
 getPreValidatedSignatures method

---
 src/logic/safe/store/actions/processTransaction.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/logic/safe/store/actions/processTransaction.ts b/src/logic/safe/store/actions/processTransaction.ts
index eced5a75c8..b08c966cf4 100644
--- a/src/logic/safe/store/actions/processTransaction.ts
+++ b/src/logic/safe/store/actions/processTransaction.ts
@@ -22,6 +22,7 @@ import { storeExecutedTx, storeSignedTx, storeTx } from 'src/logic/safe/store/ac
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 
 import { Dispatch, DispatchReturn } from './types'
+import { getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
 
 interface ProcessTransactionArgs {
   approveAndExecute: boolean
@@ -54,12 +55,9 @@ const processTransaction = ({
   const safeVersion = await getCurrentSafeVersion(safeInstance)
 
   let sigs = generateSignaturesFromTxConfirmations(tx.confirmations, approveAndExecute && userAddress)
-  // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
+
   if (!sigs) {
-    sigs = `0x000000000000000000000000${from.replace(
-      '0x',
-      '',
-    )}000000000000000000000000000000000000000000000000000000000000000001`
+    sigs = getPreValidatedSignatures(from)
   }
 
   const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, tx.origin)

From 694e450b0298d721c8edc6a2df3ea366d23c1910 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 4 Jan 2021 13:48:18 -0300
Subject: [PATCH 55/84] Fix default export of ApproveTxModal

---
 .../Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx | 4 +---
 .../components/Transactions/TxsTable/ExpandedTx/index.tsx     | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 72f5708bb0..40060bfffd 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -63,7 +63,7 @@ type Props = {
 }
 const { nativeCoin } = getNetworkInfo()
 
-const ApproveTxModal = ({
+export const ApproveTxModal = ({
   canExecute,
   isCancelTx = false,
   isOpen,
@@ -170,5 +170,3 @@ const ApproveTxModal = ({
     </Modal>
   )
 }
-
-export default ApproveTxModal
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
index e8febd30eb..274acf47e1 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
@@ -3,7 +3,7 @@ import React, { ReactElement, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 
-import ApproveTxModal from './ApproveTxModal'
+import { ApproveTxModal } from './ApproveTxModal'
 import OwnersColumn from './OwnersColumn'
 import { RejectTxModal } from './RejectTxModal'
 import TxDescription from './TxDescription'

From 2c5f21d14babf79b94d51644c19422654c209eac Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 5 Jan 2021 10:06:15 -0300
Subject: [PATCH 56/84] Rename estimateExecTransactionGas to
 estimateGasForTransactionCreation Remove estimateTransactionGas from gas.ts

---
 .../safe/store/actions/createTransaction.ts   |  5 +-
 src/logic/safe/transactions/gas.ts            | 60 +------------------
 2 files changed, 6 insertions(+), 59 deletions(-)

diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index 5052b5cca3..51dcd1fe74 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -14,7 +14,7 @@ import {
   saveTxToHistory,
   tryOffchainSigning,
 } from 'src/logic/safe/transactions'
-import { estimateExecTransactionGas, getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
+import { estimateGasForTransactionCreation, getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
@@ -90,7 +90,8 @@ const createTransaction = (
   const nonce = await getNewTxNonce(txNonce?.toString(), lastTx, safeInstance)
   const isExecution = await shouldExecuteTransaction(safeInstance, nonce, lastTx)
   const safeVersion = await getCurrentSafeVersion(safeInstance)
-  const safeTxGas = safeTxGasArg || (await estimateExecTransactionGas(safeAddress, txData, to, valueInWei, operation))
+  const safeTxGas =
+    safeTxGasArg || (await estimateGasForTransactionCreation(safeAddress, txData, to, valueInWei, operation))
 
   const sigs = getPreValidatedSignatures(from)
 
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 2f98bb853a..80cea1b106 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -1,9 +1,7 @@
 import { BigNumber } from 'bignumber.js'
-import { CALL } from '.'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
-import { EMPTY_DATA, calculateGasOf } from 'src/logic/wallets/ethTransactions'
-import { getAccountFrom, getWeb3 } from 'src/logic/wallets/getWeb3'
+import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
+import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { sameString } from 'src/utils/strings'
 
 // Receives the response data of the safe method requiredTxGas() and parses it to get the gas amount
@@ -31,58 +29,6 @@ export const getPreValidatedSignatures = (from: string): string => {
   )}000000000000000000000000000000000000000000000000000000000000000001`
 }
 
-export type TransactionEstimationProps = {
-  txData: string
-  safeAddress: string
-  txRecipient: string
-  isExecution: boolean
-  txAmount?: string
-  operation?: number
-}
-
-export const estimateTransactionGas = async ({
-  txAmount,
-  txData,
-  txRecipient,
-  isExecution,
-  safeAddress,
-  operation = CALL,
-}: TransactionEstimationProps): Promise<number> => {
-  const web3 = getWeb3()
-  const from = await getAccountFrom(web3)
-
-  if (!from) {
-    return 0
-  }
-
-  if (isExecution) {
-    // Gas of executing a transaction within the safe (threshold reached and transaction executed)
-    return await estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', operation)
-  }
-
-  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-  const nonce = await safeInstance.methods.nonce().call()
-  const txHash = await safeInstance.methods
-    .getTransactionHash(
-      txRecipient,
-      txAmount || '0',
-      txData,
-      operation as number,
-      0,
-      0,
-      0,
-      ZERO_ADDRESS,
-      ZERO_ADDRESS,
-      nonce,
-    )
-    .call({
-      from,
-    })
-  // Gas of approving the transaction (threshold not reached or user did not executed the transaction)
-  const approveTransactionTxData = await safeInstance.methods.approveHash(txHash).encodeABI()
-  return await calculateGasOf(approveTransactionTxData, from, safeAddress)
-}
-
 // Parses the result from the error message (GETH, OpenEthereum/Parity and Nethermind) and returns the data value
 export const getDataFromNodeErrorMessage = (errorMessage: string): string | undefined => {
   // Replace illegal characters that often comes within the error string (like � for example)
@@ -185,7 +131,7 @@ const calculateMinimumGasForTransaction = async (
   return 0
 }
 
-export const estimateExecTransactionGas = async (
+export const estimateGasForTransactionCreation = async (
   safeAddress: string,
   data: string,
   to: string,

From 40ec65d68e24b8e03990e51d2d9ac9154828f53b Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 5 Jan 2021 13:52:15 -0300
Subject: [PATCH 57/84] Make estimateGasForTransactionCreation throw error
 instead of 0 gas

---
 src/logic/safe/store/actions/createTransaction.ts | 9 +++++++--
 src/logic/safe/transactions/gas.ts                | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index 51dcd1fe74..97969aec5f 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -90,8 +90,13 @@ const createTransaction = (
   const nonce = await getNewTxNonce(txNonce?.toString(), lastTx, safeInstance)
   const isExecution = await shouldExecuteTransaction(safeInstance, nonce, lastTx)
   const safeVersion = await getCurrentSafeVersion(safeInstance)
-  const safeTxGas =
-    safeTxGasArg || (await estimateGasForTransactionCreation(safeAddress, txData, to, valueInWei, operation))
+  let safeTxGas
+  try {
+    safeTxGas =
+      safeTxGasArg || (await estimateGasForTransactionCreation(safeAddress, txData, to, valueInWei, operation))
+  } catch (error) {
+    safeTxGas = safeTxGasArg || 0
+  }
 
   const sigs = getPreValidatedSignatures(from)
 
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 80cea1b106..09d1a63b5e 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -163,6 +163,6 @@ export const estimateGasForTransactionCreation = async (
     )
   } catch (error) {
     console.info('Error calculating tx gas estimation', error.message)
-    return 0
+    throw error
   }
 }

From a1ac679a04e23523f127583b85dec79f7968a3e9 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 5 Jan 2021 14:14:38 -0300
Subject: [PATCH 58/84] Adds estimateGasForTransactionExecution and
 estimateGasForTransactionApproval to gas.ts

---
 src/logic/safe/transactions/gas.ts | 126 ++++++++++++++++++++++++++++-
 1 file changed, 125 insertions(+), 1 deletion(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 09d1a63b5e..d05b270ed9 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -1,8 +1,10 @@
 import { BigNumber } from 'bignumber.js'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
+import { calculateGasOf, EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { sameString } from 'src/utils/strings'
+import { CALL } from './send'
+import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 
 // Receives the response data of the safe method requiredTxGas() and parses it to get the gas amount
 const parseRequiredTxGasResponse = (data: string): number => {
@@ -166,3 +168,125 @@ export const estimateGasForTransactionCreation = async (
     throw error
   }
 }
+
+type TransactionExecutionEstimationProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  txAmount?: string
+  operation?: number
+  gasPrice?: string
+  gasToken?: string
+  refundReceiver?: string // Address of receiver of gas payment (or 0 if tx.origin).
+  safeTxGas?: string
+  from: string
+}
+
+export const estimateGasForTransactionExecution = async ({
+  safeAddress,
+  txRecipient,
+  txAmount = '0',
+  txData,
+  operation = CALL,
+  from,
+  gasPrice = '0',
+  gasToken = ZERO_ADDRESS,
+  refundReceiver = ZERO_ADDRESS,
+  safeTxGas = '0',
+}: TransactionExecutionEstimationProps): Promise<number> => {
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+  const sigs = getPreValidatedSignatures(from)
+  const baseGas = await calculateGasOf(txData, from, safeAddress)
+
+  const executeTransactionTxData = await safeInstance.methods
+    .execTransaction(
+      txRecipient,
+      txAmount as string,
+      txData,
+      operation as number,
+      safeTxGas as string,
+      baseGas as number,
+      gasPrice as string,
+      gasToken as string,
+      refundReceiver as string,
+      sigs,
+    )
+    .encodeABI()
+
+  const gasEstimation = await calculateGasOf(executeTransactionTxData, from, safeAddress)
+
+  const gasBatches = [gasEstimation, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]
+    .filter((currentGas) => currentGas < gasEstimation)
+    // Reorders gas from lowest to highest
+    .sort((a, b) => b - a)
+
+  for (const baseGasIterator of gasBatches) {
+    const executeTransactionGasCheck = await safeInstance.methods
+      .execTransaction(
+        txRecipient,
+        txAmount as string,
+        txData,
+        operation as number,
+        safeTxGas as string,
+        gasEstimation,
+        gasPrice as string,
+        gasToken as string,
+        refundReceiver as string,
+        sigs,
+      )
+      .call()
+
+    if (executeTransactionGasCheck) {
+      return baseGasIterator
+    }
+  }
+
+  // In there is no gasBatches available that could run successfully execTransaction we need to inform the user
+  throw new Error('There was no valid value of gas to execute the transaction, the transaction may fail')
+}
+
+type TransactionApprovalEstimationProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  txAmount?: string
+  operation?: number
+  from: string
+  isOffChainSignature: boolean
+}
+
+export const estimateGasForTransactionApproval = async ({
+  safeAddress,
+  txRecipient,
+  txAmount,
+  txData,
+  operation,
+  from,
+  isOffChainSignature,
+}: TransactionApprovalEstimationProps): Promise<number> => {
+  if (isOffChainSignature) {
+    return 0
+  }
+
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+
+  const nonce = await safeInstance.methods.nonce().call()
+  const txHash = await safeInstance.methods
+    .getTransactionHash(
+      txRecipient,
+      txAmount || '0',
+      txData,
+      operation as number,
+      0,
+      0,
+      0,
+      ZERO_ADDRESS,
+      ZERO_ADDRESS,
+      nonce,
+    )
+    .call({
+      from,
+    })
+  const approveTransactionTxData = await safeInstance.methods.approveHash(txHash).encodeABI()
+  return calculateGasOf(approveTransactionTxData, from, safeAddress)
+}

From 25bbd331be00beb9a99772f308fa7fdbd6ee32b5 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 5 Jan 2021 14:17:49 -0300
Subject: [PATCH 59/84] Move estimateTransactionGas to
 useEstimateTransactionGas Refactors useEstimateTransactionGas to return
 isCreation and isOffChainSignature

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 117 +++++++++++++++++-
 1 file changed, 111 insertions(+), 6 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index e6f8f6eac7..7c669b0fed 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -1,11 +1,22 @@
 import { useEffect, useState } from 'react'
-import { estimateTransactionGas } from 'src/logic/safe/transactions/gas'
+import {
+  estimateGasForTransactionApproval,
+  estimateGasForTransactionCreation,
+  estimateGasForTransactionExecution,
+} from 'src/logic/safe/transactions/gas'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
 import { getNetworkInfo } from 'src/config'
 import { useSelector } from 'react-redux'
-import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
+import {
+  safeCurrentVersionSelector,
+  safeParamAddressFromStateSelector,
+  safeThresholdSelector,
+} from 'src/logic/safe/store/selectors'
+import { CALL, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES } from '../safe/transactions'
+import semverSatisfies from 'semver/functions/satisfies'
+import { providerSelector } from '../wallets/store/selectors'
 
 export enum EstimationStatus {
   LOADING = 'LOADING',
@@ -16,6 +27,64 @@ export enum EstimationStatus {
 const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txConfirmations?: number): boolean =>
   txConfirmations === threshold || !!preApprovingOwner || threshold === 1
 
+const checkIfTxIsCreation = (txConfirmations: number): boolean => txConfirmations === 0
+
+const checkIfOffChainSignatureIsPossible = (
+  isExecution: boolean,
+  isSmartContractWallet: boolean,
+  safeVersion?: string,
+): boolean =>
+  !isExecution &&
+  !isSmartContractWallet &&
+  !!safeVersion &&
+  semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
+
+type TransactionEstimationProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  isExecution: boolean
+  isCreation: boolean
+  isOffChainSignature?: boolean
+  txAmount?: string
+  operation?: number
+  from?: string
+}
+
+const estimateTransactionGas = async ({
+  txAmount,
+  txData,
+  txRecipient,
+  isExecution,
+  isCreation,
+  isOffChainSignature = false,
+  safeAddress,
+  operation = CALL,
+  from,
+}: TransactionEstimationProps): Promise<number> => {
+  if (isCreation) {
+    return estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount || '0', operation)
+  }
+
+  if (!from) {
+    throw new Error('No from provided for approving or execute transaction')
+  }
+
+  if (isExecution) {
+    return estimateGasForTransactionExecution({ safeAddress, txRecipient, txAmount, txData, operation, from })
+  }
+
+  return estimateGasForTransactionApproval({
+    safeAddress,
+    operation,
+    txData,
+    txAmount,
+    txRecipient,
+    from,
+    isOffChainSignature,
+  })
+}
+
 type UseEstimateTransactionGasProps = {
   txData: string
   txRecipient: string
@@ -32,6 +101,8 @@ type TransactionGasEstimationResult = {
   gasCostFormatted: string // Cost of gas in format '< | > 100'
   gasPrice: string // Current price of gas unit
   isExecution: boolean // Returns true if the user will execute the tx or false if it just signs it
+  isCreation: boolean // Returns true if the transaction is a creation transaction
+  isOffChainSignature: boolean // Returns true if offChainSignature is available
 }
 
 export const useEstimateTransactionGas = ({
@@ -49,10 +120,14 @@ export const useEstimateTransactionGas = ({
     gasCostFormatted: '< 0.001',
     gasPrice: '0',
     isExecution: false,
+    isCreation: false,
+    isOffChainSignature: false,
   })
   const { nativeCoin } = getNetworkInfo()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const threshold = useSelector(safeThresholdSelector)
+  const safeVersion = useSelector(safeCurrentVersionSelector)
+  const { account: from, smartContractWallet } = useSelector(providerSelector)
 
   useEffect(() => {
     let isCurrent = true
@@ -62,8 +137,11 @@ export const useEstimateTransactionGas = ({
         return
       }
 
+      const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
+      const isCreation = checkIfTxIsCreation(txConfirmations || 0)
+
       try {
-        const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
+        const isOffChainSignature = checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)
 
         const gasEstimation = await estimateTransactionGas({
           safeAddress,
@@ -71,20 +149,32 @@ export const useEstimateTransactionGas = ({
           txData,
           txAmount,
           isExecution,
+          isCreation,
+          isOffChainSignature,
           operation,
+          from,
         })
         const gasPrice = await calculateGasPrice()
         const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
         const gasCost = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
         const gasCostFormatted = formatAmount(gasCost)
+
         if (isCurrent) {
+          let txEstimationExecutionStatus = EstimationStatus.SUCCESS
+
+          if (gasEstimation <= 0) {
+            txEstimationExecutionStatus = isOffChainSignature ? EstimationStatus.SUCCESS : EstimationStatus.FAILURE
+          }
+
           setGasEstimation({
-            txEstimationExecutionStatus: gasEstimation <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
+            txEstimationExecutionStatus,
             gasEstimation,
             gasCost,
             gasCostFormatted,
             gasPrice,
             isExecution,
+            isCreation,
+            isOffChainSignature,
           })
         }
       } catch (error) {
@@ -98,7 +188,9 @@ export const useEstimateTransactionGas = ({
           gasCost,
           gasCostFormatted,
           gasPrice: '1',
-          isExecution: false,
+          isExecution,
+          isCreation,
+          isOffChainSignature: false,
         })
       }
     }
@@ -108,7 +200,20 @@ export const useEstimateTransactionGas = ({
     return () => {
       isCurrent = false
     }
-  }, [txData, safeAddress, txRecipient, txConfirmations, txAmount, preApprovingOwner, nativeCoin.decimals, threshold])
+  }, [
+    txData,
+    safeAddress,
+    txRecipient,
+    txConfirmations,
+    txAmount,
+    preApprovingOwner,
+    nativeCoin.decimals,
+    threshold,
+    from,
+    operation,
+    safeVersion,
+    smartContractWallet,
+  ])
 
   return gasEstimation
 }

From 789592471b7fc930367a1f3d66cee546fca465c0 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 11:45:01 -0300
Subject: [PATCH 60/84] Type and refactor generateSignaturesFromTxConfirmations
 Moves getPreValidatedSignatures to safeTxSigner.ts

---
 src/logic/safe/safeTxSigner.ts                | 61 +++++++++++--------
 .../safe/store/actions/createTransaction.ts   |  3 +-
 .../safe/store/actions/processTransaction.ts  |  6 +-
 src/test/signatures.blockchain.ts             | 10 ++-
 4 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/logic/safe/safeTxSigner.ts b/src/logic/safe/safeTxSigner.ts
index 52de1a3b68..811a7c36f5 100644
--- a/src/logic/safe/safeTxSigner.ts
+++ b/src/logic/safe/safeTxSigner.ts
@@ -1,31 +1,44 @@
-// https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-// https://github.com/gnosis/safe-contracts/blob/master/test/gnosisSafeTeamEdition.js#L26
-export const generateSignaturesFromTxConfirmations = (confirmations, preApprovingOwner) => {
-  // The constant parts need to be sorted so that the recovered signers are sorted ascending
-  // (natural order) by address (not checksummed).
-  const confirmationsMap = confirmations.reduce((map, obj) => {
-    map[obj.owner.toLowerCase()] = obj // eslint-disable-line no-param-reassign
-    return map
-  }, {})
+import { List } from 'immutable'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
+
+// https://docs.gnosis.io/safe/docs/contracts_signatures/#pre-validated-signatures
+export const getPreValidatedSignatures = (from: string, initialString: string = EMPTY_DATA): string => {
+  return `${initialString}000000000000000000000000${from.replace(
+    EMPTY_DATA,
+    '',
+  )}000000000000000000000000000000000000000000000000000000000000000001`
+}
+
+export const generateSignaturesFromTxConfirmations = (
+  confirmations?: List<Confirmation>,
+  preApprovingOwner?: string,
+): string => {
+  let confirmationsMap =
+    confirmations?.map((value) => {
+      return {
+        signature: value.signature,
+        owner: value.owner.toLowerCase(),
+      }
+    }) || List([])
 
   if (preApprovingOwner) {
-    confirmationsMap[preApprovingOwner.toLowerCase()] = { owner: preApprovingOwner }
+    confirmationsMap.push({ owner: preApprovingOwner, signature: null })
   }
 
+  // The constant parts need to be sorted so that the recovered signers are sorted ascending
+  // (natural order) by address (not checksummed).
+  confirmationsMap = confirmationsMap.sort((ownerA, ownerB) => ownerA.owner.localeCompare(ownerB.owner))
+
   let sigs = '0x'
-  Object.keys(confirmationsMap)
-    .sort()
-    .forEach((addr) => {
-      const conf = confirmationsMap[addr]
-      if (conf.signature) {
-        sigs += conf.signature.slice(2)
-      } else {
-        // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-        sigs += `000000000000000000000000${addr.replace(
-          '0x',
-          '',
-        )}000000000000000000000000000000000000000000000000000000000000000001`
-      }
-    })
+  confirmationsMap.forEach(({ signature, owner }) => {
+    if (signature) {
+      sigs += signature.slice(2)
+    } else {
+      // https://docs.gnosis.io/safe/docs/contracts_signatures/#pre-validated-signatures
+      sigs += getPreValidatedSignatures(owner, '')
+    }
+  })
+
   return sigs
 }
diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index 97969aec5f..efa6fa3002 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -14,7 +14,7 @@ import {
   saveTxToHistory,
   tryOffchainSigning,
 } from 'src/logic/safe/transactions'
-import { estimateGasForTransactionCreation, getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
+import { estimateGasForTransactionCreation } from 'src/logic/safe/transactions/gas'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
@@ -40,6 +40,7 @@ import { AnyAction } from 'redux'
 import { PayableTx } from 'src/types/contracts/types.d'
 import { AppReduxState } from 'src/store'
 import { Dispatch, DispatchReturn } from './types'
+import { getPreValidatedSignatures } from 'src/logic/safe/safeTxSigner'
 
 export interface CreateTransactionArgs {
   navigateToTransactionsTab?: boolean
diff --git a/src/logic/safe/store/actions/processTransaction.ts b/src/logic/safe/store/actions/processTransaction.ts
index b08c966cf4..2b91c7eaa7 100644
--- a/src/logic/safe/store/actions/processTransaction.ts
+++ b/src/logic/safe/store/actions/processTransaction.ts
@@ -4,7 +4,7 @@ import semverSatisfies from 'semver/functions/satisfies'
 
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { getNotificationsFromTxType } from 'src/logic/notifications'
-import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
+import { generateSignaturesFromTxConfirmations, getPreValidatedSignatures } from 'src/logic/safe/safeTxSigner'
 import { getApprovalTransaction, getExecutionTransaction, saveTxToHistory } from 'src/logic/safe/transactions'
 import { SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES, tryOffchainSigning } from 'src/logic/safe/transactions/offchainSigner'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
@@ -22,7 +22,6 @@ import { storeExecutedTx, storeSignedTx, storeTx } from 'src/logic/safe/store/ac
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 
 import { Dispatch, DispatchReturn } from './types'
-import { getPreValidatedSignatures } from 'src/logic/safe/transactions/gas'
 
 interface ProcessTransactionArgs {
   approveAndExecute: boolean
@@ -54,7 +53,8 @@ const processTransaction = ({
   const isExecution = approveAndExecute || (await shouldExecuteTransaction(safeInstance, nonce, lastTx))
   const safeVersion = await getCurrentSafeVersion(safeInstance)
 
-  let sigs = generateSignaturesFromTxConfirmations(tx.confirmations, approveAndExecute && userAddress)
+  const preApprovingOwner = approveAndExecute ? userAddress : undefined
+  let sigs = generateSignaturesFromTxConfirmations(tx.confirmations, preApprovingOwner)
 
   if (!sigs) {
     sigs = getPreValidatedSignatures(from)
diff --git a/src/test/signatures.blockchain.ts b/src/test/signatures.blockchain.ts
index 86b983df68..1182eea173 100644
--- a/src/test/signatures.blockchain.ts
+++ b/src/test/signatures.blockchain.ts
@@ -1,8 +1,14 @@
-// 
+//
 import { List } from 'immutable'
 import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+import { makeConfirmation } from 'src/logic/safe/store/models/confirmation'
 
-const makeMockConfirmation = (address) => ({ owner: { address } })
+const makeMockConfirmation = (address: string): Confirmation => {
+  return makeConfirmation({
+    owner: address
+  })
+}
 
 describe('Signatures Blockchain Test', () => {
   it('generates signatures in natural order even checksumed', async () => {

From d8d64c9aec97c792500c96464080fe326857b9bb Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 11:49:46 -0300
Subject: [PATCH 61/84] Uses confirmations to
 estimateGasForTransactionExecution

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 22 +++++++++++++++----
 src/logic/safe/transactions/gas.ts            | 21 ++++++++----------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 7c669b0fed..287643d1e8 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -18,6 +18,9 @@ import { CALL, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES } from '../safe/transactions
 import semverSatisfies from 'semver/functions/satisfies'
 import { providerSelector } from '../wallets/store/selectors'
 
+import { List } from 'immutable'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+
 export enum EstimationStatus {
   LOADING = 'LOADING',
   FAILURE = 'FAILURE',
@@ -43,6 +46,7 @@ type TransactionEstimationProps = {
   txData: string
   safeAddress: string
   txRecipient: string
+  txConfirmations?: List<Confirmation>
   isExecution: boolean
   isCreation: boolean
   isOffChainSignature?: boolean
@@ -55,6 +59,7 @@ const estimateTransactionGas = async ({
   txAmount,
   txData,
   txRecipient,
+  txConfirmations,
   isExecution,
   isCreation,
   isOffChainSignature = false,
@@ -71,7 +76,15 @@ const estimateTransactionGas = async ({
   }
 
   if (isExecution) {
-    return estimateGasForTransactionExecution({ safeAddress, txRecipient, txAmount, txData, operation, from })
+    return estimateGasForTransactionExecution({
+      safeAddress,
+      txRecipient,
+      txConfirmations,
+      txAmount,
+      txData,
+      operation,
+      from,
+    })
   }
 
   return estimateGasForTransactionApproval({
@@ -88,7 +101,7 @@ const estimateTransactionGas = async ({
 type UseEstimateTransactionGasProps = {
   txData: string
   txRecipient: string
-  txConfirmations?: number
+  txConfirmations?: List<Confirmation>
   txAmount?: string
   preApprovingOwner?: string
   operation?: number
@@ -137,8 +150,8 @@ export const useEstimateTransactionGas = ({
         return
       }
 
-      const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations)
-      const isCreation = checkIfTxIsCreation(txConfirmations || 0)
+      const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations?.size)
+      const isCreation = checkIfTxIsCreation(txConfirmations?.size || 0)
 
       try {
         const isOffChainSignature = checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)
@@ -148,6 +161,7 @@ export const useEstimateTransactionGas = ({
           txRecipient,
           txData,
           txAmount,
+          txConfirmations,
           isExecution,
           isCreation,
           isOffChainSignature,
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index d05b270ed9..ff84d2fd29 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -5,6 +5,9 @@ import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { sameString } from 'src/utils/strings'
 import { CALL } from './send'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
+import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
+import { List } from 'immutable'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
 
 // Receives the response data of the safe method requiredTxGas() and parses it to get the gas amount
 const parseRequiredTxGasResponse = (data: string): number => {
@@ -23,14 +26,6 @@ const parseRequiredTxGasResponse = (data: string): number => {
   return data.match(/.{2}/g)?.reduce(reducer, 0)
 }
 
-// https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-export const getPreValidatedSignatures = (from: string): string => {
-  return `0x000000000000000000000000${from.replace(
-    EMPTY_DATA,
-    '',
-  )}000000000000000000000000000000000000000000000000000000000000000001`
-}
-
 // Parses the result from the error message (GETH, OpenEthereum/Parity and Nethermind) and returns the data value
 export const getDataFromNodeErrorMessage = (errorMessage: string): string | undefined => {
   // Replace illegal characters that often comes within the error string (like � for example)
@@ -173,6 +168,7 @@ type TransactionExecutionEstimationProps = {
   txData: string
   safeAddress: string
   txRecipient: string
+  txConfirmations?: List<Confirmation>
   txAmount?: string
   operation?: number
   gasPrice?: string
@@ -185,6 +181,7 @@ type TransactionExecutionEstimationProps = {
 export const estimateGasForTransactionExecution = async ({
   safeAddress,
   txRecipient,
+  txConfirmations,
   txAmount = '0',
   txData,
   operation = CALL,
@@ -195,8 +192,8 @@ export const estimateGasForTransactionExecution = async ({
   safeTxGas = '0',
 }: TransactionExecutionEstimationProps): Promise<number> => {
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-  const sigs = getPreValidatedSignatures(from)
-  const baseGas = await calculateGasOf(txData, from, safeAddress)
+
+  const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
 
   const executeTransactionTxData = await safeInstance.methods
     .execTransaction(
@@ -205,7 +202,7 @@ export const estimateGasForTransactionExecution = async ({
       txData,
       operation as number,
       safeTxGas as string,
-      baseGas as number,
+      0,
       gasPrice as string,
       gasToken as string,
       refundReceiver as string,
@@ -215,7 +212,7 @@ export const estimateGasForTransactionExecution = async ({
 
   const gasEstimation = await calculateGasOf(executeTransactionTxData, from, safeAddress)
 
-  const gasBatches = [gasEstimation, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]
+  const gasBatches = [0, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]
     .filter((currentGas) => currentGas < gasEstimation)
     // Reorders gas from lowest to highest
     .sort((a, b) => b - a)

From 88d36f8ff45b0fd367c37773118b121e7658f7a3 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 11:52:11 -0300
Subject: [PATCH 62/84] Adds TransactionFeesText component Uses
 TransactionFeesText on ApproveTxModal

---
 src/components/TransactionsFeesText/index.tsx | 38 +++++++++++++++++++
 .../ExpandedTx/ApproveTxModal/index.tsx       | 29 +++++++-------
 2 files changed, 54 insertions(+), 13 deletions(-)
 create mode 100644 src/components/TransactionsFeesText/index.tsx

diff --git a/src/components/TransactionsFeesText/index.tsx b/src/components/TransactionsFeesText/index.tsx
new file mode 100644
index 0000000000..d3080dd646
--- /dev/null
+++ b/src/components/TransactionsFeesText/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
+import Paragraph from 'src/components/layout/Paragraph'
+import { getNetworkInfo } from 'src/config'
+
+type TransactionFailTextProps = {
+  txEstimationExecutionStatus: EstimationStatus
+  gasCostFormatted: string
+  isExecution: boolean
+  isCreation: boolean
+  isOffChainSignature: boolean
+}
+const { nativeCoin } = getNetworkInfo()
+
+export const TransactionFeesText = ({
+  gasCostFormatted,
+  isExecution,
+  isCreation,
+  isOffChainSignature,
+}: TransactionFailTextProps): React.ReactElement | null => {
+  let transactionAction
+  if (isCreation) {
+    transactionAction = 'create'
+  } else if (isExecution) {
+    transactionAction = 'execute'
+  } else {
+    transactionAction = 'approve'
+  }
+
+  return (
+    <Paragraph>
+      You&apos;re about to {transactionAction} a transaction and will have to confirm it with your currently connected
+      wallet.
+      {!isOffChainSignature &&
+        ` Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+    </Paragraph>
+  )
+}
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 40060bfffd..1f57c56f91 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -5,7 +5,6 @@ import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { getNetworkInfo } from 'src/config'
 
 import { styles } from './style'
 
@@ -24,6 +23,7 @@ import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/lo
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFeesText } from 'src/components/TransactionsFeesText'
 
 const useStyles = makeStyles(styles)
 
@@ -61,7 +61,6 @@ type Props = {
   thresholdReached: boolean
   tx: Transaction
 }
-const { nativeCoin } = getNetworkInfo()
 
 export const ApproveTxModal = ({
   canExecute,
@@ -81,10 +80,16 @@ export const ApproveTxModal = ({
   const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
   const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
     txRecipient: tx.recipient,
     txData: tx.data || '',
-    txConfirmations: tx.confirmations.size,
+    txConfirmations: tx.confirmations,
     txAmount: tx.value,
     preApprovingOwner: approveAndExecute ? userAddress : undefined,
   })
@@ -140,15 +145,13 @@ export const ApproveTxModal = ({
             </>
           )}
         </Row>
-        <Row>
-          <Paragraph>
-            {`You're about to ${
-              approveAndExecute ? 'execute' : 'approve'
-            } a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${
-              nativeCoin.name
-            } in this wallet to fund this confirmation.`}
-          </Paragraph>
-        </Row>
+        <TransactionFeesText
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
         <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
       <Row align="center" className={classes.buttonRow}>

From 65504587bfdb397b3ebff65d4c636ebbe2b6c264 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 11:55:26 -0300
Subject: [PATCH 63/84] Update text

---
 src/components/TransactionFailText/index.tsx | 2 +-
 src/logic/safe/transactions/gas.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TransactionFailText/index.tsx b/src/components/TransactionFailText/index.tsx
index 84a9b9dd07..7716f6d6c3 100644
--- a/src/components/TransactionFailText/index.tsx
+++ b/src/components/TransactionFailText/index.tsx
@@ -41,7 +41,7 @@ export const TransactionFailText = ({
   if (isExecution) {
     errorMessage =
       threshold && threshold > 1
-        ? `To save gas costs, collect rejections and cancel this transaction.`
+        ? `To save gas cost, cancel this transaction`
         : `To save gas costs, avoid executing the transaction.`
   }
 
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 2f98bb853a..d3c5ed1d20 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -23,7 +23,7 @@ const parseRequiredTxGasResponse = (data: string): number => {
   return data.match(/.{2}/g)?.reduce(reducer, 0)
 }
 
-// https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
+// https://docs.gnosis.io/safe/docs/contracts_signatures/#pre-validated-signatures
 export const getPreValidatedSignatures = (from: string): string => {
   return `0x000000000000000000000000${from.replace(
     EMPTY_DATA,

From 53ef32a943ec774e72db0b335efabff0470aa6b2 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 11:56:23 -0300
Subject: [PATCH 64/84] Update text

---
 src/logic/safe/transactions/gas.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index d3c5ed1d20..ca9c236eea 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -56,7 +56,7 @@ export const estimateTransactionGas = async ({
   }
 
   if (isExecution) {
-    // Gas of executing a transaction within the safe (threshold reached and transaction executed)
+    // Gas of executing a transaction within the safe (threshold reached and transaction ready to be executed)
     return await estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', operation)
   }
 

From dafe6204fd2a658685c4e8bae857fb27ce1cd660 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 11:58:30 -0300
Subject: [PATCH 65/84] Remove unnecessary condition

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index e6f8f6eac7..2b3ee7ea4d 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -55,8 +55,6 @@ export const useEstimateTransactionGas = ({
   const threshold = useSelector(safeThresholdSelector)
 
   useEffect(() => {
-    let isCurrent = true
-
     const estimateGas = async () => {
       if (!txData.length) {
         return
@@ -77,16 +75,15 @@ export const useEstimateTransactionGas = ({
         const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
         const gasCost = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
         const gasCostFormatted = formatAmount(gasCost)
-        if (isCurrent) {
-          setGasEstimation({
-            txEstimationExecutionStatus: gasEstimation <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
-            gasEstimation,
-            gasCost,
-            gasCostFormatted,
-            gasPrice,
-            isExecution,
-          })
-        }
+
+        setGasEstimation({
+          txEstimationExecutionStatus: gasEstimation <= 0 ? EstimationStatus.FAILURE : EstimationStatus.SUCCESS,
+          gasEstimation,
+          gasCost,
+          gasCostFormatted,
+          gasPrice,
+          isExecution,
+        })
       } catch (error) {
         // We put a fixed the amount of gas to let the user try to execute the tx, but it's not accurate so it will probably fail
         const gasEstimation = 10000
@@ -104,11 +101,17 @@ export const useEstimateTransactionGas = ({
     }
 
     estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [txData, safeAddress, txRecipient, txConfirmations, txAmount, preApprovingOwner, nativeCoin.decimals, threshold])
+  }, [
+    txData,
+    safeAddress,
+    txRecipient,
+    txConfirmations,
+    txAmount,
+    preApprovingOwner,
+    nativeCoin.decimals,
+    threshold,
+    operation,
+  ])
 
   return gasEstimation
 }

From 7c6ba58681d0a64f25467aab9dbfa3a56959fa0f Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 13:01:27 -0300
Subject: [PATCH 66/84] Pass more parameters to
 estimateGasForTransactionExecution

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 287643d1e8..48efd19f30 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -47,25 +47,33 @@ type TransactionEstimationProps = {
   safeAddress: string
   txRecipient: string
   txConfirmations?: List<Confirmation>
-  isExecution: boolean
-  isCreation: boolean
-  isOffChainSignature?: boolean
   txAmount?: string
   operation?: number
+  gasPrice?: string
+  gasToken?: string
+  refundReceiver?: string // Address of receiver of gas payment (or 0 if tx.origin).
+  safeTxGas?: string
   from?: string
+  isExecution: boolean
+  isCreation: boolean
+  isOffChainSignature?: boolean
 }
 
 const estimateTransactionGas = async ({
-  txAmount,
   txData,
+  safeAddress,
   txRecipient,
   txConfirmations,
+  txAmount,
+  operation = CALL,
+  gasPrice,
+  gasToken,
+  refundReceiver,
+  safeTxGas,
+  from,
   isExecution,
   isCreation,
   isOffChainSignature = false,
-  safeAddress,
-  operation = CALL,
-  from,
 }: TransactionEstimationProps): Promise<number> => {
   if (isCreation) {
     return estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount || '0', operation)
@@ -84,6 +92,10 @@ const estimateTransactionGas = async ({
       txData,
       operation,
       from,
+      gasPrice,
+      gasToken,
+      refundReceiver,
+      safeTxGas,
     })
   }
 

From c6efa914a7631cf3f2475d9d7eed5c723b31cad1 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 13:33:11 -0300
Subject: [PATCH 67/84] Removes unnecessary parameter in getNewTxNonce

---
 .../store/actions/__tests__/utils.test.ts     | 19 ++-----------------
 .../safe/store/actions/createTransaction.ts   |  2 +-
 src/logic/safe/store/actions/utils.ts         | 10 +---------
 .../transactions/__tests__/utils.test.ts      | 18 +++---------------
 4 files changed, 7 insertions(+), 42 deletions(-)

diff --git a/src/logic/safe/store/actions/__tests__/utils.test.ts b/src/logic/safe/store/actions/__tests__/utils.test.ts
index db063f9ace..b11ebcb35f 100644
--- a/src/logic/safe/store/actions/__tests__/utils.test.ts
+++ b/src/logic/safe/store/actions/__tests__/utils.test.ts
@@ -3,22 +3,8 @@ import { GnosisSafe } from 'src/types/contracts/GnosisSafe.d'
 import { TxServiceModel } from 'src/logic/safe/store/actions/transactions/fetchTransactions/loadOutgoingTransactions'
 
 describe('Store actions utils > getNewTxNonce', () => {
-  it(`Should return passed predicted transaction nonce if it's a valid value`, async () => {
-    // Given
-    const txNonce = '45'
-    const lastTx = { nonce: 44 } as TxServiceModel
-    const safeInstance = {}
-
-    // When
-    const nonce = await getNewTxNonce(txNonce, lastTx, safeInstance as GnosisSafe)
-
-    // Then
-    expect(nonce).toBe('45')
-  })
-
   it(`Should return nonce of a last transaction + 1 if passed nonce is less than last transaction or invalid`, async () => {
     // Given
-    const txNonce = ''
     const lastTx = { nonce: 44 } as TxServiceModel
     const safeInstance = {
       methods: {
@@ -29,7 +15,7 @@ describe('Store actions utils > getNewTxNonce', () => {
     }
 
     // When
-    const nonce = await getNewTxNonce(txNonce, lastTx, safeInstance as GnosisSafe)
+    const nonce = await getNewTxNonce(lastTx, safeInstance as GnosisSafe)
 
     // Then
     expect(nonce).toBe('45')
@@ -37,7 +23,6 @@ describe('Store actions utils > getNewTxNonce', () => {
 
   it(`Should retrieve contract's instance nonce value as a fallback, if txNonce and lastTx are not valid`, async () => {
     // Given
-    const txNonce = ''
     const lastTx = null
     const safeInstance = {
       methods: {
@@ -48,7 +33,7 @@ describe('Store actions utils > getNewTxNonce', () => {
     }
 
     // When
-    const nonce = await getNewTxNonce(txNonce, lastTx, safeInstance as GnosisSafe)
+    const nonce = await getNewTxNonce(lastTx, safeInstance as GnosisSafe)
 
     // Then
     expect(nonce).toBe('45')
diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index efa6fa3002..f62e56855a 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -88,7 +88,7 @@ const createTransaction = (
   const { account: from, hardwareWallet, smartContractWallet } = providerSelector(state)
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const lastTx = await getLastTx(safeAddress)
-  const nonce = await getNewTxNonce(txNonce?.toString(), lastTx, safeInstance)
+  const nonce = txNonce ? txNonce.toString() : await getNewTxNonce(lastTx, safeInstance)
   const isExecution = await shouldExecuteTransaction(safeInstance, nonce, lastTx)
   const safeVersion = await getCurrentSafeVersion(safeInstance)
   let safeTxGas
diff --git a/src/logic/safe/store/actions/utils.ts b/src/logic/safe/store/actions/utils.ts
index 74b59b0d3c..828c6e92e6 100644
--- a/src/logic/safe/store/actions/utils.ts
+++ b/src/logic/safe/store/actions/utils.ts
@@ -16,15 +16,7 @@ export const getLastTx = async (safeAddress: string): Promise<TxServiceModel | n
   }
 }
 
-export const getNewTxNonce = async (
-  txNonce: string | undefined,
-  lastTx: TxServiceModel | null,
-  safeInstance: GnosisSafe,
-): Promise<string> => {
-  if (txNonce) {
-    return txNonce
-  }
-
+export const getNewTxNonce = async (lastTx: TxServiceModel | null, safeInstance: GnosisSafe): Promise<string> => {
   // use current's safe nonce as fallback
   return lastTx ? `${lastTx.nonce + 1}` : (await safeInstance.methods.nonce().call()).toString()
 }
diff --git a/src/routes/safe/store/actions/transactions/__tests__/utils.test.ts b/src/routes/safe/store/actions/transactions/__tests__/utils.test.ts
index db0b015c06..c10615b213 100644
--- a/src/routes/safe/store/actions/transactions/__tests__/utils.test.ts
+++ b/src/routes/safe/store/actions/transactions/__tests__/utils.test.ts
@@ -66,7 +66,7 @@ describe('getNewTxNonce', () => {
     const expectedResult = '2'
 
     // when
-    const result = await getNewTxNonce(undefined, lastTx, safeInstance)
+    const result = await getNewTxNonce(lastTx, safeInstance)
 
     // then
     expect(result).toBe(expectedResult)
@@ -82,7 +82,7 @@ describe('getNewTxNonce', () => {
     safeInstance.methods.nonce = mockFnNonce
 
     // when
-    const result = await getNewTxNonce(undefined, null, safeInstance)
+    const result = await getNewTxNonce(null, safeInstance)
 
     // then
     expect(result).toBe(expectedResult)
@@ -98,19 +98,7 @@ describe('getNewTxNonce', () => {
     const lastTx = getMockedTxServiceModel({ nonce: 10 })
 
     // when
-    const result = await getNewTxNonce(undefined, lastTx, safeInstance)
-
-    // then
-    expect(result).toBe(expectedResult)
-  })
-  it('Given a pre-calculated nonce number should return it', async () => {
-    // given
-    const safeInstance = getMockedSafeInstance({})
-    const expectedResult = '114'
-    const nextNonce = '114'
-
-    // when
-    const result = await getNewTxNonce(nextNonce, null, safeInstance)
+    const result = await getNewTxNonce(lastTx, safeInstance)
 
     // then
     expect(result).toBe(expectedResult)

From f9fb7069b52f9bb391498e0da196470138ca010f Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 13:35:21 -0300
Subject: [PATCH 68/84] Moves checkIfOffChainSignatureIsPossible to
 safeTxSigner.ts

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 14 ++---------
 src/logic/safe/safeTxSigner.ts                | 17 +++++++++++++
 .../safe/store/actions/processTransaction.ts  | 24 +++++++------------
 .../ExpandedTx/ApproveTxModal/index.tsx       |  2 +-
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 6431c4b37e..17d3797060 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -14,12 +14,12 @@ import {
   safeParamAddressFromStateSelector,
   safeThresholdSelector,
 } from 'src/logic/safe/store/selectors'
-import { CALL, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES } from '../safe/transactions'
-import semverSatisfies from 'semver/functions/satisfies'
+import { CALL } from 'src/logic/safe/transactions'
 import { providerSelector } from '../wallets/store/selectors'
 
 import { List } from 'immutable'
 import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+import { checkIfOffChainSignatureIsPossible } from 'src/logic/safe/safeTxSigner'
 
 export enum EstimationStatus {
   LOADING = 'LOADING',
@@ -32,16 +32,6 @@ const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txC
 
 const checkIfTxIsCreation = (txConfirmations: number): boolean => txConfirmations === 0
 
-const checkIfOffChainSignatureIsPossible = (
-  isExecution: boolean,
-  isSmartContractWallet: boolean,
-  safeVersion?: string,
-): boolean =>
-  !isExecution &&
-  !isSmartContractWallet &&
-  !!safeVersion &&
-  semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
-
 type TransactionEstimationProps = {
   txData: string
   safeAddress: string
diff --git a/src/logic/safe/safeTxSigner.ts b/src/logic/safe/safeTxSigner.ts
index 811a7c36f5..df93ad422e 100644
--- a/src/logic/safe/safeTxSigner.ts
+++ b/src/logic/safe/safeTxSigner.ts
@@ -1,6 +1,23 @@
 import { List } from 'immutable'
 import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
+import semverSatisfies from 'semver/functions/satisfies'
+import { SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES } from './transactions/offchainSigner'
+
+// Here we're checking that safe contract version is greater or equal 1.1.1, but
+// theoretically EIP712 should also work for 1.0.0 contracts
+// Also, offchain signatures are not working for ledger/trezor wallet because of a bug in their library:
+// https://github.com/LedgerHQ/ledgerjs/issues/378
+// Couldn't find an issue for trezor but the error is almost the same
+export const checkIfOffChainSignatureIsPossible = (
+  isExecution: boolean,
+  isSmartContractWallet: boolean,
+  safeVersion?: string,
+): boolean =>
+  !isExecution &&
+  !isSmartContractWallet &&
+  !!safeVersion &&
+  semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
 
 // https://docs.gnosis.io/safe/docs/contracts_signatures/#pre-validated-signatures
 export const getPreValidatedSignatures = (from: string, initialString: string = EMPTY_DATA): string => {
diff --git a/src/logic/safe/store/actions/processTransaction.ts b/src/logic/safe/store/actions/processTransaction.ts
index 2b91c7eaa7..41fc17cfd9 100644
--- a/src/logic/safe/store/actions/processTransaction.ts
+++ b/src/logic/safe/store/actions/processTransaction.ts
@@ -1,12 +1,15 @@
 import { AnyAction } from 'redux'
 import { ThunkAction } from 'redux-thunk'
-import semverSatisfies from 'semver/functions/satisfies'
 
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { getNotificationsFromTxType } from 'src/logic/notifications'
-import { generateSignaturesFromTxConfirmations, getPreValidatedSignatures } from 'src/logic/safe/safeTxSigner'
+import {
+  checkIfOffChainSignatureIsPossible,
+  generateSignaturesFromTxConfirmations,
+  getPreValidatedSignatures,
+} from 'src/logic/safe/safeTxSigner'
 import { getApprovalTransaction, getExecutionTransaction, saveTxToHistory } from 'src/logic/safe/transactions'
-import { SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES, tryOffchainSigning } from 'src/logic/safe/transactions/offchainSigner'
+import { tryOffchainSigning } from 'src/logic/safe/transactions/offchainSigner'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import { providerSelector } from 'src/logic/wallets/store/selectors'
@@ -33,7 +36,7 @@ interface ProcessTransactionArgs {
 
 type ProcessTransactionAction = ThunkAction<Promise<void | string>, AppReduxState, DispatchReturn, AnyAction>
 
-const processTransaction = ({
+export const processTransaction = ({
   approveAndExecute,
   notifiedTransaction,
   safeAddress,
@@ -49,7 +52,7 @@ const processTransaction = ({
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
 
   const lastTx = await getLastTx(safeAddress)
-  const nonce = await getNewTxNonce(undefined, lastTx, safeInstance)
+  const nonce = await getNewTxNonce(lastTx, safeInstance)
   const isExecution = approveAndExecute || (await shouldExecuteTransaction(safeInstance, nonce, lastTx))
   const safeVersion = await getCurrentSafeVersion(safeInstance)
 
@@ -84,14 +87,7 @@ const processTransaction = ({
   }
 
   try {
-    // Here we're checking that safe contract version is greater or equal 1.1.1, but
-    // theoretically EIP712 should also work for 1.0.0 contracts
-    // Also, offchain signatures are not working for ledger/trezor wallet because of a bug in their library:
-    // https://github.com/LedgerHQ/ledgerjs/issues/378
-    // Couldn't find an issue for trezor but the error is almost the same
-    const canTryOffchainSigning =
-      !isExecution && !smartContractWallet && semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
-    if (canTryOffchainSigning) {
+    if (checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)) {
       const signature = await tryOffchainSigning(tx.safeTxHash, { ...txArgs, safeAddress }, hardwareWallet)
 
       if (signature) {
@@ -194,5 +190,3 @@ const processTransaction = ({
 
   return txHash
 }
-
-export default processTransaction
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 1f57c56f91..670c689594 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -17,7 +17,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
-import processTransaction from 'src/logic/safe/store/actions/processTransaction'
+import { processTransaction } from 'src/logic/safe/store/actions/processTransaction'
 
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'

From e0b3af66f854957863ad5a767a8db20833542a33 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 14:58:09 -0300
Subject: [PATCH 69/84] Fix check for null confirmations

---
 .../Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx
index 35ae624fad..c23827af6d 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx
@@ -33,7 +33,7 @@ function getOwnersConfirmations(tx: Transaction, userAddress: string): [string[]
   const ownersWhoConfirmed: string[] = []
   let currentUserAlreadyConfirmed = false
 
-  tx.confirmations.forEach((conf) => {
+  tx.confirmations?.forEach((conf) => {
     if (conf.owner === userAddress) {
       currentUserAlreadyConfirmed = true
     }

From d819531013a0e9ac29354a5727ac15b04b3ae25f Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 14:58:59 -0300
Subject: [PATCH 70/84] Uses checkIfOffChainSignatureIsPossible on
 createTransaction.ts

---
 src/logic/safe/store/actions/createTransaction.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index f62e56855a..3561dc56ab 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -1,5 +1,4 @@
 import { push } from 'connected-react-router'
-import semverSatisfies from 'semver/functions/satisfies'
 import { ThunkAction } from 'redux-thunk'
 
 import { onboardUser } from 'src/components/ConnectButton'
@@ -10,7 +9,6 @@ import {
   CALL,
   getApprovalTransaction,
   getExecutionTransaction,
-  SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES,
   saveTxToHistory,
   tryOffchainSigning,
 } from 'src/logic/safe/transactions'
@@ -40,7 +38,7 @@ import { AnyAction } from 'redux'
 import { PayableTx } from 'src/types/contracts/types.d'
 import { AppReduxState } from 'src/store'
 import { Dispatch, DispatchReturn } from './types'
-import { getPreValidatedSignatures } from 'src/logic/safe/safeTxSigner'
+import { checkIfOffChainSignatureIsPossible, getPreValidatedSignatures } from 'src/logic/safe/safeTxSigner'
 
 export interface CreateTransactionArgs {
   navigateToTransactionsTab?: boolean
@@ -100,7 +98,6 @@ const createTransaction = (
   }
 
   const sigs = getPreValidatedSignatures(from)
-
   const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, origin)
   const beforeExecutionKey = dispatch(enqueueSnackbar(notificationsQueue.beforeExecution))
 
@@ -125,11 +122,7 @@ const createTransaction = (
   const safeTxHash = generateSafeTxHash(safeAddress, txArgs)
 
   try {
-    // Here we're checking that safe contract version is greater or equal 1.1.1, but
-    // theoretically EIP712 should also work for 1.0.0 contracts
-    const canTryOffchainSigning =
-      !isExecution && !smartContractWallet && semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
-    if (canTryOffchainSigning) {
+    if (checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)) {
       const signature = await tryOffchainSigning(safeTxHash, { ...txArgs, safeAddress }, hardwareWallet)
 
       if (signature) {

From 4ab94acc7807dbe47e5e51d8e3a84990a4387eee Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Wed, 6 Jan 2021 16:20:19 -0300
Subject: [PATCH 71/84] Move TransactionFailText inside TransactionFees
 component

---
 .../index.tsx                                 | 19 ++++++++-----
 .../ContractInteraction/Review/index.tsx      | 22 ++++++++++-----
 .../ReviewCustomTx/index.tsx                  | 21 ++++++++++-----
 .../screens/ReviewCollectible/index.tsx       | 25 ++++++++++-------
 .../SendModal/screens/ReviewTx/index.tsx      | 21 ++++++++++-----
 .../AddOwnerModal/screens/Review/index.tsx    | 27 +++++++++++--------
 .../RemoveOwnerModal/screens/Review/index.tsx | 27 +++++++++++--------
 .../screens/Review/index.tsx                  | 27 +++++++++++--------
 .../ChangeThreshold/index.tsx                 | 24 ++++++++++-------
 .../ExpandedTx/ApproveTxModal/index.tsx       |  6 ++---
 .../ExpandedTx/RejectTxModal/index.tsx        | 25 ++++++++++-------
 11 files changed, 154 insertions(+), 90 deletions(-)
 rename src/components/{TransactionsFeesText => TransactionsFees}/index.tsx (56%)

diff --git a/src/components/TransactionsFeesText/index.tsx b/src/components/TransactionsFees/index.tsx
similarity index 56%
rename from src/components/TransactionsFeesText/index.tsx
rename to src/components/TransactionsFees/index.tsx
index d3080dd646..c5e54f1970 100644
--- a/src/components/TransactionsFeesText/index.tsx
+++ b/src/components/TransactionsFees/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
 import Paragraph from 'src/components/layout/Paragraph'
 import { getNetworkInfo } from 'src/config'
+import { TransactionFailText } from 'src/components/TransactionFailText'
 
 type TransactionFailTextProps = {
   txEstimationExecutionStatus: EstimationStatus
@@ -12,11 +13,12 @@ type TransactionFailTextProps = {
 }
 const { nativeCoin } = getNetworkInfo()
 
-export const TransactionFeesText = ({
+export const TransactionFees = ({
   gasCostFormatted,
   isExecution,
   isCreation,
   isOffChainSignature,
+  txEstimationExecutionStatus,
 }: TransactionFailTextProps): React.ReactElement | null => {
   let transactionAction
   if (isCreation) {
@@ -28,11 +30,14 @@ export const TransactionFeesText = ({
   }
 
   return (
-    <Paragraph>
-      You&apos;re about to {transactionAction} a transaction and will have to confirm it with your currently connected
-      wallet.
-      {!isOffChainSignature &&
-        ` Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-    </Paragraph>
+    <>
+      <Paragraph>
+        You&apos;re about to {transactionAction} a transaction and will have to confirm it with your currently connected
+        wallet.
+        {!isOffChainSignature &&
+          ` Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+      </Paragraph>
+      <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+    </>
   )
 }
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 4199510a3b..7309b0ef73 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -22,7 +22,7 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { generateFormFieldKey, getValueFromTxInputs } from '../utils'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 const useStyles = makeStyles(styles)
 
@@ -52,7 +52,13 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     txAmount: string
   }>({ txData: '', txAmount: '', txRecipient: '' })
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
     txRecipient: txParameters?.txRecipient,
     txAmount: txParameters?.txAmount,
     txData: txParameters?.txData,
@@ -82,6 +88,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     }
     onClose()
   }
+  console.log('ewview')
 
   return (
     <>
@@ -156,10 +163,13 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
           </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 ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
-          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
         </Row>
       </Block>
       <Hairline />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index c8a92d7c3b..cda1aead48 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -28,7 +28,7 @@ import ArrowDown from '../../assets/arrow-down.svg'
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 export type CustomTx = {
   contractAddress?: string
@@ -51,7 +51,13 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
     txRecipient: tx.contractAddress as string,
     txData: tx.data ? tx.data.trim() : '',
     txAmount: tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0',
@@ -145,10 +151,13 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
           </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 ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
-          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
         </Row>
       </Block>
       <Hairline />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 68c49da891..63d4c942de 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@@ -28,9 +28,7 @@ import ArrowDown from '../assets/arrow-down.svg'
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
-
-const { nativeCoin } = getNetworkInfo()
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 const useStyles = makeStyles(styles)
 
@@ -58,7 +56,13 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   )
   const [data, setData] = useState('')
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
     txData: data,
     txRecipient: tx.recipientAddress,
   })
@@ -160,10 +164,13 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
           </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 ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
-          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
         </Row>
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index af1cd966a7..8dbb6b3cf2 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -36,7 +36,7 @@ import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import { TokenProps } from 'src/logic/tokens/store/model/token'
 import { RecordOf } from 'immutable'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 const useStyles = makeStyles(styles)
 
 const { nativeCoin } = getNetworkInfo()
@@ -111,7 +111,13 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
   const txAmount = useTxAmount(tx, isSendingNativeToken, txToken)
   const data = useTxData(isSendingNativeToken, txAmount, tx.recipientAddress, txToken)
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
     txData: data,
     txRecipient,
   })
@@ -218,10 +224,13 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
           </Paragraph>
         </Row>
         <Row>
-          <Paragraph data-testid="fee-meg-review-step">
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
-          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
         </Row>
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
index 8c1ba1ae73..9329feebaf 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
@@ -4,7 +4,7 @@ import Close from '@material-ui/icons/Close'
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@@ -19,12 +19,10 @@ import { safeNameSelector, safeOwnersSelector, safeParamAddressFromStateSelector
 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 export const ADD_OWNER_SUBMIT_BTN_TEST_ID = 'add-owner-submit-btn'
 
-const { nativeCoin } = getNetworkInfo()
-
 const useStyles = makeStyles(styles)
 
 type ReviewAddOwnerProps = {
@@ -45,7 +43,13 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -176,12 +180,13 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
       </Block>
       <Hairline />
       <Block className={classes.gasCostsContainer}>
-        <Paragraph>
-          You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
-          <br />
-          {`Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-        </Paragraph>
-        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
index 3391f3fa09..191e7c89a0 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@@ -4,7 +4,7 @@ import Close from '@material-ui/icons/Close'
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@@ -22,12 +22,10 @@ import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
 import { List } from 'immutable'
 import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 export const REMOVE_OWNER_REVIEW_BTN_TEST_ID = 'remove-owner-review-btn'
 
-const { nativeCoin } = getNetworkInfo()
-
 const useStyles = makeStyles(styles)
 
 type ReviewRemoveOwnerProps = {
@@ -55,7 +53,13 @@ export const ReviewRemoveOwnerModal = ({
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -194,12 +198,13 @@ export const ReviewRemoveOwnerModal = ({
       </Block>
       <Hairline />
       <Block className={classes.gasCostsContainer}>
-        <Paragraph>
-          You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
-          <br />
-          {`Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-        </Paragraph>
-        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
index a93382399d..a56a069f6a 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux'
 import { List } from 'immutable'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@@ -28,12 +28,10 @@ import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
 
 import { styles } from './style'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn'
 
-const { nativeCoin } = getNetworkInfo()
-
 const useStyles = makeStyles(styles)
 
 type ReplaceOwnerProps = {
@@ -65,7 +63,13 @@ export const ReviewReplaceOwnerModal = ({
   const addressBook = useSelector(addressBookSelector)
   const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -218,12 +222,13 @@ export const ReviewReplaceOwnerModal = ({
       </Block>
       <Hairline />
       <Block className={classes.gasCostsContainer}>
-        <Paragraph>
-          You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
-          <br />
-          {`Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-        </Paragraph>
-        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 3b838f705f..d28cbb5dbe 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -3,7 +3,6 @@ import MenuItem from '@material-ui/core/MenuItem'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useEffect, useState } from 'react'
-import { getNetworkInfo } from 'src/config'
 import { styles } from './style'
 
 import Field from 'src/components/forms/Field'
@@ -21,12 +20,10 @@ import { SafeOwner } from 'src/logic/safe/store/models/safe'
 import { List } from 'immutable'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 const THRESHOLD_FIELD_NAME = 'threshold'
 
-const { nativeCoin } = getNetworkInfo()
-
 const useStyles = makeStyles(styles)
 
 type ChangeThresholdModalProps = {
@@ -47,7 +44,13 @@ export const ChangeThresholdModal = ({
   const classes = useStyles()
   const [data, setData] = useState('')
 
-  const { gasCostFormatted, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isCreation,
+    isExecution,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
     txData: data,
     txRecipient: safeAddress,
   })
@@ -124,10 +127,13 @@ export const ChangeThresholdModal = ({
                 </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 ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-                </Paragraph>
-                <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={false} />
+                <TransactionFees
+                  gasCostFormatted={gasCostFormatted}
+                  isExecution={isExecution}
+                  isCreation={isCreation}
+                  isOffChainSignature={isOffChainSignature}
+                  txEstimationExecutionStatus={txEstimationExecutionStatus}
+                />
               </Row>
             </Block>
             <Hairline style={{ position: 'absolute', bottom: 85 }} />
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 670c689594..cb2ac9f27e 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -22,8 +22,7 @@ import { processTransaction } from 'src/logic/safe/store/actions/processTransact
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TransactionFailText } from 'src/components/TransactionFailText'
-import { TransactionFeesText } from 'src/components/TransactionsFeesText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 const useStyles = makeStyles(styles)
 
@@ -145,14 +144,13 @@ export const ApproveTxModal = ({
             </>
           )}
         </Row>
-        <TransactionFeesText
+        <TransactionFees
           gasCostFormatted={gasCostFormatted}
           isExecution={isExecution}
           isCreation={isCreation}
           isOffChainSignature={isOffChainSignature}
           txEstimationExecutionStatus={txEstimationExecutionStatus}
         />
-        <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
       </Block>
       <Row align="center" className={classes.buttonRow}>
         <Button minHeight={42} minWidth={140} onClick={onClose}>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
index 2f3cc3b1bc..8161ac4b28 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
@@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { getNetworkInfo } from 'src/config'
 
 import { styles } from './style'
 
@@ -21,8 +20,7 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-
-import { TransactionFailText } from 'src/components/TransactionFailText'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 const useStyles = makeStyles(styles)
 
@@ -32,14 +30,18 @@ type Props = {
   tx: Transaction
 }
 
-const { nativeCoin } = getNetworkInfo()
-
 export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const classes = useStyles()
 
-  const { gasCostFormatted, txEstimationExecutionStatus, isExecution } = useEstimateTransactionGas({
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
     txData: EMPTY_DATA,
     txRecipient: safeAddress,
   })
@@ -81,10 +83,13 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
           </Paragraph>
         </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 ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
-          <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
         </Row>
       </Block>
       <Row align="center" className={classes.buttonRow}>

From 1f062598c239deaa525cdf7bb83d44c467b4c1b9 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 7 Jan 2021 14:40:34 -0300
Subject: [PATCH 72/84] Remove unnecessary awaits

---
 src/logic/safe/transactions/gas.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index ca9c236eea..b9ae685837 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -57,7 +57,7 @@ export const estimateTransactionGas = async ({
 
   if (isExecution) {
     // Gas of executing a transaction within the safe (threshold reached and transaction ready to be executed)
-    return await estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', operation)
+    return estimateExecTransactionGas(safeAddress, txData, txRecipient, txAmount || '0', operation)
   }
 
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
@@ -80,7 +80,7 @@ export const estimateTransactionGas = async ({
     })
   // Gas of approving the transaction (threshold not reached or user did not executed the transaction)
   const approveTransactionTxData = await safeInstance.methods.approveHash(txHash).encodeABI()
-  return await calculateGasOf(approveTransactionTxData, from, safeAddress)
+  return calculateGasOf(approveTransactionTxData, from, safeAddress)
 }
 
 // Parses the result from the error message (GETH, OpenEthereum/Parity and Nethermind) and returns the data value

From bee96c576a4194bd9f6eabe0945f8279b1e7ec0d Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 8 Jan 2021 10:05:30 -0300
Subject: [PATCH 73/84] Pass safeTxGas to useEstimateTransactionGas.tsx
 Improves how we use default params

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 26 ++++---
 src/logic/safe/transactions/gas.ts            | 73 +++++++------------
 .../ExpandedTx/ApproveTxModal/index.tsx       |  1 +
 3 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 17d3797060..ce331dbacf 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -20,6 +20,7 @@ import { providerSelector } from '../wallets/store/selectors'
 import { List } from 'immutable'
 import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
 import { checkIfOffChainSignatureIsPossible } from 'src/logic/safe/safeTxSigner'
+import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 
 export enum EstimationStatus {
   LOADING = 'LOADING',
@@ -42,7 +43,7 @@ type TransactionEstimationProps = {
   gasPrice?: string
   gasToken?: string
   refundReceiver?: string // Address of receiver of gas payment (or 0 if tx.origin).
-  safeTxGas?: string
+  safeTxGas?: number
   from?: string
   isExecution: boolean
   isCreation: boolean
@@ -55,7 +56,7 @@ const estimateTransactionGas = async ({
   txRecipient,
   txConfirmations,
   txAmount,
-  operation = CALL,
+  operation,
   gasPrice,
   gasToken,
   refundReceiver,
@@ -66,7 +67,7 @@ const estimateTransactionGas = async ({
   isOffChainSignature = false,
 }: TransactionEstimationProps): Promise<number> => {
   if (isCreation) {
-    return estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount || '0', operation)
+    return estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount || '0', operation || CALL)
   }
 
   if (!from) {
@@ -78,22 +79,22 @@ const estimateTransactionGas = async ({
       safeAddress,
       txRecipient,
       txConfirmations,
-      txAmount,
+      txAmount: txAmount || '0',
       txData,
-      operation,
+      operation: operation || CALL,
       from,
-      gasPrice,
-      gasToken,
-      refundReceiver,
-      safeTxGas,
+      gasPrice: gasPrice || '0',
+      gasToken: gasToken || ZERO_ADDRESS,
+      refundReceiver: refundReceiver || ZERO_ADDRESS,
+      safeTxGas: safeTxGas || 0,
     })
   }
 
   return estimateGasForTransactionApproval({
     safeAddress,
-    operation,
+    operation: operation || CALL,
     txData,
-    txAmount,
+    txAmount: txAmount || '0',
     txRecipient,
     from,
     isOffChainSignature,
@@ -107,6 +108,7 @@ type UseEstimateTransactionGasProps = {
   txAmount?: string
   preApprovingOwner?: string
   operation?: number
+  safeTxGas?: number
 }
 
 type TransactionGasEstimationResult = {
@@ -127,6 +129,7 @@ export const useEstimateTransactionGas = ({
   txAmount,
   preApprovingOwner,
   operation,
+  safeTxGas,
 }: UseEstimateTransactionGasProps): TransactionGasEstimationResult => {
   const [gasEstimation, setGasEstimation] = useState<TransactionGasEstimationResult>({
     txEstimationExecutionStatus: EstimationStatus.LOADING,
@@ -167,6 +170,7 @@ export const useEstimateTransactionGas = ({
           isOffChainSignature,
           operation,
           from,
+          safeTxGas,
         })
         const gasPrice = await calculateGasPrice()
         const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index ff84d2fd29..8467a105d2 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -3,7 +3,6 @@ import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { calculateGasOf, EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { sameString } from 'src/utils/strings'
-import { CALL } from './send'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
 import { List } from 'immutable'
@@ -169,12 +168,12 @@ type TransactionExecutionEstimationProps = {
   safeAddress: string
   txRecipient: string
   txConfirmations?: List<Confirmation>
-  txAmount?: string
-  operation?: number
-  gasPrice?: string
-  gasToken?: string
-  refundReceiver?: string // Address of receiver of gas payment (or 0 if tx.origin).
-  safeTxGas?: string
+  txAmount: string
+  operation: number
+  gasPrice: string
+  gasToken: string
+  refundReceiver: string // Address of receiver of gas payment (or 0 if tx.origin).
+  safeTxGas: number
   from: string
 }
 
@@ -182,53 +181,42 @@ export const estimateGasForTransactionExecution = async ({
   safeAddress,
   txRecipient,
   txConfirmations,
-  txAmount = '0',
+  txAmount,
   txData,
-  operation = CALL,
+  operation,
   from,
-  gasPrice = '0',
-  gasToken = ZERO_ADDRESS,
-  refundReceiver = ZERO_ADDRESS,
-  safeTxGas = '0',
+  gasPrice,
+  gasToken,
+  refundReceiver,
+  safeTxGas,
 }: TransactionExecutionEstimationProps): Promise<number> => {
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
 
   const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
 
   const executeTransactionTxData = await safeInstance.methods
-    .execTransaction(
-      txRecipient,
-      txAmount as string,
-      txData,
-      operation as number,
-      safeTxGas as string,
-      0,
-      gasPrice as string,
-      gasToken as string,
-      refundReceiver as string,
-      sigs,
-    )
+    .execTransaction(txRecipient, txAmount, txData, operation, safeTxGas, 0, gasPrice, gasToken, refundReceiver, sigs)
     .encodeABI()
 
   const gasEstimation = await calculateGasOf(executeTransactionTxData, from, safeAddress)
 
-  const gasBatches = [0, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]
-    .filter((currentGas) => currentGas < gasEstimation)
+  const gasBatches = [gasEstimation, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]
+    .filter((currentGas) => currentGas >= gasEstimation)
     // Reorders gas from lowest to highest
-    .sort((a, b) => b - a)
+    .sort((a, b) => a - b)
 
   for (const baseGasIterator of gasBatches) {
     const executeTransactionGasCheck = await safeInstance.methods
       .execTransaction(
         txRecipient,
-        txAmount as string,
+        txAmount,
         txData,
-        operation as number,
-        safeTxGas as string,
+        operation,
+        safeTxGas,
         gasEstimation,
-        gasPrice as string,
-        gasToken as string,
-        refundReceiver as string,
+        gasPrice,
+        gasToken,
+        refundReceiver,
         sigs,
       )
       .call()
@@ -246,8 +234,8 @@ type TransactionApprovalEstimationProps = {
   txData: string
   safeAddress: string
   txRecipient: string
-  txAmount?: string
-  operation?: number
+  txAmount: string
+  operation: number
   from: string
   isOffChainSignature: boolean
 }
@@ -269,18 +257,7 @@ export const estimateGasForTransactionApproval = async ({
 
   const nonce = await safeInstance.methods.nonce().call()
   const txHash = await safeInstance.methods
-    .getTransactionHash(
-      txRecipient,
-      txAmount || '0',
-      txData,
-      operation as number,
-      0,
-      0,
-      0,
-      ZERO_ADDRESS,
-      ZERO_ADDRESS,
-      nonce,
-    )
+    .getTransactionHash(txRecipient, txAmount, txData, operation, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
     .call({
       from,
     })
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index cb2ac9f27e..207e3e2ccc 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -91,6 +91,7 @@ export const ApproveTxModal = ({
     txConfirmations: tx.confirmations,
     txAmount: tx.value,
     preApprovingOwner: approveAndExecute ? userAddress : undefined,
+    safeTxGas: tx.safeTxGas,
   })
 
   const handleExecuteCheckbox = () => setApproveAndExecute((prevApproveAndExecute) => !prevApproveAndExecute)

From 63cab3f0551286d2ed268246bc4f3002b78999d4 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 8 Jan 2021 10:40:17 -0300
Subject: [PATCH 74/84] Fix gas iteration on estimateGasForTransactionExecution

---
 src/logic/safe/transactions/gas.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 8467a105d2..84c4823417 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -206,7 +206,7 @@ export const estimateGasForTransactionExecution = async ({
     .sort((a, b) => a - b)
 
   for (const baseGasIterator of gasBatches) {
-    const executeTransactionGasCheck = await safeInstance.methods
+    safeInstance.methods
       .execTransaction(
         txRecipient,
         txAmount,
@@ -220,10 +220,10 @@ export const estimateGasForTransactionExecution = async ({
         sigs,
       )
       .call()
-
-    if (executeTransactionGasCheck) {
-      return baseGasIterator
-    }
+      .then(() => {
+        return Promise.resolve(baseGasIterator)
+      })
+      .catch(() => console.warn(`Gas estimation failed with gas amount: ${baseGasIterator}`))
   }
 
   // In there is no gasBatches available that could run successfully execTransaction we need to inform the user

From 00919c7cdf3ef59ffc023c9d45d11d34f46129a6 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 8 Jan 2021 11:40:15 -0300
Subject: [PATCH 75/84] Fix estimateGasForTransactionExecution calculation

---
 src/logic/safe/transactions/gas.ts | 41 ++++++------------------------
 1 file changed, 8 insertions(+), 33 deletions(-)

diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index 84c4823417..baa90ee15b 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -184,7 +184,6 @@ export const estimateGasForTransactionExecution = async ({
   txAmount,
   txData,
   operation,
-  from,
   gasPrice,
   gasToken,
   refundReceiver,
@@ -194,40 +193,16 @@ export const estimateGasForTransactionExecution = async ({
 
   const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
 
-  const executeTransactionTxData = await safeInstance.methods
+  console.info(`Estimating transaction success for with gas amount: ${safeTxGas}...`)
+  await safeInstance.methods
     .execTransaction(txRecipient, txAmount, txData, operation, safeTxGas, 0, gasPrice, gasToken, refundReceiver, sigs)
-    .encodeABI()
-
-  const gasEstimation = await calculateGasOf(executeTransactionTxData, from, safeAddress)
-
-  const gasBatches = [gasEstimation, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]
-    .filter((currentGas) => currentGas >= gasEstimation)
-    // Reorders gas from lowest to highest
-    .sort((a, b) => a - b)
-
-  for (const baseGasIterator of gasBatches) {
-    safeInstance.methods
-      .execTransaction(
-        txRecipient,
-        txAmount,
-        txData,
-        operation,
-        safeTxGas,
-        gasEstimation,
-        gasPrice,
-        gasToken,
-        refundReceiver,
-        sigs,
-      )
-      .call()
-      .then(() => {
-        return Promise.resolve(baseGasIterator)
-      })
-      .catch(() => console.warn(`Gas estimation failed with gas amount: ${baseGasIterator}`))
-  }
+    .call()
+    .catch(() => {
+      throw new Error(`Gas estimation failed with gas amount: ${safeTxGas}`)
+    })
 
-  // In there is no gasBatches available that could run successfully execTransaction we need to inform the user
-  throw new Error('There was no valid value of gas to execute the transaction, the transaction may fail')
+  console.info(`Gas estimation successfully finished with gas amount: ${safeTxGas}`)
+  return safeTxGas
 }
 
 type TransactionApprovalEstimationProps = {

From d25e9074bd916b3e3f726e65971b674f30e828e6 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 8 Jan 2021 12:35:05 -0300
Subject: [PATCH 76/84] Fix generateSignaturesFromTxConfirmations calculation

---
 src/logic/safe/safeTxSigner.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/logic/safe/safeTxSigner.ts b/src/logic/safe/safeTxSigner.ts
index df93ad422e..4fce148dd0 100644
--- a/src/logic/safe/safeTxSigner.ts
+++ b/src/logic/safe/safeTxSigner.ts
@@ -40,7 +40,7 @@ export const generateSignaturesFromTxConfirmations = (
     }) || List([])
 
   if (preApprovingOwner) {
-    confirmationsMap.push({ owner: preApprovingOwner, signature: null })
+    confirmationsMap = confirmationsMap.push({ owner: preApprovingOwner, signature: null })
   }
 
   // The constant parts need to be sorted so that the recovered signers are sorted ascending

From fccd8d1aebe93167e3957651b1ed47ed530d4bec Mon Sep 17 00:00:00 2001
From: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Date: Fri, 8 Jan 2021 16:41:32 +0100
Subject: [PATCH 77/84] Remove unnecessary Promise and await

---
 src/logic/safe/store/actions/createTransaction.ts  | 4 +---
 src/logic/safe/store/actions/processTransaction.ts | 4 +---
 src/logic/safe/transactions/send.ts                | 5 +----
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index 3561dc56ab..0e318e3391 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -136,9 +136,7 @@ const createTransaction = (
       }
     }
 
-    const tx = isExecution
-      ? await getExecutionTransaction(txArgs)
-      : await getApprovalTransaction(safeInstance, safeTxHash)
+    const tx = isExecution ? getExecutionTransaction(txArgs) : getApprovalTransaction(safeInstance, safeTxHash)
     const sendParams: PayableTx = { from, value: 0 }
 
     // if not set owner management tests will fail on ganache
diff --git a/src/logic/safe/store/actions/processTransaction.ts b/src/logic/safe/store/actions/processTransaction.ts
index 41fc17cfd9..8d31d343ab 100644
--- a/src/logic/safe/store/actions/processTransaction.ts
+++ b/src/logic/safe/store/actions/processTransaction.ts
@@ -103,9 +103,7 @@ export const processTransaction = ({
       }
     }
 
-    transaction = isExecution
-      ? await getExecutionTransaction(txArgs)
-      : await getApprovalTransaction(safeInstance, tx.safeTxHash)
+    transaction = isExecution ? getExecutionTransaction(txArgs) : getApprovalTransaction(safeInstance, tx.safeTxHash)
 
     const sendParams: any = { from, value: 0 }
 
diff --git a/src/logic/safe/transactions/send.ts b/src/logic/safe/transactions/send.ts
index 67bbab2f1a..289c8fe355 100644
--- a/src/logic/safe/transactions/send.ts
+++ b/src/logic/safe/transactions/send.ts
@@ -30,10 +30,7 @@ export const getTransactionHash = async ({
   return txHash
 }
 
-export const getApprovalTransaction = async (
-  safeInstance: GnosisSafe,
-  txHash: string,
-): Promise<NonPayableTransactionObject<void>> => {
+export const getApprovalTransaction = (safeInstance: GnosisSafe, txHash: string): NonPayableTransactionObject<void> => {
   try {
     return safeInstance.methods.approveHash(txHash)
   } catch (err) {

From 289b6e223d5303a983fe0e74ad06867d419d940d Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 8 Jan 2021 13:09:07 -0300
Subject: [PATCH 78/84] Fix estimateGasForTransactionExecution for preApproving
 owner case

---
 src/logic/hooks/useEstimateTransactionGas.tsx |  8 ++++++++
 src/logic/safe/transactions/gas.ts            | 11 ++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index ce331dbacf..8c3d4e9cf6 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -31,6 +31,9 @@ export enum EstimationStatus {
 const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txConfirmations?: number): boolean =>
   txConfirmations === threshold || !!preApprovingOwner || threshold === 1
 
+const checkIfTxIsApproveAndExecution = (threshold: number, txConfirmations: number): boolean =>
+  txConfirmations + 1 === threshold
+
 const checkIfTxIsCreation = (txConfirmations: number): boolean => txConfirmations === 0
 
 type TransactionEstimationProps = {
@@ -48,6 +51,7 @@ type TransactionEstimationProps = {
   isExecution: boolean
   isCreation: boolean
   isOffChainSignature?: boolean
+  approvalAndExecution?: boolean
 }
 
 const estimateTransactionGas = async ({
@@ -65,6 +69,7 @@ const estimateTransactionGas = async ({
   isExecution,
   isCreation,
   isOffChainSignature = false,
+  approvalAndExecution,
 }: TransactionEstimationProps): Promise<number> => {
   if (isCreation) {
     return estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount || '0', operation || CALL)
@@ -87,6 +92,7 @@ const estimateTransactionGas = async ({
       gasToken: gasToken || ZERO_ADDRESS,
       refundReceiver: refundReceiver || ZERO_ADDRESS,
       safeTxGas: safeTxGas || 0,
+      approvalAndExecution,
     })
   }
 
@@ -155,6 +161,7 @@ export const useEstimateTransactionGas = ({
 
       const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations?.size)
       const isCreation = checkIfTxIsCreation(txConfirmations?.size || 0)
+      const approvalAndExecution = checkIfTxIsApproveAndExecution(Number(threshold), txConfirmations?.size || 0)
 
       try {
         const isOffChainSignature = checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)
@@ -171,6 +178,7 @@ export const useEstimateTransactionGas = ({
           operation,
           from,
           safeTxGas,
+          approvalAndExecution,
         })
         const gasPrice = await calculateGasPrice()
         const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index baa90ee15b..bf56d50fee 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -175,6 +175,7 @@ type TransactionExecutionEstimationProps = {
   refundReceiver: string // Address of receiver of gas payment (or 0 if tx.origin).
   safeTxGas: number
   from: string
+  approvalAndExecution?: boolean
 }
 
 export const estimateGasForTransactionExecution = async ({
@@ -188,11 +189,19 @@ export const estimateGasForTransactionExecution = async ({
   gasToken,
   refundReceiver,
   safeTxGas,
+  approvalAndExecution,
 }: TransactionExecutionEstimationProps): Promise<number> => {
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
 
-  const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
+  if (approvalAndExecution) {
+    console.info(`Estimating transaction success for execution & approval...`)
+    // @todo (agustin) once we solve the problem with the preApprovingOwner, we need to use the method bellow (execTransaction) with sigs = generateSignaturesFromTxConfirmations(txConfirmations,from)
+    const safeTxGas = await estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount, operation)
+    console.info(`Gas estimation successfully finished with gas amount: ${safeTxGas}`)
+    return safeTxGas
+  }
 
+  const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
   console.info(`Estimating transaction success for with gas amount: ${safeTxGas}...`)
   await safeInstance.methods
     .execTransaction(txRecipient, txAmount, txData, operation, safeTxGas, 0, gasPrice, gasToken, refundReceiver, sigs)

From 7ca4b6438e601910bd2d9cefa59472bb2a217523 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 8 Jan 2021 15:09:18 -0300
Subject: [PATCH 79/84] Improve logging

---
 src/logic/hooks/useEstimateTransactionGas.tsx |  1 +
 src/logic/safe/transactions/gas.ts            | 37 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 8c3d4e9cf6..06e1567a25 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -202,6 +202,7 @@ export const useEstimateTransactionGas = ({
           isOffChainSignature,
         })
       } catch (error) {
+        console.warn(error.message)
         // We put a fixed the amount of gas to let the user try to execute the tx, but it's not accurate so it will probably fail
         const gasEstimation = 10000
         const gasCost = fromTokenUnit(gasEstimation, nativeCoin.decimals)
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index bf56d50fee..fa220bacd8 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -192,26 +192,31 @@ export const estimateGasForTransactionExecution = async ({
   approvalAndExecution,
 }: TransactionExecutionEstimationProps): Promise<number> => {
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+  try {
+    if (approvalAndExecution) {
+      console.info(`Estimating transaction success for execution & approval...`)
+      // @todo (agustin) once we solve the problem with the preApprovingOwner, we need to use the method bellow (execTransaction) with sigs = generateSignaturesFromTxConfirmations(txConfirmations,from)
+      const gasEstimation = await estimateGasForTransactionCreation(
+        safeAddress,
+        txData,
+        txRecipient,
+        txAmount,
+        operation,
+      )
+      console.info(`Gas estimation successfully finished with gas amount: ${gasEstimation}`)
+      return gasEstimation
+    }
+    const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
+    console.info(`Estimating transaction success for with gas amount: ${safeTxGas}...`)
+    await safeInstance.methods
+      .execTransaction(txRecipient, txAmount, txData, operation, safeTxGas, 0, gasPrice, gasToken, refundReceiver, sigs)
+      .call()
 
-  if (approvalAndExecution) {
-    console.info(`Estimating transaction success for execution & approval...`)
-    // @todo (agustin) once we solve the problem with the preApprovingOwner, we need to use the method bellow (execTransaction) with sigs = generateSignaturesFromTxConfirmations(txConfirmations,from)
-    const safeTxGas = await estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount, operation)
     console.info(`Gas estimation successfully finished with gas amount: ${safeTxGas}`)
     return safeTxGas
+  } catch (error) {
+    throw new Error(`Gas estimation failed with gas amount: ${safeTxGas}`)
   }
-
-  const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
-  console.info(`Estimating transaction success for with gas amount: ${safeTxGas}...`)
-  await safeInstance.methods
-    .execTransaction(txRecipient, txAmount, txData, operation, safeTxGas, 0, gasPrice, gasToken, refundReceiver, sigs)
-    .call()
-    .catch(() => {
-      throw new Error(`Gas estimation failed with gas amount: ${safeTxGas}`)
-    })
-
-  console.info(`Gas estimation successfully finished with gas amount: ${safeTxGas}`)
-  return safeTxGas
 }
 
 type TransactionApprovalEstimationProps = {

From 71fb956834c75b620ab2b0c6611e1dd9b1fc5f13 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 11 Jan 2021 09:08:47 -0300
Subject: [PATCH 80/84] Remove log

---
 .../SendModal/screens/ContractInteraction/Review/index.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 7309b0ef73..532bf33b38 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -88,7 +88,6 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     }
     onClose()
   }
-  console.log('ewview')
 
   return (
     <>

From db15da9cd9320156b579924ebee770ad18d8c451 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 11 Jan 2021 09:41:38 -0300
Subject: [PATCH 81/84] Fix typo

---
 src/components/TransactionFailText/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TransactionFailText/index.tsx b/src/components/TransactionFailText/index.tsx
index 7716f6d6c3..d61664cceb 100644
--- a/src/components/TransactionFailText/index.tsx
+++ b/src/components/TransactionFailText/index.tsx
@@ -41,7 +41,7 @@ export const TransactionFailText = ({
   if (isExecution) {
     errorMessage =
       threshold && threshold > 1
-        ? `To save gas cost, cancel this transaction`
+        ? `To save gas costs, cancel this transaction`
         : `To save gas costs, avoid executing the transaction.`
   }
 

From b02f929efd0aba97e43fd623ae31397e03b93f07 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 11 Jan 2021 12:25:06 -0300
Subject: [PATCH 82/84] Uses operation in useEstimateTransactionGas

---
 .../Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 72f5708bb0..edc6376799 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -87,6 +87,7 @@ const ApproveTxModal = ({
     txConfirmations: tx.confirmations.size,
     txAmount: tx.value,
     preApprovingOwner: approveAndExecute ? userAddress : undefined,
+    operation: tx.operation,
   })
 
   const handleExecuteCheckbox = () => setApproveAndExecute((prevApproveAndExecute) => !prevApproveAndExecute)

From 40dabdd95050a6766d30d83171ee800a67106bd6 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 11 Jan 2021 12:48:42 -0300
Subject: [PATCH 83/84] Uses operation in useEstimateTransactionGas

---
 .../Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
index 207e3e2ccc..88c5c99437 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@@ -92,6 +92,7 @@ export const ApproveTxModal = ({
     txAmount: tx.value,
     preApprovingOwner: approveAndExecute ? userAddress : undefined,
     safeTxGas: tx.safeTxGas,
+    operation: tx.operation,
   })
 
   const handleExecuteCheckbox = () => setApproveAndExecute((prevApproveAndExecute) => !prevApproveAndExecute)

From 0a77aa3b32aa4a2a9573380f85511e327c8f22f4 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 11 Jan 2021 14:01:56 -0300
Subject: [PATCH 84/84] Fix missing dependency

---
 src/logic/hooks/useEstimateTransactionGas.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index 06e1567a25..0acb86d8f7 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -234,6 +234,7 @@ export const useEstimateTransactionGas = ({
     operation,
     safeVersion,
     smartContractWallet,
+    safeTxGas,
   ])
 
   return gasEstimation