1748990875

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/gnosis/safe-react/commit/<a class=hub.com/gnosis/safe-react/commit/b745c9675fea403c44acc8b7cad76f1ca5954c28">b745c9675<a href="https://github.com/gnosis/safe-react/commit/b745c9675fea403c44acc8b7cad76f1ca5954c28">">Merge </a><a class="double-link" href="https://github.com/gnosis/safe-react/commit/<a class="double-link" href="https://github.com/gnosis/safe-react/commit/0dec86e9d258b95ad3dc5d2b9cbd96658f807d25">0dec86e9d</a>">0dec86e9d</a><a href="https://github.com/gnosis/safe-react/commit/b745c9675fea403c44acc8b7cad76f1ca5954c28"> into ef03cb129">ef03cb129</a>

Pull Request Pull Request #3369: refactor: use TxModalWrapper in ApproveTxModal

Run Details

1030 of 4097 branches covered (25.14%)

Branch coverage included in aggregate %.

17 of 17 new or added lines in 3 files covered. (100.0%)

3162 of 8437 relevant lines covered (37.48%)

32.26 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

44.68

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

import { ReactNode, useState } from 'react'
import styled from 'styled-components'

import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
import { extractSafeAddress } from 'src/routes/routes'
import { ReviewInfoText } from 'src/components/ReviewInfoText'
import ExecuteCheckbox from 'src/components/ExecuteCheckbox'
import { useEstimationStatus } from 'src/logic/hooks/useEstimationStatus'
import { Errors, logError } from 'src/logic/exceptions/CodedException'
import { ButtonStatus, Modal } from 'src/components/Modal'
import { lg, md } from 'src/theme/variables'
import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
import { isSpendingLimit, ParametersStatus } from 'src/routes/safe/components/Transactions/helpers/utils'
import useCanTxExecute from 'src/logic/hooks/useCanTxExecute'
import { useSelector } from 'react-redux'
import { grantedSelector } from 'src/routes/safe/container/selector'
import { List } from 'immutable'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'

type Props = {
  children: ReactNode
  operation?: number
  txData: string
  txValue?: string
  txTo?: string
  txType?: string
  txConfirmations?: List<Confirmation>
  onSubmit: (txParams: TxParameters, delayExecution?: boolean) => void
  onBack?: (...rest: any) => void
  submitText?: string
  isConfirmDisabled?: boolean
}

const Container = styled.div`
  padding: 0 ${lg} ${md};
`

