1791155948

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/5b7a7850ac28e1bdde8e0c73d53f639796d91af5">5b7a7850a<a href="https://github.com/gnosis/safe-react/commit/5b7a7850ac28e1bdde8e0c73d53f639796d91af5">">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/b7e9e5ecfc045f5009677d291638172e1cab0e14">b7e9e5ecf</a>">b7e9e5ecf</a><a href="https://github.com/gnosis/safe-react/commit/5b7a7850ac28e1bdde8e0c73d53f639796d91af5"> into 8d38f8aec">8d38f8aec</a>

Pull Request Pull Request #3430: fix: show stepper for immediate executions

Run Details

1057 of 4193 branches covered (25.21%)

Branch coverage included in aggregate %.

10 of 10 new or added lines in 2 files covered. (100.0%)

3213 of 8559 relevant lines covered (37.54%)

31.95 hits per line

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

3.61

/src/routes/safe/components/Transactions/TxList/TxDetails.tsx

import { Icon, Link, Loader, Text } from '@gnosis.pm/safe-react-components'
import cn from 'classnames'
import { ReactElement, useContext } from 'react'
import styled from 'styled-components'

import {
  ExpandedTxDetails,
  isCustomTxInfo,
  isModuleExecutionInfo,
  isMultiSendTxInfo,
  isMultiSigExecutionDetails,
  isSettingsChangeTxInfo,
  isTransferTxInfo,
  LocalTransactionStatus,
  Transaction,
} from 'src/logic/safe/store/models/types/gateway.d'
import { useTransactionDetails } from './hooks/useTransactionDetails'
import { TxDetailsContainer, Centered, AlignItemsWithMargin } from './styled'
import { TxData } from './TxData'
import { TxExpandedActions } from './TxExpandedActions'
import { TxInfo } from './TxInfo'
import { TxLocationContext } from './TxLocationProvider'
import { TxOwners } from './TxOwners'
import { TxSummary } from './TxSummary'
import { isCancelTxDetails, NOT_AVAILABLE } from './utils'
import useTxStatus from 'src/logic/hooks/useTxStatus'
import { useSelector } from 'react-redux'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
import TxModuleInfo from './TxModuleInfo'

const NormalBreakingText = styled(Text)`
  line-break: normal;
  word-break: normal;
`

const TxDataGroup = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElement | null => {
  if (isTransferTxInfo(txDetails.txInfo) || isSettingsChangeTxInfo(txDetails.txInfo)) {
    return <TxInfo txInfo={txDetails.txInfo} txStatus={txDetails.txStatus} />
  }

  if (isCancelTxDetails(txDetails.txInfo) && isMultiSigExecutionDetails(txDetails.detailedExecutionInfo)) {
    const txNonce = `${txDetails.detailedExecutionInfo.nonce ?? NOT_AVAILABLE}`
    const isTxExecuted = txDetails.executedAt

    // executed rejection transaction
    let message = `This is an on-chain rejection that didn't send any funds.
     This on-chain rejection replaced all transactions with nonce ${txNonce}.`

    if (!isTxExecuted) {
      // queued rejection transaction
      message = `This is an on-chain rejection that doesn't send any funds.
 Executing this on-chain rejection will replace all currently awaiting transactions with nonce ${txNonce}.`
    }
    return (
      <>
        <NormalBreakingText size="xl">{message}</NormalBreakingText>
        {!isTxExecuted && (
          <>
            <br />
            <Link
              href="https://help.gnosis-safe.io/en/articles/4738501-why-do-i-need-to-pay-for-cancelling-a-transaction"
              target="_blank"
              rel="noreferrer"
              title="Why do I need to pay for rejecting a transaction?"
            >
              <AlignItemsWithMargin>
                <Text size="xl" as="span" color="primary">
                  Why do I need to pay for rejecting a transaction?
                </Text>
                <Icon size="sm" type="externalLink" color="primary" />
              </AlignItemsWithMargin>
            </Link>
          </>
        )}
      </>
    )
  }

  if (!txDetails.txData) {
    return null
  }

  return <TxData txData={txDetails.txData} txInfo={txDetails.txInfo} />
}

type TxDetailsProps = {
  transaction: Transaction
}

export const TxDetails = ({ transaction }: TxDetailsProps): ReactElement => {
  const { txLocation } = useContext(TxLocationContext)
  const { data, loading } = useTransactionDetails(transaction.id)
  const txStatus = useTxStatus(transaction)
  const willBeReplaced = txStatus === LocalTransactionStatus.WILL_BE_REPLACED
  const isPending = txStatus === LocalTransactionStatus.PENDING
  const currentUser = useSelector(userAccountSelector)
  const isMultiSend = data && isMultiSendTxInfo(data.txInfo)
  const shouldShowStepper = data?.detailedExecutionInfo && isMultiSigExecutionDetails(data.detailedExecutionInfo)

  // To avoid prop drilling into TxDataGroup, module details are positioned here accordingly
  const getModuleDetails = () => {
    if (!transaction.txDetails || !isModuleExecutionInfo(transaction.txDetails.detailedExecutionInfo)) {
      return null
    }

    return (
      <div className="tx-module">
        <TxModuleInfo detailedExecutionInfo={transaction.txDetails?.detailedExecutionInfo} />
      </div>
    )
  }

  if (loading) {
    return (
      <Centered padding={10}>
        <Loader size="sm" />
      </Centered>
    )
  }

  if (!data) {
    return (
      <TxDetailsContainer>
        <Text size="xl" strong>
          No data available
        </Text>
      </TxDetailsContainer>
    )
  }

  const customTxNoData = isCustomTxInfo(data.txInfo) && !data.txInfo.methodName && !parseInt(data.txInfo.dataSize, 10)
  const onChainRejection = isCancelTxDetails(data.txInfo) && isMultiSigExecutionDetails(data.detailedExecutionInfo)
  const noTxDataBlock = customTxNoData && !onChainRejection
  const txData = () =>
    isMultiSend ? (
      <>
        <div className={cn('tx-summary', { 'will-be-replaced': willBeReplaced })}>
          <TxSummary txDetails={data} />
        </div>
        {getModuleDetails()}
        <div
          className={cn('tx-details', {
            'no-padding': isMultiSendTxInfo(data.txInfo),
            'not-executed': !data.executedAt,
            'will-be-replaced': willBeReplaced,
          })}
        >
          <TxDataGroup txDetails={data} />
        </div>
      </>
    ) : (
      <>
        <div
          className={cn('tx-details', {
            'no-padding': isMultiSendTxInfo(data.txInfo) || noTxDataBlock,
            'not-executed': !data.executedAt,
            'will-be-replaced': willBeReplaced,
          })}
        >
          <TxDataGroup txDetails={data} />
        </div>
        {getModuleDetails()}
        <div className={cn('tx-summary', { 'will-be-replaced': willBeReplaced })}>
          <TxSummary txDetails={data} />
        </div>
      </>
    )

  return (
    <TxDetailsContainer>
      <div className={cn('tx-data', { 'no-owners': !shouldShowStepper, 'no-data': noTxDataBlock })}>{txData()}</div>
      {shouldShowStepper && (
        <div>
          <div
            className={cn('tx-owners', {
              'will-be-replaced': willBeReplaced,
            })}
          >
            <TxOwners txDetails={data} isPending={isPending} />
          </div>
          {!isPending && !data.executedAt && txLocation !== 'history' && !!currentUser && (
            <div className={cn('tx-details-actions', { 'will-be-replaced': willBeReplaced })}>
              <TxExpandedActions transaction={transaction} />
            </div>
          )}
        </div>
      )}
    </TxDetailsContainer>
  )
}

1	import { Icon, Link, Loader, Text } from '@gnosis.pm/safe-react-components'
2	import cn from 'classnames'
3	import { ReactElement, useContext } from 'react'
4	import styled from 'styled-components'
5
6	import {
7	ExpandedTxDetails,
8	isCustomTxInfo,
9	isModuleExecutionInfo,
10	isMultiSendTxInfo,
11	isMultiSigExecutionDetails,
12	isSettingsChangeTxInfo,
13	isTransferTxInfo,
14	LocalTransactionStatus,
15	Transaction,
16	} from 'src/logic/safe/store/models/types/gateway.d'
17	import { useTransactionDetails } from './hooks/useTransactionDetails'
18	import { TxDetailsContainer, Centered, AlignItemsWithMargin } from './styled'
19	import { TxData } from './TxData'
20	import { TxExpandedActions } from './TxExpandedActions'
21	import { TxInfo } from './TxInfo'
22	import { TxLocationContext } from './TxLocationProvider'
23	import { TxOwners } from './TxOwners'
24	import { TxSummary } from './TxSummary'
25	import { isCancelTxDetails, NOT_AVAILABLE } from './utils'
26	import useTxStatus from 'src/logic/hooks/useTxStatus'
27	import { useSelector } from 'react-redux'
28	import { userAccountSelector } from 'src/logic/wallets/store/selectors'
29	import TxModuleInfo from './TxModuleInfo'
30
31	const NormalBreakingText = styled(Text)`	1✔
32	line-break: normal;
33	word-break: normal;
34	`
35
36	const TxDataGroup = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElement \| null => {	1✔
37	if (isTransferTxInfo(txDetails.txInfo) \|\| isSettingsChangeTxInfo(txDetails.txInfo)) {	×
38	return <TxInfo txInfo={txDetails.txInfo} txStatus={txDetails.txStatus} />	×
39	}
40
41	if (isCancelTxDetails(txDetails.txInfo) && isMultiSigExecutionDetails(txDetails.detailedExecutionInfo)) {	×
42	const txNonce = `${txDetails.detailedExecutionInfo.nonce ?? NOT_AVAILABLE}`	×
43	const isTxExecuted = txDetails.executedAt	×
44
45	// executed rejection transaction
46	let message = `This is an on-chain rejection that didn't send any funds.	×
47	This on-chain rejection replaced all transactions with nonce ${txNonce}.`
48
49	if (!isTxExecuted) {	×
50	// queued rejection transaction
51	message = `This is an on-chain rejection that doesn't send any funds.	×
52	Executing this on-chain rejection will replace all currently awaiting transactions with nonce ${txNonce}.`
53	}
54	return (	×
55	<>
56	<NormalBreakingText size="xl">{message}</NormalBreakingText>
57	{!isTxExecuted && (	×
58	<>
59	<br />
60	<Link
61	href="https://help.gnosis-safe.io/en/articles/4738501-why-do-i-need-to-pay-for-cancelling-a-transaction"
62	target="_blank"
63	rel="noreferrer"
64	title="Why do I need to pay for rejecting a transaction?"
65	>
66	<AlignItemsWithMargin>
67	<Text size="xl" as="span" color="primary">
68	Why do I need to pay for rejecting a transaction?
69	</Text>
70	<Icon size="sm" type="externalLink" color="primary" />
71	</AlignItemsWithMargin>
72	</Link>
73	</>
74	)}
75	</>
76	)
77	}
78
79	if (!txDetails.txData) {	×
80	return null	×
81	}
82
83	return <TxData txData={txDetails.txData} txInfo={txDetails.txInfo} />	×
84	}
85
86	type TxDetailsProps = {
87	transaction: Transaction
88	}
89
90	export const TxDetails = ({ transaction }: TxDetailsProps): ReactElement => {	1✔
91	const { txLocation } = useContext(TxLocationContext)	×
92	const { data, loading } = useTransactionDetails(transaction.id)	×
93	const txStatus = useTxStatus(transaction)	×
94	const willBeReplaced = txStatus === LocalTransactionStatus.WILL_BE_REPLACED	×
95	const isPending = txStatus === LocalTransactionStatus.PENDING	×
96	const currentUser = useSelector(userAccountSelector)	×
97	const isMultiSend = data && isMultiSendTxInfo(data.txInfo)	×
98	const shouldShowStepper = data?.detailedExecutionInfo && isMultiSigExecutionDetails(data.detailedExecutionInfo)	×
99
100	// To avoid prop drilling into TxDataGroup, module details are positioned here accordingly
101	const getModuleDetails = () => {	×
102	if (!transaction.txDetails \|\| !isModuleExecutionInfo(transaction.txDetails.detailedExecutionInfo)) {	×
103	return null	×
104	}
105
106	return (	×
107	<div className="tx-module">
108	<TxModuleInfo detailedExecutionInfo={transaction.txDetails?.detailedExecutionInfo} />
109	</div>
110	)
111	}
112
113	if (loading) {	×
114	return (	×
115	<Centered padding={10}>
116	<Loader size="sm" />
117	</Centered>
118	)
119	}
120
121	if (!data) {	×
122	return (	×
123	<TxDetailsContainer>
124	<Text size="xl" strong>
125	No data available
126	</Text>
127	</TxDetailsContainer>
128	)
129	}
130
131	const customTxNoData = isCustomTxInfo(data.txInfo) && !data.txInfo.methodName && !parseInt(data.txInfo.dataSize, 10)	×
132	const onChainRejection = isCancelTxDetails(data.txInfo) && isMultiSigExecutionDetails(data.detailedExecutionInfo)	×
133	const noTxDataBlock = customTxNoData && !onChainRejection	×
134	const txData = () =>	×
135	isMultiSend ? (	×
136	<>
137	<div className={cn('tx-summary', { 'will-be-replaced': willBeReplaced })}>
138	<TxSummary txDetails={data} />
139	</div>
140	{getModuleDetails()}
141	<div
142	className={cn('tx-details', {
143	'no-padding': isMultiSendTxInfo(data.txInfo),
144	'not-executed': !data.executedAt,
145	'will-be-replaced': willBeReplaced,
146	})}
147	>
148	<TxDataGroup txDetails={data} />
149	</div>
150	</>
151	) : (
152	<>
153	<div
154	className={cn('tx-details', {
155	'no-padding': isMultiSendTxInfo(data.txInfo) \|\| noTxDataBlock,	×
156	'not-executed': !data.executedAt,
157	'will-be-replaced': willBeReplaced,
158	})}
159	>
160	<TxDataGroup txDetails={data} />
161	</div>
162	{getModuleDetails()}
163	<div className={cn('tx-summary', { 'will-be-replaced': willBeReplaced })}>
164	<TxSummary txDetails={data} />
165	</div>
166	</>
167	)
168
169	return (	×
170	<TxDetailsContainer>
171	<div className={cn('tx-data', { 'no-owners': !shouldShowStepper, 'no-data': noTxDataBlock })}>{txData()}</div>
172	{shouldShowStepper && (	×
173	<div>
174	<div
175	className={cn('tx-owners', {
176	'will-be-replaced': willBeReplaced,
177	})}
178	>
179	<TxOwners txDetails={data} isPending={isPending} />
180	</div>
181	{!isPending && !data.executedAt && txLocation !== 'history' && !!currentUser && (	×
182	<div className={cn('tx-details-actions', { 'will-be-replaced': willBeReplaced })}>
183	<TxExpandedActions transaction={transaction} />
184	</div>
185	)}
186	</div>
187	)}
188	</TxDetailsContainer>
189	)
190	}

gnosis / safe-react / 1791155948

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