1752518619

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/e711b4d2b474f45d60dff19ca7a3e6e9b4b51cde">e711b4d2b">&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/e711b4d2b474f45d60dff19ca7a3e6e9b4b51cde">e711b4d2b</a><a href="https://github.com/gnosis/safe-react/commit/e711b4d2b474f45d60dff19ca7a3e6e9b4b51cde">&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/e711b4d2b474f45d60dff19ca7a3e6e9b4b51cde&quot;&gt;e711b4d2b&lt;/a&gt;&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/e711b4d2b474f45d60dff19ca7a3e6e9b4b51cde&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 #3376: feat: Redesign Tx flow modals

Run Details

1055 of 4183 branches covered (25.22%)

Branch coverage included in aggregate %.

56 of 56 new or added lines in 19 files covered. (100.0%)

3189 of 8504 relevant lines covered (37.5%)

32.05 hits per line

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

45.28

/src/components/DecodeTxs/index.tsx

import { ReactElement, useState } from 'react'
import styled from 'styled-components'
import { Transaction } from '@gnosis.pm/safe-apps-sdk-v1'
import { DecodedDataBasicParameter, DecodedDataParameterValue } from '@gnosis.pm/safe-react-gateway-sdk'
import get from 'lodash/get'
import {
  Text,
  CopyToClipboardBtn,
  IconText,
  Accordion,
  AccordionSummary,
  AccordionDetails,
} from '@gnosis.pm/safe-react-components'

import Paragraph from 'src/components/layout/Paragraph'
import Row from 'src/components/layout/Row'
import { getExplorerInfo } from 'src/config'
import { DecodedTxDetailType } from 'src/routes/safe/components/Apps/components/ConfirmTxModal'
import PrefixedEthHashInfo from '../PrefixedEthHashInfo'
import { getByteLength } from 'src/utils/getByteLength'
import { getInteractionTitle } from 'src/routes/safe/components/Transactions/helpers/utils'
import {
  DecodedTxDetail,
  isDataDecodedParameterValue,
} from 'src/routes/safe/components/Apps/components/ConfirmTxModal/DecodedTxDetail'

const FlexWrapper = styled.div<{ margin: number }>`
  display: flex;
  align-items: center;

  > :nth-child(2) {
    margin-left: ${({ margin }) => margin}px;
  }
`

const StyledAccordionSummary = styled(AccordionSummary)`
  & .MuiAccordionSummary-content {
    justify-content: space-between;
  }
`

const BasicTxInfoWrapper = styled.div`
  margin-bottom: 15px;

  > :nth-child(2) {
    margin-bottom: 15px;
  }
`

const ElementWrapper = styled.div`
  margin-bottom: 15px;
`

export const BasicTxInfo = ({
  txRecipient,
  txData,
  txValue,
  recipientName,
}: {
  txRecipient: string
  txData: string
  txValue: string
  recipientName?: string
}): ReactElement => {
  return (
    <BasicTxInfoWrapper>
      {/* TO */}
      <>
        <Row margin="xs">
          <Paragraph color="disabled" noMargin size="lg">
            {getInteractionTitle(txValue)}
          </Paragraph>
        </Row>
        <PrefixedEthHashInfo
          hash={txRecipient}
          showAvatar
          textSize="lg"
          showCopyBtn
          name={recipientName}
          explorerUrl={getExplorerInfo(txRecipient)}
        />
      </>
      <>
        {/* Data */}
        <Row margin="xs">
          <Paragraph color="disabled" noMargin size="lg">
            Data (hex encoded):
          </Paragraph>
        </Row>
        <FlexWrapper margin={5}>
          <Paragraph noMargin size="lg">
            {txData ? getByteLength(txData) : 0} bytes
          </Paragraph>
          <CopyToClipboardBtn textToCopy={txData} />
        </FlexWrapper>
      </>
    </BasicTxInfoWrapper>
  )
}