export const TxModalWrapper = ({
  children,
  operation,
  txData,
  txValue = '0',
  txTo,
  txType,
  txConfirmations,
  onSubmit,
  onBack,
  submitText,
  isConfirmDisabled,
}: Props): React.ReactElement => {
  const [manualSafeTxGas, setManualSafeTxGas] = useState('0')
  const [manualGasPrice, setManualGasPrice] = useState<string | undefined>()
  const [manualMaxPrioFee, setManualMaxPrioFee] = useState<string | undefined>()
  const [manualGasLimit, setManualGasLimit] = useState<string | undefined>()
  const [manualSafeNonce, setManualSafeNonce] = useState<number | undefined>()
  const [executionApproved, setExecutionApproved] = useState<boolean>(true)
  const isOwner = useSelector(grantedSelector)
  const userAddress = useSelector(userAccountSelector)
  const safeAddress = extractSafeAddress()
  const isSpendingLimitTx = isSpendingLimit(txType)
  const preApprovingOwner = isOwner ? userAddress : undefined

  const canTxExecute = useCanTxExecute(
    undefined,
    manualSafeNonce,
    preApprovingOwner,
    Array.from(txConfirmations || []).length,
  )
  const doExecute = executionApproved && canTxExecute

  const {
    gasCostFormatted,
    gasPriceFormatted,
    gasMaxPrioFeeFormatted,
    gasLimit,
    gasEstimation,
    txEstimationExecutionStatus,
    isCreation,
    isOffChainSignature,
  } = useEstimateTransactionGas({
    txData,
    txRecipient: txTo || safeAddress,
    txType,
    txConfirmations,
    txAmount: txValue,
    preApprovingOwner,
    safeTxGas: manualSafeTxGas,
    manualGasPrice,
    manualMaxPrioFee,
    manualGasLimit,
    manualSafeNonce,
    operation,
    isExecution: executionApproved,
  })

  const [submitStatus, setSubmitStatus] = useEstimationStatus(txEstimationExecutionStatus)

  const onClose = (txParameters: TxParameters) => {
    const oldGasPrice = gasPriceFormatted
    const newGasPrice = txParameters.ethGasPrice
    const oldGasLimit = gasLimit
    const newGasLimit = txParameters.ethGasLimit
    const oldMaxPrioFee = gasMaxPrioFeeFormatted
    const newMaxPrioFee = txParameters.ethMaxPrioFee
    const oldSafeTxGas = gasEstimation
    const newSafeTxGas = txParameters.safeTxGas
    const newSafeNonce = txParameters.safeNonce

    if (oldGasPrice !== newGasPrice) {
      setManualGasPrice(newGasPrice)
    }

    if (oldMaxPrioFee !== newMaxPrioFee) {
      setManualMaxPrioFee(newMaxPrioFee)
    }

    if (oldGasLimit !== newGasLimit) {
      setManualGasLimit(newGasLimit)
    }

    if (newSafeTxGas && oldSafeTxGas !== newSafeTxGas) {
      setManualSafeTxGas(newSafeTxGas)
    }

    if (newSafeNonce) {
      const newSafeNonceNumber = parseInt(newSafeNonce, 10)
      setManualSafeNonce(newSafeNonceNumber)
    }
  }

  const onSubmitClick = (txParameters: TxParameters) => {
    setSubmitStatus(ButtonStatus.LOADING)

    if (!safeAddress) {
      setSubmitStatus(ButtonStatus.READY)
      logError(Errors._802)
      return
    }

    onSubmit(txParameters, !doExecute)
  }

  // Approval modal
  let parametersStatus: ParametersStatus | undefined = undefined
  if (txConfirmations) {
    if (doExecute) {
      parametersStatus = doExecute ? 'SAFE_DISABLED' : 'DISABLED'
    }
  }

  return (
    <EditableTxParameters
      isOffChainSignature={isOffChainSignature}
      isExecution={doExecute}
      ethGasLimit={gasLimit}
      ethGasPrice={gasPriceFormatted}
      ethMaxPrioFee={gasMaxPrioFeeFormatted}
      safeTxGas={gasEstimation}
      parametersStatus={parametersStatus}
      closeEditModalCallback={onClose}
    >
      {(txParameters: TxParameters, toggleEditMode: () => unknown) => (
        <>
          {children}

          <Container>
            {!isSpendingLimit && canTxExecute && <ExecuteCheckbox onChange={setExecutionApproved} />}

            {/* Tx Parameters */}
            {/* FIXME TxParameters should be updated to be used with spending limits */}
            {!isSpendingLimit && (
              <TxParametersDetail
                txParameters={txParameters}
                onEdit={toggleEditMode}
                isTransactionCreation={isCreation}
                isTransactionExecution={doExecute}
                isOffChainSignature={isOffChainSignature}
                parametersStatus={parametersStatus}
              />
            )}
          </Container>

          {!isSpendingLimitTx && (
            <ReviewInfoText
              gasCostFormatted={gasCostFormatted}
              isCreation={isCreation}
              isExecution={doExecute}
              safeNonce={txParameters.safeNonce}
              txEstimationExecutionStatus={txEstimationExecutionStatus}
            />
          )}

          {/* Footer */}
          <Modal.Footer withoutBorder={!isSpendingLimitTx && submitStatus !== ButtonStatus.LOADING}>
            <Modal.Footer.Buttons
              cancelButtonProps={{ onClick: onBack || onClose, text: 'Back' }}
              confirmButtonProps={{
                onClick: () => onSubmitClick(txParameters),
                status: submitStatus,
                disabled: isConfirmDisabled,
                text: txEstimationExecutionStatus === EstimationStatus.LOADING ? 'Estimating' : submitText,
                testId: 'submit-tx-btn',
              }}
            />
          </Modal.Footer>
        </>
      )}
    </EditableTxParameters>
  )
}

