1761175755

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/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/a7b113f9226d78fb43d55e74b23e209536042939">a7b113f92">&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/</a><a class="double-link" href="https://github.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/a7b113f9226d78fb43d55e74b23e209536042939">a7b113f92</a><a href="https://github.com/gnosis/safe-react/commit/a7b113f9226d78fb43d55e74b23e209536042939">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/gnosis/safe-react/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/a7b113f9226d78fb43d55e74b23e209536042939&quot;&gt;a7b113f92&lt;/a&gt;&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/a7b113f9226d78fb43d55e74b23e209536042939&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/gnosis/safe-react/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/gnosis/safe-react/commit/&amp;amp;lt;a ... (continued)

Pull Request Pull Request #3380: feat: add more advanced params to modals

Run Details

1058 of 4210 branches covered (25.13%)

Branch coverage included in aggregate %.

24 of 24 new or added lines in 1 file covered. (100.0%)

3205 of 8526 relevant lines covered (37.59%)

32.09 hits per line

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

40.98

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

import { ReactElement, useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import {
  Text,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  ButtonLink,
  Divider,
  EthHashInfo,
  CopyToClipboardBtn,
} from '@gnosis.pm/safe-react-components'
import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'

import { currentSafe, currentSafeThreshold } from 'src/logic/safe/store/selectors'
import { getLastTxNonce, getTransactionsByNonce } from 'src/logic/safe/store/selectors/gatewayTransactions'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import { ParametersStatus, areSafeParamsEnabled } from 'src/routes/safe/components/Transactions/helpers/utils'
import useSafeTxGas from 'src/routes/safe/components/Transactions/helpers/useSafeTxGas'
import { AppReduxState } from 'src/store'
import { isMultiSigExecutionDetails, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
import { getExplorerInfo } from 'src/config'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
import { getByteLength } from 'src/utils/getByteLength'
import { md } from 'src/theme/variables'

const TxParameterWrapper = styled.div`
  display: flex;
  justify-content: space-between;
`

const TxParameterEndWrapper = styled.span`
  display: flex;
  justify-content: flex-end;
  gap: 4px; // EthHashInfo uses a gap between the address and copy button
`

const AccordionDetailsWrapper = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
`
const StyledText = styled(Text)`
  margin: 8px 0 0 0;
`

type ColoredTextProps = { isError?: boolean }
const ColoredText = styled(Text)<ColoredTextProps>`
  color: ${(props) => (props.isError ? props.theme.colors.error : props.color)};
`

const StyledButtonLink = styled(ButtonLink)`
  padding-left: 0;
  margin: 8px 0 0 0;

  > p {
    margin-left: 0;
  }
`

const StyledDivider = styled(Divider)`
  margin-right: -${md};
  margin-left: -${md};
`

type TxParam = string | ReactElement
type TxParameterProps = { name: TxParam; value?: TxParam | null; color?: ThemeColors } & ColoredTextProps
const TxParameter = ({ name, value, ...rest }: TxParameterProps): ReactElement | null => {
  if (value == null || value === '') {
    return null
  }

  const getEl = (prop?: TxParam) => {
    return typeof prop === 'string' ? (
      <ColoredText size="lg" {...rest}>
        {prop}
      </ColoredText>
    ) : (
      prop
    )
  }

  return (
    <TxParameterWrapper>
      {getEl(name)}
      {getEl(value)}
    </TxParameterWrapper>
  )
}

type Props = {
  txParameters: TxParameters
  compact?: boolean
  onEdit: () => void
  parametersStatus?: ParametersStatus
  isTransactionCreation: boolean
  isTransactionExecution: boolean
  isOffChainSignature: boolean
}

export const TxParametersDetail = ({
  onEdit,
  txParameters,
  compact = true,
  parametersStatus,
  isTransactionCreation,
  isTransactionExecution,
  isOffChainSignature,
}: Props): ReactElement | null => {
  const { nonce } = useSelector(currentSafe)
  const threshold = useSelector(currentSafeThreshold) || 1
  const defaultParameterStatus = isOffChainSignature && threshold > 1 ? 'ETH_HIDDEN' : 'ENABLED'

  const [isTxNonceOutOfOrder, setIsTxNonceOutOfOrder] = useState(false)
  const [isAccordionExpanded, setIsAccordionExpanded] = useState(false)

  const { safeNonce = '' } = txParameters
  const safeNonceNumber = parseInt(safeNonce, 10)
  const lastQueuedTxNonce = useSelector(getLastTxNonce)
  const showSafeTxGas = useSafeTxGas()
  const storedTx = useSelector((state: AppReduxState) => getTransactionsByNonce(state, safeNonceNumber))

  useEffect(() => {
    if (Number.isNaN(safeNonceNumber) || safeNonceNumber === nonce) {
      return
    }
    if (lastQueuedTxNonce === undefined && safeNonceNumber !== nonce) {
      setIsAccordionExpanded(true)
      setIsTxNonceOutOfOrder(true)
    }
    if (lastQueuedTxNonce && safeNonceNumber !== lastQueuedTxNonce + 1) {
      setIsAccordionExpanded(true)
      setIsTxNonceOutOfOrder(true)
    }
  }, [lastQueuedTxNonce, nonce, safeNonceNumber])

  const color = useMemo(
    () => (areSafeParamsEnabled(parametersStatus || defaultParameterStatus) ? 'text' : 'secondaryLight'),
    [parametersStatus, defaultParameterStatus],
  )

  if (!isTransactionExecution && !isTransactionCreation && isOffChainSignature) {
    return null
  }

  const onChangeExpand = () => {
    setIsAccordionExpanded(!isAccordionExpanded)
  }

  return (
    <Accordion compact={compact} expanded={isAccordionExpanded} onChange={onChangeExpand}>
      <AccordionSummary>
        <Text size="xl">Advanced parameters</Text>
      </AccordionSummary>
      <AccordionDetails>
        <AccordionDetailsWrapper>
          <StyledText size="md" color="placeHolder">
            Safe transaction parameters
          </StyledText>
          <TxParameter
            name="Safe nonce"
            value={txParameters.safeNonce || ''}
            isError={isTxNonceOutOfOrder}
            color={color}
          />

          {showSafeTxGas && <TxParameter name="SafeTxGas" value={txParameters.safeTxGas || '0'} color={color} />}
          <StyledButtonLink color="primary" textSize="xl" onClick={onEdit}>
            Edit
          </StyledButtonLink>
          {storedTx?.length > 0 && <TxAdvancedParametersDetail tx={storedTx[0]} />}
        </AccordionDetailsWrapper>
      </AccordionDetails>
    </Accordion>
  )
}

const TxAdvancedParametersDetail = ({ tx }: { tx: Transaction }) => {
  const { txData, detailedExecutionInfo } = tx?.txDetails || {}

  if (!txData || !detailedExecutionInfo) {
    return null
  }

  const { value, to, operation, hexData } = txData
  const { safeTxHash, baseGas, gasPrice, gasToken, refundReceiver, confirmations } =
    (isMultiSigExecutionDetails(detailedExecutionInfo) && detailedExecutionInfo) || {}

  return (
    <>
      <StyledDivider />
      <TxParameter name="value" value={value} />
      <TxParameter
        name="to"
        value={
          to?.value && (
            <PrefixedEthHashInfo
              textSize="lg"
              hash={to.value}
              showCopyBtn
              explorerUrl={getExplorerInfo(to.value)}
              shortenHash={8}
            />
          )
        }
      />
      <TxParameter
        name="safeTxHash"
        value={safeTxHash && <EthHashInfo textSize="lg" hash={safeTxHash} showCopyBtn shortenHash={8} />}
      />
      {Object.values(Operation).includes(operation) && (
        <TxParameter name="Operation" value={`${operation} (${Operation[operation].toLowerCase()})`} />
      )}
      <TxParameter name="baseGas" value={baseGas} />
      <TxParameter name="gasPrice" value={gasPrice} />
      <TxParameter
        name="gasToken"
        value={gasToken && <EthHashInfo textSize="lg" hash={gasToken} showCopyBtn shortenHash={8} />}
      />
      <TxParameter
        name="refundReceiver"
        value={
          refundReceiver?.value && <EthHashInfo textSize="lg" hash={refundReceiver.value} showCopyBtn shortenHash={8} />
        }
      />
      {confirmations
        ?.filter(({ signature }) => signature)
        .map(({ signature }, i) => (
          <TxParameter
            name={`Signature ${i + 1}`}
            key={signature}
            value={
              <TxParameterEndWrapper>
                <Text size="lg" as="span">
                  {signature ? getByteLength(signature) : 0} bytes
                </Text>
                {signature && <CopyToClipboardBtn textToCopy={signature} />}
              </TxParameterEndWrapper>
            }
          />
        ))}
      <TxParameter
        name="hexData"
        value={
          <TxParameterEndWrapper>
            <Text size="lg" as="span">
              {hexData ? getByteLength(hexData) : 0} bytes
            </Text>
            {hexData && <CopyToClipboardBtn textToCopy={hexData} />}
          </TxParameterEndWrapper>
        }
      />
    </>
  )
}

1	import { ReactElement, useEffect, useMemo, useState } from 'react'
2	import { useSelector } from 'react-redux'
3	import styled from 'styled-components'
4	import {
5	Text,
6	Accordion,
7	AccordionSummary,
8	AccordionDetails,
9	ButtonLink,
10	Divider,
11	EthHashInfo,
12	CopyToClipboardBtn,
13	} from '@gnosis.pm/safe-react-components'
14	import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
15	import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
16
17	import { currentSafe, currentSafeThreshold } from 'src/logic/safe/store/selectors'
18	import { getLastTxNonce, getTransactionsByNonce } from 'src/logic/safe/store/selectors/gatewayTransactions'
19	import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
20	import { ParametersStatus, areSafeParamsEnabled } from 'src/routes/safe/components/Transactions/helpers/utils'
21	import useSafeTxGas from 'src/routes/safe/components/Transactions/helpers/useSafeTxGas'
22	import { AppReduxState } from 'src/store'
23	import { isMultiSigExecutionDetails, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
24	import { getExplorerInfo } from 'src/config'
25	import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
26	import { getByteLength } from 'src/utils/getByteLength'
27	import { md } from 'src/theme/variables'
28
29	const TxParameterWrapper = styled.div`	4✔
30	display: flex;
31	justify-content: space-between;
32	`
33
34	const TxParameterEndWrapper = styled.span`	4✔
35	display: flex;
36	justify-content: flex-end;
37	gap: 4px; // EthHashInfo uses a gap between the address and copy button
38	`
39
40	const AccordionDetailsWrapper = styled.div`	4✔
41	width: 100%;
42	display: flex;
43	flex-direction: column;
44	`
45	const StyledText = styled(Text)`	4✔
46	margin: 8px 0 0 0;
47	`
48
49	type ColoredTextProps = { isError?: boolean }
50	const ColoredText = styled(Text)<ColoredTextProps>`	4✔
51	color: ${(props) => (props.isError ? props.theme.colors.error : props.color)};	×
52	`
53
54	const StyledButtonLink = styled(ButtonLink)`	4✔
55	padding-left: 0;
56	margin: 8px 0 0 0;
57
58	> p {
59	margin-left: 0;
60	}
61	`
62
63	const StyledDivider = styled(Divider)`	4✔
64	margin-right: -${md};
65	margin-left: -${md};
66	`
67
68	type TxParam = string \| ReactElement
69	type TxParameterProps = { name: TxParam; value?: TxParam \| null; color?: ThemeColors } & ColoredTextProps
70	const TxParameter = ({ name, value, ...rest }: TxParameterProps): ReactElement \| null => {	4✔
71	if (value == null \|\| value === '') {	20!
72	return null	20✔
73	}
74
75	const getEl = (prop?: TxParam) => {	×
76	return typeof prop === 'string' ? (	×
77	<ColoredText size="lg" {...rest}>
78	{prop}
79	</ColoredText>
80	) : (
81	prop
82	)
83	}
84
85	return (	×
86	<TxParameterWrapper>
87	{getEl(name)}
88	{getEl(value)}
89	</TxParameterWrapper>
90	)
91	}
92
93	type Props = {
94	txParameters: TxParameters
95	compact?: boolean
96	onEdit: () => void
97	parametersStatus?: ParametersStatus
98	isTransactionCreation: boolean
99	isTransactionExecution: boolean
100	isOffChainSignature: boolean
101	}
102
103	export const TxParametersDetail = ({	4✔
104	onEdit,
105	txParameters,
106	compact = true,	20✔
107	parametersStatus,
108	isTransactionCreation,
109	isTransactionExecution,
110	isOffChainSignature,
111	}: Props): ReactElement \| null => {
112	const { nonce } = useSelector(currentSafe)	20✔
113	const threshold = useSelector(currentSafeThreshold) \|\| 1	20✔
114	const defaultParameterStatus = isOffChainSignature && threshold > 1 ? 'ETH_HIDDEN' : 'ENABLED'	20!
115
116	const [isTxNonceOutOfOrder, setIsTxNonceOutOfOrder] = useState(false)	20✔
117	const [isAccordionExpanded, setIsAccordionExpanded] = useState(false)	20✔
118
119	const { safeNonce = '' } = txParameters	20✔
120	const safeNonceNumber = parseInt(safeNonce, 10)	20✔
121	const lastQueuedTxNonce = useSelector(getLastTxNonce)	20✔
122	const showSafeTxGas = useSafeTxGas()	20✔
123	const storedTx = useSelector((state: AppReduxState) => getTransactionsByNonce(state, safeNonceNumber))	30✔
124
125	useEffect(() => {	20✔
126	if (Number.isNaN(safeNonceNumber) \|\| safeNonceNumber === nonce) {	10!
127	return	10✔
128	}
129	if (lastQueuedTxNonce === undefined && safeNonceNumber !== nonce) {	×
130	setIsAccordionExpanded(true)	×
131	setIsTxNonceOutOfOrder(true)	×
132	}
133	if (lastQueuedTxNonce && safeNonceNumber !== lastQueuedTxNonce + 1) {	×
134	setIsAccordionExpanded(true)	×
135	setIsTxNonceOutOfOrder(true)	×
136	}
137	}, [lastQueuedTxNonce, nonce, safeNonceNumber])
138
139	const color = useMemo(	20✔
140	() => (areSafeParamsEnabled(parametersStatus \|\| defaultParameterStatus) ? 'text' : 'secondaryLight'),	10!
141	[parametersStatus, defaultParameterStatus],
142	)
143
144	if (!isTransactionExecution && !isTransactionCreation && isOffChainSignature) {	20!
145	return null	×
146	}
147
148	const onChangeExpand = () => {	20✔
149	setIsAccordionExpanded(!isAccordionExpanded)	×
150	}
151
152	return (	20✔
153	<Accordion compact={compact} expanded={isAccordionExpanded} onChange={onChangeExpand}>
154	<AccordionSummary>
155	<Text size="xl">Advanced parameters</Text>
156	</AccordionSummary>
157	<AccordionDetails>
158	<AccordionDetailsWrapper>
159	<StyledText size="md" color="placeHolder">
160	Safe transaction parameters
161	</StyledText>
162	<TxParameter
163	name="Safe nonce"
164	value={txParameters.safeNonce \|\| ''}	40✔
165	isError={isTxNonceOutOfOrder}
166	color={color}
167	/>
168
169	{showSafeTxGas && <TxParameter name="SafeTxGas" value={txParameters.safeTxGas \|\| '0'} color={color} />}	20!
170	<StyledButtonLink color="primary" textSize="xl" onClick={onEdit}>
171	Edit
172	</StyledButtonLink>
173	{storedTx?.length > 0 && <TxAdvancedParametersDetail tx={storedTx[0]} />}	20!
174	</AccordionDetailsWrapper>
175	</AccordionDetails>
176	</Accordion>
177	)
178	}
179
180	const TxAdvancedParametersDetail = ({ tx }: { tx: Transaction }) => {	4✔
181	const { txData, detailedExecutionInfo } = tx?.txDetails \|\| {}	×
182
183	if (!txData \|\| !detailedExecutionInfo) {	×
184	return null	×
185	}
186
187	const { value, to, operation, hexData } = txData	×
188	const { safeTxHash, baseGas, gasPrice, gasToken, refundReceiver, confirmations } =
189	(isMultiSigExecutionDetails(detailedExecutionInfo) && detailedExecutionInfo) \|\| {}	×
190
191	return (	×
192	<>
193	<StyledDivider />
194	<TxParameter name="value" value={value} />
195	<TxParameter
196	name="to"
197	value={
198	to?.value && (	×
199	<PrefixedEthHashInfo
200	textSize="lg"
201	hash={to.value}
202	showCopyBtn
203	explorerUrl={getExplorerInfo(to.value)}
204	shortenHash={8}
205	/>
206	)
207	}
208	/>
209	<TxParameter
210	name="safeTxHash"
211	value={safeTxHash && <EthHashInfo textSize="lg" hash={safeTxHash} showCopyBtn shortenHash={8} />}	×
212	/>
213	{Object.values(Operation).includes(operation) && (	×
214	<TxParameter name="Operation" value={`${operation} (${Operation[operation].toLowerCase()})`} />
215	)}
216	<TxParameter name="baseGas" value={baseGas} />
217	<TxParameter name="gasPrice" value={gasPrice} />
218	<TxParameter
219	name="gasToken"
220	value={gasToken && <EthHashInfo textSize="lg" hash={gasToken} showCopyBtn shortenHash={8} />}	×
221	/>
222	<TxParameter
223	name="refundReceiver"
224	value={
225	refundReceiver?.value && <EthHashInfo textSize="lg" hash={refundReceiver.value} showCopyBtn shortenHash={8} />	×
226	}
227	/>
228	{confirmations
229	?.filter(({ signature }) => signature)	×
230	.map(({ signature }, i) => (
231	<TxParameter	×
232	name={`Signature ${i + 1}`}
233	key={signature}
234	value={
235	<TxParameterEndWrapper>
236	<Text size="lg" as="span">
237	{signature ? getByteLength(signature) : 0} bytes	×
238	</Text>
239	{signature && <CopyToClipboardBtn textToCopy={signature} />}	×
240	</TxParameterEndWrapper>
241	}
242	/>
243	))}
244	<TxParameter
245	name="hexData"
246	value={
247	<TxParameterEndWrapper>
248	<Text size="lg" as="span">
249	{hexData ? getByteLength(hexData) : 0} bytes	×
250	</Text>
251	{hexData && <CopyToClipboardBtn textToCopy={hexData} />}	×
252	</TxParameterEndWrapper>
253	}
254	/>
255	</>
256	)
257	}

gnosis / safe-react / 1761175755

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