export const getParameterElement = (parameter: DecodedDataBasicParameter, index: number): ReactElement => {
  let valueElement

  if (parameter.type === 'address') {
    valueElement = (
      <PrefixedEthHashInfo
        hash={parameter.value}
        showAvatar
        textSize="lg"
        showCopyBtn
        explorerUrl={getExplorerInfo(parameter.value)}
      />
    )
  }

  if (parameter.type.startsWith('bytes')) {
    valueElement = (
      <FlexWrapper margin={5}>
        <Text size="lg">{getByteLength(parameter.value)} bytes</Text>
        <CopyToClipboardBtn textToCopy={parameter.value} />
      </FlexWrapper>
    )
  }

  if (!valueElement) {
    let value = parameter.value
    if (parameter.type.endsWith('[]')) {
      try {
        value = JSON.stringify(parameter.value)
      } catch (e) {}
    }
    valueElement = <Text size="lg">{value}</Text>
  }

  return (
    <ElementWrapper key={index}>
      <Text size="lg" strong>
        {parameter.name} ({parameter.type})
      </Text>
      {valueElement}
    </ElementWrapper>
  )
}

const SingleTx = ({ decodedData }: { decodedData: DecodedTxDetailType }): ReactElement | null => {
  const [isAccordionExpanded, setIsAccordionExpanded] = useState(false)

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

  if (!decodedData) {
    return null
  }

  const method = isDataDecodedParameterValue(decodedData) ? decodedData.dataDecoded?.method : decodedData.method

  return (
    <Accordion compact expanded={isAccordionExpanded} onChange={onChangeExpand}>
      <StyledAccordionSummary>
        <IconText iconSize="sm" iconType="code" text="Contract interaction" textSize="xl" />
        <Text size="xl">{method}</Text>
      </StyledAccordionSummary>
      <AccordionDetails>
        <DecodedTxDetail decodedTxData={decodedData} />
      </AccordionDetails>
    </Accordion>
  )
}

const MultiSendTx = ({ decodedData }: { decodedData: DecodedTxDetailType }): ReactElement | null => {
  const txs: DecodedDataParameterValue[] | undefined = get(decodedData, 'parameters[0].valueDecoded')

  if (!txs) {
    return null
  }

  return (
    <>
      {txs.map((tx, index) => (
        <SingleTx key={`${tx.to}_${index}`} decodedData={tx} />
      ))}
    </>
  )
}

type Props = {
  txs: Transaction[]
  decodedData: DecodedTxDetailType
}

export const DecodeTxs = ({ txs, decodedData }: Props): ReactElement => {
  return txs.length > 1 ? <MultiSendTx decodedData={decodedData} /> : <SingleTx decodedData={decodedData} />
}