1	import { ReactNode, useState } from 'react'
2	import styled from 'styled-components'
3
4	import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
5	import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
6	import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
7	import { extractSafeAddress } from 'src/routes/routes'
8	import { ReviewInfoText } from 'src/components/ReviewInfoText'
9	import ExecuteCheckbox from 'src/components/ExecuteCheckbox'
10	import { useEstimationStatus } from 'src/logic/hooks/useEstimationStatus'
11	import { Errors, logError } from 'src/logic/exceptions/CodedException'
12	import { ButtonStatus, Modal } from 'src/components/Modal'
13	import { lg, md } from 'src/theme/variables'
14	import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
15	import { isSpendingLimit, ParametersStatus } from 'src/routes/safe/components/Transactions/helpers/utils'
16	import useCanTxExecute from 'src/logic/hooks/useCanTxExecute'
17	import { useSelector } from 'react-redux'
18	import { grantedSelector } from 'src/routes/safe/container/selector'
19	import { List } from 'immutable'
20	import { userAccountSelector } from 'src/logic/wallets/store/selectors'
21	import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
22
23	type Props = {
24	children: ReactNode
25	operation?: number
26	txData: string
27	txValue?: string
28	txTo?: string
29	txType?: string
30	txConfirmations?: List<Confirmation>
31	onSubmit: (txParams: TxParameters, delayExecution?: boolean) => void
32	onBack?: (...rest: any) => void
33	submitText?: string
34	isConfirmDisabled?: boolean
35	}
36
37	const Container = styled.div`	4✔
38	padding: 0 ${lg} ${md};
39	`
40
41	export const TxModalWrapper = ({	4✔
42	children,
43	operation,
44	txData,
45	txValue = '0',	10✔
46	txTo,
47	txType,
48	txConfirmations,
49	onSubmit,
50	onBack,
51	submitText,
52	isConfirmDisabled,
53	}: Props): React.ReactElement => {
54	const [manualSafeTxGas, setManualSafeTxGas] = useState('0')	20✔
55	const [manualGasPrice, setManualGasPrice] = useState<string \| undefined>()	20✔
56	const [manualMaxPrioFee, setManualMaxPrioFee] = useState<string \| undefined>()	20✔
57	const [manualGasLimit, setManualGasLimit] = useState<string \| undefined>()	20✔
58	const [manualSafeNonce, setManualSafeNonce] = useState<number \| undefined>()	20✔
59	const [executionApproved, setExecutionApproved] = useState<boolean>(true)	20✔
60	const isOwner = useSelector(grantedSelector)	20✔
61	const userAddress = useSelector(userAccountSelector)	20✔
62	const safeAddress = extractSafeAddress()	20✔
63	const isSpendingLimitTx = isSpendingLimit(txType)	20✔
64	const preApprovingOwner = isOwner ? userAddress : undefined	20✔
65
66	const canTxExecute = useCanTxExecute(	20✔
67	undefined,
68	manualSafeNonce,
69	preApprovingOwner,
70	Array.from(txConfirmations \|\| []).length,	40✔
71	)
72	const doExecute = executionApproved && canTxExecute	20✔
73
74	const {
75	gasCostFormatted,
76	gasPriceFormatted,
77	gasMaxPrioFeeFormatted,
78	gasLimit,
79	gasEstimation,
80	txEstimationExecutionStatus,
81	isCreation,
82	isOffChainSignature,
83	} = useEstimateTransactionGas({	20✔
84	txData,
85	txRecipient: txTo \|\| safeAddress,	32✔
86	txType,
87	txConfirmations,
88	txAmount: txValue,
89	preApprovingOwner,
90	safeTxGas: manualSafeTxGas,
91	manualGasPrice,
92	manualMaxPrioFee,
93	manualGasLimit,
94	manualSafeNonce,
95	operation,
96	isExecution: executionApproved,
97	})
98
99	const [submitStatus, setSubmitStatus] = useEstimationStatus(txEstimationExecutionStatus)	20✔
100
101	const onClose = (txParameters: TxParameters) => {	20✔
102	const oldGasPrice = gasPriceFormatted	×
103	const newGasPrice = txParameters.ethGasPrice	×
104	const oldGasLimit = gasLimit	×
105	const newGasLimit = txParameters.ethGasLimit	×
106	const oldMaxPrioFee = gasMaxPrioFeeFormatted	×
107	const newMaxPrioFee = txParameters.ethMaxPrioFee	×
108	const oldSafeTxGas = gasEstimation	×
109	const newSafeTxGas = txParameters.safeTxGas	×
110	const newSafeNonce = txParameters.safeNonce	×
111
112	if (oldGasPrice !== newGasPrice) {	×
113	setManualGasPrice(newGasPrice)	×
114	}
115
116	if (oldMaxPrioFee !== newMaxPrioFee) {	×
117	setManualMaxPrioFee(newMaxPrioFee)	×
118	}
119
120	if (oldGasLimit !== newGasLimit) {	×
121	setManualGasLimit(newGasLimit)	×
122	}
123
124	if (newSafeTxGas && oldSafeTxGas !== newSafeTxGas) {	×
125	setManualSafeTxGas(newSafeTxGas)	×
126	}
127
128	if (newSafeNonce) {	×
129	const newSafeNonceNumber = parseInt(newSafeNonce, 10)	×
130	setManualSafeNonce(newSafeNonceNumber)	×
131	}
132	}
133
134	const onSubmitClick = (txParameters: TxParameters) => {	20✔
135	setSubmitStatus(ButtonStatus.LOADING)	×
136
137	if (!safeAddress) {	×
138	setSubmitStatus(ButtonStatus.READY)	×
139	logError(Errors._802)	×
140	return	×
141	}
142
143	onSubmit(txParameters, !doExecute)	×
144	}
145
146	// Approval modal
147	let parametersStatus: ParametersStatus \| undefined = undefined	20✔
148	if (txConfirmations) {	20!
149	if (doExecute) {	×
150	parametersStatus = doExecute ? 'SAFE_DISABLED' : 'DISABLED'	×
151	}
152	}
153
154	return (	20✔
155	<EditableTxParameters
156	isOffChainSignature={isOffChainSignature}
157	isExecution={doExecute}
158	ethGasLimit={gasLimit}
159	ethGasPrice={gasPriceFormatted}
160	ethMaxPrioFee={gasMaxPrioFeeFormatted}
161	safeTxGas={gasEstimation}
162	parametersStatus={parametersStatus}
163	closeEditModalCallback={onClose}
164	>
165	{(txParameters: TxParameters, toggleEditMode: () => unknown) => (
166	<>	20✔
167	{children}
168
169	<Container>
170	{!isSpendingLimit && canTxExecute && <ExecuteCheckbox onChange={setExecutionApproved} />}	20!
171
172	{/* Tx Parameters */}
173	{/* FIXME TxParameters should be updated to be used with spending limits */}
174	{!isSpendingLimit && (	20!
175	<TxParametersDetail
176	txParameters={txParameters}
177	onEdit={toggleEditMode}
178	isTransactionCreation={isCreation}
179	isTransactionExecution={doExecute}
180	isOffChainSignature={isOffChainSignature}
181	parametersStatus={parametersStatus}
182	/>
183	)}
184	</Container>
185
186	{!isSpendingLimitTx && (	40✔
187	<ReviewInfoText
188	gasCostFormatted={gasCostFormatted}
189	isCreation={isCreation}
190	isExecution={doExecute}
191	safeNonce={txParameters.safeNonce}
192	txEstimationExecutionStatus={txEstimationExecutionStatus}
193	/>
194	)}
195
196	{/* Footer */}
197	<Modal.Footer withoutBorder={!isSpendingLimitTx && submitStatus !== ButtonStatus.LOADING}>	40✔
198	<Modal.Footer.Buttons
199	cancelButtonProps={{ onClick: onBack \|\| onClose, text: 'Back' }}	22✔
200	confirmButtonProps={{
201	onClick: () => onSubmitClick(txParameters),	×
202	status: submitStatus,
203	disabled: isConfirmDisabled,
204	text: txEstimationExecutionStatus === EstimationStatus.LOADING ? 'Estimating' : submitText,	20!
205	testId: 'submit-tx-btn',
206	}}
207	/>
208	</Modal.Footer>
209	</>
210	)}
211	</EditableTxParameters>
212	)
213	}

gnosis / safe-react / 1748990875

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous