(Feature) - #1048 Tx will fail warning

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)',

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, 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>
+  )
+}

src/components/TransactionsFees/index.tsx

@@ -0,0 +1,43 @@
+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
+  gasCostFormatted: string
+  isExecution: boolean
+  isCreation: boolean
+  isOffChainSignature: boolean
+}
+const { nativeCoin } = getNetworkInfo()
+
+export const TransactionFees = ({
+  gasCostFormatted,
+  isExecution,
+  isCreation,
+  isOffChainSignature,
+  txEstimationExecutionStatus,
+}: 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>
+      <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+    </>
+  )
+}

src/logic/hooks/useEstimateTransactionGas.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useState } from 'react'
+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 {
+  safeCurrentVersionSelector,
+  safeParamAddressFromStateSelector,
+  safeThresholdSelector,
+} from 'src/logic/safe/store/selectors'
+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'
+import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
+
+export enum EstimationStatus {
+  LOADING = 'LOADING',
+  FAILURE = 'FAILURE',
+  SUCCESS = 'SUCCESS',
+}
+
+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 = {
+  txData: string
+  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?: number
+  from?: string
+  isExecution: boolean
+  isCreation: boolean
+  isOffChainSignature?: boolean
+  approvalAndExecution?: boolean
+}
+
+const estimateTransactionGas = async ({
+  txData,
+  safeAddress,
+  txRecipient,
+  txConfirmations,
+  txAmount,
+  operation,
+  gasPrice,
+  gasToken,
+  refundReceiver,
+  safeTxGas,
+  from,
+  isExecution,
+  isCreation,
+  isOffChainSignature = false,
+  approvalAndExecution,
+}: TransactionEstimationProps): Promise<number> => {
+  if (isCreation) {
+    return estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount || '0', operation || CALL)
+  }
+
+  if (!from) {
+    throw new Error('No from provided for approving or execute transaction')
+  }
+
+  if (isExecution) {
+    return estimateGasForTransactionExecution({
+      safeAddress,
+      txRecipient,
+      txConfirmations,
+      txAmount: txAmount || '0',
+      txData,
+      operation: operation || CALL,
+      from,
+      gasPrice: gasPrice || '0',
+      gasToken: gasToken || ZERO_ADDRESS,
+      refundReceiver: refundReceiver || ZERO_ADDRESS,
+      safeTxGas: safeTxGas || 0,
+      approvalAndExecution,
+    })
+  }
+
+  return estimateGasForTransactionApproval({
+    safeAddress,
+    operation: operation || CALL,
+    txData,
+    txAmount: txAmount || '0',
+    txRecipient,
+    from,
+    isOffChainSignature,
+  })
+}
+
+type UseEstimateTransactionGasProps = {
+  txData: string
+  txRecipient: string
+  txConfirmations?: List<Confirmation>
+  txAmount?: string
+  preApprovingOwner?: string
+  operation?: number
+  safeTxGas?: number
+}
+
+type TransactionGasEstimationResult = {
+  txEstimationExecutionStatus: EstimationStatus
+  gasEstimation: number // Amount of gas needed for execute or approve the transaction
+  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
+  isCreation: boolean // Returns true if the transaction is a creation transaction
+  isOffChainSignature: boolean // Returns true if offChainSignature is available
+}
+
+export const useEstimateTransactionGas = ({
+  txRecipient,
+  txData,
+  txConfirmations,
+  txAmount,
+  preApprovingOwner,
+  operation,
+  safeTxGas,
+}: UseEstimateTransactionGasProps): TransactionGasEstimationResult => {
+  const [gasEstimation, setGasEstimation] = useState<TransactionGasEstimationResult>({
+    txEstimationExecutionStatus: EstimationStatus.LOADING,
+    gasEstimation: 0,
+    gasCost: '0',
+    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(() => {
+    const estimateGas = async () => {
+      if (!txData.length) {
+        return
+      }
+
+      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)
+
+        const gasEstimation = await estimateTransactionGas({
+          safeAddress,
+          txRecipient,
+          txData,
+          txAmount,
+          txConfirmations,
+          isExecution,
+          isCreation,
+          isOffChainSignature,
+          operation,
+          from,
+          safeTxGas,
+          approvalAndExecution,
+        })
+        const gasPrice = await calculateGasPrice()
+        const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
+        const gasCost = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
+        const gasCostFormatted = formatAmount(gasCost)
+
+        let txEstimationExecutionStatus = EstimationStatus.SUCCESS
+
+        if (gasEstimation <= 0) {
+          txEstimationExecutionStatus = isOffChainSignature ? EstimationStatus.SUCCESS : EstimationStatus.FAILURE
+        }
+
+        setGasEstimation({
+          txEstimationExecutionStatus,
+          gasEstimation,
+          gasCost,
+          gasCostFormatted,
+          gasPrice,
+          isExecution,
+          isCreation,
+          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)
+        const gasCostFormatted = formatAmount(gasCost)
+        setGasEstimation({
+          txEstimationExecutionStatus: EstimationStatus.FAILURE,
+          gasEstimation,
+          gasCost,
+          gasCostFormatted,
+          gasPrice: '1',
+          isExecution,
+          isCreation,
+          isOffChainSignature: false,
+        })
+      }
+    }
+
+    estimateGas()
+  }, [
+    txData,
+    safeAddress,
+    txRecipient,
+    txConfirmations,
+    txAmount,
+    preApprovingOwner,
+    nativeCoin.decimals,
+    threshold,
+    from,
+    operation,
+    safeVersion,
+    smartContractWallet,
+    safeTxGas,
+  ])
+
+  return gasEstimation
+}

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) => {