1	import { ReactElement, useState } from 'react'
2	import styled from 'styled-components'
3	import { Transaction } from '@gnosis.pm/safe-apps-sdk-v1'
4	import { DecodedDataBasicParameter, DecodedDataParameterValue } from '@gnosis.pm/safe-react-gateway-sdk'
5	import get from 'lodash/get'
6	import {
7	Text,
8	CopyToClipboardBtn,
9	IconText,
10	Accordion,
11	AccordionSummary,
12	AccordionDetails,
13	} from '@gnosis.pm/safe-react-components'
14
15	import Paragraph from 'src/components/layout/Paragraph'
16	import Row from 'src/components/layout/Row'
17	import { getExplorerInfo } from 'src/config'
18	import { DecodedTxDetailType } from 'src/routes/safe/components/Apps/components/ConfirmTxModal'
19	import PrefixedEthHashInfo from '../PrefixedEthHashInfo'
20	import { getByteLength } from 'src/utils/getByteLength'
21	import { getInteractionTitle } from 'src/routes/safe/components/Transactions/helpers/utils'
22	import {
23	DecodedTxDetail,
24	isDataDecodedParameterValue,
25	} from 'src/routes/safe/components/Apps/components/ConfirmTxModal/DecodedTxDetail'
26
27	const FlexWrapper = styled.div<{ margin: number }>`	2✔
28	display: flex;
29	align-items: center;
30
31	> :nth-child(2) {
32	margin-left: ${({ margin }) => margin}px;	9✔
33	}
34	`
35
36	const StyledAccordionSummary = styled(AccordionSummary)`	2✔
37	& .MuiAccordionSummary-content {
38	justify-content: space-between;
39	}
40	`
41
42	const BasicTxInfoWrapper = styled.div`	2✔
43	margin-bottom: 15px;
44
45	> :nth-child(2) {
46	margin-bottom: 15px;
47	}
48	`
49
50	const ElementWrapper = styled.div`	2✔
51	margin-bottom: 15px;
52	`
53
54	export const BasicTxInfo = ({	2✔
55	txRecipient,
56	txData,
57	txValue,
58	recipientName,
59	}: {
60	txRecipient: string
61	txData: string
62	txValue: string
63	recipientName?: string
64	}): ReactElement => {
65	return (	9✔
66	<BasicTxInfoWrapper>
67	{/* TO */}
68	<>
69	<Row margin="xs">
70	<Paragraph color="disabled" noMargin size="lg">
71	{getInteractionTitle(txValue)}
72	</Paragraph>
73	</Row>
74	<PrefixedEthHashInfo
75	hash={txRecipient}
76	showAvatar
77	textSize="lg"
78	showCopyBtn
79	name={recipientName}
80	explorerUrl={getExplorerInfo(txRecipient)}
81	/>
82	</>
83	<>
84	{/* Data */}
85	<Row margin="xs">
86	<Paragraph color="disabled" noMargin size="lg">
87	Data (hex encoded):
88	</Paragraph>
89	</Row>
90	<FlexWrapper margin={5}>
91	<Paragraph noMargin size="lg">
92	{txData ? getByteLength(txData) : 0} bytes	9!
93	</Paragraph>
94	<CopyToClipboardBtn textToCopy={txData} />
95	</FlexWrapper>
96	</>
97	</BasicTxInfoWrapper>
98	)
99	}
100
101	export const getParameterElement = (parameter: DecodedDataBasicParameter, index: number): ReactElement => {	2✔
102	let valueElement
103
104	if (parameter.type === 'address') {	×
105	valueElement = (	×
106	<PrefixedEthHashInfo
107	hash={parameter.value}
108	showAvatar
109	textSize="lg"
110	showCopyBtn
111	explorerUrl={getExplorerInfo(parameter.value)}
112	/>
113	)
114	}
115
116	if (parameter.type.startsWith('bytes')) {	×
117	valueElement = (	×
118	<FlexWrapper margin={5}>
119	<Text size="lg">{getByteLength(parameter.value)} bytes</Text>
120	<CopyToClipboardBtn textToCopy={parameter.value} />
121	</FlexWrapper>
122	)
123	}
124
125	if (!valueElement) {	×
126	let value = parameter.value	×
127	if (parameter.type.endsWith('[]')) {	×
128	try {	×
129	value = JSON.stringify(parameter.value)	×
130	} catch (e) {}
131	}
132	valueElement = <Text size="lg">{value}</Text>	×
133	}
134
135	return (	×
136	<ElementWrapper key={index}>
137	<Text size="lg" strong>
138	{parameter.name} ({parameter.type})
139	</Text>
140	{valueElement}
141	</ElementWrapper>
142	)
143	}
144
145	const SingleTx = ({ decodedData }: { decodedData: DecodedTxDetailType }): ReactElement \| null => {	2✔
146	const [isAccordionExpanded, setIsAccordionExpanded] = useState(false)	3✔
147
148	const onChangeExpand = () => {	3✔
149	setIsAccordionExpanded((prev) => !prev)	×
150	}
151
152	if (!decodedData) {	3!
153	return null	3✔
154	}
155
156	const method = isDataDecodedParameterValue(decodedData) ? decodedData.dataDecoded?.method : decodedData.method	×
157
158	return (	×
159	<Accordion compact expanded={isAccordionExpanded} onChange={onChangeExpand}>
160	<StyledAccordionSummary>
161	<IconText iconSize="sm" iconType="code" text="Contract interaction" textSize="xl" />
162	<Text size="xl">{method}</Text>
163	</StyledAccordionSummary>
164	<AccordionDetails>
165	<DecodedTxDetail decodedTxData={decodedData} />
166	</AccordionDetails>
167	</Accordion>
168	)
169	}
170
171	const MultiSendTx = ({ decodedData }: { decodedData: DecodedTxDetailType }): ReactElement \| null => {	2✔
172	const txs: DecodedDataParameterValue[] \| undefined = get(decodedData, 'parameters[0].valueDecoded')	2✔
173
174	if (!txs) {	2!
175	return null	2✔
176	}
177
178	return (	×
179	<>
180	{txs.map((tx, index) => (
181	<SingleTx key={`${tx.to}_${index}`} decodedData={tx} />	×
182	))}
183	</>
184	)
185	}
186
187	type Props = {
188	txs: Transaction[]
189	decodedData: DecodedTxDetailType
190	}
191
192	export const DecodeTxs = ({ txs, decodedData }: Props): ReactElement => {	2✔
193	return txs.length > 1 ? <MultiSendTx decodedData={decodedData} /> : <SingleTx decodedData={decodedData} />	5✔
194	}

gnosis / safe-react / 1752518619

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