Advanced Options refactor (#2029)

* useEstimateTxGas: set the correct value of isOffChainSignature if gas estimation fails

src/logic/hooks/useEstimateTransactionGas.tsx

@@ -218,10 +218,9 @@ export const useEstimateTransactionGas = ({
       )
 
       const fixedGasCosts = getFixedGasCosts(Number(threshold))
-
-      try {
       const isOffChainSignature = checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)
 
+      try {
         const gasEstimation = await estimateTransactionGas({
           safeAddress,
           txRecipient,
@@ -279,7 +278,7 @@ export const useEstimateTransactionGas = ({
           gasLimit: '0',
           isExecution,
           isCreation,
-          isOffChainSignature: false,
+          isOffChainSignature,
         })
       }
     }

src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { 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, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 
 import AddressInfo from 'src/components/AddressInfo'
 import DividerLine from 'src/components/DividerLine'
@@ -26,7 +26,6 @@ import GasEstimationInfo from './GasEstimationInfo'
 import { getNetworkInfo } from 'src/config'
 import { TransactionParams } from './AppFrame'
 import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import Modal from 'src/components/Modal'
 import Row from 'src/components/layout/Row'
 import Hairline from 'src/components/layout/Hairline'
@@ -123,7 +122,6 @@ export const ConfirmTransactionModal = ({
   onTxReject,
 }: OwnProps): React.ReactElement | null => {
   const [estimatedSafeTxGas, setEstimatedSafeTxGas] = useState(0)
-  const threshold = useSelector(safeThresholdSelector) || 1
 
   const txRecipient: string | undefined = useMemo(() => (txs.length > 1 ? MULTI_SEND_ADDRESS : txs[0]?.to), [txs])
   const txData: string | undefined = useMemo(() => (txs.length > 1 ? encodeMultiSendCall(txs) : txs[0]?.data), [txs])
@@ -174,8 +172,6 @@ export const ConfirmTransactionModal = ({
     onClose()
   }
 
-  const getParametersStatus = () => (threshold > 1 ? 'ETH_DISABLED' : 'ENABLED')
-
   const confirmTransactions = async (txParameters: TxParameters) => {
     await dispatch(
       createTransaction(
@@ -274,9 +270,9 @@ export const ConfirmTransactionModal = ({
               <TxParametersDetail
                 txParameters={txParameters}
                 onEdit={toggleEditMode}
-                parametersStatus={getParametersStatus()}
                 isTransactionCreation={isCreation}
                 isTransactionExecution={isExecution}
+                isOffChainSignature={isOffChainSignature}
               />
             </Container>
             {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
@@ -297,16 +293,16 @@ export const ConfirmTransactionModal = ({
   return (
     <Modal description="Safe App transaction" title="Safe App transaction" open>
       <EditableTxParameters
+        isOffChainSignature={isOffChainSignature}
+        isExecution={isExecution}
         ethGasLimit={gasLimit}
         ethGasPrice={gasPriceFormatted}
         safeTxGas={gasEstimation.toString()}
-        parametersStatus={getParametersStatus()}
         closeEditModalCallback={closeEditModalCallback}
       >
         {(txParameters, toggleEditMode) => (
           <>
             <ModalTitle title={app.name} iconUrl={app.iconUrl} onClose={handleTxRejection} />
-
             <Hairline />
 
             {body(txParameters, toggleEditMode)}

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

@@ -126,6 +126,8 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -210,6 +212,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
               onEdit={toggleEditMode}
               isTransactionCreation={isCreation}
               isTransactionExecution={isExecution}
+              isOffChainSignature={isOffChainSignature}
             />
           </Block>
           <div className={classes.gasCostsContainer}>

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

@@ -94,7 +94,13 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   }
 
   return (
-    <EditableTxParameters ethGasLimit={gasLimit} ethGasPrice={gasPriceFormatted} safeTxGas={gasEstimation.toString()}>
+    <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
+      ethGasLimit={gasLimit}
+      ethGasPrice={gasPriceFormatted}
+      safeTxGas={gasEstimation.toString()}
+    >
       {(txParameters, toggleEditMode) => (
         <>
           <Row align="center" className={classes.heading} grow>
@@ -168,6 +174,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
               onEdit={toggleEditMode}
               isTransactionCreation={isCreation}
               isTransactionExecution={isExecution}
+              isOffChainSignature={isOffChainSignature}
             />
           </Block>
           {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (

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

@@ -140,6 +140,8 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -206,6 +208,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
               onEdit={toggleEditMode}
               isTransactionCreation={isCreation}
               isTransactionExecution={isExecution}
+              isOffChainSignature={isOffChainSignature}
             />
           </Block>
           <div className={classes.gasCostsContainer}>

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

@@ -178,6 +178,8 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -260,10 +262,11 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
               onEdit={toggleEditMode}
               isTransactionCreation={isCreation}
               isTransactionExecution={isExecution}
+              isOffChainSignature={isOffChainSignature}
             />
+          </Block>
 
           {/* Disclaimer */}
-          </Block>
           {txEstimationExecutionStatus !== EstimationStatus.LOADING && (
             <div className={classes.gasCostsContainer}>
               <TransactionFees

src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx

@@ -127,6 +127,8 @@ export const RemoveModuleModal = ({ onClose, selectedModulePair }: RemoveModuleM
       open
     >
       <EditableTxParameters
+        isOffChainSignature={isOffChainSignature}
+        isExecution={isExecution}
         ethGasLimit={gasLimit}
         ethGasPrice={gasPriceFormatted}
         safeTxGas={gasEstimation.toString()}
@@ -181,6 +183,7 @@ export const RemoveModuleModal = ({ onClose, selectedModulePair }: RemoveModuleM
                   onEdit={toggleEditMode}
                   isTransactionCreation={isCreation}
                   isTransactionExecution={isExecution}
+                  isOffChainSignature={isOffChainSignature}
                 />
               </Block>
               <Row className={cn(classes.modalDescription, classes.gasCostsContainer)}>

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx

@@ -101,6 +101,8 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -214,6 +216,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
             compact={false}
             isTransactionCreation={isCreation}
             isTransactionExecution={isExecution}
+            isOffChainSignature={isOffChainSignature}
           />
 
           <Block className={classes.gasCostsContainer}>

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx

@@ -123,6 +123,8 @@ export const ReviewRemoveOwnerModal = ({
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -241,6 +243,7 @@ export const ReviewRemoveOwnerModal = ({
             compact={false}
             isTransactionCreation={isCreation}
             isTransactionExecution={isExecution}
+            isOffChainSignature={isOffChainSignature}
           />
 
           {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx

@@ -120,6 +120,8 @@ export const ReviewReplaceOwnerModal = ({
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -261,6 +263,7 @@ export const ReviewReplaceOwnerModal = ({
             compact={false}
             isTransactionCreation={isCreation}
             isTransactionExecution={isExecution}
+            isOffChainSignature={isOffChainSignature}
           />
 
           <Block className={classes.gasCostsContainer}>

src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Review.tsx

@@ -233,6 +233,8 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -282,6 +284,7 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
               onEdit={toggleEditMode}
               isTransactionCreation={isCreation}
               isTransactionExecution={isExecution}
+              isOffChainSignature={isOffChainSignature}
             />
           </Block>
           <div className={classes.gasCostsContainer}>

src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx

@@ -116,6 +116,8 @@ export const RemoveLimitModal = ({ onClose, spendingLimit, open }: RemoveSpendin
       description="Remove the selected Spending Limit"
     >
       <EditableTxParameters
+        isOffChainSignature={isOffChainSignature}
+        isExecution={isExecution}
         ethGasLimit={gasLimit}
         ethGasPrice={gasPriceFormatted}
         safeTxGas={gasEstimation.toString()}
@@ -148,6 +150,7 @@ export const RemoveLimitModal = ({ onClose, spendingLimit, open }: RemoveSpendin
                   onEdit={toggleEditMode}
                   isTransactionCreation={isCreation}
                   isTransactionExecution={isExecution}
+                  isOffChainSignature={isOffChainSignature}
                 />
               </Block>
 

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

@@ -84,8 +84,6 @@ export const ChangeThresholdModal = ({
     }
   }, [safeAddress, editedThreshold])
 
-  const getParametersStatus = () => (threshold > 1 ? 'ETH_DISABLED' : 'ENABLED')
-
   const handleSubmit = async ({ txParameters }) => {
     await dispatch(
       createTransaction({
@@ -120,6 +118,8 @@ export const ChangeThresholdModal = ({
 
   return (
     <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
       ethGasLimit={gasLimit}
       ethGasPrice={gasPriceFormatted}
       safeTxGas={gasEstimation.toString()}
@@ -181,9 +181,9 @@ export const ChangeThresholdModal = ({
                   <TxParametersDetail
                     txParameters={txParameters}
                     onEdit={toggleEditMode}
-                    parametersStatus={getParametersStatus()}
                     isTransactionCreation={isCreation}
                     isTransactionExecution={isExecution}
+                    isOffChainSignature={isOffChainSignature}
                   />
                 </Block>
                 {txEstimationExecutionStatus !== EstimationStatus.LOADING && (

src/routes/safe/components/Settings/UpdateSafeModal/index.tsx

@@ -76,7 +76,13 @@ export const UpdateSafeModal = ({ onClose, safeAddress }: Props): React.ReactEle
   })
 
   return (
-    <EditableTxParameters ethGasLimit={gasLimit} ethGasPrice={gasPriceFormatted} safeTxGas={gasEstimation.toString()}>
+    <EditableTxParameters
+      isOffChainSignature={isOffChainSignature}
+      isExecution={isExecution}
+      ethGasLimit={gasLimit}
+      ethGasPrice={gasPriceFormatted}
+      safeTxGas={gasEstimation.toString()}
+    >
       {(txParameters, toggleEditMode) => (
         <>
           <Row align="center" className={classes.heading} grow>
@@ -116,6 +122,7 @@ export const UpdateSafeModal = ({ onClose, safeAddress }: Props): React.ReactEle
                     compact={false}
                     isTransactionCreation={isCreation}
                     isTransactionExecution={isExecution}
+                    isOffChainSignature={isOffChainSignature}
                   />
                 </Block>
                 {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (

src/routes/safe/components/Transactions/TxList/modals/ApproveTxModal.tsx

@@ -317,6 +317,8 @@ export const ApproveTxModal = ({
   return (
     <Modal description={description} handleClose={onClose} open={isOpen} title={title}>
       <EditableTxParameters
+        isOffChainSignature={isOffChainSignature}
+        isExecution={isExecution}
         parametersStatus={getParametersStatus()}
         ethGasLimit={gasLimit}
         ethGasPrice={gasPriceFormatted}
@@ -370,13 +372,14 @@ export const ApproveTxModal = ({
                   )}
 
                   {/* Tx Parameters */}
-                  {approveAndExecute && (
+                  {(approveAndExecute || !isOffChainSignature) && (
                     <TxParametersDetail
                       txParameters={txParameters}
                       onEdit={toggleEditMode}
                       parametersStatus={getParametersStatus()}
                       isTransactionCreation={isCreation}
                       isTransactionExecution={isExecution}
+                      isOffChainSignature={isOffChainSignature}
                     />
                   )}
                 </Row>

src/routes/safe/components/Transactions/TxList/modals/RejectTxModal.tsx

@@ -82,6 +82,8 @@ export const RejectTxModal = ({ isOpen, onClose, gwTransaction }: Props): React.
   return (
     <Modal description="Reject Transaction" handleClose={onClose} open={isOpen} title="Reject Transaction">
       <EditableTxParameters
+        isOffChainSignature={isOffChainSignature}
+        isExecution={isExecution}
         ethGasLimit={gasLimit}
         ethGasPrice={gasPriceFormatted}
         safeTxGas={'0'}
@@ -119,6 +121,7 @@ export const RejectTxModal = ({ isOpen, onClose, gwTransaction }: Props): React.
                   parametersStatus={getParametersStatus()}
                   isTransactionCreation={isCreation}
                   isTransactionExecution={isExecution}
+                  isOffChainSignature={isOffChainSignature}
                 />
               </Block>
 

src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx

@@ -15,11 +15,11 @@ import GnoForm from 'src/components/forms/GnoForm'
 import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
 import { composeValidators, minValue } from 'src/components/forms/validator'
 
-import { ParametersStatus, areSafeParamsEnabled, areEthereumParamsEnabled } from '../utils'
+import { ParametersStatus, areSafeParamsEnabled, areEthereumParamsVisible, ethereumTxParametersTitle } from '../utils'
 import { getNetworkInfo } from 'src/config'
 
 const StyledDivider = styled(Divider)`
-  margin: 0px;
+  margin: 16px 0;
 `
 
 const SafeOptions = styled.div`
@@ -39,7 +39,7 @@ const EthereumOptions = styled.div`
   }
 `
 const StyledLink = styled(Link)`
-  margin: 16px 0;
+  margin: 16px 0 0 0;
   display: inline-flex;
   align-items: center;
 
@@ -65,6 +65,7 @@ interface Props {
   txParameters: TxParameters
   onClose: (txParameters?: TxParameters) => void
   parametersStatus: ParametersStatus
+  isExecution: boolean
 }
 
 const formValidation = (values) => {
@@ -101,6 +102,7 @@ export const EditTxParametersForm = ({
   onClose,
   txParameters,
   parametersStatus = 'ENABLED',
+  isExecution,
 }: Props): React.ReactElement => {
   const classes = useStyles()
   const { safeNonce, safeTxGas, ethNonce, ethGasLimit, ethGasPrice } = txParameters
@@ -142,7 +144,7 @@ export const EditTxParametersForm = ({
           {() => (
             <>
               <StyledText size="xl" strong>
-                Safe transactions parameters
+                Safe transaction
               </StyledText>
 
               <SafeOptions>
@@ -168,25 +170,27 @@ export const EditTxParametersForm = ({
                 />
               </SafeOptions>
 
+              {areEthereumParamsVisible(parametersStatus) && (
+                <>
                   <StyledTextMt size="xl" strong>
-                Ethereum transactions parameters
+                    {ethereumTxParametersTitle(isExecution)}
                   </StyledTextMt>
 
                   <EthereumOptions>
                     <Field
                       name="ethNonce"
                       defaultValue={ethNonce}
-                  placeholder="Ethereum nonce"
+                      placeholder="Nonce"
-                  text="Ethereum nonce"
+                      text="Nonce"
                       type="number"
                       component={TextField}
-                  disabled={!areEthereumParamsEnabled(parametersStatus)}
+                      disabled={!areEthereumParamsVisible(parametersStatus)}
                     />
                     <Field
                       name="ethGasLimit"
                       defaultValue={ethGasLimit}
-                  placeholder="Ethereum gas limit"
+                      placeholder="Gas limit"
-                  text="Ethereum gas limit"
+                      text="Gas limit"
                       type="number"
                       component={TextField}
                       disabled={parametersStatus === 'CANCEL_TRANSACTION'}
@@ -195,10 +199,10 @@ export const EditTxParametersForm = ({
                       name="ethGasPrice"
                       defaultValue={ethGasPrice}
                       type="number"
-                  placeholder="Ethereum gas price (GWEI)"
+                      placeholder="Gas price (GWEI)"
-                  text="Ethereum gas price (GWEI)"
+                      text="Gas price (GWEI)"
                       component={TextField}
-                  disabled={!areEthereumParamsEnabled(parametersStatus)}
+                      disabled={!areEthereumParamsVisible(parametersStatus)}
                     />
                   </EthereumOptions>
 
@@ -207,10 +211,12 @@ export const EditTxParametersForm = ({
                     target="_blank"
                   >
                     <Text size="xl" color="primary">
-                  How can I configure the gas price manually?
+                      How can I configure these parameters manually?
                     </Text>
                     <Icon size="sm" type="externalLink" color="primary" />
                   </StyledLink>
+                </>
+              )}
 
               <StyledDivider />
 

src/routes/safe/components/Transactions/helpers/EditableTxParameters.tsx

@@ -7,6 +7,8 @@ import { safeThresholdSelector } from 'src/logic/safe/store/selectors'
 
 type Props = {
   children: (txParameters: TxParameters, toggleStatus: (txParameters?: TxParameters) => void) => any
+  isOffChainSignature: boolean
+  isExecution: boolean
   parametersStatus?: ParametersStatus
   ethGasLimit?: TxParameters['ethGasLimit']
   ethGasPrice?: TxParameters['ethGasPrice']
@@ -17,6 +19,8 @@ type Props = {
 
 export const EditableTxParameters = ({
   children,
+  isOffChainSignature,
+  isExecution,
   parametersStatus,
   ethGasLimit,
   ethGasPrice,
@@ -27,7 +31,7 @@ export const EditableTxParameters = ({
   const [isEditMode, toggleEditMode] = useState(false)
   const [useManualValues, setUseManualValues] = useState(false)
   const threshold = useSelector(safeThresholdSelector) || 1
-  const defaultParameterStatus = threshold > 1 ? 'ETH_DISABLED' : 'ENABLED'
+  const defaultParameterStatus = isOffChainSignature && threshold > 1 ? 'ETH_HIDDEN' : 'ENABLED'
   const txParameters = useTransactionParameters({
     parameterStatus: parametersStatus || defaultParameterStatus,
     initialEthGasLimit: ethGasLimit,
@@ -65,6 +69,7 @@ export const EditableTxParameters = ({
 
   return isEditMode ? (
     <EditTxParametersForm
+      isExecution={isExecution}
       txParameters={txParameters}
       onClose={closeEditFormHandler}
       parametersStatus={parametersStatus ? parametersStatus : defaultParameterStatus}

src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { Text, ButtonLink, Accordion, AccordionSummary, AccordionDetails } from '@gnosis.pm/safe-react-components'
 
 import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
-import { ParametersStatus, areEthereumParamsEnabled, areSafeParamsEnabled } from '../utils'
+import { ParametersStatus, areEthereumParamsVisible, areSafeParamsEnabled, ethereumTxParametersTitle } from '../utils'
 import { useSelector } from 'react-redux'
 import { safeThresholdSelector } from 'src/logic/safe/store/selectors'
 
@@ -35,8 +35,9 @@ type Props = {
   onEdit: () => void
   compact?: boolean
   parametersStatus?: ParametersStatus
-  isTransactionExecution: boolean
   isTransactionCreation: boolean
+  isTransactionExecution: boolean
+  isOffChainSignature: boolean
 }
 
 export const TxParametersDetail = ({
@@ -46,11 +47,12 @@ export const TxParametersDetail = ({
   parametersStatus,
   isTransactionCreation,
   isTransactionExecution,
+  isOffChainSignature,
 }: Props): ReactElement | null => {
   const threshold = useSelector(safeThresholdSelector) || 1
-  const defaultParameterStatus = threshold > 1 ? 'ETH_DISABLED' : 'ENABLED'
+  const defaultParameterStatus = isOffChainSignature && threshold > 1 ? 'ETH_HIDDEN' : 'ENABLED'
 
-  if (!isTransactionExecution && !isTransactionCreation) {
+  if (!isTransactionExecution && !isTransactionCreation && isOffChainSignature) {
     return null
   }
 
@@ -62,7 +64,7 @@ export const TxParametersDetail = ({
       <AccordionDetails>
         <AccordionDetailsWrapper>
           <StyledText size="md" color="placeHolder">
-            Safe transactions parameters
+            Safe transaction
           </StyledText>
 
           <TxParameterWrapper>
@@ -95,57 +97,30 @@ export const TxParametersDetail = ({
             </Text>
           </TxParameterWrapper>
 
+          {areEthereumParamsVisible(parametersStatus || defaultParameterStatus) && (
+            <>
               <TxParameterWrapper>
                 <StyledText size="md" color="placeHolder">
-              Ethereum transaction parameters
+                  {ethereumTxParametersTitle(isTransactionExecution)}
                 </StyledText>
               </TxParameterWrapper>
 
               <TxParameterWrapper>
-            <Text
+                <Text size="lg">Nonce</Text>
-              size="lg"
+                <Text size="lg">{txParameters.ethNonce}</Text>
-              color={areEthereumParamsEnabled(parametersStatus || defaultParameterStatus) ? 'text' : 'secondaryLight'}
-            >
-              Ethereum nonce
-            </Text>
-            <Text
-              size="lg"
-              color={areEthereumParamsEnabled(parametersStatus || defaultParameterStatus) ? 'text' : 'secondaryLight'}
-            >
-              {txParameters.ethNonce}
-            </Text>
               </TxParameterWrapper>
 
               <TxParameterWrapper>
-            <Text
+                <Text size="lg">Gas limit</Text>
-              size="lg"
+                <Text size="lg">{txParameters.ethGasLimit}</Text>
-              color={areEthereumParamsEnabled(parametersStatus || defaultParameterStatus) ? 'text' : 'secondaryLight'}
-            >
-              Ethereum gas limit
-            </Text>
-            <Text
-              size="lg"
-              color={areEthereumParamsEnabled(parametersStatus || defaultParameterStatus) ? 'text' : 'secondaryLight'}
-            >
-              {txParameters.ethGasLimit}
-            </Text>
               </TxParameterWrapper>
 
               <TxParameterWrapper>
-            <Text
+                <Text size="lg">Gas price</Text>
-              size="lg"
+                <Text size="lg">{txParameters.ethGasPrice}</Text>
-              color={areEthereumParamsEnabled(parametersStatus || defaultParameterStatus) ? 'text' : 'secondaryLight'}
-            >
-              Ethereum gas price
-            </Text>
-            <Text
-              size="lg"
-              color={areEthereumParamsEnabled(parametersStatus || defaultParameterStatus) ? 'text' : 'secondaryLight'}
-            >
-              {txParameters.ethGasPrice}
-            </Text>
               </TxParameterWrapper>
-
+            </>
+          )}
           <StyledButtonLink color="primary" textSize="xl" onClick={onEdit}>
             Edit
           </StyledButtonLink>

src/routes/safe/components/Transactions/helpers/utils.ts

@@ -1,8 +1,8 @@
-export type ParametersStatus = 'ENABLED' | 'DISABLED' | 'SAFE_DISABLED' | 'ETH_DISABLED' | 'CANCEL_TRANSACTION'
+export type ParametersStatus = 'ENABLED' | 'DISABLED' | 'SAFE_DISABLED' | 'ETH_HIDDEN' | 'CANCEL_TRANSACTION'
 
-export const areEthereumParamsEnabled = (parametersStatus: ParametersStatus): boolean => {
+export const areEthereumParamsVisible = (parametersStatus: ParametersStatus): boolean => {
   return (
-    parametersStatus === 'ENABLED' || (parametersStatus !== 'ETH_DISABLED' && parametersStatus !== 'CANCEL_TRANSACTION')
+    parametersStatus === 'ENABLED' || (parametersStatus !== 'ETH_HIDDEN' && parametersStatus !== 'CANCEL_TRANSACTION')
   )
 }
 
@@ -12,3 +12,7 @@ export const areSafeParamsEnabled = (parametersStatus: ParametersStatus): boolea
     (parametersStatus !== 'SAFE_DISABLED' && parametersStatus !== 'CANCEL_TRANSACTION')
   )
 }
+
+export const ethereumTxParametersTitle = (isExecution: boolean): string => {
+  return `Owner transaction ${isExecution ? '(Execution)' : '(On-chain approval)'}`
+}