2979908622

Committed 02 Sep 2022 02:49PM UTC coverage: 42.192% (+0.6%) from 41.604%

Build Type

push

github

Committed by GitHub

Commit Message

Fix: EIP712 signing (#4060)

Run Details

1784 of 5210 branches covered (34.24%)

Branch coverage included in aggregate %.

6 of 9 new or added lines in 3 files covered. (66.67%)

237 existing lines in 17 files now uncovered.

4773 of 10331 relevant lines covered (46.2%)

39.05 hits per line

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

86.0

/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx

import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
import { Text } from '@gnosis.pm/safe-react-components'
import { ReactElement, useEffect, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import styled from 'styled-components'
import { toBN } from 'web3-utils'

import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
import { getMultiSendCallOnlyContractAddress } from 'src/logic/contracts/safeContracts'
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
import { encodeMultiSendCall } from 'src/logic/safe/transactions/multisend'
import { getExplorerInfo, getNativeCurrency } from 'src/config'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import { lg, md } from 'src/theme/variables'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import { BasicTxInfo, DecodeTxs } from 'src/components/DecodeTxs'
import { fetchTxDecoder } from 'src/utils/decodeTx'
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import Block from 'src/components/layout/Block'
import Hairline from 'src/components/layout/Hairline'
import Divider from 'src/components/Divider'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'

import { ConfirmTxModalProps, DecodedTxDetailType } from '.'
import { grantedSelector } from 'src/routes/safe/container/selector'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
import Paragraph from 'src/components/layout/Paragraph'
import Row from 'src/components/layout/Row'
import { trackSafeAppTxCount } from 'src/routes/safe/components/Apps/trackAppUsageCount'

const Container = styled.div`
  max-width: 480px;
  padding: ${md} ${lg} 0;
`

const DecodeTxsWrapper = styled.div`
  margin: 0;
`

const StyledBlock = styled(Block)`
  background-color: ${({ theme }) => theme.colors.separator};
  width: fit-content;
  padding: 5px 10px;
  border-radius: 3px;
  margin: 4px 0 0 40px;

  display: flex;

  > :nth-child(1) {
    margin-right: 5px;
  }
`

type Props = ConfirmTxModalProps & {
  onReject: () => void
}

const parseTxValue = (value: string | number): string => {
  return toBN(value).toString()
}

export const ReviewConfirm = ({
  app,
  txs,
  params,
  safeAddress,
  ethBalance,
  safeName,
  onUserConfirm,
  onClose,
  onReject,
  requestId,
  appId,
}: Props): ReactElement => {
  const isMultiSend = txs.length > 1
  const [decodedData, setDecodedData] = useState<DecodedTxDetailType>()
  const dispatch = useDispatch()
  const nativeCurrency = getNativeCurrency()
  const explorerUrl = getExplorerInfo(safeAddress)
  const isOwner = useSelector(grantedSelector)

  const txRecipient: string | undefined = useMemo(
    () => (isMultiSend ? getMultiSendCallOnlyContractAddress() : txs[0]?.to),
    [txs, isMultiSend],
  )
  const txData: string | undefined = useMemo(
    () => (isMultiSend ? encodeMultiSendCall(txs) : txs[0]?.data),
    [txs, isMultiSend],
  )
  const txValue: string | undefined = useMemo(
    () => (isMultiSend ? '0' : parseTxValue(txs[0]?.value)),
    [txs, isMultiSend],
  )
  const operation = useMemo(() => (isMultiSend ? Operation.DELEGATE : Operation.CALL), [isMultiSend])

  // Decode tx data.
  useEffect(() => {
    let isCurrent = true
    const decodeTxData = async () => {
      const res = await fetchTxDecoder(txData)
      if (res && isCurrent) {
        setDecodedData(res)
      }
    }

    decodeTxData()
    return () => {
      isCurrent = false
    }
  }, [txData])

  const handleUserConfirmation = (safeTxHash: string): void => {
    onUserConfirm(safeTxHash, requestId)
    onClose()
  }

  const confirmTransactions = (txParameters: TxParameters, delayExecution: boolean) => {
    trackSafeAppTxCount(appId)
    dispatch(
      createTransaction(
        {
          safeAddress,
          to: txRecipient,
          valueInWei: txValue,
          txData,
          operation,
          origin: app.id,
          navigateToTransactionsTab: false,
          txNonce: txParameters.safeNonce,
          safeTxGas: txParameters.safeTxGas,
          ethParameters: txParameters,
          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
          delayExecution,
        },
        handleUserConfirmation,
        onReject,
      ),
    )
  }

  return (
    <TxModalWrapper
      txTo={txRecipient}
      txData={txData}
      txValue={txValue}
      operation={operation}
      onSubmit={confirmTransactions}
      isSubmitDisabled={!isOwner}
      onBack={onReject}
      safeTxGas={params?.safeTxGas?.toString()}
    >
      <div>
        <ModalHeader title={app.name} iconUrl={app.iconUrl} onClose={onReject} />

        <Hairline />

        <Container>
          {/* Safe */}
          <Row margin="xs">
            <Paragraph color="disabled" noMargin size="lg">
              Sending from
            </Paragraph>
          </Row>
          <PrefixedEthHashInfo
            name={safeName}
            hash={safeAddress}
            strongName
            showAvatar
            showCopyBtn
            explorerUrl={explorerUrl}
          />
          <StyledBlock>
            <Text size="md">Balance:</Text>
            <Text size="md" strong>{`${ethBalance} ${nativeCurrency.symbol}`}</Text>
          </StyledBlock>

          <Divider withArrow />

          {/* Txs decoded */}
          <BasicTxInfo
            txRecipient={txRecipient}
            txData={txData}
            txValue={fromTokenUnit(txValue, nativeCurrency.decimals)}
          />

          {txs.length > 0 && (
            <DecodeTxsWrapper>
              <DecodeTxs txs={txs} decodedData={decodedData} />
            </DecodeTxsWrapper>
          )}
        </Container>
      </div>
    </TxModalWrapper>
  )
}

1	import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
2	import { Text } from '@gnosis.pm/safe-react-components'
3	import { ReactElement, useEffect, useMemo, useState } from 'react'
4	import { useDispatch, useSelector } from 'react-redux'
5	import styled from 'styled-components'
6	import { toBN } from 'web3-utils'
7
8	import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
9	import { getMultiSendCallOnlyContractAddress } from 'src/logic/contracts/safeContracts'
10	import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
11	import { encodeMultiSendCall } from 'src/logic/safe/transactions/multisend'
12	import { getExplorerInfo, getNativeCurrency } from 'src/config'
13	import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
14	import { lg, md } from 'src/theme/variables'
15	import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
16	import { BasicTxInfo, DecodeTxs } from 'src/components/DecodeTxs'
17	import { fetchTxDecoder } from 'src/utils/decodeTx'
18	import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
19	import Block from 'src/components/layout/Block'
20	import Hairline from 'src/components/layout/Hairline'
21	import Divider from 'src/components/Divider'
22	import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
23
24	import { ConfirmTxModalProps, DecodedTxDetailType } from '.'
25	import { grantedSelector } from 'src/routes/safe/container/selector'
26	import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
27	import Paragraph from 'src/components/layout/Paragraph'
28	import Row from 'src/components/layout/Row'
29	import { trackSafeAppTxCount } from 'src/routes/safe/components/Apps/trackAppUsageCount'
30
31	const Container = styled.div`	2✔
32	max-width: 480px;
33	padding: ${md} ${lg} 0;
34	`
35
36	const DecodeTxsWrapper = styled.div`	2✔
37	margin: 0;
38	`
39
40	const StyledBlock = styled(Block)`	2✔
41	background-color: ${({ theme }) => theme.colors.separator};	5✔
42	width: fit-content;
43	padding: 5px 10px;
44	border-radius: 3px;
45	margin: 4px 0 0 40px;
46
47	display: flex;
48
49	> :nth-child(1) {
50	margin-right: 5px;
51	}
52	`
53
54	type Props = ConfirmTxModalProps & {
55	onReject: () => void
56	}
57
58	const parseTxValue = (value: string \| number): string => {	2✔
59	return toBN(value).toString()	3✔
60	}
61
62	export const ReviewConfirm = ({	2✔
63	app,
64	txs,
65	params,
66	safeAddress,
67	ethBalance,
68	safeName,
69	onUserConfirm,
70	onClose,
71	onReject,
72	requestId,
73	appId,
74	}: Props): ReactElement => {
75	const isMultiSend = txs.length > 1	5✔
76	const [decodedData, setDecodedData] = useState<DecodedTxDetailType>()	5✔
77	const dispatch = useDispatch()	5✔
78	const nativeCurrency = getNativeCurrency()	5✔
79	const explorerUrl = getExplorerInfo(safeAddress)	5✔
80	const isOwner = useSelector(grantedSelector)	5✔
81
82	const txRecipient: string \| undefined = useMemo(	5✔
83	() => (isMultiSend ? getMultiSendCallOnlyContractAddress() : txs[0]?.to),	5✔
84	[txs, isMultiSend],
85	)
86	const txData: string \| undefined = useMemo(	5✔
87	() => (isMultiSend ? encodeMultiSendCall(txs) : txs[0]?.data),	5✔
88	[txs, isMultiSend],
89	)
90	const txValue: string \| undefined = useMemo(	5✔
91	() => (isMultiSend ? '0' : parseTxValue(txs[0]?.value)),	5✔
92	[txs, isMultiSend],
93	)
94	const operation = useMemo(() => (isMultiSend ? Operation.DELEGATE : Operation.CALL), [isMultiSend])	5✔
95
96	// Decode tx data.
97	useEffect(() => {	5✔
98	let isCurrent = true	5✔
99	const decodeTxData = async () => {	5✔
100	const res = await fetchTxDecoder(txData)	5✔
101	if (res && isCurrent) {	5!
UNCOV 102	setDecodedData(res)	×
103	}
104	}
105
106	decodeTxData()	5✔
107	return () => {	5✔
108	isCurrent = false	5✔
109	}
110	}, [txData])
111
112	const handleUserConfirmation = (safeTxHash: string): void => {	5✔
113	onUserConfirm(safeTxHash, requestId)	×
UNCOV 114	onClose()	×
115	}
116
117	const confirmTransactions = (txParameters: TxParameters, delayExecution: boolean) => {	5✔
118	trackSafeAppTxCount(appId)	×
UNCOV 119	dispatch(	×
120	createTransaction(
121	{
122	safeAddress,
123	to: txRecipient,
124	valueInWei: txValue,
125	txData,
126	operation,
127	origin: app.id,
128	navigateToTransactionsTab: false,
129	txNonce: txParameters.safeNonce,
130	safeTxGas: txParameters.safeTxGas,
131	ethParameters: txParameters,
132	notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
133	delayExecution,
134	},
135	handleUserConfirmation,
136	onReject,
137	),
138	)
139	}
140
141	return (	5✔
142	<TxModalWrapper
143	txTo={txRecipient}
144	txData={txData}
145	txValue={txValue}
146	operation={operation}
147	onSubmit={confirmTransactions}
148	isSubmitDisabled={!isOwner}
149	onBack={onReject}
150	safeTxGas={params?.safeTxGas?.toString()}
151	>
152	<div>
153	<ModalHeader title={app.name} iconUrl={app.iconUrl} onClose={onReject} />
154
155	<Hairline />
156
157	<Container>
158	{/* Safe */}
159	<Row margin="xs">
160	<Paragraph color="disabled" noMargin size="lg">
161	Sending from
162	</Paragraph>
163	</Row>
164	<PrefixedEthHashInfo
165	name={safeName}
166	hash={safeAddress}
167	strongName
168	showAvatar
169	showCopyBtn
170	explorerUrl={explorerUrl}
171	/>
172	<StyledBlock>
173	<Text size="md">Balance:</Text>
174	<Text size="md" strong>{`${ethBalance} ${nativeCurrency.symbol}`}</Text>
175	</StyledBlock>
176
177	<Divider withArrow />
178
179	{/* Txs decoded */}
180	<BasicTxInfo
181	txRecipient={txRecipient}
182	txData={txData}
183	txValue={fromTokenUnit(txValue, nativeCurrency.decimals)}
184	/>
185
186	{txs.length > 0 && (	10✔
187	<DecodeTxsWrapper>
188	<DecodeTxs txs={txs} decodedData={decodedData} />
189	</DecodeTxsWrapper>
190	)}
191	</Container>
192	</div>
193	</TxModalWrapper>
194	)
195	}

safe-global / safe-react / 2979908622

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